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

ERP Service Tower Senior - Loader

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

Requisitos

• Angular: 18.0.1
• primeng: 17.18.9

Instalação

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

Visão Geral

O componente hst-loader disponibiliza um indicador de carregamento com dois modos visuais: spinner (circular) e dots (pontos pulsantes). O loader aplica um efeito de opacidade sobre o conteúdo filho, bloqueando interações do usuário enquanto o carregamento está ativo.

Parâmetros de Entrada (@Input)

| Input | Tipo | Valor Padrão | Descrição | | --- | --- | --- | --- | | loading | boolean | false | Define a visibilidade do loader. Quando true, exibe o indicador e aplica opacidade no conteúdo | | type | 'spinner' | 'dots' | 'spinner' | Tipo visual do loader | | size | 'small' | 'medium' | 'large' | 'medium' | Tamanho do spinner (apenas para type 'spinner') | | message | string | '' | Mensagem exibida abaixo do indicador de carregamento |

Tamanhos do Spinner

| Size | Largura | Altura | | --- | --- | --- | | 'small' | 20px | 20px | | 'medium' | 40px | 40px | | 'large' | 60px | 60px |

Content Projection

O componente utiliza ng-content para envolver o conteúdo que será bloqueado durante o carregamento. O conteúdo recebe opacidade de 0.4 e pointer-events: none enquanto loading = true.

Exemplos de Uso

1. Spinner padrão (medium)

<hst-loader [loading]="carregando">
  <div class="grid">
    <div class="col-12">
      <p>Conteúdo que será bloqueado durante o carregamento</p>
    </div>
  </div>
</hst-loader>

2. Spinner pequeno com mensagem

<hst-loader [loading]="true" size="small" message="Carregando dados...">
  <p-table [value]="dados" [columns]="colunas">
    <!-- conteúdo da tabela -->
  </p-table>
</hst-loader>

3. Spinner grande

<hst-loader [loading]="salvando" size="large" message="Salvando informações...">
  <form [formGroup]="formulario">
    <!-- campos do formulário -->
  </form>
</hst-loader>

4. Loader tipo dots (pontos pulsantes)

<hst-loader [loading]="processando" type="dots" message="Processando solicitação...">
  <div class="conteudo">
    <p>Aguarde o processamento</p>
  </div>
</hst-loader>

5. Loader com mensagem multilinha

<hst-loader
  [loading]="gerando"
  size="large"
  message="Gerando relatório...&#10;Isso pode levar alguns segundos.">
  <div class="relatorio-container">
    <!-- conteúdo -->
  </div>
</hst-loader>

6. Exemplo completo em TypeScript

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

@Component({
  selector: 'app-minha-tela',
  standalone: true,
  imports: [LoaderComponent],
  template: `
    <hst-loader [loading]="carregando" message="Buscando colaboradores...">
      <div class="grid">
        @for (colab of colaboradores; track colab) {
          <div class="col-12">
            <p>{{ colab.nome }} - {{ colab.matricula }}</p>
          </div>
        }
      </div>
    </hst-loader>
  `
})
export class MinhaTelaComponent {
  carregando = false;
  colaboradores: any[] = [];

  async buscarColaboradores(): Promise<void> {
    this.carregando = true;
    try {
      this.colaboradores = await this.service.buscar();
    } finally {
      this.carregando = false;
    }
  }
}

Comportamento Visual

• Spinner: Exibe um spinner circular centralizado sobre o conteúdo com animação de rotação
• Dots: Exibe três pontos pulsantes centralizados sobre o conteúdo
• Ambos os tipos aplicam opacity: 0.4 e pointer-events: none no conteúdo envolvido
• A mensagem é exibida abaixo do indicador, centralizada, em cor cinza
• Suporta quebra de linha na mensagem