@sbb-esta/lyne-elements-experimental-dev 0.0.0 → 4.0.0-dev.1775550888

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

@@ -0,0 +1,861 @@
+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.globalAreaIconDim = {
+				w: 2,
+				h: 2
+			}, this.globalAreaIconPadding = .8, 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",
+				"COMPARTMENT_WALL"
+			], 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._initPrepareSeatReservationData(), 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(), this._prepareOptimizeAreaIconDimensionByMedian();
+		}
+		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)
+					});
+				});
+			}
+		}
+		_prepareOptimizeAreaIconDimensionByMedian() {
+			if (this.seatReservations) {
+				let e = [];
+				if (this.seatReservations.forEach((t) => t.coachItems.forEach((t) => t.serviceElements?.forEach((t) => e.push(t.dimension)))), e.length) {
+					e.sort((e, t) => {
+						if (e && t) {
+							let n = e.w + e.h, r = t.w + t.h;
+							return n > r ? 1 : n < r ? -1 : 0;
+						}
+						return 0;
+					});
+					let t = e[Math.floor(e.length / 2)];
+					this.globalAreaIconDim = this.getCalculatedDimension(t);
+				} else {
+					let e = this.seatReservations.flatMap((e) => e.coachItems.map((e) => e.dimension.h)).reduce((e, t) => Math.max(e, t), 0), t = Math.floor(e * .2);
+					this.globalAreaIconDim = this.getCalculatedDimension({
+						w: t,
+						h: t
+					});
+				}
+			}
+		}
+		_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.forEach((e) => {
+				e?.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();
+		}
+	};
+})();
+//#endregion
+export { u as SeatReservationBaseElement };