fix(decimal): corrige falha no arredondamento dos decimais

Agora o componente passa a tratar o número total de caracteres
para que as funcionalidades ocorram dentro das limitações
do JavaScript.

Fixes DTHFUI-1048

Author: Mateus Jose Milczewski Alves Farias

projects/ui/src/lib/components/po-field/po-decimal/po-decimal.component.spec.ts

@@ -59,28 +59,41 @@ describe('PoDecimalComponent:', () => {
 
   });
 
-  it('should update property `p-decimal-length` with `2` if invalid values', () => {
-    const invalidValues = [undefined, null, '', true, false, 'string', [], {}];
-
-    expectPropertiesValues(component, 'decimalsLength', invalidValues, 2);
+  it('decimalsLength: should update property with default value if is invalid value.', () => {
+    const invalidValues = [undefined, null, '', true, false, 'string', [], {}, 16, -1];
+    const defaultValue = 2;
+    expectPropertiesValues(component, 'decimalsLength', invalidValues, defaultValue);
   });
 
-  it('should update property `p-decimals-length` with valid values', () => {
-    const validValues = [0, 4];
-
+  it('decimalsLength: should update property with valid values.', () => {
+    let validValues = [0, 3];
+    expectPropertiesValues(component, 'decimalsLength', validValues, validValues);
+    validValues = [3, 15];
+    component.thousandMaxlength = 1;
     expectPropertiesValues(component, 'decimalsLength', validValues, validValues);
   });
 
-  it('should update property `p-thousand-maxlength` with `13` if invalid values', () => {
-    const invalidValues = [undefined, null, '', true, false, 'string', [], {}, 15];
+  it('thousandMaxlength: should update property with remaining value of total limit minus `decimalsLength`.', () => {
+    component.decimalsLength = 7;
+    component.thousandMaxlength = undefined;
+    const remainingValue = 16 - component.decimalsLength;
 
-    expectPropertiesValues(component, 'thousandMaxlength', invalidValues, 13);
+    expect(component.decimalsLength).toEqual(7);
+    expect(component.thousandMaxlength).toEqual(remainingValue);
   });
 
-  it('should update property `p-thousand-maxlength` with valid values', () => {
-    const validValues = [5, 8];
+  it('thousandMaxlength: should update property with default value if is invalid values.', () => {
+    const invalidValues = [undefined, null, '', true, false, 'string', [], {}, 15];
+    const defaultValue = 13;
+    expectPropertiesValues(component, 'thousandMaxlength', invalidValues, defaultValue);
+  });
 
+  it('thousandMaxlength: should update property with valid values.', () => {
+    let validValues = [5, 8];
     expectPropertiesValues(component, 'thousandMaxlength', validValues, validValues);
+    validValues = [13, 21];
+    component.decimalsLength = 4;
+    expectPropertiesValues(component, 'thousandMaxlength', validValues, 13);
   });
 
   it('should create button clean', () => {
@@ -1251,6 +1264,40 @@ describe('PoDecimalComponent:', () => {
       expect(component.hasLetters(undefined)).toBeFalsy();
     });
 
+    it('isGreaterThanTotalLengthLimit: should return `false` if total sum is 16.', () => {
+      let decimalsMaxLength = 1;
+      let thousandMaxlength = 15;
+      expect(component['isGreaterThanTotalLengthLimit'](decimalsMaxLength, thousandMaxlength)).toBe(false);
+
+      decimalsMaxLength = 14;
+      thousandMaxlength = 2;
+      expect(component['isGreaterThanTotalLengthLimit'](decimalsMaxLength, thousandMaxlength)).toBe(false);
+    });
+
+    it('isGreaterThanTotalLengthLimit: should return `true` if total sum is greater than 16.', () => {
+      const decimalsMaxLength = 13;
+      const thousandMaxlength = 4;
+      expect(component['isGreaterThanTotalLengthLimit'](decimalsMaxLength, thousandMaxlength)).toBe(true);
+    });
+
+    it('isGreaterThanTotalLengthLimit: should return `false` if total sum is less than 16.', () => {
+      const decimalsMaxLength = 3;
+      const thousandMaxlength = 6;
+      expect(component['isGreaterThanTotalLengthLimit'](decimalsMaxLength, thousandMaxlength)).toBe(false);
+    });
+
+    it('isValueBetweenAllowed: should return `true` if is value between allowed.', () => {
+      expect(component['isValueBetweenAllowed'](3, 9)).toBe(true);
+    });
+
+    it('isValueBetweenAllowed: should return `false` if is value over allowed.', () => {
+      expect(component['isValueBetweenAllowed'](10, 9)).toBe(false);
+    });
+
+    it('isValueBetweenAllowed: should return `false` if is value below allowed.', () => {
+      expect(component['isValueBetweenAllowed'](-1, 9)).toBe(false);
+    });
+
   });
 
   describe('Templates:', () => {

projects/ui/src/lib/components/po-field/po-decimal/po-decimal.component.ts

@@ -4,22 +4,28 @@ import { AbstractControl, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/form
 import { convertToInt } from '../../../utils/util';
 import { PoInputBaseComponent } from '../po-input/po-input-base.component';
 
-const PO_DECIMAL_DEFAULT_DECIMALS_LENGTH = 2;
-const PO_DECIMAL_DEFAULT_THOUSAND_MAXLENGTH = 13;
+const poDecimalDefaultDecimalsLength = 2;
+const poDecimalDefaultThousandMaxlength = 13;
+const poDecimalMaxDecimalsLength = 15;
+const poDecimalTotalLengthLimit = 16;
 
 /**
  *
  * @docsExtends PoInputBaseComponent
  *
  * @description
  *
- * po-decimal é um input específico para receber apenas números decimais.
- * Quando utilizado, o componente terá comportamento de um campo de 'text' com algumas características:
+ * <br>
+ * - O `po-decimal` é um *input* específico para receber apenas números decimais, por isso recebe as seguintes características:
+ *  + Aceita apenas números;
+ *  + Utiliza ',' como separador de decimal;
+ *  + Utiliza '.' para separação de milhar;
+ *  + É possível configurar a quantidade de casas decimais e a quantidade de digitos do campo.
  *
- * - Aceita apenas números;
- * - Utiliza ',' como separador de decimal;
- * - Utiliza '.' para separação de milhar;
- * - É possível configurar a quantidade de casas decimais e a quantidade de digitos do campo.
+ * > **Importante:**
+ * Atualmente o JavaScript limita-se a um conjunto de dados de `32 bits`, e para que os valores comportem-se devidamente,
+ * o `po-decimal` contém um tratamento que limita em 16 o número total de casas antes e após a vírgula.
+ * Veja abaixo as demais regras nas documentações de `p-decimals-length` e `p-thousand-maxlength`.
  *
  * @example
  *
@@ -61,8 +67,8 @@ const PO_DECIMAL_DEFAULT_THOUSAND_MAXLENGTH = 13;
 })
 export class PoDecimalComponent extends PoInputBaseComponent implements AfterViewInit {
 
-  private _decimalsLength?: number = PO_DECIMAL_DEFAULT_DECIMALS_LENGTH;
-  private _thousandMaxlength?: number = PO_DECIMAL_DEFAULT_THOUSAND_MAXLENGTH;
+  private _decimalsLength?: number = poDecimalDefaultDecimalsLength;
+  private _thousandMaxlength?: number = poDecimalDefaultThousandMaxlength;
 
   private decimalSeparator: string = ',';
   private fireChange: boolean = false;
@@ -90,11 +96,25 @@ export class PoDecimalComponent extends PoInputBaseComponent implements AfterVie
    *
    * Quantidade máxima de casas decimais.
    *
+   * > **Importante:**
+   * - O valor máximo permitido é 15;
+   * - 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).
+   *
    * @default `2`
    */
   @Input('p-decimals-length') set decimalsLength(value: number) {
-    this._decimalsLength = convertToInt(value, PO_DECIMAL_DEFAULT_DECIMALS_LENGTH);
+    let decimalsLength = convertToInt(value);
+
+    decimalsLength = this.isValueBetweenAllowed(decimalsLength, poDecimalMaxDecimalsLength) ?
+    decimalsLength : poDecimalDefaultDecimalsLength;
+
+    if (this.isGreaterThanTotalLengthLimit(decimalsLength, this.thousandMaxlength)) {
+      this.thousandMaxlength = poDecimalTotalLengthLimit - decimalsLength;
+    }
 
+    this._decimalsLength = decimalsLength;
   }
 
   get decimalsLength() {
@@ -106,15 +126,30 @@ export class PoDecimalComponent extends PoInputBaseComponent implements AfterVie
    *
    * @description
    *
-   * Número máximo de dígitos antes do separador de decimal. O valor máximo possível deve ser menor ou igual a 13.
+   * Quantidade máxima de dígitos antes do separador decimal.
+   *
+   * > **Importante:**
+   * - 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`.
    *
    * @default `13`
    */
   @Input('p-thousand-maxlength') set thousandMaxlength(value: number) {
-    const thousandMaxlength = convertToInt(value, PO_DECIMAL_DEFAULT_THOUSAND_MAXLENGTH);
+    let thousandMaxlength = convertToInt(value);
+
+    if (this.decimalsLength > poDecimalDefaultDecimalsLength && !thousandMaxlength) {
+      thousandMaxlength = poDecimalTotalLengthLimit - this.decimalsLength;
+    }
 
-    this._thousandMaxlength = thousandMaxlength <= PO_DECIMAL_DEFAULT_THOUSAND_MAXLENGTH ?
-    thousandMaxlength : PO_DECIMAL_DEFAULT_THOUSAND_MAXLENGTH;
+    thousandMaxlength = this.isValueBetweenAllowed(thousandMaxlength, poDecimalDefaultThousandMaxlength) ?
+    thousandMaxlength : poDecimalDefaultThousandMaxlength;
+
+    if (this.isGreaterThanTotalLengthLimit(this.decimalsLength, thousandMaxlength)) {
+      this.decimalsLength = poDecimalTotalLengthLimit - thousandMaxlength;
+    }
+
+    this._thousandMaxlength = thousandMaxlength;
   }
 
   get thousandMaxlength() {
@@ -414,6 +449,10 @@ export class PoDecimalComponent extends PoInputBaseComponent implements AfterVie
       this.validateCursorPositionBeforeSeparator(event) || this.verifyDecimalLengthIsZeroAndKeyPressedIsComma(charCode);
   }
 
+  private isGreaterThanTotalLengthLimit(decimalsMaxLength: number, thousandMaxlength: number) {
+    return (decimalsMaxLength + thousandMaxlength) > poDecimalTotalLengthLimit;
+  }
+
   private isKeyDecimalSeparator(event) {
     return event.key === this.decimalSeparator || event.char === this.decimalSeparator;
   }
@@ -449,6 +488,10 @@ export class PoDecimalComponent extends PoInputBaseComponent implements AfterVie
     return true;
   }
 
+  private isValueBetweenAllowed(value: number, maxAllowed: number) {
+    return  value >= 0 && value <= maxAllowed;
+  }
+
   // Quando decimalsLength for 0 não deve permitir informar vírgula (decimalSeparator)
   private verifyDecimalLengthIsZeroAndKeyPressedIsComma(charCode: number) {
     return (charCode === 44 && this.decimalsLength === 0);

projects/ui/src/lib/components/po-field/po-decimal/samples/sample-po-decimal-labs/sample-po-decimal-labs.component.html

@@ -61,15 +61,21 @@
       name="decimalsLength"
       [(ngModel)]="decimalsLength"
       p-clean
-      p-label="Decimals max length">
+      p-help="By default is equal 2, check the behavior in doc."
+      p-label="Decimals max length"
+      p-min="0"
+      [p-max]="maxDecimalsLength">
     </po-number>
 
     <po-number
       class="po-md-6"
       name="thousandMaxlength"
       [(ngModel)]="thousandMaxlength"
       p-clean
-      p-label="Thousand max length">
+      p-help="By default is equal 13, check the behavior in doc."
+      p-label="Thousand max length"
+      p-min="0"
+      [p-max]="maxThousandMaxlength">
     </po-number>
   </div>
 

projects/ui/src/lib/components/po-field/po-decimal/samples/sample-po-decimal-labs/sample-po-decimal-labs.component.ts

@@ -33,6 +33,14 @@ export class SamplePoDecimalLabsComponent implements OnInit {
     { value: 'required', label: 'Required' }
   ];
 
+  get maxDecimalsLength() {
+    return 16 - this.thousandMaxlength || 15;
+  }
+
+  get maxThousandMaxlength() {
+    return 16 - this.decimalsLength || 13;
+  }
+
   ngOnInit() {
     this.restore();
   }