jb-input
Version:
input web component with built in validation
2 lines • 14 kB
JavaScript
var t=Object.create,e=Object.defineProperty,i=Object.getOwnPropertyDescriptor,n=Object.getOwnPropertyNames,a=Object.getPrototypeOf,s=Object.prototype.hasOwnProperty,o=(o,r,l)=>(l=null!=o?t(a(o)):{},((t,a,o,r)=>{if(a&&"object"==typeof a||"function"==typeof a)for(var l,u=n(a),c=0,d=u.length;c<d;c++)l=u[c],s.call(t,l)||l===o||e(t,l,{get:(t=>a[t]).bind(null,l),enumerable:!(r=i(a,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")),u=o(require("jb-core/theme"));function c(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 d(t,e,i,n,a){if("m"===n)throw new TypeError("Private method is not writable");if("a"===n&&!a)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof e?t!==e||!a:!e.has(t))throw new 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}var b,p,h,m,v,f,g,w,y,j,E,x,V,k,A,S,P,T,L,q,C,M,D,z,O,H,W,B,I;var R=class extends HTMLElement{static get formAssociated(){return!0}get disabled(){return c(this,h,"f")}set disabled(t){d(this,h,t,"f"),this.elements.input.disabled=t,t?(c(this,v,"f").states?.add("disabled"),c(this,v,"f").ariaDisabled="true"):(c(this,v,"f").states?.delete("disabled"),c(this,v,"f").ariaDisabled="false")}set required(t){d(this,m,t,"f"),c(this,b,"m",f).call(this,!1)}get required(){return c(this,m,"f")}hasState(t){return c(this,v,"f").states.has(t)}get isAutoValidationDisabled(){return""===this.getAttribute("disable-auto-validation")||"true"===this.getAttribute("disable-auto-validation")}get validation(){return c(this,g,"f")}get displayValue(){return c(this,p,"f").displayValue}get value(){return c(this,p,"f").value}set value(t){c(this,b,"m",w).call(this,t,"SET_VALUE")}get isDirty(){return c(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(),b.add(this),p.set(this,{displayValue:"",value:""}),h.set(this,!1),m.set(this,!1),v.set(this,void 0),g.set(this,new r.ValidationHelper({clearValidationError:()=>this.clearValidationError(),showValidationError:this.showValidationError.bind(this),getValue:()=>c(this,p,"f"),getValidations:c(this,b,"m",B).bind(this),getValueString:()=>c(this,p,"f").displayValue,setValidationResult:c(this,b,"m",I).bind(this)})),this.initialValue="",k.set(this,[]),"function"==typeof this.attachInternals&&d(this,v,this.attachInternals(),"f"),c(this,b,"m",x).call(this)}connectedCallback(){c(this,b,"m",j).call(this),this.initProp(),c(this,b,"m",E).call(this)}addStandardValueCallback(t){c(this,k,"f").push(t)}standardValue(t,e){let i={displayValue:t.toString(),value:t.toString()};return i=c(this,k,"f").reduce(((i,n)=>n(t.toString(),c(this,p,"f"),i,e)),i),i}initProp(){c(this,b,"m",w).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,c(this,v,"f").ariaLabel=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":c(this,v,"f").ariaDescription=e,this.elements.messageBox.classList.contains("error")||(this.elements.messageBox.innerHTML=e);break;case"value":c(this,b,"m",w).call(this,e,"SET_VALUE");break;case"placeholder":this.elements.input.placeholder=e,c(this,v,"f").ariaPlaceholder=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,c(this,v,"f").states?.add("invalid")}clearValidationError(){const t=this.getAttribute("message")||"";this.elements.messageBox.innerHTML=t,c(this,v,"f").states?.delete("invalid")}focus(){this.elements.input.focus()}setSelectionRange(t,e,i){this.elements.input.setSelectionRange(t,e,i)}checkValidity(){const t=c(this,g,"f").checkValiditySync({showError:!1});if(!t.isAllValid){const t=new CustomEvent("invalid");this.dispatchEvent(t)}return t.isAllValid}reportValidity(){const t=c(this,g,"f").checkValiditySync({showError:!0});if(!t.isAllValid){const t=new CustomEvent("invalid");this.dispatchEvent(t)}return t.isAllValid}get validationMessage(){return c(this,v,"f").validationMessage}};p=new WeakMap,h=new WeakMap,m=new WeakMap,v=new WeakMap,g=new WeakMap,k=new WeakMap,b=new WeakSet,f=function(t){if(!this.isAutoValidationDisabled)return c(this,g,"f").checkValidity({showError:t})},w=function(t,e){null==t&&(t="");const i=this.standardValue(t,e);c(this,b,"m",y).call(this,i)},y=function(t){d(this,p,t,"f"),c(this,v,"f")&&"function"==typeof c(this,v,"f").setFormValue&&c(this,v,"f").setFormValue(t.value),this.elements.input.value=t.displayValue},j=function(){const t=new CustomEvent("load",{bubbles:!0,composed:!0});this.dispatchEvent(t)},E=function(){const t=new CustomEvent("init",{bubbles:!0,composed:!0});this.dispatchEvent(t)},x=function(){const t=this.attachShadow({mode:"open",delegatesFocus:!0});(0,u.registerDefaultVariables)(),c(this,b,"m",V).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")}},c(this,b,"m",A).call(this)},V=function(){const t=document.createElement("template");t.innerHTML='<style>:host{display:block}:host(:focus),:host(:focus-visible){outline:none}.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,.25rem 0px);font-size:var(--jb-input-label-font-size,.8em);color:var(--label-color);margin:var(--jb-input-label-margin,0);font-weight:var(--jb-input-label-font-weight,300);display:block}.jb-input-web-component label.--hide{display:none}.jb-input-web-component .input-box{box-sizing:border-box;width:100%;height:var(--jb-input-height,40px);border:solid var(--jb-input-border-width,1px)var(--border-color);background-color:var(--input-box-bg-color);border-bottom:solid var(--jb-input-border-bottom-width,3px)var(--border-color);border-radius:var(--border-radius);overflow:var(--jb-input-box-overflow,hidden);box-shadow:var(--jb-input-box-shadow,none);grid-template-columns:auto 1fr auto;margin:4px 0;transition:all .3s;display:grid}.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{box-sizing:border-box;width:100%;height:100%;padding:var(--jb-input-input-padding,.125rem .75rem 0 .75rem);font-family:inherit;font-size:var(--jb-input-value-font-size,1.1rem);color:var(--value-color);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);background-color:#0000;border:none;border-radius:0;margin:0;display:block}.jb-input-web-component .input-box input:focus{outline:none}.jb-input-web-component .input-box input::placeholder{color:var(--placeholder-color);font-size:var(--jb-input-placeholder-font-size,1.1rem)}.jb-input-web-component .input-box input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.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{justify-content:center;align-items:center;width:auto;height:100%;display:flex}.jb-input-web-component .input-box ::slotted([slot=start-section]),.jb-input-web-component .input-box ::slotted([slot=end-section]){box-sizing:border-box;background-color:#0000;justify-content:center;align-items:center;width:auto;height:100%;max-height:100%;padding:8px 16px;display:flex;overflow-y:hidden}.jb-input-web-component .message-box{font-size:var(--jb-input-message-font-size,.7rem);color:var(--message-color);display:var(--jb-input-message-box-display,block);padding:.125rem .5rem}.jb-input-web-component .message-box:empty{padding:0} :host{--border-radius:var(--jb-input-border-radius,var(--jb-radius));--border-color:var(--jb-input-border-color,var(--jb-neutral-10));--message-color:var(--jb-input-message-color,var(--jb-text-secondary));--label-color:var(--jb-input-label-color,var(--jb-text-primary));--value-color:var(--jb-input-value-color,var(--jb-text-primary));--placeholder-color:var(--jb-input-placeholder-color,var(--jb-neutral-6));--input-box-bg-color:var(--jb-input-bgcolor,var(--jb-neutral-10))}:host(:state(invalid)){--message-color:var(--jb-input-message-error-color,var(--jb-red))}:host(:focus-within){--border-color:var(--jb-input-border-color-focus,var(--jb-neutral))}</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=>c(this,b,"m",H).call(this,t)),{capture:!1}),this.elements.input.addEventListener("beforeinput",c(this,b,"m",z).bind(this),{capture:!1}),this.elements.input.addEventListener("input",(t=>c(this,b,"m",M).call(this,t)),{capture:!1}),(0,l.listenAndSilentEvent)(this.elements.input,"keyup",c(this,b,"m",L).bind(this)),(0,l.listenAndSilentEvent)(this.elements.input,"keydown",c(this,b,"m",S).bind(this)),(0,l.listenAndSilentEvent)(this.elements.input,"keypress",c(this,b,"m",T).bind(this)),this.elements.label.addEventListener("click",(t=>this.focus()),{capture:!1,passive:!0})},S=function(t){c(this,b,"m",P).call(this,t)},P=function(t){t.stopPropagation();const e=(0,l.createKeyboardEvent)("keydown",t,{cancelable:!0});!this.dispatchEvent(e)&&t.preventDefault()},T=function(t){t.stopPropagation();const e=(0,l.createKeyboardEvent)("keypress",t,{cancelable:!1});this.dispatchEvent(e)},L=function(t){c(this,b,"m",q).call(this,t),13==t.keyCode&&c(this,b,"m",C).call(this,t)},q=function(t){t.stopPropagation();const e=(0,l.createKeyboardEvent)("keyup",t,{cancelable:!1});this.dispatchEvent(e)},C=function(t){const e=(0,l.createKeyboardEvent)("enter",t,{cancelable:!1});this.dispatchEvent(e)},M=function(t){const e=t.target.selectionEnd||0,i=(t.target.selectionStart,t.target.value),n=t.target;c(this,b,"m",w).call(this,i,"INPUT"),e!==i.length&&(["number"].includes(this.getAttribute("type"))||n.setSelectionRange(e,e)),c(this,b,"m",f).call(this,!1),c(this,b,"m",D).call(this,t)},D=function(t){t.stopPropagation();const e=(0,l.createInputEvent)("input",t,{cancelable:!0});this.dispatchEvent(e)},z=function(t){c(this,b,"m",O).call(this,t)},O=function(t){t.stopPropagation();const e=(0,l.createInputEvent)("beforeinput",t,{cancelable:!0});return this.dispatchEvent(e),e.defaultPrevented&&t.preventDefault(),e.defaultPrevented},H=function(t){const e=t.target.value,i=c(this,p,"f");c(this,b,"m",w).call(this,e,"CHANGE"),c(this,b,"m",f).call(this,!0);c(this,b,"m",W).call(this,t)&&(d(this,p,i,"f"),t.preventDefault())},W=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},B=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},I=function(t){if(t.isAllValid)c(this,v,"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))})),c(this,v,"f").setValidity(e,i)}};!customElements.get("jb-input")&&window.customElements.define("jb-input",R),exports.JBInputWebComponent=R;
//# sourceMappingURL=index.cjs.js.map