@sbb-esta/lyne-elements-experimental 3.2.0 → 3.3.0

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

@@ -1,11 +1,11 @@
-import { __esDecorate as $, __runInitializers as x } from "tslib";
-import { SbbLanguageController as A } from "@sbb-esta/lyne-elements/core/controllers.js";
-import { css as S, isServer as y, html as b, nothing as v } from "lit";
-import { customElement as R } from "lit/decorators.js";
-import { classMap as k } from "lit/directives/class-map.js";
+import { __esDecorate as C, __runInitializers as S } from "tslib";
+import { SbbLanguageController as y } from "@sbb-esta/lyne-elements/core/controllers.js";
+import { css as A, isServer as R, html as b, nothing as v } from "lit";
+import { customElement as E } from "lit/decorators.js";
+import { classMap as m } from "lit/directives/class-map.js";
 import { styleMap as g } from "lit/directives/style-map.js";
 import { getI18nSeatReservation as n } from "../common.js";
-import { SeatReservationBaseElement as E } from "./seat-reservation-base-element.js";
+import { SeatReservationBaseElement as P } from "./seat-reservation-base-element.js";
 import "@sbb-esta/lyne-elements/button.js";
 import "@sbb-esta/lyne-elements/screen-reader-only.js";
 import "../seat-reservation-area.js";
@@ -14,14 +14,14 @@ import "../seat-reservation-place-control.js";
 import "../seat-reservation-navigation-coach.js";
 import "../seat-reservation-scoped.js";
 import "@sbb-esta/lyne-elements/popover/popover.js";
