@sbb-esta/lyne-elements-experimental 4.0.2 → 4.0.3

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

@@ -3,10 +3,11 @@ import { SbbLanguageController as A } from "@sbb-esta/lyne-elements/core/control
 import { boxSizingStyles as R } from "@sbb-esta/lyne-elements/core/styles.js";
 import { css as S, html as n, nothing as _ } from "lit";
 import { customElement as E } from "lit/decorators.js";
-import { classMap as C } from "lit/directives/class-map.js";
+import { classMap as $ } from "lit/directives/class-map.js";
+import { repeat as N } from "lit/directives/repeat.js";
 import { styleMap as v } from "lit/directives/style-map.js";
 import { getI18nSeatReservation as c } from "../common.js";
-import { SeatReservationBaseElement as N } from "./seat-reservation-base-element.js";
+import { SeatReservationBaseElement as P } from "./seat-reservation-base-element.js";
 import "@sbb-esta/lyne-elements/button.js";
 import "@sbb-esta/lyne-elements/screen-reader-only.js";
 import "@sbb-esta/lyne-elements/popover.js";
@@ -16,10 +17,10 @@ import "../seat-reservation-place-control.js";
 import "../seat-reservation-navigation-coach.js";
 import "../seat-reservation-scoped.js";
 const T = S`:host{--sbb-seat-reservation-grid-size: 16px;--sbb-seat-reservation-height: 0;--sbb-seat-reservation-decks: 1;display:block;height:inherit}:host ::part(coach-floor){fill:var(--sbb-background-color-2)}@media(forced-colors:active){:host ::part(coach-floor){fill:transparent}}:host(:dir(rtl)) :not(.sbb-sr-place-ctrl--type-bicycle,.sbb-sr-place-ctrl--orientation-90,.sbb-sr-place-ctrl--orientation-270,.sbb-sr-place-ctrl--state-selected) ::part(coach-floor){rotate:180deg}[popover]:where(sbb-popover){margin:0;padding:0;border:none;width:auto;height:auto;background-color:transparent;color:inherit;pointer-events:none}[popover]:where(sbb-popover) .sbb-sr-popover{margin-block:calc(4 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}:host([align-vertical]) .sbb-sr__component{flex-direction:row-reverse;justify-content:flex-end;gap:calc(22 * var(--sbb-seat-reservation-one-px-rem, .0625rem));height:inherit}@media(min-width:37.5rem){:host([align-vertical]) .sbb-sr__component{gap:calc(54 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}}:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation,:host([align-vertical]) .sbb-sr__component ul.sbb-sr-navigation__list-coaches{flex-direction:column}:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation{padding:calc(16 * var(--sbb-seat-reservation-one-px-rem, .0625rem)) 0}:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation .sbb-sr__navigation-control-button{left:calc(1 * var(--sbb-seat-reservation-one-px-rem, .0625rem));top:0;rotate:90deg}@media(min-width:64rem){:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation .sbb-sr__navigation-control-button{left:calc(-1 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}}:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation ul.sbb-sr-navigation__list-coaches{max-width:initial;padding:calc(5 * var(--sbb-seat-reservation-one-px-rem, .0625rem));overflow:hidden scroll}:host([align-vertical]) .sbb-sr__wrapper-coach-decks{flex-direction:column}:host([align-vertical]) .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels{flex-direction:column-reverse;width:calc((var(--sbb-seat-reservation-height) + 24) * var(--sbb-seat-reservation-one-px-rem, .0625rem));height:initial}:host([align-vertical]) .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels b{inline-size:calc(50% - 16 * var(--sbb-seat-reservation-one-px-rem, .0625rem));block-size:calc(20 * var(--sbb-seat-reservation-one-px-rem, .0625rem));margin-bottom:calc(16 * var(--sbb-seat-reservation-one-px-rem, .0625rem));rotate:initial;writing-mode:initial}:host([align-vertical]) .sbb-sr__wrapper-scrollarea{width:calc((var(--sbb-seat-reservation-height) + 24) * var(--sbb-seat-reservation-one-px-rem, .0625rem));height:100%;overflow:hidden scroll}:host([align-vertical]) .sbb-sr__wrapper-scrollarea .sbb-sr__parent{flex-direction:row;rotate:90deg}.sbb-sr-navigation{gap:calc(3 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr-navigation .sbb-sr__navigation-control-button{position:relative;top:calc(2 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}@media(min-width:64rem){.sbb-sr-navigation .sbb-sr__navigation-control-button{top:0}}.sbb-sr__component{display:flex;flex-direction:column;gap:calc(64 * var(--sbb-seat-reservation-one-px-rem, .0625rem) - 16px)}.sbb-sr-navigation-wrapper{display:flex}.sbb-sr-navigation{display:flex;justify-content:center;width:100%;padding-inline:16px}.sbb-sr-navigation__list-coaches{list-style:none;margin:0;padding:0;font-size:inherit;--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-scrollbar-color: light-dark( color-mix(in srgb, var(--sbb-color-black) 30%, transparent), color-mix(in srgb, var(--sbb-color-white) 30%, transparent) );--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);--sbb-scrollbar-color-hover: light-dark( color-mix(in srgb, var(--sbb-color-black) 60%, transparent), color-mix(in srgb, var(--sbb-color-white) 60%, transparent) );--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-sr-navigation__list-coaches::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sr-navigation__list-coaches::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sr-navigation__list-coaches::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-sr-navigation__list-coaches::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-sr-navigation__list-coaches::-webkit-scrollbar-button,.sbb-sr-navigation__list-coaches::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-sr-navigation__list-coaches{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-sr-navigation__list-coaches{display:flex;flex-wrap:nowrap;gap:calc(4 * var(--sbb-seat-reservation-one-px-rem, .0625rem));padding:calc(6 * var(--sbb-seat-reservation-one-px-rem, .0625rem)) calc(5 * var(--sbb-seat-reservation-one-px-rem, .0625rem)) 0;max-width:856px;--sbb-scrollbar-color: transparent;overflow:scroll hidden;position:relative}.sbb-sr__wrapper-coach-decks{display:flex;overflow:hidden;height:inherit}.sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels{display:flex;justify-content:space-between;height:calc(var(--sbb-seat-reservation-height) * var(--sbb-seat-reservation-one-px-rem, .0625rem));writing-mode:vertical-lr}.sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels b{height:calc(50% - 16 * var(--sbb-seat-reservation-one-px-rem, .0625rem));width:calc(20 * var(--sbb-seat-reservation-one-px-rem, .0625rem));margin-block-end:16px;rotate:180deg;text-align:center;line-height:calc(20 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr__wrapper-scrollarea{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-scrollbar-color: light-dark( color-mix(in srgb, var(--sbb-color-black) 30%, transparent), color-mix(in srgb, var(--sbb-color-white) 30%, transparent) );--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);--sbb-scrollbar-color-hover: light-dark( color-mix(in srgb, var(--sbb-color-black) 60%, transparent), color-mix(in srgb, var(--sbb-color-white) 60%, transparent) );--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-sr__wrapper-scrollarea::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sr__wrapper-scrollarea::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sr__wrapper-scrollarea::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-sr__wrapper-scrollarea::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-sr__wrapper-scrollarea::-webkit-scrollbar-button,.sbb-sr__wrapper-scrollarea::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-sr__wrapper-scrollarea{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-sr__wrapper-scrollarea{overflow:scroll hidden;padding-block:calc(8 * var(--sbb-seat-reservation-one-px-rem, .0625rem)) calc(16 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr__wrapper-scrollarea .sbb-sr__parent{display:flex;flex-direction:column;position:relative}.sbb-sr__list-decks{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-direction:column}.sbb-sr__list-decks--gap{gap:calc(48 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr__list-item-deck{position:relative}.sbb-sr__list-coaches{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;gap:calc(4 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr__item-coach{position:relative}.sbb-sr-coach-wrapper__table{outline:0}`;
