@sbb-esta/lyne-elements-dev 5.11.0-dev.1791968952 → 5.11.0-dev.1791974141

package/development/core.js

@@ -3979,12 +3979,14 @@ var SbbScrollController = class {
 		this._scrollProperties.savedTop = document.body.style.top;
 		this._scrollProperties.savedInsetInline = document.body.style.insetInline;
 		this._scrollProperties.savedOverflow = document.body.style.overflow;
+		this._scrollProperties.savedMinHeight = document.body.style.minHeight;
 		const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
 		document.body.style.position = "fixed";
 		document.body.style.top = `-${this._scrollProperties.scrollPosition}px`;
 		document.body.style.insetInline = `0 ${scrollbarWidth}px`;
 		document.body.style.overflow = "hidden";
 		document.body.style.setProperty("--sbb-scrollbar-reserved-space", `${scrollbarWidth}px`);
+		document.body.style.minHeight = "100dvh";
 		document.addEventListener("touchstart", this._touchStart, { passive: true });
 		document.addEventListener("touchmove", this._touchMove, { passive: false });
 		document.body.toggleAttribute("data-sbb-scroll-disabled", true);
@@ -3999,6 +4001,7 @@ var SbbScrollController = class {
 		document.body.style.insetInline = this._scrollProperties.savedInsetInline || "";
 		document.body.style.overflow = this._scrollProperties.savedOverflow || "";
 		document.body.style.removeProperty("--sbb-scrollbar-reserved-space");
+		document.body.style.minHeight = this._scrollProperties.savedMinHeight || "";
 		document.removeEventListener("touchstart", this._touchStart);
 		document.removeEventListener("touchmove", this._touchMove);
 		document.body.removeAttribute("data-sbb-scroll-disabled");

package/development/pearl-chain/pearl-chain/pearl-chain.component.d.ts

@@ -0,0 +1,82 @@
+import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
+import { SbbElement } from '../../core.ts';
+import type { SbbPearlChainNodeElement } from '../../pearl-chain.pure.ts';
+/**
+ * It displays a chain of `sbb-pearl-chain-node` elements connected by lines,
+ * representing a journey with its stops.
+ */
+export declare class SbbPearlChainElement extends SbbElement {
+    static readonly elementName: string;
+    static styles: CSSResultGroup;
+    /**
+     * A configured date which acts as the current date instead of the real current date.
+     * Only recommended for testing purposes.
+     */
+    set now(value: Date | string | null);
+    get now(): Date;
+    private _userNow;
+    private _systemNow;
+    /** Returns the registered `sbb-pearl-chain-node` elements, in DOM order. */
+    get nodes(): readonly SbbPearlChainNodeElement[];
+    private _svgElem;
+    private _nodes;
+    private _orientation;
+    private _systemNowIntervalId;
+    private _debounceId;
+    constructor();
+    /**
+     * Returns the relative position (0 for the first node, 1 for the last one) of each node,
+     * in DOM order, proportional to its `departure` time (or `arrival` if there is no `departure`).
+     */
+    calculateNodeWeights(): number[];
+    /**
+     * Registers a `sbb-pearl-chain-node` with this pearl chain.
+     * @internal
+     */
+    addNode(node: SbbPearlChainNodeElement): void;
+    /**
+     * Unregisters a `sbb-pearl-chain-node` from this pearl chain.
+     * @internal
+     */
+    removeNode(node: SbbPearlChainNodeElement): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    protected firstUpdated(changedProperties: PropertyValues<this>): void;
+    /**
+     * Optimizes `_positionLines()` calls by debouncing them (called by observers).
+     */
+    private _debouncedPositionLines;
+    /**
+     * Positions the rendered lines (and dot) to connect the bullet nodes, and toggles
+     * `:state(horizontal)` based on whether nodes are spread more horizontally than vertically.
+     */
+    private _positionLines;
+    /** Sets the coordinates of a line svg element. */
+    private _setLineCords;
+    /** Toggles `:state(horizontal)` when the nodes are spread more horizontally than vertically. */
+    private _updateOrientation;
+    /** No gap for `start` or `end` bullets. */
+    private _needsGap;
+    /**
+     * Ratio (0-1) of "now" between the line's start departure and end arrival, or
+     * `null` if "now" is outside that window (or either date is missing).
+     */
+    private _progressRatio;
+    /**
+     * Returns a map of CSS classes for a line segment between two nodes, based on its state.
+     */
+    private _lineClasses;
+    /** A line is "past" once we've already arrived at its ending node. */
+    private _isLinePast;
+    /** A line is "current" if "now" falls between its start departure and end arrival. */
+    private _isLineCurrent;
+    /** Renders one segment: a single line, or (when "now" falls within it) a gray/normal split + pulsing dot. */
+    private _renderSegment;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-pearl-chain': SbbPearlChainElement;
+    }
+}

package/development/pearl-chain/pearl-chain-node/pearl-chain-node.component.d.ts

@@ -0,0 +1,48 @@
+import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
+import { SbbElement } from '../../core.ts';
+/**
+ * The possible bullet types of a `sbb-pearl-chain-node`.
+ */
+export type SbbPearlChainNodeType = 'start' | 'end' | 'stop' | 'skip' | 'commercial' | 'boarding' | 'alighting' | 'exceptional' | 'exceptional-skip' | 'exceptional-boarding' | 'exceptional-alighting' | 'stop-duty' | 'stop-on-demand' | 'boarding-on-demand' | 'alighting-on-demand';
+/**
+ * Represents a station/point of interest within a `sbb-pearl-chain`.
+ */
+export declare class SbbPearlChainNodeElement extends SbbElement {
+    static readonly elementName: string;
+    static styles: CSSResultGroup;
+    /** Decides how the bullet is rendered. Defaults to _empty_ (no bullet). */
+    accessor type: SbbPearlChainNodeType | null;
+    /** Marks the node as disrupted, coloring the bullet red (if rendered). */
+    accessor disrupted: 'arrival' | 'departure' | true | null;
+    /** Marks the node as a walk connection. Does not affect the bullet color. */
+    accessor walk: 'arrival' | 'departure' | true | null;
+    /** Marks the connection as unsure, rendering the line dashed. Does not affect the bullet. */
+    accessor unsure: 'arrival' | 'departure' | true | null;
+    /** Marks the node as irrelevant, coloring the bullet gray (if rendered); supersedes `disrupted`. */
+    accessor irrelevant: 'arrival' | 'departure' | true | null;
+    /** The arrival date/time at this node. Accepts ISO 8601 datetime strings. */
+    set arrival(value: Date | string | null);
+    get arrival(): Date | null;
+    private _arrival;
+    /** The departure date/time at this node. Accepts ISO 8601 datetime strings. */
+    set departure(value: Date | string | null);
+    get departure(): Date | null;
+    private _departure;
+    protected get now(): Date;
+    private _now;
+    /** The bullet svg; read by the parent chain to measure the exact bullet position. */
+    protected svgElem: Element | undefined;
+    private _chain;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    private _isPast;
+    private _renderBullet;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-pearl-chain-node': SbbPearlChainNodeElement;
+    }
+}

package/development/pearl-chain.d.ts

@@ -0,0 +1 @@
+export * from './pearl-chain.pure.ts';

package/development/pearl-chain.js

@@ -0,0 +1,10 @@
+import { SbbPearlChainElement, SbbPearlChainNodeElement } from "./pearl-chain.pure.js";
+
+export * from "./pearl-chain.pure.js"
+
+//#region src/elements/pearl-chain.ts
+/** @entrypoint */
+SbbPearlChainElement.define();
+SbbPearlChainNodeElement.define();
+
+//#endregion

package/development/pearl-chain.pure.d.ts

@@ -0,0 +1,3 @@
+/** @entrypoint */
+export * from './pearl-chain/pearl-chain-node/pearl-chain-node.component.ts';
+export * from './pearl-chain/pearl-chain/pearl-chain.component.ts';