jb-input
Version:
input web component with built in validation
2 lines • 13.3 kB
JavaScript
"use strict";var t=Object.create,e=Object.defineProperty,i=Object.getOwnPropertyDescriptor,n=Object.getOwnPropertyNames,s=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(o,r,l)=>(l=null!=o?t(s(o)):{},((t,s,o,r)=>{if(s&&"object"==typeof s||"function"==typeof s)for(var l,u=n(s),c=0,d=u.length;c<d;c++)l=u[c],a.call(t,l)||l===o||e(t,l,{get:(t=>s[t]).bind(null,l),enumerable:!(r=i(s,l))||r.enumerable});return t})(!r&&o&&o.__esModule?l:e(l,"default",{value:o,enumerable:!0}),o));const r=o(require("jb-validation")),l=o(require("jb-core"));function u(t,e,i,n){if("a"===i&&!n)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!n:!e.has(t))throw new 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 c(t,e,i,n,s){if("m"===n)throw new TypeError("Private method is not writable");if("a"===n&&!s)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof e?t!==e||!s:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===n?s.call(t,i):s?s.value=i:e.set(t,i),i}var d,p,b,h,m,v,f,g,w,y,j,x,E,V,k,A,S,P,T,C,L,M,q,z,D,O,H,W,B;var I=class extends HTMLElement{static get formAssociated(){return!0}get disabled(){return u(this,b,"f")}set disabled(t){c(this,b,t,"f"),this.elements.input.disabled=t,t?u(this,m,"f").states?.add("disabled"):u(this,m,"f").states?.delete("disabled")}set required(t){c(this,h,t,"f"),u(this,d,"m",v).call(this,!1)}get required(){return u(this,h,"f")}hasState(t){return u(this,m,"f").states.has(t)}get isAutoValidationDisabled(){return""===this.getAttribute("disable-auto-validation")||"true"===this.getAttribute("disable-auto-validation")}get validation(){return u(this,f,"f")}get displayValue(){return u(this,p,"f").displayValue}get value(){return u(this,p,"f").value}set value(t){u(this,d,"m",g).call(this,t,"SET_VALUE")}get isDirty(){return u(this,p,"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(),d.add(this),p.set(this,{displayValue:"",value:""}),b.set(this,!1),h.set(this,!1),m.set(this,void 0),f.set(this,new r.ValidationHelper({clearValidationError:()=>this.clearValidationError(),showValidationError:this.showValidationError.bind(this),getValue:()=>u(this,p,"f"),getValidations:u(this,d,"m",W).bind(this),getValueString:()=>u(this,p,"f").displayValue,setValidationResult:u(this,d,"m",B).bind(this)})),this.initialValue="",V.set(this,[]),"function"==typeof this.attachInternals&&c(this,m,this.attachInternals(),"f"),u(this,d,"m",x).call(this)}connectedCallback(){u(this,d,"m",y).call(this),this.initProp(),u(this,d,"m",j).call(this)}addStandardValueCallback(t){u(this,V,"f").push(t)}standardValue(t,e){let i={displayValue:t.toString(),value:t.toString()};return i=u(this,V,"f").reduce(((i,n)=>n(t.toString(),u(this,p,"f"),i,e)),i),i}initProp(){u(this,d,"m",g).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":u(this,d,"m",g).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,u(this,m,"f").states?.add("invalid")}clearValidationError(){const t=this.getAttribute("message")||"";this.elements.messageBox.innerHTML=t,u(this,m,"f").states?.delete("invalid")}focus(){this.elements.input.focus()}setSelectionRange(t,e,i){this.elements.input.setSelectionRange(t,e,i)}checkValidity(){const t=u(this,f,"f").checkValiditySync({showError:!1});if(!t.isAllValid){const t=new CustomEvent("invalid");this.dispatchEvent(t)}return t.isAllValid}reportValidity(){const t=u(this,f,"f").checkValiditySync({showError:!0});if(!t.isAllValid){const t=new CustomEvent("invalid");this.dispatchEvent(t)}return t.isAllValid}get validationMessage(){return u(this,m,"f").validationMessage}};p=new WeakMap,b=new WeakMap,h=new WeakMap,m=new WeakMap,f=new WeakMap,V=new WeakMap,d=new WeakSet,v=function(t){if(!this.isAutoValidationDisabled)return u(this,f,"f").checkValidity({showError:t})},g=function(t,e){null==t&&(t="");const i=this.standardValue(t,e);u(this,d,"m",w).call(this,i)},w=function(t){c(this,p,t,"f"),u(this,m,"f")&&"function"==typeof u(this,m,"f").setFormValue&&u(this,m,"f").setFormValue(t.value),this.elements.input.value=t.displayValue},y=function(){const t=new CustomEvent("load",{bubbles:!0,composed:!0});this.dispatchEvent(t)},j=function(){const t=new CustomEvent("init",{bubbles:!0,composed:!0});this.dispatchEvent(t)},x=function(){const t=this.attachShadow({mode:"open",delegatesFocus:!0});u(this,d,"m",E).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")}},u(this,d,"m",k).call(this)},E=function(){const 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))},k=function(){this.elements.input.addEventListener("change",(t=>u(this,d,"m",O).call(this,t)),{capture:!1}),this.elements.input.addEventListener("beforeinput",u(this,d,"m",z).bind(this),{capture:!1}),this.elements.input.addEventListener("input",(t=>u(this,d,"m",M).call(this,t)),{capture:!1}),(0,l.listenAndSilentEvent)(this.elements.input,"keyup",u(this,d,"m",T).bind(this)),(0,l.listenAndSilentEvent)(this.elements.input,"keydown",u(this,d,"m",A).bind(this)),(0,l.listenAndSilentEvent)(this.elements.input,"keypress",u(this,d,"m",P).bind(this))},A=function(t){u(this,d,"m",S).call(this,t)},S=function(t){t.stopPropagation();const e=(0,l.createKeyboardEvent)("keydown",t,{cancelable:!0});!this.dispatchEvent(e)&&t.preventDefault()},P=function(t){t.stopPropagation();const e=(0,l.createKeyboardEvent)("keypress",t,{cancelable:!1});this.dispatchEvent(e)},T=function(t){u(this,d,"m",C).call(this,t),13==t.keyCode&&u(this,d,"m",L).call(this)},C=function(t){t.stopPropagation();const e=(0,l.createKeyboardEvent)("keyup",t,{cancelable:!1});this.dispatchEvent(e)},L=function(){const t=new KeyboardEvent("enter");this.dispatchEvent(t)},M=function(t){const e=t.target.selectionEnd||0,i=(t.target.selectionStart,t.target.value),n=t.target;u(this,d,"m",g).call(this,i,"INPUT"),e!==i.length&&(["number"].includes(this.getAttribute("type"))||n.setSelectionRange(e,e)),u(this,d,"m",v).call(this,!1),u(this,d,"m",q).call(this,t)},q=function(t){t.stopPropagation();const e=(0,l.createInputEvent)("input",t,{cancelable:!0});this.dispatchEvent(e)},z=function(t){u(this,d,"m",D).call(this,t)},D=function(t){t.stopPropagation();const e=(0,l.createInputEvent)("beforeinput",t,{cancelable:!0});return this.dispatchEvent(e),e.defaultPrevented&&t.preventDefault(),e.defaultPrevented},O=function(t){const e=t.target.value,i=u(this,p,"f");u(this,d,"m",g).call(this,e,"CHANGE"),u(this,d,"m",v).call(this,!0);u(this,d,"m",H).call(this,t)&&(c(this,p,i,"f"),t.preventDefault())},H=function(t){t.stopPropagation();const e={bubbles:t.bubbles,cancelable:t.cancelable,composed:t.composed},i=new Event("change",e);return this.dispatchEvent(i),!!i.defaultPrevented},W=function(){const 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},B=function(t){if(t.isAllValid)u(this,m,"f").setValidity({},"");else{const e={};let i="";t.validationList.forEach((t=>{t.isValid||(t.validation.stateType&&(e[t.validation.stateType]=!0),""==i&&(i=t.message))})),u(this,m,"f").setValidity(e,i)}};!customElements.get("jb-input")&&window.customElements.define("jb-input",I),exports.JBInputWebComponent=I;
//# sourceMappingURL=index.cjs.js.map