@adyen/adyen-web 6.43.0 → 6.44.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/es/components/internal/SecuredFields/SFP/SecuredFieldsProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"SecuredFieldsProvider.js","sources":["../../../../../../src/components/internal/SecuredFields/SFP/SecuredFieldsProvider.ts"],"sourcesContent":["import { Component } from 'preact';\nimport { getErrorObject, getFields, getErrorReducer, validFieldsReducer } from './SFPUtils';\nimport initCSF from '../lib/CSF';\nimport handlers from './SecuredFieldsProviderHandlers';\nimport defaultProps from './defaultProps';\nimport { SFPProps, SFPState, SingleBrandResetObject } from './types';\nimport {\n    StylesObject,\n    CardErrorData,\n    CardFocusData,\n    CardBrandData,\n    CardAllValidData,\n    CardFieldValidData,\n    CardAutoCompleteData,\n    CardConfigSuccessData,\n    CardLoadData,\n    SFKeyPressObj,\n    SFFieldType\n} from '../lib/types';\nimport { CSFReturnObject, CSFSetupObject } from '../lib/CSF/types';\nimport { CVC_POLICY_REQUIRED, DATE_POLICY_REQUIRED, DEDICATED_CARD_COMPONENTS, ENCRYPTED_CARD_NUMBER, ENCRYPTED_PWD_FIELD } from '../lib/constants';\nimport { BinLookupResponse } from '../../../Card/types';\nimport AdyenCheckoutError from '../../../../core/Errors/AdyenCheckoutError';\nimport { SFStateErrorObj } from '../../../Card/components/CardInput/types';\nimport { getErrorMessageFromCode } from '../../../../core/Errors/utils';\nimport { SF_ErrorCodes } from '../../../../core/Errors/constants';\nimport { TxVariants } from '../../../tx-variants';\n\n/**\n * SecuredFieldsProvider:\n * Initialises & handles the client-side part of SecuredFields\n */\nclass SecuredFieldsProvider extends Component<SFPProps, SFPState> {\n    private csfLoadFailTimeout: number;\n    private csfLoadFailTimeoutMS: number;\n    private csfConfigFailTimeout: number;\n    private csfConfigFailTimeoutMS: number;\n    private numCharsInField: object;\n    private rootNode: HTMLElement;\n    private numDateFields: number;\n    private csf: CSFReturnObject;\n    private handleOnLoad: (obj: CardLoadData) => void;\n    private handleOnConfigSuccess: (obj: CardConfigSuccessData) => void;\n    private handleOnFieldValid: (obj: CardFieldValidData) => void;\n    private handleOnAllValid: (obj: CardAllValidData) => void;\n    private handleOnBrand: (obj: CardBrandData) => void;\n    private handleFocus: (obj: CardFocusData) => void;\n    private handleOnError: (obj: CardErrorData, hasUnsupportedCard?: boolean) => void;\n    private handleOnAutoComplete: (obj: CardAutoCompleteData) => void;\n    private handleOnNoDataRequired: () => void;\n    private handleOnTouchstartIOS: (obj) => void;\n    private handleKeyPressed: (obj: SFKeyPressObj) => void;\n    public state: SFPState;\n    public props: SFPProps;\n    private issuingCountryCode: string;\n\n    constructor(props: SFPProps) {\n        super(props);\n\n        const stateObj: SFPState = {\n            status: 'loading',\n            brand: props.type,\n            errors: {},\n            valid: {},\n            data: {},\n            cvcPolicy: CVC_POLICY_REQUIRED,\n            expiryDatePolicy: DATE_POLICY_REQUIRED,\n            isSfpValid: false,\n            hasKoreanFields: props.hasKoreanFields\n        };\n        this.state = stateObj;\n\n        this.csfLoadFailTimeout = null;\n        this.csfLoadFailTimeoutMS = 30000;\n\n        this.csfConfigFailTimeout = null;\n        this.csfConfigFailTimeoutMS = 15000;\n\n        this.numCharsInField = {};\n\n        // Handlers\n        this.handleOnLoad = handlers.handleOnLoad.bind(this);\n        this.handleOnConfigSuccess = handlers.handleOnConfigSuccess.bind(this);\n        this.handleOnFieldValid = handlers.handleOnFieldValid.bind(this);\n        this.handleOnAllValid = handlers.handleOnAllValid.bind(this);\n        this.handleOnBrand = handlers.handleOnBrand.bind(this);\n        this.handleFocus = handlers.handleFocus.bind(this);\n        this.handleOnError = handlers.handleOnError.bind(this);\n        this.handleOnNoDataRequired = handlers.handleOnNoDataRequired.bind(this);\n        this.handleOnAutoComplete = handlers.handleOnAutoComplete.bind(this);\n        this.handleOnTouchstartIOS = handlers.handleOnTouchstartIOS.bind(this); // Only called when iOS detected\n        this.handleKeyPressed = handlers.handleKeyPressed.bind(this);\n\n        this.processBinLookupResponse = this.processBinLookupResponse.bind(this);\n\n        // Bindings for functions exposed to users of this component: SecuredFields & CardInput\n        this.setFocusOn = this.setFocusOn.bind(this);\n        this.updateStyles = this.updateStyles.bind(this);\n        this.handleUnsupportedCard = this.handleUnsupportedCard.bind(this);\n        this.showValidation = this.showValidation.bind(this);\n        this.destroy = this.destroy.bind(this);\n    }\n\n    public static readonly defaultProps = defaultProps;\n\n    public componentDidMount(): void {\n        // When SFP instantiated through SecuredFieldsInput c.f. CardInput\n        if (this.props.rootNode) {\n            this.setRootNode(this.props.rootNode);\n        }\n\n        // Find encryptedFields and map them to the values we use to store valid states\n        const fields = getFields(this.rootNode);\n        const valid = fields.reduce(validFieldsReducer, {});\n\n        this.setState({ valid });\n\n        // Populate numCharsInField object\n        fields.forEach(field => {\n            this.numCharsInField[field] = 0;\n        });\n\n        // Store how many dateFields we are dealing with visually\n        this.numDateFields = fields.filter(f => f.match(/Expiry/)).length;\n\n        if (fields.length) {\n            this.destroy();\n            this.initializeCSF(this.rootNode);\n        } else {\n            if (this.props.componentType === (TxVariants.customCard as string)) {\n                console.debug(\n                    'You are trying to create a CustomCard component but the element into which you are trying to mount the CustomCard component does not contain any elements with a \"data-cse\" attribute e.g. <div data-cse=\"encryptedCardNumber\"></div>'\n                );\n            }\n            this.handleOnNoDataRequired();\n        }\n    }\n\n    public componentDidUpdate() {\n        this.checkForKCPFields();\n        // Pass all the state data up - Used right now for loading status\n        this.props.onStateUpdate?.(this.state);\n    }\n\n    public componentWillUnmount(): void {\n        this.csf = null;\n        clearTimeout(this.csfLoadFailTimeout);\n        clearTimeout(this.csfConfigFailTimeout);\n    }\n\n    private initializeCSF(root: HTMLElement): void {\n        let loadingContext = this.props.loadingContext;\n\n        // For loading securedFields from local server during development\n        if (process.env.NODE_ENV === 'development' && process.env.__SF_ENV__ !== 'build') {\n            loadingContext = process.env.__SF_ENV__;\n        }\n\n        const csfSetupObj: CSFSetupObject = {\n            rootNode: root,\n            type: this.props.type,\n            componentType: this.props.componentType,\n            clientKey: this.props.clientKey,\n            cardGroupTypes: this.props.brands,\n            autoFocus: this.props.autoFocus,\n            trimTrailingSeparator: this.props.trimTrailingSeparator,\n            loadingContext,\n            keypadFix: this.props.keypadFix,\n            showWarnings: this.props.showWarnings,\n            iframeUIConfig: {\n                sfStyles: this.props.styles\n            },\n            i18n: this.props.i18n,\n            onSubmitAnalytics: this.props.onSubmitAnalytics,\n            callbacks: {\n                onLoad: this.handleOnLoad,\n                onConfigSuccess: this.handleOnConfigSuccess,\n                onFieldValid: this.handleOnFieldValid,\n                onAllValid: this.handleOnAllValid,\n                onBrand: this.handleOnBrand,\n                onError: this.handleOnError,\n                onFocus: this.handleFocus,\n                onBinValue: this.props.onBinValue,\n                onAutoComplete: this.handleOnAutoComplete,\n                onAdditionalSFConfig: this.props.onAdditionalSFConfig,\n                onAdditionalSFRemoved: this.props.onAdditionalSFRemoved,\n                onTouchstartIOS: this.handleOnTouchstartIOS,\n                onKeyPressed: this.handleKeyPressed\n            },\n            isKCP: this.state.hasKoreanFields,\n            legacyInputMode: this.props.legacyInputMode,\n            minimumExpiryDate: this.props.minimumExpiryDate,\n            implementationType: this.props.implementationType || 'components', // to distinguish between 'regular' and 'custom' card component\n            forceCompat: this.props.forceCompat,\n            maskSecurityCode: this.props.maskSecurityCode,\n            exposeExpiryDate: this.props.exposeExpiryDate,\n            shouldDisableIOSArrowKeys: !!this.props.disableIOSArrowKeys, // convert whether function has been defined into a boolean\n            placeholders: this.props.placeholders ?? {},\n            showContextualElement: this.props.showContextualElement\n        };\n\n        this.csf = initCSF(csfSetupObj);\n\n        /**\n         * Expect to at least have had the handleOnLoad callback called within this time\n         * - if this hasn't happened then something has happened to interrupt the loading of the securedFields\n         * So we need to clear the loading spinner to see if the securedFields are reporting anything\n         */\n        // @ts-ignore - timout 'type' is a number\n        this.csfLoadFailTimeout = setTimeout(() => {\n            if (this.state.status !== 'ready') {\n                // Hide the spinner\n                this.setState({ status: 'csfLoadFailure' });\n                // Report the error\n                this.props.onError(new AdyenCheckoutError('ERROR', 'secured field iframes have failed to load'));\n            }\n        }, this.csfLoadFailTimeoutMS);\n    }\n\n    private checkForKCPFields() {\n        let needsKoreanFields = false;\n        if (this.props.koreanAuthenticationRequired) {\n            needsKoreanFields = this.issuingCountryCode ? this.issuingCountryCode === 'kr' : this.props.countryCode === 'kr';\n        }\n\n        // Was korean, now isn't - hide password field\n        if (this.state.hasKoreanFields && !needsKoreanFields) {\n            // Clear any stored data\n            const setRemovedFieldState = prevState => ({\n                data: { ...prevState.data, [ENCRYPTED_PWD_FIELD]: undefined },\n                valid: { ...prevState.valid, [ENCRYPTED_PWD_FIELD]: false },\n                errors: { ...prevState.errors, [ENCRYPTED_PWD_FIELD]: null },\n                hasKoreanFields: false\n            });\n\n            this.setState(setRemovedFieldState, () => {\n                this.props.onChange(this.state);\n            });\n\n            this.csf.removeSecuredField(ENCRYPTED_PWD_FIELD);\n            this.csf.setKCPStatus(false);\n        }\n\n        // Wasn't korean, now is - show password field\n        if (!this.state.hasKoreanFields && needsKoreanFields) {\n            const setAddedFieldState = prevState => ({\n                valid: { ...prevState.valid, [ENCRYPTED_PWD_FIELD]: false },\n                hasKoreanFields: true,\n                isSfpValid: false\n            });\n\n            this.setState(setAddedFieldState, () => {\n                this.props.onChange(this.state);\n            });\n\n            this.csf.addSecuredField(ENCRYPTED_PWD_FIELD);\n            this.csf.setKCPStatus(true);\n        }\n    }\n\n    public getChildContext(): object {\n        return { i18n: this.props.i18n };\n    }\n\n    public handleUnsupportedCard(errObj: CardErrorData): boolean {\n        const hasUnsupportedCard = !!errObj.error;\n\n        // Store the brand(s) we detected and which we don't support\n        if (hasUnsupportedCard) {\n            this.setState({ detectedUnsupportedBrands: errObj.detectedBrands });\n        }\n\n        errObj.rootNode = this.rootNode; // Needed for CustomCard\n        this.handleOnError(errObj, hasUnsupportedCard);\n        // Inform CSF that the number field has an unsupportedCard error (or that it has been cleared)\n        if (this.csf) {\n            this.csf.hasUnsupportedCard(ENCRYPTED_CARD_NUMBER, errObj.error);\n        }\n        return hasUnsupportedCard;\n    }\n\n    public setFocusOn(frame: SFFieldType): void {\n        if (this.csf) this.csf.setFocusOnFrame(frame);\n    }\n\n    public updateStyles(stylesObj: StylesObject): void {\n        if (this.csf) this.csf.updateStyles(stylesObj);\n    }\n\n    public sfIsOptionalOrHidden(fieldType: string): boolean {\n        return this.csf.sfIsOptionalOrHidden(fieldType as SFFieldType);\n    }\n\n    public destroy(): void {\n        if (this.csf) this.csf.destroy();\n    }\n\n    public getRootNode(): HTMLElement {\n        return this.rootNode;\n    }\n\n    public showValidation(): void {\n        const { numDateFields, state }: SecuredFieldsProvider = this;\n\n        Object.keys(state.valid)\n            .reduce(getErrorReducer(numDateFields, state), [])\n            .forEach((field: SFFieldType) => {\n                // For each detected error pass an error object to the handler (calls error callback & sets state)\n                const errorObj: CardErrorData = getErrorObject(field, this.rootNode, state);\n                this.handleOnError(errorObj, !!state.detectedUnsupportedBrands);\n                // Inform the secured-fields instance of which fields have been found to have errors\n                if (this.csf && this.csf.isValidated) {\n                    this.csf.isValidated(field, errorObj.error);\n                }\n            });\n    }\n\n    /**\n     * Map SF errors to ValidationRuleResult-like objects, for CardInput component\n     */\n    public mapErrorsToValidationRuleResult(): SFStateErrorObj {\n        const fieldNames: string[] = Object.keys(this.state.errors);\n\n        const sfStateErrorsObj = fieldNames.reduce((acc, fieldName) => {\n            const errorCode = this.state.errors[fieldName];\n            if (errorCode) {\n                acc[fieldName] = {\n                    isValid: false,\n                    errorMessage: getErrorMessageFromCode(errorCode, SF_ErrorCodes), // this is the human-readable, untranslated, explanation of the error that will exist on the error object in card.state.errors\n                    // For v5 the object found in state.errors should also contain the additional properties that used to be sent to the onError callback\n                    // namely: translation, errorCode, a ref to rootNode &, in the case of failed binLookup, an array of the detectedBrands\n                    errorI18n: this.props.i18n.get(errorCode),\n                    error: errorCode,\n                    rootNode: this.rootNode,\n                    ...(this.state.detectedUnsupportedBrands && { detectedBrands: this.state.detectedUnsupportedBrands })\n                };\n            } else {\n                acc[fieldName] = null;\n            }\n            return acc;\n        }, {});\n        return sfStateErrorsObj;\n    }\n\n    public processBinLookupResponse(binLookupResponse: BinLookupResponse, resetObject: SingleBrandResetObject): void {\n        // If we were dealing with an unsupported card & now we have a valid /binLookup response (or a response triggering a reset of the UI),\n        // - reset state to clear the error & the stored unsupportedBrands and, in the case of a valid /binLookup response, inform CSF (via handleUnsupportedCard)\n        // (Scenario: from an unsupportedCard state the shopper has pasted another number long enough to trigger a /binLookup)\n        if (this.state.detectedUnsupportedBrands) {\n            this.setState(prevState => ({\n                errors: { ...prevState.errors, [ENCRYPTED_CARD_NUMBER]: null },\n                detectedUnsupportedBrands: null\n            }));\n\n            // If we have some sort of binLookupResponse object then this isn't the reset caused by digits dropping below a threshold\n            // - so call handleUnsupportedCard to clear the error\n            if (this.csf && binLookupResponse) {\n                const errObj: CardErrorData = {\n                    type: 'card',\n                    fieldType: 'encryptedCardNumber',\n                    error: ''\n                };\n                this.handleUnsupportedCard(errObj);\n            }\n        }\n\n        this.issuingCountryCode = binLookupResponse?.issuingCountryCode?.toLowerCase();\n\n        const hasBrandedResetObj = resetObject?.brand;\n\n        /**\n         * Are we dealing with a \"dedicated\" card scenario i.e a card component created as: checkout.create('bcmc') but which can accept multiple brands\n         * - in which case we will need to reset brand and pass on the resetObj to CSF\n         */\n        const mustResetDedicatedBrand = hasBrandedResetObj && DEDICATED_CARD_COMPONENTS.includes(resetObject.brand);\n\n        if (mustResetDedicatedBrand) {\n            // resetObject.brand will be the value of the brand whose logo we want to reshow in the UI\n            this.setState(resetObject, () => {\n                this.props.onChange(this.state);\n            });\n        }\n\n        /**\n         * Scenarios:\n         *\n         * - RESET (binLookupResponse === null): The number of digits in number field has dropped below threshold for BIN lookup\n         * - RESULT (binLookupResponse.supportedBrands.length === 1): binLookup has found a result so inform CSF\n         *\n         * In the RESET scenario, for \"dedicated\" card components we also need to pass on the resetObject since this contains information about\n         * the brand that CSF needs to reset to, internally.\n         */\n        if (this.csf) this.csf.brandsFromBinLookup(binLookupResponse, mustResetDedicatedBrand ? resetObject : null);\n    }\n\n    private setRootNode = (input: HTMLElement): void => {\n        this.rootNode = input;\n    };\n\n    public render(props, state: SFPState) {\n        return props.render({ setRootNode: this.setRootNode, setFocusOn: this.setFocusOn }, state);\n    }\n}\n\nexport default SecuredFieldsProvider;\n"],"names":["SecuredFieldsProvider","Component","componentDidMount","this","props","rootNode","setRootNode","fields","getFields","valid","reduce","validFieldsReducer","setState","forEach","field","numCharsInField","numDateFields","filter","f","match","length","destroy","initializeCSF","componentType","TxVariants","customCard","console","debug","handleOnNoDataRequired","componentDidUpdate","checkForKCPFields","onStateUpdate","state","componentWillUnmount","csf","clearTimeout","csfLoadFailTimeout","csfConfigFailTimeout","root","loadingContext","csfSetupObj","type","clientKey","cardGroupTypes","brands","autoFocus","trimTrailingSeparator","keypadFix","showWarnings","iframeUIConfig","sfStyles","styles","i18n","onSubmitAnalytics","callbacks","onLoad","handleOnLoad","onConfigSuccess","handleOnConfigSuccess","onFieldValid","handleOnFieldValid","onAllValid","handleOnAllValid","onBrand","handleOnBrand","onError","handleOnError","onFocus","handleFocus","onBinValue","onAutoComplete","handleOnAutoComplete","onAdditionalSFConfig","onAdditionalSFRemoved","onTouchstartIOS","handleOnTouchstartIOS","onKeyPressed","handleKeyPressed","isKCP","hasKoreanFields","legacyInputMode","minimumExpiryDate","implementationType","forceCompat","maskSecurityCode","exposeExpiryDate","shouldDisableIOSArrowKeys","disableIOSArrowKeys","placeholders","showContextualElement","initCSF","setTimeout","status","AdyenCheckoutError","csfLoadFailTimeoutMS","needsKoreanFields","koreanAuthenticationRequired","issuingCountryCode","countryCode","setRemovedFieldState","prevState","data","ENCRYPTED_PWD_FIELD","undefined","errors","onChange","removeSecuredField","setKCPStatus","setAddedFieldState","isSfpValid","addSecuredField","getChildContext","handleUnsupportedCard","errObj","hasUnsupportedCard","error","detectedUnsupportedBrands","detectedBrands","ENCRYPTED_CARD_NUMBER","setFocusOn","frame","setFocusOnFrame","updateStyles","stylesObj","sfIsOptionalOrHidden","fieldType","getRootNode","showValidation","Object","keys","getErrorReducer","errorObj","getErrorObject","isValidated","mapErrorsToValidationRuleResult","acc","fieldName","errorCode","isValid","errorMessage","getErrorMessageFromCode","SF_ErrorCodes","errorI18n","get","processBinLookupResponse","binLookupResponse","resetObject","toLowerCase","hasBrandedResetObj","brand","mustResetDedicatedBrand","DEDICATED_CARD_COMPONENTS","includes","brandsFromBinLookup","render","constructor","super","_define_property","csfConfigFailTimeoutMS","input","stateObj","cvcPolicy","CVC_POLICY_REQUIRED","expiryDatePolicy","DATE_POLICY_REQUIRED","handlers","bind","defaultProps"],"mappings":"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"}
+{"version":3,"file":"SecuredFieldsProvider.js","sources":["../../../../../../src/components/internal/SecuredFields/SFP/SecuredFieldsProvider.ts"],"sourcesContent":["import { Component } from 'preact';\nimport { getErrorObject, getFields, getErrorReducer, validFieldsReducer } from './SFPUtils';\nimport initCSF from '../lib/CSF';\nimport handlers from './SecuredFieldsProviderHandlers';\nimport defaultProps from './defaultProps';\nimport { SFPProps, SFPState, SingleBrandResetObject } from './types';\nimport {\n    StylesObject,\n    CardErrorData,\n    CardFocusData,\n    CardBrandData,\n    CardAllValidData,\n    CardFieldValidData,\n    CardAutoCompleteData,\n    CardConfigSuccessData,\n    CardLoadData,\n    SFKeyDownObj,\n    SFFieldType\n} from '../lib/types';\nimport { CSFReturnObject, CSFSetupObject } from '../lib/CSF/types';\nimport { CVC_POLICY_REQUIRED, DATE_POLICY_REQUIRED, DEDICATED_CARD_COMPONENTS, ENCRYPTED_CARD_NUMBER, ENCRYPTED_PWD_FIELD } from '../lib/constants';\nimport { BinLookupResponse } from '../../../Card/types';\nimport AdyenCheckoutError from '../../../../core/Errors/AdyenCheckoutError';\nimport { SFStateErrorObj } from '../../../Card/components/CardInput/types';\nimport { resolveCVCErrorKey } from '../../../Card/components/CardInput/utils';\nimport { getErrorMessageFromCode } from '../../../../core/Errors/utils';\nimport { SF_ErrorCodes } from '../../../../core/Errors/constants';\nimport { TxVariants } from '../../../tx-variants';\n\n/**\n * SecuredFieldsProvider:\n * Initialises & handles the client-side part of SecuredFields\n */\nclass SecuredFieldsProvider extends Component<SFPProps, SFPState> {\n    private csfLoadFailTimeout: number;\n    private readonly csfLoadFailTimeoutMS: number;\n    private readonly csfConfigFailTimeout: number;\n    private readonly csfConfigFailTimeoutMS: number;\n    private numCharsInField: object;\n    private rootNode: HTMLElement;\n    private numDateFields: number;\n    private csf: CSFReturnObject;\n    private readonly handleOnLoad: (obj: CardLoadData) => void;\n    private readonly handleOnConfigSuccess: (obj: CardConfigSuccessData) => void;\n    private readonly handleOnFieldValid: (obj: CardFieldValidData) => void;\n    private readonly handleOnAllValid: (obj: CardAllValidData) => void;\n    private readonly handleOnBrand: (obj: CardBrandData) => void;\n    private readonly handleFocus: (obj: CardFocusData) => void;\n    private readonly handleOnError: (obj: CardErrorData, hasUnsupportedCard?: boolean) => void;\n    private readonly handleOnAutoComplete: (obj: CardAutoCompleteData) => void;\n    private readonly handleOnNoDataRequired: () => void;\n    private readonly handleOnTouchstartIOS: (obj) => void;\n    private readonly handleKeyDown: (obj: SFKeyDownObj) => void;\n    public state: SFPState;\n    public props: SFPProps;\n    private issuingCountryCode: string;\n\n    constructor(props: SFPProps) {\n        super(props);\n\n        const stateObj: SFPState = {\n            status: 'loading',\n            brand: props.type,\n            errors: {},\n            valid: {},\n            data: {},\n            cvcPolicy: CVC_POLICY_REQUIRED,\n            expiryDatePolicy: DATE_POLICY_REQUIRED,\n            isSfpValid: false,\n            hasKoreanFields: props.hasKoreanFields\n        };\n        this.state = stateObj;\n\n        this.csfLoadFailTimeout = null;\n        this.csfLoadFailTimeoutMS = 30000;\n\n        this.csfConfigFailTimeout = null;\n        this.csfConfigFailTimeoutMS = 15000;\n\n        this.numCharsInField = {};\n\n        // Handlers\n        this.handleOnLoad = handlers.handleOnLoad.bind(this);\n        this.handleOnConfigSuccess = handlers.handleOnConfigSuccess.bind(this);\n        this.handleOnFieldValid = handlers.handleOnFieldValid.bind(this);\n        this.handleOnAllValid = handlers.handleOnAllValid.bind(this);\n        this.handleOnBrand = handlers.handleOnBrand.bind(this);\n        this.handleFocus = handlers.handleFocus.bind(this);\n        this.handleOnError = handlers.handleOnError.bind(this);\n        this.handleOnNoDataRequired = handlers.handleOnNoDataRequired.bind(this);\n        this.handleOnAutoComplete = handlers.handleOnAutoComplete.bind(this);\n        this.handleOnTouchstartIOS = handlers.handleOnTouchstartIOS.bind(this); // Only called when iOS detected\n        this.handleKeyDown = handlers.handleKeyDown.bind(this);\n\n        this.processBinLookupResponse = this.processBinLookupResponse.bind(this);\n\n        // Bindings for functions exposed to users of this component: SecuredFields & CardInput\n        this.setFocusOn = this.setFocusOn.bind(this);\n        this.updateStyles = this.updateStyles.bind(this);\n        this.handleUnsupportedCard = this.handleUnsupportedCard.bind(this);\n        this.showValidation = this.showValidation.bind(this);\n        this.destroy = this.destroy.bind(this);\n    }\n\n    public static readonly defaultProps = defaultProps;\n\n    public componentDidMount(): void {\n        // When SFP instantiated through SecuredFieldsInput c.f. CardInput\n        if (this.props.rootNode) {\n            this.setRootNode(this.props.rootNode);\n        }\n\n        // Find encryptedFields and map them to the values we use to store valid states\n        const fields = getFields(this.rootNode);\n        const valid = fields.reduce(validFieldsReducer, {});\n\n        this.setState({ valid });\n\n        // Populate numCharsInField object\n        fields.forEach(field => {\n            this.numCharsInField[field] = 0;\n        });\n\n        // Store how many dateFields we are dealing with visually\n        this.numDateFields = fields.filter(f => f.match(/Expiry/)).length;\n\n        if (fields.length) {\n            this.destroy();\n            this.initializeCSF(this.rootNode);\n        } else {\n            if (this.props.componentType === (TxVariants.customCard as string)) {\n                console.debug(\n                    'You are trying to create a CustomCard component but the element into which you are trying to mount the CustomCard component does not contain any elements with a \"data-cse\" attribute e.g. <div data-cse=\"encryptedCardNumber\"></div>'\n                );\n            }\n            this.handleOnNoDataRequired();\n        }\n    }\n\n    public componentDidUpdate() {\n        this.checkForKCPFields();\n        // Pass all the state data up - Used right now for loading status\n        this.props.onStateUpdate?.(this.state);\n    }\n\n    public componentWillUnmount(): void {\n        this.csf = null;\n        clearTimeout(this.csfLoadFailTimeout);\n        clearTimeout(this.csfConfigFailTimeout);\n    }\n\n    private initializeCSF(root: HTMLElement): void {\n        let loadingContext = this.props.loadingContext;\n\n        // For loading securedFields from local server during development\n        if (process.env.NODE_ENV === 'development' && process.env.__SF_ENV__ !== 'build') {\n            loadingContext = process.env.__SF_ENV__;\n        }\n\n        const csfSetupObj: CSFSetupObject = {\n            rootNode: root,\n            type: this.props.type,\n            componentType: this.props.componentType,\n            clientKey: this.props.clientKey,\n            cardGroupTypes: this.props.brands,\n            autoFocus: this.props.autoFocus,\n            trimTrailingSeparator: this.props.trimTrailingSeparator,\n            loadingContext,\n            keypadFix: this.props.keypadFix,\n            showWarnings: this.props.showWarnings,\n            iframeUIConfig: {\n                sfStyles: this.props.styles\n            },\n            i18n: this.props.i18n,\n            onSubmitAnalytics: this.props.onSubmitAnalytics,\n            callbacks: {\n                onLoad: this.handleOnLoad,\n                onConfigSuccess: this.handleOnConfigSuccess,\n                onFieldValid: this.handleOnFieldValid,\n                onAllValid: this.handleOnAllValid,\n                onBrand: this.handleOnBrand,\n                onError: this.handleOnError,\n                onFocus: this.handleFocus,\n                onBinValue: this.props.onBinValue,\n                onAutoComplete: this.handleOnAutoComplete,\n                onAdditionalSFConfig: this.props.onAdditionalSFConfig,\n                onAdditionalSFRemoved: this.props.onAdditionalSFRemoved,\n                onTouchstartIOS: this.handleOnTouchstartIOS,\n                onKeyDown: this.handleKeyDown\n            },\n            isKCP: this.state.hasKoreanFields,\n            legacyInputMode: this.props.legacyInputMode,\n            minimumExpiryDate: this.props.minimumExpiryDate,\n            implementationType: this.props.implementationType || 'components', // to distinguish between 'regular' and 'custom' card component\n            forceCompat: this.props.forceCompat,\n            maskSecurityCode: this.props.maskSecurityCode,\n            exposeExpiryDate: this.props.exposeExpiryDate,\n            shouldDisableIOSArrowKeys: !!this.props.disableIOSArrowKeys, // convert whether function has been defined into a boolean\n            placeholders: this.props.placeholders ?? {},\n            showContextualElement: this.props.showContextualElement\n        };\n\n        this.csf = initCSF(csfSetupObj);\n\n        /**\n         * Expect to at least have had the handleOnLoad callback called within this time\n         * - if this hasn't happened then something has happened to interrupt the loading of the securedFields\n         * So we need to clear the loading spinner to see if the securedFields are reporting anything\n         */\n        // @ts-ignore - timout 'type' is a number\n        this.csfLoadFailTimeout = setTimeout(() => {\n            if (this.state.status !== 'ready') {\n                // Hide the spinner\n                this.setState({ status: 'csfLoadFailure' });\n                // Report the error\n                this.props.onError(new AdyenCheckoutError('ERROR', 'secured field iframes have failed to load'));\n            }\n        }, this.csfLoadFailTimeoutMS);\n    }\n\n    private checkForKCPFields() {\n        let needsKoreanFields = false;\n        if (this.props.koreanAuthenticationRequired) {\n            needsKoreanFields = this.issuingCountryCode ? this.issuingCountryCode === 'kr' : this.props.countryCode === 'kr';\n        }\n\n        // Was korean, now isn't - hide password field\n        if (this.state.hasKoreanFields && !needsKoreanFields) {\n            // Clear any stored data\n            const setRemovedFieldState = prevState => ({\n                data: { ...prevState.data, [ENCRYPTED_PWD_FIELD]: undefined },\n                valid: { ...prevState.valid, [ENCRYPTED_PWD_FIELD]: false },\n                errors: { ...prevState.errors, [ENCRYPTED_PWD_FIELD]: null },\n                hasKoreanFields: false\n            });\n\n            this.setState(setRemovedFieldState, () => {\n                this.props.onChange(this.state);\n            });\n\n            this.csf.removeSecuredField(ENCRYPTED_PWD_FIELD);\n            this.csf.setKCPStatus(false);\n        }\n\n        // Wasn't korean, now is - show password field\n        if (!this.state.hasKoreanFields && needsKoreanFields) {\n            const setAddedFieldState = prevState => ({\n                valid: { ...prevState.valid, [ENCRYPTED_PWD_FIELD]: false },\n                hasKoreanFields: true,\n                isSfpValid: false\n            });\n\n            this.setState(setAddedFieldState, () => {\n                this.props.onChange(this.state);\n            });\n\n            this.csf.addSecuredField(ENCRYPTED_PWD_FIELD);\n            this.csf.setKCPStatus(true);\n        }\n    }\n\n    public getChildContext(): object {\n        return { i18n: this.props.i18n };\n    }\n\n    public handleUnsupportedCard(errObj: CardErrorData): boolean {\n        const hasUnsupportedCard = !!errObj.error;\n\n        // Store the brand(s) we detected and which we don't support\n        if (hasUnsupportedCard) {\n            this.setState({ detectedUnsupportedBrands: errObj.detectedBrands });\n        }\n\n        errObj.rootNode = this.rootNode; // Needed for CustomCard\n        this.handleOnError(errObj, hasUnsupportedCard);\n        // Inform CSF that the number field has an unsupportedCard error (or that it has been cleared)\n        if (this.csf) {\n            this.csf.hasUnsupportedCard(ENCRYPTED_CARD_NUMBER, errObj.error);\n        }\n        return hasUnsupportedCard;\n    }\n\n    public setFocusOn(frame: SFFieldType): void {\n        if (this.csf) this.csf.setFocusOnFrame(frame);\n    }\n\n    public updateStyles(stylesObj: StylesObject): void {\n        if (this.csf) this.csf.updateStyles(stylesObj);\n    }\n\n    public sfIsOptionalOrHidden(fieldType: string): boolean {\n        return this.csf.sfIsOptionalOrHidden(fieldType as SFFieldType);\n    }\n\n    public destroy(): void {\n        if (this.csf) this.csf.destroy();\n    }\n\n    public getRootNode(): HTMLElement {\n        return this.rootNode;\n    }\n\n    public showValidation(): void {\n        const { numDateFields, state }: SecuredFieldsProvider = this;\n\n        Object.keys(state.valid)\n            .reduce(getErrorReducer(numDateFields, state), [])\n            .forEach((field: SFFieldType) => {\n                // For each detected error pass an error object to the handler (calls error callback & sets state)\n                const errorObj: CardErrorData = getErrorObject(field, this.rootNode, state);\n                this.handleOnError(errorObj, !!state.detectedUnsupportedBrands);\n                // Inform the secured-fields instance of which fields have been found to have errors\n                if (this.csf && this.csf.isValidated) {\n                    this.csf.isValidated(field, errorObj.error);\n                }\n            });\n    }\n\n    /**\n     * Map SF errors to ValidationRuleResult-like objects, for CardInput component\n     */\n    public mapErrorsToValidationRuleResult(): SFStateErrorObj {\n        const fieldNames: string[] = Object.keys(this.state.errors);\n\n        const sfStateErrorsObj = fieldNames.reduce((acc, fieldName) => {\n            const errorCode = this.state.errors[fieldName];\n            if (errorCode) {\n                acc[fieldName] = {\n                    isValid: false,\n                    errorMessage: getErrorMessageFromCode(errorCode, SF_ErrorCodes), // this is the human-readable, untranslated, explanation of the error that will exist on the error object in card.state.errors\n                    // For v5 the object found in state.errors should also contain the additional properties that used to be sent to the onError callback\n                    // namely: translation, errorCode, a ref to rootNode &, in the case of failed binLookup, an array of the detectedBrands\n                    // CVC's error copy is brand-dependent (Amex vs. others), so resolve the brand-aware\n                    // key here too - otherwise this errorI18n value (consumed by the SR-live-panel and\n                    // the public state.errors.<field>.errorI18n API) would always report the non-Amex text.\n                    errorI18n: this.props.i18n.get(resolveCVCErrorKey(errorCode, this.state.brand === 'amex')),\n                    error: errorCode,\n                    rootNode: this.rootNode,\n                    ...(this.state.detectedUnsupportedBrands && { detectedBrands: this.state.detectedUnsupportedBrands })\n                };\n            } else {\n                acc[fieldName] = null;\n            }\n            return acc;\n        }, {});\n        return sfStateErrorsObj;\n    }\n\n    public processBinLookupResponse(binLookupResponse: BinLookupResponse, resetObject: SingleBrandResetObject): void {\n        // If we were dealing with an unsupported card & now we have a valid /binLookup response (or a response triggering a reset of the UI),\n        // - reset state to clear the error & the stored unsupportedBrands and, in the case of a valid /binLookup response, inform CSF (via handleUnsupportedCard)\n        // (Scenario: from an unsupportedCard state the shopper has pasted another number long enough to trigger a /binLookup)\n        if (this.state.detectedUnsupportedBrands) {\n            this.setState(prevState => ({\n                errors: { ...prevState.errors, [ENCRYPTED_CARD_NUMBER]: null },\n                detectedUnsupportedBrands: null\n            }));\n\n            // If we have some sort of binLookupResponse object then this isn't the reset caused by digits dropping below a threshold\n            // - so call handleUnsupportedCard to clear the error\n            if (this.csf && binLookupResponse) {\n                const errObj: CardErrorData = {\n                    type: 'card',\n                    fieldType: 'encryptedCardNumber',\n                    error: ''\n                };\n                this.handleUnsupportedCard(errObj);\n            }\n        }\n\n        this.issuingCountryCode = binLookupResponse?.issuingCountryCode?.toLowerCase();\n\n        const hasBrandedResetObj = resetObject?.brand;\n\n        /**\n         * Are we dealing with a \"dedicated\" card scenario i.e a card component created as: checkout.create('bcmc') but which can accept multiple brands\n         * - in which case we will need to reset brand and pass on the resetObj to CSF\n         */\n        const mustResetDedicatedBrand = hasBrandedResetObj && DEDICATED_CARD_COMPONENTS.includes(resetObject.brand);\n\n        if (mustResetDedicatedBrand) {\n            // resetObject.brand will be the value of the brand whose logo we want to reshow in the UI\n            this.setState(resetObject, () => {\n                this.props.onChange(this.state);\n            });\n        }\n\n        /**\n         * Scenarios:\n         *\n         * - RESET (binLookupResponse === null): The number of digits in number field has dropped below threshold for BIN lookup\n         * - RESULT (binLookupResponse.supportedBrands.length === 1): binLookup has found a result so inform CSF\n         *\n         * In the RESET scenario, for \"dedicated\" card components we also need to pass on the resetObject since this contains information about\n         * the brand that CSF needs to reset to, internally.\n         */\n        if (this.csf) this.csf.brandsFromBinLookup(binLookupResponse, mustResetDedicatedBrand ? resetObject : null);\n    }\n\n    private setRootNode = (input: HTMLElement): void => {\n        this.rootNode = input;\n    };\n\n    public render(props, state: SFPState) {\n        return props.render({ setRootNode: this.setRootNode, setFocusOn: this.setFocusOn }, state);\n    }\n}\n\nexport default SecuredFieldsProvider;\n"],"names":["SecuredFieldsProvider","Component","componentDidMount","this","props","rootNode","setRootNode","fields","getFields","valid","reduce","validFieldsReducer","setState","forEach","field","numCharsInField","numDateFields","filter","f","match","length","destroy","initializeCSF","componentType","TxVariants","customCard","console","debug","handleOnNoDataRequired","componentDidUpdate","checkForKCPFields","onStateUpdate","state","componentWillUnmount","csf","clearTimeout","csfLoadFailTimeout","csfConfigFailTimeout","root","loadingContext","csfSetupObj","type","clientKey","cardGroupTypes","brands","autoFocus","trimTrailingSeparator","keypadFix","showWarnings","iframeUIConfig","sfStyles","styles","i18n","onSubmitAnalytics","callbacks","onLoad","handleOnLoad","onConfigSuccess","handleOnConfigSuccess","onFieldValid","handleOnFieldValid","onAllValid","handleOnAllValid","onBrand","handleOnBrand","onError","handleOnError","onFocus","handleFocus","onBinValue","onAutoComplete","handleOnAutoComplete","onAdditionalSFConfig","onAdditionalSFRemoved","onTouchstartIOS","handleOnTouchstartIOS","onKeyDown","handleKeyDown","isKCP","hasKoreanFields","legacyInputMode","minimumExpiryDate","implementationType","forceCompat","maskSecurityCode","exposeExpiryDate","shouldDisableIOSArrowKeys","disableIOSArrowKeys","placeholders","showContextualElement","initCSF","setTimeout","status","AdyenCheckoutError","csfLoadFailTimeoutMS","needsKoreanFields","koreanAuthenticationRequired","issuingCountryCode","countryCode","setRemovedFieldState","prevState","data","ENCRYPTED_PWD_FIELD","undefined","errors","onChange","removeSecuredField","setKCPStatus","setAddedFieldState","isSfpValid","addSecuredField","getChildContext","handleUnsupportedCard","errObj","hasUnsupportedCard","error","detectedUnsupportedBrands","detectedBrands","ENCRYPTED_CARD_NUMBER","setFocusOn","frame","setFocusOnFrame","updateStyles","stylesObj","sfIsOptionalOrHidden","fieldType","getRootNode","showValidation","Object","keys","getErrorReducer","errorObj","getErrorObject","isValidated","mapErrorsToValidationRuleResult","acc","fieldName","errorCode","isValid","errorMessage","getErrorMessageFromCode","SF_ErrorCodes","errorI18n","get","resolveCVCErrorKey","brand","processBinLookupResponse","binLookupResponse","resetObject","toLowerCase","hasBrandedResetObj","mustResetDedicatedBrand","DEDICATED_CARD_COMPONENTS","includes","brandsFromBinLookup","render","constructor","super","_define_property","csfConfigFailTimeoutMS","input","stateObj","cvcPolicy","CVC_POLICY_REQUIRED","expiryDatePolicy","DATE_POLICY_REQUIRED","handlers","bind","defaultProps"],"mappings":"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"}

