@sbb-esta/lyne-elements-experimental 4.12.0 → 4.12.1

package/development/seat-reservation.pure.js

@@ -3,13 +3,13 @@ import { mapIconToSvg } from "./seat-reservation/common/mapper/icon-mapper.js";
 import "./seat-reservation/common/mapper.js";
 import { t as svgs } from "./svgs-kDpBCto5.js";
 import { getI18nSeatReservation } from "./seat-reservation/common/translations/i18n.js";
-import { t as SbbSeatReservationAreaElement } from "./seat-reservation-area.component-DbeuTnXT.js";
-import { t as SbbSeatReservationGraphicElement } from "./seat-reservation-graphic.component-DlrHtlia.js";
+import { t as SbbSeatReservationAreaElement } from "./seat-reservation-area.component-BWdrKqek.js";
+import { t as SbbSeatReservationGraphicElement } from "./seat-reservation-graphic.component-CN5sWn0I.js";
 import { assetsTemplate, svgImageByOSDMCode } from "./seat-reservation/seat-reservation-graphic/seat-reservation-assets.js";
-import { t as SbbSeatReservationNavigationCoachElement } from "./seat-reservation-navigation-coach.component-CjoDkcVU.js";
+import { t as SbbSeatReservationNavigationCoachElement } from "./seat-reservation-navigation-coach.component-tDZkXl-3.js";
 import { t as SbbSeatReservationNavigationServicesElement } from "./seat-reservation-navigation-services.component-CGel7__P.js";
 import { t as SbbSeatReservationPlaceControlElement } from "./seat-reservation-place-control.component-CM9efId7.js";
 import { t as SbbSeatReservationScopedElement } from "./seat-reservation-scoped.component-CFA_bJ3o.js";
 import { SeatReservationBaseElement } from "./seat-reservation/seat-reservation/seat-reservation-base-element.js";
