@sbb-esta/lyne-elements-experimental-dev 4.7.0-dev.1773333596 → 4.7.0-dev.1773388997

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

@@ -1,165 +1,2 @@
-var j = (t) => {
-  throw TypeError(t);
-};
-var M = (t, i, o) => i.has(t) || j("Cannot " + o);
-var N = (t, i, o) => (M(t, i, "read from private field"), o ? o.call(t) : i.get(t)), I = (t, i, o) => i.has(t) ? j("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(t) : i.set(t, o), v = (t, i, o, _) => (M(t, i, "write to private field"), _ ? _.call(t, o) : i.set(t, o), o);
-import { __runInitializers as m, __esDecorate as P } from "tslib";
-import { SbbElement as oe } from "@sbb-esta/lyne-elements/core/base-elements.js";
-import { defaultDateAdapter as Y } from "@sbb-esta/lyne-elements/core/datetime.js";
-import { forceType as ne } from "@sbb-esta/lyne-elements/core/decorators.js";
-import { boxSizingStyles as be } from "@sbb-esta/lyne-elements/core/styles.js";
-import { css as ce, html as f, nothing as F } from "lit";
-import { property as E } from "lit/decorators.js";
-import { styleMap as X } from "lit/directives/style-map.js";
-import { removeTimezoneFromISOTimeString as n } from "../core/datetime.js";
-import { isRideLeg as pe } from "../core/timetable.js";
-import { d as w, a as z } from "../differenceInMinutes-COvvdYsJ.js";
-import { t as x } from "../toDate-Bw2KTWeq.js";
-function he(t, i) {
-  return +x(t) > +x(i);
-}
-function q(t, i) {
-  return +x(t) < +x(i);
-}
-const de = ce`: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-position-color: var(--sbb-color-primary);--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-error);--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-position-color)}@media(forced-colors:active){.sbb-pearl-chain__position{--sbb-pearl-chain-position-color: Highlight}}@keyframes pearl-chain-bullet-position-pulse{0%{box-shadow:0 0 0 0 var(--sbb-pearl-chain-position-color)}25%{box-shadow:0 0 0 0 var(--sbb-pearl-chain-position-color)}50%{box-shadow:0 0 0 .1875rem color-mix(in srgb,var(--sbb-pearl-chain-position-color) 20%,transparent)}to{box-shadow:0 0 0 0 var(--sbb-pearl-chain-position-color)}}.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 Ce = (() => {
-  var u, g, b;
-  let t = oe, i = [], o, _ = [], H = [], O, J = [], R = [], W;
-  return b = class extends t {
-    constructor() {
-      super(...arguments);
-      I(this, u);
-      I(this, g);
-      v(this, u, (m(this, i), m(this, _, []))), v(this, g, (m(this, H), m(this, J, !1))), this._now = (m(this, R), 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 N(this, u);
-    }
-    set legs(a) {
-      v(this, u, a);
-    }
-    /**
-     * Per default, the current location has a pulsating animation. You can
-     * disable the animation with this property.
-     */
-    get disableAnimation() {
-      return N(this, g);
-    }
-    set disableAnimation(a) {
-      v(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 = Y.getValidDateOrNull(Y.deserialize(a));
-    }
-    get now() {
-      return this._now;
-    }
-    _getAllDuration(a) {
-      return a?.reduce((e, r) => {
-        const l = n(r.arrival?.time), s = n(r.departure?.time);
-        return l && s ? e + w(n(r.arrival.time), n(r.departure.time)) : e;
-      }, 0);
-    }
-    _isAllCancelled(a) {
-      return a?.every((e) => e?.serviceJourney?.serviceAlteration?.cancelled);
-    }
-    _getRelativeDuration(a, e) {
-      const r = n(e.arrival?.time), l = n(e.departure?.time);
-      if (r && l) {
-        const s = w(n(e.arrival.time), n(e.departure.time)), c = this._getAllDuration(a);
-        return c === 0 ? 100 : s / c * 100;
-      }
-      return 0;
-    }
-    _getProgress(a, e, r) {
-      if (!e?.time || !r?.time)
-        return 0;
-      const l = z(e.time, e.delay ?? 0), s = z(r.time, r.delay ?? 0), c = w(s, l), S = w(a, l);
-      return c && S / c * 100;
-    }
-    _getStatus(a, e, r) {
-      const l = e && e.time && z(e.time, e.delay ?? 0), s = r && r.time && z(r.time, r.delay ?? 0);
-      return l && q(l, a) && s && he(s, a) ? "progress" : s && q(s, a) ? "past" : "future";
-    }
-    _renderPosition(a, e, r) {
-      const l = this._getProgress(a, e, r);
-      if (l < 0 && l > 100)
-        return;
-      const s = () => ({
-        "--sbb-pearl-chain-status-position": `${l}%`,
-        ...l >= 50 ? { transform: "translateX(-100%)" } : {}
-      }), c = this.disableAnimation ? "sbb-pearl-chain__position--no-animation" : "";
-      return f`<span
-      style=${X(s())}
-      class="sbb-pearl-chain__position ${c}"
-    ></span>`;
-    }
-    render() {
-      const a = this.now ?? /* @__PURE__ */ new Date(), e = this.legs?.filter((p) => pe(p)), r = e?.length && n(e[0]?.departure?.time), l = r && {
-        time: r,
-        delay: e[0].departure.delay ?? 0
-      }, s = e?.length && n(e[e.length - 1].arrival?.time), c = s && {
-        time: s,
-        delay: e[e.length - 1]?.arrival.delay ?? 0
-      }, S = e && e[0]?.serviceJourney?.stopPoints && e[0]?.serviceJourney?.stopPoints[0].stopStatus === "NOT_SERVICED" ? "sbb-pearl-chain--departure-skipped" : "", K = (() => {
-        const p = e && e[e.length - 1], h = p && p.serviceJourney?.stopPoints;
-        return h && h[h.length - 1].stopStatus === "NOT_SERVICED" ? "sbb-pearl-chain--arrival-skipped" : "";
-      })(), G = e && e[0]?.serviceJourney?.serviceAlteration?.cancelled ? "sbb-pearl-chain--departure-disruption" : "", L = e && e[e.length - 1]?.serviceJourney?.serviceAlteration?.cancelled ? "sbb-pearl-chain--arrival-disruption" : "", A = l && c && this._getStatus(a, l, c), Q = e && A && !G ? "sbb-pearl-chain__bullet--" + A : "", U = e && A && !L ? "sbb-pearl-chain__bullet--" + this._getStatus(a, void 0, c) : "";
-      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 ${Q} ${S} ${G}"
-        ></span>
-        ${e?.map((p, h) => {
-        const { stopPoints: d, serviceAlteration: V } = p?.serviceJourney || {}, Z = this._getRelativeDuration(e, p), ee = n(p.departure?.time), ae = n(p.arrival?.time), re = d && d[d.length - 1]?.stopStatus === "NOT_SERVICED", te = d && d[d.length - 1]?.stopStatus === "PLANNED", B = d && d[0]?.stopStatus === "NOT_SERVICED", D = h > 0 && e[h - 1].serviceJourney.stopPoints, ie = D && D[D.length - 1]?.stopStatus === "NOT_SERVICED", k = re || B && te ? "sbb-pearl-chain__leg--skipped" : "", le = B || ie ? "sbb-pearl-chain__stop--departure-skipped" : "", y = V?.cancelled || V?.partiallyCancelled ? "sbb-pearl-chain__leg--disruption" : "", T = { time: ee, delay: p.departure?.delay ?? 0 }, C = { time: ae, delay: p.arrival?.delay ?? 0 }, $ = this._getStatus(a, T, C), se = !y && !k && "sbb-pearl-chain__leg--" + $;
-        return f` <div
-            class="sbb-pearl-chain__leg ${se || ""} ${y} ${k}"
-            style=${X({
-          "--sbb-pearl-chain-leg-width": `${Z}%`,
-          ...$ === "progress" && !y && !k ? {
-            "--sbb-pearl-chain-leg-status": `${this._getProgress(a, T, C)}%`
-          } : {}
-        })}
-          >
-            ${h > 0 && h < e.length ? f`<span class="sbb-pearl-chain__stop ${le}"></span>` : F}
-            ${$ === "progress" && !y && !k ? this._renderPosition(a, T, C) : F}
-          </div>`;
-      })}
-        <span
-          class="sbb-pearl-chain__bullet ${U} ${K} ${L}"
-        ></span>
-      </div>
-    `;
-    }
-  }, u = new WeakMap(), g = new WeakMap(), (() => {
-    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(t[Symbol.metadata] ?? null) : void 0;
-    o = [E({ type: Array })], O = [ne(), E({ attribute: "disable-animation", type: Boolean })], W = [E()], P(b, null, o, { 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 }, _, H), P(b, null, O, { 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, R), P(b, null, W, { kind: "setter", name: "now", static: !1, private: !1, access: { has: (e) => "now" in e, set: (e, r) => {
-      e.now = r;
-    } }, metadata: a }, null, i), a && Object.defineProperty(b, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
-  })(), b.elementName = "sbb-pearl-chain", b.styles = [be, de], b;
-})();
-export {
-  Ce as SbbPearlChainElement
-};
+import { t as e } from "../pearl-chain.component-DmjkVIva.js";
+export { e as SbbPearlChainElement };

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

