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

ERP Service Tower Senior - Card

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

Requisitos

• Angular: 18.0.1

Instalação

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

Visão Geral

O componente hst-card disponibiliza um card para agrupamento visual de componentes dentro de um contexto. Permite personalizar título, cor, bordas e estilo, servindo como container para organizar seções de formulários e telas.

Parâmetros de Entrada (@Input)

| Input | Tipo | Valor Padrão | Descrição | | --- | --- | --- | --- | | titulo | string | '' | Título simples para o card (prioridade em relação ao template) | | corTitulo | string | '#00c99a' | Cor do título | | upperCase | boolean | true | Define se o título será exibido em uppercase | | noBorder | boolean | false | Remove as bordas do card (utilizado para subdivisões dentro de outro card) | | noTitle | boolean | false | Esconde completamente a área do título | | style | string | '' | Permite injetar estilos CSS inline diretamente no card |

Content Projection

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

| Slot | Descrição | | --- | --- | | (default) | Conteúdo principal do card | | [titulo] | Template customizado para o título (utilizado quando não é informado o input titulo) |

Exemplos de Uso

1. Título simples (texto)

<hst-card titulo="Dados do Colaborador">
  <p>Conteúdo do card aqui</p>
</hst-card>

2. Título com template customizado

<hst-card>
  <div titulo>
    <i class="pi pi-info-circle"></i>
    Título com ícone
  </div>
  <p>Conteúdo do card aqui</p>
</hst-card>

Obs.: A prioridade do título é no formato simples (titulo input). Se informado os dois, apenas o texto do input será renderizado.

3. Card sem bordas (subdivisão)

<hst-card titulo="Card Principal">
  <hst-card titulo="Subdivisão" noBorder>
    <p>Conteúdo da subdivisão sem bordas</p>
  </hst-card>
</hst-card>

4. Card sem título

<hst-card noTitle>
  <p>Card apenas com conteúdo, sem área de título</p>
</hst-card>

5. Card com cor e estilo customizado

<hst-card
  titulo="Atenção"
  corTitulo="#ff5722"
  [upperCase]="false"
  style="background-color: #fff3e0;">
  <p>Card com título em cor laranja e fundo customizado</p>
</hst-card>

6. Exemplo completo em TypeScript

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

@Component({
  selector: 'app-meu-formulario',
  standalone: true,
  imports: [CardComponent],
  template: `
    <hst-card titulo="Informações Pessoais" corTitulo="#1976d2">
      <div class="grid">
        <div class="col-6">
          <label>Nome</label>
          <p>João da Silva</p>
        </div>
        <div class="col-6">
          <label>E-mail</label>
          <p>[email protected]</p>
        </div>
      </div>
    </hst-card>
  `
})
export class MeuFormularioComponent {}