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

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

@@ -1,53 +1,61 @@
-var E = (e) => {
-  throw TypeError(e);
+var C = (s) => {
+  throw TypeError(s);
 };
-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";
+var D = (s, r, a) => r.has(s) || C("Cannot " + a);
+var b = (s, r, a) => (D(s, r, "read from private field"), a ? a.call(s) : r.get(s)), d = (s, r, a) => r.has(s) ? C("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(s) : r.set(s, a), l = (s, r, a, i) => (D(s, r, "write to private field"), i ? i.call(s, a) : r.set(s, a), a);
+import { __runInitializers as c, __esDecorate as u } from "tslib";
+import { SbbLanguageController as A } from "@sbb-esta/lyne-elements/core/controllers.js";
+import { forceType as B } from "@sbb-esta/lyne-elements/core/decorators.js";
+import { boxSizingStyles as N } from "@sbb-esta/lyne-elements/core/styles.js";
+import { css as $, LitElement as j, nothing as _, html as k } from "lit";
+import { customElement as O, property as g } from "lit/decorators.js";
+import { getI18nSeatReservation as v } 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 {
+const R = $`.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 Q = (() => {
+  var h, p, m, o;
+  let s = [O("sbb-seat-reservation-navigation-services")], r, a = [], i, f = j, I, y = [], S = [], w, x = [], E = [], T, L = [], z = [];
+  return o = class extends f {
     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));
+      d(this, h);
+      d(this, p);
+      d(this, m);
+      l(this, h, c(this, y, [])), l(this, p, (c(this, S), c(this, x, !1))), l(this, m, (c(this, E), c(this, L, !1))), this._language = (c(this, z), new A(this));
     }
     /** Coach service property ids, which are used to display the services in the navigation */
     get propertyIds() {
-      return b(this, l);
+      return b(this, h);
     }
-    set propertyIds(r) {
-      p(this, l, r);
+    set propertyIds(t) {
+      l(this, h, t);
     }
     /** If true, the service icons are displayed vertically */
     get vertical() {
-      return b(this, c);
+      return b(this, p);
     }
-    set vertical(r) {
-      p(this, c, r);
+    set vertical(t) {
+      l(this, p, t);
+    }
+    /** Disable the mouse over title information */
+    get showTitleInfo() {
+      return b(this, m);
+    }
+    set showTitleInfo(t) {
+      l(this, m, t);
     }
     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
+      const t = this.propertyIds?.length ? this._getServiceLabelDescription() : null;
+      return k` <div class="sbb-sr-navigation__signs">
+      <sbb-screen-reader-only ${t || _}
+        >${t}</sbb-screen-reader-only
       >
-      ${this.propertyIds?.map((t) => C`
+      ${this.propertyIds?.map((e) => k`
           <sbb-seat-reservation-graphic
             class="auto-width"
-            name=${t ?? L}
-            title=${d(t, this._language.current)}
+            name=${e ?? _}
+            title=${this.showTitleInfo ? v(e, this._language.current) : _}
             aria-hidden="true"
           ></sbb-seat-reservation-graphic>
         `)}
@@ -55,19 +63,21 @@ let G = (() => {
     }
     //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;
+      let t = null;
+      const e = this.propertyIds.map((n) => v(n, this._language.current)).filter((n) => !!n).join(", ");
+      return e && (t = v("COACH_AVAILABLE_SERVICES", this._language.current).concat(":").concat(e)), t;
     }
-  }, 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;
+  }, h = new WeakMap(), p = new WeakMap(), m = new WeakMap(), i = o, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
+    I = [g({ attribute: "property-ids", type: Array })], w = [B(), g({ type: Boolean, reflect: !0, useDefault: !0 })], T = [B(), g({ type: Boolean })], u(o, null, I, { kind: "accessor", name: "propertyIds", static: !1, private: !1, access: { has: (e) => "propertyIds" in e, get: (e) => e.propertyIds, set: (e, n) => {
+      e.propertyIds = n;
+    } }, metadata: t }, y, S), u(o, null, w, { kind: "accessor", name: "vertical", static: !1, private: !1, access: { has: (e) => "vertical" in e, get: (e) => e.vertical, set: (e, n) => {
+      e.vertical = n;
+    } }, metadata: t }, x, E), u(o, null, T, { kind: "accessor", name: "showTitleInfo", static: !1, private: !1, access: { has: (e) => "showTitleInfo" in e, get: (e) => e.showTitleInfo, set: (e, n) => {
+      e.showTitleInfo = n;
+    } }, metadata: t }, L, z), u(null, r = { value: i }, s, { kind: "class", name: i.name, metadata: t }, null, a), i = r.value, t && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), o.styles = [N, R], c(i, a), i;
 })();
 export {
-  G as SbbSeatReservationNavigationServicesElement
+  Q as SbbSeatReservationNavigationServicesElement
 };

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

@@ -1,124 +1,155 @@
-var W = (s) => {
-  throw TypeError(s);
+var oe = (o) => {
+  throw TypeError(o);
 };
-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";
+var le = (o, l, i) => l.has(o) || oe("Cannot " + i);
+var n = (o, l, i) => (le(o, l, "read from private field"), i ? i.call(o) : l.get(o)), b = (o, l, i) => l.has(o) ? oe("Cannot add the same private member more than once") : l instanceof WeakSet ? l.add(o) : l.set(o, i), s = (o, l, i, v) => (le(o, l, "write to private field"), v ? v.call(o, i) : l.set(o, i), i);
+import { __esDecorate as p, __runInitializers as a } from "tslib";
+import { SbbButtonBaseElement as he } from "@sbb-esta/lyne-elements/core/base-elements.js";
+import { SbbLanguageController as fe } 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 { boxSizingStyles as ge } from "@sbb-esta/lyne-elements/core/styles.js";
+import { css as ue, nothing as ie, html as ne } from "lit";
+import { customElement as ke, property as d } from "lit/decorators.js";
+import { styleMap as _e } from "lit/directives/style-map.js";
+import { getI18nSeatReservation as D } 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 {
+const xe = ue`: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) );--sbb-seat-reservation-place-control-free-backrest-high-contrast: CanvasText;--sbb-seat-reservation-place-control-free-background-high-contrast: Canvas;--sbb-seat-reservation-place-control-free-text-high-contrast: ButtonText;--sbb-seat-reservation-place-control-free-icon-high-contrast: CanvasText;--sbb-seat-reservation-place-control-allocated-backrest-high-contrast: GrayText;--sbb-seat-reservation-place-control-allocated-background-high-contrast: Canvas;--sbb-seat-reservation-place-control-allocated-text-high-contrast: GrayText;--sbb-seat-reservation-place-control-allocated-icon-high-contrast: GrayText;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)}@media(forced-colors:active){: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-high-contrast)}: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-high-contrast)}:host(:hover) .sbb-sr-place-ctrl--state-free:not(.sbb-reservation-place-control--disabled) ::part(svg-icon){fill:var(--sbb-seat-reservation-place-control-free-icon-high-contrast)}:host(:hover) .sbb-sr-place-ctrl--state-free:not(.sbb-reservation-place-control--disabled) ::part(svg-seatline){stroke:var(--sbb-seat-reservation-place-control-free-backrest-high-contrast)}:host(:hover) .sbb-sr-place-ctrl--state-free:not(.sbb-reservation-place-control--disabled) .sbb-sr-place-ctrl__text{forced-color-adjust:none;background-color:var(--sbb-seat-reservation-place-control-free-background-high-contrast);color:var(--sbb-seat-reservation-place-control-free-text-high-contrast)}}: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)}@media(forced-colors:active){: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-high-contrast)}: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-high-contrast)}:host(:focus-visible) .sbb-sr-place-ctrl--state-free:not(.sbb-reservation-place-control--disabled) ::part(svg-icon){fill:var(--sbb-seat-reservation-place-control-free-icon-high-contrast)}:host(:focus-visible) .sbb-sr-place-ctrl--state-free:not(.sbb-reservation-place-control--disabled) ::part(svg-seatline){stroke:var(--sbb-seat-reservation-place-control-free-backrest-high-contrast)}:host(:focus-visible) .sbb-sr-place-ctrl--state-free:not(.sbb-reservation-place-control--disabled) .sbb-sr-place-ctrl__text{forced-color-adjust:none;background-color:var(--sbb-seat-reservation-place-control-free-background-high-contrast);color:var(--sbb-seat-reservation-place-control-free-text-high-contrast)}}: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)}@media(forced-colors:active){.sbb-sr-place-ctrl--state-free ::part(svg-place){fill:var(--sbb-seat-reservation-place-control-free-background-high-contrast)}.sbb-sr-place-ctrl--state-free ::part(svg-backrest){fill:var(--sbb-seat-reservation-place-control-free-backrest-high-contrast)}.sbb-sr-place-ctrl--state-free ::part(svg-icon){fill:var(--sbb-seat-reservation-place-control-free-icon-high-contrast)}.sbb-sr-place-ctrl--state-free ::part(svg-seatline){stroke:var(--sbb-seat-reservation-place-control-free-backrest-high-contrast)}.sbb-sr-place-ctrl--state-free .sbb-sr-place-ctrl__text{forced-color-adjust:none;background-color:var(--sbb-seat-reservation-place-control-free-background-high-contrast);color:var(--sbb-seat-reservation-place-control-free-text-high-contrast)}}.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)}@media(forced-colors:active){.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-high-contrast)}.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-high-contrast)}.sbb-sr-place-ctrl--state-allocated ::part(svg-icon),.sbb-sr-place-ctrl--state-restricted ::part(svg-icon){fill:var(--sbb-seat-reservation-place-control-allocated-icon-high-contrast)}.sbb-sr-place-ctrl--state-allocated ::part(svg-seatline),.sbb-sr-place-ctrl--state-restricted ::part(svg-seatline){stroke:var(--sbb-seat-reservation-place-control-allocated-backrest-high-contrast)}.sbb-sr-place-ctrl--state-allocated .sbb-sr-place-ctrl__text,.sbb-sr-place-ctrl--state-restricted .sbb-sr-place-ctrl__text{forced-color-adjust:none;background-color:var(--sbb-seat-reservation-place-control-allocated-background-high-contrast);color:var(--sbb-seat-reservation-place-control-allocated-text-high-contrast)}}.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 Ne = (() => {
+  var f, g, u, k, _, x, y, m, I, T, c;
+  let o = [ke("sbb-seat-reservation-place-control")], l, i = [], v, S = he, z, R = [], P = [], N, L = [], O = [], $, A = [], j = [], V, B = [], F = [], G, U = [], Y = [], H, K = [], M = [], q, J = [], Q = [], W, X = [], Z = [], ee, te = [], re = [], se, ae = [], ce = [];
+  return c = class extends S {
     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());
+      b(this, f);
+      b(this, g);
+      b(this, u);
+      b(this, k);
+      b(this, _);
+      b(this, x);
+      b(this, y);
+      b(this, m);
+      b(this, I);
+      b(this, T);
+      s(this, f, a(this, R, "SEAT")), s(this, g, (a(this, P), a(this, L, "FREE"))), s(this, u, (a(this, O), a(this, A, "NONE"))), s(this, k, (a(this, j), a(this, B, []))), s(this, _, (a(this, F), a(this, U, ""))), s(this, x, (a(this, Y), a(this, K, null))), s(this, y, (a(this, M), a(this, J, null))), s(this, m, (a(this, Q), a(this, X, !1))), s(this, I, (a(this, Z), a(this, te, "unfocus"))), s(this, T, (a(this, re), a(this, ae, !1))), this._optionalScreenreaderInfo = (a(this, ce), ""), this._language = new fe(this), this.addEventListener("click", () => this._selectPlace());
     }
     /** placeType of the place, e.g. 'SEAT', 'BICYCLE' */
     get placeType() {
-      return n(this, u);
+      return n(this, f);
     }
     set placeType(t) {
-      a(this, u, t);
+      s(this, f, t);
     }
     /** state of the place, e.g. 'FREE', 'SELECTED', 'BLOCKED' */
     get state() {
-      return n(this, k);
+      return n(this, g);
     }
     set state(t) {
-      a(this, k, t);
+      s(this, g, t);
+    }
+    /** direction of a whole train, used to compute an orientation of a place */
+    get travelDirection() {
+      return n(this, u);
+    }
+    set travelDirection(t) {
+      s(this, u, t);
     }
     /** property ids of the place, to display more info about the place */
     get propertyIds() {
-      return n(this, f);
+      return n(this, k);
     }
     set propertyIds(t) {
-      a(this, f, t);
+      s(this, k, t);
     }
     /** label of the place, e.g. '1A', '2B' */
     get text() {
-      return n(this, g);
+      return n(this, _);
     }
     set text(t) {
-      a(this, g, t);
+      s(this, _, t);
     }
     /** Deck Index Prop to identifier the right place to deck */
     get deckIndex() {
-      return n(this, _);
+      return n(this, x);
     }
     set deckIndex(t) {
-      a(this, _, t);
+      s(this, x, t);
     }
     /** Coach Index Prop to identifier the right place to coach */
     get coachIndex() {
-      return n(this, x);
+      return n(this, y);
     }
     set coachIndex(t) {
-      a(this, x, t);
+      s(this, y, t);
     }
     /** Prevent click prop prevent any place action */
     get preventClick() {
-      return n(this, y);
+      return n(this, m);
     }
     set preventClick(t) {
-      a(this, y, t);
+      s(this, m, t);
     }
     /** Set the place focus outline style */
     get keyfocus() {
-      return n(this, m);
+      return n(this, I);
     }
     set keyfocus(t) {
-      a(this, m, t);
+      s(this, I, t);
+    }
+    /** Disable the mouse over title information */
+    get showTitleInfo() {
+      return n(this, T);
+    }
+    set showTitleInfo(t) {
+      s(this, T, t);
     }
     willUpdate(t) {
-      super.willUpdate(t), t.has("keyfocus") && this.keyfocus === "focus" && this.focus();
+      super.willUpdate(t), t.has("keyfocus") && this.keyfocus === "focus" && this.focus(), t.has("showTitleInfo") && (this.showTitleInfo || (this.title = ""));
     }
     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`
+      const t = this._getPlaceSvg(this.placeType, this.state), e = this.type.toLowerCase(), r = this.state.toLowerCase(), E = this.text, w = this.style?.getPropertyValue("--sbb-seat-reservation-place-control-width"), be = this.style?.getPropertyValue("--sbb-seat-reservation-place-control-height"), C = this.style?.getPropertyValue("--sbb-seat-reservation-place-control-rotation"), pe = this.style?.getPropertyValue("--sbb-seat-reservation-place-control-text-rotation"), ve = Number(pe) - Number(C), de = this.preventClick ? "sbb-reservation-place-control--disabled" : null;
+      return this.showTitleInfo ? this.title = this._getTitleDescriptionPlace(C) : this._optionalScreenreaderInfo = this._getTitleDescriptionPlace(C), this.tabIndex = -1, ne`
       <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}"
