1.0.0 • Published 2 years ago
@tul/number-input v1.0.0
Number Input
Management of tul numbers inputs.
Table of Contents
Installation
npm i @tul/select --save
Usage
Html
<tul-currency [(data)]="data" (modelChange)="modelChange($event)"></tul-currency>
<tul-number [(data)]="data" (modelChange)="modelChange($event)"></tul-number>
<tul-percent [(data)]="data" (modelChange)="modelChange($event)"></tul-percent>
<tul-phone-number [(data)]="data" (modelChange)="modelChange($event)"></tul-phone-number>
Emitters
Inputs
//GENERAL
@Input() id: string;
@Input() placeholder: string = '';
@Input() data: string = '';
@Input() label: string;
@Input() required: boolean = false;
@Input() error: string;
@Input() disabled = false;
@Input() styles: { [key: string]: string } = { width: '100%' };
@Input() step = 0;
@Input() precisionMode = 'cut';
//CURRENCY
@Input() precision = 2;
@Input() precisionMode = 'cut';
@Input() max = Infinity;
@Input() min = 0;
@Input() currency = 'COP';
@Input() locales = 'es-CO';
@Input() defaultValue: number | null;
@Input() parser = (value: string) => value.replace('$ ', '');
@Input() formatterBlur = (value: number) => {
if (value === null || value === undefined) {
return this.defaultValue;
}
return ` ${new Intl.NumberFormat(this.locales, { style: 'currency', currency: this.currency }).format(
Number(parseFloat(value.toFixed(this.precision)))
)}`;
};
@Input() formatterFocus = (value: number) => {
return value;
};
//NUMBER
@Input() precision = 0;
@Input() max = Infinity;
@Input() min = -Infinity;
@Input() formatter = (value: number) => `${new Intl.NumberFormat('es-CO').format(value)}`;
@Input() parser = (value: string) => value.replace('', '');
//PERCENT
@Input() precision = 0;
@Input() max = 100;
@Input() min = 0;
@Input() formatter = (value: number) => `${new Intl.NumberFormat('es-CO').format(value)}`;
@Input() parser = (value: string) => value.replace('', '');
//PHONE NUMBER
@Input() precision = 0;
@Input() max = Infinity;
@Input() min = -Infinity;
@Input() digitsCellphone = 10;
@Input() formatter = (value: number) => `${new Intl.NumberFormat('es-CO').format(value)}`;
@Input() parser = (value: string) => value.replace('', '');
Outputs
@Output() modelChange = new EventEmitter<string>();
@Output() focusChange = new EventEmitter<string>();
@Output() blurChange = new EventEmitter<string>();
Models
Enums
Interfaces
Release History
0.0.1
- Structure was created
Pizza Owner
Andres Felipe Chia Avila