ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
742 lines (731 loc) • 27.9 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/cdk/a11y'), require('@angular/cdk/keycodes'), require('ng-zorro-antd/core'), require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('ng-zorro-antd/icon')) :
typeof define === 'function' && define.amd ? define('ng-zorro-antd/input-number', ['exports', '@angular/cdk/a11y', '@angular/cdk/keycodes', 'ng-zorro-antd/core', '@angular/common', '@angular/core', '@angular/forms', 'ng-zorro-antd/icon'], factory) :
(factory((global['ng-zorro-antd'] = global['ng-zorro-antd'] || {}, global['ng-zorro-antd']['input-number'] = {}),global.ng.cdk.a11y,global.ng.cdk.keycodes,global['ng-zorro-antd'].core,global.ng.common,global.ng.core,global.ng.forms,global['ng-zorro-antd'].icon));
}(this, (function (exports,a11y,keycodes,core,common,core$1,forms,icon) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
r = Reflect.decorate(decorators, target, key, desc);
else
for (var i = decorators.length - 1; i >= 0; i--)
if (d = decorators[i])
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
function __metadata(metadataKey, metadataValue) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
return Reflect.metadata(metadataKey, metadataValue);
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NzInputNumberComponent = /** @class */ (function () {
function NzInputNumberComponent(elementRef, renderer, cdr, focusMonitor) {
this.elementRef = elementRef;
this.renderer = renderer;
this.cdr = cdr;
this.focusMonitor = focusMonitor;
this.isFocused = false;
this.disabledUp = false;
this.disabledDown = false;
this.onChange = ( /**
* @return {?}
*/function () { return null; });
this.onTouched = ( /**
* @return {?}
*/function () { return null; });
this.nzBlur = new core$1.EventEmitter();
this.nzFocus = new core$1.EventEmitter();
this.nzSize = 'default';
this.nzMin = -Infinity;
this.nzMax = Infinity;
this.nzParser = ( /**
* @param {?} value
* @return {?}
*/function (value) { return value; }); // tslint:disable-line:no-any
this.nzPlaceHolder = '';
this.nzStep = 1;
this.nzDisabled = false;
this.nzAutoFocus = false;
this.nzFormatter = ( /**
* @param {?} value
* @return {?}
*/function (value) { return value; });
renderer.addClass(elementRef.nativeElement, 'ant-input-number');
}
// tslint:disable-line:no-any
/**
* @return {?}
*/
NzInputNumberComponent.prototype.updateAutoFocus =
// tslint:disable-line:no-any
/**
* @return {?}
*/
function () {
if (this.nzAutoFocus) {
this.renderer.setAttribute(this.inputElement.nativeElement, 'autofocus', 'autofocus');
}
else {
this.renderer.removeAttribute(this.inputElement.nativeElement, 'autofocus');
}
};
/**
* @param {?} value
* @return {?}
*/
NzInputNumberComponent.prototype.onModelChange = /**
* @param {?} value
* @return {?}
*/
function (value) {
this.actualValue = this.nzParser(value
.trim()
.replace(/。/g, '.')
.replace(/[^\w\.-]+/g, ''));
this.inputElement.nativeElement.value = this.actualValue;
};
/**
* @param {?} value
* @return {?}
*/
NzInputNumberComponent.prototype.getCurrentValidValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var val = value;
if (val === '') {
val = '';
}
else if (!this.isNotCompleteNumber(val)) {
val = ( /** @type {?} */(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));
}
if (core.isNotNil(this.nzPrecision)) {
return Number(Number(num).toFixed(this.nzPrecision));
}
return Number(num);
};
/**
* @return {?}
*/
NzInputNumberComponent.prototype.setValidateValue = /**
* @return {?}
*/
function () {
/** @type {?} */
var value = this.getCurrentValidValue(this.actualValue);
this.setValue(value, "" + this.value !== "" + value);
};
/**
* @return {?}
*/
NzInputNumberComponent.prototype.onBlur = /**
* @return {?}
*/
function () {
this.isFocused = false;
this.setValidateValue();
};
/**
* @return {?}
*/
NzInputNumberComponent.prototype.onFocus = /**
* @return {?}
*/
function () {
this.isFocused = true;
};
/**
* @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 (core.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);
};
/**
* @param {?} type
* @param {?} e
* @param {?=} ratio
* @return {?}
*/
NzInputNumberComponent.prototype.step = /**
* @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.actualValue) || 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, true);
this.isFocused = true;
if (outOfRange) {
return;
}
this.autoStepTimer = setTimeout(( /**
* @return {?}
*/function () {
_this[type](e, ratio, true);
}), 600);
};
/**
* @return {?}
*/
NzInputNumberComponent.prototype.stop = /**
* @return {?}
*/
function () {
if (this.autoStepTimer) {
clearTimeout(this.autoStepTimer);
}
};
/**
* @param {?} value
* @param {?} emit
* @return {?}
*/
NzInputNumberComponent.prototype.setValue = /**
* @param {?} value
* @param {?} emit
* @return {?}
*/
function (value, emit) {
if (emit && "" + this.value !== "" + value) {
this.onChange(value);
}
this.value = value;
this.actualValue = value;
/** @type {?} */
var displayValue = core.isNotNil(this.nzFormatter(this.value)) ? this.nzFormatter(this.value) : '';
this.displayValue = displayValue;
this.inputElement.nativeElement.value = displayValue;
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 {?} e
* @return {?}
*/
NzInputNumberComponent.prototype.onKeyDown = /**
* @param {?} e
* @return {?}
*/
function (e) {
if (e.code === 'ArrowUp' || e.keyCode === keycodes.UP_ARROW) {
/** @type {?} */
var ratio = this.getRatio(e);
this.up(e, ratio);
this.stop();
}
else if (e.code === 'ArrowDown' || e.keyCode === keycodes.DOWN_ARROW) {
/** @type {?} */
var ratio = this.getRatio(e);
this.down(e, ratio);
this.stop();
}
else if (e.keyCode === keycodes.ENTER) {
this.setValidateValue();
}
};
/**
* @return {?}
*/
NzInputNumberComponent.prototype.onKeyUp = /**
* @return {?}
*/
function () {
this.stop();
};
/**
* @param {?} value
* @return {?}
*/
NzInputNumberComponent.prototype.writeValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
this.setValue(value, false);
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 {?} isDisabled
* @return {?}
*/
NzInputNumberComponent.prototype.setDisabledState = /**
* @param {?} isDisabled
* @return {?}
*/
function (isDisabled) {
this.nzDisabled = isDisabled;
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.onBlur();
_this.nzBlur.emit();
Promise.resolve().then(( /**
* @return {?}
*/function () { return _this.onTouched(); }));
}
else {
_this.onFocus();
_this.nzFocus.emit();
}
}));
};
/**
* @param {?} changes
* @return {?}
*/
NzInputNumberComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
if (changes.nzAutoFocus) {
this.updateAutoFocus();
}
if (changes.nzFormatter) {
/** @type {?} */
var value = this.getCurrentValidValue(this.actualValue);
this.setValue(value, true);
}
};
/**
* @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: core$1.Component, args: [{
selector: 'nz-input-number',
exportAs: 'nzInputNumber',
template: "<div class=\"ant-input-number-handler-wrap\">\n <span 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 <i nz-icon type=\"up\" class=\"ant-input-number-handler-up-inner\"></i>\n </span>\n <span 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 <i nz-icon type=\"down\" class=\"ant-input-number-handler-down-inner\"></i>\n </span>\n</div>\n<div class=\"ant-input-number-input-wrap\">\n <input #inputElement\n autocomplete=\"off\"\n class=\"ant-input-number-input\"\n [disabled]=\"nzDisabled\"\n [attr.min]=\"nzMin\"\n [attr.max]=\"nzMax\"\n [placeholder]=\"nzPlaceHolder\"\n [attr.step]=\"nzStep\"\n (keydown)=\"onKeyDown($event)\"\n (keyup)=\"onKeyUp()\"\n [ngModel]=\"displayValue\"\n (ngModelChange)=\"onModelChange($event)\">\n</div>",
providers: [
{
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core$1.forwardRef(( /**
* @return {?}
*/function () { return NzInputNumberComponent; })),
multi: true
}
],
changeDetection: core$1.ChangeDetectionStrategy.OnPush,
encapsulation: core$1.ViewEncapsulation.None,
host: {
'[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: core$1.ElementRef },
{ type: core$1.Renderer2 },
{ type: core$1.ChangeDetectorRef },
{ type: a11y.FocusMonitor }
];
};
NzInputNumberComponent.propDecorators = {
nzBlur: [{ type: core$1.Output }],
nzFocus: [{ type: core$1.Output }],
inputElement: [{ type: core$1.ViewChild, args: ['inputElement',] }],
nzSize: [{ type: core$1.Input }],
nzMin: [{ type: core$1.Input }],
nzMax: [{ type: core$1.Input }],
nzParser: [{ type: core$1.Input }],
nzPrecision: [{ type: core$1.Input }],
nzPlaceHolder: [{ type: core$1.Input }],
nzStep: [{ type: core$1.Input }],
nzDisabled: [{ type: core$1.Input }],
nzAutoFocus: [{ type: core$1.Input }],
nzFormatter: [{ type: core$1.Input }]
};
__decorate([
core.InputBoolean(),
__metadata("design:type", Object)
], NzInputNumberComponent.prototype, "nzDisabled", void 0);
__decorate([
core.InputBoolean(),
__metadata("design:type", Object)
], NzInputNumberComponent.prototype, "nzAutoFocus", void 0);
return NzInputNumberComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NzInputNumberModule = /** @class */ (function () {
function NzInputNumberModule() {
}
NzInputNumberModule.decorators = [
{ type: core$1.NgModule, args: [{
imports: [common.CommonModule, forms.FormsModule, icon.NzIconModule],
declarations: [NzInputNumberComponent],
exports: [NzInputNumberComponent]
},] }
];
return NzInputNumberModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
exports.NzInputNumberComponent = NzInputNumberComponent;
exports.NzInputNumberModule = NzInputNumberModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=ng-zorro-antd-input-number.umd.js.map