Fork: Código fonte extraído de @senior-hcm-service-tower/hst-input e mantido independentemente para o contexto ERP.

ERP Service Tower Senior - Input

Componente desenvolvido para uso em telas customizadas e BPMs pelo time de serviços customizados ERP da Senior Sistemas.

Requisitos

• Angular: 18.0.1
• primeflex: 3.3.1
• primeng: 17.18.9
• ngx-mask: (compatível com Angular 18)
• cpf-cnpj-validator: (para validação de CPF/CNPJ)

Instalação

npm install @senior-erp-service-tower/hst-input

Visão Geral

O componente hst-input é um input universal que suporta 10 tipos diferentes de campo, com máscaras automáticas, validações nativas e integração completa com ReactiveForms e ngModel (implementa ControlValueAccessor). Quando desabilitado, o campo exibe o valor formatado em modo somente leitura.

Parâmetros de Entrada (@Input) - Gerais

| Input | Tipo | Valor Padrão | Descrição | | --- | --- | --- | --- | | type | string | 'text' | Tipo do campo. Valores: text, textarea, number, currency, date, time, phone, cpf, cnpj, email | | label | string | '' | Label exibida acima do campo | | placeholder | string | '' | Placeholder do campo | | control | FormControl | undefined | FormControl associado ao campo | | errorsMessage | object | undefined | Dicionário customizado de mensagens de erro | | emptyText | string | '-' | Texto exibido quando o campo está desabilitado e sem valor | | dropSpecialCharacters | boolean | false | Remove caracteres especiais da máscara no valor retornado (para phone, cpf, cnpj) | | noDefaultValidate | boolean | false | Remove validadores automáticos (CPF, CNPJ, e-mail) | | maxLength | number | 255 | Tamanho máximo para campos de texto | | showContador | boolean | true | Exibe contador de caracteres (apenas para textarea) | | minDate | Date | undefined | Data mínima para seleção (apenas para date) | | maxDate | Date | undefined | Data máxima para seleção (apenas para date) |

Tipos Disponíveis

1. Text

Campo de texto simples.

<hst-input
  [(ngModel)]="valor"
  placeholder="Digite o nome"
  label="Nome Completo"
  type="text">
</hst-input>

| Input | Tipo | Valor Padrão | Descrição | | --- | --- | --- | --- | | label | string | '' | Label do input | | placeholder | string | '' | Placeholder do input |

2. Textarea

Campo de texto multilinha com contador de caracteres.

<hst-input
  [(ngModel)]="observacao"
  placeholder="Informe a observação"
  label="Observação"
  type="textarea"
  [maxLength]="500"
  [showContador]="true">
</hst-input>

| Input | Tipo | 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 | Exibe contador de caracteres (ex: "45 de 500") |

3. Number

Campo numérico inteiro.

<hst-input
  [(ngModel)]="quantidade"
  placeholder="Informe a quantidade"
  label="Quantidade"
  type="number">
</hst-input>

| Input | Tipo | Valor Padrão | Descrição | | --- | --- | --- | --- | | label | string | '' | Label do input | | placeholder | string | '' | Placeholder do input |

4. Currency

Campo numérico com máscara de moeda brasileira (BRL).

<hst-input
  [(ngModel)]="valor"
  placeholder="Informe o valor"
  label="Valor Total"
  type="currency">
</hst-input>

| Input | Tipo | Valor Padrão | Descrição | | --- | --- | --- | --- | | label | string | '' | Label do input | | placeholder | string | '' | Placeholder do input |

Nota: Quando desabilitado, o valor é exibido formatado como moeda (ex: R$ 1.250,00).

5. Date

Seletor de data com calendário em português.

<hst-input
  [(ngModel)]="dataInicio"
  placeholder="Selecione a data"
  label="Data de Início"
  type="date"
  [minDate]="dataMinima"
  [maxDate]="dataMaxima">
</hst-input>

| Input | Tipo | Valor Padrão | Descrição | | --- | --- | --- | --- | | label | string | '' | Label do input | | placeholder | string | '' | Placeholder do input | | minDate | Date | undefined | Data mínima para seleção | | maxDate | Date | undefined | Data máxima para seleção |

Nota: O calendário é automaticamente traduzido para português (dias da semana, meses). Quando desabilitado, exibe no formato dd/MM/yyyy.

6. Time

Seletor de horário (apenas horas e minutos).

<hst-input
  [(ngModel)]="horario"
  placeholder="Selecione o horário"
  label="Horário de Entrada"
  type="time">
</hst-input>

| Input | Tipo | Valor Padrão | Descrição | | --- | --- | --- | --- | | label | string | '' | Label do input | | placeholder | string | '' | Placeholder do input |

Nota: Retorna um objeto Date. Quando desabilitado, exibe no formato HH:mm.

7. Phone

Campo com máscara automática para telefone fixo ou celular (com DDD).

<hst-input
  [(ngModel)]="telefone"
  placeholder="(00) 00000-0000"
  label="Telefone"
  type="phone"
  dropSpecialCharacters>
</hst-input>

| Input | Tipo | Valor Padrão | Descrição | | --- | --- | --- | --- | | label | string | '' | Label do input | | placeholder | string | '' | Placeholder do input | | dropSpecialCharacters | boolean | false | Se true, retorna o valor sem máscara (apenas números) |

Nota: A máscara se adapta automaticamente entre telefone fixo (00) 0000-0000 e celular (00) 0 0000-0000.

8. CPF

