✨ feat(angular): set invalid dynamic (#1033)

* feat(angular): set invalid dynamic

* chore: adjust datepicker and select

* fix(number): adjust number input

* chore: adjust e2e tests

* chore: fix exact number issue

* fix: send blur after change

* feat(stack): add reverse layout

* chore: update input stepper with blur event

* chore: add changesets

* chore: fix broken radio component test

* chore: improve changesets

* chore: improve changesets

.changeset/chilly-books-exercise.md

@@ -2,4 +2,4 @@
 '@baloise/design-system-components': patch
 ---
 
-remove tab line if there is no active tab
+Hide the tab line when no active tab is present.

.changeset/giant-plums-explain.md

@@ -4,4 +4,4 @@
 '@baloise/design-system-css': patch
 ---
 
-move sticky footer styles to core css file and updated bal-app for vue applications
+Relocate sticky footer styles to the core CSS file and update 'bal-app' for Vue applications.

.changeset/heavy-days-provide.md

@@ -2,4 +2,4 @@
 '@baloise/design-system-components': patch
 ---
 
-add a11y labels to accordion and pagination component
+Include accessibility (a11y) labels for both the accordion and pagination components.

.changeset/olive-insects-flow.md

@@ -0,0 +1,6 @@
+---
+'@baloise/design-system-components': patch
+---
+
+The datepicker, select, and number-input components trigger a blur event when they lose focus or when any associated pop-up or dropdown is closed. Additionally, the blur event occurs after the value change.
+

.changeset/perfect-forks-divide.md

@@ -2,4 +2,4 @@
 '@baloise/design-system-components': patch
 ---
 
-scroll to top on mobile navbar toggle to prevent space between navbar brand and navbar menu
+Implement a 'scroll to top' feature upon toggling the mobile navbar to prevent any space between the navbar brand and the menu.

.changeset/red-cobras-provide.md

@@ -2,4 +2,28 @@
 '@baloise/design-system-testing': minor
 ---
 
-testing library supports file by file import
+The testing library now offers support for importing files on a per-file basis.
+
+```typescript
+/**
+ * Here are the component-specific commands along with some helper functions.
+ * 
+ * cy.waitForDesignSystem()
+ * cy.getByTestId('my-button')
+ */
+import '@baloise/design-system-testing/src/add-custom-commands'
+
+/**
+ * Presenting the refined Cypress basic commands, including optimized 'type' 
+ * interactions for seamless functionality with web components
+ */
+import '@baloise/design-system-testing/src/add-override-commands'
+
+/**
+ * This is a collection of selectors tailored to locate the precise 
+ * inner element of a component.
+ * 
+ * cy.get(selectors.button.label)
+ */
+import { selectors } from '@baloise/design-system-testing/src/selectors'
+```

.changeset/smart-bulldogs-bake.md

@@ -0,0 +1,5 @@
+---
+'@baloise/design-system-components': patch
+---
+
+Addressed event propagation issues and refined the event sequence for the number-input component.

.changeset/smart-squids-dance.md

@@ -2,4 +2,4 @@
 '@baloise/design-system-components': minor
 ---
 
-add tooltip component
+Implement the tooltip component.

.changeset/smooth-toes-dance.md

@@ -2,4 +2,4 @@
 '@baloise/design-system-components-angular': minor
 ---
 
-file-upload can be used with Angular reactive forms
+The file-upload component is compatible with Angular reactive forms.

.changeset/three-otters-shout.md

@@ -0,0 +1,16 @@
+---
+'@baloise/design-system-components-angular': minor
+---
+
+Angular reactive forms mark a form control as invalid when it's been touched and is indeed invalid.
+To enable this feature, set setInvalid in the design system configuration.
+
+```typescript
+BaloiseDesignSystemModule.forRoot({
+  defaults: { ... },
+  forms: {
+    setInvalid: true,
+     invalidateOn: 'touched' // Alternatively, it can also be set to 'dirty'.
+  },
+})
+```

.changeset/tough-dogs-tie.md

@@ -2,4 +2,4 @@
 '@baloise/design-system-output-target-angular': minor
 ---
 
-provide component events as a stream
+In Angular, component events can be accessed through an RxJS stream.

.changeset/tricky-worms-lie.md

@@ -2,4 +2,4 @@
 '@baloise/design-system-components': patch
 ---
 
-check if checkbox is checked in group
+Verify if a checkbox is selected within a group.

.changeset/twenty-panthers-pay.md

@@ -2,4 +2,4 @@
 '@baloise/design-system-components': patch
 ---
 
-connect aria-labelledby with the correct label and for attribute with the correct input
+Ensure that `aria-labelledby` is correctly linked to the appropriate label, and that the `for` attribute corresponds to the correct input.

.changeset/weak-rockets-whisper.md

@@ -2,4 +2,4 @@
 '@baloise/design-system-components': patch
 ---
 
-fix pattern issue with the number-input
+Resolve pattern issue with the number-input component.

.changeset/wise-dingos-jump.md

@@ -0,0 +1,5 @@
+---
+'@baloise/design-system-components': minor
+---
+
+Implement a reverse layout option for the stack component.

apps/angular/src/app/app.config.ts

@@ -19,6 +19,9 @@ export const appConfig: ApplicationConfig = {
             event: true,
           },
         },
