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

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

@@ -1,37 +1,27 @@
-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 C, __runInitializers as S } from "tslib";
+import { SbbLanguageController as y } from "@sbb-esta/lyne-elements/core/controllers.js";
+import { css as A, isServer as R, html as b, nothing as v } from "lit";
+import { customElement as E } from "lit/decorators.js";
+import { classMap as m } 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 P } 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 T = A`*,:before,:after{box-sizing:border-box}:host{--sbb-seat-reservation-grid-size: 16px;--sbb-seat-reservation-height: 0;--sbb-seat-reservation-decks: 1;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__navigation-control-button{position:absolute;z-index:10}.sbb-sr__navigation-control-button#first-tab-element{inset-inline-end:calc(8 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr__navigation-control-button#last-tab-element{inset-inline-start:calc(8 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr-navigation-wrapper{overflow:hidden;padding-block:0 calc(32 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.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:calc(4 * var(--sbb-seat-reservation-one-px-rem, .0625rem));padding:calc(2 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr__wrapper-coach-decks{display:flex;overflow:hidden;height:inherit}.sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels{display:flex;justify-content:space-between;height:calc(var(--sbb-seat-reservation-height) * var(--sbb-seat-reservation-one-px-rem, .0625rem));writing-mode:vertical-lr}.sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels b{height:calc(50% - 16 * var(--sbb-seat-reservation-one-px-rem, .0625rem));width:calc(20 * var(--sbb-seat-reservation-one-px-rem, .0625rem));margin-block-end:16px;rotate:180deg;text-align:center;line-height:calc(20 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr__wrapper{--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__wrapper::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sr__wrapper::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sr__wrapper::-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__wrapper::-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__wrapper::-webkit-scrollbar-button,.sbb-sr__wrapper::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-sr__wrapper{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-sr__wrapper{overflow-x:scroll;padding-block:calc(8 * var(--sbb-seat-reservation-one-px-rem, .0625rem)) calc(16 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr__wrapper .sbb-sr__parent{display:flex;flex-direction:column;position:relative}.sbb-sr__list-decks{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-direction:column}.sbb-sr__list-decks--gap{gap:calc(48 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr__list-item-deck{position:relative}.sbb-sr__list-coaches{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;gap:calc(4 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.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-height) + 24) * var(--sbb-seat-reservation-one-px-rem, .0625rem)) 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:calc(16 * var(--sbb-seat-reservation-one-px-rem, .0625rem));inset-inline-start:calc(16 * var(--sbb-seat-reservation-one-px-rem, .0625rem));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:calc(16 * var(--sbb-seat-reservation-one-px-rem, .0625rem));inset-inline-start:calc(16 * var(--sbb-seat-reservation-one-px-rem, .0625rem));rotate:90deg}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-navigation-wrapper{padding-block-end:initial;padding-inline-start:calc(16 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.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-height) + 24) * var(--sbb-seat-reservation-one-px-rem, .0625rem)) 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:calc(2 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.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__wrapper-coach-decks{flex-direction:column}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels{flex-direction:column-reverse;width:calc(100% - 24 * var(--sbb-seat-reservation-one-px-rem, .0625rem));height:initial}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels b{width:calc(50% - 16 * var(--sbb-seat-reservation-one-px-rem, .0625rem));height:calc(20 * var(--sbb-seat-reservation-one-px-rem, .0625rem));margin-bottom:16px;rotate:initial;writing-mode:initial}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper{--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__wrapper-coach-decks .sbb-sr__wrapper::-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__wrapper-coach-decks .sbb-sr__wrapper::-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__wrapper-coach-decks .sbb-sr__wrapper::-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__wrapper-coach-decks .sbb-sr__wrapper::-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__wrapper-coach-decks .sbb-sr__wrapper::-webkit-scrollbar-button,.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper{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__wrapper-coach-decks .sbb-sr__wrapper{overflow:hidden scroll;height:100%;padding:0}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid .sbb-sr__wrapper-coach-decks .sbb-sr__parent{rotate:90deg;transform-origin:calc((var(--sbb-seat-reservation-height) + 24 - 24 - 6 * (var(--sbb-seat-reservation-decks) - 1)) / 2 * var(--sbb-seat-reservation-one-px-rem, .0625rem)) calc((var(--sbb-seat-reservation-height) + 24 - 24 - 6 * (var(--sbb-seat-reservation-decks) - 1)) / 2 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}`;
+let K = (() => {
+  var d;
+  let $ = [E("sbb-seat-reservation")], w, f = [], c, k = P;
+  return d = class extends k {
     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 = [
-        "DRIVER_AREA_FULL",
+      super(...arguments), this._language = new y(this), this._notAreaElements = [
+        "DRIVER_AREA",
         "COACH_PASSAGE",
         "COACH_WALL_NO_PASSAGE",
         "COMPARTMENT_PASSAGE",
@@ -40,301 +30,312 @@ 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((e) => e.removeAttribute("tabindex")) : this.shadowRoot?.querySelectorAll("table").forEach((e) => e.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.initPrepairSeatReservationData(), this.initNavigationSelectionByScrollEvent(), this.requestUpdate();
+      });
     }
     render() {
-      return this._initVehicleSeatReservationConstruction(), this._coachesHtmlTemplate || null;
+      return R || this._determineBaseFontSize(), this._initVehicleSeatReservationConstruction(), this._coachesHtmlTemplate || null;
     }
-    _componentSetup() {
-      this.initNavigationSelectionByScrollEvent();
+    _determineBaseFontSize() {
+      const e = 1 / parseInt(window.getComputedStyle(document.body).fontSize, 10);
+      this.style?.setProperty("--sbb-seat-reservation-one-px-rem", `${e + "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 = this.alignVertical ? "sbb-sr__grid--vertical" : "";
+      this._coachesHtmlTemplate = b`
+      <div class="sbb-sr__container">
+        <div class="sbb-sr sbb-sr__grid ${r}">
+          <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-coach-decks">
+                  <div class="sbb-sr__wrapper-deck-labels">${this._renderDeckLabels()}</div>
+                  <div id="sbb-sr__wrapper-scrollarea" class="sbb-sr__wrapper">
+                    <div id="sbb-sr__parent-area" class="sbb-sr__parent" tabindex="-1">
+                      <ul
+                        class="${m({
+        "sbb-sr__list-decks": !0,
+        "sbb-sr__list-decks--gap": this.hasMultipleDecks
+      })}"
+                      >
+                        ${this.seatReservations?.map((e, t) => b`<li class="sbb-sr__list-item-deck">
+                              <ul class="sbb-sr__list-coaches" role="presentation">
+                                ${this._renderCoaches(e, t)}
+                              </ul>
+                            </li>`)}
+                      </ul>
+                    </div>
+                  </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>
     `;
     }
+    _renderDeckLabels() {
+      return this.hasMultipleDecks ? this.seatReservations.map((r) => {
+        const e = n(r.deckCoachLevel, this._language.current);
+        return b`<b aria-hidden="true">${e}</b>`;
+      }) : null;
+    }
+    _renderNavigationControlButton(r) {
+      if (!this.hasNavigation || !this.seatReservations)
+        return null;
+      const e = r == "DIRECTION_RIGHT" ? "last-tab-element" : "first-tab-element", t = r == "DIRECTION_RIGHT" ? "arrow-right-small" : "arrow-left-small", s = r == "DIRECTION_RIGHT" ? n("SEAT_RESERVATION_END", this._language.current) : n("SEAT_RESERVATION_BEGIN", this._language.current);
+      let a = !0;
+      return (r == "DIRECTION_LEFT" && this.selectedCoachIndex > 0 || r == "DIRECTION_RIGHT" && this.selectedCoachIndex < this.seatReservations[this.currSelectedDeckIndex].coachItems.length - 1) && (a = !1), b`<sbb-secondary-button
+      @click="${() => this.navigateByDirectionBtn(r)}"
+      id="${e}"
+      class="sbb-sr__navigation-control-button"
+      size="s"
+      icon-name="${t}"
+      type="button"
+      aria-label="${s}"
+      role="contentinfo"
+      .disabledInteractive="${a || v}"
+    ></sbb-secondary-button>`;
+    }
     _renderNavigation() {
-      return this.hasNavigation ? d`
-      <nav class="${Y({ "sbb-sr-navigation--vertical": this.alignVertical })}">
+      return !this.hasNavigation || !this.seatReservations ? null : 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>
-              <sbb-seat-reservation-navigation-coach
-                @selectcoach=${(i) => this._onSelectNavCoach(i)}
-                @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}"
-                ?vertical="${this.alignVertical}"
-              >
-              </sbb-seat-reservation-navigation-coach>
-            </li>`)}
+          ${this.seatReservations[this.currSelectedDeckIndex]?.coachItems.map((r, e) => {
+        const t = this.getAvailableFreePlacesNumFromCoach(e);
+        return b`<li>
+                <sbb-seat-reservation-navigation-coach
+                  @selectcoach=${(s) => this._onSelectNavCoach(s)}
+                  @focuscoach=${() => this._onFocusNavCoach()}
+                  class="${m({
+          "sbb-sr__navigation-coach--hover-scroll": this.hoveredScrollCoachIndex === e
+        })}"
+                  index="${e}"
+                  coach-id="${r.id}"
+                  .freePlacesByType="${t}"
+                  .selected=${this.selectedCoachIndex === e}
+                  .focused=${this.focusedCoachIndex === e}
+                  .propertyIds="${r.propertyIds}"
+                  .travelClass="${r.travelClass}"
+                  ?driver-area="${!r.places?.length}"
+                  ?first="${r?.driverAreaSide?.left}"
+                  ?last="${r?.driverAreaSide?.right}"
+                  ?vertical="${this.alignVertical}"
+                >
+                </sbb-seat-reservation-navigation-coach>
+              </li>`;
+      })}
         </ul>
       </nav>
-    ` : null;
+    </div>`;
     }
     /**
      *
      * @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, e) {
+      const t = JSON.parse(JSON.stringify(r?.coachItems));
+      return t ? t.map((s, a) => b`
+        <li class="sbb-sr__item-coach">
+          ${this._renderCoachElement(s, a, 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, e, t) {
+      const s = this.getCalculatedDimension(r.dimension), a = this._getDescriptionTableCoach(r, e);
+      return b`<sbb-seat-reservation-scoped
+      style=${g({
+        "--sbb-seat-reservation-scoped-width": s.w,
+        "--sbb-seat-reservation-scoped-height": s.h
+      })}
     >
-      ${this._getRenderedCoachBorders(e, t)}
-      ${this._getRenderedGraphicalElements(e.graphicElements || [], e.dimension)}
-      ${this._getRenderedServiceElements(e.serviceElements)}
+      ${this._getRenderedCoachBorders(r)}
+      ${this._getRenderedGraphicalElements(r.graphicElements || [], r.dimension, e, t)}
+      ${this._getRenderedServiceElements(e, t, r.serviceElements)}
+
       <table
-        @focus=${() => this.onFocusTableCoachAndPreselectPlace(t)}
-        id="sbb-sr-coach-${t}"
+        @focus=${() => this.onFocusTableCoachAndPreselectPlace(e)}
+        id="sbb-sr-coach-${e}"
         class="sbb-sr-coach-wrapper__table"
-        aria-describedby="sbb-sr-coach-caption-${t}"
+        aria-describedby="sbb-sr-coach-caption-${e}"
       >
-        <caption id="sbb-sr-coach-caption-${t}" tabindex="-1">
-          <sbb-screen-reader-only>${s}</sbb-screen-reader-only>
+        <caption id="sbb-sr-coach-caption-${e}" tabindex="-1">
+          <sbb-screen-reader-only>${a}</sbb-screen-reader-only>
         </caption>
-        ${this._getRenderedRowPlaces(e, t)}
+        ${this._getRenderedRowPlaces(r, e, t)}
       </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) {
+      const s = r.graphicElements?.find((l) => l.icon === "DRIVER_AREA"), a = s ? r.dimension.w - s.dimension.w - 1 : r.dimension.w - 2, o = (r.dimension.h + this.coachBorderOffset * 2) * this.baseGridSize, i = s && s.position.x === 0 ? s?.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": i,
+        "--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, e, t) {
+      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 s = {};
+      for (const a of r.places)
+        s[a.position.y] ? s[a.position.y].push(a) : s[a.position.y] = [a];
+      return Object.values(s).map((a, o) => b`
+          <tr id="row-${e}-${a[0].position.y}" data-row-index=${o}>
+            ${this._getRenderedColumnPlaces(a, e, t)}
           </tr>
-        `).flatMap((s) => s);
+        `).flatMap((a) => a);
     }
