@sbb-esta/lyne-elements-experimental-dev 0.0.0 → 4.5.1-dev.1771849274

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

@@ -0,0 +1,410 @@
+import { __esDecorate as y, __runInitializers as C } from "tslib";
+import { SbbLanguageController as R } from "@sbb-esta/lyne-elements/core/controllers.js";
+import { boxSizingStyles as S } from "@sbb-esta/lyne-elements/core/styles.js";
+import { css as A, html as n, nothing as g } from "lit";
+import { customElement as N } from "lit/decorators.js";
+import { classMap as f } from "lit/directives/class-map.js";
+import { repeat as E } from "lit/directives/repeat.js";
+import { styleMap as _ } from "lit/directives/style-map.js";
+import { getI18nSeatReservation as h } from "../common.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";
+import "../seat-reservation-area.js";
+import "../seat-reservation-graphic.js";
+import "../seat-reservation-place-control.js";
+import "../seat-reservation-navigation-coach.js";
+import "../seat-reservation-scoped.js";
+const T = A`:host{--sbb-seat-reservation-grid-size: 16px;--sbb-seat-reservation-height: 0;--sbb-seat-reservation-decks: 1;display:block;height:inherit}:host ::part(coach-floor){fill:var(--sbb-background-color-2)}@media(forced-colors:active){:host ::part(coach-floor){fill:transparent}}:host(:dir(rtl)) :not(.sbb-sr-place-ctrl--type-bicycle,.sbb-sr-place-ctrl--orientation-90,.sbb-sr-place-ctrl--orientation-270,.sbb-sr-place-ctrl--state-selected) ::part(coach-floor){rotate:180deg}[popover]:where(sbb-popover){margin:0;padding:0;border:none;width:auto;height:auto;background-color:transparent;color:inherit;pointer-events:none}[popover]:where(sbb-popover) .sbb-sr-popover{margin-block:calc(4 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}:host([align-vertical]) .sbb-sr__component{flex-direction:row-reverse;justify-content:flex-end;gap:calc(22 * var(--sbb-seat-reservation-one-px-rem, .0625rem));height:inherit}@media(min-width:37.5rem){:host([align-vertical]) .sbb-sr__component{gap:calc(54 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}}:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation,:host([align-vertical]) .sbb-sr__component ul.sbb-sr-navigation__list-coaches{flex-direction:column}:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation{padding:calc(16 * var(--sbb-seat-reservation-one-px-rem, .0625rem)) 0}:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation .sbb-sr__navigation-control-button{left:calc(1 * var(--sbb-seat-reservation-one-px-rem, .0625rem));top:0;rotate:90deg}@media(min-width:64rem){:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation .sbb-sr__navigation-control-button{left:calc(-1 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}}:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation ul.sbb-sr-navigation__list-coaches{max-width:initial;padding:calc(5 * var(--sbb-seat-reservation-one-px-rem, .0625rem));overflow:hidden scroll}:host([align-vertical]) .sbb-sr__wrapper-coach-decks{flex-direction:column}:host([align-vertical]) .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels{flex-direction:column-reverse;width:calc((var(--sbb-seat-reservation-height) + 24) * var(--sbb-seat-reservation-one-px-rem, .0625rem));height:initial}:host([align-vertical]) .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels b{inline-size:calc(50% - 16 * var(--sbb-seat-reservation-one-px-rem, .0625rem));block-size:calc(20 * var(--sbb-seat-reservation-one-px-rem, .0625rem));margin-bottom:calc(16 * var(--sbb-seat-reservation-one-px-rem, .0625rem));rotate:initial;writing-mode:initial}:host([align-vertical]) .sbb-sr__wrapper-scrollarea{width:calc((var(--sbb-seat-reservation-height) + 24) * var(--sbb-seat-reservation-one-px-rem, .0625rem));height:100%;overflow:hidden scroll}:host([align-vertical]) .sbb-sr__wrapper-scrollarea .sbb-sr__parent{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__list-decks:has(.sbb-sr-coach-has-overhanging-elements) .sbb-sr__list-coaches{gap:calc(8 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr__item-coach{position:relative}.sbb-sr-coach-wrapper__table{outline:0}`;
+let Y = (() => {
+  var p;
+  let k = [N("sbb-seat-reservation")], w, x = [], d, $ = P;
+  return p = class extends $ {
+    constructor() {
+      super(...arguments), this._language = new R(this), this._notFixedRotatableAreaIcons = ["ENTRY_EXIT"];
+    }
+    willUpdate(e) {
+      super.willUpdate(e), e.has("hasNavigation") && (this.hasNavigation ? this.shadowRoot?.querySelectorAll("table").forEach((r) => r.removeAttribute("tabindex")) : this.shadowRoot?.querySelectorAll("table").forEach((r) => r.setAttribute("tabindex", "0")));
+    }
+    firstUpdated(e) {
+      super.firstUpdated(e), this.updateComplete.then(() => {
+        this.initNavigationSelectionByScrollEvent();
+      });
+    }
+    render() {
+      return this._initVehicleSeatReservationConstruction(), this._coachesHtmlTemplate || null;
+    }
+    _initVehicleSeatReservationConstruction() {
+      this._coachesHtmlTemplate = n`
+      <div class="sbb-sr__component">
+        ${this._renderNavigation()}
+        <div
+          class="sbb-sr__wrapper-coach-decks"
+          @keydown=${(e) => this.keyboardSeatmapEventHandling(e)}
+        >
+          <div class="sbb-sr__wrapper-deck-labels">${this._renderDeckLabels()}</div>
+          <div
+            @scroll=${() => this.coachAreaScrollend()}
+            id="sbb-sr__wrapper-scrollarea"
+            class="sbb-sr__wrapper-scrollarea"
+            tabindex="0"
+          >
+            <div id="sbb-sr__parent-area" class="sbb-sr__parent">
+              <ul
+                class="${f({
+        "sbb-sr__list-decks": !0,
+        "sbb-sr__list-decks--gap": this.hasMultipleDecks
+      })}"
+              >
+                ${this.seatReservations?.map((e, r) => n`<li class="sbb-sr__list-item-deck">
+                      <ul class="sbb-sr__list-coaches" role="presentation">
+                        ${this._renderCoaches(e, r)}
+                      </ul>
+                    </li>`)}
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    _renderDeckLabels() {
+      return this.hasMultipleDecks ? this.seatReservations.map((e) => {
+        const r = h(e.deckCoachLevel, this._language.current);
+        return n`<b aria-hidden="true">${r}</b>`;
+      }) : null;
+    }
+    _renderNavigationControlButton(e) {
+      if (!this.hasNavigation || !this.seatReservations)
+        return null;
+      const r = e == "DIRECTION_RIGHT" ? "sbb-sr-navigation__wrapper-button-direction--right" : "sbb-sr-navigation__wrapper-button-direction--left", s = e == "DIRECTION_RIGHT" ? "chevron-small-right-small" : "chevron-small-left-small", o = e == "DIRECTION_RIGHT" ? h("SEAT_RESERVATION_END", this._language.current) : h("SEAT_RESERVATION_BEGIN", this._language.current);
+      let a = !0;
+      return (e == "DIRECTION_LEFT" && this.selectedCoachIndex > 0 || e == "DIRECTION_RIGHT" && this.selectedCoachIndex < this.coachNavData.length - 1) && (a = !1), n`<div class="sbb-sr-navigation__wrapper-button-direction">
+      <sbb-secondary-button
+        @click="${() => this.navigateByDirectionBtn(e)}"
+        @focus="${() => this.onFocusNavDirectionButton()}"
+        id="${r}"
+        class="sbb-sr__navigation-control-button"
+        size="m"
+        icon-name="${s}"
+        type="button"
+        aria-label="${o}"
+        role="button"
+        .disabledInteractive="${a || g}"
+        .disabled="${a || g}"
+      ></sbb-secondary-button>
+    </div>`;
+    }
+    _renderNavigation() {
+      return !this.hasNavigation || !this.seatReservations ? null : n`<div class="sbb-sr-navigation-wrapper">
+      <nav id="sbb-sr-navigation" class="sbb-sr-navigation">
+        ${this._renderNavigationControlButton("DIRECTION_LEFT")}
+        <ul
+          id="sbb-sr__navigation-list-coaches"
+          class="sbb-sr-navigation__list-coaches"
+          aria-label="${h("SEAT_RESERVATION_NAVIGATION", this._language.current)}"
+        >
+          ${this.coachNavData.map((e, r) => n`<li>
+              <sbb-seat-reservation-navigation-coach
+                @selectcoach=${(s) => this._onSelectNavCoach(s)}
+                @focuscoach=${() => this._onFocusNavCoach()}
+                @keyup=${(s) => this.onKeyNavigationNavCoachButton(s, r)}
+                index="${r}"
+                coach-id="${e.id}"
+                .freePlacesByType="${e.freePlaces}"
+                .selected=${this.selectedCoachIndex === r}
+                .focused=${this.focusedCoachIndex === r}
+                .hovered=${this.hoveredCoachIndex === r}
+                .nativeFocusActive=${this.hasSeatReservationNativeFocus}
+                .propertyIds="${e.propertyIds}"
+                .travelClass="${e.travelClass}"
+                ?driver-area="${e.isDriverArea}"
+                ?first="${e?.driverAreaSide?.left}"
+                ?last="${e?.driverAreaSide?.right}"
+                ?vertical="${this.alignVertical}"
+              >
+              </sbb-seat-reservation-navigation-coach>
+            </li>`)}
+        </ul>
+        ${this._renderNavigationControlButton("DIRECTION_RIGHT")}
+      </nav>
+    </div>`;
+    }
+    /**
+     *
+     * @returns
+     * @param seatReservation
+     * @param coachDeckIndex
+     */
+    _renderCoaches(e, r) {
+      const s = JSON.parse(JSON.stringify(e?.coachItems));
+      return s ? s.map((o, a) => n`
+        <li class="sbb-sr__item-coach">
+          ${this._renderCoachElement(o, a, r, e.deckCoachIndex)}
+        </li>
+      `) : null;
+    }
+    _renderCoachElement(e, r, s, o) {
+      const a = this.getCalculatedDimension(e.dimension), t = this._getDescriptionTableCoach(e);
+      return n`<sbb-seat-reservation-scoped
+      style=${_({
+        "--sbb-seat-reservation-scoped-width": a.w,
+        "--sbb-seat-reservation-scoped-height": a.h
+      })}
+    >
+      ${this._getRenderedCoachBorders(e)}
+      ${this._getRenderedGraphicalElements(e.graphicElements || [], e.dimension, r, s)}
+      ${this._getRenderedServiceElements(r, s, e.serviceElements)}
+
+      <table
+        @focus=${() => this.onFocusTableCoachAndPreselectPlace(r)}
+        id="sbb-sr-coach-${r}"
+        class="sbb-sr-coach-wrapper__table"
+        aria-describedby="sbb-sr-coach-caption-${r}"
+        tabindex="-1"
+      >
+        <caption id="sbb-sr-coach-caption-${r}" tabindex="-1">
+          <sbb-screen-reader-only>${t}</sbb-screen-reader-only>
+        </caption>
+        ${this._getRenderedRowPlaces(e, r, s, o)}
+      </table>
+    </sbb-seat-reservation-scoped>`;
+    }
+    /**
+     * @returns Returns the border graphic (COACH_BORDER_MIDDLE) of a coach with calculated border gap and coach width,
+     * depending on whether the coach is with a driver area or without.
+     */
+    _getRenderedCoachBorders(e) {
+      if (!e.graphicElements)
+        return null;
+      const r = 1, o = e.graphicElements?.find((c) => c.icon === "DRIVER_AREA");
+      let a = o ? e.dimension.w - o.dimension.w - r : e.dimension.w - r * 2;
+      a *= this.baseGridSize;
+      const t = (e.dimension.h + this.coachBorderOffset * 2) * this.baseGridSize;
+      let i = o && o.position.x === 0 ? o?.dimension.w * this.baseGridSize : this.baseGridSize;
+      const l = this.overHangingElementInformation.find((c) => c.coachId == e.id);
+      return (l?.overhangingPlaces || l?.overhangingGraphicAreas) && (a += 2 * this.baseGridSize, i = 0), n`
+      <sbb-seat-reservation-graphic
+        class="${f({
+        "sbb-sr-coach-has-overhanging-elements": l?.overhangingPlaces || l?.overhangingGraphicAreas || !1
+      })}"
+        style=${_({
+        "--sbb-seat-reservation-graphic-width": a,
+        "--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"
+      })}
+        name="COACH_BORDER_MIDDLE"
+        ?stretch=${!0}
+        role="presentation"
+      ></sbb-seat-reservation-graphic>
+    `;
+    }
+    _getRenderedRowPlaces(e, r, s, o) {
+      if (!e.places)
+        return null;
+      const a = {};
+      for (const t of e.places)
+        a[t.position.y] ? a[t.position.y].push(t) : a[t.position.y] = [t];
+      return Object.values(a).map((t, i) => n`
+          <tr id="row-${r}-${t[0].position.y}" data-row-index=${i}>
+            ${this._getRenderedColumnPlaces(t, r, s, o)}
+          </tr>
+        `).flatMap((t) => t);
+    }
+    _getRenderedColumnPlaces(e, r, s, o) {
+      e.sort((t, i) => Number(t.position.x) - Number(i.position.x));
+      const a = r + "-" + o;
+      return n`${E(e, (t) => a + "-" + t.number, (t, i) => {
+        const l = this.getCalculatedDimension(t.dimension), c = this.getCalculatedPosition(t.position), b = t.rotation || 0, v = this.alignVertical ? -90 : 0, m = this.getPlaceElementId(s, r, t.number);
+        return n`
+          <td
+            id="cell-${s}-${r}-${t.position.y}-${i}"
+            class="graphical-element"
+          >
+            <sbb-seat-reservation-place-control
+              style=${_({
+          "--sbb-seat-reservation-place-control-text-scale-value": Math.min(l.w, l.h),
+          "--sbb-seat-reservation-place-control-width": l.w,
+          "--sbb-seat-reservation-place-control-height": l.h,
+          "--sbb-seat-reservation-place-control-top": c.y,
+          "--sbb-seat-reservation-place-control-left": c.x,
+          "--sbb-seat-reservation-place-control-rotation": b,
+          "--sbb-seat-reservation-place-control-text-rotation": v
+        })}
+              @selectplace=${(u) => this._onSelectPlace(u)}
+              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=${o}
+              data-deck-index=${s}
+              .propertyIds=${t.propertyIds}
+              .preventClick=${this.preventPlaceClick}
+            ></sbb-seat-reservation-place-control>
+          </td>
+        `;
+      })}`;
+    }
+    _getRenderedGraphicalElements(e, r, s, o) {
+      return e ? e?.map((a) => {
+        const t = a.icon ?? "", i = a.rotation || 0, l = this._notFixedRotatableAreaIcons.indexOf(a.icon) === -1, c = this.alignVertical && l ? i - 90 : i;
+        return this.notAreaElements.findIndex((b) => b === t) > -1 ? this._getRenderElementWithoutArea(a, i, r) : this._getRenderElementWithArea(a, c, r, s, o);
+      }) : null;
+    }
+    /**
+     * creates a rendered element with an area component
+     * @param graphicalElement
+     * @param rotation
+     * @param coachDimension
+     * @param coachIndex used to generate a unique id for the popover trigger
+     * @param coachDeckIndex used to generate a unique id
+     * @private
+     */
+    _getRenderElementWithArea(e, r, s, o, a) {
+      const t = e.icon?.indexOf("TABLE") === -1, i = e.icon && t ? e.icon : null, l = this.isElementDirectlyOnBorder(e, s) && i !== "ENTRY_EXIT", c = e.icon ? h(e.icon, this._language.current) : g, b = this.getCalculatedDimension(e.dimension, s, !0, l), v = this.getCalculatedPosition(e.position, e.dimension, s, !0), m = `popover-trigger-${a}-${o}-${v.x}-${v.y}`;
+      let u = "free";
+      return e.position.y === this.coachBorderOffset * -1 ? u = "upper-border" : e.position.y + e.dimension.h === s.h + this.coachBorderOffset && (u = "lower-border"), u !== "free" && (v.y += u === "upper-border" ? 2 : 1, b.h -= 3), n`
+      <sbb-seat-reservation-area
+        id="${m}"
+        class="${f({ "sbb-seat-reservation-area--cursor-pointer": i !== null })}"
+        style=${_({
+        "--sbb-seat-reservation-area-width": b.w,
+        "--sbb-seat-reservation-area-height": b.h,
+        "--sbb-seat-reservation-area-top": v.y,
+        "--sbb-seat-reservation-area-left": v.x
+      })}
+        mounting=${u}
+        background="dark"
+        aria-hidden="true"
+      >
+        ${i ? n`
+              <sbb-seat-reservation-graphic
+                style=${_({
+        "--sbb-seat-reservation-graphic-max-width": b.w,
+        "--sbb-seat-reservation-graphic-height": this.baseGridSize,
+        "--sbb-seat-reservation-graphic-rotation": r
+      })}
+                name=${i}
+                role="img"
+                aria-hidden="true"
+                class="auto-width"
+              ></sbb-seat-reservation-graphic>
+            ` : g}
+      </sbb-seat-reservation-area>
+      ${i ? this._popover(m, c) : g}
+    `;
+    }
+    _getRenderElementWithoutArea(e, r, s) {
+      const o = this.getCalculatedDimension(e.dimension, s), a = 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=${_({
+        "--sbb-seat-reservation-graphic-width": o.w,
+        "--sbb-seat-reservation-graphic-height": o.h,
+        "--sbb-seat-reservation-graphic-top": a.y,
+        "--sbb-seat-reservation-graphic-left": a.x,
+        "--sbb-seat-reservation-graphic-position": "absolute",
+        "--sbb-seat-reservation-graphic-rotation": r
+      })}
+      name=${t ?? g}
+      aria-hidden="true"
+      ?stretch=${!0}
+    ></sbb-seat-reservation-graphic>`;
+    }
+    _getRenderedServiceElements(e, r, s) {
+      return s ? s?.map((o) => {
+        const a = o.icon ? h(o.icon, this._language.current) : null, t = this.getCalculatedDimension(o.dimension), i = this.getCalculatedPosition(o.position), l = o.rotation || 0, c = this.alignVertical ? l - 90 : l, b = `popover-trigger-${r}-${e}-${i.x}-${i.y}`;
+        return n`
+        <sbb-seat-reservation-graphic
+          id="${b}"
+          style=${_({
+          "--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": c
+        })}
+          class="sbb-seat-reservation-graphic--cursor-pointer"
+          name=${o.icon ?? g}
+          role="img"
+          aria-hidden="true"
+        ></sbb-seat-reservation-graphic>
+        ${this._popover(b, a)}
+      `;
+      }) : null;
+    }
+    /**
+     * Manages the selected place event triggered from the place
+     * Each selection emits an array of all selected places
+     * @param selectPlaceEvent
+     */
+    _onSelectPlace(e) {
+      const r = e.detail;
+      this.preventCoachScrollByPlaceClick = !0, this.isCoachGridFocusable = !1, this.focusedCoachIndex = -1, this.hasSeatReservationNativeFocus || (this.hasSeatReservationNativeFocus = !0), this.preventPlaceClick || (this.updateSelectedSeatReservationPlaces(r), this.updateCurrentSelectedPlaceInCoach(r));
+    }
+    _onSelectNavCoach(e) {
+      const r = e.detail;
+      this.isKeyboardNavigation = !1, this.preventCoachScrollByPlaceClick = !1, this.hasSeatReservationNativeFocus = !0, r !== null && r !== this.currSelectedCoachIndex ? (this.unfocusPlaceElement(), this.scrollToSelectedNavCoach(r)) : r === this.currSelectedCoachIndex && (this.updateCurrentSelectedCoach(), this.preselectPlaceInCoach()), this._closePopover();
+    }
+    _onFocusNavCoach() {
+      this.preventCoachScrollByPlaceClick ? this.focusPlaceElement(this.currSelectedPlace) : this.preselectPlaceInCoach(), this.isAutoScrolling = !1;
+    }
+    /**
+     * Creates a popover for extra service information
+     * @param triggerId
+     * @param popoverContent
+     * @private
+     */
+    _popover(e, r) {
+      return n`
+      <sbb-popover trigger="${e}" hover-trigger="">
+        <p class="sbb-text-s sbb-sr-popover">${r}</p>
+      </sbb-popover>
+    `;
+    }
+    /**
+     * trigger to close all opened popovers (normally only one is opened at a time)
+     * @private
+     */
+    _closePopover() {
+      this.shadowRoot?.querySelectorAll("sbb-popover:is(:state(state-opened),[state--state-opened])").forEach((e) => e.close());
+    }
+    _getDescriptionTableCoach(e) {
+      if (!e.places?.length)
+        return h("COACH_BLOCKED_TABLE_CAPTION", this._language.current, [
+          e.id
+        ]);
+      let r;
+      const s = this._getTitleDescriptionListString(e.graphicElements), o = this._getTitleDescriptionListString(e.serviceElements);
+      if (r = h("COACH_TABLE_CAPTION", this._language.current, [
+        e.id
+      ]), !this.hasNavigation) {
+        const a = this.getAvailableFreePlacesNumFromCoach(e.places), t = h("COACH_AVAILABLE_NUMBER_OF_PLACES", this._language.current, [a.seats, a.bicycles]);
+        r = r.concat(". ").concat(t).concat(". ");
+      }
+      return (s || o) && (r += ". " + h("COACH_AVAILABLE_SERVICES", this._language.current) + ": ", r += o + ", " + s + "."), r;
+    }
+    _getTitleDescriptionListString(e) {
+      const r = [];
+      return e?.map((s) => {
+        const o = s.icon;
+        if (!o)
+          return null;
+        const a = r.indexOf(o) > -1, t = h(s.icon, this._language.current), i = this._notFixedRotatableAreaIcons.indexOf(o) === -1 && this.notAreaElements.indexOf(o) === -1;
+        return a || r.push(s.icon), t && !a && i ? t : null;
+      }).filter((s) => !!s).join(", ");
+    }
+  }, d = p, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create($[Symbol.metadata] ?? null) : void 0;
+    y(null, w = { value: d }, k, { kind: "class", name: d.name, metadata: e }, null, x), d = w.value, e && Object.defineProperty(d, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), p.styles = [S, T], C(d, x), d;
+})();
+export {
+  Y as SbbSeatReservationElement
+};

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