+        forms: {
+          setInvalid: true,
+        },
       }),
     ),
   ],

apps/angular/src/app/form-components/checkbox-buttons.component.ts

@@ -12,11 +12,7 @@ import { UpdateControl } from '../app.component'
     <bal-card [formGroup]="form">
       <bal-card-title>Checkbox Buttons</bal-card-title>
       <bal-card-content>
-        <bal-field
-          required
-          [disabled]="form.get('checkboxButtons')?.disabled"
-          [invalid]="form.get('checkboxButtons')?.touched && form.get('checkboxButtons')?.invalid"
-        >
+        <bal-field required>
           <bal-field-label>Checkbox Buttons Label</bal-field-label>
           <bal-field-control>
             <bal-checkbox-group control formControlName="checkboxButtons" data-test="checkboxButtons">

apps/angular/src/app/form-components/checkbox-group.component.ts

@@ -12,11 +12,7 @@ import { UpdateControl } from '../app.component'
     <bal-card [formGroup]="form">
       <bal-card-title>Checkbox Group</bal-card-title>
       <bal-card-content>
-        <bal-field
-          required
-          [disabled]="form.get('checkboxGroup')?.disabled"
-          [invalid]="form.get('checkboxGroup')?.touched && form.get('checkboxGroup')?.invalid"
-        >
+        <bal-field required>
           <bal-field-label>Checkbox Group Label</bal-field-label>
           <bal-field-control>
             <bal-checkbox-group control formControlName="checkboxGroup" data-test="checkboxGroup">

apps/angular/src/app/form-components/checkbox.component.ts

@@ -12,11 +12,7 @@ import { UpdateControl } from '../app.component'
     <bal-card [formGroup]="form">
       <bal-card-title>Checkbox</bal-card-title>
       <bal-card-content>
-        <bal-field
-          required
-          [disabled]="form.get('checkbox')?.disabled"
-          [invalid]="form.get('checkbox')?.touched && form.get('checkbox')?.invalid"
-        >
+        <bal-field required>
           <bal-field-label>Checkbox Label</bal-field-label>
           <bal-field-control>
             <bal-checkbox formControlName="checkbox">My Checkbox</bal-checkbox>

apps/angular/src/app/form-components/date.component.ts

@@ -12,11 +12,7 @@ import { UpdateControl } from '../app.component'
     <bal-card [formGroup]="form">
       <bal-card-title>Date</bal-card-title>
       <bal-card-content>
-        <bal-field
-          required
-          [disabled]="form.get('date')?.disabled"
-          [invalid]="form.get('date')?.touched && form.get('date')?.invalid"
-        >
+        <bal-field required>
           <bal-field-label>Date Label</bal-field-label>
           <bal-field-control>
             <bal-datepicker placeholder="Enter a date" formControlName="date"></bal-datepicker>

apps/angular/src/app/form-components/input-slider.component.ts

@@ -12,11 +12,7 @@ import { UpdateControl } from '../app.component'
     <bal-card [formGroup]="form">
       <bal-card-title>Slider</bal-card-title>
       <bal-card-content>
-        <bal-field
-          required
-          [disabled]="form.get('slider')?.disabled"
-          [invalid]="form.get('slider')?.touched && form.get('slider')?.invalid"
-        >
+        <bal-field required>
           <bal-field-label>Slider Label</bal-field-label>
           <bal-field-control>
             <bal-input-slider min="0" max="100" step="10" formControlName="slider"></bal-input-slider>

apps/angular/src/app/form-components/input-stepper.component.ts

@@ -12,11 +12,7 @@ import { UpdateControl } from '../app.component'
     <bal-card [formGroup]="form">
       <bal-card-title>Input Stepper</bal-card-title>
       <bal-card-content>
