# TEXT INPUT

> Management of tul text fields.

<p align="center">
<img alt="tul logo" width="100px" src="https://tul.com.co/assets/Img/logo-tul.png">
</p>

<p align="center">

<img alt="npm" src="https://img.shields.io/npm/v/@tul/text-input">

<a href="https://soytul.slack.com/archives/DU3823EMQ">
  <img alt="slack logo"  src="https://badgen.net/badge/icon/slack/pink?icon=slack&label">
</a>

<img alt="npm" src="https://img.shields.io/npm/dw/@tul/text-input">

</p>

## Table of Contents

- [Install](#installation)
- [Usage](#usage)
  - [Emitters](#emitters)
  - [Inputs](#inputs)
  - [Outputs](#outputs)
  - [Models](#models)
    - [Enums](#enums)
    - [Interfaces](#interfaces)
- [Release History](#release-history)
- [Pizza Owner](#pizza-owner)

## Installation

```sh
npm i @tul/text-input --save
```

## Usage

### Html

```html
<tul-text-editor></tul-text-editor>
<tul-text-email></tul-text-email>
<tul-text></tul-text>
<tul-text-area></tul-text-area>
<tul-text-ids></tul-text-ids>
```

### Emitters

### Inputs

```ts
  @Input() placeholder: string = '';
  @Input() data: string = '';
  @Input() label: string;
  @Input() required: boolean = false;
  @Input() error: string;

  @Input() disabled: boolean = false;
  @Input() inputGroupStyles: { [key: string]: string };
  @Input() suffixTemplate: TemplateRef<Element>;
  @Input() prefixTemplate: TemplateRef<Element>;
  @Input() addOnAfterTemplate: TemplateRef<Element>;
```

### Outputs

```ts
  @Output() modelChange = new EventEmitter<string>();

```

### Models

#### Enums

```ts
export enum enums {}
```

#### Interfaces

```ts
export interface interface {}
```

### ControlValueAccessor

Defines an interface that acts as a bridge between the Angular forms API and a native element in the DOM

```ts
this.form = this.formBuilder.group({
  quantity: []
});
```

```html
<form [formGroup]="form">
  <tul-text [formControlName]="quantity"> </tul-text>
</form>
```

## Release History

- 0.1.0

  - Structure was created

## Pizza Owner

Andres Felipe Chia Avila