@sbb-esta/lyne-elements-experimental-dev 4.7.0-dev.1773388997 → 4.7.0-dev.1773396173

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

@@ -1,833 +1,811 @@
-import { __esDecorate as e, __runInitializers as t } from "tslib";
-import { SbbElement as n } from "@sbb-esta/lyne-elements/core/base-elements.js";
-import { forceType as r } from "@sbb-esta/lyne-elements/core/decorators.js";
-import { isServer as i } from "lit";
-import { isArrowKeyOrPageKeysPressed as a } from "@sbb-esta/lyne-elements/core/a11y.js";
-import { eventOptions as ee, property as o, state as s } from "lit/decorators.js";
-import { mapCoachInfosToCoachSelection as te, mapIconToSvg as c, mapPlaceAndCoachToSeatReservationPlaceSelection as ne, mapPlaceInfosToPlaceSelection as re } from "../common/mapper.js";
-//#region src/elements-experimental/seat-reservation/seat-reservation/seat-reservation-base-element.ts
-var l;
-(function(e) {
-	e.right = "right", e.left = "left";
-})(l ||= {});
-var ie = 3, ae = [
-	"sa-vo",
-	"sa-rs",
-	"sa-abteilkinderwagen",
-	"sa-wr",
-	"sa-fa",
-	"sa-bz",
-	"sa-rz"
-], u = (() => {
-	let u = n, d = [], f, p = [], m = [], h, g = [], _ = [], v, y = [], b = [], x, S = [], C = [], w, T = [], E = [], D, O = [], oe = [], k, A = [], j = [], M, N = [], P = [], F, I = [], L = [], R, z = [], B = [], V, H = [], U = [], W, G = [], K = [], q, J = [], Y = [], X, Z = [], Q = [], $;
-	return class extends u {
-		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
-			f = [o({
-				attribute: "seat-reservations",
-				type: Array
-			})], h = [o({
-				attribute: "travel-direction",
-				type: String
-			})], v = [r(), o({
-				attribute: "has-navigation",
-				type: Boolean
-			})], x = [r(), o({
-				attribute: "align-vertical",
-				type: Boolean,
-				reflect: !0,
-				useDefault: !0
-			})], w = [r(), o({
-				attribute: "base-grid-size",
-				type: Number
-			})], D = [r(), o({
-				attribute: "height",
-				type: Number
-			})], k = [r(), o({
-				attribute: "max-seat-reservations",
-				type: Number
-			})], M = [r(), o({
-				attribute: "max-bicycle-reservations",
-				type: Number
-			})], F = [r(), o({
-				attribute: "prevent-place-click",
-				type: Boolean
-			})], R = [r(), o({
-				attribute: "preselect-coach-index",
-				type: Number
-			})], V = [r(), o({
-				attribute: "show-title-info",
-				type: Boolean
-			})], W = [s()], q = [s()], X = [s()], $ = [ee({ passive: !0 })], e(this, null, f, {
-				kind: "accessor",
-				name: "seatReservations",
-				static: !1,
-				private: !1,
-				access: {
-					has: (e) => "seatReservations" in e,
-					get: (e) => e.seatReservations,
-					set: (e, t) => {
-						e.seatReservations = t;
-					}
-				},
-				metadata: t
-			}, p, m), e(this, null, h, {
-				kind: "accessor",
-				name: "travelDirection",
-				static: !1,
-				private: !1,
-				access: {
-					has: (e) => "travelDirection" in e,
-					get: (e) => e.travelDirection,
-					set: (e, t) => {
-						e.travelDirection = t;
-					}
-				},
-				metadata: t
-			}, g, _), e(this, null, v, {
-				kind: "accessor",
-				name: "hasNavigation",
-				static: !1,
-				private: !1,
-				access: {
-					has: (e) => "hasNavigation" in e,
-					get: (e) => e.hasNavigation,
-					set: (e, t) => {
-						e.hasNavigation = t;
-					}
-				},
-				metadata: t
-			}, y, b), e(this, null, x, {
-				kind: "accessor",
-				name: "alignVertical",
-				static: !1,
-				private: !1,
-				access: {
-					has: (e) => "alignVertical" in e,
-					get: (e) => e.alignVertical,
-					set: (e, t) => {
-						e.alignVertical = t;
-					}
-				},
-				metadata: t
-			}, S, C), e(this, null, w, {
-				kind: "accessor",
-				name: "baseGridSize",
-				static: !1,
-				private: !1,
-				access: {
-					has: (e) => "baseGridSize" in e,
-					get: (e) => e.baseGridSize,
-					set: (e, t) => {
-						e.baseGridSize = t;
-					}
-				},
-				metadata: t
-			}, T, E), e(this, null, D, {
-				kind: "accessor",
-				name: "height",
-				static: !1,
-				private: !1,
-				access: {
-					has: (e) => "height" in e,
-					get: (e) => e.height,
-					set: (e, t) => {
-						e.height = t;
-					}
-				},
-				metadata: t
-			}, O, oe), e(this, null, k, {
-				kind: "accessor",
-				name: "maxSeatReservations",
-				static: !1,
-				private: !1,
-				access: {
-					has: (e) => "maxSeatReservations" in e,
-					get: (e) => e.maxSeatReservations,
-					set: (e, t) => {
-						e.maxSeatReservations = t;
-					}
-				},
-				metadata: t
-			}, A, j), e(this, null, M, {
-				kind: "accessor",
-				name: "maxBicycleReservations",
-				static: !1,
-				private: !1,
-				access: {
-					has: (e) => "maxBicycleReservations" in e,
-					get: (e) => e.maxBicycleReservations,
-					set: (e, t) => {
-						e.maxBicycleReservations = t;
-					}
-				},
-				metadata: t
-			}, N, P), e(this, null, F, {
-				kind: "accessor",
-				name: "preventPlaceClick",
-				static: !1,
-				private: !1,
-				access: {
-					has: (e) => "preventPlaceClick" in e,
-					get: (e) => e.preventPlaceClick,
-					set: (e, t) => {
-						e.preventPlaceClick = t;
-					}
-				},
-				metadata: t
-			}, I, L), e(this, null, R, {
-				kind: "accessor",
-				name: "preselectCoachIndex",
-				static: !1,
-				private: !1,
-				access: {
-					has: (e) => "preselectCoachIndex" in e,
-					get: (e) => e.preselectCoachIndex,
-					set: (e, t) => {
-						e.preselectCoachIndex = t;
-					}
-				},
-				metadata: t
-			}, z, B), e(this, null, V, {
-				kind: "accessor",
-				name: "showTitleInfo",
-				static: !1,
-				private: !1,
-				access: {
-					has: (e) => "showTitleInfo" in e,
-					get: (e) => e.showTitleInfo,
-					set: (e, t) => {
-						e.showTitleInfo = t;
-					}
-				},
-				metadata: t
-			}, H, U), e(this, null, W, {
-				kind: "accessor",
-				name: "selectedCoachIndex",
-				static: !1,
-				private: !1,
-				access: {
-					has: (e) => "selectedCoachIndex" in e,
-					get: (e) => e.selectedCoachIndex,
-					set: (e, t) => {
-						e.selectedCoachIndex = t;
-					}
-				},
-				metadata: t
-			}, G, K), e(this, null, q, {
-				kind: "accessor",
-				name: "focusedCoachIndex",
-				static: !1,
-				private: !1,
-				access: {
-					has: (e) => "focusedCoachIndex" in e,
-					get: (e) => e.focusedCoachIndex,
-					set: (e, t) => {
-						e.focusedCoachIndex = t;
-					}
-				},
-				metadata: t
-			}, J, Y), e(this, null, X, {
-				kind: "accessor",
-				name: "hoveredCoachIndex",
-				static: !1,
-				private: !1,
-				access: {
-					has: (e) => "hoveredCoachIndex" in e,
-					get: (e) => e.hoveredCoachIndex,
-					set: (e, t) => {
-						e.hoveredCoachIndex = t;
-					}
-				},
-				metadata: t
-			}, Z, Q), e(this, null, $, {
-				kind: "method",
-				name: "coachAreaScrollend",
-				static: !1,
-				private: !1,
-				access: {
-					has: (e) => "coachAreaScrollend" in e,
-					get: (e) => e.coachAreaScrollend
-				},
-				metadata: t
-			}, null, d), t && Object.defineProperty(this, Symbol.metadata, {
-				enumerable: !0,
-				configurable: !0,
-				writable: !0,
-				value: t
-			});
-		}
-		static {
-			this.events = {
-				selectedplaces: "selectedplaces",
-				selectedcoach: "selectedcoach"
-			};
-		}
-		#e;
-		get seatReservations() {
-			return this.#e;
-		}
-		set seatReservations(e) {
-			this.#e = e;
-		}
-		#t;
-		get travelDirection() {
-			return this.#t;
-		}
-		set travelDirection(e) {
-			this.#t = e;
-		}
-		#n;
-		get hasNavigation() {
-			return this.#n;
-		}
-		set hasNavigation(e) {
-			this.#n = e;
-		}
-		#r;
-		get alignVertical() {
-			return this.#r;
-		}
-		set alignVertical(e) {
-			this.#r = e;
-		}
-		#i;
-		get baseGridSize() {
-			return this.#i;
-		}
-		set baseGridSize(e) {
-			this.#i = e;
-		}
-		#a;
-		get height() {
-			return this.#a;
-		}
-		set height(e) {
-			this.#a = e;
-		}
-		#o;
-		get maxSeatReservations() {
-			return this.#o;
-		}
-		set maxSeatReservations(e) {
-			this.#o = e;
-		}
-		#s;
-		get maxBicycleReservations() {
-			return this.#s;
-		}
-		set maxBicycleReservations(e) {
-			this.#s = e;
-		}
-		#c;
-		get preventPlaceClick() {
-			return this.#c;
-		}
-		set preventPlaceClick(e) {
-			this.#c = e;
-		}
-		#l;
-		get preselectCoachIndex() {
-			return this.#l;
-		}
-		set preselectCoachIndex(e) {
-			this.#l = e;
-		}
-		#u;
-		get showTitleInfo() {
-			return this.#u;
-		}
-		set showTitleInfo(e) {
-			this.#u = e;
-		}
-		#d;
-		get selectedCoachIndex() {
-			return this.#d;
-		}
-		set selectedCoachIndex(e) {
-			this.#d = e;
-		}
-		#f;
-		get focusedCoachIndex() {
-			return this.#f;
-		}
-		set focusedCoachIndex(e) {
-			this.#f = e;
-		}
-		#p;
-		get hoveredCoachIndex() {
-			return this.#p;
-		}
-		set hoveredCoachIndex(e) {
-			this.#p = e;
-		}
-		constructor() {
-			super(), this.#e = (t(this, d), t(this, p, null)), this.#t = (t(this, m), t(this, g, "NONE")), this.#n = (t(this, _), t(this, y, !0)), this.#r = (t(this, b), t(this, S, !1)), this.#i = (t(this, C), t(this, T, 16)), this.#a = (t(this, E), t(this, O, null)), this.#o = (t(this, oe), t(this, A, -1)), this.#s = (t(this, j), t(this, N, -1)), this.#c = (t(this, P), t(this, I, !1)), this.#l = (t(this, L), t(this, z, -1)), this.#u = (t(this, B), t(this, H, !1)), this.#d = (t(this, U), t(this, G, -1)), this.#f = (t(this, K), t(this, J, -1)), this.#p = (t(this, Y), t(this, Z, -1)), this.coachBorderPadding = (t(this, Q), 6), this.gapBetweenCoaches = 4, this.coachBorderOffset = this.coachBorderPadding / this.baseGridSize, this.gapBetweenCoachDecks = 48, this.coachNavButtonDim = 0, this.coachItemDetailsElements = [], this.currScrollDirection = l.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",
-				"DRIVER_AREA_NO_VERTICAL_WALL",
-				"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) => e && e?.map(function(e) {
-				return {
-					pId: e,
-					svgName: c[e]?.svgName ? c[e]?.svgName : ""
-				};
-			}).filter((e) => ae.indexOf(e.svgName) !== -1).filter((e, t, n) => n.map((e) => e.svgName).indexOf(e.svgName) === t).map((e) => e.pId).slice(0, ie) || [], this.addEventListener("blur", () => this._onLeaveSeatReservationComponent());
-		}
-		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) {
-				let e = this.seatReservations[this.currSelectedDeckIndex] || null;
-				e?.coachItems.length && (this.baseGridSize = this.height / e.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 ? 0 : this.currSelectedCoachIndex - 1 : e == "DIRECTION_RIGHT" && t < this.seatReservations[this.currSelectedDeckIndex]?.coachItems.length - 1 && (t = this.currSelectedCoachIndex == -1 ? 0 : this.currSelectedCoachIndex + 1), this.scrollToSelectedNavCoach(t);
-		}
-		_initPrepareSeatReservationData() {
-			this._determineBaseFontSize(), this.hasMultipleDecks && this._initEmptyCoachDeckOffsets(), this._prepareCoachItemDetailsData();
-		}
-		initNavigationSelectionByScrollEvent() {
-			this.coachScrollArea = this.shadowRoot?.querySelector("#sbb-sr__wrapper-scrollarea"), this.navigationScrollArea = this.shadowRoot?.querySelector("#sbb-sr__navigation-list-coaches");
-			let e = this.seatReservations ? this.seatReservations[this.currSelectedDeckIndex] : null;
-			if (e && e.coachItems.length > 0) {
-				let t = e.coachItems[0].dimension.h * this.baseGridSize + this.coachBorderPadding, n = (this.seatReservations.length - 1) * this.gapBetweenCoachDecks;
-				this.style?.setProperty("--sbb-seat-reservation-height", `${t * this.seatReservations.length + n}`), 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;
-				let e = this.navigationScrollArea.querySelector("ul > li");
-				if (e) {
-					let t = e?.getBoundingClientRect();
-					this.coachNavButtonDim = this.alignVertical ? t.height : t.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((e) => {
-					let n = t, r = this.getCalculatedDimension(e.dimension).w, i = this.overHangingElementInformation.find((t) => t.coachId === e.id), a = i?.overhangingPlaces || i?.overhangingGraphicAreas;
-					return t += r + (a ? 2 * this.gapBetweenCoaches : this.gapBetweenCoaches), {
-						start: n,
-						end: t,
-						width: r
-					};
-				}), this.maxCalcCoachesWidth = t - this.gapBetweenCoaches;
-			}
-		}
-		coachAreaScrollend() {
-			this._scrollTimeout && clearTimeout(this._scrollTimeout), this._scrollTimeout = setTimeout(() => this._handleCoachAreaScrollendEvent(), 150);
-		}
-		onFocusTableCoachAndPreselectPlace(e) {
-			!this.seatReservationWithoutNavigationHasFocus && !this.hasNavigation && (this.seatReservationWithoutNavigationHasFocus = !0, this.currSelectedCoachIndex = e === 0 ? this.getNextAvailableCoachIndex(-1) : this.getPrevAvailableCoachIndex(e), this.preselectPlaceInCoach());
-		}
-		onFocusNavDirectionButton() {
-			this.focusedCoachIndex = -1;
-		}
-		onKeyNavigationNavCoachButton(e, t) {
-			if (e.key === this.keyboardNavigationEvents.Tab) {
-				this._handleTabKeyNavigation(e, "navigation", t);
-				return;
-			}
-			a(e) && this.keyboardSeatmapEventHandling(e);
-		}
-		_handleTabKeyNavigation(e, t, n) {
-			let r = e.key, i = e.shiftKey;
-			r === this.keyboardNavigationEvents.Tab && (t == "navigation" ? (n == this.currSelectedCoachIndex ? !this.currSelectedPlace || !i || this.coachItemDetailsElements[n].isDriverArea || this.focusedCoachIndex == -1 ? this.focusedCoachIndex = n : i && this.currSelectedPlace && (this.focusedCoachIndex = -1, this.focusPlaceElement(this.currSelectedPlace)) : this.focusedCoachIndex = n, this._scrollToSelectedNavigationButton(n)) : t == "seatmap" && (e.preventDefault(), i ? this._navigateCoachNavigationByKeyboard("PREV_TAB") : this._navigateCoachNavigationByKeyboard("NEXT_TAB")));
-		}
-		keyboardSeatmapEventHandling(e) {
-			let t = e.key === this.keyboardNavigationEvents.Tab, n = e.shiftKey && t;
-			if (!this.hasNavigation && this.currSelectedCoachIndex === 0 && n || this.currSelectedCoachIndex === this.coachItemDetailsElements.length - 1 && t) return;
-			let r = e.key;
-			if (this.preventCoachScrollByPlaceClick = !1, !this.hasSeatReservationNativeFocus && (t || n) && (this.hasSeatReservationNativeFocus = !0), t) {
-				this._handleTabKeyNavigation(e, "seatmap");
-				return;
-			}
-			if (this.currSelectedCoachIndex !== -1 && a(e)) switch (e.preventDefault(), r) {
-				case this.keyboardNavigationEvents.ArrowLeft:
-					{
-						let e = this.alignVertical ? this.keyboardNavigationEvents.ArrowDown : r;
-						this._navigateToPlaceByKeyboard(e);
-					}
-					break;
-				case this.keyboardNavigationEvents.ArrowRight:
-					{
-						let e = this.alignVertical ? this.keyboardNavigationEvents.ArrowUp : r;
-						this._navigateToPlaceByKeyboard(e);
-					}
-					break;
-				case this.keyboardNavigationEvents.ArrowUp:
-					{
-						let e = this.alignVertical ? this.keyboardNavigationEvents.ArrowLeft : r;
-						this._navigateToPlaceByKeyboard(e);
-					}
-					break;
-				case this.keyboardNavigationEvents.ArrowDown:
-					{
-						let e = this.alignVertical ? this.keyboardNavigationEvents.ArrowRight : r;
-						this._navigateToPlaceByKeyboard(e);
-					}
-					break;
-				default: break;
-			}
-		}
-		preselectPlaceInCoach() {
-			if (this.isAutoScrolling) {
-				if (this._isRunningInitPreselectCoachIndex) {
-					this._isRunningInitPreselectCoachIndex = !1;
-					return;
-				}
-				if (this.coachItemDetailsElements[this.currSelectedCoachIndex] && this.coachItemDetailsElements[this.currSelectedCoachIndex].isDriverArea) {
-					this._setFocusToSelectedCoachGrid();
-					return;
-				}
-				if (this.isKeyboardNavigation && this.isAutoScrolling) {
-					let 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();
-				let 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);
-				let t = this._getPlaceHtmlElement();
-				if (t) {
-					t.setAttribute("keyfocus", "focus");
-					let n = setTimeout(() => {
-						let t = this.getPlaceElementId(this.currSelectedDeckIndex, this.currSelectedCoachIndex, e.number);
-						this._scrollPlaceIntoNearestViewport(t), clearTimeout(n);
-					}, 0);
-				}
-			}
-		}
-		unfocusPlaceElement() {
-			let e = this._getPlaceHtmlElement();
-			e && (e.setAttribute("keyfocus", "unfocus"), this._setCurrSelectedPlaceElementId(null), this.currSelectedPlace = null);
-		}
-		getCalculatedDimension(e, t, n, r) {
-			return t && !n && (e.h += this.coachBorderOffset * 2), r && (e.h += this.coachBorderOffset), {
-				w: this.baseGridSize * e.w,
-				h: this.baseGridSize * e.h
-			};
-		}
-		getCalculatedPosition(e, t, n, r) {
-			if (n && t) {
-				let i = r ? n.h : n.h + this.coachBorderOffset;
-				e.y === 0 ? e.y -= this.coachBorderOffset : e.y + t.h === i && (e.y += this.coachBorderOffset);
-			}
-			return {
-				x: this.baseGridSize * e.x,
-				y: this.baseGridSize * e.y,
-				z: e.z
-			};
-		}
-		isElementDirectlyOnBorder(e, t) {
-			return e.position.y === 0 || e.position.y + e.dimension.h === t.h;
-		}
-		getAvailableFreePlacesNumFromCoach(e) {
-			let t = {
-				seats: 0,
-				bicycles: 0
-			};
-			return e?.reduce((e, t) => (t.state === "FREE" && (t.type === "SEAT" ? e.seats++ : e.bicycles++), e), t) || t;
-		}
-		_handleCoachAreaScrollendEvent() {
-			let 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);
-		}
-		_scrollToSelectedNavigationButton(e) {
-			setTimeout(() => {
-				if (this.hasNavigation && this.navigationScrollArea) {
-					let t = this.scrollNavigationAreaDim / 2, n = e * this.coachNavButtonDim - t + this.coachNavButtonDim;
-					this.navigationScrollArea.scrollTo({
-						top: this.alignVertical ? n : 0,
-						left: this.alignVertical ? 0 : n,
-						behavior: "smooth"
-					});
-				}
-			}, 10);
-		}
-		_setScrollDirectionByCoachIndex() {
-			this.currScrollDirection = this.currSelectedCoachIndex > this.selectedCoachIndex ? l.right : l.left;
-		}
-		_getCoachScrollPositionX() {
-			let e = this.triggerCoachPositionsCollection[this.currSelectedCoachIndex];
-			return this.isKeyboardNavigation && this.currScrollDirection === l.left && e.width > this.scrollCoachesAreaWidth ? e.end - this.scrollCoachesAreaWidth : e.start;
-		}
-		_setFocusToSelectedCoachGrid() {
-			if (this.isCoachGridFocusable && this.hasSeatReservationNativeFocus) {
-				this.isCoachGridFocusable = !1;
-				let e = this.shadowRoot?.querySelector("#sbb-sr-coach-caption-" + this.currSelectedCoachIndex);
-				e && e.focus();
-			}
-		}
-		_isScrollableToSelectedCoach() {
-			let e = this.alignVertical ? this.coachScrollArea.scrollTop : this.coachScrollArea.scrollLeft, t = this.alignVertical ? this.coachScrollArea.getBoundingClientRect().height : this.coachScrollArea.getBoundingClientRect().width, n = this.maxCalcCoachesWidth - t, r = this.triggerCoachPositionsCollection[this.currSelectedCoachIndex], i = e === this.triggerCoachPositionsCollection[this.currSelectedCoachIndex].start;
-			return (e < n || e > r.start) && !i;
-		}
-		_getCoachIndexByScrollTriggerPosition() {
-			let e = (this.alignVertical ? this.coachScrollArea.scrollTop : this.coachScrollArea.scrollLeft) + this.scrollCoachesAreaWidth / 2;
-			return this.triggerCoachPositionsCollection.findIndex((t) => e >= t.start && e <= t.end);
-		}
-		_getFirstPlaceInSelectedCoach() {
-			let e = null, t = this.seatReservations[this.currSelectedDeckIndex].coachItems[this.currSelectedCoachIndex], n = "cell-" + this.currSelectedDeckIndex + "-" + this.currSelectedCoachIndex + "-0-0", r = this.shadowRoot?.querySelector("#" + n)?.querySelector("sbb-seat-reservation-place-control")?.getAttribute("text") || null;
-			return t && r && (e = t.places?.find((e) => e.number === r) || 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;
-		}
-		_getClosestPlaceByKeyDirection(e) {
-			let t = this.seatReservations[this.currSelectedDeckIndex].coachItems[this.currSelectedCoachIndex], n = null, r = t.places, i = null;
-			if (r) {
-				if (!this.currSelectedPlaceElementId) return this._getFirstPlaceInSelectedCoach();
-				if (this.currSelectedPlace) {
-					let a = { ...this.currSelectedPlace.position };
-					e && (i = this._getSwitchedCoachDeckIndexByKeyNavigation(e, t), i !== null && (r = this.seatReservations[i].coachItems[this.currSelectedCoachIndex].places || [], a.y = i < this.currSelectedDeckIndex ? t.dimension.h : -1));
-					for (let t of r) e ? t.number !== this.currSelectedPlace?.number && (e === this.keyboardNavigationEvents.ArrowRight && (t.position.y === a.y || t.position.y === a.y - 1) && t.position.x > a.x && (!n || t.position.x < n.position.x) || e === this.keyboardNavigationEvents.ArrowDown && (t.position.x === a.x || t.position.x === a.x + 1) && t.position.y > a.y && (!n || t.position.y < n.position.y) || e === this.keyboardNavigationEvents.ArrowLeft && (t.position.y === a.y || t.position.y === a.y + 1) && t.position.x < a.x && (!n || t.position.x > n.position.x) || e === this.keyboardNavigationEvents.ArrowUp && (t.position.x === a.x || t.position.x === a.x - 1) && t.position.y < a.y && (!n || t.position.y > n.position.y)) && (n = t) : (this.currScrollDirection === l.right && t.position.y === a.y && (!n || t.position.x < n.position.x) || this.currScrollDirection === l.left && t.position.y === a.y && (!n || t.position.x > n.position.x)) && (n = t);
-					i !== null && n && (this.currSelectedDeckIndex = i);
-				}
-			}
-			return n;
-		}
-		_navigateCoachNavigationByKeyboard(e) {
-			let t = this.focusedCoachIndex === -1 ? this.currSelectedCoachIndex === -1 ? 0 : this.currSelectedCoachIndex : this.focusedCoachIndex, n = e === "NEXT_TAB" ? this.getNextAvailableCoachIndex(t) : this.getPrevAvailableCoachIndex(t);
-			if (this.hasNavigation) {
-				let r = this._getPlaceHtmlElement(), i = r ? r.getAttribute("keyfocus") === "focus" : !1;
-				if (e === "PREV_TAB" && this.selectedCoachIndex === t) if (i || this.currSelectedPlace !== null) {
-					this.focusedCoachIndex = t, this.unfocusPlaceElement();
-					return;
-				} else t === 0 ? this._refocusCurrentFocusedNavCoach(t) : this.focusedCoachIndex = n;
-				else n === this.currSelectedCoachIndex ? e === "NEXT_TAB" && n === this.coachItemDetailsElements.length - 1 ? this._refocusCurrentFocusedNavCoach(t) : (this.focusedCoachIndex = -1, this.selectedCoachIndex = n, i ? this.focusPlaceElement(this.currSelectedPlace) : (this.isCoachGridFocusable = !0, this._setFocusToSelectedCoachGrid())) : this.focusedCoachIndex = n;
-				this._scrollToSelectedNavigationButton(n);
-			} else this.scrollToSelectedNavCoach(n);
-		}
-		_refocusCurrentFocusedNavCoach(e) {
-			this.focusedCoachIndex = -1, setTimeout(() => this.focusedCoachIndex = e, 0);
-		}
-		_navigateToPlaceByKeyboard(e) {
-			if (this.isKeyboardNavigation = !0, this.focusedCoachIndex !== -1 && (this.focusedCoachIndex = -1), !this.preventPlaceClick) {
-				let 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)) {
-					let t = e === this.keyboardNavigationEvents.ArrowRight ? this.getNextAvailableCoachIndex() : this.getPrevAvailableCoachIndex();
-					this.scrollToSelectedNavCoach(t);
-				}
-			}
-		}
-		getNextAvailableCoachIndex(e) {
-			let t = e ?? this.currSelectedCoachIndex;
-			return t < this.seatReservations[this.currSelectedDeckIndex].coachItems.length - 1 ? t + 1 : t;
-		}
-		getPrevAvailableCoachIndex(e) {
-			let t = e ?? this.currSelectedCoachIndex;
-			return t > 0 ? t - 1 : t;
-		}
-		updateSelectedSeatReservationPlaces(e) {
-			let t = e.placeType === "SEAT" ? "seats" : "bicycles", n = e.placeType === "SEAT" ? this.maxSeatReservations : this.maxBicycleReservations, r = this.selectedSeatReservationPlaces[t];
-			this.selectedSeatReservationPlaces[t] = this._updateSelectedSeatReservationPlaces(r, n, e), this.dispatchEvent(new CustomEvent("selectedplaces", {
-				bubbles: !0,
-				composed: !0,
-				detail: this.selectedSeatReservationPlaces
-			}));
-		}
-		_updateSelectedSeatReservationPlaces(e, t, n) {
-			if (n.state === "SELECTED") {
-				let t = this._getDeckIndexByPlaceId(n.id), r = this._getSeatReservationPlaceSelection(n, t);
-				r && e.push(r);
-			} else e = e.filter((e) => e.id !== n.id);
-			if (t > -1 && e.length > t) {
-				let r = t > 0 ? n : void 0;
-				e = this._resetAllPlaceSelections(e, r);
-			}
-			return e;
-		}
-		updateCurrentSelectedPlaceInCoach(e) {
-			let t = this._getDeckIndexByPlaceId(e.id), n = e.coachIndex;
-			if (t === null) return;
-			let r = this.seatReservations[t].coachItems[n].places?.find((t) => t.number == e.number);
-			if (!r) return;
-			this.currSelectedDeckIndex = t, this.currSelectedCoachIndex = n, this.currSelectedPlace = r, this.currSelectedCoachIndex !== this.selectedCoachIndex && this.updateCurrentSelectedCoach(), this._setCurrSelectedPlaceElementId(r);
-			let i = setTimeout(() => {
-				this._scrollPlaceIntoNearestViewport(e.id), clearTimeout(i);
-			}, 0);
-		}
-		updateCurrentSelectedCoach() {
-			if (this.currSelectedCoachIndex == this.selectedCoachIndex) return;
-			this.focusedCoachIndex != -1 && (this.focusedCoachIndex = this.currSelectedCoachIndex), this.selectedCoachIndex = this.currSelectedCoachIndex;
-			let e = this._getSeatReservationSelectedCoach(this.selectedCoachIndex);
-			e && this.dispatchEvent(new CustomEvent("selectedcoach", {
-				bubbles: !0,
-				composed: !0,
-				detail: e
-			}));
-		}
-		getPlaceElementId(e, t, n) {
-			return "seat-reservation__place-button-" + e + "-" + t + "-" + n;
-		}
-		_initEmptyCoachDeckOffsets() {
-			let e = Array(this.seatReservations.length - 1).fill(0);
-			this.seatReservations[this.seatReservations.length - 1].coachItems.forEach((t) => {
-				for (let n = 0; n < this.seatReservations.length - 1; n++) {
-					let r = this.seatReservations[n].coachItems[e[n]];
-					if (t.id != r?.id) {
-						let r = {
-							...t,
-							places: void 0,
-							propertyIds: void 0,
-							graphicElements: void 0,
-							serviceElements: void 0,
-							travelClass: []
-						};
-						this.seatReservations[n].coachItems.splice(e[n], 0, r);
-					}
-					e[n]++;
-				}
-			});
-		}
-		_initSeatReservationPlaceSelection() {
-			this.selectedSeatReservationPlaces.seats = [], this.selectedSeatReservationPlaces.bicycles = [], this.seatReservations?.forEach((e, t) => e.coachItems.map((n, r) => {
-				n.places?.filter((e) => e.state === "SELECTED")?.forEach((n) => {
-					let i = re(n, this.getPlaceElementId(t, r, n.number), e.deckCoachIndex, r), a = this._getSeatReservationPlaceSelection(i, t);
-					a && (a.placeType === "SEAT" ? this.selectedSeatReservationPlaces.seats.push(a) : this.selectedSeatReservationPlaces.bicycles.push(a));
-				});
-			}));
-		}
-		_resetAllPlaceSelections(e, t) {
-			for (let n of e) if (!t || t.id !== n.id) {
-				let e = this.shadowRoot?.getElementById(n.id);
-				e && e.setAttribute("state", "FREE");
-			}
-			return e = t ? e.filter((e) => e.id === t.id) : [], e;
-		}
-		_getSeatReservationPlaceSelection(e, t) {
-			if (t === null) return null;
-			let n = this.seatReservations[t].coachItems[e.coachIndex], r = n.places?.find((t) => t.number === e.number);
-			return r ? ne(r, n, e.id, e.deckIndex, e.coachIndex) : null;
-		}
-		_getSeatReservationSelectedCoach(e) {
-			if (!this.seatReservations[this.currSelectedDeckIndex].coachItems[e]) return null;
-			let t = this.seatReservations[this.currSelectedDeckIndex].coachItems[e];
-			return te(e, t, this.getAvailableFreePlacesNumFromCoach(t.places));
-		}
-		_setCurrSelectedPlaceElementId(e) {
-			this.currSelectedPlaceElementId = e ? this.getPlaceElementId(this.currSelectedDeckIndex, this.currSelectedCoachIndex, e.number) : null;
-		}
-		_determineBaseFontSize() {
-			if (!i) {
-				let e = 1 / parseInt(window.getComputedStyle(document.body).fontSize, 10);
-				this.style?.setProperty("--sbb-seat-reservation-one-px-rem", `${e + "rem"}`);
-			}
-		}
-		_prepareCoachItemDetailsData() {
-			if (this.seatReservations) {
-				let e = this.seatReservations[this.seatReservations.length - 1].coachItems;
-				this.coachItemDetailsElements = [], e.forEach((e, t) => {
-					let n = [], r = [], i = [];
-					this.seatReservations.map((e) => e.coachItems[t]).forEach((e) => {
-						n.push(...e.travelClass), r.push(...e.propertyIds ? e.propertyIds : []), i.push(...e.places ? e.places : []);
-					}), this.coachItemDetailsElements.push({
-						id: e.id,
-						travelClass: this._prepareTravelClassNavigation(n),
-						propertyIds: this._prepareServiceIconsNavigation(r),
-						isDriverArea: e.places ? e.places.length === 0 : !0,
-						driverAreaSide: this._prepareDriverAreaSideNavigation(e),
-						freePlaces: this.getAvailableFreePlacesNumFromCoach(i),
-						driverAreaElements: this._setDriverAreasElements(e)
-					});
-				});
-			}
-		}
-		_prepareTravelClassNavigation(e) {
-			return e.indexOf("FIRST") === -1 ? e.indexOf("SECOND") === -1 ? "ANY_CLASS" : "SECOND" : "FIRST";
-		}
-		_prepareDriverAreaSideNavigation(e) {
-			let t = e.graphicElements?.filter((e) => e.icon === "DRIVER_AREA");
-			if (t && t.length > 0) {
-				let e = t.find((e) => e.position.x === 0) || !1, n = t.find((e) => e.position.x > 0) || !1;
-				return {
-					left: !!e,
-					right: !!n
-				};
-			}
-		}
-		_prepareCoachWidthAndGapCalculations() {
-			this.seatReservations && (this.seatReservations[this.seatReservations.length - 1]?.coachItems)?.forEach((e) => {
-				let t = this._isOverhangingElementsPresent(e.dimension.w, e.places), n = e.graphicElements?.filter((e) => e.icon && !this.notAreaElements.includes(e.icon)), r = this._isOverhangingElementsPresent(e.dimension.w, n);
-				this.overHangingElementInformation.push({
-					coachId: e.id,
-					overhangingPlaces: t,
-					overhangingGraphicAreas: r
-				});
-			});
-		}
-		_getPlaceHtmlElement() {
-			return this.currSelectedPlaceElementId && this.shadowRoot?.getElementById(this.currSelectedPlaceElementId) || null;
-		}
-		_getDeckIndexByPlaceId(e) {
-			let 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;
-		}
-		_getExistingCoachDeckIndex() {
-			if (this.seatReservations[this.currSelectedDeckIndex].coachItems[this.currSelectedCoachIndex].places !== void 0) return this.currSelectedDeckIndex;
-			let e = this.seatReservations.findIndex((e) => e.coachItems[this.currSelectedCoachIndex].places !== void 0);
-			return this.currSelectedDeckIndex >= e ? this.currSelectedDeckIndex : e;
-		}
-		_scrollPlaceIntoNearestViewport(e) {
-			this.shadowRoot?.getElementById(e)?.scrollIntoView({
-				behavior: "smooth",
-				block: "nearest",
-				inline: "nearest"
-			});
-		}
-		_isOverhangingElementsPresent(e, t) {
-			return t?.some((t) => t.position.x === 0 || t.position.x + t.dimension.w >= e) ?? !1;
-		}
-		_setDriverAreasElements(e) {
-			return e ? {
-				driverArea: e.graphicElements?.find((e) => e.icon === "DRIVER_AREA"),
-				driverAreaNoVerticalWall: e.type === "LOCOMOTIVE_COACH" ? e.graphicElements?.find((e) => e.icon === "DRIVER_AREA_NO_VERTICAL_WALL") : void 0
-			} : {
-				driverArea: void 0,
-				driverAreaNoVerticalWall: void 0
-			};
-		}
-		_onLeaveSeatReservationComponent() {
-			this.hasNavigation && (this.focusedCoachIndex = -1), this.unfocusPlaceElement();
-		}
-	};
+var ye = (h) => {
+  throw TypeError(h);
+};
+var be = (h, d, f) => d.has(h) || ye("Cannot " + f);
+var u = (h, d, f) => (be(h, d, "read from private field"), f ? f.call(h) : d.get(h)), g = (h, d, f) => d.has(h) ? ye("Cannot add the same private member more than once") : d instanceof WeakSet ? d.add(h) : d.set(h, f), r = (h, d, f, B) => (be(h, d, "write to private field"), B ? B.call(h, f) : d.set(h, f), f);
+import { __esDecorate as v, __runInitializers as n } from "tslib";
+import { isArrowKeyOrPageKeysPressed as Pe } from "@sbb-esta/lyne-elements/core/a11y.js";
+import { SbbElement as Ee } from "@sbb-esta/lyne-elements/core/base-elements.js";
+import { forceType as S } from "@sbb-esta/lyne-elements/core/decorators.js";
+import { isServer as Re } from "lit";
+import { property as C, state as z, eventOptions as Ne } from "lit/decorators.js";
+import { mapIconToSvg as Ae, mapPlaceInfosToPlaceSelection as ke, mapPlaceAndCoachToSeatReservationPlaceSelection as De, mapCoachInfosToCoachSelection as Te } from "../common/mapper.js";
+var I;
+(function(h) {
+  h.right = "right", h.left = "left";
+})(I || (I = {}));
+const we = 3, Be = [
+  "sa-vo",
+  "sa-rs",
+  "sa-abteilkinderwagen",
+  "sa-wr",
+  "sa-fa",
+  "sa-bz",
+  "sa-rz"
+];
+let Ke = (() => {
+  var x, p, _, m, y, b, P, A, E, R, N, k, D, T, l;
+  let h = Ee, d = [], f, B = [], O = [], V, F = [], G = [], L, W = [], H = [], M, K = [], X = [], U, q = [], $ = [], j, Y = [], J = [], Q, Z = [], ee = [], te, se = [], ie = [], ae, ce = [], oe = [], re, ne = [], le = [], he, de = [], ue = [], ge, ve = [], fe = [], Ce, Se = [], Ie = [], xe, pe = [], _e = [], me;
+  return l = class extends h {
+    constructor() {
+      super();
+      g(this, x);
+      g(this, p);
+      g(this, _);
+      g(this, m);
+      g(this, y);
+      g(this, b);
+      g(this, P);
+      g(this, A);
+      g(this, E);
+      g(this, R);
+      g(this, N);
+      g(this, k);
+      g(this, D);
+      g(this, T);
+      r(this, x, (n(this, d), n(this, B, null))), r(this, p, (n(this, O), n(this, F, "NONE"))), r(this, _, (n(this, G), n(this, W, !0))), r(this, m, (n(this, H), n(this, K, !1))), r(this, y, (n(this, X), n(this, q, 16))), r(this, b, (n(this, $), n(this, Y, null))), r(this, P, (n(this, J), n(this, Z, -1))), r(this, A, (n(this, ee), n(this, se, -1))), r(this, E, (n(this, ie), n(this, ce, !1))), r(this, R, (n(this, oe), n(this, ne, -1))), r(this, N, (n(this, le), n(this, de, !1))), r(this, k, (n(this, ue), n(this, ve, -1))), r(this, D, (n(this, fe), n(this, Se, -1))), r(this, T, (n(this, Ie), n(this, pe, -1))), this.coachBorderPadding = (n(this, _e), 6), this.gapBetweenCoaches = 4, this.coachBorderOffset = this.coachBorderPadding / this.baseGridSize, this.gapBetweenCoachDecks = 48, this.coachNavButtonDim = 0, this.coachItemDetailsElements = [], this.currScrollDirection = I.right, this.maxCalcCoachesWidth = 0, this.scrollCoachesAreaWidth = 0, this.scrollNavigationAreaDim = 0, this.triggerCoachPositionsCollection = [], this.navigationScrollArea = null, this.coachScrollArea = null, this.currSelectedPlace = null, this.currSelectedPlaceElementId = null, this.currSelectedCoachIndex = -1, this.currSelectedDeckIndex = 0, this.preventCoachScrollByPlaceClick = !1, this.selectedSeatReservationPlaces = {
+        seats: [],
+        bicycles: []
+      }, this.seatReservationWithoutNavigationHasFocus = !1, this.isCoachGridFocusable = !1, this.isAutoScrolling = !1, this.isKeyboardNavigation = !1, this.hasMultipleDecks = !1, this.hasSeatReservationNativeFocus = !1, this.keyboardNavigationEvents = {
+        ArrowLeft: "ArrowLeft",
+        ArrowRight: "ArrowRight",
+        ArrowUp: "ArrowUp",
+        ArrowDown: "ArrowDown",
+        Tab: "Tab",
+        Enter: "Enter"
+      }, this.notAreaElements = [
+        "DRIVER_AREA",
+        "DRIVER_AREA_NO_VERTICAL_WALL",
+        "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: Ae[s]?.svgName ? Ae[s]?.svgName : ""
+          };
+        }).filter((s) => Be.indexOf(s.svgName) !== -1).filter((s, i, a) => a.map((o) => o.svgName).indexOf(s.svgName) === i).map((s) => s.pId).slice(0, we);
+        return t || [];
+      }, this.addEventListener("blur", () => this._onLeaveSeatReservationComponent());
+    }
+    /** The seat reservations array contains all coaches and places */
+    get seatReservations() {
+      return u(this, x);
+    }
+    set seatReservations(e) {
+      r(this, x, e);
+    }
+    /** Displays an arrow showing what direction does train drive*/
+    get travelDirection() {
+      return u(this, p);
+    }
+    set travelDirection(e) {
+      r(this, p, e);
+    }
+    /** The seat reservation navigation can be toggled by this property */
+    get hasNavigation() {
+      return u(this, _);
+    }
+    set hasNavigation(e) {
+      r(this, _, e);
+    }
+    /** The seat reservation area is aligned vertically */
+    get alignVertical() {
+      return u(this, m);
+    }
+    set alignVertical(e) {
+      r(this, m, e);
+    }
+    /** The seat reservation area's base grid size */
+    get baseGridSize() {
+      return u(this, y);
+    }
+    set baseGridSize(e) {
+      r(this, y, e);
+    }
+    /** The seat reservation area's width */
+    get height() {
+      return u(this, b);
+    }
+    set height(e) {
+      r(this, b, e);
+    }
+    /** Maximal number of possible clickable seats */
+    get maxSeatReservations() {
+      return u(this, P);
+    }
+    set maxSeatReservations(e) {
+      r(this, P, e);
+    }
+    /** Maximal number of possible clickable bicycle places */
+    get maxBicycleReservations() {
+      return u(this, A);
+    }
+    set maxBicycleReservations(e) {
+      r(this, A, e);
+    }
+    /** Any click functionality is prevented */
+    get preventPlaceClick() {
+      return u(this, E);
+    }
+    set preventPlaceClick(e) {
+      r(this, E, e);
+    }
+    get preselectCoachIndex() {
+      return u(this, R);
+    }
+    set preselectCoachIndex(e) {
+      r(this, R, e);
+    }
+    /** The seat reservation title information at place-controls, navigation-coaches and navigation-services can be toggled by this property */
+    get showTitleInfo() {
+      return u(this, N);
+    }
+    set showTitleInfo(e) {
+      r(this, N, e);
+    }
+    get selectedCoachIndex() {
+      return u(this, k);
+    }
+    set selectedCoachIndex(e) {
+      r(this, k, e);
+    }
+    get focusedCoachIndex() {
+      return u(this, D);
+    }
+    set focusedCoachIndex(e) {
+      r(this, D, e);
+    }
+    get hoveredCoachIndex() {
+      return u(this, T);
+    }
+    set hoveredCoachIndex(e) {
+      r(this, T, e);
+    }
+    willUpdate(e) {
+      if (super.willUpdate(e), e.has("seatReservations") && (this.hasMultipleDecks = this.seatReservations?.length > 1, this._initPrepareSeatReservationData(), this._prepareCoachWidthAndGapCalculations(), this._initSeatReservationPlaceSelection(), this.initNavigationSelectionByScrollEvent()), e.has("baseGridSize") && (this.coachBorderOffset = this.coachBorderPadding / this.baseGridSize, this.style?.setProperty("--sbb-seat-reservation-grid-size", `${this.baseGridSize}px`), this.initNavigationSelectionByScrollEvent()), e.has("height") && this.height) {
+        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._prepareCoachItemDetailsData();
+    }
+    /** 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((w) => w.coachId === s.id), c = o?.overhangingPlaces || o?.overhangingGraphicAreas;
+          return t += a + (c ? 2 * this.gapBetweenCoaches : this.gapBetweenCoaches), {
+            start: i,
+            end: t,
+            width: a
+          };
+        }), this.maxCalcCoachesWidth = t - this.gapBetweenCoaches;
+      }
+    }
+    /**
+     * 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;
+      }
+      Pe(e) && this.keyboardSeatmapEventHandling(e);
+    }
+    /** General TAB Key Event handling for tab navigation inside the coach navigation area and the seatmap area */
+    _handleTabKeyNavigation(e, t, s) {
+      const i = e.key, a = e.shiftKey;
+      i === this.keyboardNavigationEvents.Tab && (t == "navigation" ? (s == this.currSelectedCoachIndex ? !this.currSelectedPlace || !a || this.coachItemDetailsElements[s].isDriverArea || this.focusedCoachIndex == -1 ? this.focusedCoachIndex = s : a && this.currSelectedPlace && (this.focusedCoachIndex = -1, this.focusPlaceElement(this.currSelectedPlace)) : this.focusedCoachIndex = s, this._scrollToSelectedNavigationButton(s)) : t == "seatmap" && (e.preventDefault(), a ? this._navigateCoachNavigationByKeyboard("PREV_TAB") : this._navigateCoachNavigationByKeyboard("NEXT_TAB")));
+    }
+    /**
+     * Initialisation of Keyboard Seatmap event handling to navigation between each places inside a selected coach by using [arrow] keys.
+     * With the [TAB] key the user navigation goes to the next coach navigation element and the currently selected place is automatically reset.
+     */
+    keyboardSeatmapEventHandling(e) {
+      const t = e.key === this.keyboardNavigationEvents.Tab, s = e.shiftKey && t;
+      if (!this.hasNavigation && this.currSelectedCoachIndex === 0 && s || this.currSelectedCoachIndex === this.coachItemDetailsElements.length - 1 && t)
+        return;
+      const i = e.key;
+      if (this.preventCoachScrollByPlaceClick = !1, !this.hasSeatReservationNativeFocus && (t || s) && (this.hasSeatReservationNativeFocus = !0), t) {
+        this._handleTabKeyNavigation(e, "seatmap");
+        return;
+      }
+      if (this.currSelectedCoachIndex !== -1 && Pe(e))
+        switch (e.preventDefault(), i) {
+          case this.keyboardNavigationEvents.ArrowLeft:
+            {
+              const a = this.alignVertical ? this.keyboardNavigationEvents.ArrowDown : i;
+              this._navigateToPlaceByKeyboard(a);
+            }
+            break;
+          case this.keyboardNavigationEvents.ArrowRight:
+            {
+              const a = this.alignVertical ? this.keyboardNavigationEvents.ArrowUp : i;
+              this._navigateToPlaceByKeyboard(a);
+            }
+            break;
+          case this.keyboardNavigationEvents.ArrowUp:
+            {
+              const a = this.alignVertical ? this.keyboardNavigationEvents.ArrowLeft : i;
+              this._navigateToPlaceByKeyboard(a);
+            }
+            break;
+          case this.keyboardNavigationEvents.ArrowDown:
+            {
+              const a = this.alignVertical ? this.keyboardNavigationEvents.ArrowRight : i;
+              this._navigateToPlaceByKeyboard(a);
+            }
+            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.coachItemDetailsElements[this.currSelectedCoachIndex] && this.coachItemDetailsElements[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._refocusCurrentFocusedNavCoach(t) : this.focusedCoachIndex = s;
+        else s !== this.currSelectedCoachIndex ? this.focusedCoachIndex = s : e === "NEXT_TAB" && s === this.coachItemDetailsElements.length - 1 ? this._refocusCurrentFocusedNavCoach(t) : (this.focusedCoachIndex = -1, this.selectedCoachIndex = s, a ? this.focusPlaceElement(this.currSelectedPlace) : (this.isCoachGridFocusable = !0, this._setFocusToSelectedCoachGrid()));
+        this._scrollToSelectedNavigationButton(s);
+      } else
+        this.scrollToSelectedNavCoach(s);
+    }
+    // Refocused the current focused (visual) nav coach to get the native focus back to the navigation
+    _refocusCurrentFocusedNavCoach(e) {
+      this.focusedCoachIndex = -1, setTimeout(() => this.focusedCoachIndex = e, 0);
+    }
+    _navigateToPlaceByKeyboard(e) {
+      if (this.isKeyboardNavigation = !0, this.focusedCoachIndex !== -1 && (this.focusedCoachIndex = -1), !this.preventPlaceClick) {
+        const t = this._getClosestPlaceByKeyDirection(e);
+        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 = ke(a, o, e.deckCoachIndex, i), w = this._getSeatReservationPlaceSelection(c, t);
+          w && (w.placeType === "SEAT" ? this.selectedSeatReservationPlaces.seats.push(w) : this.selectedSeatReservationPlaces.bicycles.push(w));
+        });
+      }));
+    }
+    /**
+     * 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 ? De(i, s, e.id, e.deckIndex, e.coachIndex) : null;
+    }
+    _getSeatReservationSelectedCoach(e) {
+      if (!this.seatReservations[this.currSelectedDeckIndex].coachItems[e])
+        return null;
+      const t = this.seatReservations[this.currSelectedDeckIndex].coachItems[e], s = this.getAvailableFreePlacesNumFromCoach(t.places);
+      return Te(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 (!Re) {
+        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
+     * */
+    _prepareCoachItemDetailsData() {
+      if (this.seatReservations) {
+        const e = this.seatReservations[this.seatReservations.length - 1].coachItems;
+        this.coachItemDetailsElements = [], e.forEach((t, s) => {
+          const i = [], a = [], o = [];
+          this.seatReservations.map((c) => c.coachItems[s]).forEach((c) => {
+            i.push(...c.travelClass), a.push(...c.propertyIds ? c.propertyIds : []), o.push(...c.places ? c.places : []);
+          }), this.coachItemDetailsElements.push({
+            id: t.id,
+            travelClass: this._prepareTravelClassNavigation(i),
+            propertyIds: this._prepareServiceIconsNavigation(a),
+            isDriverArea: t.places ? t.places.length === 0 : !0,
+            driverAreaSide: this._prepareDriverAreaSideNavigation(t),
+            freePlaces: this.getAvailableFreePlacesNumFromCoach(o),
+            driverAreaElements: this._setDriverAreasElements(t)
+          });
+        });
+      }
+    }
+    _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;
+    }
+    /**
+     * collect information about the driverAreas for one coach
+     * @param coachItem
+     * @private
+     */
+    _setDriverAreasElements(e) {
+      if (e) {
+        const t = e.graphicElements?.find((i) => i.icon === "DRIVER_AREA"), s = e.type === "LOCOMOTIVE_COACH" ? e.graphicElements?.find((i) => i.icon === "DRIVER_AREA_NO_VERTICAL_WALL") : void 0;
+        return {
+          driverArea: t,
+          driverAreaNoVerticalWall: s
+        };
+      }
+      return {
+        driverArea: void 0,
+        driverAreaNoVerticalWall: void 0
+      };
+    }
+    /**
+     * Is called when the SeatReservation loses focus, what happens when the user tabs out or clicks somewhere else.
+     * Then we reset the focused elements.
+     */
+    _onLeaveSeatReservationComponent() {
+      this.hasNavigation && (this.focusedCoachIndex = -1), this.unfocusPlaceElement();
+    }
+  }, x = new WeakMap(), p = new WeakMap(), _ = new WeakMap(), m = new WeakMap(), y = new WeakMap(), b = new WeakMap(), P = new WeakMap(), A = new WeakMap(), E = new WeakMap(), R = new WeakMap(), N = new WeakMap(), k = new WeakMap(), D = new WeakMap(), T = new WeakMap(), (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(h[Symbol.metadata] ?? null) : void 0;
+    f = [C({ attribute: "seat-reservations", type: Array })], V = [C({ attribute: "travel-direction", type: String })], L = [S(), C({ attribute: "has-navigation", type: Boolean })], M = [S(), C({ attribute: "align-vertical", type: Boolean, reflect: !0, useDefault: !0 })], U = [S(), C({ attribute: "base-grid-size", type: Number })], j = [S(), C({ attribute: "height", type: Number })], Q = [S(), C({ attribute: "max-seat-reservations", type: Number })], te = [S(), C({ attribute: "max-bicycle-reservations", type: Number })], ae = [S(), C({ attribute: "prevent-place-click", type: Boolean })], re = [S(), C({ attribute: "preselect-coach-index", type: Number })], he = [S(), C({ attribute: "show-title-info", type: Boolean })], ge = [z()], Ce = [z()], xe = [z()], me = [Ne({ passive: !0 })], v(l, null, f, { kind: "accessor", name: "seatReservations", static: !1, private: !1, access: { has: (t) => "seatReservations" in t, get: (t) => t.seatReservations, set: (t, s) => {
+      t.seatReservations = s;
+    } }, metadata: e }, B, O), v(l, null, V, { kind: "accessor", name: "travelDirection", static: !1, private: !1, access: { has: (t) => "travelDirection" in t, get: (t) => t.travelDirection, set: (t, s) => {
+      t.travelDirection = s;
+    } }, metadata: e }, F, G), v(l, null, L, { kind: "accessor", name: "hasNavigation", static: !1, private: !1, access: { has: (t) => "hasNavigation" in t, get: (t) => t.hasNavigation, set: (t, s) => {
+      t.hasNavigation = s;
+    } }, metadata: e }, W, H), v(l, null, M, { kind: "accessor", name: "alignVertical", static: !1, private: !1, access: { has: (t) => "alignVertical" in t, get: (t) => t.alignVertical, set: (t, s) => {
+      t.alignVertical = s;
+    } }, metadata: e }, K, X), v(l, null, U, { kind: "accessor", name: "baseGridSize", static: !1, private: !1, access: { has: (t) => "baseGridSize" in t, get: (t) => t.baseGridSize, set: (t, s) => {
+      t.baseGridSize = s;
+    } }, metadata: e }, q, $), v(l, null, j, { kind: "accessor", name: "height", static: !1, private: !1, access: { has: (t) => "height" in t, get: (t) => t.height, set: (t, s) => {
+      t.height = s;
+    } }, metadata: e }, Y, J), v(l, null, Q, { kind: "accessor", name: "maxSeatReservations", static: !1, private: !1, access: { has: (t) => "maxSeatReservations" in t, get: (t) => t.maxSeatReservations, set: (t, s) => {
+      t.maxSeatReservations = s;
+    } }, metadata: e }, Z, ee), v(l, null, te, { kind: "accessor", name: "maxBicycleReservations", static: !1, private: !1, access: { has: (t) => "maxBicycleReservations" in t, get: (t) => t.maxBicycleReservations, set: (t, s) => {
+      t.maxBicycleReservations = s;
+    } }, metadata: e }, se, ie), v(l, null, ae, { kind: "accessor", name: "preventPlaceClick", static: !1, private: !1, access: { has: (t) => "preventPlaceClick" in t, get: (t) => t.preventPlaceClick, set: (t, s) => {
+      t.preventPlaceClick = s;
+    } }, metadata: e }, ce, oe), v(l, null, re, { kind: "accessor", name: "preselectCoachIndex", static: !1, private: !1, access: { has: (t) => "preselectCoachIndex" in t, get: (t) => t.preselectCoachIndex, set: (t, s) => {
+      t.preselectCoachIndex = s;
+    } }, metadata: e }, ne, le), v(l, null, he, { kind: "accessor", name: "showTitleInfo", static: !1, private: !1, access: { has: (t) => "showTitleInfo" in t, get: (t) => t.showTitleInfo, set: (t, s) => {
+      t.showTitleInfo = s;
+    } }, metadata: e }, de, ue), v(l, null, ge, { kind: "accessor", name: "selectedCoachIndex", static: !1, private: !1, access: { has: (t) => "selectedCoachIndex" in t, get: (t) => t.selectedCoachIndex, set: (t, s) => {
+      t.selectedCoachIndex = s;
+    } }, metadata: e }, ve, fe), v(l, null, Ce, { kind: "accessor", name: "focusedCoachIndex", static: !1, private: !1, access: { has: (t) => "focusedCoachIndex" in t, get: (t) => t.focusedCoachIndex, set: (t, s) => {
+      t.focusedCoachIndex = s;
+    } }, metadata: e }, Se, Ie), v(l, null, xe, { kind: "accessor", name: "hoveredCoachIndex", static: !1, private: !1, access: { has: (t) => "hoveredCoachIndex" in t, get: (t) => t.hoveredCoachIndex, set: (t, s) => {
+      t.hoveredCoachIndex = s;
+    } }, metadata: e }, pe, _e), v(l, null, me, { kind: "method", name: "coachAreaScrollend", static: !1, private: !1, access: { has: (t) => "coachAreaScrollend" in t, get: (t) => t.coachAreaScrollend }, metadata: e }, null, d), e && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), l.events = {
+    selectedplaces: "selectedplaces",
+    selectedcoach: "selectedcoach"
+  }, l;
 })();
-//#endregion
-export { u as SeatReservationBaseElement };
+export {
+  Ke as SeatReservationBaseElement
+};