@sbb-esta/lyne-elements-experimental 2.10.1 → 3.0.0-next.0

package/seat-reservation/seat-reservation-graphic/seat-reservation-assets.js

@@ -0,0 +1,317 @@
+import { html as d } from "lit";
+import { unsafeHTML as s } from "lit/directives/unsafe-html.js";
+import { svgs as _, mapIconToSvg as r } from "../common.js";
+import "@sbb-esta/lyne-elements/table.js";
+import "../seat-reservation-graphic.js";
+const E = (A) => d`
+    <div class="story-asset">
+      <span class="story-asset__preview">${s(A)}</span>
+    </div>
+  `, t = (A) => {
+  var e, a;
+  return (e = r[A]) != null && e.svg ? E(r[A].svg) : (a = r[A]) != null && a.svgName ? d`<sbb-icon name="${r[A].svgName}"></sbb-icon>` : null;
+}, R = d`
+  <sbb-table-wrapper>
+    <table class="sbb-table">
+      <thead>
+        <tr>
+          <th scope="col">SVG</th>
+          <th scope="col">Figma</th>
+          <th scope="col">Code</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>${t("PLACE_BICYCLE_FREE")}</td>
+          <td>Place-Bike: Available</td>
+          <td>PLACE_BICYCLE_FREE</td>
+        </tr>
+        <tr>
+          <td>${t("PLACE_BICYCLE_SELECTED")}</td>
+          <td>Place-Bike: Selected</td>
+          <td>PLACE_BICYCLE_SELECTED</td>
+        </tr>
+        <tr>
+          <td>${t("PLACE_BICYCLE_ALLOCATED")}</td>
+          <td>Place-Bike: Unavailable</td>
+          <td>PLACE_BICYCLE_ALLOCATED</td>
+        </tr>
+        <tr>
+          <td>${t("PLACE_BICYCLE_RESTRICTED")}</td>
+          <td>Place-Bike: Not bookable</td>
+          <td>PLACE_BICYCLE_RESTRICTED</td>
+        </tr>
+        <tr>
+          <td>${t("PLACE_SEAT_FREE")}</td>
+          <td>Place-Seat: Available</td>
+          <td>PLACE_SEAT_FREE</td>
+        </tr>
+        <tr>
+          <td>${t("PLACE_SEAT_SELECTED")}</td>
+          <td>Place-Seat: Selected</td>
+          <td>PLACE_SEAT_SELECTED</td>
+        </tr>
+        <tr>
+          <td>${t("PLACE_SEAT_ALLOCATED")}</td>
+          <td>Place-Seat: Unavailable</td>
+          <td>PLACE_SEAT_ALLOCATED</td>
+        </tr>
+        <tr>
+          <td>${t("PLACE_SEAT_RESTRICTED")}</td>
+          <td>Place-Seat: Not bookable</td>
+          <td>PLACE_SEAT_RESTRICTED</td>
+        </tr>
+      </tbody>
+    </table>
+  </sbb-table-wrapper>
+`, o = d`
+  <sbb-table-wrapper>
+    <table class="sbb-table">
+      <thead>
+        <tr>
+          <th scope="col">SVG</th>
+          <th scope="col">Figma</th>
+          <th scope="col">OSDM Code</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>${t("EASY_ACCESS_AREA")}</td>
+          <td>Easy Access Area</td>
+          <td>EASY_ACCESS_AREA</td>
+        </tr>
+        <tr>
+          <td>${t("ENTRY_EXIT")}</td>
+          <td>Entrance</td>
+          <td>ENTRY_EXIT</td>
+        </tr>
+        <tr>
+          <td>${t("LUGGAGE_AREA")}</td>
+          <td>Luggage</td>
+          <td>LUGGAGE_AREA</td>
+        </tr>
+        <tr>
+          <td>${t("MULTI_FUNCTION_AREA")}</td>
+          <td>Multi Function Area</td>
+          <td>MULTI_FUNCTION_AREA</td>
+        </tr>
+        <tr>
+          <td>${t("PLAYGROUND_AREA")}</td>
+          <td>Playground</td>
+          <td>PLAYGROUND_AREA</td>
+        </tr>
+        <tr>
+          <td>${t("PRAM_AREA")}</td>
+          <td>Pram</td>
+          <td>PRAM_AREA</td>
+        </tr>
+        <tr>
+          <td>${t("SKI_AREA")}</td>
+          <td>Ski</td>
+          <td>SKI_AREA</td>
+        </tr>
+        <tr>
+          <td>${t("STAIR_AREA")}</td>
+          <td>Stair</td>
+          <td>STAIR_AREA</td>
+        </tr>
+        <tr>
+          <td>${t("TOILET_AREA")}</td>
+          <td>Toilet</td>
+          <td>TOILET_AREA</td>
+        </tr>
+        <tr>
+          <td>${t("TOILET_WHEELCHAIR_AREA")}</td>
+          <td>Toilet-Handicap</td>
+          <td>TOILET_WHEELCHAIR_AREA</td>
+        </tr>
+        <tr>
+          <td>${t("WARDROBE_AREA")}</td>
+          <td>Wardrobe</td>
+          <td>WARDROBE_AREA</td>
+        </tr>
+      </tbody>
+    </table>
+  </sbb-table-wrapper>
+`, l = d`
+  <sbb-table-wrapper>
+    <table aria-label="Available Service Icons" class="sbb-table">
+      <thead>
+        <tr>
+          <th scope="col">SVG</th>
+          <th scope="col">Figma</th>
+          <th scope="col">OSDM Code</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>${t("BISTRO")}</td>
+          <td>Bistro</td>
+          <td>BISTRO</td>
+        </tr>
+        <tr>
+          <td>${t("BUSINESS")}</td>
+          <td>Business</td>
+          <td>BUSINESS</td>
+        </tr>
+        <tr>
+          <td>${t("PLAYGROUND_ICON")}</td>
+          <td>Family</td>
+          <td>PLAYGROUND_ICON</td>
+        </tr>
+        <tr>
+          <td>${t("LUGGAGE_AREA")}</td>
+          <td>Luggage</td>
+          <td>LUGGAGE_AREA</td>
+        </tr>
+        <tr>
+          <td>${t("MULTI_FUNCTION_AREA")}</td>
+          <td>Multifunction</td>
+          <td>MULTI_FUNCTION_AREA</td>
+        </tr>
+        <tr>
+          <td>${t("PRAM_ICON")}</td>
+          <td>Pram</td>
+          <td>PRAM_ICON</td>
+        </tr>
+        <tr>
+          <td>${t("EASY_ACCESS_AREA")}</td>
+          <td>Easy Access Area</td>
+          <td>EASY_ACCESS_AREA</td>
+        </tr>
+        <tr>
+          <td>${t("RESTAURANT_ICON")}</td>
+          <td>Restaurant</td>
+          <td>RESTAURANT_ICON</td>
+        </tr>
+        <tr>
+          <td>${t("SILENCE_AREA_ICON")}</td>
+          <td>Silence</td>
+          <td>SILENCE_AREA_ICON</td>
+        </tr>
+        <tr>
+          <td>${t("TOILET_AREA")}</td>
+          <td>Toilet</td>
+          <td>TOILET_AREA</td>
+        </tr>
+        <tr>
+          <td>${t("TOILET_WHEELCHAIR_AREA")}</td>
+          <td>Toilet-PRM</td>
+          <td>TOILET_WHEELCHAIR_AREA</td>
+        </tr>
+        <tr>
+          <td>${t("WHEELCHAIR_ICON")}</td>
+          <td>Wheelchair</td>
+          <td>WHEELCHAIR_ICON</td>
+        </tr>
+        <tr>
+          <td>${t("WIFI")}</td>
+          <td>Wifi</td>
+          <td>WIFI</td>
+        </tr>
+      </tbody>
+    </table>
+  </sbb-table-wrapper>
+`, T = d`
+  <sbb-table-wrapper>
+    <table class="sbb-table">
+      <thead>
+        <tr>
+          <th scope="col">SVG</th>
+          <th scope="col">Figma</th>
+          <th scope="col">OSDM Code</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>${t("DRIVER_AREA")}</td>
+          <td>Driver: Train</td>
+          <td>DRIVER_AREA</td>
+        </tr>
+        <tr>
+          <td>${t("DRIVER_AREA_FULL_TRAIN")}</td>
+          <td>Driver: Train</td>
+          <td>DRIVER_AREA_FULL_TRAIN</td>
+        </tr>
+        <tr>
+          <td>${t("DRIVER_AREA_FULL_BUS")}</td>
+          <td>Driver: Bus</td>
+          <td>DRIVER_AREA_FULL_BUS</td>
+        </tr>
+        <tr>
+          <td>${t("COMPARTMENT_PASSAGE_HIGH")}</td>
+          <td>Passage-Compartment: Top</td>
+          <td>COMPARTMENT_PASSAGE<br />COMPARTMENT_PASSAGE_HIGH</td>
+        </tr>
+        <tr>
+          <td>${t("COMPARTMENT_PASSAGE")}</td>
+          <td>Passage-Compartment: Middle</td>
+          <td>COMPARTMENT_PASSAGE<br />COMPARTMENT_PASSAGE_MIDDLE</td>
+        </tr>
+        <tr>
+          <td>${t("COMPARTMENT_PASSAGE_LOW")}</td>
+          <td>Passage-Compartment: Bottom</td>
+          <td>COMPARTMENT_PASSAGE<br />COMPARTMENT_PASSAGE_LOW</td>
+        </tr>
+        <tr>
+          <td>${t("COACH_PASSAGE")}</td>
+          <td>Passage-Waggon Type: Left</td>
+          <td>COACH_PASSAGE</td>
+        </tr>
+        <tr>
+          <td>${E(_.chassisPassageWaggonBottomRight)}</td>
+          <td>Passage-Waggon Type: Right</td>
+          <td
+            style="background: linear-gradient(90deg, var(--sbb-color-white) 5%, var(--sbb-color-red));"
+          >
+            TODO: check if still in use, may be deleted
+          </td>
+        </tr>
+        <tr>
+          <td>${t("COACH_WALL_NO_PASSAGE")}</td>
+          <td>Row-Empty: Top/Left</td>
+          <td>COACH_WALL_NO_PASSAGE</td>
+        </tr>
+        <tr>
+          <td>${t("COACH_BORDER_MIDDLE")}</td>
+          <td>Row-Empty: Middle</td>
+          <td>COACH_BORDER_MIDDLE</td>
+        </tr>
+        <tr>
+          <td>${E(_.chassisSeparator)}</td>
+          <td>Separator</td>
+          <td
+            style="background: linear-gradient(90deg, var(--sbb-color-white) 5%, var(--sbb-color-red))"
+          >
+            TODO: check if still in use, may be deleted
+          </td>
+        </tr>
+        <tr>
+          <td>${t("TABLE")}</td>
+          <td>Table</td>
+          <td>TABLE</td>
+        </tr>
+      </tbody>
+    </table>
+  </sbb-table-wrapper>
+`, I = d`
+  <style>
+    .story-asset {
+      width: max-content;
+      background-color: var(--sbb-color-white);
+    }
+  </style>
+  <h1>List of all currently available assets.</h1>
+  <h2>Interior</h2>
+  ${R}
+  <h2>Layout</h2>
+  ${o}
+  <h2>Service Icons</h2>
+  ${l}
+  <h2>Chassis</h2>
+  ${T}
+`;
+export {
+  I as assetsTemplate,
+  t as svgImageByOSDMCode
+};