-import { t as SbbSeatReservationElement } from "./seat-reservation.component-DFJVFmrI.js";
+import { t as SbbSeatReservationElement } from "./seat-reservation.component-DyB5FVpD.js";
 export { SbbSeatReservationAreaElement, SbbSeatReservationElement, SbbSeatReservationGraphicElement, SbbSeatReservationNavigationCoachElement, SbbSeatReservationNavigationServicesElement, SbbSeatReservationPlaceControlElement, SbbSeatReservationScopedElement, SeatReservationBaseElement, assetsTemplate, getI18nSeatReservation, mapCoachInfosToCoachSelection, mapIconToSvg, mapPlaceAndCoachToSeatReservationPlaceSelection, mapPlaceInfosToPlaceSelection, mapRawDataToSeatReservation, svgImageByOSDMCode, svgs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sbb-esta/lyne-elements-experimental",
-  "version": "4.12.0",
+  "version": "4.12.1",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
@@ -206,7 +206,7 @@
   },
   "customElements": "custom-elements.json",
   "peerDependencies": {
-    "@sbb-esta/lyne-elements": "4.12.0"
+    "@sbb-esta/lyne-elements": "4.12.1"
   },
   "dependencies": {
     "lit": "^3.3.2",

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

@@ -3,14 +3,14 @@ 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";
+import { eventOptions as o, property as s, state as c } from "lit/decorators.js";
+import { mapCoachInfosToCoachSelection as l, mapIconToSvg as u, mapPlaceAndCoachToSeatReservationPlaceSelection as ee, mapPlaceInfosToPlaceSelection as te } from "../common/mapper.js";
 //#region src/elements-experimental/seat-reservation/seat-reservation/seat-reservation-base-element.ts
-var l;
+var d;
 (function(e) {
 	e.right = "right", e.left = "left";
-})(l ||= {});
-var ie = 3, ae = [
+})(d ||= {});
+var ne = 3, re = [
 	"sa-vo",
 	"sa-rs",
 	"sa-abteilkinderwagen",
@@ -18,47 +18,47 @@ var ie = 3, ae = [
 	"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 {
+], f = (() => {
+	let f = n, p = [], m, h = [], g = [], _, v = [], y = [], b, x = [], S = [], C, w = [], T = [], E, D = [], O = [], k, A = [], j = [], ie, M = [], N = [], P, F = [], I = [], L, R = [], z = [], B, V = [], H = [], U, W = [], G = [], K, q = [], J = [], Y, X = [], Z = [], Q, $ = [], ae = [], oe;
+	return class extends f {
 		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
-			f = [o({
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
+			m = [s({
 				attribute: "seat-reservations",
 				type: Array
-			})], h = [o({
+			})], _ = [s({
 				attribute: "travel-direction",
 				type: String
-			})], v = [r(), o({
+			})], b = [r(), s({
 				attribute: "has-navigation",
 				type: Boolean
-			})], x = [r(), o({
+			})], C = [r(), s({
 				attribute: "align-vertical",
 				type: Boolean,
 				reflect: !0,
 				useDefault: !0
-			})], w = [r(), o({
+			})], E = [r(), s({
 				attribute: "base-grid-size",
 				type: Number
-			})], D = [r(), o({
+			})], k = [r(), s({
 				attribute: "height",
 				type: Number
-			})], k = [r(), o({
+			})], ie = [r(), s({
 				attribute: "max-seat-reservations",
 				type: Number
-			})], M = [r(), o({
+			})], P = [r(), s({
 				attribute: "max-bicycle-reservations",
 				type: Number
-			})], F = [r(), o({
+			})], L = [r(), s({
 				attribute: "prevent-place-click",
 				type: Boolean
-			})], R = [r(), o({
+			})], B = [r(), s({
 				attribute: "preselect-coach-index",
 				type: Number
-			})], V = [r(), o({
+			})], U = [r(), s({
 				attribute: "show-title-info",
 				type: Boolean
-			})], W = [s()], q = [s()], X = [s()], $ = [ee({ passive: !0 })], e(this, null, f, {
+			})], K = [c()], Y = [c()], Q = [c()], oe = [o({ passive: !0 })], e(this, null, m, {
 				kind: "accessor",
 				name: "seatReservations",
 				static: !1,
@@ -71,7 +71,7 @@ var ie = 3, ae = [
 					}
 				},
 				metadata: t
-			}, p, m), e(this, null, h, {
+			}, h, g), e(this, null, _, {
 				kind: "accessor",
 				name: "travelDirection",
 				static: !1,
@@ -84,7 +84,7 @@ var ie = 3, ae = [
 					}
 				},
 				metadata: t
-			}, g, _), e(this, null, v, {
+			}, v, y), e(this, null, b, {
 				kind: "accessor",
 				name: "hasNavigation",
 				static: !1,
@@ -97,7 +97,7 @@ var ie = 3, ae = [
 					}
 				},
 				metadata: t
-			}, y, b), e(this, null, x, {
+			}, x, S), e(this, null, C, {
 				kind: "accessor",
 				name: "alignVertical",
 				static: !1,
@@ -110,7 +110,7 @@ var ie = 3, ae = [
 					}
 				},
 				metadata: t
-			}, S, C), e(this, null, w, {
+			}, w, T), e(this, null, E, {
 				kind: "accessor",
 				name: "baseGridSize",
 				static: !1,
@@ -123,7 +123,7 @@ var ie = 3, ae = [
 					}
 				},
 				metadata: t
-			}, T, E), e(this, null, D, {
+			}, D, O), e(this, null, k, {
 				kind: "accessor",
 				name: "height",
 				static: !1,
@@ -136,7 +136,7 @@ var ie = 3, ae = [
 					}
 				},
 				metadata: t
-			}, O, oe), e(this, null, k, {
+			}, A, j), e(this, null, ie, {
 				kind: "accessor",
 				name: "maxSeatReservations",
 				static: !1,
@@ -149,7 +149,7 @@ var ie = 3, ae = [
 					}
 				},
 				metadata: t
-			}, A, j), e(this, null, M, {
+			}, M, N), e(this, null, P, {
 				kind: "accessor",
 				name: "maxBicycleReservations",
 				static: !1,
@@ -162,7 +162,7 @@ var ie = 3, ae = [
 					}
 				},
 				metadata: t
-			}, N, P), e(this, null, F, {
+			}, F, I), e(this, null, L, {
 				kind: "accessor",
 				name: "preventPlaceClick",
 				static: !1,
@@ -175,7 +175,7 @@ var ie = 3, ae = [
 					}
 				},
 				metadata: t
-			}, I, L), e(this, null, R, {
+			}, R, z), e(this, null, B, {
 				kind: "accessor",
 				name: "preselectCoachIndex",
 				static: !1,
@@ -188,7 +188,7 @@ var ie = 3, ae = [
 					}
 				},
 				metadata: t
-			}, z, B), e(this, null, V, {
+			}, V, H), e(this, null, U, {
 				kind: "accessor",
 				name: "showTitleInfo",
 				static: !1,
@@ -201,7 +201,7 @@ var ie = 3, ae = [
 					}
 				},
 				metadata: t
-			}, H, U), e(this, null, W, {
+			}, W, G), e(this, null, K, {
 				kind: "accessor",
 				name: "selectedCoachIndex",
 				static: !1,
@@ -214,7 +214,7 @@ var ie = 3, ae = [
 					}
 				},
 				metadata: t
-			}, G, K), e(this, null, q, {
+			}, q, J), e(this, null, Y, {
 				kind: "accessor",
 				name: "focusedCoachIndex",
 				static: !1,
@@ -227,7 +227,7 @@ var ie = 3, ae = [
 					}
 				},
 				metadata: t
-			}, J, Y), e(this, null, X, {
+			}, X, Z), e(this, null, Q, {
 				kind: "accessor",
 				name: "hoveredCoachIndex",
 				static: !1,
@@ -240,7 +240,7 @@ var ie = 3, ae = [
 					}
 				},
 				metadata: t
-			}, Z, Q), e(this, null, $, {
+			}, $, ae), e(this, null, oe, {
 				kind: "method",
 				name: "coachAreaScrollend",
 				static: !1,
@@ -250,7 +250,7 @@ var ie = 3, ae = [
 					get: (e) => e.coachAreaScrollend
 				},
 				metadata: t
-			}, null, d), t && Object.defineProperty(this, Symbol.metadata, {
+			}, null, p), t && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -362,10 +362,10 @@ var ie = 3, ae = [
 			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 = {
+			super(), this.#e = (t(this, p), t(this, h, null)), this.#t = (t(this, g), t(this, v, "NONE")), this.#n = (t(this, y), t(this, x, !0)), this.#r = (t(this, S), t(this, w, !1)), this.#i = (t(this, T), t(this, D, 16)), this.#a = (t(this, O), t(this, A, null)), this.#o = (t(this, j), t(this, M, -1)), this.#s = (t(this, N), t(this, F, -1)), this.#c = (t(this, I), t(this, R, !1)), this.#l = (t(this, z), t(this, V, -1)), this.#u = (t(this, H), t(this, W, !1)), this.#d = (t(this, G), t(this, q, -1)), this.#f = (t(this, J), t(this, X, -1)), this.#p = (t(this, Z), t(this, $, -1)), this.coachBorderPadding = (t(this, ae), 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 = {
+			}, this.globalAreaIconPadding = .8, this.coachItemDetailsElements = [], this.currScrollDirection = d.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 = {
@@ -375,7 +375,7 @@ var ie = 3, ae = [
 				ArrowDown: "ArrowDown",
 				Tab: "Tab",
 				Enter: "Enter"
-			}, this.notAreaElements = [
+			}, this.seatReservationStructure = { decks: [] }, this.notFixedRotatableAreaIcons = ["ENTRY_EXIT"], this.notAreaElements = [
 				"DRIVER_AREA",
 				"DRIVER_AREA_NO_VERTICAL_WALL",
 				"COACH_PASSAGE",
@@ -385,19 +385,24 @@ var ie = 3, ae = [
 				"COMPARTMENT_PASSAGE_MIDDLE",
 				"COMPARTMENT_PASSAGE_LOW",
 				"COMPARTMENT_WALL"
-			], this.overHangingElementInformation = [], this._isRunningInitPreselectCoachIndex = !1, this._lastStartScrollPos = -1, this._prepareServiceIconsNavigation = (e) => e && e?.map(function(e) {
+			], this.middleBorderDockingElements = [
+				"DRIVER_AREA",
+				"DRIVER_AREA_NO_VERTICAL_WALL",
+				"COACH_PASSAGE",
+				"COACH_WALL_NO_PASSAGE"
+			], this._isRunningInitPreselectCoachIndex = !1, this._lastStartScrollPos = -1, this._prepareServiceIconsNavigation = (e) => e && e?.map(function(e) {
 				return {
 					pId: e,
-					svgName: c[e]?.svgName ? c[e]?.svgName : ""
+					svgName: u[e]?.svgName ? u[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());
+			}).filter((e) => re.indexOf(e.svgName) !== -1).filter((e, t, n) => n.map((e) => e.svgName).indexOf(e.svgName) === t).map((e) => e.pId).slice(0, ne) || [], 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) {
+			if (super.willUpdate(e), e.has("seatReservations") && (this.hasMultipleDecks = this.seatReservations?.length > 1, this._initPrepareSeatReservationData(), 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._initPrepareSeatReservationData(), 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?.coachItems.length && (this.baseGridSize = Math.round(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));
+			e.has("alignVertical") && (this._initPrepareSeatReservationData(), this.initNavigationSelectionByScrollEvent()), e.has("preselectCoachIndex") && (this._isRunningInitPreselectCoachIndex = !0, setTimeout(() => this.scrollToSelectedNavCoach(this.preselectCoachIndex), 1));
 		}
 		navigateByDirectionBtn(e) {
 			this.unfocusPlaceElement();
@@ -405,7 +410,7 @@ var ie = 3, ae = [
 			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();
+			this._determineBaseFontSize(), this.hasMultipleDecks && this._initEmptyCoachDeckOffsets(), this._prepareCoachItemDetailsData(), this._prepareSeatReservationStructureInformation(), this._prepareOptimizeAreaIconDimensionByMedian();
 		}
 		initNavigationSelectionByScrollEvent() {
 			this.coachScrollArea = this.shadowRoot?.querySelector("#sbb-sr__wrapper-scrollarea"), this.navigationScrollArea = this.shadowRoot?.querySelector("#sbb-sr__navigation-list-coaches");
@@ -424,12 +429,12 @@ var ie = 3, ae = [
 			}
 			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,
+				this.scrollCoachesAreaWidth = this.alignVertical ? this.coachScrollArea.getBoundingClientRect().height : this.coachScrollArea.getBoundingClientRect().width, this.triggerCoachPositionsCollection = e.coachItems.map((e, n) => {
+					let r = this.seatReservationStructure.decks[this.currSelectedDeckIndex].deckCoaches[n], i = t;
+					return t += r.width + (r.hasOverhangingElements ? 2 * this.gapBetweenCoaches : this.gapBetweenCoaches), {
+						start: i,
 						end: t,
-						width: r
+						width: r.width
 					};
 				}), this.maxCalcCoachesWidth = t - this.gapBetweenCoaches;
 			}
@@ -582,11 +587,11 @@ var ie = 3, ae = [
 			}, 10);
 		}
 		_setScrollDirectionByCoachIndex() {
-			this.currScrollDirection = this.currSelectedCoachIndex > this.selectedCoachIndex ? l.right : l.left;
+			this.currScrollDirection = this.currSelectedCoachIndex > this.selectedCoachIndex ? d.right : d.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;
+			return this.isKeyboardNavigation && this.currScrollDirection === d.left && e.width > this.scrollCoachesAreaWidth ? e.end - this.scrollCoachesAreaWidth : e.start;
 		}
 		_setFocusToSelectedCoachGrid() {
 			if (this.isCoachGridFocusable && this.hasSeatReservationNativeFocus) {
@@ -617,7 +622,7 @@ var ie = 3, ae = [
 				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);
+					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 === d.right && t.position.y === a.y && (!n || t.position.x < n.position.x) || this.currScrollDirection === d.left && t.position.y === a.y && (!n || t.position.x > n.position.x)) && (n = t);
 					i !== null && n && (this.currSelectedDeckIndex = i);
 				}
 			}
@@ -721,7 +726,7 @@ var ie = 3, ae = [
 		_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);
+					let i = te(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));
 				});
 			}));
