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

package/tooltip/tooltip.component.js

@@ -0,0 +1,197 @@
+var E = (s) => {
+  throw TypeError(s);
+};
+var O = (s, o, a) => o.has(s) || E("Cannot " + a);
+var x = (s, o, a) => (O(s, o, "read from private field"), a ? a.call(s) : o.get(s)), k = (s, o, a) => o.has(s) ? E("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(s) : o.set(s, a), g = (s, o, a, l) => (O(s, o, "write to private field"), l ? l.call(s, a) : o.set(s, a), a);
+import { __esDecorate as p, __runInitializers as c } from "tslib";
+import { css as S, isServer as P, html as L } from "lit";
+import { customElement as z, property as h } from "lit/decorators.js";
+import { SbbOpenCloseBaseElement as N } from "../core/base-elements.js";
+import { readConfig as u } from "../core/config.js";
+import { SbbEscapableOverlayController as B, SbbOverlayPositionController as I } from "../core/controllers.js";
+import { idReference as M } from "../core/decorators.js";
+import { queueDomContentLoaded as U, isZeroAnimationDuration as H, isAndroid as q, isIOS as Z } from "../core/dom.js";
+import { SbbDisabledMixin as j, appendAriaElements as $, removeAriaElements as R } from "../core/mixins.js";
+import { sbbOverlayOutsidePointerEventListener as A } from "../core/overlay.js";
+import { boxSizingStyles as F } from "../core/styles.js";
+const G = S`:host{--sbb-tooltip-pointer-events: all;--sbb-tooltip-min-width: var(--sbb-spacing-fixed-8x);--sbb-tooltip-max-width: min( 25rem, calc(100vw - var(--sbb-spacing-fixed-2x)) );--sbb-tooltip-border-color: var(--sbb-background-color-1-inverted);--sbb-tooltip-border-radius: var(--sbb-border-radius-8x);--sbb-tooltip-padding: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);--sbb-tooltip-background-color: var(--sbb-background-color-1-inverted);--sbb-tooltip-color: var(--sbb-color-2-inverted);--sbb-tooltip-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-tooltip-animation-easing: ease-out;--sbb-tooltip-animation-translate: 0 var(--sbb-spacing-fixed-2x);--sbb-tooltip-gap: var(--sbb-spacing-fixed-2x);--sbb-overlay-position-area: block-start;--sbb-overlay-position-try-fallbacks: block-start span-inline-end, block-start span-inline-start, block-end, block-end span-inline-end, block-end span-inline-start;position-area:var(--sbb-overlay-position-area);position-try-fallbacks:var(--sbb-overlay-position-try-fallbacks);display:none;position:fixed;background-color:transparent;pointer-events:var(--sbb-tooltip-pointer-events);z-index:var(--sbb-tooltip-z-index, var(--sbb-overlay-default-z-index));animation-name:var(--sbb-tooltip-animation-name);animation-duration:var(--sbb-tooltip-animation-duration);animation-timing-function:var(--sbb-tooltip-animation-easing);border:none;inset:initial;padding:0;margin:0}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){display:block;--sbb-tooltip-animation-name: open}:host(:is(:state(state-closing),[state--state-closing])){--sbb-tooltip-animation-name: close;--sbb-tooltip-pointer-events: none}:host(:is([data-position~=block-end],[data-position~=bottom],[data-position^=end])){padding-block-start:var(--sbb-tooltip-gap)}:host(:is([data-position~=block-start],[data-position~=top],[data-position^=start])){padding-block-end:var(--sbb-tooltip-gap)}:host(:is([data-position~=inline-start],[data-position~=inline-end],[data-position~=left],[data-position~=right],[data-position$=" start"],[data-position$=" end"])){padding-inline:var(--sbb-tooltip-gap)}.sbb-tooltip{box-shadow:var(--sbb-box-shadow-level-5-soft);--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);border:var(--sbb-border-width-1x) solid var(--sbb-tooltip-border-color);border-radius:var(--sbb-tooltip-border-radius);padding:var(--sbb-tooltip-padding);color:var(--sbb-tooltip-color);background-color:var(--sbb-tooltip-background-color);min-width:var(--sbb-tooltip-min-width);max-width:var(--sbb-tooltip-max-width)}@keyframes open{0%{opacity:0;translate:var(--sbb-tooltip-animation-translate)}to{opacity:1;translate:0}}@keyframes close{0%{opacity:1;translate:0}to{opacity:0;translate:var(--sbb-tooltip-animation-translate)}}`, W = 500, Y = q || Z, m = /* @__PURE__ */ new WeakMap();
+let J = 0, dt = (() => {
+  var d, n;
+  let s = [z("sbb-tooltip")], o, a = [], l, _ = j(N), b = [], y, v = [], f = [], T, C, D;
+  return n = class extends _ {
+    constructor() {
+      super();
+      k(this, d);
+      g(this, d, (c(this, b), c(this, v, null))), this._openDelay = (c(this, f), null), this._closeDelay = null, this._triggerElement = null, this._escapableOverlayController = new B(this), this._overlayController = new I(this), this.addEventListener("mouseleave", (t) => {
+        (this.state === "opened" || this.state === "opening") && (!t.relatedTarget || !this._triggerElement?.contains(t.relatedTarget)) && this._delayedClose();
+      }, { passive: !0 }), this.addEventListener("overlayOutsidePointer", () => this.close(), { passive: !0 }), this.addEventListener("animationend", (t) => this._onTooltipAnimationEnd(t), { passive: !0 });
+    }
+    /**
+     * The element that will trigger the tooltip overlay.
+     *
+     * For attribute usage, provide an id reference.
+     */
+    get trigger() {
+      return x(this, d);
+    }
+    set trigger(t) {
+      g(this, d, t);
+    }
+    /**
+     * Open the tooltip after a given delay in milliseconds.
+     * Global configuration is used as default, if not set.
+     *
+     * @default null
+     */
+    set openDelay(t) {
+      this._openDelay = t;
+    }
+    get openDelay() {
+      return this._openDelay ?? u().tooltip?.openDelay ?? 0;
+    }
+    /**
+     * Close the tooltip after a given delay in milliseconds.
+     * Global configuration is used as default, if not set.
+     *
+     * @default null
+     */
+    set closeDelay(t) {
+      this._closeDelay = t;
+    }
+    get closeDelay() {
+      return this._closeDelay ?? u().tooltip?.closeDelay ?? 0;
+    }
+    /**
+     * Automatically close the tooltip after it has been open by long press.
+     * Global configuration is used as default, if not set.
+     *
+     * @default 1500
+     */
+    set longPressCloseDelay(t) {
+      this._longPressCloseDelay = +t;
+    }
+    get longPressCloseDelay() {
+      return this._longPressCloseDelay ?? u().tooltip?.longPressCloseDelay ?? 1500;
+    }
+    static _initializeTooltipOutlet() {
+      this._tooltipOutlet = document.createElement("div"), this._tooltipOutlet.classList.add("sbb-overlay-outlet"), document.body.appendChild(this._tooltipOutlet), new MutationObserver((t) => {
+        for (const e of t)
+          if (e.type === "attributes")
+            this._handleTooltipTrigger(e.target);
+          else if (e.type === "childList")
+            for (const i of [...e.addedNodes, ...e.removedNodes].filter((r) => r.nodeType === r.ELEMENT_NODE))
+              this._handleTooltipTrigger(i), this._findAndHandleTooltipTriggers(i);
+      }).observe(document.documentElement, {
+        attributeFilter: [
+          "sbb-tooltip",
+          "sbb-tooltip-open-delay",
+          "sbb-tooltip-close-delay",
+          "sbb-tooltip-position"
+        ],
+        childList: !0,
+        subtree: !0
+      }), this._findAndHandleTooltipTriggers(document.body);
+    }
+    static _findAndHandleTooltipTriggers(t) {
+      t.querySelectorAll("[sbb-tooltip]").forEach((e) => this._handleTooltipTrigger(e));
+    }
+    static _handleTooltipTrigger(t) {
+      const e = t.getAttribute("sbb-tooltip");
+      let i = m.get(t);
+      if (e && t.isConnected) {
+        i || (i = document.createElement("sbb-tooltip"), m.set(t, i), this._tooltipOutlet.appendChild(i), i.trigger = t), i.textContent = e, i.openDelay = t.hasAttribute("sbb-tooltip-open-delay") ? +t.getAttribute("sbb-tooltip-open-delay") : null, i.closeDelay = t.hasAttribute("sbb-tooltip-close-delay") ? +t.getAttribute("sbb-tooltip-close-delay") : null;
+        const r = t.hasAttribute("sbb-tooltip-position") ? t.getAttribute("sbb-tooltip-position").split(",").map((w) => w.trim()) : t.tooltipPositions;
+        r && r.length > 0 ? (i.style.setProperty("--sbb-overlay-position-area", r[0]), i.style.setProperty("--sbb-overlay-position-try-fallbacks", r.slice(1).join(", "))) : (i.style.removeProperty("--sbb-overlay-position-area"), i.style.removeProperty("--sbb-overlay-position-try-fallbacks"));
+      } else i && (m.delete(t), i._destroy());
+    }
+    connectedCallback() {
+      super.connectedCallback(), this.popover = "manual", this.id ||= `sbb-tooltip-${++J}`, this.state = "closed", A.connect(this), this.hasUpdated && this.trigger && this._attach(this.trigger);
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback(), A.disconnect(this), this._detach();
+    }
+    requestUpdate(t, e, i) {
+      super.requestUpdate(t, e, i), !P && (!t || t === "trigger") && this.hasUpdated && this._attach(this.trigger);
+    }
+    firstUpdated(t) {
+      super.firstUpdated(t), this._attach(this.trigger);
+    }
+    open() {
+      this._resetOpenCloseTimeout(), !(this.state !== "closed" && this.state !== "closing" || this.disabled || !this.trigger || !this.dispatchBeforeOpenEvent()) && (this.showPopover?.(), this.state = "opening", this._overlayController.connect(this.trigger), this._isZeroAnimationDuration() && this._handleOpening());
+    }
+    close() {
+      this._resetOpenCloseTimeout(), !(this.state !== "opened" && this.state !== "opening") && (this.dispatchBeforeCloseEvent(), this.state = "closing", this._isZeroAnimationDuration() && this._handleClosing());
+    }
+    _delayedOpen() {
+      this._resetOpenCloseTimeout(), this._openTimeout = setTimeout(() => this.open(), this.openDelay);
+    }
+    _handleOpening() {
+      this.state = "opened", this._escapableOverlayController.connect(), this.dispatchOpenEvent();
+    }
+    _delayedClose() {
+      this._resetOpenCloseTimeout(), this._closeTimeout = setTimeout(() => this.close(), this.closeDelay);
+    }
+    _handleClosing() {
+      this.state = "closed", this.hidePopover?.(), this._overlayController.disconnect(), this._escapableOverlayController.disconnect(), this.dispatchCloseEvent(), this._openStateController?.abort();
+    }
+    _onTooltipAnimationEnd(t) {
+      t.animationName === "open" && this.state === "opening" ? this._handleOpening() : t.animationName === "close" && this.state === "closing" && this._handleClosing();
+    }
+    _attach(t) {
+      this._triggerElement && this._detach(), this._triggerElement = t, this._triggerElement && (this._triggerElement.ariaDescribedByElements = $(this._triggerElement.ariaDescribedByElements, this), this._addTriggerEventHandlers());
+    }
+    _detach() {
+      this._triggerAbortController?.abort(), this._openStateController?.abort(), this._resetOpenCloseTimeout(), clearTimeout(this._longPressOpenTimeout), clearTimeout(this._longPressCloseTimeout), this._triggerElement && (this._triggerElement.ariaDescribedByElements = R(this._triggerElement.ariaDescribedByElements, this), this._triggerElement = null);
+    }
+    _destroy() {
+      this._detach(), this.remove();
+    }
+    _addTriggerEventHandlers() {
+      const t = this._triggerElement;
+      if (!t)
+        return;
+      this._triggerAbortController?.abort(), this._triggerAbortController = new AbortController();
+      const e = {
+        signal: this._triggerAbortController.signal,
+        passive: !0
+      };
+      Y || (t.addEventListener("mouseenter", () => this._delayedOpen(), e), t.addEventListener("mouseleave", (i) => {
+        const r = i.relatedTarget;
+        (!r || r !== this) && this._delayedClose();
+      }, e), t.addEventListener("blur", () => this.close(), e), t.addEventListener("focus", () => this._delayedOpen(), e)), t.addEventListener("touchstart", () => {
+        clearTimeout(this._longPressOpenTimeout), clearTimeout(this._longPressCloseTimeout), this._longPressOpenTimeout = setTimeout(() => this.open(), W);
+      }, e), t.addEventListener("touchend", () => {
+        clearTimeout(this._longPressOpenTimeout), this._longPressCloseTimeout = setTimeout(() => this.close(), this.longPressCloseDelay);
+      }, e), t.addEventListener("touchcancel", () => {
+        clearTimeout(this._longPressOpenTimeout);
+      }, e);
+    }
+    _isZeroAnimationDuration() {
+      return H(this, "--sbb-tooltip-animation-duration");
+    }
+    _resetOpenCloseTimeout() {
+      clearTimeout(this._openTimeout), clearTimeout(this._closeTimeout);
+    }
+    render() {
+      return L`
+      <div class="sbb-tooltip">
+        <slot></slot>
+      </div>
+    `;
+    }
+  }, d = new WeakMap(), l = n, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(_[Symbol.metadata] ?? null) : void 0;
+    y = [M(), h()], T = [h({ attribute: "open-delay", type: Number })], C = [h({ attribute: "close-delay", type: Number })], D = [h({ attribute: "long-press-close-delay", type: Number })], p(n, null, y, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (e) => "trigger" in e, get: (e) => e.trigger, set: (e, i) => {
+      e.trigger = i;
+    } }, metadata: t }, v, f), p(n, null, T, { kind: "setter", name: "openDelay", static: !1, private: !1, access: { has: (e) => "openDelay" in e, set: (e, i) => {
+      e.openDelay = i;
+    } }, metadata: t }, null, b), p(n, null, C, { kind: "setter", name: "closeDelay", static: !1, private: !1, access: { has: (e) => "closeDelay" in e, set: (e, i) => {
+      e.closeDelay = i;
+    } }, metadata: t }, null, b), p(n, null, D, { kind: "setter", name: "longPressCloseDelay", static: !1, private: !1, access: { has: (e) => "longPressCloseDelay" in e, set: (e, i) => {
+      e.longPressCloseDelay = i;
+    } }, metadata: t }, null, b), p(null, o = { value: l }, s, { kind: "class", name: l.name, metadata: t }, null, a), l = o.value, t && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), n.role = "tooltip", n.styles = [F, G], P || U(() => l._initializeTooltipOutlet()), c(l, a), l;
+})();
+export {
+  dt as SbbTooltipElement
+};

