@seniorsistemas/angular-components 18.0.3 → 18.1.0

package/numeric-mask/README.md

@@ -33,22 +33,22 @@ import { FormsModule } from '@angular/forms';
 import { NumericMaskDirective } from '@seniorsistemas/angular-components/numeric-mask';
 
 @Component({
-  selector: 'app-example',
-  standalone: true,
-  imports: [FormsModule, NumericMaskDirective],
-  template: `
-    <input
-      type="text"
-      sNumericMask
-      [locale]="'pt-BR'"
-      [minDecimalPlaces]="2"
-      [maxDecimalPlaces]="2"
-      [(ngModel)]="value"
-    />
-  `
+    selector: 'app-example',
+    standalone: true,
+    imports: [FormsModule, NumericMaskDirective],
+    template: `
+        <input
+            type="text"
+            sNumericMask
+            [locale]="'pt-BR'"
+            [minDecimalPlaces]="2"
+            [maxDecimalPlaces]="2"
+            [(ngModel)]="value"
+        />
+    `,
 })
 export class ExampleComponent {
-  value: string | null = null;
+    value: string | null = null;
 }
 ```
 
@@ -56,24 +56,37 @@ export class ExampleComponent {
 
 ### Inputs
 
-| Input | Tipo | Padrão | Descrição |
-|-------|------|--------|-----------|
-| `locale` | `string \| undefined` | `undefined` | Locale para formatação (ex: 'pt-BR', 'en-US', 'de-DE', 'fr-FR'). Se não fornecido, usa automaticamente o locale do `LocaleService` |
-| `minDecimalPlaces` | `number` | `0` | Quantidade mínima de casas decimais a exibir. Na formatação (blur), ajusta o valor para ter no mínimo esse número de casas decimais |
-| `maxDecimalPlaces` | `number` | `10` | Quantidade máxima de casas decimais permitidas. Na formatação (blur), limita a exibição a esse número de casas decimais |
-| `allowNegative` | `boolean` | `false` | Permite valores negativos. Use `+` e `-` para alternar o sinal |
-| `allowScientificNotation` | `boolean` | `true` | Habilita suporte a notação científica (ex: `1e-6`). Quando `false`, bloqueia digitação e colagem de valores com `e`/`E` |
-| `textAlign` | `'left' \| 'right'` | `'right'` | Alinhamento do texto dentro do input |
-| `min` | `number \| undefined` | `undefined` | Valor mínimo permitido. Quando definido, adiciona validação nativa |
-| `max` | `number \| undefined` | `undefined` | Valor máximo permitido. Quando definido, adiciona validação nativa |
+| Input                     | Tipo                  | Padrão      | Descrição                                                                                                                                                     |
+| ------------------------- | --------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `locale`                  | `string \| undefined` | `undefined` | Locale para formatação (ex: 'pt-BR', 'en-US', 'de-DE', 'fr-FR'). Se não fornecido, usa automaticamente o locale do `LocaleService`                            |
+| `minDecimalPlaces`        | `number`              | `0`         | Quantidade mínima de casas decimais a exibir. Na formatação, o valor sempre terá no mínimo esse número de casas decimais, preenchendo com zeros se necessário |
+| `maxDecimalPlaces`        | `number`              | `10`        | Quantidade máxima de casas decimais permitidas. Na formatação, limita a exibição a esse número de casas decimais, truncando valores maiores                   |
+| `allowNegative`           | `boolean`             | `false`     | Permite valores negativos. Use `+` e `-` para alternar o sinal                                                                                                |
+| `allowScientificNotation` | `boolean`             | `true`      | Habilita suporte a notação científica (ex: `1e-6`). Quando `false`, bloqueia digitação e colagem de valores com `e`/`E`                                       |
+| `min`                     | `number \| undefined` | `undefined` | Valor mínimo permitido. Quando definido, adiciona validação nativa                                                                                            |
+| `max`                     | `number \| undefined` | `undefined` | Valor máximo permitido. Quando definido, adiciona validação nativa                                                                                            |
 
 ## Comportamento
 
+### Casas Decimais (minDecimalPlaces e maxDecimalPlaces)
+
+A diretiva agora aplica um controle preciso sobre as casas decimais exibidas:
+
+- **minDecimalPlaces**: Define o número mínimo de casas decimais. Se o valor tiver menos casas decimais, zeros são adicionados à direita.
+- **maxDecimalPlaces**: Define o número máximo de casas decimais. Se o valor tiver mais casas decimais, é **truncado** (não arredondado).
+
+Exemplos com formatação (blur):
+
+- Valor `12,1` com `minDecimalPlaces="3"` → exibido como `12,100`
+- Valor `3,3333333` com `maxDecimalPlaces="4"` → exibido como `3,3333` (truncado)
+- Valor `5` com `minDecimalPlaces="2"` e `maxDecimalPlaces="2"` → exibido como `5,00`
+
 ### Truncamento de Decimais
 
 Ao contrário de outras máscaras numéricas que **arredondam**, a `numeric-mask` **trunca** valores que excedem `maxDecimalPlaces`. Isso é crucial para precisão em valores financeiros e científicos.
 
 Exemplo com `maxDecimalPlaces="2"`:
+
 - Valor digitado: `1,999`
 - Valor no modelo: `1.999` (sem truncamento)
 - Valor exibido (blur): `1,99` (truncado, não arredondado para `2,00`)
@@ -82,6 +95,7 @@ Exemplo com `maxDecimalPlaces="2"`:
 ### Bloqueio de Caracteres Inválidos
 
 A diretiva bloqueia automaticamente a digitação de caracteres que não sejam:
+
 - Dígitos (0-9)
 - Separador decimal (`,` ou `.` conforme o locale)
 - Caracteres de controle (Tab, Backspace, Delete, etc.)
@@ -89,18 +103,25 @@ A diretiva bloqueia automaticamente a digitação de caracteres que não sejam:
 - Ctrl/Cmd/Alt
 
 Para **valores negativos**, você pode:
+
 - Pressionar `-` no início do valor para ativar/desativar o sinal negativo
 - Pressionar `+` para remover o sinal negativo
 
+### Alinhamento de Texto
+
+O texto dentro do input é sempre alinhado à **direita**, facilitando a leitura de valores numéricos.
+
 ### Focus
 
 Quando o input recebe foco:
+
 - Remove a formatação (separadores de milhar)
 - Exibe o valor com o separador decimal do locale
 - Auto-seleciona todo o valor para fácil substituição
 - Mostra o valor **completo** do modelo (sem truncamento)
 
 Exemplo:
+
 - Valor formatado: `1.234,56`
 - No focus: `1234,56` (apenas separador decimal, valor completo)
 
@@ -108,11 +129,11 @@ Exemplo:
 
 A diretiva separa claramente o valor armazenado do valor exibido:
 
-| Situação | Modelo | Display |
-|----------|--------|---------|
-| Digitando | `1.999` | `1,999` |
-| Após blur | `1.999` | `1,99` (truncado) |
-| Com foco | `1.999` | `1,999` (completo) |
+| Situação           | Modelo                    | Display                             |
+| ------------------ | ------------------------- | ----------------------------------- |
+| Digitando          | `1.999`                   | `1,999`                             |
+| Após blur          | `1.999`                   | `1,99` (truncado)                   |
+| Com foco           | `1.999`                   | `1,999` (completo)                  |
 | Notação científica | `0.000000000000000000001` | `0,00000000000000000000` (truncado) |
 
 **Garantia:** O modelo **sempre** armazena o valor completo, sem truncamento. As propriedades `minDecimalPlaces` e `maxDecimalPlaces` afetam **apenas** a formatação visual.
@@ -120,6 +141,7 @@ A diretiva separa claramente o valor armazenado do valor exibido:
 ### Blur
 
 Quando o input perde foco:
+
 - Reaplica a formatação completa com separadores de milhar
 - Valida o valor conforme as regras configuradas
 
@@ -135,22 +157,22 @@ Quando o input perde foco:
 
 ```typescript
 @Component({
-  selector: 'app-basic',
-  standalone: true,
-  imports: [FormsModule, NumericMaskDirective],
-  template: `
-    <input
-      sNumericMask
-      [locale]="'pt-BR'"
-      [minDecimalPlaces]="2"
-      [maxDecimalPlaces]="2"
-      [(ngModel)]="value"
-    />
-    <p>Valor: {{ value }}</p>
-  `
+    selector: 'app-basic',
+    standalone: true,
+    imports: [FormsModule, NumericMaskDirective],
+    template: `
+        <input
+            sNumericMask
+            [locale]="'pt-BR'"
+            [minDecimalPlaces]="2"
+            [maxDecimalPlaces]="2"
+            [(ngModel)]="value"
+        />
+        <p>Valor: {{ value }}</p>
+    `,
 })
 export class BasicComponent {
-  value: string | null = null;
+    value: string | null = null;
 }
 ```
 
@@ -158,23 +180,23 @@ export class BasicComponent {
 
 ```typescript
 @Component({
-  selector: 'app-negative',
-  standalone: true,
-  imports: [FormsModule, NumericMaskDirective],
-  template: `
-    <input
-      sNumericMask
-      [allowNegative]="true"
-      [locale]="'pt-BR'"
-      [minDecimalPlaces]="2"
-      [maxDecimalPlaces]="2"
-      [(ngModel)]="value"
-    />
-    <p>Pressione - para alternar o sinal</p>
-  `
+    selector: 'app-negative',
+    standalone: true,
+    imports: [FormsModule, NumericMaskDirective],
+    template: `
+        <input
+            sNumericMask
+            [allowNegative]="true"
+            [locale]="'pt-BR'"
+            [minDecimalPlaces]="2"
+            [maxDecimalPlaces]="2"
+            [(ngModel)]="value"
+        />
+        <p>Pressione - para alternar o sinal</p>
+    `,
 })
 export class NegativeComponent {
-  value: string | null = null;
+    value: string | null = null;
 }
 ```
 
@@ -182,23 +204,23 @@ export class NegativeComponent {
 
 ```typescript
 @Component({
-  selector: 'app-scientific',
-  standalone: true,
-  imports: [FormsModule, NumericMaskDirective],
-  template: `
-    <input
-      sNumericMask
-      [allowScientificNotation]="true"
-      [minDecimalPlaces]="0"
-      [maxDecimalPlaces]="15"
-      [(ngModel)]="value"
-      placeholder="Ex: 1e-6, 1.5e-10"
-    />
-    <p>Valor: {{ value }}</p>
-  `
+    selector: 'app-scientific',
+    standalone: true,
+    imports: [FormsModule, NumericMaskDirective],
+    template: `
+        <input
+            sNumericMask
+            [allowScientificNotation]="true"
+            [minDecimalPlaces]="0"
+            [maxDecimalPlaces]="15"
+            [(ngModel)]="value"
+            placeholder="Ex: 1e-6, 1.5e-10"
+        />
+        <p>Valor: {{ value }}</p>
+    `,
 })
 export class ScientificComponent {
-  value: string | null = null;
+    value: string | null = null;
 }
 ```
 
@@ -206,22 +228,22 @@ export class ScientificComponent {
 
 ```typescript
 @Component({
-  selector: 'app-no-scientific',
-  standalone: true,
-  imports: [FormsModule, NumericMaskDirective],
-  template: `
-    <input
-      sNumericMask
-      [allowScientificNotation]="false"
-      [locale]="'pt-BR'"
-      [minDecimalPlaces]="2"
-      [maxDecimalPlaces]="2"
-      [(ngModel)]="value"
-    />
-  `
+    selector: 'app-no-scientific',
+    standalone: true,
+    imports: [FormsModule, NumericMaskDirective],
+    template: `
+        <input
+            sNumericMask
+            [allowScientificNotation]="false"
+            [locale]="'pt-BR'"
+            [minDecimalPlaces]="2"
+            [maxDecimalPlaces]="2"
+            [(ngModel)]="value"
+        />
+    `,
 })
 export class NoScientificComponent {
-  value: string | null = null;
+    value: string | null = null;
 }
 ```
 
@@ -229,35 +251,31 @@ export class NoScientificComponent {
 
 ```typescript
 @Component({
-  selector: 'app-min-max',
-  standalone: true,
-  imports: [FormsModule, NumericMaskDirective],
-  template: `
-    <input
-      sNumericMask
-      [minDecimalPlaces]="2"
-      [maxDecimalPlaces]="2"
-      [min]="0"
-      [max]="1000"
-      [(ngModel)]="price"
-      #priceInput="ngModel"
-    />
-    
-    @if (priceInput.errors?.['min']) {
-      <span class="error">
-        Valor mínimo: {{ priceInput.errors?.['min'].min }}
-      </span>
-    }
-    
-    @if (priceInput.errors?.['max']) {
-      <span class="error">
-        Valor máximo: {{ priceInput.errors?.['max'].max }}
-      </span>
-    }
-  `
+    selector: 'app-min-max',
+    standalone: true,
+    imports: [FormsModule, NumericMaskDirective],
+    template: `
+        <input
+            sNumericMask
+            [minDecimalPlaces]="2"
+            [maxDecimalPlaces]="2"
+            [min]="0"
+            [max]="1000"
+            [(ngModel)]="price"
+            #priceInput="ngModel"
+        />
+
+        @if (priceInput.errors?.['min']) {
+            <span class="error"> Valor mínimo: {{ priceInput.errors?.['min'].min }} </span>
+        }
+
+        @if (priceInput.errors?.['max']) {
+            <span class="error"> Valor máximo: {{ priceInput.errors?.['max'].max }} </span>
+        }
+    `,
 })
 export class MinMaxComponent {
-  price: string | null = null;
+    price: string | null = null;
 }
 ```
 
@@ -265,22 +283,22 @@ export class MinMaxComponent {
 
 ```typescript
 @Component({
-  selector: 'app-high-precision',
-  standalone: true,
-  imports: [FormsModule, NumericMaskDirective],
-  template: `
-    <input
-      sNumericMask
-      [locale]="'pt-BR'"
-      [minDecimalPlaces]="0"
-      [maxDecimalPlaces]="8"
-      [(ngModel)]="cryptoValue"
-    />
-    <p>Valor da criptomoeda: {{ cryptoValue }}</p>
-  `
+    selector: 'app-high-precision',
+    standalone: true,
+    imports: [FormsModule, NumericMaskDirective],
+    template: `
+        <input
+            sNumericMask
+            [locale]="'pt-BR'"
+            [minDecimalPlaces]="0"
+            [maxDecimalPlaces]="8"
+            [(ngModel)]="cryptoValue"
+        />
+        <p>Valor da criptomoeda: {{ cryptoValue }}</p>
+    `,
 })
 export class HighPrecisionComponent {
-  cryptoValue: string | null = null;
+    cryptoValue: string | null = null;
 }
 ```
 
@@ -302,17 +320,21 @@ import { NumericMaskDirective } from '@seniorsistemas/angular-components/numeric
 import { LocaleModule } from '@seniorsistemas/angular-components/locale';
 
 @Component({
-  selector: 'app-with-locale-service',
-  standalone: true,
-  imports: [FormsModule, NumericMaskDirective, LocaleModule],
-  template: `
-    <!-- Locale automático do usuário -->
-    <input sNumericMask [minDecimalPlaces]="2"
-      [maxDecimalPlaces]="2" [(ngModel)]="value" />
-  `
+    selector: 'app-with-locale-service',
+    standalone: true,
+    imports: [FormsModule, NumericMaskDirective, LocaleModule],
+    template: `
+        <!-- Locale automático do usuário -->
+        <input
+            sNumericMask
+            [minDecimalPlaces]="2"
+            [maxDecimalPlaces]="2"
+            [(ngModel)]="value"
+        />
+    `,
 })
 export class WithLocaleServiceComponent {
-  value: string | null = null;
+    value: string | null = null;
 }
 ```
 
