@sbb-esta/lyne-elements-experimental 0.0.0 → 0.52.0

package/pearl-chain-time.js

@@ -0,0 +1,90 @@
+import { SbbLanguageController as f } from "@sbb-esta/lyne-elements/core/controllers.js";
+import { defaultDateAdapter as h } from "@sbb-esta/lyne-elements/core/datetime.js";
+import { i18nDeparture as d, i18nTransferProcedures as u, i18nArrival as _ } from "@sbb-esta/lyne-elements/core/i18n.js";
+import { css as v, LitElement as y, html as p, nothing as m } from "lit";
+import { property as n, customElement as x } from "lit/decorators.js";
+import { removeTimezoneFromISOTimeString as c } from "./core/datetime.js";
+import { getDepartureArrivalTimeAttribute as w, isRideLeg as $ } from "./core/timetable.js";
+import "./pearl-chain.js";
+import { f as g } from "./format-CEz7IGRJ.js";
+const T = v`*,:before,:after{box-sizing:border-box}:host{--sbb-pearl-chain-time-height: auto;display:block}@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--left{transform:translate(-.4375rem);margin-inline-end:calc(var(--sbb-spacing-fixed-2x) - .4375rem)}.sbb-pearl-chain__time-walktime--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--departure{margin-inline-end:var(--sbb-spacing-fixed-2x)}.sbb-pearl-chain__time-transfer--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}`;
+var z = Object.defineProperty, A = Object.getOwnPropertyDescriptor, i = (r, a, b, s) => {
+  for (var e = s > 1 ? void 0 : s ? A(a, b) : a, l = r.length - 1, o; l >= 0; l--)
+    (o = r[l]) && (e = (s ? o(a, b, e) : o(e)) || e);
+  return s && e && z(a, b, e), e;
+};
+let t = class extends y {
+  constructor() {
+    super(...arguments), this._now = null, this._language = new f(this);
+  }
+  set now(r) {
+    this._now = h.getValidDateOrNull(h.deserialize(r));
+  }
+  get now() {
+    return this._now ?? /* @__PURE__ */ new Date();
+  }
+  render() {
+    var l;
+    const r = this.departureTime ? c(this.departureTime) : void 0, a = this.arrivalTime ? c(this.arrivalTime) : void 0, { renderDepartureTimeAttribute: b, renderArrivalTimeAttribute: s } = w(
+      this.legs,
+      this.departureWalk || 0,
+      this.arrivalWalk || 0,
+      this._language.current
+    ), e = (l = this.legs) == null ? void 0 : l.filter((o) => $(o));
+    return p`
+      <div class="sbb-pearl-chain__time">
+        ${b()}
+        ${r ? p`<time class="sbb-pearl-chain__time-time" datetime=${this.departureTime}>
+              <span class="sbb-screen-reader-only"
+                >${d[this._language.current]}:&nbsp;</span
+              >
+              ${g(r, "HH:mm")}
+            </time>` : m}
+        ${(e == null ? void 0 : e.length) > 1 ? p`<span class="sbb-screen-reader-only" role="paragraph">
+              ${(e == null ? void 0 : e.length) - 1} ${u[this._language.current]}
+            </span>` : m}
+        <sbb-pearl-chain
+          class="sbb-pearl-chain__time-chain"
+          .legs=${this.legs}
+          .disableAnimation=${this.disableAnimation}
+          .now=${this.now}
+        ></sbb-pearl-chain>
+        ${a ? p`<time class="sbb-pearl-chain__time-time" datetime=${this.arrivalTime}>
+              <span class="sbb-screen-reader-only"
+                >${_[this._language.current]}:&nbsp;</span
+              >
+              ${g(a, "HH:mm")}
+            </time>` : m}
+        ${s()}
+      </div>
+    `;
+  }
+};
+t.styles = T;
+i([
+  n({ type: Array })
+], t.prototype, "legs", 2);
+i([
+  n({ attribute: "departure-time" })
+], t.prototype, "departureTime", 2);
+i([
+  n({ attribute: "arrival-time" })
+], t.prototype, "arrivalTime", 2);
+i([
+  n({ attribute: "departure-walk", type: Number })
+], t.prototype, "departureWalk", 2);
+i([
+  n({ attribute: "arrival-walk", type: Number })
+], t.prototype, "arrivalWalk", 2);
+i([
+  n({ attribute: "disable-animation", type: Boolean })
+], t.prototype, "disableAnimation", 2);
+i([
+  n()
+], t.prototype, "now", 1);
+t = i([
+  x("sbb-pearl-chain-time")
+], t);
+export {
+  t as SbbPearlChainTimeElement
+};

