ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
794 lines (788 loc) • 23.9 kB
JavaScript
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, Renderer2, ChangeDetectorRef, Output, ViewChild, Input, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { isNotNil, InputBoolean } from 'ng-zorro-antd/core';
import { CommonModule } from '@angular/common';
import { NzIconModule } from 'ng-zorro-antd/icon';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,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 EventEmitter();
this.nzFocus = new 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 (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 (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 = 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 === UP_ARROW) {
/** @type {?} */
var ratio = this.getRatio(e);
this.up(e, ratio);
this.stop();
}
else if (e.code === 'ArrowDown' || e.keyCode === DOWN_ARROW) {
/** @type {?} */
var ratio = this.getRatio(e);
this.down(e, ratio);
this.stop();
}
else if (e.keyCode === 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: 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 nzType=\"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 nzType=\"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 [attr.id]=\"nzId\"\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>\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-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: Renderer2 },
{ 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 }],
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 {?}
* @private
*/
NzInputNumberComponent.prototype.autoStepTimer;
/**
* @type {?}
* @private
*/
NzInputNumberComponent.prototype.actualValue;
/**
* @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.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.renderer;
/**
* @type {?}
* @private
*/
NzInputNumberComponent.prototype.cdr;
/**
* @type {?}
* @private
*/
NzInputNumberComponent.prototype.focusMonitor;
/* Skipping unhandled member: [property: string]: any;*/
}
/**
* @fileoverview added by tsickle
* @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
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { NzInputNumberComponent, NzInputNumberModule };
//# sourceMappingURL=ng-zorro-antd-input-number.js.map