@adyen/adyen-web 6.8.0 → 6.10.0

package/dist/es/components/internal/ClickToPay/components/CtPSection/CtPLogoutLink.js

@@ -1,2 +1,2 @@
-import{createElement as t}from"../../../../../external/preact/dist/preact.js";import o from"../../context/useClickToPayContext.js";import{CtpState as e}from"../../services/ClickToPayService.js";import r from"../../../../../external/classnames/index.js";import{useMemo as n}from"../../../../../external/preact/hooks/dist/hooks.js";import{useCoreContext as s}from"../../../../../core/Context/CoreProvider.js";import a from"../../../Button/Button.js";const i=()=>{const{ctpState:i,logoutShopper:l,status:c,cards:u}=o(),{i18n:d}=s();if(!1===[e.Ready,e.OneTimePassword].includes(i))return null;const m=n((()=>i===e.Ready&&u.length>1?d.get("ctp.logout.notYourCards"):i===e.Ready&&1===u.length?d.get("ctp.logout.notYourCard"):i===e.Ready&&0===u.length?d.get("ctp.logout.notYourProfile"):d.get("ctp.logout.notYou")),[d,i]);return t(a,{classNameModifiers:[r("section-logout-button",{"section-logout-button--disabled":"loading"===c})],disabled:"loading"===c,onClick:l,variant:"link",inline:!0},m)};export{i as default};
+import{createElement as t}from"../../../../../external/preact/dist/preact.js";import o from"../../context/useClickToPayContext.js";import{CtpState as e}from"../../services/ClickToPayService.js";import r from"../../../../../_virtual/index.js";import{useMemo as n}from"../../../../../external/preact/hooks/dist/hooks.js";import{useCoreContext as s}from"../../../../../core/Context/CoreProvider.js";import i from"../../../Button/Button.js";const a=()=>{const{ctpState:a,logoutShopper:l,status:c,cards:u}=o(),{i18n:d}=s();if(!1===[e.Ready,e.OneTimePassword].includes(a))return null;const m=n((()=>a===e.Ready&&u.length>1?d.get("ctp.logout.notYourCards"):a===e.Ready&&1===u.length?d.get("ctp.logout.notYourCard"):a===e.Ready&&0===u.length?d.get("ctp.logout.notYourProfile"):d.get("ctp.logout.notYou")),[d,a]);return t(i,{classNameModifiers:[r("section-logout-button",{"section-logout-button--disabled":"loading"===c})],disabled:"loading"===c,onClick:l,variant:"link",inline:!0},m)};export{a as default};
 //# sourceMappingURL=CtPLogoutLink.js.map

package/dist/es/components/internal/ClickToPay/components/CtPSection/CtPLogoutLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"CtPLogoutLink.js","sources":["../../../../../../../src/components/internal/ClickToPay/components/CtPSection/CtPLogoutLink.tsx"],"sourcesContent":["import { h } from 'preact';\nimport useClickToPayContext from '../../context/useClickToPayContext';\nimport { CtpState } from '../../services/ClickToPayService';\nimport classnames from 'classnames';\nimport { useMemo } from 'preact/hooks';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport './CtPLogoutLink.scss';\nimport Button from '../../../Button';\n\nconst CtPLogoutLink = () => {\n    const { ctpState, logoutShopper, status, cards } = useClickToPayContext();\n    const { i18n } = useCoreContext();\n\n    if ([CtpState.Ready, CtpState.OneTimePassword].includes(ctpState) === false) {\n        return null;\n    }\n\n    const label = useMemo(() => {\n        if (ctpState === CtpState.Ready && cards.length > 1) return i18n.get('ctp.logout.notYourCards');\n        if (ctpState === CtpState.Ready && cards.length === 1) return i18n.get('ctp.logout.notYourCard');\n        if (ctpState === CtpState.Ready && cards.length === 0) return i18n.get('ctp.logout.notYourProfile');\n        return i18n.get('ctp.logout.notYou');\n    }, [i18n, ctpState]);\n\n    return (\n        <Button\n            classNameModifiers={[\n                classnames('section-logout-button', {\n                    'section-logout-button--disabled': status === 'loading'\n                })\n            ]}\n            disabled={status === 'loading'}\n            onClick={logoutShopper}\n            variant=\"link\"\n            inline={true}\n        >\n            {label}\n        </Button>\n    );\n};\n\nexport default CtPLogoutLink;\n"],"names":["CtPLogoutLink","ctpState","logoutShopper","status","cards","useClickToPayContext","i18n","useCoreContext","CtpState","Ready","OneTimePassword","includes","label","useMemo","length","get","h","Button","classNameModifiers","classnames","disabled","onClick","variant","inline"],"mappings":"gcASA,MAAMA,EAAgB,KAClB,MAAMC,SAAEA,EAAQC,cAAEA,EAAaC,OAAEA,EAAMC,MAAEA,GAAUC,KAC7CC,KAAEA,GAASC,IAEjB,IAAsE,IAAlE,CAACC,EAASC,MAAOD,EAASE,iBAAiBC,SAASV,GACpD,OAAO,KAGX,MAAMW,EAAQC,GAAQ,IACdZ,IAAaO,EAASC,OAASL,EAAMU,OAAS,EAAUR,EAAKS,IAAI,2BACjEd,IAAaO,EAASC,OAA0B,IAAjBL,EAAMU,OAAqBR,EAAKS,IAAI,0BACnEd,IAAaO,EAASC,OAA0B,IAAjBL,EAAMU,OAAqBR,EAAKS,IAAI,6BAChET,EAAKS,IAAI,sBACjB,CAACT,EAAML,IAEV,OACIe,EAACC,EAAAA,CACGC,mBAAoB,CAChBC,EAAW,wBAAyB,CAChC,kCAA8C,YAAXhB,KAG3CiB,SAAqB,YAAXjB,EACVkB,QAASnB,EACToB,QAAQ,OACRC,QAAQ,GAEPX,EAAAA"}
+{"version":3,"file":"CtPLogoutLink.js","sources":["../../../../../../../src/components/internal/ClickToPay/components/CtPSection/CtPLogoutLink.tsx"],"sourcesContent":["import { h } from 'preact';\nimport useClickToPayContext from '../../context/useClickToPayContext';\nimport { CtpState } from '../../services/ClickToPayService';\nimport classnames from 'classnames';\nimport { useMemo } from 'preact/hooks';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport './CtPLogoutLink.scss';\nimport Button from '../../../Button';\n\nconst CtPLogoutLink = () => {\n    const { ctpState, logoutShopper, status, cards } = useClickToPayContext();\n    const { i18n } = useCoreContext();\n\n    if ([CtpState.Ready, CtpState.OneTimePassword].includes(ctpState) === false) {\n        return null;\n    }\n\n    const label = useMemo(() => {\n        if (ctpState === CtpState.Ready && cards.length > 1) return i18n.get('ctp.logout.notYourCards');\n        if (ctpState === CtpState.Ready && cards.length === 1) return i18n.get('ctp.logout.notYourCard');\n        if (ctpState === CtpState.Ready && cards.length === 0) return i18n.get('ctp.logout.notYourProfile');\n        return i18n.get('ctp.logout.notYou');\n    }, [i18n, ctpState]);\n\n    return (\n        <Button\n            classNameModifiers={[\n                classnames('section-logout-button', {\n                    'section-logout-button--disabled': status === 'loading'\n                })\n            ]}\n            disabled={status === 'loading'}\n            onClick={logoutShopper}\n            variant=\"link\"\n            inline={true}\n        >\n            {label}\n        </Button>\n    );\n};\n\nexport default CtPLogoutLink;\n"],"names":["CtPLogoutLink","ctpState","logoutShopper","status","cards","useClickToPayContext","i18n","useCoreContext","CtpState","Ready","OneTimePassword","includes","label","useMemo","length","get","h","Button","classNameModifiers","classnames","disabled","onClick","variant","inline"],"mappings":"qbASA,MAAMA,EAAgB,KAClB,MAAMC,SAAEA,EAAQC,cAAEA,EAAaC,OAAEA,EAAMC,MAAEA,GAAUC,KAC7CC,KAAEA,GAASC,IAEjB,IAAsE,IAAlE,CAACC,EAASC,MAAOD,EAASE,iBAAiBC,SAASV,GACpD,OAAO,KAGX,MAAMW,EAAQC,GAAQ,IACdZ,IAAaO,EAASC,OAASL,EAAMU,OAAS,EAAUR,EAAKS,IAAI,2BACjEd,IAAaO,EAASC,OAA0B,IAAjBL,EAAMU,OAAqBR,EAAKS,IAAI,0BACnEd,IAAaO,EAASC,OAA0B,IAAjBL,EAAMU,OAAqBR,EAAKS,IAAI,6BAChET,EAAKS,IAAI,sBACjB,CAACT,EAAML,IAEV,OACIe,EAACC,EAAAA,CACGC,mBAAoB,CAChBC,EAAW,wBAAyB,CAChC,kCAA8C,YAAXhB,KAG3CiB,SAAqB,YAAXjB,EACVkB,QAASnB,EACToB,QAAQ,OACRC,QAAQ,GAEPX,EAAAA"}

package/dist/es/components/internal/ClickToPay/components/CtPSection/CtPSection.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../../external/preact/dist/preact.js";import t from"../../../../../external/classnames/index.js";import n from"./CtPLogoutLink.js";import{CtPBrand as c}from"../CtPBrand/CtPBrand.js";import a from"../../context/useClickToPayContext.js";const o=({children:o,onEnterKeyPress:s})=>{const{isStandaloneComponent:r}=a();return e("div",{className:t("adyen-checkout-ctp__section",{"adyen-checkout-ctp__section--standalone":r}),onKeyPress:s},e("div",{className:"adyen-checkout-ctp__section-brand"},e(c,null),e(n,null)),o)};o.Title=({endAdornment:t,children:n})=>e("div",{className:"adyen-checkout-ctp__section-header"},e("h1",{className:"adyen-checkout-ctp__section-header-title"},n),t&&e("span",{className:"adyen-checkout-ctp__section-header-adornment"},t)),o.Text=({children:t})=>e("p",{className:"adyen-checkout-ctp__section-text"},t);export{o as default};
+import{createElement as e}from"../../../../../external/preact/dist/preact.js";import t from"../../../../../_virtual/index.js";import n from"./CtPLogoutLink.js";import{CtPBrand as c}from"../CtPBrand/CtPBrand.js";import a from"../../context/useClickToPayContext.js";const o=({children:o,onEnterKeyPress:s})=>{const{isStandaloneComponent:r}=a();return e("div",{className:t("adyen-checkout-ctp__section",{"adyen-checkout-ctp__section--standalone":r}),onKeyPress:s},e("div",{className:"adyen-checkout-ctp__section-brand"},e(c,null),e(n,null)),o)};o.Title=({endAdornment:t,children:n})=>e("div",{className:"adyen-checkout-ctp__section-header"},e("h1",{className:"adyen-checkout-ctp__section-header-title"},n),t&&e("span",{className:"adyen-checkout-ctp__section-header-adornment"},t)),o.Text=({children:t})=>e("p",{className:"adyen-checkout-ctp__section-text"},t);export{o as default};
 //# sourceMappingURL=CtPSection.js.map

package/dist/es/components/internal/ClickToPay/components/CtPSection/CtPSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"CtPSection.js","sources":["../../../../../../../src/components/internal/ClickToPay/components/CtPSection/CtPSection.tsx"],"sourcesContent":["import { h } from 'preact';\nimport classnames from 'classnames';\nimport CtPLogoutLink from './CtPLogoutLink';\nimport { CtPBrand } from '../CtPBrand';\nimport useClickToPayContext from '../../context/useClickToPayContext';\nimport './CtPSection.scss';\n\ninterface CtPSectionProps {\n    onEnterKeyPress: (event: h.JSX.TargetedKeyboardEvent<HTMLInputElement>) => void;\n    children?: h.JSX.Element[];\n}\n\nconst CtPSection = ({ children, onEnterKeyPress }: CtPSectionProps): h.JSX.Element => {\n    const { isStandaloneComponent } = useClickToPayContext();\n\n    return (\n        // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n        <div\n            className={classnames('adyen-checkout-ctp__section', { 'adyen-checkout-ctp__section--standalone': isStandaloneComponent })}\n            onKeyPress={onEnterKeyPress}\n        >\n            <div className=\"adyen-checkout-ctp__section-brand\">\n                <CtPBrand />\n                <CtPLogoutLink />\n            </div>\n\n            {children}\n        </div>\n    );\n};\n\nconst Title = ({ endAdornment, children }: { endAdornment?; children }) => (\n    <div className=\"adyen-checkout-ctp__section-header\">\n        <h1 className=\"adyen-checkout-ctp__section-header-title\">{children}</h1>\n        {endAdornment && <span className=\"adyen-checkout-ctp__section-header-adornment\">{endAdornment}</span>}\n    </div>\n);\nconst Text = ({ children }: { children }) => <p className=\"adyen-checkout-ctp__section-text\">{children}</p>;\n\nCtPSection.Title = Title;\nCtPSection.Text = Text;\n\nexport default CtPSection;\n"],"names":["CtPSection","children","onEnterKeyPress","isStandaloneComponent","useClickToPayContext","h","div","className","classnames","onKeyPress","CtPBrand","CtPLogoutLink","Title","endAdornment","h1","span","Text","p"],"mappings":"mRAYA,MAAMA,EAAa,EAAGC,WAAUC,sBAC5B,MAAMC,sBAAEA,GAA0BC,IAElC,OAEIC,EAACC,MAAAA,CACGC,UAAWC,EAAW,8BAA+B,CAAE,0CAA2CL,IAClGM,WAAYP,GAEZG,EAACC,MAAAA,CAAIC,UAAU,qCACXF,EAACK,EAAAA,MACDL,EAACM,EAGJV,OAAAA,EAAAA,EAabD,EAAWY,MARG,EAAGC,eAAcZ,cAC3BI,EAACC,MAAAA,CAAIC,UAAU,sCACXF,EAACS,KAAAA,CAAGP,UAAU,4CAA4CN,GACzDY,GAAgBR,EAACU,OAAAA,CAAKR,UAAU,gDAAgDM,IAMzFb,EAAWgB,KAHE,EAAGf,cAA6BI,EAACY,IAAAA,CAAEV,UAAU,oCAAoCN"}
+{"version":3,"file":"CtPSection.js","sources":["../../../../../../../src/components/internal/ClickToPay/components/CtPSection/CtPSection.tsx"],"sourcesContent":["import { h } from 'preact';\nimport classnames from 'classnames';\nimport CtPLogoutLink from './CtPLogoutLink';\nimport { CtPBrand } from '../CtPBrand';\nimport useClickToPayContext from '../../context/useClickToPayContext';\nimport './CtPSection.scss';\n\ninterface CtPSectionProps {\n    onEnterKeyPress: (event: h.JSX.TargetedKeyboardEvent<HTMLInputElement>) => void;\n    children?: h.JSX.Element[];\n}\n\nconst CtPSection = ({ children, onEnterKeyPress }: CtPSectionProps): h.JSX.Element => {\n    const { isStandaloneComponent } = useClickToPayContext();\n\n    return (\n        // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n        <div\n            className={classnames('adyen-checkout-ctp__section', { 'adyen-checkout-ctp__section--standalone': isStandaloneComponent })}\n            onKeyPress={onEnterKeyPress}\n        >\n            <div className=\"adyen-checkout-ctp__section-brand\">\n                <CtPBrand />\n                <CtPLogoutLink />\n            </div>\n\n            {children}\n        </div>\n    );\n};\n\nconst Title = ({ endAdornment, children }: { endAdornment?; children }) => (\n    <div className=\"adyen-checkout-ctp__section-header\">\n        <h1 className=\"adyen-checkout-ctp__section-header-title\">{children}</h1>\n        {endAdornment && <span className=\"adyen-checkout-ctp__section-header-adornment\">{endAdornment}</span>}\n    </div>\n);\nconst Text = ({ children }: { children }) => <p className=\"adyen-checkout-ctp__section-text\">{children}</p>;\n\nCtPSection.Title = Title;\nCtPSection.Text = Text;\n\nexport default CtPSection;\n"],"names":["CtPSection","children","onEnterKeyPress","isStandaloneComponent","useClickToPayContext","h","div","className","classnames","onKeyPress","CtPBrand","CtPLogoutLink","Title","endAdornment","h1","span","Text","p"],"mappings":"wQAYA,MAAMA,EAAa,EAAGC,WAAUC,sBAC5B,MAAMC,sBAAEA,GAA0BC,IAElC,OAEIC,EAACC,MAAAA,CACGC,UAAWC,EAAW,8BAA+B,CAAE,0CAA2CL,IAClGM,WAAYP,GAEZG,EAACC,MAAAA,CAAIC,UAAU,qCACXF,EAACK,EAAAA,MACDL,EAACM,EAGJV,OAAAA,EAAAA,EAabD,EAAWY,MARG,EAAGC,eAAcZ,cAC3BI,EAACC,MAAAA,CAAIC,UAAU,sCACXF,EAACS,KAAAA,CAAGP,UAAU,4CAA4CN,GACzDY,GAAgBR,EAACU,OAAAA,CAAKR,UAAU,gDAAgDM,IAMzFb,EAAWgB,KAHE,EAAGf,cAA6BI,EAACY,IAAAA,CAAEV,UAAU,oCAAoCN"}

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

