ng-zorro-antd-mobile
Version:
An enterprise-class mobile UI components based on Ant Design and Angular
312 lines (307 loc) • 15.3 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, forwardRef, Component, Input, Output, HostBinding, NgModule } from '@angular/core';
import * as i2 from '@angular/forms';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3 from 'ng-zorro-antd-mobile/icon';
import { IconModule } from 'ng-zorro-antd-mobile/icon';
class StepperComponent {
get max() {
return this._max;
}
set max(value) {
this._max = value;
}
get min() {
return this._min;
}
set min(value) {
this._min = value;
}
get value() {
return this._value;
}
set value(v) {
this._value = v;
}
set step(value) {
this._step = value;
}
set defaultValue(value) {
if (value) {
this._defaultValue = value;
this._value = value;
}
}
get disabled() {
return this._disabled;
}
set disabled(value) {
if (value) {
this._downDisabled = value;
this._upDisabled = value;
}
this._disabled = value;
this.clsStpDisabled = value;
}
get readOnly() {
return this._readOnly;
}
set readOnly(value) {
this._readOnly = value;
}
set showNumber(value) {
this._showNumber = value;
this.clsShowNum = value;
}
constructor() {
this.prefixCls = 'am-stepper';
this._max = Infinity;
this._min = -Infinity;
this._step = 1;
this._disabled = false;
this._readOnly = false;
this._showNumber = false;
this._upDisabled = false;
this._downDisabled = false;
this._isUpClick = false;
this._isDownClick = false;
this._inputLock = false;
this.onChange = new EventEmitter();
this.clsStepper = true;
this.clsStpDisabled = this._disabled;
this.clsShowNum = this._showNumber;
this.onChangeFn = () => { };
this.onTouchFn = () => { };
}
onIncrease() {
if (!this._upDisabled) {
this._value = this.plus(this._value, this._step);
this.onChange.emit(this._value);
this.onChangeFn(this._value);
if (this.plus(this._value, this._step) > this._max) {
this._upDisabled = true;
}
if (this.minus(this._value, this._step) >= this._min) {
this._downDisabled = false;
}
this._isUpClick = true;
this.setCls();
setTimeout(() => {
this._isUpClick = false;
this.setCls();
}, 100);
}
}
onDecrease() {
if (!this._downDisabled) {
this._value = this.minus(this._value, this._step);
this.onChange.emit(this._value);
this.onChangeFn(this._value);
if (this.minus(this._value, this._step) < this._min) {
this._downDisabled = true;
}
if (this.plus(this._value, this._step) <= this._max) {
this._upDisabled = false;
}
this._isDownClick = true;
this.setCls();
setTimeout(() => {
this._isDownClick = false;
this.setCls();
}, 100);
}
}
compositionStart() {
this._inputLock = true;
}
compositionEnd() {
this._inputLock = false;
}
inputChange(event) {
// 'compositionend' is earlier than ngModelChange, Therefore use timer to make ngModelChange runs after 'compositionend' event
setTimeout(() => {
if (this._inputLock) {
return;
}
const allowDecimal = this._step % 1 !== 0;
const allowNegative = this._min < 0;
let decimalFlag = false;
let negativeFlag = false;
if (!event)
event = '';
let value = event.toString().replace(/\D/g, (match, index, str) => {
if (allowDecimal && match === '.' && !decimalFlag) {
decimalFlag = true;
return '.';
}
if (allowNegative && match === '-' && !negativeFlag) {
negativeFlag = true;
return '-';
}
return '';
});
if (negativeFlag && value.indexOf('-') > 0) {
value = value.replace(/-/g, '');
}
if (!isNaN(value)) {
this._value = +value;
this._upDisabled = this.plus(this._value, this._step) > this._max ? true : false;
this._downDisabled = this.minus(this._value, this._step) < this._min ? true : false;
}
this.setCls();
this.onChange.emit(this._value);
this.onChangeFn(this._value);
}, 0);
}
inputBlur() {
let value = +this._value;
if (+this._value === -0) {
value = 0;
}
if (this._value < this._min) {
value = this._min;
}
else if (this._value > this._max) {
value = this._max;
}
const len = this._step.toString().length - this._step.toString().indexOf('.') - 1;
value = +value.toFixed(len);
if (value !== this._value) {
this._value = value;
this.onChange.emit(this._value);
this.onChangeFn(this._value);
}
}
setCls() {
this.upDisableCls = {
[`${this.prefixCls}-handler-up-disabled`]: this._upDisabled,
[`${this.prefixCls}-handler-active`]: this._isUpClick
};
this.downDisableCls = {
[`${this.prefixCls}-handler-down-disabled`]: this._downDisabled,
[`${this.prefixCls}-handler-active`]: this._isDownClick
};
}
ngOnChanges() {
if (this._disabled) {
this._downDisabled = true;
this._upDisabled = true;
}
else {
this._upDisabled = this.plus(this._value, this._step) > this._max ? true : false;
this._downDisabled = this.minus(this._value, this._step) < this._min ? true : false;
}
this.setCls();
}
writeValue(value) {
this._value = value;
this.ngOnChanges();
}
registerOnChange(fn) {
this.onChangeFn = fn;
}
registerOnTouched(fn) {
this.onTouchFn = fn;
}
plus(num1, num2) {
if (num1 === undefined || num1 === null || num2 === undefined || num2 === null) {
return;
}
const baseNum = Math.pow(10, Math.max(this.digitLength(num1), this.digitLength(num2)));
return (this.times(num1, baseNum) + this.times(num2, baseNum)) / baseNum;
}
minus(num1, num2) {
if (num1 === undefined || num1 === null || num2 === undefined || num2 === null) {
return;
}
const baseNum = Math.pow(10, Math.max(this.digitLength(num1), this.digitLength(num2)));
return (this.times(num1, baseNum) - this.times(num2, baseNum)) / baseNum;
}
digitLength(num) {
const eSplit = num.toString().split(/[eE]/);
const len = (eSplit[0].split('.')[1] || '').length - +(eSplit[1] || 0);
return len > 0 ? len : 0;
}
times(num1, num2) {
const num1Changed = this.floatToFixed(num1);
const num2Changed = this.floatToFixed(num2);
const baseNum = this.digitLength(num1) + this.digitLength(num2);
const leftValue = num1Changed * num2Changed;
return leftValue / Math.pow(10, baseNum);
}
floatToFixed(num) {
if (num.toString().indexOf('e') === -1) {
return Number(num.toString().replace('.', ''));
}
const dLen = this.digitLength(num);
return dLen > 0 ? this.strip(num * Math.pow(10, dLen)) : num;
}
strip(num, precision = 12) {
return +parseFloat(num.toPrecision(precision));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: StepperComponent, selector: "Stepper, nzm-stepper", inputs: { max: "max", min: "min", value: "value", step: "step", defaultValue: "defaultValue", disabled: "disabled", readOnly: "readOnly", showNumber: "showNumber" }, outputs: { onChange: "onChange" }, host: { properties: { "class.am-stepper": "this.clsStepper", "class.am-stepper-disabled": "this.clsStpDisabled", "class.showNumber": "this.clsShowNum" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => StepperComponent),
multi: true
}
], usesOnChanges: true, ngImport: i0, template: "<div class=\"{{ prefixCls }}-handler-wrap\">\n <span\n role=\"button\"\n class=\"{{ prefixCls }}-handler {{ prefixCls }}-handler-up\"\n style=\"line-height:28px;\"\n [ngClass]=\"upDisableCls\"\n (click)=\"onIncrease()\"\n >\n <Icon [type]=\"'plus'\" [size]=\"'xxs'\"> </Icon>\n </span>\n <span\n role=\"button\"\n class=\"{{ prefixCls }}-handler {{ prefixCls }}-handler-down\"\n style=\"line-height:28px;\"\n [ngClass]=\"downDisableCls\"\n (click)=\"onDecrease()\"\n >\n <Icon [type]=\"'minus'\" [size]=\"'xxs'\"> </Icon>\n </span>\n</div>\n<div class=\"{{ prefixCls }}-input-wrap\">\n <input\n type=\"number\"\n pattern=\"\\-?\\d+(\\.\\d+)?\"\n style=\"outline:none\"\n class=\"{{ prefixCls }}-input\"\n [disabled]=\"disabled\"\n [readonly]=\"readOnly\"\n [autocomplete]=\"'off'\"\n [max]=\"max\"\n [min]=\"min\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"inputChange($event)\"\n (compositionstart)=\"compositionStart()\"\n (compositionend)=\"compositionEnd()\"\n (blur)=\"inputBlur()\"\n />\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.IconComponent, selector: "Icon, nzm-icon", inputs: ["color", "type", "src", "size"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: StepperComponent, decorators: [{
type: Component,
args: [{ selector: 'Stepper, nzm-stepper', providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => StepperComponent),
multi: true
}
], template: "<div class=\"{{ prefixCls }}-handler-wrap\">\n <span\n role=\"button\"\n class=\"{{ prefixCls }}-handler {{ prefixCls }}-handler-up\"\n style=\"line-height:28px;\"\n [ngClass]=\"upDisableCls\"\n (click)=\"onIncrease()\"\n >\n <Icon [type]=\"'plus'\" [size]=\"'xxs'\"> </Icon>\n </span>\n <span\n role=\"button\"\n class=\"{{ prefixCls }}-handler {{ prefixCls }}-handler-down\"\n style=\"line-height:28px;\"\n [ngClass]=\"downDisableCls\"\n (click)=\"onDecrease()\"\n >\n <Icon [type]=\"'minus'\" [size]=\"'xxs'\"> </Icon>\n </span>\n</div>\n<div class=\"{{ prefixCls }}-input-wrap\">\n <input\n type=\"number\"\n pattern=\"\\-?\\d+(\\.\\d+)?\"\n style=\"outline:none\"\n class=\"{{ prefixCls }}-input\"\n [disabled]=\"disabled\"\n [readonly]=\"readOnly\"\n [autocomplete]=\"'off'\"\n [max]=\"max\"\n [min]=\"min\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"inputChange($event)\"\n (compositionstart)=\"compositionStart()\"\n (compositionend)=\"compositionEnd()\"\n (blur)=\"inputBlur()\"\n />\n</div>\n" }]
}], ctorParameters: () => [], propDecorators: { max: [{
type: Input
}], min: [{
type: Input
}], value: [{
type: Input
}], step: [{
type: Input
}], defaultValue: [{
type: Input
}], disabled: [{
type: Input
}], readOnly: [{
type: Input
}], showNumber: [{
type: Input
}], onChange: [{
type: Output
}], clsStepper: [{
type: HostBinding,
args: ['class.am-stepper']
}], clsStpDisabled: [{
type: HostBinding,
args: ['class.am-stepper-disabled']
}], clsShowNum: [{
type: HostBinding,
args: ['class.showNumber']
}] } });
class StepperModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: StepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: StepperModule, declarations: [StepperComponent], imports: [CommonModule, FormsModule, IconModule], exports: [StepperComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: StepperModule, imports: [CommonModule, FormsModule, IconModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: StepperModule, decorators: [{
type: NgModule,
args: [{
exports: [StepperComponent],
declarations: [StepperComponent],
imports: [CommonModule, FormsModule, IconModule]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { StepperComponent, StepperModule };
//# sourceMappingURL=ng-zorro-antd-mobile-stepper.mjs.map