@@ -320,17 +342,22 @@ export class WithLocaleServiceComponent {
 
 ```typescript
 @Component({
-  selector: 'app-explicit-locale',
-  standalone: true,
-  imports: [FormsModule, NumericMaskDirective],
-  template: `
-    <!-- Locale explícito, não usa LocaleService -->
-    <input sNumericMask [locale]="'en-US'" [minDecimalPlaces]="2"
-      [maxDecimalPlaces]="2" [(ngModel)]="value" />
-  `
+    selector: 'app-explicit-locale',
+    standalone: true,
+    imports: [FormsModule, NumericMaskDirective],
+    template: `
+        <!-- Locale explícito, não usa LocaleService -->
+        <input
+            sNumericMask
+            [locale]="'en-US'"
+            [minDecimalPlaces]="2"
+            [maxDecimalPlaces]="2"
+            [(ngModel)]="value"
+        />
+    `,
 })
 export class ExplicitLocaleComponent {
-  value: string | null = null;
+    value: string | null = null;
 }
 ```
 
@@ -346,14 +373,14 @@ Para melhor acessibilidade, adicione manualmente:
 ```html
 <label for="price">Preço (até 2 casas decimais)</label>
 <input
-  id="price"
-  type="text"
-  sNumericMask
-  [locale]="'pt-BR'"
-  [minDecimalPlaces]="2"
-      [maxDecimalPlaces]="2"
-  [(ngModel)]="price"
-  aria-label="Digite um número com até 2 casas decimais"
+    id="price"
+    type="text"
+    sNumericMask
+    [locale]="'pt-BR'"
+    [minDecimalPlaces]="2"
+    [maxDecimalPlaces]="2"
+    [(ngModel)]="price"
+    aria-label="Digite um número com até 2 casas decimais"
 />
 ```
 
@@ -365,3 +392,4 @@ Para melhor acessibilidade, adicione manualmente:
 ## Licença
 
 MIT
+

package/numeric-mask/lib/numeric-mask/numeric-mask.directive.d.ts

@@ -47,11 +47,6 @@ export declare class NumericMaskDirective implements OnInit, ControlValueAccesso
      * @default true
      */
     allowScientificNotation: import("@angular/core").InputSignal<boolean>;
-    /**
-     * Text alignment in input
-     * @default 'right'
-     */
-    textAlign: import("@angular/core").InputSignal<"left" | "right">;
     /**
      * Minimum value allowed
      */
@@ -153,7 +148,7 @@ export declare class NumericMaskDirective implements OnInit, ControlValueAccesso
     private parseStringToValue;
     /**
      * Formats a numeric value according to the locale
-     * Truncates (never rounds) to maxDecimalPlaces for display purposes only
+     * Truncates (never rounds) to maxDecimalPlaces and pads with zeros to minDecimalPlaces
      * @private
      */
     private formatNumeric;
@@ -191,5 +186,5 @@ export declare class NumericMaskDirective implements OnInit, ControlValueAccesso
     setDisabledState(isDisabled: boolean): void;
     validate(control: AbstractControl): ValidationErrors | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<NumericMaskDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NumericMaskDirective, "[sNumericMask]", never, { "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "minDecimalPlaces": { "alias": "minDecimalPlaces"; "required": false; "isSignal": true; }; "maxDecimalPlaces": { "alias": "maxDecimalPlaces"; "required": false; "isSignal": true; }; "allowNegative": { "alias": "allowNegative"; "required": false; "isSignal": true; }; "allowScientificNotation": { "alias": "allowScientificNotation"; "required": false; "isSignal": true; }; "textAlign": { "alias": "textAlign"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NumericMaskDirective, "[sNumericMask]", never, { "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "minDecimalPlaces": { "alias": "minDecimalPlaces"; "required": false; "isSignal": true; }; "maxDecimalPlaces": { "alias": "maxDecimalPlaces"; "required": false; "isSignal": true; }; "allowNegative": { "alias": "allowNegative"; "required": false; "isSignal": true; }; "allowScientificNotation": { "alias": "allowScientificNotation"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seniorsistemas/angular-components",
-  "version": "18.0.3",
+  "version": "18.1.0",
   "peerDependencies": {
     "@angular/cdk": "^18.2.14",
     "@angular/common": "^18.2.0",
@@ -46,18 +46,18 @@
       "esm": "./esm2022/alert/seniorsistemas-angular-components-alert.mjs",
       "default": "./fesm2022/seniorsistemas-angular-components-alert.mjs"
     },
-    "./badge": {
-      "types": "./badge/index.d.ts",
-      "esm2022": "./esm2022/badge/seniorsistemas-angular-components-badge.mjs",
-      "esm": "./esm2022/badge/seniorsistemas-angular-components-badge.mjs",
-      "default": "./fesm2022/seniorsistemas-angular-components-badge.mjs"
-    },
     "./autocomplete": {
       "types": "./autocomplete/index.d.ts",
       "esm2022": "./esm2022/autocomplete/seniorsistemas-angular-components-autocomplete.mjs",
       "esm": "./esm2022/autocomplete/seniorsistemas-angular-components-autocomplete.mjs",
       "default": "./fesm2022/seniorsistemas-angular-components-autocomplete.mjs"
     },
+    "./badge": {
+      "types": "./badge/index.d.ts",
+      "esm2022": "./esm2022/badge/seniorsistemas-angular-components-badge.mjs",
+      "esm": "./esm2022/badge/seniorsistemas-angular-components-badge.mjs",
+      "default": "./fesm2022/seniorsistemas-angular-components-badge.mjs"
+    },
     "./bignumber-input": {
       "types": "./bignumber-input/index.d.ts",
       "esm2022": "./esm2022/bignumber-input/seniorsistemas-angular-components-bignumber-input.mjs",
@@ -352,6 +352,12 @@
       "esm": "./esm2022/picklist/seniorsistemas-angular-components-picklist.mjs",
       "default": "./fesm2022/seniorsistemas-angular-components-picklist.mjs"
     },
+    "./pin-code-field": {
+      "types": "./pin-code-field/index.d.ts",
+      "esm2022": "./esm2022/pin-code-field/seniorsistemas-angular-components-pin-code-field.mjs",
+      "esm": "./esm2022/pin-code-field/seniorsistemas-angular-components-pin-code-field.mjs",
+      "default": "./fesm2022/seniorsistemas-angular-components-pin-code-field.mjs"
+    },
     "./product-header": {
       "types": "./product-header/index.d.ts",
       "esm2022": "./esm2022/product-header/seniorsistemas-angular-components-product-header.mjs",