@adyen/adyen-web 6.40.0 → 6.40.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (85) hide show
  1. package/dist/cjs/index.cjs +2 -2
  2. package/dist/cjs/index.cjs.map +1 -1
  3. package/dist/cjs/index.d.cts +6 -21
  4. package/dist/es/components/ANCV/ANCV.js +1 -1
  5. package/dist/es/components/ANCV/ANCV.js.map +1 -1
  6. package/dist/es/components/Blik/Blik.js +1 -1
  7. package/dist/es/components/Blik/Blik.js.map +1 -1
  8. package/dist/es/components/Iris/Iris.js +1 -1
  9. package/dist/es/components/Iris/Iris.js.map +1 -1
  10. package/dist/es/components/MBWay/MBWay.js +1 -1
  11. package/dist/es/components/MBWay/MBWay.js.map +1 -1
  12. package/dist/es/components/PayTo/PayTo.js +1 -1
  13. package/dist/es/components/PayTo/PayTo.js.map +1 -1
  14. package/dist/es/components/PayTo/components/BSBInput.js +1 -1
  15. package/dist/es/components/PayTo/components/BSBInput.js.map +1 -1
  16. package/dist/es/components/PayTo/components/IdentifierSelector.js +1 -1
  17. package/dist/es/components/PayTo/components/IdentifierSelector.js.map +1 -1
  18. package/dist/es/components/PayTo/components/PayIDInput.js +1 -1
  19. package/dist/es/components/PayTo/components/PayIDInput.js.map +1 -1
  20. package/dist/es/components/PayTo/components/validate.js +1 -1
  21. package/dist/es/components/PayTo/components/validate.js.map +1 -1
  22. package/dist/es/components/ThreeDS2/ThreeDS2Challenge.js.map +1 -1
  23. package/dist/es/components/ThreeDS2/ThreeDS2DeviceFingerprint.js.map +1 -1
  24. package/dist/es/components/UPI/UPI.js +1 -1
  25. package/dist/es/components/UPI/UPI.js.map +1 -1
  26. package/dist/es/components/internal/Await/Await.js +1 -1
  27. package/dist/es/components/internal/Await/Await.js.map +1 -1
  28. package/dist/es/components/internal/FormFields/Fieldset/Fieldset.js +1 -1
  29. package/dist/es/components/internal/FormFields/Fieldset/Fieldset.js.map +1 -1
  30. package/dist/es/components/internal/FormFields/InputBase.js +1 -1
  31. package/dist/es/components/internal/FormFields/InputBase.js.map +1 -1
  32. package/dist/es/components/internal/FormFields/Select/Select.js +1 -1
  33. package/dist/es/components/internal/FormFields/Select/Select.js.map +1 -1
  34. package/dist/es/components/internal/FormFields/Select/components/SelectButton.js +1 -1
  35. package/dist/es/components/internal/FormFields/Select/components/SelectButton.js.map +1 -1
  36. package/dist/es/components/internal/SecuredFields/lib/securedField/utils/createIframe.js +1 -1
  37. package/dist/es/components/internal/SecuredFields/lib/securedField/utils/createIframe.js.map +1 -1
  38. package/dist/es/core/config.js +1 -1
  39. package/dist/es/index.d.ts +6 -21
  40. package/dist/es/language/utils.js +1 -1
  41. package/dist/es/language/utils.js.map +1 -1
  42. package/dist/es/packages/server/translations/en-US.json.js +1 -1
  43. package/dist/es/utils/get-process-message-handler.js +1 -1
  44. package/dist/es/utils/get-process-message-handler.js.map +1 -1
  45. package/dist/es-legacy/components/ANCV/ANCV.js +1 -1
  46. package/dist/es-legacy/components/ANCV/ANCV.js.map +1 -1
  47. package/dist/es-legacy/components/Blik/Blik.js +1 -1
  48. package/dist/es-legacy/components/Blik/Blik.js.map +1 -1
  49. package/dist/es-legacy/components/Iris/Iris.js +1 -1
  50. package/dist/es-legacy/components/Iris/Iris.js.map +1 -1
  51. package/dist/es-legacy/components/MBWay/MBWay.js +1 -1
  52. package/dist/es-legacy/components/MBWay/MBWay.js.map +1 -1
  53. package/dist/es-legacy/components/PayTo/PayTo.js +1 -1
  54. package/dist/es-legacy/components/PayTo/PayTo.js.map +1 -1
  55. package/dist/es-legacy/components/PayTo/components/BSBInput.js +1 -1
  56. package/dist/es-legacy/components/PayTo/components/BSBInput.js.map +1 -1
  57. package/dist/es-legacy/components/PayTo/components/IdentifierSelector.js +1 -1
  58. package/dist/es-legacy/components/PayTo/components/IdentifierSelector.js.map +1 -1
  59. package/dist/es-legacy/components/PayTo/components/PayIDInput.js +1 -1
  60. package/dist/es-legacy/components/PayTo/components/PayIDInput.js.map +1 -1
  61. package/dist/es-legacy/components/PayTo/components/validate.js +1 -1
  62. package/dist/es-legacy/components/PayTo/components/validate.js.map +1 -1
  63. package/dist/es-legacy/components/ThreeDS2/ThreeDS2Challenge.js.map +1 -1
  64. package/dist/es-legacy/components/ThreeDS2/ThreeDS2DeviceFingerprint.js.map +1 -1
  65. package/dist/es-legacy/components/UPI/UPI.js +1 -1
  66. package/dist/es-legacy/components/UPI/UPI.js.map +1 -1
  67. package/dist/es-legacy/components/internal/Await/Await.js +1 -1
  68. package/dist/es-legacy/components/internal/Await/Await.js.map +1 -1
  69. package/dist/es-legacy/components/internal/FormFields/Fieldset/Fieldset.js +1 -1
  70. package/dist/es-legacy/components/internal/FormFields/Fieldset/Fieldset.js.map +1 -1
  71. package/dist/es-legacy/components/internal/FormFields/InputBase.js +1 -1
  72. package/dist/es-legacy/components/internal/FormFields/InputBase.js.map +1 -1
  73. package/dist/es-legacy/components/internal/FormFields/Select/Select.js +1 -1
  74. package/dist/es-legacy/components/internal/FormFields/Select/Select.js.map +1 -1
  75. package/dist/es-legacy/components/internal/FormFields/Select/components/SelectButton.js +1 -1
  76. package/dist/es-legacy/components/internal/FormFields/Select/components/SelectButton.js.map +1 -1
  77. package/dist/es-legacy/components/internal/SecuredFields/lib/securedField/utils/createIframe.js +1 -1
  78. package/dist/es-legacy/components/internal/SecuredFields/lib/securedField/utils/createIframe.js.map +1 -1
  79. package/dist/es-legacy/core/config.js +1 -1
  80. package/dist/es-legacy/language/utils.js +1 -1
  81. package/dist/es-legacy/language/utils.js.map +1 -1
  82. package/dist/es-legacy/packages/server/translations/en-US.json.js +1 -1
  83. package/dist/es-legacy/utils/get-process-message-handler.js +1 -1
  84. package/dist/es-legacy/utils/get-process-message-handler.js.map +1 -1
  85. package/package.json +19 -19
