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