@sbb-esta/lyne-elements 0.0.0 → 0.52.0

package/train/train/train.d.ts

@@ -0,0 +1,48 @@
+import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
+import { WithListChildren } from '../../core/mixins.js';
+import { SbbTitleLevel } from '../../title.js';
+import { SbbTrainBlockedPassageElement } from '../train-blocked-passage.js';
+import { SbbTrainWagonElement } from '../train-wagon.js';
+
+declare const SbbTrainElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbNamedSlotListMixinType<SbbTrainBlockedPassageElement | SbbTrainWagonElement>> & typeof LitElement;
+/**
+ * It can be used as a container for `sbb-train-wagon` or `sbb-train-blocked-passage` components.
+ *
+ * @slot - Use the unnamed slot to add 'sbb-train-wagon' elements to the `sbb-train`.
+ */
+export declare class SbbTrainElement extends SbbTrainElement_base {
+    static styles: CSSResultGroup;
+    static readonly events: {
+        readonly trainSlotChange: "trainSlotChange";
+    };
+    protected readonly listChildLocalNames: string[];
+    /** General label for "driving direction". */
+    directionLabel: string;
+    /** Heading level of the direction label, used for screen readers. */
+    directionLabelLevel: SbbTitleLevel;
+    /** Label for the destination station of the train. */
+    station?: string;
+    /** Accessibility label for additional information regarding the leaving direction of the train. */
+    accessibilityLabel?: string;
+    /** Controls the direction indicator to show the arrow left or right. Default is left.  */
+    direction: 'left' | 'right';
+    private _language;
+    /**
+     * @internal
+     * Emits whenever the train slot changes.
+     */
+    private _trainSlotChange;
+    /**
+     * Create the aria-label text out of the direction label, station and the accessibility label.
+     */
+    private _getDirectionAriaLabel;
+    protected willUpdate(changedProperties: PropertyValues<WithListChildren<this>>): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-train': SbbTrainElement;
+    }
+}
+export {};
+//# sourceMappingURL=train.d.ts.map

package/train/train/train.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"train.d.ts","sourceRoot":"","sources":["../../../../src/elements/train/train/train.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EACnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb,OAAO,EAAyB,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACpF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAI9D,OAAO,eAAe,CAAC;;AAEvB;;;;GAIG;AACH,qBACa,eAAgB,SAAQ,oBAGxB;IACX,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IACX,mBAA4B,mBAAmB,WAG7C;IAEF,6CAA6C;IACM,cAAc,EAAG,MAAM,CAAC;IAE3E,qEAAqE;IACZ,mBAAmB,EAAE,aAAa,CAAO;IAElG,sDAAsD;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC;IAEpC,mGAAmG;IAC5C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAEnF,0FAA0F;IACtD,SAAS,EAAE,MAAM,GAAG,OAAO,CAAU;IAEzE,OAAO,CAAC,SAAS,CAAmC;IAEpD;;;OAGG;IACH,OAAO,CAAC,gBAAgB,CAOtB;IAEF;;OAEG;IACH,OAAO,CAAC,sBAAsB;cAcX,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;cAQ3E,MAAM,IAAI,cAAc;CAuC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}

package/train/train-blocked-passage/train-blocked-passage.d.ts

@@ -0,0 +1,15 @@
+import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
+
+/**
+ * It visually displays a blocked passage between train wagons.
+ */
+export declare class SbbTrainBlockedPassageElement extends LitElement {
+    static styles: CSSResultGroup;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-train-blocked-passage': SbbTrainBlockedPassageElement;
+    }
+}
+//# sourceMappingURL=train-blocked-passage.d.ts.map

package/train/train-blocked-passage/train-blocked-passage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"train-blocked-passage.d.ts","sourceRoot":"","sources":["../../../../src/elements/train/train-blocked-passage/train-blocked-passage.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC;;GAEG;AACH,qBACa,6BAA8B,SAAQ,UAAU;IAC3D,OAAuB,MAAM,EAAE,cAAc,CAAS;cAEnC,MAAM,IAAI,cAAc;CAS5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,2BAA2B,EAAE,6BAA6B,CAAC;KAC5D;CACF"}

package/train/train-blocked-passage.d.ts

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

package/train/train-blocked-passage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"train-blocked-passage.d.ts","sourceRoot":"","sources":["../../../src/elements/train/train-blocked-passage.ts"],"names":[],"mappings":"AAAA,cAAc,kDAAkD,CAAC"}

