jb-payment-input
Version:
payment input web component
2 lines • 20.2 kB
JavaScript
"use strict";let e,t;var i,n,a,s,r,o,l,u,c,d,p,h,b,f,m,g,v,y,w,E,V,j,x,k,A,S,P,T,C,L=Object.create,q=Object.defineProperty,M=Object.getOwnPropertyDescriptor,R=Object.getOwnPropertyNames,z=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;const K=(t=null!=(e=require("react"))?L(z(e)):{},((e,t,i,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(var a,s=R(t),r=0,o=s.length;r<o;r++)a=s[r],I.call(e,a)||void 0===a||q(e,a,{get:(e=>t[e]).bind(null,a),enumerable:!(n=M(t,a))||n.enumerable});return e})(e&&e.__esModule?t:q(t,"default",{value:e,enumerable:!0}),e));function B(e,t,i,n){if("a"===i&&!n)throw TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!n:!t.has(e))throw TypeError("Cannot read private member from an object whose class did not declare it");return"m"===i?n:"a"===i?n.call(e):n?n.value:t.get(e)}function D(e,t,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 t?e!==t||!a:!t.has(e))throw TypeError("Cannot write private member to an object whose class did not declare it");return"a"===n?a.call(e,i):a?a.value=i:t.set(e,i),i}async function O(e,t,i){let{syncValidationResult:n,asyncList:a}=W(e,t,i);for(let e of a){let t=await e;n.isAllValid=n.isAllValid&&t.isValid,n.validationList.push(t)}return n}function W(e,t,i){let n={validationList:[],isAllValid:!0},a=e=>{n.validationList.push(e),e.isValid||(n.isAllValid=!1)},s=e.filter(e=>!0===e.defer),r=e.filter(e=>!0!==e.defer),o=[];for(let e of r){let n=H(t,e,i);n instanceof Promise?o.push(n):a(n)}if(n.isAllValid)for(let e of s){let n=H(t,e,i);n instanceof Promise?o.push(n):a(n)}return{syncValidationResult:n,asyncList:o}}function H(e,t,i){let n,a=t.message;if(t.validator instanceof RegExp){let a="string"==typeof e?e:i(e);n=t.validator.test(a),t.validator.lastIndex=0}if("function"==typeof t.validator){let i=function(e,t){function i(e){let t=null;return"string"==typeof e&&e.length>0&&(t=e),{isValid:"string"==typeof e?0==e.length:e,message:t}}let n=e(t);return n instanceof Promise?new Promise(e=>{n.then(t=>{e(i(t))})}):i(n)}(t.validator,e);if(i instanceof Promise)return new Promise(e=>{i.then(i=>{e({isValid:i.isValid,message:i.message,validation:t})})});n=i.isValid,a=i.message??a}return void 0===t.validator&&(n=!1),n?{isValid:!0,message:"",validation:t}:{isValid:!1,message:a,validation:t}}require("jb-payment-input");var N,_,F,U,J,$,G,Q,X,Y=class{get resultSummary(){return B(this,F,"f")}constructor(e){N.add(this),_.set(this,[]),F.set(this,{isValid:null,message:null}),this.result=null,U.set(this,{clearValidationError:[],getValue:()=>null,getValidations:[],getValueString:()=>"",setValidationResult:[],showValidationError:[]}),this.setCallbacks(e)}setCallbacks(e){Object.keys(e).forEach(t=>{"function"==typeof e[t]&&void 0!==B(this,U,"f")[t]&&(Array.isArray(B(this,U,"f")[t])?B(this,U,"f")[t].push(e[t]):B(this,U,"f")[t]=e[t])})}get list(){return B(this,_,"f")}set list(e){D(this,_,e,"f"),this.checkValidity({showError:!1})}async checkValidity(e){let t=e?.value||await Promise.resolve(B(this,U,"f").getValue()),i=await B(this,N,"m",Q).call(this,t);return B(this,N,"m",$).call(this,i,e),i}checkValiditySync(e){let t=e?.value||B(this,U,"f").getValue(),i=B(this,N,"m",X).call(this,t);return B(this,N,"m",$).call(this,i,e),i}addValidationListGetter(e){B(this,U,"f").getValidations.push(e)}};function Z(e,t,i,n={}){document.addEventListener(t,t=>{t.composedPath().includes(e)&&(t.stopPropagation(),t.stopImmediatePropagation(),i(t))},{capture:!0,...n})}function ee(e,t,i){return new KeyboardEvent(e,{altKey:t.altKey,bubbles:t.bubbles,cancelable:t.cancelable,code:t.code,composed:t.composed,ctrlKey:t.ctrlKey,detail:t.detail,isComposing:t.isComposing,key:t.key,location:t.location,metaKey:t.metaKey,repeat:t.repeat,shiftKey:t.shiftKey,view:t.view,charCode:t.charCode,keyCode:t.keyCode,which:t.which,...i})}function et(e,t,i){return new InputEvent(e,{bubbles:t.bubbles,cancelable:t.cancelable,composed:t.composed,detail:t.detail,isComposing:t.isComposing,view:t.view,which:t.which,data:t.data,dataTransfer:t.dataTransfer,inputType:t.inputType,targetRanges:"function"==typeof t.getTargetRanges()?t.getTargetRanges():[],...i})}function ei(e,t,i,n){if("a"===i&&!n)throw TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!n:!t.has(e))throw TypeError("Cannot read private member from an object whose class did not declare it");return"m"===i?n:"a"===i?n.call(e):n?n.value:t.get(e)}function en(e,t,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 t?e!==t||!a:!t.has(e))throw TypeError("Cannot write private member to an object whose class did not declare it");return"a"===n?a.call(e,i):a?a.value=i:t.set(e,i),i}_=new WeakMap,F=new WeakMap,U=new WeakMap,N=new WeakSet,J=function(){return[...B(this,N,"m",G).call(this),...B(this,_,"f")]},$=function(e,t){if(D(this,F,{isValid:e.isAllValid,message:null},"f"),e.isAllValid)B(this,U,"f").clearValidationError.forEach(e=>e());else{let i=e.validationList.find(e=>!e.isValid);this.resultSummary.message=i.message,!1!==t?.showError&&B(this,U,"f").showValidationError.forEach(e=>e({message:i.message}))}this.result=e,B(this,U,"f").setValidationResult.forEach(t=>t(e))},G=function(){let e=[];return B(this,U,"f").getValidations.forEach(t=>{"function"==typeof t&&e.push(...t())}),e.flat()},Q=async function(e){return await O(B(this,N,"a",J),e,B(this,U,"f").getValueString)},X=function(e){return function(e,t,i){let{syncValidationResult:n}=W(e,t,i);return n}(B(this,N,"a",J),e,B(this,U,"f").getValueString)};var ea=class extends HTMLElement{static get formAssociated(){return!0}get disabled(){return ei(this,a,"f")}set disabled(e){en(this,a,e,"f"),this.elements.input.disabled=e,e?ei(this,r,"f").states?.add("disabled"):ei(this,r,"f").states?.delete("disabled")}set required(e){en(this,s,e,"f"),ei(this,i,"m",o).call(this,!1)}get required(){return ei(this,s,"f")}hasState(e){return ei(this,r,"f").states.has(e)}get isAutoValidationDisabled(){return""===this.getAttribute("disable-auto-validation")||"true"===this.getAttribute("disable-auto-validation")}get validation(){return ei(this,l,"f")}get displayValue(){return ei(this,n,"f").displayValue}get value(){return ei(this,n,"f").value}set value(e){ei(this,i,"m",u).call(this,e,"SET_VALUE")}get isDirty(){return ei(this,n,"f").value!==this.initialValue}get selectionStart(){return this.elements.input.selectionStart}set selectionStart(e){this.elements.input.selectionStart=e}get selectionEnd(){return this.elements.input.selectionEnd}set selectionEnd(e){this.elements.input.selectionEnd=e}get selectionDirection(){return this.elements.input.selectionDirection}set selectionDirection(e){this.elements.input.selectionDirection=e}get name(){return this.getAttribute("name")||""}constructor(){super(),i.add(this),n.set(this,{displayValue:"",value:""}),a.set(this,!1),s.set(this,!1),r.set(this,void 0),l.set(this,new Y({clearValidationError:()=>this.clearValidationError(),showValidationError:this.showValidationError.bind(this),getValue:()=>ei(this,n,"f"),getValidations:ei(this,i,"m",T).bind(this),getValueString:()=>ei(this,n,"f").displayValue,setValidationResult:ei(this,i,"m",C).bind(this)})),this.initialValue="",f.set(this,[]),"function"==typeof this.attachInternals&&en(this,r,this.attachInternals(),"f"),ei(this,i,"m",h).call(this)}connectedCallback(){ei(this,i,"m",d).call(this),this.initProp(),ei(this,i,"m",p).call(this)}addStandardValueCallback(e){ei(this,f,"f").push(e)}standardValue(e,t){let i={displayValue:e.toString(),value:e.toString()};return ei(this,f,"f").reduce((i,a)=>a(e.toString(),ei(this,n,"f"),i,t),i)}initProp(){ei(this,i,"m",u).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(e,t,i){this.onAttributeChange(e,i)}onAttributeChange(e,t){switch(e){case"name":case"autocomplete":case"inputmode":case"readonly":case"virtualkeyboardpolicy":this.elements.input.setAttribute(e,t);break;case"label":this.elements.labelValue.innerHTML=t,null==t||void 0===t||""===t?this.elements.label.classList.add("--hide"):this.elements.label.classList.remove("--hide");break;case"type":this.elements.input.setAttribute("type",t),"number"==t&&null==this.getAttribute("inputmode")&&this.setAttribute("inputmode","numeric");break;case"message":this.elements.messageBox.classList.contains("error")||(this.elements.messageBox.innerHTML=t);break;case"value":ei(this,i,"m",u).call(this,t,"SET_VALUE");break;case"placeholder":this.elements.input.placeholder=t;break;case"disabled":""===t||"true"===t?this.disabled=!0:"false"!==t&&null!=t&&void 0!==t||(this.disabled=!1,this.elements.input.removeAttribute("disabled"));break;case"required":this.required=!!t&&"false"!==t;break;case"error":this.reportValidity()}}showValidationError(e){this.elements.messageBox.innerHTML=e.message,ei(this,r,"f").states?.add("invalid")}clearValidationError(){let e=this.getAttribute("message")||"";this.elements.messageBox.innerHTML=e,ei(this,r,"f").states?.delete("invalid")}focus(){this.elements.input.focus()}setSelectionRange(e,t,i){this.elements.input.setSelectionRange(e,t,i)}checkValidity(){let e=ei(this,l,"f").checkValiditySync({showError:!1});if(!e.isAllValid){let e=new CustomEvent("invalid");this.dispatchEvent(e)}return e.isAllValid}reportValidity(){let e=ei(this,l,"f").checkValiditySync({showError:!0});if(!e.isAllValid){let e=new CustomEvent("invalid");this.dispatchEvent(e)}return e.isAllValid}get validationMessage(){return ei(this,r,"f").validationMessage}};function es(e,t,i,n=!1){let a=(0,K.useCallback)(t=>{e.current&&"function"==typeof i&&i(t)},[e,i]);(0,K.useEffect)(()=>{let i=e.current;return i&&i.addEventListener(t,a,{passive:n,capture:!1}),function(){i&&i.removeEventListener(t,a,{passive:n,capture:!1})}},[e,t,i,n])}function er(e,t){es(e,"enter",t.onEnter),es(e,"input",t.onInput),es(e,"beforeinput",t.onBeforeinput),es(e,"change",t.onChange),es(e,"keydown",t.onKeydown),es(e,"keyup",t.onKeyup),es(e,"focus",t.onFocus),es(e,"blur",t.onBlur)}function eo(e,t){(0,K.useEffect)(()=>{let i=t.value;(null==t.value||void 0===t.value)&&(i=""),e&&e.current&&e.current&&(e.current.value=i?.toString()||"")},[t.value]),(0,K.useEffect)(()=>{t.type&&e?.current?.setAttribute("type",t.type)},[t.type]),(0,K.useEffect)(()=>{e?.current?.setAttribute("name",t.name||"")},[t.name]),(0,K.useEffect)(()=>{e&&e.current&&(e.current.validation.list=t.validationList||[])},[t.validationList]),(0,K.useEffect)(()=>{e?.current?.setAttribute("label",t.label||"")},[t.label]),(0,K.useEffect)(()=>{"boolean"==typeof t.disabled&&e?.current?.setAttribute("disabled",`${t.disabled}`)},[t.disabled]),(0,K.useEffect)(()=>{"boolean"==typeof t.required&&e?.current?.setAttribute("required",`${t.required}`)},[t.required]),(0,K.useEffect)(()=>{t.inputmode?e.current?.setAttribute("inputmode",t.inputmode):e.current?.removeAttribute("inputmode")},[t.inputmode]),(0,K.useEffect)(()=>{e?.current?.setAttribute("message",t.message||"")},[t.message]),(0,K.useEffect)(()=>{e?.current?.setAttribute("placeholder",t.placeholder||"")},[t.placeholder]),(0,K.useEffect)(()=>{t.error?e?.current?.setAttribute("error",t.error):e?.current?.removeAttribute("error")},[t.error])}n=new WeakMap,a=new WeakMap,s=new WeakMap,r=new WeakMap,l=new WeakMap,f=new WeakMap,i=new WeakSet,o=function(e){if(!this.isAutoValidationDisabled)return ei(this,l,"f").checkValidity({showError:e})},u=function(e,t){e??="";let n=this.standardValue(e,t);ei(this,i,"m",c).call(this,n)},c=function(e){en(this,n,e,"f"),ei(this,r,"f")&&"function"==typeof ei(this,r,"f").setFormValue&&ei(this,r,"f").setFormValue(e.value),this.elements.input.value=e.displayValue},d=function(){let e=new CustomEvent("load",{bubbles:!0,composed:!0});this.dispatchEvent(e)},p=function(){let e=new CustomEvent("init",{bubbles:!0,composed:!0});this.dispatchEvent(e)},h=function(){let e=this.attachShadow({mode:"open",delegatesFocus:!0});ei(this,i,"m",b).call(this),this.elements={input:e.querySelector(".input-box input"),inputBox:e.querySelector(".input-box"),label:e.querySelector("label"),labelValue:e.querySelector("label .label-value"),messageBox:e.querySelector(".message-box"),slots:{startSection:e.querySelector(".jb-input-start-section-wrapper slot"),endSection:e.querySelector(".jb-input-end-section-wrapper slot")}},ei(this,i,"m",m).call(this)},b=function(){let e=document.createElement("template");e.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(e.content.cloneNode(!0))},m=function(){this.elements.input.addEventListener("change",e=>ei(this,i,"m",S).call(this,e),{capture:!1}),this.elements.input.addEventListener("beforeinput",ei(this,i,"m",k).bind(this),{capture:!1}),this.elements.input.addEventListener("input",e=>ei(this,i,"m",j).call(this,e),{capture:!1}),Z(this.elements.input,"keyup",ei(this,i,"m",w).bind(this)),Z(this.elements.input,"keydown",ei(this,i,"m",g).bind(this)),Z(this.elements.input,"keypress",ei(this,i,"m",y).bind(this))},g=function(e){ei(this,i,"m",v).call(this,e)},v=function(e){e.stopPropagation();let t=ee("keydown",e,{cancelable:!0});this.dispatchEvent(t)||e.preventDefault()},y=function(e){e.stopPropagation();let t=ee("keypress",e,{cancelable:!1});this.dispatchEvent(t)},w=function(e){ei(this,i,"m",E).call(this,e),13==e.keyCode&&ei(this,i,"m",V).call(this)},E=function(e){e.stopPropagation();let t=ee("keyup",e,{cancelable:!1});this.dispatchEvent(t)},V=function(){let e=new KeyboardEvent("enter");this.dispatchEvent(e)},j=function(e){let t=e.target.selectionEnd||0,n=(e.target.selectionStart,e.target.value),a=e.target;ei(this,i,"m",u).call(this,n,"INPUT"),t!==n.length&&(["number"].includes(this.getAttribute("type"))||a.setSelectionRange(t,t)),ei(this,i,"m",o).call(this,!1),ei(this,i,"m",x).call(this,e)},x=function(e){e.stopPropagation();let t=et("input",e,{cancelable:!0});this.dispatchEvent(t)},k=function(e){ei(this,i,"m",A).call(this,e)},A=function(e){e.stopPropagation();let t=et("beforeinput",e,{cancelable:!0});return this.dispatchEvent(t),t.defaultPrevented&&e.preventDefault(),t.defaultPrevented},S=function(e){let t=e.target.value,a=ei(this,n,"f");ei(this,i,"m",u).call(this,t,"CHANGE"),ei(this,i,"m",o).call(this,!0),ei(this,i,"m",P).call(this,e)&&(en(this,n,a,"f"),e.preventDefault())},P=function(e){e.stopPropagation();let t=new Event("change",{bubbles:e.bubbles,cancelable:e.cancelable,composed:e.composed});return this.dispatchEvent(t),!!t.defaultPrevented},T=function(){let e=[];return this.required&&e.push({validator:/.{1}/g,message:`${this.getAttribute("label")} میبایست حتما وارد شود`,stateType:"valueMissing"}),null!==this.getAttribute("error")&&this.getAttribute("error").trim().length>0&&e.push({validator:void 0,message:this.getAttribute("error"),stateType:"customError"}),e},C=function(e){if(e.isAllValid)ei(this,r,"f").setValidity({},"");else{let t={},i="";e.validationList.forEach(e=>{e.isValid||(e.validation.stateType&&(t[e.validation.stateType]=!0),""==i&&(i=e.message))}),ei(this,r,"f").setValidity(t,i)}},customElements.get("jb-input")||window.customElements.define("jb-input",ea),(0,K.forwardRef)((e,t)=>{let i=(0,K.useRef)(null),[n,a]=(0,K.useState)(0);return(0,K.useImperativeHandle)(t,()=>i?i.current:{},[i]),(0,K.useEffect)(()=>{a(n+1)},[i.current]),er(i,e),eo(i,e),K.default.createElement("jb-input",{ref:i,class:e.className},e.children)}).displayName="JBInput";const el=K.default.forwardRef((e,t)=>{let i=(0,K.useRef)(null),[n,a]=(0,K.useState)(0);return(0,K.useImperativeHandle)(t,()=>i?i.current:{},[i]),(0,K.useEffect)(()=>{a(n+1)},[i.current]),eo(i,e),er(i,e),(0,K.useEffect)(()=>{i.current.setAttribute("input-type",e.inputType)},[e.inputType]),(0,K.useEffect)(()=>{e.separator&&"string"==typeof e.separator&&""!==e.separator&&(i.current.separatorString=e.separator)},[e.separator]),K.default.createElement("jb-payment-input",{placeholder:e.placeholder?e.placeholder:"",ref:i,class:e.className?e.className:"",label:e.label?e.label:"",message:e.message?e.message:""},e.children)});el.displayName="JBPaymentInput",exports.JBPaymentInput=el;
//# sourceMappingURL=JBPaymentInput.cjs.js.map