jb-input - npm Package Compare versions

Comparing version 3.5.0 to 3.6.0

dist/index.cjs.js

@@ -1,2 +0,2 @@
-"use strict";var t=require("jb-validation");function e(t,e,n,i){if("a"===n&&!i)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!i:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?i:"a"===n?i.call(t):i?i.value:e.get(t)}function n(t,e,n,i,s){if("m"===i)throw new TypeError("Private method is not writable");if("a"===i&&!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"===i?s.call(t,n):s?s.value=n:e.set(t,n),n}"function"==typeof SuppressedError&&SuppressedError;var i,s,a,o,r,l,u,c,d,p,h,b,m,f,g,v,w,y,j,x,E,V,k,S,A,C,T,L,M;function P(t,e,n){const i={altKey:e.altKey,bubbles:e.bubbles,cancelable:e.cancelable,code:e.code,composed:e.composed,ctrlKey:e.ctrlKey,detail:e.detail,isComposing:e.isComposing,key:e.key,location:e.location,metaKey:e.metaKey,repeat:e.repeat,shiftKey:e.shiftKey,view:e.view,charCode:e.charCode,keyCode:e.keyCode,which:e.which,...n};return new KeyboardEvent(t,i)}function q(t,e,n){const i={bubbles:e.bubbles,cancelable:e.cancelable,composed:e.composed,detail:e.detail,isComposing:e.isComposing,view:e.view,which:e.which,data:e.data,dataTransfer:e.dataTransfer,inputType:e.inputType,targetRanges:"function"==typeof e.getTargetRanges()?e.getTargetRanges():[],...n};return new InputEvent(t,i)}class z extends HTMLElement{static get formAssociated(){return!0}get disabled(){return e(this,a,"f")}set disabled(t){n(this,a,t,"f"),this.elements.input.disabled=t,t?e(this,r,"f").states?.add("disabled"):e(this,r,"f").states?.delete("disabled")}set required(t){n(this,o,t,"f"),e(this,i,"m",l).call(this,!1)}get required(){return e(this,o,"f")}get isAutoValidationDisabled(){return""===this.getAttribute("disable-auto-validation")||"true"===this.getAttribute("disable-auto-validation")}get validation(){return e(this,u,"f")}get displayValue(){return e(this,s,"f").displayValue}get value(){return e(this,s,"f").value}set value(t){e(this,i,"m",c).call(this,t,"SET_VALUE")}get isDirty(){return e(this,s,"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(),i.add(this),s.set(this,{displayValue:"",value:""}),a.set(this,!1),o.set(this,!1),r.set(this,void 0),u.set(this,new t.ValidationHelper({clearValidationError:this.clearValidationError.bind(this),showValidationError:this.showValidationError.bind(this),getValue:()=>e(this,s,"f"),getValidations:e(this,i,"m",L).bind(this),getValueString:()=>e(this,s,"f").displayValue,setValidationResult:e(this,i,"m",M).bind(this)})),this.initialValue="",f.set(this,[]),"function"==typeof this.attachInternals&&n(this,r,this.attachInternals(),"f"),e(this,i,"m",b).call(this)}connectedCallback(){e(this,i,"m",p).call(this),this.initProp(),e(this,i,"m",h).call(this)}addStandardValueCallback(t){e(this,f,"f").push(t)}standardValue(t,n){let i={displayValue:t.toString(),value:t.toString()};return i=e(this,f,"f").reduce(((i,a)=>a(t.toString(),e(this,s,"f"),i,n)),i),i}initProp(){e(this,i,"m",c).call(this,this.getAttribute("value")||"","SET_VALUE")}static get observedAttributes(){return["label","type","message","value","name","autocomplete","placeholder","disabled","inputmode","readonly","disable-auto-validation","required"]}attributeChangedCallback(t,e,n){this.onAttributeChange(t,n)}onAttributeChange(t,n){switch(t){case"name":case"autocomplete":case"inputmode":case"readonly":this.elements.input.setAttribute(t,n);break;case"label":this.elements.labelValue.innerHTML=n,null==n||null==n||""==n?this.elements.label.classList.add("--hide"):this.elements.label.classList.remove("--hide");break;case"type":this.elements.input.setAttribute("type",n),"number"==n&&null==this.getAttribute("inputmode")&&this.setAttribute("inputmode","numeric");break;case"message":this.elements.messageBox.innerHTML=n;break;case"value":e(this,i,"m",c).call(this,n,"SET_VALUE");break;case"placeholder":this.elements.input.placeholder=n;break;case"disabled":""==n||"true"===n?this.disabled=!0:"false"!=n&&null!=n&&null!=n||(this.disabled=!1,this.elements.input.removeAttribute("disabled"));break;case"required":this.required=!!n&&"false"!==n}}showValidationError(t){const e="string"==typeof t?t:t.message;this.elements.messageBox.innerHTML=e,this.elements.messageBox.classList.add("error")}clearValidationError(){const t=this.getAttribute("message")||"";this.elements.messageBox.innerHTML=t,this.elements.messageBox.classList.remove("error")}focus(){this.elements.input.focus()}setSelectionRange(t,e,n){this.elements.input.setSelectionRange(t,e,n)}checkValidity(){const t=e(this,u,"f").checkValiditySync({showError:!1});if(!t.isAllValid){const t=new CustomEvent("invalid");this.dispatchEvent(t)}return t.isAllValid}reportValidity(){const t=e(this,u,"f").checkValiditySync({showError:!0});if(!t.isAllValid){const t=new CustomEvent("invalid");this.dispatchEvent(t)}return t.isAllValid}get validationMessage(){return e(this,r,"f").validationMessage}}s=new WeakMap,a=new WeakMap,o=new WeakMap,r=new WeakMap,u=new WeakMap,f=new WeakMap,i=new WeakSet,l=function(t){if(!this.isAutoValidationDisabled)return e(this,u,"f").checkValidity({showError:t})},c=function(t,n){null!==t&&null!=t||(t="");const s=this.standardValue(t,n);e(this,i,"m",d).call(this,s)},d=function(t){n(this,s,t,"f"),e(this,r,"f")&&"function"==typeof e(this,r,"f").setFormValue&&e(this,r,"f").setFormValue(t.value),this.elements.input.value=t.displayValue},p=function(){const t=new CustomEvent("load",{bubbles:!0,composed:!0});this.dispatchEvent(t)},h=function(){const t=new CustomEvent("init",{bubbles:!0,composed:!0});this.dispatchEvent(t)},b=function(){const t=this.attachShadow({mode:"open",delegatesFocus:!0});e(this,i,"m",m).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")}},e(this,i,"m",g).call(this)},m=function(){const t=document.createElement("template");t.innerHTML='<style>:host(:focus),\n:host(:focus-visible) {\n  outline: none;\n}\n\n.jb-input-web-component {\n  width: 100%;\n  margin: var(--jb-input-margin, 0 0);\n}\n.jb-input-web-component:focus-visible {\n  outline: none;\n}\n.jb-input-web-component label {\n  width: 100%;\n  margin: var(--jb-input-label-margin, 4px 0px);\n  display: block;\n  font-size: var(--jb-input-label-font-size, 0.8em);\n  color: var(--jb-input-label-color, #1f1735);\n  margin: var(--jb-input-label-margin, 0);\n  font-weight: var(--jb-input-label-font-weight, 300);\n}\n.jb-input-web-component label.--hide {\n  display: none;\n}\n.jb-input-web-component .input-box {\n  width: 100%;\n  box-sizing: border-box;\n  height: var(--jb-input-height, 40px);\n  border: solid var(--jb-input-border-width, 1px) var(--jb-input-border-color, #f7f6f6);\n  background-color: var(--jb-input-bgcolor, #f7f6f6);\n  border-bottom: solid var(--jb-input-border-bottom-width, 3px) var(--jb-input-border-color, #f7f6f6);\n  border-radius: var(--jb-input-border-radius, 16px);\n  margin: 4px 0px;\n  transition: ease 0.3s all;\n  overflow: var(--jb-input-box-overflow, hidden);\n  display: grid;\n  grid-template-columns: auto 1fr auto;\n  box-shadow: var(--jb-input-box-shadow, none);\n}\n.jb-input-web-component .input-box:focus-within {\n  border-color: var(--jb-input-border-color-focus, #1e2832);\n  border-width: var(--jb-input-border-width-focus, var(--jb-input-border-width, 1px));\n  border-bottom-width: var(--jb-input-border-bottom-width-focus, var(--jb-input-border-bottom-width, 3px));\n  box-shadow: var(--jb-input-box-shadow-focus, none);\n}\n.jb-input-web-component .input-box input {\n  border: none;\n  width: 100%;\n  box-sizing: border-box;\n  height: 100%;\n  background-color: transparent;\n  padding: var(--jb-input-input-padding, 2px 12px 0 12px);\n  display: block;\n  font-family: inherit;\n  font-size: var(--jb-input-value-font-size, 1.1rem);\n  color: var(--jb-input-value-color, #1f1735);\n  margin: 0;\n  border-radius: 0;\n  text-align: var(--jb-input-input-text-align, initial);\n  direction: var(--jb-input-input-direction, inherit);\n  font-weight: var(--jb-input-input-font-weight, initial);\n  /* Chrome, Safari, Edge, Opera */\n  /* Firefox */\n}\n.jb-input-web-component .input-box input:focus {\n  outline: none;\n}\n.jb-input-web-component .input-box input::placeholder {\n  color: var(--jb-input-placeholder-color, initial);\n  font-size: var(--jb-input-placeholder-font-size, 1.1rem);\n}\n.jb-input-web-component .input-box input::-webkit-outer-spin-button, .jb-input-web-component .input-box input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.jb-input-web-component .input-box input[type=number] {\n  -moz-appearance: textfield;\n}\n.jb-input-web-component .input-box .jb-input-start-section-wrapper {\n  display: flex;\n  height: 100%;\n  width: auto;\n  align-items: center;\n  justify-content: center;\n}\n.jb-input-web-component .input-box ::slotted([slot=start-section]), .jb-input-web-component .input-box ::slotted([slot=end-section]) {\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  max-height: 100%;\n  overflow-y: hidden;\n  background-color: transparent;\n  padding: 8px 16px;\n  width: auto;\n  box-sizing: border-box;\n}\n.jb-input-web-component .message-box {\n  font-size: var(--jb-input-message-font-size, 0.7rem);\n  padding: 2px 8px;\n  color: var(--jb-input-message-color, #929292);\n  display: var(--jb-input-message-box-display, block);\n}\n.jb-input-web-component .message-box:empty {\n  padding: 0;\n}\n.jb-input-web-component .message-box.error {\n  color: var(--jb-input-message-error-color, red);\n}</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">\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))},g=function(){this.elements.input.addEventListener("change",(t=>e(this,i,"m",C).call(this,t))),this.elements.input.addEventListener("beforeinput",e(this,i,"m",S).bind(this)),this.elements.input.addEventListener("input",(t=>e(this,i,"m",V).call(this,t))),this.elements.input.addEventListener("keypress",e(this,i,"m",y).bind(this)),this.elements.input.addEventListener("keyup",e(this,i,"m",j).bind(this)),this.elements.input.addEventListener("keydown",e(this,i,"m",v).bind(this))},v=function(t){e(this,i,"m",w).call(this,t)},w=function(t){t.stopPropagation();const e=P("keydown",t,{cancelable:!0});!this.dispatchEvent(e)&&t.preventDefault()},y=function(t){t.stopPropagation();const e=P("keypress",t,{cancelable:!1});this.dispatchEvent(e)},j=function(t){e(this,i,"m",x).call(this,t),13==t.keyCode&&e(this,i,"m",E).call(this)},x=function(t){t.stopPropagation();const e=P("keyup",t,{cancelable:!1});this.dispatchEvent(e)},E=function(){const t=new KeyboardEvent("enter");this.dispatchEvent(t)},V=function(t){const n=t.target.selectionEnd||0;t.target.selectionStart;const s=t.target.value,a=t.target;e(this,i,"m",c).call(this,s,"INPUT"),n!=s.length&&(["number"].includes(this.getAttribute("type"))||a.setSelectionRange(n,n)),e(this,i,"m",l).call(this,!1),e(this,i,"m",k).call(this,t)},k=function(t){t.stopPropagation();const e=q("input",t,{cancelable:!0});this.dispatchEvent(e)},S=function(t){e(this,i,"m",A).call(this,t)},A=function(t){t.stopPropagation();const e=q("beforeinput",t,{cancelable:!0});return this.dispatchEvent(e),e.defaultPrevented&&t.preventDefault(),e.defaultPrevented},C=function(t){const a=t.target.value,o=e(this,s,"f");e(this,i,"m",c).call(this,a,"CHANGE"),e(this,i,"m",l).call(this,!0);e(this,i,"m",T).call(this,t)&&(n(this,s,o,"f"),t.preventDefault())},T=function(t){t.stopPropagation();const e={bubbles:t.bubbles,cancelable:t.cancelable,composed:t.composed},n=new Event("change",e);return this.dispatchEvent(n),!!n.defaultPrevented},L=function(){const t=[];return this.required&&t.push({validator:/.{1}/g,message:this.getAttribute("label")+" میبایست حتما وارد شود",stateType:"valueMissing"}),t},M=function(t){if(t.isAllValid)e(this,r,"f").setValidity({},"");else{const n={};let i="";t.validationList.forEach((t=>{t.isValid||(t.validation.stateType&&(n[t.validation.stateType]=!0),""==i&&(i=t.message))})),e(this,r,"f").setValidity(n,i)}};!customElements.get("jb-input")&&window.customElements.define("jb-input",z),exports.JBInputWebComponent=z;
+"use strict";var t=require("jb-validation");function e(t,e,n,i){if("a"===n&&!i)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!i:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?i:"a"===n?i.call(t):i?i.value:e.get(t)}function n(t,e,n,i,s){if("m"===i)throw new TypeError("Private method is not writable");if("a"===i&&!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"===i?s.call(t,n):s?s.value=n:e.set(t,n),n}"function"==typeof SuppressedError&&SuppressedError;var i,s,a,o,r,l,u,c,d,p,b,h,m,f,v,g,w,y,j,x,E,k,V,S,A,C,T,L,M;function P(t,e,n){const i={altKey:e.altKey,bubbles:e.bubbles,cancelable:e.cancelable,code:e.code,composed:e.composed,ctrlKey:e.ctrlKey,detail:e.detail,isComposing:e.isComposing,key:e.key,location:e.location,metaKey:e.metaKey,repeat:e.repeat,shiftKey:e.shiftKey,view:e.view,charCode:e.charCode,keyCode:e.keyCode,which:e.which,...n};return new KeyboardEvent(t,i)}function q(t,e,n){const i={bubbles:e.bubbles,cancelable:e.cancelable,composed:e.composed,detail:e.detail,isComposing:e.isComposing,view:e.view,which:e.which,data:e.data,dataTransfer:e.dataTransfer,inputType:e.inputType,targetRanges:"function"==typeof e.getTargetRanges()?e.getTargetRanges():[],...n};return new InputEvent(t,i)}class z extends HTMLElement{static get formAssociated(){return!0}get disabled(){return e(this,a,"f")}set disabled(t){n(this,a,t,"f"),this.elements.input.disabled=t,t?e(this,r,"f").states?.add("disabled"):e(this,r,"f").states?.delete("disabled")}set required(t){n(this,o,t,"f"),e(this,i,"m",l).call(this,!1)}get required(){return e(this,o,"f")}get isAutoValidationDisabled(){return""===this.getAttribute("disable-auto-validation")||"true"===this.getAttribute("disable-auto-validation")}get validation(){return e(this,u,"f")}get displayValue(){return e(this,s,"f").displayValue}get value(){return e(this,s,"f").value}set value(t){e(this,i,"m",c).call(this,t,"SET_VALUE")}get isDirty(){return e(this,s,"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(),i.add(this),s.set(this,{displayValue:"",value:""}),a.set(this,!1),o.set(this,!1),r.set(this,void 0),u.set(this,new t.ValidationHelper({clearValidationError:this.clearValidationError.bind(this),showValidationError:this.showValidationError.bind(this),getValue:()=>e(this,s,"f"),getValidations:e(this,i,"m",L).bind(this),getValueString:()=>e(this,s,"f").displayValue,setValidationResult:e(this,i,"m",M).bind(this)})),this.initialValue="",f.set(this,[]),"function"==typeof this.attachInternals&&n(this,r,this.attachInternals(),"f"),e(this,i,"m",h).call(this)}connectedCallback(){e(this,i,"m",p).call(this),this.initProp(),e(this,i,"m",b).call(this)}addStandardValueCallback(t){e(this,f,"f").push(t)}standardValue(t,n){let i={displayValue:t.toString(),value:t.toString()};return i=e(this,f,"f").reduce(((i,a)=>a(t.toString(),e(this,s,"f"),i,n)),i),i}initProp(){e(this,i,"m",c).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"]}attributeChangedCallback(t,e,n){this.onAttributeChange(t,n)}onAttributeChange(t,n){switch(t){case"name":case"autocomplete":case"inputmode":case"readonly":this.elements.input.setAttribute(t,n);break;case"label":this.elements.labelValue.innerHTML=n,null==n||null==n||""==n?this.elements.label.classList.add("--hide"):this.elements.label.classList.remove("--hide");break;case"type":this.elements.input.setAttribute("type",n),"number"==n&&null==this.getAttribute("inputmode")&&this.setAttribute("inputmode","numeric");break;case"message":this.elements.messageBox.innerHTML=n;break;case"virtualkeyboardpolicy":this.elements.input.setAttribute("virtualkeyboardpolicy",n);break;case"value":e(this,i,"m",c).call(this,n,"SET_VALUE");break;case"placeholder":this.elements.input.placeholder=n;break;case"disabled":""==n||"true"===n?this.disabled=!0:"false"!=n&&null!=n&&null!=n||(this.disabled=!1,this.elements.input.removeAttribute("disabled"));break;case"required":this.required=!!n&&"false"!==n}}showValidationError(t){const e="string"==typeof t?t:t.message;this.elements.messageBox.innerHTML=e,this.elements.messageBox.classList.add("error")}clearValidationError(){const t=this.getAttribute("message")||"";this.elements.messageBox.innerHTML=t,this.elements.messageBox.classList.remove("error")}focus(){this.elements.input.focus()}setSelectionRange(t,e,n){this.elements.input.setSelectionRange(t,e,n)}checkValidity(){const t=e(this,u,"f").checkValiditySync({showError:!1});if(!t.isAllValid){const t=new CustomEvent("invalid");this.dispatchEvent(t)}return t.isAllValid}reportValidity(){const t=e(this,u,"f").checkValiditySync({showError:!0});if(!t.isAllValid){const t=new CustomEvent("invalid");this.dispatchEvent(t)}return t.isAllValid}get validationMessage(){return e(this,r,"f").validationMessage}}s=new WeakMap,a=new WeakMap,o=new WeakMap,r=new WeakMap,u=new WeakMap,f=new WeakMap,i=new WeakSet,l=function(t){if(!this.isAutoValidationDisabled)return e(this,u,"f").checkValidity({showError:t})},c=function(t,n){null!==t&&null!=t||(t="");const s=this.standardValue(t,n);e(this,i,"m",d).call(this,s)},d=function(t){n(this,s,t,"f"),e(this,r,"f")&&"function"==typeof e(this,r,"f").setFormValue&&e(this,r,"f").setFormValue(t.value),this.elements.input.value=t.displayValue},p=function(){const t=new CustomEvent("load",{bubbles:!0,composed:!0});this.dispatchEvent(t)},b=function(){const t=new CustomEvent("init",{bubbles:!0,composed:!0});this.dispatchEvent(t)},h=function(){const t=this.attachShadow({mode:"open",delegatesFocus:!0});e(this,i,"m",m).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")}},e(this,i,"m",v).call(this)},m=function(){const t=document.createElement("template");t.innerHTML='<style>:host(:focus),\n:host(:focus-visible) {\n  outline: none;\n}\n\n.jb-input-web-component {\n  width: 100%;\n  margin: var(--jb-input-margin, 0 0);\n}\n.jb-input-web-component:focus-visible {\n  outline: none;\n}\n.jb-input-web-component label {\n  width: 100%;\n  margin: var(--jb-input-label-margin, 4px 0px);\n  display: block;\n  font-size: var(--jb-input-label-font-size, 0.8em);\n  color: var(--jb-input-label-color, #1f1735);\n  margin: var(--jb-input-label-margin, 0);\n  font-weight: var(--jb-input-label-font-weight, 300);\n}\n.jb-input-web-component label.--hide {\n  display: none;\n}\n.jb-input-web-component .input-box {\n  width: 100%;\n  box-sizing: border-box;\n  height: var(--jb-input-height, 40px);\n  border: solid var(--jb-input-border-width, 1px) var(--jb-input-border-color, #f7f6f6);\n  background-color: var(--jb-input-bgcolor, #f7f6f6);\n  border-bottom: solid var(--jb-input-border-bottom-width, 3px) var(--jb-input-border-color, #f7f6f6);\n  border-radius: var(--jb-input-border-radius, 16px);\n  margin: 4px 0px;\n  transition: ease 0.3s all;\n  overflow: var(--jb-input-box-overflow, hidden);\n  display: grid;\n  grid-template-columns: auto 1fr auto;\n  box-shadow: var(--jb-input-box-shadow, none);\n}\n.jb-input-web-component .input-box:focus-within {\n  border-color: var(--jb-input-border-color-focus, #1e2832);\n  border-width: var(--jb-input-border-width-focus, var(--jb-input-border-width, 1px));\n  border-bottom-width: var(--jb-input-border-bottom-width-focus, var(--jb-input-border-bottom-width, 3px));\n  box-shadow: var(--jb-input-box-shadow-focus, none);\n}\n.jb-input-web-component .input-box input {\n  border: none;\n  width: 100%;\n  box-sizing: border-box;\n  height: 100%;\n  background-color: transparent;\n  padding: var(--jb-input-input-padding, 2px 12px 0 12px);\n  display: block;\n  font-family: inherit;\n  font-size: var(--jb-input-value-font-size, 1.1rem);\n  color: var(--jb-input-value-color, #1f1735);\n  margin: 0;\n  border-radius: 0;\n  text-align: var(--jb-input-input-text-align, initial);\n  direction: var(--jb-input-input-direction, inherit);\n  font-weight: var(--jb-input-input-font-weight, initial);\n  /* Chrome, Safari, Edge, Opera */\n  /* Firefox */\n}\n.jb-input-web-component .input-box input:focus {\n  outline: none;\n}\n.jb-input-web-component .input-box input::placeholder {\n  color: var(--jb-input-placeholder-color, initial);\n  font-size: var(--jb-input-placeholder-font-size, 1.1rem);\n}\n.jb-input-web-component .input-box input::-webkit-outer-spin-button, .jb-input-web-component .input-box input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.jb-input-web-component .input-box input[type=number] {\n  -moz-appearance: textfield;\n}\n.jb-input-web-component .input-box .jb-input-start-section-wrapper {\n  display: flex;\n  height: 100%;\n  width: auto;\n  align-items: center;\n  justify-content: center;\n}\n.jb-input-web-component .input-box ::slotted([slot=start-section]), .jb-input-web-component .input-box ::slotted([slot=end-section]) {\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  max-height: 100%;\n  overflow-y: hidden;\n  background-color: transparent;\n  padding: 8px 16px;\n  width: auto;\n  box-sizing: border-box;\n}\n.jb-input-web-component .message-box {\n  font-size: var(--jb-input-message-font-size, 0.7rem);\n  padding: 2px 8px;\n  color: var(--jb-input-message-color, #929292);\n  display: var(--jb-input-message-box-display, block);\n}\n.jb-input-web-component .message-box:empty {\n  padding: 0;\n}\n.jb-input-web-component .message-box.error {\n  color: var(--jb-input-message-error-color, red);\n}</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">\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))},v=function(){this.elements.input.addEventListener("change",(t=>e(this,i,"m",C).call(this,t))),this.elements.input.addEventListener("beforeinput",e(this,i,"m",S).bind(this)),this.elements.input.addEventListener("input",(t=>e(this,i,"m",k).call(this,t))),this.elements.input.addEventListener("keypress",e(this,i,"m",y).bind(this)),this.elements.input.addEventListener("keyup",e(this,i,"m",j).bind(this)),this.elements.input.addEventListener("keydown",e(this,i,"m",g).bind(this))},g=function(t){e(this,i,"m",w).call(this,t)},w=function(t){t.stopPropagation();const e=P("keydown",t,{cancelable:!0});!this.dispatchEvent(e)&&t.preventDefault()},y=function(t){t.stopPropagation();const e=P("keypress",t,{cancelable:!1});this.dispatchEvent(e)},j=function(t){e(this,i,"m",x).call(this,t),13==t.keyCode&&e(this,i,"m",E).call(this)},x=function(t){t.stopPropagation();const e=P("keyup",t,{cancelable:!1});this.dispatchEvent(e)},E=function(){const t=new KeyboardEvent("enter");this.dispatchEvent(t)},k=function(t){const n=t.target.selectionEnd||0;t.target.selectionStart;const s=t.target.value,a=t.target;e(this,i,"m",c).call(this,s,"INPUT"),n!=s.length&&(["number"].includes(this.getAttribute("type"))||a.setSelectionRange(n,n)),e(this,i,"m",l).call(this,!1),e(this,i,"m",V).call(this,t)},V=function(t){t.stopPropagation();const e=q("input",t,{cancelable:!0});this.dispatchEvent(e)},S=function(t){e(this,i,"m",A).call(this,t)},A=function(t){t.stopPropagation();const e=q("beforeinput",t,{cancelable:!0});return this.dispatchEvent(e),e.defaultPrevented&&t.preventDefault(),e.defaultPrevented},C=function(t){const a=t.target.value,o=e(this,s,"f");e(this,i,"m",c).call(this,a,"CHANGE"),e(this,i,"m",l).call(this,!0);e(this,i,"m",T).call(this,t)&&(n(this,s,o,"f"),t.preventDefault())},T=function(t){t.stopPropagation();const e={bubbles:t.bubbles,cancelable:t.cancelable,composed:t.composed},n=new Event("change",e);return this.dispatchEvent(n),!!n.defaultPrevented},L=function(){const t=[];return this.required&&t.push({validator:/.{1}/g,message:this.getAttribute("label")+" میبایست حتما وارد شود",stateType:"valueMissing"}),t},M=function(t){if(t.isAllValid)e(this,r,"f").setValidity({},"");else{const n={};let i="";t.validationList.forEach((t=>{t.isValid||(t.validation.stateType&&(n[t.validation.stateType]=!0),""==i&&(i=t.message))})),e(this,r,"f").setValidity(n,i)}};!customElements.get("jb-input")&&window.customElements.define("jb-input",z),exports.JBInputWebComponent=z;
 //# sourceMappingURL=index.cjs.js.map

dist/index.js

@@ -1,2 +0,2 @@
-import{ValidationHelper as t}from"jb-validation";function e(t,e,n,i){if("a"===n&&!i)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!i:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?i:"a"===n?i.call(t):i?i.value:e.get(t)}function n(t,e,n,i,s){if("m"===i)throw new TypeError("Private method is not writable");if("a"===i&&!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"===i?s.call(t,n):s?s.value=n:e.set(t,n),n}"function"==typeof SuppressedError&&SuppressedError;var i,s,a,o,r,l,u,c,d,p,h,b,m,f,g,v,w,y,j,x,E,V,k,S,A,C,T,L,M;function P(t,e,n){const i={altKey:e.altKey,bubbles:e.bubbles,cancelable:e.cancelable,code:e.code,composed:e.composed,ctrlKey:e.ctrlKey,detail:e.detail,isComposing:e.isComposing,key:e.key,location:e.location,metaKey:e.metaKey,repeat:e.repeat,shiftKey:e.shiftKey,view:e.view,charCode:e.charCode,keyCode:e.keyCode,which:e.which,...n};return new KeyboardEvent(t,i)}function q(t,e,n){const i={bubbles:e.bubbles,cancelable:e.cancelable,composed:e.composed,detail:e.detail,isComposing:e.isComposing,view:e.view,which:e.which,data:e.data,dataTransfer:e.dataTransfer,inputType:e.inputType,targetRanges:"function"==typeof e.getTargetRanges()?e.getTargetRanges():[],...n};return new InputEvent(t,i)}class z extends HTMLElement{static get formAssociated(){return!0}get disabled(){return e(this,a,"f")}set disabled(t){n(this,a,t,"f"),this.elements.input.disabled=t,t?e(this,r,"f").states?.add("disabled"):e(this,r,"f").states?.delete("disabled")}set required(t){n(this,o,t,"f"),e(this,i,"m",l).call(this,!1)}get required(){return e(this,o,"f")}get isAutoValidationDisabled(){return""===this.getAttribute("disable-auto-validation")||"true"===this.getAttribute("disable-auto-validation")}get validation(){return e(this,u,"f")}get displayValue(){return e(this,s,"f").displayValue}get value(){return e(this,s,"f").value}set value(t){e(this,i,"m",c).call(this,t,"SET_VALUE")}get isDirty(){return e(this,s,"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(),i.add(this),s.set(this,{displayValue:"",value:""}),a.set(this,!1),o.set(this,!1),r.set(this,void 0),u.set(this,new t({clearValidationError:this.clearValidationError.bind(this),showValidationError:this.showValidationError.bind(this),getValue:()=>e(this,s,"f"),getValidations:e(this,i,"m",L).bind(this),getValueString:()=>e(this,s,"f").displayValue,setValidationResult:e(this,i,"m",M).bind(this)})),this.initialValue="",f.set(this,[]),"function"==typeof this.attachInternals&&n(this,r,this.attachInternals(),"f"),e(this,i,"m",b).call(this)}connectedCallback(){e(this,i,"m",p).call(this),this.initProp(),e(this,i,"m",h).call(this)}addStandardValueCallback(t){e(this,f,"f").push(t)}standardValue(t,n){let i={displayValue:t.toString(),value:t.toString()};return i=e(this,f,"f").reduce(((i,a)=>a(t.toString(),e(this,s,"f"),i,n)),i),i}initProp(){e(this,i,"m",c).call(this,this.getAttribute("value")||"","SET_VALUE")}static get observedAttributes(){return["label","type","message","value","name","autocomplete","placeholder","disabled","inputmode","readonly","disable-auto-validation","required"]}attributeChangedCallback(t,e,n){this.onAttributeChange(t,n)}onAttributeChange(t,n){switch(t){case"name":case"autocomplete":case"inputmode":case"readonly":this.elements.input.setAttribute(t,n);break;case"label":this.elements.labelValue.innerHTML=n,null==n||null==n||""==n?this.elements.label.classList.add("--hide"):this.elements.label.classList.remove("--hide");break;case"type":this.elements.input.setAttribute("type",n),"number"==n&&null==this.getAttribute("inputmode")&&this.setAttribute("inputmode","numeric");break;case"message":this.elements.messageBox.innerHTML=n;break;case"value":e(this,i,"m",c).call(this,n,"SET_VALUE");break;case"placeholder":this.elements.input.placeholder=n;break;case"disabled":""==n||"true"===n?this.disabled=!0:"false"!=n&&null!=n&&null!=n||(this.disabled=!1,this.elements.input.removeAttribute("disabled"));break;case"required":this.required=!!n&&"false"!==n}}showValidationError(t){const e="string"==typeof t?t:t.message;this.elements.messageBox.innerHTML=e,this.elements.messageBox.classList.add("error")}clearValidationError(){const t=this.getAttribute("message")||"";this.elements.messageBox.innerHTML=t,this.elements.messageBox.classList.remove("error")}focus(){this.elements.input.focus()}setSelectionRange(t,e,n){this.elements.input.setSelectionRange(t,e,n)}checkValidity(){const t=e(this,u,"f").checkValiditySync({showError:!1});if(!t.isAllValid){const t=new CustomEvent("invalid");this.dispatchEvent(t)}return t.isAllValid}reportValidity(){const t=e(this,u,"f").checkValiditySync({showError:!0});if(!t.isAllValid){const t=new CustomEvent("invalid");this.dispatchEvent(t)}return t.isAllValid}get validationMessage(){return e(this,r,"f").validationMessage}}s=new WeakMap,a=new WeakMap,o=new WeakMap,r=new WeakMap,u=new WeakMap,f=new WeakMap,i=new WeakSet,l=function(t){if(!this.isAutoValidationDisabled)return e(this,u,"f").checkValidity({showError:t})},c=function(t,n){null!==t&&null!=t||(t="");const s=this.standardValue(t,n);e(this,i,"m",d).call(this,s)},d=function(t){n(this,s,t,"f"),e(this,r,"f")&&"function"==typeof e(this,r,"f").setFormValue&&e(this,r,"f").setFormValue(t.value),this.elements.input.value=t.displayValue},p=function(){const t=new CustomEvent("load",{bubbles:!0,composed:!0});this.dispatchEvent(t)},h=function(){const t=new CustomEvent("init",{bubbles:!0,composed:!0});this.dispatchEvent(t)},b=function(){const t=this.attachShadow({mode:"open",delegatesFocus:!0});e(this,i,"m",m).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")}},e(this,i,"m",g).call(this)},m=function(){const t=document.createElement("template");t.innerHTML='<style>:host(:focus),\n:host(:focus-visible) {\n  outline: none;\n}\n\n.jb-input-web-component {\n  width: 100%;\n  margin: var(--jb-input-margin, 0 0);\n}\n.jb-input-web-component:focus-visible {\n  outline: none;\n}\n.jb-input-web-component label {\n  width: 100%;\n  margin: var(--jb-input-label-margin, 4px 0px);\n  display: block;\n  font-size: var(--jb-input-label-font-size, 0.8em);\n  color: var(--jb-input-label-color, #1f1735);\n  margin: var(--jb-input-label-margin, 0);\n  font-weight: var(--jb-input-label-font-weight, 300);\n}\n.jb-input-web-component label.--hide {\n  display: none;\n}\n.jb-input-web-component .input-box {\n  width: 100%;\n  box-sizing: border-box;\n  height: var(--jb-input-height, 40px);\n  border: solid var(--jb-input-border-width, 1px) var(--jb-input-border-color, #f7f6f6);\n  background-color: var(--jb-input-bgcolor, #f7f6f6);\n  border-bottom: solid var(--jb-input-border-bottom-width, 3px) var(--jb-input-border-color, #f7f6f6);\n  border-radius: var(--jb-input-border-radius, 16px);\n  margin: 4px 0px;\n  transition: ease 0.3s all;\n  overflow: var(--jb-input-box-overflow, hidden);\n  display: grid;\n  grid-template-columns: auto 1fr auto;\n  box-shadow: var(--jb-input-box-shadow, none);\n}\n.jb-input-web-component .input-box:focus-within {\n  border-color: var(--jb-input-border-color-focus, #1e2832);\n  border-width: var(--jb-input-border-width-focus, var(--jb-input-border-width, 1px));\n  border-bottom-width: var(--jb-input-border-bottom-width-focus, var(--jb-input-border-bottom-width, 3px));\n  box-shadow: var(--jb-input-box-shadow-focus, none);\n}\n.jb-input-web-component .input-box input {\n  border: none;\n  width: 100%;\n  box-sizing: border-box;\n  height: 100%;\n  background-color: transparent;\n  padding: var(--jb-input-input-padding, 2px 12px 0 12px);\n  display: block;\n  font-family: inherit;\n  font-size: var(--jb-input-value-font-size, 1.1rem);\n  color: var(--jb-input-value-color, #1f1735);\n  margin: 0;\n  border-radius: 0;\n  text-align: var(--jb-input-input-text-align, initial);\n  direction: var(--jb-input-input-direction, inherit);\n  font-weight: var(--jb-input-input-font-weight, initial);\n  /* Chrome, Safari, Edge, Opera */\n  /* Firefox */\n}\n.jb-input-web-component .input-box input:focus {\n  outline: none;\n}\n.jb-input-web-component .input-box input::placeholder {\n  color: var(--jb-input-placeholder-color, initial);\n  font-size: var(--jb-input-placeholder-font-size, 1.1rem);\n}\n.jb-input-web-component .input-box input::-webkit-outer-spin-button, .jb-input-web-component .input-box input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.jb-input-web-component .input-box input[type=number] {\n  -moz-appearance: textfield;\n}\n.jb-input-web-component .input-box .jb-input-start-section-wrapper {\n  display: flex;\n  height: 100%;\n  width: auto;\n  align-items: center;\n  justify-content: center;\n}\n.jb-input-web-component .input-box ::slotted([slot=start-section]), .jb-input-web-component .input-box ::slotted([slot=end-section]) {\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  max-height: 100%;\n  overflow-y: hidden;\n  background-color: transparent;\n  padding: 8px 16px;\n  width: auto;\n  box-sizing: border-box;\n}\n.jb-input-web-component .message-box {\n  font-size: var(--jb-input-message-font-size, 0.7rem);\n  padding: 2px 8px;\n  color: var(--jb-input-message-color, #929292);\n  display: var(--jb-input-message-box-display, block);\n}\n.jb-input-web-component .message-box:empty {\n  padding: 0;\n}\n.jb-input-web-component .message-box.error {\n  color: var(--jb-input-message-error-color, red);\n}</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">\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))},g=function(){this.elements.input.addEventListener("change",(t=>e(this,i,"m",C).call(this,t))),this.elements.input.addEventListener("beforeinput",e(this,i,"m",S).bind(this)),this.elements.input.addEventListener("input",(t=>e(this,i,"m",V).call(this,t))),this.elements.input.addEventListener("keypress",e(this,i,"m",y).bind(this)),this.elements.input.addEventListener("keyup",e(this,i,"m",j).bind(this)),this.elements.input.addEventListener("keydown",e(this,i,"m",v).bind(this))},v=function(t){e(this,i,"m",w).call(this,t)},w=function(t){t.stopPropagation();const e=P("keydown",t,{cancelable:!0});!this.dispatchEvent(e)&&t.preventDefault()},y=function(t){t.stopPropagation();const e=P("keypress",t,{cancelable:!1});this.dispatchEvent(e)},j=function(t){e(this,i,"m",x).call(this,t),13==t.keyCode&&e(this,i,"m",E).call(this)},x=function(t){t.stopPropagation();const e=P("keyup",t,{cancelable:!1});this.dispatchEvent(e)},E=function(){const t=new KeyboardEvent("enter");this.dispatchEvent(t)},V=function(t){const n=t.target.selectionEnd||0;t.target.selectionStart;const s=t.target.value,a=t.target;e(this,i,"m",c).call(this,s,"INPUT"),n!=s.length&&(["number"].includes(this.getAttribute("type"))||a.setSelectionRange(n,n)),e(this,i,"m",l).call(this,!1),e(this,i,"m",k).call(this,t)},k=function(t){t.stopPropagation();const e=q("input",t,{cancelable:!0});this.dispatchEvent(e)},S=function(t){e(this,i,"m",A).call(this,t)},A=function(t){t.stopPropagation();const e=q("beforeinput",t,{cancelable:!0});return this.dispatchEvent(e),e.defaultPrevented&&t.preventDefault(),e.defaultPrevented},C=function(t){const a=t.target.value,o=e(this,s,"f");e(this,i,"m",c).call(this,a,"CHANGE"),e(this,i,"m",l).call(this,!0);e(this,i,"m",T).call(this,t)&&(n(this,s,o,"f"),t.preventDefault())},T=function(t){t.stopPropagation();const e={bubbles:t.bubbles,cancelable:t.cancelable,composed:t.composed},n=new Event("change",e);return this.dispatchEvent(n),!!n.defaultPrevented},L=function(){const t=[];return this.required&&t.push({validator:/.{1}/g,message:this.getAttribute("label")+" میبایست حتما وارد شود",stateType:"valueMissing"}),t},M=function(t){if(t.isAllValid)e(this,r,"f").setValidity({},"");else{const n={};let i="";t.validationList.forEach((t=>{t.isValid||(t.validation.stateType&&(n[t.validation.stateType]=!0),""==i&&(i=t.message))})),e(this,r,"f").setValidity(n,i)}};!customElements.get("jb-input")&&window.customElements.define("jb-input",z);export{z as JBInputWebComponent};
+import{ValidationHelper as t}from"jb-validation";function e(t,e,n,i){if("a"===n&&!i)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!i:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?i:"a"===n?i.call(t):i?i.value:e.get(t)}function n(t,e,n,i,s){if("m"===i)throw new TypeError("Private method is not writable");if("a"===i&&!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"===i?s.call(t,n):s?s.value=n:e.set(t,n),n}"function"==typeof SuppressedError&&SuppressedError;var i,s,a,o,r,l,u,c,d,p,b,h,m,f,g,v,w,y,j,x,E,k,V,S,A,C,T,L,M;function P(t,e,n){const i={altKey:e.altKey,bubbles:e.bubbles,cancelable:e.cancelable,code:e.code,composed:e.composed,ctrlKey:e.ctrlKey,detail:e.detail,isComposing:e.isComposing,key:e.key,location:e.location,metaKey:e.metaKey,repeat:e.repeat,shiftKey:e.shiftKey,view:e.view,charCode:e.charCode,keyCode:e.keyCode,which:e.which,...n};return new KeyboardEvent(t,i)}function q(t,e,n){const i={bubbles:e.bubbles,cancelable:e.cancelable,composed:e.composed,detail:e.detail,isComposing:e.isComposing,view:e.view,which:e.which,data:e.data,dataTransfer:e.dataTransfer,inputType:e.inputType,targetRanges:"function"==typeof e.getTargetRanges()?e.getTargetRanges():[],...n};return new InputEvent(t,i)}class z extends HTMLElement{static get formAssociated(){return!0}get disabled(){return e(this,a,"f")}set disabled(t){n(this,a,t,"f"),this.elements.input.disabled=t,t?e(this,r,"f").states?.add("disabled"):e(this,r,"f").states?.delete("disabled")}set required(t){n(this,o,t,"f"),e(this,i,"m",l).call(this,!1)}get required(){return e(this,o,"f")}get isAutoValidationDisabled(){return""===this.getAttribute("disable-auto-validation")||"true"===this.getAttribute("disable-auto-validation")}get validation(){return e(this,u,"f")}get displayValue(){return e(this,s,"f").displayValue}get value(){return e(this,s,"f").value}set value(t){e(this,i,"m",c).call(this,t,"SET_VALUE")}get isDirty(){return e(this,s,"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(),i.add(this),s.set(this,{displayValue:"",value:""}),a.set(this,!1),o.set(this,!1),r.set(this,void 0),u.set(this,new t({clearValidationError:this.clearValidationError.bind(this),showValidationError:this.showValidationError.bind(this),getValue:()=>e(this,s,"f"),getValidations:e(this,i,"m",L).bind(this),getValueString:()=>e(this,s,"f").displayValue,setValidationResult:e(this,i,"m",M).bind(this)})),this.initialValue="",f.set(this,[]),"function"==typeof this.attachInternals&&n(this,r,this.attachInternals(),"f"),e(this,i,"m",h).call(this)}connectedCallback(){e(this,i,"m",p).call(this),this.initProp(),e(this,i,"m",b).call(this)}addStandardValueCallback(t){e(this,f,"f").push(t)}standardValue(t,n){let i={displayValue:t.toString(),value:t.toString()};return i=e(this,f,"f").reduce(((i,a)=>a(t.toString(),e(this,s,"f"),i,n)),i),i}initProp(){e(this,i,"m",c).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"]}attributeChangedCallback(t,e,n){this.onAttributeChange(t,n)}onAttributeChange(t,n){switch(t){case"name":case"autocomplete":case"inputmode":case"readonly":this.elements.input.setAttribute(t,n);break;case"label":this.elements.labelValue.innerHTML=n,null==n||null==n||""==n?this.elements.label.classList.add("--hide"):this.elements.label.classList.remove("--hide");break;case"type":this.elements.input.setAttribute("type",n),"number"==n&&null==this.getAttribute("inputmode")&&this.setAttribute("inputmode","numeric");break;case"message":this.elements.messageBox.innerHTML=n;break;case"virtualkeyboardpolicy":this.elements.input.setAttribute("virtualkeyboardpolicy",n);break;case"value":e(this,i,"m",c).call(this,n,"SET_VALUE");break;case"placeholder":this.elements.input.placeholder=n;break;case"disabled":""==n||"true"===n?this.disabled=!0:"false"!=n&&null!=n&&null!=n||(this.disabled=!1,this.elements.input.removeAttribute("disabled"));break;case"required":this.required=!!n&&"false"!==n}}showValidationError(t){const e="string"==typeof t?t:t.message;this.elements.messageBox.innerHTML=e,this.elements.messageBox.classList.add("error")}clearValidationError(){const t=this.getAttribute("message")||"";this.elements.messageBox.innerHTML=t,this.elements.messageBox.classList.remove("error")}focus(){this.elements.input.focus()}setSelectionRange(t,e,n){this.elements.input.setSelectionRange(t,e,n)}checkValidity(){const t=e(this,u,"f").checkValiditySync({showError:!1});if(!t.isAllValid){const t=new CustomEvent("invalid");this.dispatchEvent(t)}return t.isAllValid}reportValidity(){const t=e(this,u,"f").checkValiditySync({showError:!0});if(!t.isAllValid){const t=new CustomEvent("invalid");this.dispatchEvent(t)}return t.isAllValid}get validationMessage(){return e(this,r,"f").validationMessage}}s=new WeakMap,a=new WeakMap,o=new WeakMap,r=new WeakMap,u=new WeakMap,f=new WeakMap,i=new WeakSet,l=function(t){if(!this.isAutoValidationDisabled)return e(this,u,"f").checkValidity({showError:t})},c=function(t,n){null!==t&&null!=t||(t="");const s=this.standardValue(t,n);e(this,i,"m",d).call(this,s)},d=function(t){n(this,s,t,"f"),e(this,r,"f")&&"function"==typeof e(this,r,"f").setFormValue&&e(this,r,"f").setFormValue(t.value),this.elements.input.value=t.displayValue},p=function(){const t=new CustomEvent("load",{bubbles:!0,composed:!0});this.dispatchEvent(t)},b=function(){const t=new CustomEvent("init",{bubbles:!0,composed:!0});this.dispatchEvent(t)},h=function(){const t=this.attachShadow({mode:"open",delegatesFocus:!0});e(this,i,"m",m).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")}},e(this,i,"m",g).call(this)},m=function(){const t=document.createElement("template");t.innerHTML='<style>:host(:focus),\n:host(:focus-visible) {\n  outline: none;\n}\n\n.jb-input-web-component {\n  width: 100%;\n  margin: var(--jb-input-margin, 0 0);\n}\n.jb-input-web-component:focus-visible {\n  outline: none;\n}\n.jb-input-web-component label {\n  width: 100%;\n  margin: var(--jb-input-label-margin, 4px 0px);\n  display: block;\n  font-size: var(--jb-input-label-font-size, 0.8em);\n  color: var(--jb-input-label-color, #1f1735);\n  margin: var(--jb-input-label-margin, 0);\n  font-weight: var(--jb-input-label-font-weight, 300);\n}\n.jb-input-web-component label.--hide {\n  display: none;\n}\n.jb-input-web-component .input-box {\n  width: 100%;\n  box-sizing: border-box;\n  height: var(--jb-input-height, 40px);\n  border: solid var(--jb-input-border-width, 1px) var(--jb-input-border-color, #f7f6f6);\n  background-color: var(--jb-input-bgcolor, #f7f6f6);\n  border-bottom: solid var(--jb-input-border-bottom-width, 3px) var(--jb-input-border-color, #f7f6f6);\n  border-radius: var(--jb-input-border-radius, 16px);\n  margin: 4px 0px;\n  transition: ease 0.3s all;\n  overflow: var(--jb-input-box-overflow, hidden);\n  display: grid;\n  grid-template-columns: auto 1fr auto;\n  box-shadow: var(--jb-input-box-shadow, none);\n}\n.jb-input-web-component .input-box:focus-within {\n  border-color: var(--jb-input-border-color-focus, #1e2832);\n  border-width: var(--jb-input-border-width-focus, var(--jb-input-border-width, 1px));\n  border-bottom-width: var(--jb-input-border-bottom-width-focus, var(--jb-input-border-bottom-width, 3px));\n  box-shadow: var(--jb-input-box-shadow-focus, none);\n}\n.jb-input-web-component .input-box input {\n  border: none;\n  width: 100%;\n  box-sizing: border-box;\n  height: 100%;\n  background-color: transparent;\n  padding: var(--jb-input-input-padding, 2px 12px 0 12px);\n  display: block;\n  font-family: inherit;\n  font-size: var(--jb-input-value-font-size, 1.1rem);\n  color: var(--jb-input-value-color, #1f1735);\n  margin: 0;\n  border-radius: 0;\n  text-align: var(--jb-input-input-text-align, initial);\n  direction: var(--jb-input-input-direction, inherit);\n  font-weight: var(--jb-input-input-font-weight, initial);\n  /* Chrome, Safari, Edge, Opera */\n  /* Firefox */\n}\n.jb-input-web-component .input-box input:focus {\n  outline: none;\n}\n.jb-input-web-component .input-box input::placeholder {\n  color: var(--jb-input-placeholder-color, initial);\n  font-size: var(--jb-input-placeholder-font-size, 1.1rem);\n}\n.jb-input-web-component .input-box input::-webkit-outer-spin-button, .jb-input-web-component .input-box input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.jb-input-web-component .input-box input[type=number] {\n  -moz-appearance: textfield;\n}\n.jb-input-web-component .input-box .jb-input-start-section-wrapper {\n  display: flex;\n  height: 100%;\n  width: auto;\n  align-items: center;\n  justify-content: center;\n}\n.jb-input-web-component .input-box ::slotted([slot=start-section]), .jb-input-web-component .input-box ::slotted([slot=end-section]) {\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  max-height: 100%;\n  overflow-y: hidden;\n  background-color: transparent;\n  padding: 8px 16px;\n  width: auto;\n  box-sizing: border-box;\n}\n.jb-input-web-component .message-box {\n  font-size: var(--jb-input-message-font-size, 0.7rem);\n  padding: 2px 8px;\n  color: var(--jb-input-message-color, #929292);\n  display: var(--jb-input-message-box-display, block);\n}\n.jb-input-web-component .message-box:empty {\n  padding: 0;\n}\n.jb-input-web-component .message-box.error {\n  color: var(--jb-input-message-error-color, red);\n}</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">\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))},g=function(){this.elements.input.addEventListener("change",(t=>e(this,i,"m",C).call(this,t))),this.elements.input.addEventListener("beforeinput",e(this,i,"m",S).bind(this)),this.elements.input.addEventListener("input",(t=>e(this,i,"m",k).call(this,t))),this.elements.input.addEventListener("keypress",e(this,i,"m",y).bind(this)),this.elements.input.addEventListener("keyup",e(this,i,"m",j).bind(this)),this.elements.input.addEventListener("keydown",e(this,i,"m",v).bind(this))},v=function(t){e(this,i,"m",w).call(this,t)},w=function(t){t.stopPropagation();const e=P("keydown",t,{cancelable:!0});!this.dispatchEvent(e)&&t.preventDefault()},y=function(t){t.stopPropagation();const e=P("keypress",t,{cancelable:!1});this.dispatchEvent(e)},j=function(t){e(this,i,"m",x).call(this,t),13==t.keyCode&&e(this,i,"m",E).call(this)},x=function(t){t.stopPropagation();const e=P("keyup",t,{cancelable:!1});this.dispatchEvent(e)},E=function(){const t=new KeyboardEvent("enter");this.dispatchEvent(t)},k=function(t){const n=t.target.selectionEnd||0;t.target.selectionStart;const s=t.target.value,a=t.target;e(this,i,"m",c).call(this,s,"INPUT"),n!=s.length&&(["number"].includes(this.getAttribute("type"))||a.setSelectionRange(n,n)),e(this,i,"m",l).call(this,!1),e(this,i,"m",V).call(this,t)},V=function(t){t.stopPropagation();const e=q("input",t,{cancelable:!0});this.dispatchEvent(e)},S=function(t){e(this,i,"m",A).call(this,t)},A=function(t){t.stopPropagation();const e=q("beforeinput",t,{cancelable:!0});return this.dispatchEvent(e),e.defaultPrevented&&t.preventDefault(),e.defaultPrevented},C=function(t){const a=t.target.value,o=e(this,s,"f");e(this,i,"m",c).call(this,a,"CHANGE"),e(this,i,"m",l).call(this,!0);e(this,i,"m",T).call(this,t)&&(n(this,s,o,"f"),t.preventDefault())},T=function(t){t.stopPropagation();const e={bubbles:t.bubbles,cancelable:t.cancelable,composed:t.composed},n=new Event("change",e);return this.dispatchEvent(n),!!n.defaultPrevented},L=function(){const t=[];return this.required&&t.push({validator:/.{1}/g,message:this.getAttribute("label")+" میبایست حتما وارد شود",stateType:"valueMissing"}),t},M=function(t){if(t.isAllValid)e(this,r,"f").setValidity({},"");else{const n={};let i="";t.validationList.forEach((t=>{t.isValid||(t.validation.stateType&&(n[t.validation.stateType]=!0),""==i&&(i=t.message))})),e(this,r,"f").setValidity(n,i)}};!customElements.get("jb-input")&&window.customElements.define("jb-input",z);export{z as JBInputWebComponent};
 //# sourceMappingURL=index.js.map

dist/index.umd.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("jb-validation")):"function"==typeof define&&define.amd?define(["exports","jb-validation"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).JBInput={},t.JBValidation)}(this,(function(t,e){"use strict";function n(t,e,n,i){if("a"===n&&!i)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!i:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?i:"a"===n?i.call(t):i?i.value:e.get(t)}function i(t,e,n,i,s){if("m"===i)throw new TypeError("Private method is not writable");if("a"===i&&!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"===i?s.call(t,n):s?s.value=n:e.set(t,n),n}"function"==typeof SuppressedError&&SuppressedError;var s,a,o,r,l,u,c,d,p,b,h,m,f,g,v,w,y,j,x,E,V,k,S,A,T,C,L,M,P;function q(t,e,n){const i={altKey:e.altKey,bubbles:e.bubbles,cancelable:e.cancelable,code:e.code,composed:e.composed,ctrlKey:e.ctrlKey,detail:e.detail,isComposing:e.isComposing,key:e.key,location:e.location,metaKey:e.metaKey,repeat:e.repeat,shiftKey:e.shiftKey,view:e.view,charCode:e.charCode,keyCode:e.keyCode,which:e.which,...n};return new KeyboardEvent(t,i)}function z(t,e,n){const i={bubbles:e.bubbles,cancelable:e.cancelable,composed:e.composed,detail:e.detail,isComposing:e.isComposing,view:e.view,which:e.which,data:e.data,dataTransfer:e.dataTransfer,inputType:e.inputType,targetRanges:"function"==typeof e.getTargetRanges()?e.getTargetRanges():[],...n};return new InputEvent(t,i)}class B extends HTMLElement{static get formAssociated(){return!0}get disabled(){return n(this,o,"f")}set disabled(t){i(this,o,t,"f"),this.elements.input.disabled=t,t?n(this,l,"f").states?.add("disabled"):n(this,l,"f").states?.delete("disabled")}set required(t){i(this,r,t,"f"),n(this,s,"m",u).call(this,!1)}get required(){return n(this,r,"f")}get isAutoValidationDisabled(){return""===this.getAttribute("disable-auto-validation")||"true"===this.getAttribute("disable-auto-validation")}get validation(){return n(this,c,"f")}get displayValue(){return n(this,a,"f").displayValue}get value(){return n(this,a,"f").value}set value(t){n(this,s,"m",d).call(this,t,"SET_VALUE")}get isDirty(){return n(this,a,"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(),s.add(this),a.set(this,{displayValue:"",value:""}),o.set(this,!1),r.set(this,!1),l.set(this,void 0),c.set(this,new e.ValidationHelper({clearValidationError:this.clearValidationError.bind(this),showValidationError:this.showValidationError.bind(this),getValue:()=>n(this,a,"f"),getValidations:n(this,s,"m",M).bind(this),getValueString:()=>n(this,a,"f").displayValue,setValidationResult:n(this,s,"m",P).bind(this)})),this.initialValue="",g.set(this,[]),"function"==typeof this.attachInternals&&i(this,l,this.attachInternals(),"f"),n(this,s,"m",m).call(this)}connectedCallback(){n(this,s,"m",b).call(this),this.initProp(),n(this,s,"m",h).call(this)}addStandardValueCallback(t){n(this,g,"f").push(t)}standardValue(t,e){let i={displayValue:t.toString(),value:t.toString()};return i=n(this,g,"f").reduce(((i,s)=>s(t.toString(),n(this,a,"f"),i,e)),i),i}initProp(){n(this,s,"m",d).call(this,this.getAttribute("value")||"","SET_VALUE")}static get observedAttributes(){return["label","type","message","value","name","autocomplete","placeholder","disabled","inputmode","readonly","disable-auto-validation","required"]}attributeChangedCallback(t,e,n){this.onAttributeChange(t,n)}onAttributeChange(t,e){switch(t){case"name":case"autocomplete":case"inputmode":case"readonly":this.elements.input.setAttribute(t,e);break;case"label":this.elements.labelValue.innerHTML=e,null==e||null==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.innerHTML=e;break;case"value":n(this,s,"m",d).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&&null!=e||(this.disabled=!1,this.elements.input.removeAttribute("disabled"));break;case"required":this.required=!!e&&"false"!==e}}showValidationError(t){const e="string"==typeof t?t:t.message;this.elements.messageBox.innerHTML=e,this.elements.messageBox.classList.add("error")}clearValidationError(){const t=this.getAttribute("message")||"";this.elements.messageBox.innerHTML=t,this.elements.messageBox.classList.remove("error")}focus(){this.elements.input.focus()}setSelectionRange(t,e,n){this.elements.input.setSelectionRange(t,e,n)}checkValidity(){const t=n(this,c,"f").checkValiditySync({showError:!1});if(!t.isAllValid){const t=new CustomEvent("invalid");this.dispatchEvent(t)}return t.isAllValid}reportValidity(){const t=n(this,c,"f").checkValiditySync({showError:!0});if(!t.isAllValid){const t=new CustomEvent("invalid");this.dispatchEvent(t)}return t.isAllValid}get validationMessage(){return n(this,l,"f").validationMessage}}a=new WeakMap,o=new WeakMap,r=new WeakMap,l=new WeakMap,c=new WeakMap,g=new WeakMap,s=new WeakSet,u=function(t){if(!this.isAutoValidationDisabled)return n(this,c,"f").checkValidity({showError:t})},d=function(t,e){null!==t&&null!=t||(t="");const i=this.standardValue(t,e);n(this,s,"m",p).call(this,i)},p=function(t){i(this,a,t,"f"),n(this,l,"f")&&"function"==typeof n(this,l,"f").setFormValue&&n(this,l,"f").setFormValue(t.value),this.elements.input.value=t.displayValue},b=function(){const t=new CustomEvent("load",{bubbles:!0,composed:!0});this.dispatchEvent(t)},h=function(){const t=new CustomEvent("init",{bubbles:!0,composed:!0});this.dispatchEvent(t)},m=function(){const t=this.attachShadow({mode:"open",delegatesFocus:!0});n(this,s,"m",f).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")}},n(this,s,"m",v).call(this)},f=function(){const t=document.createElement("template");t.innerHTML='<style>:host(:focus),\n:host(:focus-visible) {\n  outline: none;\n}\n\n.jb-input-web-component {\n  width: 100%;\n  margin: var(--jb-input-margin, 0 0);\n}\n.jb-input-web-component:focus-visible {\n  outline: none;\n}\n.jb-input-web-component label {\n  width: 100%;\n  margin: var(--jb-input-label-margin, 4px 0px);\n  display: block;\n  font-size: var(--jb-input-label-font-size, 0.8em);\n  color: var(--jb-input-label-color, #1f1735);\n  margin: var(--jb-input-label-margin, 0);\n  font-weight: var(--jb-input-label-font-weight, 300);\n}\n.jb-input-web-component label.--hide {\n  display: none;\n}\n.jb-input-web-component .input-box {\n  width: 100%;\n  box-sizing: border-box;\n  height: var(--jb-input-height, 40px);\n  border: solid var(--jb-input-border-width, 1px) var(--jb-input-border-color, #f7f6f6);\n  background-color: var(--jb-input-bgcolor, #f7f6f6);\n  border-bottom: solid var(--jb-input-border-bottom-width, 3px) var(--jb-input-border-color, #f7f6f6);\n  border-radius: var(--jb-input-border-radius, 16px);\n  margin: 4px 0px;\n  transition: ease 0.3s all;\n  overflow: var(--jb-input-box-overflow, hidden);\n  display: grid;\n  grid-template-columns: auto 1fr auto;\n  box-shadow: var(--jb-input-box-shadow, none);\n}\n.jb-input-web-component .input-box:focus-within {\n  border-color: var(--jb-input-border-color-focus, #1e2832);\n  border-width: var(--jb-input-border-width-focus, var(--jb-input-border-width, 1px));\n  border-bottom-width: var(--jb-input-border-bottom-width-focus, var(--jb-input-border-bottom-width, 3px));\n  box-shadow: var(--jb-input-box-shadow-focus, none);\n}\n.jb-input-web-component .input-box input {\n  border: none;\n  width: 100%;\n  box-sizing: border-box;\n  height: 100%;\n  background-color: transparent;\n  padding: var(--jb-input-input-padding, 2px 12px 0 12px);\n  display: block;\n  font-family: inherit;\n  font-size: var(--jb-input-value-font-size, 1.1rem);\n  color: var(--jb-input-value-color, #1f1735);\n  margin: 0;\n  border-radius: 0;\n  text-align: var(--jb-input-input-text-align, initial);\n  direction: var(--jb-input-input-direction, inherit);\n  font-weight: var(--jb-input-input-font-weight, initial);\n  /* Chrome, Safari, Edge, Opera */\n  /* Firefox */\n}\n.jb-input-web-component .input-box input:focus {\n  outline: none;\n}\n.jb-input-web-component .input-box input::placeholder {\n  color: var(--jb-input-placeholder-color, initial);\n  font-size: var(--jb-input-placeholder-font-size, 1.1rem);\n}\n.jb-input-web-component .input-box input::-webkit-outer-spin-button, .jb-input-web-component .input-box input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.jb-input-web-component .input-box input[type=number] {\n  -moz-appearance: textfield;\n}\n.jb-input-web-component .input-box .jb-input-start-section-wrapper {\n  display: flex;\n  height: 100%;\n  width: auto;\n  align-items: center;\n  justify-content: center;\n}\n.jb-input-web-component .input-box ::slotted([slot=start-section]), .jb-input-web-component .input-box ::slotted([slot=end-section]) {\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  max-height: 100%;\n  overflow-y: hidden;\n  background-color: transparent;\n  padding: 8px 16px;\n  width: auto;\n  box-sizing: border-box;\n}\n.jb-input-web-component .message-box {\n  font-size: var(--jb-input-message-font-size, 0.7rem);\n  padding: 2px 8px;\n  color: var(--jb-input-message-color, #929292);\n  display: var(--jb-input-message-box-display, block);\n}\n.jb-input-web-component .message-box:empty {\n  padding: 0;\n}\n.jb-input-web-component .message-box.error {\n  color: var(--jb-input-message-error-color, red);\n}</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">\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))},v=function(){this.elements.input.addEventListener("change",(t=>n(this,s,"m",C).call(this,t))),this.elements.input.addEventListener("beforeinput",n(this,s,"m",A).bind(this)),this.elements.input.addEventListener("input",(t=>n(this,s,"m",k).call(this,t))),this.elements.input.addEventListener("keypress",n(this,s,"m",j).bind(this)),this.elements.input.addEventListener("keyup",n(this,s,"m",x).bind(this)),this.elements.input.addEventListener("keydown",n(this,s,"m",w).bind(this))},w=function(t){n(this,s,"m",y).call(this,t)},y=function(t){t.stopPropagation();const e=q("keydown",t,{cancelable:!0});!this.dispatchEvent(e)&&t.preventDefault()},j=function(t){t.stopPropagation();const e=q("keypress",t,{cancelable:!1});this.dispatchEvent(e)},x=function(t){n(this,s,"m",E).call(this,t),13==t.keyCode&&n(this,s,"m",V).call(this)},E=function(t){t.stopPropagation();const e=q("keyup",t,{cancelable:!1});this.dispatchEvent(e)},V=function(){const t=new KeyboardEvent("enter");this.dispatchEvent(t)},k=function(t){const e=t.target.selectionEnd||0;t.target.selectionStart;const i=t.target.value,a=t.target;n(this,s,"m",d).call(this,i,"INPUT"),e!=i.length&&(["number"].includes(this.getAttribute("type"))||a.setSelectionRange(e,e)),n(this,s,"m",u).call(this,!1),n(this,s,"m",S).call(this,t)},S=function(t){t.stopPropagation();const e=z("input",t,{cancelable:!0});this.dispatchEvent(e)},A=function(t){n(this,s,"m",T).call(this,t)},T=function(t){t.stopPropagation();const e=z("beforeinput",t,{cancelable:!0});return this.dispatchEvent(e),e.defaultPrevented&&t.preventDefault(),e.defaultPrevented},C=function(t){const e=t.target.value,o=n(this,a,"f");n(this,s,"m",d).call(this,e,"CHANGE"),n(this,s,"m",u).call(this,!0);n(this,s,"m",L).call(this,t)&&(i(this,a,o,"f"),t.preventDefault())},L=function(t){t.stopPropagation();const e={bubbles:t.bubbles,cancelable:t.cancelable,composed:t.composed},n=new Event("change",e);return this.dispatchEvent(n),!!n.defaultPrevented},M=function(){const t=[];return this.required&&t.push({validator:/.{1}/g,message:this.getAttribute("label")+" میبایست حتما وارد شود",stateType:"valueMissing"}),t},P=function(t){if(t.isAllValid)n(this,l,"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))})),n(this,l,"f").setValidity(e,i)}};!customElements.get("jb-input")&&window.customElements.define("jb-input",B),t.JBInputWebComponent=B}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("jb-validation")):"function"==typeof define&&define.amd?define(["exports","jb-validation"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).JBInput={},t.JBValidation)}(this,(function(t,e){"use strict";function n(t,e,n,i){if("a"===n&&!i)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!i:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?i:"a"===n?i.call(t):i?i.value:e.get(t)}function i(t,e,n,i,s){if("m"===i)throw new TypeError("Private method is not writable");if("a"===i&&!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"===i?s.call(t,n):s?s.value=n:e.set(t,n),n}"function"==typeof SuppressedError&&SuppressedError;var s,a,o,r,l,u,c,d,p,b,h,m,f,g,v,w,y,j,x,E,k,V,S,A,T,C,L,M,P;function q(t,e,n){const i={altKey:e.altKey,bubbles:e.bubbles,cancelable:e.cancelable,code:e.code,composed:e.composed,ctrlKey:e.ctrlKey,detail:e.detail,isComposing:e.isComposing,key:e.key,location:e.location,metaKey:e.metaKey,repeat:e.repeat,shiftKey:e.shiftKey,view:e.view,charCode:e.charCode,keyCode:e.keyCode,which:e.which,...n};return new KeyboardEvent(t,i)}function z(t,e,n){const i={bubbles:e.bubbles,cancelable:e.cancelable,composed:e.composed,detail:e.detail,isComposing:e.isComposing,view:e.view,which:e.which,data:e.data,dataTransfer:e.dataTransfer,inputType:e.inputType,targetRanges:"function"==typeof e.getTargetRanges()?e.getTargetRanges():[],...n};return new InputEvent(t,i)}class B extends HTMLElement{static get formAssociated(){return!0}get disabled(){return n(this,o,"f")}set disabled(t){i(this,o,t,"f"),this.elements.input.disabled=t,t?n(this,l,"f").states?.add("disabled"):n(this,l,"f").states?.delete("disabled")}set required(t){i(this,r,t,"f"),n(this,s,"m",u).call(this,!1)}get required(){return n(this,r,"f")}get isAutoValidationDisabled(){return""===this.getAttribute("disable-auto-validation")||"true"===this.getAttribute("disable-auto-validation")}get validation(){return n(this,c,"f")}get displayValue(){return n(this,a,"f").displayValue}get value(){return n(this,a,"f").value}set value(t){n(this,s,"m",d).call(this,t,"SET_VALUE")}get isDirty(){return n(this,a,"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(),s.add(this),a.set(this,{displayValue:"",value:""}),o.set(this,!1),r.set(this,!1),l.set(this,void 0),c.set(this,new e.ValidationHelper({clearValidationError:this.clearValidationError.bind(this),showValidationError:this.showValidationError.bind(this),getValue:()=>n(this,a,"f"),getValidations:n(this,s,"m",M).bind(this),getValueString:()=>n(this,a,"f").displayValue,setValidationResult:n(this,s,"m",P).bind(this)})),this.initialValue="",g.set(this,[]),"function"==typeof this.attachInternals&&i(this,l,this.attachInternals(),"f"),n(this,s,"m",m).call(this)}connectedCallback(){n(this,s,"m",b).call(this),this.initProp(),n(this,s,"m",h).call(this)}addStandardValueCallback(t){n(this,g,"f").push(t)}standardValue(t,e){let i={displayValue:t.toString(),value:t.toString()};return i=n(this,g,"f").reduce(((i,s)=>s(t.toString(),n(this,a,"f"),i,e)),i),i}initProp(){n(this,s,"m",d).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"]}attributeChangedCallback(t,e,n){this.onAttributeChange(t,n)}onAttributeChange(t,e){switch(t){case"name":case"autocomplete":case"inputmode":case"readonly":this.elements.input.setAttribute(t,e);break;case"label":this.elements.labelValue.innerHTML=e,null==e||null==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.innerHTML=e;break;case"virtualkeyboardpolicy":this.elements.input.setAttribute("virtualkeyboardpolicy",e);break;case"value":n(this,s,"m",d).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&&null!=e||(this.disabled=!1,this.elements.input.removeAttribute("disabled"));break;case"required":this.required=!!e&&"false"!==e}}showValidationError(t){const e="string"==typeof t?t:t.message;this.elements.messageBox.innerHTML=e,this.elements.messageBox.classList.add("error")}clearValidationError(){const t=this.getAttribute("message")||"";this.elements.messageBox.innerHTML=t,this.elements.messageBox.classList.remove("error")}focus(){this.elements.input.focus()}setSelectionRange(t,e,n){this.elements.input.setSelectionRange(t,e,n)}checkValidity(){const t=n(this,c,"f").checkValiditySync({showError:!1});if(!t.isAllValid){const t=new CustomEvent("invalid");this.dispatchEvent(t)}return t.isAllValid}reportValidity(){const t=n(this,c,"f").checkValiditySync({showError:!0});if(!t.isAllValid){const t=new CustomEvent("invalid");this.dispatchEvent(t)}return t.isAllValid}get validationMessage(){return n(this,l,"f").validationMessage}}a=new WeakMap,o=new WeakMap,r=new WeakMap,l=new WeakMap,c=new WeakMap,g=new WeakMap,s=new WeakSet,u=function(t){if(!this.isAutoValidationDisabled)return n(this,c,"f").checkValidity({showError:t})},d=function(t,e){null!==t&&null!=t||(t="");const i=this.standardValue(t,e);n(this,s,"m",p).call(this,i)},p=function(t){i(this,a,t,"f"),n(this,l,"f")&&"function"==typeof n(this,l,"f").setFormValue&&n(this,l,"f").setFormValue(t.value),this.elements.input.value=t.displayValue},b=function(){const t=new CustomEvent("load",{bubbles:!0,composed:!0});this.dispatchEvent(t)},h=function(){const t=new CustomEvent("init",{bubbles:!0,composed:!0});this.dispatchEvent(t)},m=function(){const t=this.attachShadow({mode:"open",delegatesFocus:!0});n(this,s,"m",f).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")}},n(this,s,"m",v).call(this)},f=function(){const t=document.createElement("template");t.innerHTML='<style>:host(:focus),\n:host(:focus-visible) {\n  outline: none;\n}\n\n.jb-input-web-component {\n  width: 100%;\n  margin: var(--jb-input-margin, 0 0);\n}\n.jb-input-web-component:focus-visible {\n  outline: none;\n}\n.jb-input-web-component label {\n  width: 100%;\n  margin: var(--jb-input-label-margin, 4px 0px);\n  display: block;\n  font-size: var(--jb-input-label-font-size, 0.8em);\n  color: var(--jb-input-label-color, #1f1735);\n  margin: var(--jb-input-label-margin, 0);\n  font-weight: var(--jb-input-label-font-weight, 300);\n}\n.jb-input-web-component label.--hide {\n  display: none;\n}\n.jb-input-web-component .input-box {\n  width: 100%;\n  box-sizing: border-box;\n  height: var(--jb-input-height, 40px);\n  border: solid var(--jb-input-border-width, 1px) var(--jb-input-border-color, #f7f6f6);\n  background-color: var(--jb-input-bgcolor, #f7f6f6);\n  border-bottom: solid var(--jb-input-border-bottom-width, 3px) var(--jb-input-border-color, #f7f6f6);\n  border-radius: var(--jb-input-border-radius, 16px);\n  margin: 4px 0px;\n  transition: ease 0.3s all;\n  overflow: var(--jb-input-box-overflow, hidden);\n  display: grid;\n  grid-template-columns: auto 1fr auto;\n  box-shadow: var(--jb-input-box-shadow, none);\n}\n.jb-input-web-component .input-box:focus-within {\n  border-color: var(--jb-input-border-color-focus, #1e2832);\n  border-width: var(--jb-input-border-width-focus, var(--jb-input-border-width, 1px));\n  border-bottom-width: var(--jb-input-border-bottom-width-focus, var(--jb-input-border-bottom-width, 3px));\n  box-shadow: var(--jb-input-box-shadow-focus, none);\n}\n.jb-input-web-component .input-box input {\n  border: none;\n  width: 100%;\n  box-sizing: border-box;\n  height: 100%;\n  background-color: transparent;\n  padding: var(--jb-input-input-padding, 2px 12px 0 12px);\n  display: block;\n  font-family: inherit;\n  font-size: var(--jb-input-value-font-size, 1.1rem);\n  color: var(--jb-input-value-color, #1f1735);\n  margin: 0;\n  border-radius: 0;\n  text-align: var(--jb-input-input-text-align, initial);\n  direction: var(--jb-input-input-direction, inherit);\n  font-weight: var(--jb-input-input-font-weight, initial);\n  /* Chrome, Safari, Edge, Opera */\n  /* Firefox */\n}\n.jb-input-web-component .input-box input:focus {\n  outline: none;\n}\n.jb-input-web-component .input-box input::placeholder {\n  color: var(--jb-input-placeholder-color, initial);\n  font-size: var(--jb-input-placeholder-font-size, 1.1rem);\n}\n.jb-input-web-component .input-box input::-webkit-outer-spin-button, .jb-input-web-component .input-box input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.jb-input-web-component .input-box input[type=number] {\n  -moz-appearance: textfield;\n}\n.jb-input-web-component .input-box .jb-input-start-section-wrapper {\n  display: flex;\n  height: 100%;\n  width: auto;\n  align-items: center;\n  justify-content: center;\n}\n.jb-input-web-component .input-box ::slotted([slot=start-section]), .jb-input-web-component .input-box ::slotted([slot=end-section]) {\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  max-height: 100%;\n  overflow-y: hidden;\n  background-color: transparent;\n  padding: 8px 16px;\n  width: auto;\n  box-sizing: border-box;\n}\n.jb-input-web-component .message-box {\n  font-size: var(--jb-input-message-font-size, 0.7rem);\n  padding: 2px 8px;\n  color: var(--jb-input-message-color, #929292);\n  display: var(--jb-input-message-box-display, block);\n}\n.jb-input-web-component .message-box:empty {\n  padding: 0;\n}\n.jb-input-web-component .message-box.error {\n  color: var(--jb-input-message-error-color, red);\n}</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">\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))},v=function(){this.elements.input.addEventListener("change",(t=>n(this,s,"m",C).call(this,t))),this.elements.input.addEventListener("beforeinput",n(this,s,"m",A).bind(this)),this.elements.input.addEventListener("input",(t=>n(this,s,"m",V).call(this,t))),this.elements.input.addEventListener("keypress",n(this,s,"m",j).bind(this)),this.elements.input.addEventListener("keyup",n(this,s,"m",x).bind(this)),this.elements.input.addEventListener("keydown",n(this,s,"m",w).bind(this))},w=function(t){n(this,s,"m",y).call(this,t)},y=function(t){t.stopPropagation();const e=q("keydown",t,{cancelable:!0});!this.dispatchEvent(e)&&t.preventDefault()},j=function(t){t.stopPropagation();const e=q("keypress",t,{cancelable:!1});this.dispatchEvent(e)},x=function(t){n(this,s,"m",E).call(this,t),13==t.keyCode&&n(this,s,"m",k).call(this)},E=function(t){t.stopPropagation();const e=q("keyup",t,{cancelable:!1});this.dispatchEvent(e)},k=function(){const t=new KeyboardEvent("enter");this.dispatchEvent(t)},V=function(t){const e=t.target.selectionEnd||0;t.target.selectionStart;const i=t.target.value,a=t.target;n(this,s,"m",d).call(this,i,"INPUT"),e!=i.length&&(["number"].includes(this.getAttribute("type"))||a.setSelectionRange(e,e)),n(this,s,"m",u).call(this,!1),n(this,s,"m",S).call(this,t)},S=function(t){t.stopPropagation();const e=z("input",t,{cancelable:!0});this.dispatchEvent(e)},A=function(t){n(this,s,"m",T).call(this,t)},T=function(t){t.stopPropagation();const e=z("beforeinput",t,{cancelable:!0});return this.dispatchEvent(e),e.defaultPrevented&&t.preventDefault(),e.defaultPrevented},C=function(t){const e=t.target.value,o=n(this,a,"f");n(this,s,"m",d).call(this,e,"CHANGE"),n(this,s,"m",u).call(this,!0);n(this,s,"m",L).call(this,t)&&(i(this,a,o,"f"),t.preventDefault())},L=function(t){t.stopPropagation();const e={bubbles:t.bubbles,cancelable:t.cancelable,composed:t.composed},n=new Event("change",e);return this.dispatchEvent(n),!!n.defaultPrevented},M=function(){const t=[];return this.required&&t.push({validator:/.{1}/g,message:this.getAttribute("label")+" میبایست حتما وارد شود",stateType:"valueMissing"}),t},P=function(t){if(t.isAllValid)n(this,l,"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))})),n(this,l,"f").setValidity(e,i)}};!customElements.get("jb-input")&&window.customElements.define("jb-input",B),t.JBInputWebComponent=B}));
 //# sourceMappingURL=index.umd.js.map

lib/jb-input.ts

@@ -212,2 +212,3 @@ import CSS from "./jb-input.scss";
       'disable-auto-validation',
+      "virtualkeyboardpolicy",
       "required",
@@ -248,2 +249,5 @@ ];
         break;
+      case "virtualkeyboardpolicy":
+        this.elements.input.setAttribute("virtualkeyboardpolicy",value);
+        break;
       case "value":
@@ -250,0 +254,0 @@ this.#setValue(value,"SET_VALUE");

package.json

@@ -17,3 +17,3 @@ {
   ],
-  "version": "3.5.0",
+  "version": "3.6.0",
   "bugs": "https://github.com/javadbat/jb-input/issues",
@@ -20,0 +20,0 @@ "license": "MIT",

No alert changes

Improved metrics

Total package byte prevSize

273403

increased by0.5%

Lines of code

1485

increased by0.27%

No dependency changes