@@ -1 +1 @@
-{"version":3,"file":"CompanyDetails.js","sources":["../../../../../src/components/internal/CompanyDetails/CompanyDetails.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useEffect, useRef } from 'preact/hooks';\nimport Fieldset from '../FormFields/Fieldset';\nimport Field from '../FormFields/Field';\nimport ReadOnlyCompanyDetails from './ReadOnlyCompanyDetails';\nimport { companyDetailsValidationRules } from './validate';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport { getFormattedData } from './utils';\nimport { CompanyDetailsSchema, CompanyDetailsProps } from './types';\nimport useForm from '../../../utils/useForm';\nimport InputText from '../FormFields/InputText';\nimport { ComponentMethodsRef } from '../UIElement/types';\n\nexport const COMPANY_DETAILS_SCHEMA = ['name', 'registrationNumber'];\n\nexport default function CompanyDetails(props: CompanyDetailsProps) {\n    const { label = '', namePrefix, requiredFields, visibility } = props;\n    const { i18n } = useCoreContext();\n    const { handleChangeFor, triggerValidation, data, valid, errors, isValid } = useForm<CompanyDetailsSchema>({\n        schema: requiredFields,\n        rules: { ...companyDetailsValidationRules, ...props.validationRules },\n        defaultData: props.data\n    });\n\n    /** An object by which to expose 'public' members to the parent UIElement */\n    const companyDetailsRef = useRef<ComponentMethodsRef>({});\n    // Just call once\n    if (!Object.keys(companyDetailsRef.current).length) {\n        props.setComponentRef?.(companyDetailsRef.current);\n    }\n\n    // Expose method expected by (parent) Address.tsx\n    companyDetailsRef.current.showValidation = () => {\n        triggerValidation();\n    };\n\n    const generateFieldName = (name: string): string => `${namePrefix ? `${namePrefix}.` : ''}${name}`;\n\n    const eventHandler =\n        (mode: string): h.JSX.FocusEventHandler<HTMLInputElement> =>\n        (e): void => {\n            const { name } = e.target as HTMLInputElement;\n            const key = name.split(`${namePrefix}.`).pop();\n\n            handleChangeFor(key, mode)(e);\n        };\n\n    const inputEventHandler =\n        (mode: string): h.JSX.InputEventHandler<HTMLInputElement> =>\n        (e): void => {\n            const { name } = e.target as HTMLInputElement;\n            const key = name.split(`${namePrefix}.`).pop();\n\n            handleChangeFor(key, mode)(e);\n        };\n\n    useEffect(() => {\n        const formattedData = getFormattedData(data);\n        props.onChange({ data: formattedData, valid, errors, isValid });\n    }, [data, valid, errors, isValid]);\n\n    if (visibility === 'hidden') return null;\n    if (visibility === 'readOnly') return <ReadOnlyCompanyDetails {...props} data={data} />;\n\n    return (\n        <Fieldset classNameModifiers={[label]} label={label}>\n            {requiredFields.includes('name') && (\n                <Field\n                    label={i18n.get('companyDetails.name')}\n                    classNameModifiers={['name']}\n                    errorMessage={!!errors.name}\n                    i18n={i18n}\n                    name={generateFieldName('companyName')}\n                >\n                    <InputText\n                        name={generateFieldName('name')}\n                        value={data.name}\n                        classNameModifiers={['name']}\n                        onInput={inputEventHandler('input')}\n                        onBlur={eventHandler('blur')}\n                        spellCheck={false}\n                    />\n                </Field>\n            )}\n\n            {requiredFields.includes('registrationNumber') && (\n                <Field\n                    label={i18n.get('companyDetails.registrationNumber')}\n                    classNameModifiers={['registrationNumber']}\n                    errorMessage={!!errors.registrationNumber}\n                    i18n={i18n}\n                    name={generateFieldName('registrationNumber')}\n                >\n                    <InputText\n                        name={generateFieldName('registrationNumber')}\n                        value={data.registrationNumber}\n                        classNameModifiers={['registrationNumber']}\n                        onInput={inputEventHandler('input')}\n                        onBlur={eventHandler('blur')}\n                        spellCheck={false}\n                    />\n                </Field>\n            )}\n        </Fieldset>\n    );\n}\n\nCompanyDetails.defaultProps = {\n    data: {},\n    onChange: () => {},\n    visibility: 'editable',\n    requiredFields: COMPANY_DETAILS_SCHEMA,\n    validationRules: companyDetailsValidationRules\n};\n"],"names":["COMPANY_DETAILS_SCHEMA","CompanyDetails","props","label","namePrefix","requiredFields","visibility","i18n","useCoreContext","handleChangeFor","triggerValidation","data","valid","errors","isValid","useForm","schema","rules","companyDetailsValidationRules","validationRules","defaultData","companyDetailsRef","useRef","Object","keys","current","length","setComponentRef","showValidation","generateFieldName","name","eventHandler","mode","e","target","key","split","pop","inputEventHandler","useEffect","formattedData","getFormattedData","onChange","h","ReadOnlyCompanyDetails","Fieldset","classNameModifiers","includes","Field","get","errorMessage","InputText","value","onInput","onBlur","spellCheck","registrationNumber","defaultProps"],"mappings":"0jBAaaA,EAAyB,CAAC,OAAQ,sBAEhC,SAASC,EAAeC,GACnC,MAAMC,MAAEA,EAAQ,GAAEC,WAAEA,EAAUC,eAAEA,EAAcC,WAAEA,GAAeJ,GACzDK,KAAEA,GAASC,KACXC,gBAAEA,EAAeC,kBAAEA,EAAiBC,KAAEA,EAAIC,MAAEA,EAAKC,OAAEA,EAAMC,QAAEA,GAAYC,EAA8B,CACvGC,OAAQX,EACRY,MAAO,IAAKC,KAAkChB,EAAMiB,iBACpDC,YAAalB,EAAMS,OAIjBU,EAAoBC,EAA4B,IAEjDC,OAAOC,KAAKH,EAAkBI,SAASC,QACxCxB,EAAMyB,kBAAkBN,EAAkBI,SAI9CJ,EAAkBI,QAAQG,eAAiB,KACvClB,GAAAA,EAGJ,MAAMmB,EAAqBC,GAAyB,GAAG1B,EAAa,GAAGA,KAAgB,KAAK0B,IAEtFC,EACDC,GACAC,IACG,MAAMH,KAAEA,GAASG,EAAEC,OACbC,EAAML,EAAKM,MAAM,GAAGhC,MAAeiC,MAEzC5B,EAAgB0B,EAAKH,EAArBvB,CAA2BwB,EAAAA,EAG7BK,EACDN,GACAC,IACG,MAAMH,KAAEA,GAASG,EAAEC,OACbC,EAAML,EAAKM,MAAM,GAAGhC,MAAeiC,MAEzC5B,EAAgB0B,EAAKH,EAArBvB,CAA2BwB,EAAAA,EAQnC,OALAM,GAAU,KACN,MAAMC,EAAgBC,EAAiB9B,GACvCT,EAAMwC,SAAS,CAAE/B,KAAM6B,EAAe5B,QAAOC,SAAQC,WAAQ,GAC9D,CAACH,EAAMC,EAAOC,EAAQC,IAEN,WAAfR,EAAgC,KACjB,aAAfA,EAAkCqC,EAACC,EAAAA,IAA2B1C,EAAOS,KAAMA,IAG3EgC,EAACE,EAAAA,CAASC,mBAAoB,CAAC3C,GAAQA,MAAOA,GACzCE,EAAe0C,SAAS,SACrBJ,EAACK,EAAAA,CACG7C,MAAOI,EAAK0C,IAAI,uBAChBH,mBAAoB,CAAC,QACrBI,eAAgBrC,EAAOiB,KACvBvB,KAAMA,EACNuB,KAAMD,EAAkB,gBAExBc,EAACQ,EAAAA,CACGrB,KAAMD,EAAkB,QACxBuB,MAAOzC,EAAKmB,KACZgB,mBAAoB,CAAC,QACrBO,QAASf,EAAkB,SAC3BgB,OAAQvB,EAAa,QACrBwB,YAAY,KAKvBlD,EAAe0C,SAAS,uBACrBJ,EAACK,EAAAA,CACG7C,MAAOI,EAAK0C,IAAI,qCAChBH,mBAAoB,CAAC,sBACrBI,eAAgBrC,EAAO2C,mBACvBjD,KAAMA,EACNuB,KAAMD,EAAkB,uBAExBc,EAACQ,EAAAA,CACGrB,KAAMD,EAAkB,sBACxBuB,MAAOzC,EAAK6C,mBACZV,mBAAoB,CAAC,sBACrBO,QAASf,EAAkB,SAC3BgB,OAAQvB,EAAa,QACrBwB,YAAY,KAMpC,CAEAtD,EAAewD,aAAe,CAC1B9C,KAAM,CAAC,EACP+B,SAAU,OACVpC,WAAY,WACZD,eAAgBL,EAChBmB,gBAAiBD"}
+{"version":3,"file":"CompanyDetails.js","sources":["../../../../../src/components/internal/CompanyDetails/CompanyDetails.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useEffect, useRef } from 'preact/hooks';\nimport Fieldset from '../FormFields/Fieldset';\nimport Field from '../FormFields/Field';\nimport ReadOnlyCompanyDetails from './ReadOnlyCompanyDetails';\nimport { companyDetailsValidationRules } from './validate';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport { getFormattedData } from './utils';\nimport { CompanyDetailsSchema, CompanyDetailsProps } from './types';\nimport useForm from '../../../utils/useForm';\nimport InputText from '../FormFields/InputText';\nimport { ComponentMethodsRef } from '../UIElement/types';\nimport { HandleChangeForModeType } from '../../../utils/useForm/types';\n\nexport const COMPANY_DETAILS_SCHEMA = ['name', 'registrationNumber'];\n\nexport default function CompanyDetails(props: CompanyDetailsProps) {\n    const { label = '', namePrefix, requiredFields, visibility } = props;\n    const { i18n } = useCoreContext();\n    const { handleChangeFor, triggerValidation, data, valid, errors, isValid } = useForm<CompanyDetailsSchema>({\n        schema: requiredFields,\n        rules: { ...companyDetailsValidationRules, ...props.validationRules },\n        defaultData: props.data\n    });\n\n    /** An object by which to expose 'public' members to the parent UIElement */\n    const companyDetailsRef = useRef<ComponentMethodsRef>({});\n    // Just call once\n    if (!Object.keys(companyDetailsRef.current).length) {\n        props.setComponentRef?.(companyDetailsRef.current);\n    }\n\n    // Expose method expected by (parent) Address.tsx\n    companyDetailsRef.current.showValidation = () => {\n        triggerValidation();\n    };\n\n    const generateFieldName = (name: string): string => `${namePrefix ? `${namePrefix}.` : ''}${name}`;\n\n    const eventHandler =\n        (mode: HandleChangeForModeType): h.JSX.FocusEventHandler<HTMLInputElement> =>\n        (e): void => {\n            const { name } = e.target as HTMLInputElement;\n            const key = name.split(`${namePrefix}.`).pop();\n\n            handleChangeFor(key, mode)(e);\n        };\n\n    const inputEventHandler =\n        (mode: HandleChangeForModeType): h.JSX.InputEventHandler<HTMLInputElement> =>\n        (e): void => {\n            const { name } = e.target as HTMLInputElement;\n            const key = name.split(`${namePrefix}.`).pop();\n\n            handleChangeFor(key, mode)(e);\n        };\n\n    useEffect(() => {\n        const formattedData = getFormattedData(data);\n        props.onChange({ data: formattedData, valid, errors, isValid });\n    }, [data, valid, errors, isValid]);\n\n    if (visibility === 'hidden') return null;\n    if (visibility === 'readOnly') return <ReadOnlyCompanyDetails {...props} data={data} />;\n\n    return (\n        <Fieldset classNameModifiers={[label]} label={label}>\n            {requiredFields.includes('name') && (\n                <Field\n                    label={i18n.get('companyDetails.name')}\n                    classNameModifiers={['name']}\n                    errorMessage={!!errors.name}\n                    i18n={i18n}\n                    name={generateFieldName('companyName')}\n                >\n                    <InputText\n                        name={generateFieldName('name')}\n                        value={data.name}\n                        classNameModifiers={['name']}\n                        onInput={inputEventHandler('input')}\n                        onBlur={eventHandler('blur')}\n                        spellCheck={false}\n                    />\n                </Field>\n            )}\n\n            {requiredFields.includes('registrationNumber') && (\n                <Field\n                    label={i18n.get('companyDetails.registrationNumber')}\n                    classNameModifiers={['registrationNumber']}\n                    errorMessage={!!errors.registrationNumber}\n                    i18n={i18n}\n                    name={generateFieldName('registrationNumber')}\n                >\n                    <InputText\n                        name={generateFieldName('registrationNumber')}\n                        value={data.registrationNumber}\n                        classNameModifiers={['registrationNumber']}\n                        onInput={inputEventHandler('input')}\n                        onBlur={eventHandler('blur')}\n                        spellCheck={false}\n                    />\n                </Field>\n            )}\n        </Fieldset>\n    );\n}\n\nCompanyDetails.defaultProps = {\n    data: {},\n    onChange: () => {},\n    visibility: 'editable',\n    requiredFields: COMPANY_DETAILS_SCHEMA,\n    validationRules: companyDetailsValidationRules\n};\n"],"names":["COMPANY_DETAILS_SCHEMA","CompanyDetails","props","label","namePrefix","requiredFields","visibility","i18n","useCoreContext","handleChangeFor","triggerValidation","data","valid","errors","isValid","useForm","schema","rules","companyDetailsValidationRules","validationRules","defaultData","companyDetailsRef","useRef","Object","keys","current","length","setComponentRef","showValidation","generateFieldName","name","eventHandler","mode","e","target","key","split","pop","inputEventHandler","useEffect","formattedData","getFormattedData","onChange","h","ReadOnlyCompanyDetails","Fieldset","classNameModifiers","includes","Field","get","errorMessage","InputText","value","onInput","onBlur","spellCheck","registrationNumber","defaultProps"],"mappings":"0jBAcaA,EAAyB,CAAC,OAAQ,sBAEhC,SAASC,EAAeC,GACnC,MAAMC,MAAEA,EAAQ,GAAEC,WAAEA,EAAUC,eAAEA,EAAcC,WAAEA,GAAeJ,GACzDK,KAAEA,GAASC,KACXC,gBAAEA,EAAeC,kBAAEA,EAAiBC,KAAEA,EAAIC,MAAEA,EAAKC,OAAEA,EAAMC,QAAEA,GAAYC,EAA8B,CACvGC,OAAQX,EACRY,MAAO,IAAKC,KAAkChB,EAAMiB,iBACpDC,YAAalB,EAAMS,OAIjBU,EAAoBC,EAA4B,IAEjDC,OAAOC,KAAKH,EAAkBI,SAASC,QACxCxB,EAAMyB,kBAAkBN,EAAkBI,SAI9CJ,EAAkBI,QAAQG,eAAiB,KACvClB,GAAAA,EAGJ,MAAMmB,EAAqBC,GAAyB,GAAG1B,EAAa,GAAGA,KAAgB,KAAK0B,IAEtFC,EACDC,GACAC,IACG,MAAMH,KAAEA,GAASG,EAAEC,OACbC,EAAML,EAAKM,MAAM,GAAGhC,MAAeiC,MAEzC5B,EAAgB0B,EAAKH,EAArBvB,CAA2BwB,EAAAA,EAG7BK,EACDN,GACAC,IACG,MAAMH,KAAEA,GAASG,EAAEC,OACbC,EAAML,EAAKM,MAAM,GAAGhC,MAAeiC,MAEzC5B,EAAgB0B,EAAKH,EAArBvB,CAA2BwB,EAAAA,EAQnC,OALAM,GAAU,KACN,MAAMC,EAAgBC,EAAiB9B,GACvCT,EAAMwC,SAAS,CAAE/B,KAAM6B,EAAe5B,QAAOC,SAAQC,WAAQ,GAC9D,CAACH,EAAMC,EAAOC,EAAQC,IAEN,WAAfR,EAAgC,KACjB,aAAfA,EAAkCqC,EAACC,EAAAA,IAA2B1C,EAAOS,KAAMA,IAG3EgC,EAACE,EAAAA,CAASC,mBAAoB,CAAC3C,GAAQA,MAAOA,GACzCE,EAAe0C,SAAS,SACrBJ,EAACK,EAAAA,CACG7C,MAAOI,EAAK0C,IAAI,uBAChBH,mBAAoB,CAAC,QACrBI,eAAgBrC,EAAOiB,KACvBvB,KAAMA,EACNuB,KAAMD,EAAkB,gBAExBc,EAACQ,EAAAA,CACGrB,KAAMD,EAAkB,QACxBuB,MAAOzC,EAAKmB,KACZgB,mBAAoB,CAAC,QACrBO,QAASf,EAAkB,SAC3BgB,OAAQvB,EAAa,QACrBwB,YAAY,KAKvBlD,EAAe0C,SAAS,uBACrBJ,EAACK,EAAAA,CACG7C,MAAOI,EAAK0C,IAAI,qCAChBH,mBAAoB,CAAC,sBACrBI,eAAgBrC,EAAO2C,mBACvBjD,KAAMA,EACNuB,KAAMD,EAAkB,uBAExBc,EAACQ,EAAAA,CACGrB,KAAMD,EAAkB,sBACxBuB,MAAOzC,EAAK6C,mBACZV,mBAAoB,CAAC,sBACrBO,QAASf,EAAkB,SAC3BgB,OAAQvB,EAAa,QACrBwB,YAAY,KAMpC,CAEAtD,EAAewD,aAAe,CAC1B9C,KAAM,CAAC,EACP+B,SAAU,OACVpC,WAAY,WACZD,eAAgBL,EAChBmB,gBAAiBD"}

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

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../external/preact/dist/preact.js";import r from"../../../external/classnames/index.js";import{useCoreContext as t}from"../../../core/Context/CoreProvider.js";function a({label:a="qrCodeOrApp",classNames:o=[]}){const{i18n:s}=t();return e("div",{className:r("adyen-checkout__content-separator",...o)},s.get(a))}export{a as default};
+import{createElement as e}from"../../../external/preact/dist/preact.js";import r from"../../../_virtual/index.js";import{useCoreContext as t}from"../../../core/Context/CoreProvider.js";function o({label:o="qrCodeOrApp",classNames:a=[]}){const{i18n:s}=t();return e("div",{className:r("adyen-checkout__content-separator",...a)},s.get(o))}export{o as default};
 //# sourceMappingURL=ContentSeparator.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ContentSeparator.js","sources":["../../../../../src/components/internal/ContentSeparator/ContentSeparator.tsx"],"sourcesContent":["import { h } from 'preact';\nimport classnames from 'classnames';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport './ContentSeparator.scss';\n\ninterface ContentSeparatorProps {\n    label?: string;\n    classNames?: string[];\n}\n\nfunction ContentSeparator({ label = 'qrCodeOrApp', classNames = [] }: ContentSeparatorProps) {\n    const { i18n } = useCoreContext();\n    return <div className={classnames('adyen-checkout__content-separator', ...classNames)}>{i18n.get(label)}</div>;\n}\n\nexport default ContentSeparator;\n"],"names":["ContentSeparator","label","classNames","i18n","useCoreContext","h","div","className","classnames","get"],"mappings":"oMAUA,SAASA,GAAiBC,MAAEA,EAAQ,cAAaC,WAAEA,EAAa,KAC5D,MAAMC,KAAEA,GAASC,IACjB,OAAOC,EAACC,MAAAA,CAAIC,UAAWC,EAAW,uCAAwCN,IAAcC,EAAKM,IAAIR,GACrG"}
