• pulso-accordion
• pulso-button
• pulso-form-field
• pulso-icon
• pulso-mat-icon
• pulso-option
• pulso-select
• pulso-switch

Componente: pulso-button

O componente pulso-button é um botão versátil com várias opções de cor e estilo para diferentes casos de uso.

• Atributos:

  • [pulso-button]: Define os estilos básicos para o botão. Pode ser personalizado ainda mais usando atributos adicionais.

• Atributos Adicionais:

  • [color="primary"]: Aplica estilos de botão primário.
  • [color="secondary"]: Aplica estilos de botão secundário.
  • [color="ghost"]: Aplica estilos de botão fantasma.
  • [color="conversion"]: Aplica estilos de botão de conversão.
  • [color="conversion-secondary"]: Aplica estilos de botão de conversão secundário.
  • [color="conversion-ghost"]: Aplica estilos de botão de conversão fantasma.
  • [color="black"]: Aplica estilos de botão preto.
  • [color="black-secondary"]: Aplica estilos de botão preto secundário.
  • [color="black-ghost"]: Aplica estilos de botão preto fantasma.
  • [color="white"]: Aplica estilos de botão branco.
  • [color="white-secondary"]: Aplica estilos de botão branco secundário.
  • [color="white-ghost"]: Aplica estilos de botão branco fantasma.
  • [color="subscription"]: Aplica estilos de botão de assinatura.
  • [color="subscription-secondary"]: Aplica estilos de botão de assinatura secundário.
  • [color="subscription-ghost"]: Aplica estilos de botão de assinatura fantasma.

• Exemplos de Uso:

  <button pulso-button color="primary">Botão Primário</button>
  <button pulso-button color="secondary">Botão Secundário</button>
  <button pulso-button color="ghost">Botão Fantasma</button>
  <button pulso-button color="conversion">Botão de Conversão</button>
  <button pulso-button color="black">Botão Preto</button>
  <button pulso-button color="white">Botão Branco</button>
  <button pulso-button color="subscription">Botão de Assinatura</button>

Componente: pulso-accordion

O componente pulso-accordion é utilizado para criar uma interface de acordeão, permitindo a exibição de painéis expansíveis que podem ser abertos ou fechados individualmente.

• Elementos Filhos:

  • [pulso-panel-title]: Define o título de um painel do acordeon.
  • [pulso-panel-description]: Define o conteúdo de um painel do acordeon.

• Exemplo de Uso:

  <pulso-accordion>
    <h1 pulso-panel-title>Component Content</h1>
    <div pulso-panel-description>
      <!-- Conteúdo do painel aqui -->
    </div>
  </pulso-accordion>

Componente: pulso-form-field

O componente pulso-form-field encapsula campos de formulário e rótulos, fornecendo funcionalidades adicionais como texto de ajuda e rótulos fixos.

• Elementos Filhos:

  • <label>: Define o rótulo do campo de formulário.
  • <input>: Define o campo de entrada de texto.
  • <pulso-select>: Define um seletor personalizado.

• Inputs:

  • [helperText]: Define o texto de ajuda para o campo de formulário.
  • [fixedLabel]: Determina se o rótulo deve ser fixo.

• Exemplo de Uso:

  <pulso-form-field [helperText]="helperText" [fixedLabel]="true">
    <label for="username">Hello, Course App</label>
    <input value="admin" minlength="5" type="text" autocomplete="new-password" required />
  </pulso-form-field>

Componente: pulso-switch

O componente pulso-switch representa um interruptor de alternância, permitindo seleção binária de ligar/desligar.

• Inputs:

  • [disabled]: Determina se o switch está desativado.

• [checked]: Determina se o switch está inicialmente marcado.

• Exemplo de Uso:

  <pulso-switch [disabled]="true" [checked]="true"> </pulso-switch>

Componente: pulso-select

O componente pulso-select é utilizado para criar um seletor personalizado, que permite aos usuários escolher uma opção de uma lista suspensa.

• Inputs:

  • [formControl]: Define o controle de formulário associado ao seletor.
  • [selectSearch]: Configurações para pesquisa dentro do seletor.

• Elementos Filhos:

  • <pulso-option>: Define uma opção dentro do seletor.

• Exemplo de Uso:

<pulso-form-field placeholder="Selecione um tipo">
  <label for="select"> Type </label>
  <pulso-select [formControl]="control" [selectSearch]="{ isServer: false }">
    <pulso-option [value]="null">Selecione uma opção</pulso-option>
    <!-- Outras opções aqui -->
  </pulso-select>
</pulso-form-field>

Componente: pulso-option

O componente pulso-option é utilizado dentro de um seletor para definir uma opção que pode ser selecionada pelo usuário.

• Inputs:

  • [value]: Define o valor associado à opção.
  • [disabled]: Define se o campo está habilitado ou não.

• Exemplo de Uso:

  <pulso-option [value]="1">Option 1</pulso-option>

Componente: pulso-icon

O componente pulso-icon é utilizado para exibir ícones dentro de outros componentes ou diretamente no conteúdo da página.

• Elementos Filhos:

  • O nome do ícone desejado.

• Exemplo de Uso:

  <pulso-icon>rdicon-default</pulso-icon>

Componente: pulso-mat-icon

O componente pulso-mat-icon é utilizado para exibir ícones do material dentro de outros componentes ou diretamente no conteúdo da página.

• Elementos Filhos:

  • O nome do ícone desejado.

• Exemplo de Uso:

  <pulso-mat-icon>remove</pulso-mat-icon>

Serviço: PulsoToastService

O serviço PulsoToastService é responsável por exibir mensagens de toast na aplicação.

• Métodos:

  • show(message, title, duration, iconName, className): Exibe uma mensagem de toast com os parâmetros fornecidos.
  • Métodos semelhantes estão disponíveis para exibir mensagens informativas, de aviso e de erro.

• Exemplo de Uso:

  pulsoToastService.success("Sucesso", "Operação realizada com sucesso", 3000);

Módulo Pulso

O módulo PulsoModule é responsável por agrupar e fornecer os componentes e serviços essenciais do framework Pulso para integração em projetos Angular.

• Exemplo de Uso

Configurações

Para utilizar o método forRoot e fornecer as configurações do Pulso, é necessário fornecer um objeto PulsoSettings que contenha as seguintes propriedades:

export interface PulsoSettings {
  toast?: {
    duration: number;
    position: "top" | "bottom";
  };
  formField?: {
    fixedLabel?: boolean;
    size?: "small" | "medium" | "large";
  };
  token: BrandsWithTr;
}

• toast: Configurações para mensagens de toast, como duração e posição.
  • duration: Duração da mensagem de toast em milissegundos.
  • position: Posição da mensagem de toast na tela.
• formField: Configurações para campos de formulário, como rótulos fixos e tamanho.
  • fixedLabel: Determina se os rótulos dos campos de formulário devem ser fixos.
  • size: Define o tamanho dos campos de formulário.
• token: Define o tema do Pulso a ser aplicado.

import { PulsoModule } from "@raiadrogasil/@pulso-angular";

@NgModule({
  imports: [
    PulsoModule.forRoot({
      token: "raia", // Escolha do tema
      toast: {
        duration: 3000,
        position: "bottom",
      },
      fixedLabel: true,
      // Outras configurações do Pulso
    }),
  ],
})
export class AppModule {}

No seu arquivo angular.json, adicione o arquivo de estilos do Pulso ao array de estilos do seu projeto:

    "build": {
            "styles": [
              "src/styles.scss",
              "./node_modules/pulso-angular-components/styles/styles.scss"
            ]
            }

Este é um exemplo básico de como importar e configurar o módulo PulsoModule em um módulo Angular. Certifique-se de substituir as configurações pelo tema desejado e outras personalizações necessárias para o seu projeto.

  static forRoot(settings: PulsoSettings): ModuleWithProviders<PulsoModule>

ModuleWithProviders: Utilizado para importar o módulo principal com as configurações específicas do Pulso. Recebe como parâmetro um objeto PulsoSettings que contém as configurações do toast, rótulos fixos e tema.

  static async choseTokenTheme(token: BrandsWithTr):void

Método para definir o tema com base no token fornecido. Este método é usado internamente para aplicar o tema do Pulso.

  static forChildren(): ModuleWithProviders<PulsoModule>

Utilizado para importar o módulo Pulso em módulos secundários.