chore: add angular e2e test

apps/angular/cypress/e2e/bal-datepicker.spec.cy.ts

@@ -0,0 +1,40 @@
+describe('bal-datepicker', () => {
+  beforeEach(() => {
+    cy.visit('/').platform('desktop').waitForDesignSystem()
+  })
+  it('should change value', () => {
+    cy.getByLabelText('Datepicker Label')
+      .should('have.value', '09.09.2023')
+      .clear()
+      .click()
+      .blur()
+      .shouldBeInvalid()
+      .getDescribingElement()
+      .contains('This field is required')
+
+    cy.getByPlaceholder('Pick a date')
+      .type('20.02.2024')
+      .blur()
+      .should('have.value', '20.02.2024')
+      .shouldBeValid()
+      .getDescribingElement()
+      .should('not.contain', 'This field is required')
+
+    cy.get('body').type('{esc}')
+
+    cy.getByRole('button', { name: 'Update Datepicker' }).click()
+    cy.getByPlaceholder('Pick a date')
+      .should('have.value', '21.10.2023')
+      .shouldBeValid()
+      .getDescribingElement()
+      .should('not.contain', 'This field is required')
+
+    cy.getByRole('button', { name: 'Disable Datepicker' }).click()
+    cy.getByPlaceholder('Pick a date').should('be.disabled')
+
+    cy.getByRole('button', { name: 'Enable Datepicker' }).click()
+    cy.getByPlaceholder('Pick a date').should('not.be.disabled')
+
+    cy.getByTestId('result').contains('"datepicker": "2023-10-21"')
+  })
+})

apps/angular/src/app/app.component.ts

@@ -6,7 +6,7 @@ import { BaloiseDesignSystemModule } from 'src/generated/src'
 import { InputComponent } from './form-components/input.component'
 import { TextareaComponent } from './form-components/textarea.component'
 import { NumberInputComponent } from './form-components/number-input.component'
-import { DateComponent } from './form-components/date.component'
+import { DatePickerComponent } from './form-components/datepicker.component'
 import { TimeComponent } from './form-components/time.component'
 import { InputStepperComponent } from './form-components/input-stepper.component'
 import { SliderComponent } from './form-components/input-slider.component'
@@ -16,6 +16,7 @@ import { CheckboxGroupComponent } from './form-components/checkbox-group.compone
 import { CheckboxButtonsComponent } from './form-components/checkbox-buttons.component'
 import { RadioComponent } from './form-components/radio.component'
 import { RadioButtonsComponent } from './form-components/radio-buttons.component'
+import { DateComponent } from './form-components/date.component'
 
 export interface UpdateControl {
   name: string
@@ -34,7 +35,7 @@ export interface UpdateControl {
     InputComponent,
     TextareaComponent,
     NumberInputComponent,
-    DateComponent,
+    DatePickerComponent,
     TimeComponent,
     InputStepperComponent,
     SliderComponent,
@@ -44,6 +45,7 @@ export interface UpdateControl {
     CheckboxButtonsComponent,
     RadioComponent,
     RadioButtonsComponent,
+    DateComponent,
   ],
   template: `
     <bal-app class="has-sticky-footer">
@@ -52,6 +54,7 @@ export interface UpdateControl {
           <app-input [form]="myForm" (updateControl)="updateValue($event)"></app-input>
           <app-textarea [form]="myForm" (updateControl)="updateValue($event)"></app-textarea>
           <app-number-input [form]="myForm" (updateControl)="updateValue($event)"></app-number-input>
+          <app-datepicker [form]="myForm" (updateControl)="updateValue($event)"></app-datepicker>
           <app-date [form]="myForm" (updateControl)="updateValue($event)"></app-date>
           <app-time [form]="myForm" (updateControl)="updateValue($event)"></app-time>
           <app-input-stepper [form]="myForm" (updateControl)="updateValue($event)"></app-input-stepper>
@@ -83,6 +86,7 @@ export class AppComponent {
     input: new FormControl('Init Value', [Validators.required]),
     textarea: new FormControl('Init Value', [Validators.required]),
     numberInput: new FormControl(null, [Validators.required]),
+    datepicker: new FormControl('2023-09-09', [Validators.required]),
     date: new FormControl('2023-09-09', [Validators.required]),
     time: new FormControl(null, [Validators.required]),
     inputStepper: new FormControl(0, [Validators.min(2)]),

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

@@ -19,7 +19,7 @@ import { UpdateControl } from '../app.component'
         >
           <bal-field-label>Date Label</bal-field-label>
           <bal-field-control>
-            <bal-datepicker placeholder="Enter a date" formControlName="date"></bal-datepicker>
+            <bal-date placeholder="Enter a date" formControlName="date"></bal-date>
           </bal-field-control>
           <bal-field-message>
             <bal-ng-error controlName="date" error="required">This field is required</bal-ng-error>

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

@@ -0,0 +1,45 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { BaloiseDesignSystemModule } from 'src/generated/src'
+import { FormGroup, ReactiveFormsModule } from '@angular/forms'
+import { UpdateControl } from '../app.component'
+
+@Component({
+  selector: 'app-datepicker',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, BaloiseDesignSystemModule],
+  template: `
+    <bal-card [formGroup]="form">
+      <bal-card-title>Datepicker</bal-card-title>
+      <bal-card-content>
+        <bal-field
+          required
+          [disabled]="form.get('datepicker')?.disabled"
+          [invalid]="form.get('datepicker')?.touched && form.get('datepicker')?.invalid"
+        >
+          <bal-field-label>Datepicker Label</bal-field-label>
+          <bal-field-control>
+            <bal-datepicker placeholder="Pick a date" formControlName="datepicker"></bal-datepicker>
+          </bal-field-control>
+          <bal-field-message>
+            <bal-ng-error controlName="datepicker" error="required">This field is required</bal-ng-error>
+          </bal-field-message>
+        </bal-field>
+        <bal-button-group>
+          <bal-button color="secondary" (click)="updateControl.emit({ name: 'datepicker', value: '2023-10-21' })">
+            Update Datepicker
+          </bal-button>
+          <bal-button color="tertiary" (click)="form.get('datepicker')?.enable()">Enable Datepicker</bal-button>
+          <bal-button color="tertiary" (click)="form.get('datepicker')?.disable()">Disable Datepicker</bal-button>
+        </bal-button-group>
+      </bal-card-content>
+    </bal-card>
+  `,
+  styles: [],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DatePickerComponent {
+  @Input() form!: FormGroup
+
+  @Output() updateControl = new EventEmitter<UpdateControl>()
+}

packages/components/config/stencil.bindings.angular.ts

@@ -3,7 +3,7 @@ import { docComponents } from './doc.components'
 
 export const angularValueAccessorBindings: ValueAccessorConfig[] = [
   {
-    elementSelectors: ['bal-radio-group', 'bal-checkbox-group', 'bal-select', 'bal-datepicker'],
+    elementSelectors: ['bal-radio-group', 'bal-checkbox-group', 'bal-select', 'bal-datepicker', 'bal-date'],
     event: 'balChange',
     targetAttr: 'value',
     type: 'select',

packages/components/src/components/form/bal-date/bal-date.sass

@@ -7,6 +7,11 @@
 // Date Picker
 // --------------------------------------------------
 
+.bal-date
+  display: block
+  font-family: var(--bal-font-family-text)
+  width: 100%
+
 // Date Picker - trigger icon
 // --------------------------------------------------