@@ -736,12 +741,12 @@ var ie = 3, ae = [
 		_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;
+			return r ? ee(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));
+			return l(e, t, this.getAvailableFreePlacesNumFromCoach(t.places));
 		}
 		_setCurrSelectedPlaceElementId(e) {
 			this.currSelectedPlaceElementId = e ? this.getPlaceElementId(this.currSelectedDeckIndex, this.currSelectedCoachIndex, e.number) : null;
@@ -764,9 +769,9 @@ var ie = 3, ae = [
 						travelClass: this._prepareTravelClassNavigation(n),
 						propertyIds: this._prepareServiceIconsNavigation(r),
 						isDriverArea: e.places ? e.places.length === 0 : !0,
+						isLocomotive: this._isLocomotive(e),
 						driverAreaSide: this._prepareDriverAreaSideNavigation(e),
-						freePlaces: this.getAvailableFreePlacesNumFromCoach(i),
-						driverAreaElements: this._setDriverAreasElements(e)
+						freePlaces: this.getAvailableFreePlacesNumFromCoach(i)
 					});
 				});
 			}
@@ -806,17 +811,71 @@ var ie = 3, ae = [
 				};
 			}
 		}
-		_prepareCoachWidthAndGapCalculations() {
-			this.seatReservations && this.seatReservations.forEach((e) => {
+		_prepareSeatReservationStructureInformation() {
+			this.seatReservations && (this.seatReservationStructure = { decks: [] }, this.seatReservations.forEach((e, t) => {
+				let n = {
+					deckIndex: t,
+					deckCoaches: []
+				};
 				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
-					});
-				});
+					let t = (e.graphicElements?.filter((e) => e.icon && !this.notAreaElements.includes(e.icon)))?.concat(e.serviceElements || []).concat(e.places || []) || [], r = this._isOverhangingElementsPresent(e.dimension.w, t), i = e.graphicElements?.filter((e) => !this.notAreaElements.includes(e.icon)).map((t) => this._getCalculatedDimensionPositionElement(t, e.dimension, !0)), a = e.graphicElements?.filter((e) => this.notAreaElements.includes(e.icon)).map((t) => this._getCalculatedDimensionPositionElement(t, e.dimension, !1)), o = e.serviceElements?.map((t) => this._getCalculatedDimensionPositionElement(t, e.dimension, !1)), s = this._getCalculatedMiddleBorderElement(e), c = this.getCalculatedDimension({ ...e.dimension }), l = {
+						width: c.w,
+						height: c.h,
+						otherElements: a || [],
+						serviceElements: o || [],
+						areaElements: i || [],
+						borderMiddleElement: s,
+						hasOverhangingElements: r
+					};
+					n.deckCoaches.push(l);
+				}), this.seatReservationStructure.decks.push(n);
+			}));
+		}
+		_getCalculatedMiddleBorderElement(e) {
+			let t = (e.dimension.h + this.coachBorderOffset * 2) * this.baseGridSize, n = 0, r = e.dimension.w;
+			if (e.graphicElements) {
+				let t = this._getFirstLastDockingElements(e.graphicElements);
+				if (t?.length == 2) {
+					let i = t[0], a = t[1], o = i.position.x == 0 ? a.dimension.w : i.dimension.w;
+					n = i.position.x == 0 ? i.dimension.w : a.dimension.w, r = e.dimension.w - o - n;
+				} else if (t?.length == 1) {
+					let i = t[0];
+					i.position.x === 0 ? (n = i.dimension.w, r = e.dimension.w - i.dimension.w) : i.position.x !== 0 && (r = e.dimension.w - i.dimension.w);
+				}
+			}
+			let i = this.coachBorderPadding * -1;
+			return {
+				position: {
+					x: n * this.baseGridSize,
+					y: i,
+					z: 0
+				},
+				dimension: {
+					w: r * this.baseGridSize,
+					h: t
+				}
+			};
+		}
+		_getFirstLastDockingElements(e) {
+			let t = (e.filter((e) => this.middleBorderDockingElements.includes(e.icon)) || []).sort((e, t) => {
+				let n = e.position.x, r = t.position.x;
+				return n > r ? 1 : n < r ? -1 : 0;
 			});
+			return t.filter((e, n) => n == 0 || n == t.length - 1);
+		}
+		_getCalculatedDimensionPositionElement(e, t, n) {
+			let r = { ...e.dimension }, i = { ...e.position }, a = e.rotation || 0, o = this.notAreaElements.concat(this.notFixedRotatableAreaIcons).indexOf(e.icon) === -1, s = this.alignVertical && o ? a - 90 : a, c = null;
+			if (n) {
+				let n = e.icon?.indexOf("TABLE") === -1, a = e.icon && n ? e.icon : null, o = this.isElementDirectlyOnBorder(e, t) && a !== "ENTRY_EXIT";
+				e.position.y === 0 ? (c = "upper-border", i.y -= this.coachBorderOffset - this.coachBorderOffset / 3) : e.position.y + e.dimension.h === t.h && (c = "lower-border", o || (i.y += this.coachBorderOffset - this.coachBorderOffset / 3)), o && (r.h += this.coachBorderOffset - this.coachBorderOffset / 3);
+			} else e.position.y === 0 && (i.y -= this.coachBorderOffset), t.h === e.position.y + e.dimension.h && (r.h += this.coachBorderOffset * 2);
+			return r.w *= this.baseGridSize, r.h *= this.baseGridSize, i.x *= this.baseGridSize, i.y *= this.baseGridSize, {
+				icon: e.icon && e.icon.endsWith("DRIVER_AREA") ? e.icon?.concat("_", this.seatReservations[this.currSelectedDeckIndex].vehicleType) : e.icon,
+				rotation: s,
+				dimension: r,
+				position: i,
+				mounting: c
+			};
 		}
 		_getPlaceHtmlElement() {
 			return this.currSelectedPlaceElementId && this.shadowRoot?.getElementById(this.currSelectedPlaceElementId) || null;
@@ -843,14 +902,8 @@ var ie = 3, ae = [
 		_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
-			};
+		_isLocomotive(e) {
+			return e?.graphicElements?.find((e) => e.icon === "DRIVER_AREA_NO_VERTICAL_WALL") !== void 0;
 		}
 		_onLeaveSeatReservationComponent() {
 			this.hasNavigation && (this.focusedCoachIndex = -1), this.unfocusPlaceElement();
@@ -858,4 +911,4 @@ var ie = 3, ae = [
 	};
 })();
 //#endregion
