@tul/number-input

Number Input

Management of tul numbers inputs.

Table of Contents

• Install
• Usage
  • Emitters
  • Inputs
  • Outputs
  • Models
    • Enums
    • Interfaces
• Release History
• Pizza Owner

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