@po-ui/ng-components 21.28.0 → 21.29.0

package/lib/components/po-dynamic/po-dynamic-form/interfaces/po-dynamic-form-field.interface.d.ts

@@ -117,6 +117,8 @@ export interface PoDynamicFormField extends PoDynamicField {
      *
      * **Componente compatível:** `po-input`.
      * > também é atribuído ao utilizar a propriedade `type: time`.
+     *
+     * > Incompatível com `po-decimal`.
      */
     mask?: string;
     /**
@@ -167,17 +169,23 @@ export interface PoDynamicFormField extends PoDynamicField {
     /**  Quantidade máxima de casas decimais.
      *
      * > Esta propriedade só pode ser utilizada quando o `type` for *currency* ou *decimal*.
+     *
+     * > Quando utilizado com `displayFormat`, será respeitado o valor **mais restritivo** entre esta propriedade e o número de casas decimais definido no formato.
      */
     decimalsLength?: number;
     /** Quantidade máxima de dígitos antes do separador decimal. O valor máximo permitido é 13
      *
      * > Esta propriedade só pode ser utilizada quando o `type` for *currency* ou *decimal*.
+     *
+     * > Quando utilizado com `displayFormat`, será respeitado o valor **mais restritivo** entre esta propriedade e o número de dígitos inteiros definido no formato.
      */
     thousandMaxlength?: number;
     /**
      * Regex para validação do campo.
      *
      * **Componentes compatíveis:** `po-input`, `po-password`.
+     *
+     * > Incompatível com `po-decimal`.
      * */
     pattern?: string;
     /**
@@ -379,6 +387,26 @@ export interface PoDynamicFormField extends PoDynamicField {
      * **Componentes compatíveis:** `po-datepicker`, `po-datetimepicker`, `po-timepicker`, `po-lookup`.
      */
     format?: string | Array<string>;
+    /**
+     * Define uma máscara de formatação numérica avançada para o campo.
+     *
+     * Simbologia suportada:
+     * - `9`: Dígito obrigatório (preenche com zero à esquerda no blur);
+     * - `>`: Supressão de zero à esquerda (dígito não obrigatório);
+     * - `<`: Decimal flutuante, supressão de zeros à direita (dígito não obrigatório);
+     * - `.`: Separador decimal (convertido conforme locale);
+     * - `,`: Separador de milhar/grupo (convertido conforme locale);
+     * - `-`: Sinal negativo (deve ser o primeiro caractere do formato).
+     *
+     * > Quando utilizado com `decimalsLength` ou `thousandMaxlength`, será respeitado o valor **mais restritivo** entre a propriedade e o formato.
+     *
+     * Exemplos: `'>>>,>>>,>>9.99'`, `'->>9.99'`, `'999.9'`
+     *
+     * > Esta propriedade só pode ser utilizada quando o `type` for *currency* ou *decimal*.
+     *
+     * **Componente compatível:** `po-decimal`.
+     */
+    displayFormat?: string;
     /**
      * Nome da propriedade do objeto retornado que será utilizado como descrição do campo.
      *

package/lib/components/po-field/index.d.ts

@@ -21,6 +21,9 @@ export * from './po-datepicker-range/po-datepicker-range.component';
 export * from './po-datetimepicker/po-datetimepicker.component';
 export * from './po-datetimepicker/po-datetimepicker.module';
 export * from './po-decimal/po-decimal.component';
+export * from './po-decimal/utils/po-decimal-format.util';
+export * from './po-decimal/interfaces/po-decimal-format-parsed.interface';
+export * from './po-decimal/interfaces/po-decimal-format-result.interface';
 export * from './po-email/po-email.component';
 export * from './po-input/po-input.component';
 export * from './po-input/po-mask';

package/lib/components/po-field/po-decimal/interfaces/po-decimal-format-parsed.interface.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @docsPrivate
+ *
+ * @description
+ *
+ * Resultado do parsing de uma string de formato numérico.
+ */
+export interface PoDecimalFormatParsed {
+    integerFormat: Array<string>;
+    decimalFormat: Array<string>;
+    groupSeparatorPositions: Array<number>;
+    allowNegative: boolean;
+    integerDigitCount: number;
+    decimalDigitCount: number;
+    originalFormat: string;
+}

package/lib/components/po-field/po-decimal/interfaces/po-decimal-format-result.interface.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @docsPrivate
+ *
+ * @description
+ *
+ * Resultado da aplicação do formato numérico a um valor.
+ */
+export interface PoDecimalFormatResult {
+    viewValue: string;
+    modelValue: number | undefined;
+    isValid: boolean;
+}

package/lib/components/po-field/po-decimal/po-decimal.component.d.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, ElementRef, OnDestroy, OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { AfterViewInit, ElementRef, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
 import { AbstractControl } from '@angular/forms';
 import { PoInputBaseComponent } from '../po-input/po-input-base.component';
 /**
@@ -39,6 +39,11 @@ import { PoInputBaseComponent } from '../po-input/po-input-base.component';
  *  <file name="sample-po-decimal-hourly-wage-reactive-form/sample-po-decimal-hourly-wage-reactive-form.component.html"> </file>
  *  <file name="sample-po-decimal-hourly-wage-reactive-form/sample-po-decimal-hourly-wage-reactive-form.component.ts"> </file>
  * </example>
+ *
+ * <example name="po-decimal-display-format" title="PO Decimal - Display Format">
+ *  <file name="sample-po-decimal-display-format/sample-po-decimal-display-format.component.html"> </file>
+ *  <file name="sample-po-decimal-display-format/sample-po-decimal-display-format.component.ts"> </file>
+ * </example>
  */
 export declare class PoDecimalComponent extends PoInputBaseComponent implements AfterViewInit, OnInit, OnDestroy, OnChanges {
     private readonly el;
@@ -72,6 +77,7 @@ export declare class PoDecimalComponent extends PoInputBaseComponent implements
      * - A soma total de `p-decimals-length` com `p-thousand-maxlength` limita-se à 16;
      * - Esta propriedade sobrepõe apenas o valor **padrão** de `p-thousand-maxlength`;
      * - Caso `p-thousand-maxlength` tenha um valor definido, esta propriedade poderá receber apenas o valor restante do limite total (16).
+     * - Quando utilizado com `p-display-format`, será respeitado o valor **mais restritivo** entre esta propriedade e o número de casas decimais definido no formato.
      *
      * @default `2`
      */
@@ -88,6 +94,8 @@ export declare class PoDecimalComponent extends PoInputBaseComponent implements
      * - O valor máximo permitido é 13;
      * - A soma total de `p-decimals-length` com `p-thousand-maxlength` limita-se à 16;
      * - Esta propriedade sobrepõe o valor definido em `p-decimals-length`.
+     * - Quando utilizado com `p-display-format`, será respeitado o valor **mais restritivo** entre esta propriedade e o número de dígitos inteiros definido no
+     * formato.
      *
      * @default `13`
      */
@@ -105,6 +113,31 @@ export declare class PoDecimalComponent extends PoInputBaseComponent implements
      *
      */
     set locale(locale: string);
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define uma máscara de formatação numérica avançada para o campo.
+     *
+     * Simbologia suportada:
+     * - `9`: Dígito obrigatório (preenche com zero à esquerda no blur);
+     * - `>`: Supressão de zero à esquerda (dígito não obrigatório);
+     * - `<`: Decimal flutuante, supressão de zeros à direita (dígito não obrigatório);
+     * - `,` e `.`: Separadores de milhar/grupo e decimal (convertidos conforme `p-locale`);
+     * - `-`: Sinal negativo (deve ser o primeiro caractere do formato).
+     *
+     * > **Importante:**
+     * - A formatação via `p-display-format` é apenas visual; o valor do model é sempre o número puro.
+     * - Quando o valor pré-preenchido não atende ao formato (overflow ou negativo sem `-`), o campo exibe com a formatação padrão do `po-decimal` (separadores de milhar + `p-decimals-length` casas decimais).
+     * - Quando `p-decimals-length` ou `p-thousand-maxlength` são definidos, será respeitado o valor **mais restritivo** entre o formato e a propriedade.
+     * - Incompatível com `p-mask`, `p-mask-format-model`, `p-mask-no-length-validation` e `p-pattern`.
+     *
+     * Exemplos de formato: `>>>,>>>,>>9.99`, `->>,>>9.99`, `999.9`, `>>>,>>9.9<<<<<<`
+     *
+     */
+    readonly displayFormat: import("@angular/core").InputSignal<string>;
+    private readonly formatParsed;
     /**
      * @optional
      *
@@ -152,6 +185,14 @@ export declare class PoDecimalComponent extends PoInputBaseComponent implements
         hideAdditionalHelp: boolean;
         helperSettings?: any;
     };
+    private applyFormatOnBlur;
+    private resolveViewValue;
+    private applyFormatOnBlurAndSetView;
+    private formatMaskWithAblPositions;
+    private validateFormatOnInput;
+    private getEffectiveFormatParsed;
+    private getModelValueFromView;
+    private refreshOnPropertyChange;
     private containsComma;
     private containsMoreThanOneDecimalSeparator;
     private controlChangeEmitter;

package/lib/components/po-field/po-decimal/utils/po-decimal-format.util.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Formatação numérica avançada para o po-decimal.
+ *
+ * Simbologia suportada:
+ *  9 - Dígito obrigatório (preenche com zero)
+ *  > - Supressão de zero à esquerda
+ *  < - Supressão de zeros à direita (decimal flutuante)
+ *  , - Separador de grupo (convertido conforme locale)
+ *  . - Separador decimal (convertido conforme locale)
+ *  - - Sinal negativo (primeiro caractere)
+ */
+import { PoDecimalFormatParsed } from '../interfaces/po-decimal-format-parsed.interface';
+import { PoDecimalFormatResult } from '../interfaces/po-decimal-format-result.interface';
+export { PoDecimalFormatParsed } from '../interfaces/po-decimal-format-parsed.interface';
+export { PoDecimalFormatResult } from '../interfaces/po-decimal-format-result.interface';
+/**
+ * Aplica o formato ao valor numérico, gerando a representação visual.
+ *
+ * @returns viewValue formatado + flag de validação (overflow = isValid false)
+ */
+export declare function applyDecimalFormat(value: number | undefined | null, parsed: PoDecimalFormatParsed, decimalSeparator: string, thousandSeparator: string): PoDecimalFormatResult;
+/**
+ * Deriva os limites de dígitos do formato para compatibilidade com p-decimals-length / p-thousand-maxlength.
+ */
+export declare function getFormatLimits(parsed: PoDecimalFormatParsed): {
+    decimalsLength: number;
+    thousandMaxlength: number;
+} | null;
+/**
+ * Faz o parsing da string de formato numérico.
+ *
+ * Regra: '.' no formato = separador decimal, ',' = separador de grupo.
+ * Sem '.' = formato puramente inteiro.
+ */
+export declare function parseDecimalFormat(format: string): PoDecimalFormatParsed;
+/**
+ * Valida se o valor digitado cabe no formato (usado durante input em tempo real).
+ */
+export declare function validateAgainstFormat(rawValue: string, parsed: PoDecimalFormatParsed, decimalSeparator: string): boolean;
+/**
+ * Insere separadores de grupo baseando-se nas posições do formato original,
+ * calculando da direita para a esquerda. Funciona tanto com formato truncado
+ * (quando p-thousand-maxlength restringe) quanto em tamanho completo.
+ *
+ * Aceita digits como Array<string> (blur, com placeholders) ou string (digitação).
+ */
+export declare function insertGroupSeparatorsFromRight(digits: Array<string> | string, parsed: PoDecimalFormatParsed, thousandSeparator: string): string;

package/lib/pipes/index.d.ts

@@ -1,2 +1,3 @@
 export * from './pipes.module';
 export * from './po-time/index';
+export * from './po-decimal/index';

package/lib/pipes/po-decimal/index.d.ts

@@ -0,0 +1,2 @@
+export * from './po-decimal.pipe';
+export * from './po-decimal.module';

package/lib/pipes/po-decimal/po-decimal.module.d.ts

@@ -0,0 +1,2 @@
+export declare class PoDecimalFormatModule {
+}

package/lib/pipes/po-decimal/po-decimal.pipe.d.ts

@@ -0,0 +1,15 @@
+import { PipeTransform } from '@angular/core';
+/**
+ * Aplica máscaras de formatação numérica avançada a valores numéricos.
+ *
+ * > Retorna string vazia quando o valor excede a capacidade do formato (overflow).
+ *
+ * @example
+ * ```html
+ * {{ 4567.88 | poDecimalFormat: '>>>,>>>,>>9.99' }}
+ * ```
+ */
+export declare class PoDecimalFormatPipe implements PipeTransform {
+    private readonly languageService;
+    transform(value: number | string | null | undefined, format: string, locale?: string): string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@po-ui/ng-components",
-  "version": "21.28.0",
+  "version": "21.29.0",
   "description": "PO UI - Components",
   "author": "PO UI",
   "license": "MIT",
@@ -22,8 +22,8 @@
   },
   "dependencies": {
     "@angular/cdk": "~21.2.14",
-    "@po-ui/style": "21.28.0",
-    "@po-ui/ng-schematics": "21.28.0",
+    "@po-ui/style": "21.29.0",
+    "@po-ui/ng-schematics": "21.29.0",
     "driver.js": "~1.4.0",
     "echarts": "^6.1.0",
     "tslib": "^2.6.2"
@@ -39,7 +39,7 @@
     "@angular/platform-browser-dynamic": "^21",
     "@angular/router": "^21",
     "@angular-devkit/schematics": "^21",
-    "@po-ui/style": "21.28.0",
+    "@po-ui/style": "21.29.0",
     "rxjs": "~7.8.1",
     "zone.js": "~0.15.0"
   },

package/schematics/ng-add/index.js

@@ -18,7 +18,7 @@ function default_1(options) {
 }
 function addPoPackageAndInstall() {
     return (tree, context) => {
-        (0, package_config_1.addPackageToPackageJson)(tree, '@po-ui/ng-components', '21.28.0');
+        (0, package_config_1.addPackageToPackageJson)(tree, '@po-ui/ng-components', '21.29.0');
         // install packages
         context.addTask(new tasks_1.NodePackageInstallTask());
     };

package/schematics/ng-update/v14/index.js

@@ -6,7 +6,7 @@ const tasks_1 = require("@angular-devkit/schematics/tasks");
 const package_config_1 = require("@po-ui/ng-schematics/package-config");
 const changes_1 = require("./changes");
 function default_1() {
-    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.28.0', changes_1.updateDepedenciesVersion), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.29.0', changes_1.updateDepedenciesVersion), postUpdate()]);
 }
 function postUpdate() {
     return (_, context) => {

package/schematics/ng-update/v15/index.js

@@ -11,7 +11,7 @@ const changes_1 = require("./changes");
 const httpClientModuleName = 'HttpClientModule';
 const httpClientModuleSourcePath = '@angular/common/http';
 function default_1() {
-    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.28.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.29.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
 }
 function postUpdate() {
     return (_, context) => {

package/schematics/ng-update/v16/index.js

@@ -6,7 +6,7 @@ const tasks_1 = require("@angular-devkit/schematics/tasks");
 const package_config_1 = require("@po-ui/ng-schematics/package-config");
 const changes_1 = require("./changes");
 function default_1() {
-    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.28.0', changes_1.updateDepedenciesVersion), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.29.0', changes_1.updateDepedenciesVersion), postUpdate()]);
 }
 function postUpdate() {
     return (_, context) => {

package/schematics/ng-update/v17/index.js

@@ -6,7 +6,7 @@ const tasks_1 = require("@angular-devkit/schematics/tasks");
 const package_config_1 = require("@po-ui/ng-schematics/package-config");
 const changes_1 = require("./changes");
 function default_1() {
-    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.28.0', changes_1.updateDepedenciesVersion), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.29.0', changes_1.updateDepedenciesVersion), postUpdate()]);
 }
 function postUpdate() {
     return (_, context) => {

package/schematics/ng-update/v18/index.js

@@ -40,11 +40,11 @@ function main(options) {
             configureNewIcon.toLowerCase() === 'y' ||
             configureNewIcon.toLowerCase() === 'sim' ||
             configureNewIcon.toLowerCase() === '') {
-            return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.28.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+            return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.29.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
         }
         else {
             return (0, schematics_1.chain)([
-                (0, package_config_1.updatePackageJson)('21.28.0', changes_1.updateDepedenciesVersion),
+                (0, package_config_1.updatePackageJson)('21.29.0', changes_1.updateDepedenciesVersion),
                 addImportOnly(options, [IconsDictionaryName, poIconDictionary], poModuleSourcePath),
                 addProviderToAppModule(options, newProviderDictionary),
                 updateAppConfigFileRule(),

package/schematics/ng-update/v19/index.js

@@ -40,11 +40,11 @@ function main(options) {
             configureNewIcon.toLowerCase() === 'y' ||
             configureNewIcon.toLowerCase() === 'sim' ||
             configureNewIcon.toLowerCase() === '') {
-            return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.28.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+            return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.29.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
         }
         else {
             return (0, schematics_1.chain)([
-                (0, package_config_1.updatePackageJson)('21.28.0', changes_1.updateDepedenciesVersion),
+                (0, package_config_1.updatePackageJson)('21.29.0', changes_1.updateDepedenciesVersion),
                 addImportOnly(options, [IconsDictionaryName, poIconDictionary], poModuleSourcePath),
                 addProviderToAppModule(options, newProviderDictionary),
                 updateAppConfigFileRule(),

package/schematics/ng-update/v2/index.js

@@ -10,7 +10,7 @@ const package_config_1 = require("@po-ui/ng-schematics/package-config");
 const changes_1 = require("./changes");
 function updateToV2() {
     return (0, schematics_1.chain)([
-        updatePackageJson('21.28.0', changes_1.dependeciesChanges),
+        updatePackageJson('21.29.0', changes_1.dependeciesChanges),
         (0, replace_1.replaceInFile)('tslint.json', changes_1.tsLintReplaces),
         (0, replace_1.replaceInFile)('angular.json', changes_1.angularJsonReplaces),
         createUpgradeRule(),

package/schematics/ng-update/v20/index.js

@@ -40,11 +40,11 @@ function main(options) {
             configureNewIcon.toLowerCase() === 'y' ||
             configureNewIcon.toLowerCase() === 'sim' ||
             configureNewIcon.toLowerCase() === '') {
-            return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.28.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+            return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.29.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
         }
         else {
             return (0, schematics_1.chain)([
-                (0, package_config_1.updatePackageJson)('21.28.0', changes_1.updateDepedenciesVersion),
+                (0, package_config_1.updatePackageJson)('21.29.0', changes_1.updateDepedenciesVersion),
                 addImportOnly(options, [IconsDictionaryName, poIconDictionary], poModuleSourcePath),
                 addProviderToAppModule(options, newProviderDictionary),
                 updateAppConfigFileRule(),

package/schematics/ng-update/v21/index.js

@@ -9,7 +9,7 @@ const project_1 = require("@po-ui/ng-schematics/project");
 const changes_1 = require("./changes");
 function main() {
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
-        return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.28.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+        return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.29.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
     });
 }
 function default_1() {

package/schematics/ng-update/v3/index.js

@@ -7,7 +7,7 @@ const project_1 = require("@po-ui/ng-schematics/project");
 const package_config_1 = require("@po-ui/ng-schematics/package-config");
 const changes_1 = require("./changes");
 function updateToV3() {
-    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.28.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.29.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
 }
 function postUpdate() {
     return (_, context) => {

package/schematics/ng-update/v4/index.js

@@ -7,7 +7,7 @@ const project_1 = require("@po-ui/ng-schematics/project");
 const package_config_1 = require("@po-ui/ng-schematics/package-config");
 const changes_1 = require("./changes");
 function default_1() {
-    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.28.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.29.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
 }
 function postUpdate() {
     return (_, context) => {

package/schematics/ng-update/v5/index.js

@@ -7,7 +7,7 @@ const project_1 = require("@po-ui/ng-schematics/project");
 const package_config_1 = require("@po-ui/ng-schematics/package-config");
 const changes_1 = require("./changes");
 function default_1() {
-    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.28.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.29.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
 }
 function postUpdate() {
     return (_, context) => {

package/schematics/ng-update/v6/index.js

@@ -6,7 +6,7 @@ const tasks_1 = require("@angular-devkit/schematics/tasks");
 const package_config_1 = require("@po-ui/ng-schematics/package-config");
 const changes_1 = require("./changes");
 function default_1() {
-    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.28.0', changes_1.updateDepedenciesVersion), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.29.0', changes_1.updateDepedenciesVersion), postUpdate()]);
 }
 function postUpdate() {
     return (_, context) => {