npm package: @senior-hcm-service-tower/hst-input
Description: Componentes desenvolvido para uso em telas customizadas e BPMs pelo time de serviços customizados HCM da Senior Sistemas.
Latest version: 1.1.2


# HCM Service Tower Senior - Input 🚀
Componentes desenvolvido para uso em telas customizadas e BPMs pelo time de serviços customizados HCM da Senior Sistemas.

## 📝 Requisitos  
- Angular: 18.0.1
- primeflex: 3.3.1
- primeng: 17.18.9

## Tipos disponíveis:
- text: Texto aberto.
- textarea: Texto no formato "textarea";
- number: Tipo numérico.
- currency: Tipo numérico com máscara de valor brasileiro (Possibilitando que o control seja em valor numérico ou string com máscara).
- date: Tipo data com possibilidade de validação de máscara para seleção de data mínima e/ou data máxima.
- time: Seleção de horas (retorna date)
- phone: Tipo numérico com máscara para telefone (com DDD) ou celular.
- cpf: Tipo numérico com máscara e validação de CPF.
- cnpj: Tipo numérico com máscara e validação de CNPJ.
- email: Tipo texto, se utilizado com formGroup, adiciona automaticamente validador de E-mail. 

## 🛠️ Como usar
Utilizar o componente com ngModel ou formControl.

```javascript
form: FormGroup;
valorModel = '';
constructor(private fb: FormBuilder){
  this.form = this.formBuilder.group({
    valor: ['', Validators.required]
  })
}
```

```html
<form  [formGroup]="form">
  <hst-input
    label="Valor do campo"
    formControlName="valor"
    type="text">
  </hst-input>

  <hst-input
    label="Valor do campo model"
    [(ngModel)]="valorModel"
    type="text">
  </hst-input>
</form>
```

### 1. Texto
```html
<hst-input
  [(ngModel)]="value"
  placeholder="Placeholder do campo"
  label="Label do campo"
  type="text">
</hst-input>
```
| Input  | Entrada | Valor Padrão | Descrição |
| -------------  | ------------- | ------------- |------------- |
| label  | String  | '' | Label do input
| placeholder  | String | '' | placeholder do input

### 2. TextArea
```html
<hst-input
  [(ngModel)]="value"
  placeholder="Placeholder do campo"
  label="Label do campo"
  type="textarea"
  [maxLength]="100"
  [showContador]="false"
  >
</hst-input>
```
| Input  | Entrada | Valor Padrão | Descrição |
| -------------  | ------------- | ------------- |------------- |
| label  | String  | '' | Label do input
| placeholder  | String | '' | placeholder do input
| maxLength  | Number  | 255 | Tamanho máximo do campo
| showContador  | Boolean  | true | Demonstra um contador de caracteres

### 3. Number
```html
<hst-input
  [(ngModel)]="value"
  placeholder="Placeholder do campo"
  label="Label do campo"
  type="number">
</hst-input>
```
| Input  | Entrada | Valor Padrão | Descrição |
| -------------  | ------------- | ------------- |------------- |
| label  | String  | '' | Label do input
| placeholder  | String | '' | placeholder do input

### 4. Currency
```html
<hst-input
  [(ngModel)]="value"
  placeholder="Placeholder do campo"
  label="Label do campo"
  type="currency">
</hst-input>
```
| Input  | Entrada | Valor Padrão | Descrição |
| -------------  | ------------- | ------------- |------------- |
| label  | String  | '' | Label do input
| placeholder  | String | '' | placeholder do input

### 5. Date
```html
<hst-input
  [(ngModel)]="value"
  placeholder="Placeholder do campo"
  label="Label do campo"
  type="date"
  >
</hst-input>
```
| Input  | Entrada | Valor Padrão | Descrição |
| -------------  | ------------- | ------------- |------------- |
| label  | String  | '' | Label do input
| placeholder  | String | '' | placeholder do input
| minDate  | Date | null | Data mínima de seleção
| maxDate  | Date | null | Data máxima de seleção

