@adyen/adyen-web 6.27.0 → 6.28.0

package/dist/es-legacy/components/internal/ClickToPay/components/CtPCards/CtPCardsList/CtPCardsList.js.map

@@ -1 +1 @@
-{"version":3,"file":"CtPCardsList.js","sources":["../../../../../../../../src/components/internal/ClickToPay/components/CtPCards/CtPCardsList/CtPCardsList.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useEffect, useMemo } from 'preact/hooks';\nimport ShopperCard from '../../../models/ShopperCard';\nimport useClickToPayContext from '../../../context/useClickToPayContext';\nimport { useCoreContext } from '../../../../../../core/Context/CoreProvider';\nimport useImage from '../../../../../../core/Context/useImage';\nimport useForm from '../../../../../../utils/useForm';\nimport isMobile from '../../../../../../utils/isMobile';\nimport Field from '../../../../FormFields/Field';\nimport './CtPCardsList.scss';\nimport Select from '../../../../FormFields/Select';\n\ntype CtPCardsListProps = {\n    cards: ShopperCard[];\n    cardSelected: ShopperCard;\n    errorMessage?: string;\n    onChangeCard(card: ShopperCard): void;\n};\n\ntype CardsSelectorDataState = {\n    srcDigitalCardId: string;\n};\n\nconst schema = ['srcDigitalCardId'];\n\nconst CtPCardsList = ({ cardSelected, cards, errorMessage, onChangeCard }: CtPCardsListProps) => {\n    const { i18n } = useCoreContext();\n    const getImage = useImage();\n    const { status } = useClickToPayContext();\n    const { handleChangeFor, data } = useForm<CardsSelectorDataState>({\n        schema,\n        defaultData: { srcDigitalCardId: cardSelected.srcDigitalCardId }\n    });\n\n    const items = useMemo(() => {\n        return cards.map(card => ({\n            icon: card.artUri || getImage()(card.scheme),\n            name: `${isMobile() ? '' : card.title} •••• ${card.panLastFour} `,\n            secondaryText: card.isExpired && i18n.get('ctp.cards.expiredCard'),\n            id: card.srcDigitalCardId,\n            disabled: card.isExpired\n        }));\n    }, [cards]);\n\n    useEffect(() => {\n        const { srcDigitalCardId } = data;\n        const card = cards.find(card => card.srcDigitalCardId === srcDigitalCardId);\n        onChangeCard(card);\n    }, [data, onChangeCard]);\n\n    return (\n        <Field\n            name=\"clickToPayCards\"\n            className=\"adyen-checkout-ctp__cards-list-field\"\n            errorMessage={errorMessage}\n            readOnly={status === 'loading'}\n            label={i18n.get('ctp.cards.subtitle')}\n        >\n            <Select\n                items={items}\n                selectedValue={data['srcDigitalCardId']}\n                name={'clickToPayCards'}\n                filterable={false}\n                className={'adyen-checkout-ctp__cards-list-dropdown'}\n                allowIdOnButton={true}\n                readonly={status === 'loading'}\n                onChange={handleChangeFor('srcDigitalCardId')}\n            />\n        </Field>\n    );\n};\n\nexport default CtPCardsList;\n"],"names":["schema","CtPCardsList","cardSelected","cards","errorMessage","onChangeCard","i18n","useCoreContext","getImage","useImage","status","useClickToPayContext","handleChangeFor","data","useForm","defaultData","srcDigitalCardId","items","useMemo","map","card","icon","artUri","scheme","name","isMobile","title","panLastFour","secondaryText","isExpired","get","id","disabled","useEffect","find","h","Field","className","readOnly","label","Select","selectedValue","filterable","allowIdOnButton","readonly","onChange"],"mappings":"2kBAuBA,MAAMA,EAAS,CAAC,oBAEVC,EAAe,EAAGC,eAAcC,QAAOC,eAAcC,mBACvD,MAAMC,KAAEA,GAASC,IACXC,EAAWC,KACXC,OAAEA,GAAWC,KACbC,gBAAEA,EAAeC,KAAEA,GAASC,EAAgC,CAC9Dd,SACAe,YAAa,CAAEC,iBAAkBd,EAAac,oBAG5CC,EAAQC,EAAQ,IACXf,EAAMgB,IAAIC,KACbC,KAAMD,EAAKE,QAAUd,IAAWY,EAAKG,QACrCC,KAAM,GAAGC,IAAa,GAAKL,EAAKM,cAAcN,EAAKO,eACnDC,cAAeR,EAAKS,WAAavB,EAAKwB,IAAI,yBAC1CC,GAAIX,EAAKJ,iBACTgB,SAAUZ,EAAKS,aAEpB,CAAC1B,IAQJ,OANA8B,EAAU,KACN,MAAMjB,iBAAEA,GAAqBH,EACvBO,EAAOjB,EAAM+B,KAAKd,GAAQA,EAAKJ,mBAAqBA,GAC1DX,EAAae,IACd,CAACP,EAAMR,IAGN8B,EAACC,EAAAA,CACGZ,KAAK,kBACLa,UAAU,uCACVjC,aAAcA,EACdkC,SAAqB,YAAX5B,EACV6B,MAAOjC,EAAKwB,IAAI,uBAEhBK,EAACK,EAAAA,CACGvB,MAAOA,EACPwB,cAAe5B,EAAK,iBACpBW,KAAM,kBACNkB,YAAY,EACZL,UAAW,0CACXM,iBAAiB,EACjBC,SAAqB,YAAXlC,EACVmC,SAAUjC,EAAgB"}
+{"version":3,"file":"CtPCardsList.js","sources":["../../../../../../../../src/components/internal/ClickToPay/components/CtPCards/CtPCardsList/CtPCardsList.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useEffect, useMemo } from 'preact/hooks';\nimport ShopperCard from '../../../models/ShopperCard';\nimport useClickToPayContext from '../../../context/useClickToPayContext';\nimport { useCoreContext } from '../../../../../../core/Context/CoreProvider';\nimport useImage from '../../../../../../core/Context/useImage';\nimport useForm from '../../../../../../utils/useForm';\nimport isMobile from '../../../../../../utils/isMobile';\nimport Field from '../../../../FormFields/Field';\nimport './CtPCardsList.scss';\nimport Select from '../../../../FormFields/Select';\n\ntype CtPCardsListProps = {\n    cards: ShopperCard[];\n    cardSelected: ShopperCard;\n    errorMessage?: string;\n    onChangeCard(card: ShopperCard): void;\n};\n\ntype CardsSelectorDataState = {\n    srcDigitalCardId: string;\n};\n\nconst schema = ['srcDigitalCardId'];\n\nconst CtPCardsList = ({ cardSelected, cards, errorMessage, onChangeCard }: CtPCardsListProps) => {\n    const { i18n } = useCoreContext();\n    const getImage = useImage();\n    const { status } = useClickToPayContext();\n    const { handleChangeFor, data } = useForm<CardsSelectorDataState>({\n        schema,\n        defaultData: { srcDigitalCardId: cardSelected.srcDigitalCardId }\n    });\n\n    const items = useMemo(() => {\n        return cards.map(card => ({\n            icon: card.artUri || getImage()(card.scheme),\n            name: `${isMobile() ? '' : card.title} •••• ${card.panLastFour} `,\n            secondaryText: card.isExpired && i18n.get('ctp.cards.expiredCard'),\n            id: card.srcDigitalCardId,\n            disabled: card.isExpired\n        }));\n    }, [cards]);\n\n    useEffect(() => {\n        const { srcDigitalCardId } = data;\n        const card = cards.find(card => card.srcDigitalCardId === srcDigitalCardId);\n        onChangeCard(card);\n    }, [data, onChangeCard]);\n\n    return (\n        <Field\n            name=\"clickToPayCards\"\n            className=\"adyen-checkout-ctp__cards-list-field\"\n            errorMessage={errorMessage}\n            readOnly={status === 'loading'}\n            label={i18n.get('ctp.cards.subtitle')}\n        >\n            <Select\n                items={items}\n                selectedValue={data['srcDigitalCardId']}\n                name={'clickToPayCards'}\n                filterable={false}\n                className={'adyen-checkout-ctp__cards-list-dropdown'}\n                readonly={status === 'loading'}\n                onChange={handleChangeFor('srcDigitalCardId')}\n            />\n        </Field>\n    );\n};\n\nexport default CtPCardsList;\n"],"names":["schema","CtPCardsList","cardSelected","cards","errorMessage","onChangeCard","i18n","useCoreContext","getImage","useImage","status","useClickToPayContext","handleChangeFor","data","useForm","defaultData","srcDigitalCardId","items","useMemo","map","card","icon","artUri","scheme","name","isMobile","title","panLastFour","secondaryText","isExpired","get","id","disabled","useEffect","find","h","Field","className","readOnly","label","Select","selectedValue","filterable","readonly","onChange"],"mappings":"2kBAuBA,MAAMA,EAAS,CAAC,oBAEVC,EAAe,EAAGC,eAAcC,QAAOC,eAAcC,mBACvD,MAAMC,KAAEA,GAASC,IACXC,EAAWC,KACXC,OAAEA,GAAWC,KACbC,gBAAEA,EAAeC,KAAEA,GAASC,EAAgC,CAC9Dd,SACAe,YAAa,CAAEC,iBAAkBd,EAAac,oBAG5CC,EAAQC,EAAQ,IACXf,EAAMgB,IAAIC,KACbC,KAAMD,EAAKE,QAAUd,IAAWY,EAAKG,QACrCC,KAAM,GAAGC,IAAa,GAAKL,EAAKM,cAAcN,EAAKO,eACnDC,cAAeR,EAAKS,WAAavB,EAAKwB,IAAI,yBAC1CC,GAAIX,EAAKJ,iBACTgB,SAAUZ,EAAKS,aAEpB,CAAC1B,IAQJ,OANA8B,EAAU,KACN,MAAMjB,iBAAEA,GAAqBH,EACvBO,EAAOjB,EAAM+B,KAAKd,GAAQA,EAAKJ,mBAAqBA,GAC1DX,EAAae,IACd,CAACP,EAAMR,IAGN8B,EAACC,EAAAA,CACGZ,KAAK,kBACLa,UAAU,uCACVjC,aAAcA,EACdkC,SAAqB,YAAX5B,EACV6B,MAAOjC,EAAKwB,IAAI,uBAEhBK,EAACK,EAAAA,CACGvB,MAAOA,EACPwB,cAAe5B,EAAK,iBACpBW,KAAM,kBACNkB,YAAY,EACZL,UAAW,0CACXM,SAAqB,YAAXjC,EACVkC,SAAUhC,EAAgB"}

