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

package/pearl-chain/pearl-chain.component.js

@@ -0,0 +1,164 @@
+var X = (t) => {
+  throw TypeError(t);
+};
+var q = (t, l, n) => l.has(t) || X("Cannot " + n);
+var E = (t, l, n) => (q(t, l, "read from private field"), n ? n.call(t) : l.get(t)), P = (t, l, n) => l.has(t) ? X("Cannot add the same private member more than once") : l instanceof WeakSet ? l.add(t) : l.set(t, n), m = (t, l, n, p) => (q(t, l, "write to private field"), p ? p.call(t, n) : l.set(t, n), n);
+import { __runInitializers as v, __esDecorate as w } from "tslib";
+import { defaultDateAdapter as K } from "@sbb-esta/lyne-elements/core/datetime.js";
+import { forceType as pe } from "@sbb-esta/lyne-elements/core/decorators.js";
+import { boxSizingStyles as he } from "@sbb-esta/lyne-elements/core/styles.js";
+import { css as de, LitElement as ue, html as f, nothing as Q } from "lit";
+import { customElement as _e, property as I } from "lit/decorators.js";
+import { styleMap as U } from "lit/directives/style-map.js";
+import { removeTimezoneFromISOTimeString as o } from "../core/datetime.js";
+import { isRideLeg as ge } from "../core/timetable.js";
+import { d as z, a as x } from "../differenceInMinutes-COvvdYsJ.js";
+import { t as S } from "../toDate-Bw2KTWeq.js";
+function ve(t, l) {
+  return +S(t) > +S(l);
+}
+function Z(t, l) {
+  return +S(t) < +S(l);
+}
+const me = de`:host{--sbb-pearl-chain-height: var(--sbb-border-width-2x);--sbb-pearl-chain-spacing-small: .125rem;--sbb-pearl-chain-color: var(--sbb-pearl-chain-bullet-color);--sbb-pearl-chain-color-disruption: var(--sbb-pearl-chain-bullet-color-disruption);--sbb-pearl-chain-color-past: var(--sbb-pearl-chain-bullet-color-past);--sbb-pearl-chain-leg-width: 100%;display:block;--sbb-pearl-chain-bullet-size-start-end: .625rem;--sbb-pearl-chain-bullet-size-stop: .5rem;--sbb-pearl-chain-bullet-color: var(--sbb-background-color-3-inverted);--sbb-pearl-chain-bullet-color-past: var(--sbb-color-metal);--sbb-pearl-chain-bullet-color-past: light-dark(var(--sbb-color-metal), var(--sbb-color-granite));--sbb-pearl-chain-bullet-color-irrelevant: var(--sbb-color-metal);--sbb-pearl-chain-bullet-color-irrelevant: light-dark( var(--sbb-color-metal), var(--sbb-color-granite) );--sbb-pearl-chain-bullet-color-disruption: var(--sbb-color-primary);--sbb-pearl-chain-bullet-border-width: var(--sbb-border-width-2x);--sbb-pearl-chain-bullet-animation-duration: 1.92s;--sbb-pearl-chain-bullet-animation-easing: ease-out;--sbb-pearl-chain-bullet-crossed-width: .88375rem;--sbb-pearl-chain-bullet-crossed-height: .21875rem;--sbb-pearl-chain-bullet-crossed-border-width: .09375rem}.sbb-pearl-chain{position:relative;display:flex;justify-content:space-between;flex-wrap:nowrap;color:var(--sbb-pearl-chain-color);width:100%;padding-block:calc((var(--sbb-pearl-chain-bullet-size-start-end) - var(--sbb-pearl-chain-height)) / 2);padding-inline-end:var(--sbb-pearl-chain-bullet-size-start-end)}.sbb-pearl-chain__bullet{min-height:var(--sbb-pearl-chain-bullet-size-start-end);min-width:var(--sbb-pearl-chain-bullet-size-start-end);height:var(--sbb-pearl-chain-bullet-size-start-end);width:var(--sbb-pearl-chain-bullet-size-start-end);background:var(--sbb-pearl-chain-bullet-color);color:var(--sbb-pearl-chain-bullet-color);border-color:var(--sbb-pearl-chain-bullet-color);border-radius:100%}@media(forced-colors:active){.sbb-pearl-chain__bullet{--sbb-pearl-chain-bullet-color: CanvasText}}.sbb-pearl-chain__bullet{content:"";position:absolute;background-color:currentcolor;inset-block-start:0;z-index:3}.sbb-pearl-chain__bullet:first-of-type{inset-inline-start:0}.sbb-pearl-chain__bullet:last-of-type{inset-inline-end:0}.sbb-pearl-chain__leg{flex-shrink:0;flex-grow:0;position:relative;height:var(--sbb-pearl-chain-height);border-inline-end:var(--sbb-pearl-chain-spacing-small) solid Canvas;background-color:currentcolor;width:var(--sbb-pearl-chain-leg-width);display:flex;align-items:center}@media(forced-colors:active){.sbb-pearl-chain__leg{background-color:CanvasText}.sbb-pearl-chain--past .sbb-pearl-chain__leg{background-color:GrayText}}.sbb-pearl-chain__leg:last-of-type{border:none}.sbb-pearl-chain__stop{position:relative;z-index:2;background:var(--sbb-pearl-chain-bullet-color);color:var(--sbb-pearl-chain-bullet-color);border-color:var(--sbb-pearl-chain-bullet-color);border-radius:100%}@media(forced-colors:active){.sbb-pearl-chain__stop{--sbb-pearl-chain-bullet-color: CanvasText}}.sbb-pearl-chain__stop{min-height:var(--sbb-pearl-chain-bullet-size-stop);min-width:var(--sbb-pearl-chain-bullet-size-stop);height:var(--sbb-pearl-chain-bullet-size-stop);width:var(--sbb-pearl-chain-bullet-size-stop);border:var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;background:Canvas}.sbb-pearl-chain__bullet--future{background:var(--sbb-pearl-chain-bullet-color);color:var(--sbb-pearl-chain-bullet-color);border-color:var(--sbb-pearl-chain-bullet-color);border-radius:100%}@media(forced-colors:active){.sbb-pearl-chain__bullet--future{--sbb-pearl-chain-bullet-color: CanvasText}}.sbb-pearl-chain__leg--past,.sbb-pearl-chain--past,.sbb-pearl-chain__leg--past:after,.sbb-pearl-chain__leg--progress:after,.sbb-pearl-chain__leg--progress .sbb-pearl-chain__stop,.sbb-pearl-chain--progress,.sbb-pearl-chain__bullet--past{color:var(--sbb-pearl-chain-color-past);--sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-past)}@media(forced-colors:active){.sbb-pearl-chain__leg--past,.sbb-pearl-chain--past,.sbb-pearl-chain__leg--past:after,.sbb-pearl-chain__leg--progress:after,.sbb-pearl-chain__leg--progress .sbb-pearl-chain__stop,.sbb-pearl-chain--progress,.sbb-pearl-chain__bullet--past{--sbb-pearl-chain-bullet-color: GrayText !important}}@media(forced-colors:active){.sbb-pearl-chain__leg--past,.sbb-pearl-chain--past,.sbb-pearl-chain__leg--past:after,.sbb-pearl-chain__leg--progress:after,.sbb-pearl-chain__leg--progress .sbb-pearl-chain__stop,.sbb-pearl-chain--progress,.sbb-pearl-chain__bullet--past{background-color:GrayText!important}}.sbb-pearl-chain__bullet--progress{background:var(--sbb-pearl-chain-bullet-color);--sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-past)}@media(forced-colors:active){.sbb-pearl-chain__bullet--progress{--sbb-pearl-chain-bullet-color: GrayText !important}}.sbb-pearl-chain__bullet--departure-disruption,.sbb-pearl-chain--arrival-disruption,.sbb-pearl-chain--departure-disruption,.sbb-pearl-chain__leg--disruption{color:var(--sbb-pearl-chain-color-disruption);--sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-disruption)}@media(forced-colors:active){.sbb-pearl-chain__bullet--departure-disruption,.sbb-pearl-chain--arrival-disruption,.sbb-pearl-chain--departure-disruption,.sbb-pearl-chain__leg--disruption{--sbb-pearl-chain-bullet-color: Highlight}}@media(forced-colors:active){.sbb-pearl-chain__bullet--departure-disruption,.sbb-pearl-chain--arrival-disruption,.sbb-pearl-chain--departure-disruption,.sbb-pearl-chain__leg--disruption{color:Highlight;background:Highlight}}.sbb-pearl-chain__leg--disruption .sbb-pearl-chain__stop{--sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-disruption)}@media(forced-colors:active){.sbb-pearl-chain__leg--disruption .sbb-pearl-chain__stop{--sbb-pearl-chain-bullet-color: Highlight}}.sbb-pearl-chain__leg--past .sbb-pearl-chain__stop{--sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-past)}@media(forced-colors:active){.sbb-pearl-chain__leg--past .sbb-pearl-chain__stop{--sbb-pearl-chain-bullet-color: GrayText !important}}.sbb-pearl-chain__leg--disruption:after{background-color:unset;background-image:linear-gradient(to right,currentcolor 0%,currentcolor 50%,Canvas 50%);background-repeat:repeat-x;background-size:calc(2 * var(--sbb-pearl-chain-spacing-small)) var(--sbb-pearl-chain-height);inset-inline-end:var(--sbb-pearl-chain-height)}@media(forced-colors:active){.sbb-pearl-chain__leg--disruption:after{background:unset;border-block-start:.0625rem dashed Highlight;transform:translateY(.0625rem)}}.sbb-pearl-chain__leg--skipped{color:var(--sbb-pearl-chain-color-disruption)}.sbb-pearl-chain__leg--skipped:after{background-color:unset;background-image:linear-gradient(to right,currentcolor 0%,currentcolor 50%,Canvas 50%);background-repeat:repeat-x;background-size:calc(2 * var(--sbb-pearl-chain-spacing-small)) var(--sbb-pearl-chain-height);inset-inline-end:var(--sbb-pearl-chain-height)}@media(forced-colors:active){.sbb-pearl-chain__leg--skipped:after{background:unset;border-block-start:.0625rem dashed Highlight;transform:translateY(.0625rem)}}.sbb-pearl-chain__stop--departure-skipped{min-height:var(--sbb-pearl-chain-bullet-size-stop);min-width:var(--sbb-pearl-chain-bullet-size-stop);height:var(--sbb-pearl-chain-bullet-size-stop);width:var(--sbb-pearl-chain-bullet-size-stop);border:var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;background:Canvas}.sbb-pearl-chain__stop--departure-skipped:before{content:"";position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%) rotate(45deg);border-block-start:var(--sbb-pearl-chain-bullet-crossed-border-width) solid canvas;background:var(--sbb-pearl-chain-bullet-color-disruption);height:var(--sbb-pearl-chain-bullet-crossed-height);width:var(--sbb-pearl-chain-bullet-crossed-width)}@media(forced-colors:active){.sbb-pearl-chain__stop--departure-skipped:before{background:Highlight}}.sbb-pearl-chain--arrival-skipped,.sbb-pearl-chain--departure-skipped{min-height:var(--sbb-pearl-chain-bullet-size-start-end);min-width:var(--sbb-pearl-chain-bullet-size-start-end);height:var(--sbb-pearl-chain-bullet-size-start-end);width:var(--sbb-pearl-chain-bullet-size-start-end);border:var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;background:Canvas}.sbb-pearl-chain--arrival-skipped:before,.sbb-pearl-chain--departure-skipped:before{content:"";position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%) rotate(45deg);border-block-start:var(--sbb-pearl-chain-bullet-crossed-border-width) solid canvas;background:var(--sbb-pearl-chain-bullet-color-disruption);height:var(--sbb-pearl-chain-bullet-crossed-height);width:var(--sbb-pearl-chain-bullet-crossed-width)}@media(forced-colors:active){.sbb-pearl-chain--arrival-skipped:before,.sbb-pearl-chain--departure-skipped:before{background:Highlight}}.sbb-pearl-chain__leg:after{content:"";position:absolute;inset-block:0;inset-inline-start:0;background-color:currentcolor;border-radius:var(--sbb-pearl-chain-height);z-index:1}@media(forced-colors:active){.sbb-pearl-chain__leg:after{background-color:CanvasText}.sbb-pearl-chain--past .sbb-pearl-chain__leg:after{background-color:GrayText}}.sbb-pearl-chain__leg:last-of-type:after{inset-inline-end:calc(-1 * var(--sbb-pearl-chain-height))}.sbb-pearl-chain__leg--progress:after{background-color:var(--sbb-pearl-chain-color-past);width:var(--sbb-pearl-chain-leg-status)}.sbb-pearl-chain__position{min-height:var(--sbb-pearl-chain-bullet-size-start-end);min-width:var(--sbb-pearl-chain-bullet-size-start-end);height:var(--sbb-pearl-chain-bullet-size-start-end);width:var(--sbb-pearl-chain-bullet-size-start-end);background:var(--sbb-pearl-chain-bullet-color);color:var(--sbb-pearl-chain-bullet-color);border-color:var(--sbb-pearl-chain-bullet-color);border-radius:100%}@media(forced-colors:active){.sbb-pearl-chain__position{--sbb-pearl-chain-bullet-color: CanvasText}}.sbb-pearl-chain__position{--sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-disruption)}@media(forced-colors:active){.sbb-pearl-chain__position{--sbb-pearl-chain-bullet-color: Highlight}}@keyframes pearl-chain-bullet-position-pulse{0%{box-shadow:0 0 0 0 var(--sbb-pearl-chain-bullet-color-disruption)}25%{box-shadow:0 0 0 0 var(--sbb-pearl-chain-bullet-color-disruption)}50%{box-shadow:0 0 0 .1875rem color-mix(in srgb,var(--sbb-color-primary) 20%,transparent)}to{box-shadow:0 0 0 0 var(--sbb-pearl-chain-bullet-color-disruption)}}.sbb-pearl-chain__position{animation:pearl-chain-bullet-position-pulse var(--sbb-pearl-chain-bullet-animation-duration) var(--sbb-pearl-chain-bullet-animation-easing) infinite;position:absolute;inset-block-start:-200%;z-index:4;inset-inline-start:var(--sbb-pearl-chain-status-position)}.sbb-pearl-chain__position--no-animation{animation:unset}.sbb-screen-reader-only{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
+let Pe = (() => {
+  var _, g, h;
+  let t = [_e("sbb-pearl-chain")], l, n = [], p, H = ue, O = [], J, R = [], L = [], W, G = [], V = [], B;
+  return h = class extends H {
+    constructor() {
+      super(...arguments);
+      P(this, _);
+      P(this, g);
+      m(this, _, (v(this, O), v(this, R, []))), m(this, g, (v(this, L), v(this, G, !1))), this._now = (v(this, V), null);
+    }
+    /**
+     * Define the legs of the pearl-chain.
+     * Format:
+     * `{"legs": [{"duration": 25}, ...]}`
+     * `duration` in minutes. Duration of the leg is relative
+     * to the total travel time. Example: departure 16:30, change at 16:40,
+     * arrival at 17:00. So the change should have a duration of 33.33%.
+     */
+    get legs() {
+      return E(this, _);
+    }
+    set legs(a) {
+      m(this, _, a);
+    }
+    /**
+     * Per default, the current location has a pulsating animation. You can
+     * disable the animation with this property.
+     */
+    get disableAnimation() {
+      return E(this, g);
+    }
+    set disableAnimation(a) {
+      m(this, g, a);
+    }
+    /**
+     * A configured date which acts as the current date instead of the real current date.
+     * Only recommended for testing purposes.
+     */
+    set now(a) {
+      this._now = K.getValidDateOrNull(K.deserialize(a));
+    }
+    get now() {
+      return this._now;
+    }
+    _getAllDuration(a) {
+      return a?.reduce((e, r) => {
+        const i = o(r.arrival?.time), s = o(r.departure?.time);
+        return i && s ? e + z(o(r.arrival.time), o(r.departure.time)) : e;
+      }, 0);
+    }
+    _isAllCancelled(a) {
+      return a?.every((e) => e?.serviceJourney?.serviceAlteration?.cancelled);
+    }
+    _getRelativeDuration(a, e) {
+      const r = o(e.arrival?.time), i = o(e.departure?.time);
+      if (r && i) {
+        const s = z(o(e.arrival.time), o(e.departure.time)), b = this._getAllDuration(a);
+        return b === 0 ? 100 : s / b * 100;
+      }
+      return 0;
+    }
+    _getProgress(a, e, r) {
+      if (!e?.time || !r?.time)
+        return 0;
+      const i = x(e.time, e.delay ?? 0), s = x(r.time, r.delay ?? 0), b = z(s, i), D = z(a, i);
+      return b && D / b * 100;
+    }
+    _getStatus(a, e, r) {
+      const i = e && e.time && x(e.time, e.delay ?? 0), s = r && r.time && x(r.time, r.delay ?? 0);
+      return i && Z(i, a) && s && ve(s, a) ? "progress" : s && Z(s, a) ? "past" : "future";
+    }
+    _renderPosition(a, e, r) {
+      const i = this._getProgress(a, e, r);
+      if (i < 0 && i > 100)
+        return;
+      const s = () => ({
+        "--sbb-pearl-chain-status-position": `${i}%`,
+        ...i >= 50 ? { transform: "translateX(-100%)" } : {}
+      }), b = this.disableAnimation ? "sbb-pearl-chain__position--no-animation" : "";
+      return f`<span
+      style=${U(s())}
+      class="sbb-pearl-chain__position ${b}"
+    ></span>`;
+    }
+    render() {
+      const a = this.now ?? /* @__PURE__ */ new Date(), e = this.legs?.filter((c) => ge(c)), r = e?.length && o(e[0]?.departure?.time), i = r && {
+        time: r,
+        delay: e[0].departure.delay ?? 0
+      }, s = e?.length && o(e[e.length - 1].arrival?.time), b = s && {
+        time: s,
+        delay: e[e.length - 1]?.arrival.delay ?? 0
+      }, D = e && e[0]?.serviceJourney?.stopPoints && e[0]?.serviceJourney?.stopPoints[0].stopStatus === "NOT_SERVICED" ? "sbb-pearl-chain--departure-skipped" : "", ee = (() => {
+        const c = e && e[e.length - 1], d = c && c.serviceJourney?.stopPoints;
+        return d && d[d.length - 1].stopStatus === "NOT_SERVICED" ? "sbb-pearl-chain--arrival-skipped" : "";
+      })(), j = e && e[0]?.serviceJourney?.serviceAlteration?.cancelled ? "sbb-pearl-chain--departure-disruption" : "", M = e && e[e.length - 1]?.serviceJourney?.serviceAlteration?.cancelled ? "sbb-pearl-chain--arrival-disruption" : "", A = i && b && this._getStatus(a, i, b), ae = e && A && !j ? "sbb-pearl-chain__bullet--" + A : "", re = e && A && !M ? "sbb-pearl-chain__bullet--" + this._getStatus(a, void 0, b) : "";
+      return this._isAllCancelled(e) ? f`
+        <div class="sbb-pearl-chain">
+          <span class="sbb-pearl-chain__bullet sbb-pearl-chain--departure-disruption"></span>
+          <div class="sbb-pearl-chain__leg sbb-pearl-chain__leg--disruption"></div>
+          <span class="sbb-pearl-chain__bullet sbb-pearl-chain--departure-disruption"></span>
+        </div>
+      ` : f`
+      <div class="sbb-pearl-chain">
+        <span
+          class="sbb-pearl-chain__bullet ${ae} ${D} ${j}"
+        ></span>
+        ${e?.map((c, d) => {
+        const { stopPoints: u, serviceAlteration: Y } = c?.serviceJourney || {}, te = this._getRelativeDuration(e, c), le = o(c.departure?.time), ie = o(c.arrival?.time), se = u && u[u.length - 1]?.stopStatus === "NOT_SERVICED", ne = u && u[u.length - 1]?.stopStatus === "PLANNED", F = u && u[0]?.stopStatus === "NOT_SERVICED", T = d > 0 && e[d - 1].serviceJourney.stopPoints, oe = T && T[T.length - 1]?.stopStatus === "NOT_SERVICED", k = se || F && ne ? "sbb-pearl-chain__leg--skipped" : "", be = F || oe ? "sbb-pearl-chain__stop--departure-skipped" : "", y = Y?.cancelled || Y?.partiallyCancelled ? "sbb-pearl-chain__leg--disruption" : "", C = { time: le, delay: c.departure?.delay ?? 0 }, $ = { time: ie, delay: c.arrival?.delay ?? 0 }, N = this._getStatus(a, C, $), ce = !y && !k && "sbb-pearl-chain__leg--" + N;
+        return f` <div
+            class="sbb-pearl-chain__leg ${ce || ""} ${y} ${k}"
+            style=${U({
+          "--sbb-pearl-chain-leg-width": `${te}%`,
+          ...N === "progress" && !y && !k ? {
+            "--sbb-pearl-chain-leg-status": `${this._getProgress(a, C, $)}%`
+          } : {}
+        })}
+          >
+            ${d > 0 && d < e.length ? f`<span class="sbb-pearl-chain__stop ${be}"></span>` : Q}
+            ${N === "progress" && !y && !k ? this._renderPosition(a, C, $) : Q}
+          </div>`;
+      })}
+        <span
+          class="sbb-pearl-chain__bullet ${re} ${ee} ${M}"
+        ></span>
+      </div>
+    `;
+    }
+  }, _ = new WeakMap(), g = new WeakMap(), p = h, (() => {
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(H[Symbol.metadata] ?? null) : void 0;
+    J = [I({ type: Array })], W = [pe(), I({ attribute: "disable-animation", type: Boolean })], B = [I()], w(h, null, J, { kind: "accessor", name: "legs", static: !1, private: !1, access: { has: (e) => "legs" in e, get: (e) => e.legs, set: (e, r) => {
+      e.legs = r;
+    } }, metadata: a }, R, L), w(h, null, W, { kind: "accessor", name: "disableAnimation", static: !1, private: !1, access: { has: (e) => "disableAnimation" in e, get: (e) => e.disableAnimation, set: (e, r) => {
+      e.disableAnimation = r;
+    } }, metadata: a }, G, V), w(h, null, B, { kind: "setter", name: "now", static: !1, private: !1, access: { has: (e) => "now" in e, set: (e, r) => {
+      e.now = r;
+    } }, metadata: a }, null, O), w(null, l = { value: p }, t, { kind: "class", name: p.name, metadata: a }, null, n), p = l.value, a && Object.defineProperty(p, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
+  })(), h.styles = [he, me], v(p, n), p;
+})();
+export {
+  Pe as SbbPearlChainElement
+};

package/pearl-chain-time/pearl-chain-time.component.js

@@ -0,0 +1,156 @@
+var Q = (a) => {
+  throw TypeError(a);
+};
+var U = (a, s, o) => s.has(a) || Q("Cannot " + o);
+var h = (a, s, o) => (U(a, s, "read from private field"), o ? o.call(a) : s.get(a)), p = (a, s, o) => s.has(a) ? Q("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(a) : s.set(a, o), n = (a, s, o, m) => (U(a, s, "write to private field"), m ? m.call(a, o) : s.set(a, o), o);
+import { __runInitializers as r, __esDecorate as c } from "tslib";
+import { SbbLanguageController as ae } from "@sbb-esta/lyne-elements/core/controllers.js";
+import { defaultDateAdapter as X } from "@sbb-esta/lyne-elements/core/datetime.js";
+import { forceType as x } from "@sbb-esta/lyne-elements/core/decorators.js";
+import { i18nDeparture as ie, i18nTransferProcedures as re, i18nArrival as se } from "@sbb-esta/lyne-elements/core/i18n.js";
+import { boxSizingStyles as le } from "@sbb-esta/lyne-elements/core/styles.js";
+import { css as ne, LitElement as oe, nothing as w, html as k } from "lit";
+import { customElement as me, property as b } from "lit/decorators.js";
+import { removeTimezoneFromISOTimeString as Y } from "../core/datetime.js";
+import { getDepartureArrivalTimeAttribute as ce, isRideLeg as he } from "../core/timetable.js";
+import "../pearl-chain.js";
+import { f as Z } from "../format-CmKROkbc.js";
+const pe = ne`:host{display:block;--sbb-pearl-chain-time-height: auto}@media(min-width:37.5rem){:host{--sbb-pearl-chain-time-height: 1.5625rem}}@media(min-width:64rem){:host{--sbb-pearl-chain-time-height: 1.75rem}}.sbb-pearl-chain__time{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;height:var(--sbb-pearl-chain-time-height)}.sbb-pearl-chain__time-walktime,.sbb-pearl-chain__time-transfer{--sbb-text-font-size: var(--sbb-text-font-size-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);display:inline-flex;align-items:center}.sbb-pearl-chain__time-walktime--walk-small-left{transform:translate(-.4375rem);margin-inline-end:calc(var(--sbb-spacing-fixed-2x) - .4375rem)}.sbb-pearl-chain__time-walktime--walk-small-right{margin-inline-start:calc(var(--sbb-spacing-fixed-2x) - .25rem)}.sbb-pearl-chain__time-walktime--wheelchair-small-left{transform:translate(-.375rem);margin-inline-end:calc(var(--sbb-spacing-fixed-2x) - .4375rem)}.sbb-pearl-chain__time-walktime--wheelchair-small-right{margin-inline-start:calc(var(--sbb-spacing-fixed-2x) - .25rem)}.sbb-pearl-chain__time-walktime-prime-symbol{float:right}.sbb-pearl-chain__time-transfer{gap:var(--sbb-spacing-fixed-1x)}.sbb-pearl-chain__time-transfer--sa-ci-departure{margin-inline-end:var(--sbb-spacing-fixed-2x)}.sbb-pearl-chain__time-transfer--sa-ci-arrival{margin-inline-start:calc(var(--sbb-spacing-fixed-2x) - .25rem)}.sbb-pearl-chain__time-chain{flex:1 1 auto;align-self:center;margin-inline:var(--sbb-spacing-fixed-3x)}.sbb-pearl-chain__time-time{--sbb-text-font-size: var(--sbb-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700;color:var(--sbb-color-2)}.sbb-screen-reader-only{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
+let Ae = (() => {
+  var d, _, g, u, f, v, y, l;
+  let a = [me("sbb-pearl-chain-time")], s, o = [], m, T = oe, z = [], W, A = [], $ = [], F, I = [], S = [], D, N = [], E = [], H, L = [], O = [], j, P = [], B = [], C, R = [], V = [], q, G = [], J = [], K;
+  return l = class extends T {
+    constructor() {
+      super(...arguments);
+      p(this, d);
+      p(this, _);
+      p(this, g);
+      p(this, u);
+      p(this, f);
+      p(this, v);
+      p(this, y);
+      n(this, d, (r(this, z), r(this, A, []))), n(this, _, (r(this, $), r(this, I, ""))), n(this, g, (r(this, S), r(this, N, ""))), n(this, u, (r(this, E), r(this, L, NaN))), n(this, f, (r(this, O), r(this, P, NaN))), n(this, v, (r(this, B), r(this, R, !1))), n(this, y, (r(this, V), r(this, G, !1))), this._now = (r(this, J), null), this._language = new ae(this);
+    }
+    /**
+     * define the legs of the pearl-chain.
+     * Format:
+     * `{"legs": [{"duration": 25}, ...]}`
+     * `duration` in minutes. Duration of the leg is relative
+     * to the total travel time. Example: departure 16:30, change at 16:40,
+     * arrival at 17:00. So the change should have a duration of 33.33%.
+     */
+    get legs() {
+      return h(this, d);
+    }
+    set legs(t) {
+      n(this, d, t);
+    }
+    /** Prop to render the departure time - will be formatted as "H:mm" */
+    get departureTime() {
+      return h(this, _);
+    }
+    set departureTime(t) {
+      n(this, _, t);
+    }
+    /** Prop to render the arrival time - will be formatted as "H:mm" */
+    get arrivalTime() {
+      return h(this, g);
+    }
+    set arrivalTime(t) {
+      n(this, g, t);
+    }
+    /** Optional prop to render the walk time (in minutes) before departure */
+    get departureWalk() {
+      return h(this, u);
+    }
+    set departureWalk(t) {
+      n(this, u, t);
+    }
+    /** Optional prop to render the walk time (in minutes) after arrival */
+    get arrivalWalk() {
+      return h(this, f);
+    }
+    set arrivalWalk(t) {
+      n(this, f, t);
+    }
+    /**
+     * Per default, the current location has a pulsating animation. You can
+     * disable the animation with this property.
+     */
+    get disableAnimation() {
+      return h(this, v);
+    }
+    set disableAnimation(t) {
+      n(this, v, t);
+    }
+    /** Optional prop to render wheelchair-small instead of walk-small */
+    get a11yFootpath() {
+      return h(this, y);
+    }
+    set a11yFootpath(t) {
+      n(this, y, t);
+    }
+    /**
+     * A configured date which acts as the current date instead of the real current date.
+     * Only recommended for testing purposes.
+     */
+    set now(t) {
+      this._now = X.getValidDateOrNull(X.deserialize(t));
+    }
+    get now() {
+      return this._now ?? /* @__PURE__ */ new Date();
+    }
+    render() {
+      const t = this.departureTime ? Y(this.departureTime) : void 0, e = this.arrivalTime ? Y(this.arrivalTime) : void 0, { renderDepartureTimeAttribute: i, renderArrivalTimeAttribute: ee } = ce(this.legs, this.departureWalk || 0, this.arrivalWalk || 0, this._language.current, this.a11yFootpath), M = this.legs?.filter((te) => he(te));
+      return k`
+      <div class="sbb-pearl-chain__time">
+        ${i()}
+        ${t ? k`<time class="sbb-pearl-chain__time-time" datetime=${this.departureTime}>
+              <span class="sbb-screen-reader-only"
+                >${ie[this._language.current]}:&nbsp;</span
+              >
+              ${Z(t, "HH:mm")}
+            </time>` : w}
+        ${M?.length > 1 ? k`<span class="sbb-screen-reader-only" role="paragraph">
+              ${M?.length - 1} ${re[this._language.current]}
+            </span>` : w}
+        <sbb-pearl-chain
+          class="sbb-pearl-chain__time-chain"
+          .legs=${this.legs}
+          .disableAnimation=${this.disableAnimation}
+          .now=${this.now}
+        ></sbb-pearl-chain>
+        ${e ? k`<time class="sbb-pearl-chain__time-time" datetime=${this.arrivalTime}>
+              <span class="sbb-screen-reader-only"
+                >${se[this._language.current]}:&nbsp;</span
+              >
+              ${Z(e, "HH:mm")}
+            </time>` : w}
+        ${ee()}
+      </div>
+    `;
+    }
+  }, d = new WeakMap(), _ = new WeakMap(), g = new WeakMap(), u = new WeakMap(), f = new WeakMap(), v = new WeakMap(), y = new WeakMap(), m = l, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(T[Symbol.metadata] ?? null) : void 0;
+    W = [b({ type: Array })], F = [x(), b({ attribute: "departure-time" })], D = [x(), b({ attribute: "arrival-time" })], H = [x(), b({ attribute: "departure-walk", type: Number })], j = [x(), b({ attribute: "arrival-walk", type: Number })], C = [x(), b({ attribute: "disable-animation", type: Boolean })], q = [x(), b({ attribute: "a11y-footpath", type: Boolean })], K = [b()], c(l, null, W, { kind: "accessor", name: "legs", static: !1, private: !1, access: { has: (e) => "legs" in e, get: (e) => e.legs, set: (e, i) => {
+      e.legs = i;
+    } }, metadata: t }, A, $), c(l, null, F, { kind: "accessor", name: "departureTime", static: !1, private: !1, access: { has: (e) => "departureTime" in e, get: (e) => e.departureTime, set: (e, i) => {
+      e.departureTime = i;
+    } }, metadata: t }, I, S), c(l, null, D, { kind: "accessor", name: "arrivalTime", static: !1, private: !1, access: { has: (e) => "arrivalTime" in e, get: (e) => e.arrivalTime, set: (e, i) => {
+      e.arrivalTime = i;
+    } }, metadata: t }, N, E), c(l, null, H, { kind: "accessor", name: "departureWalk", static: !1, private: !1, access: { has: (e) => "departureWalk" in e, get: (e) => e.departureWalk, set: (e, i) => {
+      e.departureWalk = i;
+    } }, metadata: t }, L, O), c(l, null, j, { kind: "accessor", name: "arrivalWalk", static: !1, private: !1, access: { has: (e) => "arrivalWalk" in e, get: (e) => e.arrivalWalk, set: (e, i) => {
+      e.arrivalWalk = i;
+    } }, metadata: t }, P, B), c(l, null, C, { kind: "accessor", name: "disableAnimation", static: !1, private: !1, access: { has: (e) => "disableAnimation" in e, get: (e) => e.disableAnimation, set: (e, i) => {
+      e.disableAnimation = i;
+    } }, metadata: t }, R, V), c(l, null, q, { kind: "accessor", name: "a11yFootpath", static: !1, private: !1, access: { has: (e) => "a11yFootpath" in e, get: (e) => e.a11yFootpath, set: (e, i) => {
+      e.a11yFootpath = i;
+    } }, metadata: t }, G, J), c(l, null, K, { kind: "setter", name: "now", static: !1, private: !1, access: { has: (e) => "now" in e, set: (e, i) => {
+      e.now = i;
+    } }, metadata: t }, null, z), c(null, s = { value: m }, a, { kind: "class", name: m.name, metadata: t }, null, o), m = s.value, t && Object.defineProperty(m, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), l.styles = [le, pe], r(m, o), m;
+})();
+export {
+  Ae as SbbPearlChainTimeElement
+};

package/pearl-chain-time.js

@@ -0,0 +1,4 @@
+import { SbbPearlChainTimeElement as r } from "./pearl-chain-time/pearl-chain-time.component.js";
+export {
+  r as SbbPearlChainTimeElement
+};

package/pearl-chain-vertical/pearl-chain-vertical.component.js

@@ -0,0 +1,24 @@
+import { __esDecorate as c, __runInitializers as n } from "tslib";
+import { boxSizingStyles as o } from "@sbb-esta/lyne-elements/core/styles.js";
+import { css as m, LitElement as b, html as d } from "lit";
+import { customElement as u } from "lit/decorators.js";
+const p = m`:host{--sbb-pearl-chain-vertical-width: 100%;display:block}.sbb-pearl-chain-vertical{display:table;width:var(--sbb-pearl-chain-vertical-width)}`;
+let f = (() => {
+  var e;
+  let r = [u("sbb-pearl-chain-vertical")], l, s = [], t, i = b;
+  return e = class extends i {
+    render() {
+      return d`
+      <div class="sbb-pearl-chain-vertical">
+        <slot></slot>
+      </div>
+    `;
+    }
+  }, t = e, (() => {
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
+    c(null, l = { value: t }, r, { kind: "class", name: t.name, metadata: a }, null, s), t = l.value, a && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
+  })(), e.styles = [o, p], n(t, s), t;
+})();
+export {
+  f as SbbPearlChainVerticalElement
+};

package/pearl-chain-vertical-item/pearl-chain-vertical-item.component.js

@@ -0,0 +1,76 @@
+var A = (e) => {
+  throw TypeError(e);
+};
+var I = (e, a, t) => a.has(e) || A("Cannot " + t);
+var d = (e, a, t) => (I(e, a, "read from private field"), t ? t.call(e) : a.get(e)), m = (e, a, t) => a.has(e) ? A("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(e) : a.set(e, t), v = (e, a, t, l) => (I(e, a, "write to private field"), l ? l.call(e, t) : a.set(e, t), t);
+import { __esDecorate as u, __runInitializers as h } from "tslib";
+import { forceType as E } from "@sbb-esta/lyne-elements/core/decorators.js";
+import { boxSizingStyles as j } from "@sbb-esta/lyne-elements/core/styles.js";
+import { css as D, LitElement as G, nothing as _, html as p } from "lit";
+import { customElement as O, property as $ } from "lit/decorators.js";
+import { styleMap as g } from "lit/directives/style-map.js";
+const L = D`:host{--sbb-pearl-chain-bullet-size-start-end: .625rem;--sbb-pearl-chain-bullet-size-stop: .5rem;--sbb-pearl-chain-bullet-color: var(--sbb-background-color-3-inverted);--sbb-pearl-chain-bullet-color-past: var(--sbb-color-metal);--sbb-pearl-chain-bullet-color-past: light-dark(var(--sbb-color-metal), var(--sbb-color-granite));--sbb-pearl-chain-bullet-color-irrelevant: var(--sbb-color-metal);--sbb-pearl-chain-bullet-color-irrelevant: light-dark( var(--sbb-color-metal), var(--sbb-color-granite) );--sbb-pearl-chain-bullet-color-disruption: var(--sbb-color-primary);--sbb-pearl-chain-bullet-border-width: var(--sbb-border-width-2x);--sbb-pearl-chain-bullet-animation-duration: 1.92s;--sbb-pearl-chain-bullet-animation-easing: ease-out;--sbb-pearl-chain-bullet-crossed-width: .88375rem;--sbb-pearl-chain-bullet-crossed-height: .21875rem;--sbb-pearl-chain-bullet-crossed-border-width: .09375rem;display:table-row;position:relative;--sbb-pearl-chain-vertical-right-item-width: 100%;--sbb-pearl-chain-vertical-middle-item-min-width: var(--sbb-pearl-chain-bullet-size-start-end);--sbb-pearl-chain-vertical-item-border-width: var(--sbb-border-width-2x);--sbb-pearl-chain-vertical-item-border-width-thin: var(--sbb-border-width-1x);--sbb-pearl-chain-vertical-item-spacing-small: var(--sbb-spacing-fixed-1x);--sbb-pearl-chain-vertical-item-color-default: var(--sbb-pearl-chain-bullet-color);--sbb-pearl-chain-vertical-item-color-disruption: var(--sbb-pearl-chain-bullet-color-disruption);--sbb-pearl-chain-vertical-item-color-past: var(--sbb-pearl-chain-bullet-color-past);--sbb-pearl-chain-vertical-item-color-walk: var(--sbb-color-sky);--sbb-pearl-chain-vertical-item-inline-start: 50%;--sbb-pearl-chain-vertical-item-transform: translateX(-50%)}slot[name=right],.sbb-pearl-chain-vertical-item__column{display:table-cell;position:relative;vertical-align:top}slot[name=right]{width:var(--sbb-pearl-chain-vertical-right-item-width)}.sbb-pearl-chain-vertical-item__column--middle{min-width:var(--sbb-pearl-chain-vertical-middle-item-min-width, --sbb-pearl-chain-vertical-middle-min-width)}slot[name=left]::slotted(*){margin-block-start:var(--sbb-pearl-chain-vertical-left-item-block-start);padding-inline-end:var(--sbb-pearl-chain-vertical-left-item-inline-end)}slot[name=right]::slotted(*){margin-block-start:var(--sbb-pearl-chain-vertical-right-item-block-start);padding-inline-start:var(--sbb-pearl-chain-vertical-right-item-inline-start)}.sbb-pearl-chain-vertical-item__middle{vertical-align:top;border-spacing:0}.sbb-pearl-chain-vertical-item__line{position:absolute;bottom:0;inset-inline-start:var(--sbb-pearl-chain-vertical-item-inline-start);transform:var(--sbb-pearl-chain-vertical-item-transform);width:var(--sbb-border-width-2x);inset-block-start:calc(var(--sbb-pearl-chain-bullet-size-start-end) / 2)}.sbb-pearl-chain-vertical-item__line:after{content:"";position:absolute;inset-inline-start:0;inset-block-start:0;height:var(--sbb-pearl-chain-vertical-item-leg-status);width:var(--sbb-pearl-chain-vertical-item-border-width);background-color:var(--sbb-pearl-chain-vertical-item-color-past)}@media(forced-colors:active){.sbb-pearl-chain-vertical-item__line:after{--sbb-pearl-chain-vertical-item-color-past: GrayText}}.sbb-pearl-chain-vertical-item__line--dotted{background-color:unset;border-color:unset;background-image:linear-gradient(to bottom,currentcolor 0%,currentcolor 50%,Canvas 50%);background-repeat:repeat-y;background-size:calc(2 * var(--sbb-pearl-chain-vertical-item-spacing-small)) var(--sbb-pearl-chain-vertical-item-spacing-small)}@media(forced-colors:active){.sbb-pearl-chain-vertical-item__line--dotted{background-color:unset!important;border-inline-start:.0625rem dashed Highlight;transform:translateY(.0625rem)}}.sbb-pearl-chain-vertical-item__line--thin{width:var(--sbb-pearl-chain-vertical-item-border-width-thin)}.sbb-pearl-chain-vertical-item__line--default{background-color:var(--sbb-pearl-chain-vertical-item-color-default);border-color:var(--sbb-pearl-chain-vertical-item-color-default);color:var(--sbb-pearl-chain-vertical-item-color-default)}@media(forced-colors:active){.sbb-pearl-chain-vertical-item__line--default{--sbb-pearl-chain-vertical-item-color-default: CanvasText}}.sbb-pearl-chain-vertical-item__line--disruption{border-color:var(--sbb-pearl-chain-vertical-item-color-disruption);background-color:var(--sbb-pearl-chain-vertical-item-color-disruption);color:var(--sbb-pearl-chain-vertical-item-color-disruption)}@media(forced-colors:active){.sbb-pearl-chain-vertical-item__line--disruption{--sbb-pearl-chain-vertical-item-color-disruption: Highlight}}.sbb-pearl-chain-vertical-item__line--past{border-color:var(--sbb-pearl-chain-vertical-item-color-past);background-color:var(--sbb-pearl-chain-vertical-item-color-past);color:var(--sbb-pearl-chain-vertical-item-color-past)}@media(forced-colors:active){.sbb-pearl-chain-vertical-item__line--past{--sbb-pearl-chain-vertical-item-color-past: GrayText}}.sbb-pearl-chain-vertical-item__line--walk{border-color:var(--sbb-pearl-chain-vertical-item-color-walk);background-color:var(--sbb-pearl-chain-vertical-item-color-walk);color:var(--sbb-pearl-chain-vertical-item-color-walk)}.sbb-pearl-chain-vertical-item__bullet{position:relative;inset-inline-start:var(--sbb-pearl-chain-vertical-item-inline-start);transform:var(--sbb-pearl-chain-vertical-item-transform);background:var(--sbb-pearl-chain-bullet-color);color:var(--sbb-pearl-chain-bullet-color);border-color:var(--sbb-pearl-chain-bullet-color);border-radius:100%}@media(forced-colors:active){.sbb-pearl-chain-vertical-item__bullet{--sbb-pearl-chain-bullet-color: CanvasText}}.sbb-pearl-chain-vertical-item__bullet--start-end{min-height:var(--sbb-pearl-chain-bullet-size-start-end);min-width:var(--sbb-pearl-chain-bullet-size-start-end);height:var(--sbb-pearl-chain-bullet-size-start-end);width:var(--sbb-pearl-chain-bullet-size-start-end)}.sbb-pearl-chain-vertical-item__bullet--stop{min-height:var(--sbb-pearl-chain-bullet-size-stop);min-width:var(--sbb-pearl-chain-bullet-size-stop);height:var(--sbb-pearl-chain-bullet-size-stop);width:var(--sbb-pearl-chain-bullet-size-stop);border:var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;background:Canvas}.sbb-pearl-chain-vertical-item__bullet--disruption{--sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-disruption)}@media(forced-colors:active){.sbb-pearl-chain-vertical-item__bullet--disruption{--sbb-pearl-chain-bullet-color: Highlight}}.sbb-pearl-chain-vertical-item__bullet--irrelevant,.sbb-pearl-chain-vertical-item__bullet--past{--sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-past)}@media(forced-colors:active){.sbb-pearl-chain-vertical-item__bullet--irrelevant,.sbb-pearl-chain-vertical-item__bullet--past{--sbb-pearl-chain-bullet-color: GrayText !important}}.sbb-pearl-chain-vertical-item__bullet--stop.sbb-pearl-chain-vertical-item__bullet--irrelevant{--sbb-pearl-chain-bullet-border-width: var(--sbb-border-width-1x);min-height:var(--sbb-pearl-chain-bullet-size-stop);min-width:var(--sbb-pearl-chain-bullet-size-stop);height:var(--sbb-pearl-chain-bullet-size-stop);width:var(--sbb-pearl-chain-bullet-size-stop);border:var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;background:Canvas}.sbb-pearl-chain-vertical-item__bullet--start-end.sbb-pearl-chain-vertical-item__bullet--skipped{border:var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;background:Canvas}.sbb-pearl-chain-vertical-item__bullet--start-end.sbb-pearl-chain-vertical-item__bullet--skipped:before{content:"";position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%) rotate(45deg);border-block-start:var(--sbb-pearl-chain-bullet-crossed-border-width) solid canvas;background:var(--sbb-pearl-chain-bullet-color-disruption);height:var(--sbb-pearl-chain-bullet-crossed-height);width:var(--sbb-pearl-chain-bullet-crossed-width)}@media(forced-colors:active){.sbb-pearl-chain-vertical-item__bullet--start-end.sbb-pearl-chain-vertical-item__bullet--skipped:before{background:Highlight}}.sbb-pearl-chain-vertical-item__bullet--stop.sbb-pearl-chain-vertical-item__bullet--skipped{--sbb-pearl-chain-bullet-crossed-width: .706875rem;--sbb-pearl-chain-bullet-crossed-height: .1875rem;min-height:var(--sbb-pearl-chain-bullet-size-stop);min-width:var(--sbb-pearl-chain-bullet-size-stop);height:var(--sbb-pearl-chain-bullet-size-stop);width:var(--sbb-pearl-chain-bullet-size-stop);border:var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;background:Canvas}.sbb-pearl-chain-vertical-item__bullet--stop.sbb-pearl-chain-vertical-item__bullet--skipped:before{content:"";position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%) rotate(45deg);border-block-start:var(--sbb-pearl-chain-bullet-crossed-border-width) solid canvas;background:var(--sbb-pearl-chain-bullet-color-disruption);height:var(--sbb-pearl-chain-bullet-crossed-height);width:var(--sbb-pearl-chain-bullet-crossed-width)}@media(forced-colors:active){.sbb-pearl-chain-vertical-item__bullet--stop.sbb-pearl-chain-vertical-item__bullet--skipped:before{background:Highlight}}.sbb-pearl-chain-vertical-item__bullet--position{inset-block-start:var(--sbb-pearl-chain-vertical-item-position);position:absolute;left:50%;transform:translate(-50%);min-height:var(--sbb-pearl-chain-bullet-size-start-end);min-width:var(--sbb-pearl-chain-bullet-size-start-end);height:var(--sbb-pearl-chain-bullet-size-start-end);width:var(--sbb-pearl-chain-bullet-size-start-end);background:var(--sbb-pearl-chain-bullet-color);color:var(--sbb-pearl-chain-bullet-color);border-color:var(--sbb-pearl-chain-bullet-color);border-radius:100%}@media(forced-colors:active){.sbb-pearl-chain-vertical-item__bullet--position{--sbb-pearl-chain-bullet-color: CanvasText}}.sbb-pearl-chain-vertical-item__bullet--position{--sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-disruption)}@media(forced-colors:active){.sbb-pearl-chain-vertical-item__bullet--position{--sbb-pearl-chain-bullet-color: Highlight}}@keyframes pearl-chain-bullet-position-pulse{0%{box-shadow:0 0 0 0 var(--sbb-pearl-chain-bullet-color-disruption)}25%{box-shadow:0 0 0 0 var(--sbb-pearl-chain-bullet-color-disruption)}50%{box-shadow:0 0 0 .1875rem color-mix(in srgb,var(--sbb-color-primary) 20%,transparent)}to{box-shadow:0 0 0 0 var(--sbb-pearl-chain-bullet-color-disruption)}}.sbb-pearl-chain-vertical-item__bullet--position{animation:pearl-chain-bullet-position-pulse var(--sbb-pearl-chain-bullet-animation-duration) var(--sbb-pearl-chain-bullet-animation-easing) infinite}:host([disable-animation]) .sbb-pearl-chain-vertical-item__bullet--position{animation:unset!important}`;
+let K = (() => {
+  var c, n, b;
+  let e = [O("sbb-pearl-chain-vertical-item")], a, t = [], l, f = G, w, k = [], z = [], y, x = [], C = [];
+  return b = class extends f {
+    constructor() {
+      super(...arguments);
+      m(this, c, h(this, k, null));
+      m(this, n, (h(this, z), h(this, x, !1)));
+      h(this, C);
+    }
+    /** The pearlChainVerticalItemAttributes Prop for styling the bullets and line.*/
+    get pearlChainVerticalItemAttributes() {
+      return d(this, c);
+    }
+    set pearlChainVerticalItemAttributes(r) {
+      v(this, c, r);
+    }
+    /** If true, the position won't be animated. */
+    get disableAnimation() {
+      return d(this, n);
+    }
+    set disableAnimation(r) {
+      v(this, n, r);
+    }
+    render() {
+      const { bulletType: r, lineType: i, lineColor: o, hideLine: V, minHeight: T, bulletSize: S, position: s } = this.pearlChainVerticalItemAttributes || {}, H = s && s > 0 && s <= 100 ? "sbb-pearl-chain-vertical-item__bullet--past" : `sbb-pearl-chain-vertical-item__bullet--${r}`;
+      return p`
+      <div
+        class="sbb-pearl-chain-vertical-item__column"
+        style=${g({ height: `${T}px` })}
+      >
+        <slot name="left"></slot>
+      </div>
+      <div
+        aria-hidden="true"
+        class="sbb-pearl-chain-vertical-item__column sbb-pearl-chain-vertical-item__column--middle"
+      >
+        ${V ? _ : p`<div
+              style=${g({ "--sbb-pearl-chain-vertical-item-leg-status": `${s}%` })}
+              class="sbb-pearl-chain-vertical-item__line sbb-pearl-chain-vertical-item__line--${i} sbb-pearl-chain-vertical-item__line--${o}"
+            ></div>`}
+        ${r ? p`<div
+              class="sbb-pearl-chain-vertical-item__bullet  sbb-pearl-chain-vertical-item__bullet--${S} ${H}"
+            ></div>` : _}
+        ${s && s > 0 ? p`<div
+              style=${g({ "--sbb-pearl-chain-vertical-item-position": `${s}%` })}
+              class="sbb-pearl-chain-vertical-item__bullet--position"
+            ></div>` : _}
+      </div>
+      <slot name="right"></slot>
+    `;
+    }
+  }, c = new WeakMap(), n = new WeakMap(), l = b, (() => {
+    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
+    w = [$({ attribute: "pearl-chain-vertical-item-attributes", type: Object })], y = [E(), $({ attribute: "disable-animation", reflect: !0, type: Boolean })], u(b, null, w, { kind: "accessor", name: "pearlChainVerticalItemAttributes", static: !1, private: !1, access: { has: (i) => "pearlChainVerticalItemAttributes" in i, get: (i) => i.pearlChainVerticalItemAttributes, set: (i, o) => {
+      i.pearlChainVerticalItemAttributes = o;
+    } }, metadata: r }, k, z), u(b, null, y, { kind: "accessor", name: "disableAnimation", static: !1, private: !1, access: { has: (i) => "disableAnimation" in i, get: (i) => i.disableAnimation, set: (i, o) => {
+      i.disableAnimation = o;
+    } }, metadata: r }, x, C), u(null, a = { value: l }, e, { kind: "class", name: l.name, metadata: r }, null, t), l = a.value, r && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
+  })(), b.styles = [j, L], h(l, t), l;
+})();
+export {
+  K as SbbPearlChainVerticalItemElement
+};

package/pearl-chain-vertical-item.js

@@ -0,0 +1,4 @@
+import { SbbPearlChainVerticalItemElement as t } from "./pearl-chain-vertical-item/pearl-chain-vertical-item.component.js";
+export {
+  t as SbbPearlChainVerticalItemElement
+};

package/pearl-chain-vertical.js

@@ -0,0 +1,4 @@
+import { SbbPearlChainVerticalElement as a } from "./pearl-chain-vertical/pearl-chain-vertical.component.js";
+export {
+  a as SbbPearlChainVerticalElement
+};

package/pearl-chain.js

@@ -0,0 +1,4 @@
+import { SbbPearlChainElement as a } from "./pearl-chain/pearl-chain.component.js";
+export {
+  a as SbbPearlChainElement
+};

package/seat-reservation/common/mapper/icon-mapper.js

@@ -0,0 +1,71 @@
+import { svgs as a } from "../svgs.js";
+const E = {
+  BICYCLE: { svgName: "sa-vo" },
+  BICYCLE_HIGH: { svgName: "sa-vo" },
+  BICYCLE_HIGH_ICON: { svgName: "sa-vo" },
+  BICYCLE_ICON: { svgName: "sa-vo" },
+  BICYCLE_LOW: { svgName: "sa-vo" },
+  BICYCLE_LOW_ICON: { svgName: "sa-vo" },
+  BICYCLE_MIDDLE: { svgName: "sa-vo" },
+  BICYCLE_MIDDLE_ICON: { svgName: "sa-vo" },
+  BISTRO: { svgName: "sa-mi" },
+  BISTRO_ICON: { svgName: "sa-mi" },
+  BUSINESS: { svgName: "sa-bz" },
+  BUSINESS_COMFORT: { svgName: "sa-bz" },
+  BUSINESS_ICON: { svgName: "sa-bz" },
+  COACH_BORDER_MIDDLE: { svg: a.chassisRowMiddle },
+  COACH_WALL_NO_PASSAGE: { svg: a.chassisRowOuter },
+  COACH_PASSAGE: { svg: a.chassisPassageWaggonTopLeft },
+  COMPARTMENT_PASSAGE: { svg: a.chassisPassageCompartmentMiddle },
+  COMPARTMENT_PASSAGE_HIGH: { svg: a.chassisPassageCompartmentLeftTop },
+  COMPARTMENT_PASSAGE_LOW: { svg: a.chassisPassageCompartmentRightBottom },
+  COMPARTMENT_WALL: { svg: a.chassisSeparator },
+  DRIVER_AREA: { svg: a.chassisDriverTrain },
+  DRIVER_AREA_BUS: { svg: a.chassisDriverBus },
+  DRIVER_AREA_TRAIN: { svg: a.chassisDriverTrainFull },
+  EASY_ACCESS: { svgName: "sa-em" },
+  EASY_ACCESS_AREA: { svgName: "sa-em" },
+  EASY_ACCESS_ICON: { svgName: "sa-em" },
+  ENTRY_EXIT: { svg: a.layoutEntrance },
+  FAMILY: { svgName: "sa-fa" },
+  LUGGAGE_AREA: { svgName: "sa-ga" },
+  LUGGAGE_ICON: { svgName: "sa-ga" },
+  MULTI_FUNCTION_AREA: { svgName: "sa-mf" },
+  MULTI_FUNCTION_ICON: { svgName: "sa-mf" },
+  PLACE_BICYCLE_ALLOCATED: { svg: a.interiorPlaceBikeUnavailable },
+  PLACE_BICYCLE_FREE: { svg: a.interiorPlaceBikeDefault },
+  PLACE_BICYCLE_RESTRICTED: { svg: a.interiorPlaceBikeNotBookable },
+  PLACE_BICYCLE_SELECTED: { svg: a.interiorPlaceBikeSelected },
+  PLACE_SEAT_ALLOCATED: { svg: a.interiorPlaceSeatUnavailable },
+  PLACE_SEAT_FREE: { svg: a.interiorPlaceSeatDefault },
+  PLACE_SEAT_RESTRICTED: { svg: a.interiorPlaceSeatNotBookable },
+  PLACE_SEAT_SELECTED: { svg: a.interiorPlaceSeatSelected },
+  PLAYGROUND_AREA: { svgName: "sa-fa" },
+  PLAYGROUND_ICON: { svgName: "sa-fa" },
+  PRAM: { svgName: "sa-abteilkinderwagen" },
+  PRAM_AREA: { svgName: "sa-abteilkinderwagen" },
+  PRAM_ICON: { svgName: "sa-abteilkinderwagen" },
+  RESTAURANT: { svgName: "sa-wr" },
+  RESTAURANT_AREA: { svgName: "sa-wr" },
+  RESTAURANT_ICON: { svgName: "sa-wr" },
+  SILENCE: { svgName: "sa-rz" },
+  SILENCE_AREA_ICON: { svgName: "sa-rz" },
+  SILENCE_ICON: { svgName: "sa-rz" },
+  SKI_AREA: { svgName: "sa-sa" },
+  SKI_ICON: { svgName: "sa-sa" },
+  STAFF_AREA: { svgName: "avatar-train-staff-medium" },
+  STAIR_AREA: { svgName: "sa-ac" },
+  TOILET_AREA: { svgName: "sa-wc" },
+  TOILET_ICON: { svgName: "sa-wc" },
+  TOILET_WHEELCHAIR_AREA: { svgName: "sa-rw" },
+  TOILET_WHEELCHAIR_ICON: { svgName: "sa-rw" },
+  WARDROBE_AREA: { svgName: "sa-ka" },
+  WHEELCHAIR: { svgName: "sa-rs" },
+  WHEELCHAIR_AND_SEAT: { svgName: "sa-rs" },
+  WHEELCHAIR_ICON: { svgName: "sa-rs" },
+  WHEELCHAIR_NO_SEAT: { svgName: "sa-rn" },
+  WIFI: { svgName: "sa-wv" }
+};
+export {
+  E as mapIconToSvg
+};