-export { u as SeatReservationBaseElement };
+export { f as SeatReservationBaseElement };

package/seat-reservation/seat-reservation/seat-reservation.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../seat-reservation.component-DajC6fqU.js";
+import { t as e } from "../../seat-reservation.component-DEtsEzex.js";
 export { e as SbbSeatReservationElement };

package/seat-reservation/seat-reservation-area/seat-reservation-area.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../seat-reservation-area.component-CtYawDjE.js";
+import { t as e } from "../../seat-reservation-area.component-B5_N7H_a.js";
 export { e as SbbSeatReservationAreaElement };

package/seat-reservation/seat-reservation-area.js

@@ -1,4 +1,4 @@
-import { t as e } from "../seat-reservation-area.component-CtYawDjE.js";
+import { t as e } from "../seat-reservation-area.component-B5_N7H_a.js";
 e.define(), console.warn("The entrypoint '@sbb-esta/elements-experimental/seat-reservation/seat-reservation-area.js' has been deprecated.\nUse either '@sbb-esta/elements-experimental/seat-reservation.js' or '@sbb-esta/elements-experimental/seat-reservation.pure.js' instead.");
 //#endregion
 export { e as SbbSeatReservationAreaElement };

package/seat-reservation/seat-reservation-graphic/seat-reservation-assets.js

