@sbb-esta/lyne-elements-experimental 4.6.0 → 4.8.0

package/seat-reservation.component-zrQHTRl3.js

@@ -0,0 +1,364 @@
+import { SeatReservationBaseElement as e } from "./seat-reservation/seat-reservation/seat-reservation-base-element.js";
+import { SbbLanguageController as t } from "@sbb-esta/lyne-elements/core/controllers.js";
+import { boxSizingStyles as n } from "@sbb-esta/lyne-elements/core/styles.js";
+import { css as r, html as i, isServer as a, nothing as o } from "lit";
+import "@sbb-esta/lyne-elements/screen-reader-only.js";
+import { styleMap as s } from "lit/directives/style-map.js";
+import { SbbSeatReservationAreaElement as c } from "./seat-reservation/seat-reservation-area/seat-reservation-area.component.js";
+import { classMap as l } from "lit/directives/class-map.js";
+import { getI18nSeatReservation as u } from "./seat-reservation/common/translations.js";
+import { SbbSeatReservationGraphicElement as d } from "./seat-reservation/seat-reservation-graphic/seat-reservation-graphic.component.js";
+import { repeat as f } from "lit/directives/repeat.js";
+import { SbbSeatReservationNavigationCoachElement as p } from "./seat-reservation/seat-reservation-navigation-coach/seat-reservation-navigation-coach.component.js";
+import { SbbSeatReservationPlaceControlElement as m } from "./seat-reservation/seat-reservation-place-control/seat-reservation-place-control.component.js";
+import { SbbSeatReservationScopedElement as h } from "./seat-reservation/seat-reservation-scoped/seat-reservation-scoped.component.js";
+import "@sbb-esta/lyne-elements/button.js";
+import "@sbb-esta/lyne-elements/popover.js";
+//#region src/elements-experimental/seat-reservation/seat-reservation/seat-reservation.scss?lit&inline
+var g = r`:host{--sbb-seat-reservation-grid-size:16px;--sbb-seat-reservation-height:0;--sbb-seat-reservation-decks:1;height:inherit;display:block}:host ::part(coach-floor){fill:var(--sbb-background-color-2)}@media (forced-colors:active){:host ::part(coach-floor){fill:#0000}}: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){width:auto;height:auto;color:inherit;pointer-events:none;background-color:#0000;border:none;margin:0;padding:0}[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{justify-content:flex-end;gap:calc(22 * var(--sbb-seat-reservation-one-px-rem,.0625rem));height:inherit;flex-direction:row-reverse}@media (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 (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__component nav.sbb-sr-navigation ul.sbb-sr-navigation__list-coaches li{display:flex}:host([align-vertical]) .sbb-sr__wrapper-coach-decks{flex-direction:column}:host([align-vertical]) .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels{width:calc((var(--sbb-seat-reservation-height) + 24) * var(--sbb-seat-reservation-one-px-rem,.0625rem));height:initial;flex-direction:column-reverse}:host([align-vertical]) .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels b{inline-size:calc(50% - 16 * var(--sbb-seat-reservation-one-px-rem,.0625rem));block-size:calc(20 * var(--sbb-seat-reservation-one-px-rem,.0625rem));margin-bottom:calc(16 * var(--sbb-seat-reservation-one-px-rem,.0625rem));rotate:initial;writing-mode:initial}:host([align-vertical]) .sbb-sr__wrapper-scrollarea{width:calc((var(--sbb-seat-reservation-height) + 24) * var(--sbb-seat-reservation-one-px-rem,.0625rem));height:100%;overflow:hidden scroll}:host([align-vertical]) .sbb-sr__wrapper-scrollarea .sbb-sr__parent{rotate:90deg}:host([align-vertical]) .sbb-sr-travel-direction-wrapper{width:calc(var(--sbb-seat-reservation-height) * var(--sbb-seat-reservation-one-px-rem,.0625rem));margin-block-start:calc(4 * var(--sbb-seat-reservation-one-px-rem,.0625rem))}.sbb-sr-navigation{gap:calc(3 * var(--sbb-seat-reservation-one-px-rem,.0625rem))}.sbb-sr-navigation .sbb-sr__navigation-control-button{top:calc(2 * var(--sbb-seat-reservation-one-px-rem,.0625rem));position:relative}@media (width>=64rem){.sbb-sr-navigation .sbb-sr__navigation-control-button{top:0}}.sbb-sr__component{gap:calc(64 * var(--sbb-seat-reservation-one-px-rem,.0625rem) - 16px);flex-direction:column;display:flex}.sbb-sr-travel-direction-wrapper{justify-content:center;align-items:center;column-gap:calc(4 * var(--sbb-seat-reservation-one-px-rem,.0625rem));margin-block:calc(8 * var(--sbb-seat-reservation-one-px-rem,.0625rem)) calc(4 * var(--sbb-seat-reservation-one-px-rem,.0625rem));font-size:var(--sbb-text-font-size-s);display:flex}.sbb-sr-travel-direction-wrapper .sbb-sr__travel-direction--arrow{align-items:center;display:flex}.sbb-sr-navigation-wrapper{display:flex}.sbb-sr-navigation{justify-content:center;width:100%;padding-inline:16px;display:flex}.sbb-sr-navigation__list-coaches{font-size:inherit;--sbb-scrollbar-thumb-width:.125rem;--sbb-scrollbar-thumb-width-hover:.25rem;--sbb-scrollbar-width-firefox:thin;--sbb-scrollbar-color:var(--lightningcss-light,color-mix(in srgb, var(--sbb-color-black) 30%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--sbb-color-white) 30%, transparent));--sbb-scrollbar-color-hover:var(--lightningcss-light,color-mix(in srgb, var(--sbb-color-black) 60%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--sbb-color-white) 60%, transparent));--sbb-scrollbar-track-color:transparent;--sbb-scrollbar-width:var(--sbb-spacing-fixed-3x);margin:0;padding:0;list-style:none}.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{display:none}.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{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;--sbb-scrollbar-color:transparent;flex-wrap:nowrap;max-width:856px;display:flex;position:relative;overflow:scroll hidden}.sbb-sr__wrapper-coach-decks{height:inherit;display:flex;overflow:hidden}.sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels{height:calc(var(--sbb-seat-reservation-height) * var(--sbb-seat-reservation-one-px-rem,.0625rem));writing-mode:vertical-lr;justify-content:space-between;display:flex}.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));text-align:center;line-height:calc(20 * var(--sbb-seat-reservation-one-px-rem,.0625rem));margin-block-end:16px;rotate:180deg}.sbb-sr__wrapper-scrollarea{--sbb-scrollbar-thumb-width:.125rem;--sbb-scrollbar-thumb-width-hover:.25rem;--sbb-scrollbar-width-firefox:thin;--sbb-scrollbar-color:var(--lightningcss-light,color-mix(in srgb, var(--sbb-color-black) 30%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--sbb-color-white) 30%, transparent));--sbb-scrollbar-color-hover:var(--lightningcss-light,color-mix(in srgb, var(--sbb-color-black) 60%, transparent))var(--lightningcss-dark,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{display:none}.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{padding-block:calc(8 * var(--sbb-seat-reservation-one-px-rem,.0625rem)) calc(16 * var(--sbb-seat-reservation-one-px-rem,.0625rem));overflow:scroll hidden}.sbb-sr__wrapper-scrollarea .sbb-sr__parent{flex-direction:column;display:flex;position:relative}.sbb-sr__list-decks{font-size:inherit;flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.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{font-size:inherit;gap:calc(4 * var(--sbb-seat-reservation-one-px-rem,.0625rem));margin:0;padding:0;list-style:none;display:flex}.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}`;
+c.define(), d.define(), m.define(), p.define(), h.define();
+var _ = class extends e {
+	constructor() {
+		super(...arguments), this._language = new t(this), this._notFixedRotatableAreaIcons = ["ENTRY_EXIT"];
+	}
+	static {
+		this.elementName = "sbb-seat-reservation";
+	}
+	static {
+		this.styles = [n, g];
+	}
+	willUpdate(e) {
+		super.willUpdate(e), e.has("hasNavigation") && (this.hasNavigation ? this.shadowRoot?.querySelectorAll("table").forEach((e) => e.removeAttribute("tabindex")) : this.shadowRoot?.querySelectorAll("table").forEach((e) => e.setAttribute("tabindex", "0")));
+	}
+	firstUpdated(e) {
+		super.firstUpdated(e), this.updateComplete.then(() => {
+			this.initNavigationSelectionByScrollEvent();
+		});
+	}
+	render() {
+		return this._initVehicleSeatReservationConstruction(), this._coachesHtmlTemplate || null;
+	}
+	_initVehicleSeatReservationConstruction() {
+		this._coachesHtmlTemplate = i`
+      ${this._renderTravelDirection()}
+      <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="-1"
+          >
+            <div id="sbb-sr__parent-area" class="sbb-sr__parent">
+              <ul
+                class="${l({
+			"sbb-sr__list-decks": !0,
+			"sbb-sr__list-decks--gap": this.hasMultipleDecks
+		})}"
+              >
+                ${this.seatReservations?.map((e, t) => i`<li class="sbb-sr__list-item-deck">
+                      <ul class="sbb-sr__list-coaches" role="presentation">
+                        ${this._renderCoaches(e, t)}
+                      </ul>
+                    </li>`)}
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+	}
+	_renderDeckLabels() {
+		return this.hasMultipleDecks ? this.seatReservations.map((e) => i`<b aria-hidden="true">${u(e.deckCoachLevel, this._language.current)}</b>`) : null;
+	}
+	_renderNavigationControlButton(e) {
+		if (!this.hasNavigation || !this.seatReservations) return null;
+		let t = e == "DIRECTION_RIGHT" ? "sbb-sr-navigation__wrapper-button-direction--right" : "sbb-sr-navigation__wrapper-button-direction--left", n = e == "DIRECTION_RIGHT" ? "chevron-small-right-small" : "chevron-small-left-small", r = u(e == "DIRECTION_RIGHT" ? "SEAT_RESERVATION_END" : "SEAT_RESERVATION_BEGIN", this._language.current), a = !0;
+		return (e == "DIRECTION_LEFT" && this.selectedCoachIndex > 0 || e == "DIRECTION_RIGHT" && this.selectedCoachIndex < this.coachItemDetailsElements.length - 1) && (a = !1), i`<div class="sbb-sr-navigation__wrapper-button-direction">
+      <sbb-secondary-button
+        @click="${() => this.navigateByDirectionBtn(e)}"
+        @focus="${() => this.onFocusNavDirectionButton()}"
+        id="${t}"
+        class="sbb-sr__navigation-control-button"
+        size="m"
+        icon-name="${n}"
+        type="button"
+        aria-label="${r}"
+        role="button"
+        .disabledInteractive="${a || o}"
+        .disabled="${a || o}"
+      ></sbb-secondary-button>
+    </div>`;
+	}
+	_renderTravelDirection() {
+		if (!this.travelDirection || this.travelDirection === "NONE") return null;
+		let e = u("SEAT_RESERVATION_TRAVEL_DIRECTION", this._language.current);
+		return i`<div class="sbb-sr-travel-direction-wrapper">
+      <div class="sbb-sr__travel-direction--arrow">
+        <sbb-icon slot="icon" name="${`arrow-${this.alignVertical ? this.travelDirection === "RIGHT" ? "down" : "up" : this.travelDirection === "RIGHT" ? "right" : "left"}-small`}"></sbb-icon>
+      </div>
+      <div class="sbb-sr__travel-direction--label">${e}</div>
+    </div>`;
+	}
+	_renderNavigation() {
+		return a || !this.hasNavigation || !this.seatReservations ? null : i`<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="${u("SEAT_RESERVATION_NAVIGATION", this._language.current)}"
+        >
+          ${this.coachItemDetailsElements.map((e, t) => i`<li>
+                <sbb-seat-reservation-navigation-coach
+                  @selectcoach=${(e) => this._onSelectNavCoach(e)}
+                  @focuscoach=${() => this._onFocusNavCoach()}
+                  @keyup=${(e) => this.onKeyNavigationNavCoachButton(e, t)}
+                  index="${t}"
+                  .selected=${this.selectedCoachIndex === t}
+                  .focused=${this.focusedCoachIndex === t}
+                  .hovered=${this.hoveredCoachIndex === t}
+                  .nativeFocusActive=${this.hasSeatReservationNativeFocus}
+                  .coachItemDetails="${e}"
+                  ?vertical="${this.alignVertical}"
+                  ?showTitleInfo="${this.showTitleInfo}"
+                >
+                </sbb-seat-reservation-navigation-coach>
+              </li>`)}
+        </ul>
+        ${this._renderNavigationControlButton("DIRECTION_RIGHT")}
+      </nav>
+    </div>`;
+	}
+	_renderCoaches(e, t) {
+		let n = JSON.parse(JSON.stringify(e?.coachItems));
+		return !n || a ? null : n.map((n, r) => i`
+        <li class="sbb-sr__item-coach">
+          ${this._renderCoachElement(n, r, t, e.deckCoachIndex)}
+        </li>
+      `);
+	}
+	_renderCoachElement(e, t, n, r) {
+		let a = this.getCalculatedDimension(e.dimension), o = this._getDescriptionTableCoach(e);
+		return i`<sbb-seat-reservation-scoped
+      style=${s({
+			"--sbb-seat-reservation-scoped-width": a.w,
+			"--sbb-seat-reservation-scoped-height": a.h
+		})}
+    >
+      ${this._getRenderedCoachBorders(e, t)}
+      ${this._getRenderedGraphicalElements(e.graphicElements || [], e.dimension, t, n)}
+      ${this._getRenderedServiceElements(t, n, e.serviceElements)}
+
+      <table
+        @focus=${() => this.onFocusTableCoachAndPreselectPlace(t)}
+        id="sbb-sr-coach-${t}"
+        class="sbb-sr-coach-wrapper__table"
+        aria-describedby="sbb-sr-coach-caption-${t}"
+        tabindex="-1"
+      >
+        <caption id="sbb-sr-coach-caption-${t}" tabindex="-1">
+          <sbb-screen-reader-only>${o}</sbb-screen-reader-only>
+        </caption>
+        ${this._getRenderedRowPlaces(e, t, n, r)}
+      </table>
+    </sbb-seat-reservation-scoped>`;
+	}
+	_getRenderedCoachBorders(e, t) {
+		if (!e.graphicElements) return null;
+		let n = this.coachItemDetailsElements[t]?.driverAreaElements?.driverArea, r = this.coachItemDetailsElements[t]?.driverAreaElements?.driverAreaNoVerticalWall, a = n ? e.dimension.w - n.dimension.w - 1 : e.dimension.w - 2;
+		a *= this.baseGridSize;
+		let o = (e.dimension.h + this.coachBorderOffset * 2) * this.baseGridSize, c = n && n.position.x === 0 ? n?.dimension.w * this.baseGridSize : this.baseGridSize;
+		r && (a = this.getCalculatedDimension(e.dimension).w - 2 * (r.dimension.w * this.baseGridSize), c = r.dimension.w * this.baseGridSize);
+		let u = this.overHangingElementInformation.find((t) => t.coachId === e.id);
+		return (u?.overhangingPlaces || u?.overhangingGraphicAreas) && (a += 2 * this.baseGridSize, c = 0), i`
+      <sbb-seat-reservation-graphic
+        class="${l({ "sbb-sr-coach-has-overhanging-elements": u?.overhangingPlaces || u?.overhangingGraphicAreas || !1 })}"
+        style=${s({
+			"--sbb-seat-reservation-graphic-width": a,
+			"--sbb-seat-reservation-graphic-height": o,
+			"--sbb-seat-reservation-graphic-top": this.coachBorderPadding * -1,
+			"--sbb-seat-reservation-graphic-left": c,
+			"--sbb-seat-reservation-graphic-position": "absolute"
+		})}
+        name="COACH_BORDER_MIDDLE"
+        ?stretch=${!0}
+        role="presentation"
+      ></sbb-seat-reservation-graphic>
+    `;
+	}
+	_getRenderedRowPlaces(e, t, n, r) {
+		if (!e.places) return null;
+		let a = {};
+		for (let t of e.places) a[t.position.y] ? a[t.position.y].push(t) : a[t.position.y] = [t];
+		return Object.values(a).map((e, a) => i`
+          <tr id="row-${t}-${e[0].position.y}" data-row-index=${a}>
+            ${this._getRenderedColumnPlaces(e, t, n, r)}
+          </tr>
+        `).flatMap((e) => e);
+	}
+	_getRenderedColumnPlaces(e, t, n, r) {
+		e.sort((e, t) => Number(e.position.x) - Number(t.position.x));
+		let a = t + "-" + r;
+		return i`${f(e, (e) => a + "-" + e.number, (e, a) => {
+			let o = this.getCalculatedDimension(e.dimension), c = this.getCalculatedPosition(e.position), l = e.rotation || 0, u = this.alignVertical ? -90 : 0, d = this.getPlaceElementId(n, t, e.number);
+			return i`
+          <td
+            id="cell-${n}-${t}-${e.position.y}-${a}"
+            class="graphical-element"
+          >
+            <sbb-seat-reservation-place-control
+              style=${s({
+				"--sbb-seat-reservation-place-control-text-scale-value": Math.min(o.w, o.h),
+				"--sbb-seat-reservation-place-control-width": o.w,
+				"--sbb-seat-reservation-place-control-height": o.h,
+				"--sbb-seat-reservation-place-control-top": c.y,
+				"--sbb-seat-reservation-place-control-left": c.x,
+				"--sbb-seat-reservation-place-control-rotation": l,
+				"--sbb-seat-reservation-place-control-text-rotation": u
+			})}
+              @selectplace=${(e) => this._onSelectPlace(e)}
+              exportparts="sbb-sr-place-part"
+              id=${d}
+              class="seat-reservation-place-control"
+              text=${e.number}
+              type=${e.type}
+              state=${e.state}
+              travel-direction=${this.travelDirection}
+              coach-index=${t}
+              deck-index=${r}
+              data-deck-index=${n}
+              .propertyIds=${e.propertyIds}
+              .preventClick=${this.preventPlaceClick}
+              ?showTitleInfo="${this.showTitleInfo}"
+            ></sbb-seat-reservation-place-control>
+          </td>
+        `;
+		})}`;
+	}
+	_getRenderedGraphicalElements(e, t, n, r) {
+		return e ? e?.map((e) => {
+			let i = e.icon ?? "", a = e.rotation || 0, o = this._notFixedRotatableAreaIcons.indexOf(e.icon) === -1, s = this.alignVertical && o ? a - 90 : a;
+			return this.notAreaElements.findIndex((e) => e === i) > -1 ? this._getRenderElementWithoutArea(e, a, t) : this._getRenderElementWithArea(e, s, t, n, r);
+		}) : null;
+	}
+	_getRenderElementWithArea(e, t, n, r, a) {
+		let c = e.icon?.indexOf("TABLE") === -1, d = e.icon && c ? e.icon : null, f = this.isElementDirectlyOnBorder(e, n) && d !== "ENTRY_EXIT", p = e.icon ? u(e.icon, this._language.current) : o, m = this.getCalculatedDimension(e.dimension, n, !0, f), h = this.getCalculatedPosition(e.position, e.dimension, n, !0), g = `popover-trigger-${a}-${r}-${h.x}-${h.y}`, _ = "free";
+		return e.position.y === this.coachBorderOffset * -1 ? _ = "upper-border" : e.position.y + e.dimension.h === n.h + this.coachBorderOffset && (_ = "lower-border"), _ !== "free" && (h.y += _ === "upper-border" ? 2 : 1, m.h -= 3), i`
+      <sbb-seat-reservation-area
+        id="${g}"
+        class="${l({ "sbb-seat-reservation-area--cursor-pointer": d !== null })}"
+        style=${s({
+			"--sbb-seat-reservation-area-width": m.w,
+			"--sbb-seat-reservation-area-height": m.h,
+			"--sbb-seat-reservation-area-top": h.y,
+			"--sbb-seat-reservation-area-left": h.x
+		})}
+        mounting=${_}
+        background="dark"
+        aria-hidden="true"
+      >
+        ${d ? i`
+              <sbb-seat-reservation-graphic
+                style=${s({
+			"--sbb-seat-reservation-graphic-max-width": m.w,
+			"--sbb-seat-reservation-graphic-height": this.baseGridSize,
+			"--sbb-seat-reservation-graphic-rotation": t
+		})}
+                name=${d}
+                role="img"
+                aria-hidden="true"
+                class="auto-width"
+              ></sbb-seat-reservation-graphic>
+            ` : o}
+      </sbb-seat-reservation-area>
+      ${d ? this._popover(g, p) : o}
+    `;
+	}
+	_getRenderElementWithoutArea(e, t, n) {
+		let r = this.getCalculatedDimension(e.dimension, n), a = this.getCalculatedPosition(e.position, e.dimension, n), c = e.icon && e.icon.endsWith("DRIVER_AREA") ? e.icon?.concat("_", this.seatReservations[this.currSelectedDeckIndex].vehicleType) : e.icon;
+		return i` <sbb-seat-reservation-graphic
+      style=${s({
+			"--sbb-seat-reservation-graphic-width": r.w,
+			"--sbb-seat-reservation-graphic-height": r.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": t
+		})}
+      name=${c ?? o}
+      aria-hidden="true"
+      ?stretch=${!0}
+    ></sbb-seat-reservation-graphic>`;
+	}
+	_getRenderedServiceElements(e, t, n) {
+		return n ? n?.map((n) => {
+			let r = n.icon ? u(n.icon, this._language.current) : null, a = this.getCalculatedDimension(n.dimension), c = this.getCalculatedPosition(n.position), l = n.rotation || 0, d = this.alignVertical ? l - 90 : l, f = `popover-trigger-${t}-${e}-${c.x}-${c.y}`;
+			return i`
+        <sbb-seat-reservation-graphic
+          id="${f}"
+          style=${s({
+				"--sbb-seat-reservation-graphic-width": a.w,
+				"--sbb-seat-reservation-graphic-height": a.h,
+				"--sbb-seat-reservation-graphic-top": c.y,
+				"--sbb-seat-reservation-graphic-left": c.x,
+				"--sbb-seat-reservation-graphic-position": "absolute",
+				"--sbb-seat-reservation-graphic-rotation": d
+			})}
+          class="sbb-seat-reservation-graphic--cursor-pointer"
+          name=${n.icon ?? o}
+          role="img"
+          aria-hidden="true"
+        ></sbb-seat-reservation-graphic>
+        ${this._popover(f, r)}
+      `;
+		}) : null;
+	}
+	_onSelectPlace(e) {
+		let t = e.detail;
+		this.preventCoachScrollByPlaceClick = !0, this.isCoachGridFocusable = !1, this.focusedCoachIndex = -1, this.hasSeatReservationNativeFocus ||= !0, this.preventPlaceClick || (this.updateSelectedSeatReservationPlaces(t), this.updateCurrentSelectedPlaceInCoach(t));
+	}
+	_onSelectNavCoach(e) {
+		let t = e.detail;
+		this.isKeyboardNavigation = !1, this.preventCoachScrollByPlaceClick = !1, this.hasSeatReservationNativeFocus = !0, t !== null && t !== this.currSelectedCoachIndex ? (this.unfocusPlaceElement(), this.scrollToSelectedNavCoach(t)) : t === this.currSelectedCoachIndex && (this.updateCurrentSelectedCoach(), this.preselectPlaceInCoach()), this._closePopover();
+	}
+	_onFocusNavCoach() {
+		this.preventCoachScrollByPlaceClick ? this.focusPlaceElement(this.currSelectedPlace) : this.preselectPlaceInCoach(), this.isAutoScrolling = !1;
+	}
+	_popover(e, t) {
+		return i`
+      <sbb-popover trigger="${e}" hover-trigger="">
+        <p class="sbb-text-s sbb-sr-popover">${t}</p>
+      </sbb-popover>
+    `;
+	}
+	_closePopover() {
+		this.shadowRoot?.querySelectorAll("sbb-popover:is(:state(state-opened),[state--state-opened])").forEach((e) => e.close());
+	}
+	_getDescriptionTableCoach(e) {
+		if (e.type === "LOCOMOTIVE_COACH") return u("COACH_LOCOMOTIVE", this._language.current);
+		if (!e.places?.length) return u("COACH_BLOCKED_TABLE_CAPTION", this._language.current, [e.id]);
+		let t, n = this._getTitleDescriptionListString(e.graphicElements), r = this._getTitleDescriptionListString(e.serviceElements);
+		if (t = u("COACH_TABLE_CAPTION", this._language.current, [e.id]), !this.hasNavigation) {
+			let n = this.getAvailableFreePlacesNumFromCoach(e.places), r = u("COACH_AVAILABLE_NUMBER_OF_PLACES", this._language.current, [n.seats, n.bicycles]);
+			t = t.concat(". ").concat(r).concat(". ");
+		}
+		return (n || r) && (t += ". " + u("COACH_AVAILABLE_SERVICES", this._language.current) + ": ", t += r + ", " + n + "."), t;
+	}
+	_getTitleDescriptionListString(e) {
+		let t = [];
+		return e?.map((e) => {
+			let n = e.icon;
+			if (!n) return null;
+			let r = t.indexOf(n) > -1, i = u(e.icon, this._language.current), a = this._notFixedRotatableAreaIcons.indexOf(n) === -1 && this.notAreaElements.indexOf(n) === -1;
+			return r || t.push(e.icon), i && !r && a ? i : null;
+		}).filter((e) => !!e).join(", ");
+	}
+};
+//#endregion
+export { _ as t };

package/seat-reservation.js

@@ -1,29 +1,17 @@
-import { mapCoachInfosToCoachSelection as t, mapPlaceAndCoachToSeatReservationPlaceSelection as a, mapPlaceInfosToPlaceSelection as r, mapRawDataToSeatReservation as n } from "./seat-reservation/common/mapper/mapper.js";
-import { mapIconToSvg as S } from "./seat-reservation/common/mapper/icon-mapper.js";
-import { svgs as p } from "./seat-reservation/common/svgs.js";
-import { getI18nSeatReservation as s } from "./seat-reservation/common/translations/i18n.js";
-import { SbbSeatReservationElement as v } from "./seat-reservation/seat-reservation/seat-reservation.component.js";
-import { SeatReservationBaseElement as f } from "./seat-reservation/seat-reservation/seat-reservation-base-element.js";
-import { SbbSeatReservationAreaElement as R } from "./seat-reservation/seat-reservation-area/seat-reservation-area.component.js";
-import { SbbSeatReservationGraphicElement as g } from "./seat-reservation/seat-reservation-graphic/seat-reservation-graphic.component.js";
-import { SbbSeatReservationNavigationCoachElement as C } from "./seat-reservation/seat-reservation-navigation-coach/seat-reservation-navigation-coach.component.js";
-import { SbbSeatReservationNavigationServicesElement as T } from "./seat-reservation/seat-reservation-navigation-services/seat-reservation-navigation-services.component.js";
-import { SbbSeatReservationPlaceControlElement as d } from "./seat-reservation/seat-reservation-place-control/seat-reservation-place-control.component.js";
-import { SbbSeatReservationScopedElement as N } from "./seat-reservation/seat-reservation-scoped/seat-reservation-scoped.component.js";
-export {
-  R as SbbSeatReservationAreaElement,
-  v as SbbSeatReservationElement,
-  g as SbbSeatReservationGraphicElement,
-  C as SbbSeatReservationNavigationCoachElement,
-  T as SbbSeatReservationNavigationServicesElement,
-  d as SbbSeatReservationPlaceControlElement,
-  N as SbbSeatReservationScopedElement,
-  f as SeatReservationBaseElement,
-  s as getI18nSeatReservation,
-  t as mapCoachInfosToCoachSelection,
-  S as mapIconToSvg,
-  a as mapPlaceAndCoachToSeatReservationPlaceSelection,
-  r as mapPlaceInfosToPlaceSelection,
-  n as mapRawDataToSeatReservation,
-  p as svgs
-};
+import { i as e, n as t, r as n, t as r } from "./mapper-DkiDDseD.js";
+import { mapIconToSvg as i } from "./seat-reservation/common/mapper/icon-mapper.js";
+import { t as a } from "./svgs-D5DhLHxC.js";
+import { getI18nSeatReservation as o } from "./seat-reservation/common/translations/i18n.js";
+import { t as s } from "./seat-reservation-area.component-COD6CXhP.js";
+import { t as c } from "./seat-reservation-graphic.component-BNfU5tQM.js";
+import { assetsTemplate as l, svgImageByOSDMCode as u } from "./seat-reservation/seat-reservation-graphic/seat-reservation-assets.js";
+import { t as d } from "./seat-reservation-navigation-coach.component-Bh9ILq60.js";
+import { t as f } from "./seat-reservation-navigation-services.component-QL0UnilZ.js";
+import { t as p } from "./seat-reservation-place-control.component-BfnZUyHv.js";
+import { t as m } from "./seat-reservation-scoped.component-CY04BT_4.js";
+import { SeatReservationBaseElement as h } from "./seat-reservation/seat-reservation/seat-reservation-base-element.js";
+import { t as g } from "./seat-reservation.component-zrQHTRl3.js";
+import "./seat-reservation.pure.js";
+g.define(), s.define(), c.define(), d.define(), f.define(), p.define(), m.define();
+//#endregion
+export { s as SbbSeatReservationAreaElement, g as SbbSeatReservationElement, c as SbbSeatReservationGraphicElement, d as SbbSeatReservationNavigationCoachElement, f as SbbSeatReservationNavigationServicesElement, p as SbbSeatReservationPlaceControlElement, m as SbbSeatReservationScopedElement, h as SeatReservationBaseElement, l as assetsTemplate, o as getI18nSeatReservation, r as mapCoachInfosToCoachSelection, i as mapIconToSvg, t as mapPlaceAndCoachToSeatReservationPlaceSelection, n as mapPlaceInfosToPlaceSelection, e as mapRawDataToSeatReservation, u as svgImageByOSDMCode, a as svgs };

package/seat-reservation.pure.js

@@ -0,0 +1,15 @@
+import { i as e, n as t, r as n, t as r } from "./mapper-DkiDDseD.js";
+import { mapIconToSvg as i } from "./seat-reservation/common/mapper/icon-mapper.js";
+import "./seat-reservation/common/mapper.js";
+import { t as a } from "./svgs-D5DhLHxC.js";
+import { getI18nSeatReservation as o } from "./seat-reservation/common/translations/i18n.js";
+import { t as s } from "./seat-reservation-area.component-COD6CXhP.js";
+import { t as c } from "./seat-reservation-graphic.component-BNfU5tQM.js";
+import { assetsTemplate as l, svgImageByOSDMCode as u } from "./seat-reservation/seat-reservation-graphic/seat-reservation-assets.js";
+import { t as d } from "./seat-reservation-navigation-coach.component-Bh9ILq60.js";
+import { t as f } from "./seat-reservation-navigation-services.component-QL0UnilZ.js";
+import { t as p } from "./seat-reservation-place-control.component-BfnZUyHv.js";
+import { t as m } from "./seat-reservation-scoped.component-CY04BT_4.js";
+import { SeatReservationBaseElement as h } from "./seat-reservation/seat-reservation/seat-reservation-base-element.js";
+import { t as g } from "./seat-reservation.component-zrQHTRl3.js";
+export { s as SbbSeatReservationAreaElement, g as SbbSeatReservationElement, c as SbbSeatReservationGraphicElement, d as SbbSeatReservationNavigationCoachElement, f as SbbSeatReservationNavigationServicesElement, p as SbbSeatReservationPlaceControlElement, m as SbbSeatReservationScopedElement, h as SeatReservationBaseElement, l as assetsTemplate, o as getI18nSeatReservation, r as mapCoachInfosToCoachSelection, i as mapIconToSvg, t as mapPlaceAndCoachToSeatReservationPlaceSelection, n as mapPlaceInfosToPlaceSelection, e as mapRawDataToSeatReservation, u as svgImageByOSDMCode, a as svgs };

package/standard-theme.css

@@ -0,0 +1,13 @@
+:root {
+  --sbb-autocomplete-grid-row-color: var(--sbb-color-3);
+  --sbb-autocomplete-grid-row-background-color-hover: var(--sbb-background-color-3);
+  --sbb-autocomplete-grid-row-disabled-border-color: var(--sbb-color-graphite);
+  --sbb-autocomplete-grid-row-disabled-border-color: light-dark(
+    var(--sbb-color-graphite),
+    var(--sbb-color-smoke)
+  );
+  --sbb-autocomplete-grid-row-disabled-background-color: var(--sbb-background-color-3);
+  --sbb-autocomplete-grid-row-padding-inline-end: var(--sbb-spacing-responsive-xxxs);
+  --sbb-autocomplete-grid-row-justify-content: space-between;
+  --sbb-autocomplete-grid-row-cursor: var(--sbb-cursor-pointer);
+}