@gipisistemas/ngx-core 1.0.10 → 1.0.12

package/README.md

@@ -1,6 +1,16 @@
-# GIPI NGX-CORE
+# GIPI - ngx-core
 
-NGX-CORE é um projeto modular que fornece componentes, interceptadores, guardas de rotas, estilos e utilitários para acelerar o desenvolvimento das aplicações da GIPI Sistemas. Projetada para ser flexível e escalável, ela facilita a criação de interfaces padronizadas e a implementação de funcionalidades essenciais para os projetos.
+Este projeto foi gerado utilizando o [Angular CLI](https://github.com/angular/angular-cli) - _versão `19.2.0`_.
+
+## 📝 Sobre
+
+A biblioteca `ngx-core` fornece utilitários, temas e componentes reutilizáveis para projetos Angular, facilitando o desenvolvimento de interfaces consistentes e responsivas.
+
+## 🧩 Pré-requisitos
+
+-   [Node](https://nodejs.org/en/download) - _vesão `^18.19.1 || ^20.11.1 || ^22.0.0`._
+-   [Angular](https://angular.dev/) - _versão `20.x.x`._
+-   [Angular Material](https://material.angular.io/) - _versão `20.x.x`_.
 
 ## ⚠️ Estrutura de Commits (Conventional Commits)
 
@@ -27,95 +37,130 @@ Sempre coloque dois pontos e um espaço depois do tipo.
 Somente commits fix, feat ou com BREAKING CHANGE geram versão.
 Outros tipos (chore, docs, refactor, etc.) não geram release automaticamente.
 
-## 🚀 Servidor de desenvolvimento
+## 🛠️ Desenvolvimento
 
-Para iniciar um servidor de desenvolvimento local, execute:
+Para compilar a biblioteca em modo de desenvolvimento, execute:
 
 ```bash
-ng run watch
+npm run watch
 ```
 
-Após iniciar o servidor, o diretório `/dist` será gerado automaticamente. Se ele já existir, será excluído e recriado, garantindo uma versão sempre atualizada da saída do projeto. Além disso, qualquer modificação nos arquivos do projeto acionará uma nova `build` automaticamente, aplicando as mudanças sem necessidade de reconstrução manual.
-
-## 🏗 Estrutura de código
-
-**Ainda falta detalhar**
-
-## 🏨 Building
-
-Para gerar a `build` do projeto, execute:
+Isso executará o comando:
 
 ```bash
-ng build
+ng build --watch --configuration development
 ```
 
-Isso compilará seu projeto e armazenará os artefatos de build no diretório `dist/`. Por padrão, o build de produção otimiza seu aplicativo para desempenho e velocidade.
+Uma vez compilada. A biblioteca será recarregada automaticamente sempre que houver modificações nos arquivos.
 
-## 📦 Instalação
+## 🖥️ Utilização no aplicativo
 
 Para utilizar esta biblioteca, siga os passos abaixo:
 
-### 1️⃣ Instale os pacotes necessários
+### 1️⃣ Instalar a biblioteca no aplicativo
 
-Execute o seguinte comando para instalar as dependências obrigatórias:
+Instale a biblioteca no seu aplicativo Angular executando:
 
 ```bash
-npm install extensao moment-timezone
+npm install caminho-da-lib\\dist\\ngx-core
 ```
 
-### 2️⃣ Adicione o Angular Material
+Substitua `caminho-da-lib` pelo caminho correto onde a biblioteca foi compilada.
 
-Se ainda não tiver o Angular Material instalado, execute:
+### 2️⃣ Configurar `preserveSymlinks`
 
-```bash
-ng add @angular/material
-```
-
-Siga as instruções do assistente de instalação para configurar o Material corretamente.
-
-## ⚙️ Configuração
-
-Para evitar erros durante a execução, é necessário realizar algumas configurações no projeto Angular.
+É necessário definir `preserveSymlinks: true` no arquivo `angular.json` para evitar o seguinte erro:
 
-### 1️⃣ Configurar preserveSymlinks
+```plaintext
+core.mjs:7195 ERROR RuntimeError: NG0203: inject() must be called from an injection context...
+```
 
-É necessário definir `preserveSymlinks: true` no arquivo `angular.json` para evitar o seguinte erro:
-`core.mjs:7195 ERROR RuntimeError: NG0203: inject() must be called from an injection context...`
+🔹 No `angular.json`, dentro de `projects -> nome-do-projeto -> architect -> build -> options`, adicione:
 
-🔹 No `angular.json`, dentro de `projects -> gipi-web -> architect -> build -> options`, adicione: `"preserveSymlinks": true`
+```json
+"preserveSymlinks": true
+```
 
-### 2️⃣ Adicionar os Providers Necessários
+### 3️⃣ Adicionar os providers necessários
 
+Esses providers são essenciais para o funcionamento da biblioteca.
 No `main.ts` ou no arquivo de configuração `app.config.ts`, adicione os seguintes providers:
 
 ```typescript
-import { provideHttpClient, withInterceptors } from "@angular/common/http";
-import { importProvidersFrom, inject, provideAppInitializer } from "@angular/core";
-import { FormsModule } from "@angular/forms";
+import { bootstrapApplication } from "@angular/platform-browser";
+import { AppComponent } from "./app/app.component";
+import { importProvidersFrom } from "@angular/core";
 import { MatSnackBarModule } from "@angular/material/snack-bar";
-import { AuthService } from "@domain/auth/services/auth.service";
-import { authInterceptor, DEFAULT_MESSAGES, errorInterceptor, provideALlowedPublicRoutes, provideAppMessages, provideBaseAuthService } from "@gipisistemas/ngx-core";
-import { appRoutes } from "./app.routes";
+import { provideHttpClient, withInterceptorsFromDi } from "@angular/common/http";
+import { provideAppMessages, DEFAULT_MESSAGES } from "@gipisistemas/ngx-core";
 
 bootstrapApplication(AppComponent, {
     providers: [
-        ...importProvidersFrom([MatSnackBarModule, FormsModule]),
-        provideBaseAuthService(AuthService),
-        // Rotas públicas que não podem redirecionar para a rota / mesmo que autenticado
-        provideALlowedPublicRoutes(["/oauth/change-password", "/oauth/confirm-access"]),
-        provideAppInitializer(() => {
-            const authService = inject(AuthService);
-            return authService.load();
-        }),
-        provideHttpClient(withInterceptors([authInterceptor, errorInterceptor])),
+        // ...outros providers
+        importProvidersFrom(MatSnackBarModule),
+        provideHttpClient(withInterceptorsFromDi()),
         provideAppMessages(DEFAULT_MESSAGES),
-        providePaginatorIntl(),
     ],
 }).catch((err) => console.error(err));
 ```
 
-Esses providers são essenciais para o funcionamento da biblioteca.
+### 4️⃣ Temas e estilos globais
+
+Definição de temas:
+
+🔹 Se não informar o `$custom-theme` no mixin `all-component-themes` a biblioteca irá aderir as paletas de cores, fontes e densidades padrão.
+
+##### Palettes
+
+-   primary: `$palette-primary`
+-   secondary: `$palette-secondary`
+-   success: `$palette-success`
+-   information: `$palette-information`
+-   warning: `$palette-warning`
+-   danger: `$palette-danger`
+-   white: `$palette-white`
+-   black: `$palette-black`
+-   pastels: `$palette-pastels`
+
+##### Typography
+
+-   font-family: `'Roboto, sans-serif'`
+-   font-size: `1.4rem`
+-   font-base: `62.5%` - _100% equivale a 16px; Logo 62.5% de 16px = 10px; Assim 1rem equivale 10px;_
+
+##### Density
 
-## 🔗 Recursos Adicionais
+-   scale: `0`
+
+Utilizando tema customizado:
+
+```scss
+@use "@gipisistemas/ngx-core" as ngx-core;
+
+$custom-theme: ngx-core.define-theme(
+    (
+        palettes: (
+            primary: $palette-primary,
+            secondary: $palette-secondary,
+            // ... other palettes
+        ),
+        typography: (
+            font-family: "Roboto, sans-serif",
+            font-size: 1.4rem,
+            font-base: 62.5%,
+        ),
+    )
+);
+
+@include ngx-core.all-component-themes($custom-theme);
+```
+
+Utilizando tema padrão:
+
+```scss
+@use "@gipisistemas/ngx-core" as ngx-core;
+@include ngx-core.all-component-themes();
+```
 
-Para obter mais informações sobre como usar o Angular CLI, incluindo referências detalhadas de comandos, visite a página [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli).
+## 🚀 Produção
+Ainda será implementado

package/{projects/ngx-core/src/components/checkbox/checkbox.component.scss → components/checkbox/checkbox.scss}

@@ -1,14 +1,19 @@
 @use '../../theming/utils' as utils;
+@use '../../theming/breakpoints' as breakpoints;
 
 @mixin checkbox-theme($theme: ()) {
     $font-family: utils.get-font-family($theme);
     $font-size: utils.get-font-size($theme);
     $font-color: utils.get-font-color($theme);
+
     $white-100: utils.get-color($theme, white, 100);
+
     $primary-500: utils.get-color($theme, primary, 500);
+
+    $secondary-100: utils.get-color($theme, secondary, 100);
     $secondary-200: utils.get-color($theme, secondary, 200);
-    $secondary-500: utils.get-color($theme, secondary, 500);
     $secondary-300: utils.get-color($theme, secondary, 300);
+    $secondary-500: utils.get-color($theme, secondary, 500);
 
     .g-checkbox {
         display: flex;
@@ -126,7 +131,7 @@
             }
         }
 
-        > label {
+        .g-checkbox-label {
             display: flex;
             align-items: center;
             gap: 0.2rem;
@@ -145,4 +150,43 @@
             }
         }
     }
+
+    .g-checkbox-group {
+        display: flex;
+        flex-direction: column;
+        gap: 0.4rem;
+        width: fit-content;
+        user-select: none;
+        font-family: $font-family;
+
+        .g-checkbox-group-container {
+            display: flex;
+            flex-direction: column;
+            gap: 0.8rem;
+        }
+
+        &.g-checkbox-group-disabled .g-checkbox-group-container {
+            cursor: not-allowed;
+        }
+
+        .g-checkbox-group-select-all {
+            margin-bottom: 0.4rem;
+        }
+
+        .g-checkbox-group-options {
+            display: flex;
+            flex-direction: column;
+            gap: 0.8rem;
+            border-left: 2px solid $secondary-100;
+            margin-left: 1rem;
+            padding-left: 1.6rem;
+        }
+
+        @include breakpoints.mobile-view() {
+            .g-checkbox-group-horizontal .g-checkbox-group-options {
+                flex-direction: column;
+                gap: 0.8rem;
+            }
+        }
+    }
 }