+{"version":3,"file":"ContentSeparator.js","sources":["../../../../../src/components/internal/ContentSeparator/ContentSeparator.tsx"],"sourcesContent":["import { h } from 'preact';\nimport classnames from 'classnames';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport './ContentSeparator.scss';\n\ninterface ContentSeparatorProps {\n    label?: string;\n    classNames?: string[];\n}\n\nfunction ContentSeparator({ label = 'qrCodeOrApp', classNames = [] }: ContentSeparatorProps) {\n    const { i18n } = useCoreContext();\n    return <div className={classnames('adyen-checkout__content-separator', ...classNames)}>{i18n.get(label)}</div>;\n}\n\nexport default ContentSeparator;\n"],"names":["ContentSeparator","label","classNames","i18n","useCoreContext","h","div","className","classnames","get"],"mappings":"yLAUA,SAASA,GAAiBC,MAAEA,EAAQ,cAAaC,WAAEA,EAAa,KAC5D,MAAMC,KAAEA,GAASC,IACjB,OAAOC,EAACC,MAAAA,CAAIC,UAAWC,EAAW,uCAAwCN,IAAcC,EAAKM,IAAIR,GACrG"}

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

@@ -0,0 +1,2 @@
+import{createElement as e}from"../../../external/preact/dist/preact.js";function a({tableFields:a}){return e("dl",{className:"adyen-checkout__voucher-result__details adyen-checkout__details-table"},a.filter((e=>!!e)).filter((({label:e,value:a})=>!!e&&!!a)).map((({label:a,value:t})=>e("div",{key:`${a+t}`,className:"adyen-checkout__voucher-result__details__item adyen-checkout__details-table__item"},e("dt",{className:"adyen-checkout__voucher-result__details__label adyen-checkout__details-table__label"},a),e("dd",{className:"adyen-checkout__voucher-result__details__value adyen-checkout__details-table__value"},t)))))}export{a as default};
+//# sourceMappingURL=DetailsTable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DetailsTable.js","sources":["../../../../../src/components/internal/DetailsTable/DetailsTable.tsx"],"sourcesContent":["import { h } from 'preact';\nimport './DetailsTable.scss';\n\nexport interface DetailsTableData\n    extends Array<{\n        label: string;\n        value: string;\n    }> {}\n\nexport interface DetailsTableProps {\n    tableFields: DetailsTableData;\n}\n\nexport default function DetailsTable({ tableFields }: DetailsTableProps) {\n    // For context, this markup uses 2 classes for backwards compatibility\n    // This was originally part of the voucher component and ported out\n    // We can remove the voucher class names at point\n    return (\n        <dl className=\"adyen-checkout__voucher-result__details adyen-checkout__details-table\">\n            {tableFields\n                // first remove empty values\n                .filter(item => !!item)\n                // or objects without label and value\n                .filter(({ label, value }) => !!label && !!value)\n                .map(({ label, value }) => (\n                    <div key={`${label + value}`} className=\"adyen-checkout__voucher-result__details__item adyen-checkout__details-table__item\">\n                        <dt className=\"adyen-checkout__voucher-result__details__label adyen-checkout__details-table__label\">{label}</dt>\n                        <dd className=\"adyen-checkout__voucher-result__details__value adyen-checkout__details-table__value\">{value}</dd>\n                    </div>\n                ))}\n        </dl>\n    );\n}\n"],"names":["DetailsTable","tableFields","h","dl","className","filter","item","label","value","map","div","key","dt","dd"],"mappings":"wEAae,SAASA,GAAaC,YAAEA,IAInC,OACIC,EAACC,KAAAA,CAAGC,UAAU,yEACTH,EAEII,QAAOC,KAAUA,IAEjBD,QAAO,EAAGE,QAAOC,aAAcD,KAAWC,IAC1CC,KAAI,EAAGF,QAAOC,WACXN,EAACQ,MAAAA,CAAIC,IAAK,GAAGJ,EAAQC,IAASJ,UAAU,qFACpCF,EAACU,KAAAA,CAAGR,UAAU,uFAAuFG,GACrGL,EAACW,KAAAA,CAAGT,UAAU,uFAAuFI,MAK7H"}

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

@@ -1,2 +1,2 @@
-import e from"../../../external/classnames/index.js";import{createElement as t}from"../../../external/preact/dist/preact.js";function a({buttonId:a,showRadioButton:d,isSelected:n,expandContentId:o,children:r,classNameModifiers:c=[]}){return t("button",{className:e("adyen-checkout__payment-method__header__title",...c.map((e=>`adyen-checkout-expand-button--${e}`))),id:a,role:"radio","aria-checked":n,"aria-expanded":n,"aria-controls":o,type:"button"},d&&t("span",{className:e({"adyen-checkout__payment-method__radio":!0,"adyen-checkout__payment-method__radio--selected":n}),"aria-hidden":"true"}),r)}export{a as default};
+import e from"../../../_virtual/index.js";import{createElement as t}from"../../../external/preact/dist/preact.js";function a({buttonId:a,showRadioButton:o,isSelected:d,expandContentId:n,children:r,classNameModifiers:c=[]}){return t("button",{className:e("adyen-checkout__payment-method__header__title",...c.map((e=>`adyen-checkout-expand-button--${e}`))),id:a,role:"radio","aria-checked":d,"aria-controls":n,type:"button"},o&&t("span",{className:e({"adyen-checkout__payment-method__radio":!0,"adyen-checkout__payment-method__radio--selected":d}),"aria-hidden":"true"}),r)}export{a as default};
 //# sourceMappingURL=ExpandButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ExpandButton.js","sources":["../../../../../src/components/internal/ExpandButton/ExpandButton.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ComponentChildren, h } from 'preact';\nimport './ExpandButton.scss';\n\ninterface ExpandButton {\n    buttonId: string;\n    isSelected: boolean;\n    expandContentId: string;\n    children?: ComponentChildren;\n    showRadioButton?: boolean;\n    classNameModifiers?: string[];\n}\n\nfunction ExpandButton({ buttonId, showRadioButton, isSelected, expandContentId, children, classNameModifiers = [] }: Readonly<ExpandButton>) {\n    return (\n        // See discussion: https://github.com/w3c/aria/issues/1404\n        // eslint-disable-next-line jsx-a11y/role-supports-aria-props\n        <button\n            className={classNames(\n                'adyen-checkout__payment-method__header__title',\n                ...classNameModifiers.map(modifier => `adyen-checkout-expand-button--${modifier}`)\n            )}\n            id={buttonId}\n            role={'radio'}\n            aria-checked={isSelected}\n            aria-expanded={isSelected}\n            aria-controls={expandContentId}\n            type=\"button\"\n        >\n            {showRadioButton && (\n                <span\n                    className={classNames({\n                        'adyen-checkout__payment-method__radio': true,\n                        'adyen-checkout__payment-method__radio--selected': isSelected\n                    })}\n                    aria-hidden=\"true\"\n                />\n            )}\n            {children}\n        </button>\n    );\n}\n\nexport default ExpandButton;\n"],"names":["ExpandButton","buttonId","showRadioButton","isSelected","expandContentId","children","classNameModifiers","h","button","className","classNames","map","modifier","id","role","aria-checked","aria-expanded","aria-controls","type","span","aria-hidden"],"mappings":"6HAaA,SAASA,GAAaC,SAAEA,EAAQC,gBAAEA,EAAeC,WAAEA,EAAUC,gBAAEA,EAAeC,SAAEA,EAAQC,mBAAEA,EAAqB,KAC3G,OAGIC,EAACC,SAAAA,CACGC,UAAWC,EACP,mDACGJ,EAAmBK,KAAIC,GAAY,iCAAiCA,OAE3EC,GAAIZ,EACJa,KAAM,QACNC,eAAcZ,EACda,gBAAeb,EACfc,gBAAeb,EACfc,KAAK,UAEJhB,GACGK,EAACY,OAAAA,CACGV,UAAWC,EAAW,CAClB,yCAAyC,EACzC,kDAAmDP,IAEvDiB,cAAY,SAGnBf,EAGb"}
