🐛 fix(bal-number-input): German format with decimals (#1401)

* Create PR for #1400 * fix(number-input): handle inputs for Germany * chore: improve function name --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Gery Hirschfeld <[email protected]>
baloise · May 24, 2024 · 17e1b01 · 17e1b01
1 parent ad548a6
commit 17e1b01
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 2 deletions.
diff --git a/.changeset/warm-avocados-pull.md b/.changeset/warm-avocados-pull.md
@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**number-input**: handle inputs for Germany
diff --git a/e2e/cypress/component/bal-number-input.cy.ts b/e2e/cypress/component/bal-number-input.cy.ts
@@ -93,4 +93,30 @@ describe('bal-number-input', () => {
     cy.get('@balFocus').should('have.been.calledTwice')
     cy.get('@balBlur').should('have.been.calledTwice')
   })
+
+  it('should update german numbers with decimal', () => {
+    cy.window().then((win: any) => (win.BaloiseDesignSystem.config.region = 'DE'))
+    cy.get('bal-number-input').waitForComponents().invoke('attr', 'decimal', 2)
+
+    cy.get('bal-number-input').find('input').type('1').blur()
+
+    cy.get('bal-number-input').find('input').should('have.value', '1,00')
+
+    cy.get('bal-number-input').find('input').click().blur()
+    cy.get('bal-number-input').find('input').should('have.value', '1,00')
+    cy.get('@balChange').should('have.been.calledOnce')
+  })
+
+  it('should update german numbers with thousand seperator', () => {
+    cy.window().then((win: any) => (win.BaloiseDesignSystem.config.region = 'DE'))
+    cy.get('bal-number-input').waitForComponents().invoke('attr', 'decimal', 2)
+
+    cy.get('bal-number-input').find('input').type('1000,42').blur()
+
+    cy.get('bal-number-input').find('input').should('have.value', '1.000,42')
+
+    cy.get('bal-number-input').find('input').click().blur()
+    cy.get('bal-number-input').find('input').should('have.value', '1.000,42')
+    cy.get('@balChange').should('have.been.calledOnce')
+  })
 })
diff --git a/packages/core/src/components/bal-number-input/bal-number-input.utils.ts b/packages/core/src/components/bal-number-input/bal-number-input.utils.ts
@@ -3,6 +3,10 @@ import { ACTION_KEYS, NUMBER_KEYS } from '../../utils/constants/keys.constant'
 import { formatLocaleNumber, getDecimalSeparator, getNegativeSymbol, getThousandSeparator } from '../../utils/number'
 import isNaN from 'lodash.isnan'
 
+function checkIfValueIsStringAndDoesNotHaveGermanFormat(val: any): boolean {
+  return typeof val === 'string' && getThousandSeparator() !== '.'
+}
+
 export function isNumber(value: any): boolean {
   const num = parseFloat(value)
   return typeof num === 'number' && !isNaN(num)
@@ -26,7 +30,7 @@ export function toNumber(value: any, decimalPoints = 0): number | undefined {
     return undefined
   }
 
-  if (typeof val === 'string') {
+  if (checkIfValueIsStringAndDoesNotHaveGermanFormat(val)) {
     val = val.split(getThousandSeparator()).join('').split('`').join('').split("'").join('')
   }
 
@@ -39,7 +43,7 @@ export function toFixedNumber(value: string, decimalPoints = 0): string {
     return ''
   }
 
-  if (typeof val === 'string') {
+  if (checkIfValueIsStringAndDoesNotHaveGermanFormat(val)) {
     val = val.split(getThousandSeparator()).join('').split('`').join('').split("'").join('')
   }