@sbb-esta/lyne-elements-experimental 3.12.0 → 3.13.0

package/seat-reservation/seat-reservation/seat-reservation-base-element.js

@@ -1,19 +1,19 @@
-var ve = (n) => {
+var fe = (n) => {
   throw TypeError(n);
 };
-var fe = (n, d, u) => d.has(n) || ve("Cannot " + u);
-var g = (n, d, u) => (fe(n, d, "read from private field"), u ? u.call(n) : d.get(n)), v = (n, d, u) => d.has(n) ? ve("Cannot add the same private member more than once") : d instanceof WeakSet ? d.add(n) : d.set(n, u), r = (n, d, u, T) => (fe(n, d, "write to private field"), T ? T.call(n, u) : d.set(n, u), u);
+var Se = (n, d, u) => d.has(n) || fe("Cannot " + u);
+var g = (n, d, u) => (Se(n, d, "read from private field"), u ? u.call(n) : d.get(n)), v = (n, d, u) => d.has(n) ? fe("Cannot add the same private member more than once") : d instanceof WeakSet ? d.add(n) : d.set(n, u), r = (n, d, u, D) => (Se(n, d, "write to private field"), D ? D.call(n, u) : d.set(n, u), u);
 import { __runInitializers as l, __esDecorate as f } from "tslib";
-import { isArrowKeyOrPageKeysPressed as Ce } from "@sbb-esta/lyne-elements/core/a11y.js";
+import { isArrowKeyOrPageKeysPressed as Ie } from "@sbb-esta/lyne-elements/core/a11y.js";
 import { forceType as C } from "@sbb-esta/lyne-elements/core/decorators.js";
-import { LitElement as pe, isServer as xe } from "lit";
-import { property as S, state as w, eventOptions as Ie } from "lit/decorators.js";
-import { mapIconToSvg as Se, mapPlaceInfosToPlaceSelection as me, mapPlaceAndCoachToSeatReservationPlaceSelection as _e, mapCoachInfosToCoachSelection as be } from "../common/mapper.js";
-var p;
+import { LitElement as xe, isServer as pe } from "lit";
+import { property as S, state as T, eventOptions as me } from "lit/decorators.js";
+import { mapIconToSvg as Ce, mapPlaceInfosToPlaceSelection as _e, mapPlaceAndCoachToSeatReservationPlaceSelection as ye, mapCoachInfosToCoachSelection as be } from "../common/mapper.js";
+var I;
 (function(n) {
   n.right = "right", n.left = "left";
-})(p || (p = {}));
-const ye = 3, Pe = [
+})(I || (I = {}));
+const Pe = 3, Ae = [
   "sa-vo",
   "sa-rs",
   "sa-abteilkinderwagen",
@@ -22,25 +22,25 @@ const ye = 3, Pe = [
   "sa-bz",
   "sa-rz"
 ];
-let Be = (() => {
-  var x, I, m, _, b, y, P, A, R, E, N, k, h;
-  let n = pe, d = [], u, T = [], D = [], B, z = [], F = [], V, O = [], G = [], L, W = [], X = [], H, K = [], U = [], q, M = [], $ = [], j, Y = [], J = [], Q, Z = [], ee = [], te, se = [], ie = [], ae, ce = [], oe = [], re, le = [], ne = [], he, de = [], ue = [], ge;
+let ze = (() => {
+  var x, p, m, _, y, b, P, A, k, R, E, N, h;
+  let n = xe, d = [], u, D = [], B = [], z, F = [], V = [], O, G = [], L = [], W, X = [], H = [], K, U = [], q = [], M, $ = [], j = [], Y, J = [], Q = [], Z, ee = [], te = [], se, ie = [], ae = [], ce, oe = [], re = [], le, ne = [], he = [], de, ue = [], ge = [], ve;
   return h = class extends n {
     constructor() {
       super(...arguments);
       v(this, x);
-      v(this, I);
+      v(this, p);
       v(this, m);
       v(this, _);
-      v(this, b);
       v(this, y);
+      v(this, b);
       v(this, P);
       v(this, A);
+      v(this, k);
       v(this, R);
       v(this, E);
       v(this, N);
-      v(this, k);
-      r(this, x, (l(this, d), l(this, T, null))), r(this, I, (l(this, D), l(this, z, !0))), r(this, m, (l(this, F), l(this, O, !1))), r(this, _, (l(this, G), l(this, W, 16))), r(this, b, (l(this, X), l(this, K, null))), r(this, y, (l(this, U), l(this, M, -1))), r(this, P, (l(this, $), l(this, Y, -1))), r(this, A, (l(this, J), l(this, Z, !1))), r(this, R, (l(this, ee), l(this, se, -1))), r(this, E, (l(this, ie), l(this, ce, -1))), r(this, N, (l(this, oe), l(this, le, -1))), r(this, k, (l(this, ne), l(this, de, -1))), this.coachBorderPadding = (l(this, ue), 6), this.gapBetweenCoaches = 4, this.coachBorderOffset = this.coachBorderPadding / this.baseGridSize, this.gapBetweenCoachDecks = 48, this.coachNavButtonDim = 0, this.coachNavData = [], this.currScrollDirection = p.right, this.maxCalcCoachsWidth = 0, this.scrollCoachsAreaWidth = 0, this.scrollNavigationAreaDim = 0, this.triggerCoachPositionsCollection = [], this.firstTabElement = null, this.lastTabElement = null, this.navigationScrollArea = null, this.coachScrollArea = null, this.currSelectedPlace = null, this.currSelectedPlaceElementId = null, this.currSelectedCoachIndex = -1, this.currSelectedDeckIndex = 0, this.preventCoachScrollByPlaceClick = !1, this.selectedSeatReservationPlaces = {
+      r(this, x, (l(this, d), l(this, D, null))), r(this, p, (l(this, B), l(this, F, !0))), r(this, m, (l(this, V), l(this, G, !1))), r(this, _, (l(this, L), l(this, X, 16))), r(this, y, (l(this, H), l(this, U, null))), r(this, b, (l(this, q), l(this, $, -1))), r(this, P, (l(this, j), l(this, J, -1))), r(this, A, (l(this, Q), l(this, ee, !1))), r(this, k, (l(this, te), l(this, ie, -1))), r(this, R, (l(this, ae), l(this, oe, -1))), r(this, E, (l(this, re), l(this, ne, -1))), r(this, N, (l(this, he), l(this, ue, -1))), this.coachBorderPadding = (l(this, ge), 6), this.gapBetweenCoaches = 4, this.coachBorderOffset = this.coachBorderPadding / this.baseGridSize, this.gapBetweenCoachDecks = 48, this.coachNavButtonDim = 0, this.coachNavData = [], this.currScrollDirection = I.right, this.maxCalcCoachsWidth = 0, this.scrollCoachsAreaWidth = 0, this.scrollNavigationAreaDim = 0, this.triggerCoachPositionsCollection = [], this.firstTabElement = null, this.lastTabElement = null, this.navigationScrollArea = null, this.coachScrollArea = null, this.currSelectedPlace = null, this.currSelectedPlaceElementId = null, this.currSelectedCoachIndex = -1, this.currSelectedDeckIndex = 0, this.preventCoachScrollByPlaceClick = !1, this.selectedSeatReservationPlaces = {
         seats: [],
         bicycles: []
       }, this.seatReservationWithoutNavigationHasFocus = !1, this.isCoachGridFocusable = !1, this.isAutoScrolling = !1, this.isKeyboardNavigation = !1, this.hasMultipleDecks = !1, this.keyboardNavigationEvents = {
@@ -56,9 +56,9 @@ let Be = (() => {
         const t = e?.map(function(s) {
           return {
             pId: s,
-            svgName: Se[s]?.svgName ? Se[s]?.svgName : ""
+            svgName: Ce[s]?.svgName ? Ce[s]?.svgName : ""
           };
-        }).filter((s) => Pe.indexOf(s.svgName) !== -1).filter((s, i, a) => a.map((o) => o.svgName).indexOf(s.svgName) === i).map((s) => s.pId).slice(0, ye);
+        }).filter((s) => Ae.indexOf(s.svgName) !== -1).filter((s, i, a) => a.map((o) => o.svgName).indexOf(s.svgName) === i).map((s) => s.pId).slice(0, Pe);
         return t || [];
       };
     }
@@ -71,10 +71,10 @@ let Be = (() => {
     }
     /** The seat reservation navigation can be toggled by this property */
     get hasNavigation() {
-      return g(this, I);
+      return g(this, p);
     }
     set hasNavigation(e) {
-      r(this, I, e);
+      r(this, p, e);
     }
     /** The seat reservation area is aligned vertically */
     get alignVertical() {
@@ -92,17 +92,17 @@ let Be = (() => {
     }
     /** The seat reservation area's width */
     get height() {
-      return g(this, b);
+      return g(this, y);
     }
     set height(e) {
-      r(this, b, e);
+      r(this, y, e);
     }
     /** Maximal number of possible clickable seats */
     get maxSeatReservations() {
-      return g(this, y);
+      return g(this, b);
     }
     set maxSeatReservations(e) {
-      r(this, y, e);
+      r(this, b, e);
     }
     /** Maximal number of possible clickable bicycle places */
     get maxBicycleReservations() {
@@ -119,32 +119,32 @@ let Be = (() => {
       r(this, A, e);
     }
     get preselectCoachIndex() {
-      return g(this, R);
+      return g(this, k);
     }
     set preselectCoachIndex(e) {
-      r(this, R, e);
+      r(this, k, e);
     }
     get selectedCoachIndex() {
-      return g(this, E);
+      return g(this, R);
     }
     set selectedCoachIndex(e) {
-      r(this, E, e);
+      r(this, R, e);
     }
     get focusedCoachIndex() {
-      return g(this, N);
+      return g(this, E);
     }
     set focusedCoachIndex(e) {
-      r(this, N, e);
+      r(this, E, e);
     }
     //Sets the hover style when scrolling to a coach
     get hoveredScrollCoachIndex() {
-      return g(this, k);
+      return g(this, N);
     }
     set hoveredScrollCoachIndex(e) {
-      r(this, k, e);
+      r(this, N, e);
     }
     willUpdate(e) {
-      if (super.willUpdate(e), e.has("seatReservations") && (this.hasMultipleDecks = this.seatReservations?.length > 1, this._initPrepareSeatReservationData(), this._initSeatReservationPlaceSelection()), e.has("baseGridSize") && (this.coachBorderOffset = this.coachBorderPadding / this.baseGridSize, this.style?.setProperty("--sbb-seat-reservation-grid-size", `${this.baseGridSize}px`), this.initNavigationSelectionByScrollEvent()), e.has("height") && this.height) {
+      if (super.willUpdate(e), e.has("seatReservations") && (this.hasMultipleDecks = this.seatReservations?.length > 1, this._initPrepareSeatReservationData(), this._initSeatReservationPlaceSelection(), this.initNavigationSelectionByScrollEvent()), e.has("baseGridSize") && (this.coachBorderOffset = this.coachBorderPadding / this.baseGridSize, this.style?.setProperty("--sbb-seat-reservation-grid-size", `${this.baseGridSize}px`), this.initNavigationSelectionByScrollEvent()), e.has("height") && this.height) {
         const t = this.seatReservations[this.currSelectedDeckIndex] || null;
         t?.coachItems.length && (this.baseGridSize = this.height / t.coachItems[0].dimension.h, this.coachBorderOffset = this.coachBorderPadding / this.baseGridSize, this.style?.setProperty("--sbb-seat-reservation-grid-size", `${this.baseGridSize}px`), this.initNavigationSelectionByScrollEvent());
       }
@@ -162,7 +162,7 @@ let Be = (() => {
     _initPrepareSeatReservationData() {
       this._determineBaseFontSize(), this.hasMultipleDecks && this._initEmptyCoachDeckOffsets(), this._prepareNavigationCoachData();
     }
-    /* Init scroll event handling for coach navigation */
+    /** Init scroll event handling for coach navigation */
     initNavigationSelectionByScrollEvent() {
       this.firstTabElement = this.shadowRoot?.querySelector("#first-tab-element"), this.lastTabElement = this.shadowRoot?.querySelector("#last-tab-element"), this.coachScrollArea = this.shadowRoot?.querySelector("#sbb-sr__wrapper-scrollarea"), this.navigationScrollArea = this.shadowRoot?.querySelector("#sbb-sr-navigation");
       const e = this.seatReservations ? this.seatReservations[this.currSelectedDeckIndex] : null;
@@ -197,7 +197,7 @@ let Be = (() => {
      * and we therefore imitate this event -> scrollend.
      */
     coachAreaScrollend() {
-      this._scrollTimeout && clearTimeout(this._scrollTimeout), this._scrollTimeout = setTimeout(() => this._handleCoachAreaScrollEvent(), 150);
+      this._scrollTimeout && clearTimeout(this._scrollTimeout), this._scrollTimeout = setTimeout(() => this._handleCoachAreaScrollendEvent(), 150);
     }
     /**
      * If no navigation exists (property setting -> hasNavigation) and a table coach gets the focus,
@@ -214,7 +214,7 @@ let Be = (() => {
      */
     handleKeyboardEvent(e) {
       const t = e.key;
-      if (this.currSelectedPlace) {
+      if (this.preventCoachScrollByPlaceClick = !1, this.currSelectedPlace) {
         if (e.shiftKey && e.keyCode === 9) {
           this._navigateCoachNavigationByKeyboard("PREV_TAB"), e.preventDefault();
           return;
@@ -224,7 +224,7 @@ let Be = (() => {
           return;
         }
       }
-      if (this.currSelectedCoachIndex !== -1 && Ce(e))
+      if (this.currSelectedCoachIndex !== -1 && Ie(e))
         switch (e.preventDefault(), t) {
           case this.keyboardNavigationEvents.ArrowLeft:
             {
@@ -262,7 +262,7 @@ let Be = (() => {
     }
     scrollToSelectedNavCoach(e) {
       if (this._isValidCaochIndex(e) && e !== this.currSelectedCoachIndex) {
-        this.isAutoScrolling = !0, this.isCoachGridFocusable = !0, this.currSelectedCoachIndex = e, this._setScrollDirectionByCoachIndex();
+        this.isAutoScrolling = !0, this.isCoachGridFocusable = !0, this.currSelectedCoachIndex = e, this.currSelectedDeckIndex = this._getExistingCoachDeckIndex(), this._setScrollDirectionByCoachIndex();
         const t = this._getCoachScrollPositionX();
         (this.selectedCoachIndex !== -1 || this.currSelectedCoachIndex > 0) && this._isScrollableToSelectedCoach() ? this.coachScrollArea.scrollTo({
           top: this.alignVertical ? t : 0,
@@ -299,6 +299,15 @@ let Be = (() => {
         z: e.z
       };
     }
+    /**
+     * detects if a (graphical) element is on the border with its position (upper or lower border).
+     * @param baseElement
+     * @param coachDimension
+     * @protected
+     */
+    isElementDirectlyOnBorder(e, t) {
+      return e.position.y === 0 || e.position.y + e.dimension.h === t.h;
+    }
     /**
      * Counts all available seats together depending on the seat type
      *
@@ -313,7 +322,11 @@ let Be = (() => {
      * At the end of a scroll Event from the coach scrollable area,
      * the reached coach is marked as selected
      */
-    _handleCoachAreaScrollEvent() {
+    _handleCoachAreaScrollendEvent() {
+      if (this.preventCoachScrollByPlaceClick) {
+        this.preventCoachScrollByPlaceClick = !1;
+        return;
+      }
       const e = this.isAutoScrolling ? this.currSelectedCoachIndex : this._getCoachIndexByScrollTriggerPosition();
       this.currSelectedCoachIndex === -1 && (this.currSelectedCoachIndex = e), this._isScrollableToSelectedCoach() ? this.currSelectedCoachIndex = e : this.currSelectedCoachIndex = e < this.currSelectedCoachIndex ? this.currSelectedCoachIndex : e, this.isAutoScrolling || this._scrollToSelectedNavigationButton(e), this.preventCoachScrollByPlaceClick = !1, this.updateCurrentSelectedCoach(), this.hasNavigation || (this.preselectPlaceInCoach(), this.isAutoScrolling = !1);
     }
@@ -338,7 +351,7 @@ let Be = (() => {
      * Sets the new ScrollDirection by the new given target coach index.
      */
     _setScrollDirectionByCoachIndex() {
-      this.currScrollDirection = this.currSelectedCoachIndex > this.selectedCoachIndex ? p.right : p.left;
+      this.currScrollDirection = this.currSelectedCoachIndex > this.selectedCoachIndex ? I.right : I.left;
     }
     /**
      * Returns the scroll start or end position X from the selected coach.
@@ -348,7 +361,7 @@ let Be = (() => {
      */
     _getCoachScrollPositionX() {
       const e = this.triggerCoachPositionsCollection[this.currSelectedCoachIndex];
-      return this.isKeyboardNavigation && this.currScrollDirection === p.left && e.width > this.scrollCoachsAreaWidth ? e.end - this.scrollCoachsAreaWidth : e.start;
+      return this.isKeyboardNavigation && this.currScrollDirection === I.left && e.width > this.scrollCoachsAreaWidth ? e.end - this.scrollCoachsAreaWidth : e.start;
     }
     /**
      * Sets the focus on the HTML table (grid) caption element so that the heading is read out when using a ScreenReader.
@@ -403,7 +416,7 @@ let Be = (() => {
             const o = { ...this.currSelectedPlace.position };
             e && (a = this._getSwitchedCoachDeckIndexByKeyNavigation(e, t), a !== null && (i = this.seatReservations[a].coachItems[this.currSelectedCoachIndex].places || [], o.y = a < this.currSelectedDeckIndex ? t.dimension.h : -1));
             for (const c of i)
-              e ? c.number !== this.currSelectedPlace?.number && (e === this.keyboardNavigationEvents.ArrowRight && (c.position.y === o.y || c.position.y === o.y - 1) && c.position.x > o.x && (!s || c.position.x < s.position.x) || e === this.keyboardNavigationEvents.ArrowDown && (c.position.x === o.x || c.position.x === o.x + 1) && c.position.y > o.y && (!s || c.position.y < s.position.y) || e === this.keyboardNavigationEvents.ArrowLeft && (c.position.y === o.y || c.position.y === o.y + 1) && c.position.x < o.x && (!s || c.position.x > s.position.x) || e === this.keyboardNavigationEvents.ArrowUp && (c.position.x === o.x || c.position.x === o.x - 1) && c.position.y < o.y && (!s || c.position.y > s.position.y)) && (s = c) : (this.currScrollDirection === p.right && c.position.y === o.y && (!s || c.position.x < s.position.x) || this.currScrollDirection === p.left && c.position.y === o.y && (!s || c.position.x > s.position.x)) && (s = c);
+              e ? c.number !== this.currSelectedPlace?.number && (e === this.keyboardNavigationEvents.ArrowRight && (c.position.y === o.y || c.position.y === o.y - 1) && c.position.x > o.x && (!s || c.position.x < s.position.x) || e === this.keyboardNavigationEvents.ArrowDown && (c.position.x === o.x || c.position.x === o.x + 1) && c.position.y > o.y && (!s || c.position.y < s.position.y) || e === this.keyboardNavigationEvents.ArrowLeft && (c.position.y === o.y || c.position.y === o.y + 1) && c.position.x < o.x && (!s || c.position.x > s.position.x) || e === this.keyboardNavigationEvents.ArrowUp && (c.position.x === o.x || c.position.x === o.x - 1) && c.position.y < o.y && (!s || c.position.y > s.position.y)) && (s = c) : (this.currScrollDirection === I.right && c.position.y === o.y && (!s || c.position.x < s.position.x) || this.currScrollDirection === I.left && c.position.y === o.y && (!s || c.position.x > s.position.x)) && (s = c);
             a !== null && s && (this.currSelectedDeckIndex = a);
           }
         } else
@@ -432,7 +445,7 @@ let Be = (() => {
         this.scrollToSelectedNavCoach(s);
     }
     _navigateToPlaceByKeyboard(e) {
-      if (this.preventCoachScrollByPlaceClick = !1, this.isKeyboardNavigation = !0, this.focusedCoachIndex !== -1 && (this.focusedCoachIndex = -1), !this.preventPlaceClick) {
+      if (this.isKeyboardNavigation = !0, this.focusedCoachIndex !== -1 && (this.focusedCoachIndex = -1), !this.preventPlaceClick) {
         const t = this._getClosestPlaceByKeyDirection(e);
         if (t)
           this.focusPlaceElement(t);
@@ -460,8 +473,8 @@ let Be = (() => {
     }
     _updateSelectedSeatReservationPlaces(e, t, s) {
       if (s.state === "SELECTED") {
-        const i = this._getSeatReservationPlaceSelection(s);
-        i && e.push(i);
+        const i = this._getDeckIndexByPlaceId(s.id), a = this._getSeatReservationPlaceSelection(s, i);
+        a && e.push(a);
       } else
         e = e.filter((i) => i.id !== s.id);
       if (t > -1 && e.length > t) {
@@ -471,8 +484,16 @@ let Be = (() => {
       return e;
     }
     updateCurrentSelectedPlaceInCoach(e) {
-      const t = e.coachIndex, s = this.seatReservations[this.currSelectedDeckIndex].coachItems[t].places?.find((i) => i.number == e.number);
-      s && (this.currSelectedCoachIndex = t, this.currSelectedPlace = s, this.currSelectedCoachIndex !== this.selectedCoachIndex && this.updateCurrentSelectedCoach(), this._setCurrSelectedPlaceElementId(s));
+      const t = this._getDeckIndexByPlaceId(e.id), s = e.coachIndex;
+      if (t === null)
+        return;
+      const i = this.seatReservations[t].coachItems[s].places?.find((o) => o.number == e.number);
+      if (!i)
+        return;
+      this.currSelectedDeckIndex = t, this.currSelectedCoachIndex = s, this.currSelectedPlace = i, this.currSelectedCoachIndex !== this.selectedCoachIndex && this.updateCurrentSelectedCoach(), this._setCurrSelectedPlaceElementId(i);
+      const a = setTimeout(() => {
+        this._scrollPlaceIntoNearestViewport(e.id), clearTimeout(a);
+      }, 0);
     }
     updateCurrentSelectedCoach() {
       this.selectedCoachIndex = this.currSelectedCoachIndex, this.focusedCoachIndex = -1;
@@ -483,6 +504,9 @@ let Be = (() => {
         detail: e
       }));
     }
+    getPlaceElementId(e, t, s) {
+      return "seat-reservation__place-button-" + e + "-" + t + "-" + s;
+    }
     /**
      * In the case of coach layouts with different decks,
      * it is necessary to extend the offset with empty coaches
@@ -516,10 +540,10 @@ let Be = (() => {
      * that have the state SELECTED within the seatReservation object
      */
     _initSeatReservationPlaceSelection() {
-      this.seatReservations?.forEach((e) => e.coachItems.map((t, s) => {
-        t.places?.filter((i) => i.state === "SELECTED")?.forEach((i) => {
-          const a = me(i, e.deckCoachIndex, s), o = this._getSeatReservationPlaceSelection(a);
-          o && (o.placeType === "SEAT" ? this.selectedSeatReservationPlaces.seats.push(o) : this.selectedSeatReservationPlaces.bicycles.push(o));
+      this.seatReservations?.forEach((e, t) => e.coachItems.map((s, i) => {
+        s.places?.filter((a) => a.state === "SELECTED")?.forEach((a) => {
+          const o = this.getPlaceElementId(t, i, a.number), c = _e(a, o, e.deckCoachIndex, i), w = this._getSeatReservationPlaceSelection(c, t);
+          w && (w.placeType === "SEAT" ? this.selectedSeatReservationPlaces.seats.push(w) : this.selectedSeatReservationPlaces.bicycles.push(w));
         });
       }));
     }
@@ -536,9 +560,11 @@ let Be = (() => {
         }
       return t ? e = e.filter((s) => s.id === t.id) : e = [], e;
     }
-    _getSeatReservationPlaceSelection(e) {
-      const t = this.seatReservations[this.currSelectedDeckIndex].coachItems[e.coachIndex], s = t.places?.find((i) => i.number === e.number);
-      return s ? _e(s, t, e.deckIndex, e.coachIndex) : null;
+    _getSeatReservationPlaceSelection(e, t) {
+      if (t === null)
+        return null;
+      const s = this.seatReservations[t].coachItems[e.coachIndex], i = s.places?.find((a) => a.number === e.number);
+      return i ? ye(i, s, e.id, e.deckIndex, e.coachIndex) : null;
     }
     _getSeatReservationSelectedCoach(e) {
       if (!this.seatReservations[this.currSelectedDeckIndex].coachItems[e])
@@ -547,14 +573,14 @@ let Be = (() => {
       return be(e, t, s);
     }
     _setCurrSelectedPlaceElementId(e) {
-      e ? this.currSelectedPlaceElementId = "seat-reservation__place-button-" + this.currSelectedDeckIndex + "-" + this.currSelectedCoachIndex + "-" + e.number : this.currSelectedPlaceElementId = null;
+      this.currSelectedPlaceElementId = e ? this.getPlaceElementId(this.currSelectedDeckIndex, this.currSelectedCoachIndex, e.number) : null;
     }
     /**
      * Preparation of the used documents font-size which needs
      * to be determined in order to correctly calculate css values with rem
      * */
     _determineBaseFontSize() {
-      if (!xe) {
+      if (!pe) {
         const t = 1 / parseInt(window.getComputedStyle(document.body).fontSize, 10);
         this.style?.setProperty("--sbb-seat-reservation-one-px-rem", `${t + "rem"}`);
       }
@@ -602,41 +628,74 @@ let Be = (() => {
     _getPlaceHtmlElement() {
       return this.currSelectedPlaceElementId && this.shadowRoot?.getElementById(this.currSelectedPlaceElementId) || null;
     }
+    /**
+     * Returns the extracted coach deck index from place id
+     * @returns number
+     */
+    _getDeckIndexByPlaceId(e) {
+      const t = this.shadowRoot?.querySelector("#" + e)?.getAttribute("data-deck-index");
+      return t && !isNaN(+t) ? +t : null;
+    }
     _isValidCaochIndex(e) {
       return e >= 0 && e <= this.seatReservations[this.seatReservations.length - 1].coachItems.length;
     }
-  }, x = new WeakMap(), I = new WeakMap(), m = new WeakMap(), _ = new WeakMap(), b = new WeakMap(), y = new WeakMap(), P = new WeakMap(), A = new WeakMap(), R = new WeakMap(), E = new WeakMap(), N = new WeakMap(), k = new WeakMap(), (() => {
+    /**
+     * Returns existing coach deck index depending on the selected coach.
+     * This method is necessary to get an available coach deck index during keyboard navigation, which can vary between coaches with different decks.
+     * For example, when navigating from a coach with two decks to a coach with one deck.
+     *
+     *       [ooo]-[ooo]-[ooo]
+     * [ooo]-[ooo]-[ooo]-[ooo]-[ooo]
+     *
+     * @returns number
+     */
+    _getExistingCoachDeckIndex() {
+      if (this.seatReservations[this.currSelectedDeckIndex].coachItems[this.currSelectedCoachIndex].places !== void 0)
+        return this.currSelectedDeckIndex;
+      const e = this.seatReservations.findIndex((t) => t.coachItems[this.currSelectedCoachIndex].places !== void 0);
+      return this.currSelectedDeckIndex >= e ? this.currSelectedDeckIndex : e;
+    }
+    /**
+     * If a selected place is slightly hidden by the overflow scroll content and is still clicked,
+     * the method tries to scroll the selected place into the nearest viewport, so that it is completely visible.
+     *
+     * @param placeId
+     */
+    _scrollPlaceIntoNearestViewport(e) {
+      this.shadowRoot?.getElementById(e)?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+    }
+  }, x = new WeakMap(), p = new WeakMap(), m = new WeakMap(), _ = new WeakMap(), y = new WeakMap(), b = new WeakMap(), P = new WeakMap(), A = new WeakMap(), k = new WeakMap(), R = new WeakMap(), E = new WeakMap(), N = new WeakMap(), (() => {
     const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
-    u = [S({ attribute: "seat-reservations", type: Array })], B = [C(), S({ attribute: "has-navigation", type: Boolean })], V = [C(), S({ attribute: "align-vertical", type: Boolean, reflect: !0, useDefault: !0 })], L = [C(), S({ attribute: "base-grid-size", type: Number })], H = [C(), S({ attribute: "height", type: Number })], q = [C(), S({ attribute: "max-seat-reservations", type: Number })], j = [C(), S({ attribute: "max-bicycle-reservations", type: Number })], Q = [C(), S({ attribute: "prevent-place-click", type: Boolean })], te = [C(), S({ attribute: "preselect-coach-index", type: Number })], ae = [w()], re = [w()], he = [w()], ge = [Ie({ passive: !0 })], f(h, null, u, { kind: "accessor", name: "seatReservations", static: !1, private: !1, access: { has: (t) => "seatReservations" in t, get: (t) => t.seatReservations, set: (t, s) => {
+    u = [S({ attribute: "seat-reservations", type: Array })], z = [C(), S({ attribute: "has-navigation", type: Boolean })], O = [C(), S({ attribute: "align-vertical", type: Boolean, reflect: !0, useDefault: !0 })], W = [C(), S({ attribute: "base-grid-size", type: Number })], K = [C(), S({ attribute: "height", type: Number })], M = [C(), S({ attribute: "max-seat-reservations", type: Number })], Y = [C(), S({ attribute: "max-bicycle-reservations", type: Number })], Z = [C(), S({ attribute: "prevent-place-click", type: Boolean })], se = [C(), S({ attribute: "preselect-coach-index", type: Number })], ce = [T()], le = [T()], de = [T()], ve = [me({ passive: !0 })], f(h, null, u, { kind: "accessor", name: "seatReservations", static: !1, private: !1, access: { has: (t) => "seatReservations" in t, get: (t) => t.seatReservations, set: (t, s) => {
       t.seatReservations = s;
-    } }, metadata: e }, T, D), f(h, null, B, { kind: "accessor", name: "hasNavigation", static: !1, private: !1, access: { has: (t) => "hasNavigation" in t, get: (t) => t.hasNavigation, set: (t, s) => {
+    } }, metadata: e }, D, B), f(h, null, z, { kind: "accessor", name: "hasNavigation", static: !1, private: !1, access: { has: (t) => "hasNavigation" in t, get: (t) => t.hasNavigation, set: (t, s) => {
       t.hasNavigation = s;
-    } }, metadata: e }, z, F), f(h, null, V, { kind: "accessor", name: "alignVertical", static: !1, private: !1, access: { has: (t) => "alignVertical" in t, get: (t) => t.alignVertical, set: (t, s) => {
+    } }, metadata: e }, F, V), f(h, null, O, { kind: "accessor", name: "alignVertical", static: !1, private: !1, access: { has: (t) => "alignVertical" in t, get: (t) => t.alignVertical, set: (t, s) => {
       t.alignVertical = s;
-    } }, metadata: e }, O, G), f(h, null, L, { kind: "accessor", name: "baseGridSize", static: !1, private: !1, access: { has: (t) => "baseGridSize" in t, get: (t) => t.baseGridSize, set: (t, s) => {
+    } }, metadata: e }, G, L), f(h, null, W, { kind: "accessor", name: "baseGridSize", static: !1, private: !1, access: { has: (t) => "baseGridSize" in t, get: (t) => t.baseGridSize, set: (t, s) => {
       t.baseGridSize = s;
-    } }, metadata: e }, W, X), f(h, null, H, { kind: "accessor", name: "height", static: !1, private: !1, access: { has: (t) => "height" in t, get: (t) => t.height, set: (t, s) => {
+    } }, metadata: e }, X, H), f(h, null, K, { kind: "accessor", name: "height", static: !1, private: !1, access: { has: (t) => "height" in t, get: (t) => t.height, set: (t, s) => {
       t.height = s;
-    } }, metadata: e }, K, U), f(h, null, q, { kind: "accessor", name: "maxSeatReservations", static: !1, private: !1, access: { has: (t) => "maxSeatReservations" in t, get: (t) => t.maxSeatReservations, set: (t, s) => {
+    } }, metadata: e }, U, q), f(h, null, M, { kind: "accessor", name: "maxSeatReservations", static: !1, private: !1, access: { has: (t) => "maxSeatReservations" in t, get: (t) => t.maxSeatReservations, set: (t, s) => {
       t.maxSeatReservations = s;
-    } }, metadata: e }, M, $), f(h, null, j, { kind: "accessor", name: "maxBicycleReservations", static: !1, private: !1, access: { has: (t) => "maxBicycleReservations" in t, get: (t) => t.maxBicycleReservations, set: (t, s) => {
+    } }, metadata: e }, $, j), f(h, null, Y, { kind: "accessor", name: "maxBicycleReservations", static: !1, private: !1, access: { has: (t) => "maxBicycleReservations" in t, get: (t) => t.maxBicycleReservations, set: (t, s) => {
       t.maxBicycleReservations = s;
-    } }, metadata: e }, Y, J), f(h, null, Q, { kind: "accessor", name: "preventPlaceClick", static: !1, private: !1, access: { has: (t) => "preventPlaceClick" in t, get: (t) => t.preventPlaceClick, set: (t, s) => {
+    } }, metadata: e }, J, Q), f(h, null, Z, { kind: "accessor", name: "preventPlaceClick", static: !1, private: !1, access: { has: (t) => "preventPlaceClick" in t, get: (t) => t.preventPlaceClick, set: (t, s) => {
       t.preventPlaceClick = s;
-    } }, metadata: e }, Z, ee), f(h, null, te, { kind: "accessor", name: "preselectCoachIndex", static: !1, private: !1, access: { has: (t) => "preselectCoachIndex" in t, get: (t) => t.preselectCoachIndex, set: (t, s) => {
+    } }, metadata: e }, ee, te), f(h, null, se, { kind: "accessor", name: "preselectCoachIndex", static: !1, private: !1, access: { has: (t) => "preselectCoachIndex" in t, get: (t) => t.preselectCoachIndex, set: (t, s) => {
       t.preselectCoachIndex = s;
-    } }, metadata: e }, se, ie), f(h, null, ae, { kind: "accessor", name: "selectedCoachIndex", static: !1, private: !1, access: { has: (t) => "selectedCoachIndex" in t, get: (t) => t.selectedCoachIndex, set: (t, s) => {
+    } }, metadata: e }, ie, ae), f(h, null, ce, { kind: "accessor", name: "selectedCoachIndex", static: !1, private: !1, access: { has: (t) => "selectedCoachIndex" in t, get: (t) => t.selectedCoachIndex, set: (t, s) => {
       t.selectedCoachIndex = s;
-    } }, metadata: e }, ce, oe), f(h, null, re, { kind: "accessor", name: "focusedCoachIndex", static: !1, private: !1, access: { has: (t) => "focusedCoachIndex" in t, get: (t) => t.focusedCoachIndex, set: (t, s) => {
+    } }, metadata: e }, oe, re), f(h, null, le, { kind: "accessor", name: "focusedCoachIndex", static: !1, private: !1, access: { has: (t) => "focusedCoachIndex" in t, get: (t) => t.focusedCoachIndex, set: (t, s) => {
       t.focusedCoachIndex = s;
-    } }, metadata: e }, le, ne), f(h, null, he, { kind: "accessor", name: "hoveredScrollCoachIndex", static: !1, private: !1, access: { has: (t) => "hoveredScrollCoachIndex" in t, get: (t) => t.hoveredScrollCoachIndex, set: (t, s) => {
+    } }, metadata: e }, ne, he), f(h, null, de, { kind: "accessor", name: "hoveredScrollCoachIndex", static: !1, private: !1, access: { has: (t) => "hoveredScrollCoachIndex" in t, get: (t) => t.hoveredScrollCoachIndex, set: (t, s) => {
       t.hoveredScrollCoachIndex = s;
-    } }, metadata: e }, de, ue), f(h, null, ge, { kind: "method", name: "coachAreaScrollend", static: !1, private: !1, access: { has: (t) => "coachAreaScrollend" in t, get: (t) => t.coachAreaScrollend }, metadata: e }, null, d), e && Object.defineProperty(h, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+    } }, metadata: e }, ue, ge), f(h, null, ve, { kind: "method", name: "coachAreaScrollend", static: !1, private: !1, access: { has: (t) => "coachAreaScrollend" in t, get: (t) => t.coachAreaScrollend }, metadata: e }, null, d), e && Object.defineProperty(h, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
   })(), h.events = {
     selectedplaces: "selectedplaces",
     selectedcoach: "selectedcoach"
   }, h;
 })();
 export {
-  Be as SeatReservationBaseElement
+  ze as SeatReservationBaseElement
 };

package/seat-reservation/seat-reservation/seat-reservation.component.d.ts

@@ -19,8 +19,9 @@ export declare class SbbSeatReservationElement extends SeatReservationBaseElemen
     private _renderNavigation;
     /**
      *
-     * @param coaches
      * @returns
+     * @param seatReservation
+     * @param deckIndex
      */
     private _renderCoaches;
     private _renderCoachElement;
@@ -38,6 +39,7 @@ export declare class SbbSeatReservationElement extends SeatReservationBaseElemen
      * @param rotation
      * @param coachDimension
      * @param coachIndex used to generate a unique id for the popover trigger
+     * @param coachDeckIndex used to generate a unique id
      * @private
      */
     private _getRenderElementWithArea;

package/seat-reservation/seat-reservation/seat-reservation.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"seat-reservation.component.d.ts","sourceRoot":"","sources":["../../../../src/elements-experimental/seat-reservation/seat-reservation/seat-reservation.component.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAgB1E,OAAO,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAC;AAGhF,OAAO,mCAAmC,CAAC;AAC3C,OAAO,+CAA+C,CAAC;AACvD,OAAO,6BAA6B,CAAC;AACrC,OAAO,gCAAgC,CAAC;AACxC,OAAO,sCAAsC,CAAC;AAC9C,OAAO,yCAAyC,CAAC;AACjD,OAAO,+BAA+B,CAAC;AACvC,OAAO,4CAA4C,CAAC;AAEpD;;;GAGG;AACH,qBAEM,yBAA0B,SAAQ,0BAA0B;IAChE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,oBAAoB,CAAC,CAAiB;IAE9C,OAAO,CAAC,gBAAgB,CAQtB;IAGF,OAAO,CAAC,2BAA2B,CAAkB;cAElC,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAgBzD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAS3D,MAAM,IAAI,cAAc,GAAG,IAAI;IAKlD,OAAO,CAAC,uCAAuC;IAoD/C,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,8BAA8B;IAkCtC,OAAO,CAAC,iBAAiB;IAwCzB;;;;OAIG;IACH,OAAO,CAAC,cAAc;IAkBtB,OAAO,CAAC,mBAAmB;IAqC3B;;;OAGG;IACH,OAAO,CAAC,wBAAwB;IA8BhC,OAAO,CAAC,qBAAqB;IA8B7B,OAAO,CAAC,wBAAwB;IAoDhC,OAAO,CAAC,6BAA6B;IAgCrC;;;;;;;OAOG;IACH,OAAO,CAAC,yBAAyB;IA2EjC,OAAO,CAAC,4BAA4B;IAuCpC,OAAO,CAAC,2BAA2B;IAwCnC;;;;OAIG;IACH,OAAO,CAAC,cAAc;IActB,OAAO,CAAC,iBAAiB;IAgBzB,OAAO,CAAC,gBAAgB;IASxB;;;;;OAKG;IACH,OAAO,CAAC,QAAQ;IAWhB;;;OAGG;IACH,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,yBAAyB;IAkCjC,OAAO,CAAC,8BAA8B;CAyBvC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,sBAAsB,EAAE,yBAAyB,CAAC;KACnD;CACF"}
+{"version":3,"file":"seat-reservation.component.d.ts","sourceRoot":"","sources":["../../../../src/elements-experimental/seat-reservation/seat-reservation/seat-reservation.component.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAgB1E,OAAO,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAC;AAGhF,OAAO,mCAAmC,CAAC;AAC3C,OAAO,+CAA+C,CAAC;AACvD,OAAO,6BAA6B,CAAC;AACrC,OAAO,gCAAgC,CAAC;AACxC,OAAO,sCAAsC,CAAC;AAC9C,OAAO,yCAAyC,CAAC;AACjD,OAAO,+BAA+B,CAAC;AACvC,OAAO,4CAA4C,CAAC;AAEpD;;;GAGG;AACH,qBAEM,yBAA0B,SAAQ,0BAA0B;IAChE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,oBAAoB,CAAC,CAAiB;IAE9C,OAAO,CAAC,gBAAgB,CAQtB;IAGF,OAAO,CAAC,2BAA2B,CAAkB;cAElC,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAgBzD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAS3D,MAAM,IAAI,cAAc,GAAG,IAAI;IAKlD,OAAO,CAAC,uCAAuC;IAoD/C,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,8BAA8B;IAmCtC,OAAO,CAAC,iBAAiB;IAwCzB;;;;;OAKG;IACH,OAAO,CAAC,cAAc;IAuBtB,OAAO,CAAC,mBAAmB;IAsC3B;;;OAGG;IACH,OAAO,CAAC,wBAAwB;IA8BhC,OAAO,CAAC,qBAAqB;IAoC7B,OAAO,CAAC,wBAAwB;IAsDhC,OAAO,CAAC,6BAA6B;IAgCrC;;;;;;;;OAQG;IACH,OAAO,CAAC,yBAAyB;IAgFjC,OAAO,CAAC,4BAA4B;IAuCpC,OAAO,CAAC,2BAA2B;IAwCnC;;;;OAIG;IACH,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,iBAAiB;IAgBzB,OAAO,CAAC,gBAAgB;IASxB;;;;;OAKG;IACH,OAAO,CAAC,QAAQ;IAWhB;;;OAGG;IACH,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,yBAAyB;IAkCjC,OAAO,CAAC,8BAA8B;CAyBvC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,sBAAsB,EAAE,yBAAyB,CAAC;KACnD;CACF"}