@sbb-esta/lyne-elements-experimental-dev 4.7.0-dev.1773149682 → 4.7.0-dev.1773157364

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

@@ -1,42 +1,42 @@
-import { __esDecorate as k, __runInitializers as y } from "tslib";
-import { SbbLanguageController as R } from "@sbb-esta/lyne-elements/core/controllers.js";
-import { boxSizingStyles as S } from "@sbb-esta/lyne-elements/core/styles.js";
-import { css as A, html as n, nothing as u } from "lit";
-import { customElement as T } from "lit/decorators.js";
-import { classMap as f } from "lit/directives/class-map.js";
-import { repeat as N } from "lit/directives/repeat.js";
-import { styleMap as _ } from "lit/directives/style-map.js";
-import { getI18nSeatReservation as h } from "../common.js";
-import { SeatReservationBaseElement as E } from "./seat-reservation-base-element.js";
+import { SbbLanguageController as w } from "@sbb-esta/lyne-elements/core/controllers.js";
+import { boxSizingStyles as x } from "@sbb-esta/lyne-elements/core/styles.js";
+import { css as C, html as n, nothing as v } from "lit";
+import { classMap as m } from "lit/directives/class-map.js";
+import { repeat as $ } from "lit/directives/repeat.js";
+import { styleMap as g } from "lit/directives/style-map.js";
+import { getI18nSeatReservation as h } from "../common/translations.js";
+import { SbbSeatReservationAreaElement as k } from "../seat-reservation-area/seat-reservation-area.component.js";
+import { SbbSeatReservationGraphicElement as y } from "../seat-reservation-graphic/seat-reservation-graphic.component.js";
+import { SbbSeatReservationNavigationCoachElement as R } from "../seat-reservation-navigation-coach/seat-reservation-navigation-coach.component.js";
+import { SbbSeatReservationPlaceControlElement as S } from "../seat-reservation-place-control/seat-reservation-place-control.component.js";
+import { SbbSeatReservationScopedElement as A } from "../seat-reservation-scoped/seat-reservation-scoped.component.js";
+import { SeatReservationBaseElement as N } from "./seat-reservation-base-element.js";
 import "@sbb-esta/lyne-elements/button.js";
 import "@sbb-esta/lyne-elements/screen-reader-only.js";
 import "@sbb-esta/lyne-elements/popover.js";
