@sbb-esta/lyne-elements-experimental 5.3.0 → 5.4.1

package/development/journey-summary.pure.js

@@ -1437,7 +1437,8 @@ const lightFormatters = {
 	S(date, token) {
 		const numberOfDigits = token.length;
 		const milliseconds = date.getMilliseconds();
-		return addLeadingZeros(Math.trunc(milliseconds * Math.pow(10, numberOfDigits - 3)), token.length);
+		const fractionalSeconds = Math.trunc(milliseconds * Math.pow(10, numberOfDigits - 3));
+		return addLeadingZeros(fractionalSeconds, token.length);
 	}
 };
 
@@ -1475,15 +1476,20 @@ const formatters = {
 	Y: function(date, token, localize, options) {
 		const signedWeekYear = getWeekYear(date, options);
 		const weekYear = signedWeekYear > 0 ? signedWeekYear : 1 - signedWeekYear;
-		if (token === "YY") return addLeadingZeros(weekYear % 100, 2);
+		if (token === "YY") {
+			const twoDigitYear = weekYear % 100;
+			return addLeadingZeros(twoDigitYear, 2);
+		}
 		if (token === "Yo") return localize.ordinalNumber(weekYear, { unit: "year" });
 		return addLeadingZeros(weekYear, token.length);
 	},
 	R: function(date, token) {
-		return addLeadingZeros(getISOWeekYear(date), token.length);
+		const isoWeekYear = getISOWeekYear(date);
+		return addLeadingZeros(isoWeekYear, token.length);
 	},
 	u: function(date, token) {
-		return addLeadingZeros(date.getFullYear(), token.length);
+		const year = date.getFullYear();
+		return addLeadingZeros(year, token.length);
 	},
 	Q: function(date, token, localize) {
 		const quarter = Math.ceil((date.getMonth() + 1) / 3);
@@ -1826,7 +1832,8 @@ const formatters = {
 		}
 	},
 	t: function(date, token, _localize) {
-		return addLeadingZeros(Math.trunc(+date / 1e3), token.length);
+		const timestamp = Math.trunc(+date / 1e3);
+		return addLeadingZeros(timestamp, token.length);
 	},
 	T: function(date, token, _localize) {
 		return addLeadingZeros(+date, token.length);
@@ -1886,9 +1893,7 @@ const dateTimeLongFormatter = (pattern, formatLong) => {
 		case "PPP":
 			dateTimeFormat = formatLong.dateTime({ width: "long" });
 			break;
-		default:
-			dateTimeFormat = formatLong.dateTime({ width: "full" });
-			break;
+		default: dateTimeFormat = formatLong.dateTime({ width: "full" });
 	}
 	return dateTimeFormat.replace("{{date}}", dateLongFormatter(datePattern, formatLong)).replace("{{time}}", timeLongFormatter(timePattern, formatLong));
 };

package/development/pearl-chain-time.pure.js

@@ -1436,7 +1436,8 @@ const lightFormatters = {
 	S(date, token) {
 		const numberOfDigits = token.length;
 		const milliseconds = date.getMilliseconds();
-		return addLeadingZeros(Math.trunc(milliseconds * Math.pow(10, numberOfDigits - 3)), token.length);
+		const fractionalSeconds = Math.trunc(milliseconds * Math.pow(10, numberOfDigits - 3));
+		return addLeadingZeros(fractionalSeconds, token.length);
 	}
 };
 
@@ -1474,15 +1475,20 @@ const formatters = {
 	Y: function(date, token, localize, options) {
 		const signedWeekYear = getWeekYear(date, options);
 		const weekYear = signedWeekYear > 0 ? signedWeekYear : 1 - signedWeekYear;
-		if (token === "YY") return addLeadingZeros(weekYear % 100, 2);
+		if (token === "YY") {
+			const twoDigitYear = weekYear % 100;
+			return addLeadingZeros(twoDigitYear, 2);
+		}
 		if (token === "Yo") return localize.ordinalNumber(weekYear, { unit: "year" });
 		return addLeadingZeros(weekYear, token.length);
 	},
 	R: function(date, token) {
-		return addLeadingZeros(getISOWeekYear(date), token.length);
+		const isoWeekYear = getISOWeekYear(date);
+		return addLeadingZeros(isoWeekYear, token.length);
 	},
 	u: function(date, token) {
-		return addLeadingZeros(date.getFullYear(), token.length);
+		const year = date.getFullYear();
+		return addLeadingZeros(year, token.length);
 	},
 	Q: function(date, token, localize) {
 		const quarter = Math.ceil((date.getMonth() + 1) / 3);
@@ -1825,7 +1831,8 @@ const formatters = {
 		}
 	},
 	t: function(date, token, _localize) {
-		return addLeadingZeros(Math.trunc(+date / 1e3), token.length);
+		const timestamp = Math.trunc(+date / 1e3);
+		return addLeadingZeros(timestamp, token.length);
 	},
 	T: function(date, token, _localize) {
 		return addLeadingZeros(+date, token.length);
@@ -1885,9 +1892,7 @@ const dateTimeLongFormatter = (pattern, formatLong) => {
 		case "PPP":
 			dateTimeFormat = formatLong.dateTime({ width: "long" });
 			break;
-		default:
-			dateTimeFormat = formatLong.dateTime({ width: "full" });
-			break;
+		default: dateTimeFormat = formatLong.dateTime({ width: "full" });
 	}
 	return dateTimeFormat.replace("{{date}}", dateLongFormatter(datePattern, formatLong)).replace("{{time}}", timeLongFormatter(timePattern, formatLong));
 };

package/development/pearl-chain.pure.js

@@ -500,7 +500,8 @@ let SbbPearlChainElement = (() => {
 		_getProgress(now, start, end) {
 			if (!start?.time || !end?.time) return 0;
 			const startWithDelay = addMinutes(start.time, start.delay ?? 0);
-			const total = differenceInMinutes(addMinutes(end.time, end.delay ?? 0), startWithDelay);
+			const endWithDelay = addMinutes(end.time, end.delay ?? 0);
+			const total = differenceInMinutes(endWithDelay, startWithDelay);
 			const progress = differenceInMinutes(now, startWithDelay);
 			return total && progress / total * 100;
 		}

package/development/seat-reservation/seat-reservation/seat-reservation-base-element.d.ts

@@ -166,6 +166,10 @@ export declare class SeatReservationBaseElement extends SbbElement {
      * @returns An Object with count of free seats and free bicycle places
      */
     protected getAvailableFreePlacesNumFromCoach(places: Place[] | undefined): CoachNumberOfFreePlaces;
+    /**
+     * Returns the status whether the seat component with the direction of travel is currently displayed
+     */
+    protected hasTravelDirection(): boolean;
     /**
      * At the end of a scroll Event from the coach scrollable area,
      * the reached coach is marked as selected

package/development/seat-reservation.pure.js

@@ -14029,7 +14029,8 @@ let SbbSeatReservationPlaceControlElement = (() => {
 			return `PLACE_${type}_${state}`;
 		}
 		_getTitleDescriptionPlace(rotation) {
-			let description = getI18nSeatReservation("PLACE_CONTROL_" + this.type + "_" + this.state, this._language.current, [this.text]);
+			const translationKey = "PLACE_CONTROL_" + this.type + "_" + this.state;
+			let description = getI18nSeatReservation(translationKey, this._language.current, [this.text]);
 			const relativeTravelDirection = this._getRelativeTravelDirection(rotation);
 			if (this.propertyIds.length || relativeTravelDirection) {
 				description += ". " + getI18nSeatReservation("PLACE_PROPERTY", this._language.current).concat(": ");
@@ -14824,13 +14825,10 @@ let SeatReservationBaseElement = (() => {
 							this._navigateToPlaceByKeyboard(pressedUpKeyMapping);
 						}
 						break;
-					case this.keyboardNavigationEvents.ArrowDown:
-						{
-							const pressedDownKeyMapping = this.alignVertical ? this.keyboardNavigationEvents.ArrowRight : pressedKey;
-							this._navigateToPlaceByKeyboard(pressedDownKeyMapping);
-						}
-						break;
-					default: break;
+					case this.keyboardNavigationEvents.ArrowDown: {
+						const pressedDownKeyMapping = this.alignVertical ? this.keyboardNavigationEvents.ArrowRight : pressedKey;
+						this._navigateToPlaceByKeyboard(pressedDownKeyMapping);
+					}
 				}
 			}
 		}
@@ -14954,6 +14952,12 @@ let SeatReservationBaseElement = (() => {
 			return freePlaces ? freePlaces : accumulator;
 		}
 		/**
+		* Returns the status whether the seat component with the direction of travel is currently displayed
+		*/
+		hasTravelDirection() {
+			return this.travelDirection && this.travelDirection !== "NONE";
+		}
+		/**
 		* At the end of a scroll Event from the coach scrollable area,
 		* the reached coach is marked as selected
 		*/
@@ -15237,7 +15241,8 @@ let SeatReservationBaseElement = (() => {
 			this.selectedSeatReservationPlaces.bicycles = [];
 			this.seatReservations?.forEach((seatReservation, coachDeckIndex) => seatReservation.coachItems.map((coach, coachIndex) => {
 				coach.places?.filter((place) => place.state === "SELECTED")?.forEach((place) => {
-					const preselectedPlaceSelection = mapPlaceInfosToPlaceSelection(place, this.getPlaceElementId(coachDeckIndex, coachIndex, place.number), seatReservation.deckCoachIndex, coachIndex);
+					const placeId = this.getPlaceElementId(coachDeckIndex, coachIndex, place.number);
+					const preselectedPlaceSelection = mapPlaceInfosToPlaceSelection(place, placeId, seatReservation.deckCoachIndex, coachIndex);
 					const seatReservationPlaceSelection = this._getSeatReservationPlaceSelection(preselectedPlaceSelection, coachDeckIndex);
 					if (seatReservationPlaceSelection) if (seatReservationPlaceSelection.placeType === "SEAT") this.selectedSeatReservationPlaces.seats.push(seatReservationPlaceSelection);
 					else this.selectedSeatReservationPlaces.bicycles.push(seatReservationPlaceSelection);
@@ -15267,7 +15272,8 @@ let SeatReservationBaseElement = (() => {
 		_getSeatReservationSelectedCoach(coachIndex) {
 			if (!this.seatReservations[this.currSelectedDeckIndex].coachItems[coachIndex]) return null;
 			const coach = this.seatReservations[this.currSelectedDeckIndex].coachItems[coachIndex];
-			return mapCoachInfosToCoachSelection(coachIndex, coach, this.getAvailableFreePlacesNumFromCoach(coach.places));
+			const coachNumberOfFreePlaces = this.getAvailableFreePlacesNumFromCoach(coach.places);
+			return mapCoachInfosToCoachSelection(coachIndex, coach, coachNumberOfFreePlaces);
 		}
 		_setCurrSelectedPlaceElementId(place) {
 			this.currSelectedPlaceElementId = place ? this.getPlaceElementId(this.currSelectedDeckIndex, this.currSelectedCoachIndex, place.number) : null;
@@ -15371,9 +15377,9 @@ let SeatReservationBaseElement = (() => {
 					seatReservation?.coachItems?.forEach((coachItem) => {
 						const allElemenets = (coachItem.graphicElements?.filter((e) => e.icon && !this.notAreaElements.includes(e.icon)))?.concat(coachItem.serviceElements || []).concat(coachItem.places || []) || [];
 						const hasOverhangingElements = this._isOverhangingElementsPresent(coachItem.dimension.w, allElemenets);
-						const areaElements = coachItem.graphicElements?.filter((graphicalElement) => !this.notAreaElements.includes(graphicalElement.icon)).map((ele) => this._getCalculatedDimensionPositionElement(ele, coachItem.dimension, true));
-						const otherElements = coachItem.graphicElements?.filter((graphicalElement) => this.notAreaElements.includes(graphicalElement.icon)).map((ele) => this._getCalculatedDimensionPositionElement(ele, coachItem.dimension, false));
-						const serviceElements = coachItem.serviceElements?.map((ele) => this._getCalculatedDimensionPositionElement(ele, coachItem.dimension, true));
+						const areaElements = coachItem.graphicElements?.filter((graphicalElement) => !this.notAreaElements.includes(graphicalElement.icon)).map((ele) => this._getCalculatedDimensionPositionElement(ele, coachItem.dimension, "AREA"));
+						const otherElements = coachItem.graphicElements?.filter((graphicalElement) => this.notAreaElements.includes(graphicalElement.icon)).map((ele) => this._getCalculatedDimensionPositionElement(ele, coachItem.dimension, "OTHER"));
+						const serviceElements = coachItem.serviceElements?.map((ele) => this._getCalculatedDimensionPositionElement(ele, coachItem.dimension, "SERVICE"));
 						const borderMiddleElement = this._getCalculatedMiddleBorderElement(coachItem);
 						const calcCoachDimension = this.getCalculatedDimension({ ...coachItem.dimension });
 						const coachSturcture = {
@@ -15448,14 +15454,14 @@ let SeatReservationBaseElement = (() => {
 		* Returns the calculated positions and dimensions of graphical, service and area elements
 		* @returns BaseElement
 		*/
-		_getCalculatedDimensionPositionElement(element, coachDimension, isCalcAreaElement) {
+		_getCalculatedDimensionPositionElement(element, coachDimension, elementType) {
 			const dim = { ...element.dimension };
 			const pos = { ...element.position };
 			const rotation = element.rotation || 0;
 			const isNotFixedRotationGraphicalElement = this.notAreaElements.concat(this.notFixedRotatableAreaIcons).indexOf(element.icon) === -1;
 			const calcRotation = this.alignVertical && isNotFixedRotationGraphicalElement ? rotation - 90 : rotation;
 			let areaMounting = null;
-			if (isCalcAreaElement) {
+			if (elementType === "AREA") {
 				const isNotTableGraphic = element.icon?.indexOf("TABLE") === -1;
 				const areaProperty = element.icon && isNotTableGraphic ? element.icon : null;
 				const stretchHeight = this.isElementDirectlyOnBorder(element, coachDimension) && areaProperty !== "ENTRY_EXIT";
@@ -15467,7 +15473,7 @@ let SeatReservationBaseElement = (() => {
 					if (!stretchHeight) pos.y += this.coachBorderOffset - this.coachBorderOffset / 3;
 				}
 				if (stretchHeight) dim.h += this.coachBorderOffset - this.coachBorderOffset / 3;
-			} else {
+			} else if (elementType === "OTHER") {
 				if (element.position.y === 0) pos.y -= this.coachBorderOffset;
 				if (coachDimension.h === element.position.y + element.dimension.h) dim.h += this.coachBorderOffset * 2;
 			}
@@ -15559,7 +15565,7 @@ let SeatReservationBaseElement = (() => {
 
 //#endregion
 //#region src/elements-experimental/seat-reservation/seat-reservation/seat-reservation.scss?inline
-var seat_reservation_default = ":host {\n  --sbb-seat-reservation-grid-size: 16px;\n  --sbb-seat-reservation-height: 0;\n  --sbb-seat-reservation-decks: 1;\n  display: block;\n  height: inherit;\n}\n:host ::part(coach-floor) {\n  fill: var(--sbb-background-color-2);\n}\n@media (forced-colors: active) {\n  :host ::part(coach-floor) {\n    fill: transparent;\n  }\n}\n\n:host(:dir(rtl)) :not(.sbb-sr-place-ctrl--type-bicycle,\n.sbb-sr-place-ctrl--orientation-90,\n.sbb-sr-place-ctrl--orientation-270,\n.sbb-sr-place-ctrl--state-selected) ::part(coach-floor) {\n  rotate: calc(180 * 1deg);\n}\n\n.sbb-sr-popover {\n  margin-block: calc(4 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n}\n\n:host([align-vertical]) .sbb-sr__component {\n  flex-direction: row-reverse;\n  justify-content: flex-end;\n  gap: calc(22 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n  height: inherit;\n}\n@media (min-width: calc(37.5rem)) {\n  :host([align-vertical]) .sbb-sr__component {\n    gap: calc(54 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n  }\n}\n:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation,\n:host([align-vertical]) .sbb-sr__component ul.sbb-sr-navigation__list-coaches {\n  flex-direction: column;\n}\n:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation {\n  padding: calc(16 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem)) 0;\n}\n:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation .sbb-sr__navigation-control-button {\n  left: calc(1 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n  top: 0;\n  rotate: 90deg;\n}\n@media (min-width: calc(64rem)) {\n  :host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation .sbb-sr__navigation-control-button {\n    left: calc(-1 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n  }\n}\n:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation ul.sbb-sr-navigation__list-coaches {\n  max-width: initial;\n  padding: calc(5 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n  overflow: hidden scroll;\n}\n:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation ul.sbb-sr-navigation__list-coaches li {\n  display: flex;\n}\n:host([align-vertical]) .sbb-sr__wrapper-coach-decks {\n  flex-direction: column;\n}\n:host([align-vertical]) .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels {\n  flex-direction: column-reverse;\n  width: calc((var(--sbb-seat-reservation-height) + 24) * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n  height: initial;\n}\n:host([align-vertical]) .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels b {\n  inline-size: calc(50% - 16 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n  block-size: calc(20 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n  margin-bottom: calc(16 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n  rotate: initial;\n  writing-mode: initial;\n}\n:host([align-vertical]) .sbb-sr__wrapper-scrollarea {\n  width: calc((var(--sbb-seat-reservation-height) + 24) * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n  height: 100%;\n  overflow: hidden scroll;\n}\n:host([align-vertical]) .sbb-sr__wrapper-scrollarea .sbb-sr__parent {\n  rotate: 90deg;\n}\n:host([align-vertical]) .sbb-sr-travel-direction-wrapper {\n  width: calc(var(--sbb-seat-reservation-height) * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n  margin-block-start: calc(4 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n}\n\n.sbb-sr-navigation {\n  gap: calc(3 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n}\n\n.sbb-sr-navigation .sbb-sr__navigation-control-button {\n  position: relative;\n  top: calc(2 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n}\n@media (min-width: calc(64rem)) {\n  .sbb-sr-navigation .sbb-sr__navigation-control-button {\n    top: 0;\n  }\n}\n\n.sbb-sr__component {\n  display: flex;\n  flex-direction: column;\n  gap: calc(64 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem) - 16px);\n}\n\n.sbb-sr-travel-direction-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  column-gap: calc(4 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n  margin-block: calc(8 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem)) calc(4 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n  font-size: var(--sbb-text-font-size-s);\n}\n.sbb-sr-travel-direction-wrapper .sbb-sr__travel-direction--arrow {\n  display: flex;\n  align-items: center;\n}\n\n.sbb-sr-navigation-wrapper {\n  display: flex;\n}\n\n.sbb-sr-navigation {\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  padding-inline: 16px;\n}\n\n.sbb-sr-navigation__list-coaches {\n  display: flex;\n  flex-wrap: nowrap;\n  gap: calc(4 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n  padding: calc(6 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem)) calc(5 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem)) 0;\n  max-width: 856px;\n  --sbb-scrollbar-color: transparent;\n  overflow: scroll hidden;\n  position: relative;\n}\n\n.sbb-sr__wrapper-coach-decks {\n  display: flex;\n  overflow: hidden;\n  height: inherit;\n}\n.sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels {\n  display: flex;\n  justify-content: space-between;\n  height: calc(var(--sbb-seat-reservation-height) * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n  writing-mode: vertical-lr;\n}\n.sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels b {\n  height: calc(50% - 16 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n  width: calc(20 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n  margin-block-end: 16px;\n  rotate: 180deg;\n  text-align: center;\n  line-height: calc(20 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n}\n\n.sbb-sr__wrapper-scrollarea {\n  overflow: scroll hidden;\n  padding-block: calc(8 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem)) calc(16 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n}\n.sbb-sr__wrapper-scrollarea .sbb-sr__parent {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n}\n\n.sbb-sr__list-decks {\n  display: flex;\n  flex-direction: column;\n}\n\n.sbb-sr__list-decks--gap {\n  gap: calc(48 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n}\n\n.sbb-sr__list-item-deck {\n  position: relative;\n}\n\n.sbb-sr__list-coaches {\n  display: flex;\n  gap: calc(4 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n}\n\n.sbb-sr__list-decks:has(.sbb-sr-coach-has-overhanging-elements) .sbb-sr__list-coaches {\n  gap: calc(8 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n}\n\n.sbb-sr__item-coach {\n  position: relative;\n}\n\n.sbb-sr-coach-wrapper__table {\n  outline: 0;\n}\n";
+var seat_reservation_default = ":host {\n  --sbb-seat-reservation-grid-size: 16px;\n  --sbb-seat-reservation-height: 0;\n  --sbb-seat-reservation-decks: 1;\n  display: block;\n  height: inherit;\n}\n:host ::part(coach-floor) {\n  fill: var(--sbb-background-color-2);\n}\n@media (forced-colors: active) {\n  :host ::part(coach-floor) {\n    fill: transparent;\n  }\n}\n\n:host(:dir(rtl)) :not(.sbb-sr-place-ctrl--type-bicycle,\n.sbb-sr-place-ctrl--orientation-90,\n.sbb-sr-place-ctrl--orientation-270,\n.sbb-sr-place-ctrl--state-selected) ::part(coach-floor) {\n  rotate: calc(180 * 1deg);\n}\n\n.sbb-sr-popover {\n  margin-block: calc(4 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n}\n\n:host([align-vertical]) .sbb-sr__component {\n  flex-direction: row-reverse;\n  justify-content: flex-end;\n  gap: calc(22 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n  height: inherit;\n}\n@media (min-width: calc(37.5rem)) {\n  :host([align-vertical]) .sbb-sr__component {\n    gap: calc(54 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n  }\n}\n:host([align-vertical]) .sbb-sr__component--has-travel-direction {\n  padding-block-start: calc(36 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n}\n:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation,\n:host([align-vertical]) .sbb-sr__component ul.sbb-sr-navigation__list-coaches {\n  flex-direction: column;\n}\n:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation {\n  padding: calc(16 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem)) 0;\n}\n:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation .sbb-sr__navigation-control-button {\n  left: calc(1 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n  top: 0;\n  rotate: 90deg;\n}\n@media (min-width: calc(64rem)) {\n  :host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation .sbb-sr__navigation-control-button {\n    left: calc(-1 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n  }\n}\n:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation ul.sbb-sr-navigation__list-coaches {\n  max-width: initial;\n  padding: calc(5 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n  overflow: hidden scroll;\n}\n:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation ul.sbb-sr-navigation__list-coaches li {\n  display: flex;\n}\n:host([align-vertical]) .sbb-sr__wrapper-coach-decks {\n  flex-direction: column;\n}\n:host([align-vertical]) .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels {\n  flex-direction: column-reverse;\n  width: calc((var(--sbb-seat-reservation-height) + 24) * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n  height: initial;\n}\n:host([align-vertical]) .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels b {\n  inline-size: calc(50% - 16 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n  block-size: calc(20 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n  margin-bottom: calc(16 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n  rotate: initial;\n  writing-mode: initial;\n}\n:host([align-vertical]) .sbb-sr__wrapper-scrollarea {\n  width: calc((var(--sbb-seat-reservation-height) + 24) * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n  height: 100%;\n  overflow: hidden scroll;\n}\n:host([align-vertical]) .sbb-sr__wrapper-scrollarea .sbb-sr__parent {\n  rotate: 90deg;\n}\n:host([align-vertical]) .sbb-sr-travel-direction-wrapper {\n  width: calc(var(--sbb-seat-reservation-height) * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n  margin-block-start: calc(4 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n  position: absolute;\n}\n\n.sbb-sr-navigation {\n  gap: calc(3 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n}\n\n.sbb-sr-navigation .sbb-sr__navigation-control-button {\n  position: relative;\n  top: calc(2 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n}\n@media (min-width: calc(64rem)) {\n  .sbb-sr-navigation .sbb-sr__navigation-control-button {\n    top: 0;\n  }\n}\n\n.sbb-sr__component {\n  display: flex;\n  flex-direction: column;\n  gap: calc(64 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem) - 16px);\n}\n\n.sbb-sr-travel-direction-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  column-gap: calc(4 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n  margin-block: calc(8 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem)) calc(4 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n  font-size: var(--sbb-text-font-size-s);\n}\n.sbb-sr-travel-direction-wrapper .sbb-sr__travel-direction--arrow {\n  display: flex;\n  align-items: center;\n}\n\n.sbb-sr-navigation-wrapper {\n  display: flex;\n}\n\n.sbb-sr-navigation {\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  padding-inline: 16px;\n}\n\n.sbb-sr-navigation__list-coaches {\n  display: flex;\n  flex-wrap: nowrap;\n  gap: calc(4 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n  padding: calc(6 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem)) calc(5 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem)) 0;\n  max-width: 856px;\n  --sbb-scrollbar-color: transparent;\n  overflow: scroll hidden;\n  position: relative;\n}\n\n.sbb-sr__wrapper-coach-decks {\n  display: flex;\n  overflow: hidden;\n  height: inherit;\n}\n.sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels {\n  display: flex;\n  justify-content: space-between;\n  height: calc(var(--sbb-seat-reservation-height) * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n  writing-mode: vertical-lr;\n}\n.sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels b {\n  height: calc(50% - 16 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n  width: calc(20 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n  margin-block-end: 16px;\n  rotate: 180deg;\n  text-align: center;\n  line-height: calc(20 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n}\n\n.sbb-sr__wrapper-scrollarea {\n  overflow: scroll hidden;\n  padding-block: calc(8 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem)) calc(16 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n}\n.sbb-sr__wrapper-scrollarea .sbb-sr__parent {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n}\n\n.sbb-sr__list-decks {\n  display: flex;\n  flex-direction: column;\n}\n\n.sbb-sr__list-decks--gap {\n  gap: calc(48 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n}\n\n.sbb-sr__list-item-deck {\n  position: relative;\n}\n\n.sbb-sr__list-coaches {\n  display: flex;\n  gap: calc(4 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n}\n\n.sbb-sr__list-decks:has(.sbb-sr-coach-has-overhanging-elements) .sbb-sr__list-coaches {\n  gap: calc(8 * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));\n}\n\n.sbb-sr__item-coach {\n  position: relative;\n}\n\n.sbb-sr-coach-wrapper__table {\n  outline: 0;\n}\n";
 
 //#endregion
 //#region src/elements-experimental/seat-reservation/seat-reservation/seat-reservation.component.ts
@@ -15612,7 +15618,12 @@ var SbbSeatReservationElement = class extends SeatReservationBaseElement {
 	_initVehicleSeatReservationConstruction() {
 		this._coachesHtmlTemplate = html`
       ${this._renderTravelDirection()}
-      <div class="sbb-sr__component">
+      <div
+        class="${classMap({
+			"sbb-sr__component": true,
+			"sbb-sr__component--has-travel-direction": this.hasTravelDirection()
+		})}"
+      >
         ${this._renderNavigation()}
         <div
           class="sbb-sr__wrapper-coach-decks"
@@ -15649,7 +15660,8 @@ var SbbSeatReservationElement = class extends SeatReservationBaseElement {
 	_renderDeckLabels() {
 		if (!this.hasMultipleDecks) return null;
 		return this.seatReservations.map((seatReservation) => {
-			return html`<b aria-hidden="true">${getI18nSeatReservation(seatReservation.deckCoachLevel, this._language.current)}</b>`;
+			const deckDescription = getI18nSeatReservation(seatReservation.deckCoachLevel, this._language.current);
+			return html`<b aria-hidden="true">${deckDescription}</b>`;
 		});
 	}
 	_renderNavigationControlButton(btnDirection) {
@@ -15677,11 +15689,12 @@ var SbbSeatReservationElement = class extends SeatReservationBaseElement {
     </div>`;
 	}
 	_renderTravelDirection() {
-		if (!this.travelDirection || this.travelDirection === "NONE") return null;
+		if (!this.hasTravelDirection()) return null;
 		const labelText = getI18nSeatReservation("SEAT_RESERVATION_TRAVEL_DIRECTION", this._language.current);
+		const iconName = `arrow-${this.alignVertical ? this.travelDirection === "RIGHT" ? "down" : "up" : this.travelDirection === "RIGHT" ? "right" : "left"}-small`;
 		return html`<div class="sbb-sr-travel-direction-wrapper">
       <div class="sbb-sr__travel-direction--arrow">
-        <sbb-icon slot="icon" name="${`arrow-${this.alignVertical ? this.travelDirection === "RIGHT" ? "down" : "up" : this.travelDirection === "RIGHT" ? "right" : "left"}-small`}"></sbb-icon>
+        <sbb-icon slot="icon" name="${iconName}"></sbb-icon>
       </div>
       <div class="sbb-sr__travel-direction--label">${labelText}</div>
     </div>`;

package/development/timetable-row.pure.js

@@ -1438,7 +1438,8 @@ const lightFormatters = {
 	S(date, token) {
 		const numberOfDigits = token.length;
 		const milliseconds = date.getMilliseconds();
-		return addLeadingZeros(Math.trunc(milliseconds * Math.pow(10, numberOfDigits - 3)), token.length);
+		const fractionalSeconds = Math.trunc(milliseconds * Math.pow(10, numberOfDigits - 3));
+		return addLeadingZeros(fractionalSeconds, token.length);
 	}
 };
 
@@ -1476,15 +1477,20 @@ const formatters = {
 	Y: function(date, token, localize, options) {
 		const signedWeekYear = getWeekYear(date, options);
 		const weekYear = signedWeekYear > 0 ? signedWeekYear : 1 - signedWeekYear;
-		if (token === "YY") return addLeadingZeros(weekYear % 100, 2);
+		if (token === "YY") {
+			const twoDigitYear = weekYear % 100;
+			return addLeadingZeros(twoDigitYear, 2);
+		}
 		if (token === "Yo") return localize.ordinalNumber(weekYear, { unit: "year" });
 		return addLeadingZeros(weekYear, token.length);
 	},
 	R: function(date, token) {
-		return addLeadingZeros(getISOWeekYear(date), token.length);
+		const isoWeekYear = getISOWeekYear(date);
+		return addLeadingZeros(isoWeekYear, token.length);
 	},
 	u: function(date, token) {
-		return addLeadingZeros(date.getFullYear(), token.length);
+		const year = date.getFullYear();
+		return addLeadingZeros(year, token.length);
 	},
 	Q: function(date, token, localize) {
 		const quarter = Math.ceil((date.getMonth() + 1) / 3);
@@ -1827,7 +1833,8 @@ const formatters = {
 		}
 	},
 	t: function(date, token, _localize) {
-		return addLeadingZeros(Math.trunc(+date / 1e3), token.length);
+		const timestamp = Math.trunc(+date / 1e3);
+		return addLeadingZeros(timestamp, token.length);
 	},
 	T: function(date, token, _localize) {
 		return addLeadingZeros(+date, token.length);
@@ -1887,9 +1894,7 @@ const dateTimeLongFormatter = (pattern, formatLong) => {
 		case "PPP":
 			dateTimeFormat = formatLong.dateTime({ width: "long" });
 			break;
-		default:
-			dateTimeFormat = formatLong.dateTime({ width: "full" });
-			break;
+		default: dateTimeFormat = formatLong.dateTime({ width: "full" });
 	}
 	return dateTimeFormat.replace("{{date}}", dateLongFormatter(datePattern, formatLong)).replace("{{time}}", timeLongFormatter(timePattern, formatLong));
 };

package/easter-egg.js

@@ -0,0 +1 @@
+import{SbbEasterEggElement as e}from"./easter-egg.pure.js";export*from"./easter-egg.pure.js";e.define();