@sbb-esta/lyne-elements-experimental 4.5.1 → 4.7.0

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

@@ -1,19 +1,19 @@
-var fe = (l) => {
-  throw TypeError(l);
+var ye = (h) => {
+  throw TypeError(h);
 };
-var Ce = (l, d, u) => d.has(l) || fe("Cannot " + u);
-var g = (l, d, u) => (Ce(l, d, "read from private field"), u ? u.call(l) : d.get(l)), v = (l, d, u) => d.has(l) ? fe("Cannot add the same private member more than once") : d instanceof WeakSet ? d.add(l) : d.set(l, u), r = (l, d, u, T) => (Ce(l, d, "write to private field"), T ? T.call(l, u) : d.set(l, u), u);
-import { __runInitializers as n, __esDecorate as f } from "tslib";
-import { isArrowKeyOrPageKeysPressed as Se } from "@sbb-esta/lyne-elements/core/a11y.js";
+var be = (h, d, f) => d.has(h) || ye("Cannot " + f);
+var u = (h, d, f) => (be(h, d, "read from private field"), f ? f.call(h) : d.get(h)), g = (h, d, f) => d.has(h) ? ye("Cannot add the same private member more than once") : d instanceof WeakSet ? d.add(h) : d.set(h, f), r = (h, d, f, B) => (be(h, d, "write to private field"), B ? B.call(h, f) : d.set(h, f), f);
+import { __esDecorate as v, __runInitializers as n } from "tslib";
+import { isArrowKeyOrPageKeysPressed as Pe } from "@sbb-esta/lyne-elements/core/a11y.js";
 import { forceType as S } from "@sbb-esta/lyne-elements/core/decorators.js";
-import { LitElement as xe, isServer as pe } from "lit";
-import { property as C, state as w, eventOptions as _e } from "lit/decorators.js";
-import { mapIconToSvg as Ie, mapPlaceInfosToPlaceSelection as me, mapPlaceAndCoachToSeatReservationPlaceSelection as ye, mapCoachInfosToCoachSelection as be } from "../common/mapper.js";
+import { LitElement as Ee, isServer as Re } from "lit";
+import { property as C, state as z, eventOptions as Ne } from "lit/decorators.js";
+import { mapIconToSvg as Ae, mapPlaceInfosToPlaceSelection as ke, mapPlaceAndCoachToSeatReservationPlaceSelection as De, mapCoachInfosToCoachSelection as Te } from "../common/mapper.js";
 var I;
-(function(l) {
-  l.right = "right", l.left = "left";
+(function(h) {
+  h.right = "right", h.left = "left";
 })(I || (I = {}));
-const Pe = 3, Ae = [
+const we = 3, Be = [
   "sa-vo",
   "sa-rs",
   "sa-abteilkinderwagen",
@@ -22,25 +22,27 @@ const Pe = 3, Ae = [
   "sa-bz",
   "sa-rz"
 ];
-let ze = (() => {
-  var x, p, _, m, y, b, P, A, E, R, N, k, h;
-  let l = xe, d = [], u, T = [], B = [], z, G = [], O = [], F, V = [], L = [], W, H = [], K = [], M, X = [], U = [], q, $ = [], j = [], Y, J = [], Q = [], Z, ee = [], te = [], se, ie = [], ae = [], ce, oe = [], re = [], ne, le = [], he = [], de, ue = [], ge = [], ve;
-  return h = class extends l {
+let Me = (() => {
+  var x, p, _, m, y, b, P, A, E, R, N, k, D, T, l;
+  let h = Ee, d = [], f, B = [], O = [], V, F = [], G = [], L, W = [], H = [], M, K = [], X = [], U, q = [], $ = [], j, Y = [], J = [], Q, Z = [], ee = [], te, se = [], ie = [], ae, ce = [], oe = [], re, ne = [], le = [], he, de = [], ue = [], ge, ve = [], fe = [], Ce, Se = [], Ie = [], xe, pe = [], _e = [], me;
+  return l = class extends h {
     constructor() {
-      super(...arguments);
-      v(this, x);
-      v(this, p);
-      v(this, _);
-      v(this, m);
-      v(this, y);
-      v(this, b);
-      v(this, P);
-      v(this, A);
-      v(this, E);
-      v(this, R);
-      v(this, N);
-      v(this, k);
-      r(this, x, (n(this, d), n(this, T, null))), r(this, p, (n(this, B), n(this, G, !0))), r(this, _, (n(this, O), n(this, V, !1))), r(this, m, (n(this, L), n(this, H, 16))), r(this, y, (n(this, K), n(this, X, null))), r(this, b, (n(this, U), n(this, $, -1))), r(this, P, (n(this, j), n(this, J, -1))), r(this, A, (n(this, Q), n(this, ee, !1))), r(this, E, (n(this, te), n(this, ie, -1))), r(this, R, (n(this, ae), n(this, oe, -1))), r(this, N, (n(this, re), n(this, le, -1))), r(this, k, (n(this, he), n(this, ue, -1))), this.coachBorderPadding = (n(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.maxCalcCoachesWidth = 0, this.scrollCoachesAreaWidth = 0, this.scrollNavigationAreaDim = 0, this.triggerCoachPositionsCollection = [], this.navigationScrollArea = null, this.coachScrollArea = null, this.currSelectedPlace = null, this.currSelectedPlaceElementId = null, this.currSelectedCoachIndex = -1, this.currSelectedDeckIndex = 0, this.preventCoachScrollByPlaceClick = !1, this.selectedSeatReservationPlaces = {
+      super();
+      g(this, x);
+      g(this, p);
+      g(this, _);
+      g(this, m);
+      g(this, y);
+      g(this, b);
+      g(this, P);
+      g(this, A);
+      g(this, E);
+      g(this, R);
+      g(this, N);
+      g(this, k);
+      g(this, D);
+      g(this, T);
+      r(this, x, (n(this, d), n(this, B, null))), r(this, p, (n(this, O), n(this, F, "NONE"))), r(this, _, (n(this, G), n(this, W, !0))), r(this, m, (n(this, H), n(this, K, !1))), r(this, y, (n(this, X), n(this, q, 16))), r(this, b, (n(this, $), n(this, Y, null))), r(this, P, (n(this, J), n(this, Z, -1))), r(this, A, (n(this, ee), n(this, se, -1))), r(this, E, (n(this, ie), n(this, ce, !1))), r(this, R, (n(this, oe), n(this, ne, -1))), r(this, N, (n(this, le), n(this, de, !1))), r(this, k, (n(this, ue), n(this, ve, -1))), r(this, D, (n(this, fe), n(this, Se, -1))), r(this, T, (n(this, Ie), n(this, pe, -1))), this.coachBorderPadding = (n(this, _e), 6), this.gapBetweenCoaches = 4, this.coachBorderOffset = this.coachBorderPadding / this.baseGridSize, this.gapBetweenCoachDecks = 48, this.coachNavButtonDim = 0, this.coachItemDetailsElements = [], this.currScrollDirection = I.right, this.maxCalcCoachesWidth = 0, this.scrollCoachesAreaWidth = 0, this.scrollNavigationAreaDim = 0, this.triggerCoachPositionsCollection = [], 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.hasSeatReservationNativeFocus = !1, this.keyboardNavigationEvents = {
@@ -52,6 +54,7 @@ let ze = (() => {
         Enter: "Enter"
       }, this.notAreaElements = [
         "DRIVER_AREA",
+        "DRIVER_AREA_NO_VERTICAL_WALL",
         "COACH_PASSAGE",
         "COACH_WALL_NO_PASSAGE",
         "COMPARTMENT_PASSAGE",
@@ -64,91 +67,105 @@ let ze = (() => {
         const t = e?.map(function(s) {
           return {
             pId: s,
-            svgName: Ie[s]?.svgName ? Ie[s]?.svgName : ""
+            svgName: Ae[s]?.svgName ? Ae[s]?.svgName : ""
           };
-        }).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);
+        }).filter((s) => Be.indexOf(s.svgName) !== -1).filter((s, i, a) => a.map((o) => o.svgName).indexOf(s.svgName) === i).map((s) => s.pId).slice(0, we);
         return t || [];
-      };
+      }, this.addEventListener("blur", () => this._onLeaveSeatReservationComponent());
     }
     /** The seat reservations array contains all coaches and places */
     get seatReservations() {
-      return g(this, x);
+      return u(this, x);
     }
     set seatReservations(e) {
       r(this, x, e);
     }
+    /** Displays an arrow showing what direction does train drive*/
+    get travelDirection() {
+      return u(this, p);
+    }
+    set travelDirection(e) {
+      r(this, p, e);
+    }
     /** The seat reservation navigation can be toggled by this property */
     get hasNavigation() {
-      return g(this, p);
+      return u(this, _);
     }
     set hasNavigation(e) {
-      r(this, p, e);
+      r(this, _, e);
     }
     /** The seat reservation area is aligned vertically */
     get alignVertical() {
-      return g(this, _);
+      return u(this, m);
     }
     set alignVertical(e) {
-      r(this, _, e);
+      r(this, m, e);
     }
     /** The seat reservation area's base grid size */
     get baseGridSize() {
-      return g(this, m);
+      return u(this, y);
     }
     set baseGridSize(e) {
-      r(this, m, e);
+      r(this, y, e);
     }
     /** The seat reservation area's width */
     get height() {
-      return g(this, y);
+      return u(this, b);
     }
     set height(e) {
-      r(this, y, e);
+      r(this, b, e);
     }
     /** Maximal number of possible clickable seats */
     get maxSeatReservations() {
-      return g(this, b);
+      return u(this, P);
     }
     set maxSeatReservations(e) {
-      r(this, b, e);
+      r(this, P, e);
     }
     /** Maximal number of possible clickable bicycle places */
     get maxBicycleReservations() {
-      return g(this, P);
+      return u(this, A);
     }
     set maxBicycleReservations(e) {
-      r(this, P, e);
+      r(this, A, e);
     }
     /** Any click functionality is prevented */
     get preventPlaceClick() {
-      return g(this, A);
+      return u(this, E);
     }
     set preventPlaceClick(e) {
-      r(this, A, e);
+      r(this, E, e);
     }
     get preselectCoachIndex() {
-      return g(this, E);
+      return u(this, R);
     }
     set preselectCoachIndex(e) {
-      r(this, E, e);
+      r(this, R, e);
+    }
+    /** The seat reservation title information at place-controls, navigation-coaches and navigation-services can be toggled by this property */
+    get showTitleInfo() {
+      return u(this, N);
+    }
+    set showTitleInfo(e) {
+      r(this, N, e);
     }
     get selectedCoachIndex() {
-      return g(this, R);
+      return u(this, k);
     }
     set selectedCoachIndex(e) {
-      r(this, R, e);
+      r(this, k, e);
     }
     get focusedCoachIndex() {
-      return g(this, N);
+      return u(this, D);
     }
     set focusedCoachIndex(e) {
-      r(this, N, e);
+      r(this, D, e);
     }
     get hoveredCoachIndex() {
-      return g(this, k);
+      return u(this, T);
     }
     set hoveredCoachIndex(e) {
-      r(this, k, e);
+      r(this, T, e);
     }
     willUpdate(e) {
       if (super.willUpdate(e), e.has("seatReservations") && (this.hasMultipleDecks = this.seatReservations?.length > 1, this._initPrepareSeatReservationData(), this._prepareCoachWidthAndGapCalculations(), 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) {
@@ -167,7 +184,7 @@ let ze = (() => {
      * in order to avoid recurring iteration processes in rendering.
      */
     _initPrepareSeatReservationData() {
-      this._determineBaseFontSize(), this.hasMultipleDecks && this._initEmptyCoachDeckOffsets(), this._prepareNavigationCoachData();
+      this._determineBaseFontSize(), this.hasMultipleDecks && this._initEmptyCoachDeckOffsets(), this._prepareCoachItemDetailsData();
     }
     /** Init scroll event handling for coach navigation */
     initNavigationSelectionByScrollEvent() {
@@ -188,13 +205,13 @@ let ze = (() => {
       if (this.coachScrollArea && e) {
         let t = 0;
         this.scrollCoachesAreaWidth = this.alignVertical ? this.coachScrollArea.getBoundingClientRect().height : this.coachScrollArea.getBoundingClientRect().width, this.triggerCoachPositionsCollection = e.coachItems.map((s) => {
-          const i = t, a = this.getCalculatedDimension(s.dimension).w, o = this.overHangingElementInformation.find((D) => D.coachId === s.id), c = o?.overhangingPlaces || o?.overhangingGraphicAreas;
+          const i = t, a = this.getCalculatedDimension(s.dimension).w, o = this.overHangingElementInformation.find((w) => w.coachId === s.id), c = o?.overhangingPlaces || o?.overhangingGraphicAreas;
           return t += a + (c ? 2 * this.gapBetweenCoaches : this.gapBetweenCoaches), {
             start: i,
             end: t,
             width: a
           };
-        }), this.maxCalcCoachesWidth = t;
+        }), this.maxCalcCoachesWidth = t - this.gapBetweenCoaches;
       }
     }
     /**
@@ -225,47 +242,50 @@ let ze = (() => {
         this._handleTabKeyNavigation(e, "navigation", t);
         return;
       }
-      Se(e) && this.keyboardSeatmapEventHandling(e);
+      Pe(e) && this.keyboardSeatmapEventHandling(e);
     }
     /** General TAB Key Event handling for tab navigation inside the coach navigation area and the seatmap area */
     _handleTabKeyNavigation(e, t, s) {
       const i = e.key, a = e.shiftKey;
-      i === this.keyboardNavigationEvents.Tab && (t == "navigation" ? (s == this.currSelectedCoachIndex ? !this.currSelectedPlace || !a || this.coachNavData[s].isDriverArea || this.focusedCoachIndex == -1 ? this.focusedCoachIndex = s : a && this.currSelectedPlace && (this.focusedCoachIndex = -1, this.focusPlaceElement(this.currSelectedPlace)) : this.focusedCoachIndex = s, this._scrollToSelectedNavigationButton(s)) : t == "seatmap" && (e.preventDefault(), a ? this._navigateCoachNavigationByKeyboard("PREV_TAB") : this._navigateCoachNavigationByKeyboard("NEXT_TAB")));
+      i === this.keyboardNavigationEvents.Tab && (t == "navigation" ? (s == this.currSelectedCoachIndex ? !this.currSelectedPlace || !a || this.coachItemDetailsElements[s].isDriverArea || this.focusedCoachIndex == -1 ? this.focusedCoachIndex = s : a && this.currSelectedPlace && (this.focusedCoachIndex = -1, this.focusPlaceElement(this.currSelectedPlace)) : this.focusedCoachIndex = s, this._scrollToSelectedNavigationButton(s)) : t == "seatmap" && (e.preventDefault(), a ? this._navigateCoachNavigationByKeyboard("PREV_TAB") : this._navigateCoachNavigationByKeyboard("NEXT_TAB")));
     }
     /**
      * Initialisation of Keyboard Seatmap event handling to navigation between each places inside a selected coach by using [arrow] keys.
      * With the [TAB] key the user navigation goes to the next coach navigation element and the currently selected place is automatically reset.
      */
     keyboardSeatmapEventHandling(e) {
-      const t = e.key;
-      if (this.preventCoachScrollByPlaceClick = !1, !this.hasSeatReservationNativeFocus && (e.shiftKey && t === this.keyboardNavigationEvents.Tab || t === this.keyboardNavigationEvents.Tab) && (this.hasSeatReservationNativeFocus = !0), t == this.keyboardNavigationEvents.Tab) {
+      const t = e.key === this.keyboardNavigationEvents.Tab, s = e.shiftKey && t;
+      if (!this.hasNavigation && this.currSelectedCoachIndex === 0 && s || this.currSelectedCoachIndex === this.coachItemDetailsElements.length - 1 && t)
+        return;
+      const i = e.key;
+      if (this.preventCoachScrollByPlaceClick = !1, !this.hasSeatReservationNativeFocus && (t || s) && (this.hasSeatReservationNativeFocus = !0), t) {
         this._handleTabKeyNavigation(e, "seatmap");
         return;
       }
-      if (this.currSelectedCoachIndex !== -1 && Se(e))
-        switch (e.preventDefault(), t) {
+      if (this.currSelectedCoachIndex !== -1 && Pe(e))
+        switch (e.preventDefault(), i) {
           case this.keyboardNavigationEvents.ArrowLeft:
             {
-              const s = this.alignVertical ? this.keyboardNavigationEvents.ArrowDown : t;
-              this._navigateToPlaceByKeyboard(s);
+              const a = this.alignVertical ? this.keyboardNavigationEvents.ArrowDown : i;
+              this._navigateToPlaceByKeyboard(a);
             }
             break;
           case this.keyboardNavigationEvents.ArrowRight:
             {
-              const s = this.alignVertical ? this.keyboardNavigationEvents.ArrowUp : t;
-              this._navigateToPlaceByKeyboard(s);
+              const a = this.alignVertical ? this.keyboardNavigationEvents.ArrowUp : i;
+              this._navigateToPlaceByKeyboard(a);
             }
             break;
           case this.keyboardNavigationEvents.ArrowUp:
             {
-              const s = this.alignVertical ? this.keyboardNavigationEvents.ArrowLeft : t;
-              this._navigateToPlaceByKeyboard(s);
+              const a = this.alignVertical ? this.keyboardNavigationEvents.ArrowLeft : i;
+              this._navigateToPlaceByKeyboard(a);
             }
             break;
           case this.keyboardNavigationEvents.ArrowDown:
             {
-              const s = this.alignVertical ? this.keyboardNavigationEvents.ArrowRight : t;
-              this._navigateToPlaceByKeyboard(s);
+              const a = this.alignVertical ? this.keyboardNavigationEvents.ArrowRight : i;
+              this._navigateToPlaceByKeyboard(a);
             }
             break;
         }
@@ -280,7 +300,7 @@ let ze = (() => {
           this._isRunningInitPreselectCoachIndex = !1;
           return;
         }
-        if (this.coachNavData[this.currSelectedCoachIndex] && this.coachNavData[this.currSelectedCoachIndex].isDriverArea) {
+        if (this.coachItemDetailsElements[this.currSelectedCoachIndex] && this.coachItemDetailsElements[this.currSelectedCoachIndex].isDriverArea) {
           this._setFocusToSelectedCoachGrid();
           return;
         }
@@ -470,12 +490,16 @@ let ze = (() => {
           if (a || this.currSelectedPlace !== null) {
             this.focusedCoachIndex = t, this.unfocusPlaceElement();
             return;
-          } else t == 0 ? (this.unfocusPlaceElement(), this.currSelectedPlace = null, this.focusedCoachIndex = -1, (this.shadowRoot?.getElementById("sbb-sr-navigation__wrapper-button-direction--left")).focus()) : this.focusedCoachIndex = s;
-        else s !== this.currSelectedCoachIndex ? this.focusedCoachIndex = s : e === "NEXT_TAB" && s === this.coachNavData.length - 1 ? (this.unfocusPlaceElement(), this.focusedCoachIndex = -1, (this.shadowRoot?.getElementById("sbb-sr-navigation__wrapper-button-direction--right")).focus()) : (this.focusedCoachIndex = -1, this.selectedCoachIndex = s, a ? this.focusPlaceElement(this.currSelectedPlace) : (this.isCoachGridFocusable = !0, this._setFocusToSelectedCoachGrid()));
+          } else t === 0 ? this._refocusCurrentFocusedNavCoach(t) : this.focusedCoachIndex = s;
+        else s !== this.currSelectedCoachIndex ? this.focusedCoachIndex = s : e === "NEXT_TAB" && s === this.coachItemDetailsElements.length - 1 ? this._refocusCurrentFocusedNavCoach(t) : (this.focusedCoachIndex = -1, this.selectedCoachIndex = s, a ? this.focusPlaceElement(this.currSelectedPlace) : (this.isCoachGridFocusable = !0, this._setFocusToSelectedCoachGrid()));
         this._scrollToSelectedNavigationButton(s);
       } else
         this.scrollToSelectedNavCoach(s);
     }
+    // Refocused the current focused (visual) nav coach to get the native focus back to the navigation
+    _refocusCurrentFocusedNavCoach(e) {
+      this.focusedCoachIndex = -1, setTimeout(() => this.focusedCoachIndex = e, 0);
+    }
     _navigateToPlaceByKeyboard(e) {
       if (this.isKeyboardNavigation = !0, this.focusedCoachIndex !== -1 && (this.focusedCoachIndex = -1), !this.preventPlaceClick) {
         const t = this._getClosestPlaceByKeyDirection(e);
@@ -576,8 +600,8 @@ let ze = (() => {
     _initSeatReservationPlaceSelection() {
       this.selectedSeatReservationPlaces.seats = [], this.selectedSeatReservationPlaces.bicycles = [], 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 = me(a, o, e.deckCoachIndex, i), D = this._getSeatReservationPlaceSelection(c, t);
-          D && (D.placeType === "SEAT" ? this.selectedSeatReservationPlaces.seats.push(D) : this.selectedSeatReservationPlaces.bicycles.push(D));
+          const o = this.getPlaceElementId(t, i, a.number), c = ke(a, o, e.deckCoachIndex, i), w = this._getSeatReservationPlaceSelection(c, t);
+          w && (w.placeType === "SEAT" ? this.selectedSeatReservationPlaces.seats.push(w) : this.selectedSeatReservationPlaces.bicycles.push(w));
         });
       }));
     }
@@ -598,13 +622,13 @@ let ze = (() => {
       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;
+      return i ? De(i, s, e.id, e.deckIndex, e.coachIndex) : null;
     }
     _getSeatReservationSelectedCoach(e) {
       if (!this.seatReservations[this.currSelectedDeckIndex].coachItems[e])
         return null;
       const t = this.seatReservations[this.currSelectedDeckIndex].coachItems[e], s = this.getAvailableFreePlacesNumFromCoach(t.places);
-      return be(e, t, s);
+      return Te(e, t, s);
     }
     _setCurrSelectedPlaceElementId(e) {
       this.currSelectedPlaceElementId = e ? this.getPlaceElementId(this.currSelectedDeckIndex, this.currSelectedCoachIndex, e.number) : null;
@@ -614,7 +638,7 @@ let ze = (() => {
      * to be determined in order to correctly calculate CSS values with rem
      * */
     _determineBaseFontSize() {
-      if (!pe) {
+      if (!Re) {
         const t = 1 / parseInt(window.getComputedStyle(document.body).fontSize, 10);
         this.style?.setProperty("--sbb-seat-reservation-one-px-rem", `${t + "rem"}`);
       }
@@ -627,20 +651,21 @@ let ze = (() => {
      *    - class (first, second, any)
      *    - whether there is a driver area left or right
      * */
-    _prepareNavigationCoachData() {
+    _prepareCoachItemDetailsData() {
       if (this.seatReservations) {
         const e = this.seatReservations[this.seatReservations.length - 1].coachItems;
-        this.coachNavData = [], e.forEach((t, s) => {
+        this.coachItemDetailsElements = [], e.forEach((t, s) => {
           const i = [], a = [], o = [];
           this.seatReservations.map((c) => c.coachItems[s]).forEach((c) => {
             i.push(...c.travelClass), a.push(...c.propertyIds ? c.propertyIds : []), o.push(...c.places ? c.places : []);
-          }), this.coachNavData.push({
+          }), this.coachItemDetailsElements.push({
             id: t.id,
             travelClass: this._prepareTravelClassNavigation(i),
             propertyIds: this._prepareServiceIconsNavigation(a),
             isDriverArea: t.places ? t.places.length === 0 : !0,
             driverAreaSide: this._prepareDriverAreaSideNavigation(t),
-            freePlaces: this.getAvailableFreePlacesNumFromCoach(o)
+            freePlaces: this.getAvailableFreePlacesNumFromCoach(o),
+            driverAreaElements: this._setDriverAreasElements(t)
           });
         });
       }
@@ -719,38 +744,67 @@ let ze = (() => {
     _isOverhangingElementsPresent(e, t) {
       return t?.some((s) => s.position.x === 0 || s.position.x + s.dimension.w >= e) ?? !1;
     }
-  }, x = new WeakMap(), p = new WeakMap(), _ = new WeakMap(), m = new WeakMap(), y = new WeakMap(), b = new WeakMap(), P = new WeakMap(), A = new WeakMap(), E = new WeakMap(), R = new WeakMap(), N = new WeakMap(), k = new WeakMap(), (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
-    u = [C({ attribute: "seat-reservations", type: Array })], z = [S(), C({ attribute: "has-navigation", type: Boolean })], F = [S(), C({ attribute: "align-vertical", type: Boolean, reflect: !0, useDefault: !0 })], W = [S(), C({ attribute: "base-grid-size", type: Number })], M = [S(), C({ attribute: "height", type: Number })], q = [S(), C({ attribute: "max-seat-reservations", type: Number })], Y = [S(), C({ attribute: "max-bicycle-reservations", type: Number })], Z = [S(), C({ attribute: "prevent-place-click", type: Boolean })], se = [S(), C({ attribute: "preselect-coach-index", type: Number })], ce = [w()], ne = [w()], de = [w()], ve = [_e({ 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) => {
+    /**
+     * collect information about the driverAreas for one coach
+     * @param coachItem
+     * @private
+     */
+    _setDriverAreasElements(e) {
+      if (e) {
+        const t = e.graphicElements?.find((i) => i.icon === "DRIVER_AREA"), s = e.type === "LOCOMOTIVE_COACH" ? e.graphicElements?.find((i) => i.icon === "DRIVER_AREA_NO_VERTICAL_WALL") : void 0;
+        return {
+          driverArea: t,
+          driverAreaNoVerticalWall: s
+        };
+      }
+      return {
+        driverArea: void 0,
+        driverAreaNoVerticalWall: void 0
+      };
+    }
+    /**
+     * Is called when the SeatReservation loses focus, what happens when the user tabs out or clicks somewhere else.
+     * Then we reset the focused elements.
+     */
+    _onLeaveSeatReservationComponent() {
+      this.hasNavigation && (this.focusedCoachIndex = -1), this.unfocusPlaceElement();
+    }
+  }, x = new WeakMap(), p = new WeakMap(), _ = new WeakMap(), m = new WeakMap(), y = new WeakMap(), b = new WeakMap(), P = new WeakMap(), A = new WeakMap(), E = new WeakMap(), R = new WeakMap(), N = new WeakMap(), k = new WeakMap(), D = new WeakMap(), T = new WeakMap(), (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(h[Symbol.metadata] ?? null) : void 0;
+    f = [C({ attribute: "seat-reservations", type: Array })], V = [C({ attribute: "travel-direction", type: String })], L = [S(), C({ attribute: "has-navigation", type: Boolean })], M = [S(), C({ attribute: "align-vertical", type: Boolean, reflect: !0, useDefault: !0 })], U = [S(), C({ attribute: "base-grid-size", type: Number })], j = [S(), C({ attribute: "height", type: Number })], Q = [S(), C({ attribute: "max-seat-reservations", type: Number })], te = [S(), C({ attribute: "max-bicycle-reservations", type: Number })], ae = [S(), C({ attribute: "prevent-place-click", type: Boolean })], re = [S(), C({ attribute: "preselect-coach-index", type: Number })], he = [S(), C({ attribute: "show-title-info", type: Boolean })], ge = [z()], Ce = [z()], xe = [z()], me = [Ne({ passive: !0 })], v(l, null, f, { 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, 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) => {
+    } }, metadata: e }, B, O), v(l, null, V, { kind: "accessor", name: "travelDirection", static: !1, private: !1, access: { has: (t) => "travelDirection" in t, get: (t) => t.travelDirection, set: (t, s) => {
+      t.travelDirection = s;
+    } }, metadata: e }, F, G), v(l, null, L, { 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 }, G, O), f(h, null, F, { kind: "accessor", name: "alignVertical", static: !1, private: !1, access: { has: (t) => "alignVertical" in t, get: (t) => t.alignVertical, set: (t, s) => {
+    } }, metadata: e }, W, H), v(l, null, M, { 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 }, V, 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) => {
+    } }, metadata: e }, K, X), v(l, null, U, { 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 }, H, K), f(h, null, M, { kind: "accessor", name: "height", static: !1, private: !1, access: { has: (t) => "height" in t, get: (t) => t.height, set: (t, s) => {
+    } }, metadata: e }, q, $), v(l, null, j, { 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 }, X, 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 }, Y, J), v(l, null, Q, { 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 }, $, 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) => {
+    } }, metadata: e }, Z, ee), v(l, null, te, { 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 }, 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) => {
+    } }, metadata: e }, se, ie), v(l, null, ae, { 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 }, 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) => {
+    } }, metadata: e }, ce, oe), v(l, null, re, { 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 }, 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) => {
+    } }, metadata: e }, ne, le), v(l, null, he, { kind: "accessor", name: "showTitleInfo", static: !1, private: !1, access: { has: (t) => "showTitleInfo" in t, get: (t) => t.showTitleInfo, set: (t, s) => {
+      t.showTitleInfo = s;
+    } }, metadata: e }, de, ue), v(l, null, ge, { 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 }, oe, re), f(h, null, ne, { kind: "accessor", name: "focusedCoachIndex", static: !1, private: !1, access: { has: (t) => "focusedCoachIndex" in t, get: (t) => t.focusedCoachIndex, set: (t, s) => {
+    } }, metadata: e }, ve, fe), v(l, null, Ce, { 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, he), f(h, null, de, { kind: "accessor", name: "hoveredCoachIndex", static: !1, private: !1, access: { has: (t) => "hoveredCoachIndex" in t, get: (t) => t.hoveredCoachIndex, set: (t, s) => {
+    } }, metadata: e }, Se, Ie), v(l, null, xe, { kind: "accessor", name: "hoveredCoachIndex", static: !1, private: !1, access: { has: (t) => "hoveredCoachIndex" in t, get: (t) => t.hoveredCoachIndex, set: (t, s) => {
       t.hoveredCoachIndex = s;
-    } }, 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 = {
+    } }, metadata: e }, pe, _e), v(l, null, me, { 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(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), l.events = {
     selectedplaces: "selectedplaces",
     selectedcoach: "selectedcoach"
-  }, h;
+  }, l;
 })();
 export {
-  ze as SeatReservationBaseElement
+  Me as SeatReservationBaseElement
 };