jb-number-input/dist/jb-number-input.js

number input web component

import{JBInputWebComponent as e}from"jb-input";import{enToFaDigits as t,faToEnDigits as n}from"jb-core";function r(e,t,n,r){if("a"===n&&!r)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!r:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?r:"a"===n?r.call(e):r?r.value:t.get(e)}function i(e,t,n,r,i){if("m"===r)throw new TypeError("Private method is not writable");if("a"===r&&!i)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!i:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===r?i.call(e,n):i?i.value=n:t.set(e,n),n}function a(e){if(null==e||null==e||0==e.trim().length)return!1;{let t=!isNaN(Number(e));if(!t){const r=n(e);t=!isNaN(Number(r))}return t}}const s={validator:({value:e})=>0==e.trim().length||a(e),message:"مقدار وارد شده میبایست عدد باشد"};var o,u,c,l,b,h,m,d,p,v,f,w,g,N,k,j,x,V,P,y=class t extends e{get minValue(){return r(this,u,"f").minValue}set minValue(e){if(null==e)return void(r(this,u,"f").minValue=null);const t=Number(e);Number.isNaN(t)?console.error("min value is not a valid number"):r(this,u,"f").minValue=t}get maxValue(){return r(this,u,"f").maxValue}set maxValue(e){if(null==e)return void(r(this,u,"f").maxValue=null);const t=Number(e);Number.isNaN(t)?console.error("max value is not a valid number"):r(this,u,"f").maxValue=t}get decimalPrecision(){return r(this,u,"f").decimalPrecision}set decimalPrecision(e){if(null==e)return void(r(this,u,"f").decimalPrecision=null);const t=Number(e);Number.isNaN(t)?console.error("decimalPrecision value is not a valid number"):r(this,u,"f").decimalPrecision=t}get acceptNegative(){return r(this,u,"f").acceptNegative}set acceptNegative(e){r(this,u,"f").acceptNegative=Boolean(e)}get step(){return r(this,c,"f")}set step(e){null!=e?Number.isNaN(Number(e))?console.error("step must be a number"):i(this,c,e,"f"):i(this,c,null,"f")}get showThousandSeparator(){return r(this,l,"f")}set showThousandSeparator(e){const t=Boolean(e);t!==r(this,l,"f")&&(i(this,l,t,"f"),this.value=`${this.value}`)}get thousandSeparator(){return r(this,b,"f")}set thousandSeparator(e){r(this,b,"f")!==e&&(i(this,b,String(e),"f"),this.value=`${this.value}`)}get showPersianNumber(){return r(this,h,"f")}set showPersianNumber(e){i(this,h,Boolean(e),"f"),this.value=`${this.value}`}get invalidNumberReplacement(){return r(this,m,"f")}set invalidNumberReplacement(e){i(this,m,String(e),"f")}get showControlButton(){return r(this,d,"f")}set showControlButton(e){e!=r(this,d,"f")&&(i(this,d,e,"f"),!0===e?r(this,o,"m",j).call(this):!1===e&&r(this,o,"m",x).call(this))}constructor(){super(),o.add(this),u.set(this,{maxValue:null,minValue:null,decimalPrecision:null,acceptNegative:!0}),c.set(this,1),l.set(this,!1),b.set(this,","),h.set(this,!1),m.set(this,""),d.set(this,!1),r(this,o,"m",v).call(this)}static get numberInputObservedAttributes(){return["thousand-separator","step","show-persian-number","min","max","decimal-precision","accept-negative","show-control-button"]}static get observedAttributes(){return[...e.observedAttributes,...t.numberInputObservedAttributes]}attributeChangedCallback(e,n,i){[...t.numberInputObservedAttributes,"type"].includes(e)?r(this,o,"m",w).call(this,e,i):this.onAttributeChange(e,i)}increaseNumber(e=!1){const t=Number(this.value);if(isNaN(t))return;const n=r(this,c,"f"),i=r(this,o,"m",k).call(this,t,n);this.value=`${i}`,this.validation.checkValidity({showError:!0}),e&&r(this,o,"m",N).call(this)}decreaseNumber(e=!1){const t=parseFloat(this.value);if(isNaN(t))return;const n=r(this,u,"f")?r(this,c,"f"):1;let i=r(this,o,"m",k).call(this,t,-1*n);!(i<0)||r(this,u,"f")&&r(this,u,"f").acceptNegative||(i=0),this.value=`${i}`,this.validation.checkValidity({showError:!0}),e&&r(this,o,"m",N).call(this)}};u=new WeakMap,c=new WeakMap,l=new WeakMap,b=new WeakMap,h=new WeakMap,m=new WeakMap,d=new WeakMap,o=new WeakSet,p=function(){this.elements.input.addEventListener("beforeinput",r(this,o,"m",P).bind(this)),this.addEventListener("keydown",r(this,o,"m",V).bind(this))},v=function(){const e=document.createElement("template");e.innerHTML="<style>:host{--increase-button-color:var(--jb-number-input-increase-button-color, var(--jb-neutral-7));--increase-button-color-hover:var(--jb-number-input-increase-button-color-hover, oklch(from var(--jb-green) calc(l + 0.07) calc(c + 0.07) h));--decrease-button-color:var(--jb-number-input-decrease-button-color, var(--jb-neutral-7));--decrease-button-color-hover:var(--jb-number-input-decrease-button-color-hover, oklch(from var(--jb-red) calc(l + 0.07) calc(c + 0.07) h)) }.jb-input-web-component{--jb-input-input-direction: var(--jb-number-input-input-direction, ltr)}.jb-input-web-component .number-control-wrapper .number-control-buttons{display:flex;height:100%;cursor:pointer}.jb-input-web-component .number-control-wrapper .number-control-buttons .number-control-button{width:var(--jb-number-input-button-width, 36px);height:100%;text-align:center}.jb-input-web-component .number-control-wrapper .number-control-buttons .increase-number-button{background:var(--jb-number-input-increase-button-bg, transparent);border:var(--jb-number-input-increase-button-border, none);border-radius:var(--jb-number-input-increase-button-border-radius, 0);box-sizing:border-box}.jb-input-web-component .number-control-wrapper .number-control-buttons .increase-number-button .increase-icon{stroke:var(--increase-button-color);stroke-width:14px;height:100%;width:100%;display:block}.jb-input-web-component .number-control-wrapper .number-control-buttons .increase-number-button:hover .increase-icon{stroke:var(--increase-button-color-hover)}.jb-input-web-component .number-control-wrapper .number-control-buttons .decrease-number-button{border:var(--jb-number-input-decrease-button-border, none);border-radius:var(--jb-number-input-decrease-button-border-radius, 0);background:var(--jb-number-input-decrease-button-bg, transparent);box-sizing:border-box}.jb-input-web-component .number-control-wrapper .number-control-buttons .decrease-number-button .decrease-icon{stroke:var(--decrease-button-color);stroke-width:14px;height:100%;width:100%;display:block}.jb-input-web-component .number-control-wrapper .number-control-buttons .decrease-number-button:hover .decrease-icon{stroke:var(--decrease-button-color-hover)}</style>",this.shadowRoot.appendChild(e.content.cloneNode(!0)),this.validation.addValidationListGetter(r(this,o,"m",g).bind(this)),this.elements.input.inputMode="numeric",this.numberInputElements={controlButtons:null},r(this,o,"m",p).call(this),this.addStandardValueCallback(r(this,o,"m",f).bind(this))},f=function(e,i,a,s){return function(e,r,i,a){if("-"==e&&1==r.acceptNegative)return{displayValue:e,value:"-0"};let s=e;i.useThousandSeparator&&(s=s.replace(new RegExp(`${i.thousandSeparator}`,"g"),""));const o="-"==s[0];s=n(s).replace(/[^0-9.]/g,""),o&&r.acceptNegative&&(s="-"+s);let u=Number(s);isNaN(u)&&(s=s.replace(/\u06F0/g,"0").replace(/\u06F1/g,"1").replace(/\u06F2/g,"2").replace(/\u06F3/g,"3").replace(/\u06F4/g,"4").replace(/\u06F5/g,"5").replace(/\u06F6/g,"6").replace(/\u06F7/g,"7").replace(/\u06F8/g,"8").replace(/\u06F9/g,"9"),u=parseFloat(s),isNaN(u)&&(s=i.invalidNumberReplacement)),"INPUT"!==a&&0!==s.length&&(r.maxValue&&u>r.maxValue&&(u=r.maxValue,s=`${r.maxValue}`),r.minValue&&u<r.minValue&&(u=r.minValue,s=`${r.minValue}`)),"INPUT"!==a&&s.endsWith(".")&&(s=s.substring(0,s.length-1));const[c,l]=s.split("."),b=l?l.length:0;if(r&&null!==r.decimalPrecision&&null!=r.decimalPrecision&&b&&b>r.decimalPrecision){const e=new RegExp(`^-?\\d+(?:\\.\\d{0,${r.decimalPrecision}})?`),t=s.match(e);t&&t[0]&&(s=t[0])}c.startsWith("0")&&c.length>1&&(s=s.substring(1)),c.startsWith("-")&&"0"==c.charAt(1)&&c.length>2&&(s="-"+s.substring(2)),"INPUT"!==a&&l&&l.endsWith("0")&&(s=s.replace(/(\.\d*?[1-9])0+|\.0+$/,"$1"));const h={displayValue:s,value:s};return i.useThousandSeparator&&(h.displayValue=s.replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g,i.thousandSeparator)),i.showPersianNumber&&(h.displayValue=t(h.displayValue)),h}(e,r(this,u,"f"),{invalidNumberReplacement:r(this,m,"f"),thousandSeparator:r(this,b,"f"),useThousandSeparator:this.showThousandSeparator,showPersianNumber:r(this,h,"f")},s)},w=function(e,t){switch(e){case"thousand-separator":""==t||"true"==t||"false"==t?this.showThousandSeparator=""==t||"true"===t:(i(this,l,!0,"f"),i(this,b,t,"f"));break;case"step":this.step=Number(t);break;case"show-persian-number":this.showPersianNumber=""==t||"true"===t;break;case"min":this.minValue=t;break;case"max":this.maxValue=t;break;case"decimal-precision":this.decimalPrecision=t;break;case"accept-negative":""!=t&&"true"!=t&&"false"!=t||(this.acceptNegative=""==t||"true"===t);break;case"show-control-button":""!=t&&"true"!=t&&"false"!=t||(this.showControlButton=""==t||"true"===t)}},g=function(){return[s]},N=function(){const e=new Event("change",{cancelable:!1});this.dispatchEvent(e)},k=function(e,t){const n=`${e}`.split(".")[1],r=`${t}`.split(".")[1],i=n?Math.pow(10,n.length+1):1,a=r?Math.pow(10,r.length+1):1,s=Math.max(i,a);return(e*s+t*s)/s},j=function(){const e=document.createElement("div");e.classList.add("number-control-wrapper"),e.innerHTML='<div class="number-control-buttons">\r\n    <div class="increase-number-button number-control-button">\r\n        <svg class="increase-icon" viewBox="0 0 120 120">\r\n            <path stroke-linecap="round" d="M60,40 L60,80"></path>\r\n            <path stroke-linecap="round" d="M40,60 L80,60"></path>\r\n        </svg>\r\n    </div>\r\n    <div class="decrease-number-button number-control-button">\r\n        <svg class="decrease-icon" viewBox="0 0 120 120">\r\n            <path stroke-linecap="round" d="M40,60 L80,60"></path>\r\n        </svg>\r\n    </div>\r\n</div>',e.querySelector(".increase-number-button").addEventListener("click",this.increaseNumber.bind(this,!0)),e.querySelector(".decrease-number-button").addEventListener("click",this.decreaseNumber.bind(this,!0)),this.elements.slots.endSection.appendChild(e),this.numberInputElements.controlButtons=e},x=function(){this.numberInputElements.controlButtons&&this.numberInputElements.controlButtons.remove()},V=function(e){const t=e.key;"ArrowUp"==t&&(this.increaseNumber(!1),e.preventDefault()),"ArrowDown"==t&&(this.decreaseNumber(!1),e.preventDefault())},P=function(e){const t=e.target.selectionEnd||0,n=e.target.selectionStart||0;let i=!1;"deleteContentBackward"===e.inputType||a(e.data)||(i=!0,"."!=e.data||0===r(this,u,"f").decimalPrecision||-1!=this.value.indexOf(".")||0==t||0==n||null!==r(this,u,"f").decimalPrecision&&this.value.substring(t).length>r(this,u,"f").decimalPrecision||(i=!1),r(this,u,"f").acceptNegative&&"-"==e.data[0]&&0==n&&(i=!1)),i&&e.preventDefault()};!customElements.get("jb-number-input")&&window.customElements.define("jb-number-input",y);export{y as JBNumberInputWebComponent};
//# sourceMappingURL=jb-number-input.js.map