diff --git a/.changeset/warm-avocados-pull.md b/.changeset/warm-avocados-pull.md new file mode 100644 index 0000000000..58bd535d1e --- /dev/null +++ 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 index ea66ea611c..5679b3728b 100644 --- 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 index a5d64249d7..d35ce7451b 100644 --- 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('') }