-let X = (() => {
-  var d;
-  let $ = [E("sbb-seat-reservation")], f, w = [], h, x = N;
-  return d = class extends x {
+let Y = (() => {
+  var p;
+  let C = [E("sbb-seat-reservation")], f, w = [], h, x = P;
+  return p = class extends x {
     constructor() {
       super(...arguments), this._language = new A(this), this._notAreaElements = [
         "DRIVER_AREA",
@@ -59,7 +60,7 @@ let X = (() => {
           >
             <div id="sbb-sr__parent-area" class="sbb-sr__parent">
               <ul
-                class="${C({
+                class="${$({
         "sbb-sr__list-decks": !0,
         "sbb-sr__list-decks--gap": this.hasMultipleDecks
       })}"
@@ -86,8 +87,8 @@ let X = (() => {
       if (!this.hasNavigation || !this.seatReservations)
         return null;
       const r = e == "DIRECTION_RIGHT" ? "sbb-sr-navigation__wrapper-button-direction--right" : "sbb-sr-navigation__wrapper-button-direction--left", s = e == "DIRECTION_RIGHT" ? "chevron-small-right-small" : "chevron-small-left-small", a = e == "DIRECTION_RIGHT" ? c("SEAT_RESERVATION_END", this._language.current) : c("SEAT_RESERVATION_BEGIN", this._language.current);
-      let t = !0;
-      return (e == "DIRECTION_LEFT" && this.selectedCoachIndex > 0 || e == "DIRECTION_RIGHT" && this.selectedCoachIndex < this.coachNavData.length - 1) && (t = !1), n`<div class="sbb-sr-navigation__wrapper-button-direction">
+      let o = !0;
+      return (e == "DIRECTION_LEFT" && this.selectedCoachIndex > 0 || e == "DIRECTION_RIGHT" && this.selectedCoachIndex < this.coachNavData.length - 1) && (o = !1), n`<div class="sbb-sr-navigation__wrapper-button-direction">
       <sbb-secondary-button
         @click="${() => this.navigateByDirectionBtn(e)}"
         @focus="${() => this.onFocusNavDirectionButton()}"
@@ -98,7 +99,7 @@ let X = (() => {
         type="button"
         aria-label="${a}"
         role="button"
-        .disabledInteractive="${t || _}"
+        .disabledInteractive="${o || _}"
       ></sbb-secondary-button>
     </div>`;
     }
@@ -145,18 +146,18 @@ let X = (() => {
      */
     _renderCoaches(e, r) {
       const s = JSON.parse(JSON.stringify(e?.coachItems));
-      return s ? s.map((a, t) => n`
+      return s ? s.map((a, o) => n`
         <li class="sbb-sr__item-coach">
-          ${this._renderCoachElement(a, t, r, e.deckCoachIndex)}
+          ${this._renderCoachElement(a, o, r, e.deckCoachIndex)}
         </li>
       `) : null;
     }
     _renderCoachElement(e, r, s, a) {
-      const t = this.getCalculatedDimension(e.dimension), o = this._getDescriptionTableCoach(e);
+      const o = this.getCalculatedDimension(e.dimension), t = this._getDescriptionTableCoach(e);
       return n`<sbb-seat-reservation-scoped
       style=${v({
-        "--sbb-seat-reservation-scoped-width": t.w,
-        "--sbb-seat-reservation-scoped-height": t.h
+        "--sbb-seat-reservation-scoped-width": o.w,
+        "--sbb-seat-reservation-scoped-height": o.h
       })}
     >
       ${this._getRenderedCoachBorders(e)}
@@ -171,7 +172,7 @@ let X = (() => {
         tabindex="-1"
       >
         <caption id="sbb-sr-coach-caption-${r}" tabindex="-1">
-          <sbb-screen-reader-only>${o}</sbb-screen-reader-only>
+          <sbb-screen-reader-only>${t}</sbb-screen-reader-only>
         </caption>
         ${this._getRenderedRowPlaces(e, r, s, a)}
       </table>
@@ -184,12 +185,12 @@ let X = (() => {
     _getRenderedCoachBorders(e) {
       if (!e.graphicElements)
         return null;
-      const r = 1, a = e.graphicElements?.find((l) => l.icon === "DRIVER_AREA"), t = a ? e.dimension.w - a.dimension.w - r : e.dimension.w - r * 2, o = (e.dimension.h + this.coachBorderOffset * 2) * this.baseGridSize, i = a && a.position.x === 0 ? a?.dimension.w * this.baseGridSize : this.baseGridSize;
+      const r = 1, a = e.graphicElements?.find((l) => l.icon === "DRIVER_AREA"), o = a ? e.dimension.w - a.dimension.w - r : e.dimension.w - r * 2, t = (e.dimension.h + this.coachBorderOffset * 2) * this.baseGridSize, i = a && a.position.x === 0 ? a?.dimension.w * this.baseGridSize : this.baseGridSize;
       return n`
       <sbb-seat-reservation-graphic
         style=${v({
-        "--sbb-seat-reservation-graphic-width": t * this.baseGridSize,
-        "--sbb-seat-reservation-graphic-height": o,
+        "--sbb-seat-reservation-graphic-width": o * this.baseGridSize,
+        "--sbb-seat-reservation-graphic-height": t,
         "--sbb-seat-reservation-graphic-top": this.coachBorderPadding * -1,
         "--sbb-seat-reservation-graphic-left": i,
         "--sbb-seat-reservation-graphic-position": "absolute"
@@ -203,54 +204,56 @@ let X = (() => {
     _getRenderedRowPlaces(e, r, s, a) {
       if (!e.places)
         return null;
-      const t = {};
-      for (const o of e.places)
-        t[o.position.y] ? t[o.position.y].push(o) : t[o.position.y] = [o];
-      return Object.values(t).map((o, i) => n`
-          <tr id="row-${r}-${o[0].position.y}" data-row-index=${i}>
-            ${this._getRenderedColumnPlaces(o, r, s, a)}
+      const o = {};
+      for (const t of e.places)
+        o[t.position.y] ? o[t.position.y].push(t) : o[t.position.y] = [t];
+      return Object.values(o).map((t, i) => n`
+          <tr id="row-${r}-${t[0].position.y}" data-row-index=${i}>
+            ${this._getRenderedColumnPlaces(t, r, s, a)}
           </tr>
-        `).flatMap((o) => o);
+        `).flatMap((t) => t);
     }
     _getRenderedColumnPlaces(e, r, s, a) {
-      return e.sort((t, o) => Number(t.position.x) - Number(o.position.x)), e?.map((t, o) => {
-        const i = this.getCalculatedDimension(t.dimension), l = this.getCalculatedPosition(t.position), p = t.rotation || 0, b = this.alignVertical ? -90 : 0, u = this.getPlaceElementId(s, r, t.number);
+      e.sort((t, i) => Number(t.position.x) - Number(i.position.x));
+      const o = r + "-" + a;
+      return n`${N(e, (t) => o + "-" + t.number, (t, i) => {
+        const l = this.getCalculatedDimension(t.dimension), d = this.getCalculatedPosition(t.position), b = t.rotation || 0, u = this.alignVertical ? -90 : 0, m = this.getPlaceElementId(s, r, t.number);
         return n`
-        <td
-          id="cell-${s}-${r}-${t.position.y}-${o}"
-          class="graphical-element"
-        >
-          <sbb-seat-reservation-place-control
-            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": l.y,
-          "--sbb-seat-reservation-place-control-left": l.x,
-          "--sbb-seat-reservation-place-control-rotation": p,
-          "--sbb-seat-reservation-place-control-text-rotation": b
+          <td
+            id="cell-${s}-${r}-${t.position.y}-${i}"
+            class="graphical-element"
+          >
+            <sbb-seat-reservation-place-control
+              style=${v({
+          "--sbb-seat-reservation-place-control-text-scale-value": Math.min(l.w, l.h),
+          "--sbb-seat-reservation-place-control-width": l.w,
+          "--sbb-seat-reservation-place-control-height": l.h,
+          "--sbb-seat-reservation-place-control-top": d.y,
+          "--sbb-seat-reservation-place-control-left": d.x,
+          "--sbb-seat-reservation-place-control-rotation": b,
+          "--sbb-seat-reservation-place-control-text-rotation": u
         })}
-            @selectplace=${(g) => this._onSelectPlace(g)}
-            exportparts="sbb-sr-place-part"
-            id=${u}
-            class="seat-reservation-place-control"
-            text=${t.number}
-            type=${t.type}
-            state=${t.state}
-            coach-index=${r}
-            deck-index=${a}
-            data-deck-index=${s}
-            .propertyIds=${t.propertyIds}
-            .preventClick=${this.preventPlaceClick}
-          ></sbb-seat-reservation-place-control>
-        </td>
-      `;
-      });
+              @selectplace=${(g) => this._onSelectPlace(g)}
+              exportparts="sbb-sr-place-part"
+              id=${m}
+              class="seat-reservation-place-control"
+              text=${t.number}
+              type=${t.type}
+              state=${t.state}
+              coach-index=${r}
+              deck-index=${a}
+              data-deck-index=${s}
+              .propertyIds=${t.propertyIds}
+              .preventClick=${this.preventPlaceClick}
+            ></sbb-seat-reservation-place-control>
+          </td>
+        `;
+      })}`;
     }
     _getRenderedGraphicalElements(e, r, s, a) {
-      return e ? e?.map((t) => {
-        const o = t.icon ?? "", i = t.rotation || 0, l = this._notFixedRotatableAreaIcons.indexOf(t.icon) === -1, p = this.alignVertical && l ? i - 90 : i;
-        return this._notAreaElements.findIndex((b) => b === o) > -1 ? this._getRenderElementWithoutArea(t, i, r) : this._getRenderElementWithArea(t, p, r, s, a);
+      return e ? e?.map((o) => {
+        const t = o.icon ?? "", i = o.rotation || 0, l = this._notFixedRotatableAreaIcons.indexOf(o.icon) === -1, d = this.alignVertical && l ? i - 90 : i;
+        return this._notAreaElements.findIndex((b) => b === t) > -1 ? this._getRenderElementWithoutArea(o, i, r) : this._getRenderElementWithArea(o, d, r, s, a);
       }) : null;
     }
     /**
@@ -262,20 +265,20 @@ let X = (() => {
      * @param coachDeckIndex used to generate a unique id
      * @private
      */
-    _getRenderElementWithArea(e, r, s, a, t) {
-      const o = e.icon?.indexOf("TABLE") === -1, i = e.icon && o ? e.icon : null, l = this.isElementDirectlyOnBorder(e, s) && i !== "ENTRY_EXIT", p = e.icon ? c(e.icon, this._language.current) : _, b = this.getCalculatedDimension(e.dimension, s, !0, l), u = this.getCalculatedPosition(e.position, e.dimension, s, !0), g = `popover-trigger-${t}-${a}-${u.x}-${u.y}`;
-      let m = "free";
-      return e.position.y === this.coachBorderOffset * -1 ? m = "upper-border" : e.position.y + e.dimension.h === s.h + this.coachBorderOffset && (m = "lower-border"), n`
+    _getRenderElementWithArea(e, r, s, a, o) {
+      const t = e.icon?.indexOf("TABLE") === -1, i = e.icon && t ? e.icon : null, l = this.isElementDirectlyOnBorder(e, s) && i !== "ENTRY_EXIT", d = e.icon ? c(e.icon, this._language.current) : _, b = this.getCalculatedDimension(e.dimension, s, !0, l), u = this.getCalculatedPosition(e.position, e.dimension, s, !0), m = `popover-trigger-${o}-${a}-${u.x}-${u.y}`;
+      let g = "free";
+      return e.position.y === this.coachBorderOffset * -1 ? g = "upper-border" : e.position.y + e.dimension.h === s.h + this.coachBorderOffset && (g = "lower-border"), n`
       <sbb-seat-reservation-area
-        id="${g}"
-        class="${C({ "sbb-seat-reservation-area--cursor-pointer": i !== null })}"
+        id="${m}"
+        class="${$({ "sbb-seat-reservation-area--cursor-pointer": i !== null })}"
         style=${v({
         "--sbb-seat-reservation-area-width": b.w,
         "--sbb-seat-reservation-area-height": b.h,
         "--sbb-seat-reservation-area-top": u.y,
         "--sbb-seat-reservation-area-left": u.x
       })}
-        mounting=${m}
+        mounting=${g}
         background="dark"
         aria-hidden="true"
       >
@@ -293,45 +296,45 @@ let X = (() => {
               ></sbb-seat-reservation-graphic>
             ` : _}
       </sbb-seat-reservation-area>
-      ${i ? this._popover(g, p) : _}
+      ${i ? this._popover(m, d) : _}
     `;
     }
     _getRenderElementWithoutArea(e, r, s) {
-      const a = this.getCalculatedDimension(e.dimension, s), t = this.getCalculatedPosition(e.position, e.dimension, s), o = e.icon && e.icon.indexOf("DRIVER_AREA") === -1 ? e.icon : e.icon?.concat("_", this.seatReservations[this.currSelectedDeckIndex].vehicleType);
+      const a = this.getCalculatedDimension(e.dimension, s), o = this.getCalculatedPosition(e.position, e.dimension, s), t = e.icon && e.icon.indexOf("DRIVER_AREA") === -1 ? e.icon : e.icon?.concat("_", this.seatReservations[this.currSelectedDeckIndex].vehicleType);
       return n` <sbb-seat-reservation-graphic
       style=${v({
         "--sbb-seat-reservation-graphic-width": a.w,
         "--sbb-seat-reservation-graphic-height": a.h,
-        "--sbb-seat-reservation-graphic-top": t.y,
-        "--sbb-seat-reservation-graphic-left": t.x,
+        "--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": r
       })}
-      name=${o ?? _}
+      name=${t ?? _}
       aria-hidden="true"
       ?stretch=${!0}
     ></sbb-seat-reservation-graphic>`;
     }
     _getRenderedServiceElements(e, r, s) {
       return s ? s?.map((a) => {
-        const t = a.icon ? c(a.icon, this._language.current) : null, o = this.getCalculatedDimension(a.dimension), i = this.getCalculatedPosition(a.position), l = a.rotation || 0, p = this.alignVertical ? l - 90 : l, b = `popover-trigger-${r}-${e}-${i.x}-${i.y}`;
+        const o = a.icon ? c(a.icon, this._language.current) : null, t = this.getCalculatedDimension(a.dimension), i = this.getCalculatedPosition(a.position), l = a.rotation || 0, d = this.alignVertical ? l - 90 : l, b = `popover-trigger-${r}-${e}-${i.x}-${i.y}`;
         return n`
         <sbb-seat-reservation-graphic
           id="${b}"
           style=${v({
-          "--sbb-seat-reservation-graphic-width": o.w,
-          "--sbb-seat-reservation-graphic-height": o.h,
+          "--sbb-seat-reservation-graphic-width": t.w,
+          "--sbb-seat-reservation-graphic-height": t.h,
           "--sbb-seat-reservation-graphic-top": i.y,
           "--sbb-seat-reservation-graphic-left": i.x,
           "--sbb-seat-reservation-graphic-position": "absolute",
-          "--sbb-seat-reservation-graphic-rotation": p
+          "--sbb-seat-reservation-graphic-rotation": d
         })}
           class="sbb-seat-reservation-graphic--cursor-pointer"
           name=${a.icon ?? _}
           role="img"
           aria-hidden="true"
         ></sbb-seat-reservation-graphic>
-        ${this._popover(b, t)}
+        ${this._popover(b, o)}
       `;
       }) : null;
     }
@@ -381,8 +384,8 @@ let X = (() => {
       if (r = c("COACH_TABLE_CAPTION", this._language.current, [
         e.id
       ]), !this.hasNavigation) {
-        const t = this.getAvailableFreePlacesNumFromCoach(e.places), o = c("COACH_AVAILABLE_NUMBER_OF_PLACES", this._language.current, [t.seats, t.bicycles]);
-        r = r.concat(". ").concat(o).concat(". ");
+        const o = this.getAvailableFreePlacesNumFromCoach(e.places), t = c("COACH_AVAILABLE_NUMBER_OF_PLACES", this._language.current, [o.seats, o.bicycles]);
+        r = r.concat(". ").concat(t).concat(". ");
       }
       return (s || a) && (r += ". " + c("COACH_AVAILABLE_SERVICES", this._language.current) + ": ", r += a + ", " + s + "."), r;
     }
@@ -392,15 +395,15 @@ let X = (() => {
         const a = s.icon;
         if (!a)
           return null;
-        const t = r.indexOf(a) > -1, o = c(s.icon, this._language.current), i = this._notFixedRotatableAreaIcons.indexOf(a) === -1 && this._notAreaElements.indexOf(a) === -1;
-        return t || r.push(s.icon), o && !t && i ? o : null;
+        const o = r.indexOf(a) > -1, t = c(s.icon, this._language.current), i = this._notFixedRotatableAreaIcons.indexOf(a) === -1 && this._notAreaElements.indexOf(a) === -1;
+        return o || r.push(s.icon), t && !o && i ? t : null;
       }).filter((s) => !!s).join(", ");
     }
-  }, h = d, (() => {
+  }, h = p, (() => {
     const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(x[Symbol.metadata] ?? null) : void 0;
-    k(null, f = { value: h }, $, { kind: "class", name: h.name, metadata: e }, null, w), h = f.value, e && Object.defineProperty(h, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), d.styles = [R, T], y(h, w), h;
+    k(null, f = { value: h }, C, { kind: "class", name: h.name, metadata: e }, null, w), h = f.value, e && Object.defineProperty(h, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), p.styles = [R, T], y(h, w), h;
 })();
 export {
-  X as SbbSeatReservationElement
+  Y as SbbSeatReservationElement
 };

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

@@ -141,7 +141,7 @@ let Ce = (() => {
     }
   }, u = new WeakMap(), k = new WeakMap(), f = new WeakMap(), g = new WeakMap(), _ = new WeakMap(), x = new WeakMap(), y = new WeakMap(), m = new WeakMap(), i = l, (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(C[Symbol.metadata] ?? null) : void 0;
-    z = [h(), v({ attribute: "type" })], w = [h(), v({ attribute: "state" })], L = [v({ attribute: "propertyIds", type: Array })], A = [h(), v({ attribute: "text" })], F = [h(), v({ attribute: "deck-index", type: Number })], B = [h(), v({ attribute: "coach-index", type: Number })], M = [h(), v({ attribute: "prevent-click", type: Boolean })], G = [h(), v({ attribute: "keyfocus" })], d(l, null, z, { kind: "accessor", name: "placeType", static: !1, private: !1, access: { has: (e) => "placeType" in e, get: (e) => e.placeType, set: (e, r) => {
+    z = [h(), v({ attribute: "type" })], w = [h(), v({ attribute: "state", reflect: !0 })], L = [v({ attribute: "propertyIds", type: Array })], A = [h(), v({ attribute: "text" })], F = [h(), v({ attribute: "deck-index", type: Number })], B = [h(), v({ attribute: "coach-index", type: Number })], M = [h(), v({ attribute: "prevent-click", type: Boolean })], G = [h(), v({ attribute: "keyfocus" })], d(l, null, z, { kind: "accessor", name: "placeType", static: !1, private: !1, access: { has: (e) => "placeType" in e, get: (e) => e.placeType, set: (e, r) => {
       e.placeType = r;
     } }, metadata: t }, S, T), d(l, null, w, { kind: "accessor", name: "state", static: !1, private: !1, access: { has: (e) => "state" in e, get: (e) => e.state, set: (e, r) => {
       e.state = r;

package/timetable-row/timetable-row.component.js

@@ -18,7 +18,7 @@ import "@sbb-esta/lyne-elements/card.js";
 import "@sbb-esta/lyne-elements/icon.js";
 import "@sbb-esta/lyne-elements/timetable-occupancy.js";
 import "../pearl-chain-time.js";
-import { f as Be } from "../format-lqeCzmzS.js";
+import { f as Be } from "../format-CmKROkbc.js";
 const yt = ht`:host{--sbb-timetable-row-gap: var(--sbb-spacing-fixed-2x);--sbb-timetable-row-height: 1.5625rem;--sbb-timetable-row-height-header: 1.25rem;--sbb-timetable-row-height-footer: 1rem;--sbb-timetable-row-skeleton-pulse-duration: 1.8s;display:block}:host([disable-animation]){--sbb-timetable-row-skeleton-pulse-duration: 0}.sbb-timetable__row-transport-icon{--sbb-icon-svg-width: 1.25rem;--sbb-icon-svg-height: 1.25rem}.sbb-travel-hints__item{--sbb-icon-svg-height: .875rem}.sbb-screen-reader-only{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-timetable__row--quay{margin-inline-end:var(--sbb-spacing-fixed-1x)}.sbb-timetable__row--quay-type{float:left}ul{list-style:none;margin:0;padding:0;font-size:inherit;display:inline-flex}li,.sbb-timetable__row-transport{display:inline-flex;align-self:center}.sbb-timetable__row-transportnumber,.sbb-timetable__row-time{--sbb-text-font-size: var(--sbb-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700;line-height:unset;white-space:nowrap;align-self:center}.sbb-timetable__row{--sbb-text-font-size: var(--sbb-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);display:flex;flex-direction:column;gap:var(--sbb-timetable-row-gap)}.sbb-timetable__row-header,.sbb-timetable__row-footer{animation:none}.sbb-timetable__row-header{display:flex;gap:var(--sbb-spacing-fixed-2x);align-items:center;line-height:var(--sbb-timetable-row-height-header)}.sbb-timetable__row-details,.sbb-timetable__row-hints{display:inline-flex;gap:var(--sbb-spacing-fixed-1x);align-items:center}.sbb-timetable__row-header p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0;align-self:center}.sbb-timetable__row-footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--sbb-spacing-fixed-2x);line-height:var(--sbb-timetable-row-height-footer)}.sbb-timetable__row-footer>span{align-self:center}.sbb-timetable__row-footer :only-child{margin-inline-start:auto}.sbb-timetable__row-quay--changed{color:var(--sbb-color-primary)}.sbb-timetable__row-transport-wrapper,.sbb-timetable__row-warning{display:inline-flex}.sbb-loading{pointer-events:none}.sbb-loading__wrapper{display:flex;flex-direction:column;gap:var(--sbb-spacing-fixed-2x)}.sbb-loading__row{width:100%;border-radius:var(--sbb-border-radius-1x);height:var(--sbb-timetable-row-height)}@media(min-width:64rem){.sbb-loading__row{height:1.75rem}}@media(forced-colors:active){.sbb-loading__row{border:var(--sbb-border-width-1x) solid ButtonBorder!important}}.sbb-loading__row,.sbb-loading__badge{background:var(--sbb-background-color-4);animation:skeleton-pulse var(--sbb-timetable-row-skeleton-pulse-duration) ease-out infinite}.sbb-loading__row:first-of-type{height:var(--sbb-timetable-row-height-header);width:50%}.sbb-loading__row:last-of-type{height:var(--sbb-timetable-row-height-footer)}.sbb-loading__badge{margin-inline:auto calc(var(--sbb-spacing-fixed-3x) * -1);padding-inline-end:var(--sbb-spacing-fixed-6x);border-end-start-radius:var(--sbb-card-badge-border-radius);transform:var(--sbb-card-badge-skew);width:7.1875rem;height:1.25rem}@keyframes skeleton-pulse{0%{background:var(--sbb-background-color-4)}17%{background:var(--sbb-background-color-4)}50%{background:var(--sbb-background-color-3)}67%{background:var(--sbb-background-color-3)}to{background:var(--sbb-background-color-4)}}`, vt = (t, i) => c`<span class="sbb-timetable__row-transport">
     <sbb-icon name=${t}></sbb-icon>
     <span class="sbb-screen-reader-only">${i}</span>

package/{toDate-BCXKL_wM.js → toDate-Bw2KTWeq.js}

@@ -1,4 +1,4 @@
-const c = 6048e5, r = 864e5, i = 6e4, e = 36e5, t = Symbol.for("constructDateFrom");
+const c = 6048e5, r = 864e5, i = 6e4, e = 36e5, t = /* @__PURE__ */ Symbol.for("constructDateFrom");
 function s(n, o) {
   return typeof n == "function" ? n(o) : n && typeof n == "object" && t in n ? n[t](o) : n instanceof Date ? new n.constructor(o) : new Date(o);
 }