@sbb-esta/lyne-elements-experimental 3.1.0 → 3.2.0

package/seat-reservation/seat-reservation/seat-reservation.component.js

@@ -1,36 +1,26 @@
-var U = (r) => {
-  throw TypeError(r);
-};
-var q = (r, o, l) => o.has(r) || U("Cannot " + l);
-var R = (r, o, l) => (q(r, o, "read from private field"), l ? l.call(r) : o.get(r)), x = (r, o, l) => o.has(r) ? U("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(r) : o.set(r, l), b = (r, o, l, u) => (q(r, o, "write to private field"), u ? u.call(r, l) : o.set(r, l), l);
-import { __runInitializers as p, __esDecorate as S } from "tslib";
-import { SbbLanguageController as K } from "@sbb-esta/lyne-elements/core/controllers.js";
-import { forceType as P } from "@sbb-esta/lyne-elements/core/decorators.js";
-import { css as X, html as d, nothing as A } from "lit";
-import { customElement as J, property as y } from "lit/decorators.js";
-import { classMap as Y } from "lit/directives/class-map.js";
-import { styleMap as Q } from "lit/directives/style-map.js";
-import { getI18nSeatReservation as _ } from "../common.js";
-import { SeatReservationBaseElement as Z } from "./seat-reservation-base-element.js";
+import { __esDecorate as $, __runInitializers as x } from "tslib";
+import { SbbLanguageController as A } from "@sbb-esta/lyne-elements/core/controllers.js";
+import { css as S, isServer as y, html as b, nothing as v } from "lit";
+import { customElement as R } from "lit/decorators.js";
+import { classMap as k } from "lit/directives/class-map.js";
+import { styleMap as g } from "lit/directives/style-map.js";
+import { getI18nSeatReservation as n } from "../common.js";
+import { SeatReservationBaseElement as E } from "./seat-reservation-base-element.js";
+import "@sbb-esta/lyne-elements/button.js";
 import "@sbb-esta/lyne-elements/screen-reader-only.js";
 import "../seat-reservation-area.js";
 import "../seat-reservation-graphic.js";
 import "../seat-reservation-place-control.js";
 import "../seat-reservation-navigation-coach.js";
 import "../seat-reservation-scoped.js";
-const ee = X`*,:before,:after{box-sizing:border-box}:host{--sbb-seat-reservation-grid-size: 16px;--sbb-seat-reservation-vertical-offset: 0;display:block}:host ::part(coach-floor){fill:var(--sbb-color-white)}@media (forced-colors: active){:host ::part(coach-floor){fill:transparent}}.sbb-sr__wrapper--vertical{width:fit-content;position:relative;inset-inline-start:var(--sbb-seat-reservation-vertical-offset);rotate:90deg;transform-origin:top left}.sbb-sr__wrapper--vertical .sbb-sr__parent{overflow-y:hidden}.sbb-sr__wrapper--vertical .sbb-sr__list-coaches{width:100vw}.sbb-sr-navigation--vertical{inset-inline-start:var(--sbb-seat-reservation-vertical-offset);margin-inline-start:1.25rem;position:absolute}.sbb-sr-navigation--vertical .sbb-sr-navigation__list-coaches{flex-direction:column}.sbb-sr-navigation__list-coaches{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;justify-content:center;flex-wrap:nowrap;gap:var(--sbb-spacing-fixed-1x);min-height:3.75rem}.sbb-sr__parent{overflow-x:scroll;padding:3rem 0}.sbb-sr__list-coaches{display:flex;gap:.25rem;padding:0;margin:0;list-style:none}.sbb-sr__item-coach{padding:0;margin:0;position:relative}.sbb-sr-coach-wrapper__table{outline:0}`;
-let me = (() => {
-  var g, m, f, $, C, c;
-  let r = [J("sbb-seat-reservation")], o, l = [], u, N = Z, T, z = [], O = [], E, k = [], D = [], G, I = [], V = [], B, L = [], F = [], M, H = [], W = [];
-  return c = class extends N {
+import "@sbb-esta/lyne-elements/popover/popover.js";
+const P = S`*,:before,:after{box-sizing:border-box}:host{--sbb-seat-reservation-grid-size: 16px;--sbb-seat-reservation-coach-height: 0;display:block;height:inherit}:host ::part(coach-floor){fill:var(--sbb-color-white)}@media (forced-colors: active){:host ::part(coach-floor){fill:transparent}}:host(:dir(rtl)) :not(.sbb-sr-place-ctrl--type-bicycle,.sbb-sr-place-ctrl--orientation-90,.sbb-sr-place-ctrl--orientation-270,.sbb-sr-place-ctrl--state-selected) ::part(coach-floor){rotate:180deg}[popover]:where(sbb-popover){margin:0;padding:0;border:none;width:auto;height:auto;background-color:transparent;color:inherit;pointer-events:none}.sbb-sr__container{display:flex;height:inherit}.sbb-sr__grid{display:grid;grid-template-columns:20% 1fr 20%;grid-template-rows:auto auto}.sbb-sr__grid .sbb-sr-navigation-first-grid,.sbb-sr__grid .sbb-sr-navigation-last-grid{grid-row-start:1;position:relative}.sbb-sr__grid .sbb-sr-navigation-first-grid{grid-column:1/2}.sbb-sr__grid .sbb-sr-navigation-last-grid{grid-column:3/4}.sbb-sr__grid .sbb-sr__component{display:flex;grid-column:1/4;grid-row:1/3}.sbb-sr__grid .sbb-sr-grid-inner{display:grid;grid-template-columns:20% 60% 20%;grid-template-rows:auto 1fr;grid-gap:0}.sbb-sr__grid .sbb-sr-grid-inner .nav-grid{grid-column:2/3;grid-row:1/2;display:inherit}.sbb-sr__grid .sbb-sr-grid-inner .coaches-grid{grid-column:1/4;grid-row:2/3;display:inherit}.sbb-sr__grid .sbb-sr-grid-inner .coaches-grid .sbb-sr__wrapper{overflow:hidden}.sbb-sr__navigation-control-button{position:absolute;z-index:10}.sbb-sr__navigation-control-button#first-tab-element{inset-inline-end:var(--sbb-spacing-fixed-2x)}.sbb-sr__navigation-control-button#last-tab-element{inset-inline-start:var(--sbb-spacing-fixed-2x)}.sbb-sr-navigation-wrapper{overflow:hidden;padding-block:0 var(--sbb-spacing-fixed-8x)}.sbb-sr-navigation{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-sr-navigation::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sr-navigation::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sr-navigation::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-sr-navigation::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-sr-navigation::-webkit-scrollbar-button,.sbb-sr-navigation::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-sr-navigation{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-sr-navigation{--sbb-scrollbar-color: var(--sbb-color-white-alpha-0);display:flex;overflow:scroll hidden;position:relative}.sbb-sr-navigation__list-coaches{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-wrap:nowrap;gap:var(--sbb-spacing-fixed-1x);padding:.125rem}.sbb-sr__parent{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-sr__parent::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sr__parent::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sr__parent::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-sr__parent::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-sr__parent::-webkit-scrollbar-button,.sbb-sr__parent::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-sr__parent{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-sr__parent{overflow-x:scroll;padding-block:var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x)}.sbb-sr__list-coaches{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;gap:.25rem}.sbb-sr__item-coach{position:relative}.sbb-sr-popover{margin:0}.sbb-sr-coach-wrapper__table{outline:0}.sbb-sr.sbb-sr__grid--vertical{grid-template-columns:calc((var(--sbb-seat-reservation-coach-height) + 28) * var(--sbb-seat-reservation-one-px-rem)) 1fr;grid-template-rows:20% 60% 20%}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-navigation-first-grid{grid-column:2/3;grid-row-start:1}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-navigation-first-grid #first-tab-element{position:absolute;inset-block-end:var(--sbb-spacing-fixed-4x);inset-inline-start:var(--sbb-spacing-fixed-8x);inset-inline-end:initial;rotate:90deg}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-navigation-last-grid{grid-column:2/3;grid-row:3/4}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-navigation-last-grid #last-tab-element{inset-block-start:var(--sbb-spacing-fixed-4x);inset-inline-start:var(--sbb-spacing-fixed-8x);rotate:90deg}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-navigation-wrapper{padding-block-end:initial;padding-inline-start:var(--sbb-spacing-fixed-8x)}.sbb-sr.sbb-sr__grid--vertical .sbb-sr__component{grid-column:1/3;grid-row:1/4}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner{grid-template-columns:calc((var(--sbb-seat-reservation-coach-height) + 28) * var(--sbb-seat-reservation-one-px-rem)) 1fr;grid-template-rows:20% 60% 20%}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .nav-grid{grid-column:2/3;grid-row:2/3;height:100%}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .nav-grid .sbb-sr-navigation{display:block;overflow:hidden scroll;height:100%}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .nav-grid .sbb-sr-navigation .sbb-sr-navigation__list-coaches{flex-direction:column;padding:.125rem}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid{grid-column:1/2;grid-row:1/4;overflow:hidden;position:relative}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid .sbb-sr__parent{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid .sbb-sr__parent::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid .sbb-sr__parent::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid .sbb-sr__parent::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid .sbb-sr__parent::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid .sbb-sr__parent::-webkit-scrollbar-button,.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid .sbb-sr__parent::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid .sbb-sr__parent{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid .sbb-sr__parent{overflow:hidden scroll;padding:0 var(--sbb-spacing-fixed-4x) 0 0;height:100%}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid .sbb-sr__parent .sbb-sr__list-coaches{rotate:90deg;transform-origin:calc((var(--sbb-seat-reservation-coach-height) / 2 - 3) * var(--sbb-seat-reservation-one-px-rem)) calc((var(--sbb-seat-reservation-coach-height) / 2 - 3) * var(--sbb-seat-reservation-one-px-rem))}`;
+let q = (() => {
+  var h;
+  let C = [R("sbb-seat-reservation")], u, m = [], d, f = E;
+  return h = class extends f {
     constructor() {
-      super(...arguments);
-      x(this, g);
-      x(this, m);
-      x(this, f);
-      x(this, $);
-      x(this, C);
-      b(this, g, p(this, z, null)), b(this, m, (p(this, O), p(this, k, !0))), b(this, f, (p(this, D), p(this, I, !1))), b(this, $, (p(this, V), p(this, L, null))), b(this, C, (p(this, F), p(this, H, !1))), this._language = (p(this, W), new K(this)), this._notAreaElements = [
+      super(...arguments), this._language = new A(this), this._notAreaElements = [
         "DRIVER_AREA_FULL",
         "COACH_PASSAGE",
         "COACH_WALL_NO_PASSAGE",
@@ -40,301 +30,309 @@ let me = (() => {
         "COMPARTMENT_PASSAGE_LOW"
       ], this._notFixedRotatableAreaIcons = ["ENTRY_EXIT"];
     }
-    /** The seat reservation object which contains all coaches and places */
-    get seatReservation() {
-      return R(this, g);
-    }
-    set seatReservation(e) {
-      b(this, g, e);
-    }
-    /** The seat reservation navigation can be toggled by this property */
-    get hasNavigation() {
-      return R(this, m);
-    }
-    set hasNavigation(e) {
-      b(this, m, e);
-    }
-    /** Controls the visual representation of seat reservation in a horizonal or vertical alignment */
-    get alignVertical() {
-      return R(this, f);
-    }
-    set alignVertical(e) {
-      b(this, f, e);
+    willUpdate(r) {
+      super.willUpdate(r), r.has("hasNavigation") && (this.hasNavigation ? this.shadowRoot?.querySelectorAll("table").forEach((s) => s.removeAttribute("tabindex")) : this.shadowRoot?.querySelectorAll("table").forEach((s) => s.setAttribute("tabindex", "0")));
     }
-    /** Maximal number of possible clickable seats */
-    get maxReservations() {
-      return R(this, $);
-    }
-    set maxReservations(e) {
-      b(this, $, e);
-    }
-    /** Any click functionality is prevented */
-    get preventPlaceClick() {
-      return R(this, C);
-    }
-    set preventPlaceClick(e) {
-      b(this, C, e);
-    }
-    willUpdate(e) {
-      super.willUpdate(e), e.has("hasNavigation") && (this.hasNavigation ? this.shadowRoot?.querySelectorAll("table").forEach((t) => t.removeAttribute("tabindex")) : this.shadowRoot?.querySelectorAll("table").forEach((t) => t.setAttribute("tabindex", "0")));
-    }
-    firstUpdated(e) {
-      super.firstUpdated(e), this._componentSetup();
+    firstUpdated(r) {
+      super.firstUpdated(r), this.updateComplete.then(() => {
+        this.initNavigationSelectionByScrollEvent();
+      });
     }
     render() {
-      return this._initVehicleSeatReservationConstruction(), this._coachesHtmlTemplate || null;
+      return y || this._determineBaseFontSize(), this._initVehicleSeatReservationConstruction(), this._coachesHtmlTemplate || null;
     }
-    _componentSetup() {
-      this.initNavigationSelectionByScrollEvent();
+    _determineBaseFontSize() {
+      const s = 1 / parseInt(window.getComputedStyle(document.body).fontSize, 10);
+      this.style?.setProperty("--sbb-seat-reservation-one-px-rem", `${s + "rem"}`);
     }
     _initVehicleSeatReservationConstruction() {
-      const e = JSON.parse(JSON.stringify(this.seatReservation?.coachItems)), t = this.alignVertical ? "sbb-sr__wrapper--vertical" : "";
-      this._coachesHtmlTemplate = d`
-      <div>
-        <sbb-screen-reader-only>
-          <input
-            id="first-tab-element"
-            role="contentinfo"
-            type="text"
-            aria-label="${_("SEAT_RESERVATION_BEGIN", this._language.current)}"
-            readonly
-          />
-        </sbb-screen-reader-only>
-
-        <div @keydown=${(i) => this.handleKeyboardEvent(i)}>
-          ${this._renderNavigation()}
-          <div class="sbb-sr__wrapper ${t}">
-            <div id="sbb-sr__parent-area" class="sbb-sr__parent" tabindex="-1">
-              <ul class="sbb-sr__list-coaches" role="presentation">
-                ${this._renderCoaches(e)}
-              </ul>
+      const r = JSON.parse(JSON.stringify(this.seatReservation?.coachItems)), s = this.alignVertical ? "sbb-sr__grid--vertical" : "";
+      this._coachesHtmlTemplate = b`
+      <div class="sbb-sr__container">
+        <div class="sbb-sr sbb-sr__grid ${s}">
+          <div class="sbb-sr-navigation-first-grid">
+            ${this._renderNavigationControlButton("DIRECTION_LEFT")}
+          </div>
+          <div
+            class="sbb-sr__component"
+            @keydown=${(e) => this.handleKeyboardEvent(e)}
+          >
+            <div class="sbb-sr-grid-inner">
+              <div class="nav-grid">${this._renderNavigation()}</div>
+              <div class="coaches-grid">
+                <div class="sbb-sr__wrapper">
+                  <div id="sbb-sr__parent-area" class="sbb-sr__parent" tabindex="-1">
+                    <ul class="sbb-sr__list-coaches" role="presentation">
+                      ${this._renderCoaches(r)}
+                    </ul>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
+          <div class="sbb-sr-navigation-last-grid">
+            ${this._renderNavigationControlButton("DIRECTION_RIGHT")}
+          </div>
         </div>
-
-        <sbb-screen-reader-only>
-          <input
-            id="last-tab-element"
-            role="contentinfo"
-            type="text"
-            aria-label="${_("SEAT_RESERVATION_END", this._language.current)}"
-            readonly
-          />
-        </sbb-screen-reader-only>
       </div>
     `;
     }
+    _renderNavigationControlButton(r) {
+      if (!this.hasNavigation)
+        return null;
+      const s = r == "DIRECTION_RIGHT" ? "last-tab-element" : "first-tab-element", e = r == "DIRECTION_RIGHT" ? "arrow-right-small" : "arrow-left-small", t = r == "DIRECTION_RIGHT" ? n("SEAT_RESERVATION_END", this._language.current) : n("SEAT_RESERVATION_BEGIN", this._language.current);
+      let i = !0;
+      return (r == "DIRECTION_LEFT" && this.selectedCoachIndex > 0 || r == "DIRECTION_RIGHT" && this.selectedCoachIndex < this.seatReservation.coachItems.length - 1) && (i = !1), b`<sbb-secondary-button
+      @click="${() => this.navigateByDirectionBtn(r)}"
+      id="${s}"
+      class="sbb-sr__navigation-control-button"
+      size="s"
+      icon-name="${e}"
+      type="button"
+      aria-label="${t}"
+      role="contentinfo"
+      .disabledInteractive="${i || v}"
+    ></sbb-secondary-button>`;
+    }
     _renderNavigation() {
-      return this.hasNavigation ? d`
-      <nav class="${Y({ "sbb-sr-navigation--vertical": this.alignVertical })}">
+      return this.hasNavigation ? b`<div class="sbb-sr-navigation-wrapper">
+      <nav id="sbb-sr-navigation" class="sbb-sr-navigation">
         <ul
+          id="sbb-sr__navigation-list-coaches"
           class="sbb-sr-navigation__list-coaches"
-          aria-label="${_("SEAT_RESERVATION_NAVIGATION", this._language.current)}"
+          aria-label="${n("SEAT_RESERVATION_NAVIGATION", this._language.current)}"
         >
-          ${this.seatReservation?.coachItems.map((e, t) => d`<li>
+          ${this.seatReservation?.coachItems.map((r, s) => {
+        const e = this.getAvailableFreePlacesNumFromCoach(s);
+        return b`<li>
               <sbb-seat-reservation-navigation-coach
-                @selectcoach=${(i) => this._onSelectNavCoach(i)}
+                @selectcoach=${(t) => this._onSelectNavCoach(t)}
                 @focuscoach=${() => this._onFocusNavCoach()}
-                index="${t}"
-                coach-id="${e.id}"
-                .selected=${this.selectedCoachIndex === t}
-                .focused=${this.focusedCoachIndex === t}
-                .propertyIds="${e.propertyIds}"
-                .travelClass="${e.travelClass}"
-                ?driver-area="${!e.places?.length}"
-                ?first="${t === 0}"
-                ?last="${t === this.seatReservation?.coachItems.length - 1}"
+                class="${k({
+          "sbb-sr__navigation-coach--hover-scroll": this.hoveredScrollCoachIndex === s
+        })}"
+                index="${s}"
+                coach-id="${r.id}"
+                .freePlacesByType="${e}"
+                .selected=${this.selectedCoachIndex === s}
+                .focused=${this.focusedCoachIndex === s}
+                .propertyIds="${r.propertyIds}"
+                .travelClass="${r.travelClass}"
+                ?driver-area="${!r.places?.length}"
+                ?first="${s === 0}"
+                ?last="${s === this.seatReservation?.coachItems.length - 1}"
                 ?vertical="${this.alignVertical}"
               >
               </sbb-seat-reservation-navigation-coach>
-            </li>`)}
+            </li>`;
+      })}
         </ul>
       </nav>
-    ` : null;
+    </div>` : null;
     }
     /**
      *
      * @param coaches
      * @returns
      */
-    _renderCoaches(e) {
-      return e ? e.map((t, i) => d`
-        <li class="sbb-sr__item-coach">${this._renderCoachElement(t, i)}</li>
+    _renderCoaches(r) {
+      return r ? r.map((s, e) => b`
+        <li class="sbb-sr__item-coach">${this._renderCoachElement(s, e)}</li>
       `) : null;
     }
-    _renderCoachElement(e, t) {
-      const i = this.getCalculatedDimension(e.dimension), s = this._getDescriptionTableCoach(e);
-      return d` <sbb-seat-reservation-scoped
-      scoped-classes="coach-wrapper"
-      height="${i.h}px"
-      width="${i.w}px"
+    _renderCoachElement(r, s) {
+      const e = this.getCalculatedDimension(r.dimension), t = this._getDescriptionTableCoach(r, s);
+      return b`<sbb-seat-reservation-scoped
+      style=${g({
+        "--sbb-seat-reservation-scoped-width": e.w,
+        "--sbb-seat-reservation-scoped-height": e.h
+      })}
     >
-      ${this._getRenderedCoachBorders(e, t)}
-      ${this._getRenderedGraphicalElements(e.graphicElements || [], e.dimension)}
-      ${this._getRenderedServiceElements(e.serviceElements)}
+      ${this._getRenderedCoachBorders(r, s)}
+      ${this._getRenderedGraphicalElements(r.graphicElements || [], r.dimension, s)}
+      ${this._getRenderedServiceElements(s, r.serviceElements)}
+
       <table
-        @focus=${() => this.onFocusTableCoachAndPreselectPlace(t)}
-        id="sbb-sr-coach-${t}"
+        @focus=${() => this.onFocusTableCoachAndPreselectPlace(s)}
+        id="sbb-sr-coach-${s}"
         class="sbb-sr-coach-wrapper__table"
-        aria-describedby="sbb-sr-coach-caption-${t}"
+        aria-describedby="sbb-sr-coach-caption-${s}"
       >
-        <caption id="sbb-sr-coach-caption-${t}" tabindex="-1">
-          <sbb-screen-reader-only>${s}</sbb-screen-reader-only>
+        <caption id="sbb-sr-coach-caption-${s}" tabindex="-1">
+          <sbb-screen-reader-only>${t}</sbb-screen-reader-only>
         </caption>
-        ${this._getRenderedRowPlaces(e, t)}
+        ${this._getRenderedRowPlaces(r, s)}
       </table>
     </sbb-seat-reservation-scoped>`;
     }
-    _getRenderedCoachBorders(e, t) {
-      const i = e.graphicElements, s = 1, a = i?.find((v) => v.icon === "DRIVER_AREA_FULL"), n = a ? e.dimension.w - a.dimension.w - s : e.dimension.w - s * 2, h = t === 0 && a ? a?.dimension.w * this.baseGridSize : this.baseGridSize;
-      return d`
-      <sbb-seat-reservation-scoped
-        scoped-classes="coach-border"
-        inset-block-start="${this.coachBorderPadding * -1}px"
-        inset-inline-start="${h}px"
-      >
-        <sbb-seat-reservation-graphic
-          name="COACH_BORDER_MIDDLE"
-          width=${n * this.baseGridSize}
-          height=${(e.dimension.h + this.coachBorderOffset * 2) * this.baseGridSize}
-          ?stretch=${!0}
-          role="presentation"
-        ></sbb-seat-reservation-graphic>
-      </sbb-seat-reservation-scoped>
+    /**
+     * @returns Returns the border graphic (COACH_BORDER_MIDDLE) of a coach with calculated border gap and coach width,
+     * depending on whether the coach is with a driver area or without.
+     */
+    _getRenderedCoachBorders(r, s) {
+      const i = r.graphicElements?.find((c) => c.icon === "DRIVER_AREA_FULL"), a = i ? r.dimension.w - i.dimension.w - 1 : r.dimension.w - 2, o = (r.dimension.h + this.coachBorderOffset * 2) * this.baseGridSize, l = s === 0 && i ? i?.dimension.w * this.baseGridSize : this.baseGridSize;
+      return b`
+      <sbb-seat-reservation-graphic
+        style=${g({
+        "--sbb-seat-reservation-graphic-width": a * this.baseGridSize,
+        "--sbb-seat-reservation-graphic-height": o,
+        "--sbb-seat-reservation-graphic-top": this.coachBorderPadding * -1,
+        "--sbb-seat-reservation-graphic-left": l,
+        "--sbb-seat-reservation-graphic-position": "absolute"
+      })}
+        name="COACH_BORDER_MIDDLE"
+        ?stretch=${!0}
+        role="presentation"
+      ></sbb-seat-reservation-graphic>
     `;
     }
-    _getRenderedRowPlaces(e, t) {
-      if (!e.places)
+    _getRenderedRowPlaces(r, s) {
+      if (!r.places)
         return null;
-      const i = {};
-      for (const s of e.places)
-        i[s.position.y] ? i[s.position.y].push(s) : i[s.position.y] = [s];
-      return Object.values(i).map((s, a) => d`
-          <tr id="row-${t}-${s[0].position.y}" data-row-index=${a}>
-            ${this._getRenderedColumnPlaces(s, t)}
+      const e = {};
+      for (const t of r.places)
+        e[t.position.y] ? e[t.position.y].push(t) : e[t.position.y] = [t];
+      return Object.values(e).map((t, i) => b`
+          <tr id="row-${s}-${t[0].position.y}" data-row-index=${i}>
+            ${this._getRenderedColumnPlaces(t, s)}
           </tr>
-        `).flatMap((s) => s);
+        `).flatMap((t) => t);
     }
-    _getRenderedColumnPlaces(e, t) {
-      return e.sort((i, s) => Number(i.position.x) - Number(s.position.x)), e?.map((i, s) => {
-        const a = this.getCalculatedDimension(i.dimension), n = this.getCalculatedPosition(i.position), h = this.alignVertical ? -90 : 0;
-        return d`
-        <sbb-seat-reservation-scoped
-          scoped-classes="graphical-element"
-          inset-block-start="${n.y}px"
-          inset-inline-start="${n.x}px"
-          width="${a.w}px"
-          height="${a.h}px"
-          z-index="${i.position.z}"
-          cell-id="cell-${t}-${i.position.y}-${s}"
-        >
+    _getRenderedColumnPlaces(r, s) {
+      return r.sort((e, t) => Number(e.position.x) - Number(t.position.x)), r?.map((e, t) => {
+        const i = this.getCalculatedDimension(e.dimension), a = this.getCalculatedPosition(e.position), o = this.alignVertical ? -90 : 0;
+        return b`
+        <td id="cell-${s}-${e.position.y}-${t}" class="graphical-element">
           <sbb-seat-reservation-place-control
-            @selectplace=${(v) => this._onSelectPlace(v)}
+            style=${g({
+          "--sbb-seat-reservation-place-control-width": i.w,
+          "--sbb-seat-reservation-place-control-height": i.h,
+          "--sbb-seat-reservation-place-control-top": a.y,
+          "--sbb-seat-reservation-place-control-left": a.x
+        })}
+            @selectplace=${(l) => this._onSelectPlace(l)}
             exportparts="sbb-sr-place-part"
-            id="seat-reservation__place-button-${t}-${i.number}"
+            id="seat-reservation__place-button-${s}-${e.number}"
             class="seat-reservation-place-control"
-            data-cell-id="${t}-${i.position.y}-${s}"
-            text=${i.number}
-            type=${i.type}
-            state=${i.state}
-            width=${i.dimension.w * this.baseGridSize}
-            height=${i.dimension.h * this.baseGridSize}
-            rotation=${i.rotation ?? A}
-            text-rotation=${h}
-            coach-index=${t}
-            .propertyIds=${i.propertyIds}
+            data-cell-id="${s}-${e.position.y}-${t}"
+            text=${e.number}
+            type=${e.type}
+            state=${e.state}
+            width=${e.dimension.w * this.baseGridSize}
+            height=${e.dimension.h * this.baseGridSize}
+            rotation=${e.rotation ?? v}
+            text-rotation=${o}
+            coach-index=${s}
+            .propertyIds=${e.propertyIds}
             .preventClick=${this.preventPlaceClick}
           ></sbb-seat-reservation-place-control>
-        </sbb-seat-reservation-scoped>
+        </td>
       `;
       });
     }
-    _getRenderedGraphicalElements(e, t) {
-      return e ? e?.map((i) => {
-        const s = i.icon ?? "", a = i.rotation || 0, n = this._notFixedRotatableAreaIcons.indexOf(i.icon) === -1, h = this.alignVertical && n ? a - 90 : a;
-        return this._notAreaElements.findIndex((v) => v === s) > -1 ? this._getRenderElementWithoutArea(i, a, t) : this._getRenderElementWithArea(i, h, t);
+    _getRenderedGraphicalElements(r, s, e) {
+      return r ? r?.map((t) => {
+        const i = t.icon ?? "", a = t.rotation || 0, o = this._notFixedRotatableAreaIcons.indexOf(t.icon) === -1, l = this.alignVertical && o ? a - 90 : a;
+        return this._notAreaElements.findIndex((c) => c === i) > -1 ? this._getRenderElementWithoutArea(t, a, s) : this._getRenderElementWithArea(t, l, s, e);
       }) : null;
     }
-    _getRenderElementWithArea(e, t, i) {
-      const s = e.icon?.indexOf("TABLE") === -1, a = e.icon && s ? e.icon : null, n = a !== "ENTRY_EXIT", h = e.icon ? _(e.icon, this._language.current) : A, v = this.getCalculatedDimension(e.dimension, i, !0, n), j = this.getCalculatedPosition(e.position, e.dimension, i, !0);
-      let w = "free";
-      return e.position.y === this.coachBorderOffset * -1 ? w = "upper-border" : e.position.y + e.dimension.h === i.h + this.coachBorderOffset && (w = "lower-border"), d`
-      <sbb-seat-reservation-scoped
-        scoped-classes="graphical-element"
-        inset-block-start="${j.y}px"
-        inset-inline-start="${j.x}px"
-        width="${v.w}px"
-        height="${v.h}px"
-        z-index="${e.position.z}"
+    /**
+     * creates a rendered element with an area component
+     * @param graphicalElement
+     * @param rotation
+     * @param coachDimension
+     * @param coachIndex used to generate a unique id for the popover trigger
+     * @private
+     */
+    _getRenderElementWithArea(r, s, e, t) {
+      const i = r.icon?.indexOf("TABLE") === -1, a = r.icon && i ? r.icon : null, o = a !== "ENTRY_EXIT", l = r.icon ? n(r.icon, this._language.current) : v, c = this.getCalculatedDimension(r.dimension, e, !0, o), p = this.getCalculatedPosition(r.position, r.dimension, e, !0), w = `popover-trigger-${t}-${p.x}-${p.y}`;
+      let _ = "free";
+      return r.position.y === this.coachBorderOffset * -1 ? _ = "upper-border" : r.position.y + r.dimension.h === e.h + this.coachBorderOffset && (_ = "lower-border"), b`
+      <sbb-seat-reservation-area
+        id="${w}"
+        style=${g({
+        "--sbb-seat-reservation-area-width": c.w,
+        "--sbb-seat-reservation-area-height": c.h,
+        "--sbb-seat-reservation-area-top": p.y,
+        "--sbb-seat-reservation-area-left": p.x
+      })}
+        mounting=${_}
+        background="dark"
+        aria-hidden="true"
       >
-        <sbb-seat-reservation-area
-          style=${Q({
-        "--sbb-reservation-area-width": e.dimension.w * this.baseGridSize,
-        "--sbb-reservation-area-height": e.dimension.h * this.baseGridSize
+        ${a ? b`
+              <sbb-seat-reservation-graphic
+                style=${g({
+        "--sbb-seat-reservation--cursor-pointer": "pointer"
       })}
-          mounting=${w}
-          background="dark"
-          aria-hidden="true"
-          title=${h}
-        >
-          ${a ? d`
-                <sbb-seat-reservation-graphic
-                  name=${a}
-                  rotation=${t}
-                  width=${this.baseGridSize}
-                  height=${this.baseGridSize}
-                  role="img"
-                  aria-hidden="true"
-                ></sbb-seat-reservation-graphic>
-              ` : A}
-        </sbb-seat-reservation-area>
-      </sbb-seat-reservation-scoped>
+                name=${a}
+                width=${this.baseGridSize}
+                height=${this.baseGridSize}
+                rotation=${s}
+                role="img"
+                aria-hidden="true"
+              ></sbb-seat-reservation-graphic>
+            ` : v}
+      </sbb-seat-reservation-area>
+      ${this._popover(w, l)}
     `;
     }
-    _getRenderElementWithoutArea(e, t, i) {
-      const s = this.getCalculatedDimension(e.dimension, i), a = this.getCalculatedPosition(e.position, e.dimension, i), n = e.icon && e.icon.indexOf("DRIVER_AREA") === -1 ? e.icon : e.icon?.concat("_", this.seatReservation.vehicleType);
-      return d`
-      <sbb-seat-reservation-scoped
-        scoped-classes="graphical-element"
-        inset-block-start="${a.y}px"
-        inset-inline-start="${a.x}px"
-        width="${s.w}px"
-        height="${s.h}px"
-        z-index="${e.position.z}"
-      >
+    /**
+     * Creates a popover for extra service information
+     * @param triggerId
+     * @param popoverContent
+     * @private
+     */
+    _popover(r, s) {
+      return b`
+      <sbb-popover trigger="${r}">
+        <p class="sbb-text-s sbb-sr-popover">${s}</p>
+      </sbb-popover>
+    `;
+    }
+    /**
+     * trigger to close all opened popovers (normally only one is opened at a time)
+     * @private
+     */
+    _closePopover() {
+      this.shadowRoot?.querySelectorAll('sbb-popover[data-state="opened"]').forEach((r) => r.setAttribute("data-state", "closed"));
+    }
+    _getRenderElementWithoutArea(r, s, e) {
+      const t = this.getCalculatedDimension(r.dimension, e), i = this.getCalculatedPosition(r.position, r.dimension, e), a = r.icon && r.icon.indexOf("DRIVER_AREA") === -1 ? r.icon : r.icon?.concat("_", this.seatReservation.vehicleType);
+      return b` <sbb-seat-reservation-graphic
+      style=${g({
+        "--sbb-seat-reservation-graphic-width": t.w,
+        "--sbb-seat-reservation-graphic-height": t.h,
+        "--sbb-seat-reservation-graphic-top": i.y,
+        "--sbb-seat-reservation-graphic-left": i.x,
+        "--sbb-seat-reservation-graphic-position": "absolute"
+      })}
+      name=${a ?? v}
+      rotation=${s}
+      aria-hidden="true"
+      ?stretch=${!0}
+    ></sbb-seat-reservation-graphic>`;
+    }
+    _getRenderedServiceElements(r, s) {
+      return s ? s?.map((e) => {
+        const t = e.icon ? n(e.icon, this._language.current) : null, i = this.getCalculatedDimension(e.dimension), a = this.getCalculatedPosition(e.position), o = e.rotation || 0, l = this.alignVertical ? o - 90 : o, c = `popover-trigger-${r}-${a.x}-${a.y}`;
+        return b`
         <sbb-seat-reservation-graphic
-          name=${n ?? A}
-          width=${e.dimension.w * this.baseGridSize}
-          height=${e.dimension.h * this.baseGridSize}
-          rotation=${t}
+          id="${c}"
+          style=${g({
+          "--sbb-seat-reservation-graphic-width": i.w,
+          "--sbb-seat-reservation-graphic-height": i.h,
+          "--sbb-seat-reservation-graphic-top": a.y,
+          "--sbb-seat-reservation-graphic-left": a.x,
+          "--sbb-seat-reservation-graphic-position": "absolute",
+          "--sbb-seat-reservation--cursor-pointer": "pointer"
+        })}
+          name=${e.icon ?? v}
+          .rotation=${l}
+          role="img"
           aria-hidden="true"
-          ?stretch=${!0}
         ></sbb-seat-reservation-graphic>
-      </sbb-seat-reservation-scoped>
-    `;
-    }
-    _getRenderedServiceElements(e) {
-      return e ? e?.map((t) => {
-        const i = t.icon ? _(t.icon, this._language.current) : null, s = this.getCalculatedDimension(t.dimension), a = this.getCalculatedPosition(t.position), n = t.rotation || 0, h = this.alignVertical ? n - 90 : n;
-        return d`
-        <sbb-seat-reservation-scoped
-          scoped-classes="graphical-element"
-          inset-block-start="${a.y}px"
-          inset-inline-start="${a.x}px"
-          width="${s.w}px"
-          height="${s.h}px"
-          z-index="${t.position.z}"
-        >
-          <sbb-seat-reservation-graphic
-            name=${t.icon ?? A}
-            width=${t.dimension.w * this.baseGridSize}
-            height=${t.dimension.h * this.baseGridSize}
-            .rotation=${h}
-            role="img"
-            aria-hidden="true"
-            title=${i ?? A}
-          ></sbb-seat-reservation-graphic>
-        </sbb-seat-reservation-scoped>
+        ${this._popover(c, t)}
       `;
       }) : null;
     }
@@ -343,53 +341,47 @@ let me = (() => {
      * Each selection emits an array of all selected places
      * @param selectPlaceEvent
      */
-    _onSelectPlace(e) {
-      const t = e.detail;
-      this.preventCoachScrollByPlaceClick = !0, this.isCoachGridFocusable = !1, this.preventPlaceClick || (this.updateSelectedSeatReservationPlaces(t), this.updateCurrentSelectedPlaceInCoach(t));
+    _onSelectPlace(r) {
+      const s = r.detail;
+      this.preventCoachScrollByPlaceClick = !0, this.isCoachGridFocusable = !1, this.preventPlaceClick || (this.updateSelectedSeatReservationPlaces(s), this.updateCurrentSelectedPlaceInCoach(s));
     }
-    _onSelectNavCoach(e) {
-      const t = e.detail;
-      this.isKeyboardNavigation = !1, t !== null && t !== this.currSelectedCoachIndex ? (this.unfocusPlaceElement(), this.scrollToSelectedNavCoach(t)) : t === this.currSelectedCoachIndex && (this.updateCurrentSelectedCoach(), this.preselectPlaceInCoach());
+    _onSelectNavCoach(r) {
+      const s = r.detail;
+      this.isKeyboardNavigation = !1, s !== null && s !== this.currSelectedCoachIndex ? (this.unfocusPlaceElement(), this.scrollToSelectedNavCoach(s)) : s === this.currSelectedCoachIndex && (this.updateCurrentSelectedCoach(), this.preselectPlaceInCoach()), this._closePopover();
     }
     _onFocusNavCoach() {
       this.preventCoachScrollByPlaceClick ? this.focusPlaceElement(this.currSelectedPlace) : this.preselectPlaceInCoach(), this.isAutoScrolling = !1;
     }
-    _getDescriptionTableCoach(e) {
-      if (!e.places?.length)
-        return _("COACH_BLOCKED_TABLE_CAPTION", this._language.current, [
-          e.id
+    _getDescriptionTableCoach(r, s) {
+      if (!r.places?.length)
+        return n("COACH_BLOCKED_TABLE_CAPTION", this._language.current, [
+          r.id
         ]);
-      let t = "";
-      const i = this._getTitleDescriptionListString(e.graphicElements), s = this._getTitleDescriptionListString(e.serviceElements);
-      return t = _("COACH_TABLE_CAPTION", this._language.current, [
-        e.id
-      ]), (i || s) && (t += ". " + _("COACH_AVAILABLE_SERVICES", this._language.current) + ": ", t += s + ", " + i + "."), t;
+      let e;
+      const t = this._getTitleDescriptionListString(r.graphicElements), i = this._getTitleDescriptionListString(r.serviceElements);
+      if (e = n("COACH_TABLE_CAPTION", this._language.current, [
+        r.id
+      ]), !this.hasNavigation) {
+        const a = this.getAvailableFreePlacesNumFromCoach(s), o = n("COACH_AVAILABLE_NUMBER_OF_PLACES", this._language.current, [a.seats, a.bicycles]);
+        e = e.concat(". ").concat(o).concat(". ");
+      }
+      return (t || i) && (e += ". " + n("COACH_AVAILABLE_SERVICES", this._language.current) + ": ", e += i + ", " + t + "."), e;
     }
-    _getTitleDescriptionListString(e) {
-      const t = [];
-      return e?.map((i) => {
-        const s = i.icon;
-        if (!s)
+    _getTitleDescriptionListString(r) {
+      const s = [];
+      return r?.map((e) => {
+        const t = e.icon;
+        if (!t)
           return null;
-        const a = t.indexOf(s) > -1, n = _(i.icon, this._language.current), h = this._notFixedRotatableAreaIcons.indexOf(s) === -1 && this._notAreaElements.indexOf(s) === -1;
-        return a || t.push(i.icon), n && !a && h ? n : null;
-      }).filter((i) => !!i).join(", ");
+        const i = s.indexOf(t) > -1, a = n(e.icon, this._language.current), o = this._notFixedRotatableAreaIcons.indexOf(t) === -1 && this._notAreaElements.indexOf(t) === -1;
+        return i || s.push(e.icon), a && !i && o ? a : null;
+      }).filter((e) => !!e).join(", ");
     }
-  }, g = new WeakMap(), m = new WeakMap(), f = new WeakMap(), $ = new WeakMap(), C = new WeakMap(), u = c, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(N[Symbol.metadata] ?? null) : void 0;
-    T = [y({ attribute: "seat-reservation", type: Object })], E = [P(), y({ attribute: "has-navigation", type: Boolean })], G = [P(), y({ attribute: "align-vertical", type: Boolean })], B = [P(), y({ attribute: "max-reservations", type: Number })], M = [P(), y({ attribute: "prevent-place-click", type: Boolean })], S(c, null, T, { kind: "accessor", name: "seatReservation", static: !1, private: !1, access: { has: (t) => "seatReservation" in t, get: (t) => t.seatReservation, set: (t, i) => {
-      t.seatReservation = i;
-    } }, metadata: e }, z, O), S(c, null, E, { kind: "accessor", name: "hasNavigation", static: !1, private: !1, access: { has: (t) => "hasNavigation" in t, get: (t) => t.hasNavigation, set: (t, i) => {
-      t.hasNavigation = i;
-    } }, metadata: e }, k, D), S(c, null, G, { kind: "accessor", name: "alignVertical", static: !1, private: !1, access: { has: (t) => "alignVertical" in t, get: (t) => t.alignVertical, set: (t, i) => {
-      t.alignVertical = i;
-    } }, metadata: e }, I, V), S(c, null, B, { kind: "accessor", name: "maxReservations", static: !1, private: !1, access: { has: (t) => "maxReservations" in t, get: (t) => t.maxReservations, set: (t, i) => {
-      t.maxReservations = i;
-    } }, metadata: e }, L, F), S(c, null, M, { kind: "accessor", name: "preventPlaceClick", static: !1, private: !1, access: { has: (t) => "preventPlaceClick" in t, get: (t) => t.preventPlaceClick, set: (t, i) => {
-      t.preventPlaceClick = i;
-    } }, metadata: e }, H, W), S(null, o = { value: u }, r, { kind: "class", name: u.name, metadata: e }, null, l), u = o.value, e && Object.defineProperty(u, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), c.styles = ee, p(u, l), u;
+  }, d = h, (() => {
+    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
+    $(null, u = { value: d }, C, { kind: "class", name: d.name, metadata: r }, null, m), d = u.value, r && Object.defineProperty(d, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
+  })(), h.styles = P, x(d, m), d;
 })();
 export {
-  me as SbbSeatReservationElement
+  q as SbbSeatReservationElement
 };