package/pearl-chain-vertical/pearl-chain-vertical.d.ts

@@ -0,0 +1,17 @@
+import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
+
+/**
+ * It can be used as a container for the `sbb-pearl-chain-vertical-item` component.
+ *
+ * @slot - The unnamed slot is used for the `sbb-pearl-chain-vertical-item` component.
+ */
+export declare class SbbPearlChainVerticalElement extends LitElement {
+    static styles: CSSResultGroup;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-pearl-chain-vertical': SbbPearlChainVerticalElement;
+    }
+}
+//# sourceMappingURL=pearl-chain-vertical.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pearl-chain-vertical.d.ts","sourceRoot":"","sources":["../../../src/elements-experimental/pearl-chain-vertical/pearl-chain-vertical.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC;;;;GAIG;AACH,qBACa,4BAA6B,SAAQ,UAAU;IAC1D,OAAuB,MAAM,EAAE,cAAc,CAAS;cAEnC,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,0BAA0B,EAAE,4BAA4B,CAAC;KAC1D;CACF"}

package/pearl-chain-vertical-item/pearl-chain-vertical-item.d.ts

@@ -0,0 +1,35 @@
+import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
+
+export type LineType = 'dotted' | 'standard' | 'thin';
+export type BulletType = 'default' | 'past' | 'irrelevant' | 'skipped' | 'disruption';
+export type LineColor = 'default' | 'past' | 'disruption' | 'walk';
+export type BulletSize = 'start-end' | 'stop';
+export interface PearlChainVerticalItemAttributes {
+    lineType: LineType;
+    lineColor: LineColor;
+    bulletType?: BulletType;
+    minHeight: number;
+    hideLine: boolean;
+    bulletSize: BulletSize;
+    position?: number;
+}
+/**
+ * It displays details about connection between stations.
+ *
+ * @slot left - Content of the left side of the item
+ * @slot right - Content of the right side of the item
+ */
+export declare class SbbPearlChainVerticalItemElement extends LitElement {
+    static styles: CSSResultGroup;
+    /** The pearlChainVerticalItemAttributes Prop for styling the bullets and line.*/
+    pearlChainVerticalItemAttributes: PearlChainVerticalItemAttributes;
+    /** If true, the position won't be animated. */
+    disableAnimation?: boolean;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-pearl-chain-vertical-item': SbbPearlChainVerticalItemElement;
+    }
+}
+//# sourceMappingURL=pearl-chain-vertical-item.d.ts.map

package/pearl-chain-vertical-item/pearl-chain-vertical-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pearl-chain-vertical-item.d.ts","sourceRoot":"","sources":["../../../src/elements-experimental/pearl-chain-vertical-item/pearl-chain-vertical-item.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAKhD,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AAEtD,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,MAAM,GAAG,YAAY,GAAG,SAAS,GAAG,YAAY,CAAC;AAEtF,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,YAAY,GAAG,MAAM,CAAC;AAEnE,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,MAAM,CAAC;AAE9C,MAAM,WAAW,gCAAgC;IAC/C,QAAQ,EAAE,QAAQ,CAAC;IACnB,SAAS,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;GAKG;AACH,qBACa,gCAAiC,SAAQ,UAAU;IAC9D,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,iFAAiF;IAE1E,gCAAgC,EAAG,gCAAgC,CAAC;IAE3E,+CAA+C;IAExC,gBAAgB,CAAC,EAAE,OAAO,CAAC;cAEf,MAAM,IAAI,cAAc;CAsC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,+BAA+B,EAAE,gCAAgC,CAAC;KACnE;CACF"}

package/pearl-chain-vertical-item.d.ts

@@ -0,0 +1,2 @@
+export * from './pearl-chain-vertical-item/pearl-chain-vertical-item.js';
+//# sourceMappingURL=pearl-chain-vertical-item.d.ts.map

package/pearl-chain-vertical-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pearl-chain-vertical-item.d.ts","sourceRoot":"","sources":["../../src/elements-experimental/pearl-chain-vertical-item.ts"],"names":[],"mappings":"AAAA,cAAc,0DAA0D,CAAC"}

package/pearl-chain-vertical-item.js