package/train/train-blocked-passage.js

@@ -0,0 +1,26 @@
+import { css as t, LitElement as c, html as l } from "lit";
+import { customElement as d } from "lit/decorators.js";
+const p = t`*,:before,:after{box-sizing:border-box}:host{--sbb-train-blocked-passage-height: var(--sbb-train-formation-wagon-height);--sbb-train-blocked-passage-background-color: var(--sbb-color-red);--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;display:block}@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-font-size-text-s) * var(--sbb-typo-line-height-body-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}`;
+var g = Object.defineProperty, h = Object.getOwnPropertyDescriptor, k = (n, e, r, s) => {
+  for (var a = s > 1 ? void 0 : s ? h(e, r) : e, b = n.length - 1, o; b >= 0; b--)
+    (o = n[b]) && (a = (s ? o(e, r, a) : o(a)) || a);
+  return s && a && g(e, r, a), a;
+};
+let i = class extends c {
+  render() {
+    return l`
+      <span class="sbb-train-blocked-passage">
+        <span class="sbb-train-blocked-passage__wrapper">
+          <span class="sbb-train-blocked-passage__icon"></span>
+        </span>
+      </span>
+    `;
+  }
+};
+i.styles = p;
+i = k([
+  d("sbb-train-blocked-passage")
+], i);
+export {
+  i as SbbTrainBlockedPassageElement
+};

package/train/train-formation/train-formation.d.ts

@@ -0,0 +1,40 @@
+import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
+import { WithListChildren } from '../../core/mixins.js';
+import { SbbTrainElement } from '../train.js';
+
+declare const SbbTrainFormationElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbNamedSlotListMixinType<SbbTrainElement>> & typeof LitElement;
+/**
+ * It displays a train composition, acting as a container for one or more `sbb-train` component.
+ *
+ * @slot - Use the unnamed slot to add 'sbb-train' elements to the `sbb-train-formation`.
+ */
+export declare class SbbTrainFormationElement extends SbbTrainFormationElement_base {
+    static styles: CSSResultGroup;
+    protected readonly listChildLocalNames: string[];
+    /** Option to hide all wagon labels. */
+    hideWagonLabel: boolean;
+    private _sectors;
+    /** Element that defines the visible content width. */
+    private _formationDiv;
+    private _contentResizeObserver;
+    private _abort;
+    private _language;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Apply width of the scrollable space of the formation as a css variable. This will be used from
+     * every slotted sbb-train for the direction-label
+     */
+    private _applyCssWidth;
+    private _readSectors;
+    private _updateFormationDiv;
+    protected willUpdate(changedProperties: PropertyValues<WithListChildren<this>>): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-train-formation': SbbTrainFormationElement;
+    }
+}
+export {};
+//# sourceMappingURL=train-formation.d.ts.map

package/train/train-formation/train-formation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"train-formation.d.ts","sourceRoot":"","sources":["../../../../src/elements/train/train-formation/train-formation.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAMb,OAAO,EAAyB,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAIpF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;;AAUnD;;;;GAIG;AACH,qBACa,wBAAyB,SAAQ,6BAGjC;IACX,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,mBAA4B,mBAAmB,WAAiB;IAEhE,uCAAuC;IAC2C,cAAc,UACxF;IAEC,OAAO,CAAC,QAAQ,CAA0B;IAEnD,sDAAsD;IACtD,OAAO,CAAC,aAAa,CAAkB;IACvC,OAAO,CAAC,sBAAsB,CAA2D;IACzF,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,SAAS,CAAmC;IAEpC,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;IAK5C;;;OAGG;IACH,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,YAAY;YA0CN,mBAAmB;cAcd,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;cAQ3E,MAAM,IAAI,cAAc;CAgC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,qBAAqB,EAAE,wBAAwB,CAAC;KACjD;CACF"}

package/train/train-formation.d.ts

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

package/train/train-formation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"train-formation.d.ts","sourceRoot":"","sources":["../../../src/elements/train/train-formation.ts"],"names":[],"mappings":"AAAA,cAAc,sCAAsC,CAAC"}

package/train/train-formation.js

