jb-number-input
Version:
number input web component
2 lines • 11.9 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("jb-input"),require("jb-core")):"function"==typeof define&&define.amd?define(["exports","jb-input","jb-core"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).JBNumberInput={},e.JBInput,e.JBCore)}(this,(function(e,t,n){"use strict";var r=Object.create,i=Object.defineProperty,a=Object.getOwnPropertyDescriptor,s=Object.getOwnPropertyNames,o=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty,c=(e,t,n)=>(n=null!=e?r(o(e)):{},((e,t,n,r)=>{if(t&&"object"==typeof t||"function"==typeof t)for(var o,c=s(t),l=0,b=c.length;l<b;l++)o=c[l],u.call(e,o)||o===n||i(e,o,{get:(e=>t[e]).bind(null,o),enumerable:!(r=a(t,o))||r.enumerable});return e})(!t&&e&&e.__esModule?n:i(n,"default",{value:e,enumerable:!0}),e));function l(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 b(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}t=c(t),n=c(n);function h(e){if(null==e||null==e||0==e.trim().length)return!1;{let t=!isNaN(Number(e));if(!t){const r=(0,n.faToEnDigits)(e);t=!isNaN(Number(r))}return t}}const p={validator:({value:e})=>0==e.trim().length||h(e),message:"مقدار وارد شده میبایست عدد باشد"};var m,d,f,v,g,w,N,j,k,y,x,P,V,E,T,B,S,M,C,I=class e extends t.JBInputWebComponent{get minValue(){return l(this,d,"f").minValue}set minValue(e){if(null==e)return void(l(this,d,"f").minValue=null);const t=Number(e);Number.isNaN(t)?console.error("min value is not a valid number"):l(this,d,"f").minValue=t}get maxValue(){return l(this,d,"f").maxValue}set maxValue(e){if(null==e)return void(l(this,d,"f").maxValue=null);const t=Number(e);Number.isNaN(t)?console.error("max value is not a valid number"):l(this,d,"f").maxValue=t}get decimalPrecision(){return l(this,d,"f").decimalPrecision}set decimalPrecision(e){if(null==e)return void(l(this,d,"f").decimalPrecision=null);const t=Number(e);Number.isNaN(t)?console.error("decimalPrecision value is not a valid number"):l(this,d,"f").decimalPrecision=t}get acceptNegative(){return l(this,d,"f").acceptNegative}set acceptNegative(e){l(this,d,"f").acceptNegative=Boolean(e)}get step(){return l(this,f,"f")}set step(e){null!=e?Number.isNaN(Number(e))?console.error("step must be a number"):b(this,f,e,"f"):b(this,f,null,"f")}get showThousandSeparator(){return l(this,v,"f")}set showThousandSeparator(e){const t=Boolean(e);t!==l(this,v,"f")&&(b(this,v,t,"f"),this.value=`${this.value}`)}get thousandSeparator(){return l(this,g,"f")}set thousandSeparator(e){l(this,g,"f")!==e&&(b(this,g,String(e),"f"),this.value=`${this.value}`)}get showPersianNumber(){return l(this,w,"f")}set showPersianNumber(e){b(this,w,Boolean(e),"f"),this.value=`${this.value}`}get invalidNumberReplacement(){return l(this,N,"f")}set invalidNumberReplacement(e){b(this,N,String(e),"f")}get showControlButton(){return l(this,j,"f")}set showControlButton(e){e!=l(this,j,"f")&&(b(this,j,e,"f"),!0===e?l(this,m,"m",B).call(this):!1===e&&l(this,m,"m",S).call(this))}constructor(){super(),m.add(this),d.set(this,{maxValue:null,minValue:null,decimalPrecision:null,acceptNegative:!0}),f.set(this,1),v.set(this,!1),g.set(this,","),w.set(this,!1),N.set(this,""),j.set(this,!1),l(this,m,"m",y).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[...t.JBInputWebComponent.observedAttributes,...e.numberInputObservedAttributes]}attributeChangedCallback(t,n,r){[...e.numberInputObservedAttributes,"type"].includes(t)?l(this,m,"m",P).call(this,t,r):this.onAttributeChange(t,r)}increaseNumber(e=!1){const t=Number(this.value);if(isNaN(t))return;const n=l(this,f,"f"),r=l(this,m,"m",T).call(this,t,n);this.value=`${r}`,this.validation.checkValidity({showError:!0}),e&&l(this,m,"m",E).call(this)}decreaseNumber(e=!1){const t=parseFloat(this.value);if(isNaN(t))return;const n=l(this,d,"f")?l(this,f,"f"):1;let r=l(this,m,"m",T).call(this,t,-1*n);!(r<0)||l(this,d,"f")&&l(this,d,"f").acceptNegative||(r=0),this.value=`${r}`,this.validation.checkValidity({showError:!0}),e&&l(this,m,"m",E).call(this)}};d=new WeakMap,f=new WeakMap,v=new WeakMap,g=new WeakMap,w=new WeakMap,N=new WeakMap,j=new WeakMap,m=new WeakSet,k=function(){this.elements.input.addEventListener("beforeinput",l(this,m,"m",C).bind(this)),this.addEventListener("keydown",l(this,m,"m",M).bind(this))},y=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(l(this,m,"m",V).bind(this)),this.elements.input.inputMode="numeric",this.numberInputElements={controlButtons:null},l(this,m,"m",k).call(this),this.addStandardValueCallback(l(this,m,"m",x).bind(this))},x=function(e,t,r,i){return function(e,t,r,i){if("-"==e&&1==t.acceptNegative)return{displayValue:e,value:"-0"};let a=e;r.useThousandSeparator&&(a=a.replace(new RegExp(`${r.thousandSeparator}`,"g"),""));const s="-"==a[0];a=(0,n.faToEnDigits)(a).replace(/[^0-9.]/g,""),s&&t.acceptNegative&&(a="-"+a);let o=Number(a);isNaN(o)&&(a=a.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"),o=parseFloat(a),isNaN(o)&&(a=r.invalidNumberReplacement)),"INPUT"!==i&&0!==a.length&&(t.maxValue&&o>t.maxValue&&(o=t.maxValue,a=`${t.maxValue}`),t.minValue&&o<t.minValue&&(o=t.minValue,a=`${t.minValue}`)),"INPUT"!==i&&a.endsWith(".")&&(a=a.substring(0,a.length-1));const[u,c]=a.split("."),l=c?c.length:0;if(t&&null!==t.decimalPrecision&&null!=t.decimalPrecision&&l&&l>t.decimalPrecision){const e=new RegExp(`^-?\\d+(?:\\.\\d{0,${t.decimalPrecision}})?`),n=a.match(e);n&&n[0]&&(a=n[0])}u.startsWith("0")&&u.length>1&&(a=a.substring(1)),u.startsWith("-")&&"0"==u.charAt(1)&&u.length>2&&(a="-"+a.substring(2)),"INPUT"!==i&&c&&c.endsWith("0")&&(a=a.replace(/(\.\d*?[1-9])0+|\.0+$/,"$1"));const b={displayValue:a,value:a};return r.useThousandSeparator&&(b.displayValue=a.replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g,r.thousandSeparator)),r.showPersianNumber&&(b.displayValue=(0,n.enToFaDigits)(b.displayValue)),b}(e,l(this,d,"f"),{invalidNumberReplacement:l(this,N,"f"),thousandSeparator:l(this,g,"f"),useThousandSeparator:this.showThousandSeparator,showPersianNumber:l(this,w,"f")},i)},P=function(e,t){switch(e){case"thousand-separator":""==t||"true"==t||"false"==t?this.showThousandSeparator=""==t||"true"===t:(b(this,v,!0,"f"),b(this,g,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)}},V=function(){return[p]},E=function(){const e=new Event("change",{cancelable:!1});this.dispatchEvent(e)},T=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},B=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},S=function(){this.numberInputElements.controlButtons&&this.numberInputElements.controlButtons.remove()},M=function(e){const t=e.key;"ArrowUp"==t&&(this.increaseNumber(!1),e.preventDefault()),"ArrowDown"==t&&(this.decreaseNumber(!1),e.preventDefault())},C=function(e){const t=e.target.selectionEnd||0,n=e.target.selectionStart||0;let r=!1;"deleteContentBackward"===e.inputType||h(e.data)||(r=!0,"."!=e.data||0===l(this,d,"f").decimalPrecision||-1!=this.value.indexOf(".")||0==t||0==n||null!==l(this,d,"f").decimalPrecision&&this.value.substring(t).length>l(this,d,"f").decimalPrecision||(r=!1),l(this,d,"f").acceptNegative&&"-"==e.data[0]&&0==n&&(r=!1)),r&&e.preventDefault()};!customElements.get("jb-number-input")&&window.customElements.define("jb-number-input",I),e.JBNumberInputWebComponent=I}));
//# sourceMappingURL=jb-number-input.umd.js.map