package/dist/es-legacy/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 s from"../../../../_virtual/index.js";import o 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";function f({items:f=[],className:p="",classNameModifiers:g=[],filterable:v=!0,readonly:h=!1,onChange:b=()=>{},onInput:w,selectedValue:y,name:k,isInvalid:I,isValid:L,placeholder:D,uniqueId:j,disabled:x,disableTextFilter:B,clearOnSelect:E,blurOnClose:T,onListToggle:C,allowIdOnButton:N=!1,required:S}){const $=t(null),_=t(null),M=t(null),O=t(null),[R,q]=n(null),[P,V]=n(!1),A=r(()=>`select-${i()}`,[]),F=f.find(e=>e.id===y)||{},[H,K]=n(),[U,z]=n(F),G=F,J=B?f:f.filter(e=>!R||e.name.toLowerCase().includes(R.toLowerCase())),Q=j?`${j}${I?u:d}`:null,W=e=>{if(!e)return;const t=document.getElementById(`listItem-${e.id}`);m(t)},X=()=>{T&&$.current.blur(),V(!1)},Y=()=>{V(!0)},Z=e=>{const t=e.currentTarget.getAttribute("data-value");return J.find(e=>e.id==t)},ee=e=>{let t;e.preventDefault(),t=e.currentTarget instanceof HTMLElement&&"option"===e.currentTarget.getAttribute("role")?Z(e):U.id&&J.some(e=>e.id===U.id)?U:R?J[0]:{id:y},t&&!t.disabled&&(b({target:{value:t.id,name:k}}),E&&K(null),X())},te=e=>{switch(e.key){case c.space:case c.enter:ee(e);break;case c.arrowDown:e.preventDefault(),(()=>{if(!J||J.length<1)return;const e=J.findIndex(e=>e===U)+1,t=e<J.length?e:0,n=J[t];W(n),z(n)})();break;case c.arrowUp:e.preventDefault(),(()=>{if(!J||J.length<1)return;const e=J.findIndex(e=>e===U)-1,t=e<0?J.length-1:e,n=J[t];W(n),z(n)})()}};return l(()=>{P?K(null):q(null)},[P]),l(()=>{P&&v&&$.current&&$.current.focus(),null==C||C(P)},[P]),l(()=>{function e(e){(e.composedPath?!e.composedPath().includes(_.current):!_.current.contains(e.target))&&X()}return document.addEventListener("click",e,!1),()=>{document.removeEventListener("click",e,!1)}},[_]),e("div",{className:s(["adyen-checkout__dropdown",p,...g.map(e=>`adyen-checkout__dropdown--${e}`)]),ref:_},e(o,{inputText:H,id:null!=j?j:null,active:U,selected:G,filterInputRef:$,filterable:v,isInvalid:I,isValid:L,onButtonKeyDown:e=>{e.key===c.enter&&v&&P&&R?ee(e):e.key===c.escape?X():![c.arrowUp,c.arrowDown,c.enter].includes(e.key)&&(e.key!==c.space||v&&P)?(e.shiftKey&&e.key===c.tab||e.key===c.tab)&&X():(e.preventDefault(),P?te(e):Y())},onFocus:Y,onInput:e=>{const t=e.target.value;K(t),q(t),w&&w(t)},placeholder:D,readonly:h,selectListId:A,showList:P,toggleButtonRef:M,toggleList:e=>{e.preventDefault(),P?(K(G.name),X()):(K(null),Y())},disabled:x,ariaDescribedBy:Q,allowIdOnButton:N,required:S}),e(a,{active:U,filteredItems:J,onHover:e=>{e.preventDefault();const t=Z(e);z(t)},onSelect:ee,selected:G,selectListId:A,selectListRef:O,showList:P}))}f.defaultProps={className:"",classNameModifiers:[],filterable:!0,items:[],readonly:!1,onChange:()=>{}};export{f as default};
+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 s from"../../../../_virtual/index.js";import o 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:C,disableTextFilter:E,clearOnSelect:T,blurOnClose:N,onListToggle:B,required:S}){const{i18n:$}=f(),_=t(null),M=t(null),P=t(null),R=t(null),[q,O]=n(null),[V,A]=n(!1),[F,H]=n(null),K=r(()=>`select-${i()}`,[]),U=p.find(e=>e.id===w)||{},[z,G]=n(),[J,Q]=n(U),W=U,X=E?p:p.filter(e=>!q||e.name.toLowerCase().includes(q.toLowerCase())),Y=x?`${x}${L?u:d}`:null,Z=e=>{if(!e)return;const t=document.getElementById(`listItem-${e.id}`);m(t)},ee=()=>{N&&_.current.blur(),A(!1)},te=()=>{A(!0)},ne=e=>{const t=e.currentTarget.getAttribute("data-value");return X.find(e=>e.id==t)},re=e=>{let t;e.preventDefault(),t=e.currentTarget instanceof HTMLElement&&"option"===e.currentTarget.getAttribute("role")?ne(e):J.id&&X.some(e=>e.id===J.id)?J:q?X[0]:{id:w},t&&!t.disabled&&(b({target:{value:t.id,name:I}}),T&&G(null),ee())},le=e=>{switch(e.key){case c.space:case c.enter:re(e);break;case c.arrowDown:e.preventDefault(),(()=>{if(!X||X.length<1)return;const e=X.findIndex(e=>e===J)+1,t=e<X.length?e:0,n=X[t];Z(n),Q(n)})();break;case c.arrowUp:e.preventDefault(),(()=>{if(!X||X.length<1)return;const e=X.findIndex(e=>e===J)-1,t=e<0?X.length-1:e,n=X[t];Z(n),Q(n)})()}};return l(()=>{V?G(null):O(null)},[V]),l(()=>{V&&h&&_.current&&_.current.focus(),null==B||B(V)},[V]),l(()=>{function e(e){(e.composedPath?!e.composedPath().includes(M.current):!M.current.contains(e.target))&&ee()}return document.addEventListener("click",e,!1),()=>{document.removeEventListener("click",e,!1)}},[M]),l(()=>{V&&0===X.length?H($.get("select.noOptionsFound")):H(null)},[V,X.length,$]),e("div",{className:s(["adyen-checkout__dropdown",g,...v.map(e=>`adyen-checkout__dropdown--${e}`)]),ref:M},e(o,{inputText:z,id:null!=x?x:null,active:J,selected:W,filterInputRef:_,filterable:h,isInvalid:L,isValid:j,onButtonKeyDown:e=>{e.key===c.enter&&h&&V&&q?re(e):e.key===c.escape?ee():![c.arrowUp,c.arrowDown,c.enter].includes(e.key)&&(e.key!==c.space||h&&V)?(e.shiftKey&&e.key===c.tab||e.key===c.tab)&&ee():(e.preventDefault(),V?le(e):te())},onInput:e=>{const t=e.target.value;G(t),O(t),V||te(),k&&k(t)},placeholder:D,readonly:y,selectListId:K,showList:V,toggleButtonRef:P,toggleList:e=>{e.preventDefault(),V?(G(W.name),ee()):(G(null),te())},disabled:C,ariaDescribedBy:Y,required:S}),e(a,{active:J,filteredItems:X,onHover:e=>{e.preventDefault();const t=ne(e);Q(t)},onSelect:re,selected:W,selectListId:K,selectListRef:R,showList:V}),e("div",{role:"status","aria-live":"polite","aria-relevant":"all",className:"adyen-checkout-sr-panel--sr-only"},F))}p.defaultProps={className:"",classNameModifiers:[],filterable:!0,items:[],readonly:!1,onChange:()=>{}};export{p as default};
 //# sourceMappingURL=Select.js.map

package/dist/es-legacy/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';\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    allowIdOnButton = false,\n    required\n}: SelectProps) {\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 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 ariaDescribedBy = uniqueId ? `${uniqueId}${suffix}` : null;\n\n    const setNextActive = () => {\n        if (!filteredItems || filteredItems.length < 1) return;\n        const possibleNextIndex = filteredItems.findIndex(listItem => listItem === activeOption) + 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 === activeOption) - 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        blurOnClose && filterInputRef.current.blur();\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\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        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    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                onFocus={openList}\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                allowIdOnButton={allowIdOnButton}\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    );\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","allowIdOnButton","required","filterInputRef","useRef","selectContainerRef","toggleButtonRef","selectListRef","textFilter","setTextFilter","useState","showList","setShowList","selectListId","useMemo","uuid","active","find","i","id","inputText","setInputText","activeOption","setActiveOption","selectedOption","filteredItems","filter","item","toLowerCase","includes","ariaDescribedBy","ARIA_ERROR_SUFFIX","ARIA_CONTEXT_SUFFIX","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","h","div","cx","map","m","ref","SelectButton","selected","onButtonKeyDown","escape","shiftKey","tab","onFocus","toggleList","SelectList","onHover","onSelect","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';\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}: 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);\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 ariaDescribedBy = uniqueId ? `${uniqueId}${suffix}` : null;\n\n    const setNextActive = () => {\n        if (!filteredItems || filteredItems.length < 1) return;\n        const possibleNextIndex = filteredItems.findIndex(listItem => listItem === activeOption) + 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 === activeOption) - 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        blurOnClose && filterInputRef.current.blur();\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        if (showList && filteredItems.length === 0) {\n            setStatusMessage(i18n.get('select.noOptionsFound'));\n        } else {\n            setStatusMessage(null);\n        }\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                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=\"all\"\n                className=\"adyen-checkout-sr-panel--sr-only\"\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","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","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","get","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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"}

package/dist/es-legacy/components/internal/FormFields/Select/components/SelectButton.js

