diff --git a/src/elements/calendar/calendar.ts b/src/elements/calendar/calendar.ts index 5da8b91918..0937ef12ba 100644 --- a/src/elements/calendar/calendar.ts +++ b/src/elements/calendar/calendar.ts @@ -123,7 +123,7 @@ class SbbCalendarElement 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 | undefined) { + public set max(value: SbbDateLike | null) { this._max = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value)); } public get max(): T | null { @@ -133,7 +133,7 @@ class SbbCalendarElement 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 | undefined) { + public set now(value: SbbDateLike | null) { this._now = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value)); } public get now(): T { @@ -143,7 +143,7 @@ class SbbCalendarElement 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 | undefined) { + public set selected(value: SbbDateLike | null) { this._selectedDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value)); if ( !!this._selectedDate && diff --git a/src/elements/datepicker/datepicker-toggle/datepicker-toggle.ts b/src/elements/datepicker/datepicker-toggle/datepicker-toggle.ts index 71197d28a1..92d6706f49 100644 --- a/src/elements/datepicker/datepicker-toggle/datepicker-toggle.ts +++ b/src/elements/datepicker/datepicker-toggle/datepicker-toggle.ts @@ -157,14 +157,14 @@ class SbbDatepickerToggleElement 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; if (this._calendarElement) { - this._calendarElement.selected = this._datePickerElement.valueAsDate || undefined; + this._calendarElement.selected = this._datePickerElement.valueAsDate ?? null; } } @@ -179,7 +179,7 @@ class SbbDatepickerToggleElement 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 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 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) => { diff --git a/src/elements/navigation/common/navigation-action-common.ts b/src/elements/navigation/common/navigation-action-common.ts index e6bbd4dd7d..7f2347df56 100644 --- a/src/elements/navigation/common/navigation-action-common.ts +++ b/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 diff --git a/src/elements/slider/slider.ts b/src/elements/slider/slider.ts index e3a9288a45..1a55b530c6 100644 --- a/src/elements/slider/slider.ts +++ b/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); diff --git a/src/elements/stepper/stepper/stepper.ts b/src/elements/stepper/stepper/stepper.ts index 1c67f89cf2..375ff93d14 100644 --- a/src/elements/stepper/stepper/stepper.ts +++ b/src/elements/stepper/stepper/stepper.ts @@ -37,8 +37,8 @@ class SbbStepperElement extends SbbHydrationMixin(LitElement) { /** 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 | undefined) { + this._horizontalFrom = value && breakpoints.includes(value) ? value : undefined; if (this._horizontalFrom && this._loaded) { this._checkOrientation(); } @@ -60,7 +60,7 @@ class SbbStepperElement extends SbbHydrationMixin(LitElement) { /** The currently selected step. */ @property({ attribute: false }) - public set selected(step: SbbStepElement) { + public set selected(step: SbbStepElement | undefined) { if (this._loaded) { this._select(step); } @@ -71,8 +71,8 @@ class SbbStepperElement extends SbbHydrationMixin(LitElement) { /** The currently selected step index. */ @property({ attribute: 'selected-index', type: Number }) - public set selectedIndex(index: number) { - if (this._loaded) { + public set selectedIndex(index: number | undefined) { + if (this._loaded && index !== undefined) { this._select(this.steps[index]); } } @@ -122,7 +122,7 @@ class SbbStepperElement extends SbbHydrationMixin(LitElement) { } } - private _isValidStep(step: SbbStepElement): boolean { + private _isValidStep(step: SbbStepElement | undefined): boolean { if (!step || (!this.linear && step.label?.hasAttribute('disabled'))) { return false; } @@ -139,7 +139,7 @@ class SbbStepperElement extends SbbHydrationMixin(LitElement) { return true; } - private _select(step: SbbStepElement): void { + private _select(step: SbbStepElement | undefined): void { if (!this._isValidStep(step)) { return; } @@ -154,7 +154,7 @@ class SbbStepperElement extends SbbHydrationMixin(LitElement) { } 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. diff --git a/src/elements/tag/tag-group/tag-group.ts b/src/elements/tag/tag-group/tag-group.ts index 5211bb0762..0cd4c3d202 100644 --- a/src/elements/tag/tag-group/tag-group.ts +++ b/src/elements/tag/tag-group/tag-group.ts @@ -58,7 +58,7 @@ class SbbTagGroupElement extends SbbNamedSlotListMixin 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[] { diff --git a/src/elements/time-input/time-input.ts b/src/elements/time-input/time-input.ts index 4ec0a839e0..cc8e0fec38 100644 --- a/src/elements/time-input/time-input.ts +++ b/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(); }