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.

form: FormGroup;
valorModel = '';
constructor(private fb: FormBuilder){
  this.form = this.formBuilder.group({
    valor: ['', Validators.required]
  })
}

<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

<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

<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

<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

<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

<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

<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

<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

<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

<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

<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:

<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.