@@ -1,157 +1,2 @@
-var M = (a) => {
-  throw TypeError(a);
-};
-var Q = (a, s, o) => s.has(a) || M("Cannot " + o);
-var m = (a, s, o) => (Q(a, s, "read from private field"), o ? o.call(a) : s.get(a)), c = (a, s, o) => s.has(a) ? M("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(a) : s.set(a, o), l = (a, s, o, x) => (Q(a, s, "write to private field"), x ? x.call(a, o) : s.set(a, o), o);
-import { __runInitializers as n, __esDecorate as h } from "tslib";
-import { SbbElement as P } from "@sbb-esta/lyne-elements/core/base-elements.js";
-import { SbbLanguageController as C } from "@sbb-esta/lyne-elements/core/controllers.js";
-import { defaultDateAdapter as U } from "@sbb-esta/lyne-elements/core/datetime.js";
-import { forceType as y } from "@sbb-esta/lyne-elements/core/decorators.js";
-import { i18nDeparture as ee, i18nTransferProcedures as te, i18nArrival as ae } from "@sbb-esta/lyne-elements/core/i18n.js";
-import { boxSizingStyles as ie } from "@sbb-esta/lyne-elements/core/styles.js";
-import { css as re, nothing as w, html as k } from "lit";
-import { property as p } from "lit/decorators.js";
-import { removeTimezoneFromISOTimeString as X } from "../core/datetime.js";
-import { getDepartureArrivalTimeAttribute as se, isRideLeg as le } from "../core/timetable.js";
-import "../pearl-chain.js";
-import { f as Y } from "../format-CmKROkbc.js";
-const ne = re`: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 we = (() => {
-  var b, d, g, _, u, f, v, r;
-  let a = P, s = [], o, x = [], z = [], T, W = [], A = [], $, F = [], I = [], N, D = [], H = [], O, j = [], L = [], B, S = [], R = [], V, q = [], G = [], J;
-  return r = class extends a {
-    constructor() {
-      super(...arguments);
-      c(this, b);
-      c(this, d);
-      c(this, g);
-      c(this, _);
-      c(this, u);
-      c(this, f);
-      c(this, v);
-      l(this, b, (n(this, s), n(this, x, []))), l(this, d, (n(this, z), n(this, W, ""))), l(this, g, (n(this, A), n(this, F, ""))), l(this, _, (n(this, I), n(this, D, NaN))), l(this, u, (n(this, H), n(this, j, NaN))), l(this, f, (n(this, L), n(this, S, !1))), l(this, v, (n(this, R), n(this, q, !1))), this._now = (n(this, G), null), this._language = new C(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 m(this, b);
-    }
-    set legs(t) {
-      l(this, b, t);
-    }
-    /** Prop to render the departure time - will be formatted as "H:mm" */
-    get departureTime() {
-      return m(this, d);
-    }
-    set departureTime(t) {
-      l(this, d, t);
-    }
-    /** Prop to render the arrival time - will be formatted as "H:mm" */
-    get arrivalTime() {
-      return m(this, g);
-    }
-    set arrivalTime(t) {
-      l(this, g, t);
-    }
-    /** Optional prop to render the walk time (in minutes) before departure */
-    get departureWalk() {
-      return m(this, _);
-    }
-    set departureWalk(t) {
-      l(this, _, t);
-    }
-    /** Optional prop to render the walk time (in minutes) after arrival */
-    get arrivalWalk() {
-      return m(this, u);
-    }
-    set arrivalWalk(t) {
-      l(this, u, t);
-    }
-    /**
-     * Per default, the current location has a pulsating animation. You can
-     * disable the animation with this property.
-     */
-    get disableAnimation() {
-      return m(this, f);
-    }
-    set disableAnimation(t) {
-      l(this, f, t);
-    }
-    /** Optional prop to render wheelchair-small instead of walk-small */
-    get a11yFootpath() {
-      return m(this, v);
-    }
-    set a11yFootpath(t) {
-      l(this, v, 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 = U.getValidDateOrNull(U.deserialize(t));
-    }
-    get now() {
-      return this._now ?? /* @__PURE__ */ new Date();
-    }
-    render() {
-      const t = this.departureTime ? X(this.departureTime) : void 0, e = this.arrivalTime ? X(this.arrivalTime) : void 0, { renderDepartureTimeAttribute: i, renderArrivalTimeAttribute: Z } = se(this.legs, this.departureWalk || 0, this.arrivalWalk || 0, this._language.current, this.a11yFootpath), K = this.legs?.filter((E) => le(E));
-      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"
-                >${ee[this._language.current]}:&nbsp;</span
-              >
-              ${Y(t, "HH:mm")}
-            </time>` : w}
-        ${K?.length > 1 ? k`<span class="sbb-screen-reader-only" role="paragraph">
-              ${K?.length - 1} ${te[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"
-                >${ae[this._language.current]}:&nbsp;</span
-              >
-              ${Y(e, "HH:mm")}
-            </time>` : w}
-        ${Z()}
-      </div>
-    `;
-    }
-  }, b = new WeakMap(), d = new WeakMap(), g = new WeakMap(), _ = new WeakMap(), u = new WeakMap(), f = new WeakMap(), v = new WeakMap(), (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
-    o = [p({ type: Array })], T = [y(), p({ attribute: "departure-time" })], $ = [y(), p({ attribute: "arrival-time" })], N = [y(), p({ attribute: "departure-walk", type: Number })], O = [y(), p({ attribute: "arrival-walk", type: Number })], B = [y(), p({ attribute: "disable-animation", type: Boolean })], V = [y(), p({ attribute: "a11y-footpath", type: Boolean })], J = [p()], h(r, null, o, { 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 }, x, z), h(r, null, T, { 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 }, W, A), h(r, null, $, { 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 }, F, I), h(r, null, N, { 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 }, D, H), h(r, null, O, { 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 }, j, L), h(r, null, B, { 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 }, S, R), h(r, null, V, { 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 }, q, G), h(r, null, J, { kind: "setter", name: "now", static: !1, private: !1, access: { has: (e) => "now" in e, set: (e, i) => {
-      e.now = i;
-    } }, metadata: t }, null, s), t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), r.elementName = "sbb-pearl-chain-time", r.styles = [ie, ne], r;
-})();
-export {
-  we as SbbPearlChainTimeElement
-};
+import { t as e } from "../pearl-chain-time.component-DGDW5S1c.js";
+export { e as SbbPearlChainTimeElement };

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

@@ -0,0 +1,239 @@
+import { t as e } from "./format-CM5exOsN.js";
+import { __esDecorate as t, __runInitializers as n } from "tslib";
+import { SbbElement as r } from "@sbb-esta/lyne-elements/core/base-elements.js";
+import { SbbLanguageController as i } from "@sbb-esta/lyne-elements/core/controllers.js";
+import { forceType as a } from "@sbb-esta/lyne-elements/core/decorators.js";
+import { boxSizingStyles as o } from "@sbb-esta/lyne-elements/core/styles.js";
+import { css as s, html as c, nothing as l } from "lit";
+import { defaultDateAdapter as u } from "@sbb-esta/lyne-elements/core/datetime.js";
+import { i18nArrival as d, i18nDeparture as f, i18nTransferProcedures as p } from "@sbb-esta/lyne-elements/core/i18n.js";
+import { property as m } from "lit/decorators.js";
+import { removeTimezoneFromISOTimeString as h } from "./core/datetime.js";
+import { getDepartureArrivalTimeAttribute as g, isRideLeg as _ } from "./core/timetable.js";
+import "./pearl-chain.js";
+//#region src/elements-experimental/pearl-chain-time/pearl-chain-time.scss?lit&inline
+var v = s`:host{--sbb-pearl-chain-time-height:auto;display:block}@media (width>=37.5rem){:host{--sbb-pearl-chain-time-height:1.5625rem}}@media (width>=64rem){:host{--sbb-pearl-chain-time-height:1.75rem}}.sbb-pearl-chain__time{height:var(--sbb-pearl-chain-time-height);flex-wrap:wrap;justify-content:space-between;align-items:center;display:flex}.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);align-items:center;display:inline-flex}.sbb-pearl-chain__time-walktime--walk-small-left{margin-inline-end:calc(var(--sbb-spacing-fixed-2x) - .4375rem);transform:translate(-.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{margin-inline-end:calc(var(--sbb-spacing-fixed-2x) - .4375rem);transform:translate(-.375rem)}.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{margin-inline:var(--sbb-spacing-fixed-3x);flex:auto;align-self:center}.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);color:var(--sbb-color-2);font-weight:700}.sbb-screen-reader-only{clip-path:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}`, y = (() => {
+	let s = r, y = [], b, x = [], S = [], C, w = [], T = [], E, D = [], O = [], k, A = [], j = [], M, N = [], P = [], F, I = [], L = [], R, z = [], B = [], V;
+	return class extends s {
+		constructor() {
+			super(...arguments), this.#e = (n(this, y), n(this, x, [])), this.#t = (n(this, S), n(this, w, "")), this.#n = (n(this, T), n(this, D, "")), this.#r = (n(this, O), n(this, A, NaN)), this.#i = (n(this, j), n(this, N, NaN)), this.#a = (n(this, P), n(this, I, !1)), this.#o = (n(this, L), n(this, z, !1)), this._now = (n(this, B), null), this._language = new i(this);
+		}
+		static {
+			let e = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
+			b = [m({ type: Array })], C = [a(), m({ attribute: "departure-time" })], E = [a(), m({ attribute: "arrival-time" })], k = [a(), m({
+				attribute: "departure-walk",
+				type: Number
+			})], M = [a(), m({
+				attribute: "arrival-walk",
+				type: Number
+			})], F = [a(), m({
+				attribute: "disable-animation",
+				type: Boolean
+			})], R = [a(), m({
+				attribute: "a11y-footpath",
+				type: Boolean
+			})], V = [m()], t(this, null, b, {
+				kind: "accessor",
+				name: "legs",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "legs" in e,
+					get: (e) => e.legs,
+					set: (e, t) => {
+						e.legs = t;
+					}
+				},
+				metadata: e
+			}, x, S), t(this, null, C, {
+				kind: "accessor",
+				name: "departureTime",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "departureTime" in e,
+					get: (e) => e.departureTime,
+					set: (e, t) => {
+						e.departureTime = t;
+					}
+				},
+				metadata: e
+			}, w, T), t(this, null, E, {
+				kind: "accessor",
+				name: "arrivalTime",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "arrivalTime" in e,
+					get: (e) => e.arrivalTime,
+					set: (e, t) => {
+						e.arrivalTime = t;
+					}
+				},
+				metadata: e
+			}, D, O), t(this, null, k, {
+				kind: "accessor",
+				name: "departureWalk",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "departureWalk" in e,
+					get: (e) => e.departureWalk,
+					set: (e, t) => {
+						e.departureWalk = t;
+					}
+				},
+				metadata: e
+			}, A, j), t(this, null, M, {
+				kind: "accessor",
+				name: "arrivalWalk",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "arrivalWalk" in e,
+					get: (e) => e.arrivalWalk,
+					set: (e, t) => {
+						e.arrivalWalk = t;
+					}
+				},
+				metadata: e
+			}, N, P), t(this, null, F, {
+				kind: "accessor",
+				name: "disableAnimation",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "disableAnimation" in e,
+					get: (e) => e.disableAnimation,
+					set: (e, t) => {
+						e.disableAnimation = t;
+					}
+				},
+				metadata: e
+			}, I, L), t(this, null, R, {
+				kind: "accessor",
+				name: "a11yFootpath",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "a11yFootpath" in e,
+					get: (e) => e.a11yFootpath,
+					set: (e, t) => {
+						e.a11yFootpath = t;
+					}
+				},
+				metadata: e
+			}, z, B), t(this, null, V, {
+				kind: "setter",
+				name: "now",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "now" in e,
+					set: (e, t) => {
+						e.now = t;
+					}
+				},
+				metadata: e
+			}, null, y), e && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: e
+			});
+		}
+		static {
+			this.elementName = "sbb-pearl-chain-time";
+		}
+		static {
+			this.styles = [o, v];
+		}
+		#e;
+		get legs() {
+			return this.#e;
+		}
+		set legs(e) {
+			this.#e = e;
+		}
+		#t;
+		get departureTime() {
+			return this.#t;
+		}
+		set departureTime(e) {
+			this.#t = e;
+		}
+		#n;
+		get arrivalTime() {
+			return this.#n;
+		}
+		set arrivalTime(e) {
+			this.#n = e;
+		}
+		#r;
+		get departureWalk() {
+			return this.#r;
+		}
+		set departureWalk(e) {
+			this.#r = e;
+		}
+		#i;
+		get arrivalWalk() {
+			return this.#i;
+		}
+		set arrivalWalk(e) {
+			this.#i = e;
+		}
+		#a;
+		get disableAnimation() {
+			return this.#a;
+		}
+		set disableAnimation(e) {
+			this.#a = e;
+		}
+		#o;
+		get a11yFootpath() {
+			return this.#o;
+		}
+		set a11yFootpath(e) {
+			this.#o = e;
+		}
+		set now(e) {
+			this._now = u.getValidDateOrNull(u.deserialize(e));
+		}
+		get now() {
+			return this._now ?? /* @__PURE__ */ new Date();
+		}
+		render() {
+			let t = this.departureTime ? h(this.departureTime) : void 0, n = this.arrivalTime ? h(this.arrivalTime) : void 0, { renderDepartureTimeAttribute: r, renderArrivalTimeAttribute: i } = g(this.legs, this.departureWalk || 0, this.arrivalWalk || 0, this._language.current, this.a11yFootpath), a = this.legs?.filter((e) => _(e));
+			return c`
+      <div class="sbb-pearl-chain__time">
+        ${r()}
+        ${t ? c`<time class="sbb-pearl-chain__time-time" datetime=${this.departureTime}>
+              <span class="sbb-screen-reader-only"
+                >${f[this._language.current]}:&nbsp;</span
+              >
+              ${e(t, "HH:mm")}
+            </time>` : l}
+        ${a?.length > 1 ? c`<span class="sbb-screen-reader-only" role="paragraph">
+              ${a?.length - 1} ${p[this._language.current]}
+            </span>` : l}
+        <sbb-pearl-chain
+          class="sbb-pearl-chain__time-chain"
+          .legs=${this.legs}
+          .disableAnimation=${this.disableAnimation}
+          .now=${this.now}
+        ></sbb-pearl-chain>
+        ${n ? c`<time class="sbb-pearl-chain__time-time" datetime=${this.arrivalTime}>
+              <span class="sbb-screen-reader-only"
+                >${d[this._language.current]}:&nbsp;</span
+              >
+              ${e(n, "HH:mm")}
+            </time>` : l}
+        ${i()}
+      </div>
+    `;
+		}
+	};
+})();
+//#endregion
+export { y as t };

package/pearl-chain-time.js

@@ -1,5 +1,6 @@
-import { SbbPearlChainTimeElement as e } from "./pearl-chain-time/pearl-chain-time.component.js";
+import { t as e } from "./pearl-chain-time.component-DGDW5S1c.js";
+import "./pearl-chain-time.pure.js";
+//#region src/elements-experimental/pearl-chain-time.ts
 e.define();
-export {
-  e as SbbPearlChainTimeElement
-};
+//#endregion
+export { e as SbbPearlChainTimeElement };

package/pearl-chain-time.pure.js

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

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

@@ -1,17 +1,2 @@
-import { SbbElement as i } from "@sbb-esta/lyne-elements/core/base-elements.js";
-import { boxSizingStyles as r } from "@sbb-esta/lyne-elements/core/styles.js";
-import { css as a, html as l } from "lit";
-const c = a`:host{--sbb-pearl-chain-vertical-width: 100%;display:block}.sbb-pearl-chain-vertical{display:table;width:var(--sbb-pearl-chain-vertical-width)}`, s = class s extends i {
-  render() {
-    return l`
-      <div class="sbb-pearl-chain-vertical">
-        <slot></slot>
-      </div>
-    `;
-  }
-};
-s.elementName = "sbb-pearl-chain-vertical", s.styles = [r, c];
-let t = s;
-export {
-  t as SbbPearlChainVerticalElement
-};
+import { t as e } from "../pearl-chain-vertical.component-CXIDT5RD.js";
+export { e as SbbPearlChainVerticalElement };