@@ -1,2 +1,2 @@
-import{createElement as e,Fragment as t}from"../../../../../external/preact/dist/preact.js";import n from"../../../../../_virtual/index.js";import o from"../../../Img/Img.js";import{useMemo as r}from"../../../../../external/preact/hooks/dist/hooks.js";function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},o=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),o.forEach(function(t){a(e,t,n[t])})}return e}function i(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}),e}function l(e,t){if(null==e)return{};var n,o,r=function(e,t){if(null==e)return{};var n,o,r={},a=Object.keys(e);for(o=0;o<a.length;o++)n=a[o],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)n=a[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}function d(t){var{filterable:n,toggleButtonRef:o}=t,r=l(t,["filterable","toggleButtonRef"]);if(n){const{id:t}=r,n=l(r,["id"]);return e("div",i(c({},n),{ref:o}))}return e("button",i(c({id:r.id,"aria-describedby":r.ariaDescribedBy,type:"button"},r),{ref:o}))}function u(a){const{active:i,selected:l,inputText:u,readonly:s,showList:p,required:_}=a,f=r(()=>{const e=l.selectedOptionName||l.name;return!0!==("string"==typeof e&&""!==e.trim())},[l,a.placeholder]),b=l.selectedOptionName||l.name||a.placeholder||"",y=p?u:b,m=s?null:a.filterable?e=>{e.preventDefault(),document.activeElement===a.filterInputRef.current?a.showList||a.toggleList(e):a.filterInputRef.current&&a.filterInputRef.current.focus()}:a.toggleList,O=s?null:a.onFocus,g=i.id?`listItem-${i.id}`:"";return e(d,c({className:n({"adyen-checkout__dropdown__button":!0,"adyen-checkout__dropdown__button--readonly":s,"adyen-checkout__dropdown__button--active":p,"adyen-checkout__dropdown__button--invalid":a.isInvalid,"adyen-checkout__dropdown__button--valid":a.isValid,"adyen-checkout__dropdown__button--disabled":l.disabled}),disabled:a.disabled,filterable:a.filterable,onClick:m,onKeyDown:s?null:a.onButtonKeyDown,toggleButtonRef:a.toggleButtonRef},a.allowIdOnButton&&a.id&&{id:a.id}),a.filterable?e(t,null,!p&&l.icon&&e(o,{className:"adyen-checkout__dropdown__button__icon",src:l.icon,alt:l.name}),e("input",{value:y,"aria-autocomplete":"list","aria-controls":a.selectListId,"aria-expanded":p,"aria-owns":a.selectListId,autoComplete:"off",className:"adyen-checkout__filter-input",onInput:a.onInput,onFocus:O,ref:a.filterInputRef,role:"combobox","aria-activedescendant":g,type:"text",readOnly:a.readonly,id:a.id,"aria-describedby":a.ariaDescribedBy,required:_}),!p&&l.secondaryText&&e("span",{className:"adyen-checkout__dropdown__button__secondary-text"},l.secondaryText)):e(t,null,l.icon&&e(o,{className:"adyen-checkout__dropdown__button__icon",src:l.icon,alt:l.name}),e("span",{className:n("adyen-checkout__dropdown__button__text",{"adyen-checkout__dropdown__button__text-placeholder":f})},b),l.secondaryText&&e("span",{className:"adyen-checkout__dropdown__button__secondary-text"},l.secondaryText)))}export{u as default};
+import{createElement as e,Fragment as t}from"../../../../../external/preact/dist/preact.js";import n from"../../../../../_virtual/index.js";import r from"../../../Img/Img.js";import{useMemo as o}from"../../../../../external/preact/hooks/dist/hooks.js";function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){a(e,t,n[t])})}return e}function i(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}),e}function l(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function d(t){var{filterable:n,toggleButtonRef:r}=t,o=l(t,["filterable","toggleButtonRef"]);if(n){const{id:t}=o,n=l(o,["id"]);return e("div",i(c({},n),{ref:r}))}return e("button",i(c({id:o.id,"aria-expanded":o.showList,"aria-disabled":o.readonly,"aria-describedby":o.ariaDescribedBy,type:"button"},o),{ref:r}))}function u(a){const{active:c,selected:i,inputText:l,readonly:u,showList:s,required:p}=a,b=o(()=>{const e=i.selectedOptionName||i.name;return!0!==("string"==typeof e&&""!==e.trim())},[i,a.placeholder]),_=i.selectedOptionName||i.name||a.placeholder||"",f=s?l:_,y=u?null:a.filterable?e=>{e.preventDefault(),document.activeElement===a.filterInputRef.current?a.showList||a.toggleList(e):a.filterInputRef.current&&a.filterInputRef.current.focus()}:a.toggleList,m=c.id?`listItem-${c.id}`:"";return e(d,{className:n({"adyen-checkout__dropdown__button":!0,"adyen-checkout__dropdown__button--readonly":u,"adyen-checkout__dropdown__button--active":s,"adyen-checkout__dropdown__button--invalid":a.isInvalid,"adyen-checkout__dropdown__button--valid":a.isValid,"adyen-checkout__dropdown__button--disabled":i.disabled}),disabled:a.disabled,filterable:a.filterable,onClick:y,onKeyDown:u?null:a.onButtonKeyDown,toggleButtonRef:a.toggleButtonRef,id:a.id},a.filterable?e(t,null,!s&&i.icon&&e(r,{className:"adyen-checkout__dropdown__button__icon",src:i.icon,alt:i.name}),e("input",{value:f,"aria-autocomplete":"list","aria-controls":a.selectListId,"aria-expanded":s,"aria-owns":a.selectListId,autoComplete:"off",className:"adyen-checkout__filter-input",onInput:a.onInput,ref:a.filterInputRef,role:"combobox","aria-activedescendant":m,type:"text",readOnly:a.readonly,"aria-disabled":a.readonly,id:a.id,"aria-describedby":a.ariaDescribedBy,required:p}),!s&&i.secondaryText&&e("span",{className:"adyen-checkout__dropdown__button__secondary-text"},i.secondaryText)):e(t,null,i.icon&&e(r,{className:"adyen-checkout__dropdown__button__icon",src:i.icon,alt:i.name}),e("span",{className:n("adyen-checkout__dropdown__button__text",{"adyen-checkout__dropdown__button__text-placeholder":b})},_),i.secondaryText&&e("span",{className:"adyen-checkout__dropdown__button__secondary-text"},i.secondaryText)))}export{u as default};
 //# sourceMappingURL=SelectButton.js.map

package/dist/es-legacy/components/internal/FormFields/Select/components/SelectButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectButton.js","sources":["../../../../../../../src/components/internal/FormFields/Select/components/SelectButton.tsx"],"sourcesContent":["import { h, Fragment } from 'preact';\nimport cx from 'classnames';\nimport { SelectButtonProps } from '../types';\nimport Img from '../../../Img';\nimport { useMemo } from 'preact/hooks';\nimport classnames from 'classnames';\n\nfunction SelectButtonElement({ filterable, toggleButtonRef, ...props }) {\n    if (filterable) {\n        // Even if passed, we can't add an id to this div since it is not allowed to associate a div with a label element\n        const { id, ...strippedProps } = props;\n        return <div {...strippedProps} ref={toggleButtonRef} />;\n    }\n\n    return <button id={props.id} aria-describedby={props.ariaDescribedBy} type={'button'} {...props} ref={toggleButtonRef} />;\n}\n\nfunction SelectButton(props: Readonly<SelectButtonProps>) {\n    const { active, selected, inputText, readonly, showList, required } = props;\n\n    const isShowingPlaceholder = useMemo(() => {\n        const displayText = selected.selectedOptionName || selected.name;\n        const isValidValue = typeof displayText === 'string' && displayText.trim() !== '';\n        return isValidValue !== true;\n    }, [selected, props.placeholder]);\n\n    // display fallback order\n    const displayText = selected.selectedOptionName || selected.name || props.placeholder || '';\n    // displayInputText only used for the text input for the filter\n    // display the \"typed\" filter text when showing the dropdown,\n    // hide it and show the \"selected\" value when collapsed\n    const displayInputText = showList ? inputText : displayText;\n\n    const setFocus = (e: Event) => {\n        e.preventDefault();\n        if (document.activeElement === props.filterInputRef.current) {\n            if (!props.showList) {\n                props.toggleList(e);\n            }\n        } else if (props.filterInputRef.current) props.filterInputRef.current.focus();\n    };\n\n    // 1. If readonly we ignore the click action\n    // 2. If filterable we want to show the list and focus on the input\n    // 3. Otherwise we just toggle the list\n    const onClickHandler = readonly ? null : props.filterable ? setFocus : props.toggleList;\n\n    const onFocusHandler = readonly ? null : props.onFocus;\n\n    // check COWEB-1301 [Investigate] Drop-in Accessibility - ADA Compliance questions\n    const currentSelectedItemId = active.id ? `listItem-${active.id}` : '';\n\n    return (\n        <SelectButtonElement\n            className={cx({\n                'adyen-checkout__dropdown__button': true,\n                'adyen-checkout__dropdown__button--readonly': readonly,\n                'adyen-checkout__dropdown__button--active': showList,\n                'adyen-checkout__dropdown__button--invalid': props.isInvalid,\n                'adyen-checkout__dropdown__button--valid': props.isValid,\n                'adyen-checkout__dropdown__button--disabled': selected.disabled\n            })}\n            disabled={props.disabled}\n            filterable={props.filterable}\n            onClick={onClickHandler}\n            onKeyDown={!readonly ? props.onButtonKeyDown : null}\n            toggleButtonRef={props.toggleButtonRef}\n            // Only for some dropdowns e.g. the one found in installments when it is just in the form of a single dropdown, do we want to add an id that links to a label's for attr\n            // If we allow an id to be added to the buttons in CtPCardsList, for example, unit tests start failing because it seems a button with an id no longer has a name property that can be used\n            // as a qualifier in findByRole\n            {...(props.allowIdOnButton && props.id && { id: props.id })}\n        >\n            {!props.filterable ? (\n                <Fragment>\n                    {selected.icon && <Img className=\"adyen-checkout__dropdown__button__icon\" src={selected.icon} alt={selected.name} />}\n                    <span\n                        className={classnames('adyen-checkout__dropdown__button__text', {\n                            'adyen-checkout__dropdown__button__text-placeholder': isShowingPlaceholder\n                        })}\n                    >\n                        {displayText}\n                    </span>\n                    {selected.secondaryText && <span className=\"adyen-checkout__dropdown__button__secondary-text\">{selected.secondaryText}</span>}\n                </Fragment>\n            ) : (\n                <Fragment>\n                    {!showList && selected.icon && <Img className=\"adyen-checkout__dropdown__button__icon\" src={selected.icon} alt={selected.name} />}\n                    <input\n                        value={displayInputText}\n                        aria-autocomplete=\"list\"\n                        aria-controls={props.selectListId}\n                        aria-expanded={showList}\n                        aria-owns={props.selectListId}\n                        autoComplete=\"off\"\n                        className=\"adyen-checkout__filter-input\"\n                        onInput={props.onInput}\n                        onFocus={onFocusHandler}\n                        ref={props.filterInputRef}\n                        role=\"combobox\"\n                        aria-activedescendant={currentSelectedItemId}\n                        type=\"text\"\n                        readOnly={props.readonly}\n                        id={props.id}\n                        aria-describedby={props.ariaDescribedBy}\n                        required={required}\n                    />\n                    {!showList && selected.secondaryText && (\n                        <span className=\"adyen-checkout__dropdown__button__secondary-text\">{selected.secondaryText}</span>\n                    )}\n                </Fragment>\n            )}\n        </SelectButtonElement>\n    );\n}\n\nexport default SelectButton;\n"],"names":["SelectButtonElement","_param","filterable","toggleButtonRef","props","id","strippedProps","h","div","ref","button","aria-describedby","ariaDescribedBy","type","SelectButton","active","selected","inputText","readonly","showList","required","isShowingPlaceholder","useMemo","displayText","selectedOptionName","name","trim","placeholder","displayInputText","onClickHandler","e","preventDefault","document","activeElement","filterInputRef","current","toggleList","focus","onFocusHandler","onFocus","currentSelectedItemId","className","cx","isInvalid","isValid","disabled","onClick","onKeyDown","onButtonKeyDown","allowIdOnButton","Fragment","icon","Img","src","alt","input","value","aria-autocomplete","aria-controls","selectListId","aria-expanded","aria-owns","autoComplete","onInput","role","aria-activedescendant","readOnly","secondaryText","span","classnames"],"mappings":"y5CAOA,SAASA,EAAoBC,GAAA,IAAAC,WAAEA,EAAUC,gBAAEA,GAAdF,EAAkCG,EAAAA,EAAlCH,EAAA,CAAEC,aAAYC,oBACvC,GAAID,EAAY,CAEZ,MAAMG,GAAEA,GAAyBD,EAAlBE,EAAAA,EAAkBF,EAAAA,CAAzBC,OACR,OAAOE,EAACC,MAAAA,EAAAA,EAAAA,CAAAA,EAAQF,GAAAA,CAAeG,IAAKN,IACxC,CAEA,OAAOI,EAACG,SAAAA,EAAAA,EAAAA,CAAOL,GAAID,EAAMC,GAAIM,mBAAkBP,EAAMQ,gBAAiBC,KAAM,UAAcT,GAAAA,CAAOK,IAAKN,IAC1G,CAEA,SAASW,EAAaV,GAClB,MAAMW,OAAEA,EAAMC,SAAEA,EAAQC,UAAEA,EAASC,SAAEA,EAAQC,SAAEA,EAAQC,SAAEA,GAAahB,EAEhEiB,EAAuBC,EAAQ,KACjC,MAAMC,EAAcP,EAASQ,oBAAsBR,EAASS,KAE5D,OAAwB,KADoB,iBAAhBF,GAAmD,KAAvBA,EAAYG,SAErE,CAACV,EAAUZ,EAAMuB,cAGdJ,EAAcP,EAASQ,oBAAsBR,EAASS,MAAQrB,EAAMuB,aAAe,GAInFC,EAAmBT,EAAWF,EAAYM,EAc1CM,EAAiBX,EAAW,KAAOd,EAAMF,WAZ7B4B,IACdA,EAAEC,iBACEC,SAASC,gBAAkB7B,EAAM8B,eAAeC,QAC3C/B,EAAMe,UACPf,EAAMgC,WAAWN,GAEd1B,EAAM8B,eAAeC,SAAS/B,EAAM8B,eAAeC,QAAQE,SAMHjC,EAAMgC,WAEvEE,EAAiBpB,EAAW,KAAOd,EAAMmC,QAGzCC,EAAwBzB,EAAOV,GAAK,YAAYU,EAAOV,KAAO,GAEpE,OACIE,EAACP,EAAAA,EAAAA,CACGyC,UAAWC,EAAG,CACV,oCAAoC,EACpC,6CAA8CxB,EAC9C,2CAA4CC,EAC5C,4CAA6Cf,EAAMuC,UACnD,0CAA2CvC,EAAMwC,QACjD,6CAA8C5B,EAAS6B,WAE3DA,SAAUzC,EAAMyC,SAChB3C,WAAYE,EAAMF,WAClB4C,QAASjB,EACTkB,UAAY7B,EAAmC,KAAxBd,EAAM4C,gBAC7B7C,gBAAiBC,EAAMD,iBAIlBC,EAAM6C,iBAAmB7C,EAAMC,IAAM,CAAEA,GAAID,EAAMC,KAEpDD,EAAMF,WAaJK,EAAC2C,EAAAA,MACK/B,GAAYH,EAASmC,MAAQ5C,EAAC6C,EAAAA,CAAIX,UAAU,yCAAyCY,IAAKrC,EAASmC,KAAMG,IAAKtC,EAASS,OACzHlB,EAACgD,QAAAA,CACGC,MAAO5B,EACP6B,oBAAkB,OAClBC,gBAAetD,EAAMuD,aACrBC,gBAAezC,EACf0C,YAAWzD,EAAMuD,aACjBG,aAAa,MACbrB,UAAU,+BACVsB,QAAS3D,EAAM2D,QACfxB,QAASD,EACT7B,IAAKL,EAAM8B,eACX8B,KAAK,WACLC,wBAAuBzB,EACvB3B,KAAK,OACLqD,SAAU9D,EAAMc,SAChBb,GAAID,EAAMC,GACVM,mBAAkBP,EAAMQ,gBACxBQ,SAAUA,KAEZD,GAAYH,EAASmD,eACnB5D,EAAC6D,OAAAA,CAAK3B,UAAU,oDAAoDzB,EAASmD,gBAlCrF5D,EAAC2C,EAAAA,KACIlC,EAASmC,MAAQ5C,EAAC6C,EAAAA,CAAIX,UAAU,yCAAyCY,IAAKrC,EAASmC,KAAMG,IAAKtC,EAASS,OAC5GlB,EAAC6D,OAAAA,CACG3B,UAAW4B,EAAW,yCAA0C,CAC5D,qDAAsDhD,KAGzDE,GAEJP,EAASmD,eAAiB5D,EAAC6D,OAAAA,CAAK3B,UAAU,oDAAoDzB,EAASmD,gBA+B5H"}
+{"version":3,"file":"SelectButton.js","sources":["../../../../../../../src/components/internal/FormFields/Select/components/SelectButton.tsx"],"sourcesContent":["import { h, Fragment } from 'preact';\nimport cx from 'classnames';\nimport { SelectButtonProps } from '../types';\nimport Img from '../../../Img';\nimport { useMemo } from 'preact/hooks';\nimport classnames from 'classnames';\n\nfunction SelectButtonElement({ filterable, toggleButtonRef, ...props }) {\n    if (filterable) {\n        // Even if passed, we can't add an id to this div since it is not allowed to associate a div with a label element\n        const { id, ...strippedProps } = props;\n        return <div {...strippedProps} ref={toggleButtonRef} />;\n    }\n\n    return <button id={props.id} aria-expanded={props.showList} aria-disabled={props.readonly} aria-describedby={props.ariaDescribedBy} type={'button'} {...props} ref={toggleButtonRef} />;\n}\n\nfunction SelectButton(props: Readonly<SelectButtonProps>) {\n    const { active, selected, inputText, readonly, showList, required } = props;\n\n    const isShowingPlaceholder = useMemo(() => {\n        const displayText = selected.selectedOptionName || selected.name;\n        const isValidValue = typeof displayText === 'string' && displayText.trim() !== '';\n        return isValidValue !== true;\n    }, [selected, props.placeholder]);\n\n    // display fallback order\n    const displayText = selected.selectedOptionName || selected.name || props.placeholder || '';\n    // displayInputText only used for the text input for the filter\n    // display the \"typed\" filter text when showing the dropdown,\n    // hide it and show the \"selected\" value when collapsed\n    const displayInputText = showList ? inputText : displayText;\n\n    const setFocus = (e: Event) => {\n        e.preventDefault();\n        if (document.activeElement === props.filterInputRef.current) {\n            if (!props.showList) {\n                props.toggleList(e);\n            }\n        } else if (props.filterInputRef.current) props.filterInputRef.current.focus();\n    };\n\n    // 1. If readonly we ignore the click action\n    // 2. If filterable we want to show the list and focus on the input\n    // 3. Otherwise we just toggle the list\n    const onClickHandler = readonly ? null : props.filterable ? setFocus : props.toggleList;\n\n\n    // check COWEB-1301 [Investigate] Drop-in Accessibility - ADA Compliance questions\n    const currentSelectedItemId = active.id ? `listItem-${active.id}` : '';\n\n    return (\n        <SelectButtonElement\n            className={cx({\n                'adyen-checkout__dropdown__button': true,\n                'adyen-checkout__dropdown__button--readonly': readonly,\n                'adyen-checkout__dropdown__button--active': showList,\n                'adyen-checkout__dropdown__button--invalid': props.isInvalid,\n                'adyen-checkout__dropdown__button--valid': props.isValid,\n                'adyen-checkout__dropdown__button--disabled': selected.disabled\n            })}\n            disabled={props.disabled}\n            filterable={props.filterable}\n            onClick={onClickHandler}\n            onKeyDown={!readonly ? props.onButtonKeyDown : null}\n            toggleButtonRef={props.toggleButtonRef}\n            id={props.id}\n        >\n            {!props.filterable ? (\n                <Fragment>\n                    {selected.icon && <Img className=\"adyen-checkout__dropdown__button__icon\" src={selected.icon} alt={selected.name} />}\n                    <span\n                        className={classnames('adyen-checkout__dropdown__button__text', {\n                            'adyen-checkout__dropdown__button__text-placeholder': isShowingPlaceholder\n                        })}\n                    >\n                        {displayText}\n                    </span>\n                    {selected.secondaryText && <span className=\"adyen-checkout__dropdown__button__secondary-text\">{selected.secondaryText}</span>}\n                </Fragment>\n            ) : (\n                <Fragment>\n                    {!showList && selected.icon && <Img className=\"adyen-checkout__dropdown__button__icon\" src={selected.icon} alt={selected.name} />}\n                    <input\n                        value={displayInputText}\n                        aria-autocomplete=\"list\"\n                        aria-controls={props.selectListId}\n                        aria-expanded={showList}\n                        aria-owns={props.selectListId}\n                        autoComplete=\"off\"\n                        className=\"adyen-checkout__filter-input\"\n                        onInput={props.onInput}\n                        ref={props.filterInputRef}\n                        role=\"combobox\"\n                        aria-activedescendant={currentSelectedItemId}\n                        type=\"text\"\n                        readOnly={props.readonly}\n                        aria-disabled={props.readonly}\n                        id={props.id}\n                        aria-describedby={props.ariaDescribedBy}\n                        required={required}\n                    />\n                    {!showList && selected.secondaryText && (\n                        <span className=\"adyen-checkout__dropdown__button__secondary-text\">{selected.secondaryText}</span>\n                    )}\n                </Fragment>\n            )}\n        </SelectButtonElement>\n    );\n}\n\nexport default SelectButton;\n"],"names":["SelectButtonElement","_param","filterable","toggleButtonRef","props","id","strippedProps","h","div","ref","button","aria-expanded","showList","aria-disabled","readonly","aria-describedby","ariaDescribedBy","type","SelectButton","active","selected","inputText","required","isShowingPlaceholder","useMemo","displayText","selectedOptionName","name","trim","placeholder","displayInputText","onClickHandler","e","preventDefault","document","activeElement","filterInputRef","current","toggleList","focus","currentSelectedItemId","className","cx","isInvalid","isValid","disabled","onClick","onKeyDown","onButtonKeyDown","Fragment","icon","Img","src","alt","input","value","aria-autocomplete","aria-controls","selectListId","aria-owns","autoComplete","onInput","role","aria-activedescendant","readOnly","secondaryText","span","classnames"],"mappings":"y5CAOA,SAASA,EAAoBC,GAAA,IAAAC,WAAEA,EAAUC,gBAAEA,GAAdF,EAAkCG,EAAAA,EAAlCH,EAAA,CAAEC,aAAYC,oBACvC,GAAID,EAAY,CAEZ,MAAMG,GAAEA,GAAyBD,EAAlBE,EAAAA,EAAkBF,EAAAA,CAAzBC,OACR,OAAOE,EAACC,MAAAA,EAAAA,EAAAA,CAAAA,EAAQF,GAAAA,CAAeG,IAAKN,IACxC,CAEA,OAAOI,EAACG,SAAAA,EAAAA,EAAAA,CAAOL,GAAID,EAAMC,GAAIM,gBAAeP,EAAMQ,SAAUC,gBAAeT,EAAMU,SAAUC,mBAAkBX,EAAMY,gBAAiBC,KAAM,UAAcb,GAAAA,CAAOK,IAAKN,IACxK,CAEA,SAASe,EAAad,GAClB,MAAMe,OAAEA,EAAMC,SAAEA,EAAQC,UAAEA,EAASP,SAAEA,EAAQF,SAAEA,EAAQU,SAAEA,GAAalB,EAEhEmB,EAAuBC,EAAQ,KACjC,MAAMC,EAAcL,EAASM,oBAAsBN,EAASO,KAE5D,OAAwB,KADoB,iBAAhBF,GAAmD,KAAvBA,EAAYG,SAErE,CAACR,EAAUhB,EAAMyB,cAGdJ,EAAcL,EAASM,oBAAsBN,EAASO,MAAQvB,EAAMyB,aAAe,GAInFC,EAAmBlB,EAAWS,EAAYI,EAc1CM,EAAiBjB,EAAW,KAAOV,EAAMF,WAZ7B8B,IACdA,EAAEC,iBACEC,SAASC,gBAAkB/B,EAAMgC,eAAeC,QAC3CjC,EAAMQ,UACPR,EAAMkC,WAAWN,GAEd5B,EAAMgC,eAAeC,SAASjC,EAAMgC,eAAeC,QAAQE,SAMHnC,EAAMkC,WAIvEE,EAAwBrB,EAAOd,GAAK,YAAYc,EAAOd,KAAO,GAEpE,OACIE,EAACP,EAAAA,CACGyC,UAAWC,EAAG,CACV,oCAAoC,EACpC,6CAA8C5B,EAC9C,2CAA4CF,EAC5C,4CAA6CR,EAAMuC,UACnD,0CAA2CvC,EAAMwC,QACjD,6CAA8CxB,EAASyB,WAE3DA,SAAUzC,EAAMyC,SAChB3C,WAAYE,EAAMF,WAClB4C,QAASf,EACTgB,UAAYjC,EAAmC,KAAxBV,EAAM4C,gBAC7B7C,gBAAiBC,EAAMD,gBACvBE,GAAID,EAAMC,IAERD,EAAMF,WAaJK,EAAC0C,EAAAA,MACKrC,GAAYQ,EAAS8B,MAAQ3C,EAAC4C,EAAAA,CAAIV,UAAU,yCAAyCW,IAAKhC,EAAS8B,KAAMG,IAAKjC,EAASO,OACzHpB,EAAC+C,QAAAA,CACGC,MAAOzB,EACP0B,oBAAkB,OAClBC,gBAAerD,EAAMsD,aACrB/C,gBAAeC,EACf+C,YAAWvD,EAAMsD,aACjBE,aAAa,MACbnB,UAAU,+BACVoB,QAASzD,EAAMyD,QACfpD,IAAKL,EAAMgC,eACX0B,KAAK,WACLC,wBAAuBvB,EACvBvB,KAAK,OACL+C,SAAU5D,EAAMU,SAChBD,gBAAeT,EAAMU,SACrBT,GAAID,EAAMC,GACVU,mBAAkBX,EAAMY,gBACxBM,SAAUA,KAEZV,GAAYQ,EAAS6C,eACnB1D,EAAC2D,OAAAA,CAAKzB,UAAU,oDAAoDrB,EAAS6C,gBAlCrF1D,EAAC0C,OACI7B,EAAS8B,MAAQ3C,EAAC4C,EAAAA,CAAIV,UAAU,yCAAyCW,IAAKhC,EAAS8B,KAAMG,IAAKjC,EAASO,OAC5GpB,EAAC2D,OAAAA,CACGzB,UAAW0B,EAAW,yCAA0C,CAC5D,qDAAsD5C,KAGzDE,GAEJL,EAAS6C,eAAiB1D,EAAC2D,OAAAA,CAAKzB,UAAU,oDAAoDrB,EAAS6C,gBA+B5H"}

package/dist/es-legacy/components/internal/SegmentedControl/SegmentedControl.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../external/preact/dist/preact.js";import t from"../../../_virtual/index.js";function n(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o({classNameModifiers:o=[],selectedValue:r,disabled:a=!1,options:c,onChange:l}){return c&&0!==c.length?e("div",{className:t("adyen-checkout__segmented-control",{"adyen-checkout__segmented-control--disabled":a},...o.map(e=>`adyen-checkout__segmented-control--${e}`)),role:"group"},c.map(({label:o,value:c,controls:s,htmlProps:u})=>e("button",function(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{},r=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(o).filter(function(e){return Object.getOwnPropertyDescriptor(o,e).enumerable}))),r.forEach(function(t){n(e,t,o[t])})}return e}({disabled:a,key:c,onClick:e=>l(c,e),className:t("adyen-checkout__segmented-control-segment",{"adyen-checkout__segmented-control-segment--selected":r===c}),"aria-controls":s,"aria-expanded":r===c,type:"button"},u),o))):null}export{o as default};
+import{createElement as e}from"../../../external/preact/dist/preact.js";import t from"../../../_virtual/index.js";import{stopPropagationForActionKeys as n}from"../Button/stopPropagationForActionKeys.js";function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r({classNameModifiers:r=[],selectedValue:a,disabled:c=!1,options:l,onChange:s}){return l&&0!==l.length?e("div",{className:t("adyen-checkout__segmented-control",{"adyen-checkout__segmented-control--disabled":c},...r.map(e=>`adyen-checkout__segmented-control--${e}`)),role:"group"},l.map(({label:r,value:l,controls:i,htmlProps:u})=>e("button",function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){o(e,t,n[t])})}return e}({disabled:c,key:l,onClick:e=>s(l,e),onKeyPress:n,onKeyDown:n,className:t("adyen-checkout__segmented-control-segment",{"adyen-checkout__segmented-control-segment--selected":a===l}),"aria-controls":i,"aria-expanded":a===l,type:"button"},u),r))):null}export{r as default};
 //# sourceMappingURL=SegmentedControl.js.map