@@ -0,0 +1,50 @@
+var y = (r) => {
+  throw TypeError(r);
+};
+var w = (r, e, t) => e.has(r) || y("Cannot " + t);
+var d = (r, e, t) => (w(r, e, "read from private field"), t ? t.call(r) : e.get(r)), u = (r, e, t) => e.has(r) ? y("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(r) : e.set(r, t), m = (r, e, t, s) => (w(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 S } from "@sbb-esta/lyne-elements/core/decorators.js";
+import { boxSizingStyles as E } from "@sbb-esta/lyne-elements/core/styles.js";
+import { css as I, LitElement as j, html as D } from "lit";
+import { customElement as O, property as z } from "lit/decorators.js";
+const T = I`: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:0;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:0;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:var(--sbb-cursor-pointer)}`;
+let F = (() => {
+  var n, b, o;
+  let r = [O("sbb-seat-reservation-area")], e, t = [], s, g = j, 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, k), l(this, f, "light")));
+      l(this, x);
+    }
+    /** Mounting Prop */
+    get mounting() {
+      return d(this, n);
+    }
+    set mounting(i) {
+      m(this, n, i);
+    }
+    /** the background of the area */
+    get background() {
+      return d(this, b);
+    }
+    set background(i) {
+      m(this, b, i);
+    }
+    render() {
+      return D`<slot></slot>`;
+    }
+  }, n = new WeakMap(), b = new WeakMap(), s = o, (() => {
+    const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(g[Symbol.metadata] ?? null) : void 0;
+    h = [S(), z({ reflect: !0 })], _ = [S(), z({ 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, 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, 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 = [E, T], l(s, t), s;
+})();
+export {
+  F as SbbSeatReservationAreaElement
+};

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

@@ -0,0 +1,4 @@
+import { SbbSeatReservationAreaElement as t } from "./seat-reservation-area/seat-reservation-area.component.js";
+export {
+  t as SbbSeatReservationAreaElement
+};