UNPKG

ng-zorro-antd

Version:

An enterprise-class UI components based on Ant Design and Angular

768 lines (762 loc) 23.9 kB
import { __decorate, __metadata } from 'tslib'; import { FocusMonitor } from '@angular/cdk/a11y'; import { UP_ARROW, DOWN_ARROW, ENTER } from '@angular/cdk/keycodes'; import { EventEmitter, Component, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, ChangeDetectorRef, Output, ViewChild, Input, NgModule } from '@angular/core'; import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms'; import { isNotNil, InputBoolean } from 'ng-zorro-antd/core/util'; import { CommonModule } from '@angular/common'; import { NzIconModule } from 'ng-zorro-antd/icon'; /** * @fileoverview added by tsickle * Generated from: input-number.component.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var NzInputNumberComponent = /** @class */ (function () { function NzInputNumberComponent(elementRef, cdr, focusMonitor) { this.elementRef = elementRef; this.cdr = cdr; this.focusMonitor = focusMonitor; this.isFocused = false; this.disabledUp = false; this.disabledDown = false; this.onChange = (/** * @return {?} */ function () { }); this.onTouched = (/** * @return {?} */ function () { }); this.nzBlur = new EventEmitter(); this.nzFocus = new EventEmitter(); this.nzSize = 'default'; this.nzMin = -Infinity; this.nzMax = Infinity; this.nzParser = (/** * @param {?} value * @return {?} */ function (value) { return value .trim() .replace(/。/g, '.') .replace(/[^\w\.-]+/g, ''); }); this.nzPrecisionMode = 'toFixed'; this.nzPlaceHolder = ''; this.nzStep = 1; this.nzId = null; this.nzDisabled = false; this.nzAutoFocus = false; this.nzFormatter = (/** * @param {?} value * @return {?} */ function (value) { return value; }); } /** * @param {?} value * @return {?} */ NzInputNumberComponent.prototype.onModelChange = /** * @param {?} value * @return {?} */ function (value) { this.parsedValue = this.nzParser(value); this.inputElement.nativeElement.value = "" + this.parsedValue; /** @type {?} */ var validValue = this.getCurrentValidValue(this.parsedValue); this.setValue(validValue); }; /** * @param {?} value * @return {?} */ NzInputNumberComponent.prototype.getCurrentValidValue = /** * @param {?} value * @return {?} */ function (value) { /** @type {?} */ var val = value; if (val === '') { val = ''; } else if (!this.isNotCompleteNumber(val)) { val = "" + this.getValidValue(val); } else { val = this.value; } return this.toNumber(val); }; // '1.' '1x' 'xx' '' => are not complete numbers // '1.' '1x' 'xx' '' => are not complete numbers /** * @param {?} num * @return {?} */ NzInputNumberComponent.prototype.isNotCompleteNumber = // '1.' '1x' 'xx' '' => are not complete numbers /** * @param {?} num * @return {?} */ function (num) { return isNaN((/** @type {?} */ (num))) || num === '' || num === null || !!(num && num.toString().indexOf('.') === num.toString().length - 1); }; /** * @param {?=} value * @return {?} */ NzInputNumberComponent.prototype.getValidValue = /** * @param {?=} value * @return {?} */ function (value) { /** @type {?} */ var val = parseFloat((/** @type {?} */ (value))); // https://github.com/ant-design/ant-design/issues/7358 if (isNaN(val)) { return value; } if (val < this.nzMin) { val = this.nzMin; } if (val > this.nzMax) { val = this.nzMax; } return val; }; /** * @param {?} num * @return {?} */ NzInputNumberComponent.prototype.toNumber = /** * @param {?} num * @return {?} */ function (num) { if (this.isNotCompleteNumber(num)) { return (/** @type {?} */ (num)); } /** @type {?} */ var numStr = String(num); if (numStr.indexOf('.') >= 0 && isNotNil(this.nzPrecision)) { if (typeof this.nzPrecisionMode === 'function') { return this.nzPrecisionMode(num, this.nzPrecision); } else if (this.nzPrecisionMode === 'cut') { /** @type {?} */ var numSplit = numStr.split('.'); numSplit[1] = numSplit[1].slice(0, this.nzPrecision); return Number(numSplit.join('.')); } return Number(Number(num).toFixed(this.nzPrecision)); } return Number(num); }; /** * @param {?} e * @return {?} */ NzInputNumberComponent.prototype.getRatio = /** * @param {?} e * @return {?} */ function (e) { /** @type {?} */ var ratio = 1; if (e.metaKey || e.ctrlKey) { ratio = 0.1; } else if (e.shiftKey) { ratio = 10; } return ratio; }; /** * @param {?} e * @param {?=} ratio * @return {?} */ NzInputNumberComponent.prototype.down = /** * @param {?} e * @param {?=} ratio * @return {?} */ function (e, ratio) { if (!this.isFocused) { this.focus(); } this.step('down', e, ratio); }; /** * @param {?} e * @param {?=} ratio * @return {?} */ NzInputNumberComponent.prototype.up = /** * @param {?} e * @param {?=} ratio * @return {?} */ function (e, ratio) { if (!this.isFocused) { this.focus(); } this.step('up', e, ratio); }; /** * @param {?} value * @return {?} */ NzInputNumberComponent.prototype.getPrecision = /** * @param {?} value * @return {?} */ function (value) { /** @type {?} */ var valueString = value.toString(); if (valueString.indexOf('e-') >= 0) { return parseInt(valueString.slice(valueString.indexOf('e-') + 2), 10); } /** @type {?} */ var precision = 0; if (valueString.indexOf('.') >= 0) { precision = valueString.length - valueString.indexOf('.') - 1; } return precision; }; // step={1.0} value={1.51} // press + // then value should be 2.51, rather than 2.5 // if this.props.precision is undefined // https://github.com/react-component/input-number/issues/39 // step={1.0} value={1.51} // press + // then value should be 2.51, rather than 2.5 // if this.props.precision is undefined // https://github.com/react-component/input-number/issues/39 /** * @param {?} currentValue * @param {?} ratio * @return {?} */ NzInputNumberComponent.prototype.getMaxPrecision = // step={1.0} value={1.51} // press + // then value should be 2.51, rather than 2.5 // if this.props.precision is undefined // https://github.com/react-component/input-number/issues/39 /** * @param {?} currentValue * @param {?} ratio * @return {?} */ function (currentValue, ratio) { if (isNotNil(this.nzPrecision)) { return this.nzPrecision; } /** @type {?} */ var ratioPrecision = this.getPrecision(ratio); /** @type {?} */ var stepPrecision = this.getPrecision(this.nzStep); /** @type {?} */ var currentValuePrecision = this.getPrecision((/** @type {?} */ (currentValue))); if (!currentValue) { return ratioPrecision + stepPrecision; } return Math.max(currentValuePrecision, ratioPrecision + stepPrecision); }; /** * @param {?} currentValue * @param {?} ratio * @return {?} */ NzInputNumberComponent.prototype.getPrecisionFactor = /** * @param {?} currentValue * @param {?} ratio * @return {?} */ function (currentValue, ratio) { /** @type {?} */ var precision = this.getMaxPrecision(currentValue, ratio); return Math.pow(10, precision); }; /** * @param {?} val * @param {?} rat * @return {?} */ NzInputNumberComponent.prototype.upStep = /** * @param {?} val * @param {?} rat * @return {?} */ function (val, rat) { /** @type {?} */ var precisionFactor = this.getPrecisionFactor(val, rat); /** @type {?} */ var precision = Math.abs(this.getMaxPrecision(val, rat)); /** @type {?} */ var result; if (typeof val === 'number') { result = ((precisionFactor * val + precisionFactor * this.nzStep * rat) / precisionFactor).toFixed(precision); } else { result = this.nzMin === -Infinity ? this.nzStep : this.nzMin; } return this.toNumber(result); }; /** * @param {?} val * @param {?} rat * @return {?} */ NzInputNumberComponent.prototype.downStep = /** * @param {?} val * @param {?} rat * @return {?} */ function (val, rat) { /** @type {?} */ var precisionFactor = this.getPrecisionFactor(val, rat); /** @type {?} */ var precision = Math.abs(this.getMaxPrecision(val, rat)); /** @type {?} */ var result; if (typeof val === 'number') { result = ((precisionFactor * val - precisionFactor * this.nzStep * rat) / precisionFactor).toFixed(precision); } else { result = this.nzMin === -Infinity ? -this.nzStep : this.nzMin; } return this.toNumber(result); }; /** * @template T * @param {?} type * @param {?} e * @param {?=} ratio * @return {?} */ NzInputNumberComponent.prototype.step = /** * @template T * @param {?} type * @param {?} e * @param {?=} ratio * @return {?} */ function (type, e, ratio) { var _this = this; if (ratio === void 0) { ratio = 1; } this.stop(); e.preventDefault(); if (this.nzDisabled) { return; } /** @type {?} */ var value = this.getCurrentValidValue(this.parsedValue) || 0; /** @type {?} */ var val = 0; if (type === 'up') { val = this.upStep(value, ratio); } else if (type === 'down') { val = this.downStep(value, ratio); } /** @type {?} */ var outOfRange = val > this.nzMax || val < this.nzMin; if (val > this.nzMax) { val = this.nzMax; } else if (val < this.nzMin) { val = this.nzMin; } this.setValue(val); this.updateDisplayValue(val); this.isFocused = true; if (outOfRange) { return; } this.autoStepTimer = setTimeout((/** * @return {?} */ function () { ((/** @type {?} */ (_this[type])))(e, ratio); }), 300); }; /** * @return {?} */ NzInputNumberComponent.prototype.stop = /** * @return {?} */ function () { if (this.autoStepTimer) { clearTimeout(this.autoStepTimer); } }; /** * @param {?} value * @return {?} */ NzInputNumberComponent.prototype.setValue = /** * @param {?} value * @return {?} */ function (value) { if ("" + this.value !== "" + value) { this.onChange(value); } this.value = value; this.parsedValue = value; this.disabledUp = this.disabledDown = false; if (value || value === 0) { /** @type {?} */ var val = Number(value); if (val >= this.nzMax) { this.disabledUp = true; } if (val <= this.nzMin) { this.disabledDown = true; } } }; /** * @param {?} value * @return {?} */ NzInputNumberComponent.prototype.updateDisplayValue = /** * @param {?} value * @return {?} */ function (value) { /** @type {?} */ var displayValue = isNotNil(this.nzFormatter(value)) ? this.nzFormatter(value) : ''; this.displayValue = displayValue; this.inputElement.nativeElement.value = "" + displayValue; }; /** * @param {?} e * @return {?} */ NzInputNumberComponent.prototype.onKeyDown = /** * @param {?} e * @return {?} */ function (e) { if (e.keyCode === UP_ARROW) { /** @type {?} */ var ratio = this.getRatio(e); this.up(e, ratio); this.stop(); } else if (e.keyCode === DOWN_ARROW) { /** @type {?} */ var ratio = this.getRatio(e); this.down(e, ratio); this.stop(); } else if (e.keyCode === ENTER) { this.updateDisplayValue(this.value); } }; /** * @param {?} value * @return {?} */ NzInputNumberComponent.prototype.writeValue = /** * @param {?} value * @return {?} */ function (value) { this.value = value; this.setValue(value); this.updateDisplayValue(value); this.cdr.markForCheck(); }; /** * @param {?} fn * @return {?} */ NzInputNumberComponent.prototype.registerOnChange = /** * @param {?} fn * @return {?} */ function (fn) { this.onChange = fn; }; /** * @param {?} fn * @return {?} */ NzInputNumberComponent.prototype.registerOnTouched = /** * @param {?} fn * @return {?} */ function (fn) { this.onTouched = fn; }; /** * @param {?} disabled * @return {?} */ NzInputNumberComponent.prototype.setDisabledState = /** * @param {?} disabled * @return {?} */ function (disabled) { this.nzDisabled = disabled; this.cdr.markForCheck(); }; /** * @return {?} */ NzInputNumberComponent.prototype.focus = /** * @return {?} */ function () { this.focusMonitor.focusVia(this.inputElement, 'keyboard'); }; /** * @return {?} */ NzInputNumberComponent.prototype.blur = /** * @return {?} */ function () { this.inputElement.nativeElement.blur(); }; /** * @return {?} */ NzInputNumberComponent.prototype.ngOnInit = /** * @return {?} */ function () { var _this = this; this.focusMonitor.monitor(this.elementRef, true).subscribe((/** * @param {?} focusOrigin * @return {?} */ function (focusOrigin) { if (!focusOrigin) { _this.isFocused = false; _this.updateDisplayValue(_this.value); _this.nzBlur.emit(); Promise.resolve().then((/** * @return {?} */ function () { return _this.onTouched(); })); } else { _this.isFocused = true; _this.nzFocus.emit(); } })); }; /** * @param {?} changes * @return {?} */ NzInputNumberComponent.prototype.ngOnChanges = /** * @param {?} changes * @return {?} */ function (changes) { if (changes.nzFormatter && !changes.nzFormatter.isFirstChange()) { /** @type {?} */ var validValue = this.getCurrentValidValue(this.parsedValue); this.setValue(validValue); this.updateDisplayValue(validValue); } }; /** * @return {?} */ NzInputNumberComponent.prototype.ngAfterViewInit = /** * @return {?} */ function () { if (this.nzAutoFocus) { this.focus(); } }; /** * @return {?} */ NzInputNumberComponent.prototype.ngOnDestroy = /** * @return {?} */ function () { this.focusMonitor.stopMonitoring(this.elementRef); }; NzInputNumberComponent.decorators = [ { type: Component, args: [{ selector: 'nz-input-number', exportAs: 'nzInputNumber', template: "\n <div class=\"ant-input-number-handler-wrap\">\n <span\n unselectable=\"unselectable\"\n class=\"ant-input-number-handler ant-input-number-handler-up\"\n (mousedown)=\"up($event)\"\n (mouseup)=\"stop()\"\n (mouseleave)=\"stop()\"\n [class.ant-input-number-handler-up-disabled]=\"disabledUp\"\n >\n <i nz-icon nzType=\"up\" class=\"ant-input-number-handler-up-inner\"></i>\n </span>\n <span\n unselectable=\"unselectable\"\n class=\"ant-input-number-handler ant-input-number-handler-down\"\n (mousedown)=\"down($event)\"\n (mouseup)=\"stop()\"\n (mouseleave)=\"stop()\"\n [class.ant-input-number-handler-down-disabled]=\"disabledDown\"\n >\n <i nz-icon nzType=\"down\" class=\"ant-input-number-handler-down-inner\"></i>\n </span>\n </div>\n <div class=\"ant-input-number-input-wrap\">\n <input\n #inputElement\n autocomplete=\"off\"\n class=\"ant-input-number-input\"\n [attr.id]=\"nzId\"\n [attr.autofocus]=\"nzAutoFocus ? 'autofocus' : null\"\n [disabled]=\"nzDisabled\"\n [attr.min]=\"nzMin\"\n [attr.max]=\"nzMax\"\n [placeholder]=\"nzPlaceHolder\"\n [attr.step]=\"nzStep\"\n (keydown)=\"onKeyDown($event)\"\n (keyup)=\"stop()\"\n [ngModel]=\"displayValue\"\n (ngModelChange)=\"onModelChange($event)\"\n />\n </div>\n ", providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef((/** * @return {?} */ function () { return NzInputNumberComponent; })), multi: true } ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { '[class.ant-input-number]': 'true', '[class.ant-input-number-focused]': 'isFocused', '[class.ant-input-number-lg]': "nzSize === 'large'", '[class.ant-input-number-sm]': "nzSize === 'small'", '[class.ant-input-number-disabled]': 'nzDisabled' } }] } ]; /** @nocollapse */ NzInputNumberComponent.ctorParameters = function () { return [ { type: ElementRef }, { type: ChangeDetectorRef }, { type: FocusMonitor } ]; }; NzInputNumberComponent.propDecorators = { nzBlur: [{ type: Output }], nzFocus: [{ type: Output }], inputElement: [{ type: ViewChild, args: ['inputElement', { static: true },] }], nzSize: [{ type: Input }], nzMin: [{ type: Input }], nzMax: [{ type: Input }], nzParser: [{ type: Input }], nzPrecision: [{ type: Input }], nzPrecisionMode: [{ type: Input }], nzPlaceHolder: [{ type: Input }], nzStep: [{ type: Input }], nzId: [{ type: Input }], nzDisabled: [{ type: Input }], nzAutoFocus: [{ type: Input }], nzFormatter: [{ type: Input }] }; __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzInputNumberComponent.prototype, "nzDisabled", void 0); __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzInputNumberComponent.prototype, "nzAutoFocus", void 0); return NzInputNumberComponent; }()); if (false) { /** @type {?} */ NzInputNumberComponent.ngAcceptInputType_nzDisabled; /** @type {?} */ NzInputNumberComponent.ngAcceptInputType_nzAutoFocus; /** * @type {?} * @private */ NzInputNumberComponent.prototype.autoStepTimer; /** * @type {?} * @private */ NzInputNumberComponent.prototype.parsedValue; /** * @type {?} * @private */ NzInputNumberComponent.prototype.value; /** @type {?} */ NzInputNumberComponent.prototype.displayValue; /** @type {?} */ NzInputNumberComponent.prototype.isFocused; /** @type {?} */ NzInputNumberComponent.prototype.disabledUp; /** @type {?} */ NzInputNumberComponent.prototype.disabledDown; /** @type {?} */ NzInputNumberComponent.prototype.onChange; /** @type {?} */ NzInputNumberComponent.prototype.onTouched; /** @type {?} */ NzInputNumberComponent.prototype.nzBlur; /** @type {?} */ NzInputNumberComponent.prototype.nzFocus; /** @type {?} */ NzInputNumberComponent.prototype.inputElement; /** @type {?} */ NzInputNumberComponent.prototype.nzSize; /** @type {?} */ NzInputNumberComponent.prototype.nzMin; /** @type {?} */ NzInputNumberComponent.prototype.nzMax; /** @type {?} */ NzInputNumberComponent.prototype.nzParser; /** @type {?} */ NzInputNumberComponent.prototype.nzPrecision; /** @type {?} */ NzInputNumberComponent.prototype.nzPrecisionMode; /** @type {?} */ NzInputNumberComponent.prototype.nzPlaceHolder; /** @type {?} */ NzInputNumberComponent.prototype.nzStep; /** @type {?} */ NzInputNumberComponent.prototype.nzId; /** @type {?} */ NzInputNumberComponent.prototype.nzDisabled; /** @type {?} */ NzInputNumberComponent.prototype.nzAutoFocus; /** @type {?} */ NzInputNumberComponent.prototype.nzFormatter; /** * @type {?} * @private */ NzInputNumberComponent.prototype.elementRef; /** * @type {?} * @private */ NzInputNumberComponent.prototype.cdr; /** * @type {?} * @private */ NzInputNumberComponent.prototype.focusMonitor; } /** * @fileoverview added by tsickle * Generated from: input-number.module.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var NzInputNumberModule = /** @class */ (function () { function NzInputNumberModule() { } NzInputNumberModule.decorators = [ { type: NgModule, args: [{ imports: [CommonModule, FormsModule, NzIconModule], declarations: [NzInputNumberComponent], exports: [NzInputNumberComponent] },] } ]; return NzInputNumberModule; }()); /** * @fileoverview added by tsickle * Generated from: public-api.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * @fileoverview added by tsickle * Generated from: ng-zorro-antd-input-number.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ export { NzInputNumberComponent, NzInputNumberModule }; //# sourceMappingURL=ng-zorro-antd-input-number.js.map