package/dist/es-legacy/components/internal/SegmentedControl/SegmentedControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.js","sources":["../../../../../src/components/internal/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { h } from 'preact';\nimport cx from 'classnames';\nimport './SegmentedControl.scss';\n\nexport interface SegmentedControlOption<T> {\n    label: string;\n    value: T;\n    id: string;\n    controls: string;\n    htmlProps?: {};\n}\n\nexport type SegmentedControlOptions<T> = Array<SegmentedControlOption<T>>;\n\nexport interface SegmentedControlProps<T> {\n    classNameModifiers?: string[];\n    selectedValue: T;\n    disabled?: boolean;\n    options: SegmentedControlOptions<T>;\n    onChange(value: T, event: MouseEvent): void;\n}\n\n/**\n *\n * example:\n * <SegmentedControl\n *   onChange={(value) = setMode(value)}\n *   selectedValue={mode}\n *   disabled={status === 'loading'}\n *   classNameModifiers={['css-class']}\n *   options={segmentedControlOptions}\n * />\n *\n * @param classNameModifiers\n * @param selectedValue\n * @param disabled\n * @param options\n * @param onChange\n * @constructor\n */\nfunction SegmentedControl<T>({ classNameModifiers = [], selectedValue, disabled = false, options, onChange }: SegmentedControlProps<T>) {\n    if (!options || options.length === 0) {\n        return null;\n    }\n\n    return (\n        <div\n            className={cx(\n                'adyen-checkout__segmented-control',\n                { 'adyen-checkout__segmented-control--disabled': disabled },\n                ...classNameModifiers.map(modifier => `adyen-checkout__segmented-control--${modifier}`)\n            )}\n            role=\"group\"\n        >\n            {options.map(({ label, value, controls, htmlProps }: SegmentedControlOption<T>) => (\n                <button\n                    disabled={disabled}\n                    key={value}\n                    onClick={(event: MouseEvent) => onChange(value, event)}\n                    className={cx('adyen-checkout__segmented-control-segment', {\n                        'adyen-checkout__segmented-control-segment--selected': selectedValue === value\n                    })}\n                    aria-controls={controls}\n                    aria-expanded={selectedValue === value}\n                    type=\"button\"\n                    {...htmlProps}\n                >\n                    {label}\n                </button>\n            ))}\n        </div>\n    );\n}\n\nexport default SegmentedControl;\n"],"names":["SegmentedControl","classNameModifiers","selectedValue","disabled","options","onChange","length","h","div","className","cx","map","modifier","role","label","value","controls","htmlProps","button","key","onClick","event","aria-controls","aria-expanded","type"],"mappings":"0OAwCA,SAASA,GAAoBC,mBAAEA,EAAqB,GAAEC,cAAEA,EAAaC,SAAEA,GAAW,EAAKC,QAAEA,EAAOC,SAAEA,IAC9F,OAAKD,GAA8B,IAAnBA,EAAQE,OAKpBC,EAACC,MAAAA,CACGC,UAAWC,EACP,oCACA,CAAE,8CAA+CP,MAC9CF,EAAmBU,IAAIC,GAAY,sCAAsCA,MAEhFC,KAAK,SAEJT,EAAQO,IAAI,EAAGG,QAAOC,QAAOC,WAAUC,eACpCV,EAACW,2UAAAA,CAAAA,CACGf,SAAUA,EACVgB,IAAKJ,EACLK,QAAUC,GAAsBhB,EAASU,EAAOM,GAChDZ,UAAWC,EAAG,4CAA6C,CACvD,sDAAuDR,IAAkBa,IAE7EO,gBAAeN,EACfO,gBAAerB,IAAkBa,EACjCS,KAAK,UACDP,GAEHH,KAzBN,IA8Bf"}
+{"version":3,"file":"SegmentedControl.js","sources":["../../../../../src/components/internal/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { h } from 'preact';\nimport cx from 'classnames';\nimport './SegmentedControl.scss';\nimport { stopPropagationForActionKeys } from '../Button/stopPropagationForActionKeys';\n\nexport interface SegmentedControlOption<T> {\n    label: string;\n    value: T;\n    id: string;\n    controls: string;\n    htmlProps?: {};\n}\n\nexport type SegmentedControlOptions<T> = Array<SegmentedControlOption<T>>;\n\nexport interface SegmentedControlProps<T> {\n    classNameModifiers?: string[];\n    selectedValue: T;\n    disabled?: boolean;\n    options: SegmentedControlOptions<T>;\n    onChange(value: T, event: MouseEvent): void;\n}\n\n/**\n *\n * example:\n * <SegmentedControl\n *   onChange={(value) = setMode(value)}\n *   selectedValue={mode}\n *   disabled={status === 'loading'}\n *   classNameModifiers={['css-class']}\n *   options={segmentedControlOptions}\n * />\n *\n * @param classNameModifiers\n * @param selectedValue\n * @param disabled\n * @param options\n * @param onChange\n * @constructor\n */\nfunction SegmentedControl<T>({ classNameModifiers = [], selectedValue, disabled = false, options, onChange }: SegmentedControlProps<T>) {\n    if (!options || options.length === 0) {\n        return null;\n    }\n\n    return (\n        <div\n            className={cx(\n                'adyen-checkout__segmented-control',\n                { 'adyen-checkout__segmented-control--disabled': disabled },\n                ...classNameModifiers.map(modifier => `adyen-checkout__segmented-control--${modifier}`)\n            )}\n            role=\"group\"\n        >\n            {options.map(({ label, value, controls, htmlProps }: SegmentedControlOption<T>) => (\n                <button\n                    disabled={disabled}\n                    key={value}\n                    onClick={(event: MouseEvent) => onChange(value, event)}\n                    // Workaround: See ADR-0001-uielement-keyboard-event-propagation-workaround\n                    onKeyPress={stopPropagationForActionKeys}\n                    onKeyDown={stopPropagationForActionKeys}\n                    className={cx('adyen-checkout__segmented-control-segment', {\n                        'adyen-checkout__segmented-control-segment--selected': selectedValue === value\n                    })}\n                    aria-controls={controls}\n                    aria-expanded={selectedValue === value}\n                    type=\"button\"\n                    {...htmlProps}\n                >\n                    {label}\n                </button>\n            ))}\n        </div>\n    );\n}\n\nexport default SegmentedControl;\n"],"names":["SegmentedControl","classNameModifiers","selectedValue","disabled","options","onChange","length","h","div","className","cx","map","modifier","role","label","value","controls","htmlProps","button","key","onClick","event","onKeyPress","stopPropagationForActionKeys","onKeyDown","aria-controls","aria-expanded","type"],"mappings":"mUAyCA,SAASA,GAAoBC,mBAAEA,EAAqB,GAAEC,cAAEA,EAAaC,SAAEA,GAAW,EAAKC,QAAEA,EAAOC,SAAEA,IAC9F,OAAKD,GAA8B,IAAnBA,EAAQE,OAKpBC,EAACC,MAAAA,CACGC,UAAWC,EACP,oCACA,CAAE,8CAA+CP,MAC9CF,EAAmBU,IAAIC,GAAY,sCAAsCA,MAEhFC,KAAK,SAEJT,EAAQO,IAAI,EAAGG,QAAOC,QAAOC,WAAUC,eACpCV,EAACW,2UAAAA,CAAAA,CACGf,SAAUA,EACVgB,IAAKJ,EACLK,QAAUC,GAAsBhB,EAASU,EAAOM,GAEhDC,WAAYC,EACZC,UAAWD,EACXd,UAAWC,EAAG,4CAA6C,CACvD,sDAAuDR,IAAkBa,IAE7EU,gBAAeT,EACfU,gBAAexB,IAAkBa,EACjCY,KAAK,UACDV,GAEHH,KA5BN,IAiCf"}