package/seat-reservation/seat-reservation-graphic/seat-reservation-graphic.component.d.ts

@@ -0,0 +1,29 @@
+import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
+/**
+ * Output one of the SVG graphics based on its code.
+ */
+export declare class SbbSeatReservationGraphicElement extends LitElement {
+    static styles: CSSResultGroup;
+    /** Name of the SVG graphic to be displayed. */
+    accessor name: string;
+    /** if true, scale the graphic content of the given element non-uniformly if necessary */
+    accessor stretch: boolean;
+    /** handles the rotation of the SVG graphic */
+    accessor rotation: number;
+    /** Inverse rotation for part of an SVG that can be rotated opposite to the normal rotation */
+    accessor inverseRotation: number;
+    /** width of the svg in pixels (without unit) */
+    accessor width: number;
+    /** height of the svg in pixels (without unit) */
+    accessor height: number;
+    private _language;
+    protected willUpdate(_changedProperties: PropertyValues): void;
+    protected render(): TemplateResult | null;
+    private _getSvgElement;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-seat-reservation-graphic': SbbSeatReservationGraphicElement;
+    }
+}
+//# sourceMappingURL=seat-reservation-graphic.component.d.ts.map

package/seat-reservation/seat-reservation-graphic/seat-reservation-graphic.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"seat-reservation-graphic.component.d.ts","sourceRoot":"","sources":["../../../../src/elements-experimental/seat-reservation/seat-reservation-graphic/seat-reservation-graphic.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACpF,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAQvC,OAAO,iCAAiC,CAAC;AAEzC;;GAEG;AACH,qBAEM,gCAAiC,SAAQ,UAAU;IACvD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,+CAA+C;IAC/C,SAEgB,IAAI,EAAE,MAAM,CAAM;IAElC,yFAAyF;IACzF,SAEgB,OAAO,EAAE,OAAO,CAAS;IAEzC,8CAA8C;IAC9C,SAEgB,QAAQ,EAAE,MAAM,CAAK;IAErC,8FAA8F;IAC9F,SAEgB,eAAe,EAAE,MAAM,CAAK;IAE5C,gDAAgD;IAChD,SAEgB,KAAK,EAAE,MAAM,CAAS;IAEtC,iDAAiD;IACjD,SAEgB,MAAM,EAAE,MAAM,CAAS;IAEvC,OAAO,CAAC,SAAS,CAAmC;cAEjC,UAAU,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;cAsBpD,MAAM,IAAI,cAAc,GAAG,IAAI;IAuBlD,OAAO,CAAC,cAAc;CASvB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,8BAA8B,EAAE,gCAAgC,CAAC;KAClE;CACF"}

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

