@sbb-esta/lyne-elements-experimental 1.13.0 → 1.14.1

package/pearl-chain-time.js

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

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

@@ -1 +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"}
+{"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,qBAEM,4BAA6B,SAAQ,UAAU;IACnD,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

@@ -21,9 +21,9 @@ export interface PearlChainVerticalItemAttributes {
 export declare class SbbPearlChainVerticalItemElement extends LitElement {
     static styles: CSSResultGroup;
     /** The pearlChainVerticalItemAttributes Prop for styling the bullets and line.*/
-    pearlChainVerticalItemAttributes: PearlChainVerticalItemAttributes;
+    accessor pearlChainVerticalItemAttributes: PearlChainVerticalItemAttributes;
     /** If true, the position won't be animated. */
-    disableAnimation?: boolean;
+    accessor disableAnimation: boolean;
     protected render(): TemplateResult;
 }
 declare global {

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

@@ -1 +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"}
+{"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":"AACA,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,qBAEM,gCAAiC,SAAQ,UAAU;IACvD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,iFAAiF;IACjF,SACgB,gCAAgC,EAAE,gCAAgC,CAAS;IAE3F,+CAA+C;IAC/C,SAEgB,gBAAgB,EAAE,OAAO,CAAS;cAE/B,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.js

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

package/pearl-chain-vertical.js

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