@sbb-esta/lyne-elements-experimental-dev 0.0.0 → 4.5.1-dev.1771849274

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

@@ -0,0 +1,756 @@
+var fe = (l) => {
+  throw TypeError(l);
+};
+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";
+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";
+var I;
+(function(l) {
+  l.right = "right", l.left = "left";
+})(I || (I = {}));
+const Pe = 3, Ae = [
+  "sa-vo",
+  "sa-rs",
+  "sa-abteilkinderwagen",
+  "sa-wr",
+  "sa-fa",
+  "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 {
+    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 = {
+        seats: [],
+        bicycles: []
+      }, this.seatReservationWithoutNavigationHasFocus = !1, this.isCoachGridFocusable = !1, this.isAutoScrolling = !1, this.isKeyboardNavigation = !1, this.hasMultipleDecks = !1, this.hasSeatReservationNativeFocus = !1, this.keyboardNavigationEvents = {
+        ArrowLeft: "ArrowLeft",
+        ArrowRight: "ArrowRight",
+        ArrowUp: "ArrowUp",
+        ArrowDown: "ArrowDown",
+        Tab: "Tab",
+        Enter: "Enter"
+      }, this.notAreaElements = [
+        "DRIVER_AREA",
+        "COACH_PASSAGE",
+        "COACH_WALL_NO_PASSAGE",
+        "COMPARTMENT_PASSAGE",
+        "COMPARTMENT_PASSAGE_HIGH",
+        "COMPARTMENT_PASSAGE_MIDDLE",
+        "COMPARTMENT_PASSAGE_LOW"
+      ], this.overHangingElementInformation = [], this._isRunningInitPreselectCoachIndex = !1, this._lastStartScrollPos = -1, this._prepareServiceIconsNavigation = (e) => {
+        if (!e)
+          return [];
+        const t = e?.map(function(s) {
+          return {
+            pId: s,
+            svgName: Ie[s]?.svgName ? Ie[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);
+        return t || [];
+      };
+    }
+    /** The seat reservations array contains all coaches and places */
+    get seatReservations() {
+      return g(this, x);
+    }
+    set seatReservations(e) {
+      r(this, x, e);
+    }
+    /** The seat reservation navigation can be toggled by this property */
+    get hasNavigation() {
+      return g(this, p);
+    }
+    set hasNavigation(e) {
+      r(this, p, e);
+    }
+    /** The seat reservation area is aligned vertically */
+    get alignVertical() {
+      return g(this, _);
+    }
+    set alignVertical(e) {
+      r(this, _, e);
+    }
+    /** The seat reservation area's base grid size */
+    get baseGridSize() {
+      return g(this, m);
+    }
+    set baseGridSize(e) {
+      r(this, m, e);
+    }
+    /** The seat reservation area's width */
+    get height() {
+      return g(this, y);
+    }
+    set height(e) {
+      r(this, y, e);
+    }
+    /** Maximal number of possible clickable seats */
+    get maxSeatReservations() {
+      return g(this, b);
+    }
+    set maxSeatReservations(e) {
+      r(this, b, e);
+    }
+    /** Maximal number of possible clickable bicycle places */
+    get maxBicycleReservations() {
+      return g(this, P);
+    }
+    set maxBicycleReservations(e) {
+      r(this, P, e);
+    }
+    /** Any click functionality is prevented */
+    get preventPlaceClick() {
+      return g(this, A);
+    }
+    set preventPlaceClick(e) {
+      r(this, A, e);
+    }
+    get preselectCoachIndex() {
+      return g(this, E);
+    }
+    set preselectCoachIndex(e) {
+      r(this, E, e);
+    }
+    get selectedCoachIndex() {
+      return g(this, R);
+    }
+    set selectedCoachIndex(e) {
+      r(this, R, e);
+    }
+    get focusedCoachIndex() {
+      return g(this, N);
+    }
+    set focusedCoachIndex(e) {
+      r(this, N, e);
+    }
+    get hoveredCoachIndex() {
+      return g(this, k);
+    }
+    set hoveredCoachIndex(e) {
+      r(this, k, 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) {
+        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") && (this._isRunningInitPreselectCoachIndex = !0, setTimeout(() => this.scrollToSelectedNavCoach(this.preselectCoachIndex), 1));
+    }
+    navigateByDirectionBtn(e) {
+      this.unfocusPlaceElement();
+      let t = this.currSelectedCoachIndex;
+      e == "DIRECTION_LEFT" && t > 0 ? t = this.currSelectedCoachIndex != -1 ? this.currSelectedCoachIndex - 1 : 0 : e == "DIRECTION_RIGHT" && t < this.seatReservations[this.currSelectedDeckIndex]?.coachItems.length - 1 && (t = this.currSelectedCoachIndex != -1 ? this.currSelectedCoachIndex + 1 : 0), this.scrollToSelectedNavCoach(t);
+    }
+    /**
+     * Data can be prepared once for the entire component
+     * in order to avoid recurring iteration processes in rendering.
+     */
+    _initPrepareSeatReservationData() {
+      this._determineBaseFontSize(), this.hasMultipleDecks && this._initEmptyCoachDeckOffsets(), this._prepareNavigationCoachData();
+    }
+    /** Init scroll event handling for coach navigation */
+    initNavigationSelectionByScrollEvent() {
+      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}`);
+      }
+      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;
+        }
+      }
+      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;
+          return t += a + (c ? 2 * this.gapBetweenCoaches : this.gapBetweenCoaches), {
+            start: i,
+            end: t,
+            width: a
+          };
+        }), this.maxCalcCoachesWidth = t;
+      }
+    }
+    /**
+     * Scroll event handler managed the end of scrolling inside the coach scroll area.
+     * Timeout event handling to check if the scrolling has been completed.
+     * It is required because the Safari browser does not handle scrollend event,
+     * and we therefore imitate this event -> scrollend.
+     */
+    coachAreaScrollend() {
+      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,
+     * the first place in the coach must be automatically preselected to control the place navigation via keyboard
+     *
+     * @param focusCoachIndex
+     */
+    onFocusTableCoachAndPreselectPlace(e) {
+      !this.seatReservationWithoutNavigationHasFocus && !this.hasNavigation && (this.seatReservationWithoutNavigationHasFocus = !0, this.currSelectedCoachIndex = e === 0 ? this.getNextAvailableCoachIndex(-1) : this.getPrevAvailableCoachIndex(e), this.preselectPlaceInCoach());
+    }
+    /** Will be triggered 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.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")));
+    }
+    /**
+     * 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) {
+        this._handleTabKeyNavigation(e, "seatmap");
+        return;
+      }
+      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);
+            }
+            break;
+          case this.keyboardNavigationEvents.ArrowRight:
+            {
+              const s = this.alignVertical ? this.keyboardNavigationEvents.ArrowUp : t;
+              this._navigateToPlaceByKeyboard(s);
+            }
+            break;
+          case this.keyboardNavigationEvents.ArrowUp:
+            {
+              const s = this.alignVertical ? this.keyboardNavigationEvents.ArrowLeft : t;
+              this._navigateToPlaceByKeyboard(s);
+            }
+            break;
+          case this.keyboardNavigationEvents.ArrowDown:
+            {
+              const s = this.alignVertical ? this.keyboardNavigationEvents.ArrowRight : t;
+              this._navigateToPlaceByKeyboard(s);
+            }
+            break;
+        }
+    }
+    /**
+     * Selects a place inside the coach if navigated via keyboard,
+     * otherwise the coach grid is selected (necessary for ScreenReader)
+     */
+    preselectPlaceInCoach() {
+      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.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._lastStartScrollPos = this.coachScrollArea.scrollLeft, this.coachScrollArea.scrollTo({
+          top: this.alignVertical ? t : 0,
+          left: this.alignVertical ? 0 : t,
+          behavior: "smooth"
+        })) : this.updateCurrentSelectedCoach(), this._scrollToSelectedNavigationButton(e);
+      }
+    }
+    focusPlaceElement(e) {
+      if (this.unfocusPlaceElement(), e) {
+        this.currSelectedPlace = e, this._setCurrSelectedPlaceElementId(e);
+        const t = this._getPlaceHtmlElement();
+        if (t) {
+          t.setAttribute("keyfocus", "focus");
+          const s = setTimeout(() => {
+            const i = this.getPlaceElementId(this.currSelectedDeckIndex, this.currSelectedCoachIndex, e.number);
+            this._scrollPlaceIntoNearestViewport(i), clearTimeout(s);
+          }, 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), {
+        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;
+        e.y === 0 ? e.y -= this.coachBorderOffset : e.y + t.h === a && (e.y += this.coachBorderOffset);
+      }
+      return {
+        x: this.baseGridSize * e.x,
+        y: this.baseGridSize * e.y,
+        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
+     *
+     * @param places
+     * @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;
+    }
+    /**
+     * 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) {
+        Math.abs(this._lastStartScrollPos - this.coachScrollArea.scrollLeft) > this.baseGridSize * 2 && (this.selectedCoachIndex = e), this.preventCoachScrollByPlaceClick = !1;
+        return;
+      }
+      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.
+     * Calculates the central scroll offset of the nav coach to be selected.
+     * @param selectedNavCoachIndex
+     */
+    _scrollToSelectedNavigationButton(e) {
+      setTimeout(() => {
+        if (this.hasNavigation && this.navigationScrollArea) {
+          const t = this.scrollNavigationAreaDim / 2, i = e * this.coachNavButtonDim - t + this.coachNavButtonDim;
+          this.navigationScrollArea.scrollTo({
+            top: this.alignVertical ? i : 0,
+            left: this.alignVertical ? 0 : i,
+            behavior: "smooth"
+          });
+        }
+      }, 10);
+    }
+    /**
+     * Sets the new ScrollDirection by the new given target coach index.
+     */
+    _setScrollDirectionByCoachIndex() {
+      this.currScrollDirection = this.currSelectedCoachIndex > this.selectedCoachIndex ? I.right : I.left;
+    }
+    /**
+     * Returns the scroll start or end position X from the selected coach.
+     * In case the user is currently navigating through places by keyboard and goes to previous coach,
+     * then we return the end position of the coach to get the closest scroll position of the next focus place.
+     * @returns number
+     */
+    _getCoachScrollPositionX() {
+      const e = this.triggerCoachPositionsCollection[this.currSelectedCoachIndex];
+      return this.isKeyboardNavigation && this.currScrollDirection === I.left && e.width > this.scrollCoachesAreaWidth ? e.end - this.scrollCoachesAreaWidth : e.start;
+    }
+    /**
+     * Sets the focus on the HTML table (grid) caption element so that the heading is read out when using a ScreenReader.
+     */
+    _setFocusToSelectedCoachGrid() {
+      if (this.isCoachGridFocusable && this.hasSeatReservationNativeFocus) {
+        this.isCoachGridFocusable = !1;
+        const e = this.shadowRoot?.querySelector("#sbb-sr-coach-caption-" + this.currSelectedCoachIndex);
+        e && e.focus();
+      }
+    }
+    /**
+     * Returns whether the current scrolled position can be used to scroll to the selected wagon
+     * @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.maxCalcCoachesWidth - t, i = this.triggerCoachPositionsCollection[this.currSelectedCoachIndex], a = e === this.triggerCoachPositionsCollection[this.currSelectedCoachIndex].start;
+      return (e < s || e > i.start) && !a;
+    }
+    /**
+     * Returns the coach index which is currently visible in the scroll area
+     * @returns number
+     */
+    _getCoachIndexByScrollTriggerPosition() {
+      const t = (this.alignVertical ? this.coachScrollArea.scrollTop : this.coachScrollArea.scrollLeft) + this.scrollCoachesAreaWidth / 2;
+      return this.triggerCoachPositionsCollection.findIndex((s) => t >= s.start && t <= s.end);
+    }
+    /**
+     * Get the first place of current selected coach by table cell coordinate 0-0 id.
+     * @returns Place or null
+     */
+    _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;
+    }
+    _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;
+    }
+    /**
+     * To get the correct closest place of current pressed key and the current selected place,
+     * we have to investigate the coordinates of each place to find the closest place of the currSelectedPlaceElementId.
+     * @param pressedKey
+     * @returns Place or null
+     */
+    _getClosestPlaceByKeyDirection(e) {
+      const t = this.seatReservations[this.currSelectedDeckIndex].coachItems[this.currSelectedCoachIndex];
+      let s = null, i = t.places, a = null;
+      if (i)
+        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);
+          }
+        } else
+          return this._getFirstPlaceInSelectedCoach();
+      return s;
+    }
+    // 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 (this.hasNavigation) {
+        const i = this._getPlaceHtmlElement(), a = i ? i.getAttribute("keyfocus") === "focus" : !1;
+        if (e === "PREV_TAB" && this.selectedCoachIndex === t)
+          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()));
+        this._scrollToSelectedNavigationButton(s);
+      } else
+        this.scrollToSelectedNavCoach(s);
+    }
+    _navigateToPlaceByKeyboard(e) {
+      if (this.isKeyboardNavigation = !0, this.focusedCoachIndex !== -1 && (this.focusedCoachIndex = -1), !this.preventPlaceClick) {
+        const t = this._getClosestPlaceByKeyDirection(e);
+        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);
+        }
+      }
+    }
+    getNextAvailableCoachIndex(e) {
+      const t = e ?? this.currSelectedCoachIndex;
+      return t < this.seatReservations[this.currSelectedDeckIndex].coachItems.length - 1 ? t + 1 : t;
+    }
+    getPrevAvailableCoachIndex(e) {
+      const t = e ?? this.currSelectedCoachIndex;
+      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", {
+        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);
+        a && e.push(a);
+      } else
+        e = e.filter((i) => i.id !== s.id);
+      if (t > -1 && e.length > t) {
+        const i = t > 0 ? s : void 0;
+        e = this._resetAllPlaceSelections(e, i);
+      }
+      return e;
+    }
+    updateCurrentSelectedPlaceInCoach(e) {
+      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() {
+      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,
+        composed: !0,
+        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
+     * in order to create a stable vehicle layout.
+     *
+     *             [ooo]-[ooo]-[ooo]
+     * [ooo]-[ooo]-[ooo]-[ooo]-[ooo]
+     */
+    _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) {
+            const o = {
+              ...s,
+              places: void 0,
+              propertyIds: void 0,
+              graphicElements: void 0,
+              serviceElements: void 0,
+              travelClass: []
+            };
+            this.seatReservations[i].coachItems.splice(e[i], 0, o);
+          }
+          e[i]++;
+        }
+      });
+    }
+    /**
+     * Initialization of SeatReservationPlaceSelection Array based on the transferred places
+     * that have the state SELECTED within the seatReservation object
+     */
+    _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));
+        });
+      }));
+    }
+    /**
+     * All selected places will be reset or the currentSelectedPlace was given, then we reset all except currentSelectedPlace
+     * @param reservationPlaceSelections
+     * @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");
+        }
+      return t ? e = e.filter((s) => s.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;
+    }
+    _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);
+    }
+    _setCurrSelectedPlaceElementId(e) {
+      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 (!pe) {
+        const t = 1 / parseInt(window.getComputedStyle(document.body).fontSize, 10);
+        this.style?.setProperty("--sbb-seat-reservation-one-px-rem", `${t + "rem"}`);
+      }
+    }
+    /**
+     * Prepares data for displaying navigation area.
+     * Calculates the values which are not going to change during use of a component:
+     *    - coach id
+     *    - list of service icons
+     *    - class (first, second, any)
+     *    - whether there is a driver area left or right
+     * */
+    _prepareNavigationCoachData() {
+      if (this.seatReservations) {
+        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.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)
+          });
+        });
+      }
+    }
+    _prepareTravelClassNavigation(e) {
+      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");
+      if (t && t.length > 0) {
+        const s = t.find((a) => a.position.x === 0) || !1, i = t.find((a) => a.position.x > 0) || !1;
+        return {
+          left: !!s,
+          right: !!i
+        };
+      }
+    }
+    _prepareCoachWidthAndGapCalculations() {
+      this.seatReservations && this.seatReservations[this.seatReservations.length - 1]?.coachItems?.forEach((t) => {
+        const s = this._isOverhangingElementsPresent(t.dimension.w, t.places), i = t.graphicElements?.filter((o) => o.icon && !this.notAreaElements.includes(o.icon)), a = this._isOverhangingElementsPresent(t.dimension.w, i);
+        this.overHangingElementInformation.push({
+          coachId: t.id,
+          overhangingPlaces: s,
+          overhangingGraphicAreas: a
+        });
+      });
+    }
+    /**
+     * Returns the current selected place HTML element by currSelectedPlaceElementId.
+     * @returns HTMLElement or null
+     */
+    _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;
+    }
+    _isValidCoachIndex(e) {
+      return e >= 0 && e <= this.seatReservations[this.seatReservations.length - 1].coachItems.length;
+    }
+    /**
+     * 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" });
+    }
+    /**
+     * checks if any places or graphical elements (e.g. toilet area, etc.) are overhanging the coach borders
+     * @param coachItemWidth
+     * @param elements
+     */
+    _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) => {
+      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) => {
+      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) => {
+      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) => {
+      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) => {
+      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) => {
+      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, ne, { 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) => {
+      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 = {
+    selectedplaces: "selectedplaces",
+    selectedcoach: "selectedcoach"
+  }, h;
+})();
+export {
+  ze as SeatReservationBaseElement
+};