jb-payment-input/react/dist/JBPaymentInput.js

payment input web component

import t,{forwardRef as e,useCallback as i,useEffect as n,useImperativeHandle as a,useRef as s,useState as r}from"react";import"jb-payment-input";function o(t,e,i,n){if("a"===i&&!n)throw TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!n:!e.has(t))throw TypeError("Cannot read private member from an object whose class did not declare it");return"m"===i?n:"a"===i?n.call(t):n?n.value:e.get(t)}function l(t,e,i,n,a){if("m"===n)throw TypeError("Private method is not writable");if("a"===n&&!a)throw TypeError("Private accessor was defined without a setter");if("function"==typeof e?t!==e||!a:!e.has(t))throw TypeError("Cannot write private member to an object whose class did not declare it");return"a"===n?a.call(t,i):a?a.value=i:e.set(t,i),i}async function u(t,e,i){let{syncValidationResult:n,asyncList:a}=c(t,e,i);for(let t of a){let e=await t;n.isAllValid=n.isAllValid&&e.isValid,n.validationList.push(e)}return n}function c(t,e,i){let n={validationList:[],isAllValid:!0},a=t=>{n.validationList.push(t),t.isValid||(n.isAllValid=!1)},s=t.filter(t=>!0===t.defer),r=t.filter(t=>!0!==t.defer),o=[];for(let t of r){let n=d(e,t,i);n instanceof Promise?o.push(n):a(n)}if(n.isAllValid)for(let t of s){let n=d(e,t,i);n instanceof Promise?o.push(n):a(n)}return{syncValidationResult:n,asyncList:o}}function d(t,e,i){let n,a=e.message;if(e.validator instanceof RegExp){let a="string"==typeof t?t:i(t);n=e.validator.test(a),e.validator.lastIndex=0}if("function"==typeof e.validator){let i=function(t,e){function i(t){let e=null;return"string"==typeof t&&t.length>0&&(e=t),{isValid:"string"==typeof t?0==t.length:t,message:e}}let n=t(e);return n instanceof Promise?new Promise(t=>{n.then(e=>{t(i(e))})}):i(n)}(e.validator,t);if(i instanceof Promise)return new Promise(t=>{i.then(i=>{t({isValid:i.isValid,message:i.message,validation:e})})});n=i.isValid,a=i.message??a}return void 0===e.validator&&(n=!1),n?{isValid:!0,message:"",validation:e}:{isValid:!1,message:a,validation:e}}var p,h,b,m,f,g,v,y,w,V,E,j,x,k,A,S,T,P,C,L,M,q,R,z,K,B,W,D,I,N,H,F,U,J,$,_,G,O,Q=class{get resultSummary(){return o(this,F,"f")}constructor(t){N.add(this),H.set(this,[]),F.set(this,{isValid:null,message:null}),this.result=null,U.set(this,{clearValidationError:[],getValue:()=>null,getValidations:[],getValueString:()=>"",setValidationResult:[],showValidationError:[]}),this.setCallbacks(t)}setCallbacks(t){Object.keys(t).forEach(e=>{"function"==typeof t[e]&&void 0!==o(this,U,"f")[e]&&(Array.isArray(o(this,U,"f")[e])?o(this,U,"f")[e].push(t[e]):o(this,U,"f")[e]=t[e])})}get list(){return o(this,H,"f")}set list(t){l(this,H,t,"f"),this.checkValidity({showError:!1})}async checkValidity(t){let e=t?.value||await Promise.resolve(o(this,U,"f").getValue()),i=await o(this,N,"m",G).call(this,e);return o(this,N,"m",$).call(this,i,t),i}checkValiditySync(t){let e=t?.value||o(this,U,"f").getValue(),i=o(this,N,"m",O).call(this,e);return o(this,N,"m",$).call(this,i,t),i}addValidationListGetter(t){o(this,U,"f").getValidations.push(t)}};function X(t,e,i,n={}){document.addEventListener(e,e=>{e.composedPath().includes(t)&&(e.stopPropagation(),e.stopImmediatePropagation(),i(e))},{capture:!0,...n})}function Y(t,e,i){return new KeyboardEvent(t,{altKey:e.altKey,bubbles:e.bubbles,cancelable:e.cancelable,code:e.code,composed:e.composed,ctrlKey:e.ctrlKey,detail:e.detail,isComposing:e.isComposing,key:e.key,location:e.location,metaKey:e.metaKey,repeat:e.repeat,shiftKey:e.shiftKey,view:e.view,charCode:e.charCode,keyCode:e.keyCode,which:e.which,...i})}function Z(t,e,i){return new InputEvent(t,{bubbles:e.bubbles,cancelable:e.cancelable,composed:e.composed,detail:e.detail,isComposing:e.isComposing,view:e.view,which:e.which,data:e.data,dataTransfer:e.dataTransfer,inputType:e.inputType,targetRanges:"function"==typeof e.getTargetRanges()?e.getTargetRanges():[],...i})}function tt(t,e,i,n){if("a"===i&&!n)throw TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!n:!e.has(t))throw TypeError("Cannot read private member from an object whose class did not declare it");return"m"===i?n:"a"===i?n.call(t):n?n.value:e.get(t)}function te(t,e,i,n,a){if("m"===n)throw TypeError("Private method is not writable");if("a"===n&&!a)throw TypeError("Private accessor was defined without a setter");if("function"==typeof e?t!==e||!a:!e.has(t))throw TypeError("Cannot write private member to an object whose class did not declare it");return"a"===n?a.call(t,i):a?a.value=i:e.set(t,i),i}H=new WeakMap,F=new WeakMap,U=new WeakMap,N=new WeakSet,J=function(){return[...o(this,N,"m",_).call(this),...o(this,H,"f")]},$=function(t,e){if(l(this,F,{isValid:t.isAllValid,message:null},"f"),t.isAllValid)o(this,U,"f").clearValidationError.forEach(t=>t());else{let i=t.validationList.find(t=>!t.isValid);this.resultSummary.message=i.message,!1!==e?.showError&&o(this,U,"f").showValidationError.forEach(t=>t({message:i.message}))}this.result=t,o(this,U,"f").setValidationResult.forEach(e=>e(t))},_=function(){let t=[];return o(this,U,"f").getValidations.forEach(e=>{"function"==typeof e&&t.push(...e())}),t.flat()},G=async function(t){return await u(o(this,N,"a",J),t,o(this,U,"f").getValueString)},O=function(t){return function(t,e,i){let{syncValidationResult:n}=c(t,e,i);return n}(o(this,N,"a",J),t,o(this,U,"f").getValueString)};var ti=class extends HTMLElement{static get formAssociated(){return!0}get disabled(){return tt(this,b,"f")}set disabled(t){te(this,b,t,"f"),this.elements.input.disabled=t,t?tt(this,f,"f").states?.add("disabled"):tt(this,f,"f").states?.delete("disabled")}set required(t){te(this,m,t,"f"),tt(this,p,"m",g).call(this,!1)}get required(){return tt(this,m,"f")}hasState(t){return tt(this,f,"f").states.has(t)}get isAutoValidationDisabled(){return""===this.getAttribute("disable-auto-validation")||"true"===this.getAttribute("disable-auto-validation")}get validation(){return tt(this,v,"f")}get displayValue(){return tt(this,h,"f").displayValue}get value(){return tt(this,h,"f").value}set value(t){tt(this,p,"m",y).call(this,t,"SET_VALUE")}get isDirty(){return tt(this,h,"f").value!==this.initialValue}get selectionStart(){return this.elements.input.selectionStart}set selectionStart(t){this.elements.input.selectionStart=t}get selectionEnd(){return this.elements.input.selectionEnd}set selectionEnd(t){this.elements.input.selectionEnd=t}get selectionDirection(){return this.elements.input.selectionDirection}set selectionDirection(t){this.elements.input.selectionDirection=t}get name(){return this.getAttribute("name")||""}constructor(){super(),p.add(this),h.set(this,{displayValue:"",value:""}),b.set(this,!1),m.set(this,!1),f.set(this,void 0),v.set(this,new Q({clearValidationError:()=>this.clearValidationError(),showValidationError:this.showValidationError.bind(this),getValue:()=>tt(this,h,"f"),getValidations:tt(this,p,"m",D).bind(this),getValueString:()=>tt(this,h,"f").displayValue,setValidationResult:tt(this,p,"m",I).bind(this)})),this.initialValue="",k.set(this,[]),"function"==typeof this.attachInternals&&te(this,f,this.attachInternals(),"f"),tt(this,p,"m",j).call(this)}connectedCallback(){tt(this,p,"m",V).call(this),this.initProp(),tt(this,p,"m",E).call(this)}addStandardValueCallback(t){tt(this,k,"f").push(t)}standardValue(t,e){let i={displayValue:t.toString(),value:t.toString()};return tt(this,k,"f").reduce((i,n)=>n(t.toString(),tt(this,h,"f"),i,e),i)}initProp(){tt(this,p,"m",y).call(this,this.getAttribute("value")||"","SET_VALUE")}static get observedAttributes(){return["label","type","message","value","name","autocomplete","placeholder","disabled","inputmode","readonly","disable-auto-validation","virtualkeyboardpolicy","required","error"]}attributeChangedCallback(t,e,i){this.onAttributeChange(t,i)}onAttributeChange(t,e){switch(t){case"name":case"autocomplete":case"inputmode":case"readonly":case"virtualkeyboardpolicy":this.elements.input.setAttribute(t,e);break;case"label":this.elements.labelValue.innerHTML=e,null==e||void 0===e||""===e?this.elements.label.classList.add("--hide"):this.elements.label.classList.remove("--hide");break;case"type":this.elements.input.setAttribute("type",e),"number"==e&&null==this.getAttribute("inputmode")&&this.setAttribute("inputmode","numeric");break;case"message":this.elements.messageBox.classList.contains("error")||(this.elements.messageBox.innerHTML=e);break;case"value":tt(this,p,"m",y).call(this,e,"SET_VALUE");break;case"placeholder":this.elements.input.placeholder=e;break;case"disabled":""===e||"true"===e?this.disabled=!0:"false"!==e&&null!=e&&void 0!==e||(this.disabled=!1,this.elements.input.removeAttribute("disabled"));break;case"required":this.required=!!e&&"false"!==e;break;case"error":this.reportValidity()}}showValidationError(t){this.elements.messageBox.innerHTML=t.message,tt(this,f,"f").states?.add("invalid")}clearValidationError(){let t=this.getAttribute("message")||"";this.elements.messageBox.innerHTML=t,tt(this,f,"f").states?.delete("invalid")}focus(){this.elements.input.focus()}setSelectionRange(t,e,i){this.elements.input.setSelectionRange(t,e,i)}checkValidity(){let t=tt(this,v,"f").checkValiditySync({showError:!1});if(!t.isAllValid){let t=new CustomEvent("invalid");this.dispatchEvent(t)}return t.isAllValid}reportValidity(){let t=tt(this,v,"f").checkValiditySync({showError:!0});if(!t.isAllValid){let t=new CustomEvent("invalid");this.dispatchEvent(t)}return t.isAllValid}get validationMessage(){return tt(this,f,"f").validationMessage}};function tn(t,e,a,s=!1){let r=i(e=>{t.current&&"function"==typeof a&&a(e)},[t,a]);n(()=>{let i=t.current;return i&&i.addEventListener(e,r,{passive:s,capture:!1}),function(){i&&i.removeEventListener(e,r,{passive:s,capture:!1})}},[t,e,a,s])}function ta(t,e){tn(t,"enter",e.onEnter),tn(t,"input",e.onInput),tn(t,"beforeinput",e.onBeforeinput),tn(t,"change",e.onChange),tn(t,"keydown",e.onKeydown),tn(t,"keyup",e.onKeyup),tn(t,"focus",e.onFocus),tn(t,"blur",e.onBlur)}function ts(t,e){n(()=>{let i=e.value;(null==e.value||void 0===e.value)&&(i=""),t&&t.current&&t.current&&(t.current.value=i?.toString()||"")},[e.value]),n(()=>{e.type&&t?.current?.setAttribute("type",e.type)},[e.type]),n(()=>{t?.current?.setAttribute("name",e.name||"")},[e.name]),n(()=>{t&&t.current&&(t.current.validation.list=e.validationList||[])},[e.validationList]),n(()=>{t?.current?.setAttribute("label",e.label||"")},[e.label]),n(()=>{"boolean"==typeof e.disabled&&t?.current?.setAttribute("disabled",`${e.disabled}`)},[e.disabled]),n(()=>{"boolean"==typeof e.required&&t?.current?.setAttribute("required",`${e.required}`)},[e.required]),n(()=>{e.inputmode?t.current?.setAttribute("inputmode",e.inputmode):t.current?.removeAttribute("inputmode")},[e.inputmode]),n(()=>{t?.current?.setAttribute("message",e.message||"")},[e.message]),n(()=>{t?.current?.setAttribute("placeholder",e.placeholder||"")},[e.placeholder]),n(()=>{e.error?t?.current?.setAttribute("error",e.error):t?.current?.removeAttribute("error")},[e.error])}h=new WeakMap,b=new WeakMap,m=new WeakMap,f=new WeakMap,v=new WeakMap,k=new WeakMap,p=new WeakSet,g=function(t){if(!this.isAutoValidationDisabled)return tt(this,v,"f").checkValidity({showError:t})},y=function(t,e){t??="";let i=this.standardValue(t,e);tt(this,p,"m",w).call(this,i)},w=function(t){te(this,h,t,"f"),tt(this,f,"f")&&"function"==typeof tt(this,f,"f").setFormValue&&tt(this,f,"f").setFormValue(t.value),this.elements.input.value=t.displayValue},V=function(){let t=new CustomEvent("load",{bubbles:!0,composed:!0});this.dispatchEvent(t)},E=function(){let t=new CustomEvent("init",{bubbles:!0,composed:!0});this.dispatchEvent(t)},j=function(){let t=this.attachShadow({mode:"open",delegatesFocus:!0});tt(this,p,"m",x).call(this),this.elements={input:t.querySelector(".input-box input"),inputBox:t.querySelector(".input-box"),label:t.querySelector("label"),labelValue:t.querySelector("label .label-value"),messageBox:t.querySelector(".message-box"),slots:{startSection:t.querySelector(".jb-input-start-section-wrapper slot"),endSection:t.querySelector(".jb-input-end-section-wrapper slot")}},tt(this,p,"m",A).call(this)},x=function(){let t=document.createElement("template");t.innerHTML='<style>:host(:focus),:host(:focus-visible){outline:none}:host{--border-color:var(--jb-input-border-color, #f7f6f6);--message-color:var(--jb-input-message-color, #929292)}:host(:state(invalid)){--message-color:var(--jb-input-message-error-color, red)}:host(:focus-within){--border-color:var(--jb-input-border-color-focus, #1e2832)}.jb-input-web-component{width:100%;margin:var(--jb-input-margin, 0 0)}.jb-input-web-component:focus-visible{outline:none}.jb-input-web-component label{width:100%;margin:var(--jb-input-label-margin, 4px 0px);display:block;font-size:var(--jb-input-label-font-size, 0.8em);color:var(--jb-input-label-color, #1f1735);margin:var(--jb-input-label-margin, 0);font-weight:var(--jb-input-label-font-weight, 300)}.jb-input-web-component label.--hide{display:none}.jb-input-web-component .input-box{width:100%;box-sizing:border-box;height:var(--jb-input-height, 40px);border:solid var(--jb-input-border-width, 1px) var(--border-color);background-color:var(--jb-input-bgcolor, #f7f6f6);border-bottom:solid var(--jb-input-border-bottom-width, 3px) var(--border-color);border-radius:var(--jb-input-border-radius, 16px);margin:4px 0px;transition:ease .3s all;overflow:var(--jb-input-box-overflow, hidden);display:grid;grid-template-columns:auto 1fr auto;box-shadow:var(--jb-input-box-shadow, none)}.jb-input-web-component .input-box:focus-within{border-width:var(--jb-input-border-width-focus, var(--jb-input-border-width, 1px));border-bottom-width:var(--jb-input-border-bottom-width-focus, var(--jb-input-border-bottom-width, 3px));box-shadow:var(--jb-input-box-shadow-focus, none)}.jb-input-web-component .input-box input{border:none;width:100%;box-sizing:border-box;height:100%;background-color:rgba(0,0,0,0);padding:var(--jb-input-input-padding, 2px 12px 0 12px);display:block;font-family:inherit;font-size:var(--jb-input-value-font-size, 1.1rem);color:var(--jb-input-value-color, #1f1735);margin:0;border-radius:0;text-align:var(--jb-input-input-text-align, initial);direction:var(--jb-input-input-direction, inherit);font-weight:var(--jb-input-input-font-weight, initial)}.jb-input-web-component .input-box input:focus{outline:none}.jb-input-web-component .input-box input::placeholder{color:var(--jb-input-placeholder-color, initial);font-size:var(--jb-input-placeholder-font-size, 1.1rem)}.jb-input-web-component .input-box input::-webkit-outer-spin-button,.jb-input-web-component .input-box input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.jb-input-web-component .input-box input[type=number]{-moz-appearance:textfield}.jb-input-web-component .input-box .jb-input-start-section-wrapper{display:flex;height:100%;width:auto;align-items:center;justify-content:center}.jb-input-web-component .input-box ::slotted([slot=start-section]),.jb-input-web-component .input-box ::slotted([slot=end-section]){height:100%;display:flex;justify-content:center;align-items:center;max-height:100%;overflow-y:hidden;background-color:rgba(0,0,0,0);padding:8px 16px;width:auto;box-sizing:border-box}.jb-input-web-component .message-box{font-size:var(--jb-input-message-font-size, 0.7rem);padding:2px 8px;color:var(--message-color);display:var(--jb-input-message-box-display, block)}.jb-input-web-component .message-box:empty{padding:0}</style>\n\n    <div class="jb-input-web-component">\n    <label class="--hide"><span class="label-value" part="label"></span></label>\n    <div class="input-box" part="input-box">\n        <div class="jb-input-start-section-wrapper">\n            <slot name="start-section"></slot>\n        </div>\n        <input part="input"/>\n        <div class="jb-input-end-section-wrapper">\n            <slot name="end-section"></slot>\n        </div>\n    </div>\n    <div class="message-box" part="message"></div>\n</div>\n  ',this.shadowRoot.appendChild(t.content.cloneNode(!0))},A=function(){this.elements.input.addEventListener("change",t=>tt(this,p,"m",B).call(this,t),{capture:!1}),this.elements.input.addEventListener("beforeinput",tt(this,p,"m",z).bind(this),{capture:!1}),this.elements.input.addEventListener("input",t=>tt(this,p,"m",q).call(this,t),{capture:!1}),X(this.elements.input,"keyup",tt(this,p,"m",C).bind(this)),X(this.elements.input,"keydown",tt(this,p,"m",S).bind(this)),X(this.elements.input,"keypress",tt(this,p,"m",P).bind(this))},S=function(t){tt(this,p,"m",T).call(this,t)},T=function(t){t.stopPropagation();let e=Y("keydown",t,{cancelable:!0});this.dispatchEvent(e)||t.preventDefault()},P=function(t){t.stopPropagation();let e=Y("keypress",t,{cancelable:!1});this.dispatchEvent(e)},C=function(t){tt(this,p,"m",L).call(this,t),13==t.keyCode&&tt(this,p,"m",M).call(this)},L=function(t){t.stopPropagation();let e=Y("keyup",t,{cancelable:!1});this.dispatchEvent(e)},M=function(){let t=new KeyboardEvent("enter");this.dispatchEvent(t)},q=function(t){let e=t.target.selectionEnd||0,i=(t.target.selectionStart,t.target.value),n=t.target;tt(this,p,"m",y).call(this,i,"INPUT"),e!==i.length&&(["number"].includes(this.getAttribute("type"))||n.setSelectionRange(e,e)),tt(this,p,"m",g).call(this,!1),tt(this,p,"m",R).call(this,t)},R=function(t){t.stopPropagation();let e=Z("input",t,{cancelable:!0});this.dispatchEvent(e)},z=function(t){tt(this,p,"m",K).call(this,t)},K=function(t){t.stopPropagation();let e=Z("beforeinput",t,{cancelable:!0});return this.dispatchEvent(e),e.defaultPrevented&&t.preventDefault(),e.defaultPrevented},B=function(t){let e=t.target.value,i=tt(this,h,"f");tt(this,p,"m",y).call(this,e,"CHANGE"),tt(this,p,"m",g).call(this,!0),tt(this,p,"m",W).call(this,t)&&(te(this,h,i,"f"),t.preventDefault())},W=function(t){t.stopPropagation();let e=new Event("change",{bubbles:t.bubbles,cancelable:t.cancelable,composed:t.composed});return this.dispatchEvent(e),!!e.defaultPrevented},D=function(){let t=[];return this.required&&t.push({validator:/.{1}/g,message:`${this.getAttribute("label")} میبایست حتما وارد شود`,stateType:"valueMissing"}),null!==this.getAttribute("error")&&this.getAttribute("error").trim().length>0&&t.push({validator:void 0,message:this.getAttribute("error"),stateType:"customError"}),t},I=function(t){if(t.isAllValid)tt(this,f,"f").setValidity({},"");else{let e={},i="";t.validationList.forEach(t=>{t.isValid||(t.validation.stateType&&(e[t.validation.stateType]=!0),""==i&&(i=t.message))}),tt(this,f,"f").setValidity(e,i)}},customElements.get("jb-input")||window.customElements.define("jb-input",ti),e((e,i)=>{let o=s(null),[l,u]=r(0);return a(i,()=>o?o.current:{},[o]),n(()=>{u(l+1)},[o.current]),ta(o,e),ts(o,e),t.createElement("jb-input",{ref:o,class:e.className},e.children)}).displayName="JBInput";let tr=t.forwardRef((e,i)=>{let o=s(null),[l,u]=r(0);return a(i,()=>o?o.current:{},[o]),n(()=>{u(l+1)},[o.current]),ts(o,e),ta(o,e),n(()=>{o.current.setAttribute("input-type",e.inputType)},[e.inputType]),n(()=>{e.separator&&"string"==typeof e.separator&&""!==e.separator&&(o.current.separatorString=e.separator)},[e.separator]),t.createElement("jb-payment-input",{placeholder:e.placeholder?e.placeholder:"",ref:o,class:e.className?e.className:"",label:e.label?e.label:"",message:e.message?e.message:""},e.children)});tr.displayName="JBPaymentInput";export{tr as JBPaymentInput};
//# sourceMappingURL=JBPaymentInput.js.map