@sbb-esta/lyne-elements-experimental 3.4.0 → 3.6.0

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

@@ -1,11 +1,11 @@
-import { __esDecorate as C, __runInitializers as S } from "tslib";
+import { __esDecorate as $, __runInitializers as A } 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 { css as S, html as n, nothing as g } from "lit";
+import { customElement as R } 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 P } from "./seat-reservation-base-element.js";
+import { styleMap as v } from "lit/directives/style-map.js";
+import { getI18nSeatReservation as b } from "../common.js";
+import { SeatReservationBaseElement as E } 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,11 +14,11 @@ 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 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 {
+const T = S`*,: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}:host([align-vertical]) .sbb-sr{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%}:host([align-vertical]) .sbb-sr .sbb-sr-navigation-first-grid{grid-column:2/3;grid-row-start:1}:host([align-vertical]) .sbb-sr .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}:host([align-vertical]) .sbb-sr .sbb-sr-navigation-last-grid{grid-column:2/3;grid-row:3/4}:host([align-vertical]) .sbb-sr .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}:host([align-vertical]) .sbb-sr .sbb-sr-navigation-wrapper{padding-block-end:initial;padding-inline-start:calc(16 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}:host([align-vertical]) .sbb-sr .sbb-sr__component{grid-column:1/3;grid-row:1/4}:host([align-vertical]) .sbb-sr .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%}:host([align-vertical]) .sbb-sr .sbb-sr-grid-inner .nav-grid{grid-column:2/3;grid-row:2/3;height:100%}:host([align-vertical]) .sbb-sr .sbb-sr-grid-inner .nav-grid .sbb-sr-navigation{display:block;overflow:hidden scroll;height:100%}:host([align-vertical]) .sbb-sr .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))}:host([align-vertical]) .sbb-sr .sbb-sr-grid-inner .coaches-grid{grid-column:1/2;grid-row:1/4;overflow:hidden;position:relative}:host([align-vertical]) .sbb-sr .sbb-sr-grid-inner .coaches-grid .sbb-sr__wrapper-coach-decks{flex-direction:column}:host([align-vertical]) .sbb-sr .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}:host([align-vertical]) .sbb-sr .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}:host([align-vertical]) .sbb-sr .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)}:host([align-vertical]) .sbb-sr .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)}:host([align-vertical]) .sbb-sr .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)}:host([align-vertical]) .sbb-sr .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}:host([align-vertical]) .sbb-sr .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)))}:host([align-vertical]) .sbb-sr .sbb-sr-grid-inner .coaches-grid .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper::-webkit-scrollbar-button,:host([align-vertical]) .sbb-sr .sbb-sr-grid-inner .coaches-grid .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){:host([align-vertical]) .sbb-sr .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)}}:host([align-vertical]) .sbb-sr .sbb-sr-grid-inner .coaches-grid .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper{overflow:hidden scroll;height:100%;padding:0}:host([align-vertical]) .sbb-sr .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 q = (() => {
+  var h;
+  let C = [R("sbb-seat-reservation")], w, f = [], d, k = E;
+  return h = class extends k {
     constructor() {
       super(...arguments), this._language = new y(this), this._notAreaElements = [
         "DRIVER_AREA",
@@ -39,30 +39,29 @@ let K = (() => {
       });
     }
     render() {
-      return R || this._determineBaseFontSize(), this._initVehicleSeatReservationConstruction(), this._coachesHtmlTemplate || null;
-    }
-    _determineBaseFontSize() {
-      const e = 1 / parseInt(window.getComputedStyle(document.body).fontSize, 10);
-      this.style?.setProperty("--sbb-seat-reservation-one-px-rem", `${e + "rem"}`);
+      return this._initVehicleSeatReservationConstruction(), this._coachesHtmlTemplate || null;
     }
     _initVehicleSeatReservationConstruction() {
-      const r = this.alignVertical ? "sbb-sr__grid--vertical" : "";
-      this._coachesHtmlTemplate = b`
+      this._coachesHtmlTemplate = n`
       <div class="sbb-sr__container">
-        <div class="sbb-sr sbb-sr__grid ${r}">
+        <div class="sbb-sr sbb-sr__grid">
           <div class="sbb-sr-navigation-first-grid">
             ${this._renderNavigationControlButton("DIRECTION_LEFT")}
           </div>
           <div
             class="sbb-sr__component"
-            @keydown=${(e) => this.handleKeyboardEvent(e)}
+            @keydown=${(r) => this.handleKeyboardEvent(r)}
           >
             <div class="sbb-sr-grid-inner">
               <div class="nav-grid">${this._renderNavigation()}</div>
               <div class="coaches-grid">
                 <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__wrapper-scrollarea"
+                    class="sbb-sr__wrapper"
+                    @scroll=${() => this.coachAreaScrollend()}
+                  >
                     <div id="sbb-sr__parent-area" class="sbb-sr__parent" tabindex="-1">
                       <ul
                         class="${m({
@@ -70,9 +69,9 @@ let K = (() => {
         "sbb-sr__list-decks--gap": this.hasMultipleDecks
       })}"
                       >
-                        ${this.seatReservations?.map((e, t) => b`<li class="sbb-sr__list-item-deck">
+                        ${this.seatReservations?.map((r, e) => n`<li class="sbb-sr__list-item-deck">
                               <ul class="sbb-sr__list-coaches" role="presentation">
-                                ${this._renderCoaches(e, t)}
+                                ${this._renderCoaches(r, e)}
                               </ul>
                             </li>`)}
                       </ul>
@@ -91,38 +90,38 @@ let K = (() => {
     }
     _renderDeckLabels() {
       return this.hasMultipleDecks ? this.seatReservations.map((r) => {
-        const e = n(r.deckCoachLevel, this._language.current);
-        return b`<b aria-hidden="true">${e}</b>`;
+        const e = b(r.deckCoachLevel, this._language.current);
+        return n`<b aria-hidden="true">${e}</b>`;
       }) : null;
     }
     _renderNavigationControlButton(r) {
       if (!this.hasNavigation || !this.seatReservations)
         return null;
-      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
+      const e = r == "DIRECTION_RIGHT" ? "last-tab-element" : "first-tab-element", a = r == "DIRECTION_RIGHT" ? "arrow-right-small" : "arrow-left-small", s = r == "DIRECTION_RIGHT" ? b("SEAT_RESERVATION_END", this._language.current) : b("SEAT_RESERVATION_BEGIN", this._language.current);
+      let t = !0;
+      return (r == "DIRECTION_LEFT" && this.selectedCoachIndex > 0 || r == "DIRECTION_RIGHT" && this.selectedCoachIndex < this.seatReservations[this.currSelectedDeckIndex].coachItems.length - 1) && (t = !1), n`<sbb-secondary-button
       @click="${() => this.navigateByDirectionBtn(r)}"
       id="${e}"
       class="sbb-sr__navigation-control-button"
       size="s"
-      icon-name="${t}"
+      icon-name="${a}"
       type="button"
       aria-label="${s}"
       role="contentinfo"
-      .disabledInteractive="${a || v}"
+      .disabledInteractive="${t || g}"
     ></sbb-secondary-button>`;
     }
     _renderNavigation() {
-      return !this.hasNavigation || !this.seatReservations ? null : b`<div class="sbb-sr-navigation-wrapper">
+      return !this.hasNavigation || !this.seatReservations ? null : n`<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)}"
+          aria-label="${b("SEAT_RESERVATION_NAVIGATION", this._language.current)}"
         >
           ${this.seatReservations[this.currSelectedDeckIndex]?.coachItems.map((r, e) => {
-        const t = this.getAvailableFreePlacesNumFromCoach(e);
-        return b`<li>
+        const a = this.getAvailableFreePlacesNumFromCoach(e);
+        return n`<li>
                 <sbb-seat-reservation-navigation-coach
                   @selectcoach=${(s) => this._onSelectNavCoach(s)}
                   @focuscoach=${() => this._onFocusNavCoach()}
@@ -131,7 +130,7 @@ let K = (() => {
         })}"
                   index="${e}"
                   coach-id="${r.id}"
-                  .freePlacesByType="${t}"
+                  .freePlacesByType="${a}"
                   .selected=${this.selectedCoachIndex === e}
                   .focused=${this.focusedCoachIndex === e}
                   .propertyIds="${r.propertyIds}"
@@ -154,24 +153,24 @@ let K = (() => {
      * @returns
      */
     _renderCoaches(r, e) {
-      const t = JSON.parse(JSON.stringify(r?.coachItems));
-      return t ? t.map((s, a) => b`
+      const a = JSON.parse(JSON.stringify(r?.coachItems));
+      return a ? a.map((s, t) => n`
         <li class="sbb-sr__item-coach">
-          ${this._renderCoachElement(s, a, e)}
+          ${this._renderCoachElement(s, t, e)}
         </li>
       `) : null;
     }
-    _renderCoachElement(r, e, t) {
-      const s = this.getCalculatedDimension(r.dimension), a = this._getDescriptionTableCoach(r, e);
-      return b`<sbb-seat-reservation-scoped
-      style=${g({
+    _renderCoachElement(r, e, a) {
+      const s = this.getCalculatedDimension(r.dimension), t = this._getDescriptionTableCoach(r, e);
+      return n`<sbb-seat-reservation-scoped
+      style=${v({
         "--sbb-seat-reservation-scoped-width": s.w,
         "--sbb-seat-reservation-scoped-height": s.h
       })}
     >
       ${this._getRenderedCoachBorders(r)}
-      ${this._getRenderedGraphicalElements(r.graphicElements || [], r.dimension, e, t)}
-      ${this._getRenderedServiceElements(e, t, r.serviceElements)}
+      ${this._getRenderedGraphicalElements(r.graphicElements || [], r.dimension, e, a)}
+      ${this._getRenderedServiceElements(e, a, r.serviceElements)}
 
       <table
         @focus=${() => this.onFocusTableCoachAndPreselectPlace(e)}
@@ -180,9 +179,9 @@ let K = (() => {
         aria-describedby="sbb-sr-coach-caption-${e}"
       >
         <caption id="sbb-sr-coach-caption-${e}" tabindex="-1">
-          <sbb-screen-reader-only>${a}</sbb-screen-reader-only>
+          <sbb-screen-reader-only>${t}</sbb-screen-reader-only>
         </caption>
-        ${this._getRenderedRowPlaces(r, e, t)}
+        ${this._getRenderedRowPlaces(r, e, a)}
       </table>
     </sbb-seat-reservation-scoped>`;
     }
@@ -191,14 +190,14 @@ let K = (() => {
      * depending on whether the coach is with a driver area or without.
      */
     _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`
+      const s = r.graphicElements?.find((l) => l.icon === "DRIVER_AREA"), t = s ? r.dimension.w - s.dimension.w - 1 : r.dimension.w - 2, i = (r.dimension.h + this.coachBorderOffset * 2) * this.baseGridSize, o = s && s.position.x === 0 ? s?.dimension.w * this.baseGridSize : this.baseGridSize;
+      return n`
       <sbb-seat-reservation-graphic
-        style=${g({
-        "--sbb-seat-reservation-graphic-width": a * this.baseGridSize,
-        "--sbb-seat-reservation-graphic-height": o,
+        style=${v({
+        "--sbb-seat-reservation-graphic-width": t * this.baseGridSize,
+        "--sbb-seat-reservation-graphic-height": i,
         "--sbb-seat-reservation-graphic-top": this.coachBorderPadding * -1,
-        "--sbb-seat-reservation-graphic-left": i,
+        "--sbb-seat-reservation-graphic-left": o,
         "--sbb-seat-reservation-graphic-position": "absolute"
       })}
         name="COACH_BORDER_MIDDLE"
@@ -207,47 +206,45 @@ let K = (() => {
       ></sbb-seat-reservation-graphic>
     `;
     }
-    _getRenderedRowPlaces(r, e, t) {
+    _getRenderedRowPlaces(r, e, a) {
       if (!r.places)
         return null;
       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)}
+      for (const t of r.places)
+        s[t.position.y] ? s[t.position.y].push(t) : s[t.position.y] = [t];
+      return Object.values(s).map((t, i) => n`
+          <tr id="row-${e}-${t[0].position.y}" data-row-index=${i}>
+            ${this._getRenderedColumnPlaces(t, e, a)}
           </tr>
-        `).flatMap((a) => a);
+        `).flatMap((t) => t);
     }
-    _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`
+    _getRenderedColumnPlaces(r, e, a) {
+      return r.sort((s, t) => Number(s.position.x) - Number(t.position.x)), r?.map((s, t) => {
+        const i = this.getCalculatedDimension(s.dimension), o = this.getCalculatedPosition(s.position), l = s.rotation || 0, p = this.alignVertical ? -90 : 0;
+        return n`
         <td
-          id="cell-${t}-${e}-${s.position.y}-${a}"
+          id="cell-${a}-${e}-${s.position.y}-${t}"
           class="graphical-element"
         >
           <sbb-seat-reservation-place-control
-            style=${g({
-          "--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
+            style=${v({
+          "--sbb-seat-reservation-place-control-text-scale-value": Math.min(i.w, i.h),
+          "--sbb-seat-reservation-place-control-width": i.w,
+          "--sbb-seat-reservation-place-control-height": i.h,
+          "--sbb-seat-reservation-place-control-top": o.y,
+          "--sbb-seat-reservation-place-control-left": o.x,
+          "--sbb-seat-reservation-place-control-rotation": l,
+          "--sbb-seat-reservation-place-control-text-rotation": p
         })}
-            @selectplace=${(h) => this._onSelectPlace(h)}
+            @selectplace=${(c) => this._onSelectPlace(c)}
             exportparts="sbb-sr-place-part"
-            id="seat-reservation__place-button-${t}-${e}-${s.number}"
+            id="seat-reservation__place-button-${a}-${e}-${s.number}"
             class="seat-reservation-place-control"
-            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}
+            deck-index=${a}
             .propertyIds=${s.propertyIds}
             .preventClick=${this.preventPlaceClick}
           ></sbb-seat-reservation-place-control>
@@ -255,10 +252,10 @@ let K = (() => {
       `;
       });
     }
-    _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);
+    _getRenderedGraphicalElements(r, e, a, s) {
+      return r ? r?.map((t) => {
+        const i = t.icon ?? "", o = t.rotation || 0, l = this._notFixedRotatableAreaIcons.indexOf(t.icon) === -1, p = this.alignVertical && l ? o - 90 : o;
+        return this._notAreaElements.findIndex((c) => c === i) > -1 ? this._getRenderElementWithoutArea(t, o, e) : this._getRenderElementWithArea(t, p, e, a, s);
       }) : null;
     }
     /**
@@ -269,16 +266,16 @@ let K = (() => {
      * @param coachIndex used to generate a unique id for the popover trigger
      * @private
      */
-    _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}`;
+    _getRenderElementWithArea(r, e, a, s, t) {
+      const i = r.icon?.indexOf("TABLE") === -1, o = r.icon && i ? r.icon : null, l = o !== "ENTRY_EXIT", p = r.icon ? b(r.icon, this._language.current) : g, c = this.getCalculatedDimension(r.dimension, a, !0, l), _ = this.getCalculatedPosition(r.position, r.dimension, a, !0), x = `popover-trigger-${t}-${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`
+      return r.position.y === this.coachBorderOffset * -1 ? u = "upper-border" : r.position.y + r.dimension.h === a.h + this.coachBorderOffset && (u = "lower-border"), n`
       <sbb-seat-reservation-area
         id="${x}"
-        class="${m({ "sbb-seat-reservation-area--cursor-pointer": i !== null })}"
-        style=${g({
-        "--sbb-seat-reservation-area-width": p.w,
-        "--sbb-seat-reservation-area-height": p.h,
+        class="${m({ "sbb-seat-reservation-area--cursor-pointer": o !== null })}"
+        style=${v({
+        "--sbb-seat-reservation-area-width": c.w,
+        "--sbb-seat-reservation-area-height": c.h,
         "--sbb-seat-reservation-area-top": _.y,
         "--sbb-seat-reservation-area-left": _.x
       })}
@@ -286,56 +283,58 @@ let K = (() => {
         background="dark"
         aria-hidden="true"
       >
-        ${i ? b`
+        ${o ? n`
               <sbb-seat-reservation-graphic
-                name=${i}
-                width=${this.baseGridSize}
-                height=${this.baseGridSize}
-                rotation=${e}
+                style=${v({
+        "--sbb-seat-reservation-graphic-width": this.baseGridSize,
+        "--sbb-seat-reservation-graphic-height": this.baseGridSize,
+        "--sbb-seat-reservation-graphic-rotation": e
+      })}
+                name=${o}
                 role="img"
                 aria-hidden="true"
               ></sbb-seat-reservation-graphic>
-            ` : v}
+            ` : g}
       </sbb-seat-reservation-area>
-      ${i ? this._popover(x, h) : v}
+      ${o ? this._popover(x, p) : g}
     `;
     }
-    _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({
+    _getRenderElementWithoutArea(r, e, a) {
+      const s = this.getCalculatedDimension(r.dimension, a), t = this.getCalculatedPosition(r.position, r.dimension, a), i = r.icon && r.icon.indexOf("DRIVER_AREA") === -1 ? r.icon : r.icon?.concat("_", this.seatReservations[this.currSelectedDeckIndex].vehicleType);
+      return n` <sbb-seat-reservation-graphic
+      style=${v({
         "--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"
+        "--sbb-seat-reservation-graphic-top": t.y,
+        "--sbb-seat-reservation-graphic-left": t.x,
+        "--sbb-seat-reservation-graphic-position": "absolute",
+        "--sbb-seat-reservation-graphic-rotation": e
       })}
-      name=${o ?? v}
-      rotation=${e}
+      name=${i ?? g}
       aria-hidden="true"
       ?stretch=${!0}
     ></sbb-seat-reservation-graphic>`;
     }
-    _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`
+    _getRenderedServiceElements(r, e, a) {
+      return a ? a?.map((s) => {
+        const t = s.icon ? b(s.icon, this._language.current) : null, i = this.getCalculatedDimension(s.dimension), o = this.getCalculatedPosition(s.position), l = s.rotation || 0, p = this.alignVertical ? l - 90 : l, c = `popover-trigger-${e}-${r}-${o.x}-${o.y}`;
+        return n`
         <sbb-seat-reservation-graphic
-          id="${p}"
-          style=${g({
-          "--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"
+          id="${c}"
+          style=${v({
+          "--sbb-seat-reservation-graphic-width": i.w,
+          "--sbb-seat-reservation-graphic-height": i.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": p
         })}
           class="sbb-seat-reservation-graphic--cursor-pointer"
-          name=${s.icon ?? v}
-          .rotation=${h}
+          name=${s.icon ?? g}
           role="img"
           aria-hidden="true"
         ></sbb-seat-reservation-graphic>
-        ${this._popover(p, a)}
+        ${this._popover(c, t)}
       `;
       }) : null;
     }
@@ -362,7 +361,7 @@ let K = (() => {
      * @private
      */
     _popover(r, e) {
-      return b`
+      return n`
       <sbb-popover trigger="${r}">
         <p class="sbb-text-s sbb-sr-popover">${e}</p>
       </sbb-popover>
@@ -377,34 +376,34 @@ let K = (() => {
     }
     _getDescriptionTableCoach(r, e) {
       if (!r.places?.length)
-        return n("COACH_BLOCKED_TABLE_CAPTION", this._language.current, [
+        return b("COACH_BLOCKED_TABLE_CAPTION", this._language.current, [
           r.id
         ]);
-      let t;
-      const s = this._getTitleDescriptionListString(r.graphicElements), a = this._getTitleDescriptionListString(r.serviceElements);
-      if (t = n("COACH_TABLE_CAPTION", this._language.current, [
+      let a;
+      const s = this._getTitleDescriptionListString(r.graphicElements), t = this._getTitleDescriptionListString(r.serviceElements);
+      if (a = b("COACH_TABLE_CAPTION", this._language.current, [
         r.id
       ]), !this.hasNavigation) {
-        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(". ");
+        const i = this.getAvailableFreePlacesNumFromCoach(e), o = b("COACH_AVAILABLE_NUMBER_OF_PLACES", this._language.current, [i.seats, i.bicycles]);
+        a = a.concat(". ").concat(o).concat(". ");
       }
-      return (s || a) && (t += ". " + n("COACH_AVAILABLE_SERVICES", this._language.current) + ": ", t += a + ", " + s + "."), t;
+      return (s || t) && (a += ". " + b("COACH_AVAILABLE_SERVICES", this._language.current) + ": ", a += t + ", " + s + "."), a;
     }
     _getTitleDescriptionListString(r) {
       const e = [];
-      return r?.map((t) => {
-        const s = t.icon;
+      return r?.map((a) => {
+        const s = a.icon;
         if (!s)
           return null;
-        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(", ");
+        const t = e.indexOf(s) > -1, i = b(a.icon, this._language.current), o = this._notFixedRotatableAreaIcons.indexOf(s) === -1 && this._notAreaElements.indexOf(s) === -1;
+        return t || e.push(a.icon), i && !t && o ? i : null;
+      }).filter((a) => !!a).join(", ");
     }
-  }, c = d, (() => {
+  }, d = h, (() => {
     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;
+    $(null, w = { value: d }, C, { kind: "class", name: d.name, metadata: r }, null, f), d = w.value, r && Object.defineProperty(d, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
+  })(), h.styles = T, A(d, f), d;
 })();
 export {
-  K as SbbSeatReservationElement
+  q as SbbSeatReservationElement
 };

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

@@ -226,14 +226,14 @@ const E = (A) => d`
           <td>DRIVER_AREA</td>
         </tr>
         <tr>
-          <td>${t("DRIVER_AREA_FULL_TRAIN")}</td>
+          <td>${t("DRIVER_AREA_TRAIN")}</td>
           <td>Driver: Train</td>
-          <td>DRIVER_AREA_FULL_TRAIN</td>
+          <td>DRIVER_AREA_TRAIN</td>
         </tr>
         <tr>
-          <td>${t("DRIVER_AREA_FULL_BUS")}</td>
+          <td>${t("DRIVER_AREA_BUS")}</td>
           <td>Driver: Bus</td>
-          <td>DRIVER_AREA_FULL_BUS</td>
+          <td>DRIVER_AREA_BUS</td>
         </tr>
         <tr>
           <td>${t("COMPARTMENT_PASSAGE_HIGH")}</td>
@@ -286,7 +286,7 @@ const E = (A) => d`
       </tbody>
     </table>
   </sbb-table-wrapper>
-`, L = d`
+`, c = d`
   <style>
     .story-asset {
       width: max-content;
@@ -304,6 +304,6 @@ const E = (A) => d`
   ${o}
 `;
 export {
-  L as assetsTemplate,
+  c as assetsTemplate,
   t as svgImageByOSDMCode
 };

package/seat-reservation/seat-reservation-graphic/seat-reservation-graphic.component.d.ts

@@ -1,4 +1,4 @@
-import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
+import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
 /**
  * Output one of the SVG graphics based on its code.
  */
@@ -8,16 +8,7 @@ export declare class SbbSeatReservationGraphicElement extends LitElement {
     accessor name: string;
     /** if true, scale the graphic content of the given element non-uniformly if necessary */
     accessor stretch: boolean;
-    /** handles the rotation of the SVG graphic */
-    accessor rotation: number;
-    /** Inverse rotation for part of an SVG that can be rotated opposite to the normal rotation */
-    accessor inverseRotation: number;
-    /** width of the svg in pixels (without unit) */
-    accessor width: number;
-    /** height of the svg in pixels (without unit) */
-    accessor height: number;
     private _language;
-    protected willUpdate(_changedProperties: PropertyValues): void;
     protected render(): TemplateResult | null;
     private _getSvgElement;
 }

package/seat-reservation/seat-reservation-graphic/seat-reservation-graphic.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"seat-reservation-graphic.component.d.ts","sourceRoot":"","sources":["../../../../src/elements-experimental/seat-reservation/seat-reservation-graphic/seat-reservation-graphic.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACpF,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAQvC,OAAO,iCAAiC,CAAC;AAEzC;;GAEG;AACH,qBAEM,gCAAiC,SAAQ,UAAU;IACvD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,+CAA+C;IAC/C,SAEgB,IAAI,EAAE,MAAM,CAAM;IAElC,yFAAyF;IACzF,SAEgB,OAAO,EAAE,OAAO,CAAS;IAEzC,8CAA8C;IAC9C,SAEgB,QAAQ,EAAE,MAAM,CAAK;IAErC,8FAA8F;IAC9F,SAEgB,eAAe,EAAE,MAAM,CAAK;IAE5C,gDAAgD;IAChD,SAEgB,KAAK,EAAE,MAAM,CAAS;IAEtC,iDAAiD;IACjD,SAEgB,MAAM,EAAE,MAAM,CAAS;IAEvC,OAAO,CAAC,SAAS,CAAmC;cAEjC,UAAU,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;cAsBpD,MAAM,IAAI,cAAc,GAAG,IAAI;IAuBlD,OAAO,CAAC,cAAc;CASvB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,8BAA8B,EAAE,gCAAgC,CAAC;KAClE;CACF"}
+{"version":3,"file":"seat-reservation-graphic.component.d.ts","sourceRoot":"","sources":["../../../../src/elements-experimental/seat-reservation/seat-reservation-graphic/seat-reservation-graphic.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAC/D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAQvC,OAAO,iCAAiC,CAAC;AAEzC;;GAEG;AACH,qBAEM,gCAAiC,SAAQ,UAAU;IACvD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,+CAA+C;IAC/C,SAEgB,IAAI,EAAE,MAAM,CAAM;IAElC,yFAAyF;IACzF,SAEgB,OAAO,EAAE,OAAO,CAAS;IAEzC,OAAO,CAAC,SAAS,CAAmC;cAEjC,MAAM,IAAI,cAAc,GAAG,IAAI;IAuBlD,OAAO,CAAC,cAAc;CASvB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,8BAA8B,EAAE,gCAAgC,CAAC;KAClE;CACF"}