@@ -1,4 +1,4 @@
-import { t as e } from "../../seat-reservation-graphic.component-Cm_pVxaB.js";
+import { t as e } from "../../seat-reservation-graphic.component-Dh1e2Pve.js";
 import { html as t } from "lit";
 import { unsafeHTML as n } from "lit/directives/unsafe-html.js";
 import { mapIconToSvg as r } from "../common/mapper.js";

package/seat-reservation/seat-reservation-graphic/seat-reservation-graphic.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../seat-reservation-graphic.component-Cm_pVxaB.js";
+import { t as e } from "../../seat-reservation-graphic.component-Dh1e2Pve.js";
 export { e as SbbSeatReservationGraphicElement };

package/seat-reservation/seat-reservation-graphic.js

@@ -1,4 +1,4 @@
-import { t as e } from "../seat-reservation-graphic.component-Cm_pVxaB.js";
+import { t as e } from "../seat-reservation-graphic.component-Dh1e2Pve.js";
 e.define(), console.warn("The entrypoint '@sbb-esta/elements-experimental/seat-reservation/seat-reservation-graphic.js' has been deprecated.\nUse either '@sbb-esta/elements-experimental/seat-reservation.js' or '@sbb-esta/elements-experimental/seat-reservation.pure.js' instead.");
 //#endregion
 export { e as SbbSeatReservationGraphicElement };