@@ -0,0 +1,48 @@
+import { css as d, LitElement as v, html as s, nothing as o } from "lit";
+import { property as p, customElement as m } from "lit/decorators.js";
+const u = d`*,: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{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%;position:relative;inset-inline-start:var(--sbb-pearl-chain-vertical-item-inline-start);transform:var(--sbb-pearl-chain-vertical-item-transform)}@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{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-border-width: var(--sbb-border-width-1x)}.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{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-crossed-width: .706875rem;--sbb-pearl-chain-bullet-crossed-height: .1875rem}.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{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%;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-bullet-color: var(--sbb-pearl-chain-bullet-color-disruption);animation:pearl-chain-bullet-position-pulse var(--sbb-pearl-chain-bullet-animation-duration) var(--sbb-pearl-chain-bullet-animation-easing) infinite;position:absolute;left:50%;transform:translate(-50%);inset-block-start:var(--sbb-pearl-chain-vertical-item-position)}@media (forced-colors: active){.sbb-pearl-chain-vertical-item__bullet--position{--sbb-pearl-chain-bullet-color: CanvasText}}@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)}}:host([disable-animation]) .sbb-pearl-chain-vertical-item__bullet--position{animation:unset!important}`;
+var _ = Object.defineProperty, g = Object.getOwnPropertyDescriptor, n = (l, i, t, r) => {
+  for (var a = r > 1 ? void 0 : r ? g(i, t) : i, b = l.length - 1, e; b >= 0; b--)
+    (e = l[b]) && (a = (r ? e(i, t, a) : e(a)) || a);
+  return r && a && _(i, t, a), a;
+};
+let c = class extends v {
+  render() {
+    const { bulletType: l, lineType: i, lineColor: t, hideLine: r, minHeight: a, bulletSize: b, position: e } = this.pearlChainVerticalItemAttributes || {}, h = e && e > 0 && e <= 100 ? "sbb-pearl-chain-vertical-item__bullet--past" : `sbb-pearl-chain-vertical-item__bullet--${l}`;
+    return s`
+      <div class="sbb-pearl-chain-vertical-item__column" style="height: ${a}px;">
+        <slot name="left"></slot>
+      </div>
+      <div
+        aria-hidden="true"
+        class="sbb-pearl-chain-vertical-item__column sbb-pearl-chain-vertical-item__column--middle"
+      >
+        ${r ? o : s`<div
+              style="--sbb-pearl-chain-vertical-item-leg-status:${e}%;"
+              class="sbb-pearl-chain-vertical-item__line sbb-pearl-chain-vertical-item__line--${i} sbb-pearl-chain-vertical-item__line--${t}"
+            ></div>`}
+        ${l ? s`<div
+              class="sbb-pearl-chain-vertical-item__bullet  sbb-pearl-chain-vertical-item__bullet--${b} ${h}"
+            ></div>` : o}
+        ${e && e > 0 ? s`<div
+              style="--sbb-pearl-chain-vertical-item-position:${e}%;"
+              class="sbb-pearl-chain-vertical-item__bullet--position"
+            ></div>` : o}
+      </div>
+      <slot name="right"></slot>
+    `;
+  }
+};
+c.styles = u;
+n([
+  p({ attribute: "pearl-chain-vertical-item-attributes", type: Object })
+], c.prototype, "pearlChainVerticalItemAttributes", 2);
+n([
+  p({ attribute: "disable-animation", reflect: !0, type: Boolean })
+], c.prototype, "disableAnimation", 2);
+c = n([
+  m("sbb-pearl-chain-vertical-item")
+], c);
+export {
+  c as SbbPearlChainVerticalItemElement
+};

package/pearl-chain-vertical.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"pearl-chain-vertical.d.ts","sourceRoot":"","sources":["../../src/elements-experimental/pearl-chain-vertical.ts"],"names":[],"mappings":"AAAA,cAAc,gDAAgD,CAAC"}

package/pearl-chain-vertical.js