+        class="sbb-sr-place-ctrl sbb-sr-place-ctrl--orientation-${C} sbb-sr-place-ctrl--state-${r} sbb-sr-place-ctrl--type-${e} ${de}"
       >
         <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
+          style=${_e({
+        "--sbb-seat-reservation-graphic-width": w,
+        "--sbb-seat-reservation-graphic-height": be,
+        "--sbb-seat-reservation-graphic-rotation": C,
+        "--sbb-seat-reservation-graphic-inverse-rotation": ve
       })}
           .name=${t}
           aria-hidden="true"
         ></sbb-seat-reservation-graphic>
-        <span ${this.text ?? be} class="sbb-sr-place-ctrl__text" aria-hidden="true"
-          >${Q}</span
+        <span ${this.text ?? ie} class="sbb-sr-place-ctrl__text" aria-hidden="true"
+          >${E}</span
         >
+        ${this.showTitleInfo ? ie : ne`<sbb-screen-reader-only id="${this.id}"
+              >${this._optionalScreenreaderInfo}</sbb-screen-reader-only
+            >`}
       </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;
+    _getTitleDescriptionPlace(t) {
+      const e = "PLACE_CONTROL_" + this.type + "_" + this.state;
+      let r = D(e, this._language.current, [this.text]);
+      const E = this._getRelativeTravelDirection(t);
+      return (this.propertyIds.length || E) && (r += ". " + D("PLACE_PROPERTY", this._language.current).concat(": "), r += [E, ...this.propertyIds].map((w) => D("PLACE_PROPERTIES." + w, this._language.current)).filter((w) => w).join(", ")), r;
+    }
+    _getRelativeTravelDirection(t) {
+      if (!this.travelDirection || this.travelDirection === "NONE" || this.placeType !== "SEAT" || !t)
+        return;
+      const e = Number(t);
+      if (e === 90 || e === 270)
+        return "TRAVEL_DIRECTION_TRANSVERSELY";
+      if (e === 0 && this.travelDirection === "RIGHT" || e === 180 && this.travelDirection === "LEFT")
+        return "TRAVEL_DIRECTION_IN_DIRECTION";
+      if (e === 0 || e === 180)
+        return "TRAVEL_DIRECTION_IN_OPPOSITE_DIRECTION";
     }
     /** If the place selectable, we emit the placeSelection object which contains infos to the place state */
     _selectPlace() {
@@ -139,29 +170,33 @@ let Ce = (() => {
         }));
       }
     }
