@gipisistemas/ngx-core 1.0.7 → 1.0.9

package/README.md

@@ -1,168 +1,168 @@
-# GIPI - ngx-core
-
-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 `^19.2.0`._
--   [Angular Material](https://material.angular.io/) - _versão `^19.2.0`_.
--   [Extenso](https://github.com/lusofonia/extenso.js) - _versão `^2.1.0`_.
--   [Moment-timezone](https://momentjs.com/timezone/) - _versão `^0.5.47`_.
-
-## ⚠️ Estrutura de Commits (Conventional Commits)
-
-Este projeto utiliza **Semantic Release** para gerar versões automaticamente.
-A versão (`patch`, `minor`, `major`) é definida de acordo com o **tipo do commit**.
-
-### 🔑 Regras principais
-- **fix:** incrementa **patch** → `1.0.0 → 1.0.1`
-- **feat:** incrementa **minor** → `1.0.0 → 1.1.0`
-- **feat!:** ou qualquer commit com **BREAKING CHANGE** no corpo → incrementa **major** → `1.0.0 → 2.0.0`
-
-### ✅ Exemplos de commits válidos
-- `fix: corrige bug no botão de login`
-- `feat: adiciona novo componente de avatar`
-- `feat!: altera API de autenticação`
-- `chore: atualiza dependências (não gera release)`
-- `docs: adiciona instruções no README (não gera release)`
-
-### ⚠️ Importante
-Sempre coloque dois pontos e um espaço depois do tipo.
-- ✅ fix: descrição
-- ❌ fix:descrição
-
-Somente commits fix, feat ou com BREAKING CHANGE geram versão.
-Outros tipos (chore, docs, refactor, etc.) não geram release automaticamente.
-
-## 🛠️ Desenvolvimento
-
-Para compilar a biblioteca em modo de desenvolvimento, execute:
-
-```bash
-npm run watch
-```
-
-Isso executará o comando:
-
-```bash
-ng build --watch --configuration development
-```
-
-Uma vez compilada. A biblioteca será recarregada automaticamente sempre que houver modificações nos arquivos.
-
-## 🖥️ Utilização no aplicativo
-
-Para utilizar esta biblioteca, siga os passos abaixo:
-
-### 1️⃣ Instalar a biblioteca no aplicativo
-
-Instale a biblioteca no seu aplicativo Angular executando:
-
-```bash
-npm install caminho-da-lib\\dist\\ngx-core
-```
-
-Substitua `caminho-da-lib` pelo caminho correto onde a biblioteca foi compilada.
-
-### 2️⃣ Configurar `preserveSymlinks`
-
-É necessário definir `preserveSymlinks: true` no arquivo `angular.json` para evitar o seguinte erro:
-
-```plaintext
-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:
-
-```json
-"preserveSymlinks": true
-```
-
-### 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 { bootstrapApplication } from "@angular/platform-browser";
-import { AppComponent } from "./app/app.component";
-import { importProvidersFrom } from "@angular/core";
-import { MatSnackBarModule } from "@angular/material/snack-bar";
-import { provideHttpClient, withInterceptorsFromDi } from "@angular/common/http";
-import { provideAppMessages, DEFAULT_MESSAGES } from "@gipisistemas/ngx-core";
-
-bootstrapApplication(AppComponent, {
-    providers: [
-        // ...outros providers
-        importProvidersFrom(MatSnackBarModule),
-        provideHttpClient(withInterceptorsFromDi()),
-        provideAppMessages(DEFAULT_MESSAGES),
-    ],
-}).catch((err) => console.error(err));
-```
-
-### 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
-
--   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();
-```
-
-## 🚀 Produção
-Ainda será implementado
+# GIPI - ngx-core
+
+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 `^19.2.0`._
+-   [Angular Material](https://material.angular.io/) - _versão `^19.2.0`_.
+-   [Extenso](https://github.com/lusofonia/extenso.js) - _versão `^2.1.0`_.
+-   [Moment-timezone](https://momentjs.com/timezone/) - _versão `^0.5.47`_.
+
+## ⚠️ Estrutura de Commits (Conventional Commits)
+
+Este projeto utiliza **Semantic Release** para gerar versões automaticamente.
+A versão (`patch`, `minor`, `major`) é definida de acordo com o **tipo do commit**.
+
+### 🔑 Regras principais
+- **fix:** incrementa **patch** → `1.0.0 → 1.0.1`
+- **feat:** incrementa **minor** → `1.0.0 → 1.1.0`
+- **feat!:** ou qualquer commit com **BREAKING CHANGE** no corpo → incrementa **major** → `1.0.0 → 2.0.0`
+
+### ✅ Exemplos de commits válidos
+- `fix: corrige bug no botão de login`
+- `feat: adiciona novo componente de avatar`
+- `feat!: altera API de autenticação`
+- `chore: atualiza dependências (não gera release)`
+- `docs: adiciona instruções no README (não gera release)`
+
+### ⚠️ Importante
+Sempre coloque dois pontos e um espaço depois do tipo.
+- ✅ fix: descrição
+- ❌ fix:descrição
+
+Somente commits fix, feat ou com BREAKING CHANGE geram versão.
+Outros tipos (chore, docs, refactor, etc.) não geram release automaticamente.
+
+## 🛠️ Desenvolvimento
+
+Para compilar a biblioteca em modo de desenvolvimento, execute:
+
+```bash
+npm run watch
+```
+
+Isso executará o comando:
+
+```bash
+ng build --watch --configuration development
+```
+
+Uma vez compilada. A biblioteca será recarregada automaticamente sempre que houver modificações nos arquivos.
+
+## 🖥️ Utilização no aplicativo
+
+Para utilizar esta biblioteca, siga os passos abaixo:
+
+### 1️⃣ Instalar a biblioteca no aplicativo
+
+Instale a biblioteca no seu aplicativo Angular executando:
+
+```bash
+npm install caminho-da-lib\\dist\\ngx-core
+```
+
+Substitua `caminho-da-lib` pelo caminho correto onde a biblioteca foi compilada.
+
+### 2️⃣ Configurar `preserveSymlinks`
+
+É necessário definir `preserveSymlinks: true` no arquivo `angular.json` para evitar o seguinte erro:
+
+```plaintext
+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:
+
+```json
+"preserveSymlinks": true
+```
+
+### 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 { bootstrapApplication } from "@angular/platform-browser";
+import { AppComponent } from "./app/app.component";
+import { importProvidersFrom } from "@angular/core";
+import { MatSnackBarModule } from "@angular/material/snack-bar";
+import { provideHttpClient, withInterceptorsFromDi } from "@angular/common/http";
+import { provideAppMessages, DEFAULT_MESSAGES } from "@gipisistemas/ngx-core";
+
+bootstrapApplication(AppComponent, {
+    providers: [
+        // ...outros providers
+        importProvidersFrom(MatSnackBarModule),
+        provideHttpClient(withInterceptorsFromDi()),
+        provideAppMessages(DEFAULT_MESSAGES),
+    ],
+}).catch((err) => console.error(err));
+```
+
+### 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
+
+-   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();
+```
+
+## 🚀 Produção
+Ainda será implementado

package/components/button/button.component.scss

@@ -1,9 +1,5 @@
 @use '../../theming/utils' as utils;
 
-:host {
-    position: relative;
-}
-
 @mixin button-theme($theme: ()) {
     $font-family: utils.get-font-family($theme);
     $font-size: utils.get-font-size($theme);

package/components/button-group/button-group.component.scss

@@ -12,10 +12,6 @@
     $primary-500: utils.get-color($theme, primary, 500);
     $primary-600: utils.get-color($theme, primary, 600);
 
-    .g-button-group-label {
-        @include utils.field-label($theme);
-    }
-
     .g-button-group {
         display: flex;
         flex-direction: column;

package/components/checkbox/checkbox.component.scss

@@ -57,7 +57,7 @@
                 }
             }
 
-            &[data-state='INDETERMINATE']::after {
+            &[data-state='indeterminate']::after {
                 content: '-';
                 display: block;
                 text-align: center;
@@ -74,7 +74,7 @@
             }
 
             /* Estado "unchecked" */
-            &:not(:checked)[data-state='UNCHECKED'] {
+            &:not(:checked)[data-state='unchecked'] {
                 color: transparent;
 
                 &.primary {
@@ -89,7 +89,7 @@
 
             /* Estado "checked" */
             &:checked,
-            &[data-state='CHECKED'] {
+            &[data-state='checked'] {
                 color: $white-100;
 
                 &.primary,
@@ -100,7 +100,8 @@
             }
 
             /* Estado "indeterminate" */
-            &[data-state='INDETERMINATE'] {
+            &:indeterminate,
+            &[data-state='indeterminate'] {
                 &.primary {
                     background-color: $white-100;
                     border-color: $primary-500;

package/components/chips/chips.component.scss

@@ -12,24 +12,24 @@
     $primary-600: utils.get-color($theme, primary, 600);
 
     .g-chips-control .mdc-evolution-chip-set__chips {
-        --mdc-chip-container-shape-radius: 2rem;
-        --mdc-chip-container-height: 2.6rem;
+        --mat-chip-container-shape-radius: 2rem;
+        --mat-chip-container-height: 2.6rem;
 
         margin-left: 0 !important;
         align-items: center !important;
         gap: 1rem !important;
 
         &:not(.g-chips-control-item-all) {
-            --mdc-chip-elevated-container-color: #{$secondary-100};
-            --mdc-chip-outline-color: #{$secondary-200};
-            --mdc-chip-label-text-color: #{$font-color};
+            --mat-chip-elevated-container-color: #{$secondary-100};
+            --mat-chip-outline-color: #{$secondary-200};
+            --mat-chip-label-text-color: #{$font-color};
             cursor: default;
         }
 
         .g-chips-control-item-all {
-            --mdc-chip-elevated-container-color: #{$primary-500};
-            --mdc-chip-outline-color: #{$primary-600};
-            --mdc-chip-label-text-color: #{$white-100};
+            --mat-chip-elevated-container-color: #{$primary-500};
+            --mat-chip-outline-color: #{$primary-600};
+            --mat-chip-label-text-color: #{$white-100};
 
             .mdc-evolution-chip__cell .mat-mdc-chip-action {
                 cursor: pointer;
@@ -41,9 +41,9 @@
 
             &.mat-mdc-chip-disabled {
                 --mat-chip-disabled-container-opacity: 1;
-                --mdc-chip-elevated-disabled-container-color: #{$secondary-50};
-                --mdc-chip-disabled-outline-color: #{$secondary-100};
-                --mdc-chip-disabled-label-text-color: #{$secondary-100};
+                --mat-chip-elevated-disabled-container-color: #{$secondary-50};
+                --mat-chip-disabled-outline-color: #{$secondary-100};
+                --mat-chip-disabled-label-text-color: #{$secondary-100};
 
                 cursor: not-allowed !important;
             }
@@ -59,7 +59,7 @@
                     font-family: $font-family !important;
                     font-size: 1.2rem !important;
                     font-weight: 500 !important;
-                    line-height: var(--mdc-chip-container-height) !important;
+                    line-height: var(--mat-chip-container-height) !important;
                     letter-spacing: normal !important;
                 }
             }

package/components/date-picker/date-picker.component.scss

@@ -5,10 +5,6 @@
     $font-size: utils.get-font-size($theme);
     $font-color: utils.get-font-color($theme);
 
-    .g-date-picker-label {
-        @include utils.field-label($theme);
-    }
-
     .g-date-picker {
         @include utils.mat-form-field-reset($theme);
 

package/components/date-range-picker/date-range-picker.component.scss

@@ -20,6 +20,22 @@
 
     .g-date-range-picker {
         @include utils.mat-form-field-reset($theme);
+
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        font-family: $font-family;
+        color: $font-color;
+        position: relative;
+        overflow: visible;
+        min-width: 0;
+        width: 100%;
+        min-height: fit-content;
+        height: fit-content;
+    }
+
+    .g-date-range-picker-form-field {
+        width: 100%;
     }
 
     .cdk-overlay-pane:has(.g-date-range-picker-ckd-container) {

package/components/empty/empty.component.scss

@@ -31,6 +31,7 @@
 
         .g-empty-label {
             color: $black-300;
+            text-align: center;
         }
     }
 }

package/components/input/input.component.scss

@@ -5,10 +5,6 @@
     $font-size: utils.get-font-size($theme);
     $font-color: utils.get-font-color($theme);
 
-    .g-input-label {
-        @include utils.field-label($theme);
-    }
-
     .g-input {
         @include utils.mat-form-field-reset($theme);
 

package/components/input-currency/input-currency.component.scss

@@ -5,10 +5,6 @@
     $font-size: utils.get-font-size($theme);
     $font-color: utils.get-font-color($theme);
 
-    .g-input-currency-label {
-        @include utils.field-label($theme);
-    }
-
     .g-input-currency {
         @include utils.mat-form-field-reset($theme);
 

package/components/input-file/input-file.component.scss

@@ -20,10 +20,6 @@
     $secondary-300: utils.get-color($theme, secondary, 300);
     $secondary-500: utils.get-color($theme, secondary, 500);
 
-    .g-input-file-label {
-        @include utils.field-label($theme);
-    }
-
     .g-input-file {
         display: flex;
         flex-direction: column;

package/components/input-group/input-group.component.scss

@@ -10,10 +10,6 @@
     $primary-500: utils.get-color($theme, primary, 500);
     $pastels-secondary: utils.get-color($theme, pastels, secondary);
 
-    .g-input-group-label {
-        @include utils.field-label($theme);
-    }
-
     .g-input-group {
         display: flex;
         flex-direction: column;

package/components/input-phone/input-phone.component.scss

@@ -5,10 +5,6 @@
     $font-size: utils.get-font-size($theme);
     $font-color: utils.get-font-color($theme);
 
-    .g-input-phone-label {
-        @include utils.field-label($theme);
-    }
-
     .g-input-phone {
         @include utils.mat-form-field-reset($theme);
 

package/components/label/label.component.scss

@@ -0,0 +1,11 @@
+@use '../../theming/utils' as utils;
+
+@mixin label-theme($theme: ()) {
+    $font-family: utils.get-font-family($theme);
+    $font-size: utils.get-font-size($theme);
+    $font-color: utils.get-font-color($theme);
+
+    > label {
+        @include utils.field-label($theme);
+    }
+}

package/components/{old-datetime-picker/datetime-picker.component.scss → month-picker/month-picker.component.scss}

@@ -1,16 +1,11 @@
 @use '../../theming/utils' as utils;
-// @import '@ng-matero/extensions/prebuilt-themes/azure-blue.css';
 
-@mixin datetime-picker-theme($theme: ()) {
+@mixin month-picker-theme($theme: ()) {
     $font-family: utils.get-font-family($theme);
     $font-size: utils.get-font-size($theme);
     $font-color: utils.get-font-color($theme);
 
-    .g-datetime-picker-label {
-        @include utils.field-label($theme);
-    }
-
-    .g-datetime-picker {
+    .g-month-picker {
         @include utils.mat-form-field-reset($theme);
 
         display: flex;
@@ -25,4 +20,14 @@
         min-height: fit-content;
         height: fit-content;
     }
+
+    .g-month-picker-calendar {
+        .mat-calendar-period-button {
+            pointer-events: none !important;
+        }
+
+        .mat-calendar-arrow {
+            display: none !important;
+        }
+    }
 }

package/components/paginator/paginator.component.scss

@@ -0,0 +1,11 @@
+@use '../../theming/utils' as utils;
+
+@mixin paginator-theme($theme: ()) {
+    $font-family: utils.get-font-family($theme);
+    $font-size: utils.get-font-size($theme);
+    $font-color: utils.get-font-color($theme);
+
+    .g-paginator {
+        @include utils.mat-paginator($theme);
+    }
+}

package/components/password-requeriments/password-requeriments.component.scss

@@ -1,4 +1,5 @@
 @use '../../theming/utils' as utils;
+@use '../../theming/breakpoints' as media;
 
 @mixin password-requeriments-theme($theme: ()) {
     $font-family: utils.get-font-family($theme);
@@ -15,10 +16,20 @@
         flex-direction: row;
         align-items: stretch;
         justify-content: center;
-        gap: 5rem;
-        padding: 4px 0;
+        gap: 4rem;
+        padding: 0.4rem 0;
         width: 100%;
 
+        @include media.tablet-view {
+            gap: 3.2rem;
+            padding: 0.6rem 0;
+        }
+
+        @include media.mobile-view {
+            padding: 0.6rem 0;
+            gap: 1.6rem;
+        }
+
         .g-password-requeriments-group-item {
             display: flex;
             flex-direction: column;
@@ -26,15 +37,22 @@
             justify-content: center;
             height: 100%;
             font-family: $font-family;
+            min-width: 6rem;
+
+            @include media.mobile-view {
+                width: 100%;
+                justify-content: space-between;
+            }
 
             &.g-password-requeriments-group-item-invalid .g-password-requeriments-group-item-title,
-            &.g-password-requeriments-group-item-invalid .g-password-requeriments-group-item-subtitle {
+            &.g-password-requeriments-group-item-invalid
+                .g-password-requeriments-group-item-subtitle {
                 color: #{utils.get-color($theme, primary, 500)} !important;
             }
 
             .g-password-requeriments-group-item-title,
             .g-password-requeriments-group-item-subtitle {
-                line-height: 1.8rem;
+                line-height: 1.6rem;
                 color: $font-color;
                 text-align: center;
             }