ngx-number-input
Version:
Componente angular para formatear números dentro de un input
196 lines (188 loc) • 8.25 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('ngx-number-input', ['exports', '@angular/core', '@angular/forms', '@angular/common'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["ngx-number-input"] = {}, global.ng.core, global.ng.forms, global.ng.common));
})(this, (function (exports, core, forms, common) { 'use strict';
var NgxNumberInputComponent = /** @class */ (function () {
function NgxNumberInputComponent() {
this.placeholder = "";
this.locale = "en-GB";
this.currency = null;
this.onChange = function (_) { };
this.onTouched = function () { };
this.isFocused = false;
}
Object.defineProperty(NgxNumberInputComponent.prototype, "max", {
get: function () {
return this._max;
},
set: function (val) {
this._max = val;
},
enumerable: false,
configurable: true
});
Object.defineProperty(NgxNumberInputComponent.prototype, "min", {
get: function () {
return this._min;
},
set: function (val) {
this._min = val;
},
enumerable: false,
configurable: true
});
NgxNumberInputComponent.prototype.ngOnInit = function () {
};
NgxNumberInputComponent.prototype.ngOnChanges = function (simpleChange) {
if (simpleChange['max']) {
this.max = simpleChange['max'].currentValue;
}
if (simpleChange['min']) {
this.min = simpleChange['min'].currentValue;
}
};
NgxNumberInputComponent.prototype.validate = function (_a) {
var value = _a.value;
var 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;
};
NgxNumberInputComponent.prototype.updateChanges = function () {
this.onChange(this.value);
};
NgxNumberInputComponent.prototype.writeValue = function (value) {
this.value = value;
this.updateChanges();
};
NgxNumberInputComponent.prototype.registerOnChange = function (fn) {
this.onChange = fn;
};
NgxNumberInputComponent.prototype.registerOnTouched = function (fn) {
this.onTouched = fn;
};
Object.defineProperty(NgxNumberInputComponent.prototype, "numberFormatted", {
get: function () {
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 '';
}
},
enumerable: false,
configurable: true
});
NgxNumberInputComponent.prototype.onFocus = function () {
var _this = this;
this.isFocused = true;
setTimeout(function () {
_this.inputN.nativeElement.focus();
}, 0);
};
NgxNumberInputComponent.prototype.onBlur = function () {
this.onTouched();
this.isFocused = false;
};
return NgxNumberInputComponent;
}());
NgxNumberInputComponent.decorators = [
{ type: core.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: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef(function () { return NgxNumberInputComponent; }),
multi: true
},
{
provide: forms.NG_VALIDATORS,
useExisting: NgxNumberInputComponent,
multi: true
}
],
styles: [""]
},] }
];
NgxNumberInputComponent.ctorParameters = function () { return []; };
NgxNumberInputComponent.propDecorators = {
klass: [{ type: core.Input, args: ['styleClass',] }],
ngClass: [{ type: core.Input, args: ['ngClass',] }],
isRequired: [{ type: core.Input, args: ['required',] }],
isDisabled: [{ type: core.Input, args: ['disabled',] }],
isReadOnly: [{ type: core.Input, args: ['readonly',] }],
placeholder: [{ type: core.Input, args: ['placeholder',] }],
locale: [{ type: core.Input, args: ['locale',] }],
currency: [{ type: core.Input, args: ['currency',] }],
inputN: [{ type: core.ViewChild, args: ["inputN", { static: false },] }],
min: [{ type: core.Input, args: ["min",] }],
max: [{ type: core.Input, args: ["max",] }]
};
var NgxNumberInputModule = /** @class */ (function () {
function NgxNumberInputModule() {
}
return NgxNumberInputModule;
}());
NgxNumberInputModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
NgxNumberInputComponent
],
imports: [
common.CommonModule,
forms.FormsModule,
forms.ReactiveFormsModule
],
exports: [
NgxNumberInputComponent
]
},] }
];
/*
* Public API Surface of ngx-number-input
*/
/**
* Generated bundle index. Do not edit.
*/
exports.NgxNumberInputComponent = NgxNumberInputComponent;
exports.NgxNumberInputModule = NgxNumberInputModule;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ngx-number-input.umd.js.map