@nbxx/nb-input/dist/nbinput/nbinput-number.component.js

Angular - nbinput

import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { NbFieldType } from "./nbinput.entity";
export class NbinputNumberComponent {
    constructor() {
        this.onTouchedCallback = () => { };
        this.onChangeCallback = (_) => { };
        this.FieldType = NbFieldType;
        this.changed = new EventEmitter();
        this.PERCENT = new RegExp('^[0-9]+(.[0-9]+)?%$');
        this._data = 0;
        this.placeholder = '';
    }
    registerOnChange(fn) { if (fn)
        this.onChangeCallback = fn; }
    registerOnTouched(fn) { if (fn)
        this.onTouchedCallback = fn; }
    setDisabledState(isDisabled) { this.disabled = isDisabled; }
    writeValue(obj) {
        if (this._data != obj) {
            setTimeout(() => {
                this.data = obj;
            }, 0);
        }
    }
    onBlur() {
        this.onTouchedCallback();
    }
    onChange(event) {
        this.changed.emit(this.data);
        this.onChangeCallback(this.data);
    }
    isNumeric(n) {
        return !isNaN(parseFloat(n)) && isFinite(n);
    }
    set data(val) {
        // console.log('type=',this.type);
        let ex = val;
        if (this.PERCENT.test(val)) {
            // console.log('%->',val);
            ex = parseFloat(val) / 100;
        }
        if (this.isNumeric(ex)) {
            // console.log('ex: ',ex)
            ex = Math.round((ex * 100 + 0.001) * 100) / 10000;
            if (this._data != ex) {
                // console.log('parse->',ex);
                this._data = ex;
                this.setData();
            }
        }
        else {
            this._data = null;
            this._calc = null;
        }
        // console.log('data = ',val,', calc = ',this._calc)
    }
    get data() {
        if (this.isNumeric(this._calc)) {
            if (this._type == NbFieldType.Percentage) {
                // Percent：显示精确到小数点后2位，输出除以100(60.00%输出为0.6)。
                this._data = Math.round((this._calc * 1 + 0.001) * 100) / 10000;
            }
            else if (this._type == NbFieldType.CurrencyFen) {
                // CurrencyFen：显示除以100且精确到小数点后2位，输出乘以100的纯整数(￥3.12输出为312)。
                this._data = Math.round((this._calc * 1 + 0.001) * 100);
            }
            else {
                // Currency：显示精确到小数点后2位，输出与显示一致。
                // PercentFen：显示精确到小数点后2位，输出与显示一致(60%输出为60)。
                // 其他：显示与输出一致
                this._data = this._calc * 1;
            }
        }
        else {
            this._data = null;
        }
        return this._data;
    }
    ;
    get value() {
        return this.data;
    }
    ;
    set value(v) {
        if (v !== this.data) {
            this.data = v;
        }
    }
    setData() {
        if (this._type && this.isNumeric(this._data)) {
            // console.log('da: ',this._data, 'type: ',this.type)
            if (this._type == NbFieldType.Percentage) {
                // Percent：显示精确到小数点后2位，输出除以100(60.00%输出为0.6)。
                this._calc = this._data * 100;
                // console.log('percent->',this._calc);
            }
            else if (this._type == NbFieldType.CurrencyFen) {
                // CurrencyFen：显示除以100且精确到小数点后2位，输出乘以100的纯整数(￥3.12输出为312)。
                this._calc = this._data / 100;
                // console.log('curFen->',this._calc);
            }
            else {
                // Currency：显示精确到小数点后2位，输出与显示一致。
                // PercentFen：显示精确到小数点后2位，输出与显示一致(60%输出为60)。
                // 其他：显示与输出一致
                this._calc = this._data;
                // console.log('cur/perFen->',this._calc);
            }
            this.onChangeCallback(this._data);
        }
    }
    set type(t) {
        this._type = t;
        // console.log('set type = ',t);
        this.setData();
    }
}
NbinputNumberComponent.decorators = [
    { type: Component, args: [{
                selector: 'nbinput-number',
                template: `
      <ng-container *ngIf="readonly;else ELSEBLOCK">
        <span *ngIf="_type==FieldType.Percentage||_type==FieldType.PercentageFen">{{_calc?(_calc/100|percent:'1.0-2'):'-'}}</span>
        <span *ngIf="_type==FieldType.Currency||_type==FieldType.CurrencyFen">{{_calc?(_calc|currency:'CNY':'symbol-narrow':'1.0-2'):'-'}}</span>
        <span *ngIf="_type==FieldType.Number">{{_data}}</span>
      </ng-container>
      <ng-template #ELSEBLOCK>
        <div class="input-group">
          <div class="input-group-prepend" *ngIf="_type==FieldType.Currency||_type==FieldType.CurrencyFen">
            <span class="input-group-text">￥</span>
          </div>
          <input type="number" (change)="onChange($event)" class="form-control" [placeholder]="placeholder" [attr.disabled]="disabled?true:null" [(ngModel)]="_calc" />
          <div *ngIf="_type==FieldType.Percentage||_type==FieldType.PercentageFen" class="input-group-append">
            <span class="input-group-text">%</span>
          </div>
        </div>
      </ng-template>
    `,
                styles: [`
      input{min-width:80px}
    `],
                providers: [
                    {
                        provide: NG_VALUE_ACCESSOR,
                        useExisting: forwardRef(() => NbinputNumberComponent),
                        multi: true
                    }
                ]
            },] },
];
NbinputNumberComponent.propDecorators = {
    changed: [{ type: Output }],
    readonly: [{ type: Input }],
    data: [{ type: Input }],
    type: [{ type: Input }],
    placeholder: [{ type: Input }]
};
//# sourceMappingURL=nbinput-number.component.js.map