🐛 fix(number-input): Microsoft Edge and autofill (#1558)

* Create PR for #1538

* Create PR for #1508

* docs: changeset

* perf: remove bal-datepicker and date-fns library (#1508)

* chore(number-input): enable number input to accept thousand separators

* chore(number-input): enable number input to accept thousand separators

* chore: Merge branch main

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Yannick Holzenkamp <[email protected]>
Co-authored-by: Gery Hirschfeld <[email protected]>

.changeset/fast-stingrays-yell.md

@@ -0,0 +1,9 @@
+---
+"@baloise/ds-angular": patch
+"@baloise/ds-testing": patch
+"@baloise/ds-core": patch
+"docs": patch
+"e2e": patch
+---
+
+bal-number-input: Accepts values with thousand separators

.changeset/thick-years-invent.md

@@ -0,0 +1,8 @@
+---
+"@baloise/ds-testing": major
+"@baloise/ds-core": major
+"docs": major
+"e2e": major
+---
+
+Removed deprecated component bal-datepicker for performance reasons

docs/stories/components/bal-field/bal-field.stories.ts

@@ -136,7 +136,7 @@ export const WithGrid = Story({
                     <bal-field>
                         <bal-field-label>Birthdate</bal-field-label>
                         <bal-field-control>
-                            <bal-datepicker placeholder="Select your birthdate"></bal-datepicker>
+                            <bal-date placeholder="Select your birthdate"></bal-date>
                         </bal-field-control>
                     </bal-field>
                 </bal-form-col>

e2e/cypress/component/bal-number-input.cy.ts

@@ -1,3 +1,4 @@
+import { byTestId } from '../../../packages/testing/src'
 import { Components } from '../support/utils'
 
 describe('bal-number-input', () => {
@@ -119,4 +120,9 @@ describe('bal-number-input', () => {
     cy.get('bal-number-input').find('input').should('have.value', '1.000,42')
     cy.get('@balChange').should('have.been.calledOnce')
   })
+
+  it('should accept numbers with thousand separator', () => {
+    cy.get('bal-number-input').find('input').type("42'000").blur()
+    cy.get('bal-number-input').find('input').should('have.value', '42’000')
+  })
 })

e2e/cypress/e2e/base/bal-number-input.cy.ts

@@ -31,4 +31,8 @@ describe('bal-number-input', () => {
     cy.getByTestId('button-reset').click()
     cy.getByTestId('reset').should('have.value', '42')
   })
+
+  it('should make sure values with thousand separators are accepted', () => {
+    cy.getByTestId('number-with-char').should('have.value', '42’000')
+  })
 })

packages/core/src/components.d.ts

@@ -2150,7 +2150,7 @@ export namespace Components {
         /**
           * The value of the input.
          */
-        "value"?: number;
+        "value"?: number | string;
     }
     interface BalOption {
         /**
@@ -7311,7 +7311,7 @@ declare namespace LocalJSX {
         /**
           * The value of the input.
          */
-        "value"?: number;
+        "value"?: number | string;
     }
     interface BalOption {
         /**

packages/core/src/components/bal-number-input/bal-number-input.tsx

@@ -59,16 +59,21 @@ import { ariaBooleanToString } from '../../utils/aria'
   styleUrl: 'bal-number-input.sass',
 })
 export class NumberInput
-  implements ComponentInterface, BalConfigObserver, FormInput<number | undefined>, BalAriaFormLinking, Loggable
+  implements
+    ComponentInterface,
+    BalConfigObserver,
+    FormInput<number | string | undefined>,
+    BalAriaFormLinking,
+    Loggable
 {
   private inputId = `bal-number-input-${numberInputIds++}`
   private inheritedAttributes: { [k: string]: any } = {}
   private selectTimeout?: NodeJS.Timeout
 
   lastValue = ''
   nativeInput?: HTMLInputElement
-  inputValue?: number = this.value
-  initialValue?: number = undefined
+  inputValue?: number | string = this.value
+  initialValue?: number | string = undefined
 
   @Element() el!: HTMLElement
 
@@ -164,14 +169,15 @@ export class NumberInput
   /**
    * The value of the input.
    */
-  @Prop({ mutable: true }) value?: number = undefined
+  @Prop({ mutable: true }) value?: number | string = undefined
 
   @Watch('value')
-  protected valueChanged(newValue: number | undefined, oldValue?: number) {
-    if (newValue !== oldValue) {
-      const isValueNotDefined = (newValue as any) === '' || isNil(newValue) || isNaN(newValue)
+  protected valueChanged(newValue: number | string | undefined, oldValue?: number) {
+    const newValueAsNumber: number | undefined = toNumber(newValue, this.decimal)
+    if (newValueAsNumber !== oldValue) {
+      const isValueNotDefined = (newValueAsNumber as any) === '' || isNil(newValueAsNumber) || isNaN(newValueAsNumber)
       const emptyValue = this.exactNumber ? '0' : ''
-      const value = isValueNotDefined ? emptyValue : newValue.toString()
+      const value = isValueNotDefined ? emptyValue : newValueAsNumber.toString()
 
       this.inputValue = toNumber(toFixedNumber(value, this.decimal), this.decimal)
       this.lastValue = toFixedNumber(value, this.decimal)

packages/core/src/components/bal-number-input/test/bal-number-input.cy.html

@@ -41,6 +41,7 @@
           <bal-number-input data-testid="tab-1" value="42"></bal-number-input>
           <bal-number-input data-testid="tab-1" value="42000"></bal-number-input>
           <bal-number-input data-testid="tab-1" value="42000" decimal="2"></bal-number-input>
+          <bal-number-input data-testid="number-with-char" value="42'000"></bal-number-input>
         </section>
 
         <bal-heading>Autocomplete</bal-heading>