package/dist/es-legacy/core/ProcessResponse/PaymentAction/actionTypes.js.map

@@ -1 +1 @@
-{"version":3,"file":"actionTypes.js","sources":["../../../../../src/core/ProcessResponse/PaymentAction/actionTypes.ts"],"sourcesContent":["import { get3DS2FlowProps } from '../../../components/ThreeDS2/components/utils';\nimport uuid from '../../../utils/uuid';\nimport UIElement from '../../../components/internal/UIElement';\nimport type { PaymentAction } from '../../../types/global-types';\nimport type { IRegistry } from '../../core.registry';\nimport type { ICore } from '../../types';\n\nconst createComponent = (core: ICore, registry: IRegistry, componentType, props): UIElement => {\n    const Element = registry.getComponent(componentType);\n\n    if (!Element) {\n        throw Error(`Action Element of type ${componentType} not found in the registry`);\n    }\n\n    const element = new Element(core, { ...props, id: `${componentType}-${uuid()}` });\n    return element;\n};\n\nconst getActionHandler = statusType => {\n    return (core: ICore, registry: IRegistry, action: PaymentAction, props) => {\n        const config = {\n            ...props,\n            ...action,\n            onError: props.onError,\n            statusType,\n            originalAction: action\n        };\n\n        return createComponent(core, registry, action.paymentMethodType, config);\n    };\n};\n\nconst actionTypes = {\n    redirect: (core: ICore, registry, action: PaymentAction, props) => {\n        const config = {\n            ...props,\n            ...action,\n            statusType: 'redirect',\n            originalAction: action\n        };\n\n        return createComponent(core, registry, 'redirect', config);\n    },\n\n    threeDS2: (core: ICore, registry, action: PaymentAction, props) => {\n        const componentType = action.subtype === 'fingerprint' ? 'threeDS2DeviceFingerprint' : 'threeDS2Challenge';\n\n        /**\n         * NOTE: the isMDFlow prop comes from the options object, added within the MDFlow when it calls createFromAction(action, options) to initiate a 3DS2 component\n         * It replaces the useOriginalFlow config prop that the MDFlow used to pass when directly initiating the threeDS2Fingerprint or threeDS2Challenge components\n         */\n        const paymentData = action.subtype === 'fingerprint' || props.isMDFlow ? action.paymentData : action.authorisationToken;\n\n        const config = {\n            // Props common to both flows\n            core: core,\n            token: action.token,\n            paymentData,\n            onActionHandled: props.onActionHandled,\n            onComplete: props.onComplete, // NOTE: We only ever expect props.onComplete to be defined for the MDFlow\n            onAdditionalDetails: props.onAdditionalDetails, // Needed to prevent regression in v6.24.0 re. supporting onAdditionalDetails being directly set on Card component (in v7 we will *not* allow this, & this line can be removed)\n            onError: props.onError,\n            isDropin: !!props.isDropin,\n            loadingContext: props.loadingContext,\n            clientKey: props.clientKey,\n            paymentMethodType: props.paymentMethodType,\n            challengeWindowSize: props.challengeWindowSize, // always pass challengeWindowSize in case it's been set directly in the handleAction config object\n            isMDFlow: props.isMDFlow,\n            modules: {\n                analytics: props.modules?.analytics,\n                resources: props.modules?.resources\n            },\n\n            // Props unique to a particular flow\n            ...get3DS2FlowProps(action.subtype, props)\n        };\n\n        return createComponent(core, registry, componentType, config);\n    },\n\n    voucher: getActionHandler('custom'),\n    qrCode: getActionHandler('custom'),\n    await: getActionHandler('custom'),\n    bankTransfer: getActionHandler('custom'),\n    sdk: getActionHandler('custom')\n} as const;\n\nexport default actionTypes;\n"],"names":["createComponent","core","registry","componentType","props","Element","getComponent","Error","_object_spread_props","_object_spread","id","uuid","getActionHandler","statusType","action","config","onError","originalAction","paymentMethodType","actionTypes","redirect","threeDS2","subtype","paymentData","isMDFlow","authorisationToken","token","onActionHandled","onComplete","onAdditionalDetails","isDropin","loadingContext","clientKey","challengeWindowSize","modules","analytics","resources","get3DS2FlowProps","voucher","qrCode","await","bankTransfer","sdk"],"mappings":"m6BAOA,MAAMA,EAAkB,CAACC,EAAaC,EAAqBC,EAAeC,KACtE,MAAMC,EAAUH,EAASI,aAAaH,GAEtC,IAAKE,EACD,MAAME,MAAM,0BAA0BJ,+BAI1C,OADgB,IAAIE,EAAQJ,EAAMO,EAAAC,EAAA,CAAA,EAAKL,GAAAA,CAAOM,GAAI,GAAGP,KAAiBQ,UAIpEC,EAAmBC,GACd,CAACZ,EAAaC,EAAqBY,EAAuBV,KAC7D,MAAMW,EAASP,OACRJ,EACAU,GAAAA,CACHE,QAASZ,EAAMY,QACfH,aACAI,eAAgBH,IAGpB,OAAOd,EAAgBC,EAAMC,EAAUY,EAAOI,kBAAmBH,IAInEI,EAAc,CAChBC,SAAU,CAACnB,EAAaC,EAAUY,EAAuBV,KACrD,MAAMW,EAASP,OACRJ,EACAU,GAAAA,CACHD,WAAY,WACZI,eAAgBH,IAGpB,OAAOd,EAAgBC,EAAMC,EAAU,WAAYa,IAGvDM,SAAU,CAACpB,EAAaC,EAAUY,EAAuBV,SAyBlCA,EACAA,EAzBnB,MAAMD,EAAmC,gBAAnBW,EAAOQ,QAA4B,4BAA8B,oBAMjFC,EAAiC,gBAAnBT,EAAOQ,SAA6BlB,EAAMoB,SAAWV,EAAOS,YAAcT,EAAOW,mBAE/FV,EAASN,EAAA,CAEXR,KAAMA,EACNyB,MAAOZ,EAAOY,MACdH,cACAI,gBAAiBvB,EAAMuB,gBACvBC,WAAYxB,EAAMwB,WAClBC,oBAAqBzB,EAAMyB,oBAC3Bb,QAASZ,EAAMY,QACfc,WAAY1B,EAAM0B,SAClBC,eAAgB3B,EAAM2B,eACtBC,UAAW5B,EAAM4B,UACjBd,kBAAmBd,EAAMc,kBACzBe,oBAAqB7B,EAAM6B,oBAC3BT,SAAUpB,EAAMoB,SAChBU,QAAS,CACLC,UAAwB,QAAb/B,EAAAA,EAAM8B,eAAN9B,IAAAA,OAAAA,EAAAA,EAAe+B,UAC1BC,UAAwB,QAAbhC,EAAAA,EAAM8B,eAAN9B,IAAAA,OAAAA,EAAAA,EAAegC,YAI3BC,EAAiBvB,EAAOQ,QAASlB,IAGxC,OAAOJ,EAAgBC,EAAMC,EAAUC,EAAeY,IAG1DuB,QAAS1B,EAAiB,UAC1B2B,OAAQ3B,EAAiB,UACzB4B,MAAO5B,EAAiB,UACxB6B,aAAc7B,EAAiB,UAC/B8B,IAAK9B,EAAiB"}
+{"version":3,"file":"actionTypes.js","sources":["../../../../../src/core/ProcessResponse/PaymentAction/actionTypes.ts"],"sourcesContent":["import { get3DS2FlowProps } from '../../../components/ThreeDS2/components/utils';\nimport uuid from '../../../utils/uuid';\nimport type { StatusFromAction, ThreeDS2ActionProps, UIElement, UIElementProps } from '../../../types';\nimport type { PaymentAction } from '../../../types/global-types';\nimport type { IRegistry } from '../../core.registry';\nimport type { ICore } from '../../types';\nimport type { ThreeDS2ConfigProps } from '../../../types';\nimport type { ActionHandlerConfig } from './types';\n\nconst createComponent = (core: ICore, registry: IRegistry, componentType: string, props: ActionHandlerConfig | ThreeDS2ConfigProps): UIElement => {\n    const Element = registry.getComponent(componentType);\n\n    if (!Element) {\n        throw Error(`Action Element of type ${componentType} not found in the registry`);\n    }\n\n    const element = new Element(core, { ...props, id: `${componentType}-${uuid()}` });\n    return element;\n};\n\nconst getActionHandler = (statusType: StatusFromAction) => {\n    return (core: ICore, registry: IRegistry, action: PaymentAction, props: UIElementProps): UIElement => {\n        const config: ActionHandlerConfig = {\n            ...props,\n            ...action,\n            onError: props.onError,\n            statusType,\n            originalAction: action\n        };\n\n        return createComponent(core, registry, action.paymentMethodType, config);\n    };\n};\n\nconst actionTypes = {\n    redirect: (core: ICore, registry, action: PaymentAction, props: UIElementProps): UIElement => {\n        const config: ActionHandlerConfig = {\n            ...props,\n            ...action,\n            statusType: 'redirect',\n            originalAction: action\n        };\n\n        return createComponent(core, registry, 'redirect', config);\n    },\n\n    threeDS2: (core: ICore, registry, action: PaymentAction, props: ThreeDS2ActionProps): UIElement => {\n        const componentType = action.subtype === 'fingerprint' ? 'threeDS2DeviceFingerprint' : 'threeDS2Challenge';\n\n        /**\n         * NOTE: the isMDFlow prop comes from the options object, added within the MDFlow when it calls createFromAction(action, options) to initiate a 3DS2 component\n         * It replaces the useOriginalFlow config prop that the MDFlow used to pass when directly initiating the threeDS2Fingerprint or threeDS2Challenge components\n         */\n        const paymentData = action.subtype === 'fingerprint' || props.isMDFlow ? action.paymentData : action.authorisationToken;\n\n        const config: ThreeDS2ConfigProps = {\n            // Props common to both flows\n            core,\n            token: action.token,\n            paymentData,\n            onActionHandled: props.onActionHandled,\n            onComplete: props.onComplete, // NOTE: We only ever expect props.onComplete to be defined for the MDFlow\n            onAdditionalDetails: props.onAdditionalDetails, // Needed to prevent regression in v6.24.0 re. supporting onAdditionalDetails being directly set on Card component (in v7 we will *not* allow this, & this line can be removed)\n            onError: props.onError,\n            isDropin: !!props.isDropin,\n            loadingContext: props.loadingContext,\n            clientKey: props.clientKey,\n            paymentMethodType: props.paymentMethodType,\n            challengeWindowSize: props.challengeWindowSize, // always pass challengeWindowSize in case it's been set directly in the handleAction config object\n            isMDFlow: props.isMDFlow,\n            modules: {\n                analytics: props.modules?.analytics,\n                resources: props.modules?.resources\n            },\n\n            // Props unique to a particular flow\n            ...get3DS2FlowProps(action.subtype, props)\n        };\n\n        return createComponent(core, registry, componentType, config);\n    },\n\n    voucher: getActionHandler('custom'),\n    qrCode: getActionHandler('custom'),\n    await: getActionHandler('custom'),\n    bankTransfer: getActionHandler('custom'),\n    sdk: getActionHandler('custom')\n} as const;\n\nexport default actionTypes;\n"],"names":["createComponent","core","registry","componentType","props","Element","getComponent","Error","_object_spread_props","_object_spread","id","uuid","getActionHandler","statusType","action","config","onError","originalAction","paymentMethodType","actionTypes","redirect","threeDS2","subtype","paymentData","isMDFlow","authorisationToken","token","onActionHandled","onComplete","onAdditionalDetails","isDropin","loadingContext","clientKey","challengeWindowSize","modules","analytics","resources","get3DS2FlowProps","voucher","qrCode","await","bankTransfer","sdk"],"mappings":"m6BASA,MAAMA,EAAkB,CAACC,EAAaC,EAAqBC,EAAuBC,KAC9E,MAAMC,EAAUH,EAASI,aAAaH,GAEtC,IAAKE,EACD,MAAME,MAAM,0BAA0BJ,+BAI1C,OADgB,IAAIE,EAAQJ,EAAMO,EAAAC,EAAA,CAAA,EAAKL,GAAAA,CAAOM,GAAI,GAAGP,KAAiBQ,UAIpEC,EAAoBC,GACf,CAACZ,EAAaC,EAAqBY,EAAuBV,KAC7D,MAAMW,EAA8BP,OAC7BJ,EACAU,GAAAA,CACHE,QAASZ,EAAMY,QACfH,aACAI,eAAgBH,IAGpB,OAAOd,EAAgBC,EAAMC,EAAUY,EAAOI,kBAAmBH,IAInEI,EAAc,CAChBC,SAAU,CAACnB,EAAaC,EAAUY,EAAuBV,KACrD,MAAMW,EAA8BP,OAC7BJ,EACAU,GAAAA,CACHD,WAAY,WACZI,eAAgBH,IAGpB,OAAOd,EAAgBC,EAAMC,EAAU,WAAYa,IAGvDM,SAAU,CAACpB,EAAaC,EAAUY,EAAuBV,SAyBlCA,EACAA,EAzBnB,MAAMD,EAAmC,gBAAnBW,EAAOQ,QAA4B,4BAA8B,oBAMjFC,EAAiC,gBAAnBT,EAAOQ,SAA6BlB,EAAMoB,SAAWV,EAAOS,YAAcT,EAAOW,mBAE/FV,EAA8BN,EAAA,CAEhCR,OACAyB,MAAOZ,EAAOY,MACdH,cACAI,gBAAiBvB,EAAMuB,gBACvBC,WAAYxB,EAAMwB,WAClBC,oBAAqBzB,EAAMyB,oBAC3Bb,QAASZ,EAAMY,QACfc,WAAY1B,EAAM0B,SAClBC,eAAgB3B,EAAM2B,eACtBC,UAAW5B,EAAM4B,UACjBd,kBAAmBd,EAAMc,kBACzBe,oBAAqB7B,EAAM6B,oBAC3BT,SAAUpB,EAAMoB,SAChBU,QAAS,CACLC,UAAwB,QAAb/B,EAAAA,EAAM8B,eAAN9B,IAAAA,OAAAA,EAAAA,EAAe+B,UAC1BC,UAAwB,QAAbhC,EAAAA,EAAM8B,eAAN9B,IAAAA,OAAAA,EAAAA,EAAegC,YAI3BC,EAAiBvB,EAAOQ,QAASlB,IAGxC,OAAOJ,EAAgBC,EAAMC,EAAUC,EAAeY,IAG1DuB,QAAS1B,EAAiB,UAC1B2B,OAAQ3B,EAAiB,UACzB4B,MAAO5B,EAAiB,UACxB6B,aAAc7B,EAAiB,UAC/B8B,IAAK9B,EAAiB"}