@@ -0,0 +1,104 @@
+import { css as c, LitElement as d, html as l } from "lit";
+import { property as f, state as p, customElement as m } from "lit/decorators.js";
+import { ref as h } from "lit/directives/ref.js";
+import { SbbConnectedAbortController as u, SbbLanguageController as g } from "../core/controllers.js";
+import { i18nSectorShort as v, i18nSector as w, i18nTrains as _ } from "../core/i18n.js";
+import { SbbNamedSlotListMixin as k } from "../core/mixins.js";
+import { AgnosticResizeObserver as y } from "../core/observers.js";
+const x = c`*,:before,:after{box-sizing:border-box}:host{--sbb-train-formation-inline-padding: var(--sbb-spacing-fixed-4x);--sbb-train-formation-background-color: var(--sbb-color-white);--sbb-train-formation-sector-label-color: var(--sbb-color-metal);--sbb-train-formation-sector-line-color: var(--sbb-color-smoke);--sbb-train-formation-blocked-passage-width: 1rem;display:block}@media (forced-colors: active){:host{--sbb-train-formation-sector-line-color: CanvasText}}:host([hide-wagon-label]){--sbb-train-formation-wagon-label-display: none}.sbb-train-formation{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);display:grid;grid-template:"start sectors end" auto "start trains end" auto/auto 1fr auto;position:relative;overflow-x:auto;background-color:var(--sbb-train-formation-background-color)}.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:before,.sbb-train-formation:after{content:"";display:block;width:var(--sbb-train-formation-inline-padding);background-color:var(--sbb-train-formation-background-color)}.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-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);flex:0 0 var(--_sector-width);color:var(--sbb-train-formation-sector-label-color);text-align:center;position:relative;display:inline-block;margin-block-end:var(--sbb-spacing-fixed-4x);max-width:var(--_sector-width)}.sbb-train-formation__sector:before{content:"";position:absolute;top:50%;right:0;bottom:50%;left:0;height:1px;background-color:var(--sbb-train-formation-sector-line-color)}.sbb-train-formation__sector-sticky-wrapper{background-color:var(--sbb-train-formation-background-color);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__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}`;
+var C = Object.defineProperty, z = Object.getOwnPropertyDescriptor, e = (r, t, i, a) => {
+  for (var o = a > 1 ? void 0 : a ? z(t, i) : t, s = r.length - 1, b; s >= 0; s--)
+    (b = r[s]) && (o = (a ? b(t, i, o) : b(o)) || o);
+  return a && o && C(t, i, o), o;
+};
+let n = class extends k(d) {
+  constructor() {
+    super(...arguments), this.listChildLocalNames = ["sbb-train"], this.hideWagonLabel = !1, this._sectors = [], this._contentResizeObserver = new y(() => this._applyCssWidth()), this._abort = new u(this), this._language = new g(this);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const r = this._abort.signal;
+    this.addEventListener("trainSlotChange", (t) => this._readSectors(t), { signal: r }), this.addEventListener("sectorChange", (t) => this._readSectors(t), { signal: r });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._contentResizeObserver.disconnect();
+  }
+  /**
+   * Apply width of the scrollable space of the formation as a css variable. This will be used from
+   * every slotted sbb-train for the direction-label
+   */
+  _applyCssWidth() {
+    const r = this._formationDiv.getBoundingClientRect().width;
+    this._formationDiv.style.setProperty("--sbb-train-direction-width", `${r}px`);
+  }
+  _readSectors(r) {
+    var t;
+    r == null || r.stopPropagation(), this._sectors = Array.from(
+      ((t = this.querySelectorAll) == null ? void 0 : t.call(
+        this,
+        "sbb-train-wagon,sbb-train-blocked-passage"
+      )) ?? []
+    ).reduce(
+      (i, a) => {
+        const o = i[i.length - 1];
+        if (a.localName === "sbb-train-wagon") {
+          const s = a.sector ?? a.getAttribute("sector");
+          !o.label && s && (o.label = s), !s || o.label === s ? o.wagonCount++ : i.push({
+            label: s,
+            wagonCount: 1,
+            blockedPassageCount: 0
+          });
+        } else
+          a.localName === "sbb-train-blocked-passage" && o.blockedPassageCount++;
+        return i;
+      },
+      [{ wagonCount: 0, blockedPassageCount: 0 }]
+    );
+  }
+  async _updateFormationDiv(r) {
+    r && (this._contentResizeObserver.disconnect(), this._formationDiv = r, this._contentResizeObserver.observe(this._formationDiv), await this.updateComplete, this._applyCssWidth());
+  }
+  willUpdate(r) {
+    super.willUpdate(r), r.has("listChildren") && this._readSectors();
+  }
+  render() {
+    return l`
+      <div class="sbb-train-formation" ${h(this._updateFormationDiv)}>
+        <div class="sbb-train-formation__sectors" aria-hidden="true">
+          ${this._sectors.map(
+      (r) => l`<span
+                class="sbb-train-formation__sector"
+                style="
+                --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 ? v[this._language.current] : w[this._language.current]} ${r.label ? r.label : ""}`}
+                </span>
+              </span>`
+    )}
+        </div>
+
+        <div class="sbb-train-formation__trains">
+          ${this.renderList({
+      class: "sbb-train-formation__train-list",
+      ariaLabel: _[this._language.current]
+    })}
+        </div>
+      </div>
+    `;
+  }
+};
+n.styles = x;
+e([
+  f({ attribute: "hide-wagon-label", reflect: !0, type: Boolean })
+], n.prototype, "hideWagonLabel", 2);
+e([
+  p()
+], n.prototype, "_sectors", 2);
+n = e([
+  m("sbb-train-formation")
+], n);
+export {
+  n as SbbTrainFormationElement
+};

package/train/train-wagon/train-wagon.d.ts

@@ -0,0 +1,49 @@
+import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
+import { SbbOccupancy } from '../../core/interfaces.js';
+import { SbbIconElement } from '../../icon.js';
+
+declare const SbbTrainWagonElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbNamedSlotListMixinType<SbbIconElement>> & typeof LitElement;
+/**
+ * It displays a train compartment within a `sbb-train` component.
+ *
+ * @slot - Use the unnamed slot to add one or more `sbb-icon` for meta-information of the `sbb-train-wagon`.
+ */
+export declare class SbbTrainWagonElement extends SbbTrainWagonElement_base {
+    static styles: CSSResultGroup;
+    static readonly events: {
+        readonly sectorChange: "sectorChange";
+    };
+    protected readonly listChildLocalNames: string[];
+    /** Wagon type. */
+    type: 'locomotive' | 'closed' | 'wagon';
+    /** Occupancy of a wagon. */
+    occupancy?: SbbOccupancy;
+    /** Sector in which to wagon stops. */
+    set sector(value: string);
+    get sector(): string | null;
+    private _sector;
+    /** Accessibility text for blocked passages of the wagon. */
+    blockedPassage: 'previous' | 'next' | 'both' | 'none';
+    /** Visible class label of a wagon. */
+    wagonClass?: '1' | '2';
+    /** Visible label for the wagon number. Not used by type locomotive or closed. */
+    label?: string;
+    /** Additional accessibility text which will be appended to the end. */
+    additionalAccessibilityText?: string;
+    private _language;
+    /**
+     * @internal
+     * Emits whenever the sector value changes.
+     */
+    private _sectorChange;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    private _sectorChanged;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-train-wagon': SbbTrainWagonElement;
+    }
+}
+export {};
+//# sourceMappingURL=train-wagon.d.ts.map

package/train/train-wagon/train-wagon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"train-wagon.d.ts","sourceRoot":"","sources":["../../../../src/elements/train/train-wagon/train-wagon.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EACnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAgBb,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAIpD,OAAO,eAAe,CAAC;AACvB,OAAO,mCAAmC,CAAC;;AAE3C;;;;GAIG;AACH,qBACa,oBAAqB,SAAQ,yBAEzC;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IACX,mBAA4B,mBAAmB,WAAgB;IAE/D,kBAAkB;IACkB,IAAI,EAAE,YAAY,GAAG,QAAQ,GAAG,OAAO,CAAW;IAEtF,4BAA4B;IACT,SAAS,CAAC,EAAE,YAAY,CAAU;IAErD,sCAAsC;IACtC,IACW,MAAM,CAAC,KAAK,EAAE,MAAM,EAG9B;IACD,IAAW,MAAM,IAAI,MAAM,GAAG,IAAI,CAEjC;IACD,OAAO,CAAC,OAAO,CAAuB;IAEtC,4DAA4D;IAErD,cAAc,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAU;IAEtE,sCAAsC;IACS,UAAU,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IAEtE,iFAAiF;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IAElC,uEAAuE;IAEhE,2BAA2B,CAAC,EAAE,MAAM,CAAC;IAE5C,OAAO,CAAC,SAAS,CAAmC;IAEpD;;;OAGG;IACH,OAAO,CAAC,aAAa,CAOnB;cAEiB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAe5E,OAAO,CAAC,cAAc;cAIH,MAAM,IAAI,cAAc;CAwG5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}

package/train/train-wagon.d.ts

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

package/train/train-wagon.d.ts.map

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

package/train/train-wagon.js

@@ -0,0 +1,148 @@
+import { css as d, LitElement as w, nothing as t } from "lit";
+import { property as b, customElement as m } from "lit/decorators.js";
+import { html as s, unsafeStatic as p } from "lit/static-html.js";
+import { SbbLanguageController as y } from "../core/controllers.js";
+import { EventEmitter as u } from "../core/eventing.js";
+import { i18nSector as _, i18nWagonLabel as f, i18nClass as h, i18nBlockedPassage as v, i18nClosedCompartmentLabel as x, i18nLocomotiveLabel as $, i18nAdditionalWagonInformationHeading as C, i18nWagonLabelNumber as k } from "../core/i18n.js";
+import { SbbNamedSlotListMixin as L } from "../core/mixins.js";
+import "../icon.js";
+import "../timetable-occupancy-icon.js";
+const z = d`*,:before,:after{box-sizing:border-box}:host{--sbb-train-wagon-width: var(--sbb-train-formation-wagon-width);--sbb-train-wagon-height: var(--sbb-train-formation-wagon-height);--sbb-train-wagon-inner-padding: var(--sbb-spacing-fixed-3x);--sbb-train-wagon-shape-border-radius: var(--sbb-train-formation-wagon-border-radius);--sbb-train-wagon-shape-color: var(--sbb-color-charcoal);--sbb-train-wagon-shape-color-closed: var(--sbb-color-metal);--sbb-train-wagon-shape-width: var(--sbb-border-width-1x);--sbb-train-wagon-gap: var(--sbb-spacing-fixed-2x);--sbb-train-wagon-icons-gap: var(--sbb-spacing-fixed-1x);--sbb-train-wagon-icons-height: .875rem;display:block}@media (forced-colors: active){:host{--sbb-train-wagon-shape-color-closed: CanvasText}}.sbb-train-wagon{display:flex;flex-direction:column;align-items:center;width:var(--sbb-train-wagon-width);gap:var(--sbb-train-wagon-gap)}.sbb-train-wagon__compartment{list-style:none;margin:0;padding:0;font-size:inherit;display:grid;grid-template:"label label" auto "occupancy class" 1fr/1fr 1fr;position:relative;width:100%}:host([type=closed]) .sbb-train-wagon__compartment:before,:host(:not([data-has-visible-wagon-content])) .sbb-train-wagon__compartment:before{content:"";grid-area:occupancy/span 2;height:var(--sbb-train-wagon-height)}.sbb-train-wagon__compartment:after{content:"";display:block;position:absolute;inset-inline:0;inset-block:auto 0;width:var(--sbb-train-wagon-width);height:var(--sbb-train-wagon-height);border-radius:var(--sbb-train-wagon-shape-border-radius)}:host([type=wagon]) .sbb-train-wagon__compartment:after{border:var(--sbb-train-wagon-shape-width) solid var(--sbb-train-wagon-shape-color)}:host([type=closed]) .sbb-train-wagon__compartment:after{border:var(--sbb-train-wagon-shape-width) solid var(--sbb-train-wagon-shape-color-closed)}.sbb-train-wagon__occupancy,.sbb-train-wagon__class{height:var(--sbb-train-wagon-height);display:flex;align-items:center}.sbb-train-wagon__label{--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);grid-area:label;text-align:center;display:var(--sbb-train-formation-wagon-label-display, inline-block);min-height:calc(1em * var(--sbb-typo-line-height-body-text))}.sbb-train-wagon__occupancy{grid-area:occupancy;padding-inline-start:var(--sbb-train-wagon-inner-padding)}.sbb-train-wagon__class{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-6);--sbb-title-line-height: var(--sbb-typo-line-height-body-text);grid-area:class;padding-inline-end:var(--sbb-train-wagon-inner-padding);margin-inline-start:auto}.sbb-train-wagon__locomotive{grid-area:occupancy/span 2}.sbb-train-wagon__icons{--sbb-icon-svg-height: var(--sbb-train-wagon-icons-height);display:flex}.sbb-train-wagon__icons[hidden]{position:absolute}.sbb-train-wagon__icons-list{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-wrap:wrap;gap:var(--sbb-train-wagon-icons-gap);justify-content:center}.sbb-train-wagon__icons-list>:is(li,span){display:inline-flex}.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 S = Object.defineProperty, A = Object.getOwnPropertyDescriptor, i = (a, e, l, o) => {
+  for (var r = o > 1 ? void 0 : o ? A(e, l) : e, c = a.length - 1, g; c >= 0; c--)
+    (g = a[c]) && (r = (o ? g(e, l, r) : g(r)) || r);
+  return o && r && S(e, l, r), r;
+};
+let n = class extends L(
+  w
+) {
+  constructor() {
+    super(...arguments), this.listChildLocalNames = ["sbb-icon"], this.type = "wagon", this.occupancy = "none", this._sector = null, this.blockedPassage = "none", this._language = new y(this), this._sectorChange = new u(
+      this,
+      n.events.sectorChange,
+      {
+        bubbles: !0,
+        cancelable: !0
+      }
+    );
+  }
+  set sector(a) {
+    this._sector = a, this._sectorChanged();
+  }
+  get sector() {
+    return this._sector;
+  }
+  willUpdate(a) {
+    super.willUpdate(a), (a.has("type") || a.has("occupancy") || a.has("wagonClass")) && this.toggleAttribute(
+      "data-has-visible-wagon-content",
+      !!(this.type === "wagon" && this.occupancy || this.wagonClass)
+    );
+  }
+  _sectorChanged() {
+    this._sectorChange.emit();
+  }
+  render() {
+    const a = (l) => {
+      const o = l;
+      return s`
+        <${p(o)} class="sbb-train-wagon__label" aria-hidden=${(!this.label).toString()}>
+          ${this.label ? s` <span class="sbb-screen-reader-only">
+                    ${`${k[this._language.current]},`}&nbsp;
+                  </span>
+                  ${this.label}` : t}
+        </${p(o)}>
+      `;
+    }, e = `${_[this._language.current]}, ${this.sector}`;
+    return s`
+      <div class="sbb-train-wagon">
+        ${this.type === "wagon" ? s`<ul
+              aria-label=${f[this._language.current]}
+              class="sbb-train-wagon__compartment"
+            >
+              ${this.sector ? s`<li class="sbb-screen-reader-only">${e}</li>` : t}
+              ${a("li")}
+              ${this.wagonClass ? s`<li class="sbb-train-wagon__class">
+                    <span class="sbb-screen-reader-only">
+                      ${this.wagonClass === "1" ? h.first[this._language.current] : h.second[this._language.current]}
+                    </span>
+                    <span aria-hidden="true">${this.wagonClass}</span>
+                  </li>` : t}
+              ${this.occupancy ? s`<sbb-timetable-occupancy-icon
+                    class="sbb-train-wagon__occupancy"
+                    role="listitem"
+                    .occupancy=${this.occupancy}
+                  ></sbb-timetable-occupancy-icon>` : t}
+              ${this.blockedPassage && this.blockedPassage !== "none" ? s`<li class="sbb-screen-reader-only">
+                    ${v[this.blockedPassage][this._language.current]}
+                  </li>` : t}
+            </ul>` : t}
+        ${this.type === "closed" ? s`<span class="sbb-train-wagon__compartment">
+              <span class="sbb-screen-reader-only">
+                ${x(this.label ? parseInt(this.label) : void 0)[this._language.current]}
+                ${this.sector ? `, ${e}` : t}
+              </span>
+              ${a("span")}
+            </span>` : t}
+        ${this.type === "locomotive" ? s`<span class="sbb-train-wagon__compartment">
+              <span class="sbb-screen-reader-only">
+                ${$[this._language.current]}
+                ${this.sector ? `, ${e}` : t}
+              </span>
+              ${a("span")}
+              <svg
+                class="sbb-train-wagon__locomotive"
+                aria-hidden="true"
+                width="80"
+                height="40"
+                viewBox="0 0 80 40"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M17.7906 4.42719C19.9743 1.93152 23.129 0.5 26.4452 0.5H53.5548C56.871 0.5 60.0257 1.93152 62.2094 4.4272L76.2094 20.4272C82.7157 27.8629 77.4351 39.5 67.5548 39.5H12.4452C2.56489 39.5 -2.71566 27.8629 3.79058 20.4272L17.7906 4.42719Z"
+                  stroke="var(--sbb-train-wagon-shape-color-closed)"
+                />
+              </svg>
+            </span>` : t}
+        ${this.additionalAccessibilityText ? s`<span class="sbb-screen-reader-only">, ${this.additionalAccessibilityText}</span>` : t}
+        ${this.type === "wagon" ? s`<span class="sbb-train-wagon__icons" ?hidden=${this.listChildren.length === 0}>
+              ${this.renderList({
+      class: "sbb-train-wagon__icons-list",
+      ariaLabel: C[this._language.current]
+    })}
+            </span>` : t}
+      </div>
+    `;
+  }
+};
+n.styles = z;
+n.events = {
+  sectorChange: "sectorChange"
+};
+i([
+  b({ reflect: !0 })
+], n.prototype, "type", 2);
+i([
+  b()
+], n.prototype, "occupancy", 2);
+i([
+  b({ reflect: !0 })
+], n.prototype, "sector", 1);
+i([
+  b({ attribute: "blocked-passage" })
+], n.prototype, "blockedPassage", 2);
+i([
+  b({ attribute: "wagon-class" })
+], n.prototype, "wagonClass", 2);
+i([
+  b()
+], n.prototype, "label", 2);
+i([
+  b({ attribute: "additional-accessibility-text" })
+], n.prototype, "additionalAccessibilityText", 2);
+n = i([
+  m("sbb-train-wagon")
+], n);
+export {
+  n as SbbTrainWagonElement
+};