@@ -0,0 +1,113 @@
+var q = (i) => {
+  throw TypeError(i);
+};
+var H = (i, r, a) => r.has(i) || q("Cannot " + a);
+var g = (i, r, a) => (H(i, r, "read from private field"), a ? a.call(i) : r.get(i)), b = (i, r, a) => r.has(i) ? q("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(i) : r.set(i, a), o = (i, r, a, c) => (H(i, r, "write to private field"), c ? c.call(i, a) : r.set(i, a), a);
+import { __runInitializers as h, __esDecorate as m } from "tslib";
+import { SbbLanguageController as J } from "@sbb-esta/lyne-elements/core/controllers.js";
+import { forceType as w } from "@sbb-esta/lyne-elements/core/decorators.js";
+import { css as K, LitElement as O, html as z } from "lit";
+import { customElement as Q, property as y } from "lit/decorators.js";
+import { classMap as V } from "lit/directives/class-map.js";
+import { mapIconToSvg as W, getI18nSeatReservation as X } from "../common.js";
+import "@sbb-esta/lyne-elements/icon.js";
+const Y = K`*,:before,:after{box-sizing:border-box}:host{--sbb-reservation-graphic-width: 16;--sbb-reservation-graphic-height: 16;--sbb-reservation-graphic-rotation: 0;--sbb-reservation-graphic-inverse-rotation: 0}.sbb-sr-icon,.sbb-sr-graphic{--sbb-icon-svg-width: calc(var(--sbb-reservation-graphic-width) * .0625rem);--sbb-icon-svg-height: calc(var(--sbb-reservation-graphic-height) * .0625rem);display:flex;justify-content:center;align-items:center;width:calc(var(--sbb-reservation-graphic-width) * .0625rem);height:calc(var(--sbb-reservation-graphic-height) * .0625rem);transform-origin:center;rotate:calc(var(--sbb-reservation-graphic-rotation) * 1deg)}.sbb-sr-icon{color:var(--sbb-color-granite)}.sbb-sr-graphic svg{width:100%;height:100%}.sbb-sr-graphic svg .fix-rotation-inverse{transform-origin:center;rotate:calc(var(--sbb-reservation-graphic-inverse-rotation) * 1deg)}@media (forced-colors: active){.sbb-sr-graphic svg:not(.color-immutable) [fill]:not([fill=none]){fill:currentcolor}.sbb-sr-graphic .no-bg{fill:transparent}}`;
+let ct = (() => {
+  var v, p, _, d, u, f, n;
+  let i = [Q("sbb-seat-reservation-graphic")], r, a = [], c, R = O, x, S = [], I = [], N, $ = [], k = [], E, D = [], C = [], L, T = [], A = [], M, P = [], U = [], B, F = [], G = [];
+  return n = class extends R {
+    constructor() {
+      super(...arguments);
+      b(this, v);
+      b(this, p);
+      b(this, _);
+      b(this, d);
+      b(this, u);
+      b(this, f);
+      o(this, v, h(this, S, "")), o(this, p, (h(this, I), h(this, $, !1))), o(this, _, (h(this, k), h(this, D, 0))), o(this, d, (h(this, C), h(this, T, 0))), o(this, u, (h(this, A), h(this, P, null))), o(this, f, (h(this, U), h(this, F, null))), this._language = (h(this, G), new J(this));
+    }
+    /** Name of the SVG graphic to be displayed. */
+    get name() {
+      return g(this, v);
+    }
+    set name(t) {
+      o(this, v, t);
+    }
+    /** if true, scale the graphic content of the given element non-uniformly if necessary */
+    get stretch() {
+      return g(this, p);
+    }
+    set stretch(t) {
+      o(this, p, t);
+    }
+    /** handles the rotation of the SVG graphic */
+    get rotation() {
+      return g(this, _);
+    }
+    set rotation(t) {
+      o(this, _, t);
+    }
+    /** Inverse rotation for part of an SVG that can be rotated opposite to the normal rotation */
+    get inverseRotation() {
+      return g(this, d);
+    }
+    set inverseRotation(t) {
+      o(this, d, t);
+    }
+    /** width of the svg in pixels (without unit) */
+    get width() {
+      return g(this, u);
+    }
+    set width(t) {
+      o(this, u, t);
+    }
+    /** height of the svg in pixels (without unit) */
+    get height() {
+      return g(this, f);
+    }
+    set height(t) {
+      o(this, f, t);
+    }
+    willUpdate(t) {
+      var e, s, l, j;
+      super.willUpdate(t), t.has("width") && this.width && ((e = this.style) == null || e.setProperty("--sbb-reservation-graphic-width", `${this.width}`)), t.has("height") && this.height && ((s = this.style) == null || s.setProperty("--sbb-reservation-graphic-height", `${this.height}`)), t.has("rotation") && ((l = this.style) == null || l.setProperty("--sbb-reservation-graphic-rotation", `${this.rotation}`)), t.has("inverseRotation") && ((j = this.style) == null || j.setProperty("--sbb-reservation-graphic-inverse-rotation", `${this.inverseRotation}`));
+    }
+    render() {
+      const t = W[this.name];
+      return !(t != null && t.svg) && !(t != null && t.svgName) ? null : z`<span
+      class="${V({
+        "sbb-sr-icon": !!t.svgName,
+        "sbb-sr-graphic": !!t.svg
+      })}"
+    >
+      ${t.svgName ? z` <sbb-icon
+            name="${t.svgName || ""}"
+            aria-hidden="false"
+            aria-label="${X(t.svgName, this._language.current)}"
+          ></sbb-icon>` : z`${this._getSvgElement(t.svg)}`}
+    </span>`;
+    }
+    _getSvgElement(t) {
+      const e = new DOMParser(), s = t || "<svg></svg>", l = e.parseFromString(s, "image/svg+xml").firstElementChild;
+      return this.stretch && (l == null ? void 0 : l.nodeName.toLowerCase()) === "svg" && l.setAttribute("preserveAspectRatio", "none"), l;
+    }
+  }, v = new WeakMap(), p = new WeakMap(), _ = new WeakMap(), d = new WeakMap(), u = new WeakMap(), f = new WeakMap(), c = n, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(R[Symbol.metadata] ?? null) : void 0;
+    x = [w(), y({ attribute: "name" })], N = [w(), y({ attribute: "stretch", type: Boolean })], E = [w(), y({ attribute: "rotation", type: Number })], L = [w(), y({ attribute: "inverse-roration", type: Number })], M = [w(), y({ attribute: "width", type: Number })], B = [w(), y({ attribute: "height", type: Number })], m(n, null, x, { kind: "accessor", name: "name", static: !1, private: !1, access: { has: (e) => "name" in e, get: (e) => e.name, set: (e, s) => {
+      e.name = s;
+    } }, metadata: t }, S, I), m(n, null, N, { kind: "accessor", name: "stretch", static: !1, private: !1, access: { has: (e) => "stretch" in e, get: (e) => e.stretch, set: (e, s) => {
+      e.stretch = s;
+    } }, metadata: t }, $, k), m(n, null, E, { kind: "accessor", name: "rotation", static: !1, private: !1, access: { has: (e) => "rotation" in e, get: (e) => e.rotation, set: (e, s) => {
+      e.rotation = s;
+    } }, metadata: t }, D, C), m(n, null, L, { kind: "accessor", name: "inverseRotation", static: !1, private: !1, access: { has: (e) => "inverseRotation" in e, get: (e) => e.inverseRotation, set: (e, s) => {
+      e.inverseRotation = s;
+    } }, metadata: t }, T, A), m(n, null, M, { kind: "accessor", name: "width", static: !1, private: !1, access: { has: (e) => "width" in e, get: (e) => e.width, set: (e, s) => {
+      e.width = s;
+    } }, metadata: t }, P, U), m(n, null, B, { kind: "accessor", name: "height", static: !1, private: !1, access: { has: (e) => "height" in e, get: (e) => e.height, set: (e, s) => {
+      e.height = s;
+    } }, metadata: t }, F, G), m(null, r = { value: c }, i, { kind: "class", name: c.name, metadata: t }, null, a), c = r.value, t && Object.defineProperty(c, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), n.styles = Y, h(c, a), c;
+})();
+export {
+  ct as SbbSeatReservationGraphicElement
+};

package/seat-reservation/seat-reservation-graphic.d.ts

@@ -0,0 +1,2 @@
+export * from './seat-reservation-graphic/seat-reservation-graphic.component.js';
+//# sourceMappingURL=seat-reservation-graphic.d.ts.map

package/seat-reservation/seat-reservation-graphic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"seat-reservation-graphic.d.ts","sourceRoot":"","sources":["../../../src/elements-experimental/seat-reservation/seat-reservation-graphic.ts"],"names":[],"mappings":"AAAA,cAAc,kEAAkE,CAAC"}