Campo com máscara e validação automática de CPF.

<hst-input
  [(ngModel)]="cpf"
  placeholder="000.000.000-00"
  label="CPF"
  type="cpf"
  dropSpecialCharacters>
</hst-input>

| Input | Tipo | Valor Padrão | Descrição | | --- | --- | --- | --- | | label | string | '' | Label do input | | placeholder | string | '' | Placeholder do input | | dropSpecialCharacters | boolean | false | Se true, retorna o valor sem máscara | | noDefaultValidate | boolean | false | Se true, remove a validação automática de CPF |

Nota: Um validador de CPF é adicionado automaticamente ao FormControl. Se o CPF for inválido, a mensagem "CPF inválido!" será exibida.

9. CNPJ

Campo com máscara e validação automática de CNPJ.

<hst-input
  [(ngModel)]="cnpj"
  placeholder="00.000.000/0000-00"
  label="CNPJ"
  type="cnpj"
  dropSpecialCharacters>
</hst-input>

| Input | Tipo | Valor Padrão | Descrição | | --- | --- | --- | --- | | label | string | '' | Label do input | | placeholder | string | '' | Placeholder do input | | dropSpecialCharacters | boolean | false | Se true, retorna o valor sem máscara | | noDefaultValidate | boolean | false | Se true, remove a validação automática de CNPJ |

Nota: Um validador de CNPJ é adicionado automaticamente ao FormControl. Se o CNPJ for inválido, a mensagem "CNPJ inválido!" será exibida.

10. E-mail

Campo de texto com validação automática de formato de e-mail.

<hst-input
  [(ngModel)]="email"
  placeholder="[email protected]"
  label="E-mail"
  type="email">
</hst-input>

| Input | Tipo | Valor Padrão | Descrição | | --- | --- | --- | --- | | label | string | '' | Label do input | | placeholder | string | '' | Placeholder do input | | noDefaultValidate | boolean | false | Se true, remove a validação automática de e-mail |

Nota: Um validador de e-mail é adicionado automaticamente ao FormControl. Se o e-mail for inválido, a mensagem "E-mail inválido!" será exibida.

Sistema de Dicionário de Erros

O componente possui um dicionário interno de mensagens de erro que é utilizado quando o FormControl possui erros de validação. As mensagens padrões são:

const errors = {
  default: 'Valor inválido!',
  required: 'Campo obrigatório!',
  minlength: 'Tamanho inválido!',
  cpf: 'CPF inválido!',
  cnpj: 'CNPJ inválido!',
  email: 'E-mail inválido!'
};

Personalizando mensagens de erro

Você pode sobrescrever ou adicionar mensagens utilizando o input errorsMessage:

<hst-input
  formControlName="emailColaborador"
  placeholder="Informe o e-mail"
  label="E-mail do Colaborador"
  type="email"
  [errorsMessage]="{
    required: 'Esse campo é obrigatório',
    validadorCustom: 'Mensagem do validador customizado!'
  }">
</hst-input>

Comportamento:

• O dicionário customizado é mesclado (merge) com o dicionário padrão
• Mensagens customizadas sobrescrevem as padrões para a mesma chave
• Validadores não mapeados exibem a mensagem default
• Se o erro contiver uma propriedade message, ela será exibida diretamente

Validadores customizados com mensagem

// No componente
static validarValorMinimo(control: AbstractControl) {
  if (control.value < 100) {
    return { valorMinimo: { message: 'O valor deve ser maior que R$ 100,00' } };
  }
  return null;
}

Uso com FormGroup

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
import { InputComponent } from '@senior-erp-service-tower/hst-input';

@Component({
  selector: 'app-formulario',
  standalone: true,
  imports: [InputComponent, ReactiveFormsModule],
  template: `
    <form [formGroup]="form">
      <hst-input
        formControlName="nome"
        label="Nome Completo"
        placeholder="Informe o nome"
        type="text">
      </hst-input>

      <hst-input
        formControlName="cpf"
        label="CPF"
        placeholder="000.000.000-00"
        type="cpf"
        dropSpecialCharacters>
      </hst-input>

      <hst-input
        formControlName="valor"
        label="Valor"
        placeholder="R$ 0,00"
        type="currency">
      </hst-input>

      <hst-input
        formControlName="observacao"
        label="Observação"
        type="textarea"
        [maxLength]="1000">
      </hst-input>
    </form>
  `
})
export class FormularioComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      nome: ['', Validators.required],
      cpf: ['', Validators.required],
      valor: [''],
      observacao: ['']
    });
  }
}

Uso com ngModel

<hst-input
  [(ngModel)]="valorCampo"
  label="Campo com ngModel"
  type="text"
  placeholder="Digite aqui">
</hst-input>

Comportamento quando Desabilitado

Quando o campo está desabilitado (via FormControl.disable() ou [disabled]), o componente exibe o valor formatado em modo somente leitura:

| Tipo | Formato exibido | | --- | --- | | text | Texto puro | | textarea | Textarea desabilitado com fundo azul claro | | number | Número formatado | | currency | Formatado como moeda (ex: R$ 1.250,00) | | date | Formato dd/MM/yyyy | | time | Formato HH:mm | | phone, cpf, cnpj | Com máscara aplicada | | email | Texto puro |

Se não houver valor, exibe o texto definido em emptyText (padrão: '-').

Indicador de Campo Obrigatório

Se o FormControl possuir o validador Validators.required, um asterisco vermelho (*) será exibido automaticamente antes da label.