package/dist/es-legacy/core/config.js

@@ -1,2 +1,2 @@
-const e="https://checkoutshopper-live.adyen.com/checkoutshopper/",n="6.27.0",o="eslegacy",t=["amount","secondaryAmount","countryCode","environment","_environmentUrls","loadingContext","i18n","modules","order","session","clientKey","showPayButton","redirectFromTopWhenInIframe","onPaymentCompleted","onPaymentFailed","beforeRedirect","beforeSubmit","onSubmit","onActionHandled","onAdditionalDetails","onChange","onEnterKeyPressed","onError","onBalanceCheck","onOrderCancel","onOrderRequest","onOrderUpdated","onPaymentMethodsRequest"],r=6e4;export{r as DEFAULT_HTTP_TIMEOUT,e as FALLBACK_CONTEXT,t as GENERIC_OPTIONS,o as LIBRARY_BUNDLE_TYPE,n as LIBRARY_VERSION};
+const e="https://checkoutshopper-live.adyen.com/checkoutshopper/",n="6.28.0",o="eslegacy",t=["amount","secondaryAmount","countryCode","environment","_environmentUrls","loadingContext","i18n","modules","order","session","clientKey","showPayButton","redirectFromTopWhenInIframe","onPaymentCompleted","onPaymentFailed","beforeRedirect","beforeSubmit","onSubmit","onActionHandled","onAdditionalDetails","onChange","onEnterKeyPressed","onError","onBalanceCheck","onOrderCancel","onOrderRequest","onOrderUpdated","onPaymentMethodsRequest"],r=6e4;export{r as DEFAULT_HTTP_TIMEOUT,e as FALLBACK_CONTEXT,t as GENERIC_OPTIONS,o as LIBRARY_BUNDLE_TYPE,n as LIBRARY_VERSION};
 //# sourceMappingURL=config.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@adyen/adyen-web",
-    "version": "6.27.0",
+    "version": "6.28.0",
     "license": "MIT",
     "homepage": "https://docs.adyen.com/checkout",
     "type": "module",
