feat(sbb-seat-reservation-refact-navigation): use arrays instead of strings for travelclasses

Author: thm-sbb

src/elements-experimental/seat-reservation/seat-reservation-navigation/seat-reservation-navigation-coach/seat-reservation-navigation-coach.stories.ts

@@ -77,17 +77,17 @@ const defaultArgs: Args = {
 export const Default: StoryObj = {
   render: Template,
   argTypes: defaultArgsTypes,
-  args: { ...defaultArgs, 'travel-class': 'SECOND' },
+  args: { ...defaultArgs, 'travel-class': JSON.stringify(['SECOND']) },
 };
 
 export const NavigationCoachFirstClassSelected: StoryObj = {
   render: Template,
-  args: { ...defaultArgs, index: 0, selected: true, 'travel-class': 'FIRST' },
+  args: { ...defaultArgs, index: 0, selected: true, 'travel-class': JSON.stringify(['FIRST']) },
 };
 
 export const NavigationCoachSecondClassNotSelected: StoryObj = {
   render: Template,
-  args: { ...defaultArgs, index: 0, selected: false, 'travel-class': 'SECOND' },
+  args: { ...defaultArgs, index: 0, selected: false, 'travel-class': JSON.stringify(['SECOND']) },
 };
 
 export const DriverArea: StoryObj = {
@@ -100,7 +100,7 @@ export const FirstCoachInTrainFirstClass: StoryObj = {
   args: {
     ...defaultArgs,
     first: true,
-    'travel-class': 'FIRST',
+    'travel-class': JSON.stringify(['FIRST']),
   },
 };
 

src/elements-experimental/seat-reservation/seat-reservation-navigation/seat-reservation-navigation-coach/seat-reservation-navigation-coach.ts

@@ -4,7 +4,6 @@ import { EventEmitter } from '@sbb-esta/lyne-elements/core/eventing/event-emitte
 import { type CSSResultGroup, nothing, type TemplateResult } from 'lit';
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { choose } from 'lit/directives/choose.js';
 
 import style from './seat-reservation-navigation-coach.scss?lit&inline';
 
@@ -42,8 +41,8 @@ class SbbSeatReservationNavigationCoachElement extends LitElement {
   @property({ type: Number })
   public accessor index: number = 0;
 
-  @property({ attribute: 'travel-class', type: String })
-  public accessor travelClass: PlaceTravelClass = 'ANY_CLASS';
+  @property({ attribute: 'travel-class', type: Array })
+  public accessor travelClass: PlaceTravelClass[] = ['ANY_CLASS'];
 
   @forceType()
   @property({ attribute: 'driver-area', type: Boolean })
@@ -107,32 +106,21 @@ class SbbSeatReservationNavigationCoachElement extends LitElement {
 
   private _getBtnInformation(): TemplateResult | null {
     return html`
-      ${this.travelClass === 'FIRST'
+      ${this.travelClass?.includes('FIRST')
         ? html`<span class="sbb-seat-reservation-navigation--first-class"></span>`
         : nothing}
-      ${this.travelClass || this.coachId
+      ${this.travelClass?.length > 0 || this.coachId
         ? html`<div class="sbb-seat-reservation-navigation__additional-information">
             ${this.coachId
               ? html`<div class="sbb-seat-reservation-navigation__item-coach-number">
                   ${this.coachId}
                 </div>`
               : nothing}
-            ${choose(this.travelClass, [
-              [
-                'FIRST',
-                () =>
-                  html`<div class="sbb-seat-reservation-navigation__item-coach-travelclass">
-                    1
-                  </div>`,
-              ],
-              [
-                'SECOND',
-                () =>
-                  html`<div class="sbb-seat-reservation-navigation__item-coach-travelclass">
-                    2
-                  </div>`,
-              ],
-            ])}
+            ${this.travelClass?.includes('FIRST')
+              ? html`<div class="sbb-seat-reservation-navigation__item-coach-travelclass">1</div>`
+              : this.travelClass?.includes('SECOND')
+                ? html`<div class="sbb-seat-reservation-navigation__item-coach-travelclass">2</div>`
+                : nothing}
           </div>`
         : nothing}
     `;

src/elements-experimental/seat-reservation/seat-reservation-navigation/seat-reservation-navigation.ts

@@ -49,7 +49,7 @@ class SbbSeatReservationNavigationElement extends LitElement {
                 ?selected="${this.selectedCoachIndex === index}"
                 coach-id="${coachItem.id}"
                 .propertyIds="${coachItem.propertyIds}"
-                travel-class="${coachItem.travelClass}"
+                .travelClass="${coachItem.travelClass}"
                 ?driver-area="${!coachItem.places?.length}"
                 ?first="${index === 0}"
                 ?last="${index === this.seatReservation?.coachItems.length - 1}"