package/seat-reservation/seat-reservation-navigation-coach/seat-reservation-navigation-coach.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../seat-reservation-navigation-coach.component-sug9IBTH.js";
+import { t as e } from "../../seat-reservation-navigation-coach.component-BdCUfksf.js";
 export { e as SbbSeatReservationNavigationCoachElement };

package/seat-reservation/seat-reservation-navigation-coach.js

@@ -1,4 +1,4 @@
-import { t as e } from "../seat-reservation-navigation-coach.component-sug9IBTH.js";
+import { t as e } from "../seat-reservation-navigation-coach.component-BdCUfksf.js";
 e.define(), console.warn("The entrypoint '@sbb-esta/elements-experimental/seat-reservation/seat-reservation-navigation-coach.js' has been deprecated.\nUse either '@sbb-esta/elements-experimental/seat-reservation.js' or '@sbb-esta/elements-experimental/seat-reservation.pure.js' instead.");
 //#endregion
 export { e as SbbSeatReservationNavigationCoachElement };

package/seat-reservation/seat-reservation.js

@@ -1,5 +1,5 @@
 import { SeatReservationBaseElement as e } from "./seat-reservation/seat-reservation-base-element.js";
-import { t } from "../seat-reservation.component-DajC6fqU.js";
+import { t } from "../seat-reservation.component-DEtsEzex.js";
 t.define(), console.warn("The entrypoint '@sbb-esta/elements-experimental/seat-reservation/seat-reservation.js' has been deprecated.\nUse either '@sbb-esta/elements-experimental/seat-reservation.js' or '@sbb-esta/elements-experimental/seat-reservation.pure.js' instead.");
 //#endregion
 export { t as SbbSeatReservationElement, e as SeatReservationBaseElement };