package/seat-reservation/seat-reservation-graphic.js

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

package/seat-reservation/seat-reservation-navigation/seat-reservation-navigation-coach/seat-reservation-navigation-coach.component.d.ts

@@ -0,0 +1,65 @@
+import { EventEmitter } from '@sbb-esta/lyne-elements/core/eventing.js';
+import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
+import { PlaceTravelClass } from '../../seat-reservation.js';
+/**
+ * This component will display the navigation coach item for Seat reservation.
+ *
+ * @event {CustomEvent<T>} selectCoach - Emits when a coach within the navigation was selected and returns the clicked coach nav index
+ * @event {CustomEvent<T>} focusCoach -  Emits when a nav coach has the focus
+ */
+export declare class SbbSeatReservationNavigationCoachElement extends LitElement {
+    static styles: CSSResultGroup;
+    static readonly events: {
+        readonly selectCoach: "selectCoach";
+        readonly focusCoach: "focusCoach";
+    };
+    /** Coach ID, which is used to identify the coach in the navigation */
+    accessor coachId: string;
+    /** Coach service property ids, which are used to display the services in the navigation */
+    accessor propertyIds: string[];
+    accessor selected: boolean;
+    accessor focused: boolean;
+    accessor index: number;
+    /** Travel class of the coach */
+    accessor travelClass: PlaceTravelClass[];
+    /** If the coach is a driver/restricted area */
+    accessor driverArea: boolean;
+    /** If the coach is the first in the navigation */
+    accessor first: boolean;
+    /** If the coach is the last in the navigation */
+    accessor last: boolean;
+    /** Disable the coach navigation */
+    accessor disable: boolean;
+    /** If the coach navigation should be displayed vertically */
+    accessor vertical: boolean;
+    private _language;
+    /** Emits when a coach within the navigation was selected */
+    protected selectNavCoach: EventEmitter;
+    protected focusNavCoach: EventEmitter;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    /**
+     * Render a maximum of 3 of the service sign icons (slice(0,3)) regardless of the input from Backend,
+     * otherwise the layout could be destroyed. Furthermore, we have to filter out the value ANY_SEAT,
+     * since this is also passed as a property and does not need to be used here
+     *
+     * @protected
+     */
+    protected render(): TemplateResult;
+    private _getNavigationButton;
+    private _getBtnInformation;
+    private _getTitleDescriptionNavCoachButton;
+    private _getAriaDescriptionCoachServices;
+    /**
+     * emits the index of the coach array for the main navigation.
+     * @param coachIndex
+     * @private
+     */
+    private _selectNavCoach;
+    private _getCoachServiceClassNumber;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-seat-reservation-navigation-coach': SbbSeatReservationNavigationCoachElement;
+    }
+}
+//# sourceMappingURL=seat-reservation-navigation-coach.component.d.ts.map

