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