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

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

@@ -0,0 +1,292 @@
+import { html as d } from "lit";
+import { unsafeHTML as r } from "lit/directives/unsafe-html.js";
+import { mapIconToSvg as A } from "../common.js";
+import "@sbb-esta/lyne-elements/table.js";
+import "../seat-reservation-graphic.js";
+import "../seat-reservation-area/seat-reservation-area.component.js";
+const E = (e) => d`
+    <div class="story-asset">
+      <span class="story-asset__preview">${r(e)}</span>
+    </div>
+  `, t = (e) => A[e]?.svg ? E(A[e].svg) : A[e]?.svgName ? d`<sbb-icon name="${A[e].svgName}"></sbb-icon>` : null, a = 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>
+`, s = 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>
+`, _ = 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("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>
+`, l = 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_TRAIN")}</td>
+          <td>Driver Area<br />(Dependent on Vehicle-Type: TRAIN)</td>
+          <td>DRIVER_AREA</td>
+        </tr>
+        <tr>
+          <td>${t("DRIVER_AREA_BUS")}</td>
+          <td>Driver Area<br />(Dependent on Vehicle-Type: BUS)</td>
+          <td>DRIVER_AREA</td>
+        </tr>
+        <tr>
+          <td>${t("COMPARTMENT_PASSAGE_HIGH")}</td>
+          <td>Compartment Passage High</td>
+          <td>COMPARTMENT_PASSAGE_HIGH</td>
+        </tr>
+        <tr>
+          <td>${t("COMPARTMENT_PASSAGE")}</td>
+          <td>Compartment Passage</td>
+          <td>COMPARTMENT_PASSAGE</td>
+        </tr>
+        <tr>
+          <td>${t("COMPARTMENT_PASSAGE_LOW")}</td>
+          <td>Compartment Passage Low</td>
+          <td>COMPARTMENT_PASSAGE_LOW</td>
+        </tr>
+        <tr>
+          <td>${t("COACH_PASSAGE")}</td>
+          <td>Coach Passage</td>
+          <td>COACH_PASSAGE</td>
+        </tr>
+        <tr>
+          <td>${t("COMPARTMENT_WALL")}</td>
+          <td>Compartment Wall</td>
+          <td>COMPARTMENT_WALL</td>
+        </tr>
+        <tr>
+          <td>
+            <sbb-seat-reservation-area
+              style="--sbb-seat-reservation-area-width: 100; --sbb-seat-reservation-area-height: 50; align-self: center;
+          background: var(--sbb-color-milk)"
+            ></sbb-seat-reservation-area>
+          </td>
+          <td>Table Restaurant<br />(Will be rendered as CSS)</td>
+          <td>TABLE_RESTAURANT</td>
+        </tr>
+        <tr>
+          <td>${t("COACH_WALL_NO_PASSAGE")}</td>
+          <td>Coach Wall No Passage</td>
+          <td>COACH_WALL_NO_PASSAGE</td>
+        </tr>
+      </tbody>
+    </table>
+  </sbb-table-wrapper>
+`, L = 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>
+  ${a}
+  <h2>Layout</h2>
+  ${s}
+  <h2>Service Icons</h2>
+  ${_}
+  <h2>Chassis</h2>
+  ${l}
+`;
+export {
+  L as assetsTemplate,
+  t as svgImageByOSDMCode
+};

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

@@ -0,0 +1,73 @@
+var E = (t) => {
+  throw TypeError(t);
+};
+var z = (t, r, s) => r.has(t) || E("Cannot " + s);
+var g = (t, r, s) => (z(t, r, "read from private field"), s ? s.call(t) : r.get(t)), v = (t, r, s) => r.has(t) ? E("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(t) : r.set(t, s), b = (t, r, s, i) => (z(t, r, "write to private field"), i ? i.call(t, s) : r.set(t, s), s);
+import { __runInitializers as h, __esDecorate as p } from "tslib";
+import { SbbLanguageController as k } from "@sbb-esta/lyne-elements/core/controllers.js";
+import { forceType as I } from "@sbb-esta/lyne-elements/core/decorators.js";
+import { boxSizingStyles as $ } from "@sbb-esta/lyne-elements/core/styles.js";
+import { css as j, LitElement as D, html as u, isServer as O } from "lit";
+import { customElement as C, property as N } from "lit/decorators.js";
+import { classMap as L } from "lit/directives/class-map.js";
+import { mapIconToSvg as R, getI18nSeatReservation as T } from "../common.js";
+import "@sbb-esta/lyne-elements/icon.js";
+const A = j`:host{--sbb-seat-reservation-graphic-width: 16;--sbb-seat-reservation-graphic-height: 16;--sbb-seat-reservation-graphic-rotation: 0;--sbb-seat-reservation-graphic-inverse-rotation: 0;--sbb-seat-reservation-graphic-position: initial;--sbb-seat-reservation-graphic-left: 0;--sbb-seat-reservation-graphic-top: 0;--sbb-icon-svg-width: calc( var(--sbb-seat-reservation-graphic-width) * var(--sbb-seat-reservation-one-px-rem, .0625rem) );--sbb-icon-svg-height: calc( var(--sbb-seat-reservation-graphic-height) * var(--sbb-seat-reservation-one-px-rem, .0625rem) );display:flex;justify-content:center;align-items:center;width:calc(var(--sbb-seat-reservation-graphic-width) * var(--sbb-seat-reservation-one-px-rem, .0625rem));height:calc(var(--sbb-seat-reservation-graphic-height) * var(--sbb-seat-reservation-one-px-rem, .0625rem));position:var(--sbb-seat-reservation-graphic-position);inset-inline-start:calc(var(--sbb-seat-reservation-graphic-left) * var(--sbb-seat-reservation-one-px-rem, .0625rem));inset-block-start:calc(var(--sbb-seat-reservation-graphic-top) * var(--sbb-seat-reservation-one-px-rem, .0625rem))}:host(.auto-width){--sbb-icon-svg-width: auto;max-width:calc(var(--sbb-seat-reservation-graphic-max-width) * var(--sbb-seat-reservation-one-px-rem, .0625rem));width:auto}:host(.sbb-seat-reservation-graphic--cursor-pointer){cursor:var(--sbb-cursor-pointer)}.sbb-sr-icon,.sbb-sr-graphic{width:inherit;height:inherit;transform-origin:center;rotate:calc(var(--sbb-seat-reservation-graphic-rotation) * 1deg)}.sbb-sr-icon{color:var(--sbb-color-granite);color:light-dark(var(--sbb-color-granite),var(--sbb-color-graphite))}.sbb-sr-graphic svg{width:100%;height:100%}.sbb-sr-graphic svg .fix-rotation-inverse{transform-origin:center;rotate:calc(var(--sbb-seat-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 V = (() => {
+  var o, c, n;
+  let t = [C("sbb-seat-reservation-graphic")], r, s = [], i, d = D, f, _ = [], x = [], S, w = [], y = [];
+  return n = class extends d {
+    constructor() {
+      super(...arguments);
+      v(this, o);
+      v(this, c);
+      b(this, o, h(this, _, "")), b(this, c, (h(this, x), h(this, w, !1))), this._language = (h(this, y), new k(this));
+    }
+    /** Name of the SVG graphic to be displayed. */
+    get name() {
+      return g(this, o);
+    }
+    set name(e) {
+      b(this, o, e);
+    }
+    /** if true, scale the graphic content of the given element non-uniformly if necessary */
+    get stretch() {
+      return g(this, c);
+    }
+    set stretch(e) {
+      b(this, c, e);
+    }
+    render() {
+      const e = R[this.name];
+      return !e?.svg && !e?.svgName ? null : u`<span
+      class="${L({
+        "sbb-sr-icon": !!e.svgName,
+        "sbb-sr-graphic": !!e.svg
+      })}"
+    >
+      ${e.svgName ? u` <sbb-icon
+            name="${e.svgName || ""}"
+            aria-hidden="false"
+            aria-label="${T(e.svgName, this._language.current)}"
+          ></sbb-icon>` : u`${this._getSvgElement(e.svg)}`}
+    </span>`;
+    }
+    _getSvgElement(e) {
+      if (!O) {
+        const a = new DOMParser(), l = e || "<svg></svg>", m = a.parseFromString(l, "image/svg+xml").firstElementChild;
+        return this.stretch && m?.nodeName.toLowerCase() === "svg" && m.setAttribute("preserveAspectRatio", "none"), m;
+      }
+      return null;
+    }
+  }, o = new WeakMap(), c = new WeakMap(), i = n, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(d[Symbol.metadata] ?? null) : void 0;
+    f = [I(), N({ attribute: "name" })], S = [I(), N({ attribute: "stretch", type: Boolean })], p(n, null, f, { kind: "accessor", name: "name", static: !1, private: !1, access: { has: (a) => "name" in a, get: (a) => a.name, set: (a, l) => {
+      a.name = l;
+    } }, metadata: e }, _, x), p(n, null, S, { kind: "accessor", name: "stretch", static: !1, private: !1, access: { has: (a) => "stretch" in a, get: (a) => a.stretch, set: (a, l) => {
+      a.stretch = l;
+    } }, metadata: e }, w, y), p(null, r = { value: i }, t, { kind: "class", name: i.name, metadata: e }, null, s), i = r.value, e && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), n.styles = [$, A], h(i, s), i;
+})();
+export {
+  V as SbbSeatReservationGraphicElement
+};

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