@@ -0,0 +1,24 @@
+import { css as c, LitElement as o, html as n } from "lit";
+import { customElement as p } from "lit/decorators.js";
+const v = c`*,: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)}`;
+var h = Object.defineProperty, f = Object.getOwnPropertyDescriptor, m = (b, r, l, t) => {
+  for (var e = t > 1 ? void 0 : t ? f(r, l) : r, s = b.length - 1, a; s >= 0; s--)
+    (a = b[s]) && (e = (t ? a(r, l, e) : a(e)) || e);
+  return t && e && h(r, l, e), e;
+};
+let i = class extends o {
+  render() {
+    return n`
+      <div class="sbb-pearl-chain-vertical">
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+i.styles = v;
+i = m([
+  p("sbb-pearl-chain-vertical")
+], i);
+export {
+  i as SbbPearlChainVerticalElement
+};

package/pearl-chain.d.ts

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

package/pearl-chain.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pearl-chain.d.ts","sourceRoot":"","sources":["../../src/elements-experimental/pearl-chain.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC"}

package/pearl-chain.js

@@ -0,0 +1,148 @@
+import { defaultDateAdapter as O } from "@sbb-esta/lyne-elements/core/datetime.js";
+import { css as q, LitElement as K, html as v, nothing as H } from "lit";
+import { property as y, customElement as Q } from "lit/decorators.js";
+import { styleMap as J } from "lit/directives/style-map.js";
+import { removeTimezoneFromISOTimeString as n } from "./core/datetime.js";
+import { isRideLeg as U } from "./core/timetable.js";
+import { d as m } from "./differenceInMinutes-CDpgJIgL.js";
+import { t as f } from "./constants-ClrwyPF-.js";
+function W(e, r) {
+  const a = f(e), t = f(r);
+  return a.getTime() > t.getTime();
+}
+function R(e, r) {
+  const a = f(e), t = f(r);
+  return +a < +t;
+}
+const Z = q`*,:before,:after{box-sizing:border-box}:host{--sbb-pearl-chain-height: var(--sbb-border-width-2x);--sbb-pearl-chain-spacing-small: var(--sbb-spacing-fixed-1x);--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%;--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:block}.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{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%;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);content:"";position:absolute;background-color:currentcolor;inset-block-start:0;z-index:3}@media (forced-colors: active){.sbb-pearl-chain__bullet{--sbb-pearl-chain-bullet-color: CanvasText}}.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{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%;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;position:relative;z-index:2}@media (forced-colors: active){.sbb-pearl-chain__stop{--sbb-pearl-chain-bullet-color: CanvasText}}.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{--sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-past);color:var(--sbb-pearl-chain-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{--sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-past);background:var(--sbb-pearl-chain-bullet-color)}@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{--sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-disruption);color:var(--sbb-pearl-chain-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{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%;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-bullet-color: var(--sbb-pearl-chain-bullet-color-disruption);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)}@media (forced-colors: active){.sbb-pearl-chain__position{--sbb-pearl-chain-bullet-color: CanvasText}}@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--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}`;
+var L = Object.defineProperty, rr = Object.getOwnPropertyDescriptor, k = (e, r, a, t) => {
+  for (var i = t > 1 ? void 0 : t ? rr(r, a) : r, o = e.length - 1, c; o >= 0; o--)
+    (c = e[o]) && (i = (t ? c(r, a, i) : c(i)) || i);
+  return t && i && L(r, a, i), i;
+};
+let d = class extends K {
+  constructor() {
+    super(...arguments), this._now = null;
+  }
+  set now(e) {
+    this._now = O.getValidDateOrNull(O.deserialize(e));
+  }
+  get now() {
+    return this._now;
+  }
+  _getAllDuration(e) {
+    return e == null ? void 0 : e.reduce((r, a) => {
+      var o, c;
+      const t = n((o = a.arrival) == null ? void 0 : o.time), i = n((c = a.departure) == null ? void 0 : c.time);
+      return t && i ? r + m(
+        n(a.arrival.time),
+        n(a.departure.time)
+      ) : r;
+    }, 0);
+  }
+  _isAllCancelled(e) {
+    return e == null ? void 0 : e.every((r) => {
+      var a, t;
+      return (t = (a = r == null ? void 0 : r.serviceJourney) == null ? void 0 : a.serviceAlteration) == null ? void 0 : t.cancelled;
+    });
+  }
+  _getRelativeDuration(e, r) {
+    var i, o;
+    const a = n((i = r.arrival) == null ? void 0 : i.time), t = n((o = r.departure) == null ? void 0 : o.time);
+    if (a && t) {
+      const c = m(
+        n(r.arrival.time),
+        n(r.departure.time)
+      ), _ = this._getAllDuration(e);
+      return _ === 0 ? 100 : c / _ * 100;
+    }
+    return 0;
+  }
+  _getProgress(e, r, a) {
+    if (!r || !a)
+      return 0;
+    const t = m(a, r), i = m(e, r);
+    return t && i / t * 100;
+  }
+  _getStatus(e, r, a) {
+    return a && r && R(a, e) && W(r, e) ? "progress" : r && R(r, e) ? "past" : "future";
+  }
+  _renderPosition(e, r, a) {
+    const t = this._getProgress(e, r, a);
+    if (t < 0 && t > 100)
+      return;
+    const i = () => ({
+      "--sbb-pearl-chain-status-position": `${t}%`,
+      ...t >= 50 ? { transform: "translateX(-100%)" } : {}
+    }), o = this.disableAnimation ? "sbb-pearl-chain__position--no-animation" : "";
+    return v`<span
+      style=${J(i())}
+      class="sbb-pearl-chain__position ${o}"
+    ></span>`;
+  }
+  render() {
+    var z, x, S, C;
+    const e = this.now ?? /* @__PURE__ */ new Date(), r = (z = this.legs) == null ? void 0 : z.filter((l) => U(l)), a = (r == null ? void 0 : r.length) && n((S = (x = r[0]) == null ? void 0 : x.departure) == null ? void 0 : S.time), t = (r == null ? void 0 : r.length) && n((C = r[(r == null ? void 0 : r.length) - 1].arrival) == null ? void 0 : C.time), i = (() => {
+      var l, b, s, p;
+      return r && ((b = (l = r[0]) == null ? void 0 : l.serviceJourney) != null && b.stopPoints) && ((p = (s = r[0]) == null ? void 0 : s.serviceJourney) == null ? void 0 : p.stopPoints[0].stopStatus) === "NOT_SERVICED" ? "sbb-pearl-chain--departure-skipped" : "";
+    })(), o = (() => {
+      var s;
+      const l = r && r[r.length - 1], b = l && ((s = l.serviceJourney) == null ? void 0 : s.stopPoints);
+      return b && b[b.length - 1].stopStatus === "NOT_SERVICED" ? "sbb-pearl-chain--arrival-skipped" : "";
+    })(), c = (() => {
+      var l, b, s;
+      return r && ((s = (b = (l = r[0]) == null ? void 0 : l.serviceJourney) == null ? void 0 : b.serviceAlteration) != null && s.cancelled) ? "sbb-pearl-chain--departure-disruption" : "";
+    })(), _ = (() => {
+      var l, b, s;
+      return r && ((s = (b = (l = r[r.length - 1]) == null ? void 0 : l.serviceJourney) == null ? void 0 : b.serviceAlteration) != null && s.cancelled) ? "sbb-pearl-chain--arrival-disruption" : "";
+    })(), I = r && a && t && !c ? "sbb-pearl-chain__bullet--" + this._getStatus(e, t, a) : "", G = r && t && !_ ? "sbb-pearl-chain__bullet--" + this._getStatus(e, t) : "";
+    return this._isAllCancelled(r) ? v`
+        <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>
+      ` : v`
+      <div class="sbb-pearl-chain">
+        <span
+          class="sbb-pearl-chain__bullet ${I} ${i} ${c}"
+        ></span>
+        ${r == null ? void 0 : r.map((l, b) => {
+      var D, P, $, N, A, E;
+      const { stopPoints: s, serviceAlteration: p } = (l == null ? void 0 : l.serviceJourney) || {}, V = this._getRelativeDuration(r, l), h = n((D = l.departure) == null ? void 0 : D.time), u = n((P = l.arrival) == null ? void 0 : P.time), B = s && (($ = s[s.length - 1]) == null ? void 0 : $.stopStatus) === "NOT_SERVICED", j = s && ((N = s[s.length - 1]) == null ? void 0 : N.stopStatus) === "PLANNED", T = s && ((A = s[0]) == null ? void 0 : A.stopStatus) === "NOT_SERVICED", w = b > 0 && r[b - 1].serviceJourney.stopPoints, M = w && ((E = w[w.length - 1]) == null ? void 0 : E.stopStatus) === "NOT_SERVICED", Y = B || T && j ? "sbb-pearl-chain__leg--skipped" : "", F = T || M ? "sbb-pearl-chain__stop--departure-skipped" : "", g = p != null && p.cancelled ? "sbb-pearl-chain__leg--disruption" : "", X = !g && this._getStatus(e, h, u) && "sbb-pearl-chain__leg--" + this._getStatus(e, u, h);
+      return v` <div
+            class="sbb-pearl-chain__leg ${X} ${g} ${Y}"
+            style=${J({
+        "--sbb-pearl-chain-leg-width": `${V}%`,
+        ...this._getStatus(e, u, h) === "progress" && !g ? {
+          "--sbb-pearl-chain-leg-status": `${this._getProgress(e, h, u)}%`
+        } : {}
+      })}
+          >
+            ${b > 0 && b < r.length ? v`<span class="sbb-pearl-chain__stop ${F}"></span>` : H}
+            ${this._getStatus(e, u, h) === "progress" && !g ? this._renderPosition(e, h, u) : H}
+          </div>`;
+    })}
+        <span
+          class="sbb-pearl-chain__bullet ${G} ${o} ${_}"
+        ></span>
+      </div>
+    `;
+  }
+};
+d.styles = Z;
+k([
+  y({ type: Array })
+], d.prototype, "legs", 2);
+k([
+  y({ attribute: "disable-animation", type: Boolean })
+], d.prototype, "disableAnimation", 2);
+k([
+  y()
+], d.prototype, "now", 1);
+d = k([
+  Q("sbb-pearl-chain")
+], d);
+export {
+  d as SbbPearlChainElement
+};

package/timetable-duration/timetable-duration.d.ts

@@ -0,0 +1,23 @@
+import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
+
+/**
+ * Used in `sbb-timetable-row`, it displays information about the trip duration.
+ */
+export declare class SbbTimetableDurationElement extends LitElement {
+    static styles: CSSResultGroup;
+    /**
+     * Stringified JSON which defines most of the
+     * content of the component. Please check the
+     * individual stories to get an idea of the
+     * structure.
+     */
+    config: string;
+    private _language;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-timetable-duration': SbbTimetableDurationElement;
+    }
+}
+//# sourceMappingURL=timetable-duration.d.ts.map

package/timetable-duration/timetable-duration.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timetable-duration.d.ts","sourceRoot":"","sources":["../../../src/elements-experimental/timetable-duration/timetable-duration.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC;;GAEG;AACH,qBACa,2BAA4B,SAAQ,UAAU;IACzD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;;;OAKG;IACgB,MAAM,EAAG,MAAM,CAAC;IAEnC,OAAO,CAAC,SAAS,CAAmC;cAEjC,MAAM,IAAI,cAAc;CAqC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,wBAAwB,EAAE,2BAA2B,CAAC;KACvD;CACF"}

package/timetable-duration/timetable-duration.sample-data.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    hours: number;
+    minutes: number;
+}[];
+export default _default;
+//# sourceMappingURL=timetable-duration.sample-data.d.ts.map

package/timetable-duration/timetable-duration.sample-data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timetable-duration.sample-data.d.ts","sourceRoot":"","sources":["../../../src/elements-experimental/timetable-duration/timetable-duration.sample-data.ts"],"names":[],"mappings":";;;;AAAA,wBAaE"}

package/timetable-duration.d.ts

@@ -0,0 +1,2 @@
+export * from './timetable-duration/timetable-duration.js';
+//# sourceMappingURL=timetable-duration.d.ts.map

package/timetable-duration.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timetable-duration.d.ts","sourceRoot":"","sources":["../../src/elements-experimental/timetable-duration.ts"],"names":[],"mappings":"AAAA,cAAc,4CAA4C,CAAC"}

package/timetable-duration.js

@@ -0,0 +1,37 @@
+import { SbbLanguageController as g } from "@sbb-esta/lyne-elements/core/controllers.js";
+import { i18nDurationHour as l, i18nDurationMinute as u } from "@sbb-esta/lyne-elements/core/i18n.js";
+import { css as b, LitElement as h, html as c } from "lit";
+import { property as m, customElement as f } from "lit/decorators.js";
+const d = b`*,:before,:after{box-sizing:border-box}:host{display:inline-block}.duration{--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);margin:0;white-space:nowrap}.duration__text--visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
+var _ = Object.defineProperty, x = Object.getOwnPropertyDescriptor, p = (e, n, s, r) => {
+  for (var t = r > 1 ? void 0 : r ? x(n, s) : n, i = e.length - 1, o; i >= 0; i--)
+    (o = e[i]) && (t = (r ? o(n, s, t) : o(t)) || t);
+  return r && t && _(n, s, t), t;
+};
+let a = class extends h {
+  constructor() {
+    super(...arguments), this._language = new g(this);
+  }
+  render() {
+    const e = JSON.parse(this.config), n = l.multiple.short[this._language.current], s = u.multiple.short[this._language.current];
+    let r = "", t = "", i = l.multiple.long[this._language.current], o = u.multiple.long[this._language.current];
+    return e.hours === 1 && (i = l.single.long[this._language.current]), e.minutes === 1 && (o = u.single.long[this._language.current]), e.hours !== 0 && (r += `${e.hours} ${n}`, t += `${e.hours} ${i}`), r += ` ${e.minutes} ${s}`, t += ` ${e.minutes} ${o}.`, c`
+      <p aria-label=${t} class="duration" role="text">
+        <span aria-hidden="true" class="duration__text--visual" role="presentation">
+          ${r}
+        </span>
+        <span class="duration__text--visually-hidden">${t}</span>
+      </p>
+    `;
+  }
+};
+a.styles = d;
+p([
+  m()
+], a.prototype, "config", 2);
+a = p([
+  f("sbb-timetable-duration")
+], a);
+export {
+  a as SbbTimetableDurationElement
+};

