mat-currency-format
Version:
This repos is creating a library for angular currency input and also it is showing how to use the library
193 lines (187 loc) • 6.18 kB
JavaScript
import { Directive, ElementRef, Renderer2, Inject, LOCALE_ID, Input, HostListener, NgModule } from '@angular/core';
import { CurrencyPipe } from '@angular/common';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* The function to reverse the number format
* @param {?} val
* @param {?} locale
* @return {?}
*/
function reverseFormatNumber(val, locale) {
/** @type {?} */
var group = new Intl.NumberFormat(locale).format(1111).replace(/1/g, '');
/** @type {?} */
var decimal = new Intl.NumberFormat(locale).format(1.1).replace(/1/g, '');
/** @type {?} */
var reversedCurrencyVal = val.replace(new RegExp('\\' + group, 'g'), '');
reversedCurrencyVal = reversedCurrencyVal.replace(new RegExp('\\' + decimal, 'g'), '.');
/** @type {?} */
var reversedVal = reversedCurrencyVal.replace(/[^\d.-]/g, '');
return Number.isNaN(reversedVal) ? 0 : reversedVal;
}
var MatCurrencyFormatDirective = /** @class */ (function () {
function MatCurrencyFormatDirective(el, currencyPipe, renderer, locale) {
this.el = el;
this.currencyPipe = currencyPipe;
this.renderer = renderer;
this.locale = locale;
this.currencyCode = 'USD';
this.allowNegative = false;
this.regex = {
positiveDecimal: new RegExp(/^\d*[\.|,]?\d*$/g),
allDecimal: new RegExp(/^-?\d*[\.|,]?\d*$/g)
};
this.specialKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Del'];
}
/**
* @return {?}
*/
MatCurrencyFormatDirective.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
this.el.nativeElement.value = this.currencyPipe.transform(this.el.nativeElement.value, this.currencyCode);
};
/**
* @return {?}
*/
MatCurrencyFormatDirective.prototype.onFocus = /**
* @return {?}
*/
function () {
this.el.nativeElement.value = this.el.nativeElement.value.replace(/[^\d.,-]/g, '');
this.el.nativeElement.select();
};
/**
* @return {?}
*/
MatCurrencyFormatDirective.prototype.onFocusout = /**
* @return {?}
*/
function () {
/** @type {?} */
var val = this.el.nativeElement.value;
if (val.length === 0 || (val.length === 1 && [',', '.', ''].indexOf(val[0]) > -1)) {
val = '0';
}
this.el.nativeElement.value = this.currencyPipe.transform(val, this.currencyCode);
};
/**
* @param {?} event
* @return {?}
*/
MatCurrencyFormatDirective.prototype.onKeyDown = /**
* @param {?} event
* @return {?}
*/
function (event) {
if (this.specialKeys.indexOf(event.key) !== -1) {
return;
}
/** @type {?} */
var matches = this.allowNegative ? event.key.match(this.regex.allDecimal) : event.key.match(this.regex.positiveDecimal);
if (!matches) {
event.preventDefault();
}
};
/**
* @param {?} $event
* @return {?}
*/
MatCurrencyFormatDirective.prototype.onBlur = /**
* @param {?} $event
* @return {?}
*/
function ($event) {
/** @type {?} */
var amount = reverseFormatNumber(this.el.nativeElement.value, this.locale).replace(/^[^0-9]{2}..*/g, '');
this.el.nativeElement.value = amount;
};
MatCurrencyFormatDirective.decorators = [
{ type: Directive, args: [{
selector: '[mvndrMatCurrencyFormat]',
providers: [CurrencyPipe]
},] }
];
/** @nocollapse */
MatCurrencyFormatDirective.ctorParameters = function () { return [
{ type: ElementRef },
{ type: CurrencyPipe },
{ type: Renderer2 },
{ type: String, decorators: [{ type: Inject, args: [LOCALE_ID,] }] }
]; };
MatCurrencyFormatDirective.propDecorators = {
currencyCode: [{ type: Input }],
allowNegative: [{ type: Input }],
onFocus: [{ type: HostListener, args: ['focus',] }],
onFocusout: [{ type: HostListener, args: ['focusout',] }],
onKeyDown: [{ type: HostListener, args: ['keydown', ['$event'],] }],
onBlur: [{ type: HostListener, args: ['blur',] }]
};
return MatCurrencyFormatDirective;
}());
if (false) {
/** @type {?} */
MatCurrencyFormatDirective.prototype.currencyCode;
/** @type {?} */
MatCurrencyFormatDirective.prototype.allowNegative;
/**
* @type {?}
* @private
*/
MatCurrencyFormatDirective.prototype.regex;
/**
* @type {?}
* @private
*/
MatCurrencyFormatDirective.prototype.specialKeys;
/**
* @type {?}
* @private
*/
MatCurrencyFormatDirective.prototype.el;
/**
* @type {?}
* @private
*/
MatCurrencyFormatDirective.prototype.currencyPipe;
/**
* @type {?}
* @private
*/
MatCurrencyFormatDirective.prototype.renderer;
/**
* @type {?}
* @private
*/
MatCurrencyFormatDirective.prototype.locale;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var MatCurrencyFormatModule = /** @class */ (function () {
function MatCurrencyFormatModule() {
}
MatCurrencyFormatModule.decorators = [
{ type: NgModule, args: [{
declarations: [MatCurrencyFormatDirective],
imports: [],
exports: [MatCurrencyFormatDirective]
},] }
];
return MatCurrencyFormatModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { MatCurrencyFormatDirective, MatCurrencyFormatModule, reverseFormatNumber };
//# sourceMappingURL=mat-currency-format.js.map