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

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

@@ -0,0 +1,277 @@
+var ka = (o) => {
+  throw TypeError(o);
+};
+var ya = (o, n, d) => n.has(o) || ka("Cannot " + d);
+var b = (o, n, d) => (ya(o, n, "read from private field"), d ? d.call(o) : n.get(o)), c = (o, n, d) => n.has(o) ? ka("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(o) : n.set(o, d), t = (o, n, d, g) => (ya(o, n, "write to private field"), g ? g.call(o, d) : n.set(o, d), d);
+import { __runInitializers as s, __esDecorate as l } from "tslib";
+import { SbbLanguageController as Ca } from "@sbb-esta/lyne-elements/core/controllers.js";
+import { forceType as h } from "@sbb-esta/lyne-elements/core/decorators.js";
+import { boxSizingStyles as Sa } from "@sbb-esta/lyne-elements/core/styles.js";
+import { css as Ba, LitElement as za, nothing as T, html as u } from "lit";
+import { customElement as Ea, property as v } from "lit/decorators.js";
+import { classMap as wa } from "lit/directives/class-map.js";
+import { getI18nSeatReservation as _ } from "../common/translations.js";
+import "@sbb-esta/lyne-elements/screen-reader-only.js";
+import "../seat-reservation-navigation-services.js";
+const Ta = Ba`:host{display:inline-block;min-height:calc(44 * var(--sbb-seat-reservation-one-px-rem, .0625rem));--sbb-seat-reservation-navigation-travelclass-spacing: 10;--sbb-seat-reservation-navigation-btn-border-width-default: 1;--sbb-seat-reservation-navigation-btn-border-width: var( --sbb-seat-reservation-navigation-btn-border-width-default );--sbb-seat-reservation-navigation-btn-border-color: var(--sbb-color-granite);--sbb-seat-reservation-navigation-btn-border-color: light-dark( var(--sbb-color-granite), var(--sbb-color-graphite) );--sbb-seat-reservation-navigation-btn-background-color: var(--sbb-color-white);--sbb-seat-reservation-navigation-btn-background-color: light-dark( var(--sbb-color-white), var(--sbb-color-black) );--sbb-seat-reservation-navigation-btn-border-width-selected: 2;--sbb-seat-reservation-navigation-btn-background-color-selected: var(--sbb-color-milk);--sbb-seat-reservation-navigation-btn-background-color-selected: light-dark( var(--sbb-color-milk), var(--sbb-color-iron) );--sbb-seat-reservation-navigation-btn-border-color-selected: var(--sbb-color-black);--sbb-seat-reservation-navigation-btn-border-color-selected: light-dark( var(--sbb-color-black), var(--sbb-color-white) );--sbb-seat-reservation-navigation-btn-outline-width-focused: 1;--sbb-seat-reservation-navigation-btn-outline-color-focused: var(--sbb-color-black);--sbb-seat-reservation-navigation-btn-outline-color-focused: light-dark( var(--sbb-color-black), var(--sbb-color-white) );--sbb-seat-reservation-navigation-btn-outline-offset-focused: 4;--sbb-seat-reservation-navigation-btn-background-color-focused: var(--sbb-color-white);--sbb-seat-reservation-navigation-btn-background-color-focused: light-dark( var(--sbb-color-white), var(--sbb-color-black) );--sbb-seat-reservation-navigation-btn-border-width-focused: var( --sbb-seat-reservation-navigation-btn-border-width );--sbb-seat-reservation-navigation-btn-border-color-focused: var(--sbb-color-black);--sbb-seat-reservation-navigation-btn-border-color-focused: light-dark( var(--sbb-color-black), var(--sbb-color-white) );--sbb-seat-reservation-navigation-btn-border-width-hovered: 2;--sbb-seat-reservation-navigation-btn-background-color-hovered: var(--sbb-color-cloud);--sbb-seat-reservation-navigation-btn-background-color-hovered: light-dark( var(--sbb-color-cloud), var(--sbb-color-midnight) );--sbb-seat-reservation-navigation-btn-border-color-hovered: var(--sbb-color-black);--sbb-seat-reservation-navigation-btn-border-color-hovered: light-dark( var(--sbb-color-black), var(--sbb-color-white) );--sbb-seat-reservation-navigation-btn-background-color-disabled: var(--sbb-background-color-2);--sbb-seat-reservation-navigation-btn-border-color-disabled: var(--sbb-color-platinum);--sbb-seat-reservation-navigation-btn-border-color-disabled: light-dark( var(--sbb-color-platinum), var(--sbb-color-iron) )}.sbb-sr-navigation__item-coach{display:flex;flex-direction:column;gap:calc(8 * var(--sbb-seat-reservation-one-px-rem, .0625rem));width:calc(80 * var(--sbb-seat-reservation-one-px-rem, .0625rem));list-style-type:none}.sbb-sr-navigation__item-coach.first-coach .sbb-sr-navigation--first-class,.sbb-sr-navigation__item-coach.last-coach .sbb-sr-navigation--first-class{width:calc(100% - 18 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr-navigation__item-coach.first-coach .sbb-sr-navigation__ctrl-button:not(.sbb-seat-reservation-navigation-driver-area){border-radius:var(--sbb-border-radius-8x) var(--sbb-border-radius-2x) var(--sbb-border-radius-2x) var(--sbb-border-radius-8x)}.sbb-sr-navigation__item-coach.first-coach .sbb-sr-navigation__ctrl-button:not(.sbb-seat-reservation-navigation-driver-area):before{content:"";position:absolute;width:100%;height:100%;border:calc(var(--sbb-seat-reservation-navigation-btn-border-width) * var(--sbb-seat-reservation-one-px-rem, .0625rem)) solid var(--sbb-seat-reservation-navigation-btn-border-color);border-radius:var(--sbb-border-radius-8x) var(--sbb-border-radius-2x) var(--sbb-border-radius-2x) var(--sbb-border-radius-8x)}.sbb-sr-navigation__item-coach.first-coach .sbb-sr-navigation--first-class{margin-inline-start:calc(var(--sbb-seat-reservation-navigation-travelclass-spacing) * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr-navigation__item-coach.last-coach .sbb-sr-navigation__ctrl-button:not(.sbb-sr-navigation-driver-area){border-radius:var(--sbb-border-radius-2x) var(--sbb-border-radius-8x) var(--sbb-border-radius-8x) var(--sbb-border-radius-2x)}.sbb-sr-navigation__item-coach.last-coach .sbb-sr-navigation__ctrl-button:not(.sbb-sr-navigation-driver-area):before{content:"";position:absolute;width:100%;height:100%;border:calc(var(--sbb-seat-reservation-navigation-btn-border-width) * var(--sbb-seat-reservation-one-px-rem, .0625rem)) solid var(--sbb-seat-reservation-navigation-btn-border-color);border-radius:var(--sbb-border-radius-2x) var(--sbb-border-radius-8x) var(--sbb-border-radius-8x) var(--sbb-border-radius-2x)}.sbb-sr-navigation__item-coach.last-coach .sbb-sr-navigation__additional-information{padding-inline-end:calc(var(--sbb-seat-reservation-navigation-travelclass-spacing) * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr-navigation__item-coach.last-coach .sbb-sr-navigation--first-class{margin-inline-end:calc(var(--sbb-seat-reservation-navigation-travelclass-spacing) * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr-navigation__ctrl-button{appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;border-radius:0;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;display:flex;flex-direction:column;justify-content:center;height:calc(36 * var(--sbb-seat-reservation-one-px-rem, .0625rem));position:relative;background-color:var(--sbb-seat-reservation-navigation-btn-background-color);cursor:var(--sbb-cursor-pointer)}.sbb-sr-navigation__ctrl-button.sbb-sr-navigation-driver-area{border-radius:var(--sbb-border-radius-8x) var(--sbb-border-radius-8x) var(--sbb-border-radius-8x) var(--sbb-border-radius-8x)}.sbb-sr-navigation__ctrl-button.sbb-sr-navigation-driver-area:before{content:"";position:absolute;width:100%;height:100%;border:calc(var(--sbb-seat-reservation-navigation-btn-border-width) * var(--sbb-seat-reservation-one-px-rem, .0625rem)) solid var(--sbb-seat-reservation-navigation-btn-border-color);border-radius:var(--sbb-border-radius-8x) var(--sbb-border-radius-8x) var(--sbb-border-radius-8x) var(--sbb-border-radius-8x)}.sbb-sr-navigation__ctrl-button{border-radius:var(--sbb-border-radius-2x) var(--sbb-border-radius-2x) var(--sbb-border-radius-2x) var(--sbb-border-radius-2x)}.sbb-sr-navigation__ctrl-button:before{content:"";position:absolute;width:100%;height:100%;border:calc(var(--sbb-seat-reservation-navigation-btn-border-width) * var(--sbb-seat-reservation-one-px-rem, .0625rem)) solid var(--sbb-seat-reservation-navigation-btn-border-color);border-radius:var(--sbb-border-radius-2x) var(--sbb-border-radius-2x) var(--sbb-border-radius-2x) var(--sbb-border-radius-2x)}.sbb-sr-navigation__item-coach--focused .sbb-sr-navigation__ctrl-button{--sbb-seat-reservation-navigation-btn-background-color: var( --sbb-seat-reservation-navigation-btn-background-color-focused );--sbb-seat-reservation-navigation-btn-border-color: var( --sbb-seat-reservation-navigation-btn-border-color-focused );--sbb-seat-reservation-navigation-btn-border-width: var( --sbb-seat-reservation-navigation-btn-border-width-focused );outline:calc(var(--sbb-seat-reservation-navigation-btn-outline-width-focused) * var(--sbb-seat-reservation-one-px-rem, .0625rem)) solid var(--sbb-seat-reservation-navigation-btn-outline-color-focused);outline-offset:calc(var(--sbb-seat-reservation-navigation-btn-outline-offset-focused) * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr-navigation__item-coach--focused .sbb-sr-navigation__ctrl-button .sbb-sr-navigation__item-coach-travelclass{background-color:var(--sbb-color-metal);background-color:light-dark(var(--sbb-color-metal),var(--sbb-color-storm))}.sbb-sr-navigation__item-coach--focused .sbb-sr-navigation__ctrl-button .sbb-sr-navigation__item-coach-number{color:var(--sbb-color-anthracite);color:light-dark(var(--sbb-color-anthracite),var(--sbb-color-graphite))}.sbb-sr-navigation__item-coach--selected .sbb-sr-navigation__ctrl-button{--sbb-seat-reservation-navigation-btn-background-color: var( --sbb-seat-reservation-navigation-btn-background-color-selected );--sbb-seat-reservation-navigation-btn-border-color: var( --sbb-seat-reservation-navigation-btn-border-color-selected );--sbb-seat-reservation-navigation-btn-border-width: var( --sbb-seat-reservation-navigation-btn-border-width-selected )}.sbb-sr-navigation__item-coach--selected .sbb-sr-navigation__ctrl-button .sbb-sr-navigation__item-coach-travelclass{background-color:var(--sbb-color-black);background-color:light-dark(var(--sbb-color-black),var(--sbb-color-white))}.sbb-sr-navigation__item-coach--selected .sbb-sr-navigation__ctrl-button .sbb-sr-navigation__item-coach-number{color:var(--sbb-color-black);color:light-dark(var(--sbb-color-black),var(--sbb-color-white))}.sbb-sr-navigation__item-coach--selected.sbb-sr-navigation__item-coach--hovered .sbb-sr-navigation__ctrl-button{--sbb-seat-reservation-navigation-btn-background-color: var( --sbb-seat-reservation-navigation-btn-background-color-selected );--sbb-seat-reservation-navigation-btn-border-color: var( --sbb-seat-reservation-navigation-btn-border-color-selected );--sbb-seat-reservation-navigation-btn-border-width: var( --sbb-seat-reservation-navigation-btn-border-width-selected );background-color:var(--sbb-seat-reservation-navigation-btn-background-color-hovered)!important}.sbb-sr-navigation__item-coach--selected .sbb-sr-navigation__ctrl-button:focus-visible:not([disabled],:disabled){--sbb-seat-reservation-navigation-btn-background-color: var( --sbb-seat-reservation-navigation-btn-background-color-selected );--sbb-seat-reservation-navigation-btn-border-color: var( --sbb-seat-reservation-navigation-btn-border-color-selected );--sbb-seat-reservation-navigation-btn-border-width: var( --sbb-seat-reservation-navigation-btn-border-width-selected )}.sbb-sr-navigation__item-coach--hovered .sbb-sr-navigation__ctrl-button{--sbb-seat-reservation-navigation-btn-background-color: var( --sbb-seat-reservation-navigation-btn-background-color-hovered );--sbb-seat-reservation-navigation-btn-border-color: var( --sbb-seat-reservation-navigation-btn-border-color-hovered );--sbb-seat-reservation-navigation-btn-border-width: var( --sbb-seat-reservation-navigation-btn-border-width-hovered )}.sbb-sr-navigation__ctrl-button:hover:not([disabled],:disabled){--sbb-seat-reservation-navigation-btn-background-color: var( --sbb-seat-reservation-navigation-btn-background-color-hovered );--sbb-seat-reservation-navigation-btn-border-color: var( --sbb-seat-reservation-navigation-btn-border-color-hovered );--sbb-seat-reservation-navigation-btn-border-width: var( --sbb-seat-reservation-navigation-btn-border-width-hovered )}.sbb-sr-navigation__ctrl-button:hover:not([disabled],:disabled) .sbb-sr-navigation__item-coach-travelclass{background-color:var(--sbb-color-smoke)}.sbb-sr-navigation__ctrl-button:hover:not([disabled],:disabled) .sbb-sr-navigation__item-coach-number{color:var(--sbb-color-iron);color:light-dark(var(--sbb-color-iron),var(--sbb-color-silver))}.sbb-sr-navigation__ctrl-button:is([disabled],:disabled){--sbb-seat-reservation-navigation-btn-background-color: var( --sbb-seat-reservation-navigation-btn-background-color-disabled );--sbb-seat-reservation-navigation-btn-border-color: var( --sbb-seat-reservation-navigation-btn-border-color-disabled );cursor:unset;pointer-events:unset}.sbb-sr-navigation__ctrl-button:is([disabled],:disabled) .sbb-sr-navigation__item-coach-travelclass{background-color:var(--sbb-color-graphite);background-color:light-dark(var(--sbb-color-graphite),var(--sbb-color-granite))}.sbb-sr-navigation__ctrl-button:is([disabled],:disabled) .sbb-sr-navigation__item-coach-number{color:var(--sbb-color-graphite);color:light-dark(var(--sbb-color-graphite),var(--sbb-color-granite))}.sbb-sr-navigation__additional-information{display:flex;justify-content:space-between;align-items:center;flex:1;column-gap:calc(8 * var(--sbb-seat-reservation-one-px-rem, .0625rem));padding-inline:calc(16 * var(--sbb-seat-reservation-one-px-rem, .0625rem));font-family:var(--sbb-typo-font-family);font-weight:700;color:var(--sbb-color-granite);color:light-dark(var(--sbb-color-granite),var(--sbb-color-granite))}@media(forced-colors:active){.sbb-sr-navigation__additional-information{color:var(--sbb-color-milk)}}.sbb-sr-navigation__item-coach-number{color:var(--sbb-color-granite);color:light-dark(var(--sbb-color-granite),var(--sbb-color-graphite))}@media(forced-colors:active){.sbb-sr-navigation__item-coach-number{color:var(--sbb-color-granite);color:light-dark(var(--sbb-color-granite),var(--sbb-color-graphite))}}@media(forced-colors:active)and (forced-colors:active){.sbb-sr-navigation__item-coach-number{color:inherit}}.sbb-sr-navigation__item-coach-number .sbb-sr-navigation__item-coach-travelclass{background-color:var(--sbb-background-color-2-inverted)}.sbb-sr-navigation--first-class{width:calc(100% - 8 * var(--sbb-seat-reservation-one-px-rem, .0625rem));position:absolute;inset-block-start:calc(3 * var(--sbb-seat-reservation-one-px-rem, .0625rem));inset-inline-start:calc(4 * var(--sbb-seat-reservation-one-px-rem, .0625rem));border:calc(1 * var(--sbb-seat-reservation-one-px-rem, .0625rem)) solid transparent;border-radius:var(--sbb-border-radius-1x);margin:auto;background-color:var(--sbb-color-lemon)}.sbb-sr-navigation__item-coach-travelclass{display:flex;align-items:center;justify-content:center;min-height:calc(20 * var(--sbb-seat-reservation-one-px-rem, .0625rem));min-width:calc(20 * var(--sbb-seat-reservation-one-px-rem, .0625rem));border-radius:var(--sbb-border-radius-1x);text-align:center;background-color:var(--sbb-color-granite);background-color:light-dark(var(--sbb-color-granite),var(--sbb-color-graphite));color:var(--sbb-color-white);color:light-dark(var(--sbb-color-white),var(--sbb-color-black))}:host([vertical]) .sbb-sr-navigation__item-coach{flex-direction:row}:host([vertical]) .sbb-sr-navigation__item-coach .sbb-sr-navigation__ctrl-button{flex-direction:row-reverse;height:calc(80 * var(--sbb-seat-reservation-one-px-rem, .0625rem));min-width:calc(36 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}:host([vertical]) .sbb-sr-navigation__item-coach .sbb-sr-navigation__additional-information{flex-direction:column-reverse;padding-block:calc(16 * var(--sbb-seat-reservation-one-px-rem, .0625rem));padding-inline-start:unset;padding-inline-end:unset}:host([vertical]) .sbb-sr-navigation__item-coach .sbb-sr-navigation--first-class{height:calc(100% - 8 * var(--sbb-seat-reservation-one-px-rem, .0625rem));width:initial;inset-inline-end:calc(3 * var(--sbb-seat-reservation-one-px-rem, .0625rem));inset-block-start:calc(4 * var(--sbb-seat-reservation-one-px-rem, .0625rem));inset-inline-start:initial}:host([vertical]) .sbb-sr-navigation__item-coach.first-coach .sbb-sr-navigation--first-class,:host([vertical]) .sbb-sr-navigation__item-coach.last-coach .sbb-sr-navigation--first-class{height:calc(100% - 18 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}:host([vertical]) .sbb-sr-navigation__item-coach.first-coach:not(.last-coach) .sbb-sr-navigation__ctrl-button:not(.sbb-sr-navigation-driver-area){border-radius:var(--sbb-border-radius-8x) var(--sbb-border-radius-8x) var(--sbb-border-radius-2x) var(--sbb-border-radius-2x)}:host([vertical]) .sbb-sr-navigation__item-coach.first-coach:not(.last-coach) .sbb-sr-navigation__ctrl-button:not(.sbb-sr-navigation-driver-area):before{content:"";position:absolute;width:100%;height:100%;border:calc(var(--sbb-seat-reservation-navigation-btn-border-width) * var(--sbb-seat-reservation-one-px-rem, .0625rem)) solid var(--sbb-seat-reservation-navigation-btn-border-color);border-radius:var(--sbb-border-radius-8x) var(--sbb-border-radius-8x) var(--sbb-border-radius-2x) var(--sbb-border-radius-2x)}:host([vertical]) .sbb-sr-navigation__item-coach.first-coach:not(.last-coach) .sbb-sr-navigation--first-class{margin-block-start:calc(var(--sbb-seat-reservation-navigation-travelclass-spacing) * var(--sbb-seat-reservation-one-px-rem, .0625rem));margin-inline-start:initial}:host([vertical]) .sbb-sr-navigation__item-coach.last-coach:not(.first-coach) .sbb-sr-navigation__ctrl-button:not(.sbb-sr-navigation-driver-area){border-radius:var(--sbb-border-radius-2x) var(--sbb-border-radius-2x) var(--sbb-border-radius-8x) var(--sbb-border-radius-8x)}:host([vertical]) .sbb-sr-navigation__item-coach.last-coach:not(.first-coach) .sbb-sr-navigation__ctrl-button:not(.sbb-sr-navigation-driver-area):before{content:"";position:absolute;width:100%;height:100%;border:calc(var(--sbb-seat-reservation-navigation-btn-border-width) * var(--sbb-seat-reservation-one-px-rem, .0625rem)) solid var(--sbb-seat-reservation-navigation-btn-border-color);border-radius:var(--sbb-border-radius-2x) var(--sbb-border-radius-2x) var(--sbb-border-radius-8x) var(--sbb-border-radius-8x)}:host([vertical]) .sbb-sr-navigation__item-coach.last-coach:not(.first-coach) .sbb-sr-navigation--first-class{margin-block-end:calc(var(--sbb-seat-reservation-navigation-travelclass-spacing) * var(--sbb-seat-reservation-one-px-rem, .0625rem));margin-inline-end:initial}:host([vertical]) .sbb-sr-navigation__item-coach .sbb-sr-navigation-driver-area{height:calc(80 * var(--sbb-seat-reservation-one-px-rem, .0625rem));min-width:calc(36 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}`;
+let Ka = (() => {
+  var m, p, f, x, k, y, w, I, A, C, S, B, z, E, i;
+  let o = [Ea("sbb-seat-reservation-navigation-coach")], n, d = [], g, $ = za, N, F = [], D = [], O, L = [], P = [], R, V = [], j = [], H, U = [], G = [], K, q = [], M = [], Y, J = [], Q = [], W, X = [], Z = [], aa, ra = [], ea = [], ta, sa = [], ia = [], oa, na = [], ba = [], ca, la = [], va = [], da, ha = [], ga = [], ua, _a = [], ma = [], pa, fa = [], xa = [];
+  return i = class extends $ {
+    constructor() {
+      super(...arguments);
+      c(this, m);
+      c(this, p);
+      c(this, f);
+      c(this, x);
+      c(this, k);
+      c(this, y);
+      c(this, w);
+      c(this, I);
+      c(this, A);
+      c(this, C);
+      c(this, S);
+      c(this, B);
+      c(this, z);
+      c(this, E);
+      t(this, m, s(this, F, "")), t(this, p, (s(this, D), s(this, L, []))), t(this, f, (s(this, P), s(this, V, !1))), t(this, x, (s(this, j), s(this, U, !1))), t(this, k, (s(this, G), s(this, q, !1))), t(this, y, (s(this, M), s(this, J, !0))), t(this, w, (s(this, Q), s(this, X, 0))), t(this, I, (s(this, Z), s(this, ra, { seats: 0, bicycles: 0 }))), t(this, A, (s(this, ea), s(this, sa, ["ANY_CLASS"]))), t(this, C, (s(this, ia), s(this, na, !1))), t(this, S, (s(this, ba), s(this, la, !1))), t(this, B, (s(this, va), s(this, ha, !1))), t(this, z, (s(this, ga), s(this, _a, !1))), t(this, E, (s(this, ma), s(this, fa, !1))), this._language = (s(this, xa), new Ca(this));
+    }
+    /** Coach ID, which is used to identify the coach in the navigation */
+    get coachId() {
+      return b(this, m);
+    }
+    set coachId(r) {
+      t(this, m, r);
+    }
+    /** Coach service property ids, which are used to display the services in the navigation */
+    get propertyIds() {
+      return b(this, p);
+    }
+    set propertyIds(r) {
+      t(this, p, r);
+    }
+    /** Select coach property */
+    get selected() {
+      return b(this, f);
+    }
+    set selected(r) {
+      t(this, f, r);
+    }
+    /** Focus coach property */
+    get focused() {
+      return b(this, x);
+    }
+    set focused(r) {
+      t(this, x, r);
+    }
+    /** Hover coach property */
+    get hovered() {
+      return b(this, k);
+    }
+    set hovered(r) {
+      t(this, k, r);
+    }
+    /** Native focus for this navigation coach is also set when the focused property is changed */
+    get nativeFocusActive() {
+      return b(this, y);
+    }
+    set nativeFocusActive(r) {
+      t(this, y, r);
+    }
+    get index() {
+      return b(this, w);
+    }
+    set index(r) {
+      t(this, w, r);
+    }
+    /** Representation of places available for selecting, counting seat places and bicycle places separately */
+    get freePlacesByType() {
+      return b(this, I);
+    }
+    set freePlacesByType(r) {
+      t(this, I, r);
+    }
+    /** Travel class of the coach */
+    get travelClass() {
+      return b(this, A);
+    }
+    set travelClass(r) {
+      t(this, A, r);
+    }
+    /** If the coach is a driver/restricted area */
+    get driverArea() {
+      return b(this, C);
+    }
+    set driverArea(r) {
+      t(this, C, r);
+    }
+    /** If the coach is the first in the navigation */
+    get first() {
+      return b(this, S);
+    }
+    set first(r) {
+      t(this, S, r);
+    }
+    /** If the coach is the last in the navigation */
+    get last() {
+      return b(this, B);
+    }
+    set last(r) {
+      t(this, B, r);
+    }
+    /** Disable the coach navigation */
+    get disable() {
+      return b(this, z);
+    }
+    set disable(r) {
+      t(this, z, r);
+    }
+    /** If the coach navigation should be displayed vertically */
+    get vertical() {
+      return b(this, E);
+    }
+    set vertical(r) {
+      t(this, E, r);
+    }
+    willUpdate(r) {
+      if (super.willUpdate(r), r.has("selected")) {
+        const a = this.shadowRoot?.querySelector(".sbb-sr-navigation__ctrl-button");
+        this.selected && a && (this.nativeFocusActive && a.focus(), this.dispatchEvent(new Event("focuscoach", { bubbles: !0, composed: !0 })));
+      }
+      if (r.has("focused") && this.focused) {
+        const a = this.shadowRoot?.querySelector(".sbb-sr-navigation__ctrl-button");
+        a && this.nativeFocusActive && a.focus();
+      }
+    }
+    /**
+     * Render a list of service icons provided by a caller
+     *
+     * @protected
+     */
+    render() {
+      return u`
+      <div
+        class="${wa({
+        "sbb-sr-navigation__item-coach": !0,
+        "last-coach": this.last,
+        "first-coach": this.first,
+        "sbb-sr-navigation__item-coach--selected": this.selected,
+        "sbb-sr-navigation__item-coach--focused": this.focused,
+        "sbb-sr-navigation__item-coach--hovered": this.hovered
+      })}"
+      >
+        ${this._getNavigationButton()}
+        ${this.propertyIds?.length ? u`<sbb-seat-reservation-navigation-services
+              ?vertical="${this.vertical}"
+              .propertyIds="${this.propertyIds}"
+            ></sbb-seat-reservation-navigation-services>` : T}
+      </div>
+    `;
+    }
+    _getNavigationButton() {
+      const r = this._getCoachServiceClassNumber(), a = this._getTitleDescriptionNavCoachButton(r), e = this._getAriaDescriptionCoachServices();
+      return u` <button
+        @click=${() => this._selectNavCoach(this.index)}
+        class="${wa({
+        "sbb-sr-navigation__ctrl-button": !0,
+        "sbb-sr-navigation-driver-area": this.driverArea
+      })}"
+        ?disabled="${this.disable}"
+        title="${a}"
+        type="button"
+        aria-describedby="nav-coach-service-descriptions-${this.index}"
+      >
+        ${this._getBtnInformation(r)}
+      </button>
+      <sbb-screen-reader-only id="nav-coach-service-descriptions-${this.index}"
+        >${e}</sbb-screen-reader-only
+      >`;
+    }
+    _getBtnInformation(r) {
+      return this.driverArea ? null : u`
+      ${r === 1 ? u`<span class="sbb-sr-navigation--first-class"></span>` : T}
+      ${this.travelClass?.length > 0 || this.coachId ? u`<div class="sbb-sr-navigation__additional-information">
+            ${this.coachId ? u`<div class="sbb-sr-navigation__item-coach-number" aria-hidden="true">
+                  ${this.coachId}
+                </div>` : T}
+            <div
+              ${r ?? T}
+              class="sbb-sr-navigation__item-coach-travelclass"
+              aria-hidden="true"
+            >
+              ${r}
+            </div>
+          </div>` : T}
+    `;
+    }
+    _getTitleDescriptionNavCoachButton(r) {
+      if (this.driverArea)
+        return _("NAVIGATE_COACH_BLOCKED", this._language.current, [
+          this.coachId
+        ]);
+      let a = _("NAVIGATE_TO_COACH", this._language.current, [this.coachId]);
+      if (r) {
+        const Ia = _(r === 1 ? "SERVICE_CLASS_FIRST" : "SERVICE_CLASS_SECOND", this._language.current), Aa = _("NAVIGATE_TO_COACH_SERVICE_CLASS_SUB", this._language.current, [Ia]);
+        a = a.concat(Aa);
+      }
+      const e = _("COACH_AVAILABLE_NUMBER_OF_PLACES", this._language.current, [this.freePlacesByType.seats, this.freePlacesByType.bicycles]);
+      return a = a.concat(". ").concat(e), a;
+    }
+    _getAriaDescriptionCoachServices() {
+      let r = null;
+      return this.propertyIds.length && (r = _("COACH_AVAILABLE_SERVICES", this._language.current) + ": ", r += this.propertyIds.map((a) => _(a, this._language.current)).join()), r;
+    }
+    /**
+     * emits the index of the coach array for the main navigation.
+     * @param coachIndex
+     * @private
+     */
+    _selectNavCoach(r) {
+      this.dispatchEvent(new CustomEvent("selectcoach", {
+        bubbles: !0,
+        composed: !0,
+        detail: r
+      }));
+    }
+    _getCoachServiceClassNumber() {
+      return this.travelClass?.includes("FIRST") ? 1 : this.travelClass?.includes("SECOND") ? 2 : null;
+    }
+  }, m = new WeakMap(), p = new WeakMap(), f = new WeakMap(), x = new WeakMap(), k = new WeakMap(), y = new WeakMap(), w = new WeakMap(), I = new WeakMap(), A = new WeakMap(), C = new WeakMap(), S = new WeakMap(), B = new WeakMap(), z = new WeakMap(), E = new WeakMap(), g = i, (() => {
+    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create($[Symbol.metadata] ?? null) : void 0;
+    N = [h(), v({ attribute: "coach-id" })], O = [v({ attribute: "property-ids", type: Array })], R = [h(), v({ type: Boolean })], H = [h(), v({ type: Boolean })], K = [h(), v({ type: Boolean })], Y = [h(), v({ type: Boolean })], W = [h(), v({ type: Number })], aa = [v({ attribute: "free-places-by-type", type: Object })], ta = [v({ attribute: "travel-class", type: Array })], oa = [h(), v({ attribute: "driver-area", type: Boolean })], ca = [h(), v({ type: Boolean })], da = [h(), v({ type: Boolean })], ua = [h(), v({ attribute: "disable", type: Boolean })], pa = [h(), v({ type: Boolean, reflect: !0, useDefault: !0 })], l(i, null, N, { kind: "accessor", name: "coachId", static: !1, private: !1, access: { has: (a) => "coachId" in a, get: (a) => a.coachId, set: (a, e) => {
+      a.coachId = e;
+    } }, metadata: r }, F, D), l(i, null, O, { kind: "accessor", name: "propertyIds", static: !1, private: !1, access: { has: (a) => "propertyIds" in a, get: (a) => a.propertyIds, set: (a, e) => {
+      a.propertyIds = e;
+    } }, metadata: r }, L, P), l(i, null, R, { kind: "accessor", name: "selected", static: !1, private: !1, access: { has: (a) => "selected" in a, get: (a) => a.selected, set: (a, e) => {
+      a.selected = e;
+    } }, metadata: r }, V, j), l(i, null, H, { kind: "accessor", name: "focused", static: !1, private: !1, access: { has: (a) => "focused" in a, get: (a) => a.focused, set: (a, e) => {
+      a.focused = e;
+    } }, metadata: r }, U, G), l(i, null, K, { kind: "accessor", name: "hovered", static: !1, private: !1, access: { has: (a) => "hovered" in a, get: (a) => a.hovered, set: (a, e) => {
+      a.hovered = e;
+    } }, metadata: r }, q, M), l(i, null, Y, { kind: "accessor", name: "nativeFocusActive", static: !1, private: !1, access: { has: (a) => "nativeFocusActive" in a, get: (a) => a.nativeFocusActive, set: (a, e) => {
+      a.nativeFocusActive = e;
+    } }, metadata: r }, J, Q), l(i, null, W, { kind: "accessor", name: "index", static: !1, private: !1, access: { has: (a) => "index" in a, get: (a) => a.index, set: (a, e) => {
+      a.index = e;
+    } }, metadata: r }, X, Z), l(i, null, aa, { kind: "accessor", name: "freePlacesByType", static: !1, private: !1, access: { has: (a) => "freePlacesByType" in a, get: (a) => a.freePlacesByType, set: (a, e) => {
+      a.freePlacesByType = e;
+    } }, metadata: r }, ra, ea), l(i, null, ta, { kind: "accessor", name: "travelClass", static: !1, private: !1, access: { has: (a) => "travelClass" in a, get: (a) => a.travelClass, set: (a, e) => {
+      a.travelClass = e;
+    } }, metadata: r }, sa, ia), l(i, null, oa, { kind: "accessor", name: "driverArea", static: !1, private: !1, access: { has: (a) => "driverArea" in a, get: (a) => a.driverArea, set: (a, e) => {
+      a.driverArea = e;
+    } }, metadata: r }, na, ba), l(i, null, ca, { kind: "accessor", name: "first", static: !1, private: !1, access: { has: (a) => "first" in a, get: (a) => a.first, set: (a, e) => {
+      a.first = e;
+    } }, metadata: r }, la, va), l(i, null, da, { kind: "accessor", name: "last", static: !1, private: !1, access: { has: (a) => "last" in a, get: (a) => a.last, set: (a, e) => {
+      a.last = e;
+    } }, metadata: r }, ha, ga), l(i, null, ua, { kind: "accessor", name: "disable", static: !1, private: !1, access: { has: (a) => "disable" in a, get: (a) => a.disable, set: (a, e) => {
+      a.disable = e;
+    } }, metadata: r }, _a, ma), l(i, null, pa, { kind: "accessor", name: "vertical", static: !1, private: !1, access: { has: (a) => "vertical" in a, get: (a) => a.vertical, set: (a, e) => {
+      a.vertical = e;
+    } }, metadata: r }, fa, xa), l(null, n = { value: g }, o, { kind: "class", name: g.name, metadata: r }, null, d), g = n.value, r && Object.defineProperty(g, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
+  })(), i.styles = [Sa, Ta], i.events = {
+    selectcoach: "selectcoach",
+    focuscoach: "focuscoach"
+  }, s(g, d), g;
+})();
+export {
+  Ka as SbbSeatReservationNavigationCoachElement
+};

package/seat-reservation/seat-reservation-navigation-coach.js

@@ -0,0 +1,4 @@
+import { SbbSeatReservationNavigationCoachElement as o } from "./seat-reservation-navigation-coach/seat-reservation-navigation-coach.component.js";
+export {
+  o as SbbSeatReservationNavigationCoachElement
+};

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

@@ -0,0 +1,73 @@
+var E = (e) => {
+  throw TypeError(e);
+};
+var x = (e, a, s) => a.has(e) || E("Cannot " + s);
+var b = (e, a, s) => (x(e, a, "read from private field"), s ? s.call(e) : a.get(e)), h = (e, a, s) => a.has(e) ? E("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(e) : a.set(e, s), p = (e, a, s, i) => (x(e, a, "write to private field"), i ? i.call(e, s) : a.set(e, s), s);
+import { __runInitializers as m, __esDecorate as u } from "tslib";
+import { SbbLanguageController as z } from "@sbb-esta/lyne-elements/core/controllers.js";
+import { forceType as D } from "@sbb-esta/lyne-elements/core/decorators.js";
+import { boxSizingStyles as A } from "@sbb-esta/lyne-elements/core/styles.js";
+import { css as B, LitElement as N, nothing as L, html as C } from "lit";
+import { customElement as $, property as w } from "lit/decorators.js";
+import { getI18nSeatReservation as d } from "../common.js";
+import "@sbb-esta/lyne-elements/screen-reader-only.js";
+import "../seat-reservation-graphic.js";
+const j = B`.sbb-sr-navigation__signs{display:flex;flex-direction:row;justify-content:center;column-gap:var(--sbb-spacing-fixed-2x);overflow:hidden;line-height:normal;color:var(--sbb-color-granite);color:light-dark(var(--sbb-color-granite),var(--sbb-color-graphite))}.sbb-sr-navigation__signs:has(:nth-child(n+3 of.auto-width)):has([name^=SILENCE],[name^=BUSINESS]){column-gap:calc(6 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr-navigation__signs:has(:nth-child(n+3 of.auto-width)):has([name^=SILENCE],[name^=BUSINESS]):has([name^=BICYCLE]){column-gap:calc(3 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}:host([vertical]) .sbb-sr-navigation__signs{flex-direction:column;height:100%}`;
+let G = (() => {
+  var l, c, n;
+  let e = [$("sbb-seat-reservation-navigation-services")], a, s = [], i, g = N, v, _ = [], y = [], f, S = [], I = [];
+  return n = class extends g {
+    constructor() {
+      super(...arguments);
+      h(this, l);
+      h(this, c);
+      p(this, l, m(this, _, [])), p(this, c, (m(this, y), m(this, S, !1))), this._language = (m(this, I), new z(this));
+    }
+    /** Coach service property ids, which are used to display the services in the navigation */
+    get propertyIds() {
+      return b(this, l);
+    }
+    set propertyIds(r) {
+      p(this, l, r);
+    }
+    /** If true, the service icons are displayed vertically */
+    get vertical() {
+      return b(this, c);
+    }
+    set vertical(r) {
+      p(this, c, r);
+    }
+    render() {
+      const r = this.propertyIds?.length ? this._getServiceLabelDescription() : null;
+      return C` <div class="sbb-sr-navigation__signs">
+      <sbb-screen-reader-only ${r || L}
+        >${r}</sbb-screen-reader-only
+      >
+      ${this.propertyIds?.map((t) => C`
+          <sbb-seat-reservation-graphic
+            class="auto-width"
+            name=${t ?? L}
+            title=${d(t, this._language.current)}
+            aria-hidden="true"
+          ></sbb-seat-reservation-graphic>
+        `)}
+    </div>`;
+    }
+    //Generate the translated service label from the available properties
+    _getServiceLabelDescription() {
+      let r = null;
+      const t = this.propertyIds.map((o) => d(o, this._language.current)).filter((o) => !!o).join(", ");
+      return t && (r = d("COACH_AVAILABLE_SERVICES", this._language.current).concat(":").concat(t)), r;
+    }
+  }, l = new WeakMap(), c = new WeakMap(), i = n, (() => {
+    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(g[Symbol.metadata] ?? null) : void 0;
+    v = [w({ attribute: "property-ids", type: Array })], f = [D(), w({ type: Boolean, reflect: !0, useDefault: !0 })], u(n, null, v, { kind: "accessor", name: "propertyIds", static: !1, private: !1, access: { has: (t) => "propertyIds" in t, get: (t) => t.propertyIds, set: (t, o) => {
+      t.propertyIds = o;
+    } }, metadata: r }, _, y), u(n, null, f, { kind: "accessor", name: "vertical", static: !1, private: !1, access: { has: (t) => "vertical" in t, get: (t) => t.vertical, set: (t, o) => {
+      t.vertical = o;
+    } }, metadata: r }, S, I), u(null, a = { value: i }, e, { kind: "class", name: i.name, metadata: r }, null, s), i = a.value, r && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
+  })(), n.styles = [A, j], m(i, s), i;
+})();
+export {
+  G as SbbSeatReservationNavigationServicesElement
+};

package/seat-reservation/seat-reservation-navigation-services.js

@@ -0,0 +1,4 @@
+import { SbbSeatReservationNavigationServicesElement as a } from "./seat-reservation-navigation-services/seat-reservation-navigation-services.component.js";
+export {
+  a as SbbSeatReservationNavigationServicesElement
+};

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

@@ -0,0 +1,167 @@
+var W = (s) => {
+  throw TypeError(s);
+};
+var X = (s, o, b) => o.has(s) || W("Cannot " + b);
+var n = (s, o, b) => (X(s, o, "read from private field"), b ? b.call(s) : o.get(s)), p = (s, o, b) => o.has(s) ? W("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(s) : o.set(s, b), a = (s, o, b, i) => (X(s, o, "write to private field"), i ? i.call(s, b) : o.set(s, b), b);
+import { __esDecorate as d, __runInitializers as c } from "tslib";
+import { SbbButtonBaseElement as ae } from "@sbb-esta/lyne-elements/core/base-elements.js";
+import { SbbLanguageController as ce } from "@sbb-esta/lyne-elements/core/controllers.js";
+import { forceType as h } from "@sbb-esta/lyne-elements/core/decorators.js";
+import { boxSizingStyles as le } from "@sbb-esta/lyne-elements/core/styles.js";
+import { css as oe, nothing as be, html as ie } from "lit";
+import { customElement as ne, property as v } from "lit/decorators.js";
+import { styleMap as pe } from "lit/directives/style-map.js";
+import { getI18nSeatReservation as E } from "../common.js";
+import "../seat-reservation-graphic.js";
+const de = oe`:host{--sbb-seat-reservation-place-control-text-scale-value: 1;--sbb-seat-reservation-place-control-width: 16;--sbb-seat-reservation-place-control-height: 16;--sbb-seat-reservation-place-control-top: 0;--sbb-seat-reservation-place-control-left: 0;--sbb-seat-reservation-place-control-rotation: 0;--sbb-seat-reservation-place-control-text-rotation: 0;--sbb-seat-reservation-place-control-text-size: calc( var(--sbb-seat-reservation-place-control-text-scale-value, 1) * .5 );--sbb-seat-reservation-place-control-default-text: var(--sbb-color-black);--sbb-seat-reservation-place-control-default-text: light-dark( var(--sbb-color-black), var(--sbb-color-white) );--sbb-seat-reservation-place-control-hover-text: var(--sbb-color-iron);--sbb-seat-reservation-place-control-hover-text: light-dark( var(--sbb-color-iron), var(--sbb-color-silver) );--sbb-seat-reservation-place-control-focus-text: var(--sbb-color-anthracite);--sbb-seat-reservation-place-control-focus-text: light-dark( var(--sbb-color-anthracite), var(--sbb-color-graphite) );--sbb-seat-reservation-place-control-allocated-text: var(--sbb-color-smoke);--sbb-seat-reservation-place-control-allocated-text: light-dark( var(--sbb-color-smoke), var(--sbb-color-metal) );--sbb-seat-reservation-place-control-free-background-default: var(--sbb-background-color-2);--sbb-seat-reservation-place-control-free-background-hover: var(--sbb-color-cloud);--sbb-seat-reservation-place-control-free-background-hover: light-dark( var(--sbb-color-cloud), var(--sbb-color-midnight) );--sbb-seat-reservation-place-control-free-background-focus: var(--sbb-color-silver);--sbb-seat-reservation-place-control-free-background-focus: light-dark( var(--sbb-color-silver), var(--sbb-color-black) );--sbb-seat-reservation-place-control-free-backrest-background-default: var(--sbb-color-black);--sbb-seat-reservation-place-control-free-backrest-background-default: light-dark( var(--sbb-color-black), var(--sbb-color-white) );--sbb-seat-reservation-place-control-free-backrest-background-hover: var(--sbb-color-black);--sbb-seat-reservation-place-control-free-backrest-background-hover: light-dark( var(--sbb-color-black), var(--sbb-color-white) );--sbb-seat-reservation-place-control-free-backrest-background-focus: var(--sbb-color-black);--sbb-seat-reservation-place-control-free-backrest-background-focus: light-dark( var(--sbb-color-black), var(--sbb-color-white) );--sbb-seat-reservation-place-control-selected-background-default: var(--sbb-color-primary);--sbb-seat-reservation-place-control-selected-background-hover: var(--sbb-color-primary125);--sbb-seat-reservation-place-control-selected-background-focus: var(--sbb-color-primary150);--sbb-seat-reservation-place-control-selected-backrest-background-default: var( --sbb-color-primary150 );--sbb-seat-reservation-place-control-selected-backrest-background-hover: #7d000f;--sbb-seat-reservation-place-control-selected-backrest-background-focus: #5a000b;--sbb-seat-reservation-place-control-allocated-background-default: var(--sbb-color-milk);--sbb-seat-reservation-place-control-allocated-background-default: light-dark( var(--sbb-color-milk), var(--sbb-color-midnight) );width:calc(var(--sbb-seat-reservation-place-control-width) * var(--sbb-seat-reservation-one-px-rem, .0625rem));height:calc(var(--sbb-seat-reservation-place-control-height) * var(--sbb-seat-reservation-one-px-rem, .0625rem));position:absolute;inset-block-start:calc(var(--sbb-seat-reservation-place-control-top) * var(--sbb-seat-reservation-one-px-rem, .0625rem));inset-inline-start:calc(var(--sbb-seat-reservation-place-control-left) * var(--sbb-seat-reservation-one-px-rem, .0625rem));font-weight:300;cursor:var(--sbb-cursor-pointer)}:host(:hover) .sbb-sr-place-ctrl--state-free:not(.sbb-reservation-place-control--disabled) ::part(svg-place){fill:var(--sbb-seat-reservation-place-control-free-background-hover)}:host(:hover) .sbb-sr-place-ctrl--state-free:not(.sbb-reservation-place-control--disabled) ::part(svg-backrest){fill:var(--sbb-seat-reservation-place-control-free-backrest-background-hover)}:host(:hover) .sbb-sr-place-ctrl--state-free:not(.sbb-reservation-place-control--disabled) .sbb-sr-place-ctrl__text{background-color:var(--sbb-seat-reservation-place-control-free-background-hover);color:var(--sbb-seat-reservation-place-control-free-text)}:host(:hover) .sbb-sr-place-ctrl--state-selected:not(.sbb-reservation-place-control--disabled) ::part(svg-place){fill:var(--sbb-seat-reservation-place-control-selected-background-hover)}:host(:hover) .sbb-sr-place-ctrl--state-selected:not(.sbb-reservation-place-control--disabled) ::part(svg-backrest){fill:var(--sbb-seat-reservation-place-control-selected-backrest-background-hover)}:host(:hover) .sbb-sr-place-ctrl--state-selected:not(.sbb-reservation-place-control--disabled) .sbb-sr-place-ctrl__text{background-color:var(--sbb-seat-reservation-place-control-selected-background-hover);color:var(--sbb-seat-reservation-place-control-selected-text)}:host(:focus-visible) .sbb-sr-place-ctrl--state-free:not(.sbb-reservation-place-control--disabled) ::part(svg-place){fill:var(--sbb-seat-reservation-place-control-free-background-focus)}:host(:focus-visible) .sbb-sr-place-ctrl--state-free:not(.sbb-reservation-place-control--disabled) ::part(svg-backrest){fill:var(--sbb-seat-reservation-place-control-free-backrest-background-focus)}:host(:focus-visible) .sbb-sr-place-ctrl--state-free:not(.sbb-reservation-place-control--disabled) .sbb-sr-place-ctrl__text{background-color:var(--sbb-seat-reservation-place-control-free-background-focus);color:var(--sbb-seat-reservation-place-control-free-text)}:host(:active) .sbb-sr-place-ctrl--state-selected:not(.sbb-reservation-place-control--disabled) ::part(svg-place){fill:var(--sbb-seat-reservation-place-control-selected-background-focus)}:host(:active) .sbb-sr-place-ctrl--state-selected:not(.sbb-reservation-place-control--disabled) ::part(svg-backrest){fill:var(--sbb-seat-reservation-place-control-selected-backrest-background-focus)}:host(:active) .sbb-sr-place-ctrl--state-selected:not(.sbb-reservation-place-control--disabled) .sbb-sr-place-ctrl__text{background-color:var(--sbb-seat-reservation-place-control-selected-background-focus);color:var(--sbb-seat-reservation-place-control-selected-text)}: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(svg-place){rotate:180deg}.sbb-sr-place-ctrl{width:max-content;position:relative;font-size:calc(var(--sbb-seat-reservation-place-control-text-size) * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr-place-ctrl--state-free ::part(svg-place){fill:var(--sbb-seat-reservation-place-control-free-background-default)}.sbb-sr-place-ctrl--state-free ::part(svg-backrest){fill:var(--sbb-seat-reservation-place-control-free-backrest-background-default)}.sbb-sr-place-ctrl--state-free .sbb-sr-place-ctrl__text{background-color:var(--sbb-seat-reservation-place-control-free-background-default);color:var(--sbb-seat-reservation-place-control-free-text)}.sbb-sr-place-ctrl--state-selected ::part(svg-place){fill:var(--sbb-seat-reservation-place-control-selected-background-default)}.sbb-sr-place-ctrl--state-selected ::part(svg-backrest){fill:var(--sbb-seat-reservation-place-control-selected-backrest-background-default)}.sbb-sr-place-ctrl--state-selected .sbb-sr-place-ctrl__text{background-color:var(--sbb-seat-reservation-place-control-selected-background-default);color:var(--sbb-seat-reservation-place-control-selected-text)}.sbb-sr-place-ctrl--state-allocated ::part(svg-place),.sbb-sr-place-ctrl--state-restricted ::part(svg-place){fill:var(--sbb-seat-reservation-place-control-allocated-background-default)}.sbb-sr-place-ctrl--state-allocated ::part(svg-backrest),.sbb-sr-place-ctrl--state-restricted ::part(svg-backrest){fill:var(--sbb-seat-reservation-place-control-allocated-backrest-background-default)}.sbb-sr-place-ctrl--state-allocated .sbb-sr-place-ctrl__text,.sbb-sr-place-ctrl--state-restricted .sbb-sr-place-ctrl__text{background-color:var(--sbb-seat-reservation-place-control-allocated-background-default);color:var(--sbb-seat-reservation-place-control-allocated-text)}.sbb-sr-place-ctrl--state-allocated,.sbb-sr-place-ctrl--state-restricted{cursor:not-allowed}.sbb-sr-place-ctrl__text{overflow:hidden;display:none;position:absolute;inset-block-start:50%;translate:-50% -50%;rotate:calc(var(--sbb-seat-reservation-place-control-text-rotation) * 1deg);font-family:var(--sbb-typo-font-family);font-size:.75em;line-height:initial}.sbb-sr-place-ctrl--state-free .sbb-sr-place-ctrl__text,.sbb-sr-place-ctrl--state-allocated .sbb-sr-place-ctrl__text,.sbb-sr-place-ctrl--state-restricted.sbb-sr-place-ctrl--type-bicycle .sbb-sr-place-ctrl__text{display:block}.sbb-sr-place-ctrl--type-bicycle .sbb-sr-place-ctrl__text{inset-block-start:65%;inset-inline-start:50%;transform-origin:center 16%;font-size:.6875em}.sbb-sr-place-ctrl--orientation-0.sbb-sr-place-ctrl--type-seat .sbb-sr-place-ctrl__text{inset-inline-start:45%}.sbb-sr-place-ctrl--orientation-90.sbb-sr-place-ctrl--type-seat .sbb-sr-place-ctrl__text{inset-block-start:46%;inset-inline-start:50%}.sbb-sr-place-ctrl--orientation-180.sbb-sr-place-ctrl--type-seat .sbb-sr-place-ctrl__text{inset-inline-start:55%}.sbb-sr-place-ctrl--orientation-270.sbb-sr-place-ctrl--type-seat .sbb-sr-place-ctrl__text{inset-block-start:52%;inset-inline-start:52%}:host(:dir(rtl)) .sbb-sr-place-ctrl--orientation-0 .sbb-sr-place-ctrl__text{inset-inline-start:3%}:host(:dir(rtl)) .sbb-sr-place-ctrl--orientation-90 .sbb-sr-place-ctrl__text,:host(:dir(rtl)) .sbb-sr-place-ctrl--orientation-180 .sbb-sr-place-ctrl__text{inset-inline-start:10%}:host(:dir(rtl)) .sbb-sr-place-ctrl--orientation-270 .sbb-sr-place-ctrl__text{inset-inline-start:5%}:host(:dir(rtl)) .sbb-sr-place-ctrl--type-bicycle .sbb-sr-place-ctrl__text{inset-inline-start:-10%}`;
+let Ce = (() => {
+  var u, k, f, g, _, x, y, m, l;
+  let s = [ne("sbb-seat-reservation-place-control")], o, b = [], i, C = ae, z, S = [], T = [], w, P = [], R = [], L, $ = [], D = [], A, O = [], N = [], F, V = [], j = [], B, U = [], K = [], M, Y = [], q = [], G, H = [], J = [];
+  return l = class extends C {
+    constructor() {
+      super();
+      p(this, u);
+      p(this, k);
+      p(this, f);
+      p(this, g);
+      p(this, _);
+      p(this, x);
+      p(this, y);
+      p(this, m);
+      a(this, u, c(this, S, "SEAT")), a(this, k, (c(this, T), c(this, P, "FREE"))), a(this, f, (c(this, R), c(this, $, []))), a(this, g, (c(this, D), c(this, O, ""))), a(this, _, (c(this, N), c(this, V, null))), a(this, x, (c(this, j), c(this, U, null))), a(this, y, (c(this, K), c(this, Y, !1))), a(this, m, (c(this, q), c(this, H, "unfocus"))), this._language = (c(this, J), new ce(this)), this.addEventListener("click", () => this._selectPlace());
+    }
+    /** placeType of the place, e.g. 'SEAT', 'BICYCLE' */
+    get placeType() {
+      return n(this, u);
+    }
+    set placeType(t) {
+      a(this, u, t);
+    }
+    /** state of the place, e.g. 'FREE', 'SELECTED', 'BLOCKED' */
+    get state() {
+      return n(this, k);
+    }
+    set state(t) {
+      a(this, k, t);
+    }
+    /** property ids of the place, to display more info about the place */
+    get propertyIds() {
+      return n(this, f);
+    }
+    set propertyIds(t) {
+      a(this, f, t);
+    }
+    /** label of the place, e.g. '1A', '2B' */
+    get text() {
+      return n(this, g);
+    }
+    set text(t) {
+      a(this, g, t);
+    }
+    /** Deck Index Prop to identifier the right place to deck */
+    get deckIndex() {
+      return n(this, _);
+    }
+    set deckIndex(t) {
+      a(this, _, t);
+    }
+    /** Coach Index Prop to identifier the right place to coach */
+    get coachIndex() {
+      return n(this, x);
+    }
+    set coachIndex(t) {
+      a(this, x, t);
+    }
+    /** Prevent click prop prevent any place action */
+    get preventClick() {
+      return n(this, y);
+    }
+    set preventClick(t) {
+      a(this, y, t);
+    }
+    /** Set the place focus outline style */
+    get keyfocus() {
+      return n(this, m);
+    }
+    set keyfocus(t) {
+      a(this, m, t);
+    }
+    willUpdate(t) {
+      super.willUpdate(t), t.has("keyfocus") && this.keyfocus === "focus" && this.focus();
+    }
+    render() {
+      const t = this._getPlaceSvg(this.placeType, this.state), e = this.type.toLowerCase(), r = this.state.toLowerCase(), Q = this.text, Z = this.style?.getPropertyValue("--sbb-seat-reservation-place-control-width"), ee = this.style?.getPropertyValue("--sbb-seat-reservation-place-control-height"), I = this.style?.getPropertyValue("--sbb-seat-reservation-place-control-rotation"), te = this.style?.getPropertyValue("--sbb-seat-reservation-place-control-text-rotation"), re = Number(te) - Number(I), se = this.preventClick ? "sbb-reservation-place-control--disabled" : null;
+      return this.title = this._getTitleDescriptionPlace(), this.tabIndex = -1, ie`
+      <div
+        part="sbb-sr-place-part"
+        class="sbb-sr-place-ctrl sbb-sr-place-ctrl--orientation-${I} sbb-sr-place-ctrl--state-${r} sbb-sr-place-ctrl--type-${e} ${se}"
+      >
+        <sbb-seat-reservation-graphic
+          style=${pe({
+        "--sbb-seat-reservation-graphic-width": Z,
+        "--sbb-seat-reservation-graphic-height": ee,
+        "--sbb-seat-reservation-graphic-rotation": I,
+        "--sbb-seat-reservation-graphic-inverse-rotation": re
+      })}
+          .name=${t}
+          aria-hidden="true"
+        ></sbb-seat-reservation-graphic>
+        <span ${this.text ?? be} class="sbb-sr-place-ctrl__text" aria-hidden="true"
+          >${Q}</span
+        >
+      </div>
+    `;
+    }
+    _getPlaceSvg(t, e) {
+      return `PLACE_${t}_${e}`;
+    }
+    _getTitleDescriptionPlace() {
+      const t = "PLACE_CONTROL_" + this.type + "_" + this.state;
+      let e = E(t, this._language.current, [this.text]);
+      return this.propertyIds.length && (e += ". " + E("PLACE_PROPERTY", this._language.current).concat(": "), e += this.propertyIds.map((r) => E("PLACE_PROPERTIES." + r, this._language.current)).filter((r) => r).join(", ")), e;
+    }
+    /** If the place selectable, we emit the placeSelection object which contains infos to the place state */
+    _selectPlace() {
+      if ((this.state === "FREE" || this.state === "SELECTED") && !this.preventClick) {
+        this.state = this.state === "FREE" ? "SELECTED" : "FREE";
+        const e = {
+          id: this.id,
+          deckIndex: this.deckIndex,
+          coachIndex: this.coachIndex,
+          number: this.text,
+          state: this.state,
+          placeType: this.placeType
+        };
+        this.dispatchEvent(new CustomEvent("selectplace", {
+          detail: e,
+          bubbles: !0,
+          composed: !0
+        }));
+      }
+    }
+  }, u = new WeakMap(), k = new WeakMap(), f = new WeakMap(), g = new WeakMap(), _ = new WeakMap(), x = new WeakMap(), y = new WeakMap(), m = new WeakMap(), i = l, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(C[Symbol.metadata] ?? null) : void 0;
+    z = [h(), v({ attribute: "type" })], w = [h(), v({ attribute: "state", reflect: !0 })], L = [v({ attribute: "propertyIds", type: Array })], A = [h(), v({ attribute: "text" })], F = [h(), v({ attribute: "deck-index", type: Number })], B = [h(), v({ attribute: "coach-index", type: Number })], M = [h(), v({ attribute: "prevent-click", type: Boolean })], G = [h(), v({ attribute: "keyfocus" })], d(l, null, z, { kind: "accessor", name: "placeType", static: !1, private: !1, access: { has: (e) => "placeType" in e, get: (e) => e.placeType, set: (e, r) => {
+      e.placeType = r;
+    } }, metadata: t }, S, T), d(l, null, w, { kind: "accessor", name: "state", static: !1, private: !1, access: { has: (e) => "state" in e, get: (e) => e.state, set: (e, r) => {
+      e.state = r;
+    } }, metadata: t }, P, R), d(l, null, L, { kind: "accessor", name: "propertyIds", static: !1, private: !1, access: { has: (e) => "propertyIds" in e, get: (e) => e.propertyIds, set: (e, r) => {
+      e.propertyIds = r;
+    } }, metadata: t }, $, D), d(l, null, A, { kind: "accessor", name: "text", static: !1, private: !1, access: { has: (e) => "text" in e, get: (e) => e.text, set: (e, r) => {
+      e.text = r;
+    } }, metadata: t }, O, N), d(l, null, F, { kind: "accessor", name: "deckIndex", static: !1, private: !1, access: { has: (e) => "deckIndex" in e, get: (e) => e.deckIndex, set: (e, r) => {
+      e.deckIndex = r;
+    } }, metadata: t }, V, j), d(l, null, B, { kind: "accessor", name: "coachIndex", static: !1, private: !1, access: { has: (e) => "coachIndex" in e, get: (e) => e.coachIndex, set: (e, r) => {
+      e.coachIndex = r;
+    } }, metadata: t }, U, K), d(l, null, M, { kind: "accessor", name: "preventClick", static: !1, private: !1, access: { has: (e) => "preventClick" in e, get: (e) => e.preventClick, set: (e, r) => {
+      e.preventClick = r;
+    } }, metadata: t }, Y, q), d(l, null, G, { kind: "accessor", name: "keyfocus", static: !1, private: !1, access: { has: (e) => "keyfocus" in e, get: (e) => e.keyfocus, set: (e, r) => {
+      e.keyfocus = r;
+    } }, metadata: t }, H, J), d(null, o = { value: i }, s, { kind: "class", name: i.name, metadata: t }, null, b), i = o.value, t && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), l.styles = [le, de], l.events = {
+    selectplace: "selectplace"
+  }, c(i, b), i;
+})();
+export {
+  Ce as SbbSeatReservationPlaceControlElement
+};

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

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

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

@@ -0,0 +1,20 @@
+import { __esDecorate as i, __runInitializers as c } from "tslib";
+import { boxSizingStyles as n } from "@sbb-esta/lyne-elements/core/styles.js";
+import { css as m, LitElement as b, html as d } from "lit";
+import { customElement as p } from "lit/decorators.js";
+const u = m`:host{--sbb-seat-reservation-scoped-width: 0;--sbb-seat-reservation-scoped-height: 0;display:block;width:calc(var(--sbb-seat-reservation-scoped-width) * var(--sbb-seat-reservation-one-px-rem, .0625rem));height:calc(var(--sbb-seat-reservation-scoped-height) * var(--sbb-seat-reservation-one-px-rem, .0625rem))}`;
+let _ = (() => {
+  var t;
+  let l = [p("sbb-seat-reservation-scoped")], a, r = [], e, o = b;
+  return t = class extends o {
+    render() {
+      return d`<slot></slot>`;
+    }
+  }, e = t, (() => {
+    const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
+    i(null, a = { value: e }, l, { kind: "class", name: e.name, metadata: s }, null, r), e = a.value, s && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s });
+  })(), t.styles = [n, u], c(e, r), e;
+})();
+export {
+  _ as SbbSeatReservationScopedElement
+};

package/seat-reservation/seat-reservation-scoped.js

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

package/seat-reservation/seat-reservation.js

@@ -0,0 +1,6 @@
+import { SbbSeatReservationElement as o } from "./seat-reservation/seat-reservation.component.js";
+import { SeatReservationBaseElement as a } from "./seat-reservation/seat-reservation-base-element.js";
+export {
+  o as SbbSeatReservationElement,
+  a as SeatReservationBaseElement
+};