package/timetable-row/timetable-row.d.ts

@@ -0,0 +1,79 @@
+import { SbbDateLike } from '../../elements/core/interfaces.js';
+import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
+import { ITripItem, Notice, PtSituation } from '../core/timetable.js';
+
+/** HimCus interface for mapped icon name and text */
+export interface HimCus {
+    name: string;
+    text?: string | null;
+}
+/** Boarding icon interface for mapped icon name and text */
+export interface Boarding {
+    name: string;
+    text: string;
+}
+export interface Price {
+    price?: string;
+    text?: string;
+    isDiscount?: boolean;
+}
+export declare const renderIconProduct: (icon: string, name: string) => TemplateResult;
+export declare const renderStringProduct: (vehicleName: string, line?: string | null) => TemplateResult;
+export declare const sortSituation: (situations: PtSituation[]) => PtSituation[];
+export declare const getHimIcon: (situation: PtSituation) => HimCus;
+export declare const getCus: (trip: ITripItem, currentLanguage: string) => HimCus;
+export declare const filterNotices: (notices: Notice[]) => Notice[];
+export declare const handleNotices: (notices: Notice[]) => Notice[];
+/**
+ * It displays information about the trip, acting as a container for all the `sbb-timetable-*` components.
+ * */
+export declare class SbbTimetableRowElement extends LitElement {
+    static styles: CSSResultGroup;
+    /** The trip Prop. */
+    trip: ITripItem;
+    /** The price Prop, which consists of the data for the badge. */
+    price?: Price;
+    /** This will be forwarded to the sbb-pearl-chain component - if true the position won't be animated. */
+    disableAnimation?: boolean;
+    /** This will be forwarded to the notices section */
+    boarding?: Boarding;
+    /**
+     * The loading state -
+     * when this is true it will be render skeleton with an idling animation
+     */
+    loadingTrip: boolean;
+    /**
+     * The loading state -
+     * when this is true it will be render skeleton with an idling animation
+     */
+    loadingPrice: boolean;
+    /**
+     * Hidden label for the card action. It overrides the automatically generated accessibility text for the component. Use this prop to provide custom accessibility information for the component.
+     */
+    cardActionLabel?: string;
+    /** This will be forwarded to the sbb-card component as aria-expanded. */
+    accessibilityExpanded?: boolean;
+    /** When this prop is true the sbb-card will be in the active state. */
+    active?: boolean;
+    /** A configured date which acts as the current date instead of the real current date. Recommended for testing purposes. */
+    set now(value: SbbDateLike | undefined);
+    get now(): Date;
+    private _now;
+    private _language;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    /** The skeleton render function for the loading state */
+    private _renderSkeleton;
+    private _getQuayType;
+    private _getQuayTypeStrings;
+    /** map Quay */
+    private _renderQuayType;
+    private _handleHimCus;
+    private _getAccessibilityText;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-timetable-row': SbbTimetableRowElement;
+    }
+}
+//# sourceMappingURL=timetable-row.d.ts.map

