ngx-number-input/fesm2015/ngx-number-input.js

Componente angular para formatear números dentro de un input

import { Component, forwardRef, Input, ViewChild, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';

class NgxNumberInputComponent {
    constructor() {
        this.placeholder = "";
        this.locale = "en-GB";
        this.currency = null;
        this.onChange = (_) => { };
        this.onTouched = () => { };
        this.isFocused = false;
    }
    set max(val) {
        this._max = val;
    }
    get min() {
        return this._min;
    }
    set min(val) {
        this._min = val;
    }
    get max() {
        return this._max;
    }
    ngOnInit() {
    }
    ngOnChanges(simpleChange) {
        if (simpleChange['max']) {
            this.max = simpleChange['max'].currentValue;
        }
        if (simpleChange['min']) {
            this.min = simpleChange['min'].currentValue;
        }
    }
    validate({ value }) {
        let isNotValid = false;
        if (this.isRequired) {
            if (!this.value || this.value.toString() == "") {
                return {
                    "invalid": true,
                    "required": true,
                };
            }
        }
        if (this.value) {
            isNotValid = this.value !== Number(value);
            if (!isNotValid && this.min) {
                isNotValid = (Number(value) < this.min);
            }
            if (!isNotValid && this.max) {
                isNotValid = (Number(value) > this.max);
            }
        }
        if (isNotValid) {
            return {
                "invalid": true,
                "max": this.max ? (Number(value) > this.max) : null,
                "min": this.min ? (Number(value) < this.min) : null
            };
        }
        return null;
    }
    updateChanges() {
        this.onChange(this.value);
    }
    writeValue(value) {
        this.value = value;
        this.updateChanges();
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    get numberFormatted() {
        if (this.value) {
            if (this.currency) {
                try {
                    return Number(this.value).toLocaleString(this.locale, {
                        style: 'currency',
                        currency: this.currency,
                    });
                }
                catch (error) {
                    return Number(this.value).toLocaleString(this.locale);
                }
            }
            else {
                return Number(this.value).toLocaleString(this.locale, {});
            }
        }
        else {
            return '';
        }
    }
    onFocus() {
        this.isFocused = true;
        setTimeout(() => {
            this.inputN.nativeElement.focus();
        }, 0);
    }
    onBlur() {
        this.onTouched();
        this.isFocused = false;
    }
}
NgxNumberInputComponent.decorators = [
    { type: Component, args: [{
                selector: 'ngx-number-input',
                template: "<input type=\"number\" [(ngModel)]=\"value\" [attr.max]=\"max\" [attr.min]=\"min\" [attr.class]=\"klass\" [ngClass]=\"ngClass\" (change)=\"updateChanges()\" [placeholder]=\"placeholder\" (blur)=\"onBlur()\" [required]=\"isRequired\" [disabled]=\"isDisabled\" [readonly]=\"isReadOnly\"\n    *ngIf=\"isFocused\" #inputN>\n<input type=\"text\" value=\"{{ numberFormatted }}\" [attr.max]=\"max\" [attr.min]=\"min\" [ngClass]=\"ngClass\" [required]=\"isRequired\" [attr.class]=\"klass\" [disabled]=\"isDisabled\" [readonly]=\"isReadOnly\" [placeholder]=\"placeholder\" (focus)=\"onFocus()\" *ngIf=\"!isFocused\">\n<p *ngIf=\"isFocused\"><span class=\"text-muted\">{{ numberFormatted }}</span></p>",
                providers: [
                    {
                        provide: NG_VALUE_ACCESSOR,
                        useExisting: forwardRef(() => NgxNumberInputComponent),
                        multi: true
                    },
                    {
                        provide: NG_VALIDATORS,
                        useExisting: NgxNumberInputComponent,
                        multi: true
                    }
                ],
                styles: [""]
            },] }
];
NgxNumberInputComponent.ctorParameters = () => [];
NgxNumberInputComponent.propDecorators = {
    klass: [{ type: Input, args: ['styleClass',] }],
    ngClass: [{ type: Input, args: ['ngClass',] }],
    isRequired: [{ type: Input, args: ['required',] }],
    isDisabled: [{ type: Input, args: ['disabled',] }],
    isReadOnly: [{ type: Input, args: ['readonly',] }],
    placeholder: [{ type: Input, args: ['placeholder',] }],
    locale: [{ type: Input, args: ['locale',] }],
    currency: [{ type: Input, args: ['currency',] }],
    inputN: [{ type: ViewChild, args: ["inputN", { static: false },] }],
    min: [{ type: Input, args: ["min",] }],
    max: [{ type: Input, args: ["max",] }]
};

class NgxNumberInputModule {
}
NgxNumberInputModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    NgxNumberInputComponent
                ],
                imports: [
                    CommonModule,
                    FormsModule,
                    ReactiveFormsModule
                ],
                exports: [
                    NgxNumberInputComponent
                ]
            },] }
];

/*
 * Public API Surface of ngx-number-input
 */

/**
 * Generated bundle index. Do not edit.
 */

export { NgxNumberInputComponent, NgxNumberInputModule };
//# sourceMappingURL=ngx-number-input.js.map