-    _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, e, t) {
+      return r.sort((s, a) => Number(s.position.x) - Number(a.position.x)), r?.map((s, a) => {
+        const o = this.getCalculatedDimension(s.dimension), i = this.getCalculatedPosition(s.position), l = this.alignVertical ? -90 : 0;
+        return b`
+        <td
+          id="cell-${t}-${e}-${s.position.y}-${a}"
+          class="graphical-element"
         >
           <sbb-seat-reservation-place-control
-            @selectplace=${(v) => this._onSelectPlace(v)}
+            style=${g({
+          "--sbb-seat-reservation-place-control-width": o.w,
+          "--sbb-seat-reservation-place-control-height": o.h,
+          "--sbb-seat-reservation-place-control-top": i.y,
+          "--sbb-seat-reservation-place-control-left": i.x
+        })}
+            @selectplace=${(h) => this._onSelectPlace(h)}
             exportparts="sbb-sr-place-part"
-            id="seat-reservation__place-button-${t}-${i.number}"
+            id="seat-reservation__place-button-${t}-${e}-${s.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="${e}-${s.position.y}-${a}"
+            text=${s.number}
+            type=${s.type}
+            state=${s.state}
+            width=${s.dimension.w * this.baseGridSize}
+            height=${s.dimension.h * this.baseGridSize}
+            rotation=${s.rotation ?? v}
+            text-rotation=${l}
+            coach-index=${e}
+            deck-index=${t}
+            .propertyIds=${s.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, e, t, s) {
+      return r ? r?.map((a) => {
+        const o = a.icon ?? "", i = a.rotation || 0, l = this._notFixedRotatableAreaIcons.indexOf(a.icon) === -1, h = this.alignVertical && l ? i - 90 : i;
+        return this._notAreaElements.findIndex((p) => p === o) > -1 ? this._getRenderElementWithoutArea(a, i, e) : this._getRenderElementWithArea(a, h, e, t, s);
       }) : 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}"
-      >
-        <sbb-seat-reservation-area
-          style=${Q({
-        "--sbb-reservation-area-width": e.dimension.w * this.baseGridSize,
-        "--sbb-reservation-area-height": e.dimension.h * this.baseGridSize
+    /**
+     * 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, e, t, s, a) {
+      const o = r.icon?.indexOf("TABLE") === -1, i = r.icon && o ? r.icon : null, l = i !== "ENTRY_EXIT", h = r.icon ? n(r.icon, this._language.current) : v, p = this.getCalculatedDimension(r.dimension, t, !0, l), _ = this.getCalculatedPosition(r.position, r.dimension, t, !0), x = `popover-trigger-${a}-${s}-${_.x}-${_.y}`;
+      let u = "free";
+      return r.position.y === this.coachBorderOffset * -1 ? u = "upper-border" : r.position.y + r.dimension.h === t.h + this.coachBorderOffset && (u = "lower-border"), b`
+      <sbb-seat-reservation-area
+        id="${x}"
+        class="${m({ "sbb-seat-reservation-area--cursor-pointer": i !== null })}"
+        style=${g({
+        "--sbb-seat-reservation-area-width": p.w,
+        "--sbb-seat-reservation-area-height": p.h,
+        "--sbb-seat-reservation-area-top": _.y,
+        "--sbb-seat-reservation-area-left": _.x
       })}
-          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>
+        mounting=${u}
+        background="dark"
+        aria-hidden="true"
+      >
+        ${i ? b`
+              <sbb-seat-reservation-graphic
+                name=${i}
+                width=${this.baseGridSize}
+                height=${this.baseGridSize}
+                rotation=${e}
+                role="img"
+                aria-hidden="true"
+              ></sbb-seat-reservation-graphic>
+            ` : v}
+      </sbb-seat-reservation-area>
+      ${i ? this._popover(x, h) : v}
     `;
     }
-    _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}"
-      >
+    _getRenderElementWithoutArea(r, e, t) {
+      const s = this.getCalculatedDimension(r.dimension, t), a = this.getCalculatedPosition(r.position, r.dimension, t), o = r.icon && r.icon.indexOf("DRIVER_AREA") === -1 ? r.icon : r.icon?.concat("_", this.seatReservations[this.currSelectedDeckIndex].vehicleType);
+      return b` <sbb-seat-reservation-graphic
+      style=${g({
+        "--sbb-seat-reservation-graphic-width": s.w,
+        "--sbb-seat-reservation-graphic-height": s.h,
+        "--sbb-seat-reservation-graphic-top": a.y,
+        "--sbb-seat-reservation-graphic-left": a.x,
+        "--sbb-seat-reservation-graphic-position": "absolute"
+      })}
+      name=${o ?? v}
+      rotation=${e}
+      aria-hidden="true"
+      ?stretch=${!0}
+    ></sbb-seat-reservation-graphic>`;
+    }
+    _getRenderedServiceElements(r, e, t) {
+      return t ? t?.map((s) => {
+        const a = s.icon ? n(s.icon, this._language.current) : null, o = this.getCalculatedDimension(s.dimension), i = this.getCalculatedPosition(s.position), l = s.rotation || 0, h = this.alignVertical ? l - 90 : l, p = `popover-trigger-${e}-${r}-${i.x}-${i.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="${p}"
+          style=${g({
+          "--sbb-seat-reservation-graphic-width": o.w,
+          "--sbb-seat-reservation-graphic-height": o.h,
+          "--sbb-seat-reservation-graphic-top": i.y,
+          "--sbb-seat-reservation-graphic-left": i.x,
+          "--sbb-seat-reservation-graphic-position": "absolute"
+        })}
+          class="sbb-seat-reservation-graphic--cursor-pointer"
+          name=${s.icon ?? v}
+          .rotation=${h}
+          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(p, a)}
       `;
       }) : null;
     }
@@ -343,53 +344,67 @@ 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 e = r.detail;
+      this.preventCoachScrollByPlaceClick = !0, this.isCoachGridFocusable = !1, this.preventPlaceClick || (this.currSelectedDeckIndex = e.deckIndex, this.updateSelectedSeatReservationPlaces(e), this.updateCurrentSelectedPlaceInCoach(e));
     }
-    _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 e = r.detail;
+      this.isKeyboardNavigation = !1, e !== null && e !== this.currSelectedCoachIndex ? (this.unfocusPlaceElement(), this.scrollToSelectedNavCoach(e)) : e === 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
+    /**
+     * Creates a popover for extra service information
+     * @param triggerId
+     * @param popoverContent
+     * @private
+     */
+    _popover(r, e) {
+      return b`
+      <sbb-popover trigger="${r}">
+        <p class="sbb-text-s sbb-sr-popover">${e}</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"));
+    }
+    _getDescriptionTableCoach(r, e) {
+      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 t;
+      const s = this._getTitleDescriptionListString(r.graphicElements), a = this._getTitleDescriptionListString(r.serviceElements);
+      if (t = n("COACH_TABLE_CAPTION", this._language.current, [
+        r.id
+      ]), !this.hasNavigation) {
+        const o = this.getAvailableFreePlacesNumFromCoach(e), i = n("COACH_AVAILABLE_NUMBER_OF_PLACES", this._language.current, [o.seats, o.bicycles]);
+        t = t.concat(". ").concat(i).concat(". ");
+      }
+      return (s || a) && (t += ". " + n("COACH_AVAILABLE_SERVICES", this._language.current) + ": ", t += a + ", " + s + "."), t;
     }
-    _getTitleDescriptionListString(e) {
-      const t = [];
-      return e?.map((i) => {
-        const s = i.icon;
+    _getTitleDescriptionListString(r) {
+      const e = [];
+      return r?.map((t) => {
+        const s = t.icon;
         if (!s)
           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 a = e.indexOf(s) > -1, o = n(t.icon, this._language.current), i = this._notFixedRotatableAreaIcons.indexOf(s) === -1 && this._notAreaElements.indexOf(s) === -1;
+        return a || e.push(t.icon), o && !a && i ? o : null;
+      }).filter((t) => !!t).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;
+  }, c = d, (() => {
+    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(k[Symbol.metadata] ?? null) : void 0;
+    C(null, w = { value: c }, $, { kind: "class", name: c.name, metadata: r }, null, f), c = w.value, r && Object.defineProperty(c, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
+  })(), d.styles = T, S(c, f), c;
 })();
 export {
-  me as SbbSeatReservationElement
+  K as SbbSeatReservationElement
 };