package/train/train.d.ts

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

package/train/train.d.ts.map

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

package/train/train.js

@@ -0,0 +1,93 @@
+import { css as p, LitElement as g, nothing as d } from "lit";
+import { property as n, customElement as f } from "lit/decorators.js";
+import { html as c, unsafeStatic as h } from "lit/static-html.js";
+import { SbbLanguageController as v } from "../core/controllers.js";
+import { EventEmitter as _ } from "../core/eventing.js";
+import { i18nTrain as m, i18nWagonsLabel as w } from "../core/i18n.js";
+import { SbbNamedSlotListMixin as x } from "../core/mixins.js";
+import "../icon.js";
+const y = p`*,:before,:after{box-sizing:border-box}:host{--sbb-train-direction-spacing: var(--sbb-spacing-fixed-4x);--sbb-train-direction-label-padding: var(--sbb-spacing-fixed-1x);--sbb-train-direction-station-padding: var(--sbb-spacing-fixed-3x);--sbb-train-direction-line-width: var(--sbb-border-width-1x);--sbb-train-direction-line-color: var(--sbb-color-smoke);--sbb-train-direction-label-color: var(--sbb-color-metal);--sbb-train-direction-label-background: var(--sbb-color-white);--sbb-train-direction-indicator-end-height: .75rem;--sbb-train-direction-indicator-arrow-offset-end: .5625rem;--sbb-train-direction-indicator-arrow-offset-start: calc( var(--sbb-train-direction-indicator-arrow-offset-end) * -1 );display:block}@media (forced-colors: active){:host{--sbb-train-direction-line-color: CanvasText}}.sbb-train{display:flex;flex-direction:column;position:relative;height:100%}.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{--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);padding-block-start:var(--sbb-train-direction-spacing);margin-block:auto var(--sbb-train-direction-spacing);display:flex;position:relative;width:100%}.sbb-train__direction-heading{z-index:1;display:flex;position:sticky;inset:auto 0;flex-direction:column;width:100%;max-width:var(--sbb-train-direction-width);margin:0;color:var(--sbb-train-direction-label-color);font-size:inherit;font-weight:inherit}.sbb-train__direction-indicator{z-index:0;position:absolute;top:calc(.5em * var(--sbb-typo-line-height-body-text) + var(--sbb-train-direction-spacing));inset-inline:0;height:var(--sbb-train-direction-line-width);background-color:var(--sbb-train-direction-line-color)}.sbb-train__direction-arrow{color:var(--sbb-train-direction-line-color)}:host([direction=right]) .sbb-train__direction-arrow{transform:translate(var(--sbb-train-direction-indicator-arrow-offset-end));order:1}:host([direction=left]) .sbb-train__direction-arrow{transform:translate(var(--sbb-train-direction-indicator-arrow-offset-start))}.sbb-train__sticky-wrapper{position:sticky;inset:auto 0;width:100%;max-width:var(--sbb-train-direction-width);height:var(--sbb-train-direction-line-width);display:flex;align-items:center;justify-content:space-between}.sbb-train__sticky-wrapper:after{content:"";width:var(--sbb-train-direction-line-width);height:var(--sbb-train-direction-indicator-end-height);background-color:var(--sbb-train-direction-line-color);display:block}.sbb-train__direction-label,.sbb-train__direction-station{margin:0 auto}.sbb-train__direction-label{padding:0 var(--sbb-train-direction-label-padding);background-color:var(--sbb-train-direction-label-background)}.sbb-train__direction-station{--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);max-width:100%;text-overflow:ellipsis;overflow:hidden;padding:0 var(--sbb-train-direction-station-padding)}.sbb-train__direction-label-sr{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
+var u = Object.defineProperty, L = Object.getOwnPropertyDescriptor, e = (i, a, s, o) => {
+  for (var r = o > 1 ? void 0 : o ? L(a, s) : a, b = i.length - 1, l; b >= 0; b--)
+    (l = i[b]) && (r = (o ? l(a, s, r) : l(r)) || r);
+  return o && r && u(a, s, r), r;
+};
+let t = class extends x(g) {
+  constructor() {
+    super(...arguments), this.listChildLocalNames = [
+      "sbb-train-wagon",
+      "sbb-train-blocked-passage"
+    ], this.directionLabelLevel = "6", this.direction = "left", this._language = new v(this), this._trainSlotChange = new _(
+      this,
+      t.events.trainSlotChange,
+      {
+        bubbles: !0,
+        cancelable: !0
+      }
+    );
+  }
+  /**
+   * Create the aria-label text out of the direction label, station and the accessibility label.
+   */
+  _getDirectionAriaLabel() {
+    const i = [m[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._trainSlotChange.emit();
+  }
+  render() {
+    const i = `h${this.directionLabelLevel}`;
+    return c`
+      <div class="sbb-train">
+        <${h(i)} class="sbb-train__direction-label-sr">
+          ${this._getDirectionAriaLabel()}
+        </${h(i)}>
+        ${this.renderList({
+      class: "sbb-train__wagons",
+      ariaLabel: w[this._language.current]
+    })}
+
+        ${this.directionLabel ? c`<div class="sbb-train__direction" aria-hidden="true">
+                <div class="sbb-train__direction-heading">
+                  <span class="sbb-train__direction-label">${this.directionLabel}</span>
+                  ${this.station ? c`<span class="sbb-train__direction-station">${this.station}</span>` : d}
+                </div>
+                <div class="sbb-train__direction-indicator">
+                  <div class="sbb-train__sticky-wrapper">
+                    <sbb-icon
+                      class="sbb-train__direction-arrow"
+                      name=${this.direction === "left" ? "chevron-small-left-small" : "chevron-small-right-small"}
+                    ></sbb-icon>
+                  </div>
+                </div>
+              </div>` : d}
+      </div>
+    `;
+  }
+};
+t.styles = y;
+t.events = {
+  trainSlotChange: "trainSlotChange"
+};
+e([
+  n({ attribute: "direction-label" })
+], t.prototype, "directionLabel", 2);
+e([
+  n({ attribute: "direction-label-level" })
+], t.prototype, "directionLabelLevel", 2);
+e([
+  n()
+], t.prototype, "station", 2);
+e([
+  n({ attribute: "accessibility-label" })
+], t.prototype, "accessibilityLabel", 2);
+e([
+  n({ reflect: !0 })
+], t.prototype, "direction", 2);
+t = e([
+  f("sbb-train")
+], t);
+export {
+  t as SbbTrainElement
+};

package/train.d.ts

@@ -0,0 +1,5 @@
+export * from './train/train.js';
+export * from './train/train-blocked-passage.js';
+export * from './train/train-formation.js';
+export * from './train/train-wagon.js';
+//# sourceMappingURL=train.d.ts.map

package/train.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"train.d.ts","sourceRoot":"","sources":["../../src/elements/train.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC"}

package/train.js

@@ -0,0 +1,4 @@
+export * from "./train/train.js";
+export * from "./train/train-blocked-passage.js";
+export * from "./train/train-formation.js";
+export * from "./train/train-wagon.js";