@sbb-esta/lyne-elements-experimental 2.6.0 → 2.7.1

package/pearl-chain/pearl-chain.js

@@ -0,0 +1,177 @@
+var oe = (l) => {
+  throw TypeError(l);
+};
+var be = (l, n, p) => n.has(l) || oe("Cannot " + p);
+var I = (l, n, p) => (be(l, n, "read from private field"), p ? p.call(l) : n.get(l)), H = (l, n, p) => n.has(l) ? oe("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(l) : n.set(l, p), k = (l, n, p, d) => (be(l, n, "write to private field"), d ? d.call(l, p) : n.set(l, p), p);
+import { __runInitializers as f, __esDecorate as S } from "tslib";
+import { defaultDateAdapter as ce } from "@sbb-esta/lyne-elements/core/datetime.js";
+import { forceType as xe } from "@sbb-esta/lyne-elements/core/decorators.js";
+import { css as Se, LitElement as De, html as y, nothing as pe } from "lit";
+import { customElement as Te, property as O } from "lit/decorators.js";
+import { styleMap as he } from "lit/directives/style-map.js";
+import { removeTimezoneFromISOTimeString as h } from "../core/datetime.js";
+import { isRideLeg as Ae } from "../core/timetable.js";
+import { d as D, a as T } from "../differenceInMinutes-BMqUZdhj.js";
+import { t as A } from "../toDate-BCXKL_wM.js";
+function Ce(l, n) {
+  return +A(l) > +A(n);
+}
+function de(l, n) {
+  return +A(l) < +A(n);
+}
+const $e = Se`*,:before,:after{box-sizing:border-box}: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-color-charcoal);--sbb-pearl-chain-bullet-color-past: var(--sbb-color-metal);--sbb-pearl-chain-bullet-color-irrelevant: var(--sbb-color-metal);--sbb-pearl-chain-bullet-color-disruption: var(--sbb-color-red);--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 var(--sbb-color-red-alpha-20)}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}.sbb-pearl-chain__position{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:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
+let Me = (() => {
+  var v, g, u;
+  let l = [Te("sbb-pearl-chain")], n, p = [], d, J = De, R = [], W, G = [], V = [], B, j = [], M = [], Y;
+  return u = class extends J {
+    constructor() {
+      super(...arguments);
+      H(this, v);
+      H(this, g);
+      k(this, v, (f(this, R), f(this, G, []))), k(this, g, (f(this, V), f(this, j, !1))), this._now = (f(this, M), 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 I(this, v);
+    }
+    set legs(a) {
+      k(this, v, a);
+    }
+    /**
+     * Per default, the current location has a pulsating animation. You can
+     * disable the animation with this property.
+     */
+    get disableAnimation() {
+      return I(this, g);
+    }
+    set disableAnimation(a) {
+      k(this, g, a);
+    }
+    /** A configured date which acts as the current date instead of the real current date. Recommended for testing purposes. */
+    set now(a) {
+      this._now = ce.getValidDateOrNull(ce.deserialize(a));
+    }
+    get now() {
+      return this._now;
+    }
+    _getAllDuration(a) {
+      return a == null ? void 0 : a.reduce((e, r) => {
+        var c, _;
+        const i = h((c = r.arrival) == null ? void 0 : c.time), b = h((_ = r.departure) == null ? void 0 : _.time);
+        return i && b ? e + D(h(r.arrival.time), h(r.departure.time)) : e;
+      }, 0);
+    }
+    _isAllCancelled(a) {
+      return a == null ? void 0 : a.every((e) => {
+        var r, i;
+        return (i = (r = e == null ? void 0 : e.serviceJourney) == null ? void 0 : r.serviceAlteration) == null ? void 0 : i.cancelled;
+      });
+    }
+    _getRelativeDuration(a, e) {
+      var b, c;
+      const r = h((b = e.arrival) == null ? void 0 : b.time), i = h((c = e.departure) == null ? void 0 : c.time);
+      if (r && i) {
+        const _ = D(h(e.arrival.time), h(e.departure.time)), w = this._getAllDuration(a);
+        return w === 0 ? 100 : _ / w * 100;
+      }
+      return 0;
+    }
+    _getProgress(a, e, r) {
+      if (!(e != null && e.time) || !(r != null && r.time))
+        return 0;
+      const i = T(e.time, e.delay ?? 0), b = T(r.time, r.delay ?? 0), c = D(b, i), _ = D(a, i);
+      return c && _ / c * 100;
+    }
+    _getStatus(a, e, r) {
+      const i = e && e.time && T(e.time, e.delay ?? 0), b = r && r.time && T(r.time, r.delay ?? 0);
+      return i && de(i, a) && b && Ce(b, a) ? "progress" : b && de(b, a) ? "past" : "future";
+    }
+    _renderPosition(a, e, r) {
+      const i = this._getProgress(a, e, r);
+      if (i < 0 && i > 100)
+        return;
+      const b = () => ({
+        "--sbb-pearl-chain-status-position": `${i}%`,
+        ...i >= 50 ? { transform: "translateX(-100%)" } : {}
+      }), c = this.disableAnimation ? "sbb-pearl-chain__position--no-animation" : "";
+      return y`<span
+      style=${he(b())}
+      class="sbb-pearl-chain__position ${c}"
+    ></span>`;
+    }
+    render() {
+      var X, q, K, Q, U;
+      const a = this.now ?? /* @__PURE__ */ new Date(), e = (X = this.legs) == null ? void 0 : X.filter((t) => Ae(t)), r = (e == null ? void 0 : e.length) && h((K = (q = e[0]) == null ? void 0 : q.departure) == null ? void 0 : K.time), i = r && {
+        time: r,
+        delay: e[0].departure.delay ?? 0
+      }, b = (e == null ? void 0 : e.length) && h((Q = e[e.length - 1].arrival) == null ? void 0 : Q.time), c = b && {
+        time: b,
+        delay: ((U = e[e.length - 1]) == null ? void 0 : U.arrival.delay) ?? 0
+      }, _ = (() => {
+        var t, o, s, m;
+        return e && ((o = (t = e[0]) == null ? void 0 : t.serviceJourney) != null && o.stopPoints) && ((m = (s = e[0]) == null ? void 0 : s.serviceJourney) == null ? void 0 : m.stopPoints[0].stopStatus) === "NOT_SERVICED" ? "sbb-pearl-chain--departure-skipped" : "";
+      })(), w = (() => {
+        var s;
+        const t = e && e[e.length - 1], o = t && ((s = t.serviceJourney) == null ? void 0 : s.stopPoints);
+        return o && o[o.length - 1].stopStatus === "NOT_SERVICED" ? "sbb-pearl-chain--arrival-skipped" : "";
+      })(), F = (() => {
+        var t, o, s;
+        return e && ((s = (o = (t = e[0]) == null ? void 0 : t.serviceJourney) == null ? void 0 : o.serviceAlteration) != null && s.cancelled) ? "sbb-pearl-chain--departure-disruption" : "";
+      })(), L = (() => {
+        var t, o, s;
+        return e && ((s = (o = (t = e[e.length - 1]) == null ? void 0 : t.serviceJourney) == null ? void 0 : o.serviceAlteration) != null && s.cancelled) ? "sbb-pearl-chain--arrival-disruption" : "";
+      })(), C = i && c && this._getStatus(a, i, c), ue = e && C && !F ? "sbb-pearl-chain__bullet--" + C : "", _e = e && C && !L ? "sbb-pearl-chain__bullet--" + this._getStatus(a, void 0, c) : "";
+      return this._isAllCancelled(e) ? y`
+        <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>
+      ` : y`
+      <div class="sbb-pearl-chain">
+        <span
+          class="sbb-pearl-chain__bullet ${ue} ${_} ${F}"
+        ></span>
+        ${e == null ? void 0 : e.map((t, o) => {
+        var ee, ae, re, te, le, ie, se, ne;
+        const { stopPoints: s, serviceAlteration: m } = (t == null ? void 0 : t.serviceJourney) || {}, ve = this._getRelativeDuration(e, t), ge = h((ee = t.departure) == null ? void 0 : ee.time), me = h((ae = t.arrival) == null ? void 0 : ae.time), fe = s && ((re = s[s.length - 1]) == null ? void 0 : re.stopStatus) === "NOT_SERVICED", ke = s && ((te = s[s.length - 1]) == null ? void 0 : te.stopStatus) === "PLANNED", Z = s && ((le = s[0]) == null ? void 0 : le.stopStatus) === "NOT_SERVICED", $ = o > 0 && e[o - 1].serviceJourney.stopPoints, ye = $ && ((ie = $[$.length - 1]) == null ? void 0 : ie.stopStatus) === "NOT_SERVICED", z = fe || Z && ke ? "sbb-pearl-chain__leg--skipped" : "", we = Z || ye ? "sbb-pearl-chain__stop--departure-skipped" : "", x = m != null && m.cancelled ? "sbb-pearl-chain__leg--disruption" : "", N = { time: ge, delay: ((se = t.departure) == null ? void 0 : se.delay) ?? 0 }, E = { time: me, delay: ((ne = t.arrival) == null ? void 0 : ne.delay) ?? 0 }, P = this._getStatus(a, N, E), ze = !x && !z && "sbb-pearl-chain__leg--" + P;
+        return y` <div
+            class="sbb-pearl-chain__leg ${ze || ""} ${x} ${z}"
+            style=${he({
+          "--sbb-pearl-chain-leg-width": `${ve}%`,
+          ...P === "progress" && !x && !z ? {
+            "--sbb-pearl-chain-leg-status": `${this._getProgress(a, N, E)}%`
+          } : {}
+        })}
+          >
+            ${o > 0 && o < e.length ? y`<span class="sbb-pearl-chain__stop ${we}"></span>` : pe}
+            ${P === "progress" && !x && !z ? this._renderPosition(a, N, E) : pe}
+          </div>`;
+      })}
+        <span
+          class="sbb-pearl-chain__bullet ${_e} ${w} ${L}"
+        ></span>
+      </div>
+    `;
+    }
+  }, v = new WeakMap(), g = new WeakMap(), d = u, (() => {
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(J[Symbol.metadata] ?? null) : void 0;
+    W = [O({ type: Array })], B = [xe(), O({ attribute: "disable-animation", type: Boolean })], Y = [O()], S(u, null, W, { 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 }, G, V), S(u, null, B, { 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 }, j, M), S(u, null, Y, { kind: "setter", name: "now", static: !1, private: !1, access: { has: (e) => "now" in e, set: (e, r) => {
+      e.now = r;
+    } }, metadata: a }, null, R), S(null, n = { value: d }, l, { kind: "class", name: d.name, metadata: a }, null, p), d = n.value, a && Object.defineProperty(d, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
+  })(), u.styles = $e, f(d, p), d;
+})();
+export {
+  Me as SbbPearlChainElement
+};

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

@@ -0,0 +1,153 @@
+var U = (a) => {
+  throw TypeError(a);
+};
+var X = (a, s, o) => s.has(a) || U("Cannot " + o);
+var h = (a, s, o) => (X(a, s, "read from private field"), o ? o.call(a) : s.get(a)), b = (a, s, o) => s.has(a) ? U("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(a) : s.set(a, o), n = (a, s, o, m) => (X(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 ie } from "@sbb-esta/lyne-elements/core/controllers.js";
+import { defaultDateAdapter as Y } from "@sbb-esta/lyne-elements/core/datetime.js";
+import { forceType as k } from "@sbb-esta/lyne-elements/core/decorators.js";
+import { i18nDeparture as re, i18nTransferProcedures as se, i18nArrival as le } from "@sbb-esta/lyne-elements/core/i18n.js";
+import { css as ne, LitElement as oe, nothing as T, html as w } from "lit";
+import { customElement as me, property as p } from "lit/decorators.js";
+import { removeTimezoneFromISOTimeString as Z } from "../core/datetime.js";
+import { getDepartureArrivalTimeAttribute as ce, isRideLeg as he } from "../core/timetable.js";
+import "../pearl-chain.js";
+import { f as ee } from "../format-Dg8rkk7h.js";
+const be = ne`*,:before,:after{box-sizing:border-box}: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: 52.5rem){: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-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-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-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700;color:var(--sbb-color-charcoal)}.sbb-screen-reader-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
+let We = (() => {
+  var d, _, g, u, f, v, y, l;
+  let a = [me("sbb-pearl-chain-time")], s, o = [], m, z = oe, W = [], A, $ = [], F = [], I, D = [], S = [], N, E = [], H = [], O, j = [], P = [], B, C = [], R = [], V, q = [], G = [], J, K = [], L = [], M;
+  return l = class extends z {
+    constructor() {
+      super(...arguments);
+      b(this, d);
+      b(this, _);
+      b(this, g);
+      b(this, u);
+      b(this, f);
+      b(this, v);
+      b(this, y);
+      n(this, d, (r(this, W), r(this, $, []))), n(this, _, (r(this, F), r(this, D, ""))), n(this, g, (r(this, S), r(this, E, ""))), n(this, u, (r(this, H), r(this, j, NaN))), n(this, f, (r(this, P), r(this, C, NaN))), n(this, v, (r(this, R), r(this, q, !1))), n(this, y, (r(this, G), r(this, K, !1))), this._now = (r(this, L), null), this._language = new ie(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. Recommended for testing purposes. */
+    set now(t) {
+      this._now = Y.getValidDateOrNull(Y.deserialize(t));
+    }
+    get now() {
+      return this._now ?? /* @__PURE__ */ new Date();
+    }
+    render() {
+      var Q;
+      const t = this.departureTime ? Z(this.departureTime) : void 0, e = this.arrivalTime ? Z(this.arrivalTime) : void 0, { renderDepartureTimeAttribute: i, renderArrivalTimeAttribute: te } = ce(this.legs, this.departureWalk || 0, this.arrivalWalk || 0, this._language.current, this.a11yFootpath), x = (Q = this.legs) == null ? void 0 : Q.filter((ae) => he(ae));
+      return w`
+      <div class="sbb-pearl-chain__time">
+        ${i()}
+        ${t ? w`<time class="sbb-pearl-chain__time-time" datetime=${this.departureTime}>
+              <span class="sbb-screen-reader-only"
+                >${re[this._language.current]}:&nbsp;</span
+              >
+              ${ee(t, "HH:mm")}
+            </time>` : T}
+        ${(x == null ? void 0 : x.length) > 1 ? w`<span class="sbb-screen-reader-only" role="paragraph">
+              ${(x == null ? void 0 : x.length) - 1} ${se[this._language.current]}
+            </span>` : T}
+        <sbb-pearl-chain
+          class="sbb-pearl-chain__time-chain"
+          .legs=${this.legs}
+          .disableAnimation=${this.disableAnimation}
+          .now=${this.now}
+        ></sbb-pearl-chain>
+        ${e ? w`<time class="sbb-pearl-chain__time-time" datetime=${this.arrivalTime}>
+              <span class="sbb-screen-reader-only"
+                >${le[this._language.current]}:&nbsp;</span
+              >
+              ${ee(e, "HH:mm")}
+            </time>` : T}
+        ${te()}
+      </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(z[Symbol.metadata] ?? null) : void 0;
+    A = [p({ type: Array })], I = [k(), p({ attribute: "departure-time" })], N = [k(), p({ attribute: "arrival-time" })], O = [k(), p({ attribute: "departure-walk", type: Number })], B = [k(), p({ attribute: "arrival-walk", type: Number })], V = [k(), p({ attribute: "disable-animation", type: Boolean })], J = [k(), p({ attribute: "a11y-footpath", type: Boolean })], M = [p()], c(l, null, A, { 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 }, $, F), c(l, null, I, { 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 }, D, S), c(l, null, N, { 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 }, E, H), c(l, null, O, { 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 }, j, P), c(l, null, B, { 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 }, C, R), c(l, null, V, { 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 }, q, G), c(l, null, J, { 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 }, K, L), c(l, null, M, { kind: "setter", name: "now", static: !1, private: !1, access: { has: (e) => "now" in e, set: (e, i) => {
+      e.now = i;
+    } }, metadata: t }, null, W), 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 = be, r(m, o), m;
+})();
+export {
+  We as SbbPearlChainTimeElement
+};

package/pearl-chain-time.d.ts

@@ -1,2 +1,5 @@
+/**
+ * @entrypoint
+ */
 export * from './pearl-chain-time/pearl-chain-time.js';
 //# sourceMappingURL=pearl-chain-time.d.ts.map

package/pearl-chain-time.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pearl-chain-time.d.ts","sourceRoot":"","sources":["../../src/elements-experimental/pearl-chain-time.ts"],"names":[],"mappings":"AAAA,cAAc,wCAAwC,CAAC"}
+{"version":3,"file":"pearl-chain-time.d.ts","sourceRoot":"","sources":["../../src/elements-experimental/pearl-chain-time.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,wCAAwC,CAAC"}

package/pearl-chain-time.js

@@ -1,153 +1,4 @@
-var U = (a) => {
-  throw TypeError(a);
-};
-var X = (a, s, o) => s.has(a) || U("Cannot " + o);
-var h = (a, s, o) => (X(a, s, "read from private field"), o ? o.call(a) : s.get(a)), b = (a, s, o) => s.has(a) ? U("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(a) : s.set(a, o), n = (a, s, o, m) => (X(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 ie } from "@sbb-esta/lyne-elements/core/controllers.js";
-import { defaultDateAdapter as Y } from "@sbb-esta/lyne-elements/core/datetime.js";
-import { forceType as k } from "@sbb-esta/lyne-elements/core/decorators.js";
-import { i18nDeparture as re, i18nTransferProcedures as se, i18nArrival as le } from "@sbb-esta/lyne-elements/core/i18n.js";
-import { css as ne, LitElement as oe, nothing as T, html as w } from "lit";
-import { customElement as me, property as p } from "lit/decorators.js";
-import { removeTimezoneFromISOTimeString as Z } from "./core/datetime.js";
-import { getDepartureArrivalTimeAttribute as ce, isRideLeg as he } from "./core/timetable.js";
-import "./pearl-chain.js";
-import { f as ee } from "./format-CUYwLzoN.js";
-const be = ne`*,:before,:after{box-sizing:border-box}: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: 52.5rem){: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-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-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-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700;color:var(--sbb-color-charcoal)}.sbb-screen-reader-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
-let We = (() => {
-  var d, _, g, u, f, v, y, l;
-  let a = [me("sbb-pearl-chain-time")], s, o = [], m, z = oe, W = [], A, $ = [], F = [], I, D = [], S = [], N, E = [], H = [], O, j = [], P = [], B, C = [], R = [], V, q = [], G = [], J, K = [], L = [], M;
-  return l = class extends z {
-    constructor() {
-      super(...arguments);
-      b(this, d);
-      b(this, _);
-      b(this, g);
-      b(this, u);
-      b(this, f);
-      b(this, v);
-      b(this, y);
-      n(this, d, (r(this, W), r(this, $, []))), n(this, _, (r(this, F), r(this, D, ""))), n(this, g, (r(this, S), r(this, E, ""))), n(this, u, (r(this, H), r(this, j, NaN))), n(this, f, (r(this, P), r(this, C, NaN))), n(this, v, (r(this, R), r(this, q, !1))), n(this, y, (r(this, G), r(this, K, !1))), this._now = (r(this, L), null), this._language = new ie(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. Recommended for testing purposes. */
-    set now(t) {
-      this._now = Y.getValidDateOrNull(Y.deserialize(t));
-    }
-    get now() {
-      return this._now ?? /* @__PURE__ */ new Date();
-    }
-    render() {
-      var Q;
-      const t = this.departureTime ? Z(this.departureTime) : void 0, e = this.arrivalTime ? Z(this.arrivalTime) : void 0, { renderDepartureTimeAttribute: i, renderArrivalTimeAttribute: te } = ce(this.legs, this.departureWalk || 0, this.arrivalWalk || 0, this._language.current, this.a11yFootpath), x = (Q = this.legs) == null ? void 0 : Q.filter((ae) => he(ae));
-      return w`
-      <div class="sbb-pearl-chain__time">
-        ${i()}
-        ${t ? w`<time class="sbb-pearl-chain__time-time" datetime=${this.departureTime}>
-              <span class="sbb-screen-reader-only"
-                >${re[this._language.current]}:&nbsp;</span
-              >
-              ${ee(t, "HH:mm")}
-            </time>` : T}
-        ${(x == null ? void 0 : x.length) > 1 ? w`<span class="sbb-screen-reader-only" role="paragraph">
-              ${(x == null ? void 0 : x.length) - 1} ${se[this._language.current]}
-            </span>` : T}
-        <sbb-pearl-chain
-          class="sbb-pearl-chain__time-chain"
-          .legs=${this.legs}
-          .disableAnimation=${this.disableAnimation}
-          .now=${this.now}
-        ></sbb-pearl-chain>
-        ${e ? w`<time class="sbb-pearl-chain__time-time" datetime=${this.arrivalTime}>
-              <span class="sbb-screen-reader-only"
-                >${le[this._language.current]}:&nbsp;</span
-              >
-              ${ee(e, "HH:mm")}
-            </time>` : T}
-        ${te()}
-      </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(z[Symbol.metadata] ?? null) : void 0;
-    A = [p({ type: Array })], I = [k(), p({ attribute: "departure-time" })], N = [k(), p({ attribute: "arrival-time" })], O = [k(), p({ attribute: "departure-walk", type: Number })], B = [k(), p({ attribute: "arrival-walk", type: Number })], V = [k(), p({ attribute: "disable-animation", type: Boolean })], J = [k(), p({ attribute: "a11y-footpath", type: Boolean })], M = [p()], c(l, null, A, { 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 }, $, F), c(l, null, I, { 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 }, D, S), c(l, null, N, { 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 }, E, H), c(l, null, O, { 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 }, j, P), c(l, null, B, { 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 }, C, R), c(l, null, V, { 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 }, q, G), c(l, null, J, { 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 }, K, L), c(l, null, M, { kind: "setter", name: "now", static: !1, private: !1, access: { has: (e) => "now" in e, set: (e, i) => {
-      e.now = i;
-    } }, metadata: t }, null, W), 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 = be, r(m, o), m;
-})();
+import { SbbPearlChainTimeElement as r } from "./pearl-chain-time/pearl-chain-time.js";
 export {
-  We as SbbPearlChainTimeElement
+  r as SbbPearlChainTimeElement
 };

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

@@ -0,0 +1,23 @@
+import { __esDecorate as c, __runInitializers as o } from "tslib";
+import { css as n, LitElement as b, html as m } from "lit";
+import { customElement as d } from "lit/decorators.js";
+const u = n`*,:before,:after{box-sizing:border-box}: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 i = [d("sbb-pearl-chain-vertical")], l, r = [], t, s = b;
+  return e = class extends s {
+    render() {
+      return m`
+      <div class="sbb-pearl-chain-vertical">
+        <slot></slot>
+      </div>
+    `;
+    }
+  }, t = e, (() => {
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
+    c(null, l = { value: t }, i, { kind: "class", name: t.name, metadata: a }, null, r), t = l.value, a && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
+  })(), e.styles = u, o(t, r), t;
+})();
+export {
+  f as SbbPearlChainVerticalElement
+};

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

@@ -0,0 +1,71 @@
+var C = (e) => {
+  throw TypeError(e);
+};
+var A = (e, a, t) => a.has(e) || C("Cannot " + t);
+var d = (e, a, t) => (A(e, a, "read from private field"), t ? t.call(e) : a.get(e)), v = (e, a, t) => a.has(e) ? C("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(e) : a.set(e, t), m = (e, a, t, r) => (A(e, a, "write to private field"), r ? r.call(e, t) : a.set(e, t), t);
+import { __esDecorate as u, __runInitializers as h } from "tslib";
+import { forceType as S } from "@sbb-esta/lyne-elements/core/decorators.js";
+import { css as E, LitElement as j, nothing as _, html as p } from "lit";
+import { customElement as D, property as I } from "lit/decorators.js";
+const G = E`*,:before,:after{box-sizing:border-box}:host{--sbb-pearl-chain-bullet-size-start-end: .625rem;--sbb-pearl-chain-bullet-size-stop: .5rem;--sbb-pearl-chain-bullet-color: var(--sbb-color-charcoal);--sbb-pearl-chain-bullet-color-past: var(--sbb-color-metal);--sbb-pearl-chain-bullet-color-irrelevant: var(--sbb-color-metal);--sbb-pearl-chain-bullet-color-disruption: var(--sbb-color-red);--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-spacing-medium: var(--sbb-spacing-fixed-4x);--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 var(--sbb-color-red-alpha-20)}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 q = (() => {
+  var c, n, b;
+  let e = [D("sbb-pearl-chain-vertical-item")], a, t = [], r, g = j, f, w = [], k = [], z, x = [], y = [];
+  return b = class extends g {
+    constructor() {
+      super(...arguments);
+      v(this, c, h(this, w, null));
+      v(this, n, (h(this, k), h(this, x, !1)));
+      h(this, y);
+    }
+    /** The pearlChainVerticalItemAttributes Prop for styling the bullets and line.*/
+    get pearlChainVerticalItemAttributes() {
+      return d(this, c);
+    }
+    set pearlChainVerticalItemAttributes(l) {
+      m(this, c, l);
+    }
+    /** If true, the position won't be animated. */
+    get disableAnimation() {
+      return d(this, n);
+    }
+    set disableAnimation(l) {
+      m(this, n, l);
+    }
+    render() {
+      const { bulletType: l, lineType: i, lineColor: o, hideLine: V, minHeight: T, bulletSize: $, position: s } = this.pearlChainVerticalItemAttributes || {}, H = s && s > 0 && s <= 100 ? "sbb-pearl-chain-vertical-item__bullet--past" : `sbb-pearl-chain-vertical-item__bullet--${l}`;
+      return p`
+      <div class="sbb-pearl-chain-vertical-item__column" style="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="--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>`}
+        ${l ? p`<div
+              class="sbb-pearl-chain-vertical-item__bullet  sbb-pearl-chain-vertical-item__bullet--${$} ${H}"
+            ></div>` : _}
+        ${s && s > 0 ? p`<div
+              style="--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(), r = b, (() => {
+    const l = typeof Symbol == "function" && Symbol.metadata ? Object.create(g[Symbol.metadata] ?? null) : void 0;
+    f = [I({ attribute: "pearl-chain-vertical-item-attributes", type: Object })], z = [S(), I({ attribute: "disable-animation", reflect: !0, type: Boolean })], u(b, null, f, { 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: l }, w, k), u(b, null, z, { 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: l }, x, y), u(null, a = { value: r }, e, { kind: "class", name: r.name, metadata: l }, null, t), r = a.value, l && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: l });
+  })(), b.styles = G, h(r, t), r;
+})();
+export {
+  q as SbbPearlChainVerticalItemElement
+};