package/timetable-row/timetable-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timetable-row.d.ts","sourceRoot":"","sources":["../../../src/elements-experimental/timetable-row/timetable-row.ts"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,WAAW,EAAgB,MAAM,4CAA4C,CAAC;AAE5F,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAIhD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,EAAa,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAKtF,OAAO,iCAAiC,CAAC;AACzC,OAAO,iCAAiC,CAAC;AACzC,OAAO,gDAAgD,CAAC;AACxD,OAAO,wBAAwB,CAAC;AAEhC,qDAAqD;AACrD,MAAM,WAAW,MAAM;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,4DAA4D;AAC5D,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,KAAK;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,iBAAiB,SAAU,MAAM,QAAQ,MAAM,KAAG,cAK9D,CAAC;AAEF,eAAO,MAAM,mBAAmB,gBAAiB,MAAM,SAAS,MAAM,GAAG,IAAI,KAAG,cAK/E,CAAC;AAsBF,eAAO,MAAM,aAAa,eAAgB,WAAW,EAAE,KAAG,WAAW,EAapE,CAAC;AAEF,eAAO,MAAM,UAAU,cAAe,WAAW,KAAG,MAiCnD,CAAC;AAEF,eAAO,MAAM,MAAM,SAAU,SAAS,mBAAmB,MAAM,KAAG,MAuBjE,CAAC;AAaF,eAAO,MAAM,aAAa,YAAa,MAAM,EAAE,KAAG,MAAM,EAUvD,CAAC;AAEF,eAAO,MAAM,aAAa,YAAa,MAAM,EAAE,KAAG,MAAM,EAcvD,CAAC;AAEF;;KAEK;AACL,qBACa,sBAAuB,SAAQ,UAAU;IACpD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,qBAAqB;IACc,IAAI,EAAG,SAAS,CAAC;IAEpD,gEAAgE;IAC7B,KAAK,CAAC,EAAE,KAAK,CAAC;IAEjD,wGAAwG;IAEjG,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAElC,oDAAoD;IACjB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEvD;;;OAGG;IAC4D,WAAW,UAAS;IAEnF;;;OAGG;IAC6D,YAAY,UAAS;IAErF;;OAEG;IACkD,eAAe,CAAC,EAAE,MAAM,CAAC;IAE9E,yEAAyE;IAElE,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEvC,uEAAuE;IACnC,MAAM,CAAC,EAAE,OAAO,CAAC;IAErD,2HAA2H;IAC3H,IACW,GAAG,CAAC,KAAK,EAAE,WAAW,GAAG,SAAS,EAE5C;IACD,IAAW,GAAG,IAAI,IAAI,CAErB;IACD,OAAO,CAAC,IAAI,CAAqB;IAEjC,OAAO,CAAC,SAAS,CAAmC;cAEjC,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQ5E,yDAAyD;IACzD,OAAO,CAAC,eAAe;IAevB,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,mBAAmB;IAS3B,eAAe;IACf,OAAO,CAAC,eAAe;IAavB,OAAO,CAAC,aAAa;IAWrB,OAAO,CAAC,qBAAqB;cAwIV,MAAM,IAAI,cAAc;CAuJ5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}

