diff --git a/src/elements-experimental/pearl-chain/__snapshots__/pearl-chain.snapshot.spec.snap.js b/src/elements-experimental/pearl-chain/__snapshots__/pearl-chain.snapshot.spec.snap.js
index b62b3a3539..4c53821270 100644
--- a/src/elements-experimental/pearl-chain/__snapshots__/pearl-chain.snapshot.spec.snap.js
+++ b/src/elements-experimental/pearl-chain/__snapshots__/pearl-chain.snapshot.spec.snap.js
@@ -9,11 +9,14 @@ snapshots["sbb-pearl-chain renders with one leg DOM"] =
snapshots["sbb-pearl-chain renders with one leg Shadow DOM"] =
`
-
+
-
`;
@@ -27,11 +30,21 @@ snapshots["sbb-pearl-chain renders with two legs DOM"] =
snapshots["sbb-pearl-chain renders with two legs Shadow DOM"] =
`
-
+
-
`;
@@ -45,11 +58,21 @@ snapshots["sbb-pearl-chain renders with departure stop skipped DOM"] =
snapshots["sbb-pearl-chain renders with departure stop skipped Shadow DOM"] =
`
-
+
-
`;
@@ -63,11 +86,21 @@ snapshots["sbb-pearl-chain renders with arrival stop skipped DOM"] =
snapshots["sbb-pearl-chain renders with arrival stop skipped Shadow DOM"] =
`
-
+
-
`;
@@ -81,11 +114,26 @@ snapshots["sbb-pearl-chain renders with progress leg DOM"] =
snapshots["sbb-pearl-chain renders with progress leg Shadow DOM"] =
`
-
+
-
`;
@@ -99,11 +147,21 @@ snapshots["sbb-pearl-chain renders with cancelled instead of progress leg DOM"]
snapshots["sbb-pearl-chain renders with cancelled instead of progress leg Shadow DOM"] =
`
-
+
-
`;
diff --git a/src/elements-experimental/pearl-chain/pearl-chain.ts b/src/elements-experimental/pearl-chain/pearl-chain.ts
index b0995cdc45..dc9eae65bf 100644
--- a/src/elements-experimental/pearl-chain/pearl-chain.ts
+++ b/src/elements-experimental/pearl-chain/pearl-chain.ts
@@ -35,9 +35,7 @@ class SbbPearlChainElement extends LitElement {
* to the total travel time. Example: departure 16:30, change at 16:40,
* arrival at 17:00. So the change should have a duration of 33.33%.
*/
- @forceType()
- @property({ type: Array })
- public accessor legs: (Leg | PtRideLeg)[] = [];
+ @property({ type: Array }) public accessor legs: (Leg | PtRideLeg)[] = [];
/**
* Per default, the current location has a pulsating animation. You can
@@ -52,7 +50,7 @@ class SbbPearlChainElement extends LitElement {
public set now(value: SbbDateLike | undefined) {
this._now = defaultDateAdapter.getValidDateOrNull(defaultDateAdapter.deserialize(value));
}
- public get now(): SbbDateLike | null {
+ public get now(): Date | null {
return this._now;
}
private _now: Date | null = null;
@@ -147,7 +145,7 @@ class SbbPearlChainElement extends LitElement {
}
protected override render(): TemplateResult {
- const now = (this.now as Date) ?? new Date();
+ const now = this.now ?? new Date();
const rideLegs: PtRideLeg[] = this.legs?.filter((leg) => isRideLeg(leg)) as PtRideLeg[];
diff --git a/src/elements-experimental/pearl-chain/pearl-chain.visual.spec.ts b/src/elements-experimental/pearl-chain/pearl-chain.visual.spec.ts
index 1d8f1fd9f7..675fc2a065 100644
--- a/src/elements-experimental/pearl-chain/pearl-chain.visual.spec.ts
+++ b/src/elements-experimental/pearl-chain/pearl-chain.visual.spec.ts
@@ -58,7 +58,7 @@ describe(`sbb-pearl-chain`, () => {
await setup.withFixture(html`
`);
diff --git a/src/elements-experimental/pearl-chain/readme.md b/src/elements-experimental/pearl-chain/readme.md
index fb12b29ebf..49acceddd9 100644
--- a/src/elements-experimental/pearl-chain/readme.md
+++ b/src/elements-experimental/pearl-chain/readme.md
@@ -58,4 +58,4 @@ This is helpful if you need a specific state of the component.
| ------------------ | ------------------- | ------- | ---------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `disableAnimation` | `disable-animation` | public | `boolean` | `false` | Per default, the current location has a pulsating animation. You can disable the animation with this property. |
| `legs` | `legs` | public | `(Leg \| PtRideLeg)[]` | `[]` | Define the legs of the pearl-chain. Format: `{"legs": \[{"duration": 25}, ...]}` `duration` in minutes. Duration of the leg is relative to the total travel time. Example: departure 16:30, change at 16:40, arrival at 17:00. So the change should have a duration of 33.33%. |
-| `now` | `now` | public | `SbbDateLike \| null` | `null` | A configured date which acts as the current date instead of the real current date. Recommended for testing purposes. |
+| `now` | `now` | public | `Date \| null` | `null` | A configured date which acts as the current date instead of the real current date. Recommended for testing purposes. |