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

ERP Service Tower Senior - Message

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
• primeicons: 7.0.0

Instalação

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

Visão Geral

O componente hst-message padroniza mensagens informativas exibidas ao usuário. Suporta cinco tipos visuais (primário, alerta, sucesso, info e erro), com opções para customizar ícone, permitir fechamento e incluir conteúdo adicional no footer.

Parâmetros de Entrada (@Input)

| Input | Tipo | Valor Padrão | Descrição | | --- | --- | --- | --- | | type | string | '' | Tipo visual da mensagem. Valores: 'alerta', 'sucesso', 'erro', 'info', '' (primário/secundário) | | icone | string | '' | Ícone customizado (classe PrimeIcons sem o prefixo pi, ex: 'pi-bell') | | noIcon | boolean | false | Remove o ícone da mensagem | | closable | boolean | false | Exibe botão para fechar a mensagem |

Tipos Disponíveis

| Tipo | Classe CSS | Ícone Padrão | Cor | | --- | --- | --- | --- | | '' (padrão) | p-message-secondary | pi-info-circle | Cinza/Neutro | | 'info' | p-message-info | pi-info-circle | Azul | | 'alerta' | p-message-warn | pi-exclamation-triangle | Amarelo | | 'sucesso' | p-message-success | pi-check | Verde | | 'erro' | p-message-error | pi-times-circle | Vermelho |

Content Projection

O componente utiliza ng-content para projeção de conteúdo:

| Slot | Descrição | | --- | --- | | (default) | Conteúdo principal da mensagem | | [footer] | Conteúdo adicional abaixo da mensagem (ex: checkbox, botões) |

Métodos Públicos

| Método | Retorno | Descrição | | --- | --- | --- | | close() | void | Fecha a mensagem com animação de fade-out |

Exemplos de Uso

1. Mensagem padrão (secundária)

<hst-message>
  Mensagem informativa padrão do sistema.
</hst-message>

2. Mensagem de alerta

<hst-message type="alerta">
  Atenção! O prazo para envio está próximo.
</hst-message>

3. Mensagem de sucesso

<hst-message type="sucesso">
  Operação realizada com sucesso!
</hst-message>

4. Mensagem de erro

<hst-message type="erro">
  Ocorreu um erro ao processar a solicitação.
</hst-message>

5. Mensagem informativa

<hst-message type="info">
  Os dados serão atualizados em até 24 horas.
</hst-message>

6. Ícone customizado

<hst-message type="alerta" icone="pi-bell">
  Você tem novas notificações pendentes.
</hst-message>

Nota: Utilize classes de ícone do PrimeIcons. Consulte a lista completa em: https://v17.primeng.org/icons

7. Sem ícone

<hst-message type="info" noIcon>
  Mensagem sem ícone para contextos simplificados.
</hst-message>

8. Mensagem com fechamento

<hst-message type="alerta" closable>
  Este aviso pode ser fechado pelo usuário.
</hst-message>

9. Mensagem com footer (conteúdo adicional)

<hst-message type="info">
  Para prosseguir, aceite os termos de uso.

  <div footer class="flex align-items-center gap-1 mt-2">
    <p-checkbox value="aceite" inputId="aceite"></p-checkbox>
    <label for="aceite">Declaro que li e estou de acordo.</label>
  </div>
</hst-message>

10. Exemplo completo em TypeScript

import { Component } from '@angular/core';
import { MessageComponent } from '@senior-erp-service-tower/hst-message';

@Component({
  selector: 'app-minha-tela',
  standalone: true,
  imports: [MessageComponent],
  template: `
    @if (mostrarAviso) {
      <hst-message type="alerta" closable>
        O processo está em andamento. Aguarde a finalização.
      </hst-message>
    }

    @if (erroProcessamento) {
      <hst-message type="erro">
        Erro ao processar: {{ mensagemErro }}
      </hst-message>
    }

    @if (sucesso) {
      <hst-message type="sucesso">
        Solicitação enviada com sucesso! Protocolo: {{ protocolo }}
      </hst-message>
    }
  `
})
export class MinhaTelaComponent {
  mostrarAviso = true;
  erroProcessamento = false;
  sucesso = false;
  mensagemErro = '';
  protocolo = '';
}