@sbb-esta/lyne-elements-experimental 3.7.0 → 3.8.0

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

@@ -1 +1 @@
-{"version":3,"file":"seat-reservation.component.d.ts","sourceRoot":"","sources":["../../../../src/elements-experimental/seat-reservation/seat-reservation/seat-reservation.component.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAe1E,OAAO,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAC;AAGhF,OAAO,mCAAmC,CAAC;AAC3C,OAAO,+CAA+C,CAAC;AACvD,OAAO,6BAA6B,CAAC;AACrC,OAAO,gCAAgC,CAAC;AACxC,OAAO,sCAAsC,CAAC;AAC9C,OAAO,yCAAyC,CAAC;AACjD,OAAO,+BAA+B,CAAC;AACvC,OAAO,4CAA4C,CAAC;AAEpD;;;GAGG;AACH,qBAEM,yBAA0B,SAAQ,0BAA0B;IAChE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,oBAAoB,CAAC,CAAiB;IAE9C,OAAO,CAAC,gBAAgB,CAQtB;IAGF,OAAO,CAAC,2BAA2B,CAAkB;cAElC,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAgBzD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAc3D,MAAM,IAAI,cAAc,GAAG,IAAI;IAKlD,OAAO,CAAC,uCAAuC;IAoD/C,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,8BAA8B;IAkCtC,OAAO,CAAC,iBAAiB;IA4CzB;;;;OAIG;IACH,OAAO,CAAC,cAAc;IAkBtB,OAAO,CAAC,mBAAmB;IAqC3B;;;OAGG;IACH,OAAO,CAAC,wBAAwB;IA4BhC,OAAO,CAAC,qBAAqB;IA8B7B,OAAO,CAAC,wBAAwB;IAoDhC,OAAO,CAAC,6BAA6B;IAgCrC;;;;;;;OAOG;IACH,OAAO,CAAC,yBAAyB;IA2EjC,OAAO,CAAC,4BAA4B;IAuCpC,OAAO,CAAC,2BAA2B;IAwCnC;;;;OAIG;IACH,OAAO,CAAC,cAAc;IActB,OAAO,CAAC,iBAAiB;IAgBzB,OAAO,CAAC,gBAAgB;IASxB;;;;;OAKG;IACH,OAAO,CAAC,QAAQ;IAWhB;;;OAGG;IACH,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,yBAAyB;IAkCjC,OAAO,CAAC,8BAA8B;CAyBvC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,sBAAsB,EAAE,yBAAyB,CAAC;KACnD;CACF"}
+{"version":3,"file":"seat-reservation.component.d.ts","sourceRoot":"","sources":["../../../../src/elements-experimental/seat-reservation/seat-reservation/seat-reservation.component.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAgB1E,OAAO,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAC;AAGhF,OAAO,mCAAmC,CAAC;AAC3C,OAAO,+CAA+C,CAAC;AACvD,OAAO,6BAA6B,CAAC;AACrC,OAAO,gCAAgC,CAAC;AACxC,OAAO,sCAAsC,CAAC;AAC9C,OAAO,yCAAyC,CAAC;AACjD,OAAO,+BAA+B,CAAC;AACvC,OAAO,4CAA4C,CAAC;AAEpD;;;GAGG;AACH,qBAEM,yBAA0B,SAAQ,0BAA0B;IAChE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,oBAAoB,CAAC,CAAiB;IAE9C,OAAO,CAAC,gBAAgB,CAQtB;IAGF,OAAO,CAAC,2BAA2B,CAAkB;cAElC,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAgBzD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAS3D,MAAM,IAAI,cAAc,GAAG,IAAI;IAKlD,OAAO,CAAC,uCAAuC;IAoD/C,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,8BAA8B;IAkCtC,OAAO,CAAC,iBAAiB;IAwCzB;;;;OAIG;IACH,OAAO,CAAC,cAAc;IAkBtB,OAAO,CAAC,mBAAmB;IAqC3B;;;OAGG;IACH,OAAO,CAAC,wBAAwB;IA8BhC,OAAO,CAAC,qBAAqB;IA8B7B,OAAO,CAAC,wBAAwB;IAoDhC,OAAO,CAAC,6BAA6B;IAgCrC;;;;;;;OAOG;IACH,OAAO,CAAC,yBAAyB;IA2EjC,OAAO,CAAC,4BAA4B;IAuCpC,OAAO,CAAC,2BAA2B;IAwCnC;;;;OAIG;IACH,OAAO,CAAC,cAAc;IActB,OAAO,CAAC,iBAAiB;IAgBzB,OAAO,CAAC,gBAAgB;IASxB;;;;;OAKG;IACH,OAAO,CAAC,QAAQ;IAWhB;;;OAGG;IACH,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,yBAAyB;IAkCjC,OAAO,CAAC,8BAA8B;CAyBvC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,sBAAsB,EAAE,yBAAyB,CAAC;KACnD;CACF"}

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

@@ -1,10 +1,10 @@
-import { __esDecorate as $, __runInitializers as A } from "tslib";
-import { SbbLanguageController as y } from "@sbb-esta/lyne-elements/core/controllers.js";
-import { css as S, html as n, nothing as g } from "lit";
-import { customElement as R } from "lit/decorators.js";
+import { __esDecorate as C, __runInitializers as y } from "tslib";
+import { SbbLanguageController as A } from "@sbb-esta/lyne-elements/core/controllers.js";
+import { css as R, html as b, nothing as g } from "lit";
+import { customElement as S } from "lit/decorators.js";
 import { classMap as m } from "lit/directives/class-map.js";
 import { styleMap as v } from "lit/directives/style-map.js";
-import { getI18nSeatReservation as b } from "../common.js";
+import { getI18nSeatReservation as n } 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";
@@ -14,13 +14,13 @@ 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 = 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;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))}`;
+const T = R`*,: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-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}.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;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: 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::-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: transparent;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: 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::-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: 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)}: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;
+  let $ = [S("sbb-seat-reservation")], w, f = [], d, k = E;
   return h = class extends k {
     constructor() {
-      super(...arguments), this._language = new y(this), this._notAreaElements = [
+      super(...arguments), this._language = new A(this), this._notAreaElements = [
         "DRIVER_AREA",
         "COACH_PASSAGE",
         "COACH_WALL_NO_PASSAGE",
@@ -35,14 +35,14 @@ let q = (() => {
     }
     firstUpdated(r) {
       super.firstUpdated(r), this.updateComplete.then(() => {
-        this.initPrepairSeatReservationData(), this.initNavigationSelectionByScrollEvent(), this.requestUpdate();
+        this.initNavigationSelectionByScrollEvent();
       });
     }
     render() {
       return this._initVehicleSeatReservationConstruction(), this._coachesHtmlTemplate || null;
     }
     _initVehicleSeatReservationConstruction() {
-      this._coachesHtmlTemplate = n`
+      this._coachesHtmlTemplate = b`
       <div class="sbb-sr__container">
         <div class="sbb-sr sbb-sr__grid">
           <div class="sbb-sr-navigation-first-grid">
@@ -69,7 +69,7 @@ let q = (() => {
         "sbb-sr__list-decks--gap": this.hasMultipleDecks
       })}"
                       >
-                        ${this.seatReservations?.map((r, e) => n`<li class="sbb-sr__list-item-deck">
+                        ${this.seatReservations?.map((r, e) => b`<li class="sbb-sr__list-item-deck">
                               <ul class="sbb-sr__list-coaches" role="presentation">
                                 ${this._renderCoaches(r, e)}
                               </ul>
@@ -90,16 +90,16 @@ let q = (() => {
     }
     _renderDeckLabels() {
       return this.hasMultipleDecks ? this.seatReservations.map((r) => {
-        const e = b(r.deckCoachLevel, this._language.current);
-        return n`<b aria-hidden="true">${e}</b>`;
+        const e = n(r.deckCoachLevel, this._language.current);
+        return b`<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", 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);
+      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" ? n("SEAT_RESERVATION_END", this._language.current) : n("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
+      return (r == "DIRECTION_LEFT" && this.selectedCoachIndex > 0 || r == "DIRECTION_RIGHT" && this.selectedCoachIndex < this.seatReservations[this.currSelectedDeckIndex].coachItems.length - 1) && (t = !1), b`<sbb-secondary-button
       @click="${() => this.navigateByDirectionBtn(r)}"
       id="${e}"
       class="sbb-sr__navigation-control-button"
@@ -112,37 +112,34 @@ let q = (() => {
     ></sbb-secondary-button>`;
     }
     _renderNavigation() {
-      return !this.hasNavigation || !this.seatReservations ? null : n`<div class="sbb-sr-navigation-wrapper">
+      return !this.hasNavigation || !this.seatReservations ? null : b`<div class="sbb-sr-navigation-wrapper">
       <nav id="sbb-sr-navigation" class="sbb-sr-navigation">
         <ul
           id="sbb-sr__navigation-list-coaches"
           class="sbb-sr-navigation__list-coaches"
-          aria-label="${b("SEAT_RESERVATION_NAVIGATION", this._language.current)}"
+          aria-label="${n("SEAT_RESERVATION_NAVIGATION", this._language.current)}"
         >
-          ${this.seatReservations[this.currSelectedDeckIndex]?.coachItems.map((r, e) => {
-        const a = this.getAvailableFreePlacesNumFromCoach(e);
-        return n`<li>
-                <sbb-seat-reservation-navigation-coach
-                  @selectcoach=${(s) => this._onSelectNavCoach(s)}
-                  @focuscoach=${() => this._onFocusNavCoach()}
-                  class="${m({
-          "sbb-sr__navigation-coach--hover-scroll": this.hoveredScrollCoachIndex === e
-        })}"
-                  index="${e}"
-                  coach-id="${r.id}"
-                  .freePlacesByType="${a}"
-                  .selected=${this.selectedCoachIndex === e}
-                  .focused=${this.focusedCoachIndex === e}
-                  .propertyIds="${r.propertyIds}"
-                  .travelClass="${r.travelClass}"
-                  ?driver-area="${!r.places?.length}"
-                  ?first="${r?.driverAreaSide?.left}"
-                  ?last="${r?.driverAreaSide?.right}"
-                  ?vertical="${this.alignVertical}"
-                >
-                </sbb-seat-reservation-navigation-coach>
-              </li>`;
-      })}
+          ${this.coachNavData.map((r, e) => b`<li>
+              <sbb-seat-reservation-navigation-coach
+                @selectcoach=${(a) => this._onSelectNavCoach(a)}
+                @focuscoach=${() => this._onFocusNavCoach()}
+                class="${m({
+        "sbb-sr__navigation-coach--hover-scroll": this.hoveredScrollCoachIndex === e
+      })}"
+                index="${e}"
+                coach-id="${r.id}"
+                .freePlacesByType="${r.freePlaces}"
+                .selected=${this.selectedCoachIndex === e}
+                .focused=${this.focusedCoachIndex === e}
+                .propertyIds="${r.propertyIds}"
+                .travelClass="${r.travelClass}"
+                ?driver-area="${r.isDriverArea}"
+                ?first="${r?.driverAreaSide?.left}"
+                ?last="${r?.driverAreaSide?.right}"
+                ?vertical="${this.alignVertical}"
+              >
+              </sbb-seat-reservation-navigation-coach>
+            </li>`)}
         </ul>
       </nav>
     </div>`;
@@ -154,15 +151,15 @@ let q = (() => {
      */
     _renderCoaches(r, e) {
       const a = JSON.parse(JSON.stringify(r?.coachItems));
-      return a ? a.map((s, t) => n`
+      return a ? a.map((s, t) => b`
         <li class="sbb-sr__item-coach">
           ${this._renderCoachElement(s, t, e)}
         </li>
       `) : null;
     }
     _renderCoachElement(r, e, a) {
-      const s = this.getCalculatedDimension(r.dimension), t = this._getDescriptionTableCoach(r, e);
-      return n`<sbb-seat-reservation-scoped
+      const s = this.getCalculatedDimension(r.dimension), t = this._getDescriptionTableCoach(r);
+      return b`<sbb-seat-reservation-scoped
       style=${v({
         "--sbb-seat-reservation-scoped-width": s.w,
         "--sbb-seat-reservation-scoped-height": s.h
@@ -190,8 +187,10 @@ let q = (() => {
      * depending on whether the coach is with a driver area or without.
      */
     _getRenderedCoachBorders(r) {
-      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`
+      if (!r.graphicElements)
+        return null;
+      const e = 1, s = r.graphicElements?.find((l) => l.icon === "DRIVER_AREA"), t = s ? r.dimension.w - s.dimension.w - e : r.dimension.w - e * 2, i = (r.dimension.h + this.coachBorderOffset * 2) * this.baseGridSize, o = s && s.position.x === 0 ? s?.dimension.w * this.baseGridSize : this.baseGridSize;
+      return b`
       <sbb-seat-reservation-graphic
         style=${v({
         "--sbb-seat-reservation-graphic-width": t * this.baseGridSize,
@@ -212,7 +211,7 @@ let q = (() => {
       const s = {};
       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`
+      return Object.values(s).map((t, i) => b`
           <tr id="row-${e}-${t[0].position.y}" data-row-index=${i}>
             ${this._getRenderedColumnPlaces(t, e, a)}
           </tr>
@@ -221,7 +220,7 @@ let q = (() => {
     _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`
+        return b`
         <td
           id="cell-${a}-${e}-${s.position.y}-${t}"
           class="graphical-element"
@@ -267,9 +266,9 @@ let q = (() => {
      * @private
      */
     _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}`;
+      const i = r.icon?.indexOf("TABLE") === -1, o = r.icon && i ? r.icon : null, l = o !== "ENTRY_EXIT", p = r.icon ? n(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 === a.h + this.coachBorderOffset && (u = "lower-border"), n`
+      return r.position.y === this.coachBorderOffset * -1 ? u = "upper-border" : r.position.y + r.dimension.h === a.h + this.coachBorderOffset && (u = "lower-border"), b`
       <sbb-seat-reservation-area
         id="${x}"
         class="${m({ "sbb-seat-reservation-area--cursor-pointer": o !== null })}"
@@ -283,7 +282,7 @@ let q = (() => {
         background="dark"
         aria-hidden="true"
       >
-        ${o ? n`
+        ${o ? b`
               <sbb-seat-reservation-graphic
                 style=${v({
         "--sbb-seat-reservation-graphic-width": this.baseGridSize,
@@ -301,7 +300,7 @@ let q = (() => {
     }
     _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
+      return b` <sbb-seat-reservation-graphic
       style=${v({
         "--sbb-seat-reservation-graphic-width": s.w,
         "--sbb-seat-reservation-graphic-height": s.h,
@@ -317,8 +316,8 @@ let q = (() => {
     }
     _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`
+        const t = s.icon ? n(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 b`
         <sbb-seat-reservation-graphic
           id="${c}"
           style=${v({
@@ -361,8 +360,8 @@ let q = (() => {
      * @private
      */
     _popover(r, e) {
-      return n`
-      <sbb-popover trigger="${r}">
+      return b`
+      <sbb-popover trigger="${r}" hover-trigger="">
         <p class="sbb-text-s sbb-sr-popover">${e}</p>
       </sbb-popover>
     `;
@@ -374,20 +373,20 @@ let q = (() => {
     _closePopover() {
       this.shadowRoot?.querySelectorAll('sbb-popover[data-state="opened"]').forEach((r) => r.setAttribute("data-state", "closed"));
     }
-    _getDescriptionTableCoach(r, e) {
+    _getDescriptionTableCoach(r) {
       if (!r.places?.length)
-        return b("COACH_BLOCKED_TABLE_CAPTION", this._language.current, [
+        return n("COACH_BLOCKED_TABLE_CAPTION", this._language.current, [
           r.id
         ]);
-      let a;
-      const s = this._getTitleDescriptionListString(r.graphicElements), t = this._getTitleDescriptionListString(r.serviceElements);
-      if (a = b("COACH_TABLE_CAPTION", this._language.current, [
+      let e;
+      const a = this._getTitleDescriptionListString(r.graphicElements), s = this._getTitleDescriptionListString(r.serviceElements);
+      if (e = n("COACH_TABLE_CAPTION", this._language.current, [
         r.id
       ]), !this.hasNavigation) {
-        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(". ");
+        const t = this.getAvailableFreePlacesNumFromCoach(r.places), i = n("COACH_AVAILABLE_NUMBER_OF_PLACES", this._language.current, [t.seats, t.bicycles]);
+        e = e.concat(". ").concat(i).concat(". ");
       }
-      return (s || t) && (a += ". " + b("COACH_AVAILABLE_SERVICES", this._language.current) + ": ", a += t + ", " + s + "."), a;
+      return (a || s) && (e += ". " + n("COACH_AVAILABLE_SERVICES", this._language.current) + ": ", e += s + ", " + a + "."), e;
     }
     _getTitleDescriptionListString(r) {
       const e = [];
@@ -395,14 +394,14 @@ let q = (() => {
         const s = a.icon;
         if (!s)
           return null;
-        const t = e.indexOf(s) > -1, i = b(a.icon, this._language.current), o = this._notFixedRotatableAreaIcons.indexOf(s) === -1 && this._notAreaElements.indexOf(s) === -1;
+        const t = e.indexOf(s) > -1, i = n(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(", ");
     }
   }, d = h, (() => {
     const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(k[Symbol.metadata] ?? null) : void 0;
-    $(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;
+    C(null, w = { value: d }, $, { 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, y(d, f), d;
 })();
 export {
   q as SbbSeatReservationElement

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

@@ -1,21 +1,21 @@
-var w = (e) => {
-  throw TypeError(e);
+var w = (r) => {
+  throw TypeError(r);
 };
-var y = (e, r, t) => r.has(e) || w("Cannot " + t);
-var d = (e, r, t) => (y(e, r, "read from private field"), t ? t.call(e) : r.get(e)), u = (e, r, t) => r.has(e) ? w("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(e) : r.set(e, t), m = (e, r, t, s) => (y(e, r, "write to private field"), s ? s.call(e, t) : r.set(e, t), t);
+var y = (r, e, t) => e.has(r) || w("Cannot " + t);
+var d = (r, e, t) => (y(r, e, "read from private field"), t ? t.call(r) : e.get(r)), u = (r, e, t) => e.has(r) ? w("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(r) : e.set(r, t), m = (r, e, t, s) => (y(r, e, "write to private field"), s ? s.call(r, t) : e.set(r, t), t);
 import { __esDecorate as v, __runInitializers as l } from "tslib";
 import { forceType as z } from "@sbb-esta/lyne-elements/core/decorators.js";
 import { css as E, LitElement as I, html as j } from "lit";
 import { customElement as D, property as S } from "lit/decorators.js";
-const O = E`*,:before,:after{box-sizing:border-box}:host{--sbb-seat-reservation-area-border-radius: var(--sbb-border-width-4x);--sbb-seat-reservation-area-rotation: 0;display:flex;justify-content:center;align-items:center;height:calc(var(--sbb-seat-reservation-area-height) * var(--sbb-seat-reservation-one-px-rem, .0625rem));width:calc(var(--sbb-seat-reservation-area-width) * var(--sbb-seat-reservation-one-px-rem, .0625rem));border:var(--sbb-border-width-1x) solid var(--sbb-color-graphite);border-radius:var(--sbb-seat-reservation-area-border-radius);position:absolute;inset-block-start:calc(var(--sbb-seat-reservation-area-top) * var(--sbb-seat-reservation-one-px-rem, .0625rem));inset-inline-start:calc(var(--sbb-seat-reservation-area-left) * var(--sbb-seat-reservation-one-px-rem, .0625rem));rotate:calc(var(--sbb-seat-reservation-area-rotation) * 1deg);line-height:normal;background-color:var(--sbb-color-white)}:host([background=dark]){background-color:var(--sbb-color-milk)}:host([mounting=upper-border]){border-block-start-width:var(--sbb-border-width-2x);border-radius:0 0 var(--sbb-seat-reservation-area-border-radius) var(--sbb-seat-reservation-area-border-radius)}:host([mounting=lower-border]){border-block-end-width:var(--sbb-border-width-2x);border-radius:var(--sbb-seat-reservation-area-border-radius) var(--sbb-seat-reservation-area-border-radius) 0 0}:host([mounting=upper-to-lower-border]){border-block-start:none;border-block-end:none;border-radius:0}:host(.sbb-seat-reservation-area--cursor-pointer){cursor:pointer}`;
+const O = E`*,:before,:after{box-sizing:border-box}:host{--sbb-seat-reservation-area-border-radius: var(--sbb-border-width-4x);--sbb-seat-reservation-area-rotation: 0;display:flex;justify-content:center;align-items:center;height:calc(var(--sbb-seat-reservation-area-height) * var(--sbb-seat-reservation-one-px-rem, .0625rem));width:calc(var(--sbb-seat-reservation-area-width) * var(--sbb-seat-reservation-one-px-rem, .0625rem));border:var(--sbb-border-width-1x) solid var(--sbb-color-graphite);border:var(--sbb-border-width-1x) solid light-dark(var(--sbb-color-graphite),var(--sbb-color-granite));border-radius:var(--sbb-seat-reservation-area-border-radius);position:absolute;inset-block-start:calc(var(--sbb-seat-reservation-area-top) * var(--sbb-seat-reservation-one-px-rem, .0625rem));inset-inline-start:calc(var(--sbb-seat-reservation-area-left) * var(--sbb-seat-reservation-one-px-rem, .0625rem));rotate:calc(var(--sbb-seat-reservation-area-rotation) * 1deg);line-height:normal;background-color:var(--sbb-background-color-2)}:host([background=dark]){background-color:var(--sbb-color-milk);background-color:light-dark(var(--sbb-color-milk),var(--sbb-color-iron))}:host([mounting=upper-border]){border-block-start-width:var(--sbb-border-width-2x);border-radius:0 0 var(--sbb-seat-reservation-area-border-radius) var(--sbb-seat-reservation-area-border-radius)}:host([mounting=lower-border]){border-block-end-width:var(--sbb-border-width-2x);border-radius:var(--sbb-seat-reservation-area-border-radius) var(--sbb-seat-reservation-area-border-radius) 0 0}:host([mounting=upper-to-lower-border]){border-block-start:none;border-block-end:none;border-radius:0}:host(.sbb-seat-reservation-area--cursor-pointer){cursor:pointer}`;
 let B = (() => {
   var n, b, o;
-  let e = [D("sbb-seat-reservation-area")], r, t = [], s, g = I, h, p = [], _ = [], k, f = [], x = [];
+  let r = [D("sbb-seat-reservation-area")], e, t = [], s, g = I, h, p = [], k = [], _, f = [], x = [];
   return o = class extends g {
     constructor() {
       super(...arguments);
       u(this, n, l(this, p, "free"));
-      u(this, b, (l(this, _), l(this, f, "light")));
+      u(this, b, (l(this, k), l(this, f, "light")));
       l(this, x);
     }
     /** Mounting Prop */
@@ -37,11 +37,11 @@ let B = (() => {
     }
   }, n = new WeakMap(), b = new WeakMap(), s = o, (() => {
     const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(g[Symbol.metadata] ?? null) : void 0;
-    h = [z(), S({ reflect: !0 })], k = [z(), S({ reflect: !0 })], v(o, null, h, { kind: "accessor", name: "mounting", static: !1, private: !1, access: { has: (a) => "mounting" in a, get: (a) => a.mounting, set: (a, c) => {
+    h = [z(), S({ reflect: !0 })], _ = [z(), S({ reflect: !0 })], v(o, null, h, { kind: "accessor", name: "mounting", static: !1, private: !1, access: { has: (a) => "mounting" in a, get: (a) => a.mounting, set: (a, c) => {
       a.mounting = c;
-    } }, metadata: i }, p, _), v(o, null, k, { kind: "accessor", name: "background", static: !1, private: !1, access: { has: (a) => "background" in a, get: (a) => a.background, set: (a, c) => {
+    } }, metadata: i }, p, k), v(o, null, _, { kind: "accessor", name: "background", static: !1, private: !1, access: { has: (a) => "background" in a, get: (a) => a.background, set: (a, c) => {
       a.background = c;
-    } }, metadata: i }, f, x), v(null, r = { value: s }, e, { kind: "class", name: s.name, metadata: i }, null, t), s = r.value, i && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
+    } }, metadata: i }, f, x), v(null, e = { value: s }, r, { kind: "class", name: s.name, metadata: i }, null, t), s = e.value, i && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
   })(), o.styles = O, l(s, t), s;
 })();
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"seat-reservation-assets.d.ts","sourceRoot":"","sources":["../../../../src/elements-experimental/seat-reservation/seat-reservation-graphic/seat-reservation-assets.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKhD,OAAO,kCAAkC,CAAC;AAC1C,OAAO,gCAAgC,CAAC;AAUxC;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,UAAU,MAAM,KAAG,cAAc,GAAG,IAMtE,CAAC;AA8RF,eAAO,MAAM,cAAc,EAAE,cAgB5B,CAAC"}
+{"version":3,"file":"seat-reservation-assets.d.ts","sourceRoot":"","sources":["../../../../src/elements-experimental/seat-reservation/seat-reservation-graphic/seat-reservation-assets.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKhD,OAAO,kCAAkC,CAAC;AAC1C,OAAO,gCAAgC,CAAC;AACxC,OAAO,6DAA6D,CAAC;AAUrE;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,UAAU,MAAM,KAAG,cAAc,GAAG,IAMtE,CAAC;AA4QF,eAAO,MAAM,cAAc,EAAE,cAgB5B,CAAC"}

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

@@ -1,13 +1,14 @@
 import { html as d } from "lit";
-import { unsafeHTML as a } from "lit/directives/unsafe-html.js";
-import { svgs as e, mapIconToSvg as r } from "../common.js";
+import { unsafeHTML as r } from "lit/directives/unsafe-html.js";
+import { mapIconToSvg as A } from "../common.js";
 import "@sbb-esta/lyne-elements/table.js";
 import "../seat-reservation-graphic.js";
-const E = (A) => d`
+import "../seat-reservation-area/seat-reservation-area.component.js";
+const E = (e) => d`
     <div class="story-asset">
-      <span class="story-asset__preview">${a(A)}</span>
+      <span class="story-asset__preview">${r(e)}</span>
     </div>
-  `, t = (A) => r[A]?.svg ? E(r[A].svg) : r[A]?.svgName ? d`<sbb-icon name="${r[A].svgName}"></sbb-icon>` : null, _ = d`
+  `, t = (e) => A[e]?.svg ? E(A[e].svg) : A[e]?.svgName ? d`<sbb-icon name="${A[e].svgName}"></sbb-icon>` : null, a = d`
   <sbb-table-wrapper>
     <table class="sbb-table">
       <thead>
@@ -130,7 +131,7 @@ const E = (A) => d`
       </tbody>
     </table>
   </sbb-table-wrapper>
-`, R = d`
+`, _ = d`
   <sbb-table-wrapper>
     <table aria-label="Available Service Icons" class="sbb-table">
       <thead>
@@ -161,11 +162,6 @@ const E = (A) => d`
           <td>Luggage</td>
           <td>LUGGAGE_AREA</td>
         </tr>
-        <tr>
-          <td>${t("MULTI_FUNCTION_AREA")}</td>
-          <td>Multifunction</td>
-          <td>MULTI_FUNCTION_AREA</td>
-        </tr>
         <tr>
           <td>${t("PRAM_ICON")}</td>
           <td>Pram</td>
@@ -209,7 +205,7 @@ const E = (A) => d`
       </tbody>
     </table>
   </sbb-table-wrapper>
-`, o = d`
+`, l = d`
   <sbb-table-wrapper>
     <table class="sbb-table">
       <thead>
@@ -220,73 +216,60 @@ const E = (A) => d`
         </tr>
       </thead>
       <tbody>
-        <tr>
-          <td>${t("DRIVER_AREA")}</td>
-          <td>Driver: Train</td>
-          <td>DRIVER_AREA</td>
-        </tr>
         <tr>
           <td>${t("DRIVER_AREA_TRAIN")}</td>
-          <td>Driver: Train</td>
-          <td>DRIVER_AREA_TRAIN</td>
+          <td>Driver Area<br />(Dependent on Vehicle-Type: TRAIN)</td>
+          <td>DRIVER_AREA</td>
         </tr>
         <tr>
           <td>${t("DRIVER_AREA_BUS")}</td>
-          <td>Driver: Bus</td>
-          <td>DRIVER_AREA_BUS</td>
+          <td>Driver Area<br />(Dependent on Vehicle-Type: BUS)</td>
+          <td>DRIVER_AREA</td>
         </tr>
         <tr>
           <td>${t("COMPARTMENT_PASSAGE_HIGH")}</td>
-          <td>Passage-Compartment: Top</td>
-          <td>COMPARTMENT_PASSAGE<br />COMPARTMENT_PASSAGE_HIGH</td>
+          <td>Compartment Passage High</td>
+          <td>COMPARTMENT_PASSAGE_HIGH</td>
         </tr>
         <tr>
           <td>${t("COMPARTMENT_PASSAGE")}</td>
-          <td>Passage-Compartment: Middle</td>
-          <td>COMPARTMENT_PASSAGE<br />COMPARTMENT_PASSAGE_MIDDLE</td>
+          <td>Compartment Passage</td>
+          <td>COMPARTMENT_PASSAGE</td>
         </tr>
         <tr>
           <td>${t("COMPARTMENT_PASSAGE_LOW")}</td>
-          <td>Passage-Compartment: Bottom</td>
-          <td>COMPARTMENT_PASSAGE<br />COMPARTMENT_PASSAGE_LOW</td>
+          <td>Compartment Passage Low</td>
+          <td>COMPARTMENT_PASSAGE_LOW</td>
         </tr>
         <tr>
           <td>${t("COACH_PASSAGE")}</td>
-          <td>Passage-Waggon Type: Left</td>
+          <td>Coach Passage</td>
           <td>COACH_PASSAGE</td>
         </tr>
         <tr>
-          <td>${E(e.chassisPassageWaggonBottomRight)}</td>
-          <td>Passage-Waggon Type: Right</td>
-          <td
-            style="background: linear-gradient(90deg, var(--sbb-color-white) 5%, var(--sbb-color-red));"
-          >
-            TODO: check if still in use, may be deleted
+          <td>${t("COMPARTMENT_WALL")}</td>
+          <td>Compartment Wall</td>
+          <td>COMPARTMENT_WALL</td>
+        </tr>
+        <tr>
+          <td>
+            <sbb-seat-reservation-area
+              style="--sbb-seat-reservation-area-width: 100; --sbb-seat-reservation-area-height: 50; align-self: center;
+          background: var(--sbb-color-milk)"
+            ></sbb-seat-reservation-area>
           </td>
+          <td>Table Restaurant<br />(Will be rendered as CSS)</td>
+          <td>TABLE_RESTAURANT</td>
         </tr>
         <tr>
           <td>${t("COACH_WALL_NO_PASSAGE")}</td>
-          <td>Row-Empty: Top/Left</td>
+          <td>Coach Wall No Passage</td>
           <td>COACH_WALL_NO_PASSAGE</td>
         </tr>
-        <tr>
-          <td>${t("COACH_BORDER_MIDDLE")}</td>
-          <td>Row-Empty: Middle</td>
-          <td>COACH_BORDER_MIDDLE</td>
-        </tr>
-        <tr>
-          <td>${E(e.chassisSeparator)}</td>
-          <td>Separator</td>
-          <td
-            style="background: linear-gradient(90deg, var(--sbb-color-white) 5%, var(--sbb-color-red))"
-          >
-            TODO: check if still in use, may be deleted
-          </td>
-        </tr>
       </tbody>
     </table>
   </sbb-table-wrapper>
-`, c = d`
+`, L = d`
   <style>
     .story-asset {
       width: max-content;
@@ -295,15 +278,15 @@ const E = (A) => d`
   </style>
   <h1>List of all currently available assets.</h1>
   <h2>Interior</h2>
-  ${_}
+  ${a}
   <h2>Layout</h2>
   ${s}
   <h2>Service Icons</h2>
-  ${R}
+  ${_}
   <h2>Chassis</h2>
-  ${o}
+  ${l}
 `;
 export {
-  c as assetsTemplate,
+  L as assetsTemplate,
   t as svgImageByOSDMCode
 };

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

@@ -4,23 +4,23 @@ var E = (t) => {
 var z = (t, r, s) => r.has(t) || E("Cannot " + s);
 var m = (t, r, s) => (z(t, r, "read from private field"), s ? s.call(t) : r.get(t)), v = (t, r, s) => r.has(t) ? E("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(t) : r.set(t, s), b = (t, r, s, i) => (z(t, r, "write to private field"), i ? i.call(t, s) : r.set(t, s), s);
 import { __runInitializers as h, __esDecorate as p } from "tslib";
-import { SbbLanguageController as $ } from "@sbb-esta/lyne-elements/core/controllers.js";
+import { SbbLanguageController as k } from "@sbb-esta/lyne-elements/core/controllers.js";
 import { forceType as I } from "@sbb-esta/lyne-elements/core/decorators.js";
-import { css as j, LitElement as k, html as u } from "lit";
+import { css as $, LitElement as j, html as u } from "lit";
 import { customElement as D, property as N } from "lit/decorators.js";
 import { classMap as O } from "lit/directives/class-map.js";
 import { mapIconToSvg as C, getI18nSeatReservation as L } from "../common.js";
 import "@sbb-esta/lyne-elements/icon.js";
-const R = j`*,:before,:after{box-sizing:border-box}:host{--sbb-seat-reservation-graphic-width: 16;--sbb-seat-reservation-graphic-height: 16;--sbb-seat-reservation-graphic-rotation: 0;--sbb-seat-reservation-graphic-inverse-rotation: 0;--sbb-seat-reservation-graphic-position: initial;--sbb-seat-reservation-graphic-left: 0;--sbb-seat-reservation-graphic-top: 0;--sbb-icon-svg-width: calc( var(--sbb-seat-reservation-graphic-width) * var(--sbb-seat-reservation-one-px-rem, .0625rem) );--sbb-icon-svg-height: calc( var(--sbb-seat-reservation-graphic-height) * var(--sbb-seat-reservation-one-px-rem, .0625rem) );display:flex;justify-content:center;align-items:center;width:calc(var(--sbb-seat-reservation-graphic-width) * var(--sbb-seat-reservation-one-px-rem, .0625rem));height:calc(var(--sbb-seat-reservation-graphic-height) * var(--sbb-seat-reservation-one-px-rem, .0625rem));position:var(--sbb-seat-reservation-graphic-position);inset-inline-start:calc(var(--sbb-seat-reservation-graphic-left) * var(--sbb-seat-reservation-one-px-rem, .0625rem));inset-block-start:calc(var(--sbb-seat-reservation-graphic-top) * var(--sbb-seat-reservation-one-px-rem, .0625rem))}:host(.sbb-seat-reservation-graphic--cursor-pointer){cursor:pointer}.sbb-sr-icon,.sbb-sr-graphic{width:inherit;height:inherit;transform-origin:center;rotate:calc(var(--sbb-seat-reservation-graphic-rotation) * 1deg)}.sbb-sr-icon{color:var(--sbb-color-granite)}.sbb-sr-graphic svg{width:100%;height:100%}.sbb-sr-graphic svg .fix-rotation-inverse{transform-origin:center;rotate:calc(var(--sbb-seat-reservation-graphic-inverse-rotation) * 1deg)}@media (forced-colors: active){.sbb-sr-graphic svg:not(.color-immutable) [fill]:not([fill=none]){fill:currentcolor}.sbb-sr-graphic .no-bg{fill:transparent}}`;
+const R = $`*,:before,:after{box-sizing:border-box}:host{--sbb-seat-reservation-graphic-width: 16;--sbb-seat-reservation-graphic-height: 16;--sbb-seat-reservation-graphic-rotation: 0;--sbb-seat-reservation-graphic-inverse-rotation: 0;--sbb-seat-reservation-graphic-position: initial;--sbb-seat-reservation-graphic-left: 0;--sbb-seat-reservation-graphic-top: 0;--sbb-icon-svg-width: calc( var(--sbb-seat-reservation-graphic-width) * var(--sbb-seat-reservation-one-px-rem, .0625rem) );--sbb-icon-svg-height: calc( var(--sbb-seat-reservation-graphic-height) * var(--sbb-seat-reservation-one-px-rem, .0625rem) );display:flex;justify-content:center;align-items:center;width:calc(var(--sbb-seat-reservation-graphic-width) * var(--sbb-seat-reservation-one-px-rem, .0625rem));height:calc(var(--sbb-seat-reservation-graphic-height) * var(--sbb-seat-reservation-one-px-rem, .0625rem));position:var(--sbb-seat-reservation-graphic-position);inset-inline-start:calc(var(--sbb-seat-reservation-graphic-left) * var(--sbb-seat-reservation-one-px-rem, .0625rem));inset-block-start:calc(var(--sbb-seat-reservation-graphic-top) * var(--sbb-seat-reservation-one-px-rem, .0625rem))}:host(.sbb-seat-reservation-graphic--cursor-pointer){cursor:pointer}.sbb-sr-icon,.sbb-sr-graphic{width:inherit;height:inherit;transform-origin:center;rotate:calc(var(--sbb-seat-reservation-graphic-rotation) * 1deg)}.sbb-sr-icon{color:var(--sbb-color-granite);color:light-dark(var(--sbb-color-granite),var(--sbb-color-graphite))}.sbb-sr-graphic svg{width:100%;height:100%}.sbb-sr-graphic svg .fix-rotation-inverse{transform-origin:center;rotate:calc(var(--sbb-seat-reservation-graphic-inverse-rotation) * 1deg)}@media (forced-colors: active){.sbb-sr-graphic svg:not(.color-immutable) [fill]:not([fill=none]){fill:currentcolor}.sbb-sr-graphic .no-bg{fill:transparent}}`;
 let K = (() => {
   var o, c, n;
-  let t = [D("sbb-seat-reservation-graphic")], r, s = [], i, f = k, d, _ = [], x = [], S, y = [], w = [];
+  let t = [D("sbb-seat-reservation-graphic")], r, s = [], i, f = j, d, _ = [], x = [], S, y = [], w = [];
   return n = class extends f {
     constructor() {
       super(...arguments);
       v(this, o);
       v(this, c);
-      b(this, o, h(this, _, "")), b(this, c, (h(this, x), h(this, y, !1))), this._language = (h(this, w), new $(this));
+      b(this, o, h(this, _, "")), b(this, c, (h(this, x), h(this, y, !1))), this._language = (h(this, w), new k(this));
     }
     /** Name of the SVG graphic to be displayed. */
     get name() {

package/seat-reservation/seat-reservation-navigation-coach/seat-reservation-navigation-coach.component.d.ts

@@ -34,9 +34,7 @@ export declare class SbbSeatReservationNavigationCoachElement extends LitElement
     private _language;
     protected willUpdate(changedProperties: PropertyValues<this>): void;
     /**
-     * Render a maximum of 3 of the service sign icons (slice(0,3)) regardless of the input from Backend,
-     * otherwise the layout could be destroyed. Furthermore, we have to filter out the value ANY_SEAT,
-     * since this is also passed as a property and does not need to be used here
+     * Render a list of service icons provided by a caller
      *
      * @protected
      */