jb-payment-input
Version:
payment input web component
2 lines • 20.5 kB
JavaScript
var e,t;e=this,t=function(e,t,i){"use strict";let n,a;var 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,R,q,M=Object.create,I=Object.defineProperty,B=Object.getOwnPropertyDescriptor,z=Object.getOwnPropertyNames,K=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;function O(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 W(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 H(e,t,i){let{syncValidationResult:n,asyncList:a}=N(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 N(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=J(t,e,i);n instanceof Promise?o.push(n):a(n)}if(n.isAllValid)for(let e of s){let n=J(t,e,i);n instanceof Promise?o.push(n):a(n)}return{syncValidationResult:n,asyncList:o}}function J(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}}a=null!=(n=t)?M(K(n)):{},t=((e,t,i,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(var a,s=z(t),r=0,o=s.length;r<o;r++)a=s[r],D.call(e,a)||void 0===a||I(e,a,{get:(e=>t[e]).bind(null,a),enumerable:!(n=B(t,a))||n.enumerable});return e})(n&&n.__esModule?a:I(a,"default",{value:n,enumerable:!0}),n);var _,F,U,$,G,Q,X,Y,Z,ee=class{get resultSummary(){return O(this,U,"f")}constructor(e){_.add(this),F.set(this,[]),U.set(this,{isValid:null,message:null}),this.result=null,$.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!==O(this,$,"f")[t]&&(Array.isArray(O(this,$,"f")[t])?O(this,$,"f")[t].push(e[t]):O(this,$,"f")[t]=e[t])})}get list(){return O(this,F,"f")}set list(e){W(this,F,e,"f"),this.checkValidity({showError:!1})}async checkValidity(e){let t=e?.value||await Promise.resolve(O(this,$,"f").getValue()),i=await O(this,_,"m",Y).call(this,t);return O(this,_,"m",Q).call(this,i,e),i}checkValiditySync(e){let t=e?.value||O(this,$,"f").getValue(),i=O(this,_,"m",Z).call(this,t);return O(this,_,"m",Q).call(this,i,e),i}addValidationListGetter(e){O(this,$,"f").getValidations.push(e)}};function et(e,t,i,n={}){document.addEventListener(t,t=>{t.composedPath().includes(e)&&(t.stopPropagation(),t.stopImmediatePropagation(),i(t))},{capture:!0,...n})}function ei(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 en(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 ea(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 es(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}F=new WeakMap,U=new WeakMap,$=new WeakMap,_=new WeakSet,G=function(){return[...O(this,_,"m",X).call(this),...O(this,F,"f")]},Q=function(e,t){if(W(this,U,{isValid:e.isAllValid,message:null},"f"),e.isAllValid)O(this,$,"f").clearValidationError.forEach(e=>e());else{let i=e.validationList.find(e=>!e.isValid);this.resultSummary.message=i.message,!1!==t?.showError&&O(this,$,"f").showValidationError.forEach(e=>e({message:i.message}))}this.result=e,O(this,$,"f").setValidationResult.forEach(t=>t(e))},X=function(){let e=[];return O(this,$,"f").getValidations.forEach(t=>{"function"==typeof t&&e.push(...t())}),e.flat()},Y=async function(e){return await H(O(this,_,"a",G),e,O(this,$,"f").getValueString)},Z=function(e){return function(e,t,i){let{syncValidationResult:n}=N(e,t,i);return n}(O(this,_,"a",G),e,O(this,$,"f").getValueString)};var er=class extends HTMLElement{static get formAssociated(){return!0}get disabled(){return ea(this,o,"f")}set disabled(e){es(this,o,e,"f"),this.elements.input.disabled=e,e?ea(this,u,"f").states?.add("disabled"):ea(this,u,"f").states?.delete("disabled")}set required(e){es(this,l,e,"f"),ea(this,s,"m",c).call(this,!1)}get required(){return ea(this,l,"f")}hasState(e){return ea(this,u,"f").states.has(e)}get isAutoValidationDisabled(){return""===this.getAttribute("disable-auto-validation")||"true"===this.getAttribute("disable-auto-validation")}get validation(){return ea(this,d,"f")}get displayValue(){return ea(this,r,"f").displayValue}get value(){return ea(this,r,"f").value}set value(e){ea(this,s,"m",p).call(this,e,"SET_VALUE")}get isDirty(){return ea(this,r,"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(),s.add(this),r.set(this,{displayValue:"",value:""}),o.set(this,!1),l.set(this,!1),u.set(this,void 0),d.set(this,new ee({clearValidationError:()=>this.clearValidationError(),showValidationError:this.showValidationError.bind(this),getValue:()=>ea(this,r,"f"),getValidations:ea(this,s,"m",R).bind(this),getValueString:()=>ea(this,r,"f").displayValue,setValidationResult:ea(this,s,"m",q).bind(this)})),this.initialValue="",v.set(this,[]),"function"==typeof this.attachInternals&&es(this,u,this.attachInternals(),"f"),ea(this,s,"m",m).call(this)}connectedCallback(){ea(this,s,"m",b).call(this),this.initProp(),ea(this,s,"m",f).call(this)}addStandardValueCallback(e){ea(this,v,"f").push(e)}standardValue(e,t){let i={displayValue:e.toString(),value:e.toString()};return ea(this,v,"f").reduce((i,n)=>n(e.toString(),ea(this,r,"f"),i,t),i)}initProp(){ea(this,s,"m",p).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":ea(this,s,"m",p).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,ea(this,u,"f").states?.add("invalid")}clearValidationError(){let e=this.getAttribute("message")||"";this.elements.messageBox.innerHTML=e,ea(this,u,"f").states?.delete("invalid")}focus(){this.elements.input.focus()}setSelectionRange(e,t,i){this.elements.input.setSelectionRange(e,t,i)}checkValidity(){let e=ea(this,d,"f").checkValiditySync({showError:!1});if(!e.isAllValid){let e=new CustomEvent("invalid");this.dispatchEvent(e)}return e.isAllValid}reportValidity(){let e=ea(this,d,"f").checkValiditySync({showError:!0});if(!e.isAllValid){let e=new CustomEvent("invalid");this.dispatchEvent(e)}return e.isAllValid}get validationMessage(){return ea(this,u,"f").validationMessage}};function eo(e,i,n,a=!1){let s=(0,t.useCallback)(t=>{e.current&&"function"==typeof n&&n(t)},[e,n]);(0,t.useEffect)(()=>{let t=e.current;return t&&t.addEventListener(i,s,{passive:a,capture:!1}),function(){t&&t.removeEventListener(i,s,{passive:a,capture:!1})}},[e,i,n,a])}function el(e,t){eo(e,"enter",t.onEnter),eo(e,"input",t.onInput),eo(e,"beforeinput",t.onBeforeinput),eo(e,"change",t.onChange),eo(e,"keydown",t.onKeydown),eo(e,"keyup",t.onKeyup),eo(e,"focus",t.onFocus),eo(e,"blur",t.onBlur)}function eu(e,i){(0,t.useEffect)(()=>{let t=i.value;(null==i.value||void 0===i.value)&&(t=""),e&&e.current&&e.current&&(e.current.value=t?.toString()||"")},[i.value]),(0,t.useEffect)(()=>{i.type&&e?.current?.setAttribute("type",i.type)},[i.type]),(0,t.useEffect)(()=>{e?.current?.setAttribute("name",i.name||"")},[i.name]),(0,t.useEffect)(()=>{e&&e.current&&(e.current.validation.list=i.validationList||[])},[i.validationList]),(0,t.useEffect)(()=>{e?.current?.setAttribute("label",i.label||"")},[i.label]),(0,t.useEffect)(()=>{"boolean"==typeof i.disabled&&e?.current?.setAttribute("disabled",`${i.disabled}`)},[i.disabled]),(0,t.useEffect)(()=>{"boolean"==typeof i.required&&e?.current?.setAttribute("required",`${i.required}`)},[i.required]),(0,t.useEffect)(()=>{i.inputmode?e.current?.setAttribute("inputmode",i.inputmode):e.current?.removeAttribute("inputmode")},[i.inputmode]),(0,t.useEffect)(()=>{e?.current?.setAttribute("message",i.message||"")},[i.message]),(0,t.useEffect)(()=>{e?.current?.setAttribute("placeholder",i.placeholder||"")},[i.placeholder]),(0,t.useEffect)(()=>{i.error?e?.current?.setAttribute("error",i.error):e?.current?.removeAttribute("error")},[i.error])}r=new WeakMap,o=new WeakMap,l=new WeakMap,u=new WeakMap,d=new WeakMap,v=new WeakMap,s=new WeakSet,c=function(e){if(!this.isAutoValidationDisabled)return ea(this,d,"f").checkValidity({showError:e})},p=function(e,t){e??="";let i=this.standardValue(e,t);ea(this,s,"m",h).call(this,i)},h=function(e){es(this,r,e,"f"),ea(this,u,"f")&&"function"==typeof ea(this,u,"f").setFormValue&&ea(this,u,"f").setFormValue(e.value),this.elements.input.value=e.displayValue},b=function(){let e=new CustomEvent("load",{bubbles:!0,composed:!0});this.dispatchEvent(e)},f=function(){let e=new CustomEvent("init",{bubbles:!0,composed:!0});this.dispatchEvent(e)},m=function(){let e=this.attachShadow({mode:"open",delegatesFocus:!0});ea(this,s,"m",g).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")}},ea(this,s,"m",y).call(this)},g=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))},y=function(){this.elements.input.addEventListener("change",e=>ea(this,s,"m",C).call(this,e),{capture:!1}),this.elements.input.addEventListener("beforeinput",ea(this,s,"m",P).bind(this),{capture:!1}),this.elements.input.addEventListener("input",e=>ea(this,s,"m",A).call(this,e),{capture:!1}),et(this.elements.input,"keyup",ea(this,s,"m",j).bind(this)),et(this.elements.input,"keydown",ea(this,s,"m",w).bind(this)),et(this.elements.input,"keypress",ea(this,s,"m",V).bind(this))},w=function(e){ea(this,s,"m",E).call(this,e)},E=function(e){e.stopPropagation();let t=ei("keydown",e,{cancelable:!0});this.dispatchEvent(t)||e.preventDefault()},V=function(e){e.stopPropagation();let t=ei("keypress",e,{cancelable:!1});this.dispatchEvent(t)},j=function(e){ea(this,s,"m",x).call(this,e),13==e.keyCode&&ea(this,s,"m",k).call(this)},x=function(e){e.stopPropagation();let t=ei("keyup",e,{cancelable:!1});this.dispatchEvent(t)},k=function(){let e=new KeyboardEvent("enter");this.dispatchEvent(e)},A=function(e){let t=e.target.selectionEnd||0,i=(e.target.selectionStart,e.target.value),n=e.target;ea(this,s,"m",p).call(this,i,"INPUT"),t!==i.length&&(["number"].includes(this.getAttribute("type"))||n.setSelectionRange(t,t)),ea(this,s,"m",c).call(this,!1),ea(this,s,"m",S).call(this,e)},S=function(e){e.stopPropagation();let t=en("input",e,{cancelable:!0});this.dispatchEvent(t)},P=function(e){ea(this,s,"m",T).call(this,e)},T=function(e){e.stopPropagation();let t=en("beforeinput",e,{cancelable:!0});return this.dispatchEvent(t),t.defaultPrevented&&e.preventDefault(),t.defaultPrevented},C=function(e){let t=e.target.value,i=ea(this,r,"f");ea(this,s,"m",p).call(this,t,"CHANGE"),ea(this,s,"m",c).call(this,!0),ea(this,s,"m",L).call(this,e)&&(es(this,r,i,"f"),e.preventDefault())},L=function(e){e.stopPropagation();let t=new Event("change",{bubbles:e.bubbles,cancelable:e.cancelable,composed:e.composed});return this.dispatchEvent(t),!!t.defaultPrevented},R=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},q=function(e){if(e.isAllValid)ea(this,u,"f").setValidity({},"");else{let t={},i="";e.validationList.forEach(e=>{e.isValid||(e.validation.stateType&&(t[e.validation.stateType]=!0),""==i&&(i=e.message))}),ea(this,u,"f").setValidity(t,i)}},customElements.get("jb-input")||window.customElements.define("jb-input",er),(0,t.forwardRef)((e,i)=>{let n=(0,t.useRef)(null),[a,s]=(0,t.useState)(0);return(0,t.useImperativeHandle)(i,()=>n?n.current:{},[n]),(0,t.useEffect)(()=>{s(a+1)},[n.current]),el(n,e),eu(n,e),t.default.createElement("jb-input",{ref:n,class:e.className},e.children)}).displayName="JBInput";let ec=t.default.forwardRef((e,i)=>{let n=(0,t.useRef)(null),[a,s]=(0,t.useState)(0);return(0,t.useImperativeHandle)(i,()=>n?n.current:{},[n]),(0,t.useEffect)(()=>{s(a+1)},[n.current]),eu(n,e),el(n,e),(0,t.useEffect)(()=>{n.current.setAttribute("input-type",e.inputType)},[e.inputType]),(0,t.useEffect)(()=>{e.separator&&"string"==typeof e.separator&&""!==e.separator&&(n.current.separatorString=e.separator)},[e.separator]),t.default.createElement("jb-payment-input",{placeholder:e.placeholder?e.placeholder:"",ref:n,class:e.className?e.className:"",label:e.label?e.label:"",message:e.message?e.message:""},e.children)});ec.displayName="JBPaymentInput",e.JBPaymentInput=ec},"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("jb-payment-input")):"function"==typeof define&&define.amd?define(["exports","react","jb-payment-input"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).JBPaymentInputReact={},e.React,e.JBPaymentInput);
//# sourceMappingURL=JBPaymentInput.umd.js.map