package/seat-reservation/seat-reservation-navigation/seat-reservation-navigation-coach/seat-reservation-navigation-coach.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"seat-reservation-navigation-coach.component.d.ts","sourceRoot":"","sources":["../../../../../src/elements-experimental/seat-reservation/seat-reservation-navigation/seat-reservation-navigation-coach/seat-reservation-navigation-coach.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,0CAA0C,CAAC;AACxE,OAAO,EAAE,KAAK,cAAc,EAAW,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAC7F,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAIlE,OAAO,+CAA+C,CAAC;AACvD,OAAO,4CAA4C,CAAC;AAIpD;;;;;GAKG;AACH,qBAEM,wCAAyC,SAAQ,UAAU;IAC/D,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;MAGlB;IAEX,sEAAsE;IACtE,SAEgB,OAAO,EAAE,MAAM,CAAM;IAErC,2FAA2F;IAC3F,SACgB,WAAW,EAAE,MAAM,EAAE,CAAM;IAG3C,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAG1C,SAEgB,OAAO,EAAE,OAAO,CAAS;IAEzC,SAEgB,KAAK,EAAE,MAAM,CAAK;IAElC,gCAAgC;IAChC,SACgB,WAAW,EAAE,gBAAgB,EAAE,CAAiB;IAEhE,+CAA+C;IAC/C,SAEgB,UAAU,EAAE,OAAO,CAAS;IAE5C,kDAAkD;IAClD,SAEgB,KAAK,EAAE,OAAO,CAAS;IAEvC,iDAAiD;IACjD,SAEgB,IAAI,EAAE,OAAO,CAAS;IAEtC,mCAAmC;IACnC,SAEgB,OAAO,EAAE,OAAO,CAAS;IAEzC,6DAA6D;IAC7D,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAE1C,OAAO,CAAC,SAAS,CAAmC;IAEpD,4DAA4D;IAC5D,SAAS,CAAC,cAAc,EAAE,YAAY,CAGpC;IACF,SAAS,CAAC,aAAa,EAAE,YAAY,CAGnC;cAEiB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAuB5E;;;;;;OAMG;cACgB,MAAM,IAAI,cAAc;IAyB3C,OAAO,CAAC,oBAAoB;IAwB5B,OAAO,CAAC,kBAAkB;IA4B1B,OAAO,CAAC,kCAAkC;IA4B1C,OAAO,CAAC,gCAAgC;IAYxC;;;;OAIG;IACH,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,2BAA2B;CASpC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,uCAAuC,EAAE,wCAAwC,CAAC;KACnF;CACF"}