### 6. Time
```html
<hst-input
  [(ngModel)]="value"
  placeholder="Placeholder do campo"
  label="Label do campo"
  type="time"
  >
</hst-input>
```
| Input  | Entrada | Valor Padrão | Descrição |
| -------------  | ------------- | ------------- |------------- |
| label  | String  | '' | Label do input
| placeholder  | String | '' | placeholder do input

### 7. Phone
```html
<hst-input
  [(ngModel)]="value"
  placeholder="Placeholder do campo"
  label="Label do campo"
  type="phone"
  dropSpecialCharacters
  >
</hst-input>
```
| Input  | Entrada | Valor Padrão | Descrição |
| -------------  | ------------- | ------------- |------------- |
| label  | String  | '' | Label do input
| placeholder  | String | '' | placeholder do input
| dropSpecialCharacters  | Boolean | false | Se informado retorna o valor sem máscara aplicada

### 8. CPF
```html
<hst-input
  [(ngModel)]="value"
  placeholder="Placeholder do campo"
  label="Label do campo"
  type="cpf"
  dropSpecialCharacters
  noDefaultValidate
  >
</hst-input>
```
| Input  | Entrada | Valor Padrão | Descrição |
| -------------  | ------------- | ------------- |------------- |
| label  | String  | '' | Label do input
| placeholder  | String | '' | placeholder do input
| dropSpecialCharacters  | Boolean | false | Se informado retorna o valor sem máscara aplicada
| noDefaultValidate | Boolean | false | Se informado remove a validação de CPF do campo

Obs.: É adicionado automaticamente um validador de CPF

### 9. CNPJ
```html
<hst-input
  [(ngModel)]="value"
  placeholder="Placeholder do campo"
  label="Label do campo"
  type="cnpj"
  dropSpecialCharacters
  >
</hst-input>
```
| Input  | Entrada | Valor Padrão | Descrição |
| -------------  | ------------- | ------------- |------------- |
| label  | String  | '' | Label do input
| placeholder  | String | '' | placeholder do input
| dropSpecialCharacters  | Boolean | false | Se informado retorna o valor sem máscara aplicada
| noDefaultValidate | Boolean | false | Se adicionado, remove a validação de CNPJ do campo

Obs.: É adicionado automaticamente um validador de CNPJ

### 10. E-mail
```html
<hst-input
  [(ngModel)]="value"
  placeholder="Placeholder do campo"
  label="Label do campo"
  type="email"  
  >
</hst-input>
```
| Input  | Entrada | Valor Padrão | Descrição |
| -------------  | ------------- | ------------- |------------- |
| label  | String  | '' | Label do input
| placeholder  | String | '' | placeholder do input
| noDefaultValidate | Boolean | false | Se adicionado, remove a validação de e-mail do campo

Obs.: É adicionado automaticamente um validador de e-mail

## 📝 Dicionário de erros

Se utilizado o componente com FormGroup, é adicionado a mensagem de erro conforme validadores. Atualmente há algumas mensagens parametrizadas (required, minLength, cpf, cnpj, email), e uma mensagem default caso não tenha uma mensagem tratada. Para personalizar a mensagem dos validadores, basta enviar via parâmetro "errorsMessage" no input.

Exemplo:

```html
<hst-input
  formControlName="emailColaborador"
  placeholder="Informe o e-mail do colaborador"
  label="E-mail do colaborador"
  type="email"
  [errorsMessage]="{ required: 'Esse campo é obrigatório', validadorPersonalizado: 'Mensagem de erro customizado!' }"
  >
</hst-input>
```

Nesse caso, é sobrescrito a mensagem de erro para o "required" de "Campo obrigatório!" para "Esse campo é obrigatório", mantem a mensagem padrão do validador de email "E-mail inválido!" (Pois não foi sobrescrito), e adiciona no dicionário uma mensagem para um validador personalizado.