package/tooltip.js

@@ -0,0 +1,4 @@
+import { SbbTooltipElement as t } from "./tooltip/tooltip.component.js";
+export {
+  t as SbbTooltipElement
+};

package/train/train/train.component.js

@@ -0,0 +1,122 @@
+var U = (e) => {
+  throw TypeError(e);
+};
+var G = (e, a, s) => a.has(e) || U("Cannot " + s);
+var m = (e, a, s) => (G(e, a, "read from private field"), s ? s.call(e) : a.get(e)), g = (e, a, s) => a.has(e) ? U("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(e) : a.set(e, s), n = (e, a, s, o) => (G(e, a, "write to private field"), o ? o.call(e, s) : a.set(e, s), s);
+import { __runInitializers as l, __esDecorate as L } from "tslib";
+import { css as W, LitElement as q, nothing as v } from "lit";
+import { customElement as B, property as f } from "lit/decorators.js";
+import { unsafeStatic as P, html as u } from "lit/static-html.js";
+import { SbbLanguageController as F } from "../../core/controllers.js";
+import { forceType as y, omitEmptyConverter as H } from "../../core/decorators.js";
+import { i18nTrain as J, i18nWagonsLabel as K } from "../../core/i18n.js";
+import { SbbNamedSlotListMixin as Q } from "../../core/mixins.js";
+import { boxSizingStyles as R } from "../../core/styles.js";
+import "../../icon.js";
+const V = W`:host{display:block;--sbb-train-direction-label-spacing: var(--sbb-spacing-fixed-1x)}.sbb-train{--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);display:flex;flex-direction:column;gap:var(--sbb-train-formation-vertical-gap);position:relative}.sbb-train:before{content:"";display:var(--sbb-train-formation-reserve-spacing-display, none);height:max(var(--sbb-size-icon-ui-small),1em * var(--sbb-typo-line-height-text))}.sbb-train__wagons{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;gap:var(--sbb-train-formation-wagon-gap)}.sbb-train__direction-heading{display:flex;position:absolute;width:100%}.sbb-train__direction-sticky-wrapper{position:sticky;inset-inline-start:0;display:inline-flex;align-items:center;gap:var(--sbb-train-direction-label-spacing);max-width:100%}.sbb-train__direction-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-train__direction-label-sr{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
+let ct = (() => {
+  var b, d, h, p, _, r;
+  let e = [B("sbb-train")], a, s = [], o, x = Q(q), w, z = [], $ = [], S, k = [], E = [], I, T = [], D = [], A, C = [], j = [], N, M = [], O = [];
+  return r = class extends x {
+    constructor() {
+      super(...arguments);
+      g(this, b);
+      g(this, d);
+      g(this, h);
+      g(this, p);
+      g(this, _);
+      this.listChildLocalNames = [
+        "sbb-train-wagon",
+        "sbb-train-blocked-passage"
+      ], n(this, b, l(this, z, "")), n(this, d, (l(this, $), l(this, k, "6"))), n(this, h, (l(this, E), l(this, T, ""))), n(this, p, (l(this, D), l(this, C, ""))), n(this, _, (l(this, j), l(this, M, "left"))), this._language = (l(this, O), new F(this));
+    }
+    /** General label for "driving direction". */
+    get directionLabel() {
+      return m(this, b);
+    }
+    set directionLabel(i) {
+      n(this, b, i);
+    }
+    /** Heading level of the direction label, used for screen readers. */
+    get directionLabelLevel() {
+      return m(this, d);
+    }
+    set directionLabelLevel(i) {
+      n(this, d, i);
+    }
+    /** Label for the destination station of the train. */
+    get station() {
+      return m(this, h);
+    }
+    set station(i) {
+      n(this, h, i);
+    }
+    /** Accessibility label for additional information regarding the leaving direction of the train. */
+    get accessibilityLabel() {
+      return m(this, p);
+    }
+    set accessibilityLabel(i) {
+      n(this, p, i);
+    }
+    /** Controls the direction indicator to show the arrow left or right. Default is left.  */
+    get direction() {
+      return m(this, _);
+    }
+    set direction(i) {
+      n(this, _, i);
+    }
+    /**
+     * Create the aria-label text out of the direction label, station and the accessibility label.
+     */
+    _getDirectionAriaLabel() {
+      const i = [J[this._language.current]];
+      return this.directionLabel && this.station && i.push(`${this.directionLabel} ${this.station}`), this.accessibilityLabel && i.push(this.accessibilityLabel), `${i.join(", ")}.`;
+    }
+    willUpdate(i) {
+      super.willUpdate(i), i.has("listChildren") && this.dispatchEvent(new Event("trainslotchange", { bubbles: !0 }));
+    }
+    render() {
+      const i = `h${this.directionLabelLevel}`;
+      return u`
+      <div class="sbb-train">
+        <${P(i)} class="sbb-train__direction-label-sr">
+          ${this._getDirectionAriaLabel()}
+        </${P(i)}>
+        ${this.directionLabel ? u`<div class="sbb-train__direction-heading" aria-hidden="true">
+                <span class="sbb-train__direction-sticky-wrapper">
+                  ${this.direction === "left" ? u`<sbb-icon name="chevron-small-left-small"></sbb-icon>` : v}
+
+                  <span class="sbb-train__direction-label">
+                    ${this.directionLabel} ${this.station}
+                  </span>
+
+                  ${this.direction === "right" ? u`<sbb-icon name="chevron-small-right-small"></sbb-icon>` : v}
+                </span>
+              </div>` : v}
+        ${this.renderList({
+        class: "sbb-train__wagons",
+        ariaLabel: K[this._language.current]
+      })}
+      </div>
+    `;
+    }
+  }, b = new WeakMap(), d = new WeakMap(), h = new WeakMap(), p = new WeakMap(), _ = new WeakMap(), o = r, (() => {
+    const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(x[Symbol.metadata] ?? null) : void 0;
+    w = [y(), f({ attribute: "direction-label", reflect: !0, converter: H })], S = [f({ attribute: "direction-label-level" })], I = [y(), f()], A = [y(), f({ attribute: "accessibility-label" })], N = [f({ reflect: !0 })], L(r, null, w, { kind: "accessor", name: "directionLabel", static: !1, private: !1, access: { has: (t) => "directionLabel" in t, get: (t) => t.directionLabel, set: (t, c) => {
+      t.directionLabel = c;
+    } }, metadata: i }, z, $), L(r, null, S, { kind: "accessor", name: "directionLabelLevel", static: !1, private: !1, access: { has: (t) => "directionLabelLevel" in t, get: (t) => t.directionLabelLevel, set: (t, c) => {
+      t.directionLabelLevel = c;
+    } }, metadata: i }, k, E), L(r, null, I, { kind: "accessor", name: "station", static: !1, private: !1, access: { has: (t) => "station" in t, get: (t) => t.station, set: (t, c) => {
+      t.station = c;
+    } }, metadata: i }, T, D), L(r, null, A, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (t) => "accessibilityLabel" in t, get: (t) => t.accessibilityLabel, set: (t, c) => {
+      t.accessibilityLabel = c;
+    } }, metadata: i }, C, j), L(r, null, N, { kind: "accessor", name: "direction", static: !1, private: !1, access: { has: (t) => "direction" in t, get: (t) => t.direction, set: (t, c) => {
+      t.direction = c;
+    } }, metadata: i }, M, O), L(null, a = { value: o }, e, { kind: "class", name: o.name, metadata: i }, null, s), o = a.value, i && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
+  })(), r.styles = [R, V], r.events = {
+    trainslotchange: "trainslotchange"
+  }, l(o, s), o;
+})();
+export {
+  ct as SbbTrainElement
+};

package/train/train-blocked-passage/train-blocked-passage.component.js

@@ -0,0 +1,26 @@
+import { __esDecorate as i, __runInitializers as n } from "tslib";
+import { css as l, LitElement as c, html as d } from "lit";
+import { customElement as p } from "lit/decorators.js";
+import { boxSizingStyles as g } from "../../core/styles.js";
+const m = l`:host{display:block;--sbb-train-blocked-passage-height: var(--sbb-train-formation-wagon-height);--sbb-train-blocked-passage-background-color: var(--sbb-color-error);--sbb-train-blocked-passage-bar-color: var(--sbb-color-white);--sbb-train-blocked-passage-icon-dimension: 1rem;--sbb-train-blocked-passage-icon-bar-width: .625rem;--sbb-train-blocked-passage-icon-bar-height: .25rem;--sbb-train-blocked-passage-icon-bar-border-radius: .0625rem}@media(forced-colors:active){:host{--sbb-train-blocked-passage-background-color: CanvasText;--sbb-train-blocked-passage-bar-color: Canvas}}.sbb-train-blocked-passage:before{content:"";display:var(--sbb-train-formation-wagon-label-display, block);height:calc(var(--sbb-text-font-size-xxs) * var(--sbb-typo-line-height-text))}.sbb-train-blocked-passage__wrapper{width:var(--sbb-train-blocked-passage-icon-dimension);display:flex;justify-content:center;flex-direction:column;height:var(--sbb-train-blocked-passage-height)}.sbb-train-blocked-passage__icon{width:100%;height:var(--sbb-train-blocked-passage-icon-dimension);border-radius:50%;background-color:var(--sbb-train-blocked-passage-background-color);position:relative;flex-direction:column;display:flex;align-items:center}.sbb-train-blocked-passage__icon:before{content:"";width:var(--sbb-train-blocked-passage-icon-bar-width);height:var(--sbb-train-blocked-passage-icon-bar-height);border-radius:var(--sbb-train-blocked-passage-icon-bar-border-radius);background-color:var(--sbb-train-blocked-passage-bar-color);margin:auto 0}`;
+let f = (() => {
+  var e;
+  let b = [p("sbb-train-blocked-passage")], r, t = [], a, o = c;
+  return e = class extends o {
+    render() {
+      return d`
+      <span class="sbb-train-blocked-passage">
+        <span class="sbb-train-blocked-passage__wrapper">
+          <span class="sbb-train-blocked-passage__icon"></span>
+        </span>
+      </span>
+    `;
+    }
+  }, a = e, (() => {
+    const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
+    i(null, r = { value: a }, b, { kind: "class", name: a.name, metadata: s }, null, t), a = r.value, s && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s });
+  })(), e.styles = [g, m], n(a, t), a;
+})();
+export {
+  f as SbbTrainBlockedPassageElement
+};

package/train/train-blocked-passage.js

@@ -0,0 +1,4 @@
+import { SbbTrainBlockedPassageElement as o } from "./train-blocked-passage/train-blocked-passage.component.js";
+export {
+  o as SbbTrainBlockedPassageElement
+};

package/train/train-formation/train-formation.component.js

@@ -0,0 +1,92 @@
+var z = (t) => {
+  throw TypeError(t);
+};
+var S = (t, o, s) => o.has(t) || z("Cannot " + s);
+var p = (t, o, s) => (S(t, o, "read from private field"), s ? s.call(t) : o.get(t)), h = (t, o, s) => o.has(t) ? z("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(t) : o.set(t, s), m = (t, o, s, i) => (S(t, o, "write to private field"), i ? i.call(t, s) : o.set(t, s), s);
+import { __esDecorate as v, __runInitializers as f } from "tslib";
+import { css as L, LitElement as $, nothing as E, html as u } from "lit";
+import { customElement as A, property as P, state as I } from "lit/decorators.js";
+import { styleMap as N } from "lit/directives/style-map.js";
+import { SbbLanguageController as T } from "../../core/controllers.js";
+import { i18nSectorShort as D, i18nSector as j, i18nTrains as M } from "../../core/i18n.js";
+import { SbbNamedSlotListMixin as O } from "../../core/mixins.js";
+import { boxSizingStyles as U } from "../../core/styles.js";
+const q = L`:host{display:block;--sbb-train-formation-sector-line-color: var(--sbb-color-cement);--sbb-train-formation-sector-line-color: light-dark( var(--sbb-color-cement), var(--sbb-color-smoke) );--sbb-train-formation-sector-line-width: var(--sbb-border-width-1x);--sbb-train-formation-blocked-passage-width: 1rem;--sbb-train-formation-text-color: var(--sbb-color-3);--sbb-train-formation-vertical-gap: var(--sbb-spacing-fixed-2x)}@media(forced-colors:active){:host{--sbb-train-formation-sector-line-color: CanvasText}}.sbb-train-formation{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-scrollbar-color: light-dark( color-mix(in srgb, var(--sbb-color-black) 30%, transparent), color-mix(in srgb, var(--sbb-color-white) 30%, transparent) );--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);--sbb-scrollbar-color-hover: light-dark( color-mix(in srgb, var(--sbb-color-black) 60%, transparent), color-mix(in srgb, var(--sbb-color-white) 60%, transparent) );--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-train-formation::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-train-formation::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-train-formation::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-train-formation::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-train-formation::-webkit-scrollbar-button,.sbb-train-formation::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-train-formation{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-train-formation{display:grid;grid-template:"start sectors end" auto "start trains end" auto/auto 1fr auto;position:relative;overflow-x:auto;row-gap:calc(var(--sbb-train-formation-show-sectors-gap, 0) * var(--sbb-train-formation-vertical-gap));padding-block-end:var(--sbb-train-formation-vertical-gap);color:var(--sbb-train-formation-text-color)}.sbb-train-formation:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}.sbb-train-formation:before,.sbb-train-formation:after{content:"";display:block;width:var(--sbb-train-formation-padding-inline)}.sbb-train-formation:before{grid-area:start}.sbb-train-formation:after{grid-area:end}.sbb-train-formation__sectors{display:flex;grid-area:sectors;gap:var(--sbb-train-formation-wagon-gap)}.sbb-train-formation__sector{--_wagon-sum: var(--sbb-train-formation-wagon-count) * var(--sbb-train-formation-wagon-width);--_blocked-passage-sum: var(--sbb-train-formation-wagon-blocked-passage-count) * var(--sbb-train-formation-blocked-passage-width);--_total-count: calc( var(--sbb-train-formation-wagon-count) + var(--sbb-train-formation-wagon-blocked-passage-count) );--_gap-sum: calc((var(--_total-count) - 1) * var(--sbb-train-formation-wagon-gap));--_sector-width: calc(var(--_wagon-sum) + var(--_blocked-passage-sum) + var(--_gap-sum));--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);flex:0 0 var(--_sector-width);text-align:center;overflow-x:clip}.sbb-train-formation__sector-sticky-wrapper{position:sticky;inset:auto 0;padding:0 var(--sbb-spacing-fixed-1x);margin:0 var(--sbb-spacing-fixed-2x);overflow:hidden;white-space:nowrap}.sbb-train-formation__sector-sticky-wrapper:before,.sbb-train-formation__sector-sticky-wrapper:after{content:"";position:absolute;inset-block:calc(50% - var(--sbb-train-formation-sector-line-width) / 2);border-block-end:var(--sbb-train-formation-sector-line-width) solid var(--sbb-train-formation-sector-line-color);width:calc(.5 * var(--_sector-width))}.sbb-train-formation__sector-sticky-wrapper:before{inset-inline-end:100%}.sbb-train-formation__sector-sticky-wrapper:after{inset-inline-start:100%}.sbb-train-formation__trains{grid-area:trains}.sbb-train-formation__train-list{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;gap:var(--sbb-train-formation-wagon-gap)}.sbb-train-formation__train-list>:is(li,span){display:inline-flex}`;
+let X = (() => {
+  var b, l, e;
+  let t = [A("sbb-train-formation")], o, s = [], i, _ = O($), g, w = [], k = [], x, y = [], C = [];
+  return e = class extends _ {
+    constructor() {
+      super();
+      h(this, b);
+      h(this, l);
+      this.listChildLocalNames = ["sbb-train"], m(this, b, f(this, w, "side")), m(this, l, (f(this, k), f(this, y, []))), this._language = (f(this, C), new T(this)), this.addEventListener?.("trainslotchange", (r) => this._readSectors(r)), this.addEventListener?.("sectorchange", (r) => this._readSectors(r));
+    }
+    /** Whether the view of the wagons is from side or top perspective. */
+    get view() {
+      return p(this, b);
+    }
+    set view(r) {
+      m(this, b, r);
+    }
+    get _sectors() {
+      return p(this, l);
+    }
+    set _sectors(r) {
+      m(this, l, r);
+    }
+    _readSectors(r) {
+      r?.stopPropagation(), this._sectors = Array.from(this.querySelectorAll?.("sbb-train-wagon,sbb-train-blocked-passage") ?? []).reduce((a, n) => {
+        const c = a[a.length - 1];
+        if (n.localName === "sbb-train-wagon") {
+          const d = n.sector ?? n.getAttribute("sector");
+          !c.label && d && (c.label = d), !d || c.label === d ? c.wagonCount++ : a.push({
+            label: d,
+            wagonCount: 1,
+            blockedPassageCount: 0
+          });
+        } else n.localName === "sbb-train-blocked-passage" && c.blockedPassageCount++;
+        return a;
+      }, [{ wagonCount: 0, blockedPassageCount: 0 }]);
+    }
+    willUpdate(r) {
+      super.willUpdate(r), r.has("listChildren") && this._readSectors();
+    }
+    render() {
+      return u`
+      <div class="sbb-train-formation">
+        ${this._sectors.length && this._sectors[0].label !== void 0 ? u`<div class="sbb-train-formation__sectors" aria-hidden="true">
+              ${this._sectors.map((r) => u`<span
+                    class="sbb-train-formation__sector"
+                    style=${N({
+        "--sbb-train-formation-wagon-count": r.wagonCount,
+        "--sbb-train-formation-wagon-blocked-passage-count": r.blockedPassageCount
+      })}
+                  >
+                    <span class="sbb-train-formation__sector-sticky-wrapper">
+                      ${`${r.wagonCount === 1 && r.label ? D[this._language.current] : j[this._language.current]} ${r.label ? r.label : ""}`}
+                    </span>
+                  </span>`)}
+            </div>` : E}
+
+        <div class="sbb-train-formation__trains">
+          ${this.renderList({
+        class: "sbb-train-formation__train-list",
+        ariaLabel: M[this._language.current]
+      })}
+        </div>
+      </div>
+    `;
+    }
+  }, b = new WeakMap(), l = new WeakMap(), i = e, (() => {
+    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(_[Symbol.metadata] ?? null) : void 0;
+    g = [P({ reflect: !0 })], x = [I()], v(e, null, g, { kind: "accessor", name: "view", static: !1, private: !1, access: { has: (a) => "view" in a, get: (a) => a.view, set: (a, n) => {
+      a.view = n;
+    } }, metadata: r }, w, k), v(e, null, x, { kind: "accessor", name: "_sectors", static: !1, private: !1, access: { has: (a) => "_sectors" in a, get: (a) => a._sectors, set: (a, n) => {
+      a._sectors = n;
+    } }, metadata: r }, y, C), v(null, o = { value: i }, t, { kind: "class", name: i.name, metadata: r }, null, s), i = o.value, r && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
+  })(), e.styles = [U, q], f(i, s), i;
+})();
+export {
+  X as SbbTrainFormationElement
+};

package/train/train-formation.js

@@ -0,0 +1,4 @@
+import { SbbTrainFormationElement as e } from "./train-formation/train-formation.component.js";
+export {
+  e as SbbTrainFormationElement
+};