@@ -1 +1 @@
1
- {"version":3,"file":"Await.js","sources":["../../../../../src/components/internal/Await/Await.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { h } from 'preact';\nimport { useEffect } from 'preact/hooks';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport {\n usePaymentStatusTimer,\n DEFAULT_PAYMENT_STATUS_TIMER_COUNTDOWN_TIME_MIN,\n DEFAULT_PAYMENT_STATUS_TIMER_DELAY_MS,\n DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_INTERVAL_MS,\n DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_TIME_MS\n} from '../../../hooks/usePaymentStatusTimer';\nimport Spinner from '../../internal/Spinner';\nimport Button from '../Button';\nimport ContentSeparator from '../ContentSeparator';\nimport Countdown from '../Countdown';\nimport { AwaitFinalState } from './components/AwaitFinalState';\nimport { AwaitComponentProps } from './types';\nimport { redirectToApp } from '../../../utils/urls';\nimport './Await.scss';\nimport { useAmount } from '../../../core/Context/AmountProvider';\nimport { useA11yReporter } from '../../../core/Errors/useA11yReporter';\n\nexport function Await(props: Readonly<AwaitComponentProps>) {\n const { i18n, loadingContext } = useCoreContext();\n useA11yReporter(props.awaitText);\n\n const { state: timerState, actions: timerActions } = usePaymentStatusTimer({\n loadingContext,\n paymentData: props.paymentData,\n clientKey: props.clientKey,\n delay: props.delay,\n throttleTime: props.throttleTime,\n throttleInterval: props.throttleInterval,\n type: props.type,\n onError: props.onError,\n onComplete: props.onComplete,\n pollStatus: props.pollStatus,\n onActionHandled: props.onActionHandled\n });\n\n const { completed, expired, loading, percentage } = timerState;\n const { onTick, onTimeUp } = timerActions;\n const { amount } = useAmount();\n\n useEffect(() => {\n if (props.shouldRedirectAutomatically && props.url) {\n redirectToApp(props.url);\n }\n }, [props.shouldRedirectAutomatically, props.url]);\n\n if (expired) {\n return <AwaitFinalState image=\"error\" message={i18n.get('error.subtitle.payment')} />;\n }\n\n if (completed) {\n return <AwaitFinalState image=\"success\" message={i18n.get('creditCard.success')} />;\n }\n\n if (loading) {\n return (\n <div className=\"adyen-checkout__await\">\n {props.brandLogo && <img src={props.brandLogo} alt={props.type} className=\"adyen-checkout__await__brand-logo\" />}\n <Spinner inline={false} size=\"large\" />\n </div>\n );\n }\n\n const timeToPayString = i18n.get('wechatpay.timetopay').split('%@');\n\n return (\n <div\n className={classnames(\n 'adyen-checkout__await',\n `adyen-checkout__await--${props.type}`,\n props.classNameModifiers.map(m => `adyen-checkout__await--${m}`)\n )}\n >\n {props.brandLogo && <img src={props.brandLogo} alt={props.type} className=\"adyen-checkout__await__brand-logo\" />}\n\n {/* Everything is wrapped in !! so we evaluate the result as boolean,\n otherwise we might just print the value or object as mistake */}\n {!!(props.showAmount && amount?.value !== null && amount?.currency) && (\n <div className=\"adyen-checkout__await__amount\">{i18n.amount(amount.value, amount.currency)}</div>\n )}\n\n {props.messageText != null && <div className=\"adyen-checkout__await__subtitle\">{props.messageText}</div>}\n\n <div className=\"adyen-checkout__await__indicator-holder\">\n <div className=\"adyen-checkout__await__indicator-spinner\">\n <Spinner inline={false} size=\"medium\" />\n </div>\n <div className=\"adyen-checkout__await__indicator-text\">{props.awaitText}</div>\n </div>\n\n {props.showCountdownTimer && (\n <div className=\"adyen-checkout__await__countdown-holder\">\n <div className=\"adyen-checkout__await__progress\">\n <span className=\"adyen-checkout__await__percentage\" style={{ width: `${percentage}%` }} />\n </div>\n\n <div className=\"adyen-checkout__await__countdown\">\n {timeToPayString[0]}&nbsp;\n <Countdown minutesFromNow={props.countdownTime} onTick={onTick} onCompleted={onTimeUp} />\n &nbsp;{timeToPayString[1]}\n </div>\n </div>\n )}\n\n {props.url && !props.shouldRedirectAutomatically && (\n <div className=\"adyen-checkout__await__app-link\">\n <ContentSeparator />\n <Button classNameModifiers={['await']} onClick={() => redirectToApp(props.url)} label={i18n.get('openApp')} />\n </div>\n )}\n\n {props.instructions && (\n <div className=\"adyen-checkout__await__instructions\">\n {typeof props.instructions === 'string' ? i18n.get(props.instructions) : props.instructions?.()}\n </div>\n )}\n\n {props.endSlot && <div className=\"adyen-checkout__await__end-slot\">{props.endSlot()}</div>}\n </div>\n );\n}\n\nAwait.defaultProps = {\n countdownTime: DEFAULT_PAYMENT_STATUS_TIMER_COUNTDOWN_TIME_MIN,\n delay: DEFAULT_PAYMENT_STATUS_TIMER_DELAY_MS,\n throttleTime: DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_TIME_MS,\n throttleInterval: DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_INTERVAL_MS,\n onError: () => {},\n onComplete: () => {},\n showCountdownTimer: true,\n classNameModifiers: [],\n url: null\n};\n"],"names":["Await","props","i18n","loadingContext","useCoreContext","useA11yReporter","awaitText","state","timerState","actions","timerActions","usePaymentStatusTimer","paymentData","clientKey","delay","throttleTime","throttleInterval","type","onError","onComplete","pollStatus","onActionHandled","completed","expired","loading","percentage","onTick","onTimeUp","amount","useAmount","useEffect","shouldRedirectAutomatically","url","redirectToApp","h","AwaitFinalState","image","message","get","div","className","brandLogo","img","src","alt","Spinner","inline","size","timeToPayString","split","classnames","classNameModifiers","map","m","showAmount","value","currency","messageText","showCountdownTimer","span","style","width","Countdown","minutesFromNow","countdownTime","onCompleted","ContentSeparator","Button","onClick","label","instructions","endSlot","defaultProps","DEFAULT_PAYMENT_STATUS_TIMER_COUNTDOWN_TIME_MIN","DEFAULT_PAYMENT_STATUS_TIMER_DELAY_MS","DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_TIME_MS","DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_INTERVAL_MS"],"mappings":"4hCAsBO,SAASA,EAAMC,GA+FuEA,IAAAA,EA9FzF,MAAMC,KAAEA,EAAIC,eAAEA,GAAmBC,IACjCC,EAAgBJ,EAAMK,WAEtB,MAAQC,MAAOC,EAAYC,QAASC,GAAiBC,EAAsB,CACvER,iBACAS,YAAaX,EAAMW,YACnBC,UAAWZ,EAAMY,UACjBC,MAAOb,EAAMa,MACbC,aAAcd,EAAMc,aACpBC,iBAAkBf,EAAMe,iBACxBC,KAAMhB,EAAMgB,KACZC,QAASjB,EAAMiB,QACfC,WAAYlB,EAAMkB,WAClBC,WAAYnB,EAAMmB,WAClBC,gBAAiBpB,EAAMoB,mBAGrBC,UAAEA,EAASC,QAAEA,EAAOC,QAAEA,EAAOC,WAAEA,GAAejB,GAC9CkB,OAAEA,EAAMC,SAAEA,GAAajB,GACvBkB,OAAEA,GAAWC,IAQnB,GANAC,EAAU,KACF7B,EAAM8B,6BAA+B9B,EAAM+B,KAC3CC,EAAchC,EAAM+B,MAEzB,CAAC/B,EAAM8B,4BAA6B9B,EAAM+B,MAEzCT,EACA,OAAOW,EAACC,EAAAA,CAAgBC,MAAM,QAAQC,QAASnC,EAAKoC,IAAI,4BAG5D,GAAIhB,EACA,OAAOY,EAACC,EAAAA,CAAgBC,MAAM,UAAUC,QAASnC,EAAKoC,IAAI,wBAG9D,GAAId,EACA,OACIU,EAACK,MAAAA,CAAIC,UAAU,yBACVvC,EAAMwC,WAAaP,EAACQ,MAAAA,CAAIC,IAAK1C,EAAMwC,UAAWG,IAAK3C,EAAMgB,KAAMuB,UAAU,sCAC1EN,EAACW,EAAAA,CAAQC,QAAQ,EAAOC,KAAK,WAKzC,MAAMC,EAAkB9C,EAAKoC,IAAI,uBAAuBW,MAAM,MAE9D,OACIf,EAACK,MAAAA,CACGC,UAAWU,EACP,wBACA,0BAA0BjD,EAAMgB,OAChChB,EAAMkD,mBAAmBC,IAAIC,GAAK,0BAA0BA,OAG/DpD,EAAMwC,WAAaP,EAACQ,MAAAA,CAAIC,IAAK1C,EAAMwC,UAAWG,IAAK3C,EAAMgB,KAAMuB,UAAU,yCAItEvC,EAAMqD,YAAgC,QAAlB1B,aAAAA,EAAAA,EAAQ2B,UAAkB3B,aAAAA,EAAAA,EAAQ4B,YACtDtB,EAACK,MAAAA,CAAIC,UAAU,iCAAiCtC,EAAK0B,OAAOA,EAAO2B,MAAO3B,EAAO4B,WAG/D,MAArBvD,EAAMwD,aAAuBvB,EAACK,MAAAA,CAAIC,UAAU,mCAAmCvC,EAAMwD,aAEtFvB,EAACK,MAAAA,CAAIC,UAAU,2CACXN,EAACK,MAAAA,CAAIC,UAAU,4CACXN,EAACW,EAAAA,CAAQC,QAAQ,EAAOC,KAAK,YAEjCb,EAACK,MAAAA,CAAIC,UAAU,yCAAyCvC,EAAMK,YAGjEL,EAAMyD,oBACHxB,EAACK,MAAAA,CAAIC,UAAU,2CACXN,EAACK,MAAAA,CAAIC,UAAU,mCACXN,EAACyB,OAAAA,CAAKnB,UAAU,oCAAoCoB,MAAO,CAAEC,MAAO,GAAGpC,SAG3ES,EAACK,MAAAA,CAAIC,UAAU,oCACVQ,EAAgB,GAAG,IACpBd,EAAC4B,EAAAA,CAAUC,eAAgB9D,EAAM+D,cAAetC,OAAQA,EAAQuC,YAAatC,IAAY,IAClFqB,EAAgB,KAKlC/C,EAAM+B,MAAQ/B,EAAM8B,6BACjBG,EAACK,MAAAA,CAAIC,UAAU,mCACXN,EAACgC,QACDhC,EAACiC,EAAAA,CAAOhB,mBAAoB,CAAC,SAAUiB,QAAS,IAAMnC,EAAchC,EAAM+B,KAAMqC,MAAOnE,EAAKoC,IAAI,cAIvGrC,EAAMqE,cACHpC,EAACK,MAAAA,CAAIC,UAAU,uCACoB,iBAAvBvC,EAAMqE,aAA4BpE,EAAKoC,IAAIrC,EAAMqE,sBAAgBrE,EAAAA,EAAMqE,oBAANrE,IAAAA,OAAAA,EAAAA,EAAAA,KAAAA,IAIhFA,EAAMsE,SAAWrC,EAACK,MAAAA,CAAIC,UAAU,mCAAmCvC,EAAMsE,WAGtF,CAEAvE,EAAMwE,aAAe,CACjBR,cAAeS,EACf3D,MAAO4D,EACP3D,aAAc4D,EACd3D,iBAAkB4D,EAClB1D,QAAS,OACTC,WAAY,OACZuC,oBAAoB,EACpBP,mBAAoB,GACpBnB,IAAK"}
1
+ {"version":3,"file":"Await.js","sources":["../../../../../src/components/internal/Await/Await.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { h } from 'preact';\nimport { useEffect } from 'preact/hooks';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport {\n usePaymentStatusTimer,\n DEFAULT_PAYMENT_STATUS_TIMER_COUNTDOWN_TIME_MIN,\n DEFAULT_PAYMENT_STATUS_TIMER_DELAY_MS,\n DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_INTERVAL_MS,\n DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_TIME_MS\n} from '../../../hooks/usePaymentStatusTimer';\nimport Spinner from '../../internal/Spinner';\nimport Button from '../Button';\nimport ContentSeparator from '../ContentSeparator';\nimport Countdown from '../Countdown';\nimport { AwaitFinalState } from './components/AwaitFinalState';\nimport { AwaitComponentProps } from './types';\nimport { redirectToApp } from '../../../utils/urls';\nimport './Await.scss';\nimport { useAmount } from '../../../core/Context/AmountProvider';\nimport { useA11yReporter } from '../../../core/Errors/useA11yReporter';\n\nexport function Await(props: Readonly<AwaitComponentProps>) {\n const { i18n, loadingContext } = useCoreContext();\n useA11yReporter(props.awaitText);\n\n const { state: timerState, actions: timerActions } = usePaymentStatusTimer({\n loadingContext,\n paymentData: props.paymentData,\n clientKey: props.clientKey,\n delay: props.delay,\n throttleTime: props.throttleTime,\n throttleInterval: props.throttleInterval,\n type: props.type,\n onError: props.onError,\n onComplete: props.onComplete,\n pollStatus: props.pollStatus,\n onActionHandled: props.onActionHandled\n });\n\n const { completed, expired, loading, percentage } = timerState;\n const { onTick, onTimeUp } = timerActions;\n const { amount } = useAmount();\n\n useEffect(() => {\n if (props.shouldRedirectAutomatically && props.url) {\n redirectToApp(props.url);\n }\n }, [props.shouldRedirectAutomatically, props.url]);\n\n if (expired) {\n return <AwaitFinalState image=\"error\" message={i18n.get('error.subtitle.payment')} />;\n }\n\n if (completed) {\n return <AwaitFinalState image=\"success\" message={i18n.get('creditCard.success')} />;\n }\n\n if (loading) {\n return (\n <div className=\"adyen-checkout__await\">\n {props.brandLogo && <img src={props.brandLogo} alt={props.brandName ?? props.type} className=\"adyen-checkout__await__brand-logo\" />}\n <Spinner inline={false} size=\"large\" />\n </div>\n );\n }\n\n const timeToPayString = i18n.get('wechatpay.timetopay').split('%@');\n\n return (\n <div\n className={classnames(\n 'adyen-checkout__await',\n `adyen-checkout__await--${props.type}`,\n props.classNameModifiers.map(m => `adyen-checkout__await--${m}`)\n )}\n >\n {props.brandLogo && <img src={props.brandLogo} alt={props.brandName ?? props.type} className=\"adyen-checkout__await__brand-logo\" />}\n\n {/* Everything is wrapped in !! so we evaluate the result as boolean,\n otherwise we might just print the value or object as mistake */}\n {!!(props.showAmount && amount?.value !== null && amount?.currency) && (\n <div className=\"adyen-checkout__await__amount\">{i18n.amount(amount.value, amount.currency)}</div>\n )}\n\n {props.messageText != null && <div className=\"adyen-checkout__await__subtitle\">{props.messageText}</div>}\n\n <div className=\"adyen-checkout__await__indicator-holder\">\n <div className=\"adyen-checkout__await__indicator-spinner\">\n <Spinner inline={false} size=\"medium\" />\n </div>\n <div className=\"adyen-checkout__await__indicator-text\">{props.awaitText}</div>\n </div>\n\n {props.showCountdownTimer && (\n <div className=\"adyen-checkout__await__countdown-holder\">\n <div className=\"adyen-checkout__await__progress\">\n <span className=\"adyen-checkout__await__percentage\" style={{ width: `${percentage}%` }} />\n </div>\n\n <div className=\"adyen-checkout__await__countdown\">\n {timeToPayString[0]}&nbsp;\n <Countdown minutesFromNow={props.countdownTime} onTick={onTick} onCompleted={onTimeUp} />\n &nbsp;{timeToPayString[1]}\n </div>\n </div>\n )}\n\n {props.url && !props.shouldRedirectAutomatically && (\n <div className=\"adyen-checkout__await__app-link\">\n <ContentSeparator />\n <Button classNameModifiers={['await']} onClick={() => redirectToApp(props.url)} label={i18n.get('openApp')} />\n </div>\n )}\n\n {props.instructions && (\n <div className=\"adyen-checkout__await__instructions\">\n {typeof props.instructions === 'string' ? i18n.get(props.instructions) : props.instructions?.()}\n </div>\n )}\n\n {props.endSlot && <div className=\"adyen-checkout__await__end-slot\">{props.endSlot()}</div>}\n </div>\n );\n}\n\nAwait.defaultProps = {\n countdownTime: DEFAULT_PAYMENT_STATUS_TIMER_COUNTDOWN_TIME_MIN,\n delay: DEFAULT_PAYMENT_STATUS_TIMER_DELAY_MS,\n throttleTime: DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_TIME_MS,\n throttleInterval: DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_INTERVAL_MS,\n onError: () => {},\n onComplete: () => {},\n showCountdownTimer: true,\n classNameModifiers: [],\n url: null\n};\n"],"names":["Await","props","i18n","loadingContext","useCoreContext","useA11yReporter","awaitText","state","timerState","actions","timerActions","usePaymentStatusTimer","paymentData","clientKey","delay","throttleTime","throttleInterval","type","onError","onComplete","pollStatus","onActionHandled","completed","expired","loading","percentage","onTick","onTimeUp","amount","useAmount","useEffect","shouldRedirectAutomatically","url","redirectToApp","h","AwaitFinalState","image","message","get","div","className","brandLogo","img","src","alt","brandName","Spinner","inline","size","timeToPayString","split","classnames","classNameModifiers","map","m","showAmount","value","currency","messageText","showCountdownTimer","span","style","width","Countdown","minutesFromNow","countdownTime","onCompleted","ContentSeparator","Button","onClick","label","instructions","endSlot","defaultProps","DEFAULT_PAYMENT_STATUS_TIMER_COUNTDOWN_TIME_MIN","DEFAULT_PAYMENT_STATUS_TIMER_DELAY_MS","DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_TIME_MS","DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_INTERVAL_MS"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import{createElement as e}from"../../../../external/preact/dist/preact.js";import t from"../../../../_virtual/index.js";import{useCoreContext as s}from"../../../../core/Context/CoreProvider.js";import{getUniqueId as i}from"../../../../utils/idGenerator.js";import{useMemo as a}from"../../../../external/preact/hooks/dist/hooks.js";function d({children:d,classNameModifiers:o=[],classNamesFields:r=[],label:l,readonly:c=!1,description:n,id:_,renderLabelAsSectionHeading:m=!1}){const{i18n:f}=s(),p=a(()=>i("fieldset-description"),[]);return e("fieldset",{id:_,className:t(["adyen-checkout__fieldset",...o.map(e=>`adyen-checkout__fieldset--${e}`),{"adyen-checkout__fieldset--readonly":c}]),"aria-describedby":n?p:null},l&&e("legend",{className:"adyen-checkout__fieldset__title"},m?e("h2",{className:"adyen-checkout__fieldset__title-heading"},f.get(l)):f.get(l)),n&&e("p",{id:p,className:"adyen-checkout__fieldset__description"},f.get(n)),e("div",{className:t("adyen-checkout__fieldset__fields",r)},d))}export{d as default};
1
+ import{createElement as e}from"../../../../external/preact/dist/preact.js";import t from"../../../../_virtual/index.js";import{useCoreContext as s}from"../../../../core/Context/CoreProvider.js";import{getUniqueId as i}from"../../../../utils/idGenerator.js";import{useMemo as d}from"../../../../external/preact/hooks/dist/hooks.js";function a({children:a,classNameModifiers:o=[],classNamesFields:r=[],label:l,readonly:c=!1,description:n,id:_,renderLabelAsSectionHeading:m=!1,descriptionId:f}){const{i18n:p}=s(),u=d(()=>i("fieldset-description"),[]),h=null!=f?f:u;return e("fieldset",{id:_,className:t(["adyen-checkout__fieldset",...o.map(e=>`adyen-checkout__fieldset--${e}`),{"adyen-checkout__fieldset--readonly":c}])},l&&e("legend",{className:"adyen-checkout__fieldset__title"},m?e("h2",{className:"adyen-checkout__fieldset__title-heading"},p.get(l)):p.get(l)),n&&e("p",{id:h,className:"adyen-checkout__fieldset__description"},p.get(n)),e("div",{className:t("adyen-checkout__fieldset__fields",r)},a))}export{a as default};
2
2
  //# sourceMappingURL=Fieldset.js.map
@@ -1 +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';\nimport { getUniqueId } from '../../../../utils/idGenerator';\nimport { useMemo } from 'preact/hooks';\n\ninterface FieldsetProps {\n children: ComponentChildren;\n classNameModifiers?: string[];\n classNamesFields?: string[];\n label?: string;\n description?: string;\n readonly?: boolean;\n id?: string;\n renderLabelAsSectionHeading?: boolean;\n}\n\nexport default function Fieldset({\n children,\n classNameModifiers: classNameFieldsetModifiers = [],\n classNamesFields = [],\n label,\n readonly = false,\n description,\n id,\n renderLabelAsSectionHeading = false\n}: Readonly<FieldsetProps>) {\n const { i18n } = useCoreContext();\n\n const describedById = useMemo(() => getUniqueId('fieldset-description'), []);\n\n return (\n <fieldset\n id={id}\n className={cx([\n 'adyen-checkout__fieldset',\n ...classNameFieldsetModifiers.map(m => `adyen-checkout__fieldset--${m}`),\n { 'adyen-checkout__fieldset--readonly': readonly }\n ])}\n aria-describedby={description ? describedById : null}\n >\n {label && (\n <legend className=\"adyen-checkout__fieldset__title\">\n {renderLabelAsSectionHeading ? <h2 className=\"adyen-checkout__fieldset__title-heading\">{i18n.get(label)}</h2> : i18n.get(label)}\n </legend>\n )}\n {description && (\n <p id={describedById} className=\"adyen-checkout__fieldset__description\">\n {i18n.get(description)}\n </p>\n )}\n <div className={cx('adyen-checkout__fieldset__fields', classNamesFields)}>{children}</div>\n </fieldset>\n );\n}\n"],"names":["Fieldset","children","classNameModifiers","classNameFieldsetModifiers","classNamesFields","label","readonly","description","id","renderLabelAsSectionHeading","i18n","useCoreContext","describedById","useMemo","getUniqueId","h","fieldset","className","cx","map","m","aria-describedby","legend","h2","get","p","div"],"mappings":"2UAkBe,SAASA,GAASC,SAC7BA,EACAC,mBAAoBC,EAA6B,GAAEC,iBACnDA,EAAmB,GAAEC,MACrBA,EAAKC,SACLA,GAAW,EAAKC,YAChBA,EAAWC,GACXA,EAAEC,4BACFA,GAA8B,IAE9B,MAAMC,KAAEA,GAASC,IAEXC,EAAgBC,EAAQ,IAAMC,EAAY,wBAAyB,IAEzE,OACIC,EAACC,WAAAA,CACGR,GAAIA,EACJS,UAAWC,EAAG,CACV,8BACGf,EAA2BgB,IAAIC,GAAK,6BAA6BA,KACpE,CAAE,qCAAsCd,KAE5Ce,mBAAkBd,EAAcK,EAAgB,MAE/CP,GACGU,EAACO,SAAAA,CAAOL,UAAU,mCACbR,EAA8BM,EAACQ,KAAAA,CAAGN,UAAU,2CAA2CP,EAAKc,IAAInB,IAAeK,EAAKc,IAAInB,IAGhIE,GACGQ,EAACU,IAAAA,CAAEjB,GAAII,EAAeK,UAAU,yCAC3BP,EAAKc,IAAIjB,IAGlBQ,EAACW,MAAAA,CAAIT,UAAWC,EAAG,mCAAoCd,IAAoBH,GAGvF"}
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';\nimport { getUniqueId } from '../../../../utils/idGenerator';\nimport { useMemo } from 'preact/hooks';\n\ninterface FieldsetProps {\n children: ComponentChildren;\n classNameModifiers?: string[];\n classNamesFields?: string[];\n label?: string;\n description?: string;\n readonly?: boolean;\n id?: string;\n renderLabelAsSectionHeading?: boolean;\n descriptionId?: string;\n}\n\nexport default function Fieldset({\n children,\n classNameModifiers: classNameFieldsetModifiers = [],\n classNamesFields = [],\n label,\n readonly = false,\n description,\n id,\n renderLabelAsSectionHeading = false,\n descriptionId: externalDescriptionId\n}: Readonly<FieldsetProps>) {\n const { i18n } = useCoreContext();\n\n const generatedDescriptionId = useMemo(() => getUniqueId('fieldset-description'), []);\n const describedById = externalDescriptionId ?? generatedDescriptionId;\n\n return (\n <fieldset\n id={id}\n className={cx([\n 'adyen-checkout__fieldset',\n ...classNameFieldsetModifiers.map(m => `adyen-checkout__fieldset--${m}`),\n { 'adyen-checkout__fieldset--readonly': readonly }\n ])}\n >\n {label && (\n <legend className=\"adyen-checkout__fieldset__title\">\n {renderLabelAsSectionHeading ? <h2 className=\"adyen-checkout__fieldset__title-heading\">{i18n.get(label)}</h2> : i18n.get(label)}\n </legend>\n )}\n {description && (\n <p id={describedById} className=\"adyen-checkout__fieldset__description\">\n {i18n.get(description)}\n </p>\n )}\n <div className={cx('adyen-checkout__fieldset__fields', classNamesFields)}>{children}</div>\n </fieldset>\n );\n}\n"],"names":["Fieldset","children","classNameModifiers","classNameFieldsetModifiers","classNamesFields","label","readonly","description","id","renderLabelAsSectionHeading","descriptionId","externalDescriptionId","i18n","useCoreContext","generatedDescriptionId","useMemo","getUniqueId","describedById","h","fieldset","className","cx","map","m","legend","h2","get","p","div"],"mappings":"2UAmBe,SAASA,GAASC,SAC7BA,EACAC,mBAAoBC,EAA6B,GAAEC,iBACnDA,EAAmB,GAAEC,MACrBA,EAAKC,SACLA,GAAW,EAAKC,YAChBA,EAAWC,GACXA,EAAEC,4BACFA,GAA8B,EAC9BC,cAAeC,IAEf,MAAMC,KAAEA,GAASC,IAEXC,EAAyBC,EAAQ,IAAMC,EAAY,wBAAyB,IAC5EC,EAAgBN,QAAAA,EAAyBG,EAE/C,OACII,EAACC,WAAAA,CACGX,GAAIA,EACJY,UAAWC,EAAG,CACV,8BACGlB,EAA2BmB,IAAIC,GAAK,6BAA6BA,KACpE,CAAE,qCAAsCjB,MAG3CD,GACGa,EAACM,SAAAA,CAAOJ,UAAU,mCACbX,EAA8BS,EAACO,KAAAA,CAAGL,UAAU,2CAA2CR,EAAKc,IAAIrB,IAAeO,EAAKc,IAAIrB,IAGhIE,GACGW,EAACS,IAAAA,CAAEnB,GAAIS,EAAeG,UAAU,yCAC3BR,EAAKc,IAAInB,IAGlBW,EAACU,MAAAA,CAAIR,UAAWC,EAAG,mCAAoCjB,IAAoBH,GAGvF"}
@@ -1,2 +1,2 @@
1
- import{createElement as e}from"../../../external/preact/dist/preact.js";import{useCallback as t}from"../../../external/preact/hooks/dist/hooks.js";import r from"../../../_virtual/index.js";import{ARIA_ERROR_SUFFIX as n,ARIA_CONTEXT_SUFFIX as o}from"../../../core/Errors/constants.js";function l(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}),e}function i(e,t){if(null==e)return{};var r,n,o,l={};if("undefined"!=typeof Reflect&&Reflect.ownKeys){for(r=Reflect.ownKeys(Object(e)),o=0;o<r.length;o++)n=r[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(l[n]=e[n]);return l}if(l=function(e,t){if(null==e)return{};var r,n,o={},l=Object.getOwnPropertyNames(e);for(n=0;n<l.length;n++)r=l[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r]);return o}(e,t),Object.getOwnPropertySymbols)for(r=Object.getOwnPropertySymbols(e),o=0;o<r.length;o++)n=r[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(l[n]=e[n]);return l}function c(c){let{setRef:u}=c,s=i(c,["setRef"]);const{autoCorrect:p,classNameModifiers:d,isInvalid:y,isValid:f,readonly:b=null,spellcheck:O,type:m,uniqueId:j,disabled:v}=s,h=s.className;Object.prototype.hasOwnProperty.call(s,"onChange")&&console.error("Error: Form fields that rely on InputBase may not have an onChange property");const g=t(e=>{s.onInput(e)},[s.onInput]),P=t(e=>{(null==s?void 0:s.onKeyPress)&&s.onKeyPress(e)},[null==s?void 0:s.onKeyPress]),w=t(e=>{(null==s?void 0:s.onKeyUp)&&s.onKeyUp(e)},[null==s?void 0:s.onKeyUp]),I=t(e=>{var t,r;null==s||null===(t=s.onBlurHandler)||void 0===t||t.call(s,e),s.trimOnBlur&&(e.target.value=e.target.value.trim()),null==s||null===(r=s.onBlur)||void 0===r||r.call(s,e)},[s.onBlur,s.onBlurHandler]),k=t(e=>{var t;null==s||null===(t=s.onFocusHandler)||void 0===t||t.call(s,e)},[s.onFocusHandler]),_=r("adyen-checkout__input",[`adyen-checkout__input--${m}`],h,{"adyen-checkout__input--invalid":y,"adyen-checkout__input--valid":f},d.map(e=>`adyen-checkout__input--${e}`)),{classNameModifiers:x,uniqueId:E,isInvalid:K,isValid:B,addContextualElement:C,autocomplete:N}=s,S=i(s,["classNameModifiers","uniqueId","isInvalid","isValid","addContextualElement","autocomplete"]);return e("input",a(function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter(function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable}))),n.forEach(function(t){l(e,t,r[t])})}return e}({id:j},S),{autocomplete:N,"aria-required":S.required,type:m,className:_,readOnly:b,spellcheck:O,autoCorrect:p,"aria-describedby":`${j}${y?n:o}`,"aria-invalid":y,onInput:g,onBlur:I,onFocus:k,onKeyUp:w,onKeyPress:P,disabled:v,ref:u}))}c.defaultProps={type:"text",classNameModifiers:[]};export{c as default};
1
+ import{createElement as e}from"../../../external/preact/dist/preact.js";import{useCallback as t}from"../../../external/preact/hooks/dist/hooks.js";import r from"../../../_virtual/index.js";import{ARIA_ERROR_SUFFIX as n,ARIA_CONTEXT_SUFFIX as o}from"../../../core/Errors/constants.js";function l(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}),e}function i(e,t){if(null==e)return{};var r,n,o,l={};if("undefined"!=typeof Reflect&&Reflect.ownKeys){for(r=Reflect.ownKeys(Object(e)),o=0;o<r.length;o++)n=r[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(l[n]=e[n]);return l}if(l=function(e,t){if(null==e)return{};var r,n,o={},l=Object.getOwnPropertyNames(e);for(n=0;n<l.length;n++)r=l[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r]);return o}(e,t),Object.getOwnPropertySymbols)for(r=Object.getOwnPropertySymbols(e),o=0;o<r.length;o++)n=r[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(l[n]=e[n]);return l}function u(u){let{setRef:c}=u,s=i(u,["setRef"]);const{autoCorrect:p,classNameModifiers:d,isInvalid:y,isValid:f,readonly:b=null,spellcheck:O,type:m,uniqueId:j,disabled:v}=s,g=s.className;Object.prototype.hasOwnProperty.call(s,"onChange")&&console.error("Error: Form fields that rely on InputBase may not have an onChange property");const h=t(e=>{s.onInput(e)},[s.onInput]),P=t(e=>{(null==s?void 0:s.onKeyPress)&&s.onKeyPress(e)},[null==s?void 0:s.onKeyPress]),w=t(e=>{(null==s?void 0:s.onKeyUp)&&s.onKeyUp(e)},[null==s?void 0:s.onKeyUp]),I=t(e=>{var t,r;null==s||null===(t=s.onBlurHandler)||void 0===t||t.call(s,e),s.trimOnBlur&&(e.target.value=e.target.value.trim()),null==s||null===(r=s.onBlur)||void 0===r||r.call(s,e)},[s.onBlur,s.onBlurHandler]),k=t(e=>{var t;null==s||null===(t=s.onFocusHandler)||void 0===t||t.call(s,e)},[s.onFocusHandler]),_=r("adyen-checkout__input",[`adyen-checkout__input--${m}`],g,{"adyen-checkout__input--invalid":y,"adyen-checkout__input--valid":f},d.map(e=>`adyen-checkout__input--${e}`)),{classNameModifiers:x,uniqueId:E,isInvalid:K,isValid:B,addContextualElement:C,"aria-describedby":N,autocomplete:S}=s,q=i(s,["classNameModifiers","uniqueId","isInvalid","isValid","addContextualElement","aria-describedby","autocomplete"]),R=["string"==typeof N&&N?N:null,j?`${j}${y?n:o}`:null].filter(Boolean).join(" ")||null;return e("input",a(function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter(function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable}))),n.forEach(function(t){l(e,t,r[t])})}return e}({id:j},q),{autocomplete:S,"aria-required":q.required,type:m,className:_,readOnly:b,spellcheck:O,autoCorrect:p,"aria-describedby":R,"aria-invalid":y,onInput:h,onBlur:I,onFocus:k,onKeyUp:w,onKeyPress:P,disabled:v,ref:c}))}u.defaultProps={type:"text",classNameModifiers:[]};export{u as default};
2
2
  //# sourceMappingURL=InputBase.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"InputBase.js","sources":["../../../../../src/components/internal/FormFields/InputBase.tsx"],"sourcesContent":["import {\n h,\n RefCallback,\n InputHTMLAttributes,\n GenericEventHandler,\n TargetedInputEvent,\n TargetedKeyboardEvent,\n TargetedFocusEvent,\n TargetedEvent\n} from 'preact';\nimport { useCallback } from 'preact/hooks';\nimport classNames from 'classnames';\nimport { ARIA_CONTEXT_SUFFIX, ARIA_ERROR_SUFFIX } from '../../../core/Errors/constants';\nimport Language from '../../../language';\nimport { AutocompleteValue } from './types';\nimport './FormFields.scss';\n\nexport interface InputBaseProps extends InputHTMLAttributes {\n classNameModifiers?: string[];\n isInvalid?: boolean;\n isValid?: boolean;\n readonly?: boolean;\n uniqueId?: string;\n disabled?: boolean;\n className?: string;\n placeholder?: string;\n value?: string;\n name?: string;\n checked?: boolean;\n setRef?: RefCallback<HTMLInputElement>;\n trimOnBlur?: boolean;\n i18n?: Language;\n label?: string;\n onBlurHandler?: GenericEventHandler<HTMLInputElement>;\n onFocusHandler?: GenericEventHandler<HTMLInputElement>;\n maxlength?: number | null;\n addContextualElement?: boolean;\n type?: string;\n /**\n * WCAG 2.2 autocomplete token for browser autofill.\n * Pass undefined to omit the attribute entirely.\n * @see https://www.w3.org/TR/WCAG22/#input-purposes\n */\n autocomplete: AutocompleteValue;\n}\n\nexport default function InputBase({ setRef, ...props }: Readonly<InputBaseProps>) {\n const { autoCorrect, classNameModifiers, isInvalid, isValid, readonly = null, spellcheck, type, uniqueId, disabled } = props;\n const className = props.className;\n\n /**\n * To avoid confusion with misplaced/misdirected onChange handlers - InputBase only accepts onInput, onBlur & onFocus handlers.\n * The first 2 being the means by which we expect useForm--handleChangeFor validation functionality to be applied.\n */\n if (Object.prototype.hasOwnProperty.call(props, 'onChange')) {\n console.error('Error: Form fields that rely on InputBase may not have an onChange property');\n }\n\n const handleInput = useCallback(\n (event: TargetedInputEvent<HTMLInputElement>) => {\n props.onInput(event);\n },\n [props.onInput]\n );\n\n /**\n * Event is fired when a key that produces a character value is pressed down.\n * ENTER keypress also triggers this event.\n *\n * TODO: 'keypress' event is deprecated\n * https://developer.mozilla.org/en-US/docs/Web/API/Element/keypress_event\n */\n const handleKeyPress = useCallback(\n (event: TargetedKeyboardEvent<HTMLInputElement>) => {\n if (props?.onKeyPress) props.onKeyPress(event);\n },\n [props?.onKeyPress]\n );\n\n /**\n * Event is fired when certain keys are pressed (keys that do not output characters):\n * Backspace, Arrow keys, Shift, Ctrl, Command, Option, Esc\n *\n * Exception: ENTER keypress triggers 'onKeyPress' AND 'onKeyUp'\n */\n const handleKeyUp = useCallback(\n (event: TargetedKeyboardEvent<HTMLInputElement>) => {\n if (props?.onKeyUp) props.onKeyUp(event);\n },\n [props?.onKeyUp]\n );\n\n const handleBlur = useCallback(\n (event: TargetedFocusEvent<HTMLInputElement>) => {\n props?.onBlurHandler?.(event); // From Field component\n\n if (props.trimOnBlur) {\n (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: 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, autocomplete, ...restProps } = props;\n\n return (\n <input\n id={uniqueId}\n {...restProps}\n // eslint-disable-next-line react/no-unknown-property -- Preact uses lowercase 'autocomplete'\n autocomplete={autocomplete}\n aria-required={restProps.required}\n type={type}\n className={inputClassNames}\n readOnly={readonly}\n // eslint-disable-next-line react/no-unknown-property -- Preact uses lowercase 'spellcheck'\n spellcheck={spellcheck}\n autoCorrect={autoCorrect}\n aria-describedby={`${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","_0","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","autocomplete","restProps","h","input","id","aria-required","required","readOnly","aria-describedby","ARIA_ERROR_SUFFIX","ARIA_CONTEXT_SUFFIX","aria-invalid","onFocus","ref","defaultProps"],"mappings":"03CA8Ce,SAASA,EAAUC,OAAAC,OAAEA,GAA4CD,EAAjCE,EAAAA,EAAAA,EAAAA,YAC3C,MAAMC,YAAEA,EAAWC,mBAAEA,EAAkBC,UAAEA,EAASC,QAAEA,EAAOC,SAAEA,EAAW,KAAIC,WAAEA,EAAUC,KAAEA,EAAIC,SAAEA,EAAQC,SAAEA,GAAaT,EACjHU,EAAYV,EAAMU,UAMpBC,OAAOC,UAAUC,eAAeC,KAAKd,EAAO,aAC5Ce,QAAQC,MAAM,+EAGlB,MAAMC,EAAcC,EACfC,IACGnB,EAAMoB,QAAQD,IAElB,CAACnB,EAAMoB,UAULC,EAAiBH,EAClBC,KACOnB,aAAAA,EAAAA,EAAOsB,aAAYtB,EAAMsB,WAAWH,IAE5C,CAACnB,aAAAA,EAAAA,EAAOsB,aASNC,EAAcL,EACfC,KACOnB,aAAAA,EAAAA,EAAOwB,UAASxB,EAAMwB,QAAQL,IAEtC,CAACnB,aAAAA,EAAAA,EAAOwB,UAGNC,EAAaP,EACdC,QACGnB,EAMAA,EANAA,iBAAAA,EAAAA,EAAO0B,qBAAP1B,IAAAA,GAAAA,EAAAA,KAAAA,EAAuBmB,GAEnBnB,EAAM2B,aACLR,EAAMS,OAA4BC,MAAQV,EAAOS,OAA4BC,MAAMC,QAGxF9B,SAAa,QAAbA,EAAAA,EAAO+B,cAAP/B,IAAAA,GAAAA,OAAAA,EAAgBmB,IAEpB,CAACnB,EAAM+B,OAAQ/B,EAAM0B,gBAGnBM,EAAcd,EACfC,IACGnB,IAAAA,EAAAA,iBAAAA,EAAAA,EAAOiC,sBAAPjC,IAAAA,GAAAA,EAAAA,KAAAA,EAAwBmB,IAE5B,CAACnB,EAAMiC,iBAGLC,EAAkBC,EACpB,wBACA,CAAC,0BAA0B5B,KAC3BG,EACA,CACI,iCAAkCP,EAClC,+BAAgCC,GAEpCF,EAAmBkC,IAAIC,GAAK,0BAA0BA,OAIlDnC,mBAAoBoC,EAAK9B,SAAU+B,EAAKpC,UAAWqC,EAAKpC,QAASqC,EAAIC,qBAAsBC,EAAGC,aAAEA,GAA+B5C,EAAd6C,EAAAA,EAAc7C,EAAAA,+FAEvI,OACI8C,EAACC,QAAAA,oUAAAA,CAAAA,CACGC,GAAIxC,GACAqC,GAAAA,CAEJD,aAAcA,EACdK,gBAAeJ,EAAUK,SACzB3C,KAAMA,EACNG,UAAWwB,EACXiB,SAAU9C,EAEVC,WAAYA,EACZL,YAAaA,EACbmD,mBAAkB,GAAG5C,IAAWL,EAAYkD,EAAoBC,IAChEC,eAAcpD,EACdiB,QAASH,EACTc,OAAQN,EACR+B,QAASxB,EACTR,QAASD,EACTD,WAAYD,EACZZ,SAAUA,EACVgD,IAAK1D,IAGjB,CAEAF,EAAU6D,aAAe,CACrBnD,KAAM,OACNL,mBAAoB"}
