@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
2 lines • 11.7 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/forms"),require("rxjs"),require("@angular/common")):"function"==typeof define&&define.amd?define("ng-devui/input-number",["exports","@angular/core","@angular/forms","rxjs","@angular/common"],e):e(((t=t||self)["ng-devui"]=t["ng-devui"]||{},t["ng-devui"]["input-number"]={}),t.ng.core,t.ng.forms,t.rxjs,t.ng.common)}(this,(function(t,e,i,n,s){"use strict";var o={provide:i.NG_VALUE_ACCESSOR,useExisting:e.forwardRef((function(){return r})),multi:!0},r=function(){function t(t,i){this.cdr=t,this.el=i,this.max=100,this.min=0,this.step=1,this.disabled=!1,this.size="",this.autoFocus=!1,this.allowEmpty=!1,this.placeholder="",this.maxLength=0,this.afterValueChanged=new e.EventEmitter,this.whileValueChanging=new e.EventEmitter,this.disabledInc=!1,this.disabledDec=!1,this.onTouchedCallback=function(t){},this.onChangeCallback=function(t){}}return t.prototype.registerOnChange=function(t){this.onChangeCallback=t},t.prototype.registerOnTouched=function(t){this.onTouchedCallback=t},t.prototype.setDisabledState=function(t){this.disabled=t,this.toggleDisabled(t)},t.prototype.writeValue=function(t){this.lastEmittedValue=t,this.setValue(this.ensureValueInRange(t))},t.prototype.valueMustBeValid=function(t){return!isNaN("number"!=typeof t?parseFloat(t):t)},t.prototype.clamp=function(t,e,i){return Math.max(t,Math.min(e,i))},t.prototype.ensureValueInRange=function(t){var e;if(this.allowEmpty&&null==t)e=t;else if(this.valueMustBeValid(t)){var i=t;t||(i=0),e=this.clamp(this.min,i,this.max)}else e=this.min;return e},t.prototype.setValue=function(t){this.value=t,this.valueInput=t,this.disabled||(this.allowEmpty&&null==t?(this.subscribeDecAction(),this.subscribeIncAction()):(this.canDecrease()?this.subscribeDecAction():this.unsubscribeDecAction(),this.canIncrease()?this.subscribeIncAction():this.unsubscribeIncAction()),this.cdr.detectChanges())},t.prototype.ngAfterViewInit=function(){this.registerListeners(),this.subscribeActions(),this.toggleDisabled(this.disabled),this.el.nativeElement.addEventListener("click",this.registerBlurListener.bind(this)),this.autoFocus&&(this.el.nativeElement.click(),this.inputElement.nativeElement.focus())},t.prototype.ngOnChanges=function(t){(t.hasOwnProperty("min")||t.hasOwnProperty("max"))&&this.checkRangeValues(this.min,this.max)},t.prototype.ngOnDestroy=function(){this.unsubscribeActions()},t.prototype.registerListeners=function(){this.incButton&&this.incButton.nativeElement&&(this.incListener=n.fromEvent(this.incButton.nativeElement,"click")),this.decButton&&this.decButton.nativeElement&&(this.decListener=n.fromEvent(this.decButton.nativeElement,"click"))},t.prototype.subscribeActions=function(){this.subscribeIncAction(),this.subscribeDecAction()},t.prototype.subscribeIncAction=function(){this.incListener&&!this.incAction&&(this.incAction=this.incListener.subscribe(this.increaseValue.bind(this)),this.disabledInc=!1)},t.prototype.subscribeDecAction=function(){this.decListener&&!this.decAction&&(this.decAction=this.decListener.subscribe(this.decreaseValue.bind(this)),this.disabledDec=!1)},t.prototype.unsubscribeActions=function(){this.unsubscribeIncAction(),this.unsubscribeDecAction()},t.prototype.unsubscribeIncAction=function(){this.incListener&&this.incAction&&(this.incAction.unsubscribe(),this.incAction=null,this.disabledInc=!0)},t.prototype.unsubscribeDecAction=function(){this.incListener&&this.decAction&&(this.decAction.unsubscribe(),this.decAction=null,this.disabledDec=!0)},t.prototype.increaseValue=function(){if(this.canIncrease())if(!this.allowEmpty||null!==this.value&&void 0!==this.value){var t=this.getMaxDecimals(this.value);this.updateValue(parseFloat((this.value+this.step).toFixed(t)))}else this.updateValue(this.min)},t.prototype.decreaseValue=function(){if(this.canDecrease())if(!this.allowEmpty||null!==this.value&&void 0!==this.value){var t=this.getMaxDecimals(this.value);this.updateValue(parseFloat((this.value-this.step).toFixed(t)))}else this.updateValue(this.min)},t.prototype.canIncrease=function(){return!this.allowEmpty||null!==this.value&&void 0!==this.value?this.value+this.step<=this.max:this.min+this.step<=this.max},t.prototype.canDecrease=function(){return!this.allowEmpty||null!==this.value&&void 0!==this.value?this.value-this.step>=this.min:this.min+this.step<=this.max},t.prototype.toggleDisabled=function(t){t?this.unsubscribeActions():this.subscribeActions()},t.prototype.ensureValueIsValid=function(t){t.stopPropagation();var e=t.target.value,i=parseFloat(e);this.allowEmpty&&""===e?this.updateValue(this.ensureValueInRange(null)):isNaN(i)?this.updateValue(this.ensureValueInRange(this.value)):this.updateValue(this.ensureValueInRange(i))},t.prototype.checkRangeValues=function(t,e){if(e<t)throw new Error("max value must be greater than or equal to min value")},t.prototype.getDecimals=function(t){var e=t.toString(),i=e.indexOf(".")+1;return i>=0?e.length-i:0},t.prototype.getMaxDecimals=function(t){var e=this.getDecimals(this.step),i=this.getDecimals(t);return t?void 0!==this.decimalLimit&&null!==this.decimalLimit?this.decimalLimit:Math.max(i,e):e},t.prototype.protectInput=function(t){var e=t.target.value,i=String.fromCharCode(t.which),n=t.target.selectionStart,s=t.target.selectionEnd;if(e=e.substring(0,n)+i+e.substring(s),this.maxLength&&e.length>this.maxLength)t.preventDefault();else if(!this.reg||e.match(new RegExp(this.reg))){if(!("-"===e||e.match(/^\s*(-|\+)?\d+\.$/)||e.match(/^\s*(-|\+)?\d+\.[0-9]*0$/)||e.match(/^\s*(-|\+)0+$/)))if(e.match(/^\s*(-|\+)?(\d+|(\d*(\.\d*)))$/)){if(t.preventDefault(),void 0!==this.decimalLimit&&null!==this.decimalLimit&&(e=parseFloat(e).toFixed(this.decimalLimit)),e=parseFloat(e),!isNaN(e))return this.valueInput=e,this.notifyWhileValueChanging(e),void setTimeout((function(){t.target.setSelectionRange(n+1,n+1)}),0)}else t.preventDefault()}else t.preventDefault()},t.prototype.notifyValueChange=function(){this.afterValueChanged.emit(this.value),this.onChangeCallback(this.value)},t.prototype.notifyWhileValueChanging=function(t){this.whileValueChanging.emit(t)},t.prototype.updateValue=function(t){this.setValue(t),this.lastEmittedValue!==t&&(this.lastEmittedValue=t,this.notifyValueChange())},t.prototype.handleBackspace=function(t){if("Backspace"===t.key){var e=t.target.value,i=t.target.selectionStart,n=t.target.selectionEnd,s=e.substring(0,i-1)+e.substring(n);(e=""===e?null:this.ensureValueInRange(e))!==(s=""===s?null:this.ensureValueInRange(s))&&"-"!==s&&this.notifyWhileValueChanging(s)}},t.prototype.registerBlurListener=function(){document.addEventListener("click",this.emitBlurEvent.bind(this),{capture:!0,once:!0})},t.prototype.emitBlurEvent=function(t){this.el.nativeElement===t.target||this.el.nativeElement.contains(t.target)||this.el.nativeElement.dispatchEvent(new Event("blur",{bubbles:!1}))},t.decorators=[{type:e.Component,args:[{selector:"d-input-number",template:'<div\r\n class="input-control-buttons"\r\n [ngClass]="{\r\n disabled: disabled,\r\n \'devui-input-number-lg\': size === \'lg\',\r\n \'devui-input-number-sm\': size === \'sm\'\r\n }"\r\n>\r\n <span class="input-control-button input-control-inc" [ngClass]="{ disabled: disabledInc }" #incButton>\r\n <svg class="devui-svg-icon-arrow" width="15px" height="15px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">\r\n <g id="chevron-up" stroke="none" stroke-width="1" fill-rule="evenodd">\r\n <polygon points="11.5 12 8 8.23076923 4.5 12 3 10.3846154 8 5 13 10.3846154"></polygon>\r\n </g>\r\n </svg>\r\n </span>\r\n <span class="input-control-button input-control-dec" [ngClass]="{ disabled: disabledDec }" #decButton>\r\n <svg class="devui-svg-icon-arrow" width="15px" height="15px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">\r\n <g id="chevron-down" stroke="none" stroke-width="1" fill-rule="evenodd">\r\n <polygon points="4.5 5 8 8.76923077 11.5 5 13 6.61538462 8 12 3 6.61538462"></polygon>\r\n </g>\r\n </svg>\r\n </span>\r\n</div>\r\n<div\r\n class="input-container"\r\n [ngClass]="{\r\n \'devui-input-number-lg\': size === \'lg\',\r\n \'devui-input-number-sm\': size === \'sm\'\r\n }"\r\n>\r\n <input\r\n class="input-box"\r\n [(ngModel)]="valueInput"\r\n [ngClass]="{ disabled: disabled }"\r\n [placeholder]="placeholder"\r\n [attr.readonly]="disabled ? \'\' : null"\r\n (keypress)="protectInput($event)"\r\n (blur)="ensureValueIsValid($event)"\r\n (keydown)="handleBackspace($event)"\r\n #inputElement\r\n />\r\n</div>\r\n',providers:[o],styles:[":host{display:inline-block;position:relative;width:80px}:host .disabled{cursor:not-allowed;opacity:.3}:host:hover .input-box:not(.disabled){border:1px solid #344899;padding-right:26px}:host:hover .input-control-buttons:not(.disabled){border-color:#344899;display:-webkit-box;display:flex}:host:focus-within .input-box:not(.disabled){border:1px solid #344899;padding-right:26px}:host:focus-within .input-control-buttons:not(.disabled){border-color:#344899;display:-webkit-box;display:flex}:host .input-box{box-sizing:border-box;padding:5px 10px;font-size:14px;color:#252b3a;vertical-align:middle;border:1px solid #adb0b8;border-radius:2px;outline:0;width:100%;background-color:#fff;line-height:20px;height:32px}:host .input-control-buttons{position:absolute;right:0;width:25px;height:100%;display:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;border:1px solid transparent;border-left-color:#adb0b8;box-sizing:border-box;line-height:100%}:host .input-control-buttons .input-control-button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;height:50%;line-height:50%;border-width:0 1px;cursor:pointer;-webkit-transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out,-webkit-transform .2s ease-in-out;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center}:host .input-control-buttons .input-control-button svg>g{fill:#252b3a}:host .input-control-buttons .input-control-button:not(.disabled):hover>svg>g{fill:#344899}.devui-input-number-lg>.input-box{font-size:18px;line-height:24px;height:46px}.devui-input-number-lg ::ng-deep .devui-svg-icon-arrow{width:16px;height:16px}.devui-input-number-sm>.input-box{font-size:12px;line-height:18px;height:30px}.devui-input-number-sm ::ng-deep .devui-svg-icon-arrow{width:13px;height:13px}.input-container{line-height:100%}"]}]}],t.ctorParameters=function(){return[{type:e.ChangeDetectorRef},{type:e.ElementRef}]},t.propDecorators={max:[{type:e.Input}],min:[{type:e.Input}],step:[{type:e.Input}],disabled:[{type:e.Input}],size:[{type:e.Input}],decimalLimit:[{type:e.Input}],autoFocus:[{type:e.Input}],allowEmpty:[{type:e.Input}],placeholder:[{type:e.Input}],maxLength:[{type:e.Input}],reg:[{type:e.Input}],afterValueChanged:[{type:e.Output}],whileValueChanging:[{type:e.Output}],incButton:[{type:e.ViewChild,args:["incButton",{static:!0}]}],decButton:[{type:e.ViewChild,args:["decButton",{static:!0}]}],inputElement:[{type:e.ViewChild,args:["inputElement",{static:!0}]}]},t}();var a=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{imports:[s.CommonModule,i.FormsModule],exports:[r],declarations:[r],providers:[]}]}],t}();t.InputNumberComponent=r,t.InputNumberModule=a,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=ng-devui-input-number.umd.min.js.map