-const P = S`*,:before,:after{box-sizing:border-box}:host{--sbb-seat-reservation-grid-size: 16px;--sbb-seat-reservation-coach-height: 0;display:block;height:inherit}:host ::part(coach-floor){fill:var(--sbb-color-white)}@media (forced-colors: active){:host ::part(coach-floor){fill:transparent}}:host(:dir(rtl)) :not(.sbb-sr-place-ctrl--type-bicycle,.sbb-sr-place-ctrl--orientation-90,.sbb-sr-place-ctrl--orientation-270,.sbb-sr-place-ctrl--state-selected) ::part(coach-floor){rotate:180deg}[popover]:where(sbb-popover){margin:0;padding:0;border:none;width:auto;height:auto;background-color:transparent;color:inherit;pointer-events:none}.sbb-sr__container{display:flex;height:inherit}.sbb-sr__grid{display:grid;grid-template-columns:20% 1fr 20%;grid-template-rows:auto auto}.sbb-sr__grid .sbb-sr-navigation-first-grid,.sbb-sr__grid .sbb-sr-navigation-last-grid{grid-row-start:1;position:relative}.sbb-sr__grid .sbb-sr-navigation-first-grid{grid-column:1/2}.sbb-sr__grid .sbb-sr-navigation-last-grid{grid-column:3/4}.sbb-sr__grid .sbb-sr__component{display:flex;grid-column:1/4;grid-row:1/3}.sbb-sr__grid .sbb-sr-grid-inner{display:grid;grid-template-columns:20% 60% 20%;grid-template-rows:auto 1fr;grid-gap:0}.sbb-sr__grid .sbb-sr-grid-inner .nav-grid{grid-column:2/3;grid-row:1/2;display:inherit}.sbb-sr__grid .sbb-sr-grid-inner .coaches-grid{grid-column:1/4;grid-row:2/3;display:inherit}.sbb-sr__grid .sbb-sr-grid-inner .coaches-grid .sbb-sr__wrapper{overflow:hidden}.sbb-sr__navigation-control-button{position:absolute;z-index:10}.sbb-sr__navigation-control-button#first-tab-element{inset-inline-end:var(--sbb-spacing-fixed-2x)}.sbb-sr__navigation-control-button#last-tab-element{inset-inline-start:var(--sbb-spacing-fixed-2x)}.sbb-sr-navigation-wrapper{overflow:hidden;padding-block:0 var(--sbb-spacing-fixed-8x)}.sbb-sr-navigation{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-sr-navigation::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sr-navigation::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sr-navigation::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-sr-navigation::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-sr-navigation::-webkit-scrollbar-button,.sbb-sr-navigation::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-sr-navigation{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-sr-navigation{--sbb-scrollbar-color: var(--sbb-color-white-alpha-0);display:flex;overflow:scroll hidden;position:relative}.sbb-sr-navigation__list-coaches{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-wrap:nowrap;gap:var(--sbb-spacing-fixed-1x);padding:.125rem}.sbb-sr__parent{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-sr__parent::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sr__parent::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sr__parent::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-sr__parent::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-sr__parent::-webkit-scrollbar-button,.sbb-sr__parent::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-sr__parent{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-sr__parent{overflow-x:scroll;padding-block:var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x)}.sbb-sr__list-coaches{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;gap:.25rem}.sbb-sr__item-coach{position:relative}.sbb-sr-popover{margin:0}.sbb-sr-coach-wrapper__table{outline:0}.sbb-sr.sbb-sr__grid--vertical{grid-template-columns:calc((var(--sbb-seat-reservation-coach-height) + 28) * var(--sbb-seat-reservation-one-px-rem)) 1fr;grid-template-rows:20% 60% 20%}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-navigation-first-grid{grid-column:2/3;grid-row-start:1}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-navigation-first-grid #first-tab-element{position:absolute;inset-block-end:var(--sbb-spacing-fixed-4x);inset-inline-start:var(--sbb-spacing-fixed-8x);inset-inline-end:initial;rotate:90deg}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-navigation-last-grid{grid-column:2/3;grid-row:3/4}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-navigation-last-grid #last-tab-element{inset-block-start:var(--sbb-spacing-fixed-4x);inset-inline-start:var(--sbb-spacing-fixed-8x);rotate:90deg}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-navigation-wrapper{padding-block-end:initial;padding-inline-start:var(--sbb-spacing-fixed-8x)}.sbb-sr.sbb-sr__grid--vertical .sbb-sr__component{grid-column:1/3;grid-row:1/4}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner{grid-template-columns:calc((var(--sbb-seat-reservation-coach-height) + 28) * var(--sbb-seat-reservation-one-px-rem)) 1fr;grid-template-rows:20% 60% 20%}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .nav-grid{grid-column:2/3;grid-row:2/3;height:100%}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .nav-grid .sbb-sr-navigation{display:block;overflow:hidden scroll;height:100%}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .nav-grid .sbb-sr-navigation .sbb-sr-navigation__list-coaches{flex-direction:column;padding:.125rem}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid{grid-column:1/2;grid-row:1/4;overflow:hidden;position:relative}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid .sbb-sr__parent{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid .sbb-sr__parent::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid .sbb-sr__parent::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid .sbb-sr__parent::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid .sbb-sr__parent::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid .sbb-sr__parent::-webkit-scrollbar-button,.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid .sbb-sr__parent::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid .sbb-sr__parent{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid .sbb-sr__parent{overflow:hidden scroll;padding:0 var(--sbb-spacing-fixed-4x) 0 0;height:100%}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid .sbb-sr__parent .sbb-sr__list-coaches{rotate:90deg;transform-origin:calc((var(--sbb-seat-reservation-coach-height) / 2 - 3) * var(--sbb-seat-reservation-one-px-rem)) calc((var(--sbb-seat-reservation-coach-height) / 2 - 3) * var(--sbb-seat-reservation-one-px-rem))}`;
-let q = (() => {
-  var h;
-  let C = [R("sbb-seat-reservation")], u, m = [], d, f = E;
-  return h = class extends f {
+const T = A`*,:before,:after{box-sizing:border-box}:host{--sbb-seat-reservation-grid-size: 16px;--sbb-seat-reservation-height: 0;--sbb-seat-reservation-decks: 1;display:block;height:inherit}:host ::part(coach-floor){fill:var(--sbb-color-white)}@media (forced-colors: active){:host ::part(coach-floor){fill:transparent}}:host(:dir(rtl)) :not(.sbb-sr-place-ctrl--type-bicycle,.sbb-sr-place-ctrl--orientation-90,.sbb-sr-place-ctrl--orientation-270,.sbb-sr-place-ctrl--state-selected) ::part(coach-floor){rotate:180deg}[popover]:where(sbb-popover){margin:0;padding:0;border:none;width:auto;height:auto;background-color:transparent;color:inherit;pointer-events:none}.sbb-sr__container{display:flex;height:inherit}.sbb-sr__grid{display:grid;grid-template-columns:20% 1fr 20%;grid-template-rows:auto auto}.sbb-sr__grid .sbb-sr-navigation-first-grid,.sbb-sr__grid .sbb-sr-navigation-last-grid{grid-row-start:1;position:relative}.sbb-sr__grid .sbb-sr-navigation-first-grid{grid-column:1/2}.sbb-sr__grid .sbb-sr-navigation-last-grid{grid-column:3/4}.sbb-sr__grid .sbb-sr__component{display:flex;grid-column:1/4;grid-row:1/3}.sbb-sr__grid .sbb-sr-grid-inner{display:grid;grid-template-columns:20% 60% 20%;grid-template-rows:auto 1fr;grid-gap:0}.sbb-sr__grid .sbb-sr-grid-inner .nav-grid{grid-column:2/3;grid-row:1/2;display:inherit}.sbb-sr__grid .sbb-sr-grid-inner .coaches-grid{grid-column:1/4;grid-row:2/3;display:inherit}.sbb-sr__navigation-control-button{position:absolute;z-index:10}.sbb-sr__navigation-control-button#first-tab-element{inset-inline-end:calc(8 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr__navigation-control-button#last-tab-element{inset-inline-start:calc(8 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr-navigation-wrapper{overflow:hidden;padding-block:0 calc(32 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr-navigation{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-sr-navigation::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sr-navigation::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sr-navigation::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-sr-navigation::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-sr-navigation::-webkit-scrollbar-button,.sbb-sr-navigation::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-sr-navigation{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-sr-navigation{--sbb-scrollbar-color: var(--sbb-color-white-alpha-0);display:flex;overflow:scroll hidden;position:relative}.sbb-sr-navigation__list-coaches{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-wrap:nowrap;gap:calc(4 * var(--sbb-seat-reservation-one-px-rem, .0625rem));padding:calc(2 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr__wrapper-coach-decks{display:flex;overflow:hidden;height:inherit}.sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels{display:flex;justify-content:space-between;height:calc(var(--sbb-seat-reservation-height) * var(--sbb-seat-reservation-one-px-rem, .0625rem));writing-mode:vertical-lr}.sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels b{height:calc(50% - 16 * var(--sbb-seat-reservation-one-px-rem, .0625rem));width:calc(20 * var(--sbb-seat-reservation-one-px-rem, .0625rem));margin-block-end:16px;rotate:180deg;text-align:center;line-height:calc(20 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr__wrapper{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-sr__wrapper::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sr__wrapper::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sr__wrapper::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-sr__wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-sr__wrapper::-webkit-scrollbar-button,.sbb-sr__wrapper::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-sr__wrapper{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-sr__wrapper{overflow-x:scroll;padding-block:calc(8 * var(--sbb-seat-reservation-one-px-rem, .0625rem)) calc(16 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr__wrapper .sbb-sr__parent{display:flex;flex-direction:column;position:relative}.sbb-sr__list-decks{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-direction:column}.sbb-sr__list-decks--gap{gap:calc(48 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr__list-item-deck{position:relative}.sbb-sr__list-coaches{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;gap:calc(4 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr__item-coach{position:relative}.sbb-sr-popover{margin:0}.sbb-sr-coach-wrapper__table{outline:0}.sbb-sr.sbb-sr__grid--vertical{grid-template-columns:calc((var(--sbb-seat-reservation-height) + 24) * var(--sbb-seat-reservation-one-px-rem, .0625rem)) 1fr;grid-template-rows:20% 60% 20%}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-navigation-first-grid{grid-column:2/3;grid-row-start:1}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-navigation-first-grid #first-tab-element{position:absolute;inset-block-end:calc(16 * var(--sbb-seat-reservation-one-px-rem, .0625rem));inset-inline-start:calc(16 * var(--sbb-seat-reservation-one-px-rem, .0625rem));inset-inline-end:initial;rotate:90deg}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-navigation-last-grid{grid-column:2/3;grid-row:3/4}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-navigation-last-grid #last-tab-element{inset-block-start:calc(16 * var(--sbb-seat-reservation-one-px-rem, .0625rem));inset-inline-start:calc(16 * var(--sbb-seat-reservation-one-px-rem, .0625rem));rotate:90deg}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-navigation-wrapper{padding-block-end:initial;padding-inline-start:calc(16 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr.sbb-sr__grid--vertical .sbb-sr__component{grid-column:1/3;grid-row:1/4}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner{grid-template-columns:calc((var(--sbb-seat-reservation-height) + 24) * var(--sbb-seat-reservation-one-px-rem, .0625rem)) 1fr;grid-template-rows:20% 60% 20%}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .nav-grid{grid-column:2/3;grid-row:2/3;height:100%}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .nav-grid .sbb-sr-navigation{display:block;overflow:hidden scroll;height:100%}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .nav-grid .sbb-sr-navigation .sbb-sr-navigation__list-coaches{flex-direction:column;padding:calc(2 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid{grid-column:1/2;grid-row:1/4;overflow:hidden;position:relative}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid .sbb-sr__wrapper-coach-decks{flex-direction:column}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels{flex-direction:column-reverse;width:calc(100% - 24 * var(--sbb-seat-reservation-one-px-rem, .0625rem));height:initial}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels b{width:calc(50% - 16 * var(--sbb-seat-reservation-one-px-rem, .0625rem));height:calc(20 * var(--sbb-seat-reservation-one-px-rem, .0625rem));margin-bottom:16px;rotate:initial;writing-mode:initial}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper::-webkit-scrollbar-button,.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper{overflow:hidden scroll;height:100%;padding:0}.sbb-sr.sbb-sr__grid--vertical .sbb-sr-grid-inner .coaches-grid .sbb-sr__wrapper-coach-decks .sbb-sr__parent{rotate:90deg;transform-origin:calc((var(--sbb-seat-reservation-height) + 24 - 24 - 6 * (var(--sbb-seat-reservation-decks) - 1)) / 2 * var(--sbb-seat-reservation-one-px-rem, .0625rem)) calc((var(--sbb-seat-reservation-height) + 24 - 24 - 6 * (var(--sbb-seat-reservation-decks) - 1)) / 2 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}`;
+let K = (() => {
+  var d;
+  let $ = [E("sbb-seat-reservation")], w, f = [], c, k = P;
+  return d = class extends k {
     constructor() {
-      super(...arguments), this._language = new A(this), this._notAreaElements = [
-        "DRIVER_AREA_FULL",
+      super(...arguments), this._language = new y(this), this._notAreaElements = [
+        "DRIVER_AREA",
         "COACH_PASSAGE",
         "COACH_WALL_NO_PASSAGE",
         "COMPARTMENT_PASSAGE",
@@ -31,25 +31,25 @@ let q = (() => {
       ], this._notFixedRotatableAreaIcons = ["ENTRY_EXIT"];
     }
     willUpdate(r) {
-      super.willUpdate(r), r.has("hasNavigation") && (this.hasNavigation ? this.shadowRoot?.querySelectorAll("table").forEach((s) => s.removeAttribute("tabindex")) : this.shadowRoot?.querySelectorAll("table").forEach((s) => s.setAttribute("tabindex", "0")));
+      super.willUpdate(r), r.has("hasNavigation") && (this.hasNavigation ? this.shadowRoot?.querySelectorAll("table").forEach((e) => e.removeAttribute("tabindex")) : this.shadowRoot?.querySelectorAll("table").forEach((e) => e.setAttribute("tabindex", "0")));
     }
     firstUpdated(r) {
       super.firstUpdated(r), this.updateComplete.then(() => {
-        this.initNavigationSelectionByScrollEvent();
+        this.initPrepairSeatReservationData(), this.initNavigationSelectionByScrollEvent(), this.requestUpdate();
       });
     }
     render() {
-      return y || this._determineBaseFontSize(), this._initVehicleSeatReservationConstruction(), this._coachesHtmlTemplate || null;
+      return R || this._determineBaseFontSize(), this._initVehicleSeatReservationConstruction(), this._coachesHtmlTemplate || null;
     }
     _determineBaseFontSize() {
-      const s = 1 / parseInt(window.getComputedStyle(document.body).fontSize, 10);
-      this.style?.setProperty("--sbb-seat-reservation-one-px-rem", `${s + "rem"}`);
+      const e = 1 / parseInt(window.getComputedStyle(document.body).fontSize, 10);
+      this.style?.setProperty("--sbb-seat-reservation-one-px-rem", `${e + "rem"}`);
     }
     _initVehicleSeatReservationConstruction() {
-      const r = JSON.parse(JSON.stringify(this.seatReservation?.coachItems)), s = this.alignVertical ? "sbb-sr__grid--vertical" : "";
+      const r = this.alignVertical ? "sbb-sr__grid--vertical" : "";
       this._coachesHtmlTemplate = b`
       <div class="sbb-sr__container">
-        <div class="sbb-sr sbb-sr__grid ${s}">
+        <div class="sbb-sr sbb-sr__grid ${r}">
           <div class="sbb-sr-navigation-first-grid">
             ${this._renderNavigationControlButton("DIRECTION_LEFT")}
           </div>
@@ -60,11 +60,23 @@ let q = (() => {
             <div class="sbb-sr-grid-inner">
               <div class="nav-grid">${this._renderNavigation()}</div>
               <div class="coaches-grid">
-                <div class="sbb-sr__wrapper">
-                  <div id="sbb-sr__parent-area" class="sbb-sr__parent" tabindex="-1">
-                    <ul class="sbb-sr__list-coaches" role="presentation">
-                      ${this._renderCoaches(r)}
-                    </ul>
+                <div class="sbb-sr__wrapper-coach-decks">
+                  <div class="sbb-sr__wrapper-deck-labels">${this._renderDeckLabels()}</div>
+                  <div id="sbb-sr__wrapper-scrollarea" class="sbb-sr__wrapper">
+                    <div id="sbb-sr__parent-area" class="sbb-sr__parent" tabindex="-1">
+                      <ul
+                        class="${m({
+        "sbb-sr__list-decks": !0,
+        "sbb-sr__list-decks--gap": this.hasMultipleDecks
+      })}"
+                      >
+                        ${this.seatReservations?.map((e, t) => b`<li class="sbb-sr__list-item-deck">
+                              <ul class="sbb-sr__list-coaches" role="presentation">
+                                ${this._renderCoaches(e, t)}
+                              </ul>
+                            </li>`)}
+                      </ul>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -77,91 +89,100 @@ let q = (() => {
       </div>
     `;
     }
+    _renderDeckLabels() {
+      return this.hasMultipleDecks ? this.seatReservations.map((r) => {
+        const e = n(r.deckCoachLevel, this._language.current);
+        return b`<b aria-hidden="true">${e}</b>`;
+      }) : null;
+    }
     _renderNavigationControlButton(r) {
-      if (!this.hasNavigation)
+      if (!this.hasNavigation || !this.seatReservations)
         return null;
-      const s = r == "DIRECTION_RIGHT" ? "last-tab-element" : "first-tab-element", e = r == "DIRECTION_RIGHT" ? "arrow-right-small" : "arrow-left-small", t = r == "DIRECTION_RIGHT" ? n("SEAT_RESERVATION_END", this._language.current) : n("SEAT_RESERVATION_BEGIN", this._language.current);
-      let i = !0;
-      return (r == "DIRECTION_LEFT" && this.selectedCoachIndex > 0 || r == "DIRECTION_RIGHT" && this.selectedCoachIndex < this.seatReservation.coachItems.length - 1) && (i = !1), b`<sbb-secondary-button
+      const e = r == "DIRECTION_RIGHT" ? "last-tab-element" : "first-tab-element", t = r == "DIRECTION_RIGHT" ? "arrow-right-small" : "arrow-left-small", s = r == "DIRECTION_RIGHT" ? n("SEAT_RESERVATION_END", this._language.current) : n("SEAT_RESERVATION_BEGIN", this._language.current);
+      let a = !0;
+      return (r == "DIRECTION_LEFT" && this.selectedCoachIndex > 0 || r == "DIRECTION_RIGHT" && this.selectedCoachIndex < this.seatReservations[this.currSelectedDeckIndex].coachItems.length - 1) && (a = !1), b`<sbb-secondary-button
       @click="${() => this.navigateByDirectionBtn(r)}"
-      id="${s}"
+      id="${e}"
       class="sbb-sr__navigation-control-button"
       size="s"
-      icon-name="${e}"
+      icon-name="${t}"
       type="button"
-      aria-label="${t}"
+      aria-label="${s}"
       role="contentinfo"
-      .disabledInteractive="${i || v}"
+      .disabledInteractive="${a || v}"
     ></sbb-secondary-button>`;
     }
     _renderNavigation() {
-      return this.hasNavigation ? b`<div class="sbb-sr-navigation-wrapper">
+      return !this.hasNavigation || !this.seatReservations ? null : b`<div class="sbb-sr-navigation-wrapper">
       <nav id="sbb-sr-navigation" class="sbb-sr-navigation">
         <ul
           id="sbb-sr__navigation-list-coaches"
           class="sbb-sr-navigation__list-coaches"
           aria-label="${n("SEAT_RESERVATION_NAVIGATION", this._language.current)}"
         >
-          ${this.seatReservation?.coachItems.map((r, s) => {
-        const e = this.getAvailableFreePlacesNumFromCoach(s);
+          ${this.seatReservations[this.currSelectedDeckIndex]?.coachItems.map((r, e) => {
+        const t = this.getAvailableFreePlacesNumFromCoach(e);
         return b`<li>
-              <sbb-seat-reservation-navigation-coach
-                @selectcoach=${(t) => this._onSelectNavCoach(t)}
-                @focuscoach=${() => this._onFocusNavCoach()}
-                class="${k({
-          "sbb-sr__navigation-coach--hover-scroll": this.hoveredScrollCoachIndex === s
+                <sbb-seat-reservation-navigation-coach
+                  @selectcoach=${(s) => this._onSelectNavCoach(s)}
+                  @focuscoach=${() => this._onFocusNavCoach()}
+                  class="${m({
+          "sbb-sr__navigation-coach--hover-scroll": this.hoveredScrollCoachIndex === e
         })}"
-                index="${s}"
-                coach-id="${r.id}"
-                .freePlacesByType="${e}"
-                .selected=${this.selectedCoachIndex === s}
-                .focused=${this.focusedCoachIndex === s}
-                .propertyIds="${r.propertyIds}"
-                .travelClass="${r.travelClass}"
-                ?driver-area="${!r.places?.length}"
-                ?first="${s === 0}"
-                ?last="${s === this.seatReservation?.coachItems.length - 1}"
-                ?vertical="${this.alignVertical}"
-              >
-              </sbb-seat-reservation-navigation-coach>
-            </li>`;
+                  index="${e}"
+                  coach-id="${r.id}"
+                  .freePlacesByType="${t}"
+                  .selected=${this.selectedCoachIndex === e}
+                  .focused=${this.focusedCoachIndex === e}
+                  .propertyIds="${r.propertyIds}"
+                  .travelClass="${r.travelClass}"
+                  ?driver-area="${!r.places?.length}"
+                  ?first="${r?.driverAreaSide?.left}"
+                  ?last="${r?.driverAreaSide?.right}"
+                  ?vertical="${this.alignVertical}"
+                >
+                </sbb-seat-reservation-navigation-coach>
+              </li>`;
       })}
         </ul>
       </nav>
-    </div>` : null;
+    </div>`;
     }
     /**
      *
      * @param coaches
      * @returns
      */
-    _renderCoaches(r) {
-      return r ? r.map((s, e) => b`
-        <li class="sbb-sr__item-coach">${this._renderCoachElement(s, e)}</li>
+    _renderCoaches(r, e) {
+      const t = JSON.parse(JSON.stringify(r?.coachItems));
+      return t ? t.map((s, a) => b`
+        <li class="sbb-sr__item-coach">
+          ${this._renderCoachElement(s, a, e)}
+        </li>
       `) : null;
     }
-    _renderCoachElement(r, s) {
-      const e = this.getCalculatedDimension(r.dimension), t = this._getDescriptionTableCoach(r, s);
+    _renderCoachElement(r, e, t) {
+      const s = this.getCalculatedDimension(r.dimension), a = this._getDescriptionTableCoach(r, e);
       return b`<sbb-seat-reservation-scoped
       style=${g({
-        "--sbb-seat-reservation-scoped-width": e.w,
-        "--sbb-seat-reservation-scoped-height": e.h
+        "--sbb-seat-reservation-scoped-width": s.w,
+        "--sbb-seat-reservation-scoped-height": s.h
       })}
     >
-      ${this._getRenderedCoachBorders(r, s)}
-      ${this._getRenderedGraphicalElements(r.graphicElements || [], r.dimension, s)}
-      ${this._getRenderedServiceElements(s, r.serviceElements)}
+      ${this._getRenderedCoachBorders(r)}
+      ${this._getRenderedGraphicalElements(r.graphicElements || [], r.dimension, e, t)}
+      ${this._getRenderedServiceElements(e, t, r.serviceElements)}
 
       <table
-        @focus=${() => this.onFocusTableCoachAndPreselectPlace(s)}
-        id="sbb-sr-coach-${s}"
+        @focus=${() => this.onFocusTableCoachAndPreselectPlace(e)}
+        id="sbb-sr-coach-${e}"
         class="sbb-sr-coach-wrapper__table"
-        aria-describedby="sbb-sr-coach-caption-${s}"
+        aria-describedby="sbb-sr-coach-caption-${e}"
       >
-        <caption id="sbb-sr-coach-caption-${s}" tabindex="-1">
-          <sbb-screen-reader-only>${t}</sbb-screen-reader-only>
+        <caption id="sbb-sr-coach-caption-${e}" tabindex="-1">
+          <sbb-screen-reader-only>${a}</sbb-screen-reader-only>
         </caption>
-        ${this._getRenderedRowPlaces(r, s)}
+        ${this._getRenderedRowPlaces(r, e, t)}
       </table>
     </sbb-seat-reservation-scoped>`;
     }
@@ -169,15 +190,15 @@ let q = (() => {
      * @returns Returns the border graphic (COACH_BORDER_MIDDLE) of a coach with calculated border gap and coach width,
      * depending on whether the coach is with a driver area or without.
      */
-    _getRenderedCoachBorders(r, s) {
-      const i = r.graphicElements?.find((c) => c.icon === "DRIVER_AREA_FULL"), a = i ? r.dimension.w - i.dimension.w - 1 : r.dimension.w - 2, o = (r.dimension.h + this.coachBorderOffset * 2) * this.baseGridSize, l = s === 0 && i ? i?.dimension.w * this.baseGridSize : this.baseGridSize;
+    _getRenderedCoachBorders(r) {
+      const s = r.graphicElements?.find((l) => l.icon === "DRIVER_AREA"), a = s ? r.dimension.w - s.dimension.w - 1 : r.dimension.w - 2, o = (r.dimension.h + this.coachBorderOffset * 2) * this.baseGridSize, i = s && s.position.x === 0 ? s?.dimension.w * this.baseGridSize : this.baseGridSize;
       return b`
       <sbb-seat-reservation-graphic
         style=${g({
         "--sbb-seat-reservation-graphic-width": a * this.baseGridSize,
         "--sbb-seat-reservation-graphic-height": o,
         "--sbb-seat-reservation-graphic-top": this.coachBorderPadding * -1,
-        "--sbb-seat-reservation-graphic-left": l,
+        "--sbb-seat-reservation-graphic-left": i,
         "--sbb-seat-reservation-graphic-position": "absolute"
       })}
         name="COACH_BORDER_MIDDLE"
@@ -186,54 +207,58 @@ let q = (() => {
       ></sbb-seat-reservation-graphic>
     `;
     }
-    _getRenderedRowPlaces(r, s) {
+    _getRenderedRowPlaces(r, e, t) {
       if (!r.places)
         return null;
-      const e = {};
-      for (const t of r.places)
-        e[t.position.y] ? e[t.position.y].push(t) : e[t.position.y] = [t];
-      return Object.values(e).map((t, i) => b`
-          <tr id="row-${s}-${t[0].position.y}" data-row-index=${i}>
-            ${this._getRenderedColumnPlaces(t, s)}
+      const s = {};
+      for (const a of r.places)
+        s[a.position.y] ? s[a.position.y].push(a) : s[a.position.y] = [a];
+      return Object.values(s).map((a, o) => b`
+          <tr id="row-${e}-${a[0].position.y}" data-row-index=${o}>
+            ${this._getRenderedColumnPlaces(a, e, t)}
           </tr>
-        `).flatMap((t) => t);
+        `).flatMap((a) => a);
     }
-    _getRenderedColumnPlaces(r, s) {
-      return r.sort((e, t) => Number(e.position.x) - Number(t.position.x)), r?.map((e, t) => {
-        const i = this.getCalculatedDimension(e.dimension), a = this.getCalculatedPosition(e.position), o = this.alignVertical ? -90 : 0;
+    _getRenderedColumnPlaces(r, e, t) {
+      return r.sort((s, a) => Number(s.position.x) - Number(a.position.x)), r?.map((s, a) => {
+        const o = this.getCalculatedDimension(s.dimension), i = this.getCalculatedPosition(s.position), l = this.alignVertical ? -90 : 0;
         return b`
-        <td id="cell-${s}-${e.position.y}-${t}" class="graphical-element">
+        <td
+          id="cell-${t}-${e}-${s.position.y}-${a}"
+          class="graphical-element"
+        >
           <sbb-seat-reservation-place-control
             style=${g({
-          "--sbb-seat-reservation-place-control-width": i.w,
-          "--sbb-seat-reservation-place-control-height": i.h,
-          "--sbb-seat-reservation-place-control-top": a.y,
-          "--sbb-seat-reservation-place-control-left": a.x
+          "--sbb-seat-reservation-place-control-width": o.w,
+          "--sbb-seat-reservation-place-control-height": o.h,
+          "--sbb-seat-reservation-place-control-top": i.y,
+          "--sbb-seat-reservation-place-control-left": i.x
         })}
-            @selectplace=${(l) => this._onSelectPlace(l)}
+            @selectplace=${(h) => this._onSelectPlace(h)}
             exportparts="sbb-sr-place-part"
-            id="seat-reservation__place-button-${s}-${e.number}"
+            id="seat-reservation__place-button-${t}-${e}-${s.number}"
             class="seat-reservation-place-control"
-            data-cell-id="${s}-${e.position.y}-${t}"
-            text=${e.number}
-            type=${e.type}
-            state=${e.state}
-            width=${e.dimension.w * this.baseGridSize}
-            height=${e.dimension.h * this.baseGridSize}
-            rotation=${e.rotation ?? v}
-            text-rotation=${o}
-            coach-index=${s}
-            .propertyIds=${e.propertyIds}
+            data-cell-id="${e}-${s.position.y}-${a}"
+            text=${s.number}
+            type=${s.type}
+            state=${s.state}
+            width=${s.dimension.w * this.baseGridSize}
+            height=${s.dimension.h * this.baseGridSize}
+            rotation=${s.rotation ?? v}
+            text-rotation=${l}
+            coach-index=${e}
+            deck-index=${t}
+            .propertyIds=${s.propertyIds}
             .preventClick=${this.preventPlaceClick}
           ></sbb-seat-reservation-place-control>
         </td>
       `;
       });
     }
-    _getRenderedGraphicalElements(r, s, e) {
-      return r ? r?.map((t) => {
-        const i = t.icon ?? "", a = t.rotation || 0, o = this._notFixedRotatableAreaIcons.indexOf(t.icon) === -1, l = this.alignVertical && o ? a - 90 : a;
-        return this._notAreaElements.findIndex((c) => c === i) > -1 ? this._getRenderElementWithoutArea(t, a, s) : this._getRenderElementWithArea(t, l, s, e);
+    _getRenderedGraphicalElements(r, e, t, s) {
+      return r ? r?.map((a) => {
+        const o = a.icon ?? "", i = a.rotation || 0, l = this._notFixedRotatableAreaIcons.indexOf(a.icon) === -1, h = this.alignVertical && l ? i - 90 : i;
+        return this._notAreaElements.findIndex((p) => p === o) > -1 ? this._getRenderElementWithoutArea(a, i, e) : this._getRenderElementWithArea(a, h, e, t, s);
       }) : null;
     }
     /**
@@ -244,95 +269,73 @@ let q = (() => {
      * @param coachIndex used to generate a unique id for the popover trigger
      * @private
      */
-    _getRenderElementWithArea(r, s, e, t) {
-      const i = r.icon?.indexOf("TABLE") === -1, a = r.icon && i ? r.icon : null, o = a !== "ENTRY_EXIT", l = r.icon ? n(r.icon, this._language.current) : v, c = this.getCalculatedDimension(r.dimension, e, !0, o), p = this.getCalculatedPosition(r.position, r.dimension, e, !0), w = `popover-trigger-${t}-${p.x}-${p.y}`;
-      let _ = "free";
-      return r.position.y === this.coachBorderOffset * -1 ? _ = "upper-border" : r.position.y + r.dimension.h === e.h + this.coachBorderOffset && (_ = "lower-border"), b`
+    _getRenderElementWithArea(r, e, t, s, a) {
+      const o = r.icon?.indexOf("TABLE") === -1, i = r.icon && o ? r.icon : null, l = i !== "ENTRY_EXIT", h = r.icon ? n(r.icon, this._language.current) : v, p = this.getCalculatedDimension(r.dimension, t, !0, l), _ = this.getCalculatedPosition(r.position, r.dimension, t, !0), x = `popover-trigger-${a}-${s}-${_.x}-${_.y}`;
+      let u = "free";
+      return r.position.y === this.coachBorderOffset * -1 ? u = "upper-border" : r.position.y + r.dimension.h === t.h + this.coachBorderOffset && (u = "lower-border"), b`
       <sbb-seat-reservation-area
-        id="${w}"
+        id="${x}"
+        class="${m({ "sbb-seat-reservation-area--cursor-pointer": i !== null })}"
         style=${g({
-        "--sbb-seat-reservation-area-width": c.w,
-        "--sbb-seat-reservation-area-height": c.h,
-        "--sbb-seat-reservation-area-top": p.y,
-        "--sbb-seat-reservation-area-left": p.x
+        "--sbb-seat-reservation-area-width": p.w,
+        "--sbb-seat-reservation-area-height": p.h,
+        "--sbb-seat-reservation-area-top": _.y,
+        "--sbb-seat-reservation-area-left": _.x
       })}
-        mounting=${_}
+        mounting=${u}
         background="dark"
         aria-hidden="true"
       >
-        ${a ? b`
+        ${i ? b`
               <sbb-seat-reservation-graphic
-                style=${g({
-        "--sbb-seat-reservation--cursor-pointer": "pointer"
-      })}
-                name=${a}
+                name=${i}
                 width=${this.baseGridSize}
                 height=${this.baseGridSize}
-                rotation=${s}
+                rotation=${e}
                 role="img"
                 aria-hidden="true"
               ></sbb-seat-reservation-graphic>
             ` : v}
       </sbb-seat-reservation-area>
-      ${this._popover(w, l)}
-    `;
-    }
-    /**
-     * Creates a popover for extra service information
-     * @param triggerId
-     * @param popoverContent
-     * @private
-     */
-    _popover(r, s) {
-      return b`
-      <sbb-popover trigger="${r}">
-        <p class="sbb-text-s sbb-sr-popover">${s}</p>
-      </sbb-popover>
+      ${i ? this._popover(x, h) : v}
     `;
     }
-    /**
-     * trigger to close all opened popovers (normally only one is opened at a time)
-     * @private
-     */
-    _closePopover() {
-      this.shadowRoot?.querySelectorAll('sbb-popover[data-state="opened"]').forEach((r) => r.setAttribute("data-state", "closed"));
-    }
-    _getRenderElementWithoutArea(r, s, e) {
-      const t = this.getCalculatedDimension(r.dimension, e), i = this.getCalculatedPosition(r.position, r.dimension, e), a = r.icon && r.icon.indexOf("DRIVER_AREA") === -1 ? r.icon : r.icon?.concat("_", this.seatReservation.vehicleType);
+    _getRenderElementWithoutArea(r, e, t) {
+      const s = this.getCalculatedDimension(r.dimension, t), a = this.getCalculatedPosition(r.position, r.dimension, t), o = r.icon && r.icon.indexOf("DRIVER_AREA") === -1 ? r.icon : r.icon?.concat("_", this.seatReservations[this.currSelectedDeckIndex].vehicleType);
       return b` <sbb-seat-reservation-graphic
       style=${g({
-        "--sbb-seat-reservation-graphic-width": t.w,
-        "--sbb-seat-reservation-graphic-height": t.h,
-        "--sbb-seat-reservation-graphic-top": i.y,
-        "--sbb-seat-reservation-graphic-left": i.x,
+        "--sbb-seat-reservation-graphic-width": s.w,
+        "--sbb-seat-reservation-graphic-height": s.h,
+        "--sbb-seat-reservation-graphic-top": a.y,
+        "--sbb-seat-reservation-graphic-left": a.x,
         "--sbb-seat-reservation-graphic-position": "absolute"
       })}
-      name=${a ?? v}
-      rotation=${s}
+      name=${o ?? v}
+      rotation=${e}
       aria-hidden="true"
       ?stretch=${!0}
     ></sbb-seat-reservation-graphic>`;
     }
-    _getRenderedServiceElements(r, s) {
-      return s ? s?.map((e) => {
-        const t = e.icon ? n(e.icon, this._language.current) : null, i = this.getCalculatedDimension(e.dimension), a = this.getCalculatedPosition(e.position), o = e.rotation || 0, l = this.alignVertical ? o - 90 : o, c = `popover-trigger-${r}-${a.x}-${a.y}`;
+    _getRenderedServiceElements(r, e, t) {
+      return t ? t?.map((s) => {
+        const a = s.icon ? n(s.icon, this._language.current) : null, o = this.getCalculatedDimension(s.dimension), i = this.getCalculatedPosition(s.position), l = s.rotation || 0, h = this.alignVertical ? l - 90 : l, p = `popover-trigger-${e}-${r}-${i.x}-${i.y}`;
         return b`
         <sbb-seat-reservation-graphic
-          id="${c}"
+          id="${p}"
           style=${g({
-          "--sbb-seat-reservation-graphic-width": i.w,
-          "--sbb-seat-reservation-graphic-height": i.h,
-          "--sbb-seat-reservation-graphic-top": a.y,
-          "--sbb-seat-reservation-graphic-left": a.x,
-          "--sbb-seat-reservation-graphic-position": "absolute",
-          "--sbb-seat-reservation--cursor-pointer": "pointer"
+          "--sbb-seat-reservation-graphic-width": o.w,
+          "--sbb-seat-reservation-graphic-height": o.h,
+          "--sbb-seat-reservation-graphic-top": i.y,
+          "--sbb-seat-reservation-graphic-left": i.x,
+          "--sbb-seat-reservation-graphic-position": "absolute"
         })}
-          name=${e.icon ?? v}
-          .rotation=${l}
+          class="sbb-seat-reservation-graphic--cursor-pointer"
+          name=${s.icon ?? v}
+          .rotation=${h}
           role="img"
           aria-hidden="true"
         ></sbb-seat-reservation-graphic>
-        ${this._popover(c, t)}
+        ${this._popover(p, a)}
       `;
       }) : null;
     }
@@ -342,46 +345,66 @@ let q = (() => {
      * @param selectPlaceEvent
      */
     _onSelectPlace(r) {
-      const s = r.detail;
-      this.preventCoachScrollByPlaceClick = !0, this.isCoachGridFocusable = !1, this.preventPlaceClick || (this.updateSelectedSeatReservationPlaces(s), this.updateCurrentSelectedPlaceInCoach(s));
+      const e = r.detail;
+      this.preventCoachScrollByPlaceClick = !0, this.isCoachGridFocusable = !1, this.preventPlaceClick || (this.currSelectedDeckIndex = e.deckIndex, this.updateSelectedSeatReservationPlaces(e), this.updateCurrentSelectedPlaceInCoach(e));
     }
     _onSelectNavCoach(r) {
-      const s = r.detail;
-      this.isKeyboardNavigation = !1, s !== null && s !== this.currSelectedCoachIndex ? (this.unfocusPlaceElement(), this.scrollToSelectedNavCoach(s)) : s === this.currSelectedCoachIndex && (this.updateCurrentSelectedCoach(), this.preselectPlaceInCoach()), this._closePopover();
+      const e = r.detail;
+      this.isKeyboardNavigation = !1, e !== null && e !== this.currSelectedCoachIndex ? (this.unfocusPlaceElement(), this.scrollToSelectedNavCoach(e)) : e === this.currSelectedCoachIndex && (this.updateCurrentSelectedCoach(), this.preselectPlaceInCoach()), this._closePopover();
     }
     _onFocusNavCoach() {
       this.preventCoachScrollByPlaceClick ? this.focusPlaceElement(this.currSelectedPlace) : this.preselectPlaceInCoach(), this.isAutoScrolling = !1;
     }
-    _getDescriptionTableCoach(r, s) {
+    /**
+     * Creates a popover for extra service information
+     * @param triggerId
+     * @param popoverContent
+     * @private
+     */
+    _popover(r, e) {
+      return b`
+      <sbb-popover trigger="${r}">
+        <p class="sbb-text-s sbb-sr-popover">${e}</p>
+      </sbb-popover>
+    `;
+    }
+    /**
+     * trigger to close all opened popovers (normally only one is opened at a time)
+     * @private
+     */
+    _closePopover() {
+      this.shadowRoot?.querySelectorAll('sbb-popover[data-state="opened"]').forEach((r) => r.setAttribute("data-state", "closed"));
+    }
+    _getDescriptionTableCoach(r, e) {
       if (!r.places?.length)
         return n("COACH_BLOCKED_TABLE_CAPTION", this._language.current, [
           r.id
         ]);
-      let e;
-      const t = this._getTitleDescriptionListString(r.graphicElements), i = this._getTitleDescriptionListString(r.serviceElements);
-      if (e = n("COACH_TABLE_CAPTION", this._language.current, [
+      let t;
+      const s = this._getTitleDescriptionListString(r.graphicElements), a = this._getTitleDescriptionListString(r.serviceElements);
+      if (t = n("COACH_TABLE_CAPTION", this._language.current, [
         r.id
       ]), !this.hasNavigation) {
-        const a = this.getAvailableFreePlacesNumFromCoach(s), o = n("COACH_AVAILABLE_NUMBER_OF_PLACES", this._language.current, [a.seats, a.bicycles]);
-        e = e.concat(". ").concat(o).concat(". ");
+        const o = this.getAvailableFreePlacesNumFromCoach(e), i = n("COACH_AVAILABLE_NUMBER_OF_PLACES", this._language.current, [o.seats, o.bicycles]);
+        t = t.concat(". ").concat(i).concat(". ");
       }
-      return (t || i) && (e += ". " + n("COACH_AVAILABLE_SERVICES", this._language.current) + ": ", e += i + ", " + t + "."), e;
+      return (s || a) && (t += ". " + n("COACH_AVAILABLE_SERVICES", this._language.current) + ": ", t += a + ", " + s + "."), t;
     }
     _getTitleDescriptionListString(r) {
-      const s = [];
-      return r?.map((e) => {
-        const t = e.icon;
-        if (!t)
+      const e = [];
+      return r?.map((t) => {
+        const s = t.icon;
+        if (!s)
           return null;
-        const i = s.indexOf(t) > -1, a = n(e.icon, this._language.current), o = this._notFixedRotatableAreaIcons.indexOf(t) === -1 && this._notAreaElements.indexOf(t) === -1;
-        return i || s.push(e.icon), a && !i && o ? a : null;
-      }).filter((e) => !!e).join(", ");
+        const a = e.indexOf(s) > -1, o = n(t.icon, this._language.current), i = this._notFixedRotatableAreaIcons.indexOf(s) === -1 && this._notAreaElements.indexOf(s) === -1;
+        return a || e.push(t.icon), o && !a && i ? o : null;
+      }).filter((t) => !!t).join(", ");
     }
-  }, d = h, (() => {
-    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
-    $(null, u = { value: d }, C, { kind: "class", name: d.name, metadata: r }, null, m), d = u.value, r && Object.defineProperty(d, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
-  })(), h.styles = P, x(d, m), d;
+  }, c = d, (() => {
+    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(k[Symbol.metadata] ?? null) : void 0;
+    C(null, w = { value: c }, $, { kind: "class", name: c.name, metadata: r }, null, f), c = w.value, r && Object.defineProperty(c, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
+  })(), d.styles = T, S(c, f), c;
 })();
 export {
-  q as SbbSeatReservationElement
+  K as SbbSeatReservationElement
 };