1
+ {"version":3,"file":"InputBase.js","sources":["../../../../../src/components/internal/FormFields/InputBase.tsx"],"sourcesContent":["import {\n h,\n RefCallback,\n InputHTMLAttributes,\n GenericEventHandler,\n TargetedInputEvent,\n TargetedKeyboardEvent,\n TargetedFocusEvent,\n TargetedEvent\n} from 'preact';\nimport { useCallback } from 'preact/hooks';\nimport classNames from 'classnames';\nimport { ARIA_CONTEXT_SUFFIX, ARIA_ERROR_SUFFIX } from '../../../core/Errors/constants';\nimport Language from '../../../language';\nimport { AutocompleteValue } from './types';\nimport './FormFields.scss';\n\nexport interface InputBaseProps extends InputHTMLAttributes {\n classNameModifiers?: string[];\n isInvalid?: boolean;\n isValid?: boolean;\n readonly?: boolean;\n uniqueId?: string;\n disabled?: boolean;\n className?: string;\n placeholder?: string;\n value?: string;\n name?: string;\n checked?: boolean;\n setRef?: RefCallback<HTMLInputElement>;\n trimOnBlur?: boolean;\n i18n?: Language;\n label?: string;\n onBlurHandler?: GenericEventHandler<HTMLInputElement>;\n onFocusHandler?: GenericEventHandler<HTMLInputElement>;\n maxlength?: number | null;\n addContextualElement?: boolean;\n type?: string;\n /**\n * WCAG 2.2 autocomplete token for browser autofill.\n * Pass undefined to omit the attribute entirely.\n * @see https://www.w3.org/TR/WCAG22/#input-purposes\n */\n autocomplete: AutocompleteValue;\n}\n\nexport default function InputBase({ setRef, ...props }: Readonly<InputBaseProps>) {\n const { autoCorrect, classNameModifiers, isInvalid, isValid, readonly = null, spellcheck, type, uniqueId, disabled } = props;\n const className = props.className;\n\n /**\n * To avoid confusion with misplaced/misdirected onChange handlers - InputBase only accepts onInput, onBlur & onFocus handlers.\n * The first 2 being the means by which we expect useForm--handleChangeFor validation functionality to be applied.\n */\n if (Object.prototype.hasOwnProperty.call(props, 'onChange')) {\n console.error('Error: Form fields that rely on InputBase may not have an onChange property');\n }\n\n const handleInput = useCallback(\n (event: TargetedInputEvent<HTMLInputElement>) => {\n props.onInput(event);\n },\n [props.onInput]\n );\n\n /**\n * Event is fired when a key that produces a character value is pressed down.\n * ENTER keypress also triggers this event.\n *\n * TODO: 'keypress' event is deprecated\n * https://developer.mozilla.org/en-US/docs/Web/API/Element/keypress_event\n */\n const handleKeyPress = useCallback(\n (event: TargetedKeyboardEvent<HTMLInputElement>) => {\n if (props?.onKeyPress) props.onKeyPress(event);\n },\n [props?.onKeyPress]\n );\n\n /**\n * Event is fired when certain keys are pressed (keys that do not output characters):\n * Backspace, Arrow keys, Shift, Ctrl, Command, Option, Esc\n *\n * Exception: ENTER keypress triggers 'onKeyPress' AND 'onKeyUp'\n */\n const handleKeyUp = useCallback(\n (event: TargetedKeyboardEvent<HTMLInputElement>) => {\n if (props?.onKeyUp) props.onKeyUp(event);\n },\n [props?.onKeyUp]\n );\n\n const handleBlur = useCallback(\n (event: TargetedFocusEvent<HTMLInputElement>) => {\n props?.onBlurHandler?.(event); // From Field component\n\n if (props.trimOnBlur) {\n (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: TargetedEvent<HTMLInputElement>) => {\n props?.onFocusHandler?.(event); // From Field component\n },\n [props.onFocusHandler]\n );\n\n const inputClassNames = classNames(\n 'adyen-checkout__input',\n [`adyen-checkout__input--${type}`],\n className,\n {\n 'adyen-checkout__input--invalid': isInvalid,\n 'adyen-checkout__input--valid': isValid\n },\n classNameModifiers.map(m => `adyen-checkout__input--${m}`)\n );\n\n // Don't spread classNameModifiers etc to input element (it ends up as an attribute on the element itself)\n const {\n classNameModifiers: cnm,\n uniqueId: uid,\n isInvalid: iiv,\n isValid: iv,\n addContextualElement: ace,\n 'aria-describedby': ariaDescribedByProp,\n autocomplete,\n ...restProps\n } = props;\n\n const internalDescribedBy = uniqueId ? `${uniqueId}${isInvalid ? ARIA_ERROR_SUFFIX : ARIA_CONTEXT_SUFFIX}` : null;\n const extraDescribedBy = typeof ariaDescribedByProp === 'string' && ariaDescribedByProp ? ariaDescribedByProp : null;\n const mergedAriaDescribedBy = [extraDescribedBy, internalDescribedBy].filter(Boolean).join(' ') || null;\n\n return (\n <input\n id={uniqueId}\n {...restProps}\n // eslint-disable-next-line react/no-unknown-property -- Preact uses lowercase 'autocomplete'\n autocomplete={autocomplete}\n aria-required={restProps.required}\n type={type}\n className={inputClassNames}\n readOnly={readonly}\n // eslint-disable-next-line react/no-unknown-property -- Preact uses lowercase 'spellcheck'\n spellcheck={spellcheck}\n autoCorrect={autoCorrect}\n aria-describedby={mergedAriaDescribedBy}\n aria-invalid={isInvalid}\n onInput={handleInput}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onKeyUp={handleKeyUp}\n onKeyPress={handleKeyPress}\n disabled={disabled}\n ref={setRef}\n />\n );\n}\n\nInputBase.defaultProps = {\n type: 'text',\n classNameModifiers: []\n};\n"],"names":["InputBase","_0","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","ariaDescribedByProp","autocomplete","restProps","mergedAriaDescribedBy","ARIA_ERROR_SUFFIX","ARIA_CONTEXT_SUFFIX","filter","Boolean","join","h","input","id","aria-required","required","readOnly","aria-describedby","aria-invalid","onFocus","ref","defaultProps"],"mappings":"03CA8Ce,SAASA,EAAUC,OAAAC,OAAEA,GAA4CD,EAAjCE,EAAAA,EAAAA,EAAAA,YAC3C,MAAMC,YAAEA,EAAWC,mBAAEA,EAAkBC,UAAEA,EAASC,QAAEA,EAAOC,SAAEA,EAAW,KAAIC,WAAEA,EAAUC,KAAEA,EAAIC,SAAEA,EAAQC,SAAEA,GAAaT,EACjHU,EAAYV,EAAMU,UAMpBC,OAAOC,UAAUC,eAAeC,KAAKd,EAAO,aAC5Ce,QAAQC,MAAM,+EAGlB,MAAMC,EAAcC,EACfC,IACGnB,EAAMoB,QAAQD,IAElB,CAACnB,EAAMoB,UAULC,EAAiBH,EAClBC,KACOnB,aAAAA,EAAAA,EAAOsB,aAAYtB,EAAMsB,WAAWH,IAE5C,CAACnB,aAAAA,EAAAA,EAAOsB,aASNC,EAAcL,EACfC,KACOnB,aAAAA,EAAAA,EAAOwB,UAASxB,EAAMwB,QAAQL,IAEtC,CAACnB,aAAAA,EAAAA,EAAOwB,UAGNC,EAAaP,EACdC,QACGnB,EAMAA,EANAA,iBAAAA,EAAAA,EAAO0B,qBAAP1B,IAAAA,GAAAA,EAAAA,KAAAA,EAAuBmB,GAEnBnB,EAAM2B,aACLR,EAAMS,OAA4BC,MAAQV,EAAOS,OAA4BC,MAAMC,QAGxF9B,SAAa,QAAbA,EAAAA,EAAO+B,cAAP/B,IAAAA,GAAAA,OAAAA,EAAgBmB,IAEpB,CAACnB,EAAM+B,OAAQ/B,EAAM0B,gBAGnBM,EAAcd,EACfC,IACGnB,IAAAA,EAAAA,iBAAAA,EAAAA,EAAOiC,sBAAPjC,IAAAA,GAAAA,EAAAA,KAAAA,EAAwBmB,IAE5B,CAACnB,EAAMiC,iBAGLC,EAAkBC,EACpB,wBACA,CAAC,0BAA0B5B,KAC3BG,EACA,CACI,iCAAkCP,EAClC,+BAAgCC,GAEpCF,EAAmBkC,IAAIC,GAAK,0BAA0BA,OAKtDnC,mBAAoBoC,EACpB9B,SAAU+B,EACVpC,UAAWqC,EACXpC,QAASqC,EACTC,qBAAsBC,EACtB,mBAAoBC,EAAmBC,aACvCA,GAEA7C,EADG8C,EAAAA,EACH9C,EAAAA,8EAHA,oCAOE+C,EAAwB,CAD0B,iBAAxBH,GAAoCA,EAAsBA,EAAsB,KADpFpC,EAAW,GAAGA,IAAWL,EAAY6C,EAAoBC,IAAwB,MAEvCC,OAAOC,SAASC,KAAK,MAAQ,KAEnG,OACIC,EAACC,QAAAA,oUAAAA,CAAAA,CACGC,GAAI/C,GACAsC,GAAAA,CAEJD,aAAcA,EACdW,gBAAeV,EAAUW,SACzBlD,KAAMA,EACNG,UAAWwB,EACXwB,SAAUrD,EAEVC,WAAYA,EACZL,YAAaA,EACb0D,mBAAkBZ,EAClBa,eAAczD,EACdiB,QAASH,EACTc,OAAQN,EACRoC,QAAS7B,EACTR,QAASD,EACTD,WAAYD,EACZZ,SAAUA,EACVqD,IAAK/D,IAGjB,CAEAF,EAAUkE,aAAe,CACrBxD,KAAM,OACNL,mBAAoB"}
@@ -1,2 +1,2 @@
1
- import{createElement as e}from"../../../../external/preact/dist/preact.js";import{useRef as t,useState as n,useMemo as r,useEffect as l}from"../../../../external/preact/hooks/dist/hooks.js";import s from"../../../../_virtual/index.js";import o from"./components/SelectButton.js";import a from"./components/SelectList.js";import i from"../../../../utils/uuid.js";import{keys as c}from"./constants.js";import{ARIA_ERROR_SUFFIX as u,ARIA_CONTEXT_SUFFIX as d}from"../../../../core/Errors/constants.js";import{simulateFocusScroll as m}from"../utils.js";import{useCoreContext as f}from"../../../../core/Context/CoreProvider.js";function p({items:p=[],className:g="",classNameModifiers:v=[],filterable:h=!0,readonly:y=!1,onChange:k=()=>{},onInput:b,selectedValue:w,name:I,isInvalid:L,isValid:j,placeholder:x,uniqueId:D,disabled:T,disableTextFilter:C,clearOnSelect:E,blurOnClose:N,onListToggle:B,required:S}){const{i18n:$}=f(),_=t(null),M=t(null),P=t(null),R=t(null),[q,O]=n(null),[V,A]=n(!1),[F,H]=n(null),K=r(()=>`select-${i()}`,[]),U=p.find(e=>e.id===w)||{},[z,G]=n(),[J,Q]=n(U),W=U,X=C?p:p.filter(e=>!q||e.name.toLowerCase().includes(q.toLowerCase())),Y=D?`${D}${L?u:d}`:null,Z=e=>{if(!e)return;const t=document.getElementById(`listItem-${e.id}`);m(t)},ee=()=>{N&&_.current.blur(),A(!1)},te=()=>{A(!0)},ne=e=>{const t=e.currentTarget.getAttribute("data-value");return X.find(e=>e.id==t)},re=e=>{let t;e.preventDefault(),t=e.currentTarget instanceof HTMLElement&&"option"===e.currentTarget.getAttribute("role")?ne(e):J.id&&X.some(e=>e.id===J.id)?J:q?X[0]:{id:w},t&&!t.disabled&&(k({target:{value:t.id,name:I}}),E&&G(null),ee())},le=e=>{switch(e.key){case c.space:case c.enter:re(e);break;case c.arrowDown:e.preventDefault(),(()=>{if(!X||X.length<1)return;const e=X.findIndex(e=>e===J)+1,t=e<X.length?e:0,n=X[t];Z(n),Q(n)})();break;case c.arrowUp:e.preventDefault(),(()=>{if(!X||X.length<1)return;const e=X.findIndex(e=>e===J)-1,t=e<0?X.length-1:e,n=X[t];Z(n),Q(n)})()}};return l(()=>{V?G(null):O(null)},[V]),l(()=>{V&&h&&_.current&&_.current.focus(),null==B||B(V)},[V]),l(()=>{function e(e){(e.composedPath?!e.composedPath().includes(M.current):!M.current.contains(e.target))&&ee()}return document.addEventListener("click",e,!1),()=>{document.removeEventListener("click",e,!1)}},[M]),l(()=>{const e=setTimeout(()=>{0===X.length?H($.get("select.noOptionsFound")):H($.get("select.results",{values:{count:X.length}}))},500);return()=>clearTimeout(e)},[V,X.length,$]),e("div",{className:s(["adyen-checkout__dropdown",g,...v.map(e=>`adyen-checkout__dropdown--${e}`)]),ref:M},e(o,{inputText:z,id:null!=D?D:null,active:J,selected:W,filterInputRef:_,filterable:h,isInvalid:L,isValid:j,onButtonKeyDown:e=>{e.key===c.enter&&h&&V&&q?re(e):e.key===c.escape?ee():![c.arrowUp,c.arrowDown,c.enter].includes(e.key)&&(e.key!==c.space||h&&V)?(e.shiftKey&&e.key===c.tab||e.key===c.tab)&&ee():(e.preventDefault(),V?le(e):te())},onInput:e=>{const t=e.target.value;G(t),O(t),V||te(),b&&b(t)},placeholder:x,readonly:y,selectListId:K,showList:V,toggleButtonRef:P,toggleList:e=>{e.preventDefault(),V?(G(W.name),ee()):(G(null),te())},disabled:T,ariaDescribedBy:Y,required:S}),e(a,{active:J,filteredItems:X,onHover:e=>{e.preventDefault();const t=ne(e);Q(t)},onSelect:re,selected:W,selectListId:K,selectListRef:R,showList:V}),e("div",{key:z,role:"status","aria-live":"polite","aria-relevant":"additions text",className:"adyen-checkout-sr-panel--sr-only"},F))}p.defaultProps={className:"",classNameModifiers:[],filterable:!0,items:[],readonly:!1,onChange:()=>{}};export{p as default};
1
+ import{createElement as e}from"../../../../external/preact/dist/preact.js";import{useRef as t,useState as n,useMemo as r,useEffect as l}from"../../../../external/preact/hooks/dist/hooks.js";import s from"../../../../_virtual/index.js";import o from"./components/SelectButton.js";import a from"./components/SelectList.js";import i from"../../../../utils/uuid.js";import{keys as c}from"./constants.js";import{ARIA_ERROR_SUFFIX as u,ARIA_CONTEXT_SUFFIX as d}from"../../../../core/Errors/constants.js";import{simulateFocusScroll as m}from"../utils.js";import{useCoreContext as f}from"../../../../core/Context/CoreProvider.js";function p({items:p=[],className:g="",classNameModifiers:v=[],filterable:h=!0,readonly:y=!1,onChange:b=()=>{},onInput:k,selectedValue:w,name:I,isInvalid:L,isValid:j,placeholder:D,uniqueId:x,disabled:T,disableTextFilter:B,clearOnSelect:C,blurOnClose:E,onListToggle:N,required:S,additionalDescribedBy:$}){const{i18n:_}=f(),M=t(null),P=t(null),R=t(null),q=t(null),[O,V]=n(null),[A,F]=n(!1),[H,K]=n(null),U=r(()=>`select-${i()}`,[]),z=p.find(e=>e.id===w)||{},[G,J]=n(),[Q,W]=n(z),X=z,Y=B?p:p.filter(e=>!O||e.name.toLowerCase().includes(O.toLowerCase())),Z=[x?`${x}${L?u:d}`:null,$].filter(Boolean).join(" ")||null,ee=e=>{if(!e)return;const t=document.getElementById(`listItem-${e.id}`);m(t)},te=()=>{E&&M.current.blur(),F(!1)},ne=()=>{F(!0)},re=e=>{const t=e.currentTarget.getAttribute("data-value");return Y.find(e=>e.id==t)},le=e=>{let t;e.preventDefault(),t=e.currentTarget instanceof HTMLElement&&"option"===e.currentTarget.getAttribute("role")?re(e):Q.id&&Y.some(e=>e.id===Q.id)?Q:O?Y[0]:{id:w},t&&!t.disabled&&(b({target:{value:t.id,name:I}}),C&&J(null),te())},se=e=>{switch(e.key){case c.space:case c.enter:le(e);break;case c.arrowDown:e.preventDefault(),(()=>{if(!Y||Y.length<1)return;const e=Y.findIndex(e=>e.id===Q.id)+1,t=e<Y.length?e:0,n=Y[t];ee(n),W(n)})();break;case c.arrowUp:e.preventDefault(),(()=>{if(!Y||Y.length<1)return;const e=Y.findIndex(e=>e.id===Q.id)-1,t=e<0?Y.length-1:e,n=Y[t];ee(n),W(n)})()}};return l(()=>{A?J(null):V(null)},[A]),l(()=>{A&&h&&M.current&&M.current.focus(),null==N||N(A)},[A]),l(()=>{function e(e){(e.composedPath?!e.composedPath().includes(P.current):!P.current.contains(e.target))&&te()}return document.addEventListener("click",e,!1),()=>{document.removeEventListener("click",e,!1)}},[P]),l(()=>{const e=setTimeout(()=>{0===Y.length?K(_.get("select.noOptionsFound")):K(_.get("select.results",{values:{count:Y.length}}))},500);return()=>clearTimeout(e)},[A,Y.length,_]),e("div",{className:s(["adyen-checkout__dropdown",g,...v.map(e=>`adyen-checkout__dropdown--${e}`)]),ref:P},e(o,{inputText:G,id:null!=x?x:null,active:Q,selected:X,filterInputRef:M,filterable:h,isInvalid:L,isValid:j,onButtonKeyDown:e=>{e.key===c.enter&&h&&A&&O?le(e):e.key===c.escape?te():![c.arrowUp,c.arrowDown,c.enter].includes(e.key)&&(e.key!==c.space||h&&A)?(e.shiftKey&&e.key===c.tab||e.key===c.tab)&&te():(e.preventDefault(),A?se(e):ne())},onInput:e=>{const t=e.target.value;J(t),V(t),A||ne(),k&&k(t)},placeholder:D,readonly:y,selectListId:U,showList:A,toggleButtonRef:R,toggleList:e=>{e.preventDefault(),A?(J(X.name),te()):(J(null),ne())},disabled:T,ariaDescribedBy:Z,required:S}),e(a,{active:Q,filteredItems:Y,onHover:e=>{e.preventDefault();const t=re(e);W(t)},onSelect:le,selected:X,selectListId:U,selectListRef:q,showList:A}),e("div",{key:G,role:"status","aria-live":"polite","aria-relevant":"additions text",className:"adyen-checkout-sr-panel--sr-only"},H))}p.defaultProps={className:"",classNameModifiers:[],filterable:!0,items:[],readonly:!1,onChange:()=>{}};export{p as default};
2
2
  //# sourceMappingURL=Select.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Select.js","sources":["../../../../../../src/components/internal/FormFields/Select/Select.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useEffect, useMemo, useRef, useState } from 'preact/hooks';\nimport cx from 'classnames';\nimport SelectButton from './components/SelectButton';\nimport SelectList from './components/SelectList';\nimport uuid from '../../../../utils/uuid';\nimport { keys } from './constants';\nimport { SelectItem, SelectProps } from './types';\nimport './Select.scss';\nimport { ARIA_CONTEXT_SUFFIX, ARIA_ERROR_SUFFIX } from '../../../../core/Errors/constants';\nimport { simulateFocusScroll } from '../utils';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\n\nfunction Select({\n items = [],\n className = '',\n classNameModifiers = [],\n filterable = true,\n readonly = false,\n onChange = () => {},\n onInput,\n selectedValue,\n name,\n isInvalid,\n isValid,\n placeholder,\n uniqueId,\n disabled,\n disableTextFilter,\n clearOnSelect,\n blurOnClose,\n onListToggle,\n required\n}: Readonly<SelectProps>) {\n const { i18n } = useCoreContext();\n const filterInputRef = useRef(null);\n const selectContainerRef = useRef(null);\n const toggleButtonRef = useRef(null);\n const selectListRef = useRef(null);\n const [textFilter, setTextFilter] = useState<string>(null);\n const [showList, setShowList] = useState<boolean>(false);\n const [statusMessage, setStatusMessage] = useState<string | null>(null);\n const selectListId: string = useMemo(() => `select-${uuid()}`, []);\n\n const active: SelectItem = items.find(i => i.id === selectedValue) || ({} as SelectItem);\n\n const [inputText, setInputText] = useState<string>();\n\n const [activeOption, setActiveOption] = useState<SelectItem>(active);\n\n const selectedOption = active;\n\n const filteredItems = disableTextFilter ? items : items.filter(item => !textFilter || item.name.toLowerCase().includes(textFilter.toLowerCase()));\n\n const suffix = isInvalid ? ARIA_ERROR_SUFFIX : ARIA_CONTEXT_SUFFIX;\n const 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 if (blurOnClose) {\n filterInputRef.current.blur();\n }\n setShowList(false);\n };\n\n const openList = () => {\n setShowList(true);\n };\n\n const extractItemFromEvent = (e: Event): SelectItem => {\n const value = (e.currentTarget as HTMLInputElement).getAttribute('data-value');\n return filteredItems.find(listItem => listItem.id == value);\n };\n\n /**\n * Closes the select list and fires an onChange\n * @param e - Event\n */\n const handleSelect = (e: Event) => {\n e.preventDefault();\n\n // We use a local variable here since writing and if statement is cleaner then a long ternary\n let valueToEmit;\n\n if (e.currentTarget instanceof HTMLElement && e.currentTarget.getAttribute('role') === 'option') {\n // This is the main scenario when clicking and item in the list\n // Item comes from the event\n valueToEmit = extractItemFromEvent(e);\n } else if (activeOption.id && filteredItems.some(item => item.id === activeOption.id)) {\n // This is the scenario where a user is using the keyboard to navigate\n // In the case item comes from the visually select item\n valueToEmit = activeOption;\n } else {\n // This is the scenario the user didn't select anything\n if (textFilter) {\n // if we filtering for something then select the first option\n valueToEmit = filteredItems[0];\n } else {\n // This will happen when we want to keep an already chosen option\n // If no active option we should just emit again with the value that was already selected\n valueToEmit = { id: selectedValue };\n }\n }\n\n if (valueToEmit && !valueToEmit.disabled) {\n onChange({ target: { value: valueToEmit.id, name: name } });\n\n if (clearOnSelect) setInputText(null);\n\n closeList();\n }\n };\n\n /**\n * Handles hovering and directions\n * @param e - Event\n */\n const handleHover = (e: Event) => {\n e.preventDefault();\n const item = extractItemFromEvent(e);\n setActiveOption(item);\n };\n\n /**\n * Handle keyDown events on the selectList button\n * Responsible for opening and closing the list\n * @param e - KeyboardEvent\n */\n const handleButtonKeyDown = (e: KeyboardEvent) => {\n if (e.key === keys.enter && filterable && showList && textFilter) {\n handleSelect(e);\n } else if (e.key === keys.escape) {\n // When user has focused Select button but not yet moved into Select list - close list and keep focus on the Select Button re. a11y guidelines\n // https://w3c.github.io/aria-practices/examples/disclosure/disclosure-navigation.html\n closeList();\n } else if ([keys.arrowUp, keys.arrowDown, keys.enter].includes(e.key) || (e.key === keys.space && (!filterable || !showList))) {\n e.preventDefault();\n if (!showList) {\n openList();\n } else {\n handleNavigationKeys(e);\n }\n } else if (e.shiftKey && e.key === keys.tab) {\n // Shift-Tab out of Select - close list re. a11y guidelines (above)\n closeList();\n } else if (e.key === keys.tab) {\n closeList();\n }\n };\n\n /**\n * Handles movement with navigation keys and enter\n * Navigates through the list, or select an element, or focus the filter input, or close the menu.\n * @param e - KeyDownEvent\n */\n const handleNavigationKeys = (e: KeyboardEvent) => {\n switch (e.key) {\n case keys.space:\n case keys.enter:\n handleSelect(e);\n break;\n case keys.arrowDown:\n e.preventDefault();\n setNextActive();\n break;\n case keys.arrowUp:\n e.preventDefault();\n setPreviousActive();\n break;\n default:\n }\n };\n\n /**\n * Updates the state with the current text filter value and opens the dropdown\n * @param e - KeyboardEvent\n */\n const handleTextFilter = (e: KeyboardEvent) => {\n const value: string = (e.target as HTMLInputElement).value;\n setInputText(value);\n setTextFilter(value);\n\n // Open the dropdown when user starts typing\n if (!showList) {\n openList();\n }\n\n if (onInput) {\n onInput(value);\n }\n };\n\n /**\n * Toggles the selectList and focuses in either the filter input or in the selectList button\n * @param e - Event\n */\n const toggleList = (e: Event) => {\n e.preventDefault();\n if (!showList) {\n setInputText(null);\n openList();\n } else {\n setInputText(selectedOption.name);\n closeList();\n }\n };\n\n useEffect(() => {\n if (showList) {\n setInputText(null);\n } else {\n setTextFilter(null);\n }\n }, [showList]);\n\n /**\n * Focus on the input if filterable\n */\n useEffect(() => {\n if (showList && filterable && filterInputRef.current) {\n filterInputRef.current.focus();\n }\n onListToggle?.(showList);\n }, [showList]);\n\n useEffect(() => {\n /**\n * Close the select list when clicking outside the list\n * @param e - MouseEvent\n */\n function handleClickOutside(e: MouseEvent) {\n // use composedPath so it can also check when inside a web component\n // if composedPath is not available fallback to e.target\n const clickIsOutside = e.composedPath\n ? !e.composedPath().includes(selectContainerRef.current)\n : !selectContainerRef.current.contains(e.target);\n if (clickIsOutside) {\n closeList();\n }\n }\n\n document.addEventListener('click', handleClickOutside, false);\n\n return () => {\n document.removeEventListener('click', handleClickOutside, false);\n };\n }, [selectContainerRef]);\n\n /**\n * Update status message for screen readers when no options are found\n */\n useEffect(() => {\n // Debounce to avoid announcing on every keystroke\n const SR_ANNOUNCEMENT_DELAY_MS = 500;\n const timer = setTimeout(() => {\n if (filteredItems.length === 0) {\n setStatusMessage(i18n.get('select.noOptionsFound'));\n } else {\n setStatusMessage(i18n.get('select.results', { values: { count: filteredItems.length } }));\n }\n }, SR_ANNOUNCEMENT_DELAY_MS);\n\n return () => clearTimeout(timer);\n }, [showList, filteredItems.length, i18n]);\n\n return (\n <div\n className={cx(['adyen-checkout__dropdown', className, ...classNameModifiers.map(m => `adyen-checkout__dropdown--${m}`)])}\n ref={selectContainerRef}\n >\n <SelectButton\n inputText={inputText}\n id={uniqueId ?? null}\n active={activeOption}\n selected={selectedOption}\n filterInputRef={filterInputRef}\n filterable={filterable}\n isInvalid={isInvalid}\n isValid={isValid}\n onButtonKeyDown={handleButtonKeyDown}\n onInput={handleTextFilter}\n placeholder={placeholder}\n readonly={readonly}\n selectListId={selectListId}\n showList={showList}\n toggleButtonRef={toggleButtonRef}\n toggleList={toggleList}\n disabled={disabled}\n ariaDescribedBy={ariaDescribedBy}\n required={required}\n />\n <SelectList\n active={activeOption}\n filteredItems={filteredItems}\n onHover={handleHover}\n onSelect={handleSelect}\n selected={selectedOption}\n selectListId={selectListId}\n selectListRef={selectListRef}\n showList={showList}\n />\n <div\n key={inputText}\n role=\"status\"\n aria-live=\"polite\"\n // aria-relevant seems to be needed here make make sure a second time we get\n // \"No options found\" we still announce the status message.\n // What happens otherwise is that just the first status message is announced\n // tested on VoiceOver on Chrome\n aria-relevant=\"additions text\"\n className=\"adyen-checkout-sr-panel--sr-only\"\n >\n {statusMessage}\n </div>\n </div>\n );\n}\n\nSelect.defaultProps = {\n className: '',\n classNameModifiers: [],\n filterable: true,\n items: [],\n readonly: false,\n onChange: () => {}\n};\n\nexport default Select;\n"],"names":["Select","items","className","classNameModifiers","filterable","readonly","onChange","onInput","selectedValue","name","isInvalid","isValid","placeholder","uniqueId","disabled","disableTextFilter","clearOnSelect","blurOnClose","onListToggle","required","i18n","useCoreContext","filterInputRef","useRef","selectContainerRef","toggleButtonRef","selectListRef","textFilter","setTextFilter","useState","showList","setShowList","statusMessage","setStatusMessage","selectListId","useMemo","uuid","active","find","i","id","inputText","setInputText","activeOption","setActiveOption","selectedOption","filteredItems","filter","item","toLowerCase","includes","ariaDescribedBy","ARIA_ERROR_SUFFIX","ARIA_CONTEXT_SUFFIX","scrollToItem","nextElement","document","getElementById","simulateFocusScroll","closeList","current","blur","openList","extractItemFromEvent","e","value","currentTarget","getAttribute","listItem","handleSelect","valueToEmit","preventDefault","HTMLElement","some","target","handleNavigationKeys","key","keys","space","enter","arrowDown","length","possibleNextIndex","findIndex","nextIndex","nextItem","setNextActive","arrowUp","setPreviousActive","useEffect","focus","handleClickOutside","composedPath","contains","addEventListener","removeEventListener","timer","setTimeout","get","values","count","clearTimeout","h","div","cx","map","m","ref","SelectButton","selected","onButtonKeyDown","escape","shiftKey","tab","toggleList","SelectList","onHover","onSelect","role","aria-live","aria-relevant","defaultProps"],"mappings":"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"}
