@adyen/adyen-web/dist/es/components/internal/FormFields/Field/Field.js

[](https://www.npmjs.com/package/@adyen/adyen-web)

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