package/dist/es/components/internal/SecuredFields/SFP/SecuredFieldsProviderHandlers.js

@@ -1,2 +1,2 @@
-import{getCardImageUrl as e}from"../utils.js";import{ENCRYPTED_CARD_NUMBER as t,ENCRYPTED_SECURITY_CODE as s,ENCRYPTED_EXPIRY_DATE as i,ENCRYPTED_EXPIRY_MONTH as n,ENCRYPTED_EXPIRY_YEAR as r,DATE_POLICY_REQUIRED as o,CVC_POLICY_REQUIRED as a,OPTIONAL as l,HIDDEN as d}from"../lib/constants.js";import{existy as h}from"../../../../utils/commonUtils.js";import u from"../../../../core/Errors/AdyenCheckoutError.js";function p(e,t,s,i){return(t!==l&&t!==d||0!==s[e])&&i[e]}var c={handleFocus:function(e){this.numCharsInField[e.fieldType]=e.numChars,this.props.onFocus(e)},handleOnAllValid:function(e){return!this.state.detectedUnsupportedBrands&&(this.setState({isSfpValid:e.allValid},()=>{this.props.onChange(this.state,{event:"handleOnAllValid"}),this.props.onAllValid(e)}),!0)},handleOnAutoComplete:function(e){this.setState({autoCompleteName:e.value},()=>{this.props.onChange(this.state,{event:"handleOnAutoComplete",fieldType:e.fieldType}),this.setState({autoCompleteName:null})}),this.props.onAutoComplete(e)},handleOnFieldValid:function(e){return(!this.state.detectedUnsupportedBrands||e.fieldType!==t)&&(this.setState(t=>({data:{...t.data,[e.encryptedFieldName]:e.blob},valid:{...t.valid,[e.encryptedFieldName]:e.valid},errors:{...t.errors,[e.fieldType]:t.errors[e.fieldType]??null}}),()=>{this.props.onChange(this.state,{event:"handleOnFieldValid",fieldType:e.fieldType}),this.props.onFieldValid(e)}),!0)},handleOnLoad:function(e){clearTimeout(this.csfLoadFailTimeout),this.csfLoadFailTimeout=null,this.props.onLoad(e),this.csfConfigFailTimeout=setTimeout(()=>{"ready"!==this.state.status&&(this.setState({status:"csfConfigFailure"}),this.props.onError(new u("ERROR","secured fields have failed to configure")))},this.csfConfigFailTimeoutMS)},handleOnConfigSuccess:function(e){clearTimeout(this.csfConfigFailTimeout),this.csfConfigFailTimeout=null,this.setState({status:"ready"},()=>{this.props.onConfigSuccess(e)})},handleOnBrand:function(t){this.setState(e=>{const l=p(s,t.cvcPolicy,this.numCharsInField,e.errors),d=1===this.numDateFields?p(i,t.expiryDatePolicy,this.numCharsInField,e.errors):null,u=2===this.numDateFields?p(n,t.expiryDatePolicy,this.numCharsInField,e.errors):null,c=2===this.numDateFields?p(r,t.expiryDatePolicy,this.numCharsInField,e.errors):null;return{brand:t.brand,cvcPolicy:t.cvcPolicy??a,showSocialSecurityNumber:t.showSocialSecurityNumber,errors:{...e.errors,...h(l)&&{[s]:l},...h(d)&&{[i]:d},...h(u)&&{[n]:u},...h(c)&&{[r]:c}},expiryDatePolicy:t.expiryDatePolicy??o}},()=>{this.props.onChange(this.state,{event:"handleOnBrand"});const s=this.props.brandsConfiguration[t.brand]?.icon??e(t.brand,this.props.resources);this.props.onBrand({...t,brandImageUrl:s})})},handleOnError:function(e,s=null){const i=e.error;return this.setState(n=>({errors:{...n.errors,[e.fieldType]:i||null},...s&&{data:{...n.data,[t]:void 0}},...s&&{valid:{...n.valid,[t]:!1}},...s&&{isSfpValid:!1}}),()=>{this.props.onChange(this.state,{event:"handleOnError",fieldType:e.fieldType})}),!0},handleOnNoDataRequired:function(){this.setState({status:"ready"},()=>this.props.onChange({isSfpValid:!0}))},handleOnTouchstartIOS:function(e){this.props.disableIOSArrowKeys?.(e)},handleKeyPressed:function(e){if("enterKeyPressed"===e.action){const e=new KeyboardEvent("keypress",{bubbles:!0,cancelable:!0,key:"Enter",code:"Enter"});this.props.handleKeyPress?.(e)}}};export{c as default};
+import{getCardImageUrl as e}from"../utils.js";import{ENCRYPTED_CARD_NUMBER as t,ENCRYPTED_SECURITY_CODE as i,ENCRYPTED_EXPIRY_DATE as s,ENCRYPTED_EXPIRY_MONTH as n,ENCRYPTED_EXPIRY_YEAR as o,DATE_POLICY_REQUIRED as r,CVC_POLICY_REQUIRED as a,OPTIONAL as l,HIDDEN as d}from"../lib/constants.js";import{existy as h}from"../../../../utils/commonUtils.js";import u from"../../../../core/Errors/AdyenCheckoutError.js";function p(e,t,i,s){return(t!==l&&t!==d||0!==i[e])&&s[e]}var c={handleFocus:function(e){this.numCharsInField[e.fieldType]=e.numChars,this.props.onFocus(e)},handleOnAllValid:function(e){return!this.state.detectedUnsupportedBrands&&(this.setState({isSfpValid:e.allValid},()=>{this.props.onChange(this.state,{event:"handleOnAllValid"}),this.props.onAllValid(e)}),!0)},handleOnAutoComplete:function(e){this.setState({autoCompleteName:e.value},()=>{this.props.onChange(this.state,{event:"handleOnAutoComplete",fieldType:e.fieldType}),this.setState({autoCompleteName:null})}),this.props.onAutoComplete(e)},handleOnFieldValid:function(e){return(!this.state.detectedUnsupportedBrands||e.fieldType!==t)&&(this.setState(t=>({data:{...t.data,[e.encryptedFieldName]:e.blob},valid:{...t.valid,[e.encryptedFieldName]:e.valid},errors:{...t.errors,[e.fieldType]:t.errors[e.fieldType]??null}}),()=>{this.props.onChange(this.state,{event:"handleOnFieldValid",fieldType:e.fieldType}),this.props.onFieldValid(e)}),!0)},handleOnLoad:function(e){clearTimeout(this.csfLoadFailTimeout),this.csfLoadFailTimeout=null,this.props.onLoad(e),this.csfConfigFailTimeout=setTimeout(()=>{"ready"!==this.state.status&&(this.setState({status:"csfConfigFailure"}),this.props.onError(new u("ERROR","secured fields have failed to configure")))},this.csfConfigFailTimeoutMS)},handleOnConfigSuccess:function(e){clearTimeout(this.csfConfigFailTimeout),this.csfConfigFailTimeout=null,this.setState({status:"ready"},()=>{this.props.onConfigSuccess(e)})},handleOnBrand:function(t){this.setState(e=>{const l=p(i,t.cvcPolicy,this.numCharsInField,e.errors),d=1===this.numDateFields?p(s,t.expiryDatePolicy,this.numCharsInField,e.errors):null,u=2===this.numDateFields?p(n,t.expiryDatePolicy,this.numCharsInField,e.errors):null,c=2===this.numDateFields?p(o,t.expiryDatePolicy,this.numCharsInField,e.errors):null;return{brand:t.brand,cvcPolicy:t.cvcPolicy??a,showSocialSecurityNumber:t.showSocialSecurityNumber,errors:{...e.errors,...h(l)&&{[i]:l},...h(d)&&{[s]:d},...h(u)&&{[n]:u},...h(c)&&{[o]:c}},expiryDatePolicy:t.expiryDatePolicy??r}},()=>{this.props.onChange(this.state,{event:"handleOnBrand"});const i=this.props.brandsConfiguration[t.brand]?.icon??e(t.brand,this.props.resources);this.props.onBrand({...t,brandImageUrl:i})})},handleOnError:function(e,i=null){const s=e.error;return this.setState(n=>({errors:{...n.errors,[e.fieldType]:s||null},...i&&{data:{...n.data,[t]:void 0}},...i&&{valid:{...n.valid,[t]:!1}},...i&&{isSfpValid:!1}}),()=>{this.props.onChange(this.state,{event:"handleOnError",fieldType:e.fieldType})}),!0},handleOnNoDataRequired:function(){this.setState({status:"ready"},()=>this.props.onChange({isSfpValid:!0}))},handleOnTouchstartIOS:function(e){this.props.disableIOSArrowKeys?.(e)},handleKeyDown:function(e){if("enterKeyPressed"===e.action){const e=new KeyboardEvent("keydown",{bubbles:!0,cancelable:!0,key:"Enter",code:"Enter"});this.props.handleKeyDown?.(e)}}};export{c as default};
 //# sourceMappingURL=SecuredFieldsProviderHandlers.js.map