1
+ {"version":3,"file":"Select.js","sources":["../../../../../../src/components/internal/FormFields/Select/Select.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useEffect, useMemo, useRef, useState } from 'preact/hooks';\nimport cx from 'classnames';\nimport SelectButton from './components/SelectButton';\nimport SelectList from './components/SelectList';\nimport uuid from '../../../../utils/uuid';\nimport { keys } from './constants';\nimport { SelectItem, SelectProps } from './types';\nimport './Select.scss';\nimport { ARIA_CONTEXT_SUFFIX, ARIA_ERROR_SUFFIX } from '../../../../core/Errors/constants';\nimport { simulateFocusScroll } from '../utils';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\n\nfunction Select({\n items = [],\n className = '',\n classNameModifiers = [],\n filterable = true,\n readonly = false,\n onChange = () => {},\n onInput,\n selectedValue,\n name,\n isInvalid,\n isValid,\n placeholder,\n uniqueId,\n disabled,\n disableTextFilter,\n clearOnSelect,\n blurOnClose,\n onListToggle,\n required,\n additionalDescribedBy\n}: Readonly<SelectProps>) {\n const { i18n } = useCoreContext();\n const filterInputRef = useRef(null);\n const selectContainerRef = useRef(null);\n const toggleButtonRef = useRef(null);\n const selectListRef = useRef(null);\n const [textFilter, setTextFilter] = useState<string>(null);\n const [showList, setShowList] = useState<boolean>(false);\n const [statusMessage, setStatusMessage] = useState<string | null>(null);\n const selectListId: string = useMemo(() => `select-${uuid()}`, []);\n\n const active: SelectItem = items.find(i => i.id === selectedValue) || ({} as SelectItem);\n\n const [inputText, setInputText] = useState<string>();\n\n const [activeOption, setActiveOption] = useState<SelectItem>(active);\n\n const selectedOption = active;\n\n const filteredItems = disableTextFilter ? items : items.filter(item => !textFilter || item.name.toLowerCase().includes(textFilter.toLowerCase()));\n\n const suffix = isInvalid ? ARIA_ERROR_SUFFIX : ARIA_CONTEXT_SUFFIX;\n const baseDescribedBy = uniqueId ? `${uniqueId}${suffix}` : null;\n const ariaDescribedBy = [baseDescribedBy, additionalDescribedBy].filter(Boolean).join(' ') || null;\n\n const setNextActive = () => {\n if (!filteredItems || filteredItems.length < 1) return;\n const possibleNextIndex = filteredItems.findIndex(listItem => listItem.id === activeOption.id) + 1;\n const nextIndex = possibleNextIndex < filteredItems.length ? possibleNextIndex : 0;\n const nextItem = filteredItems[nextIndex];\n scrollToItem(nextItem);\n setActiveOption(nextItem);\n };\n\n const setPreviousActive = () => {\n if (!filteredItems || filteredItems.length < 1) return;\n const possibleNextIndex = filteredItems.findIndex(listItem => listItem.id === activeOption.id) - 1;\n const nextIndex = possibleNextIndex < 0 ? filteredItems.length - 1 : possibleNextIndex;\n const nextItem = filteredItems[nextIndex];\n scrollToItem(nextItem);\n setActiveOption(nextItem);\n };\n\n const scrollToItem = (item: SelectItem) => {\n if (!item) return;\n const nextElement = document.getElementById(`listItem-${item.id}`);\n simulateFocusScroll(nextElement);\n };\n\n /**\n * Closes the selectList, empties the text filter and focuses the button element\n */\n const closeList = () => {\n //blurs the field when the list is closed, makes for a better UX for most users, needs more testing\n if (blurOnClose) {\n filterInputRef.current.blur();\n }\n setShowList(false);\n };\n\n const openList = () => {\n setShowList(true);\n };\n\n const extractItemFromEvent = (e: Event): SelectItem => {\n const value = (e.currentTarget as HTMLInputElement).getAttribute('data-value');\n return filteredItems.find(listItem => listItem.id == value);\n };\n\n /**\n * Closes the select list and fires an onChange\n * @param e - Event\n */\n const handleSelect = (e: Event) => {\n e.preventDefault();\n\n // We use a local variable here since writing and if statement is cleaner then a long ternary\n let valueToEmit;\n\n if (e.currentTarget instanceof HTMLElement && e.currentTarget.getAttribute('role') === 'option') {\n // This is the main scenario when clicking and item in the list\n // Item comes from the event\n valueToEmit = extractItemFromEvent(e);\n } else if (activeOption.id && filteredItems.some(item => item.id === activeOption.id)) {\n // This is the scenario where a user is using the keyboard to navigate\n // In the case item comes from the visually select item\n valueToEmit = activeOption;\n } else {\n // This is the scenario the user didn't select anything\n if (textFilter) {\n // if we filtering for something then select the first option\n valueToEmit = filteredItems[0];\n } else {\n // This will happen when we want to keep an already chosen option\n // If no active option we should just emit again with the value that was already selected\n valueToEmit = { id: selectedValue };\n }\n }\n\n if (valueToEmit && !valueToEmit.disabled) {\n onChange({ target: { value: valueToEmit.id, name: name } });\n\n if (clearOnSelect) setInputText(null);\n\n closeList();\n }\n };\n\n /**\n * Handles hovering and directions\n * @param e - Event\n */\n const handleHover = (e: Event) => {\n e.preventDefault();\n const item = extractItemFromEvent(e);\n setActiveOption(item);\n };\n\n /**\n * Handle keyDown events on the selectList button\n * Responsible for opening and closing the list\n * @param e - KeyboardEvent\n */\n const handleButtonKeyDown = (e: KeyboardEvent) => {\n if (e.key === keys.enter && filterable && showList && textFilter) {\n handleSelect(e);\n } else if (e.key === keys.escape) {\n // When user has focused Select button but not yet moved into Select list - close list and keep focus on the Select Button re. a11y guidelines\n // https://w3c.github.io/aria-practices/examples/disclosure/disclosure-navigation.html\n closeList();\n } else if ([keys.arrowUp, keys.arrowDown, keys.enter].includes(e.key) || (e.key === keys.space && (!filterable || !showList))) {\n e.preventDefault();\n if (!showList) {\n openList();\n } else {\n handleNavigationKeys(e);\n }\n } else if (e.shiftKey && e.key === keys.tab) {\n // Shift-Tab out of Select - close list re. a11y guidelines (above)\n closeList();\n } else if (e.key === keys.tab) {\n closeList();\n }\n };\n\n /**\n * Handles movement with navigation keys and enter\n * Navigates through the list, or select an element, or focus the filter input, or close the menu.\n * @param e - KeyDownEvent\n */\n const handleNavigationKeys = (e: KeyboardEvent) => {\n switch (e.key) {\n case keys.space:\n case keys.enter:\n handleSelect(e);\n break;\n case keys.arrowDown:\n e.preventDefault();\n setNextActive();\n break;\n case keys.arrowUp:\n e.preventDefault();\n setPreviousActive();\n break;\n default:\n }\n };\n\n /**\n * Updates the state with the current text filter value and opens the dropdown\n * @param e - KeyboardEvent\n */\n const handleTextFilter = (e: KeyboardEvent) => {\n const value: string = (e.target as HTMLInputElement).value;\n setInputText(value);\n setTextFilter(value);\n\n // Open the dropdown when user starts typing\n if (!showList) {\n openList();\n }\n\n if (onInput) {\n onInput(value);\n }\n };\n\n /**\n * Toggles the selectList and focuses in either the filter input or in the selectList button\n * @param e - Event\n */\n const toggleList = (e: Event) => {\n e.preventDefault();\n if (!showList) {\n setInputText(null);\n openList();\n } else {\n setInputText(selectedOption.name);\n closeList();\n }\n };\n\n useEffect(() => {\n if (showList) {\n setInputText(null);\n } else {\n setTextFilter(null);\n }\n }, [showList]);\n\n /**\n * Focus on the input if filterable\n */\n useEffect(() => {\n if (showList && filterable && filterInputRef.current) {\n filterInputRef.current.focus();\n }\n onListToggle?.(showList);\n }, [showList]);\n\n useEffect(() => {\n /**\n * Close the select list when clicking outside the list\n * @param e - MouseEvent\n */\n function handleClickOutside(e: MouseEvent) {\n // use composedPath so it can also check when inside a web component\n // if composedPath is not available fallback to e.target\n const clickIsOutside = e.composedPath\n ? !e.composedPath().includes(selectContainerRef.current)\n : !selectContainerRef.current.contains(e.target);\n if (clickIsOutside) {\n closeList();\n }\n }\n\n document.addEventListener('click', handleClickOutside, false);\n\n return () => {\n document.removeEventListener('click', handleClickOutside, false);\n };\n }, [selectContainerRef]);\n\n /**\n * Update status message for screen readers when no options are found\n */\n useEffect(() => {\n // Debounce to avoid announcing on every keystroke\n const SR_ANNOUNCEMENT_DELAY_MS = 500;\n const timer = setTimeout(() => {\n if (filteredItems.length === 0) {\n setStatusMessage(i18n.get('select.noOptionsFound'));\n } else {\n setStatusMessage(i18n.get('select.results', { values: { count: filteredItems.length } }));\n }\n }, SR_ANNOUNCEMENT_DELAY_MS);\n\n return () => clearTimeout(timer);\n }, [showList, filteredItems.length, i18n]);\n\n return (\n <div\n className={cx(['adyen-checkout__dropdown', className, ...classNameModifiers.map(m => `adyen-checkout__dropdown--${m}`)])}\n ref={selectContainerRef}\n >\n <SelectButton\n inputText={inputText}\n id={uniqueId ?? null}\n active={activeOption}\n selected={selectedOption}\n filterInputRef={filterInputRef}\n filterable={filterable}\n isInvalid={isInvalid}\n isValid={isValid}\n onButtonKeyDown={handleButtonKeyDown}\n onInput={handleTextFilter}\n placeholder={placeholder}\n readonly={readonly}\n selectListId={selectListId}\n showList={showList}\n toggleButtonRef={toggleButtonRef}\n toggleList={toggleList}\n disabled={disabled}\n ariaDescribedBy={ariaDescribedBy}\n required={required}\n />\n <SelectList\n active={activeOption}\n filteredItems={filteredItems}\n onHover={handleHover}\n onSelect={handleSelect}\n selected={selectedOption}\n selectListId={selectListId}\n selectListRef={selectListRef}\n showList={showList}\n />\n <div\n key={inputText}\n role=\"status\"\n aria-live=\"polite\"\n // aria-relevant seems to be needed here make make sure a second time we get\n // \"No options found\" we still announce the status message.\n // What happens otherwise is that just the first status message is announced\n // tested on VoiceOver on Chrome\n aria-relevant=\"additions text\"\n className=\"adyen-checkout-sr-panel--sr-only\"\n >\n {statusMessage}\n </div>\n </div>\n );\n}\n\nSelect.defaultProps = {\n className: '',\n classNameModifiers: [],\n filterable: true,\n items: [],\n readonly: false,\n onChange: () => {}\n};\n\nexport default Select;\n"],"names":["Select","items","className","classNameModifiers","filterable","readonly","onChange","onInput","selectedValue","name","isInvalid","isValid","placeholder","uniqueId","disabled","disableTextFilter","clearOnSelect","blurOnClose","onListToggle","required","additionalDescribedBy","i18n","useCoreContext","filterInputRef","useRef","selectContainerRef","toggleButtonRef","selectListRef","textFilter","setTextFilter","useState","showList","setShowList","statusMessage","setStatusMessage","selectListId","useMemo","uuid","active","find","i","id","inputText","setInputText","activeOption","setActiveOption","selectedOption","filteredItems","filter","item","toLowerCase","includes","ariaDescribedBy","ARIA_ERROR_SUFFIX","ARIA_CONTEXT_SUFFIX","Boolean","join","scrollToItem","nextElement","document","getElementById","simulateFocusScroll","closeList","current","blur","openList","extractItemFromEvent","e","value","currentTarget","getAttribute","listItem","handleSelect","valueToEmit","preventDefault","HTMLElement","some","target","handleNavigationKeys","key","keys","space","enter","arrowDown","length","possibleNextIndex","findIndex","nextIndex","nextItem","setNextActive","arrowUp","setPreviousActive","useEffect","focus","handleClickOutside","composedPath","contains","addEventListener","removeEventListener","timer","setTimeout","get","values","count","clearTimeout","h","div","cx","map","m","ref","SelectButton","selected","onButtonKeyDown","escape","shiftKey","tab","toggleList","SelectList","onHover","onSelect","role","aria-live","aria-relevant","defaultProps"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import{createElement as e,Fragment as t}from"../../../../../external/preact/dist/preact.js";import n from"../../../../../_virtual/index.js";import o from"../../../Img/Img.js";import{useMemo as r}from"../../../../../external/preact/hooks/dist/hooks.js";function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},o=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),o.forEach(function(t){a(e,t,n[t])})}return e}function l(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}),e}function c(e,t){if(null==e)return{};var n,o,r,a={};if("undefined"!=typeof Reflect&&Reflect.ownKeys){for(n=Reflect.ownKeys(Object(e)),r=0;r<n.length;r++)o=n[r],t.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(a[o]=e[o]);return a}if(a=function(e,t){if(null==e)return{};var n,o,r={},a=Object.getOwnPropertyNames(e);for(o=0;o<a.length;o++)n=a[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n]);return r}(e,t),Object.getOwnPropertySymbols)for(n=Object.getOwnPropertySymbols(e),r=0;r<n.length;r++)o=n[r],t.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(a[o]=e[o]);return a}function d(t){let{filterable:n,toggleButtonRef:o,showList:r,selectListId:a}=t,d=c(t,["filterable","toggleButtonRef","showList","selectListId"]);if(n){const{id:t}=d,n=c(d,["id"]);return e("div",l(i({},n),{ref:o}))}return e("button",l(i({id:d.id,"aria-haspopup":"listbox","aria-expanded":r,"aria-controls":a,"aria-disabled":d.readonly,"aria-describedby":d.ariaDescribedBy,"aria-labelledby":d.id?`${d.id}-label ${d.id}-value`:void 0,type:"button"},d),{ref:o}))}function s(a){const{active:i,selected:l,inputText:c,readonly:s,showList:u,required:p}=a,b=r(()=>{const e=l.selectedOptionName||l.name;return!0!==("string"==typeof e&&""!==e.trim())},[l,a.placeholder]),f=l.selectedOptionName||l.name||a.placeholder||"",y=u?null!=c?c:"":f,_=s?null:a.filterable?e=>{e.preventDefault(),document.activeElement===a.filterInputRef.current?a.showList||a.toggleList(e):a.filterInputRef.current&&a.filterInputRef.current.focus()}:a.toggleList,m=i.id?`listItem-${i.id}`:"";return e(d,{className:n({"adyen-checkout__dropdown__button":!0,"adyen-checkout__dropdown__button--readonly":s,"adyen-checkout__dropdown__button--active":u,"adyen-checkout__dropdown__button--invalid":a.isInvalid,"adyen-checkout__dropdown__button--valid":a.isValid,"adyen-checkout__dropdown__button--disabled":l.disabled}),disabled:a.disabled,filterable:a.filterable,onClick:_,onKeyDown:s?null:a.onButtonKeyDown,toggleButtonRef:a.toggleButtonRef,id:a.id,showList:u,selectListId:a.selectListId},a.filterable?e(t,null,!u&&l.icon&&e(o,{className:"adyen-checkout__dropdown__button__icon",src:l.icon,alt:l.name}),e("input",{value:y,"aria-autocomplete":"list","aria-controls":a.selectListId,"aria-expanded":u,"aria-owns":a.selectListId,autoComplete:"off",className:n("adyen-checkout__filter-input",{"adyen-checkout__filter-input--placeholder":!u&&b}),onInput:a.onInput,ref:a.filterInputRef,role:"combobox","aria-activedescendant":m,type:"text",readOnly:a.readonly,"aria-disabled":a.readonly,id:a.id,"aria-describedby":a.ariaDescribedBy,required:p}),!u&&l.secondaryText&&e("span",{className:"adyen-checkout__dropdown__button__secondary-text"},l.secondaryText)):e(t,null,l.icon&&e(o,{className:"adyen-checkout__dropdown__button__icon",src:l.icon,alt:l.name}),e("span",{id:a.id?`${a.id}-value`:void 0,className:n("adyen-checkout__dropdown__button__text",{"adyen-checkout__dropdown__button__text-placeholder":b})},f),l.secondaryText&&e("span",{className:"adyen-checkout__dropdown__button__secondary-text"},l.secondaryText)))}export{s as default};
1
+ import{createElement as e,Fragment as t}from"../../../../../external/preact/dist/preact.js";import n from"../../../../../_virtual/index.js";import o from"../../../Img/Img.js";import{useMemo as r}from"../../../../../external/preact/hooks/dist/hooks.js";function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}),e}function c(e,t){if(null==e)return{};var n,o,r,a={};if("undefined"!=typeof Reflect&&Reflect.ownKeys){for(n=Reflect.ownKeys(Object(e)),r=0;r<n.length;r++)o=n[r],t.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(a[o]=e[o]);return a}if(a=function(e,t){if(null==e)return{};var n,o,r={},a=Object.getOwnPropertyNames(e);for(o=0;o<a.length;o++)n=a[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n]);return r}(e,t),Object.getOwnPropertySymbols)for(n=Object.getOwnPropertySymbols(e),r=0;r<n.length;r++)o=n[r],t.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(a[o]=e[o]);return a}function l(t){let{filterable:n,toggleButtonRef:o,showList:r,selectListId:l}=t,d=c(t,["filterable","toggleButtonRef","showList","selectListId"]);if(n){const{id:t}=d,n=c(d,["id"]);return e("div",i(function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},o=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),o.forEach(function(t){a(e,t,n[t])})}return e}({},n),{ref:o}))}return e("button",{role:"combobox",type:"button",id:d.id,className:d.className,"aria-haspopup":"listbox","aria-expanded":r,"aria-controls":l,"aria-activedescendant":d["aria-activedescendant"]||void 0,disabled:d.disabled,"aria-disabled":d.readonly,"aria-describedby":d["aria-describedby"],"aria-labelledby":d.id?`${d.id}-label ${d.id}-value`:void 0,onClick:d.onClick,onKeyDown:d.onKeyDown,ref:o},d.children)}function d(a){const{active:i,selected:c,inputText:d,readonly:s,showList:u,required:p}=a,b=r(()=>{const e=c.selectedOptionName||c.name;return!0!==("string"==typeof e&&""!==e.trim())},[c,a.placeholder]),f=c.selectedOptionName||c.name||a.placeholder||"",y=u?null!=d?d:"":f,_=s?null:a.filterable?e=>{e.preventDefault(),document.activeElement===a.filterInputRef.current?a.showList||a.toggleList(e):a.filterInputRef.current&&a.filterInputRef.current.focus()}:a.toggleList,m=i.id?`listItem-${i.id}`:"";return e(l,{className:n({"adyen-checkout__dropdown__button":!0,"adyen-checkout__dropdown__button--readonly":s,"adyen-checkout__dropdown__button--active":u,"adyen-checkout__dropdown__button--invalid":a.isInvalid,"adyen-checkout__dropdown__button--valid":a.isValid,"adyen-checkout__dropdown__button--disabled":c.disabled}),disabled:a.disabled,filterable:a.filterable,onClick:_,onKeyDown:s?null:a.onButtonKeyDown,toggleButtonRef:a.toggleButtonRef,id:a.id,showList:u,selectListId:a.selectListId,"aria-activedescendant":!a.filterable&&u&&m||void 0,"aria-describedby":a.ariaDescribedBy},a.filterable?e(t,null,!u&&c.icon&&e(o,{className:"adyen-checkout__dropdown__button__icon",src:c.icon,alt:c.name}),e("input",{value:y,"aria-autocomplete":"list","aria-controls":a.selectListId,"aria-expanded":u,"aria-owns":a.selectListId,autoComplete:"off",className:n("adyen-checkout__filter-input",{"adyen-checkout__filter-input--placeholder":!u&&b}),onInput:a.onInput,ref:a.filterInputRef,role:"combobox","aria-activedescendant":m,type:"text",readOnly:a.readonly,"aria-disabled":a.readonly,id:a.id,"aria-describedby":a.ariaDescribedBy,required:p}),!u&&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",{id:a.id?`${a.id}-value`:void 0,className:n("adyen-checkout__dropdown__button__text",{"adyen-checkout__dropdown__button__text-placeholder":b})},f),c.secondaryText&&e("span",{className:"adyen-checkout__dropdown__button__secondary-text"},c.secondaryText)))}export{d as default};
2
2
  //# sourceMappingURL=SelectButton.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"SelectButton.js","sources":["../../../../../../../src/components/internal/FormFields/Select/components/SelectButton.tsx"],"sourcesContent":["import { h, Fragment } from 'preact';\nimport cx from 'classnames';\nimport { SelectButtonProps } from '../types';\nimport Img from '../../../Img';\nimport { useMemo } from 'preact/hooks';\nimport classnames from 'classnames';\n\nfunction SelectButtonElement({ filterable, toggleButtonRef, showList, selectListId, ...props }) {\n if (filterable) {\n // Even if passed, we can't add an id to this div since it is not allowed to associate a div with a label element\n const { id, ...strippedProps } = props;\n return <div {...strippedProps} ref={toggleButtonRef} />;\n }\n\n return (\n <button\n id={props.id}\n aria-haspopup=\"listbox\"\n aria-expanded={showList}\n aria-controls={selectListId}\n aria-disabled={props.readonly}\n aria-describedby={props.ariaDescribedBy}\n aria-labelledby={props.id ? `${props.id}-label ${props.id}-value` : undefined}\n type={'button'}\n {...props}\n ref={toggleButtonRef}\n />\n );\n}\n\nfunction SelectButton(props: Readonly<SelectButtonProps>) {\n const { active, selected, inputText, readonly, showList, required } = props;\n\n const isShowingPlaceholder = useMemo(() => {\n const displayText = selected.selectedOptionName || selected.name;\n const isValidValue = typeof displayText === 'string' && displayText.trim() !== '';\n return isValidValue !== true;\n }, [selected, props.placeholder]);\n\n // display fallback order\n const displayText = selected.selectedOptionName || selected.name || props.placeholder || '';\n // displayInputText only used for the text input for the filter\n // display the \"typed\" filter text when showing the dropdown,\n // hide it and show the \"selected\" value when collapsed\n // When list is open, show user's typed input (or empty); otherwise show selected value\n const textWhenListOpen = inputText ?? '';\n const displayInputText = showList ? textWhenListOpen : displayText;\n\n const setFocus = (e: Event) => {\n e.preventDefault();\n if (document.activeElement === props.filterInputRef.current) {\n if (!props.showList) {\n props.toggleList(e);\n }\n } else if (props.filterInputRef.current) props.filterInputRef.current.focus();\n };\n\n // 1. If readonly we ignore the click action\n // 2. If filterable we want to show the list and focus on the input\n // 3. Otherwise we just toggle the list\n const onClickHandler = readonly ? null : props.filterable ? setFocus : props.toggleList;\n\n // check COWEB-1301 [Investigate] Drop-in Accessibility - ADA Compliance questions\n const currentSelectedItemId = active.id ? `listItem-${active.id}` : '';\n\n return (\n <SelectButtonElement\n className={cx({\n 'adyen-checkout__dropdown__button': true,\n 'adyen-checkout__dropdown__button--readonly': readonly,\n 'adyen-checkout__dropdown__button--active': showList,\n 'adyen-checkout__dropdown__button--invalid': props.isInvalid,\n 'adyen-checkout__dropdown__button--valid': props.isValid,\n 'adyen-checkout__dropdown__button--disabled': selected.disabled\n })}\n disabled={props.disabled}\n filterable={props.filterable}\n onClick={onClickHandler}\n onKeyDown={!readonly ? props.onButtonKeyDown : null}\n toggleButtonRef={props.toggleButtonRef}\n id={props.id}\n showList={showList}\n selectListId={props.selectListId}\n >\n {!props.filterable ? (\n <Fragment>\n {selected.icon && <Img className=\"adyen-checkout__dropdown__button__icon\" src={selected.icon} alt={selected.name} />}\n <span\n id={props.id ? `${props.id}-value` : undefined}\n className={classnames('adyen-checkout__dropdown__button__text', {\n 'adyen-checkout__dropdown__button__text-placeholder': isShowingPlaceholder\n })}\n >\n {displayText}\n </span>\n {selected.secondaryText && <span className=\"adyen-checkout__dropdown__button__secondary-text\">{selected.secondaryText}</span>}\n </Fragment>\n ) : (\n <Fragment>\n {!showList && selected.icon && <Img className=\"adyen-checkout__dropdown__button__icon\" src={selected.icon} alt={selected.name} />}\n <input\n value={displayInputText}\n aria-autocomplete=\"list\"\n aria-controls={props.selectListId}\n aria-expanded={showList}\n aria-owns={props.selectListId}\n autoComplete=\"off\"\n className={classnames('adyen-checkout__filter-input', {\n 'adyen-checkout__filter-input--placeholder': !showList && isShowingPlaceholder\n })}\n onInput={props.onInput}\n ref={props.filterInputRef}\n role=\"combobox\"\n aria-activedescendant={currentSelectedItemId}\n type=\"text\"\n readOnly={props.readonly}\n aria-disabled={props.readonly}\n id={props.id}\n aria-describedby={props.ariaDescribedBy}\n required={required}\n />\n {!showList && selected.secondaryText && (\n <span className=\"adyen-checkout__dropdown__button__secondary-text\">{selected.secondaryText}</span>\n )}\n </Fragment>\n )}\n </SelectButtonElement>\n );\n}\n\nexport default SelectButton;\n"],"names":["SelectButtonElement","_0","filterable","toggleButtonRef","showList","selectListId","props","id","strippedProps","h","div","ref","button","aria-haspopup","aria-expanded","aria-controls","aria-disabled","readonly","aria-describedby","ariaDescribedBy","aria-labelledby","undefined","type","SelectButton","active","selected","inputText","required","isShowingPlaceholder","useMemo","displayText","selectedOptionName","name","trim","placeholder","displayInputText","onClickHandler","e","preventDefault","document","activeElement","filterInputRef","current","toggleList","focus","currentSelectedItemId","className","cx","isInvalid","isValid","disabled","onClick","onKeyDown","onButtonKeyDown","Fragment","icon","Img","src","alt","input","value","aria-autocomplete","aria-owns","autoComplete","classnames","onInput","role","aria-activedescendant","readOnly","secondaryText","span"],"mappings":"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"}
1
+ {"version":3,"file":"SelectButton.js","sources":["../../../../../../../src/components/internal/FormFields/Select/components/SelectButton.tsx"],"sourcesContent":["import { h, Fragment, Ref } from 'preact';\nimport cx from 'classnames';\nimport { SelectButtonElementProps, SelectButtonProps } from '../types';\nimport Img from '../../../Img';\nimport { useMemo } from 'preact/hooks';\nimport classnames from 'classnames';\n\nfunction SelectButtonElement({ filterable, toggleButtonRef, showList, selectListId, ...props }: Readonly<SelectButtonElementProps>) {\n if (filterable) {\n // Even if passed, we can't add an id to this div since it is not allowed to associate a div with a label element\n const { id, ...strippedProps } = props;\n return <div {...strippedProps} ref={toggleButtonRef as Ref<HTMLDivElement>} />;\n }\n\n return (\n <button\n role=\"combobox\"\n type=\"button\"\n id={props.id}\n className={props.className}\n aria-haspopup=\"listbox\"\n aria-expanded={showList}\n aria-controls={selectListId}\n aria-activedescendant={props['aria-activedescendant'] || undefined}\n disabled={props.disabled}\n aria-disabled={props.readonly}\n aria-describedby={props['aria-describedby']}\n aria-labelledby={props.id ? `${props.id as string}-label ${props.id as string}-value` : undefined}\n onClick={props.onClick}\n onKeyDown={props.onKeyDown}\n ref={toggleButtonRef as Ref<HTMLButtonElement>}\n >\n {props.children}\n </button>\n );\n}\n\nfunction SelectButton(props: Readonly<SelectButtonProps>) {\n const { active, selected, inputText, readonly, showList, required } = props;\n\n const isShowingPlaceholder = useMemo(() => {\n const displayText = selected.selectedOptionName || selected.name;\n const isValidValue = typeof displayText === 'string' && displayText.trim() !== '';\n return isValidValue !== true;\n }, [selected, props.placeholder]);\n\n // display fallback order\n const displayText = selected.selectedOptionName || selected.name || props.placeholder || '';\n // displayInputText only used for the text input for the filter\n // display the \"typed\" filter text when showing the dropdown,\n // hide it and show the \"selected\" value when collapsed\n // When list is open, show user's typed input (or empty); otherwise show selected value\n const textWhenListOpen = inputText ?? '';\n const displayInputText = showList ? textWhenListOpen : displayText;\n\n const setFocus = (e: Event) => {\n e.preventDefault();\n if (document.activeElement === props.filterInputRef.current) {\n if (!props.showList) {\n props.toggleList(e);\n }\n } else if (props.filterInputRef.current) props.filterInputRef.current.focus();\n };\n\n // 1. If readonly we ignore the click action\n // 2. If filterable we want to show the list and focus on the input\n // 3. Otherwise we just toggle the list\n const onClickHandler = readonly ? null : props.filterable ? setFocus : props.toggleList;\n\n // check COWEB-1301 [Investigate] Drop-in Accessibility - ADA Compliance questions\n const currentSelectedItemId = active.id ? `listItem-${active.id}` : '';\n\n return (\n <SelectButtonElement\n className={cx({\n 'adyen-checkout__dropdown__button': true,\n 'adyen-checkout__dropdown__button--readonly': readonly,\n 'adyen-checkout__dropdown__button--active': showList,\n 'adyen-checkout__dropdown__button--invalid': props.isInvalid,\n 'adyen-checkout__dropdown__button--valid': props.isValid,\n 'adyen-checkout__dropdown__button--disabled': selected.disabled\n })}\n disabled={props.disabled}\n filterable={props.filterable}\n onClick={onClickHandler}\n onKeyDown={!readonly ? props.onButtonKeyDown : null}\n toggleButtonRef={props.toggleButtonRef}\n id={props.id}\n showList={showList}\n selectListId={props.selectListId}\n aria-activedescendant={!props.filterable && showList ? currentSelectedItemId || undefined : undefined}\n aria-describedby={props.ariaDescribedBy}\n >\n {!props.filterable ? (\n <Fragment>\n {selected.icon && <Img className=\"adyen-checkout__dropdown__button__icon\" src={selected.icon} alt={selected.name} />}\n <span\n id={props.id ? `${props.id}-value` : undefined}\n className={classnames('adyen-checkout__dropdown__button__text', {\n 'adyen-checkout__dropdown__button__text-placeholder': isShowingPlaceholder\n })}\n >\n {displayText}\n </span>\n {selected.secondaryText && <span className=\"adyen-checkout__dropdown__button__secondary-text\">{selected.secondaryText}</span>}\n </Fragment>\n ) : (\n <Fragment>\n {!showList && selected.icon && <Img className=\"adyen-checkout__dropdown__button__icon\" src={selected.icon} alt={selected.name} />}\n <input\n value={displayInputText}\n aria-autocomplete=\"list\"\n aria-controls={props.selectListId}\n aria-expanded={showList}\n aria-owns={props.selectListId}\n autoComplete=\"off\"\n className={classnames('adyen-checkout__filter-input', {\n 'adyen-checkout__filter-input--placeholder': !showList && isShowingPlaceholder\n })}\n onInput={props.onInput}\n ref={props.filterInputRef}\n role=\"combobox\"\n aria-activedescendant={currentSelectedItemId}\n type=\"text\"\n readOnly={props.readonly}\n aria-disabled={props.readonly}\n id={props.id}\n aria-describedby={props.ariaDescribedBy}\n required={required}\n />\n {!showList && selected.secondaryText && (\n <span className=\"adyen-checkout__dropdown__button__secondary-text\">{selected.secondaryText}</span>\n )}\n </Fragment>\n )}\n </SelectButtonElement>\n );\n}\n\nexport default SelectButton;\n"],"names":["SelectButtonElement","_0","filterable","toggleButtonRef","showList","selectListId","props","id","strippedProps","h","div","ref","button","role","type","className","aria-haspopup","aria-expanded","aria-controls","aria-activedescendant","undefined","disabled","aria-disabled","readonly","aria-describedby","aria-labelledby","onClick","onKeyDown","children","SelectButton","active","selected","inputText","required","isShowingPlaceholder","useMemo","displayText","selectedOptionName","name","trim","placeholder","displayInputText","onClickHandler","e","preventDefault","document","activeElement","filterInputRef","current","toggleList","focus","currentSelectedItemId","cx","isInvalid","isValid","onButtonKeyDown","ariaDescribedBy","Fragment","icon","Img","src","alt","input","value","aria-autocomplete","aria-owns","autoComplete","classnames","onInput","readOnly","secondaryText","span"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- function t({src:t,title:e="iframe element",policy:r="origin"}){const i=document.createElement("iframe");i.setAttribute("src",t),i.classList.add("js-iframe"),i.setAttribute("role","presentation"),""!==e&&e.trim().length>0&&i.setAttribute("title",e),i.setAttribute("allowtransparency","true"),i.setAttribute("referrerpolicy",r);const s=document.createTextNode("<p>Your browser does not support iframes.</p>");return i.appendChild(s),i}export{t as default};
1
+ function t({src:t,title:e="iframe element",policy:r="origin"}){const i=document.createElement("iframe");i.setAttribute("src",t),i.classList.add("js-iframe"),""!==e&&e.trim().length>0&&i.setAttribute("title",e),i.setAttribute("allowtransparency","true"),i.setAttribute("referrerpolicy",r);const s=document.createTextNode("<p>Your browser does not support iframes.</p>");return i.appendChild(s),i}export{t as default};
2
2
  //# sourceMappingURL=createIframe.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"createIframe.js","sources":["../../../../../../../../src/components/internal/SecuredFields/lib/securedField/utils/createIframe.ts"],"sourcesContent":["export default function createIframe({ src, title = 'iframe element', policy = 'origin' }) {\n const iframeEl = document.createElement('iframe');\n iframeEl.setAttribute('src', src);\n iframeEl.classList.add('js-iframe');\n\n // Following a11y advice from LevelAccess, we always set the iframe to be role=presentation\n iframeEl.setAttribute('role', 'presentation');\n\n if (title !== '' && title.trim().length > 0) {\n iframeEl.setAttribute('title', title);\n }\n\n iframeEl.setAttribute('allowtransparency', 'true');\n iframeEl.setAttribute('referrerpolicy', policy); // Necessary for ClientKey to work\n // Commenting out stops the \"The devicemotion events are blocked by feature policy\" warning in Chrome >=66 that some merchant experienced\n // Commenting in stops the same warnings in development (??)\n if (process.env.NODE_ENV === 'development') {\n iframeEl.setAttribute('allow', 'accelerometer; gyroscope');\n }\n\n const noIframeElContent = document.createTextNode('<p>Your browser does not support iframes.</p>');\n iframeEl.appendChild(noIframeElContent);\n\n return iframeEl;\n}\n"],"names":["createIframe","src","title","policy","iframeEl","document","createElement","setAttribute","classList","add","trim","length","noIframeElContent","createTextNode","appendChild"],"mappings":"AAAe,SAASA,GAAaC,IAAEA,EAAGC,MAAEA,EAAQ,iBAAgBC,OAAEA,EAAS,WAC3E,MAAMC,EAAWC,SAASC,cAAc,UACxCF,EAASG,aAAa,MAAON,GAC7BG,EAASI,UAAUC,IAAI,aAGvBL,EAASG,aAAa,OAAQ,gBAEhB,KAAVL,GAAgBA,EAAMQ,OAAOC,OAAS,GACtCP,EAASG,aAAa,QAASL,GAGnCE,EAASG,aAAa,oBAAqB,QAC3CH,EAASG,aAAa,iBAAkBJ,GAOxC,MAAMS,EAAoBP,SAASQ,eAAe,iDAGlD,OAFAT,EAASU,YAAYF,GAEdR,CACX"}
1
+ {"version":3,"file":"createIframe.js","sources":["../../../../../../../../src/components/internal/SecuredFields/lib/securedField/utils/createIframe.ts"],"sourcesContent":["export default function createIframe({ src, title = 'iframe element', policy = 'origin' }) {\n const iframeEl = document.createElement('iframe');\n iframeEl.setAttribute('src', src);\n iframeEl.classList.add('js-iframe');\n\n if (title !== '' && title.trim().length > 0) {\n iframeEl.setAttribute('title', title);\n }\n\n iframeEl.setAttribute('allowtransparency', 'true');\n iframeEl.setAttribute('referrerpolicy', policy); // Necessary for ClientKey to work\n // Commenting out stops the \"The devicemotion events are blocked by feature policy\" warning in Chrome >=66 that some merchant experienced\n // Commenting in stops the same warnings in development (??)\n if (process.env.NODE_ENV === 'development') {\n iframeEl.setAttribute('allow', 'accelerometer; gyroscope');\n }\n\n const noIframeElContent = document.createTextNode('<p>Your browser does not support iframes.</p>');\n iframeEl.appendChild(noIframeElContent);\n\n return iframeEl;\n}\n"],"names":["createIframe","src","title","policy","iframeEl","document","createElement","setAttribute","classList","add","trim","length","noIframeElContent","createTextNode","appendChild"],"mappings":"AAAe,SAASA,GAAaC,IAAEA,EAAGC,MAAEA,EAAQ,iBAAgBC,OAAEA,EAAS,WAC3E,MAAMC,EAAWC,SAASC,cAAc,UACxCF,EAASG,aAAa,MAAON,GAC7BG,EAASI,UAAUC,IAAI,aAET,KAAVP,GAAgBA,EAAMQ,OAAOC,OAAS,GACtCP,EAASG,aAAa,QAASL,GAGnCE,EAASG,aAAa,oBAAqB,QAC3CH,EAASG,aAAa,iBAAkBJ,GAOxC,MAAMS,EAAoBP,SAASQ,eAAe,iDAGlD,OAFAT,EAASU,YAAYF,GAEdR,CACX"}
@@ -1,2 +1,2 @@
1
- function e(e,n){if(null==e)throw new Error(n);return e}const n="https://checkoutshopper-live.adyen.com/checkoutshopper/",o=e("6.40.0","LIBRARY_VERSION is not defined"),t=e("eslegacy","BUNDLE_TYPE is not defined"),r=["amount","secondaryAmount","countryCode","environment","_environmentUrls","loadingContext","i18n","modules","order","session","clientKey","showPayButton","redirectFromTopWhenInIframe","donation","onPaymentCompleted","onPaymentFailed","beforeRedirect","beforeSubmit","onSubmit","onActionHandled","onAdditionalDetails","onChange","onEnterKeyPressed","onError","onBalanceCheck","onOrderCancel","onOrderRequest","onOrderUpdated","onPaymentMethodsRequest"],i=6e4;var d=function(e){return e.WEB="web",e}({});const a="web";var c=function(e){return e.NATIVE="nativeComponent",e.GENERIC="genericComponent",e}({});export{d as CHANNEL,i as DEFAULT_HTTP_TIMEOUT,n as FALLBACK_CONTEXT,r as GENERIC_OPTIONS,t as LIBRARY_BUNDLE_TYPE,o as LIBRARY_VERSION,c as PAYMENT_METHOD_BEHAVIOR,a as PLATFORM};
1
+ function e(e,n){if(null==e)throw new Error(n);return e}const n="https://checkoutshopper-live.adyen.com/checkoutshopper/",o=e("6.40.2","LIBRARY_VERSION is not defined"),t=e("eslegacy","BUNDLE_TYPE is not defined"),r=["amount","secondaryAmount","countryCode","environment","_environmentUrls","loadingContext","i18n","modules","order","session","clientKey","showPayButton","redirectFromTopWhenInIframe","donation","onPaymentCompleted","onPaymentFailed","beforeRedirect","beforeSubmit","onSubmit","onActionHandled","onAdditionalDetails","onChange","onEnterKeyPressed","onError","onBalanceCheck","onOrderCancel","onOrderRequest","onOrderUpdated","onPaymentMethodsRequest"],i=6e4;var d=function(e){return e.WEB="web",e}({});const a="web";var c=function(e){return e.NATIVE="nativeComponent",e.GENERIC="genericComponent",e}({});export{d as CHANNEL,i as DEFAULT_HTTP_TIMEOUT,n as FALLBACK_CONTEXT,r as GENERIC_OPTIONS,t as LIBRARY_BUNDLE_TYPE,o as LIBRARY_VERSION,c as PAYMENT_METHOD_BEHAVIOR,a as PLATFORM};
2
2
  //# sourceMappingURL=config.js.map
@@ -1,2 +1,2 @@
1
- import{DEFAULT_LOCALE as t,LOCALE_NAME_MIN_LENGTH as n,LOCALE_NAME_MAX_LENGTH as e}from"./constants.js";const r=t=>t.toLowerCase().substring(0,2),o=t=>Boolean(t)&&t.length>=n&&t.length<=e;function l(t,n){return t&&"string"==typeof t&&n.find(n=>r(n)===r(t))||null}function s(t){const n=t.replace("_","-");if(/^([a-z]{2})(-)([A-Z]{2})$/.test(n))return n;const[e,r]=n.split("-");if(!e||!r)return null;const o=[e.toLowerCase(),r.toUpperCase()].join("-");return 5===o.length?o:null}function u(n,e){if(!o(n))return t;const r=s(n);return r&&e.includes(r)?r:l(r||n,e)||t}function c(t={}){return Object.keys(t).reduce((n,e)=>{if(!o(e))return n;return n[s(e)||r(e)]=t[e],n},{})}const a=(t,n)=>t.replace(/%{(\w+)}/g,(t,e)=>n[e]||""),i=(t,n,e={})=>{const{values:r={},count:o=0}=e,l=`${n}__plural`,s=t=>`${n}__${t}`;return Object.prototype.hasOwnProperty.call(t,s(o))?a(t[s(o)],r):Object.prototype.hasOwnProperty.call(t,l)&&o>1?a(t[l],r):Object.prototype.hasOwnProperty.call(t,n)?a(t[n],r):null},p=(t,n)=>{const e=t.split(/%#(.*?)%#/gm);if(n.length!==Math.floor(e.length/2))throw Error("The number of functions provided does not match the number of elements in the translation string.");return e.map((t,e)=>{const r=Math.floor(e/2);return e%2==0?t:n[r](t)})};export{c as formatCustomTranslations,s as formatLocaleToLanguageCountryLocale,i as getTranslation,p as interpolateElement,l as matchLocale,u as parseLocale};
1
+ import{DEFAULT_LOCALE as t,LOCALE_NAME_MIN_LENGTH as n,LOCALE_NAME_MAX_LENGTH as e}from"./constants.js";const r=t=>t.toLowerCase().substring(0,2),o=t=>Boolean(t)&&t.length>=n&&t.length<=e;function s(t,n){if(!t||"string"!=typeof t)return null;const e=t.toLowerCase(),o=n.find(t=>t.toLowerCase()===e);if(o)return o;const s=r(t);return n.find(t=>r(t)===s)||null}function l(t){const n=t.replace("_","-");if(/^([a-z]{2})(-)([A-Z]{2})$/.test(n))return n;const[e,r]=n.split("-");if(!e||!r)return null;const o=[e.toLowerCase(),r.toUpperCase()].join("-");return 5===o.length?o:null}function u(n,e){if(!o(n))return t;const r=l(n);return r&&e.includes(r)?r:s(r||n,e)||t}function c(t={}){return Object.keys(t).reduce((n,e)=>{if(!o(e))return n;return n[l(e)||r(e)]=t[e],n},{})}const i=(t,n)=>t.replace(/%{(\w+)}/g,(t,e)=>n[e]||""),a=(t,n,e={})=>{const{values:r={},count:o=0}=e,s=`${n}__plural`,l=t=>`${n}__${t}`;return Object.prototype.hasOwnProperty.call(t,l(o))?i(t[l(o)],r):Object.prototype.hasOwnProperty.call(t,s)&&o>1?i(t[s],r):Object.prototype.hasOwnProperty.call(t,n)?i(t[n],r):null},p=(t,n)=>{const e=t.split(/%#(.*?)%#/gm);if(n.length!==Math.floor(e.length/2))throw Error("The number of functions provided does not match the number of elements in the translation string.");return e.map((t,e)=>{const r=Math.floor(e/2);return e%2==0?t:n[r](t)})};export{c as formatCustomTranslations,l as formatLocaleToLanguageCountryLocale,a as getTranslation,p as interpolateElement,s as matchLocale,u as parseLocale};
2
2
  //# sourceMappingURL=utils.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"utils.js","sources":["../../../src/language/utils.ts"],"sourcesContent":["import { h } from 'preact';\nimport { CustomTranslations } from './types';\nimport { DEFAULT_LOCALE, LOCALE_NAME_MAX_LENGTH, LOCALE_NAME_MIN_LENGTH } from './constants';\n\n/**\n * @description Convert to ISO 639-1\n */\nconst toTwoLetterCode = (locale: string): string => locale.toLowerCase().substring(0, 2);\n\n/**\n * @description Checks if the locale length is valid\n * @param locale - The locale to check\n * @returns true if the locale length is valid, false otherwise\n */\nconst isLocaleLenghtValid = (locale: string): boolean =>\n Boolean(locale) && locale.length >= LOCALE_NAME_MIN_LENGTH && locale.length <= LOCALE_NAME_MAX_LENGTH;\n\n/**\n * Matches a string with one of the locales\n *\n * @param locale - The locale to match\n * @param supportedLocales - Array of possible locales\n *\n * @example\n * matchLocale('en-GB', ['en-US', 'es-ES']);\n * // returns 'en-US'\n */\nexport function matchLocale(locale: string, supportedLocales: readonly string[]): string | null {\n if (!locale || typeof locale !== 'string') return null;\n return supportedLocales.find(supLoc => toTwoLetterCode(supLoc) === toTwoLetterCode(locale)) || null;\n}\n\n/**\n * Returns a locale with the proper format.\n *\n * @param localeParam - Locale example: 'En_us' or 'en-US'\n *\n * @example\n * formatLocaleToLanguageCountryLocale('En_us');\n * // returns 'en-US'\n */\nexport function formatLocaleToLanguageCountryLocale(localeParam: string): string | null {\n const locale = localeParam.replace('_', '-');\n const format = /^([a-z]{2})(-)([A-Z]{2})$/;\n\n // If it's already formatted, return the locale\n if (format.test(locale)) return locale;\n\n // Split the string in two\n const [languageCode, countryCode] = locale.split('-');\n\n // If the locale or the country codes are missing, return null\n if (!languageCode || !countryCode) return null;\n\n // Ensure correct format and join the strings back together\n const fullLocale = [languageCode.toLowerCase(), countryCode.toUpperCase()].join('-');\n\n return fullLocale.length === 5 ? fullLocale : null;\n}\n\nexport function parseLocale(locale: string, supportedLocales: readonly string[]): string {\n if (!isLocaleLenghtValid(locale)) return DEFAULT_LOCALE;\n\n const formattedLocale = formatLocaleToLanguageCountryLocale(locale);\n const hasMatch = formattedLocale && supportedLocales.includes(formattedLocale);\n\n if (hasMatch) return formattedLocale;\n\n return matchLocale(formattedLocale || locale, supportedLocales) || DEFAULT_LOCALE;\n}\n\n/**\n * @description Makes sure that if custom translation is defined using not properly formatted locale keys, then it gets formatted correctly\n *\n * @example { en_US: { ... }} will be adjusted to { 'en-US': { ... }} . { ar: { ... }} is kept as is.\n */\nexport function formatCustomTranslations(customTranslations: CustomTranslations = {}): CustomTranslations {\n return Object.keys(customTranslations).reduce<CustomTranslations>((memo, localeKey) => {\n if (!isLocaleLenghtValid(localeKey)) return memo;\n\n const locale = formatLocaleToLanguageCountryLocale(localeKey) || toTwoLetterCode(localeKey);\n memo[locale] = customTranslations[localeKey];\n return memo;\n }, {});\n}\n\nconst replaceTranslationValues = (translation: string, values: Record<string, string>) => {\n return translation.replace(/%{(\\w+)}/g, (_, k) => values[k] || '');\n};\n\n/**\n * Returns a translation string by key\n * @param translations -\n * @param key -\n * @param options -\n *\n * @internal\n */\nexport const getTranslation = (\n translations: Record<string, string>,\n key: string,\n options: { values?: Record<string, string>; count?: number } = {}\n): string | null => {\n const { values = {}, count = 0 } = options;\n const keyPlural = `${key}__plural`;\n const keyForCount = (count: number) => `${key}__${count}`;\n\n if (Object.prototype.hasOwnProperty.call(translations, keyForCount(count))) {\n // Find key__count translation key\n return replaceTranslationValues(translations[keyForCount(count)], values);\n } else if (Object.prototype.hasOwnProperty.call(translations, keyPlural) && count > 1) {\n // Find key__plural translation key, if count greater than 1 (e.g. myTranslation__plural)\n return replaceTranslationValues(translations[keyPlural], values);\n } else if (Object.prototype.hasOwnProperty.call(translations, key)) {\n // Find key translation key (e.g. myTranslation)\n return replaceTranslationValues(translations[key], values);\n }\n\n return null;\n};\n\n/**\n * Injects JSX elements in a middle of a translation and returns a JSX array\n * The input string should use %# as the token to know where to insert the component\n * @param translation - Translation string\n * @param renderFunctions - An array function that renders JSX elements\n */\nexport const interpolateElement = (translation: string, renderFunctions: Array<(translation: string) => h.JSX.Element | string>) => {\n // splits by regex group, it guarantees that it only splits with 2 tokens (%#)\n const matches = translation.split(/%#(.*?)%#/gm);\n\n if (renderFunctions.length !== Math.floor(matches.length / 2)) {\n throw Error('The number of functions provided does not match the number of elements in the translation string.');\n }\n\n // the map will create an array of JSX / string elements, this syntax in accepted in JSX/react to render elements\n return matches.map((term, index) => {\n // math to get the index of the renderFunction that should be used\n // since we split on tokens, that means the index of the render function is half of the index of the string\n const indexInFunctionArray = Math.floor(index / 2);\n return index % 2 === 0 ? term : renderFunctions[indexInFunctionArray](term);\n });\n};\n"],"names":["toTwoLetterCode","locale","toLowerCase","substring","isLocaleLenghtValid","Boolean","length","LOCALE_NAME_MIN_LENGTH","LOCALE_NAME_MAX_LENGTH","matchLocale","supportedLocales","find","supLoc","formatLocaleToLanguageCountryLocale","localeParam","replace","test","languageCode","countryCode","split","fullLocale","toUpperCase","join","parseLocale","DEFAULT_LOCALE","formattedLocale","includes","formatCustomTranslations","customTranslations","Object","keys","reduce","memo","localeKey","replaceTranslationValues","translation","values","_","k","getTranslation","translations","key","options","count","keyPlural","keyForCount","prototype","hasOwnProperty","call","interpolateElement","renderFunctions","matches","Math","floor","Error","map","term","index","indexInFunctionArray"],"mappings":"wGAOA,MAAMA,EAAmBC,GAA2BA,EAAOC,cAAcC,UAAU,EAAG,GAOhFC,EAAuBH,GACzBI,QAAQJ,IAAWA,EAAOK,QAAUC,GAA0BN,EAAOK,QAAUE,EAY5E,SAASC,EAAYR,EAAgBS,GACxC,OAAKT,GAA4B,iBAAXA,GACfS,EAAiBC,KAAKC,GAAUZ,EAAgBY,KAAYZ,EAAgBC,KADjC,IAEtD,CAWO,SAASY,EAAoCC,GAChD,MAAMb,EAASa,EAAYC,QAAQ,IAAK,KAIxC,GAHe,4BAGJC,KAAKf,GAAS,OAAOA,EAGhC,MAAOgB,EAAcC,GAAejB,EAAOkB,MAAM,KAGjD,IAAKF,IAAiBC,EAAa,OAAO,KAG1C,MAAME,EAAa,CAACH,EAAaf,cAAegB,EAAYG,eAAeC,KAAK,KAEhF,OAA6B,IAAtBF,EAAWd,OAAec,EAAa,IAClD,CAEO,SAASG,EAAYtB,EAAgBS,GACxC,IAAKN,EAAoBH,GAAS,OAAOuB,EAEzC,MAAMC,EAAkBZ,EAAoCZ,GAG5D,OAFiBwB,GAAmBf,EAAiBgB,SAASD,GAEzCA,EAEdhB,EAAYgB,GAAmBxB,EAAQS,IAAqBc,CACvE,CAOO,SAASG,EAAyBC,EAAyC,IAC9E,OAAOC,OAAOC,KAAKF,GAAoBG,OAA2B,CAACC,EAAMC,KACrE,IAAK7B,EAAoB6B,GAAY,OAAOD,EAI5C,OADAA,EADenB,EAAoCoB,IAAcjC,EAAgBiC,IAClEL,EAAmBK,GAC3BD,GACR,CAAA,EACP,CAEA,MAAME,EAA2B,CAACC,EAAqBC,IAC5CD,EAAYpB,QAAQ,YAAa,CAACsB,EAAGC,IAAMF,EAAOE,IAAM,IAWtDC,EAAiB,CAC1BC,EACAC,EACAC,EAA+D,CAAA,KAE/D,MAAMN,OAAEA,EAAS,CAAA,EAAEO,MAAEA,EAAQ,GAAMD,EAC7BE,EAAY,GAAGH,YACfI,EAAeF,GAAkB,GAAGF,MAAQE,IAElD,OAAId,OAAOiB,UAAUC,eAAeC,KAAKR,EAAcK,EAAYF,IAExDT,EAAyBM,EAAaK,EAAYF,IAASP,GAC3DP,OAAOiB,UAAUC,eAAeC,KAAKR,EAAcI,IAAcD,EAAQ,EAEzET,EAAyBM,EAAaI,GAAYR,GAClDP,OAAOiB,UAAUC,eAAeC,KAAKR,EAAcC,GAEnDP,EAAyBM,EAAaC,GAAML,GAGhD,MASEa,EAAqB,CAACd,EAAqBe,KAEpD,MAAMC,EAAUhB,EAAYhB,MAAM,eAElC,GAAI+B,EAAgB5C,SAAW8C,KAAKC,MAAMF,EAAQ7C,OAAS,GACvD,MAAMgD,MAAM,qGAIhB,OAAOH,EAAQI,IAAI,CAACC,EAAMC,KAGtB,MAAMC,EAAuBN,KAAKC,MAAMI,EAAQ,GAChD,OAAOA,EAAQ,GAAM,EAAID,EAAON,EAAgBQ,GAAsBF"}
1
+ {"version":3,"file":"utils.js","sources":["../../../src/language/utils.ts"],"sourcesContent":["import { h } from 'preact';\nimport { CustomTranslations } from './types';\nimport { DEFAULT_LOCALE, LOCALE_NAME_MAX_LENGTH, LOCALE_NAME_MIN_LENGTH } from './constants';\n\n/**\n * @description Convert to ISO 639-1\n */\nconst toTwoLetterCode = (locale: string): string => locale.toLowerCase().substring(0, 2);\n\n/**\n * @description Checks if the locale length is valid\n * @param locale - The locale to check\n * @returns true if the locale length is valid, false otherwise\n */\nconst isLocaleLenghtValid = (locale: string): boolean =>\n Boolean(locale) && locale.length >= LOCALE_NAME_MIN_LENGTH && locale.length <= LOCALE_NAME_MAX_LENGTH;\n\n/**\n * Matches a string with one of the locales\n *\n * @param locale - The locale to match\n * @param supportedLocales - Array of possible locales\n *\n * @example\n * matchLocale('en-GB', ['en-US', 'es-ES']);\n * // returns 'en-US'\n */\nexport function matchLocale(locale: string, supportedLocales: readonly string[]): string | null {\n if (!locale || typeof locale !== 'string') return null;\n\n const lowerLocale = locale.toLowerCase();\n const exactMatch = supportedLocales.find(supLoc => supLoc.toLowerCase() === lowerLocale);\n\n if (exactMatch) return exactMatch;\n\n const localeTwoLetter = toTwoLetterCode(locale);\n return supportedLocales.find(supLoc => toTwoLetterCode(supLoc) === localeTwoLetter) || null;\n}\n\n/**\n * Returns a locale with the proper format.\n *\n * @param localeParam - Locale example: 'En_us' or 'en-US'\n *\n * @example\n * formatLocaleToLanguageCountryLocale('En_us');\n * // returns 'en-US'\n */\nexport function formatLocaleToLanguageCountryLocale(localeParam: string): string | null {\n const locale = localeParam.replace('_', '-');\n const format = /^([a-z]{2})(-)([A-Z]{2})$/;\n\n // If it's already formatted, return the locale\n if (format.test(locale)) return locale;\n\n // Split the string in two\n const [languageCode, countryCode] = locale.split('-');\n\n // If the locale or the country codes are missing, return null\n if (!languageCode || !countryCode) return null;\n\n // Ensure correct format and join the strings back together\n const fullLocale = [languageCode.toLowerCase(), countryCode.toUpperCase()].join('-');\n\n return fullLocale.length === 5 ? fullLocale : null;\n}\n\nexport function parseLocale(locale: string, supportedLocales: readonly string[]): string {\n if (!isLocaleLenghtValid(locale)) return DEFAULT_LOCALE;\n\n const formattedLocale = formatLocaleToLanguageCountryLocale(locale);\n const hasMatch = formattedLocale && supportedLocales.includes(formattedLocale);\n\n if (hasMatch) return formattedLocale;\n\n return matchLocale(formattedLocale || locale, supportedLocales) || DEFAULT_LOCALE;\n}\n\n/**\n * @description Makes sure that if custom translation is defined using not properly formatted locale keys, then it gets formatted correctly\n *\n * @example { en_US: { ... }} will be adjusted to { 'en-US': { ... }} . { ar: { ... }} is kept as is.\n */\nexport function formatCustomTranslations(customTranslations: CustomTranslations = {}): CustomTranslations {\n return Object.keys(customTranslations).reduce<CustomTranslations>((memo, localeKey) => {\n if (!isLocaleLenghtValid(localeKey)) return memo;\n\n const locale = formatLocaleToLanguageCountryLocale(localeKey) || toTwoLetterCode(localeKey);\n memo[locale] = customTranslations[localeKey];\n return memo;\n }, {});\n}\n\nconst replaceTranslationValues = (translation: string, values: Record<string, string>) => {\n return translation.replace(/%{(\\w+)}/g, (_, k) => values[k] || '');\n};\n\n/**\n * Returns a translation string by key\n * @param translations -\n * @param key -\n * @param options -\n *\n * @internal\n */\nexport const getTranslation = (\n translations: Record<string, string>,\n key: string,\n options: { values?: Record<string, string>; count?: number } = {}\n): string | null => {\n const { values = {}, count = 0 } = options;\n const keyPlural = `${key}__plural`;\n const keyForCount = (count: number) => `${key}__${count}`;\n\n if (Object.prototype.hasOwnProperty.call(translations, keyForCount(count))) {\n // Find key__count translation key\n return replaceTranslationValues(translations[keyForCount(count)], values);\n } else if (Object.prototype.hasOwnProperty.call(translations, keyPlural) && count > 1) {\n // Find key__plural translation key, if count greater than 1 (e.g. myTranslation__plural)\n return replaceTranslationValues(translations[keyPlural], values);\n } else if (Object.prototype.hasOwnProperty.call(translations, key)) {\n // Find key translation key (e.g. myTranslation)\n return replaceTranslationValues(translations[key], values);\n }\n\n return null;\n};\n\n/**\n * Injects JSX elements in a middle of a translation and returns a JSX array\n * The input string should use %# as the token to know where to insert the component\n * @param translation - Translation string\n * @param renderFunctions - An array function that renders JSX elements\n */\nexport const interpolateElement = (translation: string, renderFunctions: Array<(translation: string) => h.JSX.Element | string>) => {\n // splits by regex group, it guarantees that it only splits with 2 tokens (%#)\n const matches = translation.split(/%#(.*?)%#/gm);\n\n if (renderFunctions.length !== Math.floor(matches.length / 2)) {\n throw Error('The number of functions provided does not match the number of elements in the translation string.');\n }\n\n // the map will create an array of JSX / string elements, this syntax in accepted in JSX/react to render elements\n return matches.map((term, index) => {\n // math to get the index of the renderFunction that should be used\n // since we split on tokens, that means the index of the render function is half of the index of the string\n const indexInFunctionArray = Math.floor(index / 2);\n return index % 2 === 0 ? term : renderFunctions[indexInFunctionArray](term);\n });\n};\n"],"names":["toTwoLetterCode","locale","toLowerCase","substring","isLocaleLenghtValid","Boolean","length","LOCALE_NAME_MIN_LENGTH","LOCALE_NAME_MAX_LENGTH","matchLocale","supportedLocales","lowerLocale","exactMatch","find","supLoc","localeTwoLetter","formatLocaleToLanguageCountryLocale","localeParam","replace","test","languageCode","countryCode","split","fullLocale","toUpperCase","join","parseLocale","DEFAULT_LOCALE","formattedLocale","includes","formatCustomTranslations","customTranslations","Object","keys","reduce","memo","localeKey","replaceTranslationValues","translation","values","_","k","getTranslation","translations","key","options","count","keyPlural","keyForCount","prototype","hasOwnProperty","call","interpolateElement","renderFunctions","matches","Math","floor","Error","map","term","index","indexInFunctionArray"],"mappings":"wGAOA,MAAMA,EAAmBC,GAA2BA,EAAOC,cAAcC,UAAU,EAAG,GAOhFC,EAAuBH,GACzBI,QAAQJ,IAAWA,EAAOK,QAAUC,GAA0BN,EAAOK,QAAUE,EAY5E,SAASC,EAAYR,EAAgBS,GACxC,IAAKT,GAA4B,iBAAXA,EAAqB,OAAO,KAElD,MAAMU,EAAcV,EAAOC,cACrBU,EAAaF,EAAiBG,KAAKC,GAAUA,EAAOZ,gBAAkBS,GAE5E,GAAIC,EAAY,OAAOA,EAEvB,MAAMG,EAAkBf,EAAgBC,GACxC,OAAOS,EAAiBG,KAAKC,GAAUd,EAAgBc,KAAYC,IAAoB,IAC3F,CAWO,SAASC,EAAoCC,GAChD,MAAMhB,EAASgB,EAAYC,QAAQ,IAAK,KAIxC,GAHe,4BAGJC,KAAKlB,GAAS,OAAOA,EAGhC,MAAOmB,EAAcC,GAAepB,EAAOqB,MAAM,KAGjD,IAAKF,IAAiBC,EAAa,OAAO,KAG1C,MAAME,EAAa,CAACH,EAAalB,cAAemB,EAAYG,eAAeC,KAAK,KAEhF,OAA6B,IAAtBF,EAAWjB,OAAeiB,EAAa,IAClD,CAEO,SAASG,EAAYzB,EAAgBS,GACxC,IAAKN,EAAoBH,GAAS,OAAO0B,EAEzC,MAAMC,EAAkBZ,EAAoCf,GAG5D,OAFiB2B,GAAmBlB,EAAiBmB,SAASD,GAEzCA,EAEdnB,EAAYmB,GAAmB3B,EAAQS,IAAqBiB,CACvE,CAOO,SAASG,EAAyBC,EAAyC,IAC9E,OAAOC,OAAOC,KAAKF,GAAoBG,OAA2B,CAACC,EAAMC,KACrE,IAAKhC,EAAoBgC,GAAY,OAAOD,EAI5C,OADAA,EADenB,EAAoCoB,IAAcpC,EAAgBoC,IAClEL,EAAmBK,GAC3BD,GACR,CAAA,EACP,CAEA,MAAME,EAA2B,CAACC,EAAqBC,IAC5CD,EAAYpB,QAAQ,YAAa,CAACsB,EAAGC,IAAMF,EAAOE,IAAM,IAWtDC,EAAiB,CAC1BC,EACAC,EACAC,EAA+D,CAAA,KAE/D,MAAMN,OAAEA,EAAS,CAAA,EAAEO,MAAEA,EAAQ,GAAMD,EAC7BE,EAAY,GAAGH,YACfI,EAAeF,GAAkB,GAAGF,MAAQE,IAElD,OAAId,OAAOiB,UAAUC,eAAeC,KAAKR,EAAcK,EAAYF,IAExDT,EAAyBM,EAAaK,EAAYF,IAASP,GAC3DP,OAAOiB,UAAUC,eAAeC,KAAKR,EAAcI,IAAcD,EAAQ,EAEzET,EAAyBM,EAAaI,GAAYR,GAClDP,OAAOiB,UAAUC,eAAeC,KAAKR,EAAcC,GAEnDP,EAAyBM,EAAaC,GAAML,GAGhD,MASEa,EAAqB,CAACd,EAAqBe,KAEpD,MAAMC,EAAUhB,EAAYhB,MAAM,eAElC,GAAI+B,EAAgB/C,SAAWiD,KAAKC,MAAMF,EAAQhD,OAAS,GACvD,MAAMmD,MAAM,qGAIhB,OAAOH,EAAQI,IAAI,CAACC,EAAMC,KAGtB,MAAMC,EAAuBN,KAAKC,MAAMI,EAAQ,GAChD,OAAOA,EAAQ,GAAM,EAAID,EAAON,EAAgBQ,GAAsBF"}