@@ -82,7 +82,7 @@
     },
     "devDependencies": {
         "@adyen/bento-design-tokens": "1.10.0",
-        "@eslint/js": "9.39.0",
+        "@eslint/js": "9.39.2",
         "@preact/preset-vite": "2.10.2",
         "@rollup/plugin-commonjs": "29.0.0",
         "@rollup/plugin-eslint": "9.2.0",
@@ -91,45 +91,45 @@
         "@rollup/plugin-replace": "6.0.3",
         "@rollup/plugin-terser": "0.4.4",
         "@size-limit/preset-big-lib": "11.2.0",
-        "@storybook/addon-a11y": "10.0.7",
-        "@storybook/addon-docs": "10.0.7",
-        "@storybook/preact-vite": "10.0.7",
+        "@storybook/addon-a11y": "10.1.9",
+        "@storybook/addon-docs": "10.1.9",
+        "@storybook/preact-vite": "10.1.9",
         "@swc/core": "1.14.0",
         "@testing-library/jest-dom": "6.9.1",
         "@testing-library/preact": "3.2.4",
         "@testing-library/preact-hooks": "1.1.0",
         "@testing-library/user-event": "14.6.1",
         "@types/jest": "29.5.14",
-        "autoprefixer": "10.4.21",
+        "autoprefixer": "10.4.23",
         "cssnano": "7.1.2",
         "dotenv": "17.2.3",
         "enzyme": "3.11.0",
         "enzyme-adapter-preact-pure": "4.1.0",
-        "eslint": "9.39.0",
+        "eslint": "9.39.2",
         "eslint-plugin-import": "2.32.0",
         "eslint-plugin-jsx-a11y": "6.10.2",
         "eslint-plugin-react": "7.37.5",
-        "eslint-plugin-storybook": "10.0.7",
-        "eslint-plugin-testing-library": "7.13.3",
+        "eslint-plugin-storybook": "10.1.9",
+        "eslint-plugin-testing-library": "7.14.0",
         "globals": "16.5.0",
         "jest": "29.7.0",
         "jest-environment-jsdom": "29.7.0",
-        "jest-fixed-jsdom": "^0.0.10",
+        "jest-fixed-jsdom": "^0.0.11",
         "jest-mock-extended": "4.0.0",
-        "msw": "2.11.6",
+        "msw": "2.12.4",
         "msw-storybook-addon": "2.0.6",
         "postcss": "8.5.6",
-        "rollup": "4.52.5",
-        "rollup-plugin-dts": "6.2.3",
+        "rollup": "4.53.4",
+        "rollup-plugin-dts": "6.3.0",
         "rollup-plugin-postcss": "4.0.2",
         "rollup-plugin-stylelint": "1.0.0",
         "rollup-plugin-swc3": "0.12.1",
         "sass": "1.77.8",
         "size-limit": "11.2.0",
-        "storybook": "10.0.7",
-        "stylelint": "16.25.0",
-        "stylelint-config-standard-scss": "13.1.0",
-        "ts-jest": "29.4.5",
+        "storybook": "10.1.10",
+        "stylelint": "16.26.1",
+        "stylelint-config-standard-scss": "16.0.0",
+        "ts-jest": "29.4.6",
         "tslib": "2.8.1",
         "typescript": "5.9.3",
         "typescript-eslint": "7.18.0",

package/styles/adyen.css

@@ -27,7 +27,7 @@
 .adyen-checkout-form-instruction{color:var(--adyen-sdk-color-label-primary,#00112c);font-size:var(--adyen-sdk-text-caption-font-size,.75rem);font-weight:var(--adyen-sdk-text-body-font-weight,400);line-height:var(--adyen-sdk-text-caption-line-height,18px);margin-bottom:var(--adyen-sdk-spacer-070,16px);margin-top:0}[dir=rtl] .adyen-checkout-form-instruction{padding-right:0}
 .adyen-checkout-toggle{color:inherit;cursor:pointer;display:flex;width:auto}.adyen-checkout-toggle,.adyen-checkout-toggle *,.adyen-checkout-toggle :after,.adyen-checkout-toggle :before,.adyen-checkout-toggle:after,.adyen-checkout-toggle:before{box-sizing:border-box}.adyen-checkout-toggle--disabled{cursor:not-allowed;display:flex}.adyen-checkout-toggle--readonly{pointer-events:none}.adyen-checkout-toggle--label-first{align-items:flex-start;flex-direction:row-reverse;justify-content:flex-end}.adyen-checkout-toggle__input{cursor:inherit;opacity:0;position:absolute}.adyen-checkout-toggle__track{align-items:center;background-color:var(--adyen-sdk-toggle-track-background-color,#ffffff);border:var(--adyen-sdk-toggle-track-border,1px solid #8d95a3);border-radius:var(--adyen-sdk-toggle-track-border-radius,12px);display:flex;height:var(--adyen-sdk-toggle-track-height,20px);min-width:var(--adyen-sdk-toggle-track-width,36px);padding:var(--adyen-sdk-toggle-track-padding,2px 4px);position:relative}.adyen-checkout-toggle__input:focus-visible+.adyen-checkout-toggle__track{box-shadow:0 0 0 1px #fff,0 0 0 3px var(--adyen-sdk-focus-ring-color,rgba(0,112,245,.8));transition:.1s cubic-bezier(.785,.135,.15,.86)}.adyen-checkout-toggle__input:hover:enabled+.adyen-checkout-toggle__track{background-color:var(--adyen-sdk-toggle-track-hover-background-color,#f7f7f8);border-color:var(--adyen-sdk-toggle-track-hover-border-color,#6d7789)}.adyen-checkout-toggle__input:active:enabled+.adyen-checkout-toggle__track{background-color:var(--adyen-sdk-toggle-track-active-background-color,#eeeff1);border-color:var(--adyen-sdk-toggle-track-active-border-color,#00112c)}.adyen-checkout-toggle__input:disabled+.adyen-checkout-toggle__track{background-color:var(--adyen-sdk-toggle-track-disabled-background-color,#f7f7f8);border-color:var(--adyen-sdk-toggle-track-disabled-border-color,#dbdee2);cursor:not-allowed}.adyen-checkout-toggle__input:disabled+.adyen-checkout-toggle__track path{fill:#8d95a3}.adyen-checkout-toggle--readonly .adyen-checkout-toggle__input+.adyen-checkout-toggle__track{background-color:var(--adyen-sdk-toggle-track-readonly-background-color,#f7f7f8);border-color:var(--adyen-sdk-toggle-track-readonly-border-color,#dbdee2)}.adyen-checkout-toggle__input:checked+.adyen-checkout-toggle__track{background-color:var(--adyen-sdk-toggle-track-toggled-background-color,#00112c);border:var(--adyen-sdk-toggle-track-toggled-border,0);padding:var(--adyen-sdk-toggle-track-toggled-padding,2px)}.adyen-checkout-toggle__input:checked:hover:enabled+.adyen-checkout-toggle__track{background-color:var(--adyen-sdk-toggle-track-toggled-hover-background-color,#5c687c)}.adyen-checkout-toggle__input:checked:active:enabled+.adyen-checkout-toggle__track{background-color:var(--adyen-sdk-toggle-track-toggled-active-background-color,#8d95a3)}.adyen-checkout-toggle__input:checked:disabled+.adyen-checkout-toggle__track{background-color:var(--adyen-sdk-toggle-track-toggled-disabled-background-color,#c0c5cc)}.adyen-checkout-toggle--readonly .adyen-checkout-toggle__input:checked+.adyen-checkout-toggle__track{background-color:var(--adyen-sdk-toggle-track-toggled-readonly-background-color,#c0c5cc)}.adyen-checkout-toggle__handle{align-content:center;background-color:var(--adyen-sdk-toggle-handle-background-color,#00112c);border-radius:var(--adyen-sdk-toggle-handle-border-radius,12px);color:var(--adyen-sdk-toggle-handle-toggled-color,#00112c);display:inline-flex;height:var(--adyen-sdk-toggle-handle-height,12px);justify-content:center;transition:var(--adyen-sdk-toggle-handle-transition,transform .15s cubic-bezier(.2,0,.4,.9));width:var(--adyen-sdk-toggle-handle-width,12px)}.adyen-checkout-toggle__input:disabled+* .adyen-checkout-toggle__handle{background-color:var(--adyen-sdk-toggle-handle-disabled-background-color,#8d95a3);cursor:not-allowed}.adyen-checkout-toggle__input:checked+* .adyen-checkout-toggle__handle{background-color:var(--adyen-sdk-toggle-handle-toggled-background-color,#ffffff);height:var(--adyen-sdk-toggle-handle-toggled-height,16px);transform:translateX(100%);width:var(--adyen-sdk-toggle-handle-toggled-width,16px)}.adyen-checkout-toggle__input:checked:disabled+* .adyen-checkout-toggle__handle{background-color:var(--adyen-sdk-toggle-handle-toggled-disabled-background-color,#eeeff1);color:var(--adyen-sdk-toggle-handle-toggled-disabled-color,#8d95a3);cursor:not-allowed}.adyen-checkout-toggle--readonly .adyen-checkout-toggle__input:checked+* .adyen-checkout-toggle__handle{background-color:var(--adyen-sdk-toggle-handle-toggled-readonly-background-color,#eeeff1)}.adyen-checkout-toggle__label-container{display:flex;flex-direction:column;font-size:var(--adyen-sdk-text-body-font-size,.875rem);font-weight:var(--adyen-sdk-text-body-font-weight,400);line-height:var(--adyen-sdk-text-body-line-height,20px);padding-left:var(--adyen-sdk-toggle-label-padding,16px)}.adyen-checkout-toggle--label-first>.adyen-checkout-toggle__label-container{padding-left:0;padding-right:var(--adyen-sdk-toggle-label-padding,16px)}.adyen-checkout-toggle__label{vertical-align:baseline}.adyen-checkout-toggle__description,.adyen-checkout-toggle__label{font-size:var(--adyen-sdk-text-body-font-size,.875rem);font-weight:var(--adyen-sdk-text-body-font-weight,400);line-height:var(--adyen-sdk-text-body-line-height,20px)}.adyen-checkout-toggle__description{color:var(--adyen-sdk-toggle-description-color,#5c687c);padding-top:var(--adyen-sdk-toggle-description-padding,4px)}
 .adyen-checkout__modal-wrapper{align-items:center;display:flex;height:100%;left:0;overflow-y:auto;overscroll-behavior-y:contain;padding:var(--adyen-sdk-spacer-090,24px);position:fixed;top:0;visibility:hidden;width:100%;z-index:10}.adyen-checkout__modal-wrapper:before{background:rgba(0,17,44,.5);content:"";height:100%;left:0;opacity:0;position:fixed;top:0;transition:opacity .3s linear;width:100%;z-index:10}.adyen-checkout__modal-wrapper--open{visibility:visible}.adyen-checkout__modal-wrapper--open .adyen-checkout__modal,.adyen-checkout__modal-wrapper--open:before{opacity:1}.adyen-checkout__modal{background-color:var(--adyen-sdk-color-background-primary,#ffffff);border-radius:var(--adyen-sdk-border-radius-m,8px);box-shadow:0 var(--adyen-sdk-spacer-040,8px) var(--adyen-sdk-spacer-090,24px) rgba(0,17,44,.15);margin:auto;opacity:0;padding:var(--adyen-sdk-spacer-070,16px);position:relative;transition:opacity .2s ease,visibility .2s ease;z-index:11}
-.adyen-checkout__button{background:var(--adyen-sdk-color-background-always-dark,#00112c);border:0;border-radius:var(--adyen-sdk-border-radius-m,8px);color:var(--adyen-sdk-color-label-on-color,#ffffff);cursor:pointer;font-size:var(--adyen-sdk-text-title-font-size,1rem);font-weight:var(--adyen-sdk-text-body-stronger-font-weight,500);height:var(--adyen-sdk-spacer-120,48px);margin:0;padding:var(--adyen-sdk-spacer-060,12px) var(--adyen-sdk-spacer-000,0);text-decoration:none;transition:background .3s ease-out,box-shadow .3s ease-out;width:100%}.adyen-checkout__button:focus-visible{box-shadow:0 0 0 var(--adyen-sdk-focus-ring-spacer,1px) var(--adyen-sdk-color-background-primary,#ffffff),0 0 0 var(--adyen-sdk-focus-ring-outline,3px) var(--adyen-sdk-focus-ring-color,rgba(0,112,245,.8));outline:0}.adyen-checkout__button:hover{background:var(--adyen-sdk-color-background-inverse-primary-hover,#5c687c)}.adyen-checkout__button:active{background:var(--adyen-sdk-color-background-always-dark-active,#8d95a3)}.adyen-checkout__button:disabled,.adyen-checkout__button:disabled:hover{box-shadow:none;cursor:not-allowed;opacity:.4;-webkit-user-select:all;-moz-user-select:all;user-select:all}.adyen-checkout__button.adyen-checkout__button--loading{background:var(--adyen-sdk-color-label-disabled,#8d95a3);box-shadow:none;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.adyen-checkout__button.adyen-checkout__button--pay{align-items:center;display:flex;gap:var(--adyen-sdk-spacer-020,4px);justify-content:center;margin-top:var(--adyen-sdk-spacer-070,16px)}.adyen-checkout__button.adyen-checkout__button--pay:disabled{opacity:.4}.adyen-checkout__button.adyen-checkout__button--standalone{margin-top:0}.adyen-checkout__button.adyen-checkout__button--inline{display:block;font-size:.81em;height:auto;padding:var(--adyen-sdk-spacer-050,10px) var(--adyen-sdk-spacer-040,8px);width:auto}.adyen-checkout__button.adyen-checkout__button--ghost{background:none;border:0;color:var(--adyen-sdk-color-label-primary,#00112c)}.adyen-checkout__button.adyen-checkout__button--ghost .adyen-checkout__spinner:before{border-color:var(--adyen-sdk-color-background-inverse-primary,#00112c);border-top-color:transparent;opacity:.1}.adyen-checkout__button.adyen-checkout__button--ghost .adyen-checkout__spinner:after{border-color:transparent;border-top-color:var(--adyen-sdk-color-outline-primary-active,#00112c)}.adyen-checkout__button.adyen-checkout__button--ghost:hover{background:var(--adyen-sdk-color-background-secondary-hover,#eeeff1)}.adyen-checkout__button.adyen-checkout__button--ghost:active{background:var(--adyen-sdk-color-background-secondary-active,#e3e5e9);box-shadow:none}.adyen-checkout__button.adyen-checkout__button--secondary{background:var(--adyen-sdk-color-background-primary,#ffffff);border:var(--adyen-sdk-border-width-s,1px) solid var(--adyen-sdk-color-label-primary,#00112c);color:var(--adyen-sdk-color-label-primary,#00112c);padding:var(--adyen-sdk-spacer-050,10px) var(--adyen-sdk-spacer-060,12px)}.adyen-checkout__button.adyen-checkout__button--secondary .adyen-checkout__spinner:before{border-color:var(--adyen-sdk-color-background-inverse-primary,#00112c);border-top-color:transparent;opacity:.1}.adyen-checkout__button.adyen-checkout__button--secondary .adyen-checkout__spinner:after{border-color:transparent;border-top-color:var(--adyen-sdk-color-outline-primary-active,#00112c)}.adyen-checkout__button.adyen-checkout__button--secondary:hover{background:var(--adyen-sdk-color-background-secondary,#f7f7f8)}.adyen-checkout__button.adyen-checkout__button--secondary:hover:not(:focus-visible){box-shadow:0 var(--adyen-sdk-spacer-010,2px) var(--adyen-sdk-spacer-020,4px) rgba(27,42,60,.2),0 var(--adyen-sdk-spacer-020,4px) 5px rgba(27,42,60,.14)}.adyen-checkout__button.adyen-checkout__button--secondary:active,.adyen-checkout__button.adyen-checkout__button--secondary:active:hover{background:var(--adyen-sdk-color-background-secondary,#f7f7f8);box-shadow:none}.adyen-checkout__button.adyen-checkout__button--secondary:disabled,.adyen-checkout__button.adyen-checkout__button--secondary:disabled:hover{background-color:var(--adyen-sdk-color-background-secondary,#f7f7f8);border-color:var(--adyen-sdk-color-outline-disabled,#dbdee2);box-shadow:none;cursor:not-allowed;opacity:.5;-webkit-user-select:all;-moz-user-select:all;user-select:all}.adyen-checkout__button.adyen-checkout__button--action{background:var(--adyen-sdk-color-background-always-dark,#00112c);border:var(--adyen-sdk-border-width-s,1px) solid transparent;color:var(--adyen-sdk-color-label-on-color,#ffffff);padding:var(--adyen-sdk-spacer-050,10px) var(--adyen-sdk-spacer-060,12px)}.adyen-checkout__button.adyen-checkout__button--action:hover{background:var(--adyen-sdk-color-background-inverse-primary-hover,#5c687c)}.adyen-checkout__button.adyen-checkout__button--action:active,.adyen-checkout__button.adyen-checkout__button--action:active:hover{background:var(--adyen-sdk-color-background-always-dark-active,#8d95a3);box-shadow:none}.adyen-checkout__button.adyen-checkout__button--link{background:transparent;border:var(--adyen-sdk-border-width-s,1px) solid transparent;border-radius:var(--adyen-sdk-border-radius-s,4px);color:var(--adyen-sdk-color-label-highlight,#0070f5);font-weight:var(--adyen-sdk-text-body-font-weight,400);padding:var(--adyen-sdk-spacer-010,2px);text-decoration:none}.adyen-checkout__button.adyen-checkout__button--link:hover{background:transparent;text-decoration:underline}.adyen-checkout__button.adyen-checkout__button--completed,.adyen-checkout__button.adyen-checkout__button--completed:active,.adyen-checkout__button.adyen-checkout__button--completed:active:hover,.adyen-checkout__button.adyen-checkout__button--completed:hover{background:var(--adyen-sdk-color-label-success,#07893c);color:var(--adyen-sdk-color-label-on-color,#ffffff)}.adyen-checkout__button.adyen-checkout__button--completed .adyen-checkout__button__icon{filter:brightness(0) invert(1)}.adyen-checkout__button__content{align-items:center;display:flex;height:100%;justify-content:center}.adyen-checkout__button__icon{margin-right:var(--adyen-sdk-spacer-040,8px)}[dir=rtl] .adyen-checkout__button__icon{margin-left:var(--adyen-sdk-spacer-040,8px);margin-right:0}.adyen-checkout__button__text{display:block;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.adyen-checkout__button__text--sr-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.adyen-checkout__button .adyen-checkout__spinner:before{border-color:var(--adyen-sdk-color-label-on-color,#ffffff);border-top-color:transparent;opacity:.1}.adyen-checkout__button .adyen-checkout__spinner:after{border-color:transparent;border-top-color:var(--adyen-sdk-color-label-on-color,#ffffff)}.adyen-checkout__button.adyen-checkout__button--iconOnly{align-items:center;background:transparent;border-radius:var(--adyen-sdk-border-radius-m,8px);box-shadow:var(--adyen-sdk-button-tertiary-box-shadow,inset 0 0 0 1px rgba(0,0,0,0));color:var(--adyen-sdk-button-tertiary-color,#00112c);display:flex;height:auto;padding:var(--adyen-sdk-button-icon-only-padding,10px);width:auto}.adyen-checkout__button.adyen-checkout__button--iconOnly:hover{background-color:var(--adyen-sdk-color-background-secondary-hover,#eeeff1)}.adyen-checkout__button.adyen-checkout__button--iconOnly:active{background-color:var(--adyen-sdk-button-tertiary-active-background-color,rgba(0,0,0,0));color:var(--adyen-sdk-button-tertiary-active-color,#8d95a3)}.adyen-checkout__button.adyen-checkout__button--iconOnly:focus{box-shadow:none}.adyen-checkout__button.adyen-checkout__button--iconOnly:focus-visible{box-shadow:0 0 0 var(--adyen-sdk-focus-ring-spacer,1px) var(--adyen-sdk-color-background-primary,#ffffff),0 0 0 var(--adyen-sdk-focus-ring-outline,3px) var(--adyen-sdk-focus-ring-color,rgba(0,112,245,.8));outline:0}.adyen-checkout__button.adyen-checkout__button--iconOnly:disabled,.adyen-checkout__button.adyen-checkout__button--iconOnly:disabled:hover{box-shadow:none;cursor:not-allowed;opacity:.4;-webkit-user-select:all;-moz-user-select:all;user-select:all}.adyen-checkout__button.adyen-checkout__button--iconOnly .adyen-checkout__button__icon{margin:0}
+.adyen-checkout__button{background:var(--adyen-sdk-color-background-always-dark,#00112c);border:0;border-radius:var(--adyen-sdk-border-radius-m,8px);color:var(--adyen-sdk-color-label-on-color,#ffffff);cursor:pointer;font-size:var(--adyen-sdk-text-title-font-size,1rem);font-weight:var(--adyen-sdk-text-body-stronger-font-weight,500);height:var(--adyen-sdk-spacer-120,48px);margin:0;padding:var(--adyen-sdk-spacer-060,12px) var(--adyen-sdk-spacer-000,0);text-decoration:none;transition:background .3s ease-out,box-shadow .3s ease-out;width:100%}.adyen-checkout__button:focus-visible{box-shadow:0 0 0 var(--adyen-sdk-focus-ring-spacer,1px) var(--adyen-sdk-color-background-primary,#ffffff),0 0 0 var(--adyen-sdk-focus-ring-outline,3px) var(--adyen-sdk-focus-ring-color,rgba(0,112,245,.8));outline:0}.adyen-checkout__button:hover{background:var(--adyen-sdk-color-background-inverse-primary-hover,#5c687c)}.adyen-checkout__button:active{background:var(--adyen-sdk-color-background-always-dark-active,#8d95a3)}.adyen-checkout__button:disabled,.adyen-checkout__button:disabled:hover{box-shadow:none;cursor:not-allowed;opacity:.4;-webkit-user-select:all;-moz-user-select:all;user-select:all}.adyen-checkout__button.adyen-checkout__button--loading{background:var(--adyen-sdk-color-label-disabled,#8d95a3);box-shadow:none;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.adyen-checkout__button.adyen-checkout__button--pay{align-items:center;display:flex;gap:var(--adyen-sdk-spacer-020,4px);justify-content:center;margin-top:var(--adyen-sdk-spacer-070,16px)}.adyen-checkout__button.adyen-checkout__button--pay:disabled{opacity:.4}.adyen-checkout__button.adyen-checkout__button--standalone{margin-top:0}.adyen-checkout__button.adyen-checkout__button--inline{display:block;font-size:.81em;height:auto;padding:var(--adyen-sdk-spacer-050,10px) var(--adyen-sdk-spacer-040,8px);width:auto}.adyen-checkout__button.adyen-checkout__button--ghost{background:none;border:0;color:var(--adyen-sdk-color-label-primary,#00112c)}.adyen-checkout__button.adyen-checkout__button--ghost .adyen-checkout__spinner:before{border-color:var(--adyen-sdk-color-background-inverse-primary,#00112c);border-top-color:transparent;opacity:.1}.adyen-checkout__button.adyen-checkout__button--ghost .adyen-checkout__spinner:after{border-color:transparent;border-top-color:var(--adyen-sdk-color-outline-primary-active,#00112c)}.adyen-checkout__button.adyen-checkout__button--ghost:hover{background:var(--adyen-sdk-color-background-secondary-hover,#eeeff1)}.adyen-checkout__button.adyen-checkout__button--ghost:active{background:var(--adyen-sdk-color-background-secondary-active,#e3e5e9);box-shadow:none}.adyen-checkout__button.adyen-checkout__button--secondary{background:var(--adyen-sdk-color-background-primary,#ffffff);border:var(--adyen-sdk-border-width-s,1px) solid var(--adyen-sdk-color-label-primary,#00112c);color:var(--adyen-sdk-color-label-primary,#00112c);padding:var(--adyen-sdk-spacer-050,10px) var(--adyen-sdk-spacer-060,12px)}.adyen-checkout__button.adyen-checkout__button--secondary .adyen-checkout__spinner:before{border-color:var(--adyen-sdk-color-background-inverse-primary,#00112c);border-top-color:transparent;opacity:.1}.adyen-checkout__button.adyen-checkout__button--secondary .adyen-checkout__spinner:after{border-color:transparent;border-top-color:var(--adyen-sdk-color-outline-primary-active,#00112c)}.adyen-checkout__button.adyen-checkout__button--secondary:hover{background:var(--adyen-sdk-color-background-secondary,#f7f7f8)}.adyen-checkout__button.adyen-checkout__button--secondary:hover:not(:focus-visible){box-shadow:0 var(--adyen-sdk-spacer-010,2px) var(--adyen-sdk-spacer-020,4px) rgba(27,42,60,.2),0 var(--adyen-sdk-spacer-020,4px) 5px rgba(27,42,60,.14)}.adyen-checkout__button.adyen-checkout__button--secondary:active,.adyen-checkout__button.adyen-checkout__button--secondary:active:hover{background:var(--adyen-sdk-color-background-secondary,#f7f7f8);box-shadow:none}.adyen-checkout__button.adyen-checkout__button--secondary:disabled,.adyen-checkout__button.adyen-checkout__button--secondary:disabled:hover{background-color:var(--adyen-sdk-color-background-secondary,#f7f7f8);border-color:var(--adyen-sdk-color-outline-disabled,#dbdee2);box-shadow:none;cursor:not-allowed;opacity:.5;-webkit-user-select:all;-moz-user-select:all;user-select:all}.adyen-checkout__button.adyen-checkout__button--action{background:var(--adyen-sdk-color-background-always-dark,#00112c);border:var(--adyen-sdk-border-width-s,1px) solid transparent;color:var(--adyen-sdk-color-label-on-color,#ffffff);padding:var(--adyen-sdk-spacer-050,10px) var(--adyen-sdk-spacer-060,12px)}.adyen-checkout__button.adyen-checkout__button--action:hover{background:var(--adyen-sdk-color-background-inverse-primary-hover,#5c687c)}.adyen-checkout__button.adyen-checkout__button--action:active,.adyen-checkout__button.adyen-checkout__button--action:active:hover{background:var(--adyen-sdk-color-background-always-dark-active,#8d95a3);box-shadow:none}.adyen-checkout__button.adyen-checkout__button--link{background:transparent;border:var(--adyen-sdk-border-width-s,1px) solid transparent;border-radius:var(--adyen-sdk-border-radius-s,4px);color:var(--adyen-sdk-color-label-highlight,#0070f5);font-weight:var(--adyen-sdk-text-body-font-weight,400);padding:var(--adyen-sdk-spacer-010,2px);text-decoration:none}.adyen-checkout__button.adyen-checkout__button--link:hover{background:transparent;text-decoration:underline}.adyen-checkout__button.adyen-checkout__button--completed,.adyen-checkout__button.adyen-checkout__button--completed:active,.adyen-checkout__button.adyen-checkout__button--completed:active:hover,.adyen-checkout__button.adyen-checkout__button--completed:hover{background:var(--adyen-sdk-color-label-success,#07893c);color:var(--adyen-sdk-color-label-on-color,#ffffff)}.adyen-checkout__button.adyen-checkout__button--completed .adyen-checkout__button__icon{filter:brightness(0) invert(1)}.adyen-checkout__button__content{align-items:center;display:flex;height:100%;justify-content:center}.adyen-checkout__button__icon{margin-right:var(--adyen-sdk-spacer-040,8px)}[dir=rtl] .adyen-checkout__button__icon{margin-left:var(--adyen-sdk-spacer-040,8px);margin-right:0}.adyen-checkout__button__text{display:block;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.adyen-checkout__button__text--sr-only{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.adyen-checkout__button .adyen-checkout__spinner:before{border-color:var(--adyen-sdk-color-label-on-color,#ffffff);border-top-color:transparent;opacity:.1}.adyen-checkout__button .adyen-checkout__spinner:after{border-color:transparent;border-top-color:var(--adyen-sdk-color-label-on-color,#ffffff)}.adyen-checkout__button.adyen-checkout__button--iconOnly{align-items:center;background:transparent;border-radius:var(--adyen-sdk-border-radius-m,8px);box-shadow:var(--adyen-sdk-button-tertiary-box-shadow,inset 0 0 0 1px rgba(0,0,0,0));color:var(--adyen-sdk-button-tertiary-color,#00112c);display:flex;height:auto;padding:var(--adyen-sdk-button-icon-only-padding,10px);width:auto}.adyen-checkout__button.adyen-checkout__button--iconOnly:hover{background-color:var(--adyen-sdk-color-background-secondary-hover,#eeeff1)}.adyen-checkout__button.adyen-checkout__button--iconOnly:active{background-color:var(--adyen-sdk-button-tertiary-active-background-color,rgba(0,0,0,0));color:var(--adyen-sdk-button-tertiary-active-color,#8d95a3)}.adyen-checkout__button.adyen-checkout__button--iconOnly:focus{box-shadow:none}.adyen-checkout__button.adyen-checkout__button--iconOnly:focus-visible{box-shadow:0 0 0 var(--adyen-sdk-focus-ring-spacer,1px) var(--adyen-sdk-color-background-primary,#ffffff),0 0 0 var(--adyen-sdk-focus-ring-outline,3px) var(--adyen-sdk-focus-ring-color,rgba(0,112,245,.8));outline:0}.adyen-checkout__button.adyen-checkout__button--iconOnly:disabled,.adyen-checkout__button.adyen-checkout__button--iconOnly:disabled:hover{box-shadow:none;cursor:not-allowed;opacity:.4;-webkit-user-select:all;-moz-user-select:all;user-select:all}.adyen-checkout__button.adyen-checkout__button--iconOnly .adyen-checkout__button__icon{margin:0}
 .adyen-checkout-card-fastlane__modal{margin-bottom:var(--adyen-sdk-spacer-070,16px);max-width:372px}.adyen-checkout-card-fastlane__modal-section{-moz-column-gap:var(--adyen-sdk-spacer-070,16px);column-gap:var(--adyen-sdk-spacer-070,16px);display:grid;grid-template-areas:"image header" ". text";grid-template-columns:auto 1fr;grid-template-rows:auto;margin-bottom:var(--adyen-sdk-spacer-060,12px);place-items:start}.adyen-checkout-card-fastlane__modal-section-image{grid-area:image;place-self:center}.adyen-checkout-card-fastlane__modal-section-header{color:var(--adyen-sdk-color-background-inverse-primary,#00112c);font-size:var(--adyen-sdk-text-title-m-font-size,1.25rem);font-weight:var(--adyen-sdk-text-title-m-font-weight,600);grid-area:header;line-height:var(--adyen-sdk-text-title-m-line-height,30px);margin:0}.adyen-checkout-card-fastlane__modal-section-text{color:var(--adyen-sdk-color-background-inverse-primary,#00112c);font-size:var(--adyen-sdk-text-body-font-size,.875rem);font-weight:var(--adyen-sdk-text-body-font-weight,400);grid-area:text;line-height:var(--adyen-sdk-text-body-line-height,20px)}.adyen-checkout-card-fastlane__modal-brand{height:23px;margin-top:var(--adyen-sdk-spacer-040,8px);width:168px}.adyen-checkout-card-fastlane__modal-button-container{display:flex;flex-direction:row-reverse;margin-bottom:var(--adyen-sdk-spacer-060,12px)}.adyen-checkout-card-fastlane__modal-button-container>button{line-height:0}
 .adyen-checkout-card__fastlane{align-items:center;background:var(--adyen-sdk-color-background-primary,#ffffff);border:var(--adyen-sdk-border-width-s,1px) solid var(--adyen-sdk-color-outline-primary,#dbdee2);border-radius:var(--adyen-sdk-border-radius-m,8px);margin-top:var(--adyen-sdk-spacer-070,16px)}.adyen-checkout-card__fastlane,[dir=rtl] .adyen-checkout-card__fastlane{padding:var(--adyen-sdk-spacer-060,12px) var(--adyen-sdk-spacer-070,16px)}.adyen-checkout-card__fastlane-consent-toggle{display:flex}.adyen-checkout-card__fastlane-consent-text,.adyen-checkout-card__fastlane-consent-toggle--active{margin-bottom:var(--adyen-sdk-spacer-070,16px)}.adyen-checkout-card__fastlane-consent-text{font-size:var(--adyen-sdk-text-caption-font-size,.75rem);font-weight:var(--adyen-sdk-text-caption-font-weight,400);line-height:var(--adyen-sdk-text-caption-line-height,18px)}.adyen-checkout-card__fastlane-brand{height:23px;width:168px}.adyen-checkout__button.adyen-checkout__button--fastlane-info-modal{height:20px;line-height:0;margin-left:var(--adyen-sdk-spacer-020,4px);padding:0;vertical-align:bottom;width:20px}
 .adyen-checkout-ctp__otp-resend-code-wrapper{line-height:var(--adyen-sdk-text-body-line-height,20px);margin-left:auto;position:absolute;right:0;top:0}.adyen-checkout-ctp__otp-resend-code--confirmation,.adyen-checkout-ctp__otp-resend-code--disabled{color:var(--adyen-sdk-color-label-tertiary,#5c687c);cursor:default;font-size:var(--adyen-sdk-text-body-font-size,.875rem);font-weight:var(--adyen-sdk-text-body-font-weight,400);margin-left:auto;pointer-events:none}.adyen-checkout-ctp__otp-resend-code--confirmation{align-items:center;display:flex}.adyen-checkout-ctp__otp-resend-code--confirmation>img{margin-left:var(--adyen-sdk-spacer-020,4px)}.adyen-checkout-ctp__otp-resend-code-counter{color:var(--adyen-sdk-color-label-primary,#00112c);cursor:default;display:inline-block;font-size:var(--adyen-sdk-text-body-font-size,.875rem);font-weight:var(--adyen-sdk-text-body-font-weight,400);margin-left:auto;text-align:right}.adyen-checkout-ctp__section>.adyen-checkout__field.adyen-checkout__field--otp{margin-bottom:var(--adyen-sdk-spacer-060,12px)}.adyen-checkout-ctp__otp-field-wrapper{position:relative}
@@ -111,5 +111,5 @@ apple-pay-button{--apple-pay-button-width:100%;--apple-pay-button-height:48px;--
 .adyen-checkout__payment-method__name{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.adyen-checkout__payment-method__additional-info{color:var(--adyen-sdk-color-label-secondary,#5c687c);font-size:var(--adyen-sdk-text-caption-font-size,.75rem);font-weight:var(--adyen-sdk-text-body-font-weight,400)}.adyen-checkout__payment-method__name_wrapper{align-items:flex-start;display:flex;flex-direction:column;gap:var(--adyen-sdk-spacer-020,4px);min-width:var(--adyen-sdk-spacer-120,48px);text-align:start}
 .adyen-checkout__status{align-items:center;background-color:var(--adyen-sdk-color-background-primary,#ffffff);border:var(--adyen-sdk-border-width-s,1px) solid var(--adyen-sdk-color-outline-secondary,#c9cdd3);border-radius:var(--adyen-sdk-border-radius-m,8px);color:var(--adyen-sdk-color-label-primary,#00112c);display:flex;flex-direction:column;font-size:var(--adyen-sdk-text-title-font-size,1rem);height:350px;justify-content:center;margin:0;padding:var(--adyen-sdk-spacer-100,32px);text-align:center}.adyen-checkout__status__icon{margin-bottom:var(--adyen-sdk-spacer-090,24px)}.adyen-checkout__status .adyen-checkout__spinner__wrapper{max-height:88px}
 .adyen-checkout__dropin{display:flex;flex-direction:column;gap:var(--adyen-sdk-spacer-070,16px)}.adyen-checkout__button--dropin-show-paymentmethods{align-self:start}.adyen-checkout-payment-methods-container{display:flex;flex-direction:column;gap:var(--adyen-sdk-spacer-070,16px)}.adyen-checkout-payment-methods-list-label{color:var(--adyen-sdk-color-label-primary,#00112c);font-size:var(--adyen-sdk-text-subtitle-font-size,1rem);font-weight:var(--adyen-sdk-text-subtitle-stronger-font-weight,600);line-height:var(--adyen-sdk-text-subtitle-line-height,26px)}.adyen-checkout__payment-methods-list{display:flex;flex-direction:column;gap:var(--adyen-sdk-spacer-070,16px);list-style:none;margin:0;padding:0}.adyen-checkout__payment-methods-list--loading{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.adyen-checkout__instant-payment-methods-list{display:flex;flex-wrap:wrap;gap:var(--adyen-sdk-spacer-070,16px);list-style:none;margin:0;padding:0}.adyen-checkout__instant-payment-methods-list li{flex:1 0 calc(50% - var(--adyen-sdk-spacer-070, 16px)/2)}.adyen-checkout__payment-method{display:block}.adyen-checkout__payment-method__details{overflow:hidden}.adyen-checkout__payment-method__image{height:26px;width:var(--adyen-sdk-spacer-110,40px)}[dir=rtl] .adyen-checkout__payment-method__image__wrapper{margin-left:var(--adyen-sdk-spacer-040,8px);margin-right:0}.adyen-checkout-pm-details-wrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease;visibility:hidden}.adyen-checkout-pm-details-wrapper[aria-hidden=false]{grid-template-rows:1fr;visibility:visible}.adyen-checkout-pm-details-wrapper[aria-hidden=false] .adyen-checkout__payment-method__details{overflow:visible}
-.adyen-checkout-sr-panel{font-size:.75em;margin-bottom:var(--adyen-sdk-spacer-080,20px)}.adyen-checkout-sr-panel--sr-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}
+.adyen-checkout-sr-panel{font-size:.75em;margin-bottom:var(--adyen-sdk-spacer-080,20px)}.adyen-checkout-sr-panel--sr-only{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}
 /*# sourceMappingURL=adyen.css.map */