fix: improve null/undefined type handling for Angular wrapper

src/elements/calendar/calendar.spec.ts

@@ -256,7 +256,7 @@ describe(`sbb-calendar`, () => {
     });
 
     it('opens month view with current date', async () => {
-      element.selected = undefined;
+      element.selected = null;
       element.now = '2022-08-15';
       element.view = 'month';
       await waitForLitRender(element);

src/elements/calendar/calendar.ts

@@ -123,7 +123,7 @@ class SbbCalendarElement<T = Date> extends SbbHydrationMixin(LitElement) {
 
   /** The maximum valid date. Takes T Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970). */
   @property()
-  public set max(value: SbbDateLike<T> | undefined) {
+  public set max(value: SbbDateLike<T> | null) {
     this._max = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
   }
   public get max(): T | null {
@@ -133,7 +133,7 @@ class SbbCalendarElement<T = Date> extends SbbHydrationMixin(LitElement) {
 
   /** A configured date which acts as the current date instead of the real current date. Recommended for testing purposes. */
   @property()
-  public set now(value: SbbDateLike<T> | undefined) {
+  public set now(value: SbbDateLike<T> | null) {
     this._now = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
   }
   public get now(): T {
@@ -143,7 +143,7 @@ class SbbCalendarElement<T = Date> extends SbbHydrationMixin(LitElement) {
 
   /** The selected date. Takes T Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970). */
   @property()
-  public set selected(value: SbbDateLike<T> | undefined) {
+  public set selected(value: SbbDateLike<T> | null) {
     this._selectedDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
     if (
       !!this._selectedDate &&

src/elements/datepicker/datepicker-toggle/datepicker-toggle.ts

@@ -157,14 +157,14 @@ class SbbDatepickerToggleElement<T = Date> extends SbbNegativeMixin(SbbHydration
       return;
     }
     calendar.wide = datepicker.wide;
-    calendar.now = this._nowOrUndefined();
+    calendar.now = this._nowOrNull();
     calendar.dateFilter = datepicker.dateFilter;
   }
 
   private _datePickerChanged(event: Event): void {
     this._datePickerElement = event.target as SbbDatepickerElement<T>;
     if (this._calendarElement) {
-      this._calendarElement.selected = this._datePickerElement.valueAsDate || undefined;
+      this._calendarElement.selected = this._datePickerElement.valueAsDate ?? null;
     }
   }
 
@@ -179,7 +179,7 @@ class SbbDatepickerToggleElement<T = Date> extends SbbNegativeMixin(SbbHydration
     ) {
       return;
     }
-    this._calendarElement.selected = this._datePickerElement!.valueAsDate ?? undefined;
+    this._calendarElement.selected = this._datePickerElement!.valueAsDate ?? null;
     this._configureCalendar(this._calendarElement, this._datePickerElement!);
     this._calendarElement.resetPosition();
   }
@@ -190,8 +190,8 @@ class SbbDatepickerToggleElement<T = Date> extends SbbNegativeMixin(SbbHydration
     this._popoverElement.trigger = this._triggerElement;
   }
 
-  private _nowOrUndefined(): T | undefined {
-    return this._datePickerElement?.hasCustomNow() ? this._datePickerElement.now : undefined;
+  private _nowOrNull(): T | null {
+    return this._datePickerElement?.hasCustomNow() ? this._datePickerElement.now : null;
   }
 
   protected override render(): TemplateResult {
@@ -220,7 +220,7 @@ class SbbDatepickerToggleElement<T = Date> extends SbbNegativeMixin(SbbHydration
               .view=${this.view}
               .min=${this._min}
               .max=${this._max}
-              .now=${this._nowOrUndefined()}
+              .now=${this._nowOrNull()}
               ?wide=${this._datePickerElement?.wide}
               .dateFilter=${this._datePickerElement?.dateFilter}
               @dateSelected=${(d: CustomEvent<T>) => {

src/elements/navigation/common/navigation-action-common.ts

@@ -21,7 +21,7 @@ export declare class SbbNavigationActionCommonElementMixinType {
   public accessor size: SbbNavigationActionSize;
   public get marker(): SbbNavigationMarkerElement | null;
   public get section(): SbbNavigationSectionElement | null;
-  public connectedSection: SbbNavigationSectionElement | null;
+  public connectedSection: SbbNavigationSectionElement | undefined;
 }
 
 // eslint-disable-next-line @typescript-eslint/naming-convention

src/elements/slider/slider.ts

@@ -56,8 +56,8 @@ class SbbSliderElement extends SbbDisabledMixin(SbbFormAssociatedMixin(LitElemen
 
   /** Numeric value for the inner HTMLInputElement. */
   @property({ attribute: 'value-as-number', type: Number })
-  public set valueAsNumber(value: number) {
-    this.value = value?.toString();
+  public set valueAsNumber(value: number | null) {
+    this.value = value?.toString() ?? null;
   }
   public get valueAsNumber(): number | null {
     return Number(this.value);

src/elements/stepper/step/step.ts

@@ -19,10 +19,10 @@ import style from './step.scss?lit&inline';
 let nextId = 0;
 
 export type SbbStepValidateEventDetails = {
-  currentIndex?: number;
-  currentStep?: SbbStepElement;
-  nextIndex?: number;
-  nextStep?: SbbStepElement;
+  currentIndex: number | null;
+  currentStep: SbbStepElement | null;
+  nextIndex: number | null;
+  nextStep: SbbStepElement | null;
 };
 
 /**

src/elements/stepper/stepper/readme.md

@@ -103,15 +103,15 @@ Use an `aria-label` attribute to describe the purpose of the stepper. The `sbb-s
 
 ## Properties
 
-| Name             | Attribute         | Privacy | Type                             | Default            | Description                                                                       |
-| ---------------- | ----------------- | ------- | -------------------------------- | ------------------ | --------------------------------------------------------------------------------- |
-| `horizontalFrom` | `horizontal-from` | public  | `SbbHorizontalFrom \| undefined` |                    | Overrides the behaviour of `orientation` property.                                |
-| `linear`         | `linear`          | public  | `boolean`                        | `false`            | If set to true, only the current and previous labels can be clicked and selected. |
-| `orientation`    | `orientation`     | public  | `SbbOrientation`                 | `'horizontal'`     | Steps orientation, either horizontal or vertical.                                 |
-| `selected`       | -                 | public  | `SbbStepElement \| undefined`    |                    | The currently selected step.                                                      |
-| `selectedIndex`  | `selected-index`  | public  | `number \| undefined`            |                    | The currently selected step index.                                                |
-| `size`           | `size`            | public  | `'s' \| 'm'`                     | `'m' / 's' (lean)` | Size variant, either s or m.                                                      |
-| `steps`          | -                 | public  | `SbbStepElement[]`               |                    | The steps of the stepper.                                                         |
+| Name             | Attribute         | Privacy | Type                        | Default            | Description                                                                       |
+| ---------------- | ----------------- | ------- | --------------------------- | ------------------ | --------------------------------------------------------------------------------- |
+| `horizontalFrom` | `horizontal-from` | public  | `SbbHorizontalFrom \| null` | `null`             | Overrides the behaviour of `orientation` property.                                |
+| `linear`         | `linear`          | public  | `boolean`                   | `false`            | If set to true, only the current and previous labels can be clicked and selected. |
+| `orientation`    | `orientation`     | public  | `SbbOrientation`            | `'horizontal'`     | Steps orientation, either horizontal or vertical.                                 |
+| `selected`       | -                 | public  | `SbbStepElement \| null`    |                    | The currently selected step.                                                      |
+| `selectedIndex`  | `selected-index`  | public  | `number \| null`            |                    | The currently selected step index.                                                |
+| `size`           | `size`            | public  | `'s' \| 'm'`                | `'m' / 's' (lean)` | Size variant, either s or m.                                                      |
+| `steps`          | -                 | public  | `SbbStepElement[]`          |                    | The steps of the stepper.                                                         |
 
 ## Methods
 

src/elements/stepper/stepper/stepper.ts

@@ -37,16 +37,16 @@
 
   /** Overrides the behaviour of `orientation` property. */
   @property({ attribute: 'horizontal-from', reflect: true })
-  public set horizontalFrom(value: SbbHorizontalFrom) {
-    this._horizontalFrom = breakpoints.includes(value) ? value : undefined;
+  public set horizontalFrom(value: SbbHorizontalFrom | null) {
+    this._horizontalFrom = value && breakpoints.includes(value) ? value : null;
     if (this._horizontalFrom && this._loaded) {
       this._checkOrientation();
     }
   }
-  public get horizontalFrom(): SbbHorizontalFrom | undefined {
+  public get horizontalFrom(): SbbHorizontalFrom | null {
     return this._horizontalFrom;
   }
-  private _horizontalFrom?: SbbHorizontalFrom | undefined;
+  private _horizontalFrom: SbbHorizontalFrom | null = null;
 
   /** Steps orientation, either horizontal or vertical. */
   @property({ reflect: true })
@@ -60,24 +60,24 @@
 
   /** The currently selected step. */
   @property({ attribute: false })
-  public set selected(step: SbbStepElement) {
+  public set selected(step: SbbStepElement | null) {
     if (this._loaded) {
       this._select(step);
     }
   }
-  public get selected(): SbbStepElement | undefined {
-    return this.querySelector?.<SbbStepElement>('sbb-step[data-selected]') ?? undefined;
+  public get selected(): SbbStepElement | null {
+    return this.querySelector?.<SbbStepElement>('sbb-step[data-selected]') ?? null;
   }
 
   /** The currently selected step index. */
   @property({ attribute: 'selected-index', type: Number })
-  public set selectedIndex(index: number) {
-    if (this._loaded) {
+  public set selectedIndex(index: number | null) {
+    if (this._loaded && index !== null) {
       this._select(this.steps[index]);
     }
   }
-  public get selectedIndex(): number | undefined {
-    return this.selected ? this.steps.indexOf(this.selected) : undefined;
+  public get selectedIndex(): number | null {
+    return this.selected ? this.steps.indexOf(this.selected) : null;
   }
 
   /** The steps of the stepper. */
@@ -95,14 +95,14 @@
 
   /** Selects the next step. */
   public next(): void {
-    if (this.selectedIndex !== undefined) {
+    if (this.selectedIndex !== null) {
       this._select(this.steps[this.selectedIndex + 1]);
     }
   }
 
   /** Selects the previous step. */
   public previous(): void {
-    if (this.selectedIndex !== undefined) {
+    if (this.selectedIndex !== null) {
       this._select(this.steps[this.selectedIndex - 1]);
     }
   }
@@ -122,7 +122,7 @@
     }
   }
 
-  private _isValidStep(step: SbbStepElement): boolean {
+  private _isValidStep(step: SbbStepElement | null): boolean {
     if (!step || (!this.linear && step.label?.hasAttribute('disabled'))) {
       return false;
     }
@@ -131,30 +131,30 @@
       return step === this.steps[0];
     }
 
-    if (this.linear && this.selectedIndex !== undefined) {
+    if (this.linear && this.selectedIndex !== null) {
       const index = this.steps.indexOf(step);
       return index < this.selectedIndex || index === this.selectedIndex + 1;
     }
 
     return true;
   }
 
-  private _select(step: SbbStepElement): void {
+  private _select(step: SbbStepElement | null): void {
     if (!this._isValidStep(step)) {
       return;
     }
     const validatePayload: SbbStepValidateEventDetails = {
       currentIndex: this.selectedIndex,
       currentStep: this.selected,
-      nextIndex: this.selectedIndex !== undefined ? this.selectedIndex + 1 : undefined,
-      nextStep: this.selectedIndex !== undefined ? this.steps[this.selectedIndex + 1] : undefined,
+      nextIndex: this.selectedIndex !== null ? this.selectedIndex + 1 : null,
+      nextStep: this.selectedIndex !== null ? this.steps[this.selectedIndex + 1] : null,
     };
     if (this.selected && !this.selected.validate(validatePayload)) {
       return;
     }
     const current = this.selected;
     current?.deselect();
-    step.select();
+    step!.select();
     this._setMarkerSize();
     this._configureLinearMode();
     // In case the focus is currently inside the stepper, we focus the selected step label.
@@ -181,7 +181,7 @@
   }
 
   private _calculateLabelOffsetTop(): number | undefined {
-    if (this.selectedIndex === undefined) {
+    if (this.selectedIndex === null) {
       return;
     }
     let offset = 0;

src/elements/tag/tag-group/tag-group.ts

@@ -58,7 +58,7 @@ class SbbTagGroupElement extends SbbNamedSlotListMixin<SbbTagElement, typeof Lit
    * If set multiple to true, the value is an array.
    */
   @property()
-  public set value(value: string | string[] | null) {
+  public set value(value: string | (string | null)[] | null) {
     const tags = this.tags;
     if (isServer) {
       this._value = value;
@@ -91,7 +91,7 @@ class SbbTagGroupElement extends SbbNamedSlotListMixin<SbbTagElement, typeof Lit
         ? this.tags.filter((t) => t.checked).map((t) => t.value)
         : (this.tags.find((t) => t.checked)?.value ?? null);
   }
-  private _value: string | string[] | null = null;
+  private _value: string | (string | null)[] | null = null;
 
   /** The child instances of sbb-tag as an array. */
   public get tags(): SbbTagElement[] {

src/elements/time-input/time-input.ts

@@ -37,7 +37,7 @@ class SbbTimeInputElement extends LitElement {
 
   /** Reference of the native input connected to the datepicker. */
   @property()
-  public set input(value: string | HTMLElement) {
+  public set input(value: string | HTMLElement | null) {
     this._input = value;
     this._findInputElement();
   }