@rubeusteam/rb-angular-components

v1.5.1

Published

4 days ago

Componentes Angular reutilizáveis da Rubeus com header, sidebar, ajuda e loader; compatíveis com Angular 19–22

0High
0Medium
0Low

angular componentes rubeus material

RbAngularComponents

Este projeto foi gerado usando o Angular CLI versão 19.1.8.

This project was generated using Angular CLI version 19.1.8.

Visão Geral | Overview

RbAngularComponents é uma biblioteca de componentes, diretivas, serviços e pipes Angular criada para acelerar o desenvolvimento de interfaces com consistência e boas práticas.

RbAngularComponents is a library of Angular components, directives, services, and pipes designed to accelerate UI development with consistency and best practices.

Requisitos

Angular 19, 20, 21 ou 22 (suporta componentes standalone)
Node.js >= 18.x
npm >= 9.x
Angular Material (alguns componentes são baseados nele)

Requirements

Angular 19, 20, 21 ou 22 (supports standalone components)
Node.js >= 18.x
npm >= 9.x
Angular Material (some components are based on it)

Compatibilidade e estilos

A versão 1.5.1 usa compilação parcial com Angular 19.0.0 e a faixa ^19.0.0 || ^20.0.0 || ^21.0.0 || ^22.0.0. Router, Material e CDK são peers explícitos; Angular/Material/CDK devem usar majors compatíveis. RxJS mantém ^7.8.0. Zone.js é opcional (~0.15.0 || ~0.16.0); aplicações zoneless não precisam instalá-lo. Versões posteriores ao 22 precisam de nova validação.

No styles.scss global, além do tema Angular Material da aplicação:

@use '@rubeusteam/rb-angular-components/styles';

O caminho legado @rubeusteam/rb-angular-components/src/lib/styles/index permanece disponível. Para tipografia isolada, use @use '@rubeusteam/rb-angular-components/styles/typography'. Não importe SCSS do source do repositório. Os assets públicos incluem assets/rb-loader, assets/logo-apps e os logotipos assets/rubeus*.svg. Configure a cópia no angular.json conforme a seção do loader, ou copie todo o diretório assets do pacote. O arquivo de design Ellipse.svg, sem uso nos componentes, não é distribuído.

A matriz fixa Angular 19.0.0, 19.1.8, 19.2.25, 20.0.7, 20.3.33, 21.0.9, 21.2.25, 22.0.8 e 22.2.1. O pacote e sua API passam por instalação isolada, AOT, Sass e testes DOM nos modos previstos. As notificações assíncronas do sidebar e da ajuda funcionam com Zone.js e em zoneless. Inputs, outputs, seletores, logoutLabel e comportamento do loader foram preservados.

Instalação | Installation

Instale a biblioteca via npm:

Install the library via npm:

npm install rb-angular-components

Uso em Componentes Standalone | Usage in Standalone Components

Você pode importar qualquer componente, diretiva ou pipe diretamente em seu componente standalone.

You can import any component, directive, or pipe directly into your standalone component.

import { RbCrudComponent } from 'rb-angular-components';

@Component({
  standalone: true,
  imports: [RbCrudComponent],
  selector: 'app-demo',
  template: '<rb-crud></rb-crud>'
})
export class DemoComponent {}

Uso em Módulos Angular (NgModules) | Usage in Angular Modules (NgModules)

Se seu projeto usa NgModules, ainda assim você pode usar os componentes standalone importando-os no array imports.

If your project uses NgModules, you can still use the standalone components by importing them in the imports array.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RbCrudComponent } from 'rb-angular-components';

@NgModule({
  imports: [
    CommonModule,
    RbCrudComponent // standalone component
  ]
})
export class MyModule {}

Opcionalmente, você pode criar um módulo compartilhado que agrupe e exporte todos os componentes standalone para conveniência.

Optionally, you can create a shared module that groups and exports all standalone components for convenience.

Recursos Disponíveis

Componentes (ex: RbCrudComponent, RbFilterComponent)
Diretivas (ex: RbDynamicButtonDirective)
Pipes (ex: RbCustomPipe)
Serviços (ex: ClientFilterService)
Traduções (ex: PaginatorPtbrIntlService)

Available Resources

Components (e.g., RbCrudComponent, RbFilterComponent)
Directives (e.g., RbDynamicButtonDirective)
Pipes (e.g., RbCustomPipe)
Services (e.g., ClientFilterService)
Translations (e.g., PaginatorPtbrIntlService)

Documentação por Recurso | Documentation by Feature

Você pode acessar a documentação de cada recurso em sua respectiva pasta:

You can access documentation for each feature in its respective folder:

Recursos Adicionais | Additional Resources

Para uso do Angular CLI e comandos, veja a Referência do Angular CLI.

For Angular CLI usage and commands, see the Angular CLI Reference.

Loader padrão Rubeus (0.0.2-dev.17)

RbLoaderComponent usa o GIF original do CRM, com logo de 60 px e overlay branco de opacidade 0,75. Para distribuir as imagens sem incorporá-las ao bundle JavaScript, adicione a entrada abaixo aos assets de build e teste do angular.json do consumidor:

{
  "glob": "**/*",
  "input": "node_modules/@rubeusteam/rb-angular-components/assets/rb-loader",
  "output": "/assets/rb-loader"
}

Importe RbLoaderComponent de @rubeusteam/rb-angular-components no componente/NgModule consumidor:

<rb-loader [active]="loading" [label]="loadingLabel" />
<rb-loader [overlay]="false" [message]="loadingMessage" />

| Input | Padrão | Uso | | --- | --- | --- | | active | true | Monta/remove o status e overlay | | overlay | true | Cobre a viewport; false mantém o loader no fluxo da página | | message | '' | Mensagem opcional visível e nome acessível | | label | 'Carregando...' | Nome acessível quando não existe mensagem | | logoUrl | 'assets/rb-loader/rbGif.gif' | URL da animação, relativa ao base href | | staticLogoUrl | 'assets/rb-loader/rubeus.svg' | Logo estática usada com movimento reduzido |

A aplicação gerencia o estado de carregamento e as traduções. O componente não assina chamadas HTTP nem altera a navegação. O overlay usa z-index: 1001, conforme o CRM. Os assets são cópias de crm/ui/img/rbGif.gif e crm/ui/img/icon-rubeus.svg.