jb-input
Version:
input web component with built in validation
2 lines • 14.9 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("jb-validation"),require("jb-core")):"function"==typeof define&&define.amd?define(["exports","jb-validation","jb-core"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).JBInput={},t.JBValidation,t.JBCore)}(this,(function(t,e,i){"use strict";var n=Object.create,a=Object.defineProperty,s=Object.getOwnPropertyDescriptor,o=Object.getOwnPropertyNames,r=Object.getPrototypeOf,l=Object.prototype.hasOwnProperty,u=(t,e,i)=>(i=null!=t?n(r(t)):{},((t,e,i,n)=>{if(e&&"object"==typeof e||"function"==typeof e)for(var r,u=o(e),c=0,d=u.length;c<d;c++)r=u[c],l.call(t,r)||r===i||a(t,r,{get:(t=>e[t]).bind(null,r),enumerable:!(n=s(e,r))||n.enumerable});return t})(!e&&t&&t.__esModule?i:a(i,"default",{value:t,enumerable:!0}),t));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}e=u(e),i=u(i);function b(t){try{window.CSS.registerProperty({...t})}catch(t){}}const p={black:"oklch(0.14 0 0)",white:"oklch(1 0 0)"};function h(){!function(){b({name:"--jb-primary",syntax:"<color>",inherits:!0,initialValue:"oklch(0.6 0.26 256)"}),b({name:"--jb-neutral",syntax:"<color>",inherits:!0,initialValue:"oklch(0.18 0.014 258.36)"}),b({name:"--jb-black",syntax:"<color>",inherits:!0,initialValue:p.black}),b({name:"--jb-white",syntax:"<color>",inherits:!0,initialValue:p.white}),b({name:"--jb-green",syntax:"<color>",inherits:!0,initialValue:"oklch(0.68 0.1484 162.1)"}),b({name:"--jb-red",syntax:"<color>",inherits:!0,initialValue:"oklch(0.6 0.22 23.21)"}),b({name:"--jb-neutral",syntax:"<color>",inherits:!0,initialValue:m(0)});for(let t=1;t<=10;t++)b({name:`--jb-neutral-${t}`,syntax:"<color>",inherits:!0,initialValue:m(t)})}(),b({name:"--jb-text-primary",syntax:"<color>",inherits:!0,initialValue:p.black}),b({name:"--jb-text-secondary",syntax:"<color>",inherits:!0,initialValue:m(7)})}function m(t){return`oklch(${6*(3+1.3*t)*.01} ${.001*(14+.09*t)} 258.36)`}var v,f,g,w,y,j,x,E,V,k,S,A,P,T,C,L,M,q,z,D,B,O,H,W,I,R,_,J,K,N=class extends HTMLElement{static get formAssociated(){return!0}get disabled(){return c(this,g,"f")}set disabled(t){d(this,g,t,"f"),this.elements.input.disabled=t,t?c(this,y,"f").states?.add("disabled"):c(this,y,"f").states?.delete("disabled")}set required(t){d(this,w,t,"f"),c(this,v,"m",j).call(this,!1)}get required(){return c(this,w,"f")}hasState(t){return c(this,y,"f").states.has(t)}get isAutoValidationDisabled(){return""===this.getAttribute("disable-auto-validation")||"true"===this.getAttribute("disable-auto-validation")}get validation(){return c(this,x,"f")}get displayValue(){return c(this,f,"f").displayValue}get value(){return c(this,f,"f").value}set value(t){c(this,v,"m",E).call(this,t,"SET_VALUE")}get isDirty(){return c(this,f,"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(),v.add(this),f.set(this,{displayValue:"",value:""}),g.set(this,!1),w.set(this,!1),y.set(this,void 0),x.set(this,new e.ValidationHelper({clearValidationError:()=>this.clearValidationError(),showValidationError:this.showValidationError.bind(this),getValue:()=>c(this,f,"f"),getValidations:c(this,v,"m",J).bind(this),getValueString:()=>c(this,f,"f").displayValue,setValidationResult:c(this,v,"m",K).bind(this)})),this.initialValue="",T.set(this,[]),"function"==typeof this.attachInternals&&d(this,y,this.attachInternals(),"f"),c(this,v,"m",A).call(this)}connectedCallback(){c(this,v,"m",k).call(this),this.initProp(),c(this,v,"m",S).call(this)}addStandardValueCallback(t){c(this,T,"f").push(t)}standardValue(t,e){let i={displayValue:t.toString(),value:t.toString()};return i=c(this,T,"f").reduce(((i,n)=>n(t.toString(),c(this,f,"f"),i,e)),i),i}initProp(){c(this,v,"m",E).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":c(this,v,"m",E).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,c(this,y,"f").states?.add("invalid")}clearValidationError(){const t=this.getAttribute("message")||"";this.elements.messageBox.innerHTML=t,c(this,y,"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,x,"f").checkValiditySync({showError:!1});if(!t.isAllValid){const t=new CustomEvent("invalid");this.dispatchEvent(t)}return t.isAllValid}reportValidity(){const t=c(this,x,"f").checkValiditySync({showError:!0});if(!t.isAllValid){const t=new CustomEvent("invalid");this.dispatchEvent(t)}return t.isAllValid}get validationMessage(){return c(this,y,"f").validationMessage}};f=new WeakMap,g=new WeakMap,w=new WeakMap,y=new WeakMap,x=new WeakMap,T=new WeakMap,v=new WeakSet,j=function(t){if(!this.isAutoValidationDisabled)return c(this,x,"f").checkValidity({showError:t})},E=function(t,e){null==t&&(t="");const i=this.standardValue(t,e);c(this,v,"m",V).call(this,i)},V=function(t){d(this,f,t,"f"),c(this,y,"f")&&"function"==typeof c(this,y,"f").setFormValue&&c(this,y,"f").setFormValue(t.value),this.elements.input.value=t.displayValue},k=function(){const t=new CustomEvent("load",{bubbles:!0,composed:!0});this.dispatchEvent(t)},S=function(){const t=new CustomEvent("init",{bubbles:!0,composed:!0});this.dispatchEvent(t)},A=function(){const t=this.attachShadow({mode:"open",delegatesFocus:!0});h(),c(this,v,"m",P).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,v,"m",C).call(this)},P=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))},C=function(){this.elements.input.addEventListener("change",(t=>c(this,v,"m",R).call(this,t)),{capture:!1}),this.elements.input.addEventListener("beforeinput",c(this,v,"m",W).bind(this),{capture:!1}),this.elements.input.addEventListener("input",(t=>c(this,v,"m",O).call(this,t)),{capture:!1}),(0,i.listenAndSilentEvent)(this.elements.input,"keyup",c(this,v,"m",z).bind(this)),(0,i.listenAndSilentEvent)(this.elements.input,"keydown",c(this,v,"m",L).bind(this)),(0,i.listenAndSilentEvent)(this.elements.input,"keypress",c(this,v,"m",q).bind(this))},L=function(t){c(this,v,"m",M).call(this,t)},M=function(t){t.stopPropagation();const e=(0,i.createKeyboardEvent)("keydown",t,{cancelable:!0});!this.dispatchEvent(e)&&t.preventDefault()},q=function(t){t.stopPropagation();const e=(0,i.createKeyboardEvent)("keypress",t,{cancelable:!1});this.dispatchEvent(e)},z=function(t){c(this,v,"m",D).call(this,t),13==t.keyCode&&c(this,v,"m",B).call(this)},D=function(t){t.stopPropagation();const e=(0,i.createKeyboardEvent)("keyup",t,{cancelable:!1});this.dispatchEvent(e)},B=function(){const t=new KeyboardEvent("enter");this.dispatchEvent(t)},O=function(t){const e=t.target.selectionEnd||0,i=(t.target.selectionStart,t.target.value),n=t.target;c(this,v,"m",E).call(this,i,"INPUT"),e!==i.length&&(["number"].includes(this.getAttribute("type"))||n.setSelectionRange(e,e)),c(this,v,"m",j).call(this,!1),c(this,v,"m",H).call(this,t)},H=function(t){t.stopPropagation();const e=(0,i.createInputEvent)("input",t,{cancelable:!0});this.dispatchEvent(e)},W=function(t){c(this,v,"m",I).call(this,t)},I=function(t){t.stopPropagation();const e=(0,i.createInputEvent)("beforeinput",t,{cancelable:!0});return this.dispatchEvent(e),e.defaultPrevented&&t.preventDefault(),e.defaultPrevented},R=function(t){const e=t.target.value,i=c(this,f,"f");c(this,v,"m",E).call(this,e,"CHANGE"),c(this,v,"m",j).call(this,!0);c(this,v,"m",_).call(this,t)&&(d(this,f,i,"f"),t.preventDefault())},_=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},J=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},K=function(t){if(t.isAllValid)c(this,y,"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,y,"f").setValidity(e,i)}};!customElements.get("jb-input")&&window.customElements.define("jb-input",N),t.JBInputWebComponent=N}));
//# sourceMappingURL=index.umd.js.map