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

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

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