package/timetable-row/timetable-row.sample-data.d.ts

@@ -0,0 +1,24 @@
+import { ITripItem } from '../core/timetable.js';
+
+type DeepPartial<T> = T extends object ? {
+    [P in keyof T]?: DeepPartial<T[P]>;
+} : T;
+export declare const defaultTrip: DeepPartial<ITripItem>;
+export declare const cancelledTrip: DeepPartial<ITripItem>;
+export declare const progressTrip: DeepPartial<ITripItem>;
+export declare const partiallyCancelled: DeepPartial<ITripItem>;
+export declare const pastTrip: DeepPartial<ITripItem>;
+export declare const skippedLastArrivalStopTrip: DeepPartial<ITripItem>;
+export declare const skippedArrivalStopTrip: DeepPartial<ITripItem>;
+export declare const skippedDepartureStopTrip: DeepPartial<ITripItem>;
+export declare const skippedFirstDepartureStopTrip: DeepPartial<ITripItem>;
+export declare const disturbanceTrip: DeepPartial<ITripItem>;
+export declare const quayChangeTrip: DeepPartial<ITripItem>;
+export declare const trainTrip: DeepPartial<ITripItem>;
+export declare const busTrip: DeepPartial<ITripItem>;
+export declare const shipTrip: DeepPartial<ITripItem>;
+export declare const walkTimeTrip: DeepPartial<ITripItem>;
+export declare const extendedEnterTimeTrip: DeepPartial<ITripItem>;
+export declare const noticesTrip: DeepPartial<ITripItem>;
+export {};
+//# sourceMappingURL=timetable-row.sample-data.d.ts.map