@sbb-esta/lyne-elements-experimental 4.0.1 → 4.0.2

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

@@ -1,19 +1,19 @@
 var fe = (n) => {
   throw TypeError(n);
 };
-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);
+var Ce = (n, d, u) => d.has(n) || fe("Cannot " + u);
+var g = (n, d, u) => (Ce(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) => (Ce(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 Ie } from "@sbb-esta/lyne-elements/core/a11y.js";
-import { forceType as C } from "@sbb-esta/lyne-elements/core/decorators.js";
+import { isArrowKeyOrPageKeysPressed as Se } 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 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";
+import { property as C, state as T, eventOptions as _e } from "lit/decorators.js";
+import { mapIconToSvg as Ie, mapPlaceInfosToPlaceSelection as me, mapPlaceAndCoachToSeatReservationPlaceSelection as ye, mapCoachInfosToCoachSelection as be } from "../common/mapper.js";
 var I;
 (function(n) {
   n.right = "right", n.left = "left";
 })(I || (I = {}));
-const Pe = 3, Ae = [
+const Pe = 3, Ne = [
   "sa-vo",
   "sa-rs",
   "sa-abteilkinderwagen",
@@ -23,24 +23,24 @@ const Pe = 3, Ae = [
   "sa-rz"
 ];
 let ze = (() => {
-  var x, p, m, _, y, b, P, A, R, k, N, E, h;
-  let n = xe, d = [], u, D = [], B = [], z, F = [], V = [], O, G = [], L = [], W, X = [], K = [], H, U = [], q = [], M, $ = [], j = [], Y, J = [], Q = [], Z, ee = [], te = [], se, ie = [], ae = [], ce, oe = [], re = [], le, ne = [], he = [], de, ue = [], ge = [], ve;
+  var x, p, _, m, y, b, P, N, A, R, k, E, h;
+  let n = xe, d = [], u, D = [], B = [], z, F = [], V = [], G, O = [], L = [], K, W = [], X = [], H, U = [], M = [], q, $ = [], j = [], Y, J = [], Q = [], Z, ee = [], te = [], ie, se = [], ae = [], ce, oe = [], re = [], le, ne = [], he = [], de, ue = [], ge = [], ve;
   return h = class extends n {
     constructor() {
       super(...arguments);
       v(this, x);
       v(this, p);
-      v(this, m);
       v(this, _);
+      v(this, m);
       v(this, y);
       v(this, b);
       v(this, P);
+      v(this, N);
       v(this, A);
       v(this, R);
       v(this, k);
-      v(this, N);
       v(this, E);
-      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, K), 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, R, (l(this, te), l(this, ie, -1))), r(this, k, (l(this, ae), l(this, oe, -1))), r(this, N, (l(this, re), l(this, ne, -1))), r(this, E, (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 = {
+      r(this, x, (l(this, d), l(this, D, null))), r(this, p, (l(this, B), l(this, F, !0))), r(this, _, (l(this, V), l(this, O, !1))), r(this, m, (l(this, L), l(this, W, 16))), r(this, y, (l(this, X), l(this, U, null))), r(this, b, (l(this, M), l(this, $, -1))), r(this, P, (l(this, j), l(this, J, -1))), r(this, N, (l(this, Q), l(this, ee, !1))), r(this, A, (l(this, te), l(this, se, -1))), r(this, R, (l(this, ae), l(this, oe, -1))), r(this, k, (l(this, re), l(this, ne, -1))), r(this, E, (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.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 = {
@@ -50,15 +50,15 @@ let ze = (() => {
         ArrowDown: "ArrowDown",
         Tab: "Tab",
         Enter: "Enter"
-      }, this._prepareServiceIconsNavigation = (e) => {
+      }, this._isRunningInitPreselectCoachIndex = !1, this._lastStartScrollPos = -1, this._prepareServiceIconsNavigation = (e) => {
         if (!e)
           return [];
-        const t = e?.map(function(s) {
+        const t = e?.map(function(i) {
           return {
-            pId: s,
-            svgName: Ce[s]?.svgName ? Ce[s]?.svgName : ""
+            pId: i,
+            svgName: Ie[i]?.svgName ? Ie[i]?.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((i) => Ne.indexOf(i.svgName) !== -1).filter((i, s, a) => a.map((o) => o.svgName).indexOf(i.svgName) === s).map((i) => i.pId).slice(0, Pe);
         return t || [];
       };
     }
@@ -78,17 +78,17 @@ let ze = (() => {
     }
     /** The seat reservation area is aligned vertically */
     get alignVertical() {
-      return g(this, m);
+      return g(this, _);
     }
     set alignVertical(e) {
-      r(this, m, e);
+      r(this, _, e);
     }
     /** The seat reservation area's base grid size */
     get baseGridSize() {
-      return g(this, _);
+      return g(this, m);
     }
     set baseGridSize(e) {
-      r(this, _, e);
+      r(this, m, e);
     }
     /** The seat reservation area's width */
     get height() {
@@ -113,34 +113,33 @@ let ze = (() => {
     }
     /** Any click functionality is prevented */
     get preventPlaceClick() {
-      return g(this, A);
+      return g(this, N);
     }
     set preventPlaceClick(e) {
-      r(this, A, e);
+      r(this, N, e);
     }
     get preselectCoachIndex() {
-      return g(this, R);
+      return g(this, A);
     }
     set preselectCoachIndex(e) {
-      r(this, R, e);
+      r(this, A, e);
     }
     get selectedCoachIndex() {
-      return g(this, k);
+      return g(this, R);
     }
     set selectedCoachIndex(e) {
-      r(this, k, e);
+      r(this, R, e);
     }
     get focusedCoachIndex() {
-      return g(this, N);
+      return g(this, k);
     }
     set focusedCoachIndex(e) {
-      r(this, N, e);
+      r(this, k, e);
     }
-    //Sets the hover style when scrolling to a coach
-    get hoveredScrollCoachIndex() {
+    get hoveredCoachIndex() {
       return g(this, E);
     }
-    set hoveredScrollCoachIndex(e) {
+    set hoveredCoachIndex(e) {
       r(this, E, e);
     }
     willUpdate(e) {
@@ -148,7 +147,7 @@ let ze = (() => {
         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());
       }
-      e.has("alignVertical") && this.alignVertical && this.initNavigationSelectionByScrollEvent(), e.has("preselectCoachIndex") && setTimeout(() => this.scrollToSelectedNavCoach(this.preselectCoachIndex), 1);
+      e.has("alignVertical") && this.alignVertical && this.initNavigationSelectionByScrollEvent(), e.has("preselectCoachIndex") && (this._isRunningInitPreselectCoachIndex = !0, setTimeout(() => this.scrollToSelectedNavCoach(this.preselectCoachIndex), 1));
     }
     navigateByDirectionBtn(e) {
       this.unfocusPlaceElement();
@@ -164,26 +163,26 @@ let ze = (() => {
     }
     /** 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");
+      this.coachScrollArea = this.shadowRoot?.querySelector("#sbb-sr__wrapper-scrollarea"), this.navigationScrollArea = this.shadowRoot?.querySelector("#sbb-sr__navigation-list-coaches");
       const e = this.seatReservations ? this.seatReservations[this.currSelectedDeckIndex] : null;
       if (e && e.coachItems.length > 0) {
-        const t = e.coachItems[0].dimension.h * this.baseGridSize + this.coachBorderPadding, s = (this.seatReservations.length - 1) * this.gapBetweenCoachDecks;
-        this.style?.setProperty("--sbb-seat-reservation-height", `${t * this.seatReservations.length + s}`), this.style?.setProperty("--sbb-seat-reservation-decks", `${this.seatReservations.length}`);
+        const t = e.coachItems[0].dimension.h * this.baseGridSize + this.coachBorderPadding, i = (this.seatReservations.length - 1) * this.gapBetweenCoachDecks;
+        this.style?.setProperty("--sbb-seat-reservation-height", `${t * this.seatReservations.length + i}`), this.style?.setProperty("--sbb-seat-reservation-decks", `${this.seatReservations.length}`);
       }
       if (this.navigationScrollArea) {
         this.scrollNavigationAreaDim = this.alignVertical ? this.navigationScrollArea.getBoundingClientRect().height : this.navigationScrollArea.getBoundingClientRect().width;
         const t = this.navigationScrollArea.querySelector("ul > li");
         if (t) {
-          const s = t?.getBoundingClientRect();
-          this.coachNavButtonDim = this.alignVertical ? s.height : s.width;
+          const i = t?.getBoundingClientRect();
+          this.coachNavButtonDim = this.alignVertical ? i.height : i.width;
         }
       }
       if (this.coachScrollArea && e) {
         let t = 0;
-        this.scrollCoachsAreaWidth = 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;
+        this.scrollCoachsAreaWidth = this.alignVertical ? this.coachScrollArea.getBoundingClientRect().height : this.coachScrollArea.getBoundingClientRect().width, this.triggerCoachPositionsCollection = e.coachItems.map((i) => {
+          const s = t, a = this.getCalculatedDimension(i.dimension).w;
           return t += a + this.gapBetweenCoaches, {
-            start: i,
+            start: s,
             end: t,
             width: a
           };
@@ -208,46 +207,57 @@ let ze = (() => {
     onFocusTableCoachAndPreselectPlace(e) {
       !this.seatReservationWithoutNavigationHasFocus && !this.hasNavigation && (this.seatReservationWithoutNavigationHasFocus = !0, this.currSelectedCoachIndex = e === 0 ? this.getNextAvailableCoachIndex(-1) : this.getPrevAvailableCoachIndex(e), this.preselectPlaceInCoach());
     }
+    /** Will be triggerd by focus navigation direction */
+    onFocusNavDirectionButton() {
+      this.focusedCoachIndex = -1;
+    }
+    /** TAB Key Event handling for Coach Navigation */
+    onKeyNavigationNavCoachButton(e, t) {
+      if (e.key === this.keyboardNavigationEvents.Tab) {
+        this._handleTabKeyNavigation(e, "navigation", t);
+        return;
+      }
+      Se(e) && this.keyboardSeatmapEventHadling(e);
+    }
+    /** General TAB Key Event handling for tab navigation inside the coach navigation area and the seatmap area */
+    _handleTabKeyNavigation(e, t, i) {
+      const s = e.key, a = e.shiftKey;
+      s === this.keyboardNavigationEvents.Tab && (t == "navigation" ? (i == this.currSelectedCoachIndex ? !this.currSelectedPlace || !a || this.coachNavData[i].isDriverArea || this.focusedCoachIndex == -1 ? this.focusedCoachIndex = i : a && this.currSelectedPlace && (this.focusedCoachIndex = -1, this.focusPlaceElement(this.currSelectedPlace)) : this.focusedCoachIndex = i, this._scrollToSelectedNavigationButton(i)) : t == "seatmap" && (e.preventDefault(), a ? this._navigateCoachNavigationByKeyboard("PREV_TAB") : this._navigateCoachNavigationByKeyboard("NEXT_TAB")));
+    }
     /**
-     * Initialisation of Keyboard event handling to navigation between each places inside a selected coach by using [arrow] keys.
+     * 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.
      */
-    handleKeyboardEvent(e) {
+    keyboardSeatmapEventHadling(e) {
       const t = e.key;
-      if (this.preventCoachScrollByPlaceClick = !1, !this.hasSeatReservationNativeFocus && (e.shiftKey && e.keyCode === 9 || t === this.keyboardNavigationEvents.Tab) && (this.hasSeatReservationNativeFocus = !0), this.currSelectedPlace) {
-        if (e.shiftKey && e.keyCode === 9) {
-          this._navigateCoachNavigationByKeyboard("PREV_TAB"), e.preventDefault();
-          return;
-        }
-        if (t === this.keyboardNavigationEvents.Tab) {
-          this._navigateCoachNavigationByKeyboard("NEXT_TAB"), e.preventDefault();
-          return;
-        }
+      if (this.preventCoachScrollByPlaceClick = !1, !this.hasSeatReservationNativeFocus && (e.shiftKey && t === this.keyboardNavigationEvents.Tab || t === this.keyboardNavigationEvents.Tab) && (this.hasSeatReservationNativeFocus = !0), t == this.keyboardNavigationEvents.Tab) {
+        this._handleTabKeyNavigation(e, "seatmap");
+        return;
       }
-      if (this.currSelectedCoachIndex !== -1 && Ie(e))
+      if (this.currSelectedCoachIndex !== -1 && Se(e))
         switch (e.preventDefault(), t) {
           case this.keyboardNavigationEvents.ArrowLeft:
             {
-              const s = this.alignVertical ? this.keyboardNavigationEvents.ArrowDown : t;
-              this._navigateToPlaceByKeyboard(s);
+              const i = this.alignVertical ? this.keyboardNavigationEvents.ArrowDown : t;
+              this._navigateToPlaceByKeyboard(i);
             }
             break;
           case this.keyboardNavigationEvents.ArrowRight:
             {
-              const s = this.alignVertical ? this.keyboardNavigationEvents.ArrowUp : t;
-              this._navigateToPlaceByKeyboard(s);
+              const i = this.alignVertical ? this.keyboardNavigationEvents.ArrowUp : t;
+              this._navigateToPlaceByKeyboard(i);
             }
             break;
           case this.keyboardNavigationEvents.ArrowUp:
             {
-              const s = this.alignVertical ? this.keyboardNavigationEvents.ArrowLeft : t;
-              this._navigateToPlaceByKeyboard(s);
+              const i = this.alignVertical ? this.keyboardNavigationEvents.ArrowLeft : t;
+              this._navigateToPlaceByKeyboard(i);
             }
             break;
           case this.keyboardNavigationEvents.ArrowDown:
             {
-              const s = this.alignVertical ? this.keyboardNavigationEvents.ArrowRight : t;
-              this._navigateToPlaceByKeyboard(s);
+              const i = this.alignVertical ? this.keyboardNavigationEvents.ArrowRight : t;
+              this._navigateToPlaceByKeyboard(i);
             }
             break;
         }
@@ -257,40 +267,59 @@ let ze = (() => {
      * otherwise the coach grid is selected (necessary for ScreenReader)
      */
     preselectPlaceInCoach() {
-      const e = this._getClosestPlaceByKeyDirection();
-      e && this.unfocusPlaceElement(), this.isKeyboardNavigation && this.isAutoScrolling ? e && this.focusPlaceElement(e) : (this.currSelectedPlace = e, this._setFocusToSelectedCoachGrid());
+      if (this.isAutoScrolling) {
+        if (this._isRunningInitPreselectCoachIndex) {
+          this._isRunningInitPreselectCoachIndex = !1;
+          return;
+        }
+        if (this.coachNavData[this.currSelectedCoachIndex] && this.coachNavData[this.currSelectedCoachIndex].isDriverArea) {
+          this._setFocusToSelectedCoachGrid();
+          return;
+        }
+        if (this.isKeyboardNavigation && this.isAutoScrolling) {
+          const e = this._getClosestPlaceByKeyDirection();
+          e ? (this.unfocusPlaceElement(), this.focusPlaceElement(e), this.focusedCoachIndex = -1) : this._setFocusToSelectedCoachGrid();
+        } else
+          this.unfocusPlaceElement(), this.isCoachGridFocusable = !0, this._setFocusToSelectedCoachGrid();
+      }
     }
     scrollToSelectedNavCoach(e) {
       if (this._isValidCoachIndex(e) && e !== this.currSelectedCoachIndex) {
-        this.isAutoScrolling = !0, this.isCoachGridFocusable = !0, this.currSelectedCoachIndex = e, this.currSelectedDeckIndex = this._getExistingCoachDeckIndex(), this._setScrollDirectionByCoachIndex();
+        this.hoveredCoachIndex = e, 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({
+        (this.selectedCoachIndex !== -1 || this.currSelectedCoachIndex > 0) && this._isScrollableToSelectedCoach() ? (this._lastStartScrollPos = this.coachScrollArea.scrollLeft, this.coachScrollArea.scrollTo({
           top: this.alignVertical ? t : 0,
           left: this.alignVertical ? 0 : t,
           behavior: "smooth"
-        }) : this.updateCurrentSelectedCoach(), this._scrollToSelectedNavigationButton(e);
+        })) : this.updateCurrentSelectedCoach(), this._scrollToSelectedNavigationButton(e);
       }
     }
     focusPlaceElement(e) {
       if (this.unfocusPlaceElement(), e) {
         this.currSelectedPlace = e, this._setCurrSelectedPlaceElementId(e);
         const t = this._getPlaceHtmlElement();
-        t && t.setAttribute("keyfocus", "focus");
+        if (t) {
+          t.setAttribute("keyfocus", "focus");
+          const i = setTimeout(() => {
+            const s = this.getPlaceElementId(this.currSelectedDeckIndex, this.currSelectedCoachIndex, e.number);
+            this._scrollPlaceIntoNearestViewport(s), clearTimeout(i);
+          }, 0);
+        }
       }
     }
     unfocusPlaceElement() {
       const e = this._getPlaceHtmlElement();
       e && (e.setAttribute("keyfocus", "unfocus"), this._setCurrSelectedPlaceElementId(null), this.currSelectedPlace = null);
     }
-    getCalculatedDimension(e, t, s, i) {
-      return t && !s && (e.h += this.coachBorderOffset * 2), i && (e.h += this.coachBorderOffset), {
+    getCalculatedDimension(e, t, i, s) {
+      return t && !i && (e.h += this.coachBorderOffset * 2), s && (e.h += this.coachBorderOffset), {
         w: this.baseGridSize * e.w,
         h: this.baseGridSize * e.h
       };
     }
-    getCalculatedPosition(e, t, s, i) {
-      if (s && t) {
-        const a = i ? s.h : s.h + this.coachBorderOffset;
+    getCalculatedPosition(e, t, i, s) {
+      if (i && t) {
+        const a = s ? i.h : i.h + this.coachBorderOffset;
         e.y === 0 ? e.y -= this.coachBorderOffset : e.y + t.h === a && (e.y += this.coachBorderOffset);
       }
       return {
@@ -315,20 +344,20 @@ let ze = (() => {
      * @returns An Object with count of free seats and free bicycle places
      */
     getAvailableFreePlacesNumFromCoach(e) {
-      const t = { seats: 0, bicycles: 0 }, s = e?.reduce((i, a) => (a.state !== "FREE" || (a.type === "SEAT" ? i.seats++ : i.bicycles++), i), t);
-      return s || t;
+      const t = { seats: 0, bicycles: 0 }, i = e?.reduce((s, a) => (a.state !== "FREE" || (a.type === "SEAT" ? s.seats++ : s.bicycles++), s), t);
+      return i || t;
     }
     /**
      * At the end of a scroll Event from the coach scrollable area,
      * the reached coach is marked as selected
      */
     _handleCoachAreaScrollendEvent() {
+      const e = this.isAutoScrolling ? this.currSelectedCoachIndex : this._getCoachIndexByScrollTriggerPosition();
       if (this.preventCoachScrollByPlaceClick) {
-        this.preventCoachScrollByPlaceClick = !1;
+        Math.abs(this._lastStartScrollPos - this.coachScrollArea.scrollLeft) > this.baseGridSize * 2 && (this.selectedCoachIndex = e), this.preventCoachScrollByPlaceClick = !1;
         return;
       }
-      const e = this.isAutoScrolling ? this.currSelectedCoachIndex : this._getCoachIndexByScrollTriggerPosition();
-      this.hoveredScrollCoachIndex = -1, 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);
+      this._lastStartScrollPos = this.coachScrollArea.scrollLeft, this.hoveredCoachIndex = -1, 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);
     }
     /**
      * Performs an automatic main navigation scroll to the specified selectedNavCoachIndex.
@@ -337,11 +366,11 @@ let ze = (() => {
      */
     _scrollToSelectedNavigationButton(e) {
       setTimeout(() => {
-        if (this.hoveredScrollCoachIndex = e, this.hasNavigation && this.navigationScrollArea) {
-          const t = this.scrollNavigationAreaDim / 2, i = e * this.coachNavButtonDim - t + this.coachNavButtonDim;
+        if (this.hasNavigation && this.navigationScrollArea) {
+          const t = this.scrollNavigationAreaDim / 2, s = e * this.coachNavButtonDim - t + this.coachNavButtonDim;
           this.navigationScrollArea.scrollTo({
-            top: this.alignVertical ? i : 0,
-            left: this.alignVertical ? 0 : i,
+            top: this.alignVertical ? s : 0,
+            left: this.alignVertical ? 0 : s,
             behavior: "smooth"
           });
         }
@@ -378,8 +407,8 @@ let ze = (() => {
      * @returns boolean
      */
     _isScrollableToSelectedCoach() {
-      const e = this.alignVertical ? this.coachScrollArea.scrollTop : this.coachScrollArea.scrollLeft, t = this.alignVertical ? this.coachScrollArea.getBoundingClientRect().height : this.coachScrollArea.getBoundingClientRect().width, s = this.maxCalcCoachsWidth - t, i = this.triggerCoachPositionsCollection[this.currSelectedCoachIndex], a = e === this.triggerCoachPositionsCollection[this.currSelectedCoachIndex].start;
-      return (e < s || e > i.start) && !a;
+      const e = this.alignVertical ? this.coachScrollArea.scrollTop : this.coachScrollArea.scrollLeft, t = this.alignVertical ? this.coachScrollArea.getBoundingClientRect().height : this.coachScrollArea.getBoundingClientRect().width, i = this.maxCalcCoachsWidth - t, s = this.triggerCoachPositionsCollection[this.currSelectedCoachIndex], a = e === this.triggerCoachPositionsCollection[this.currSelectedCoachIndex].start;
+      return (e < i || e > s.start) && !a;
     }
     /**
      * Returns the coach index which is currently visible in the scroll area
@@ -387,7 +416,7 @@ let ze = (() => {
      */
     _getCoachIndexByScrollTriggerPosition() {
       const t = (this.alignVertical ? this.coachScrollArea.scrollTop : this.coachScrollArea.scrollLeft) + this.scrollCoachsAreaWidth / 2;
-      return this.triggerCoachPositionsCollection.findIndex((s) => t >= s.start && t <= s.end);
+      return this.triggerCoachPositionsCollection.findIndex((i) => t >= i.start && t <= i.end);
     }
     /**
      * Get the first place of current selected coach by table cell coordinate 0-0 id.
@@ -395,8 +424,8 @@ let ze = (() => {
      */
     _getFirstPlaceInSelectedCoach() {
       let e = null;
-      const t = this.seatReservations[this.currSelectedDeckIndex].coachItems[this.currSelectedCoachIndex], s = "cell-" + this.currSelectedDeckIndex + "-" + this.currSelectedCoachIndex + "-0-0", i = this.shadowRoot?.querySelector("#" + s)?.querySelector("sbb-seat-reservation-place-control")?.getAttribute("text") || null;
-      return t && i && (e = t.places?.find((a) => a.number === i) || null), e;
+      const t = this.seatReservations[this.currSelectedDeckIndex].coachItems[this.currSelectedCoachIndex], i = "cell-" + this.currSelectedDeckIndex + "-" + this.currSelectedCoachIndex + "-0-0", s = this.shadowRoot?.querySelector("#" + i)?.querySelector("sbb-seat-reservation-place-control")?.getAttribute("text") || null;
+      return t && s && (e = t.places?.find((a) => a.number === s) || null), e;
     }
     _getSwitchedCoachDeckIndexByKeyNavigation(e, t) {
       return !this.currSelectedPlace || e === this.keyboardNavigationEvents.ArrowRight || e === this.keyboardNavigationEvents.ArrowLeft ? null : e === this.keyboardNavigationEvents.ArrowDown && this.currSelectedPlace.position.y + 2 === t.dimension.h && this.seatReservations[this.currSelectedDeckIndex + 1] ? this.currSelectedDeckIndex + 1 : e === this.keyboardNavigationEvents.ArrowUp && this.currSelectedPlace.position.y === 0 && this.seatReservations[this.currSelectedDeckIndex - 1] ? this.currSelectedDeckIndex - 1 : null;
@@ -409,40 +438,35 @@ let ze = (() => {
      */
     _getClosestPlaceByKeyDirection(e) {
       const t = this.seatReservations[this.currSelectedDeckIndex].coachItems[this.currSelectedCoachIndex];
-      let s = null, i = t.places, a = null;
-      if (i)
+      let i = null, s = t.places, a = null;
+      if (s)
         if (this.currSelectedPlaceElementId) {
           if (this.currSelectedPlace) {
             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 === 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);
+            e && (a = this._getSwitchedCoachDeckIndexByKeyNavigation(e, t), a !== null && (s = this.seatReservations[a].coachItems[this.currSelectedCoachIndex].places || [], o.y = a < this.currSelectedDeckIndex ? t.dimension.h : -1));
+            for (const c of s)
+              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 && (!i || c.position.x < i.position.x) || e === this.keyboardNavigationEvents.ArrowDown && (c.position.x === o.x || c.position.x === o.x + 1) && c.position.y > o.y && (!i || c.position.y < i.position.y) || e === this.keyboardNavigationEvents.ArrowLeft && (c.position.y === o.y || c.position.y === o.y + 1) && c.position.x < o.x && (!i || c.position.x > i.position.x) || e === this.keyboardNavigationEvents.ArrowUp && (c.position.x === o.x || c.position.x === o.x - 1) && c.position.y < o.y && (!i || c.position.y > i.position.y)) && (i = c) : (this.currScrollDirection === I.right && c.position.y === o.y && (!i || c.position.x < i.position.x) || this.currScrollDirection === I.left && c.position.y === o.y && (!i || c.position.x > i.position.x)) && (i = c);
+            a !== null && i && (this.currSelectedDeckIndex = a);
           }
         } else
           return this._getFirstPlaceInSelectedCoach();
-      return s;
+      return i;
     }
     // Handling for Tab navigation if a place is selected inside the coach.
     // This controls the focused coach from the current selected coach.
     _navigateCoachNavigationByKeyboard(e) {
-      const t = this.focusedCoachIndex === -1 ? this.currSelectedCoachIndex === -1 ? 0 : this.currSelectedCoachIndex : this.focusedCoachIndex, s = e === "NEXT_TAB" ? this.getNextAvailableCoachIndex(t) : this.getPrevAvailableCoachIndex(t);
-      if (t === s) {
-        this.unfocusPlaceElement(), this.seatReservationWithoutNavigationHasFocus = !1, e === "NEXT_TAB" ? this.lastTabElement.focus() : this.firstTabElement.focus();
-        return;
-      }
+      const t = this.focusedCoachIndex === -1 ? this.currSelectedCoachIndex === -1 ? 0 : this.currSelectedCoachIndex : this.focusedCoachIndex, i = e === "NEXT_TAB" ? this.getNextAvailableCoachIndex(t) : this.getPrevAvailableCoachIndex(t);
       if (this.hasNavigation) {
-        const i = this._getPlaceHtmlElement(), a = i ? i.getAttribute("keyfocus") === "focus" : !1;
+        const s = this._getPlaceHtmlElement(), a = s ? s.getAttribute("keyfocus") === "focus" : !1;
         if (e === "PREV_TAB" && this.selectedCoachIndex === t)
-          if (a) {
+          if (a || this.currSelectedPlace !== null) {
             this.focusedCoachIndex = t, this.unfocusPlaceElement();
             return;
-          } else
-            this.focusedCoachIndex = s;
-        else s !== this.currSelectedCoachIndex ? this.focusedCoachIndex = s : (this.focusedCoachIndex = -1, this.selectedCoachIndex = s, a ? this.focusPlaceElement(this.currSelectedPlace) : (this.isCoachGridFocusable = !0, this._setFocusToSelectedCoachGrid()));
-        this._scrollToSelectedNavigationButton(s);
+          } else t == 0 ? (this.unfocusPlaceElement(), this.currSelectedPlace = null, this.focusedCoachIndex = -1, (this.shadowRoot?.getElementById("sbb-sr-navigation__wrapper-button-direction--left")).focus()) : this.focusedCoachIndex = i;
+        else i !== this.currSelectedCoachIndex ? this.focusedCoachIndex = i : e === "NEXT_TAB" && i === 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 = i, a ? this.focusPlaceElement(this.currSelectedPlace) : (this.isCoachGridFocusable = !0, this._setFocusToSelectedCoachGrid()));
+        this._scrollToSelectedNavigationButton(i);
       } else
-        this.scrollToSelectedNavCoach(s);
+        this.scrollToSelectedNavCoach(i);
     }
     _navigateToPlaceByKeyboard(e) {
       if (this.isKeyboardNavigation = !0, this.focusedCoachIndex !== -1 && (this.focusedCoachIndex = -1), !this.preventPlaceClick) {
@@ -450,8 +474,8 @@ let ze = (() => {
         if (t)
           this.focusPlaceElement(t);
         else if (e === this.keyboardNavigationEvents.ArrowRight || e === this.keyboardNavigationEvents.ArrowLeft || this.alignVertical && (e === this.keyboardNavigationEvents.ArrowUp || e === this.keyboardNavigationEvents.ArrowDown)) {
-          const s = e === this.keyboardNavigationEvents.ArrowRight ? this.getNextAvailableCoachIndex() : this.getPrevAvailableCoachIndex();
-          this.scrollToSelectedNavCoach(s);
+          const i = e === this.keyboardNavigationEvents.ArrowRight ? this.getNextAvailableCoachIndex() : this.getPrevAvailableCoachIndex();
+          this.scrollToSelectedNavCoach(i);
         }
       }
     }
@@ -464,39 +488,41 @@ let ze = (() => {
       return t > 0 ? t - 1 : t;
     }
     updateSelectedSeatReservationPlaces(e) {
-      const t = e.placeType === "SEAT" ? "seats" : "bicycles", s = e.placeType === "SEAT" ? this.maxSeatReservations : this.maxBicycleReservations, i = this.selectedSeatReservationPlaces[t];
-      this.selectedSeatReservationPlaces[t] = this._updateSelectedSeatReservationPlaces(i, s, e), this.dispatchEvent(new CustomEvent("selectedplaces", {
+      const t = e.placeType === "SEAT" ? "seats" : "bicycles", i = e.placeType === "SEAT" ? this.maxSeatReservations : this.maxBicycleReservations, s = this.selectedSeatReservationPlaces[t];
+      this.selectedSeatReservationPlaces[t] = this._updateSelectedSeatReservationPlaces(s, i, e), this.dispatchEvent(new CustomEvent("selectedplaces", {
         bubbles: !0,
         composed: !0,
         detail: this.selectedSeatReservationPlaces
       }));
     }
-    _updateSelectedSeatReservationPlaces(e, t, s) {
-      if (s.state === "SELECTED") {
-        const i = this._getDeckIndexByPlaceId(s.id), a = this._getSeatReservationPlaceSelection(s, i);
+    _updateSelectedSeatReservationPlaces(e, t, i) {
+      if (i.state === "SELECTED") {
+        const s = this._getDeckIndexByPlaceId(i.id), a = this._getSeatReservationPlaceSelection(i, s);
         a && e.push(a);
       } else
-        e = e.filter((i) => i.id !== s.id);
+        e = e.filter((s) => s.id !== i.id);
       if (t > -1 && e.length > t) {
-        const i = t > 0 ? s : void 0;
-        e = this._resetAllPlaceSelections(e, i);
+        const s = t > 0 ? i : void 0;
+        e = this._resetAllPlaceSelections(e, s);
       }
       return e;
     }
     updateCurrentSelectedPlaceInCoach(e) {
-      const t = this._getDeckIndexByPlaceId(e.id), s = e.coachIndex;
+      const t = this._getDeckIndexByPlaceId(e.id), i = e.coachIndex;
       if (t === null)
         return;
-      const i = this.seatReservations[t].coachItems[s].places?.find((o) => o.number == e.number);
-      if (!i)
+      const s = this.seatReservations[t].coachItems[i].places?.find((o) => o.number == e.number);
+      if (!s)
         return;
-      this.unfocusPlaceElement(), this.currSelectedDeckIndex = t, this.currSelectedCoachIndex = s, this.currSelectedPlace = i, this.currSelectedCoachIndex !== this.selectedCoachIndex && this.updateCurrentSelectedCoach(), this._setCurrSelectedPlaceElementId(i);
+      this.currSelectedDeckIndex = t, this.currSelectedCoachIndex = i, this.currSelectedPlace = s, this.currSelectedCoachIndex !== this.selectedCoachIndex && this.updateCurrentSelectedCoach(), this._setCurrSelectedPlaceElementId(s);
       const a = setTimeout(() => {
         this._scrollPlaceIntoNearestViewport(e.id), clearTimeout(a);
       }, 0);
     }
     updateCurrentSelectedCoach() {
-      this.selectedCoachIndex = this.currSelectedCoachIndex, this.focusedCoachIndex = -1;
+      if (this.currSelectedCoachIndex == this.selectedCoachIndex)
+        return;
+      this.focusedCoachIndex != -1 && (this.focusedCoachIndex = this.currSelectedCoachIndex), this.selectedCoachIndex = this.currSelectedCoachIndex;
       const e = this._getSeatReservationSelectedCoach(this.selectedCoachIndex);
       e && this.dispatchEvent(new CustomEvent("selectedcoach", {
         bubbles: !0,
@@ -504,8 +530,8 @@ let ze = (() => {
         detail: e
       }));
     }
-    getPlaceElementId(e, t, s) {
-      return "seat-reservation__place-button-" + e + "-" + t + "-" + s;
+    getPlaceElementId(e, t, i) {
+      return "seat-reservation__place-button-" + e + "-" + t + "-" + i;
     }
     /**
      * In the case of coach layouts with different decks,
@@ -517,21 +543,21 @@ let ze = (() => {
      */
     _initEmptyCoachDeckOffsets() {
       const e = Array(this.seatReservations.length - 1).fill(0);
-      this.seatReservations[this.seatReservations.length - 1].coachItems.forEach((s) => {
-        for (let i = 0; i < this.seatReservations.length - 1; i++) {
-          const a = this.seatReservations[i].coachItems[e[i]];
-          if (s.id != a?.id) {
+      this.seatReservations[this.seatReservations.length - 1].coachItems.forEach((i) => {
+        for (let s = 0; s < this.seatReservations.length - 1; s++) {
+          const a = this.seatReservations[s].coachItems[e[s]];
+          if (i.id != a?.id) {
             const o = {
-              ...s,
+              ...i,
               places: void 0,
               propertyIds: void 0,
               graphicElements: void 0,
               serviceElements: void 0,
               travelClass: []
             };
-            this.seatReservations[i].coachItems.splice(e[i], 0, o);
+            this.seatReservations[s].coachItems.splice(e[s], 0, o);
           }
-          e[i]++;
+          e[s]++;
         }
       });
     }
@@ -540,9 +566,9 @@ let ze = (() => {
      * that have the state SELECTED within the seatReservation object
      */
     _initSeatReservationPlaceSelection() {
-      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);
+      this.seatReservations?.forEach((e, t) => e.coachItems.map((i, s) => {
+        i.places?.filter((a) => a.state === "SELECTED")?.forEach((a) => {
+          const o = this.getPlaceElementId(t, s, a.number), c = me(a, o, e.deckCoachIndex, s), w = this._getSeatReservationPlaceSelection(c, t);
           w && (w.placeType === "SEAT" ? this.selectedSeatReservationPlaces.seats.push(w) : this.selectedSeatReservationPlaces.bicycles.push(w));
         });
       }));
@@ -553,24 +579,24 @@ let ze = (() => {
      * @param currSelectedPlace
      */
     _resetAllPlaceSelections(e, t) {
-      for (const s of e)
-        if (!t || t.id !== s.id) {
-          const i = this.shadowRoot?.getElementById(s.id);
-          i && i.setAttribute("state", "FREE");
+      for (const i of e)
+        if (!t || t.id !== i.id) {
+          const s = this.shadowRoot?.getElementById(i.id);
+          s && s.setAttribute("state", "FREE");
         }
-      return t ? e = e.filter((s) => s.id === t.id) : e = [], e;
+      return t ? e = e.filter((i) => i.id === t.id) : e = [], e;
     }
     _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;
+      const i = this.seatReservations[t].coachItems[e.coachIndex], s = i.places?.find((a) => a.number === e.number);
+      return s ? ye(s, i, 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);
+      const t = this.seatReservations[this.currSelectedDeckIndex].coachItems[e], i = this.getAvailableFreePlacesNumFromCoach(t.places);
+      return be(e, t, i);
     }
     _setCurrSelectedPlaceElementId(e) {
       this.currSelectedPlaceElementId = e ? this.getPlaceElementId(this.currSelectedDeckIndex, this.currSelectedCoachIndex, e.number) : null;
@@ -595,13 +621,13 @@ let ze = (() => {
      * */
     _prepareNavigationCoachData() {
       const e = this.seatReservations[this.seatReservations.length - 1].coachItems;
-      this.coachNavData = [], 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 = [], e.forEach((t, i) => {
+        const s = [], a = [], o = [];
+        this.seatReservations.map((c) => c.coachItems[i]).forEach((c) => {
+          s.push(...c.travelClass), a.push(...c.propertyIds ? c.propertyIds : []), o.push(...c.places ? c.places : []);
         }), this.coachNavData.push({
           id: t.id,
-          travelClass: this._prepareTravelClassNavigation(i),
+          travelClass: this._prepareTravelClassNavigation(s),
           propertyIds: this._prepareServiceIconsNavigation(a),
           isDriverArea: t.places ? t.places.length === 0 : !0,
           driverAreaSide: this._prepareDriverAreaSideNavigation(t),
@@ -613,12 +639,12 @@ let ze = (() => {
       return e.indexOf("FIRST") !== -1 ? "FIRST" : e.indexOf("SECOND") !== -1 ? "SECOND" : "ANY_CLASS";
     }
     _prepareDriverAreaSideNavigation(e) {
-      const t = e.graphicElements?.filter((s) => s.icon === "DRIVER_AREA");
+      const t = e.graphicElements?.filter((i) => i.icon === "DRIVER_AREA");
       if (t && t.length > 0) {
-        const s = t.find((a) => a.position.x === 0) || !1, i = t.find((a) => a.position.x > 0) || !1;
+        const i = t.find((a) => a.position.x === 0) || !1, s = t.find((a) => a.position.x > 0) || !1;
         return {
-          left: !!s,
-          right: !!i
+          left: !!i,
+          right: !!s
         };
       }
     }
@@ -665,32 +691,32 @@ let ze = (() => {
     _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(), R = new WeakMap(), k = new WeakMap(), N = new WeakMap(), E = new WeakMap(), (() => {
+  }, x = new WeakMap(), p = new WeakMap(), _ = new WeakMap(), m = new WeakMap(), y = new WeakMap(), b = new WeakMap(), P = new WeakMap(), N = new WeakMap(), A = new WeakMap(), R = new WeakMap(), k = new WeakMap(), E = new WeakMap(), (() => {
     const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
-    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 })], H = [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 }, 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 }, 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 }, 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 }, X, K), 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) => {
-      t.height = 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 }, $, 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 }, 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 }, 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 }, 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 }, 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 }, 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;
+    u = [C({ attribute: "seat-reservations", type: Array })], z = [S(), C({ attribute: "has-navigation", type: Boolean })], G = [S(), C({ attribute: "align-vertical", type: Boolean, reflect: !0, useDefault: !0 })], K = [S(), C({ attribute: "base-grid-size", type: Number })], H = [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 })], ie = [S(), C({ attribute: "preselect-coach-index", type: Number })], ce = [T()], le = [T()], de = [T()], 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, i) => {
+      t.seatReservations = i;
+    } }, 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, i) => {
+      t.hasNavigation = i;
+    } }, metadata: e }, F, V), f(h, 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 }, O, L), f(h, null, K, { kind: "accessor", name: "baseGridSize", static: !1, private: !1, access: { has: (t) => "baseGridSize" in t, get: (t) => t.baseGridSize, set: (t, i) => {
+      t.baseGridSize = i;
+    } }, 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, i) => {
+      t.height = i;
+    } }, metadata: e }, U, M), f(h, null, q, { kind: "accessor", name: "maxSeatReservations", static: !1, private: !1, access: { has: (t) => "maxSeatReservations" in t, get: (t) => t.maxSeatReservations, set: (t, i) => {
+      t.maxSeatReservations = i;
+    } }, 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, i) => {
+      t.maxBicycleReservations = i;
+    } }, 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, i) => {
+      t.preventPlaceClick = i;
+    } }, metadata: e }, ee, te), f(h, null, ie, { kind: "accessor", name: "preselectCoachIndex", static: !1, private: !1, access: { has: (t) => "preselectCoachIndex" in t, get: (t) => t.preselectCoachIndex, set: (t, i) => {
+      t.preselectCoachIndex = i;
+    } }, metadata: e }, se, 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, i) => {
+      t.selectedCoachIndex = i;
+    } }, 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, i) => {
+      t.focusedCoachIndex = i;
+    } }, metadata: e }, ne, 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, i) => {
+      t.hoveredCoachIndex = i;
     } }, 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",