+{"version":3,"file":"ExpandButton.js","sources":["../../../../../src/components/internal/ExpandButton/ExpandButton.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ComponentChildren, h } from 'preact';\nimport './ExpandButton.scss';\n\ninterface ExpandButton {\n    buttonId: string;\n    isSelected: boolean;\n    expandContentId: string;\n    children?: ComponentChildren;\n    showRadioButton?: boolean;\n    classNameModifiers?: string[];\n}\n\nfunction ExpandButton({ buttonId, showRadioButton, isSelected, expandContentId, children, classNameModifiers = [] }: Readonly<ExpandButton>) {\n    return (\n        // See discussion: https://github.com/w3c/aria/issues/1404\n        // this has been disabled as we got quite a few complains\n        // mainly from merchants running automated systems\n        <button\n            className={classNames(\n                'adyen-checkout__payment-method__header__title',\n                ...classNameModifiers.map(modifier => `adyen-checkout-expand-button--${modifier}`)\n            )}\n            id={buttonId}\n            role={'radio'}\n            aria-checked={isSelected}\n            //aria-expanded={isSelected} - disabled for now\n            aria-controls={expandContentId}\n            type=\"button\"\n        >\n            {showRadioButton && (\n                <span\n                    className={classNames({\n                        'adyen-checkout__payment-method__radio': true,\n                        'adyen-checkout__payment-method__radio--selected': isSelected\n                    })}\n                    aria-hidden=\"true\"\n                />\n            )}\n            {children}\n        </button>\n    );\n}\n\nexport default ExpandButton;\n"],"names":["ExpandButton","buttonId","showRadioButton","isSelected","expandContentId","children","classNameModifiers","h","button","className","classNames","map","modifier","id","role","aria-checked","aria-controls","type","span","aria-hidden"],"mappings":"kHAaA,SAASA,GAAaC,SAAEA,EAAQC,gBAAEA,EAAeC,WAAEA,EAAUC,gBAAEA,EAAeC,SAAEA,EAAQC,mBAAEA,EAAqB,KAC3G,OAIIC,EAACC,SAAAA,CACGC,UAAWC,EACP,mDACGJ,EAAmBK,KAAIC,GAAY,iCAAiCA,OAE3EC,GAAIZ,EACJa,KAAM,QACNC,eAAcZ,EAEda,gBAAeZ,EACfa,KAAK,UAEJf,GACGK,EAACW,OAAAA,CACGT,UAAWC,EAAW,CAClB,yCAAyC,EACzC,kDAAmDP,IAEvDgB,cAAY,SAGnBd,EAGb"}

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

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../external/preact/dist/preact.js";import a from"../../../../external/classnames/index.js";import{ARIA_ERROR_SUFFIX as c,ARIA_CONTEXT_SUFFIX as n}from"../../../../core/Errors/constants.js";function t({classNameModifiers:t=[],label:o,isInvalid:s,onChange:r,...l}){const{uniqueId:i,showErrorElement:d,showContextualElement:m,...h}=l;return e("label",{className:"adyen-checkout__checkbox",htmlFor:i},e("input",{id:i,...h,...d&&{"aria-describedby":`${i}${c}`},...m&&{"aria-describedby":`${i}${n}`},className:a(["adyen-checkout__checkbox__input",[l.className],{"adyen-checkout__checkbox__input--invalid":s},t.map((e=>`adyen-checkout__input--${e}`))]),type:"checkbox",onChange:r}),e("span",{className:"adyen-checkout__checkbox__label"},o))}t.defaultProps={onChange:()=>{}};export{t as default};
+import{createElement as e}from"../../../../external/preact/dist/preact.js";import a from"../../../../_virtual/index.js";import{ARIA_ERROR_SUFFIX as c,ARIA_CONTEXT_SUFFIX as t}from"../../../../core/Errors/constants.js";function o({classNameModifiers:o=[],label:n,isInvalid:r,onChange:s,...i}){const{uniqueId:l,showErrorElement:d,showContextualElement:u,..._}=i;return e("label",{className:"adyen-checkout__checkbox",htmlFor:l},e("input",{id:l,..._,...d&&{"aria-describedby":`${l}${c}`},...u&&{"aria-describedby":`${l}${t}`},className:a(["adyen-checkout__checkbox__input",[i.className],{"adyen-checkout__checkbox__input--invalid":r},o.map((e=>`adyen-checkout__input--${e}`))]),type:"checkbox",onChange:s}),e("span",{className:"adyen-checkout__checkbox__label"},n))}o.defaultProps={onChange:()=>{}};export{o as default};
 //# sourceMappingURL=Checkbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../../../src/components/internal/FormFields/Checkbox/Checkbox.tsx"],"sourcesContent":["import { ComponentChild, h } from 'preact';\nimport cx from 'classnames';\nimport './Checkbox.scss';\nimport { ARIA_CONTEXT_SUFFIX, ARIA_ERROR_SUFFIX } from '../../../../core/Errors/constants';\n\ninterface CheckboxProps {\n    checked?: boolean;\n    classNameModifiers?: string[];\n    label?: string | ComponentChild;\n    name?: string;\n    isInvalid?: boolean;\n    onChange?;\n    onInput?;\n    className?: string;\n    value?: string;\n    uniqueId?: string;\n    showErrorElement?: boolean;\n    showContextualElement?: boolean;\n}\n\nexport default function Checkbox({ classNameModifiers = [], label, isInvalid, onChange, ...props }: CheckboxProps) {\n    // Strip some values from props. We need to reference them but don't want to set them as attributes.\n    const { uniqueId: uid, showErrorElement, showContextualElement, ...newProps } = props;\n\n    return (\n        <label className=\"adyen-checkout__checkbox\" htmlFor={uid}>\n            <input\n                id={uid}\n                {...newProps}\n                {...(showErrorElement && { 'aria-describedby': `${uid}${ARIA_ERROR_SUFFIX}` })}\n                {...(showContextualElement && { 'aria-describedby': `${uid}${ARIA_CONTEXT_SUFFIX}` })}\n                className={cx([\n                    'adyen-checkout__checkbox__input',\n                    [props.className],\n                    { 'adyen-checkout__checkbox__input--invalid': isInvalid },\n                    classNameModifiers.map(m => `adyen-checkout__input--${m}`)\n                ])}\n                type=\"checkbox\"\n                onChange={onChange}\n            />\n            <span className=\"adyen-checkout__checkbox__label\">{label}</span>\n        </label>\n    );\n}\n\nCheckbox.defaultProps = {\n    onChange: () => {}\n};\n"],"names":["Checkbox","classNameModifiers","label","isInvalid","onChange","props","uniqueId","uid","showErrorElement","showContextualElement","newProps","h","className","htmlFor","input","id","ARIA_ERROR_SUFFIX","ARIA_CONTEXT_SUFFIX","cx","map","m","type","span","defaultProps"],"mappings":"qOAoBe,SAASA,GAASC,mBAAEA,EAAqB,GAAEC,MAAEA,EAAKC,UAAEA,EAASC,SAAEA,KAAaC,IAEvF,MAAQC,SAAUC,EAAGC,iBAAEA,EAAgBC,sBAAEA,KAA0BC,GAAaL,EAEhF,OACIM,EAACT,QAAAA,CAAMU,UAAU,2BAA2BC,QAASN,GACjDI,EAACG,QAAAA,CACGC,GAAIR,KACAG,KACCF,GAAoB,CAAE,mBAAoB,GAAGD,IAAMS,QACnDP,GAAyB,CAAE,mBAAoB,GAAGF,IAAMU,KAC7DL,UAAWM,EAAG,CACV,kCACA,CAACb,EAAMO,WACP,CAAE,2CAA4CT,GAC9CF,EAAmBkB,KAAIC,GAAK,0BAA0BA,QAE1DC,KAAK,WACLjB,SAAUA,IAEdO,EAACW,OAAAA,CAAKV,UAAU,mCAAmCV,GAG/D,CAEAF,EAASuB,aAAe,CACpBnB,SAAU"}