package/{seat-reservation-area.component-CtYawDjE.js → seat-reservation-area.component-B5_N7H_a.js}

@@ -5,7 +5,7 @@ import { boxSizingStyles as i } from "@sbb-esta/lyne-elements/core/styles.js";
 import { html as a, unsafeCSS as o } from "lit";
 import { property as s } from "lit/decorators.js";
 //#region src/elements-experimental/seat-reservation/seat-reservation-area/seat-reservation-area.scss?inline
-var c = ":host{--sbb-seat-reservation-area-border-radius: var(--sbb-border-width-4x);--sbb-seat-reservation-area-rotation: 0;display:flex;justify-content:center;align-items:center;height:calc(var(--sbb-seat-reservation-area-height) * var(--sbb-seat-reservation-one-px-rem, .0625rem));width:calc(var(--sbb-seat-reservation-area-width) * var(--sbb-seat-reservation-one-px-rem, .0625rem));border:var(--sbb-border-width-1x) solid var(--sbb-color-graphite);border:var(--sbb-border-width-1x) solid light-dark(var(--sbb-color-graphite),var(--sbb-color-granite));border-radius:var(--sbb-seat-reservation-area-border-radius);position:absolute;inset-block-start:calc(var(--sbb-seat-reservation-area-top) * var(--sbb-seat-reservation-one-px-rem, .0625rem));inset-inline-start:calc(var(--sbb-seat-reservation-area-left) * var(--sbb-seat-reservation-one-px-rem, .0625rem));rotate:calc(var(--sbb-seat-reservation-area-rotation) * 1deg);line-height:normal;background-color:var(--sbb-background-color-2)}:host([background=dark]){background-color:var(--sbb-color-milk);background-color:light-dark(var(--sbb-color-milk),var(--sbb-color-iron))}:host([mounting=upper-border]){border-block-start-width:0;border-radius:0 0 var(--sbb-seat-reservation-area-border-radius) var(--sbb-seat-reservation-area-border-radius)}:host([mounting=lower-border]){border-block-end-width:0;border-radius:var(--sbb-seat-reservation-area-border-radius) var(--sbb-seat-reservation-area-border-radius) 0 0}:host([mounting=upper-to-lower-border]){border-block-start:none;border-block-end:none;border-radius:0}:host(.sbb-seat-reservation-area--cursor-pointer){cursor:var(--sbb-cursor-pointer)}", l = (() => {
+var c = ":host{--sbb-seat-reservation-area-border-radius: var(--sbb-border-width-4x);--sbb-seat-reservation-area-rotation: 0;--sbb-seat-reservation-area-z-index: 0;display:flex;justify-content:center;align-items:center;height:calc(var(--sbb-seat-reservation-area-height) * var(--sbb-seat-reservation-one-px-rem, .0625rem));width:calc(var(--sbb-seat-reservation-area-width) * var(--sbb-seat-reservation-one-px-rem, .0625rem));border:var(--sbb-border-width-1x) solid var(--sbb-color-graphite);border:var(--sbb-border-width-1x) solid light-dark(var(--sbb-color-graphite),var(--sbb-color-granite));border-radius:var(--sbb-seat-reservation-area-border-radius);position:absolute;z-index:var(--sbb-seat-reservation-area-z-index);inset-block-start:calc(var(--sbb-seat-reservation-area-top) * var(--sbb-seat-reservation-one-px-rem, .0625rem));inset-inline-start:calc(var(--sbb-seat-reservation-area-left) * var(--sbb-seat-reservation-one-px-rem, .0625rem));rotate:calc(var(--sbb-seat-reservation-area-rotation) * 1deg);line-height:normal;background-color:var(--sbb-background-color-2)}:host([background=dark]){background-color:var(--sbb-color-milk);background-color:light-dark(var(--sbb-color-milk),var(--sbb-color-iron))}:host([mounting=upper-border]){border-block-start-width:0;border-radius:0 0 var(--sbb-seat-reservation-area-border-radius) var(--sbb-seat-reservation-area-border-radius)}:host([mounting=lower-border]){border-block-end-width:0;border-radius:var(--sbb-seat-reservation-area-border-radius) var(--sbb-seat-reservation-area-border-radius) 0 0}:host([mounting=upper-to-lower-border]){border-block-start:none;border-block-end:none;border-radius:0}:host(.sbb-seat-reservation-area--cursor-pointer){cursor:var(--sbb-cursor-pointer)}", l = (() => {
 	let l = n, u, d = [], f = [], p, m = [], h = [];
 	return class extends l {
 		static {