-  }, u = new WeakMap(), k = new WeakMap(), f = new WeakMap(), g = new WeakMap(), _ = new WeakMap(), x = new WeakMap(), y = new WeakMap(), m = new WeakMap(), i = l, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(C[Symbol.metadata] ?? null) : void 0;
-    z = [h(), v({ attribute: "type" })], w = [h(), v({ attribute: "state", 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) => {
+  }, f = new WeakMap(), g = new WeakMap(), u = new WeakMap(), k = new WeakMap(), _ = new WeakMap(), x = new WeakMap(), y = new WeakMap(), m = new WeakMap(), I = new WeakMap(), T = new WeakMap(), v = c, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(S[Symbol.metadata] ?? null) : void 0;
+    z = [h(), d({ attribute: "type" })], N = [h(), d({ attribute: "state", reflect: !0 })], $ = [d({ attribute: "travel-direction" })], V = [d({ attribute: "propertyIds", type: Array })], G = [h(), d({ attribute: "text" })], H = [h(), d({ attribute: "deck-index", type: Number })], q = [h(), d({ attribute: "coach-index", type: Number })], W = [h(), d({ attribute: "prevent-click", type: Boolean })], ee = [h(), d({ attribute: "keyfocus" })], se = [h(), d({ type: Boolean, useDefault: !0 })], p(c, 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) => {
+    } }, metadata: t }, R, P), p(c, null, N, { 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) => {
+    } }, metadata: t }, L, O), p(c, null, $, { kind: "accessor", name: "travelDirection", static: !1, private: !1, access: { has: (e) => "travelDirection" in e, get: (e) => e.travelDirection, set: (e, r) => {
+      e.travelDirection = r;
+    } }, metadata: t }, A, j), p(c, null, V, { 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) => {
+    } }, metadata: t }, B, F), p(c, null, G, { 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) => {
+    } }, metadata: t }, U, Y), p(c, null, H, { 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) => {
+    } }, metadata: t }, K, M), p(c, null, q, { 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) => {
+    } }, metadata: t }, J, Q), p(c, null, W, { 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) => {
+    } }, metadata: t }, X, Z), p(c, null, ee, { 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 = {
+    } }, metadata: t }, te, re), p(c, null, se, { kind: "accessor", name: "showTitleInfo", static: !1, private: !1, access: { has: (e) => "showTitleInfo" in e, get: (e) => e.showTitleInfo, set: (e, r) => {
+      e.showTitleInfo = r;
+    } }, metadata: t }, ae, ce), p(null, l = { value: v }, o, { kind: "class", name: v.name, metadata: t }, null, i), v = l.value, t && Object.defineProperty(v, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), c.styles = [ge, xe], c.events = {
     selectplace: "selectplace"
-  }, c(i, b), i;
+  }, a(v, i), v;
 })();
 export {
-  Ce as SbbSeatReservationPlaceControlElement
+  Ne as SbbSeatReservationPlaceControlElement
 };

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);
+}