@sbb-esta/lyne-elements-experimental-dev 4.13.1-dev.1781017616 → 5.0.0-dev.1781073747

package/seat-reservation.component-B_T6eTf6.js

@@ -1,360 +0,0 @@
-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 { html as r, isServer as i, nothing as a, unsafeCSS 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?inline
-var g = ":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__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{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{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{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-travel-direction-wrapper{display:flex;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)}.sbb-sr-travel-direction-wrapper .sbb-sr__travel-direction--arrow{display:flex;align-items:center}.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}";
-c.define(), d.define(), m.define(), p.define(), h.define();
-var _ = class extends e {
-	constructor() {
-		super(...arguments), this._language = new t(this);
-	}
-	static {
-		this.elementName = "sbb-seat-reservation";
-	}
-	static {
-		this.styles = [n, o(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 = r`
-      ${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) => r`<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) => r`<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", i = u(e == "DIRECTION_RIGHT" ? "SEAT_RESERVATION_END" : "SEAT_RESERVATION_BEGIN", this._language.current), o = !0;
-		return (e == "DIRECTION_LEFT" && this.selectedCoachIndex > 0 || e == "DIRECTION_RIGHT" && this.selectedCoachIndex < this.coachItemDetailsElements.length - 1) && (o = !1), r`<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="${i}"
-        role="button"
-        .disabledInteractive="${o || a}"
-        .disabled="${o || a}"
-      ></sbb-secondary-button>
-    </div>`;
-	}
-	_renderTravelDirection() {
-		if (!this.travelDirection || this.travelDirection === "NONE") return null;
-		let e = u("SEAT_RESERVATION_TRAVEL_DIRECTION", this._language.current);
-		return r`<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 i || !this.hasNavigation || !this.seatReservations ? null : r`<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) => r`<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 || i ? null : n.map((n, i) => r`
-        <li class="sbb-sr__item-coach">
-          ${this._renderCoachElement(n, i, t, e.deckCoachIndex)}
-        </li>
-      `);
-	}
-	_renderCoachElement(e, t, n, i) {
-		let a = this.seatReservationStructure.decks[n].deckCoaches[t], o = this._getDescriptionTableCoach(e);
-		return r`<sbb-seat-reservation-scoped
-      style=${s({
-			"--sbb-seat-reservation-scoped-width": a.width,
-			"--sbb-seat-reservation-scoped-height": a.height
-		})}
-    >
-      ${this._getRenderedCoachBorders(e, n, t)}
-      ${this._getRenderedCoachElements(n, t)}
-      ${this._getRenderedAreaElements(n, t)}
-      ${this._getRenderedServiceElements(n, t)}
-
-      <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, i)}
-      </table>
-    </sbb-seat-reservation-scoped>`;
-	}
-	_getRenderedCoachBorders(e, t, n) {
-		if (!e.graphicElements) return null;
-		let i = this.seatReservationStructure.decks[t].deckCoaches[n], a = i.borderMiddleElement, o = i.hasOverhangingElements;
-		return r`
-      <sbb-seat-reservation-graphic
-        class="${l({ "sbb-sr-coach-has-overhanging-elements": o || !1 })}"
-        style=${s({
-			"--sbb-seat-reservation-graphic-width": a.dimension.w,
-			"--sbb-seat-reservation-graphic-height": a.dimension.h,
-			"--sbb-seat-reservation-graphic-top": a.position.y,
-			"--sbb-seat-reservation-graphic-left": a.position.x,
-			"--sbb-seat-reservation-graphic-position": "absolute"
-		})}
-        name="COACH_BORDER_MIDDLE"
-        ?stretch=${!0}
-        role="presentation"
-      ></sbb-seat-reservation-graphic>
-    `;
-	}
-	_getRenderedRowPlaces(e, t, n, i) {
-		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) => r`
-          <tr id="row-${t}-${e[0].position.y}" data-row-index=${a}>
-            ${this._getRenderedColumnPlaces(e, t, n, i)}
-          </tr>
-        `).flatMap((e) => e);
-	}
-	_getRenderedColumnPlaces(e, t, n, i) {
-		e.sort((e, t) => Number(e.position.x) - Number(t.position.x));
-		let a = t + "-" + i;
-		return r`${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 r`
-          <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=${i}
-              data-deck-index=${n}
-              .propertyIds=${e.propertyIds}
-              .preventClick=${this.preventPlaceClick}
-              ?showTitleInfo="${this.showTitleInfo}"
-            ></sbb-seat-reservation-place-control>
-          </td>
-        `;
-		})}`;
-	}
-	_getRenderedCoachElements(e, t) {
-		return this.seatReservationStructure.decks[e].deckCoaches[t].otherElements.map((e) => r` <sbb-seat-reservation-graphic
-        style=${s({
-			"--sbb-seat-reservation-graphic-width": e.dimension.w,
-			"--sbb-seat-reservation-graphic-height": e.dimension.h,
-			"--sbb-seat-reservation-graphic-top": e.position.y,
-			"--sbb-seat-reservation-graphic-left": e.position.x,
-			"--sbb-seat-reservation-graphic-position": "absolute",
-			"--sbb-seat-reservation-graphic-rotation": e.rotation
-		})}
-        name=${e.icon ?? a}
-        aria-hidden="true"
-        ?stretch=${!0}
-      ></sbb-seat-reservation-graphic>`);
-	}
-	_getRenderedAreaElements(e, t) {
-		return this.seatReservationStructure.decks[e].deckCoaches[t].areaElements.map((n) => {
-			let i = `popover-trigger-${e}-${t}-${n.position.x}-${n.position.y}`, o = n.icon?.indexOf("TABLE") === -1, c = n.icon && o ? n.icon : null, d = n.icon ? u(n.icon, this._language.current) : a;
-			return r`
-        <sbb-seat-reservation-area
-          id="${i}"
-          class="${l({ "sbb-seat-reservation-area--cursor-pointer": c !== null })}"
-          style=${s({
-				"--sbb-seat-reservation-area-width": n.dimension.w,
-				"--sbb-seat-reservation-area-height": n.dimension.h,
-				"--sbb-seat-reservation-area-top": n.position.y,
-				"--sbb-seat-reservation-area-left": n.position.x,
-				"--sbb-seat-reservation-area-z-index": n.position.z
-			})}
-          mounting=${n.mounting ?? a}
-          background="dark"
-          aria-hidden="true"
-        >
-          ${c ? r`
-                <sbb-seat-reservation-graphic
-                  style=${s({
-				"--sbb-seat-reservation-graphic-max-width": this.globalAreaIconDim.w,
-				"--sbb-seat-reservation-graphic-max-height": this.globalAreaIconDim.h,
-				"--sbb-seat-reservation-graphic-width": n.dimension.w,
-				"--sbb-seat-reservation-graphic-height": n.dimension.h,
-				"--sbb-seat-reservation-graphic-rotation": n.rotation,
-				"--sbb-seat-reservation-graphic-padding-percent": c === "ENTRY_EXIT" ? 1 : this.globalAreaIconPadding
-			})}
-                  name=${c}
-                  role="img"
-                  aria-hidden="true"
-                  class="sbb-sr-graphic__dimension--square-dim"
-                ></sbb-seat-reservation-graphic>
-              ` : a}
-        </sbb-seat-reservation-area>
-        ${c ? this._popover(i, d) : a}
-      `;
-		});
-	}
-	_getRenderedServiceElements(e, t) {
-		return this.seatReservationStructure.decks[e].deckCoaches[t].serviceElements.map((n) => {
-			let i = `popover-trigger-${e}-${t}-${n.position.x}-${n.position.y}`, o = n.icon ? u(n.icon, this._language.current) : null;
-			return r`
-        <sbb-seat-reservation-graphic
-          id="${i}"
-          style=${s({
-				"--sbb-seat-reservation-graphic-width": n.dimension.w,
-				"--sbb-seat-reservation-graphic-height": n.dimension.h,
-				"--sbb-seat-reservation-graphic-top": n.position.y,
-				"--sbb-seat-reservation-graphic-left": n.position.x,
-				"--sbb-seat-reservation-graphic-position": "absolute",
-				"--sbb-seat-reservation-graphic-rotation": n.rotation
-			})}
-          class="sbb-seat-reservation-graphic--cursor-pointer"
-          name=${n.icon ?? a}
-          role="img"
-          aria-hidden="true"
-        ></sbb-seat-reservation-graphic>
-        ${this._popover(i, o)}
-      `;
-		});
-	}
-	_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 r`
-      <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/timetable-duration.component-Bqo5N_De.js

@@ -1,65 +0,0 @@
-import { __esDecorate as e, __runInitializers as t } from "tslib";
-import { SbbElement as n } from "@sbb-esta/lyne-elements/core/base-elements.js";
-import { SbbLanguageController as r } from "@sbb-esta/lyne-elements/core/controllers.js";
-import { forceType as i } from "@sbb-esta/lyne-elements/core/decorators.js";
-import { boxSizingStyles as a } from "@sbb-esta/lyne-elements/core/styles.js";
-import { html as o, unsafeCSS as s } from "lit";
-import { i18nDurationHour as c, i18nDurationMinute as l } from "@sbb-esta/lyne-elements/core/i18n.js";
-import { property as u } from "lit/decorators.js";
-//#region src/elements-experimental/timetable-duration/timetable-duration.scss?inline
-var d = ":host{display:inline-block}.duration{--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);margin:0;white-space:nowrap}.duration__text--visually-hidden{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}", f = (() => {
-	let f = n, p, m = [], h = [];
-	return class extends f {
-		constructor() {
-			super(...arguments), this.#e = t(this, m, ""), this._language = (t(this, h), new r(this));
-		}
-		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
-			p = [i(), u()], e(this, null, p, {
-				kind: "accessor",
-				name: "config",
-				static: !1,
-				private: !1,
-				access: {
-					has: (e) => "config" in e,
-					get: (e) => e.config,
-					set: (e, t) => {
-						e.config = t;
-					}
-				},
-				metadata: t
-			}, m, h), t && Object.defineProperty(this, Symbol.metadata, {
-				enumerable: !0,
-				configurable: !0,
-				writable: !0,
-				value: t
-			});
-		}
-		static {
-			this.elementName = "sbb-timetable-duration";
-		}
-		static {
-			this.styles = [a, s(d)];
-		}
-		#e;
-		get config() {
-			return this.#e;
-		}
-		set config(e) {
-			this.#e = e;
-		}
-		render() {
-			let e = JSON.parse(this.config), t = c.multiple.short[this._language.current], n = l.multiple.short[this._language.current], r = "", i = "", a = c.multiple.long[this._language.current], s = l.multiple.long[this._language.current];
-			return e.hours === 1 && (a = c.single.long[this._language.current]), e.minutes === 1 && (s = l.single.long[this._language.current]), e.hours !== 0 && (r += `${e.hours} ${t}`, i += `${e.hours} ${a}`), r += ` ${e.minutes} ${n}`, i += ` ${e.minutes} ${s}.`, o`
-      <p aria-label=${i} class="duration" role="text">
-        <span aria-hidden="true" class="duration__text--visual" role="presentation">
-          ${r}
-        </span>
-        <span class="duration__text--visually-hidden">${i}</span>
-      </p>
-    `;
-		}
-	};
-})();
-//#endregion
-export { f as t };