-import "../seat-reservation-area.js";
-import "../seat-reservation-graphic.js";
-import "../seat-reservation-place-control.js";
-import "../seat-reservation-navigation-coach.js";
-import "../seat-reservation-scoped.js";
-const D = A`: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-background-color-2)}@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}[popover]:where(sbb-popover) .sbb-sr-popover{margin-block:calc(4 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}:host([align-vertical]) .sbb-sr__component{flex-direction:row-reverse;justify-content:flex-end;gap:calc(22 * var(--sbb-seat-reservation-one-px-rem, .0625rem));height:inherit}@media(min-width:37.5rem){:host([align-vertical]) .sbb-sr__component{gap:calc(54 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}}:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation,:host([align-vertical]) .sbb-sr__component ul.sbb-sr-navigation__list-coaches{flex-direction:column}:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation{padding:calc(16 * var(--sbb-seat-reservation-one-px-rem, .0625rem)) 0}:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation .sbb-sr__navigation-control-button{left:calc(1 * var(--sbb-seat-reservation-one-px-rem, .0625rem));top:0;rotate:90deg}@media(min-width:64rem){:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation .sbb-sr__navigation-control-button{left:calc(-1 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}}:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation ul.sbb-sr-navigation__list-coaches{max-width:initial;padding:calc(5 * var(--sbb-seat-reservation-one-px-rem, .0625rem));overflow:hidden scroll}:host([align-vertical]) .sbb-sr__wrapper-coach-decks{flex-direction:column}:host([align-vertical]) .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels{flex-direction:column-reverse;width:calc((var(--sbb-seat-reservation-height) + 24) * var(--sbb-seat-reservation-one-px-rem, .0625rem));height:initial}:host([align-vertical]) .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels b{inline-size:calc(50% - 16 * var(--sbb-seat-reservation-one-px-rem, .0625rem));block-size:calc(20 * var(--sbb-seat-reservation-one-px-rem, .0625rem));margin-bottom:calc(16 * var(--sbb-seat-reservation-one-px-rem, .0625rem));rotate:initial;writing-mode:initial}:host([align-vertical]) .sbb-sr__wrapper-scrollarea{width:calc((var(--sbb-seat-reservation-height) + 24) * var(--sbb-seat-reservation-one-px-rem, .0625rem));height:100%;overflow:hidden scroll}:host([align-vertical]) .sbb-sr__wrapper-scrollarea .sbb-sr__parent{rotate:90deg}:host([align-vertical]) .sbb-sr-travel-direction-wrapper{width:calc(var(--sbb-seat-reservation-height) * var(--sbb-seat-reservation-one-px-rem, .0625rem));margin-block-start:calc(4 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr-navigation{gap:calc(3 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr-navigation .sbb-sr__navigation-control-button{position:relative;top:calc(2 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}@media(min-width:64rem){.sbb-sr-navigation .sbb-sr__navigation-control-button{top:0}}.sbb-sr__component{display:flex;flex-direction:column;gap:calc(64 * var(--sbb-seat-reservation-one-px-rem, .0625rem) - 16px)}.sbb-sr-travel-direction-wrapper{display:flex;justify-content:center;align-items:center;column-gap:calc(4 * var(--sbb-seat-reservation-one-px-rem, .0625rem));margin-block:calc(8 * var(--sbb-seat-reservation-one-px-rem, .0625rem)) calc(4 * var(--sbb-seat-reservation-one-px-rem, .0625rem));font-size:var(--sbb-text-font-size-s)}.sbb-sr-travel-direction-wrapper .sbb-sr__travel-direction--arrow{display:flex;align-items:center}.sbb-sr-navigation-wrapper{display:flex}.sbb-sr-navigation{display:flex;justify-content:center;width:100%;padding-inline:16px}.sbb-sr-navigation__list-coaches{list-style:none;margin:0;padding:0;font-size:inherit;--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-scrollbar-color: light-dark( color-mix(in srgb, var(--sbb-color-black) 30%, transparent), color-mix(in srgb, var(--sbb-color-white) 30%, transparent) );--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);--sbb-scrollbar-color-hover: light-dark( color-mix(in srgb, var(--sbb-color-black) 60%, transparent), color-mix(in srgb, var(--sbb-color-white) 60%, transparent) );--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-sr-navigation__list-coaches::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sr-navigation__list-coaches::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sr-navigation__list-coaches::-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__list-coaches::-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__list-coaches::-webkit-scrollbar-button,.sbb-sr-navigation__list-coaches::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-sr-navigation__list-coaches{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-sr-navigation__list-coaches{display:flex;flex-wrap:nowrap;gap:calc(4 * var(--sbb-seat-reservation-one-px-rem, .0625rem));padding:calc(6 * var(--sbb-seat-reservation-one-px-rem, .0625rem)) calc(5 * var(--sbb-seat-reservation-one-px-rem, .0625rem)) 0;max-width:856px;--sbb-scrollbar-color: transparent;overflow:scroll hidden;position:relative}.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-scrollarea{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-scrollbar-color: light-dark( color-mix(in srgb, var(--sbb-color-black) 30%, transparent), color-mix(in srgb, var(--sbb-color-white) 30%, transparent) );--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);--sbb-scrollbar-color-hover: light-dark( color-mix(in srgb, var(--sbb-color-black) 60%, transparent), color-mix(in srgb, var(--sbb-color-white) 60%, transparent) );--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-sr__wrapper-scrollarea::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sr__wrapper-scrollarea::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sr__wrapper-scrollarea::-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-scrollarea::-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-scrollarea::-webkit-scrollbar-button,.sbb-sr__wrapper-scrollarea::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-sr__wrapper-scrollarea{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-sr__wrapper-scrollarea{overflow:scroll hidden;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-scrollarea .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__list-decks:has(.sbb-sr-coach-has-overhanging-elements) .sbb-sr__list-coaches{gap:calc(8 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr__item-coach{position:relative}.sbb-sr-coach-wrapper__table{outline:0}`;
-let Y = (() => {
-  var p;
-  let $ = [T("sbb-seat-reservation")], w, x = [], d, C = E;
-  return p = class extends C {
-    constructor() {
-      super(...arguments), this._language = new R(this), this._notFixedRotatableAreaIcons = ["ENTRY_EXIT"];
-    }
-    willUpdate(e) {
-      super.willUpdate(e), e.has("hasNavigation") && (this.hasNavigation ? this.shadowRoot?.querySelectorAll("table").forEach((r) => r.removeAttribute("tabindex")) : this.shadowRoot?.querySelectorAll("table").forEach((r) => r.setAttribute("tabindex", "0")));
-    }
-    firstUpdated(e) {
-      super.firstUpdated(e), this.updateComplete.then(() => {
-        this.initNavigationSelectionByScrollEvent();
-      });
-    }
-    render() {
-      return this._initVehicleSeatReservationConstruction(), this._coachesHtmlTemplate || null;
-    }
-    _initVehicleSeatReservationConstruction() {
-      this._coachesHtmlTemplate = n`
+const T = C`: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-background-color-2)}@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}[popover]:where(sbb-popover) .sbb-sr-popover{margin-block:calc(4 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}:host([align-vertical]) .sbb-sr__component{flex-direction:row-reverse;justify-content:flex-end;gap:calc(22 * var(--sbb-seat-reservation-one-px-rem, .0625rem));height:inherit}@media(min-width:37.5rem){:host([align-vertical]) .sbb-sr__component{gap:calc(54 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}}:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation,:host([align-vertical]) .sbb-sr__component ul.sbb-sr-navigation__list-coaches{flex-direction:column}:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation{padding:calc(16 * var(--sbb-seat-reservation-one-px-rem, .0625rem)) 0}:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation .sbb-sr__navigation-control-button{left:calc(1 * var(--sbb-seat-reservation-one-px-rem, .0625rem));top:0;rotate:90deg}@media(min-width:64rem){:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation .sbb-sr__navigation-control-button{left:calc(-1 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}}:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation ul.sbb-sr-navigation__list-coaches{max-width:initial;padding:calc(5 * var(--sbb-seat-reservation-one-px-rem, .0625rem));overflow:hidden scroll}:host([align-vertical]) .sbb-sr__wrapper-coach-decks{flex-direction:column}:host([align-vertical]) .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels{flex-direction:column-reverse;width:calc((var(--sbb-seat-reservation-height) + 24) * var(--sbb-seat-reservation-one-px-rem, .0625rem));height:initial}:host([align-vertical]) .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels b{inline-size:calc(50% - 16 * var(--sbb-seat-reservation-one-px-rem, .0625rem));block-size:calc(20 * var(--sbb-seat-reservation-one-px-rem, .0625rem));margin-bottom:calc(16 * var(--sbb-seat-reservation-one-px-rem, .0625rem));rotate:initial;writing-mode:initial}:host([align-vertical]) .sbb-sr__wrapper-scrollarea{width:calc((var(--sbb-seat-reservation-height) + 24) * var(--sbb-seat-reservation-one-px-rem, .0625rem));height:100%;overflow:hidden scroll}:host([align-vertical]) .sbb-sr__wrapper-scrollarea .sbb-sr__parent{rotate:90deg}:host([align-vertical]) .sbb-sr-travel-direction-wrapper{width:calc(var(--sbb-seat-reservation-height) * var(--sbb-seat-reservation-one-px-rem, .0625rem));margin-block-start:calc(4 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr-navigation{gap:calc(3 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr-navigation .sbb-sr__navigation-control-button{position:relative;top:calc(2 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}@media(min-width:64rem){.sbb-sr-navigation .sbb-sr__navigation-control-button{top:0}}.sbb-sr__component{display:flex;flex-direction:column;gap:calc(64 * var(--sbb-seat-reservation-one-px-rem, .0625rem) - 16px)}.sbb-sr-travel-direction-wrapper{display:flex;justify-content:center;align-items:center;column-gap:calc(4 * var(--sbb-seat-reservation-one-px-rem, .0625rem));margin-block:calc(8 * var(--sbb-seat-reservation-one-px-rem, .0625rem)) calc(4 * var(--sbb-seat-reservation-one-px-rem, .0625rem));font-size:var(--sbb-text-font-size-s)}.sbb-sr-travel-direction-wrapper .sbb-sr__travel-direction--arrow{display:flex;align-items:center}.sbb-sr-navigation-wrapper{display:flex}.sbb-sr-navigation{display:flex;justify-content:center;width:100%;padding-inline:16px}.sbb-sr-navigation__list-coaches{list-style:none;margin:0;padding:0;font-size:inherit;--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-scrollbar-color: light-dark( color-mix(in srgb, var(--sbb-color-black) 30%, transparent), color-mix(in srgb, var(--sbb-color-white) 30%, transparent) );--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);--sbb-scrollbar-color-hover: light-dark( color-mix(in srgb, var(--sbb-color-black) 60%, transparent), color-mix(in srgb, var(--sbb-color-white) 60%, transparent) );--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-sr-navigation__list-coaches::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sr-navigation__list-coaches::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sr-navigation__list-coaches::-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__list-coaches::-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__list-coaches::-webkit-scrollbar-button,.sbb-sr-navigation__list-coaches::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-sr-navigation__list-coaches{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-sr-navigation__list-coaches{display:flex;flex-wrap:nowrap;gap:calc(4 * var(--sbb-seat-reservation-one-px-rem, .0625rem));padding:calc(6 * var(--sbb-seat-reservation-one-px-rem, .0625rem)) calc(5 * var(--sbb-seat-reservation-one-px-rem, .0625rem)) 0;max-width:856px;--sbb-scrollbar-color: transparent;overflow:scroll hidden;position:relative}.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-scrollarea{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-scrollbar-color: light-dark( color-mix(in srgb, var(--sbb-color-black) 30%, transparent), color-mix(in srgb, var(--sbb-color-white) 30%, transparent) );--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);--sbb-scrollbar-color-hover: light-dark( color-mix(in srgb, var(--sbb-color-black) 60%, transparent), color-mix(in srgb, var(--sbb-color-white) 60%, transparent) );--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-sr__wrapper-scrollarea::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sr__wrapper-scrollarea::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sr__wrapper-scrollarea::-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-scrollarea::-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-scrollarea::-webkit-scrollbar-button,.sbb-sr__wrapper-scrollarea::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-sr__wrapper-scrollarea{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-sr__wrapper-scrollarea{overflow:scroll hidden;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-scrollarea .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__list-decks:has(.sbb-sr-coach-has-overhanging-elements) .sbb-sr__list-coaches{gap:calc(8 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr__item-coach{position:relative}.sbb-sr-coach-wrapper__table{outline:0}`;
+k.define();
+y.define();
+S.define();
+R.define();
+A.define();
+const _ = class _ extends N {
+  constructor() {
+    super(...arguments), this._language = new w(this), this._notFixedRotatableAreaIcons = ["ENTRY_EXIT"];
+  }
+  willUpdate(e) {
+    super.willUpdate(e), e.has("hasNavigation") && (this.hasNavigation ? this.shadowRoot?.querySelectorAll("table").forEach((r) => r.removeAttribute("tabindex")) : this.shadowRoot?.querySelectorAll("table").forEach((r) => r.setAttribute("tabindex", "0")));
+  }
+  firstUpdated(e) {
+    super.firstUpdated(e), this.updateComplete.then(() => {
+      this.initNavigationSelectionByScrollEvent();
+    });
+  }
+  render() {
+    return this._initVehicleSeatReservationConstruction(), this._coachesHtmlTemplate || null;
+  }
+  _initVehicleSeatReservationConstruction() {
+    this._coachesHtmlTemplate = n`
       ${this._renderTravelDirection()}
       <div class="sbb-sr__component">
         ${this._renderNavigation()}
@@ -53,10 +53,10 @@ let Y = (() => {
           >
             <div id="sbb-sr__parent-area" class="sbb-sr__parent">
               <ul
-                class="${f({
-        "sbb-sr__list-decks": !0,
-        "sbb-sr__list-decks--gap": this.hasMultipleDecks
-      })}"
+                class="${m({
+      "sbb-sr__list-decks": !0,
+      "sbb-sr__list-decks--gap": this.hasMultipleDecks
+    })}"
               >
                 ${this.seatReservations?.map((e, r) => n`<li class="sbb-sr__list-item-deck">
                       <ul class="sbb-sr__list-coaches" role="presentation">
@@ -69,19 +69,19 @@ let Y = (() => {
         </div>
       </div>
     `;
-    }
-    _renderDeckLabels() {
-      return this.hasMultipleDecks ? this.seatReservations.map((e) => {
-        const r = h(e.deckCoachLevel, this._language.current);
-        return n`<b aria-hidden="true">${r}</b>`;
-      }) : null;
-    }
-    _renderNavigationControlButton(e) {
-      if (!this.hasNavigation || !this.seatReservations)
-        return null;
-      const r = e == "DIRECTION_RIGHT" ? "sbb-sr-navigation__wrapper-button-direction--right" : "sbb-sr-navigation__wrapper-button-direction--left", t = e == "DIRECTION_RIGHT" ? "chevron-small-right-small" : "chevron-small-left-small", i = e == "DIRECTION_RIGHT" ? h("SEAT_RESERVATION_END", this._language.current) : h("SEAT_RESERVATION_BEGIN", this._language.current);
-      let a = !0;
-      return (e == "DIRECTION_LEFT" && this.selectedCoachIndex > 0 || e == "DIRECTION_RIGHT" && this.selectedCoachIndex < this.coachItemDetailsElements.length - 1) && (a = !1), n`<div class="sbb-sr-navigation__wrapper-button-direction">
+  }
+  _renderDeckLabels() {
+    return this.hasMultipleDecks ? this.seatReservations.map((e) => {
+      const r = h(e.deckCoachLevel, this._language.current);
+      return n`<b aria-hidden="true">${r}</b>`;
+    }) : null;
+  }
+  _renderNavigationControlButton(e) {
+    if (!this.hasNavigation || !this.seatReservations)
+      return null;
+    const r = e == "DIRECTION_RIGHT" ? "sbb-sr-navigation__wrapper-button-direction--right" : "sbb-sr-navigation__wrapper-button-direction--left", t = e == "DIRECTION_RIGHT" ? "chevron-small-right-small" : "chevron-small-left-small", i = e == "DIRECTION_RIGHT" ? h("SEAT_RESERVATION_END", this._language.current) : h("SEAT_RESERVATION_BEGIN", this._language.current);
+    let a = !0;
+    return (e == "DIRECTION_LEFT" && this.selectedCoachIndex > 0 || e == "DIRECTION_RIGHT" && this.selectedCoachIndex < this.coachItemDetailsElements.length - 1) && (a = !1), n`<div class="sbb-sr-navigation__wrapper-button-direction">
       <sbb-secondary-button
         @click="${() => this.navigateByDirectionBtn(e)}"
         @focus="${() => this.onFocusNavDirectionButton()}"
@@ -92,24 +92,24 @@ let Y = (() => {
         type="button"
         aria-label="${i}"
         role="button"
-        .disabledInteractive="${a || u}"
-        .disabled="${a || u}"
+        .disabledInteractive="${a || v}"
+        .disabled="${a || v}"
       ></sbb-secondary-button>
     </div>`;
-    }
-    _renderTravelDirection() {
-      if (!this.travelDirection || this.travelDirection === "NONE")
-        return null;
-      const e = h("SEAT_RESERVATION_TRAVEL_DIRECTION", this._language.current), t = `arrow-${this.alignVertical ? this.travelDirection === "RIGHT" ? "down" : "up" : this.travelDirection === "RIGHT" ? "right" : "left"}-small`;
-      return n`<div class="sbb-sr-travel-direction-wrapper">
+  }
+  _renderTravelDirection() {
+    if (!this.travelDirection || this.travelDirection === "NONE")
+      return null;
+    const e = h("SEAT_RESERVATION_TRAVEL_DIRECTION", this._language.current), t = `arrow-${this.alignVertical ? this.travelDirection === "RIGHT" ? "down" : "up" : this.travelDirection === "RIGHT" ? "right" : "left"}-small`;
+    return n`<div class="sbb-sr-travel-direction-wrapper">
       <div class="sbb-sr__travel-direction--arrow">
         <sbb-icon slot="icon" name="${t}"></sbb-icon>
       </div>
       <div class="sbb-sr__travel-direction--label">${e}</div>
     </div>`;
-    }
-    _renderNavigation() {
-      return !this.hasNavigation || !this.seatReservations ? null : n`<div class="sbb-sr-navigation-wrapper">
+  }
+  _renderNavigation() {
+    return !this.hasNavigation || !this.seatReservations ? null : n`<div class="sbb-sr-navigation-wrapper">
       <nav id="sbb-sr-navigation" class="sbb-sr-navigation">
         ${this._renderNavigationControlButton("DIRECTION_LEFT")}
         <ul
@@ -137,28 +137,28 @@ let Y = (() => {
         ${this._renderNavigationControlButton("DIRECTION_RIGHT")}
       </nav>
     </div>`;
-    }
-    /**
-     *
-     * @returns
-     * @param seatReservation
-     * @param coachDeckIndex
-     */
-    _renderCoaches(e, r) {
-      const t = JSON.parse(JSON.stringify(e?.coachItems));
-      return t ? t.map((i, a) => n`
+  }
+  /**
+   *
+   * @returns
+   * @param seatReservation
+   * @param coachDeckIndex
+   */
+  _renderCoaches(e, r) {
+    const t = JSON.parse(JSON.stringify(e?.coachItems));
+    return t ? t.map((i, a) => n`
         <li class="sbb-sr__item-coach">
           ${this._renderCoachElement(i, a, r, e.deckCoachIndex)}
         </li>
       `) : null;
-    }
-    _renderCoachElement(e, r, t, i) {
-      const a = this.getCalculatedDimension(e.dimension), s = this._getDescriptionTableCoach(e);
-      return n`<sbb-seat-reservation-scoped
-      style=${_({
-        "--sbb-seat-reservation-scoped-width": a.w,
-        "--sbb-seat-reservation-scoped-height": a.h
-      })}
+  }
+  _renderCoachElement(e, r, t, i) {
+    const a = this.getCalculatedDimension(e.dimension), s = this._getDescriptionTableCoach(e);
+    return n`<sbb-seat-reservation-scoped
+      style=${g({
+      "--sbb-seat-reservation-scoped-width": a.w,
+      "--sbb-seat-reservation-scoped-height": a.h
+    })}
     >
       ${this._getRenderedCoachBorders(e, r)}
       ${this._getRenderedGraphicalElements(e.graphicElements || [], e.dimension, r, t)}
@@ -177,74 +177,74 @@ let Y = (() => {
         ${this._getRenderedRowPlaces(e, r, t, i)}
       </table>
     </sbb-seat-reservation-scoped>`;
-    }
-    /**
-     * @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(e, r) {
-      if (!e.graphicElements)
-        return null;
-      const t = 1, i = this.coachItemDetailsElements[r]?.driverAreaElements?.driverArea, a = this.coachItemDetailsElements[r]?.driverAreaElements?.driverAreaNoVerticalWall;
-      let s = i ? e.dimension.w - i.dimension.w - t : e.dimension.w - t * 2;
-      s *= this.baseGridSize;
-      const o = (e.dimension.h + this.coachBorderOffset * 2) * this.baseGridSize;
-      let l = i && i.position.x === 0 ? i?.dimension.w * this.baseGridSize : this.baseGridSize;
-      a && (s = this.getCalculatedDimension(e.dimension).w - 2 * (a.dimension.w * this.baseGridSize), l = a.dimension.w * this.baseGridSize);
-      const b = this.overHangingElementInformation.find((c) => c.coachId == e.id);
-      return (b?.overhangingPlaces || b?.overhangingGraphicAreas) && (s += 2 * this.baseGridSize, l = 0), n`
+  }
+  /**
+   * @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(e, r) {
+    if (!e.graphicElements)
+      return null;
+    const t = 1, i = this.coachItemDetailsElements[r]?.driverAreaElements?.driverArea, a = this.coachItemDetailsElements[r]?.driverAreaElements?.driverAreaNoVerticalWall;
+    let s = i ? e.dimension.w - i.dimension.w - t : e.dimension.w - t * 2;
+    s *= this.baseGridSize;
+    const o = (e.dimension.h + this.coachBorderOffset * 2) * this.baseGridSize;
+    let l = i && i.position.x === 0 ? i?.dimension.w * this.baseGridSize : this.baseGridSize;
+    a && (s = this.getCalculatedDimension(e.dimension).w - 2 * (a.dimension.w * this.baseGridSize), l = a.dimension.w * this.baseGridSize);
+    const b = this.overHangingElementInformation.find((c) => c.coachId == e.id);
+    return (b?.overhangingPlaces || b?.overhangingGraphicAreas) && (s += 2 * this.baseGridSize, l = 0), n`
       <sbb-seat-reservation-graphic
-        class="${f({
-        "sbb-sr-coach-has-overhanging-elements": b?.overhangingPlaces || b?.overhangingGraphicAreas || !1
-      })}"
-        style=${_({
-        "--sbb-seat-reservation-graphic-width": s,
-        "--sbb-seat-reservation-graphic-height": o,
-        "--sbb-seat-reservation-graphic-top": this.coachBorderPadding * -1,
-        "--sbb-seat-reservation-graphic-left": l,
-        "--sbb-seat-reservation-graphic-position": "absolute"
-      })}
+        class="${m({
+      "sbb-sr-coach-has-overhanging-elements": b?.overhangingPlaces || b?.overhangingGraphicAreas || !1
+    })}"
+        style=${g({
+      "--sbb-seat-reservation-graphic-width": s,
+      "--sbb-seat-reservation-graphic-height": o,
+      "--sbb-seat-reservation-graphic-top": this.coachBorderPadding * -1,
+      "--sbb-seat-reservation-graphic-left": l,
+      "--sbb-seat-reservation-graphic-position": "absolute"
+    })}
         name="COACH_BORDER_MIDDLE"
         ?stretch=${!0}
         role="presentation"
       ></sbb-seat-reservation-graphic>
     `;
-    }
-    _getRenderedRowPlaces(e, r, t, i) {
-      if (!e.places)
-        return null;
-      const a = {};
-      for (const s of e.places)
-        a[s.position.y] ? a[s.position.y].push(s) : a[s.position.y] = [s];
-      return Object.values(a).map((s, o) => n`
+  }
+  _getRenderedRowPlaces(e, r, t, i) {
+    if (!e.places)
+      return null;
+    const a = {};
+    for (const s of e.places)
+      a[s.position.y] ? a[s.position.y].push(s) : a[s.position.y] = [s];
+    return Object.values(a).map((s, o) => n`
           <tr id="row-${r}-${s[0].position.y}" data-row-index=${o}>
             ${this._getRenderedColumnPlaces(s, r, t, i)}
           </tr>
         `).flatMap((s) => s);
-    }
-    _getRenderedColumnPlaces(e, r, t, i) {
-      e.sort((s, o) => Number(s.position.x) - Number(o.position.x));
-      const a = r + "-" + i;
-      return n`${N(e, (s) => a + "-" + s.number, (s, o) => {
-        const l = this.getCalculatedDimension(s.dimension), b = this.getCalculatedPosition(s.position), c = s.rotation || 0, v = this.alignVertical ? -90 : 0, m = this.getPlaceElementId(t, r, s.number);
-        return n`
+  }
+  _getRenderedColumnPlaces(e, r, t, i) {
+    e.sort((s, o) => Number(s.position.x) - Number(o.position.x));
+    const a = r + "-" + i;
+    return n`${$(e, (s) => a + "-" + s.number, (s, o) => {
+      const l = this.getCalculatedDimension(s.dimension), b = this.getCalculatedPosition(s.position), c = s.rotation || 0, d = this.alignVertical ? -90 : 0, u = this.getPlaceElementId(t, r, s.number);
+      return n`
           <td
             id="cell-${t}-${r}-${s.position.y}-${o}"
             class="graphical-element"
           >
             <sbb-seat-reservation-place-control
-              style=${_({
-          "--sbb-seat-reservation-place-control-text-scale-value": Math.min(l.w, l.h),
-          "--sbb-seat-reservation-place-control-width": l.w,
-          "--sbb-seat-reservation-place-control-height": l.h,
-          "--sbb-seat-reservation-place-control-top": b.y,
-          "--sbb-seat-reservation-place-control-left": b.x,
-          "--sbb-seat-reservation-place-control-rotation": c,
-          "--sbb-seat-reservation-place-control-text-rotation": v
-        })}
-              @selectplace=${(g) => this._onSelectPlace(g)}
+              style=${g({
+        "--sbb-seat-reservation-place-control-text-scale-value": Math.min(l.w, l.h),
+        "--sbb-seat-reservation-place-control-width": l.w,
+        "--sbb-seat-reservation-place-control-height": l.h,
+        "--sbb-seat-reservation-place-control-top": b.y,
+        "--sbb-seat-reservation-place-control-left": b.x,
+        "--sbb-seat-reservation-place-control-rotation": c,
+        "--sbb-seat-reservation-place-control-text-rotation": d
+      })}
+              @selectplace=${(p) => this._onSelectPlace(p)}
               exportparts="sbb-sr-place-part"
-              id=${m}
+              id=${u}
               class="seat-reservation-place-control"
               text=${s.number}
               type=${s.type}
@@ -259,164 +259,162 @@ let Y = (() => {
             ></sbb-seat-reservation-place-control>
           </td>
         `;
-      })}`;
-    }
-    _getRenderedGraphicalElements(e, r, t, i) {
-      return e ? e?.map((a) => {
-        const s = a.icon ?? "", o = a.rotation || 0, l = this._notFixedRotatableAreaIcons.indexOf(a.icon) === -1, b = this.alignVertical && l ? o - 90 : o;
-        return this.notAreaElements.findIndex((c) => c === s) > -1 ? this._getRenderElementWithoutArea(a, o, r) : this._getRenderElementWithArea(a, b, r, t, i);
-      }) : null;
-    }
-    /**
-     * creates a rendered element with an area component
-     * @param graphicalElement
-     * @param rotation
-     * @param coachDimension
-     * @param coachIndex used to generate a unique id for the popover trigger
-     * @param coachDeckIndex used to generate a unique id
-     * @private
-     */
-    _getRenderElementWithArea(e, r, t, i, a) {
-      const s = e.icon?.indexOf("TABLE") === -1, o = e.icon && s ? e.icon : null, l = this.isElementDirectlyOnBorder(e, t) && o !== "ENTRY_EXIT", b = e.icon ? h(e.icon, this._language.current) : u, c = this.getCalculatedDimension(e.dimension, t, !0, l), v = this.getCalculatedPosition(e.position, e.dimension, t, !0), m = `popover-trigger-${a}-${i}-${v.x}-${v.y}`;
-      let g = "free";
-      return e.position.y === this.coachBorderOffset * -1 ? g = "upper-border" : e.position.y + e.dimension.h === t.h + this.coachBorderOffset && (g = "lower-border"), g !== "free" && (v.y += g === "upper-border" ? 2 : 1, c.h -= 3), n`
+    })}`;
+  }
+  _getRenderedGraphicalElements(e, r, t, i) {
+    return e ? e?.map((a) => {
+      const s = a.icon ?? "", o = a.rotation || 0, l = this._notFixedRotatableAreaIcons.indexOf(a.icon) === -1, b = this.alignVertical && l ? o - 90 : o;
+      return this.notAreaElements.findIndex((c) => c === s) > -1 ? this._getRenderElementWithoutArea(a, o, r) : this._getRenderElementWithArea(a, b, r, t, i);
+    }) : null;
+  }
+  /**
+   * creates a rendered element with an area component
+   * @param graphicalElement
+   * @param rotation
+   * @param coachDimension
+   * @param coachIndex used to generate a unique id for the popover trigger
+   * @param coachDeckIndex used to generate a unique id
+   * @private
+   */
+  _getRenderElementWithArea(e, r, t, i, a) {
+    const s = e.icon?.indexOf("TABLE") === -1, o = e.icon && s ? e.icon : null, l = this.isElementDirectlyOnBorder(e, t) && o !== "ENTRY_EXIT", b = e.icon ? h(e.icon, this._language.current) : v, c = this.getCalculatedDimension(e.dimension, t, !0, l), d = this.getCalculatedPosition(e.position, e.dimension, t, !0), u = `popover-trigger-${a}-${i}-${d.x}-${d.y}`;
+    let p = "free";
+    return e.position.y === this.coachBorderOffset * -1 ? p = "upper-border" : e.position.y + e.dimension.h === t.h + this.coachBorderOffset && (p = "lower-border"), p !== "free" && (d.y += p === "upper-border" ? 2 : 1, c.h -= 3), n`
       <sbb-seat-reservation-area
-        id="${m}"
-        class="${f({ "sbb-seat-reservation-area--cursor-pointer": o !== null })}"
-        style=${_({
-        "--sbb-seat-reservation-area-width": c.w,
-        "--sbb-seat-reservation-area-height": c.h,
-        "--sbb-seat-reservation-area-top": v.y,
-        "--sbb-seat-reservation-area-left": v.x
-      })}
-        mounting=${g}
+        id="${u}"
+        class="${m({ "sbb-seat-reservation-area--cursor-pointer": o !== null })}"
+        style=${g({
+      "--sbb-seat-reservation-area-width": c.w,
+      "--sbb-seat-reservation-area-height": c.h,
+      "--sbb-seat-reservation-area-top": d.y,
+      "--sbb-seat-reservation-area-left": d.x
+    })}
+        mounting=${p}
         background="dark"
         aria-hidden="true"
       >
         ${o ? n`
               <sbb-seat-reservation-graphic
-                style=${_({
-        "--sbb-seat-reservation-graphic-max-width": c.w,
-        "--sbb-seat-reservation-graphic-height": this.baseGridSize,
-        "--sbb-seat-reservation-graphic-rotation": r
-      })}
+                style=${g({
+      "--sbb-seat-reservation-graphic-max-width": c.w,
+      "--sbb-seat-reservation-graphic-height": this.baseGridSize,
+      "--sbb-seat-reservation-graphic-rotation": r
+    })}
                 name=${o}
                 role="img"
                 aria-hidden="true"
                 class="auto-width"
               ></sbb-seat-reservation-graphic>
-            ` : u}
+            ` : v}
       </sbb-seat-reservation-area>
-      ${o ? this._popover(m, b) : u}
+      ${o ? this._popover(u, b) : v}
     `;
-    }
-    _getRenderElementWithoutArea(e, r, t) {
-      const i = this.getCalculatedDimension(e.dimension, t), a = this.getCalculatedPosition(e.position, e.dimension, t), s = e.icon && e.icon.endsWith("DRIVER_AREA") ? e.icon?.concat("_", this.seatReservations[this.currSelectedDeckIndex].vehicleType) : e.icon;
-      return n` <sbb-seat-reservation-graphic
-      style=${_({
-        "--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-graphic-rotation": r
-      })}
-      name=${s ?? u}
+  }
+  _getRenderElementWithoutArea(e, r, t) {
+    const i = this.getCalculatedDimension(e.dimension, t), a = this.getCalculatedPosition(e.position, e.dimension, t), s = e.icon && e.icon.endsWith("DRIVER_AREA") ? e.icon?.concat("_", this.seatReservations[this.currSelectedDeckIndex].vehicleType) : e.icon;
+    return n` <sbb-seat-reservation-graphic
+      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-graphic-rotation": r
+    })}
+      name=${s ?? v}
       aria-hidden="true"
       ?stretch=${!0}
     ></sbb-seat-reservation-graphic>`;
-    }
-    _getRenderedServiceElements(e, r, t) {
-      return t ? t?.map((i) => {
-        const a = i.icon ? h(i.icon, this._language.current) : null, s = this.getCalculatedDimension(i.dimension), o = this.getCalculatedPosition(i.position), l = i.rotation || 0, b = this.alignVertical ? l - 90 : l, c = `popover-trigger-${r}-${e}-${o.x}-${o.y}`;
-        return n`
+  }
+  _getRenderedServiceElements(e, r, t) {
+    return t ? t?.map((i) => {
+      const a = i.icon ? h(i.icon, this._language.current) : null, s = this.getCalculatedDimension(i.dimension), o = this.getCalculatedPosition(i.position), l = i.rotation || 0, b = this.alignVertical ? l - 90 : l, c = `popover-trigger-${r}-${e}-${o.x}-${o.y}`;
+      return n`
         <sbb-seat-reservation-graphic
           id="${c}"
-          style=${_({
-          "--sbb-seat-reservation-graphic-width": s.w,
-          "--sbb-seat-reservation-graphic-height": s.h,
-          "--sbb-seat-reservation-graphic-top": o.y,
-          "--sbb-seat-reservation-graphic-left": o.x,
-          "--sbb-seat-reservation-graphic-position": "absolute",
-          "--sbb-seat-reservation-graphic-rotation": b
-        })}
+          style=${g({
+        "--sbb-seat-reservation-graphic-width": s.w,
+        "--sbb-seat-reservation-graphic-height": s.h,
+        "--sbb-seat-reservation-graphic-top": o.y,
+        "--sbb-seat-reservation-graphic-left": o.x,
+        "--sbb-seat-reservation-graphic-position": "absolute",
+        "--sbb-seat-reservation-graphic-rotation": b
+      })}
           class="sbb-seat-reservation-graphic--cursor-pointer"
-          name=${i.icon ?? u}
+          name=${i.icon ?? v}
           role="img"
           aria-hidden="true"
         ></sbb-seat-reservation-graphic>
         ${this._popover(c, a)}
       `;
-      }) : null;
-    }
-    /**
-     * Manages the selected place event triggered from the place
-     * Each selection emits an array of all selected places
-     * @param selectPlaceEvent
-     */
-    _onSelectPlace(e) {
-      const r = e.detail;
-      this.preventCoachScrollByPlaceClick = !0, this.isCoachGridFocusable = !1, this.focusedCoachIndex = -1, this.hasSeatReservationNativeFocus || (this.hasSeatReservationNativeFocus = !0), this.preventPlaceClick || (this.updateSelectedSeatReservationPlaces(r), this.updateCurrentSelectedPlaceInCoach(r));
-    }
-    _onSelectNavCoach(e) {
-      const r = e.detail;
-      this.isKeyboardNavigation = !1, this.preventCoachScrollByPlaceClick = !1, this.hasSeatReservationNativeFocus = !0, r !== null && r !== this.currSelectedCoachIndex ? (this.unfocusPlaceElement(), this.scrollToSelectedNavCoach(r)) : r === this.currSelectedCoachIndex && (this.updateCurrentSelectedCoach(), this.preselectPlaceInCoach()), this._closePopover();
-    }
-    _onFocusNavCoach() {
-      this.preventCoachScrollByPlaceClick ? this.focusPlaceElement(this.currSelectedPlace) : this.preselectPlaceInCoach(), this.isAutoScrolling = !1;
-    }
-    /**
-     * Creates a popover for extra service information
-     * @param triggerId
-     * @param popoverContent
-     * @private
-     */
-    _popover(e, r) {
-      return n`
+    }) : null;
+  }
+  /**
+   * Manages the selected place event triggered from the place
+   * Each selection emits an array of all selected places
+   * @param selectPlaceEvent
+   */
+  _onSelectPlace(e) {
+    const r = e.detail;
+    this.preventCoachScrollByPlaceClick = !0, this.isCoachGridFocusable = !1, this.focusedCoachIndex = -1, this.hasSeatReservationNativeFocus || (this.hasSeatReservationNativeFocus = !0), this.preventPlaceClick || (this.updateSelectedSeatReservationPlaces(r), this.updateCurrentSelectedPlaceInCoach(r));
+  }
+  _onSelectNavCoach(e) {
+    const r = e.detail;
+    this.isKeyboardNavigation = !1, this.preventCoachScrollByPlaceClick = !1, this.hasSeatReservationNativeFocus = !0, r !== null && r !== this.currSelectedCoachIndex ? (this.unfocusPlaceElement(), this.scrollToSelectedNavCoach(r)) : r === this.currSelectedCoachIndex && (this.updateCurrentSelectedCoach(), this.preselectPlaceInCoach()), this._closePopover();
+  }
+  _onFocusNavCoach() {
+    this.preventCoachScrollByPlaceClick ? this.focusPlaceElement(this.currSelectedPlace) : this.preselectPlaceInCoach(), this.isAutoScrolling = !1;
+  }
+  /**
+   * Creates a popover for extra service information
+   * @param triggerId
+   * @param popoverContent
+   * @private
+   */
+  _popover(e, r) {
+    return n`
       <sbb-popover trigger="${e}" hover-trigger="">
         <p class="sbb-text-s sbb-sr-popover">${r}</p>
       </sbb-popover>
     `;
-    }
-    /**
-     * trigger to close all opened popovers (normally only one is opened at a time)
-     * @private
-     */
-    _closePopover() {
-      this.shadowRoot?.querySelectorAll("sbb-popover:is(:state(state-opened),[state--state-opened])").forEach((e) => e.close());
-    }
-    _getDescriptionTableCoach(e) {
-      if (e.type === "LOCOMOTIVE_COACH")
-        return h("COACH_LOCOMOTIVE", this._language.current);
-      if (!e.places?.length)
-        return h("COACH_BLOCKED_TABLE_CAPTION", this._language.current, [
-          e.id
-        ]);
-      let r;
-      const t = this._getTitleDescriptionListString(e.graphicElements), i = this._getTitleDescriptionListString(e.serviceElements);
-      if (r = h("COACH_TABLE_CAPTION", this._language.current, [
+  }
+  /**
+   * trigger to close all opened popovers (normally only one is opened at a time)
+   * @private
+   */
+  _closePopover() {
+    this.shadowRoot?.querySelectorAll("sbb-popover:is(:state(state-opened),[state--state-opened])").forEach((e) => e.close());
+  }
+  _getDescriptionTableCoach(e) {
+    if (e.type === "LOCOMOTIVE_COACH")
+      return h("COACH_LOCOMOTIVE", this._language.current);
+    if (!e.places?.length)
+      return h("COACH_BLOCKED_TABLE_CAPTION", this._language.current, [
         e.id
-      ]), !this.hasNavigation) {
-        const a = this.getAvailableFreePlacesNumFromCoach(e.places), s = h("COACH_AVAILABLE_NUMBER_OF_PLACES", this._language.current, [a.seats, a.bicycles]);
-        r = r.concat(". ").concat(s).concat(". ");
-      }
-      return (t || i) && (r += ". " + h("COACH_AVAILABLE_SERVICES", this._language.current) + ": ", r += i + ", " + t + "."), r;
-    }
-    _getTitleDescriptionListString(e) {
-      const r = [];
-      return e?.map((t) => {
-        const i = t.icon;
-        if (!i)
-          return null;
-        const a = r.indexOf(i) > -1, s = h(t.icon, this._language.current), o = this._notFixedRotatableAreaIcons.indexOf(i) === -1 && this.notAreaElements.indexOf(i) === -1;
-        return a || r.push(t.icon), s && !a && o ? s : null;
-      }).filter((t) => !!t).join(", ");
+      ]);
+    let r;
+    const t = this._getTitleDescriptionListString(e.graphicElements), i = this._getTitleDescriptionListString(e.serviceElements);
+    if (r = h("COACH_TABLE_CAPTION", this._language.current, [
+      e.id
+    ]), !this.hasNavigation) {
+      const a = this.getAvailableFreePlacesNumFromCoach(e.places), s = h("COACH_AVAILABLE_NUMBER_OF_PLACES", this._language.current, [a.seats, a.bicycles]);
+      r = r.concat(". ").concat(s).concat(". ");
     }
-  }, d = p, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(C[Symbol.metadata] ?? null) : void 0;
-    k(null, w = { value: d }, $, { kind: "class", name: d.name, metadata: e }, null, x), d = w.value, e && Object.defineProperty(d, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), p.styles = [S, D], y(d, x), d;
-})();
+    return (t || i) && (r += ". " + h("COACH_AVAILABLE_SERVICES", this._language.current) + ": ", r += i + ", " + t + "."), r;
+  }
+  _getTitleDescriptionListString(e) {
+    const r = [];
+    return e?.map((t) => {
+      const i = t.icon;
+      if (!i)
+        return null;
+      const a = r.indexOf(i) > -1, s = h(t.icon, this._language.current), o = this._notFixedRotatableAreaIcons.indexOf(i) === -1 && this.notAreaElements.indexOf(i) === -1;
+      return a || r.push(t.icon), s && !a && o ? s : null;
+    }).filter((t) => !!t).join(", ");
+  }
+};
+_.elementName = "sbb-seat-reservation", _.styles = [x, T];
+let f = _;
 export {
-  Y as SbbSeatReservationElement
+  f as SbbSeatReservationElement
 };