ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
651 lines (645 loc) • 19.5 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
*/
class NzInputNumberComponent {
/**
* @param {?} elementRef
* @param {?} renderer
* @param {?} cdr
* @param {?} focusMonitor
*/
constructor(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 {?}
*/
() => null);
this.onTouched = (/**
* @return {?}
*/
() => null);
this.nzBlur = new EventEmitter();
this.nzFocus = new EventEmitter();
this.nzSize = 'default';
this.nzMin = -Infinity;
this.nzMax = Infinity;
this.nzParser = (/**
* @param {?} value
* @return {?}
*/
(value) => value); // tslint:disable-line:no-any
this.nzPlaceHolder = '';
this.nzStep = 1;
this.nzDisabled = false;
this.nzAutoFocus = false;
this.nzFormatter = (/**
* @param {?} value
* @return {?}
*/
value => value);
renderer.addClass(elementRef.nativeElement, 'ant-input-number');
}
// tslint:disable-line:no-any
/**
* @return {?}
*/
updateAutoFocus() {
if (this.nzAutoFocus) {
this.renderer.setAttribute(this.inputElement.nativeElement, 'autofocus', 'autofocus');
}
else {
this.renderer.removeAttribute(this.inputElement.nativeElement, 'autofocus');
}
}
/**
* @param {?} value
* @return {?}
*/
onModelChange(value) {
this.actualValue = this.nzParser(value
.trim()
.replace(/。/g, '.')
.replace(/[^\w\.-]+/g, ''));
this.inputElement.nativeElement.value = `${this.actualValue}`;
}
/**
* @param {?} value
* @return {?}
*/
getCurrentValidValue(value) {
/** @type {?} */
let 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
/**
* @param {?} num
* @return {?}
*/
isNotCompleteNumber(num) {
return (isNaN((/** @type {?} */ (num))) ||
num === '' ||
num === null ||
!!(num && num.toString().indexOf('.') === num.toString().length - 1));
}
/**
* @param {?=} value
* @return {?}
*/
getValidValue(value) {
/** @type {?} */
let 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 {?}
*/
toNumber(num) {
if (this.isNotCompleteNumber(num)) {
return (/** @type {?} */ (num));
}
if (isNotNil(this.nzPrecision)) {
return Number(Number(num).toFixed(this.nzPrecision));
}
return Number(num);
}
/**
* @return {?}
*/
setValidateValue() {
/** @type {?} */
const value = this.getCurrentValidValue(this.actualValue);
this.setValue(value, `${this.value}` !== `${value}`);
}
/**
* @return {?}
*/
onBlur() {
this.isFocused = false;
this.setValidateValue();
}
/**
* @return {?}
*/
onFocus() {
this.isFocused = true;
}
/**
* @param {?} e
* @return {?}
*/
getRatio(e) {
/** @type {?} */
let ratio = 1;
if (e.metaKey || e.ctrlKey) {
ratio = 0.1;
}
else if (e.shiftKey) {
ratio = 10;
}
return ratio;
}
/**
* @param {?} e
* @param {?=} ratio
* @return {?}
*/
down(e, ratio) {
if (!this.isFocused) {
this.focus();
}
this.step('down', e, ratio);
}
/**
* @param {?} e
* @param {?=} ratio
* @return {?}
*/
up(e, ratio) {
if (!this.isFocused) {
this.focus();
}
this.step('up', e, ratio);
}
/**
* @param {?} value
* @return {?}
*/
getPrecision(value) {
/** @type {?} */
const valueString = value.toString();
if (valueString.indexOf('e-') >= 0) {
return parseInt(valueString.slice(valueString.indexOf('e-') + 2), 10);
}
/** @type {?} */
let 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
/**
* @param {?} currentValue
* @param {?} ratio
* @return {?}
*/
getMaxPrecision(currentValue, ratio) {
if (isNotNil(this.nzPrecision)) {
return this.nzPrecision;
}
/** @type {?} */
const ratioPrecision = this.getPrecision(ratio);
/** @type {?} */
const stepPrecision = this.getPrecision(this.nzStep);
/** @type {?} */
const currentValuePrecision = this.getPrecision((/** @type {?} */ (currentValue)));
if (!currentValue) {
return ratioPrecision + stepPrecision;
}
return Math.max(currentValuePrecision, ratioPrecision + stepPrecision);
}
/**
* @param {?} currentValue
* @param {?} ratio
* @return {?}
*/
getPrecisionFactor(currentValue, ratio) {
/** @type {?} */
const precision = this.getMaxPrecision(currentValue, ratio);
return Math.pow(10, precision);
}
/**
* @param {?} val
* @param {?} rat
* @return {?}
*/
upStep(val, rat) {
/** @type {?} */
const precisionFactor = this.getPrecisionFactor(val, rat);
/** @type {?} */
const precision = Math.abs(this.getMaxPrecision(val, rat));
/** @type {?} */
let 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 {?}
*/
downStep(val, rat) {
/** @type {?} */
const precisionFactor = this.getPrecisionFactor(val, rat);
/** @type {?} */
const precision = Math.abs(this.getMaxPrecision(val, rat));
/** @type {?} */
let 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 {?}
*/
step(type, e, ratio = 1) {
this.stop();
e.preventDefault();
if (this.nzDisabled) {
return;
}
/** @type {?} */
const value = this.getCurrentValidValue(this.actualValue) || 0;
/** @type {?} */
let val = 0;
if (type === 'up') {
val = this.upStep(value, ratio);
}
else if (type === 'down') {
val = this.downStep(value, ratio);
}
/** @type {?} */
const 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 {?}
*/
() => {
this[type](e, ratio, true);
}), 600);
}
/**
* @return {?}
*/
stop() {
if (this.autoStepTimer) {
clearTimeout(this.autoStepTimer);
}
}
/**
* @param {?} value
* @param {?} emit
* @return {?}
*/
setValue(value, emit) {
if (emit && `${this.value}` !== `${value}`) {
this.onChange(value);
}
this.value = value;
this.actualValue = value;
/** @type {?} */
const 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 {?} */
const val = Number(value);
if (val >= this.nzMax) {
this.disabledUp = true;
}
if (val <= this.nzMin) {
this.disabledDown = true;
}
}
}
/**
* @param {?} e
* @return {?}
*/
onKeyDown(e) {
if (e.code === 'ArrowUp' || e.keyCode === UP_ARROW) {
/** @type {?} */
const ratio = this.getRatio(e);
this.up(e, ratio);
this.stop();
}
else if (e.code === 'ArrowDown' || e.keyCode === DOWN_ARROW) {
/** @type {?} */
const ratio = this.getRatio(e);
this.down(e, ratio);
this.stop();
}
else if (e.keyCode === ENTER) {
this.setValidateValue();
}
}
/**
* @return {?}
*/
onKeyUp() {
this.stop();
}
/**
* @param {?} value
* @return {?}
*/
writeValue(value) {
this.setValue(value, false);
this.cdr.markForCheck();
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.onChange = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) {
this.onTouched = fn;
}
/**
* @param {?} isDisabled
* @return {?}
*/
setDisabledState(isDisabled) {
this.nzDisabled = isDisabled;
this.cdr.markForCheck();
}
/**
* @return {?}
*/
focus() {
this.focusMonitor.focusVia(this.inputElement, 'keyboard');
}
/**
* @return {?}
*/
blur() {
this.inputElement.nativeElement.blur();
}
/**
* @return {?}
*/
ngOnInit() {
this.focusMonitor.monitor(this.elementRef, true).subscribe((/**
* @param {?} focusOrigin
* @return {?}
*/
focusOrigin => {
if (!focusOrigin) {
this.onBlur();
this.nzBlur.emit();
Promise.resolve().then((/**
* @return {?}
*/
() => this.onTouched()));
}
else {
this.onFocus();
this.nzFocus.emit();
}
}));
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (changes.nzAutoFocus) {
this.updateAutoFocus();
}
if (changes.nzFormatter) {
/** @type {?} */
const value = this.getCurrentValidValue(this.actualValue);
this.setValue(value, true);
}
}
/**
* @return {?}
*/
ngAfterViewInit() {
if (this.nzAutoFocus) {
this.focus();
}
}
/**
* @return {?}
*/
ngOnDestroy() {
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 {?}
*/
() => 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 = () => [
{ 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);
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
*/
class NzInputNumberModule {
}
NzInputNumberModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, FormsModule, NzIconModule],
declarations: [NzInputNumberComponent],
exports: [NzInputNumberComponent]
},] }
];
/**
* @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