jb-input
Version:
input web component with built in validation
2 lines • 14 kB
JavaScript
import{ValidationHelper as t}from"jb-validation";import{createInputEvent as e,createKeyboardEvent as i,listenAndSilentEvent as n}from"jb-core";function a(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 s(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}function o(t){try{window.CSS.registerProperty({...t})}catch(t){}}const r={black:"oklch(0.14 0 0)",white:"oklch(1 0 0)"};function l(){!function(){o({name:"--jb-primary",syntax:"<color>",inherits:!0,initialValue:"oklch(0.6 0.26 256)"}),o({name:"--jb-neutral",syntax:"<color>",inherits:!0,initialValue:"oklch(0.18 0.014 258.36)"}),o({name:"--jb-black",syntax:"<color>",inherits:!0,initialValue:r.black}),o({name:"--jb-white",syntax:"<color>",inherits:!0,initialValue:r.white}),o({name:"--jb-green",syntax:"<color>",inherits:!0,initialValue:"oklch(0.68 0.1484 162.1)"}),o({name:"--jb-red",syntax:"<color>",inherits:!0,initialValue:"oklch(0.6 0.22 23.21)"}),o({name:"--jb-neutral",syntax:"<color>",inherits:!0,initialValue:u(0)});for(let t=1;t<=10;t++)o({name:`--jb-neutral-${t}`,syntax:"<color>",inherits:!0,initialValue:u(t)})}(),o({name:"--jb-text-primary",syntax:"<color>",inherits:!0,initialValue:r.black}),o({name:"--jb-text-secondary",syntax:"<color>",inherits:!0,initialValue:u(7)})}function u(t){return`oklch(${6*(3+1.3*t)*.01} ${.001*(14+.09*t)} 258.36)`}var c,h,d,b,p,m,v,f,g,w,y,j,x,V,E,k,S,A,T,C,L,P,M,q,z,D,H,W,B,R=class extends HTMLElement{static get formAssociated(){return!0}get disabled(){return a(this,d,"f")}set disabled(t){s(this,d,t,"f"),this.elements.input.disabled=t,t?a(this,p,"f").states?.add("disabled"):a(this,p,"f").states?.delete("disabled")}set required(t){s(this,b,t,"f"),a(this,c,"m",m).call(this,!1)}get required(){return a(this,b,"f")}hasState(t){return a(this,p,"f").states.has(t)}get isAutoValidationDisabled(){return""===this.getAttribute("disable-auto-validation")||"true"===this.getAttribute("disable-auto-validation")}get validation(){return a(this,v,"f")}get displayValue(){return a(this,h,"f").displayValue}get value(){return a(this,h,"f").value}set value(t){a(this,c,"m",f).call(this,t,"SET_VALUE")}get isDirty(){return a(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(),c.add(this),h.set(this,{displayValue:"",value:""}),d.set(this,!1),b.set(this,!1),p.set(this,void 0),v.set(this,new t({clearValidationError:()=>this.clearValidationError(),showValidationError:this.showValidationError.bind(this),getValue:()=>a(this,h,"f"),getValidations:a(this,c,"m",W).bind(this),getValueString:()=>a(this,h,"f").displayValue,setValidationResult:a(this,c,"m",B).bind(this)})),this.initialValue="",V.set(this,[]),"function"==typeof this.attachInternals&&s(this,p,this.attachInternals(),"f"),a(this,c,"m",j).call(this)}connectedCallback(){a(this,c,"m",w).call(this),this.initProp(),a(this,c,"m",y).call(this)}addStandardValueCallback(t){a(this,V,"f").push(t)}standardValue(t,e){let i={displayValue:t.toString(),value:t.toString()};return i=a(this,V,"f").reduce(((i,n)=>n(t.toString(),a(this,h,"f"),i,e)),i),i}initProp(){a(this,c,"m",f).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":a(this,c,"m",f).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,a(this,p,"f").states?.add("invalid")}clearValidationError(){const t=this.getAttribute("message")||"";this.elements.messageBox.innerHTML=t,a(this,p,"f").states?.delete("invalid")}focus(){this.elements.input.focus()}setSelectionRange(t,e,i){this.elements.input.setSelectionRange(t,e,i)}checkValidity(){const t=a(this,v,"f").checkValiditySync({showError:!1});if(!t.isAllValid){const t=new CustomEvent("invalid");this.dispatchEvent(t)}return t.isAllValid}reportValidity(){const t=a(this,v,"f").checkValiditySync({showError:!0});if(!t.isAllValid){const t=new CustomEvent("invalid");this.dispatchEvent(t)}return t.isAllValid}get validationMessage(){return a(this,p,"f").validationMessage}};h=new WeakMap,d=new WeakMap,b=new WeakMap,p=new WeakMap,v=new WeakMap,V=new WeakMap,c=new WeakSet,m=function(t){if(!this.isAutoValidationDisabled)return a(this,v,"f").checkValidity({showError:t})},f=function(t,e){null==t&&(t="");const i=this.standardValue(t,e);a(this,c,"m",g).call(this,i)},g=function(t){s(this,h,t,"f"),a(this,p,"f")&&"function"==typeof a(this,p,"f").setFormValue&&a(this,p,"f").setFormValue(t.value),this.elements.input.value=t.displayValue},w=function(){const t=new CustomEvent("load",{bubbles:!0,composed:!0});this.dispatchEvent(t)},y=function(){const t=new CustomEvent("init",{bubbles:!0,composed:!0});this.dispatchEvent(t)},j=function(){const t=this.attachShadow({mode:"open",delegatesFocus:!0});l(),a(this,c,"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")}},a(this,c,"m",E).call(this)},x=function(){const t=document.createElement("template");t.innerHTML='<style>:host{--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))}: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, 0.25rem 0px);display:block;font-size:var(--jb-input-label-font-size, 0.8em);color:var(--label-color);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(--input-box-bg-color);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, 0.125rem 0.75rem 0 0.75rem);display:block;font-family:inherit;font-size:var(--jb-input-value-font-size, 1.1rem);color:var(--value-color);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(--placeholder-color);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:.125rem .5rem;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))},E=function(){this.elements.input.addEventListener("change",(t=>a(this,c,"m",D).call(this,t)),{capture:!1}),this.elements.input.addEventListener("beforeinput",a(this,c,"m",q).bind(this),{capture:!1}),this.elements.input.addEventListener("input",(t=>a(this,c,"m",P).call(this,t)),{capture:!1}),n(this.elements.input,"keyup",a(this,c,"m",T).bind(this)),n(this.elements.input,"keydown",a(this,c,"m",k).bind(this)),n(this.elements.input,"keypress",a(this,c,"m",A).bind(this))},k=function(t){a(this,c,"m",S).call(this,t)},S=function(t){t.stopPropagation();const e=i("keydown",t,{cancelable:!0});!this.dispatchEvent(e)&&t.preventDefault()},A=function(t){t.stopPropagation();const e=i("keypress",t,{cancelable:!1});this.dispatchEvent(e)},T=function(t){a(this,c,"m",C).call(this,t),13==t.keyCode&&a(this,c,"m",L).call(this)},C=function(t){t.stopPropagation();const e=i("keyup",t,{cancelable:!1});this.dispatchEvent(e)},L=function(){const t=new KeyboardEvent("enter");this.dispatchEvent(t)},P=function(t){const e=t.target.selectionEnd||0,i=(t.target.selectionStart,t.target.value),n=t.target;a(this,c,"m",f).call(this,i,"INPUT"),e!==i.length&&(["number"].includes(this.getAttribute("type"))||n.setSelectionRange(e,e)),a(this,c,"m",m).call(this,!1),a(this,c,"m",M).call(this,t)},M=function(t){t.stopPropagation();const i=e("input",t,{cancelable:!0});this.dispatchEvent(i)},q=function(t){a(this,c,"m",z).call(this,t)},z=function(t){t.stopPropagation();const i=e("beforeinput",t,{cancelable:!0});return this.dispatchEvent(i),i.defaultPrevented&&t.preventDefault(),i.defaultPrevented},D=function(t){const e=t.target.value,i=a(this,h,"f");a(this,c,"m",f).call(this,e,"CHANGE"),a(this,c,"m",m).call(this,!0);a(this,c,"m",H).call(this,t)&&(s(this,h,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)a(this,p,"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))})),a(this,p,"f").setValidity(e,i)}};!customElements.get("jb-input")&&window.customElements.define("jb-input",R);export{R as JBInputWebComponent};
//# sourceMappingURL=index.js.map