-        <bal-field
-          required
-          [disabled]="form.get('inputStepper')?.disabled"
-          [invalid]="form.get('inputStepper')?.touched && form.get('inputStepper')?.invalid"
-        >
+        <bal-field required>
           <bal-field-label>Input Stepper Label</bal-field-label>
           <bal-field-control>
             <bal-input-stepper formControlName="inputStepper"></bal-input-stepper>

apps/angular/src/app/form-components/input.component.ts

@@ -12,11 +12,7 @@ import { UpdateControl } from '../app.component'
     <bal-card [formGroup]="form">
       <bal-card-title>Input</bal-card-title>
       <bal-card-content>
-        <bal-field
-          required
-          [disabled]="form.get('input')?.disabled"
-          [invalid]="form.get('input')?.touched && form.get('input')?.invalid"
-        >
+        <bal-field required>
           <bal-field-label>Input Label</bal-field-label>
           <bal-field-control>
             <bal-input placeholder="Enter text" formControlName="input"></bal-input>

apps/angular/src/app/form-components/number-input.component.ts

@@ -12,11 +12,7 @@ import { UpdateControl } from '../app.component'
     <bal-card [formGroup]="form">
       <bal-card-title>Number Input</bal-card-title>
       <bal-card-content>
-        <bal-field
-          required
-          [disabled]="form.get('numberInput')?.disabled"
-          [invalid]="form.get('numberInput')?.touched && form.get('numberInput')?.invalid"
-        >
+        <bal-field required>
           <bal-field-label>Number Input Label</bal-field-label>
           <bal-field-control>
             <bal-number-input

apps/angular/src/app/form-components/radio-buttons.component.ts

@@ -12,11 +12,7 @@ import { UpdateControl } from '../app.component'
     <bal-card [formGroup]="form">
       <bal-card-title>Radio Buttons</bal-card-title>
       <bal-card-content>
-        <bal-field
-          required
-          [disabled]="form.get('radioButtons')?.disabled"
-          [invalid]="form.get('radioButtons')?.touched && form.get('radioButtons')?.invalid"
-        >
+        <bal-field required>
           <bal-field-label>Radio Buttons Label</bal-field-label>
           <bal-field-control>
             <bal-radio-group formControlName="radioButtons" data-test="radioButtons">

apps/angular/src/app/form-components/radio.component.ts

@@ -12,11 +12,7 @@ import { UpdateControl } from '../app.component'
     <bal-card [formGroup]="form">
       <bal-card-title>Radio</bal-card-title>
       <bal-card-content>
-        <bal-field
-          required
-          [disabled]="form.get('radio')?.disabled"
-          [invalid]="form.get('radio')?.touched && form.get('radio')?.invalid"
-        >
+        <bal-field required>
           <bal-field-label>Radio Label</bal-field-label>
           <bal-field-control>
             <bal-radio-group formControlName="radio" data-test="radio">

apps/angular/src/app/form-components/select-dropdown.component.ts

@@ -12,11 +12,7 @@ import { UpdateControl } from '../app.component'
     <bal-card [formGroup]="form">
       <bal-card-title>{{ label }}</bal-card-title>
       <bal-card-content>
-        <bal-field
-          required
-          [disabled]="form.get(control)?.disabled"
-          [invalid]="form.get(control)?.touched && form.get(control)?.invalid"
-        >
+        <bal-field required>
           <bal-field-label>{{ label }} Label</bal-field-label>
           <bal-field-control>
             <bal-select

apps/angular/src/app/form-components/textarea.component.ts

@@ -12,11 +12,7 @@ import { UpdateControl } from '../app.component'
     <bal-card [formGroup]="form">
       <bal-card-title>Textarea</bal-card-title>
       <bal-card-content>
-        <bal-field
-          required
-          [disabled]="form.get('textarea')?.disabled"
-          [invalid]="form.get('textarea')?.touched && form.get('textarea')?.invalid"
-        >
+        <bal-field required>
           <bal-field-label>Textarea Label</bal-field-label>
           <bal-field-control>
             <bal-textarea placeholder="Enter comment" formControlName="textarea"></bal-textarea>

apps/angular/src/app/form-components/time.component.ts

@@ -12,11 +12,7 @@ import { UpdateControl } from '../app.component'
     <bal-card [formGroup]="form">
       <bal-card-title>Time</bal-card-title>
       <bal-card-content>
-        <bal-field
-          required
-          [disabled]="form.get('time')?.disabled"
-          [invalid]="form.get('time')?.touched && form.get('time')?.invalid"
-        >
+        <bal-field required>
           <bal-field-label>Time Label</bal-field-label>
           <bal-field-control>
             <bal-time-input placeholder="Enter time" formControlName="time"></bal-time-input>