@adyen/adyen-web 6.36.0 → 6.38.0

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, DualBrandSelectElement } 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 {\n    handlePartialAddressMode,\n    extractPropsForCardFields,\n    extractPropsForSFP,\n    getLayout,\n    shouldShowInstallmentsComponent,\n    requiresDualBrandSelection\n} 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 { InstallmentsState } 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 { CardBrandData, CardFocusData } from '../../../internal/SecuredFields/lib/types';\nimport { PREFIX } from '../../../internal/Icon/constants';\nimport useSRPanelForCardInputErrors from './useSRPanelForCardInputErrors';\nimport FastlaneSignup from '../Fastlane/FastlaneSignup';\nimport { fieldTypeToSnakeCase } from '../../../internal/SecuredFields/utils';\nimport { getErrorMessageFromCode } from '../../../../core/Errors/utils';\nimport { SF_ErrorCodes } from '../../../../core/Errors/constants';\nimport { usePrevious } from '../../../../utils/hookUtils';\nimport { AnalyticsInfoEvent, InfoEventType, UiTarget } from '../../../../core/Analytics/events/AnalyticsInfoEvent';\nimport { useAmount } from '../../../../core/Context/AmountProvider';\nimport { DUAL_BRANDS_THAT_NEED_SELECTION_MECHANISM } from '../../constants';\n\nconst CardInput = (props: Readonly<CardInputProps>) => {\n    const sfp = useRef<SecuredFieldsProvider>(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    const { amount } = useAmount();\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<DualBrandSelectElement[]>([]);\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) : null);\n    const [showSocialSecurityNumber, setShowSocialSecurityNumber] = useState(false);\n    const [socialSecurityNumber, setSocialSecurityNumber] = useState('');\n    const [installments, setInstallments] = useState<InstallmentsState>({ 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     * This stores the brand as detected by the internal regEx.\n     * It eventually gets overwritten by the brand as detected by the /binLookup, but will revert back to the regEx detection\n     * if the PAN length drops below the /binLookup digit threshold.\n     * Default value, 'card', indicates no brand detected\n     */\n    const [internallyDetectedBrand, setInternallyDetectedBrand] = useState('card');\n\n    /**\n     * Used tho show and hide the pay button and instructions text\n     * Should mimic the same logic as CardInput loading wrapper\n     */\n    const [showCardUIElements, setShowCardUIElements] = useState(false);\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 = shouldShowInstallmentsComponent({\n        installmentOptions: props.installmentOptions,\n        fundingSource: props.fundingSource,\n        amount\n    });\n\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 | CardFocusData) => {\n        props.onFocus({ fieldType: who, event: e });\n    };\n    const onFieldBlurAnalytics = (who: string, e: Event | CardFocusData) => {\n        props.onBlur({ fieldType: who, event: e });\n    };\n\n    const onBrand = useCallback((obj: CardBrandData) => {\n        setInternallyDetectedBrand(obj.brand);\n        props.onBrand(obj);\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 mapSfpErrorsToCardInputErrors = (sfpErrors: SFPState['errors']): Partial<CardInputErrorState> => {\n        if (!sfpErrors) return {};\n\n        return {\n            encryptedCardNumber: !!sfpErrors.encryptedCardNumber,\n            encryptedExpiryDate: !!sfpErrors.encryptedExpiryDate,\n            encryptedSecurityCode: !!sfpErrors.encryptedSecurityCode,\n            encryptedPassword: !!sfpErrors.encryptedPassword\n        };\n    };\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, null) ? 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, ...mapSfpErrorsToCardInputErrors(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    /**\n     * Listen to the full SecureFieldsProvider state and handle actions\n     * Used right now to mimic the loading status changes, this can only be done this way\n     * Trying to do it via onConfiguSuccess or onChange has side effects\n     */\n    const handleSFPStateUpdate = useCallback(\n        sfpState => {\n            mimicLoadingStatusChange(sfpState);\n        },\n        [showCardUIElements, setShowCardUIElements]\n    );\n\n    /**\n     * This function implements the same logic that LoadingProvider uses to show and hide elements\n     * We want to mimic this behavior so we can hide and show the pay button or the instructions text\n     * Deciding to do it this way since we garante there's no DOM changes to merchants\n     * We can break this in the next major version (v7)\n     */\n    const mimicLoadingStatusChange = (sfpState: SFPState) => {\n        if (!sfpState.status) return;\n        if (sfpState.status == 'loading') {\n            setShowCardUIElements(false);\n        } else {\n            setShowCardUIElements(true);\n        }\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    useEffect(() => {\n        if (currentErrorsSortedByLayout) {\n            const newErrors = getArrayDifferences<SortedErrorObject, string>(currentErrorsSortedByLayout, previousSortedErrors, 'field');\n\n            newErrors?.forEach(errorItem => {\n                const event = new AnalyticsInfoEvent({\n                    component: props.type,\n                    type: InfoEventType.validationError,\n                    target: fieldTypeToSnakeCase(errorItem.field) as UiTarget,\n                    validationErrorCode: errorItem.errorCode,\n                    validationErrorMessage: getErrorMessageFromCode(errorItem.errorCode, SF_ErrorCodes)\n                });\n                props.onSubmitAnalytics(event);\n            });\n        }\n    }, [currentErrorsSortedByLayout]);\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     * \"Update\" handler related to dual brand buttons being initially displayed\n     */\n    useEffect(() => {\n        if (dualBrandSelectElements.length > 0 && dualBrandSelectElements) {\n            const dualBrandsArr: string[] = dualBrandSelectElements.map(item => item.id);\n            const brand = dualBrandsArr[0]; // initially selected brand\n            const dualBrands = dualBrandsArr.toString();\n\n            const showDualBrandSelector = dualBrandSelectElements\n                ? requiresDualBrandSelection(DUAL_BRANDS_THAT_NEED_SELECTION_MECHANISM, dualBrandSelectElements, 'id')\n                : false;\n\n            // Only send analytics event about displaying dualBrand selector for countries that need to show a selection mechanism\n            if (showDualBrandSelector) {\n                const event = new AnalyticsInfoEvent({\n                    component: props.type,\n                    type: InfoEventType.displayed,\n                    target: UiTarget.dualBrandButton,\n                    brand,\n                    configData: { dualBrands }\n                });\n\n                props.onSubmitAnalytics(event);\n            }\n        }\n    }, [dualBrandSelectElements]);\n\n    const previousSelectedBrandValue = usePrevious(selectedBrandValue);\n\n    /**\n     * \"Update\" handler related to a dual brand button being selected\n     */\n    useEffect(() => {\n        if (previousSelectedBrandValue?.length && selectedBrandValue?.length) {\n            const event = new AnalyticsInfoEvent({\n                component: props.type,\n                type: InfoEventType.selected,\n                target: UiTarget.dualBrandButton,\n                brand: selectedBrandValue\n            });\n\n            props.onSubmitAnalytics(event);\n        }\n    }, [selectedBrandValue]);\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                onSubmitAnalytics={props.onSubmitAnalytics}\n                onChange={handleSecuredFieldsChange}\n                onBrand={onBrand}\n                onFocus={handleFocus}\n                onStateUpdate={handleSFPStateUpdate}\n                type={props.brand}\n                componentType={props.type}\n                disableIOSArrowKeys={props.disableIOSArrowKeys ? handleTouchstartIOS : null}\n                render={({ setRootNode, setFocusOn }, sfpState: 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                        {showCardUIElements && <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\n            {props.fastlaneConfiguration && (\n                <FastlaneSignup\n                    {...props.fastlaneConfiguration}\n                    currentDetectedBrand={internallyDetectedBrand}\n                    onChange={props.onChange}\n                    onSubmitAnalytics={props.onSubmitAnalytics}\n                    type={props.type}\n                />\n            )}\n\n            {showCardUIElements &&\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","amount","useAmount","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","internallyDetectedBrand","setInternallyDetectedBrand","showCardUIElements","setShowCardUIElements","handleChangeFor","triggerValidation","formData","formValid","formErrors","setSchema","setFormData","setFormValid","setFormErrors","useForm","schema","defaultData","formatters","cardInputFormatters","rules","cardInputValidationRules","hasInstallments","shouldShowInstallmentsComponent","installmentOptions","fundingSource","showAmountsInInstallments","showInstallmentAmounts","isKorea","countryCode","showKCP","configuration","koreanAuthenticationRequired","showBrazilianSSN","socialSecurityNumberMode","onFieldFocusAnalytics","who","e","onFocus","fieldType","event","onFieldBlurAnalytics","onBlur","onBrand","useCallback","obj","handleFocus","getFocusHandler","retrieveLayout","getLayout","countrySpecificSchemas","getAddressSchemaForCountry","billingAddressRequiredFields","handleTouchstartIOS","elementType","name","handleAddress","getAddressHandler","doPanAutoJump","getAutoJumpHandler","handleSFPStateUpdate","sfpState","mimicLoadingStatusChange","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","AnalyticsInfoEvent","component","type","InfoEventType","validationError","target","fieldTypeToSnakeCase","field","validationErrorCode","errorCode","validationErrorMessage","getErrorMessageFromCode","SF_ErrorCodes","onSubmitAnalytics","holderNameValid","sfpValid","addressValid","koreanAuthentication","encryptedPassword","socialSecurityNumberValid","isValid","sfStateErrorsObj","mapErrorsToValidationRuleResult","mergedErrors","onChange","dualBrandsArr","map","item","id","dualBrands","toString","requiresDualBrandSelection","DUAL_BRANDS_THAT_NEED_SELECTION_MECHANISM","displayed","UiTarget","dualBrandButton","configData","previousSelectedBrandValue","usePrevious","selected","FieldToRender","StoredCardFieldsWrapper","CardFieldsWrapper","h","Fragment","SecuredFieldsProvider","extractPropsForSFP","styles","hasKoreanFields","sfState","eventDetails","autoCompleteName","holderNameValidationFn","getRuleByNameAndMode","acHolderName","sfpErrors","autoFocus","ENCRYPTED_CARD_NUMBER","encryptedCardNumber","encryptedExpiryDate","encryptedSecurityCode","onStateUpdate","componentType","disableIOSArrowKeys","render","setRootNode","div","className","classNames","role","FormInstruction","extractPropsForCardFields","handleInstallments","brandsIcons","handleOnStoreDetails","billingAddressValidationRules","getPartialAddressValidationRules","onAddressLookup","onAddressSelected","addressSearchDebounceMs","fastlaneConfiguration","FastlaneSignup","currentDetectedBrand","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, DualBrandSelectElement } 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 {\n    handlePartialAddressMode,\n    extractPropsForCardFields,\n    extractPropsForSFP,\n    getLayout,\n    shouldShowInstallmentsComponent,\n    requiresDualBrandSelection\n} 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 { InstallmentsState } 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 { CardBrandData, CardFocusData } from '../../../internal/SecuredFields/lib/types';\nimport { PREFIX } from '../../../internal/Icon/constants';\nimport useSRPanelForCardInputErrors from './useSRPanelForCardInputErrors';\nimport FastlaneSignup from '../Fastlane/FastlaneSignup';\nimport { fieldTypeToSnakeCase } from '../../../internal/SecuredFields/utils';\nimport { getErrorMessageFromCode } from '../../../../core/Errors/utils';\nimport { SF_ErrorCodes } from '../../../../core/Errors/constants';\nimport { usePrevious } from '../../../../utils/hookUtils';\nimport { AnalyticsInfoEvent, InfoEventType, UiTarget } from '../../../../core/Analytics/events/AnalyticsInfoEvent';\nimport { useAmount } from '../../../../core/Context/AmountProvider';\nimport { DUAL_BRANDS_THAT_NEED_SELECTION_MECHANISM } from '../../constants';\n\nconst CardInput = (props: Readonly<CardInputProps>) => {\n    const sfp = useRef<SecuredFieldsProvider>(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    const { amount } = useAmount();\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<DualBrandSelectElement[]>([]);\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) : null);\n    const [showSocialSecurityNumber, setShowSocialSecurityNumber] = useState(false);\n    const [socialSecurityNumber, setSocialSecurityNumber] = useState('');\n    const [installments, setInstallments] = useState<InstallmentsState>({ 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     * This stores the brand as detected by the internal regEx.\n     * It eventually gets overwritten by the brand as detected by the /binLookup, but will revert back to the regEx detection\n     * if the PAN length drops below the /binLookup digit threshold.\n     * Default value, 'card', indicates no brand detected\n     */\n    const [internallyDetectedBrand, setInternallyDetectedBrand] = useState('card');\n\n    /**\n     * Used tho show and hide the pay button and instructions text\n     * Should mimic the same logic as CardInput loading wrapper\n     */\n    const [showCardUIElements, setShowCardUIElements] = useState(false);\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 = shouldShowInstallmentsComponent({\n        installmentOptions: props.installmentOptions,\n        fundingSource: props.fundingSource,\n        amount\n    });\n\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 | CardFocusData) => {\n        props.onFocus({ fieldType: who, event: e });\n    };\n    const onFieldBlurAnalytics = (who: string, e: Event | CardFocusData) => {\n        props.onBlur({ fieldType: who, event: e });\n    };\n\n    const onBrand = useCallback((obj: CardBrandData) => {\n        setInternallyDetectedBrand(obj.brand);\n        props.onBrand(obj);\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 mapSfpErrorsToCardInputErrors = (sfpErrors: SFPState['errors']): Partial<CardInputErrorState> => {\n        if (!sfpErrors) return {};\n\n        return {\n            encryptedCardNumber: !!sfpErrors.encryptedCardNumber,\n            encryptedExpiryDate: !!sfpErrors.encryptedExpiryDate,\n            encryptedSecurityCode: !!sfpErrors.encryptedSecurityCode,\n            encryptedPassword: !!sfpErrors.encryptedPassword\n        };\n    };\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, null) ? 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, ...mapSfpErrorsToCardInputErrors(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    /**\n     * Listen to the full SecureFieldsProvider state and handle actions\n     * Used right now to mimic the loading status changes, this can only be done this way\n     * Trying to do it via onConfiguSuccess or onChange has side effects\n     */\n    const handleSFPStateUpdate = useCallback(\n        sfpState => {\n            mimicLoadingStatusChange(sfpState);\n        },\n        [showCardUIElements, setShowCardUIElements]\n    );\n\n    /**\n     * This function implements the same logic that LoadingProvider uses to show and hide elements\n     * We want to mimic this behavior so we can hide and show the pay button or the instructions text\n     * Deciding to do it this way since we garante there's no DOM changes to merchants\n     * We can break this in the next major version (v7)\n     */\n    const mimicLoadingStatusChange = (sfpState: SFPState) => {\n        if (!sfpState.status) return;\n        if (sfpState.status == 'loading') {\n            setShowCardUIElements(false);\n        } else {\n            setShowCardUIElements(true);\n        }\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    useEffect(() => {\n        if (currentErrorsSortedByLayout) {\n            const newErrors = getArrayDifferences<SortedErrorObject, string>(currentErrorsSortedByLayout, previousSortedErrors, 'field');\n\n            newErrors?.forEach(errorItem => {\n                const event = new AnalyticsInfoEvent({\n                    component: props.type,\n                    type: InfoEventType.validationError,\n                    target: fieldTypeToSnakeCase(errorItem.field) as UiTarget,\n                    validationErrorCode: errorItem.errorCode,\n                    validationErrorMessage: getErrorMessageFromCode(errorItem.errorCode, SF_ErrorCodes)\n                });\n                props.onSubmitAnalytics(event);\n            });\n        }\n    }, [currentErrorsSortedByLayout]);\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     * \"Update\" handler related to dual brand buttons being initially displayed\n     */\n    useEffect(() => {\n        if (dualBrandSelectElements.length > 0 && dualBrandSelectElements) {\n            const dualBrandsArr: string[] = dualBrandSelectElements.map(item => item.id);\n            const brand = dualBrandsArr[0]; // initially selected brand\n            const dualBrands = dualBrandsArr.toString();\n\n            const showDualBrandSelector = dualBrandSelectElements\n                ? requiresDualBrandSelection(DUAL_BRANDS_THAT_NEED_SELECTION_MECHANISM, dualBrandSelectElements, 'id')\n                : false;\n\n            // Only send analytics event about displaying dualBrand selector for countries that need to show a selection mechanism\n            if (showDualBrandSelector) {\n                const event = new AnalyticsInfoEvent({\n                    component: props.type,\n                    type: InfoEventType.displayed,\n                    target: UiTarget.dualBrandButton,\n                    brand,\n                    configData: { dualBrands }\n                });\n\n                props.onSubmitAnalytics(event);\n            }\n        }\n    }, [dualBrandSelectElements]);\n\n    const previousSelectedBrandValue = usePrevious(selectedBrandValue);\n\n    /**\n     * \"Update\" handler related to a dual brand button being selected\n     */\n    useEffect(() => {\n        if (previousSelectedBrandValue?.length && selectedBrandValue?.length) {\n            const event = new AnalyticsInfoEvent({\n                component: props.type,\n                type: InfoEventType.selected,\n                target: UiTarget.dualBrandButton,\n                brand: selectedBrandValue\n            });\n\n            props.onSubmitAnalytics(event);\n        }\n    }, [selectedBrandValue]);\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                onSubmitAnalytics={props.onSubmitAnalytics}\n                onChange={handleSecuredFieldsChange}\n                onBrand={onBrand}\n                onFocus={handleFocus}\n                onStateUpdate={handleSFPStateUpdate}\n                type={props.brand}\n                componentType={props.type}\n                disableIOSArrowKeys={props.disableIOSArrowKeys ? handleTouchstartIOS : null}\n                render={({ setRootNode, setFocusOn }, sfpState: 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                        {showCardUIElements && <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\n            {props.fastlaneConfiguration && (\n                <FastlaneSignup\n                    {...props.fastlaneConfiguration}\n                    currentDetectedBrand={internallyDetectedBrand}\n                    onChange={props.onChange}\n                    onSubmitAnalytics={props.onSubmitAnalytics}\n                    type={props.type}\n                />\n            )}\n\n            {showCardUIElements &&\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","amount","useAmount","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","internallyDetectedBrand","setInternallyDetectedBrand","showCardUIElements","setShowCardUIElements","handleChangeFor","triggerValidation","formData","formValid","formErrors","setSchema","setFormData","setFormValid","setFormErrors","useForm","schema","defaultData","formatters","cardInputFormatters","rules","cardInputValidationRules","hasInstallments","shouldShowInstallmentsComponent","installmentOptions","fundingSource","showAmountsInInstallments","showInstallmentAmounts","isKorea","countryCode","showKCP","configuration","koreanAuthenticationRequired","showBrazilianSSN","socialSecurityNumberMode","onFieldFocusAnalytics","who","e","onFocus","fieldType","event","onFieldBlurAnalytics","onBlur","onBrand","useCallback","obj","handleFocus","getFocusHandler","retrieveLayout","getLayout","countrySpecificSchemas","getAddressSchemaForCountry","billingAddressRequiredFields","handleTouchstartIOS","elementType","name","handleAddress","getAddressHandler","doPanAutoJump","getAutoJumpHandler","handleSFPStateUpdate","sfpState","mimicLoadingStatusChange","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","AnalyticsInfoEvent","component","type","InfoEventType","validationError","target","fieldTypeToSnakeCase","field","validationErrorCode","errorCode","validationErrorMessage","getErrorMessageFromCode","SF_ErrorCodes","onSubmitAnalytics","holderNameValid","sfpValid","addressValid","koreanAuthentication","encryptedPassword","socialSecurityNumberValid","isValid","sfStateErrorsObj","mapErrorsToValidationRuleResult","mergedErrors","onChange","dualBrandsArr","map","item","id","dualBrands","toString","requiresDualBrandSelection","DUAL_BRANDS_THAT_NEED_SELECTION_MECHANISM","displayed","UiTarget","dualBrandButton","configData","previousSelectedBrandValue","usePrevious","selected","FieldToRender","StoredCardFieldsWrapper","CardFieldsWrapper","h","Fragment","SecuredFieldsProvider","extractPropsForSFP","styles","hasKoreanFields","sfState","eventDetails","autoCompleteName","holderNameValidationFn","getRuleByNameAndMode","acHolderName","sfpErrors","autoFocus","ENCRYPTED_CARD_NUMBER","encryptedCardNumber","encryptedExpiryDate","encryptedSecurityCode","onStateUpdate","componentType","disableIOSArrowKeys","render","setRootNode","div","className","classNames","role","FormInstruction","extractPropsForCardFields","handleInstallments","brandsIcons","handleOnStoreDetails","billingAddressValidationRules","getPartialAddressValidationRules","onAddressLookup","onAddressSelected","addressSearchDebounceMs","fastlaneConfiguration","FastlaneSignup","currentDetectedBrand","showPayButton","payButton","variant","isPayButtonPrimaryVariant","icon","imageFolder","PREFIX","defaultProps"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-import{createElement as r}from"../../../../../../external/preact/dist/preact.js";import{useMemo as a}from"../../../../../../external/preact/hooks/dist/hooks.js";import n from"../../../../../../_virtual/index.js";import{getFullBrandName as e}from"../../utils.js";import{BrandIcons as o}from"../../../../../internal/BrandIcons/BrandIcons.js";const t=({brands:t,activeBrand:s})=>{if(!t?.length)return null;const c="card"!==s,d=a(()=>t.map(r=>({src:r.icon,alt:e(r.name)})),[t]);return r(o,{className:n("adyen-checkout__card__brands",{"adyen-checkout__card__brands--hidden":c}),brandIcons:d,smallIcons:!0,showIconOnError:!0,containerType:"grid"})};export{t as default};
+import{createElement as r}from"../../../../../../external/preact/dist/preact.js";import{useMemo as a}from"../../../../../../external/preact/hooks/dist/hooks.js";import n from"../../../../../../_virtual/index.js";import{getFullBrandName as e}from"../../utils.js";import{BrandIcons as o}from"../../../../../internal/BrandIcons/BrandIcons.js";const t=({brands:t,activeBrand:s})=>{if(!t?.length)return null;const c="card"!==s,d=a(()=>t.map(r=>({src:r.icon,alt:e(r.name)})),[t]);return r(o,{className:n("adyen-checkout__card__brands",{"adyen-checkout__card__brands--hidden":c}),brandIcons:d,smallIcons:!0,showIconOnError:!0,containerType:"grid",ariaHidden:c||void 0})};export{t as default};
 //# sourceMappingURL=AvailableBrands.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AvailableBrands.js","sources":["../../../../../../../../src/components/Card/components/CardInput/components/AvailableBrands/AvailableBrands.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useMemo } from 'preact/hooks';\nimport cn from 'classnames';\n\nimport { BrandConfiguration } from '../../../../types';\nimport { getFullBrandName } from '../../utils';\nimport { BrandIcons } from '../../../../../internal/BrandIcons/BrandIcons';\nimport './AvailableBrands.scss';\n\ntype AvailableBrands = Array<BrandConfiguration>;\n\ninterface PaymentMethodBrandsProps {\n    brands: AvailableBrands;\n    activeBrand: string;\n}\n\nconst AvailableBrands = ({ brands, activeBrand }: Readonly<PaymentMethodBrandsProps>) => {\n    if (!brands?.length) {\n        return null;\n    }\n\n    const isValidBrand = activeBrand !== 'card';\n\n    const brandIcons = useMemo(\n        () =>\n            brands.map(brand => ({\n                src: brand.icon,\n                alt: getFullBrandName(brand.name)\n            })),\n        [brands]\n    );\n\n    return (\n        <BrandIcons\n            className={cn('adyen-checkout__card__brands', {\n                'adyen-checkout__card__brands--hidden': isValidBrand\n            })}\n            brandIcons={brandIcons}\n            smallIcons\n            showIconOnError\n            containerType=\"grid\"\n        />\n    );\n};\n\nexport default AvailableBrands;\n"],"names":["AvailableBrands","brands","activeBrand","length","isValidBrand","brandIcons","useMemo","map","brand","src","icon","alt","getFullBrandName","name","h","BrandIcons","className","cn","smallIcons","showIconOnError","containerType"],"mappings":"oVAgBA,MAAMA,EAAkB,EAAGC,SAAQC,kBAC/B,IAAKD,GAAQE,OACT,OAAO,KAGX,MAAMC,EAA+B,SAAhBF,EAEfG,EAAaC,EACf,IACIL,EAAOM,IAAIC,KACPC,IAAKD,EAAME,KACXC,IAAKC,EAAiBJ,EAAMK,SAEpC,CAACZ,IAGL,OACIa,EAACC,EAAAA,CACGC,UAAWC,EAAG,+BAAgC,CAC1C,uCAAwCb,IAE5CC,WAAYA,EACZa,YAAAA,EACAC,iBAAAA,EACAC,cAAc"}
+{"version":3,"file":"AvailableBrands.js","sources":["../../../../../../../../src/components/Card/components/CardInput/components/AvailableBrands/AvailableBrands.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useMemo } from 'preact/hooks';\nimport cn from 'classnames';\n\nimport { BrandConfiguration } from '../../../../types';\nimport { getFullBrandName } from '../../utils';\nimport { BrandIcons } from '../../../../../internal/BrandIcons/BrandIcons';\nimport './AvailableBrands.scss';\n\ntype AvailableBrands = Array<BrandConfiguration>;\n\ninterface PaymentMethodBrandsProps {\n    brands: AvailableBrands;\n    activeBrand: string;\n}\n\nconst AvailableBrands = ({ brands, activeBrand }: Readonly<PaymentMethodBrandsProps>) => {\n    if (!brands?.length) {\n        return null;\n    }\n\n    const isValidBrand = activeBrand !== 'card';\n\n    const brandIcons = useMemo(\n        () =>\n            brands.map(brand => ({\n                src: brand.icon,\n                alt: getFullBrandName(brand.name)\n            })),\n        [brands]\n    );\n\n    return (\n        <BrandIcons\n            className={cn('adyen-checkout__card__brands', {\n                'adyen-checkout__card__brands--hidden': isValidBrand\n            })}\n            brandIcons={brandIcons}\n            smallIcons\n            showIconOnError\n            containerType=\"grid\"\n            ariaHidden={isValidBrand || undefined}\n        />\n    );\n};\n\nexport default AvailableBrands;\n"],"names":["AvailableBrands","brands","activeBrand","length","isValidBrand","brandIcons","useMemo","map","brand","src","icon","alt","getFullBrandName","name","h","BrandIcons","className","cn","smallIcons","showIconOnError","containerType","ariaHidden","undefined"],"mappings":"oVAgBA,MAAMA,EAAkB,EAAGC,SAAQC,kBAC/B,IAAKD,GAAQE,OACT,OAAO,KAGX,MAAMC,EAA+B,SAAhBF,EAEfG,EAAaC,EACf,IACIL,EAAOM,IAAIC,KACPC,IAAKD,EAAME,KACXC,IAAKC,EAAiBJ,EAAMK,SAEpC,CAACZ,IAGL,OACIa,EAACC,EAAAA,CACGC,UAAWC,EAAG,+BAAgC,CAC1C,uCAAwCb,IAE5CC,WAAYA,EACZa,YAAAA,EACAC,iBAAAA,EACAC,cAAc,OACdC,WAAYjB,QAAgBkB"}

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

@@ -1,2 +1,2 @@
-import{createElement as r}from"../../../../../external/preact/dist/preact.js";import{getCardImageUrl as a,getFullBrandName as e}from"../utils.js";import t from"../../../../../core/Context/useImage.js";import{BrandImage as n}from"../../../../internal/BrandImage/BrandImage.js";function o({brand:o,brandsConfiguration:c}){const m=t(),d="card"===o?"nocard":o,i=c?.[o]?.icon??a(d,m);return r(n,{imgClassName:"adyen-checkout-card-input__icon adyen-checkout__card__cardNumber__brandIcon",alt:e(o),src:i})}export{o as default};
+import{createElement as r}from"../../../../../external/preact/dist/preact.js";import{getCardImageUrl as a,getFullBrandName as e}from"../utils.js";import t from"../../../../../core/Context/useImage.js";import{BrandImage as n}from"../../../../internal/BrandImage/BrandImage.js";function o({brand:o,brandsConfiguration:c}){const m=t(),d="card"===o,i=d?"nocard":o,s=c?.[o]?.icon??a(i,m);return r(n,{imgClassName:"adyen-checkout-card-input__icon adyen-checkout__card__cardNumber__brandIcon",alt:d?"":e(o),src:s})}export{o as default};
 //# sourceMappingURL=BrandIcon.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BrandIcon.js","sources":["../../../../../../../src/components/Card/components/CardInput/components/BrandIcon.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { getCardImageUrl, getFullBrandName } from '../utils';\nimport { BrandIconProps } from './types';\nimport useImage from '../../../../../core/Context/useImage';\nimport { BrandImage } from '../../../../internal/BrandImage';\n\nexport default function BrandIcon({ brand, brandsConfiguration }: Readonly<BrandIconProps>) {\n    const getImage = useImage();\n    const imageName = brand === 'card' ? 'nocard' : brand;\n    const imageUrl = brandsConfiguration?.[brand]?.icon ?? getCardImageUrl(imageName, getImage);\n    const imgClassName = `adyen-checkout-card-input__icon adyen-checkout__card__cardNumber__brandIcon`;\n\n    return <BrandImage imgClassName={imgClassName} alt={getFullBrandName(brand)} src={imageUrl} />;\n}\n"],"names":["BrandIcon","brand","brandsConfiguration","getImage","useImage","imageName","imageUrl","icon","getCardImageUrl","h","BrandImage","imgClassName","alt","getFullBrandName","src"],"mappings":"oRAMe,SAASA,GAAUC,MAAEA,EAAKC,oBAAEA,IACvC,MAAMC,EAAWC,IACXC,EAAsB,SAAVJ,EAAmB,SAAWA,EAC1CK,EAAWJ,IAAsBD,IAAQM,MAAQC,EAAgBH,EAAWF,GAGlF,OAAOM,EAACC,EAAAA,CAAWC,aAFE,8EAE0BC,IAAKC,EAAiBZ,GAAQa,IAAKR,GACtF"}
+{"version":3,"file":"BrandIcon.js","sources":["../../../../../../../src/components/Card/components/CardInput/components/BrandIcon.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { getCardImageUrl, getFullBrandName } from '../utils';\nimport { BrandIconProps } from './types';\nimport useImage from '../../../../../core/Context/useImage';\nimport { BrandImage } from '../../../../internal/BrandImage';\n\nexport default function BrandIcon({ brand, brandsConfiguration }: Readonly<BrandIconProps>) {\n    const getImage = useImage();\n    const isPlaceholderIcon = brand === 'card';\n    const imageName = isPlaceholderIcon ? 'nocard' : brand;\n    const imageUrl = brandsConfiguration?.[brand]?.icon ?? getCardImageUrl(imageName, getImage);\n    const imgClassName = `adyen-checkout-card-input__icon adyen-checkout__card__cardNumber__brandIcon`;\n\n    return <BrandImage imgClassName={imgClassName} alt={isPlaceholderIcon ? '' : getFullBrandName(brand)} src={imageUrl} />;\n}\n"],"names":["BrandIcon","brand","brandsConfiguration","getImage","useImage","isPlaceholderIcon","imageName","imageUrl","icon","getCardImageUrl","h","BrandImage","imgClassName","alt","getFullBrandName","src"],"mappings":"oRAMe,SAASA,GAAUC,MAAEA,EAAKC,oBAAEA,IACvC,MAAMC,EAAWC,IACXC,EAA8B,SAAVJ,EACpBK,EAAYD,EAAoB,SAAWJ,EAC3CM,EAAWL,IAAsBD,IAAQO,MAAQC,EAAgBH,EAAWH,GAGlF,OAAOO,EAACC,EAAAA,CAAWC,aAFE,8EAE0BC,IAAKR,EAAoB,GAAKS,EAAiBb,GAAQc,IAAKR,GAC/G"}

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"../../../../../_virtual/index.js";import o from"./CVCHint.js";import i from"../../../../internal/FormFields/Field/Field.js";import{useCoreContext as r}from"../../../../../core/Context/CoreProvider.js";import{CVC_POLICY_REQUIRED as a,CVC_POLICY_OPTIONAL as n,CVC_POLICY_HIDDEN as c,ENCRYPTED_SECURITY_CODE as l}from"../../../../internal/SecuredFields/lib/constants.js";import d from"./DataSfSpan.js";import{alternativeLabelContent as s}from"./FieldLabelAlternative.js";function u(u){const{label:_,onFocusField:m=()=>{},error:p="",className:f="",classNameModifiers:C=[],focused:y,filled:h,isValid:x,frontCVC:F=!1,cvcPolicy:k=a,showContextualElement:v,contextualText:b}=u,{i18n:j}=r(),V=t(f,{"adyen-checkout__field__cvc":!0,"adyen-checkout__card__cvc__input--hidden":k===c,"adyen-checkout__field__cvc--optional":k===n}),N=t({"adyen-checkout__input":!0,"adyen-checkout__input--small":!0,"adyen-checkout__card__cvc__input":!0,"adyen-checkout__input--error":p,"adyen-checkout__input--focus":y,"adyen-checkout__input--valid":x}),T=k!==n?_:j.get("creditCard.securityCode.label.optional"),E=`${T} ${b}`;return e(i,{label:T,focused:y,filled:h,classNameModifiers:[...C,"securityCode"],onFocusField:()=>m(l),className:V,errorMessage:p,isValid:x,dir:"ltr",name:l,i18n:j,contextVisibleToScreenReader:!1,useLabelElement:!1,renderAlternativeToLabel:s,showContextualElement:v,contextualText:b,onInputContainerClick:()=>{m(l)}},e(d,{encryptedFieldType:l,className:N}),e(o,{frontCVC:F,fieldLabel:E}))}export{u as default};
+import{createElement as e}from"../../../../../external/preact/dist/preact.js";import t from"../../../../../_virtual/index.js";import o from"./CVCHint.js";import i from"../../../../internal/FormFields/Field/Field.js";import{useCoreContext as r}from"../../../../../core/Context/CoreProvider.js";import{CVC_POLICY_REQUIRED as n,CVC_POLICY_OPTIONAL as a,CVC_POLICY_HIDDEN as c,ENCRYPTED_SECURITY_CODE as l}from"../../../../internal/SecuredFields/lib/constants.js";import d from"./DataSfSpan.js";import{alternativeLabelContent as s}from"./FieldLabelAlternative.js";function u(u){const{label:_,onFocusField:m=()=>{},error:p="",className:f="",classNameModifiers:C=[],focused:y,filled:h,isValid:x,frontCVC:F=!1,cvcPolicy:k=n,showContextualElement:v,contextualText:b}=u,{i18n:j}=r(),V=t(f,{"adyen-checkout__field__cvc":!0,"adyen-checkout__card__cvc__input--hidden":k===c,"adyen-checkout__field__cvc--optional":k===a}),N=t({"adyen-checkout__input":!0,"adyen-checkout__input--small":!0,"adyen-checkout__card__cvc__input":!0,"adyen-checkout__input--error":p,"adyen-checkout__input--focus":y,"adyen-checkout__input--valid":x}),T=k!==a?_:j.get("creditCard.securityCode.label.optional");return e(i,{label:T,focused:y,filled:h,classNameModifiers:[...C,"securityCode"],onFocusField:()=>m(l),className:V,errorMessage:p,isValid:x,dir:"ltr",name:l,i18n:j,contextVisibleToScreenReader:!1,useLabelElement:!1,renderAlternativeToLabel:s,showContextualElement:v,contextualText:b,onInputContainerClick:()=>{m(l)}},e(d,{encryptedFieldType:l,className:N}),e(o,{frontCVC:F}))}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 './FieldLabelAlternative';\nimport './CVC.scss';\n\nexport default function CVC(props: Readonly<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    const handleIconClick = () => {\n        onFocusField(ENCRYPTED_SECURITY_CODE);\n    };\n\n    const imageDescription = `${fieldLabel} ${contextualText}`;\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            onInputContainerClick={handleIconClick}\n        >\n            <DataSfSpan encryptedFieldType={ENCRYPTED_SECURITY_CODE} className={cvcClassnames} />\n\n            <CVCHint frontCVC={frontCVC} fieldLabel={imageDescription} />\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","imageDescription","h","Field","ENCRYPTED_SECURITY_CODE","errorMessage","dir","name","contextVisibleToScreenReader","useLabelElement","renderAlternativeToLabel","alternativeLabelContent","onInputContainerClick","DataSfSpan","encryptedFieldType","CVCHint"],"mappings":"gjBAgBe,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,0CAMlEC,EAAmB,GAAGF,KAAcR,IAE1C,OACIW,EAACC,EAAAA,CACGxB,MAAOoB,EACPf,QAASA,EACTC,OAAQA,EACRF,mBAAoB,IAAIA,EAAoB,gBAC5CH,aAAc,IAAMA,EAAawB,GACjCtB,UAAWY,EACXW,aAAcxB,EACdK,QAASA,EACToB,IAAK,MACLC,KAAMH,EACNZ,KAAMA,EACNgB,8BAA8B,EAC9BC,iBAAiB,EACjBC,yBAA0BC,EAC1BrB,sBAAuBA,EACvBC,eAAgBA,EAChBqB,sBAxBgB,KACpBhC,EAAawB,KAyBTF,EAACW,EAAAA,CAAWC,mBAAoBV,EAAyBtB,UAAWgB,IAEpEI,EAACa,EAAAA,CAAQ5B,SAAUA,EAAUY,WAAYE,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';\nimport './CVC.scss';\n\nexport default function CVC(props: Readonly<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    const handleIconClick = () => {\n        onFocusField(ENCRYPTED_SECURITY_CODE);\n    };\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            onInputContainerClick={handleIconClick}\n        >\n            <DataSfSpan encryptedFieldType={ENCRYPTED_SECURITY_CODE} className={cvcClassnames} />\n\n            <CVCHint frontCVC={frontCVC} />\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","onInputContainerClick","DataSfSpan","encryptedFieldType","CVCHint"],"mappings":"gjBAgBe,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,0CAMxE,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,EAChBoB,sBAtBgB,KACpB/B,EAAauB,KAuBTF,EAACW,EAAAA,CAAWC,mBAAoBV,EAAyBrB,UAAWgB,IAEpEG,EAACa,EAAAA,CAAQ3B,SAAUA,IAG/B"}

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

@@ -1,2 +1,2 @@
-import{createElement as t}from"../../../../../external/preact/dist/preact.js";import c from"../../../../../_virtual/index.js";function e({frontCVC:e=!1,fieldLabel:_}){const i=c({"adyen-checkout__card__cvc__hint__wrapper":!0,"adyen-checkout__field__cvc--front-hint":!!e,"adyen-checkout__field__cvc--back-hint":!e});return t("span",{className:i},t("svg",{className:"adyen-checkout__card__cvc__hint adyen-checkout__card__cvc__hint--front",width:"27",height:"18",viewBox:"0 0 27 18",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":!e,role:"img"},t("title",{id:"adyen-checkout__cvc__front-hint-img"},_),t("path",{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",fill:"#E6E9EB"}),t("rect",{x:"4",y:"12",width:"19",height:"2",fill:"#B9C4C9"}),t("rect",{x:"4",y:"4",width:"4",height:"4",rx:"1",fill:"white"}),t("rect",{className:"adyen-checkout__card__cvc__hint__location",x:"16.5",y:"4.5",width:"7",height:"5",rx:"2.5",stroke:"#C12424"})),t("svg",{className:"adyen-checkout__card__cvc__hint adyen-checkout__card__cvc__hint--back",width:"27",height:"18",viewBox:"0 0 27 18",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":!!e,role:"img"},t("title",{id:"adyen-checkout__cvc__back-hint-img"},_),t("path",{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",fill:"#E6E9EB"}),t("path",{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",fill:"#E6E9EB"}),t("rect",{y:"4.00012",width:"27",height:"3.00001",fill:"#687282"}),t("path",{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",fill:"white"}),t("rect",{className:"adyen-checkout__card__cvc__hint__location",x:"16.5",y:"9.5",width:"7",height:"5",rx:"2.5",stroke:"#C12424"})))}export{e as default};
+import{createElement as t}from"../../../../../external/preact/dist/preact.js";import c from"../../../../../_virtual/index.js";function e({frontCVC:e=!1}){const _=c({"adyen-checkout__card__cvc__hint__wrapper":!0,"adyen-checkout__field__cvc--front-hint":!!e,"adyen-checkout__field__cvc--back-hint":!e});return t("span",{className:_},t("svg",{className:"adyen-checkout__card__cvc__hint adyen-checkout__card__cvc__hint--front","data-testid":"cvc-hint-front",width:"27",height:"18",viewBox:"0 0 27 18",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":!0},t("path",{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",fill:"#E6E9EB"}),t("rect",{x:"4",y:"12",width:"19",height:"2",fill:"#B9C4C9"}),t("rect",{x:"4",y:"4",width:"4",height:"4",rx:"1",fill:"white"}),t("rect",{className:"adyen-checkout__card__cvc__hint__location",x:"16.5",y:"4.5",width:"7",height:"5",rx:"2.5",stroke:"#C12424"})),t("svg",{className:"adyen-checkout__card__cvc__hint adyen-checkout__card__cvc__hint--back","data-testid":"cvc-hint-back",width:"27",height:"18",viewBox:"0 0 27 18",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":!0},t("path",{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",fill:"#E6E9EB"}),t("path",{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",fill:"#E6E9EB"}),t("rect",{y:"4.00012",width:"27",height:"3.00001",fill:"#687282"}),t("path",{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",fill:"white"}),t("rect",{className:"adyen-checkout__card__cvc__hint__location",x:"16.5",y:"9.5",width:"7",height:"5",rx:"2.5",stroke:"#C12424"})))}export{e as default};
 //# sourceMappingURL=CVCHint.js.map

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 }: Readonly<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    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                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                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"],"names":["CVCHint","frontCVC","fieldLabel","hintClassnames","classNames","h","span","className","svg","width","height","viewBox","fill","xmlns","aria-hidden","role","title","id","path","d","rect","x","y","rx","stroke"],"mappings":"8HAIe,SAASA,GAAQC,SAAEA,GAAW,EAAKC,WAAEA,IAChD,MAAMC,EAAiBC,EAAW,CAC9B,4CAA4C,EAC5C,2CAA4CH,EAC5C,yCAA0CA,IAG9C,OACII,EAACC,OAAAA,CAAKC,UAAWJ,GACbE,EAACG,MAAAA,CACGD,UAAW,yEACXE,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,MAAM,6BACNC,eAAcb,EACdc,KAAM,OAENV,EAACW,QAAAA,CAAMC,GAAI,uCAAwCf,GACnDG,EAACa,OAAAA,CACGC,EAAE,0HACFP,KAAK,YAETP,EAACe,OAAAA,CAAKC,EAAE,IAAIC,EAAE,KAAKb,MAAM,KAAKC,OAAO,IAAIE,KAAK,YAC9CP,EAACe,OAAAA,CAAKC,EAAE,IAAIC,EAAE,IAAIb,MAAM,IAAIC,OAAO,IAAIa,GAAG,IAAIX,KAAK,UACnDP,EAACe,OAAAA,CAAKb,UAAW,4CAA6Cc,EAAE,OAAOC,EAAE,MAAMb,MAAM,IAAIC,OAAO,IAAIa,GAAG,MAAMC,OAAO,aAGxHnB,EAACG,MAAAA,CACGD,UAAW,wEACXE,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,MAAM,6BACNC,gBAAeb,EACfc,KAAM,OAENV,EAACW,QAAAA,CAAMC,GAAI,sCAAuCf,GAClDG,EAACa,OAAAA,CACGC,EAAE,wMACFP,KAAK,YAETP,EAACa,OAAAA,CACGC,EAAE,wMACFP,KAAK,YAETP,EAACe,OAAAA,CAAKE,EAAE,UAAUb,MAAM,KAAKC,OAAO,UAAUE,KAAK,YACnDP,EAACa,OAAAA,CACGC,EAAE,6HACFP,KAAK,UAETP,EAACe,OAAAA,CAAKb,UAAW,4CAA6Cc,EAAE,OAAOC,EAAE,MAAMb,MAAM,IAAIC,OAAO,IAAIa,GAAG,MAAMC,OAAO,aAIpI"}
+{"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 }: Readonly<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    return (\n        <span className={hintClassnames}>\n            <svg\n                className={'adyen-checkout__card__cvc__hint adyen-checkout__card__cvc__hint--front'}\n                data-testid=\"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={true}\n            >\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                data-testid=\"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={true}\n            >\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"],"names":["CVCHint","frontCVC","hintClassnames","classNames","h","span","className","svg","data-testid","width","height","viewBox","fill","xmlns","aria-hidden","path","d","rect","x","y","rx","stroke"],"mappings":"8HAIe,SAASA,GAAQC,SAAEA,GAAW,IACzC,MAAMC,EAAiBC,EAAW,CAC9B,4CAA4C,EAC5C,2CAA4CF,EAC5C,yCAA0CA,IAG9C,OACIG,EAACC,OAAAA,CAAKC,UAAWJ,GACbE,EAACG,MAAAA,CACGD,UAAW,yEACXE,cAAY,iBACZC,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,MAAM,6BACNC,eAAa,GAEbV,EAACW,OAAAA,CACGC,EAAE,0HACFJ,KAAK,YAETR,EAACa,OAAAA,CAAKC,EAAE,IAAIC,EAAE,KAAKV,MAAM,KAAKC,OAAO,IAAIE,KAAK,YAC9CR,EAACa,OAAAA,CAAKC,EAAE,IAAIC,EAAE,IAAIV,MAAM,IAAIC,OAAO,IAAIU,GAAG,IAAIR,KAAK,UACnDR,EAACa,OAAAA,CAAKX,UAAW,4CAA6CY,EAAE,OAAOC,EAAE,MAAMV,MAAM,IAAIC,OAAO,IAAIU,GAAG,MAAMC,OAAO,aAGxHjB,EAACG,MAAAA,CACGD,UAAW,wEACXE,cAAY,gBACZC,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,MAAM,6BACNC,eAAa,GAEbV,EAACW,OAAAA,CACGC,EAAE,wMACFJ,KAAK,YAETR,EAACW,OAAAA,CACGC,EAAE,wMACFJ,KAAK,YAETR,EAACa,OAAAA,CAAKE,EAAE,UAAUV,MAAM,KAAKC,OAAO,UAAUE,KAAK,YACnDR,EAACW,OAAAA,CACGC,EAAE,6HACFJ,KAAK,UAETR,EAACa,OAAAA,CAAKX,UAAW,4CAA6CY,EAAE,OAAOC,EAAE,MAAMV,MAAM,IAAIC,OAAO,IAAIU,GAAG,MAAMC,OAAO,aAIpI"}

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 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';\nimport './CardNumber.scss';\nimport { requiresDualBrandSelection } from '../utils';\nimport { DUAL_BRANDS_THAT_NEED_SELECTION_MECHANISM } from '../../../constants';\nimport DualBrandSelector from './DualBrandSelector';\n\nexport default function CardNumber(props: Readonly<CardNumberProps>) {\n    const { i18n } = useCoreContext();\n    const {\n        error = '',\n        isValid = false,\n        onFocusField = () => {},\n        dualBrandingElements,\n        dualBrandingChangeHandler,\n        brandsConfiguration,\n        selectedBrandValue\n    } = props;\n\n    const handleIconClick = () => {\n        onFocusField(ENCRYPTED_CARD_NUMBER);\n    };\n\n    const showDualBrandSelector = dualBrandingElements\n        ? requiresDualBrandSelection(DUAL_BRANDS_THAT_NEED_SELECTION_MECHANISM, dualBrandingElements, 'id')\n        : false;\n\n    // Unlike other fields we don't respect the 'showContextualElement' config prop (that the merchant can set to false)\n    // We always show the contextual text for dual branding that requires selection\n    const contextualText = showDualBrandSelector ? i18n.get('creditCard.dualBrand.description') : undefined;\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            onInputContainerClick={handleIconClick}\n            contextualText={contextualText}\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 className={classNames(['adyen-checkout__card__dual-branding__icons'])}>\n                    {showDualBrandSelector ? (\n                        <DualBrandSelector\n                            dualBrandingElements={dualBrandingElements}\n                            dualBrandingChangeHandler={dualBrandingChangeHandler}\n                            brandsConfiguration={brandsConfiguration}\n                            selectedBrandValue={selectedBrandValue}\n                        />\n                    ) : (\n                        dualBrandingElements.map(element => {\n                            return <BrandIcon key={element.id} brand={element.id} brandsConfiguration={props.brandsConfiguration} />;\n                        })\n                    )}\n                </div>\n            )}\n            <span className=\"adyen-checkout__card__dual-branding__sr-only\" aria-live=\"polite\">\n                {contextualText}\n            </span>\n        </Field>\n    );\n}\n"],"names":["CardNumber","props","i18n","useCoreContext","error","isValid","onFocusField","dualBrandingElements","dualBrandingChangeHandler","brandsConfiguration","selectedBrandValue","showDualBrandSelector","requiresDualBrandSelection","DUAL_BRANDS_THAT_NEED_SELECTION_MECHANISM","contextualText","get","undefined","h","Field","label","focused","filled","classNameModifiers","ENCRYPTED_CARD_NUMBER","errorMessage","dir","name","showValidIcon","contextVisibleToScreenReader","useLabelElement","renderAlternativeToLabel","alternativeLabelContent","onInputContainerClick","DataSfSpan","encryptedFieldType","className","classNames","showBrandIcon","BrandIcon","brand","div","DualBrandSelector","map","element","key","id","span","aria-live"],"mappings":"wpBAce,SAASA,EAAWC,GAC/B,MAAMC,KAAEA,GAASC,KACXC,MACFA,EAAQ,GAAEC,QACVA,GAAU,EAAKC,aACfA,EAAe,OAAQC,qBACvBA,EAAoBC,0BACpBA,EAAyBC,oBACzBA,EAAmBC,mBACnBA,GACAT,EAMEU,IAAwBJ,GACxBK,EAA2BC,EAA2CN,EAAsB,MAK5FO,EAAiBH,EAAwBT,EAAKa,IAAI,yCAAsCC,EAE9F,OACIC,EAACC,EAAAA,CACGC,MAAOlB,EAAMkB,MACbC,QAASnB,EAAMmB,QACfC,OAAQpB,EAAMoB,OACdC,mBAAoB,CAAC,cACrBhB,aAAc,IAAMA,EAAaiB,GACjCC,aAAcpB,EACdC,QAASA,EACToB,IAAK,MACLC,KAAMH,EACNI,eAAe,EACfzB,KAAMA,EACN0B,8BAA8B,EAC9BC,iBAAiB,EACjBC,yBAA0BC,EAC1BC,sBA5BgB,KACpB1B,EAAaiB,IA4BTT,eAAgBA,GAEhBG,EAACgB,EAAAA,CACGC,mBAAoBX,EACpBY,UAAWC,EAAW,CAClB,yBAAyB,EACzB,gCAAgC,EAChC,2CAA2C,EAC3C,+BAAgChC,EAChC,+BAAgCH,EAAMmB,QACtC,+BAAgCf,EAChC,oDAAqDJ,EAAMoC,kBAIlEpC,EAAMoC,gBAAkB9B,GAAwBU,EAACqB,EAAAA,CAAU7B,oBAAqBR,EAAMQ,oBAAqB8B,MAAOtC,EAAMsC,QAExHhC,IAAyBH,GACtBa,EAACuB,MAAAA,CAAIL,UAAWC,EAAW,CAAC,gDACvBzB,EACGM,EAACwB,EAAAA,CACGlC,qBAAsBA,EACtBC,0BAA2BA,EAC3BC,oBAAqBA,EACrBC,mBAAoBA,IAGxBH,EAAqBmC,IAAIC,GACd1B,EAACqB,EAAAA,CAAUM,IAAKD,EAAQE,GAAIN,MAAOI,EAAQE,GAAIpC,oBAAqBR,EAAMQ,wBAKjGQ,EAAC6B,OAAAA,CAAKX,UAAU,+CAA+CY,YAAU,UACpEjC,GAIjB"}
+{"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 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';\nimport './CardNumber.scss';\nimport { requiresDualBrandSelection } from '../utils';\nimport { DUAL_BRANDS_THAT_NEED_SELECTION_MECHANISM } from '../../../constants';\nimport DualBrandSelector from './DualBrandSelector';\n\nexport default function CardNumber(props: Readonly<CardNumberProps>) {\n    const { i18n } = useCoreContext();\n    const {\n        error = '',\n        isValid = false,\n        onFocusField = () => {},\n        dualBrandingElements,\n        dualBrandingChangeHandler,\n        brandsConfiguration,\n        selectedBrandValue\n    } = props;\n\n    const handleIconClick = () => {\n        onFocusField(ENCRYPTED_CARD_NUMBER);\n    };\n\n    const showDualBrandSelector = dualBrandingElements\n        ? requiresDualBrandSelection(DUAL_BRANDS_THAT_NEED_SELECTION_MECHANISM, dualBrandingElements, 'id')\n        : false;\n\n    // Unlike other fields we don't respect the 'showContextualElement' config prop (that the merchant can set to false)\n    // We always show the contextual text for dual branding that requires selection\n    const contextualText = showDualBrandSelector ? i18n.get('creditCard.dualBrand.description') : undefined;\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            onInputContainerClick={handleIconClick}\n            contextualText={contextualText}\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            />\n\n            {props.showBrandIcon && !dualBrandingElements && <BrandIcon brandsConfiguration={props.brandsConfiguration} brand={props.brand} />}\n\n            {dualBrandingElements && !error && (\n                <div className={classNames(['adyen-checkout__card__dual-branding__icons'])}>\n                    {showDualBrandSelector ? (\n                        <DualBrandSelector\n                            dualBrandingElements={dualBrandingElements}\n                            dualBrandingChangeHandler={dualBrandingChangeHandler}\n                            brandsConfiguration={brandsConfiguration}\n                            selectedBrandValue={selectedBrandValue}\n                        />\n                    ) : (\n                        dualBrandingElements.map(element => {\n                            return <BrandIcon key={element.id} brand={element.id} brandsConfiguration={props.brandsConfiguration} />;\n                        })\n                    )}\n                </div>\n            )}\n            <span className=\"adyen-checkout__card__dual-branding__sr-only\" aria-live=\"polite\">\n                {contextualText}\n            </span>\n        </Field>\n    );\n}\n"],"names":["CardNumber","props","i18n","useCoreContext","error","isValid","onFocusField","dualBrandingElements","dualBrandingChangeHandler","brandsConfiguration","selectedBrandValue","showDualBrandSelector","requiresDualBrandSelection","DUAL_BRANDS_THAT_NEED_SELECTION_MECHANISM","contextualText","get","undefined","h","Field","label","focused","filled","classNameModifiers","ENCRYPTED_CARD_NUMBER","errorMessage","dir","name","showValidIcon","contextVisibleToScreenReader","useLabelElement","renderAlternativeToLabel","alternativeLabelContent","onInputContainerClick","DataSfSpan","encryptedFieldType","className","classNames","showBrandIcon","BrandIcon","brand","div","DualBrandSelector","map","element","key","id","span","aria-live"],"mappings":"wpBAce,SAASA,EAAWC,GAC/B,MAAMC,KAAEA,GAASC,KACXC,MACFA,EAAQ,GAAEC,QACVA,GAAU,EAAKC,aACfA,EAAe,OAAQC,qBACvBA,EAAoBC,0BACpBA,EAAyBC,oBACzBA,EAAmBC,mBACnBA,GACAT,EAMEU,IAAwBJ,GACxBK,EAA2BC,EAA2CN,EAAsB,MAK5FO,EAAiBH,EAAwBT,EAAKa,IAAI,yCAAsCC,EAE9F,OACIC,EAACC,EAAAA,CACGC,MAAOlB,EAAMkB,MACbC,QAASnB,EAAMmB,QACfC,OAAQpB,EAAMoB,OACdC,mBAAoB,CAAC,cACrBhB,aAAc,IAAMA,EAAaiB,GACjCC,aAAcpB,EACdC,QAASA,EACToB,IAAK,MACLC,KAAMH,EACNI,eAAe,EACfzB,KAAMA,EACN0B,8BAA8B,EAC9BC,iBAAiB,EACjBC,yBAA0BC,EAC1BC,sBA5BgB,KACpB1B,EAAaiB,IA4BTT,eAAgBA,GAEhBG,EAACgB,EAAAA,CACGC,mBAAoBX,EACpBY,UAAWC,EAAW,CAClB,yBAAyB,EACzB,gCAAgC,EAChC,2CAA2C,EAC3C,+BAAgChC,EAChC,+BAAgCH,EAAMmB,QACtC,+BAAgCf,EAChC,oDAAqDJ,EAAMoC,kBAIlEpC,EAAMoC,gBAAkB9B,GAAwBU,EAACqB,EAAAA,CAAU7B,oBAAqBR,EAAMQ,oBAAqB8B,MAAOtC,EAAMsC,QAExHhC,IAAyBH,GACtBa,EAACuB,MAAAA,CAAIL,UAAWC,EAAW,CAAC,gDACvBzB,EACGM,EAACwB,EAAAA,CACGlC,qBAAsBA,EACtBC,0BAA2BA,EAC3BC,oBAAqBA,EACrBC,mBAAoBA,IAGxBH,EAAqBmC,IAAIC,GACd1B,EAACqB,EAAAA,CAAUM,IAAKD,EAAQE,GAAIN,MAAOI,EAAQE,GAAIpC,oBAAqBR,EAAMQ,wBAKjGQ,EAAC6B,OAAAA,CAAKX,UAAU,+CAA+CY,YAAU,UACpEjC,GAIjB"}

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"../../../../../_virtual/index.js";import a from"../../../../internal/FormFields/Field/Field.js";import{useCoreContext as i}from"../../../../../core/Context/CoreProvider.js";import r from"./DataSfSpan.js";import{DATE_POLICY_REQUIRED as n,DATE_POLICY_OPTIONAL as o,DATE_POLICY_HIDDEN as d,ENCRYPTED_EXPIRY_DATE as l}from"../../../../internal/SecuredFields/lib/constants.js";import c from"../../../../../core/Context/useImage.js";import{alternativeLabelContent as _}from"./FieldLabelAlternative.js";import{BrandImage as s}from"../../../../internal/BrandImage/BrandImage.js";function p(p){const{label:m,focused:u,filled:f,onFocusField:x,className:h="",classNameModifiers:y=[],error:k="",isValid:F=!1,expiryDatePolicy:j=n,showContextualElement:C,contextualText:b}=p,{i18n:g}=i(),N=c(),w=t(h,{"adyen-checkout__field__exp-date":!0,"adyen-checkout__card__exp-date__input--hidden":j===d,"adyen-checkout__field__exp-date--optional":j===o}),v=j!==o?m:`${m} ${g.get("field.title.optional")}`,E=`${v} ${b}`;return e(a,{label:v,classNameModifiers:[...y,"expiryDate"],className:w,focused:u,filled:f,onFocusField:()=>x(l),errorMessage:k,isValid:F,dir:"ltr",name:"encryptedExpiryDate",i18n:g,contextVisibleToScreenReader:!1,useLabelElement:!1,renderAlternativeToLabel:_,showContextualElement:C,contextualText:b,onInputContainerClick:()=>{x(l)}},e(r,{encryptedFieldType:l,className:t("adyen-checkout__input","adyen-checkout__input--small","adyen-checkout__card__exp-date__input",{"adyen-checkout__input--error":k,"adyen-checkout__input--focus":u,"adyen-checkout__input--valid":F})}),e(s,{wrapperClassName:k||F?t("adyen-checkout__field__exp-date_hint_wrapper","adyen-checkout__field__exp-date_hint_wrapper--hidden"):"adyen-checkout__field__exp-date_hint_wrapper",imgClassName:"adyen-checkout__field__exp-date_hint",alt:E,src:N({imageFolder:"components/"})("expiry_date_hint")}))}export{p as default};
+import{createElement as e}from"../../../../../external/preact/dist/preact.js";import t from"../../../../../_virtual/index.js";import a from"../../../../internal/FormFields/Field/Field.js";import{useCoreContext as i}from"../../../../../core/Context/CoreProvider.js";import r from"./DataSfSpan.js";import{DATE_POLICY_REQUIRED as n,DATE_POLICY_OPTIONAL as o,DATE_POLICY_HIDDEN as d,ENCRYPTED_EXPIRY_DATE as l}from"../../../../internal/SecuredFields/lib/constants.js";import c from"../../../../../core/Context/useImage.js";import{alternativeLabelContent as _}from"./FieldLabelAlternative.js";import{BrandImage as s}from"../../../../internal/BrandImage/BrandImage.js";function p(p){const{label:m,focused:u,filled:f,onFocusField:x,className:h="",classNameModifiers:y=[],error:k="",isValid:F=!1,expiryDatePolicy:j=n,showContextualElement:C,contextualText:b}=p,{i18n:g}=i(),N=c(),w=t(h,{"adyen-checkout__field__exp-date":!0,"adyen-checkout__card__exp-date__input--hidden":j===d,"adyen-checkout__field__exp-date--optional":j===o}),v=j!==o?m:`${m} ${g.get("field.title.optional")}`;return e(a,{label:v,classNameModifiers:[...y,"expiryDate"],className:w,focused:u,filled:f,onFocusField:()=>x(l),errorMessage:k,isValid:F,dir:"ltr",name:"encryptedExpiryDate",i18n:g,contextVisibleToScreenReader:!1,useLabelElement:!1,renderAlternativeToLabel:_,showContextualElement:C,contextualText:b,onInputContainerClick:()=>{x(l)}},e(r,{encryptedFieldType:l,className:t("adyen-checkout__input","adyen-checkout__input--small","adyen-checkout__card__exp-date__input",{"adyen-checkout__input--error":k,"adyen-checkout__input--focus":u,"adyen-checkout__input--valid":F})}),e(s,{wrapperClassName:k||F?t("adyen-checkout__field__exp-date_hint_wrapper","adyen-checkout__field__exp-date_hint_wrapper--hidden"):"adyen-checkout__field__exp-date_hint_wrapper",imgClassName:"adyen-checkout__field__exp-date_hint",alt:"",src:N({imageFolder:"components/"})("expiry_date_hint")}))}export{p 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';\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';\nimport { BrandImage } from '../../../../internal/BrandImage';\nimport './ExpirationDate.scss';\n\nexport default function ExpirationDate(props: Readonly<ExpirationDateProps>) {\n    const {\n        label,\n        focused,\n        filled,\n        onFocusField,\n        className = '',\n        classNameModifiers = [],\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    const imageDescription = `${fieldLabel} ${contextualText}`;\n\n    return (\n        <Field\n            label={fieldLabel}\n            classNameModifiers={[...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            onInputContainerClick={() => {\n                onFocusField(ENCRYPTED_EXPIRY_DATE);\n            }}\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            <BrandImage\n                wrapperClassName={\n                    error || isValid\n                        ? classNames('adyen-checkout__field__exp-date_hint_wrapper', 'adyen-checkout__field__exp-date_hint_wrapper--hidden')\n                        : 'adyen-checkout__field__exp-date_hint_wrapper'\n                }\n                imgClassName={'adyen-checkout__field__exp-date_hint'}\n                alt={imageDescription}\n                src={getImage({ imageFolder: 'components/' })('expiry_date_hint')}\n            />\n        </Field>\n    );\n}\n"],"names":["ExpirationDate","props","label","focused","filled","onFocusField","className","classNameModifiers","error","isValid","expiryDatePolicy","DATE_POLICY_REQUIRED","showContextualElement","contextualText","i18n","useCoreContext","getImage","useImage","fieldClassnames","classNames","DATE_POLICY_HIDDEN","DATE_POLICY_OPTIONAL","fieldLabel","get","imageDescription","h","Field","ENCRYPTED_EXPIRY_DATE","errorMessage","dir","name","contextVisibleToScreenReader","useLabelElement","renderAlternativeToLabel","alternativeLabelContent","onInputContainerClick","DataSfSpan","encryptedFieldType","BrandImage","wrapperClassName","imgClassName","alt","src","imageFolder"],"mappings":"upBAiBe,SAASA,EAAeC,GACnC,MAAMC,MACFA,EAAKC,QACLA,EAAOC,OACPA,EAAMC,aACNA,EAAYC,UACZA,EAAY,GAAEC,mBACdA,EAAqB,GAAEC,MACvBA,EAAQ,GAAEC,QACVA,GAAU,EAAKC,iBACfA,EAAmBC,EAAoBC,sBACvCA,EAAqBC,eACrBA,GACAZ,GACEa,KAAEA,GAASC,IACXC,EAAWC,IAEXC,EAAkBC,EAAWb,EAAW,CAC1C,mCAAmC,EACnC,gDAAiDI,IAAqBU,EACtE,4CAA6CV,IAAqBW,IAGhEC,EAAaZ,IAAqBW,EAAuBnB,EAAQ,GAAGA,KAASY,EAAKS,IAAI,0BAEtFC,EAAmB,GAAGF,KAAcT,IAE1C,OACIY,EAACC,EAAAA,CACGxB,MAAOoB,EACPf,mBAAoB,IAAIA,EAAoB,cAC5CD,UAAWY,EACXf,QAASA,EACTC,OAAQA,EACRC,aAAc,IAAMA,EAAasB,GACjCC,aAAcpB,EACdC,QAASA,EACToB,IAAK,MACLC,KAAM,sBACNhB,KAAMA,EACNiB,8BAA8B,EAC9BC,iBAAiB,EACjBC,yBAA0BC,EAC1BtB,sBAAuBA,EACvBC,eAAgBA,EAChBsB,sBAAuB,KACnB9B,EAAasB,KAGjBF,EAACW,EAAAA,CACGC,mBAAoBV,EACpBrB,UAAWa,EAAW,wBAAyB,+BAAgC,wCAAyC,CACpH,+BAAgCX,EAChC,+BAAgCL,EAChC,+BAAgCM,MAGxCgB,EAACa,EAAAA,CACGC,iBACI/B,GAASC,EACHU,EAAW,+CAAgD,wDAC3D,+CAEVqB,aAAc,uCACdC,IAAKjB,EACLkB,IAAK1B,EAAS,CAAE2B,YAAa,eAAxB3B,CAAyC,sBAI9D"}
+{"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';\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';\nimport { BrandImage } from '../../../../internal/BrandImage';\nimport './ExpirationDate.scss';\n\nexport default function ExpirationDate(props: Readonly<ExpirationDateProps>) {\n    const {\n        label,\n        focused,\n        filled,\n        onFocusField,\n        className = '',\n        classNameModifiers = [],\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={[...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            onInputContainerClick={() => {\n                onFocusField(ENCRYPTED_EXPIRY_DATE);\n            }}\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            <BrandImage\n                wrapperClassName={\n                    error || isValid\n                        ? classNames('adyen-checkout__field__exp-date_hint_wrapper', 'adyen-checkout__field__exp-date_hint_wrapper--hidden')\n                        : 'adyen-checkout__field__exp-date_hint_wrapper'\n                }\n                imgClassName={'adyen-checkout__field__exp-date_hint'}\n                alt=\"\"\n                src={getImage({ imageFolder: 'components/' })('expiry_date_hint')}\n            />\n        </Field>\n    );\n}\n"],"names":["ExpirationDate","props","label","focused","filled","onFocusField","className","classNameModifiers","error","isValid","expiryDatePolicy","DATE_POLICY_REQUIRED","showContextualElement","contextualText","i18n","useCoreContext","getImage","useImage","fieldClassnames","classNames","DATE_POLICY_HIDDEN","DATE_POLICY_OPTIONAL","fieldLabel","get","h","Field","ENCRYPTED_EXPIRY_DATE","errorMessage","dir","name","contextVisibleToScreenReader","useLabelElement","renderAlternativeToLabel","alternativeLabelContent","onInputContainerClick","DataSfSpan","encryptedFieldType","BrandImage","wrapperClassName","imgClassName","alt","src","imageFolder"],"mappings":"upBAiBe,SAASA,EAAeC,GACnC,MAAMC,MACFA,EAAKC,QACLA,EAAOC,OACPA,EAAMC,aACNA,EAAYC,UACZA,EAAY,GAAEC,mBACdA,EAAqB,GAAEC,MACvBA,EAAQ,GAAEC,QACVA,GAAU,EAAKC,iBACfA,EAAmBC,EAAoBC,sBACvCA,EAAqBC,eACrBA,GACAZ,GACEa,KAAEA,GAASC,IACXC,EAAWC,IAEXC,EAAkBC,EAAWb,EAAW,CAC1C,mCAAmC,EACnC,gDAAiDI,IAAqBU,EACtE,4CAA6CV,IAAqBW,IAGhEC,EAAaZ,IAAqBW,EAAuBnB,EAAQ,GAAGA,KAASY,EAAKS,IAAI,0BAE5F,OACIC,EAACC,EAAAA,CACGvB,MAAOoB,EACPf,mBAAoB,IAAIA,EAAoB,cAC5CD,UAAWY,EACXf,QAASA,EACTC,OAAQA,EACRC,aAAc,IAAMA,EAAaqB,GACjCC,aAAcnB,EACdC,QAASA,EACTmB,IAAK,MACLC,KAAM,sBACNf,KAAMA,EACNgB,8BAA8B,EAC9BC,iBAAiB,EACjBC,yBAA0BC,EAC1BrB,sBAAuBA,EACvBC,eAAgBA,EAChBqB,sBAAuB,KACnB7B,EAAaqB,KAGjBF,EAACW,EAAAA,CACGC,mBAAoBV,EACpBpB,UAAWa,EAAW,wBAAyB,+BAAgC,wCAAyC,CACpH,+BAAgCX,EAChC,+BAAgCL,EAChC,+BAAgCM,MAGxCe,EAACa,EAAAA,CACGC,iBACI9B,GAASC,EACHU,EAAW,+CAAgD,wDAC3D,+CAEVoB,aAAc,uCACdC,IAAI,GACJC,IAAKzB,EAAS,CAAE0B,YAAa,eAAxB1B,CAAyC,sBAI9D"}

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../../../src/components/Card/components/CardInput/utils.ts"],"sourcesContent":["import Language from '../../../../language/Language';\nimport { AddressModeOptions, CardInputProps, LayoutObj } from './types';\nimport {\n    CREDIT_CARD,\n    CREDIT_CARD_NAME_BOTTOM,\n    CREDIT_CARD_NAME_TOP,\n    KCP_CARD,\n    KCP_CARD_NAME_BOTTOM,\n    KCP_CARD_NAME_TOP,\n    SSN_CARD,\n    SSN_CARD_NAME_BOTTOM,\n    SSN_CARD_NAME_TOP\n} from './layouts';\nimport { AddressSpecifications, StringObject } from '../../../internal/Address/types';\nimport { PARTIAL_ADDRESS_SCHEMA } from '../../../internal/Address/constants';\nimport type { InstallmentOptions, InstallmentsState } from './components/Installments/Installments';\nimport { SFPProps } from '../../../internal/SecuredFields/SFP/types';\nimport { BRAND_READABLE_NAME_MAP } from '../../../internal/SecuredFields/lib/constants';\nimport useImage, { UseImageHookType } from '../../../../core/Context/useImage';\nimport { SF_ErrorCodes } from '../../../../core/Errors/constants';\nimport { BrandObject, CardBrandsConfiguration, DualBrandSelectElement, DualBrandButtons } from '../../types';\nimport { PaymentAmount } from '../../../../types';\n\nexport const getCardImageUrl = (brand: string, getImage: UseImageHookType): string => {\n    const imageOptions = {\n        type: brand === 'card' ? 'nocard' : brand || 'nocard',\n        extension: 'svg'\n    };\n\n    return getImage(imageOptions)(brand);\n};\n\n/**\n * 'installments' should be added to the payload if it has plan as revolving or bonus\n * or value greater than 1.\n *\n * More about it here: COWEB-1070\n */\nexport const shouldIncludeInstallmentsInPaymentData = (installment?: InstallmentsState): boolean => {\n    return ['revolving', 'bonus'].includes(installment?.plan) || installment?.value > 1;\n};\n\nexport const getLayout = ({\n    props,\n    showKCP,\n    showBrazilianSSN,\n    countrySpecificSchemas = null,\n    billingAddressRequiredFields = null\n}: LayoutObj): string[] => {\n    let layout = CREDIT_CARD;\n    const hasRequiredHolderName = props.hasHolderName && props.holderNameRequired;\n\n    if (hasRequiredHolderName) {\n        layout = props.positionHolderNameOnTop ? CREDIT_CARD_NAME_TOP : CREDIT_CARD_NAME_BOTTOM;\n    }\n\n    if (showKCP) {\n        layout = KCP_CARD;\n        if (hasRequiredHolderName) {\n            layout = props.positionHolderNameOnTop ? KCP_CARD_NAME_TOP : KCP_CARD_NAME_BOTTOM;\n        }\n    }\n\n    if (showBrazilianSSN) {\n        layout = SSN_CARD;\n        if (hasRequiredHolderName) {\n            layout = props.positionHolderNameOnTop ? SSN_CARD_NAME_TOP : SSN_CARD_NAME_BOTTOM;\n        }\n    }\n\n    // w. Billing address\n    if (countrySpecificSchemas) {\n        // Flatten array and remove any numbers that describe how fields should be aligned\n        const countrySpecificSchemasFlat: string[] = countrySpecificSchemas['flat'](2).filter(item => typeof item !== 'number') as string[];\n\n        let countryBasedAddressLayout = countrySpecificSchemasFlat;\n\n        if (billingAddressRequiredFields) {\n            // Get intersection of the 2 arrays\n            countryBasedAddressLayout = countrySpecificSchemasFlat.filter(x => billingAddressRequiredFields.includes(x));\n        }\n\n        layout = CREDIT_CARD.concat(countryBasedAddressLayout);\n        if (hasRequiredHolderName) {\n            layout = props.positionHolderNameOnTop\n                ? CREDIT_CARD_NAME_TOP.concat(countryBasedAddressLayout)\n                : CREDIT_CARD_NAME_BOTTOM.concat(countryBasedAddressLayout);\n        }\n        // TODO we are not yet creating a layout for AVS + SSN field (w. or w/o holderName) - is AVS + SSN a real world scenario?\n    }\n    return layout;\n};\n\n/**\n * Lookup service to map local (CardInput) field refs to a key, possibly region specific, by which to retrieve the translation\n */\nexport const mapFieldKey = (key: string, i18n: Language, countrySpecificLabels: StringObject): string => {\n    // console.log('### utils::mapFieldKey:: key', key);\n    switch (key) {\n        case 'socialSecurityNumber':\n            return i18n.get(`boleto.${key}`);\n        // Address related - if we have a country specific key for the field - use that to get the translation\n        case 'street':\n        case 'houseNumberOrName':\n        case 'postalCode':\n        case 'stateOrProvince':\n        case 'city':\n        case 'country':\n            return countrySpecificLabels?.[key] ? i18n.get(countrySpecificLabels?.[key]) : i18n.get(key);\n        // We know that the translated error messages do contain a reference to the field they refer to, so we won't need to map them (currently applies mostly to SecuredFields related errors)\n        default:\n            return null;\n    }\n};\n\nexport const extractPropsForCardFields = (props: CardInputProps) => {\n    return {\n        // Extract props for CardFieldsWrapper & StoredCardFieldsWrapper(just needs hasCVC, installmentOptions)\n        billingAddressRequired: props.billingAddressRequired,\n        billingAddressRequiredFields: props.billingAddressRequiredFields,\n        billingAddressAllowedCountries: props.billingAddressAllowedCountries,\n        brandsConfiguration: props.brandsConfiguration,\n        showStoreDetailsCheckbox: props.showStoreDetailsCheckbox,\n        hasCVC: props.hasCVC,\n        hasHolderName: props.hasHolderName,\n        holderNameRequired: props.holderNameRequired,\n        installmentOptions: props.installmentOptions,\n        placeholders: props.placeholders,\n        positionHolderNameOnTop: props.positionHolderNameOnTop,\n        // Extract props for CardFields > CardNumber\n        showBrandIcon: props.showBrandIcon,\n        showContextualElement: props.showContextualElement,\n        // Extract props for StoredCardFields\n        lastFour: props.lastFour,\n        expiryMonth: props.expiryMonth,\n        expiryYear: props.expiryYear,\n        disclaimerMessage: props.disclaimerMessage\n    };\n};\n\nexport const extractPropsForSFP = (props: CardInputProps): Pick<SFPProps, 'clientKey' | 'loadingContext'> & Partial<SFPProps> => {\n    return {\n        autoFocus: props.autoFocus,\n        brands: props.brands,\n        brandsConfiguration: props.brandsConfiguration,\n        clientKey: props.clientKey,\n        countryCode: props.countryCode,\n        forceCompat: props.forceCompat,\n        i18n: props.i18n,\n        implementationType: props.implementationType,\n        keypadFix: props.keypadFix,\n        legacyInputMode: props.legacyInputMode,\n        loadingContext: props.loadingContext,\n        maskSecurityCode: props.maskSecurityCode,\n        exposeExpiryDate: props.exposeExpiryDate,\n        minimumExpiryDate: props.minimumExpiryDate,\n        onAdditionalSFConfig: props.onAdditionalSFConfig,\n        onAdditionalSFRemoved: props.onAdditionalSFRemoved,\n        onAllValid: props.onAllValid,\n        onAutoComplete: props.onAutoComplete,\n        onBinValue: props.onBinValue,\n        onConfigSuccess: props.onConfigSuccess,\n        handleKeyPress: props.handleKeyPress,\n        onError: props.onError,\n        onFieldValid: props.onFieldValid,\n        onLoad: props.onLoad,\n        placeholders: props.placeholders,\n        resources: props.resources,\n        showContextualElement: props.showContextualElement,\n        showWarnings: props.showWarnings,\n        trimTrailingSeparator: props.trimTrailingSeparator\n    };\n};\n\nexport const handlePartialAddressMode = (addressMode: AddressModeOptions): AddressSpecifications | null => {\n    return addressMode == AddressModeOptions.partial ? PARTIAL_ADDRESS_SCHEMA : null;\n};\n\n// Almost all errors are blur based, but some SF ones are not i.e. when an unsupported card is entered or the expiry date is out of range\nexport function lookupBlurBasedErrors(errorCode) {\n    // If it's NOT one of these, then it's a blur based error\n    return ![\n        SF_ErrorCodes.ERROR_MSG_UNSUPPORTED_CARD_ENTERED,\n        SF_ErrorCodes.ERROR_MSG_CARD_TOO_OLD,\n        SF_ErrorCodes.ERROR_MSG_CARD_TOO_FAR_IN_FUTURE,\n        SF_ErrorCodes.ERROR_MSG_CARD_EXPIRES_TOO_SOON\n    ].includes(errorCode);\n}\n\nexport function getFullBrandName(brand: string): string {\n    return BRAND_READABLE_NAME_MAP[brand] ?? brand;\n}\n\nexport const mapDualBrandButtons = (\n    dualBrandSelectElements: DualBrandSelectElement[],\n    brandsConfiguration?: CardBrandsConfiguration\n): DualBrandButtons[] => {\n    return dualBrandSelectElements.map(item => {\n        const brand = item.id;\n        const getImage = useImage();\n        const imageName = brand === 'card' ? 'nocard' : brand;\n        const imageURL = brandsConfiguration?.[brand]?.icon ?? getCardImageUrl(imageName, getImage);\n\n        // TODO - check below if we have to still generate altName through the mapping function or whether it just\n        //  corresponds to item.brandObject.localeBrand\n        return {\n            id: item.id,\n            name: item.brandObject.localeBrand || item.brandObject.brand,\n            imageURL,\n            altName: getFullBrandName(brand)\n        };\n    });\n};\n\n/**\n *  Checks if any of the brands requiring a selection mechanism are present in the binLookup response.\n *\n * If the result from Array.some is true - then we are in a dual branding scenario that requires selection, i.e.\n * - Show the dualBranding selector UI\n * - Preselect a card brand\n */\nexport const requiresDualBrandSelection = (\n    brandsRequiringSelection: readonly string[],\n    returnedDualBrandingObjects: DualBrandSelectElement[] | BrandObject[],\n    key: string\n) => returnedDualBrandingObjects.some(item => brandsRequiringSelection.includes(item[key]));\n\n/**\n * Determines whether the Installments component should be rendered.\n *\n * Installments Component is displayed when:\n * - installmentOptions is provided and not empty\n * - amount is provided and not zero\n * - fundingSource is not provided or is 'credit'\n *\n * @param params.installmentOptions - The installment configuration options\n * @param params.fundingSource - The card funding source (e.g. 'credit', 'debit')\n * @param params.amount - The payment amount\n * @returns Whether the Installments component should be rendered\n */\nexport const shouldShowInstallmentsComponent = ({\n    installmentOptions,\n    fundingSource,\n    amount\n}: {\n    installmentOptions?: InstallmentOptions;\n    fundingSource?: string;\n    amount?: PaymentAmount;\n}): boolean => {\n    if (!installmentOptions || Object.keys(installmentOptions).length === 0) return false;\n    if (!amount || amount.value === 0) return false;\n    if (fundingSource && fundingSource !== 'credit') return false;\n\n    return true;\n};\n"],"names":["getCardImageUrl","brand","getImage","type","extension","shouldIncludeInstallmentsInPaymentData","installment","includes","plan","value","getLayout","props","showKCP","showBrazilianSSN","countrySpecificSchemas","billingAddressRequiredFields","layout","CREDIT_CARD","hasRequiredHolderName","hasHolderName","holderNameRequired","positionHolderNameOnTop","CREDIT_CARD_NAME_TOP","CREDIT_CARD_NAME_BOTTOM","KCP_CARD","KCP_CARD_NAME_TOP","KCP_CARD_NAME_BOTTOM","SSN_CARD","SSN_CARD_NAME_TOP","SSN_CARD_NAME_BOTTOM","countrySpecificSchemasFlat","filter","item","countryBasedAddressLayout","x","concat","mapFieldKey","key","i18n","countrySpecificLabels","get","extractPropsForCardFields","billingAddressRequired","billingAddressAllowedCountries","brandsConfiguration","showStoreDetailsCheckbox","hasCVC","installmentOptions","placeholders","showBrandIcon","showContextualElement","lastFour","expiryMonth","expiryYear","disclaimerMessage","extractPropsForSFP","autoFocus","brands","clientKey","countryCode","forceCompat","implementationType","keypadFix","legacyInputMode","loadingContext","maskSecurityCode","exposeExpiryDate","minimumExpiryDate","onAdditionalSFConfig","onAdditionalSFRemoved","onAllValid","onAutoComplete","onBinValue","onConfigSuccess","handleKeyPress","onError","onFieldValid","onLoad","resources","showWarnings","trimTrailingSeparator","handlePartialAddressMode","addressMode","AddressModeOptions","partial","PARTIAL_ADDRESS_SCHEMA","lookupBlurBasedErrors","errorCode","SF_ErrorCodes","ERROR_MSG_UNSUPPORTED_CARD_ENTERED","ERROR_MSG_CARD_TOO_OLD","ERROR_MSG_CARD_TOO_FAR_IN_FUTURE","ERROR_MSG_CARD_EXPIRES_TOO_SOON","getFullBrandName","BRAND_READABLE_NAME_MAP","mapDualBrandButtons","dualBrandSelectElements","map","id","useImage","imageName","imageURL","icon","name","brandObject","localeBrand","altName","requiresDualBrandSelection","brandsRequiringSelection","returnedDualBrandingObjects","some","shouldShowInstallmentsComponent","fundingSource","amount","Object","keys","length"],"mappings":"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"}
+{"version":3,"file":"utils.js","sources":["../../../../../../src/components/Card/components/CardInput/utils.ts"],"sourcesContent":["import Language from '../../../../language/Language';\nimport { AddressModeOptions, CardInputProps, LayoutObj } from './types';\nimport {\n    CREDIT_CARD,\n    CREDIT_CARD_NAME_BOTTOM,\n    CREDIT_CARD_NAME_TOP,\n    KCP_CARD,\n    KCP_CARD_NAME_BOTTOM,\n    KCP_CARD_NAME_TOP,\n    SSN_CARD,\n    SSN_CARD_NAME_BOTTOM,\n    SSN_CARD_NAME_TOP\n} from './layouts';\nimport { AddressSpecifications, StringObject } from '../../../internal/Address/types';\nimport { PARTIAL_ADDRESS_SCHEMA } from '../../../internal/Address/constants';\nimport type { InstallmentOptions, InstallmentsState } from './components/Installments/Installments';\nimport { SFPProps } from '../../../internal/SecuredFields/SFP/types';\nimport { BRAND_READABLE_NAME_MAP } from '../../../internal/SecuredFields/lib/constants';\nimport useImage, { UseImageHookType } from '../../../../core/Context/useImage';\nimport { SF_ErrorCodes } from '../../../../core/Errors/constants';\nimport { BrandObject, CardBrandsConfiguration, DualBrandSelectElement, DualBrandButtons } from '../../types';\nimport { PaymentAmount } from '../../../../types';\n\nexport const getCardImageUrl = (brand: string, getImage: UseImageHookType): string => {\n    const imageOptions = {\n        type: brand === 'card' ? 'nocard' : brand || 'nocard',\n        extension: 'svg'\n    };\n\n    return getImage(imageOptions)(brand);\n};\n\n/**\n * 'installments' should be added to the payload if it has plan as revolving or bonus\n * or value greater than 1.\n *\n * More about it here: COWEB-1070\n */\nexport const shouldIncludeInstallmentsInPaymentData = (installment?: InstallmentsState): boolean => {\n    return ['revolving', 'bonus'].includes(installment?.plan) || installment?.value > 1;\n};\n\nexport const getLayout = ({\n    props,\n    showKCP,\n    showBrazilianSSN,\n    countrySpecificSchemas = null,\n    billingAddressRequiredFields = null\n}: LayoutObj): string[] => {\n    let layout = CREDIT_CARD;\n    const hasRequiredHolderName = props.hasHolderName && props.holderNameRequired;\n\n    if (hasRequiredHolderName) {\n        layout = props.positionHolderNameOnTop ? CREDIT_CARD_NAME_TOP : CREDIT_CARD_NAME_BOTTOM;\n    }\n\n    if (showKCP) {\n        layout = KCP_CARD;\n        if (hasRequiredHolderName) {\n            layout = props.positionHolderNameOnTop ? KCP_CARD_NAME_TOP : KCP_CARD_NAME_BOTTOM;\n        }\n    }\n\n    if (showBrazilianSSN) {\n        layout = SSN_CARD;\n        if (hasRequiredHolderName) {\n            layout = props.positionHolderNameOnTop ? SSN_CARD_NAME_TOP : SSN_CARD_NAME_BOTTOM;\n        }\n    }\n\n    // w. Billing address\n    if (countrySpecificSchemas) {\n        // Flatten array and remove any numbers that describe how fields should be aligned\n        const countrySpecificSchemasFlat: string[] = countrySpecificSchemas['flat'](2).filter(item => typeof item !== 'number');\n\n        let countryBasedAddressLayout = countrySpecificSchemasFlat;\n\n        if (billingAddressRequiredFields) {\n            // Get intersection of the 2 arrays\n            countryBasedAddressLayout = countrySpecificSchemasFlat.filter(x => billingAddressRequiredFields.includes(x));\n        }\n\n        layout = CREDIT_CARD.concat(countryBasedAddressLayout);\n        if (hasRequiredHolderName) {\n            layout = props.positionHolderNameOnTop\n                ? CREDIT_CARD_NAME_TOP.concat(countryBasedAddressLayout)\n                : CREDIT_CARD_NAME_BOTTOM.concat(countryBasedAddressLayout);\n        }\n        // TODO we are not yet creating a layout for AVS + SSN field (w. or w/o holderName) - is AVS + SSN a real world scenario?\n    }\n    return layout;\n};\n\n/**\n * Lookup service to map local (CardInput) field refs to a key, possibly region specific, by which to retrieve the translation\n */\nexport const mapFieldKey = (key: string, i18n: Language, countrySpecificLabels: StringObject): string => {\n    // console.log('### utils::mapFieldKey:: key', key);\n    switch (key) {\n        case 'socialSecurityNumber':\n            return i18n.get(`boleto.${key}`);\n        // Address related - if we have a country specific key for the field - use that to get the translation\n        case 'street':\n        case 'houseNumberOrName':\n        case 'postalCode':\n        case 'stateOrProvince':\n        case 'city':\n        case 'country':\n            return countrySpecificLabels?.[key] ? i18n.get(countrySpecificLabels?.[key]) : i18n.get(key);\n        // We know that the translated error messages do contain a reference to the field they refer to, so we won't need to map them (currently applies mostly to SecuredFields related errors)\n        default:\n            return null;\n    }\n};\n\nexport const extractPropsForCardFields = (props: CardInputProps) => {\n    return {\n        // Extract props for CardFieldsWrapper & StoredCardFieldsWrapper(just needs hasCVC, installmentOptions)\n        billingAddressRequired: props.billingAddressRequired,\n        billingAddressRequiredFields: props.billingAddressRequiredFields,\n        billingAddressAllowedCountries: props.billingAddressAllowedCountries,\n        brandsConfiguration: props.brandsConfiguration,\n        showStoreDetailsCheckbox: props.showStoreDetailsCheckbox,\n        hasCVC: props.hasCVC,\n        hasHolderName: props.hasHolderName,\n        holderNameRequired: props.holderNameRequired,\n        installmentOptions: props.installmentOptions,\n        placeholders: props.placeholders,\n        positionHolderNameOnTop: props.positionHolderNameOnTop,\n        // Extract props for CardFields > CardNumber\n        showBrandIcon: props.showBrandIcon,\n        showContextualElement: props.showContextualElement,\n        // Extract props for StoredCardFields\n        lastFour: props.lastFour,\n        expiryMonth: props.expiryMonth,\n        expiryYear: props.expiryYear,\n        disclaimerMessage: props.disclaimerMessage\n    };\n};\n\nexport const extractPropsForSFP = (props: CardInputProps): Pick<SFPProps, 'clientKey' | 'loadingContext'> & Partial<SFPProps> => {\n    return {\n        autoFocus: props.autoFocus,\n        brands: props.brands,\n        brandsConfiguration: props.brandsConfiguration,\n        clientKey: props.clientKey,\n        countryCode: props.countryCode,\n        forceCompat: props.forceCompat,\n        i18n: props.i18n,\n        implementationType: props.implementationType,\n        keypadFix: props.keypadFix,\n        legacyInputMode: props.legacyInputMode,\n        loadingContext: props.loadingContext,\n        maskSecurityCode: props.maskSecurityCode,\n        exposeExpiryDate: props.exposeExpiryDate,\n        minimumExpiryDate: props.minimumExpiryDate,\n        onAdditionalSFConfig: props.onAdditionalSFConfig,\n        onAdditionalSFRemoved: props.onAdditionalSFRemoved,\n        onAllValid: props.onAllValid,\n        onAutoComplete: props.onAutoComplete,\n        onBinValue: props.onBinValue,\n        onConfigSuccess: props.onConfigSuccess,\n        handleKeyPress: props.handleKeyPress,\n        onError: props.onError,\n        onFieldValid: props.onFieldValid,\n        onLoad: props.onLoad,\n        placeholders: props.placeholders,\n        resources: props.resources,\n        showContextualElement: props.showContextualElement,\n        showWarnings: props.showWarnings,\n        trimTrailingSeparator: props.trimTrailingSeparator\n    };\n};\n\nexport const handlePartialAddressMode = (addressMode: AddressModeOptions): AddressSpecifications | null => {\n    return addressMode == AddressModeOptions.partial ? PARTIAL_ADDRESS_SCHEMA : null;\n};\n\n// Almost all errors are blur based, but some SF ones are not i.e. when an unsupported card is entered or the expiry date is out of range\nexport function lookupBlurBasedErrors(errorCode) {\n    // If it's NOT one of these, then it's a blur based error\n    return ![\n        SF_ErrorCodes.ERROR_MSG_UNSUPPORTED_CARD_ENTERED,\n        SF_ErrorCodes.ERROR_MSG_CARD_TOO_OLD,\n        SF_ErrorCodes.ERROR_MSG_CARD_TOO_FAR_IN_FUTURE,\n        SF_ErrorCodes.ERROR_MSG_CARD_EXPIRES_TOO_SOON\n    ].includes(errorCode);\n}\n\nexport function getFullBrandName(brand: string): string {\n    return BRAND_READABLE_NAME_MAP[brand] ?? brand;\n}\n\nexport const mapDualBrandButtons = (\n    dualBrandSelectElements: DualBrandSelectElement[],\n    brandsConfiguration?: CardBrandsConfiguration\n): DualBrandButtons[] => {\n    return dualBrandSelectElements.map(item => {\n        const brand = item.id;\n        const getImage = useImage();\n        const imageName = brand === 'card' ? 'nocard' : brand;\n        const imageURL = brandsConfiguration?.[brand]?.icon ?? getCardImageUrl(imageName, getImage);\n\n        // TODO - check below if we have to still generate altName through the mapping function or whether it just\n        //  corresponds to item.brandObject.localeBrand\n        return {\n            id: item.id,\n            name: item.brandObject.localeBrand || item.brandObject.brand,\n            imageURL,\n            altName: getFullBrandName(brand)\n        };\n    });\n};\n\n/**\n *  Checks if any of the brands requiring a selection mechanism are present in the binLookup response.\n *\n * If the result from Array.some is true - then we are in a dual branding scenario that requires selection, i.e.\n * - Show the dualBranding selector UI\n * - Preselect a card brand\n */\nexport const requiresDualBrandSelection = (\n    brandsRequiringSelection: readonly string[],\n    returnedDualBrandingObjects: DualBrandSelectElement[] | BrandObject[],\n    key: string\n) => returnedDualBrandingObjects.some(item => brandsRequiringSelection.includes(item[key]));\n\n/**\n * Determines whether the Installments component should be rendered.\n *\n * Installments Component is displayed when:\n * - installmentOptions is provided and not empty\n * - amount is provided and not zero\n * - fundingSource is not provided or is 'credit'\n *\n * @param params.installmentOptions - The installment configuration options\n * @param params.fundingSource - The card funding source (e.g. 'credit', 'debit')\n * @param params.amount - The payment amount\n * @returns Whether the Installments component should be rendered\n */\nexport const shouldShowInstallmentsComponent = ({\n    installmentOptions,\n    fundingSource,\n    amount\n}: {\n    installmentOptions?: InstallmentOptions;\n    fundingSource?: string;\n    amount?: PaymentAmount;\n}): boolean => {\n    if (!installmentOptions || Object.keys(installmentOptions).length === 0) return false;\n    if (!amount || amount.value === 0) return false;\n    if (fundingSource && fundingSource !== 'credit') return false;\n\n    return true;\n};\n"],"names":["getCardImageUrl","brand","getImage","type","extension","shouldIncludeInstallmentsInPaymentData","installment","includes","plan","value","getLayout","props","showKCP","showBrazilianSSN","countrySpecificSchemas","billingAddressRequiredFields","layout","CREDIT_CARD","hasRequiredHolderName","hasHolderName","holderNameRequired","positionHolderNameOnTop","CREDIT_CARD_NAME_TOP","CREDIT_CARD_NAME_BOTTOM","KCP_CARD","KCP_CARD_NAME_TOP","KCP_CARD_NAME_BOTTOM","SSN_CARD","SSN_CARD_NAME_TOP","SSN_CARD_NAME_BOTTOM","countrySpecificSchemasFlat","filter","item","countryBasedAddressLayout","x","concat","mapFieldKey","key","i18n","countrySpecificLabels","get","extractPropsForCardFields","billingAddressRequired","billingAddressAllowedCountries","brandsConfiguration","showStoreDetailsCheckbox","hasCVC","installmentOptions","placeholders","showBrandIcon","showContextualElement","lastFour","expiryMonth","expiryYear","disclaimerMessage","extractPropsForSFP","autoFocus","brands","clientKey","countryCode","forceCompat","implementationType","keypadFix","legacyInputMode","loadingContext","maskSecurityCode","exposeExpiryDate","minimumExpiryDate","onAdditionalSFConfig","onAdditionalSFRemoved","onAllValid","onAutoComplete","onBinValue","onConfigSuccess","handleKeyPress","onError","onFieldValid","onLoad","resources","showWarnings","trimTrailingSeparator","handlePartialAddressMode","addressMode","AddressModeOptions","partial","PARTIAL_ADDRESS_SCHEMA","lookupBlurBasedErrors","errorCode","SF_ErrorCodes","ERROR_MSG_UNSUPPORTED_CARD_ENTERED","ERROR_MSG_CARD_TOO_OLD","ERROR_MSG_CARD_TOO_FAR_IN_FUTURE","ERROR_MSG_CARD_EXPIRES_TOO_SOON","getFullBrandName","BRAND_READABLE_NAME_MAP","mapDualBrandButtons","dualBrandSelectElements","map","id","useImage","imageName","imageURL","icon","name","brandObject","localeBrand","altName","requiresDualBrandSelection","brandsRequiringSelection","returnedDualBrandingObjects","some","shouldShowInstallmentsComponent","fundingSource","amount","Object","keys","length"],"mappings":"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"}

package/dist/es/components/Card/components/Fastlane/USOnlyPhoneInput.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../external/preact/dist/preact.js";import{useRef as r,useCallback as o,useEffect as t}from"../../../../external/preact/hooks/dist/hooks.js";import l from"../../../internal/FormFields/Field/Field.js";import m from"../../../../utils/useForm/useForm.js";import a from"../../../internal/FormFields/InputTelephone.js";import{useCoreContext as i}from"../../../../core/Context/CoreProvider.js";import n from"./utils/mobile-number-formatter.js";const u=({initialValue:u,onChange:s})=>{const{i18n:b}=i(),{handleChangeFor:c,data:f}=m({schema:["mobileNumber"],defaultData:{mobileNumber:u},formatters:{mobileNumber:n}}),p=r(null),d=o(()=>{p.current?.focus()},[p.current]);return t(()=>{s(f.mobileNumber?.replaceAll(" ",""))},[f.mobileNumber,s]),e(l,{name:"mobile-number",label:b.get("card.fastlane.mobileInputLabel"),staticValue:"+1",onInputContainerClick:d},e(a,{name:"mobile-number",autocorrect:"off",spellcheck:!1,maxlength:12,value:f.mobileNumber,onInput:c("mobileNumber","input"),onBlur:c("mobileNumber","blur"),setRef:p}))};export{u as default};
+import{createElement as e}from"../../../../external/preact/dist/preact.js";import{useRef as r,useCallback as t,useEffect as o}from"../../../../external/preact/hooks/dist/hooks.js";import l from"../../../internal/FormFields/Field/Field.js";import m from"../../../../utils/useForm/useForm.js";import"../../../internal/SecuredFields/lib/CSF/utils/userAgent.js";import a from"../../../internal/FormFields/InputTelephone.js";import{useCoreContext as i}from"../../../../core/Context/CoreProvider.js";import n from"./utils/mobile-number-formatter.js";const u=({initialValue:u,onChange:s})=>{const{i18n:b}=i(),{handleChangeFor:c,data:p}=m({schema:["mobileNumber"],defaultData:{mobileNumber:u},formatters:{mobileNumber:n}}),f=r(null),d=t(()=>{f.current?.focus()},[f.current]);return o(()=>{s(p.mobileNumber?.replaceAll(" ",""))},[p.mobileNumber,s]),e(l,{name:"mobile-number",label:b.get("card.fastlane.mobileInputLabel"),staticValue:"+1",onInputContainerClick:d},e(a,{name:"mobile-number",autocorrect:"off",spellcheck:!1,maxlength:12,value:p.mobileNumber,onInput:c("mobileNumber","input"),onBlur:c("mobileNumber","blur"),setRef:f}))};export{u as default};
 //# sourceMappingURL=USOnlyPhoneInput.js.map

package/dist/es/components/Card/components/Fastlane/USOnlyPhoneInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"USOnlyPhoneInput.js","sources":["../../../../../../src/components/Card/components/Fastlane/USOnlyPhoneInput.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useCallback, useEffect, useRef } from 'preact/hooks';\nimport Field from '../../../internal/FormFields/Field';\nimport useForm from '../../../../utils/useForm';\nimport InputTelephone from '../../../internal/FormFields/InputTelephone';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport mobileNumberFormatter from './utils/mobile-number-formatter';\n\ninterface USOnlyPhoneInputStateData {\n    mobileNumber?: string;\n}\n\ninterface USOnlyPhoneInputProps {\n    onChange(mobileNumber: string): void;\n    initialValue?: string;\n}\n\nconst USOnlyPhoneInput = ({ initialValue, onChange }: Readonly<USOnlyPhoneInputProps>) => {\n    const { i18n } = useCoreContext();\n    const formSchema = ['mobileNumber'];\n    const { handleChangeFor, data } = useForm<USOnlyPhoneInputStateData>({\n        schema: formSchema,\n        defaultData: {\n            mobileNumber: initialValue\n        },\n        formatters: {\n            mobileNumber: mobileNumberFormatter\n        }\n    });\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const focusInput = useCallback(() => {\n        inputRef.current?.focus();\n    }, [inputRef.current]);\n\n    useEffect(() => {\n        onChange(data.mobileNumber?.replaceAll(' ', ''));\n    }, [data.mobileNumber, onChange]);\n\n    return (\n        <Field name=\"mobile-number\" label={i18n.get('card.fastlane.mobileInputLabel')} staticValue=\"+1\" onInputContainerClick={focusInput}>\n            <InputTelephone\n                name={'mobile-number'}\n                autocorrect={'off'}\n                spellcheck={false}\n                maxlength={12}\n                value={data.mobileNumber}\n                onInput={handleChangeFor('mobileNumber', 'input')}\n                onBlur={handleChangeFor('mobileNumber', 'blur')}\n                setRef={inputRef}\n            />\n        </Field>\n    );\n};\n\nexport default USOnlyPhoneInput;\n"],"names":["USOnlyPhoneInput","initialValue","onChange","i18n","useCoreContext","handleChangeFor","data","useForm","schema","defaultData","mobileNumber","formatters","mobileNumberFormatter","inputRef","useRef","focusInput","useCallback","current","focus","useEffect","replaceAll","h","Field","name","label","get","staticValue","onInputContainerClick","InputTelephone","autocorrect","spellcheck","maxlength","value","onInput","onBlur","setRef"],"mappings":"6dAiBA,MAAMA,EAAmB,EAAGC,eAAcC,eACtC,MAAMC,KAAEA,GAASC,KAEXC,gBAAEA,EAAeC,KAAEA,GAASC,EAAmC,CACjEC,OAFe,CAAC,gBAGhBC,YAAa,CACTC,aAAcT,GAElBU,WAAY,CACRD,aAAcE,KAGhBC,EAAWC,EAAyB,MAEpCC,EAAaC,EAAY,KAC3BH,EAASI,SAASC,SACnB,CAACL,EAASI,UAMb,OAJAE,EAAU,KACNjB,EAASI,EAAKI,cAAcU,WAAW,IAAK,MAC7C,CAACd,EAAKI,aAAcR,IAGnBmB,EAACC,EAAAA,CAAMC,KAAK,gBAAgBC,MAAOrB,EAAKsB,IAAI,kCAAmCC,YAAY,KAAKC,sBAAuBZ,GACnHM,EAACO,EAAAA,CACGL,KAAM,gBACNM,YAAa,MACbC,YAAY,EACZC,UAAW,GACXC,MAAO1B,EAAKI,aACZuB,QAAS5B,EAAgB,eAAgB,SACzC6B,OAAQ7B,EAAgB,eAAgB,QACxC8B,OAAQtB"}
+{"version":3,"file":"USOnlyPhoneInput.js","sources":["../../../../../../src/components/Card/components/Fastlane/USOnlyPhoneInput.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useCallback, useEffect, useRef } from 'preact/hooks';\nimport Field from '../../../internal/FormFields/Field';\nimport useForm from '../../../../utils/useForm';\nimport InputTelephone from '../../../internal/FormFields/InputTelephone';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport mobileNumberFormatter from './utils/mobile-number-formatter';\n\ninterface USOnlyPhoneInputStateData {\n    mobileNumber?: string;\n}\n\ninterface USOnlyPhoneInputProps {\n    onChange(mobileNumber: string): void;\n    initialValue?: string;\n}\n\nconst USOnlyPhoneInput = ({ initialValue, onChange }: Readonly<USOnlyPhoneInputProps>) => {\n    const { i18n } = useCoreContext();\n    const formSchema = ['mobileNumber'];\n    const { handleChangeFor, data } = useForm<USOnlyPhoneInputStateData>({\n        schema: formSchema,\n        defaultData: {\n            mobileNumber: initialValue\n        },\n        formatters: {\n            mobileNumber: mobileNumberFormatter\n        }\n    });\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const focusInput = useCallback(() => {\n        inputRef.current?.focus();\n    }, [inputRef.current]);\n\n    useEffect(() => {\n        onChange(data.mobileNumber?.replaceAll(' ', ''));\n    }, [data.mobileNumber, onChange]);\n\n    return (\n        <Field name=\"mobile-number\" label={i18n.get('card.fastlane.mobileInputLabel')} staticValue=\"+1\" onInputContainerClick={focusInput}>\n            <InputTelephone\n                name={'mobile-number'}\n                autocorrect={'off'}\n                spellcheck={false}\n                maxlength={12}\n                value={data.mobileNumber}\n                onInput={handleChangeFor('mobileNumber', 'input')}\n                onBlur={handleChangeFor('mobileNumber', 'blur')}\n                setRef={inputRef}\n            />\n        </Field>\n    );\n};\n\nexport default USOnlyPhoneInput;\n"],"names":["USOnlyPhoneInput","initialValue","onChange","i18n","useCoreContext","handleChangeFor","data","useForm","schema","defaultData","mobileNumber","formatters","mobileNumberFormatter","inputRef","useRef","focusInput","useCallback","current","focus","useEffect","replaceAll","h","Field","name","label","get","staticValue","onInputContainerClick","InputTelephone","autocorrect","spellcheck","maxlength","value","onInput","onBlur","setRef"],"mappings":"giBAiBA,MAAMA,EAAmB,EAAGC,eAAcC,eACtC,MAAMC,KAAEA,GAASC,KAEXC,gBAAEA,EAAeC,KAAEA,GAASC,EAAmC,CACjEC,OAFe,CAAC,gBAGhBC,YAAa,CACTC,aAAcT,GAElBU,WAAY,CACRD,aAAcE,KAGhBC,EAAWC,EAAyB,MAEpCC,EAAaC,EAAY,KAC3BH,EAASI,SAASC,SACnB,CAACL,EAASI,UAMb,OAJAE,EAAU,KACNjB,EAASI,EAAKI,cAAcU,WAAW,IAAK,MAC7C,CAACd,EAAKI,aAAcR,IAGnBmB,EAACC,EAAAA,CAAMC,KAAK,gBAAgBC,MAAOrB,EAAKsB,IAAI,kCAAmCC,YAAY,KAAKC,sBAAuBZ,GACnHM,EAACO,EAAAA,CACGL,KAAM,gBACNM,YAAa,MACbC,YAAY,EACZC,UAAW,GACXC,MAAO1B,EAAKI,aACZuB,QAAS5B,EAAgB,eAAgB,SACzC6B,OAAQ7B,EAAgB,eAAgB,QACxC8B,OAAQtB"}

package/dist/es/components/Dragonpay/components/DragonpayInput/DragonpayInput.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../external/preact/dist/preact.js";import{useState as a,useRef as r,useEffect as o}from"../../../../external/preact/hooks/dist/hooks.js";import t from"../../../../utils/useForm/useForm.js";import s from"../../../internal/FormFields/Field/Field.js";import i from"../../../../utils/get-issuer-image.js";import{useCoreContext as n}from"../../../../core/Context/CoreProvider.js";import l from"../../../internal/FormFields/InputEmail.js";import p from"../../../internal/FormFields/Select/Select.js";import m from"../../../../core/Context/useImage.js";import{validationRules as u}from"../../../../utils/Validator/defaultRules.js";import{getErrorMessage as d}from"../../../../utils/getErrorMessage.js";function c(c){const{i18n:g}=n(),h=m(),f=()=>["dragonpay_ebanking","dragonpay_otc_banking","dragonpay_otc_non_banking"].includes(c.type),[_,y]=a("ready"),{handleChangeFor:E,triggerValidation:k,data:F,valid:j,errors:C,isValid:b}=t({schema:[...f()?["issuer"]:[],"shopperEmail"],rules:{issuer:{validate:e=>f()&&!!e,modes:["input","blur"]},shopperEmail:u.emailRule}}),x=r({setStatus:y,showValidation:()=>{k()}}),V=i({},c.type,h),v=c.items.map(e=>({...e,icon:V(e.id&&e.id.toLowerCase())}));return o(()=>{c.onChange({isValid:b,data:F,valid:j,errors:C})},[b,F,j,C]),o(()=>{c.setComponentRef(x.current)},[c.setComponentRef]),e("div",{className:"adyen-checkout__dragonpay-input__field"},e(s,{label:g.get("shopperEmail"),errorMessage:d(g,C.shopperEmail,g.get("shopperEmail")),name:"dragonpay-shopperEmail"},e(l,{name:"dragonpay-shopperEmail",autoCorrect:"off",value:F.shopperEmail,className:"adyen-checkout__input--large",spellcheck:!1,onInput:E("shopperEmail","input"),onBlur:E("shopperEmail","blur")})),f()&&e(s,{label:g.get((w=c.type,"dragonpay_otc_non_banking"===w?"dragonpayVoucher.selectField.contextualText.nonBank":"dragonpayVoucher.selectField.contextualText.bank")),errorMessage:!!C.issuer,name:"issuer"},e(p,{items:v,selectedValue:F.issuer,name:"issuer",className:"adyen-checkout__dropdown--large adyen-checkout__issuer-list__dropdown",onChange:E("issuer")})),c.showPayButton&&c.payButton({status:_,label:g.get("confirmPurchase")}));var w}c.defaultProps={data:{},items:[],onChange:()=>{}};export{c as default};
+import{createElement as e}from"../../../../external/preact/dist/preact.js";import{useState as a,useRef as r,useEffect as o}from"../../../../external/preact/hooks/dist/hooks.js";import t from"../../../../utils/useForm/useForm.js";import"../../../internal/SecuredFields/lib/CSF/utils/userAgent.js";import s from"../../../internal/FormFields/Field/Field.js";import i from"../../../../utils/get-issuer-image.js";import{useCoreContext as n}from"../../../../core/Context/CoreProvider.js";import l from"../../../internal/FormFields/InputEmail.js";import p from"../../../internal/FormFields/Select/Select.js";import m from"../../../../core/Context/useImage.js";import{validationRules as u}from"../../../../utils/Validator/defaultRules.js";import{getErrorMessage as d}from"../../../../utils/getErrorMessage.js";function c(c){const{i18n:g}=n(),h=m(),f=()=>["dragonpay_ebanking","dragonpay_otc_banking","dragonpay_otc_non_banking"].includes(c.type),[_,y]=a("ready"),{handleChangeFor:F,triggerValidation:E,data:k,valid:j,errors:C,isValid:b}=t({schema:[...f()?["issuer"]:[],"shopperEmail"],rules:{issuer:{validate:e=>f()&&!!e,modes:["input","blur"]},shopperEmail:u.emailRule}}),x=r({setStatus:y,showValidation:()=>{E()}}),V=i({},c.type,h),v=c.items.map(e=>({...e,icon:V(e.id&&e.id.toLowerCase())}));return o(()=>{c.onChange({isValid:b,data:k,valid:j,errors:C})},[b,k,j,C]),o(()=>{c.setComponentRef(x.current)},[c.setComponentRef]),e("div",{className:"adyen-checkout__dragonpay-input__field"},e(s,{label:g.get("shopperEmail"),errorMessage:d(g,C.shopperEmail,g.get("shopperEmail")),name:"dragonpay-shopperEmail"},e(l,{name:"dragonpay-shopperEmail",autoCorrect:"off",value:k.shopperEmail,className:"adyen-checkout__input--large",spellcheck:!1,onInput:F("shopperEmail","input"),onBlur:F("shopperEmail","blur")})),f()&&e(s,{label:g.get((S=c.type,"dragonpay_otc_non_banking"===S?"dragonpayVoucher.selectField.contextualText.nonBank":"dragonpayVoucher.selectField.contextualText.bank")),errorMessage:!!C.issuer,name:"issuer"},e(p,{items:v,selectedValue:k.issuer,name:"issuer",className:"adyen-checkout__dropdown--large adyen-checkout__issuer-list__dropdown",onChange:F("issuer")})),c.showPayButton&&c.payButton({status:_,label:g.get("confirmPurchase")}));var S}c.defaultProps={data:{},items:[],onChange:()=>{}};export{c as default};
 //# sourceMappingURL=DragonpayInput.js.map