+{"version":3,"file":"Checkbox.js","sources":["../../../../../../src/components/internal/FormFields/Checkbox/Checkbox.tsx"],"sourcesContent":["import { ComponentChild, h } from 'preact';\nimport cx from 'classnames';\nimport './Checkbox.scss';\nimport { ARIA_CONTEXT_SUFFIX, ARIA_ERROR_SUFFIX } from '../../../../core/Errors/constants';\n\ninterface CheckboxProps {\n    checked?: boolean;\n    classNameModifiers?: string[];\n    label?: string | ComponentChild;\n    name?: string;\n    isInvalid?: boolean;\n    onChange?;\n    onInput?;\n    className?: string;\n    value?: string;\n    uniqueId?: string;\n    showErrorElement?: boolean;\n    showContextualElement?: boolean;\n}\n\nexport default function Checkbox({ classNameModifiers = [], label, isInvalid, onChange, ...props }: CheckboxProps) {\n    // Strip some values from props. We need to reference them but don't want to set them as attributes.\n    const { uniqueId: uid, showErrorElement, showContextualElement, ...newProps } = props;\n\n    return (\n        <label className=\"adyen-checkout__checkbox\" htmlFor={uid}>\n            <input\n                id={uid}\n                {...newProps}\n                {...(showErrorElement && { 'aria-describedby': `${uid}${ARIA_ERROR_SUFFIX}` })}\n                {...(showContextualElement && { 'aria-describedby': `${uid}${ARIA_CONTEXT_SUFFIX}` })}\n                className={cx([\n                    'adyen-checkout__checkbox__input',\n                    [props.className],\n                    { 'adyen-checkout__checkbox__input--invalid': isInvalid },\n                    classNameModifiers.map(m => `adyen-checkout__input--${m}`)\n                ])}\n                type=\"checkbox\"\n                onChange={onChange}\n            />\n            <span className=\"adyen-checkout__checkbox__label\">{label}</span>\n        </label>\n    );\n}\n\nCheckbox.defaultProps = {\n    onChange: () => {}\n};\n"],"names":["Checkbox","classNameModifiers","label","isInvalid","onChange","props","uniqueId","uid","showErrorElement","showContextualElement","newProps","h","className","htmlFor","input","id","ARIA_ERROR_SUFFIX","ARIA_CONTEXT_SUFFIX","cx","map","m","type","span","defaultProps"],"mappings":"0NAoBe,SAASA,GAASC,mBAAEA,EAAqB,GAAEC,MAAEA,EAAKC,UAAEA,EAASC,SAAEA,KAAaC,IAEvF,MAAQC,SAAUC,EAAGC,iBAAEA,EAAgBC,sBAAEA,KAA0BC,GAAaL,EAEhF,OACIM,EAACT,QAAAA,CAAMU,UAAU,2BAA2BC,QAASN,GACjDI,EAACG,QAAAA,CACGC,GAAIR,KACAG,KACCF,GAAoB,CAAE,mBAAoB,GAAGD,IAAMS,QACnDP,GAAyB,CAAE,mBAAoB,GAAGF,IAAMU,KAC7DL,UAAWM,EAAG,CACV,kCACA,CAACb,EAAMO,WACP,CAAE,2CAA4CT,GAC9CF,EAAmBkB,KAAIC,GAAK,0BAA0BA,QAE1DC,KAAK,WACLjB,SAAUA,IAEdO,EAACW,OAAAA,CAAKV,UAAU,mCAAmCV,GAG/D,CAEAF,EAASuB,aAAe,CACpBnB,SAAU"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sources":["../../../../../../src/components/internal/FormFields/Field/Field.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { cloneElement, ComponentChild, Fragment, FunctionalComponent, h, toChildArray, VNode } from 'preact';\nimport Spinner from '../../Spinner';\nimport Icon from '../../Icon';\nimport { ARIA_CONTEXT_SUFFIX, ARIA_ERROR_SUFFIX } from '../../../../core/Errors/constants';\nimport { useCallback, useRef, useState } from 'preact/hooks';\nimport { getUniqueId } from '../../../../utils/idGenerator';\nimport { FieldProps } from './types';\nimport './Field.scss';\nimport { PREFIX } from '../../Icon/constants';\n\nconst Field: FunctionalComponent<FieldProps> = props => {\n    //\n    const {\n        children,\n        className,\n        classNameModifiers,\n        dir,\n        disabled,\n        readOnly,\n        errorMessage,\n        helper,\n        inputWrapperModifiers,\n        isLoading,\n        isValid,\n        label,\n        labelEndAdornment,\n        name,\n        onBlur,\n        onFieldBlur,\n        onFocus,\n        // onFocusField is a securedField related function that allows a label click to set focus on a securedField (equates to CardInput setFocusOn)\n        // TODO should rename it to make its purpose clear => setFocusOnSecuredField\n        onFocusField,\n        showValidIcon,\n        useLabelElement,\n        showErrorElement,\n        showContextualElement,\n        contextualText,\n        // Redeclare prop names to avoid internal clashes\n        filled: propsFilled,\n        focused: propsFocused,\n        i18n,\n        contextVisibleToScreenReader,\n        renderAlternativeToLabel\n    } = props;\n\n    // Controls whether any error element has an aria-hidden=\"true\" attr (which means it is the error for a securedField)\n    // or whether it has an id attr that can be pointed to by an aria-describedby attr on an input element\n    const contextVisibleToSR = contextVisibleToScreenReader ?? true;\n    const showError = showErrorElement && typeof errorMessage === 'string' && errorMessage.length > 0;\n    const showContext = showContextualElement && !showError && contextualText?.length > 0;\n\n    const uniqueId = useRef(getUniqueId(`adyen-checkout-${name}`));\n    const [focused, setFocused] = useState(false);\n    const [filled, setFilled] = useState(false);\n\n    // The means by which focussed/filled is set for securedFields\n    if (propsFocused != null) setFocused(!!propsFocused);\n    if (propsFilled != null) setFilled(!!propsFilled);\n\n    // The means by which focussed/filled is set for other fields - this function is passed down to them and triggered\n    const onFocusHandler = useCallback(\n        (event: h.JSX.TargetedEvent<HTMLInputElement>) => {\n            setFocused(true);\n            onFocus?.(event);\n        },\n        [onFocus]\n    );\n\n    const onBlurHandler = useCallback(\n        (event: h.JSX.TargetedEvent<HTMLInputElement>) => {\n            setFocused(false);\n            onBlur?.(event);\n            // When we also need to fire a specific function when a field blurs // TODO - what is the use case?\n            onFieldBlur?.(event);\n        },\n        [onBlur, onFieldBlur]\n    );\n\n    const renderLabelOrAlternativeContents = useCallback(() => {\n        return (\n            <Fragment>\n                {typeof label === 'string' && (\n                    <span\n                        className={classNames({\n                            'adyen-checkout__label__text': true,\n                            'adyen-checkout__label__text--error': errorMessage\n                        })}\n                        data-id={name}\n                    >\n                        {label}\n                    </span>\n                )}\n\n                {/*TODO - in what scenario is label a function? */}\n                {/*@ts-ignore - function is callable*/}\n                {typeof label === 'function' && label()}\n\n                {labelEndAdornment && <span className=\"adyen-checkout__label-adornment--end\">{labelEndAdornment}</span>}\n\n                {helper && <span className={'adyen-checkout__helper-text'}>{helper}</span>}\n            </Fragment>\n        );\n    }, [label, errorMessage, labelEndAdornment, helper]);\n\n    const renderInputRelatedElements = useCallback(() => {\n        const errorElem = (\n            <span\n                className={classNames({ 'adyen-checkout-contextual-text--error': true, 'adyen-checkout-contextual-text--hidden': !showError })}\n                {...(contextVisibleToSR && { id: `${uniqueId.current}${ARIA_ERROR_SUFFIX}` })}\n                aria-hidden={contextVisibleToSR ? null : 'true'}\n            >\n                {errorMessage}\n            </span>\n        );\n        const contextualElem = (\n            <span\n                className={classNames({ 'adyen-checkout-contextual-text': true, 'adyen-checkout-contextual-text--hidden': !showContext })}\n                {...(contextVisibleToSR && { id: `${uniqueId.current}${ARIA_CONTEXT_SUFFIX}` })}\n                aria-hidden={contextVisibleToSR ? null : 'true'}\n            >\n                {contextualText}\n            </span>\n        );\n\n        return (\n            <Fragment>\n                <div\n                    className={classNames([\n                        'adyen-checkout__input-wrapper',\n                        ...inputWrapperModifiers.map(m => `adyen-checkout__input-wrapper--${m}`)\n                    ])}\n                    dir={dir}\n                >\n                    {toChildArray(children).map((child: ComponentChild): ComponentChild => {\n                        const childProps = {\n                            isValid,\n                            onFocusHandler,\n                            onBlurHandler,\n                            isInvalid: !!errorMessage,\n                            ...(name && { uniqueId: uniqueId.current }),\n                            showErrorElement: showErrorElement\n                        };\n                        return cloneElement(child as VNode, childProps);\n                    })}\n\n                    {isLoading && (\n                        <span className=\"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--loading\">\n                            <Spinner size=\"small\" />\n                        </span>\n                    )}\n\n                    {isValid && showValidIcon !== false && (\n                        <span className=\"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--valid\">\n                            <Icon type={`${PREFIX}checkmark`} alt={i18n?.get('field.valid')} />\n                        </span>\n                    )}\n\n                    {errorMessage && (\n                        <span className=\"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--invalid\">\n                            <Icon type={`${PREFIX}field_error`} alt={i18n?.get('error.title')} />\n                        </span>\n                    )}\n                </div>\n                {errorElem}\n                {contextualElem}\n            </Fragment>\n        );\n    }, [children, errorMessage, contextualText, isLoading, isValid, onFocusHandler, onBlurHandler]);\n\n    /**\n     * Use cases:\n     * - Not all form controls want/need a label e.g. many checkboxes describe what they are in their own markup and don't need the wrapping Field to also generate a labelling element\n     * - securedFields *can't* have a label (screen-reader's can make the association, over different browser contexts, between the label and the input)\n     */\n    const LabelOrAlternative = useCallback(\n        ({ onFocusField, focused, filled, disabled, name, uniqueId, useLabelElement, isSecuredField, children, renderAlternativeToLabel }) => {\n            const defaultWrapperProps = {\n                onClick: onFocusField,\n                className: classNames({\n                    'adyen-checkout__label': true,\n                    'adyen-checkout__label--focused': focused,\n                    'adyen-checkout__label--filled': filled,\n                    'adyen-checkout__label--disabled': disabled\n                })\n            };\n\n            return useLabelElement ? (\n                // if we are NOT dealing with the label for a securedField... we can give it a `for` attribute\n                <label {...defaultWrapperProps} {...(!isSecuredField && name && { htmlFor: uniqueId })}>\n                    {children}\n                </label>\n            ) : (\n                renderAlternativeToLabel(defaultWrapperProps, children, uniqueId) // defaults to null\n\n                // Example usage:\n                // const alternativeLabelContent = (defaultWrapperProps, children, uniqueId) => {\n                //     return (\n                //         <div {...defaultWrapperProps} role={'label'} htmlFor={uniqueId}>\n                //             {children}\n                //         </div>\n                //     );\n                // };\n                // <Field name={'myField'} useLabelElement={false} renderAlternativeToLabel={alternativeLabelContent}>\n            );\n        },\n        []\n    );\n\n    /**\n     * RENDER\n     */\n    return (\n        <div\n            className={classNames(\n                'adyen-checkout__field',\n                className,\n                classNameModifiers.map(m => `adyen-checkout__field--${m}`),\n                {\n                    'adyen-checkout__field--error': errorMessage,\n                    'adyen-checkout__field--valid': isValid,\n                    'adyen-checkout__field--inactive': readOnly || disabled\n                }\n            )}\n        >\n            <LabelOrAlternative\n                onFocusField={onFocusField}\n                name={name}\n                disabled={disabled}\n                filled={filled}\n                focused={focused}\n                useLabelElement={useLabelElement}\n                uniqueId={uniqueId.current}\n                isSecuredField={!contextVisibleToSR}\n                renderAlternativeToLabel={renderAlternativeToLabel}\n            >\n                {renderLabelOrAlternativeContents()}\n            </LabelOrAlternative>\n            {renderInputRelatedElements()}\n        </div>\n    );\n};\n\nField.defaultProps = {\n    className: '',\n    classNameModifiers: [],\n    inputWrapperModifiers: [],\n    useLabelElement: true,\n    showErrorElement: true,\n    showContextualElement: true,\n    renderAlternativeToLabel: () => null\n};\n\nexport default Field;\n"],"names":["Field","props","children","className","classNameModifiers","dir","disabled","readOnly","errorMessage","helper","inputWrapperModifiers","isLoading","isValid","label","labelEndAdornment","name","onBlur","onFieldBlur","onFocus","onFocusField","showValidIcon","useLabelElement","showErrorElement","showContextualElement","contextualText","filled","propsFilled","focused","propsFocused","i18n","contextVisibleToScreenReader","renderAlternativeToLabel","contextVisibleToSR","showError","length","showContext","uniqueId","useRef","getUniqueId","setFocused","useState","setFilled","onFocusHandler","useCallback","event","onBlurHandler","renderLabelOrAlternativeContents","h","Fragment","span","classNames","data-id","renderInputRelatedElements","errorElem","id","current","ARIA_ERROR_SUFFIX","aria-hidden","contextualElem","ARIA_CONTEXT_SUFFIX","div","map","m","toChildArray","child","childProps","isInvalid","cloneElement","Spinner","size","Icon","type","PREFIX","alt","get","LabelOrAlternative","isSecuredField","defaultWrapperProps","onClick","htmlFor","defaultProps"],"mappings":"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"}
+{"version":3,"file":"Field.js","sources":["../../../../../../src/components/internal/FormFields/Field/Field.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { cloneElement, ComponentChild, Fragment, FunctionalComponent, h, toChildArray, VNode } from 'preact';\nimport Spinner from '../../Spinner';\nimport Icon from '../../Icon';\nimport { ARIA_CONTEXT_SUFFIX, ARIA_ERROR_SUFFIX } from '../../../../core/Errors/constants';\nimport { useCallback, useRef, useState } from 'preact/hooks';\nimport { getUniqueId } from '../../../../utils/idGenerator';\nimport { FieldProps } from './types';\nimport './Field.scss';\nimport { PREFIX } from '../../Icon/constants';\n\nconst Field: FunctionalComponent<FieldProps> = props => {\n    //\n    const {\n        children,\n        className,\n        classNameModifiers,\n        dir,\n        disabled,\n        readOnly,\n        errorMessage,\n        helper,\n        inputWrapperModifiers,\n        isLoading,\n        isValid,\n        label,\n        labelEndAdornment,\n        name,\n        onBlur,\n        onFieldBlur,\n        onFocus,\n        // onFocusField is a securedField related function that allows a label click to set focus on a securedField (equates to CardInput setFocusOn)\n        // TODO should rename it to make its purpose clear => setFocusOnSecuredField\n        onFocusField,\n        showValidIcon,\n        useLabelElement,\n        showErrorElement,\n        showContextualElement,\n        contextualText,\n        // Redeclare prop names to avoid internal clashes\n        filled: propsFilled,\n        focused: propsFocused,\n        i18n,\n        contextVisibleToScreenReader,\n        renderAlternativeToLabel\n    } = props;\n\n    // Controls whether any error element has an aria-hidden=\"true\" attr (which means it is the error for a securedField)\n    // or whether it has an id attr that can be pointed to by an aria-describedby attr on an input element\n    const contextVisibleToSR = contextVisibleToScreenReader ?? true;\n    const showError = showErrorElement && typeof errorMessage === 'string' && errorMessage.length > 0;\n    const showContext = showContextualElement && !showError && contextualText?.length > 0;\n\n    const uniqueId = useRef(getUniqueId(`adyen-checkout-${name}`));\n    const [focused, setFocused] = useState(false);\n    const [filled, setFilled] = useState(false);\n\n    // The means by which focussed/filled is set for securedFields\n    if (propsFocused != null) setFocused(!!propsFocused);\n    if (propsFilled != null) setFilled(!!propsFilled);\n\n    // The means by which focussed/filled is set for other fields - this function is passed down to them and triggered\n    const onFocusHandler = useCallback(\n        (event: h.JSX.TargetedEvent<HTMLInputElement>) => {\n            setFocused(true);\n            onFocus?.(event);\n        },\n        [onFocus]\n    );\n\n    const onBlurHandler = useCallback(\n        (event: h.JSX.TargetedEvent<HTMLInputElement>) => {\n            setFocused(false);\n            onBlur?.(event);\n            // When we also need to fire a specific function when a field blurs // TODO - what is the use case?\n            onFieldBlur?.(event);\n        },\n        [onBlur, onFieldBlur]\n    );\n\n    const renderLabelOrAlternativeContents = useCallback(() => {\n        return (\n            <Fragment>\n                {typeof label === 'string' && (\n                    <span\n                        className={classNames({\n                            'adyen-checkout__label__text': true,\n                            'adyen-checkout__label__text--error': errorMessage\n                        })}\n                        data-id={name}\n                    >\n                        {label}\n                    </span>\n                )}\n\n                {/*TODO - in what scenario is label a function? */}\n                {/*@ts-ignore - function is callable*/}\n                {typeof label === 'function' && label()}\n\n                {labelEndAdornment && <span className=\"adyen-checkout__label-adornment--end\">{labelEndAdornment}</span>}\n\n                {helper && <span className={'adyen-checkout__helper-text'}>{helper}</span>}\n            </Fragment>\n        );\n    }, [label, errorMessage, labelEndAdornment, helper]);\n\n    const renderInputRelatedElements = useCallback(() => {\n        const errorElem = (\n            <span\n                className={classNames({ 'adyen-checkout-contextual-text--error': true, 'adyen-checkout-contextual-text--hidden': !showError })}\n                {...(contextVisibleToSR && { id: `${uniqueId.current}${ARIA_ERROR_SUFFIX}` })}\n                aria-hidden={contextVisibleToSR ? null : 'true'}\n            >\n                {errorMessage}\n            </span>\n        );\n        const contextualElem = (\n            <span\n                className={classNames({ 'adyen-checkout-contextual-text': true, 'adyen-checkout-contextual-text--hidden': !showContext })}\n                {...(contextVisibleToSR && { id: `${uniqueId.current}${ARIA_CONTEXT_SUFFIX}` })}\n                aria-hidden={contextVisibleToSR ? null : 'true'}\n            >\n                {contextualText}\n            </span>\n        );\n\n        return (\n            <Fragment>\n                <div\n                    className={classNames([\n                        'adyen-checkout__input-wrapper',\n                        ...inputWrapperModifiers.map(m => `adyen-checkout__input-wrapper--${m}`)\n                    ])}\n                    dir={dir}\n                >\n                    {toChildArray(children).map((child: ComponentChild): ComponentChild => {\n                        const childProps = {\n                            isValid,\n                            onFocusHandler,\n                            onBlurHandler,\n                            isInvalid: !!errorMessage,\n                            ...(name && { uniqueId: uniqueId.current }),\n                            showErrorElement: showErrorElement\n                        };\n                        return cloneElement(child as VNode, childProps);\n                    })}\n\n                    {isLoading && (\n                        <span className=\"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--loading\">\n                            <Spinner size=\"small\" />\n                        </span>\n                    )}\n\n                    {isValid && showValidIcon !== false && (\n                        <span className=\"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--valid\">\n                            <Icon type={`${PREFIX}checkmark`} alt={i18n?.get('field.valid')} />\n                        </span>\n                    )}\n\n                    {errorMessage && (\n                        <span className=\"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--invalid\">\n                            <Icon type={`${PREFIX}field_error`} alt={i18n?.get('error.title')} />\n                        </span>\n                    )}\n                </div>\n                {errorElem}\n                {contextualElem}\n            </Fragment>\n        );\n    }, [children, errorMessage, contextualText, isLoading, isValid, onFocusHandler, onBlurHandler]);\n\n    /**\n     * Use cases:\n     * - Not all form controls want/need a label e.g. many checkboxes describe what they are in their own markup and don't need the wrapping Field to also generate a labelling element\n     * - securedFields *can't* have a label (screen-reader's can make the association, over different browser contexts, between the label and the input)\n     */\n    const LabelOrAlternative = useCallback(\n        ({ onFocusField, focused, filled, disabled, name, uniqueId, useLabelElement, isSecuredField, children, renderAlternativeToLabel }) => {\n            const defaultWrapperProps = {\n                onClick: onFocusField,\n                className: classNames({\n                    'adyen-checkout__label': true,\n                    'adyen-checkout__label--focused': focused,\n                    'adyen-checkout__label--filled': filled,\n                    'adyen-checkout__label--disabled': disabled\n                })\n            };\n\n            return useLabelElement ? (\n                // if we are NOT dealing with the label for a securedField... we can give it a `for` attribute\n                <label {...defaultWrapperProps} {...(!isSecuredField && name && { htmlFor: uniqueId })}>\n                    {children}\n                </label>\n            ) : (\n                renderAlternativeToLabel(defaultWrapperProps, children, uniqueId) // defaults to null\n\n                // Example usage:\n                // const alternativeLabelContent = (defaultWrapperProps, children, uniqueId) => {\n                //     return (\n                //         <div {...defaultWrapperProps} role={'label'} htmlFor={uniqueId}>\n                //             {children}\n                //         </div>\n                //     );\n                // };\n                // <Field name={'myField'} useLabelElement={false} renderAlternativeToLabel={alternativeLabelContent}>\n            );\n        },\n        []\n    );\n\n    /**\n     * RENDER\n     */\n    return (\n        <div\n            className={classNames(\n                'adyen-checkout__field',\n                className,\n                classNameModifiers.map(m => `adyen-checkout__field--${m}`),\n                {\n                    'adyen-checkout__field--error': errorMessage,\n                    'adyen-checkout__field--valid': isValid,\n                    'adyen-checkout__field--inactive': readOnly || disabled\n                }\n            )}\n        >\n            <LabelOrAlternative\n                onFocusField={onFocusField}\n                name={name}\n                disabled={disabled}\n                filled={filled}\n                focused={focused}\n                useLabelElement={useLabelElement}\n                uniqueId={uniqueId.current}\n                isSecuredField={!contextVisibleToSR}\n                renderAlternativeToLabel={renderAlternativeToLabel}\n            >\n                {renderLabelOrAlternativeContents()}\n            </LabelOrAlternative>\n            {renderInputRelatedElements()}\n        </div>\n    );\n};\n\nField.defaultProps = {\n    className: '',\n    classNameModifiers: [],\n    inputWrapperModifiers: [],\n    useLabelElement: true,\n    showErrorElement: true,\n    showContextualElement: true,\n    renderAlternativeToLabel: () => null\n};\n\nexport default Field;\n"],"names":["Field","props","children","className","classNameModifiers","dir","disabled","readOnly","errorMessage","helper","inputWrapperModifiers","isLoading","isValid","label","labelEndAdornment","name","onBlur","onFieldBlur","onFocus","onFocusField","showValidIcon","useLabelElement","showErrorElement","showContextualElement","contextualText","filled","propsFilled","focused","propsFocused","i18n","contextVisibleToScreenReader","renderAlternativeToLabel","contextVisibleToSR","showError","length","showContext","uniqueId","useRef","getUniqueId","setFocused","useState","setFilled","onFocusHandler","useCallback","event","onBlurHandler","renderLabelOrAlternativeContents","h","Fragment","span","classNames","data-id","renderInputRelatedElements","errorElem","id","current","ARIA_ERROR_SUFFIX","aria-hidden","contextualElem","ARIA_CONTEXT_SUFFIX","div","map","m","toChildArray","child","childProps","isInvalid","cloneElement","Spinner","size","Icon","type","PREFIX","alt","get","LabelOrAlternative","isSecuredField","defaultWrapperProps","onClick","htmlFor","defaultProps"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Fieldset.js","sources":["../../../../../../src/components/internal/FormFields/Fieldset/Fieldset.tsx"],"sourcesContent":["import { h, ComponentChildren } from 'preact';\nimport cx from 'classnames';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport './Fieldset.scss';\n\ninterface FieldsetProps {\n    children: ComponentChildren;\n    classNameModifiers: string[];\n    label?: string;\n    readonly?: boolean;\n}\n\nexport default function Fieldset({ children, classNameModifiers = [], label, readonly = false }: FieldsetProps) {\n    const { i18n } = useCoreContext();\n\n    return (\n        <fieldset\n            className={cx([\n                'adyen-checkout__fieldset',\n                ...classNameModifiers.map(m => `adyen-checkout__fieldset--${m}`),\n                { 'adyen-checkout__fieldset--readonly': readonly }\n            ])}\n        >\n            {label && <legend className=\"adyen-checkout__fieldset__title\">{i18n.get(label)}</legend>}\n\n            <div className=\"adyen-checkout__fieldset__fields\">{children}</div>\n        </fieldset>\n    );\n}\n"],"names":["Fieldset","children","classNameModifiers","label","readonly","i18n","useCoreContext","h","fieldset","className","cx","map","m","legend","get","div"],"mappings":"6MAYe,SAASA,GAASC,SAAEA,EAAQC,mBAAEA,EAAqB,GAAEC,MAAEA,EAAKC,SAAEA,GAAW,IACpF,MAAMC,KAAEA,GAASC,IAEjB,OACIC,EAACC,WAAAA,CACGC,UAAWC,EAAG,CACV,8BACGR,EAAmBS,KAAIC,GAAK,6BAA6BA,MAC5D,CAAE,qCAAsCR,MAG3CD,GAASI,EAACM,SAAAA,CAAOJ,UAAU,mCAAmCJ,EAAKS,IAAIX,IAExEI,EAACQ,MAAAA,CAAIN,UAAU,oCAAoCR,GAG/D"}
+{"version":3,"file":"Fieldset.js","sources":["../../../../../../src/components/internal/FormFields/Fieldset/Fieldset.tsx"],"sourcesContent":["import { h, ComponentChildren } from 'preact';\nimport cx from 'classnames';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport './Fieldset.scss';\nimport { getUniqueId } from '../../../../utils/idGenerator';\n\ninterface FieldsetProps {\n    children: ComponentChildren;\n    classNameModifiers: string[];\n    label?: string;\n    description?: string;\n    readonly?: boolean;\n}\n\nexport default function Fieldset({ children, classNameModifiers = [], label, readonly = false, description }: FieldsetProps) {\n    const { i18n } = useCoreContext();\n\n    const describedById = getUniqueId('payid-input-description');\n\n    return (\n        <fieldset\n            className={cx([\n                'adyen-checkout__fieldset',\n                ...classNameModifiers.map(m => `adyen-checkout__fieldset--${m}`),\n                { 'adyen-checkout__fieldset--readonly': readonly }\n            ])}\n            aria-describedby={description ? describedById : null}\n        >\n            {label && <legend className=\"adyen-checkout__fieldset__title\">{i18n.get(label)}</legend>}\n            {description && (\n                <p id={describedById} className=\"adyen-checkout__fieldset__description\">\n                    {i18n.get(description)}\n                </p>\n            )}\n            <div className=\"adyen-checkout__fieldset__fields\">{children}</div>\n        </fieldset>\n    );\n}\n"],"names":["Fieldset","children","classNameModifiers","label","readonly","description","i18n","useCoreContext","describedById","getUniqueId","h","fieldset","className","cx","map","m","aria-describedby","legend","get","p","id","div"],"mappings":"iQAce,SAASA,GAASC,SAAEA,EAAQC,mBAAEA,EAAqB,GAAEC,MAAEA,EAAKC,SAAEA,GAAW,EAAKC,YAAEA,IAC3F,MAAMC,KAAEA,GAASC,IAEXC,EAAgBC,EAAY,2BAElC,OACIC,EAACC,WAAAA,CACGC,UAAWC,EAAG,CACV,8BACGX,EAAmBY,KAAIC,GAAK,6BAA6BA,MAC5D,CAAE,qCAAsCX,KAE5CY,mBAAkBX,EAAcG,EAAgB,MAE/CL,GAASO,EAACO,SAAAA,CAAOL,UAAU,mCAAmCN,EAAKY,IAAIf,IACvEE,GACGK,EAACS,IAAAA,CAAEC,GAAIZ,EAAeI,UAAU,yCAC3BN,EAAKY,IAAIb,IAGlBK,EAACW,MAAAA,CAAIT,UAAU,oCAAoCX,GAG/D"}

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

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../external/preact/dist/preact.js";import{useCallback as n}from"../../../external/preact/hooks/dist/hooks.js";import r from"../../../external/classnames/index.js";import{ARIA_ERROR_SUFFIX as a,ARIA_CONTEXT_SUFFIX as o}from"../../../core/Errors/constants.js";function t({setRef:t,...s}){const{autoCorrect:l,classNameModifiers:i,isInvalid:u,isValid:d,readonly:c=null,spellCheck:p,type:y,uniqueId:m,disabled:h}=s,f=s.className;Object.prototype.hasOwnProperty.call(s,"onChange")&&console.error("Error: Form fields that rely on InputBase may not have an onChange property");const k=n((e=>{s.onInput(e)}),[s.onInput]),_=n((e=>{s?.onKeyPress&&s.onKeyPress(e)}),[s?.onKeyPress]),v=n((e=>{s?.onKeyUp&&s.onKeyUp(e)}),[s?.onKeyUp]),C=n((e=>{s?.onBlurHandler?.(e),s.trimOnBlur&&(e.target.value=e.target.value.trim()),s?.onBlur?.(e)}),[s.onBlur,s.onBlurHandler]),I=n((e=>{s?.onFocusHandler?.(e)}),[s.onFocusHandler]),K=r("adyen-checkout__input",[`adyen-checkout__input--${y}`],f,{"adyen-checkout__input--invalid":u,"adyen-checkout__input--valid":d},i.map((e=>`adyen-checkout__input--${e}`))),{classNameModifiers:x,uniqueId:B,isInvalid:b,isValid:P,addContextualElement:j,...N}=s;return e("input",{id:m,...N,"aria-required":N.required,type:y,className:K,readOnly:c,spellCheck:p,autoCorrect:l,"aria-describedby":`${m}${u?a:o}`,"aria-invalid":u,onInput:k,onBlur:C,onFocus:I,onKeyUp:v,onKeyPress:_,disabled:h,ref:t})}t.defaultProps={type:"text",classNameModifiers:[]};export{t as default};
+import{createElement as e}from"../../../external/preact/dist/preact.js";import{useCallback as r}from"../../../external/preact/hooks/dist/hooks.js";import n from"../../../_virtual/index.js";import{ARIA_ERROR_SUFFIX as a,ARIA_CONTEXT_SUFFIX as o}from"../../../core/Errors/constants.js";function t({setRef:t,...s}){const{autoCorrect:l,classNameModifiers:i,isInvalid:u,isValid:d,readonly:c=null,spellCheck:p,type:y,uniqueId:m,disabled:h}=s,f=s.className;Object.prototype.hasOwnProperty.call(s,"onChange")&&console.error("Error: Form fields that rely on InputBase may not have an onChange property");const _=r((e=>{s.onInput(e)}),[s.onInput]),k=r((e=>{s?.onKeyPress&&s.onKeyPress(e)}),[s?.onKeyPress]),v=r((e=>{s?.onKeyUp&&s.onKeyUp(e)}),[s?.onKeyUp]),C=r((e=>{s?.onBlurHandler?.(e),s.trimOnBlur&&(e.target.value=e.target.value.trim()),s?.onBlur?.(e)}),[s.onBlur,s.onBlurHandler]),I=r((e=>{s?.onFocusHandler?.(e)}),[s.onFocusHandler]),K=n("adyen-checkout__input",[`adyen-checkout__input--${y}`],f,{"adyen-checkout__input--invalid":u,"adyen-checkout__input--valid":d},i.map((e=>`adyen-checkout__input--${e}`))),{classNameModifiers:B,uniqueId:b,isInvalid:x,isValid:P,addContextualElement:j,...N}=s;return e("input",{id:m,...N,"aria-required":N.required,type:y,className:K,readOnly:c,spellCheck:p,autoCorrect:l,"aria-describedby":`${m}${u?a:o}`,"aria-invalid":u,onInput:_,onBlur:C,onFocus:I,onKeyUp:v,onKeyPress:k,disabled:h,ref:t})}t.defaultProps={type:"text",classNameModifiers:[]};export{t as default};
 //# sourceMappingURL=InputBase.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InputBase.js","sources":["../../../../../src/components/internal/FormFields/InputBase.tsx"],"sourcesContent":["import { h, RefCallback } from 'preact';\nimport { useCallback } from 'preact/hooks';\nimport classNames from 'classnames';\nimport { ARIA_CONTEXT_SUFFIX, ARIA_ERROR_SUFFIX } from '../../../core/Errors/constants';\nimport Language from '../../../language';\nimport './FormFields.scss';\n\nexport interface InputBaseProps extends h.JSX.HTMLAttributes {\n    classNameModifiers?: string[];\n    isInvalid?: boolean;\n    isValid?: boolean;\n    readonly?: boolean;\n    uniqueId?: string;\n    disabled?: boolean;\n    className?: string;\n    placeholder?: string;\n    value?: string;\n    name?: string;\n    checked?: boolean;\n    setRef?: RefCallback<HTMLInputElement>;\n    trimOnBlur?: boolean;\n    i18n?: Language;\n    label?: string;\n    onBlurHandler?: h.JSX.GenericEventHandler<HTMLInputElement>;\n    onFocusHandler?: h.JSX.GenericEventHandler<HTMLInputElement>;\n    maxlength?: number | null;\n    addContextualElement?: boolean;\n    type?: string;\n}\n\nexport default function InputBase({ setRef, ...props }: InputBaseProps) {\n    const { autoCorrect, classNameModifiers, isInvalid, isValid, readonly = null, spellCheck, type, uniqueId, disabled } = props;\n    const className = props.className;\n\n    /**\n     * To avoid confusion with misplaced/misdirected onChange handlers - InputBase only accepts onInput, onBlur & onFocus handlers.\n     * The first 2 being the means by which we expect useForm--handleChangeFor validation functionality to be applied.\n     */\n    if (Object.prototype.hasOwnProperty.call(props, 'onChange')) {\n        console.error('Error: Form fields that rely on InputBase may not have an onChange property');\n    }\n\n    const handleInput = useCallback(\n        (event: h.JSX.TargetedInputEvent<HTMLInputElement>) => {\n            props.onInput(event);\n        },\n        [props.onInput]\n    );\n\n    /**\n     *  Event is fired when a key that produces a character value is pressed down.\n     *  ENTER keypress also triggers this event.\n     *\n     *  TODO: 'keypress' event is deprecated\n     *  https://developer.mozilla.org/en-US/docs/Web/API/Element/keypress_event\n     */\n    const handleKeyPress = useCallback(\n        (event: h.JSX.TargetedKeyboardEvent<HTMLInputElement>) => {\n            if (props?.onKeyPress) props.onKeyPress(event);\n        },\n        [props?.onKeyPress]\n    );\n\n    /**\n     * Event is fired when certain keys are pressed (keys that do not output characters):\n     * Backspace, Arrow keys, Shift, Ctrl, Command, Option, Esc\n     *\n     * Exception: ENTER keypress triggers 'onKeyPress' AND 'onKeyUp'\n     */\n    const handleKeyUp = useCallback(\n        (event: h.JSX.TargetedKeyboardEvent<HTMLInputElement>) => {\n            if (props?.onKeyUp) props.onKeyUp(event);\n        },\n        [props?.onKeyUp]\n    );\n\n    const handleBlur = useCallback(\n        (event: h.JSX.TargetedFocusEvent<HTMLInputElement>) => {\n            props?.onBlurHandler?.(event); // From Field component\n\n            if (props.trimOnBlur) {\n                (event.target as HTMLInputElement).value = (event.target as HTMLInputElement).value.trim(); // needed to trim trailing spaces in field (leading spaces can be done via formatting)\n            }\n\n            props?.onBlur?.(event);\n        },\n        [props.onBlur, props.onBlurHandler]\n    );\n\n    const handleFocus = useCallback(\n        (event: h.JSX.TargetedEvent<HTMLInputElement>) => {\n            props?.onFocusHandler?.(event); // From Field component\n        },\n        [props.onFocusHandler]\n    );\n\n    const inputClassNames = classNames(\n        'adyen-checkout__input',\n        [`adyen-checkout__input--${type}`],\n        className,\n        {\n            'adyen-checkout__input--invalid': isInvalid,\n            'adyen-checkout__input--valid': isValid\n        },\n        classNameModifiers.map(m => `adyen-checkout__input--${m}`)\n    );\n\n    // Don't spread classNameModifiers etc to input element (it ends up as an attribute on the element itself)\n    const { classNameModifiers: cnm, uniqueId: uid, isInvalid: iiv, isValid: iv, addContextualElement: ace, ...newProps } = props;\n\n    return (\n        <input\n            id={uniqueId}\n            {...newProps}\n            aria-required={newProps.required}\n            type={type}\n            className={inputClassNames}\n            readOnly={readonly}\n            spellCheck={spellCheck}\n            autoCorrect={autoCorrect}\n            aria-describedby={`${uniqueId}${isInvalid ? ARIA_ERROR_SUFFIX : ARIA_CONTEXT_SUFFIX}`}\n            aria-invalid={isInvalid}\n            onInput={handleInput}\n            onBlur={handleBlur}\n            onFocus={handleFocus}\n            onKeyUp={handleKeyUp}\n            onKeyPress={handleKeyPress}\n            disabled={disabled}\n            ref={setRef}\n        />\n    );\n}\n\nInputBase.defaultProps = {\n    type: 'text',\n    classNameModifiers: []\n};\n"],"names":["InputBase","setRef","props","autoCorrect","classNameModifiers","isInvalid","isValid","readonly","spellCheck","type","uniqueId","disabled","className","Object","prototype","hasOwnProperty","call","console","error","handleInput","useCallback","event","onInput","handleKeyPress","onKeyPress","handleKeyUp","onKeyUp","handleBlur","onBlurHandler","trimOnBlur","target","value","trim","onBlur","handleFocus","onFocusHandler","inputClassNames","classNames","map","m","cnm","uid","iiv","iv","addContextualElement","ace","newProps","h","input","id","aria-required","required","readOnly","aria-describedby","ARIA_ERROR_SUFFIX","ARIA_CONTEXT_SUFFIX","aria-invalid","onFocus","ref","defaultProps"],"mappings":"uSA8Be,SAASA,GAAUC,OAAEA,KAAWC,IAC3C,MAAMC,YAAEA,EAAWC,mBAAEA,EAAkBC,UAAEA,EAASC,QAAEA,EAAOC,SAAEA,EAAW,KAAIC,WAAEA,EAAUC,KAAEA,EAAIC,SAAEA,EAAQC,SAAEA,GAAaT,EACjHU,EAAYV,EAAMU,UAMpBC,OAAOC,UAAUC,eAAeC,KAAKd,EAAO,aAC5Ce,QAAQC,MAAM,+EAGlB,MAAMC,EAAcC,GACfC,IACGnB,EAAMoB,QAAQD,EAAAA,GAElB,CAACnB,EAAMoB,UAULC,EAAiBH,GAClBC,IACOnB,GAAOsB,YAAYtB,EAAMsB,WAAWH,EAAAA,GAE5C,CAACnB,GAAOsB,aASNC,EAAcL,GACfC,IACOnB,GAAOwB,SAASxB,EAAMwB,QAAQL,EAAAA,GAEtC,CAACnB,GAAOwB,UAGNC,EAAaP,GACdC,IACGnB,GAAO0B,gBAAgBP,GAEnBnB,EAAM2B,aACLR,EAAMS,OAA4BC,MAAQV,EAAOS,OAA4BC,MAAMC,QAGxF9B,GAAO+B,SAASZ,EAAAA,GAEpB,CAACnB,EAAM+B,OAAQ/B,EAAM0B,gBAGnBM,EAAcd,GACfC,IACGnB,GAAOiC,iBAAiBd,KAE5B,CAACnB,EAAMiC,iBAGLC,EAAkBC,EACpB,wBACA,CAAC,0BAA0B5B,KAC3BG,EACA,CACI,iCAAkCP,EAClC,+BAAgCC,GAEpCF,EAAmBkC,KAAIC,GAAK,0BAA0BA,QAIlDnC,mBAAoBoC,EAAK9B,SAAU+B,EAAKpC,UAAWqC,EAAKpC,QAASqC,EAAIC,qBAAsBC,KAAQC,GAAa5C,EAExH,OACI6C,EAACC,QAAAA,CACGC,GAAIvC,KACAoC,EACJI,gBAAeJ,EAASK,SACxB1C,KAAMA,EACNG,UAAWwB,EACXgB,SAAU7C,EACVC,WAAYA,EACZL,YAAaA,EACbkD,mBAAkB,GAAG3C,IAAWL,EAAYiD,EAAoBC,IAChEC,eAAcnD,EACdiB,QAASH,EACTc,OAAQN,EACR8B,QAASvB,EACTR,QAASD,EACTD,WAAYD,EACZZ,SAAUA,EACV+C,IAAKzD,GAGjB,CAEAD,EAAU2D,aAAe,CACrBlD,KAAM,OACNL,mBAAoB"}
+{"version":3,"file":"InputBase.js","sources":["../../../../../src/components/internal/FormFields/InputBase.tsx"],"sourcesContent":["import { h, RefCallback } from 'preact';\nimport { useCallback } from 'preact/hooks';\nimport classNames from 'classnames';\nimport { ARIA_CONTEXT_SUFFIX, ARIA_ERROR_SUFFIX } from '../../../core/Errors/constants';\nimport Language from '../../../language';\nimport './FormFields.scss';\n\nexport interface InputBaseProps extends h.JSX.HTMLAttributes {\n    classNameModifiers?: string[];\n    isInvalid?: boolean;\n    isValid?: boolean;\n    readonly?: boolean;\n    uniqueId?: string;\n    disabled?: boolean;\n    className?: string;\n    placeholder?: string;\n    value?: string;\n    name?: string;\n    checked?: boolean;\n    setRef?: RefCallback<HTMLInputElement>;\n    trimOnBlur?: boolean;\n    i18n?: Language;\n    label?: string;\n    onBlurHandler?: h.JSX.GenericEventHandler<HTMLInputElement>;\n    onFocusHandler?: h.JSX.GenericEventHandler<HTMLInputElement>;\n    maxlength?: number | null;\n    addContextualElement?: boolean;\n    type?: string;\n}\n\nexport default function InputBase({ setRef, ...props }: InputBaseProps) {\n    const { autoCorrect, classNameModifiers, isInvalid, isValid, readonly = null, spellCheck, type, uniqueId, disabled } = props;\n    const className = props.className;\n\n    /**\n     * To avoid confusion with misplaced/misdirected onChange handlers - InputBase only accepts onInput, onBlur & onFocus handlers.\n     * The first 2 being the means by which we expect useForm--handleChangeFor validation functionality to be applied.\n     */\n    if (Object.prototype.hasOwnProperty.call(props, 'onChange')) {\n        console.error('Error: Form fields that rely on InputBase may not have an onChange property');\n    }\n\n    const handleInput = useCallback(\n        (event: h.JSX.TargetedInputEvent<HTMLInputElement>) => {\n            props.onInput(event);\n        },\n        [props.onInput]\n    );\n\n    /**\n     *  Event is fired when a key that produces a character value is pressed down.\n     *  ENTER keypress also triggers this event.\n     *\n     *  TODO: 'keypress' event is deprecated\n     *  https://developer.mozilla.org/en-US/docs/Web/API/Element/keypress_event\n     */\n    const handleKeyPress = useCallback(\n        (event: h.JSX.TargetedKeyboardEvent<HTMLInputElement>) => {\n            if (props?.onKeyPress) props.onKeyPress(event);\n        },\n        [props?.onKeyPress]\n    );\n\n    /**\n     * Event is fired when certain keys are pressed (keys that do not output characters):\n     * Backspace, Arrow keys, Shift, Ctrl, Command, Option, Esc\n     *\n     * Exception: ENTER keypress triggers 'onKeyPress' AND 'onKeyUp'\n     */\n    const handleKeyUp = useCallback(\n        (event: h.JSX.TargetedKeyboardEvent<HTMLInputElement>) => {\n            if (props?.onKeyUp) props.onKeyUp(event);\n        },\n        [props?.onKeyUp]\n    );\n\n    const handleBlur = useCallback(\n        (event: h.JSX.TargetedFocusEvent<HTMLInputElement>) => {\n            props?.onBlurHandler?.(event); // From Field component\n\n            if (props.trimOnBlur) {\n                (event.target as HTMLInputElement).value = (event.target as HTMLInputElement).value.trim(); // needed to trim trailing spaces in field (leading spaces can be done via formatting)\n            }\n\n            props?.onBlur?.(event);\n        },\n        [props.onBlur, props.onBlurHandler]\n    );\n\n    const handleFocus = useCallback(\n        (event: h.JSX.TargetedEvent<HTMLInputElement>) => {\n            props?.onFocusHandler?.(event); // From Field component\n        },\n        [props.onFocusHandler]\n    );\n\n    const inputClassNames = classNames(\n        'adyen-checkout__input',\n        [`adyen-checkout__input--${type}`],\n        className,\n        {\n            'adyen-checkout__input--invalid': isInvalid,\n            'adyen-checkout__input--valid': isValid\n        },\n        classNameModifiers.map(m => `adyen-checkout__input--${m}`)\n    );\n\n    // Don't spread classNameModifiers etc to input element (it ends up as an attribute on the element itself)\n    const { classNameModifiers: cnm, uniqueId: uid, isInvalid: iiv, isValid: iv, addContextualElement: ace, ...newProps } = props;\n\n    return (\n        <input\n            id={uniqueId}\n            {...newProps}\n            aria-required={newProps.required}\n            type={type}\n            className={inputClassNames}\n            readOnly={readonly}\n            spellCheck={spellCheck}\n            autoCorrect={autoCorrect}\n            aria-describedby={`${uniqueId}${isInvalid ? ARIA_ERROR_SUFFIX : ARIA_CONTEXT_SUFFIX}`}\n            aria-invalid={isInvalid}\n            onInput={handleInput}\n            onBlur={handleBlur}\n            onFocus={handleFocus}\n            onKeyUp={handleKeyUp}\n            onKeyPress={handleKeyPress}\n            disabled={disabled}\n            ref={setRef}\n        />\n    );\n}\n\nInputBase.defaultProps = {\n    type: 'text',\n    classNameModifiers: []\n};\n"],"names":["InputBase","setRef","props","autoCorrect","classNameModifiers","isInvalid","isValid","readonly","spellCheck","type","uniqueId","disabled","className","Object","prototype","hasOwnProperty","call","console","error","handleInput","useCallback","event","onInput","handleKeyPress","onKeyPress","handleKeyUp","onKeyUp","handleBlur","onBlurHandler","trimOnBlur","target","value","trim","onBlur","handleFocus","onFocusHandler","inputClassNames","classNames","map","m","cnm","uid","iiv","iv","addContextualElement","ace","newProps","h","input","id","aria-required","required","readOnly","aria-describedby","ARIA_ERROR_SUFFIX","ARIA_CONTEXT_SUFFIX","aria-invalid","onFocus","ref","defaultProps"],"mappings":"4RA8Be,SAASA,GAAUC,OAAEA,KAAWC,IAC3C,MAAMC,YAAEA,EAAWC,mBAAEA,EAAkBC,UAAEA,EAASC,QAAEA,EAAOC,SAAEA,EAAW,KAAIC,WAAEA,EAAUC,KAAEA,EAAIC,SAAEA,EAAQC,SAAEA,GAAaT,EACjHU,EAAYV,EAAMU,UAMpBC,OAAOC,UAAUC,eAAeC,KAAKd,EAAO,aAC5Ce,QAAQC,MAAM,+EAGlB,MAAMC,EAAcC,GACfC,IACGnB,EAAMoB,QAAQD,EAAAA,GAElB,CAACnB,EAAMoB,UAULC,EAAiBH,GAClBC,IACOnB,GAAOsB,YAAYtB,EAAMsB,WAAWH,EAAAA,GAE5C,CAACnB,GAAOsB,aASNC,EAAcL,GACfC,IACOnB,GAAOwB,SAASxB,EAAMwB,QAAQL,EAAAA,GAEtC,CAACnB,GAAOwB,UAGNC,EAAaP,GACdC,IACGnB,GAAO0B,gBAAgBP,GAEnBnB,EAAM2B,aACLR,EAAMS,OAA4BC,MAAQV,EAAOS,OAA4BC,MAAMC,QAGxF9B,GAAO+B,SAASZ,EAAAA,GAEpB,CAACnB,EAAM+B,OAAQ/B,EAAM0B,gBAGnBM,EAAcd,GACfC,IACGnB,GAAOiC,iBAAiBd,KAE5B,CAACnB,EAAMiC,iBAGLC,EAAkBC,EACpB,wBACA,CAAC,0BAA0B5B,KAC3BG,EACA,CACI,iCAAkCP,EAClC,+BAAgCC,GAEpCF,EAAmBkC,KAAIC,GAAK,0BAA0BA,QAIlDnC,mBAAoBoC,EAAK9B,SAAU+B,EAAKpC,UAAWqC,EAAKpC,QAASqC,EAAIC,qBAAsBC,KAAQC,GAAa5C,EAExH,OACI6C,EAACC,QAAAA,CACGC,GAAIvC,KACAoC,EACJI,gBAAeJ,EAASK,SACxB1C,KAAMA,EACNG,UAAWwB,EACXgB,SAAU7C,EACVC,WAAYA,EACZL,YAAaA,EACbkD,mBAAkB,GAAG3C,IAAWL,EAAYiD,EAAoBC,IAChEC,eAAcnD,EACdiB,QAASH,EACTc,OAAQN,EACR8B,QAASvB,EACTR,QAASD,EACTD,WAAYD,EACZZ,SAAUA,EACV+C,IAAKzD,GAGjB,CAEAD,EAAU2D,aAAe,CACrBlD,KAAM,OACNL,mBAAoB"}

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

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../external/preact/dist/preact.js";import a from"../../../../external/classnames/index.js";import{getUniqueId as r}from"../../../../utils/idGenerator.js";import{useCoreContext as o}from"../../../../core/Context/CoreProvider.js";function t(t){const{items:i,name:n,onChange:l,value:c,isInvalid:s,uniqueId:d,ariaLabel:_,style:u="classic"}=t,{i18n:p}=o(),m=d?.replace(/[0-9]/g,"").substring(0,d.lastIndexOf("-"));return e("div",{className:a(["adyen-checkout__radio_group",`adyen-checkout__radio_group--${u}`]),role:"radiogroup",..._&&{"aria-label":_}},i.map((o=>{const i=r(m);return e("div",{key:o.id,className:"adyen-checkout__radio_group__input-wrapper"},e("input",{id:i,type:"radio",checked:c===o.id,className:"adyen-checkout__radio_group__input",name:n,onChange:l,onClick:l,value:o.id}),e("label",{className:a(["adyen-checkout__label__text","adyen-checkout__radio_group__label",t.className,{"adyen-checkout__radio_group__label--invalid":s}]),htmlFor:i},p.get(o.name)))})))}t.defaultProps={onChange:()=>{},items:[]};export{t as default};
+import{createElement as e}from"../../../../external/preact/dist/preact.js";import a from"../../../../_virtual/index.js";import{getUniqueId as r}from"../../../../utils/idGenerator.js";import{useCoreContext as o}from"../../../../core/Context/CoreProvider.js";function t(t){const{items:i,name:n,onChange:l,value:c,isInvalid:d,uniqueId:_,ariaLabel:s,style:u="classic"}=t,{i18n:p}=o(),m=_?.replace(/[0-9]/g,"").substring(0,_.lastIndexOf("-"));return e("div",{className:a(["adyen-checkout__radio_group",`adyen-checkout__radio_group--${u}`]),role:"radiogroup",...s&&{"aria-label":s}},i.map((o=>{const i=r(m);return e("div",{key:o.id,className:"adyen-checkout__radio_group__input-wrapper"},e("input",{id:i,type:"radio",checked:c===o.id,className:"adyen-checkout__radio_group__input",name:n,onChange:l,onClick:l,value:o.id}),e("label",{className:a(["adyen-checkout__label__text","adyen-checkout__radio_group__label",t.className,{"adyen-checkout__radio_group__label--invalid":d}]),htmlFor:i},p.get(o.name)))})))}t.defaultProps={onChange:()=>{},items:[]};export{t as default};
 //# sourceMappingURL=RadioGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sources":["../../../../../../src/components/internal/FormFields/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { h } from 'preact';\nimport cx from 'classnames';\nimport './RadioGroup.scss';\nimport { RadioGroupProps } from './types';\nimport { getUniqueId } from '../../../../utils/idGenerator';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\n\nexport default function RadioGroup(props: RadioGroupProps) {\n    const { items, name, onChange, value, isInvalid, uniqueId, ariaLabel, style = 'classic' } = props;\n\n    const { i18n } = useCoreContext();\n    const uniqueIdBase = uniqueId?.replace(/[0-9]/g, '').substring(0, uniqueId.lastIndexOf('-'));\n\n    return (\n        <div\n            className={cx(['adyen-checkout__radio_group', `adyen-checkout__radio_group--${style}`])}\n            role={'radiogroup'}\n            {...(ariaLabel && { ['aria-label']: ariaLabel })}\n        >\n            {items.map(item => {\n                const uniqueId = getUniqueId(uniqueIdBase);\n                return (\n                    <div key={item.id} className=\"adyen-checkout__radio_group__input-wrapper\">\n                        <input\n                            id={uniqueId}\n                            type=\"radio\"\n                            checked={value === item.id}\n                            className=\"adyen-checkout__radio_group__input\"\n                            name={name}\n                            onChange={onChange}\n                            onClick={onChange}\n                            value={item.id}\n                        />\n                        <label\n                            className={cx([\n                                'adyen-checkout__label__text',\n                                'adyen-checkout__radio_group__label',\n                                props.className,\n                                { 'adyen-checkout__radio_group__label--invalid': isInvalid }\n                            ])}\n                            htmlFor={uniqueId}\n                        >\n                            {i18n.get(item.name)}\n                        </label>\n                    </div>\n                );\n            })}\n        </div>\n    );\n}\n\nRadioGroup.defaultProps = {\n    onChange: () => {},\n    items: []\n};\n"],"names":["RadioGroup","props","items","name","onChange","value","isInvalid","uniqueId","ariaLabel","style","i18n","useCoreContext","uniqueIdBase","replace","substring","lastIndexOf","h","div","className","cx","role","map","item","getUniqueId","key","id","input","type","checked","onClick","label","htmlFor","get","defaultProps"],"mappings":"4QAOe,SAASA,EAAWC,GAC/B,MAAMC,MAAEA,EAAKC,KAAEA,EAAIC,SAAEA,EAAQC,MAAEA,EAAKC,UAAEA,EAASC,SAAEA,EAAQC,UAAEA,EAASC,MAAEA,EAAQ,WAAcR,GAEtFS,KAAEA,GAASC,IACXC,EAAeL,GAAUM,QAAQ,SAAU,IAAIC,UAAU,EAAGP,EAASQ,YAAY,MAEvF,OACIC,EAACC,MAAAA,CACGC,UAAWC,EAAG,CAAC,8BAA+B,gCAAgCV,MAC9EW,KAAM,gBACDZ,GAAa,CAAE,aAAgBA,IAEnCN,EAAMmB,KAAIC,IACP,MAAMf,EAAWgB,EAAYX,GAC7B,OACII,EAACC,MAAAA,CAAIO,IAAKF,EAAKG,GAAIP,UAAU,8CACzBF,EAACU,QAAAA,CACGD,GAAIlB,EACJoB,KAAK,QACLC,QAASvB,IAAUiB,EAAKG,GACxBP,UAAU,qCACVf,KAAMA,EACNC,SAAUA,EACVyB,QAASzB,EACTC,MAAOiB,EAAKG,KAEhBT,EAACc,QAAAA,CACGZ,UAAWC,EAAG,CACV,8BACA,qCACAlB,EAAMiB,UACN,CAAE,8CAA+CZ,KAErDyB,QAASxB,GAERG,EAAKsB,IAAIV,EAAKnB,OAAI,IAO/C,CAEAH,EAAWiC,aAAe,CACtB7B,SAAU,OACVF,MAAO"}
+{"version":3,"file":"RadioGroup.js","sources":["../../../../../../src/components/internal/FormFields/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { h } from 'preact';\nimport cx from 'classnames';\nimport './RadioGroup.scss';\nimport { RadioGroupProps } from './types';\nimport { getUniqueId } from '../../../../utils/idGenerator';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\n\nexport default function RadioGroup(props: RadioGroupProps) {\n    const { items, name, onChange, value, isInvalid, uniqueId, ariaLabel, style = 'classic' } = props;\n\n    const { i18n } = useCoreContext();\n    const uniqueIdBase = uniqueId?.replace(/[0-9]/g, '').substring(0, uniqueId.lastIndexOf('-'));\n\n    return (\n        <div\n            className={cx(['adyen-checkout__radio_group', `adyen-checkout__radio_group--${style}`])}\n            role={'radiogroup'}\n            {...(ariaLabel && { ['aria-label']: ariaLabel })}\n        >\n            {items.map(item => {\n                const uniqueId = getUniqueId(uniqueIdBase);\n                return (\n                    <div key={item.id} className=\"adyen-checkout__radio_group__input-wrapper\">\n                        <input\n                            id={uniqueId}\n                            type=\"radio\"\n                            checked={value === item.id}\n                            className=\"adyen-checkout__radio_group__input\"\n                            name={name}\n                            onChange={onChange}\n                            onClick={onChange}\n                            value={item.id}\n                        />\n                        <label\n                            className={cx([\n                                'adyen-checkout__label__text',\n                                'adyen-checkout__radio_group__label',\n                                props.className,\n                                { 'adyen-checkout__radio_group__label--invalid': isInvalid }\n                            ])}\n                            htmlFor={uniqueId}\n                        >\n                            {i18n.get(item.name)}\n                        </label>\n                    </div>\n                );\n            })}\n        </div>\n    );\n}\n\nRadioGroup.defaultProps = {\n    onChange: () => {},\n    items: []\n};\n"],"names":["RadioGroup","props","items","name","onChange","value","isInvalid","uniqueId","ariaLabel","style","i18n","useCoreContext","uniqueIdBase","replace","substring","lastIndexOf","h","div","className","cx","role","map","item","getUniqueId","key","id","input","type","checked","onClick","label","htmlFor","get","defaultProps"],"mappings":"iQAOe,SAASA,EAAWC,GAC/B,MAAMC,MAAEA,EAAKC,KAAEA,EAAIC,SAAEA,EAAQC,MAAEA,EAAKC,UAAEA,EAASC,SAAEA,EAAQC,UAAEA,EAASC,MAAEA,EAAQ,WAAcR,GAEtFS,KAAEA,GAASC,IACXC,EAAeL,GAAUM,QAAQ,SAAU,IAAIC,UAAU,EAAGP,EAASQ,YAAY,MAEvF,OACIC,EAACC,MAAAA,CACGC,UAAWC,EAAG,CAAC,8BAA+B,gCAAgCV,MAC9EW,KAAM,gBACDZ,GAAa,CAAE,aAAgBA,IAEnCN,EAAMmB,KAAIC,IACP,MAAMf,EAAWgB,EAAYX,GAC7B,OACII,EAACC,MAAAA,CAAIO,IAAKF,EAAKG,GAAIP,UAAU,8CACzBF,EAACU,QAAAA,CACGD,GAAIlB,EACJoB,KAAK,QACLC,QAASvB,IAAUiB,EAAKG,GACxBP,UAAU,qCACVf,KAAMA,EACNC,SAAUA,EACVyB,QAASzB,EACTC,MAAOiB,EAAKG,KAEhBT,EAACc,QAAAA,CACGZ,UAAWC,EAAG,CACV,8BACA,qCACAlB,EAAMiB,UACN,CAAE,8CAA+CZ,KAErDyB,QAASxB,GAERG,EAAKsB,IAAIV,EAAKnB,OAAI,IAO/C,CAEAH,EAAWiC,aAAe,CACtB7B,SAAU,OACVF,MAAO"}

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

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../external/preact/dist/preact.js";import{useRef as t,useState as n,useMemo as r,useEffect as s}from"../../../../external/preact/hooks/dist/hooks.js";import l from"../../../../external/classnames/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:h=!0,readonly:v=!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),M=t(null),O=t(null),R=t(null),[_,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=>!_||e.name.toLowerCase().includes(_.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:_?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 s((()=>{P?K(null):q(null)}),[P]),s((()=>{P&&h&&$.current&&$.current.focus(),C?.(P)}),[P]),s((()=>{function e(e){(e.composedPath?!e.composedPath().includes(M.current):!M.current.contains(e.target))&&X()}return document.addEventListener("click",e,!1),()=>{document.removeEventListener("click",e,!1)}}),[M]),e("div",{className:l(["adyen-checkout__dropdown",p,...g.map((e=>`adyen-checkout__dropdown--${e}`))]),ref:M},e(o,{inputText:H,id:j??null,active:U,selected:G,filterInputRef:$,filterable:h,isInvalid:I,isValid:L,onButtonKeyDown:e=>{e.key===c.enter&&h&&P&&_?ee(e):e.key===c.escape?X():![c.arrowUp,c.arrowDown,c.enter].includes(e.key)&&(e.key!==c.space||h&&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:v,selectListId:A,showList:P,toggleButtonRef:O,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:R,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";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(),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: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};
 //# sourceMappingURL=Select.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../../../../src/components/internal/FormFields/Select/Select.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useEffect, useMemo, useRef, useState } from 'preact/hooks';\nimport cx from 'classnames';\nimport SelectButton from './components/SelectButton';\nimport SelectList from './components/SelectList';\nimport uuid from '../../../../utils/uuid';\nimport { keys } from './constants';\nimport { SelectItem, SelectProps } from './types';\nimport './Select.scss';\nimport { ARIA_CONTEXT_SUFFIX, ARIA_ERROR_SUFFIX } from '../../../../core/Errors/constants';\nimport { simulateFocusScroll } from '../utils';\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":"+iBAYA,SAASA,GAAOC,MACZA,EAAQ,GAAEC,UACVA,EAAY,GAAEC,mBACdA,EAAqB,GAAEC,WACvBA,GAAa,EAAIC,SACjBA,GAAW,EAAKC,SAChBA,EAAW,OAAQC,QACnBA,EAAOC,cACPA,EAAaC,KACbA,EAAIC,UACJA,EAASC,QACTA,EAAOC,YACPA,EAAWC,SACXA,EAAQC,SACRA,EAAQC,kBACRA,EAAiBC,cACjBA,EAAaC,YACbA,EAAWC,aACXA,EAAYC,gBACZA,GAAkB,EAAKC,SACvBA,IAEA,MAAMC,EAAiBC,EAAO,MACxBC,EAAqBD,EAAO,MAC5BE,EAAkBF,EAAO,MACzBG,EAAgBH,EAAO,OACtBI,EAAYC,GAAiBC,EAAiB,OAC9CC,EAAUC,GAAeF,GAAkB,GAC5CG,EAAuBC,GAAQ,IAAM,UAAUC,OAAU,IAEzDC,EAAqBjC,EAAMkC,MAAKC,GAAKA,EAAEC,KAAO7B,KAAmB,CAAC,GAEjE8B,EAAWC,GAAgBX,KAE3BY,EAAcC,GAAmBb,EAAqBM,GAEvDQ,EAAiBR,EAEjBS,EAAgB5B,EAAoBd,EAAQA,EAAM2C,QAAOC,IAASnB,GAAcmB,EAAKpC,KAAKqC,cAAcC,SAASrB,EAAWoB,iBAG5HE,EAAkBnC,EAAW,GAAGA,IADvBH,EAAYuC,EAAoBC,IACa,KAoBtDC,EAAgBN,IAClB,IAAKA,EAAM,OACX,MAAMO,EAAcC,SAASC,eAAe,YAAYT,EAAKR,MAC7DkB,EAAoBH,EAAAA,EAMlBI,EAAY,KAEdvC,GAAeI,EAAeoC,QAAQC,OACtC5B,GAAY,EAAA,EAGV6B,EAAW,KACb7B,GAAY,EAAA,EAGV8B,EAAwBC,IAC1B,MAAMC,EAAQD,EAAGE,cAAmCC,aAAa,cACjE,OAAOrB,EAAcR,MAAK8B,GAAYA,EAAS5B,IAAMyB,GAAAA,EAOnDI,GAAgBL,IAIlB,IAAIM,EAHJN,EAAEO,iBAQED,EAHAN,EAAEE,yBAAyBM,aAAwD,WAAzCR,EAAEE,cAAcC,aAAa,QAGzDJ,EAAqBC,GAC5BrB,EAAaH,IAAMM,EAAc2B,MAAKzB,GAAQA,EAAKR,KAAOG,EAAaH,KAGhEG,EAGVd,EAEciB,EAAc,GAId,CAAEN,GAAI7B,GAIxB2D,IAAgBA,EAAYrD,WAC5BR,EAAS,CAAEiE,OAAQ,CAAET,MAAOK,EAAY9B,GAAI5B,KAAMA,KAE9CO,GAAeuB,EAAa,MAEhCiB,IACJ,EA6CEgB,GAAwBX,IAC1B,OAAQA,EAAEY,KACN,KAAKC,EAAKC,MACV,KAAKD,EAAKE,MACNV,GAAaL,GACb,MACJ,KAAKa,EAAKG,UACNhB,EAAEO,iBAlIQ,MAClB,IAAKzB,GAAiBA,EAAcmC,OAAS,EAAG,OAChD,MAAMC,EAAoBpC,EAAcqC,WAAUf,GAAYA,IAAazB,IAAgB,EACrFyC,EAAYF,EAAoBpC,EAAcmC,OAASC,EAAoB,EAC3EG,EAAWvC,EAAcsC,GAC/B9B,EAAa+B,GACbzC,EAAgByC,EAAAA,EA6HRC,GACA,MACJ,KAAKT,EAAKU,QACNvB,EAAEO,iBA7HY,MACtB,IAAKzB,GAAiBA,EAAcmC,OAAS,EAAG,OAChD,MAAMC,EAAoBpC,EAAcqC,WAAUf,GAAYA,IAAazB,IAAgB,EACrFyC,EAAYF,EAAoB,EAAIpC,EAAcmC,OAAS,EAAIC,EAC/DG,EAAWvC,EAAcsC,GAC/B9B,EAAa+B,GACbzC,EAAgByC,EAAAA,EAwHRG,GAGR,EAwEJ,OAzCAC,GAAU,KACFzD,EACAU,EAAa,MAEbZ,EAAc,KAClB,GACD,CAACE,IAKJyD,GAAU,KACFzD,GAAYzB,GAAciB,EAAeoC,SACzCpC,EAAeoC,QAAQ8B,QAE3BrE,IAAeW,EAAAA,GAChB,CAACA,IAEJyD,GAAU,KAKN,SAASE,EAAmB3B,IAGDA,EAAE4B,cAClB5B,EAAE4B,eAAe1C,SAASxB,EAAmBkC,UAC7ClC,EAAmBkC,QAAQiC,SAAS7B,EAAEU,UAEzCf,GAER,CAIA,OAFAH,SAASsC,iBAAiB,QAASH,GAAoB,GAEhD,KACHnC,SAASuC,oBAAoB,QAASJ,GAAoB,EAAA,CAC9D,GACD,CAACjE,IAGAsE,EAACC,MAAAA,CACG5F,UAAW6F,EAAG,CAAC,2BAA4B7F,KAAcC,EAAmB6F,KAAIC,GAAK,6BAA6BA,QAClHC,IAAK3E,GAELsE,EAACM,EAAAA,CACG7D,UAAWA,EACXD,GAAIxB,GAAY,KAChBqB,OAAQM,EACR4D,SAAU1D,EACVrB,eAAgBA,EAChBjB,WAAYA,EACZM,UAAWA,EACXC,QAASA,EACT0F,gBAhIiBxC,IACrBA,EAAEY,MAAQC,EAAKE,OAASxE,GAAcyB,GAAYH,EAClDwC,GAAaL,GACNA,EAAEY,MAAQC,EAAK4B,OAGtB9C,KACO,CAACkB,EAAKU,QAASV,EAAKG,UAAWH,EAAKE,OAAO7B,SAASc,EAAEY,OAASZ,EAAEY,MAAQC,EAAKC,OAAWvE,GAAeyB,IAOxGgC,EAAE0C,UAAY1C,EAAEY,MAAQC,EAAK8B,KAG7B3C,EAAEY,MAAQC,EAAK8B,MADtBhD,KARAK,EAAEO,iBACGvC,EAGD2C,GAAqBX,GAFrBF,IASR,EA8GQ8C,QAAS9C,EACTpD,QAjFcsD,IACtB,MAAMC,EAAiBD,EAAEU,OAA4BT,MACrDvB,EAAauB,GACbnC,EAAcmC,GACVvD,GACAA,EAAQuD,EACZ,EA4EQlD,YAAaA,EACbP,SAAUA,EACV0B,aAAcA,EACdF,SAAUA,EACVL,gBAAiBA,EACjBkF,WA1EQ7C,IAChBA,EAAEO,iBACGvC,GAIDU,EAAaG,EAAejC,MAC5B+C,MAJAjB,EAAa,MACboB,IAIJ,EAmEQ7C,SAAUA,EACVkC,gBAAiBA,EACjB7B,gBAAiBA,EACjBC,SAAUA,IAEdyE,EAACc,EAAAA,CACGzE,OAAQM,EACRG,cAAeA,EACfiE,QA5JS/C,IACjBA,EAAEO,iBACF,MAAMvB,EAAOe,EAAqBC,GAClCpB,EAAgBI,EAAAA,EA0JRgE,SAAU3C,GACVkC,SAAU1D,EACVX,aAAcA,EACdN,cAAeA,EACfI,SAAUA,IAI1B,CAEA7B,EAAO8G,aAAe,CAClB5G,UAAW,GACXC,mBAAoB,GACpBC,YAAY,EACZH,MAAO,GACPI,UAAU,EACVC,SAAU"}
+{"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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"}

package/dist/es/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"../../../../../external/classnames/index.js";import o from"../../../Img/Img.js";function a({filterable:t,toggleButtonRef:n,...o}){if(t){const{id:t,...a}=o;return e("div",{...a,ref:n})}return e("button",{id:o.id,"aria-describedby":o.ariaDescribedBy,type:"button",...o,ref:n})}function d(d){const{active:r,selected:c,inputText:i,readonly:l,showList:s,required:u}=d,_=c.selectedOptionName||c.name||d.placeholder||"",p=s?i:_,f=l?null:d.filterable?e=>{e.preventDefault(),document.activeElement===d.filterInputRef.current?d.showList||d.toggleList(e):d.filterInputRef.current&&d.filterInputRef.current.focus()}:d.toggleList,b=l?null:d.onFocus,y=r.id?`listItem-${r.id}`:"";return e(a,{className:n({"adyen-checkout__dropdown__button":!0,"adyen-checkout__dropdown__button--readonly":l,"adyen-checkout__dropdown__button--active":s,"adyen-checkout__dropdown__button--invalid":d.isInvalid,"adyen-checkout__dropdown__button--valid":d.isValid,"adyen-checkout__dropdown__button--disabled":c.disabled}),disabled:d.disabled,filterable:d.filterable,onClick:f,onKeyDown:l?null:d.onButtonKeyDown,toggleButtonRef:d.toggleButtonRef,...d.allowIdOnButton&&d.id&&{id:d.id}},d.filterable?e(t,null,!s&&c.icon&&e(o,{className:"adyen-checkout__dropdown__button__icon",src:c.icon,alt:c.name}),e("input",{value:p,"aria-autocomplete":"list","aria-controls":d.selectListId,"aria-expanded":s,"aria-owns":d.selectListId,autoComplete:"off",className:"adyen-checkout__filter-input",onInput:d.onInput,onFocus:b,ref:d.filterInputRef,role:"combobox","aria-activedescendant":y,type:"text",readOnly:d.readonly,id:d.id,"aria-describedby":d.ariaDescribedBy,required:u}),!s&&c.secondaryText&&e("span",{className:"adyen-checkout__dropdown__button__secondary-text"},c.secondaryText)):e(t,null,c.icon&&e(o,{className:"adyen-checkout__dropdown__button__icon",src:c.icon,alt:c.name}),e("span",{className:"adyen-checkout__dropdown__button__text"},_),c.secondaryText&&e("span",{className:"adyen-checkout__dropdown__button__secondary-text"},c.secondaryText)))}export{d as default};
+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";function a({filterable:t,toggleButtonRef:n,...o}){if(t){const{id:t,...a}=o;return e("div",{...a,ref:n})}return e("button",{id:o.id,"aria-describedby":o.ariaDescribedBy,type:"button",...o,ref:n})}function d(d){const{active:r,selected:i,inputText:c,readonly:l,showList:s,required:u}=d,_=i.selectedOptionName||i.name||d.placeholder||"",p=s?c:_,f=l?null:d.filterable?e=>{e.preventDefault(),document.activeElement===d.filterInputRef.current?d.showList||d.toggleList(e):d.filterInputRef.current&&d.filterInputRef.current.focus()}:d.toggleList,b=l?null:d.onFocus,y=r.id?`listItem-${r.id}`:"";return e(a,{className:n({"adyen-checkout__dropdown__button":!0,"adyen-checkout__dropdown__button--readonly":l,"adyen-checkout__dropdown__button--active":s,"adyen-checkout__dropdown__button--invalid":d.isInvalid,"adyen-checkout__dropdown__button--valid":d.isValid,"adyen-checkout__dropdown__button--disabled":i.disabled}),disabled:d.disabled,filterable:d.filterable,onClick:f,onKeyDown:l?null:d.onButtonKeyDown,toggleButtonRef:d.toggleButtonRef,...d.allowIdOnButton&&d.id&&{id:d.id}},d.filterable?e(t,null,!s&&i.icon&&e(o,{className:"adyen-checkout__dropdown__button__icon",src:i.icon,alt:i.name}),e("input",{value:p,"aria-autocomplete":"list","aria-controls":d.selectListId,"aria-expanded":s,"aria-owns":d.selectListId,autoComplete:"off",className:"adyen-checkout__filter-input",onInput:d.onInput,onFocus:b,ref:d.filterInputRef,role:"combobox","aria-activedescendant":y,type:"text",readOnly:d.readonly,id:d.id,"aria-describedby":d.ariaDescribedBy,required:u}),!s&&i.secondaryText&&e("span",{className:"adyen-checkout__dropdown__button__secondary-text"},i.secondaryText)):e(t,null,i.icon&&e(o,{className:"adyen-checkout__dropdown__button__icon",src:i.icon,alt:i.name}),e("span",{className:"adyen-checkout__dropdown__button__text"},_),i.secondaryText&&e("span",{className:"adyen-checkout__dropdown__button__secondary-text"},i.secondaryText)))}export{d as default};
 //# sourceMappingURL=SelectButton.js.map