@sbb-esta/lyne-elements-experimental 5.0.0-next.2 → 5.0.0

package/timetable-row.component-mNKmhRmP.js

@@ -0,0 +1,566 @@
+import { t as e } from "./format-DjgG1QPc.js";
+import { SbbElement as t, SbbLanguageController as n, defaultDateAdapter as r, forceType as i, i18nArrival as a, i18nClass as o, i18nDeparture as s, i18nDirection as ee, i18nFromPlatform as c, i18nMeansOfTransport as l, i18nNew as u, i18nOccupancy as d, i18nRealTimeInfo as f, i18nSupersaver as p, i18nTransferProcedure as m, i18nTransferProcedures as h, i18nTravelhints as g, i18nTripDuration as _, i18nTripQuayChange as v, listResetStyles as y, screenReaderOnlyStyles as b } from "@sbb-esta/lyne-elements/core.js";
+import { SbbIconElement as x } from "@sbb-esta/lyne-elements/icon.pure.js";
+import { html as S, nothing as C, unsafeCSS as w } from "lit";
+import { __esDecorate as T, __runInitializers as E } from "tslib";
+import { property as D } from "lit/decorators.js";
+import { durationToTime as O, getDepartureArrivalTimeAttribute as te, isRideLeg as k, removeTimezoneFromISOTimeString as ne } from "./core.js";
+import { SbbPearlChainTimeElement as A } from "./pearl-chain-time.pure.js";
+import { SbbCardBadgeElement as j, SbbCardButtonElement as M, SbbCardElement as N } from "@sbb-esta/lyne-elements/card.pure.js";
+import { SbbTimetableOccupancyElement as P } from "@sbb-esta/lyne-elements/timetable-occupancy.pure.js";
+//#region src/elements-experimental/timetable-row/timetable-row.scss?inline
+var F = ":host{--sbb-timetable-row-gap: var(--sbb-spacing-fixed-2x);--sbb-timetable-row-height: 1.5625rem;--sbb-timetable-row-height-header: 1.25rem;--sbb-timetable-row-height-footer: 1rem;--sbb-timetable-row-skeleton-pulse-duration: 1.8s;display:block}:host([disable-animation]){--sbb-timetable-row-skeleton-pulse-duration: 0}.sbb-timetable__row-transport-icon{--sbb-icon-svg-width: 1.25rem;--sbb-icon-svg-height: 1.25rem}.sbb-travel-hints__item{--sbb-icon-svg-height: .875rem}.sbb-timetable__row--quay{margin-inline-end:var(--sbb-spacing-fixed-1x)}.sbb-timetable__row--quay-type{float:left}ul{display:inline-flex}li,.sbb-timetable__row-transport{display:inline-flex;align-self:center}.sbb-timetable__row-transportnumber,.sbb-timetable__row-time{--sbb-text-font-size: var(--sbb-text-font-size-s);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);font-weight:700;line-height:unset;white-space:nowrap;align-self:center}.sbb-timetable__row{--sbb-text-font-size: var(--sbb-text-font-size-s);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-timetable-row-gap)}.sbb-timetable__row-header,.sbb-timetable__row-footer{animation:none}.sbb-timetable__row-header{display:flex;gap:var(--sbb-spacing-fixed-2x);align-items:center;line-height:var(--sbb-timetable-row-height-header)}.sbb-timetable__row-details,.sbb-timetable__row-hints{display:inline-flex;gap:var(--sbb-spacing-fixed-1x);align-items:center}.sbb-timetable__row-header p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0;align-self:center}.sbb-timetable__row-footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--sbb-spacing-fixed-2x);line-height:var(--sbb-timetable-row-height-footer)}.sbb-timetable__row-footer>span{align-self:center}.sbb-timetable__row-footer :only-child{margin-inline-start:auto}.sbb-timetable__row-quay--changed{color:var(--sbb-color-primary)}.sbb-timetable__row-transport-wrapper,.sbb-timetable__row-warning{display:inline-flex}.sbb-loading{pointer-events:none}.sbb-loading__wrapper{display:flex;flex-direction:column;gap:var(--sbb-spacing-fixed-2x)}.sbb-loading__row{width:100%;border-radius:var(--sbb-border-radius-1x);height:var(--sbb-timetable-row-height)}@media(min-width:64rem){.sbb-loading__row{height:1.75rem}}@media(forced-colors:active){.sbb-loading__row{border:var(--sbb-border-width-1x) solid ButtonBorder!important}}.sbb-loading__row,.sbb-loading__badge{background:var(--sbb-background-color-4);animation:skeleton-pulse var(--sbb-timetable-row-skeleton-pulse-duration) ease-out infinite}.sbb-loading__row:first-of-type{height:var(--sbb-timetable-row-height-header);width:50%}.sbb-loading__row:last-of-type{height:var(--sbb-timetable-row-height-footer)}.sbb-loading__badge{margin-inline:auto calc(var(--sbb-spacing-fixed-3x) * -1);padding-inline-end:var(--sbb-spacing-fixed-6x);border-end-start-radius:var(--sbb-card-badge-border-radius);transform:var(--sbb-card-badge-skew);width:7.1875rem;height:1.25rem}@keyframes skeleton-pulse{0%{background:var(--sbb-background-color-4)}17%{background:var(--sbb-background-color-4)}50%{background:var(--sbb-background-color-3)}67%{background:var(--sbb-background-color-3)}to{background:var(--sbb-background-color-4)}}", I = (e, t) => S`<span class="sbb-timetable__row-transport">
+    <sbb-icon name=${e}></sbb-icon>
+    <span class="sbb-screen-reader-only">${t}</span>
+  </span>`, L = (e, t) => {
+	let n = [
+		"M",
+		"B",
+		"T"
+	].includes(e) ? " " : "";
+	return S`<span class="sbb-timetable__row-transportnumber">
+    ${t === null ? e : e + n + t}
+  </span>`;
+}, R = (e) => e?.find((e) => e.serviceJourney?.serviceAlteration?.reachableText)?.serviceJourney?.serviceAlteration?.reachableText, z = (e) => e?.find((e) => e.serviceJourney?.serviceAlteration?.delayText)?.serviceJourney?.serviceAlteration?.delayText, B = (e) => e?.find((e) => !!e.serviceJourney?.serviceAlteration?.redirectedText)?.serviceJourney?.serviceAlteration?.redirectedText, V = (e) => e?.find((e) => !!e.serviceJourney?.serviceAlteration?.unplannedStopPointsText)?.serviceJourney?.serviceAlteration?.unplannedStopPointsText, H = (e) => {
+	let t = {
+		DISTURBANCE: 0,
+		INFORMATION: 1,
+		DELAY: 2,
+		TRAIN_REPLACEMENT_BY_BUS: 3,
+		CONSTRUCTION_SITE: 4,
+		END_MESSAGE: 5
+	};
+	return [...e].sort((e, n) => t[e.cause] - t[n.cause]);
+}, U = (e) => {
+	switch (e?.cause) {
+		case "DISTURBANCE": return {
+			name: "disruption",
+			text: e?.broadcastMessages?.length ? e?.broadcastMessages[0].title : ""
+		};
+		case "INFORMATION": return {
+			name: "info",
+			text: e?.broadcastMessages.length ? e?.broadcastMessages[0].title : ""
+		};
+		case "DELAY": return {
+			name: "delay",
+			text: e?.broadcastMessages.length ? e?.broadcastMessages[0].title : ""
+		};
+		case "TRAIN_REPLACEMENT_BY_BUS": return {
+			name: "replacementbus",
+			text: e?.broadcastMessages.length ? e?.broadcastMessages[0].title : ""
+		};
+		case "CONSTRUCTION_SITE": return {
+			name: "construction",
+			text: e?.broadcastMessages.length ? e?.broadcastMessages[0].title : ""
+		};
+		default: return {
+			name: "info",
+			text: e?.broadcastMessages.length ? e?.broadcastMessages[0].title : ""
+		};
+	}
+}, W = (e, t) => {
+	let { summary: n, legs: r } = e || {}, i = r?.filter((e) => k(e)), { tripStatus: a } = n || {};
+	if (a?.cancelled || a?.partiallyCancelled) return {
+		name: "cancellation",
+		text: a?.cancelledText
+	};
+	if (R(i)) return {
+		name: "missed-connection",
+		text: R(i)
+	};
+	if (a?.alternative) return {
+		name: "alternative",
+		text: a.alternativeText
+	};
+	if (B(i)) return {
+		name: "reroute",
+		text: B(i)
+	};
+	if (V(i)) return {
+		name: "add-stop",
+		text: V(i)
+	};
+	if (a?.delayed || a?.delayedUnknown) return {
+		name: "delay",
+		text: z(i)
+	};
+	if (a?.quayChanged) {
+		let e = i[0].departure;
+		return {
+			name: "platform-change",
+			text: e.quayChanged ? e.quayChangedText : v[t]
+		};
+	}
+	return {};
+}, G = (e) => {
+	let t = [
+		"RR",
+		"RK",
+		"RC",
+		"RL",
+		"RM",
+		"RS",
+		"RU",
+		"XP",
+		"XR",
+		"XT"
+	];
+	return e.reduce((e, n) => {
+		if (e) return e;
+		if (t.includes(n.name)) return {
+			...n,
+			name: "RR"
+		};
+	}, void 0);
+}, K = (e) => {
+	let t = [
+		"Z",
+		"SB",
+		"SZ",
+		"VR",
+		"TG"
+	];
+	return e.filter((t, n) => e.findIndex((e) => e.name === t.name) === n).filter((e) => t.includes(e.name)).sort((e, n) => t.indexOf(e.name) - t.indexOf(n.name));
+}, q = (e) => {
+	let t = G(e), n = K(e);
+	return t === void 0 ? n : n.length ? n[0].name === "Z" && n[1] ? [
+		n[0],
+		t,
+		n[1]
+	].concat(n.slice(2)) : [t, ...n] : [t];
+}, J = (() => {
+	let v = t, R = [], z, B = [], V = [], G, K = [], J = [], Y, X = [], Z = [], Q, re = [], ie = [], ae, oe = [], se = [], ce, le = [], ue = [], de, fe = [], $ = [], pe, me = [], he = [], ge, _e = [], ve = [], ye, be = [], xe = [], Se;
+	return class extends v {
+		constructor() {
+			super(...arguments), this.#e = (E(this, R), E(this, B, null)), this.#t = (E(this, V), E(this, K, null)), this.#n = (E(this, J), E(this, X, !1)), this.#r = (E(this, Z), E(this, re, null)), this.#i = (E(this, ie), E(this, oe, !1)), this.#a = (E(this, se), E(this, le, !1)), this.#o = (E(this, ue), E(this, fe, !1)), this.#s = (E(this, $), E(this, me, "")), this.#c = (E(this, he), E(this, _e, !1)), this.#l = (E(this, ve), E(this, be, !1)), this._now = (E(this, xe), null), this._language = new n(this);
+		}
+		static {
+			let e = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
+			z = [D({ type: Object })], G = [D({ type: Object })], Y = [i(), D({
+				attribute: "disable-animation",
+				reflect: !0,
+				type: Boolean
+			})], Q = [D({ type: Object })], ae = [i(), D({
+				attribute: "loading-trip",
+				type: Boolean
+			})], ce = [i(), D({
+				attribute: "a11y-footpath",
+				type: Boolean
+			})], de = [i(), D({
+				attribute: "loading-price",
+				type: Boolean
+			})], pe = [i(), D({ attribute: "card-action-label" })], ge = [i(), D({
+				attribute: "accessibility-expanded",
+				type: Boolean
+			})], ye = [i(), D({ type: Boolean })], Se = [D()], T(this, null, z, {
+				kind: "accessor",
+				name: "trip",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "trip" in e,
+					get: (e) => e.trip,
+					set: (e, t) => {
+						e.trip = t;
+					}
+				},
+				metadata: e
+			}, B, V), T(this, null, G, {
+				kind: "accessor",
+				name: "price",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "price" in e,
+					get: (e) => e.price,
+					set: (e, t) => {
+						e.price = t;
+					}
+				},
+				metadata: e
+			}, K, J), T(this, null, Y, {
+				kind: "accessor",
+				name: "disableAnimation",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "disableAnimation" in e,
+					get: (e) => e.disableAnimation,
+					set: (e, t) => {
+						e.disableAnimation = t;
+					}
+				},
+				metadata: e
+			}, X, Z), T(this, null, Q, {
+				kind: "accessor",
+				name: "boarding",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "boarding" in e,
+					get: (e) => e.boarding,
+					set: (e, t) => {
+						e.boarding = t;
+					}
+				},
+				metadata: e
+			}, re, ie), T(this, null, ae, {
+				kind: "accessor",
+				name: "loadingTrip",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "loadingTrip" in e,
+					get: (e) => e.loadingTrip,
+					set: (e, t) => {
+						e.loadingTrip = t;
+					}
+				},
+				metadata: e
+			}, oe, se), T(this, null, ce, {
+				kind: "accessor",
+				name: "a11yFootpath",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "a11yFootpath" in e,
+					get: (e) => e.a11yFootpath,
+					set: (e, t) => {
+						e.a11yFootpath = t;
+					}
+				},
+				metadata: e
+			}, le, ue), T(this, null, de, {
+				kind: "accessor",
+				name: "loadingPrice",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "loadingPrice" in e,
+					get: (e) => e.loadingPrice,
+					set: (e, t) => {
+						e.loadingPrice = t;
+					}
+				},
+				metadata: e
+			}, fe, $), T(this, null, pe, {
+				kind: "accessor",
+				name: "cardActionLabel",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "cardActionLabel" in e,
+					get: (e) => e.cardActionLabel,
+					set: (e, t) => {
+						e.cardActionLabel = t;
+					}
+				},
+				metadata: e
+			}, me, he), T(this, null, ge, {
+				kind: "accessor",
+				name: "accessibilityExpanded",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "accessibilityExpanded" in e,
+					get: (e) => e.accessibilityExpanded,
+					set: (e, t) => {
+						e.accessibilityExpanded = t;
+					}
+				},
+				metadata: e
+			}, _e, ve), T(this, null, ye, {
+				kind: "accessor",
+				name: "active",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "active" in e,
+					get: (e) => e.active,
+					set: (e, t) => {
+						e.active = t;
+					}
+				},
+				metadata: e
+			}, be, xe), T(this, null, Se, {
+				kind: "setter",
+				name: "now",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "now" in e,
+					set: (e, t) => {
+						e.now = t;
+					}
+				},
+				metadata: e
+			}, null, R), e && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: e
+			});
+		}
+		static {
+			this.elementName = "sbb-timetable-row";
+		}
+		static {
+			this.elementDependencies = [
+				N,
+				j,
+				M,
+				x,
+				P,
+				A
+			];
+		}
+		static {
+			this.styles = [
+				y,
+				b,
+				w(F)
+			];
+		}
+		#e;
+		get trip() {
+			return this.#e;
+		}
+		set trip(e) {
+			this.#e = e;
+		}
+		#t;
+		get price() {
+			return this.#t;
+		}
+		set price(e) {
+			this.#t = e;
+		}
+		#n;
+		get disableAnimation() {
+			return this.#n;
+		}
+		set disableAnimation(e) {
+			this.#n = e;
+		}
+		#r;
+		get boarding() {
+			return this.#r;
+		}
+		set boarding(e) {
+			this.#r = e;
+		}
+		#i;
+		get loadingTrip() {
+			return this.#i;
+		}
+		set loadingTrip(e) {
+			this.#i = e;
+		}
+		#a;
+		get a11yFootpath() {
+			return this.#a;
+		}
+		set a11yFootpath(e) {
+			this.#a = e;
+		}
+		#o;
+		get loadingPrice() {
+			return this.#o;
+		}
+		set loadingPrice(e) {
+			this.#o = e;
+		}
+		#s;
+		get cardActionLabel() {
+			return this.#s;
+		}
+		set cardActionLabel(e) {
+			this.#s = e;
+		}
+		#c;
+		get accessibilityExpanded() {
+			return this.#c;
+		}
+		set accessibilityExpanded(e) {
+			this.#c = e;
+		}
+		#l;
+		get active() {
+			return this.#l;
+		}
+		set active(e) {
+			this.#l = e;
+		}
+		set now(e) {
+			this._now = r.getValidDateOrNull(r.deserialize(e));
+		}
+		get now() {
+			return this._now ?? /* @__PURE__ */ new Date();
+		}
+		willUpdate(e) {
+			super.willUpdate(e), e.has("loadingTrip") && (this.internals.role = this.loadingTrip ? null : "rowgroup");
+		}
+		_renderSkeleton() {
+			return S`
+      <sbb-card class="sbb-loading sbb-card-spacing-4x-xxs">
+        ${this.loadingPrice ? S`<div class="sbb-loading__badge" slot="badge"></div>` : C}
+        <div class="sbb-loading__wrapper">
+          <div class="sbb-loading__row"></div>
+          <div class="sbb-loading__row"></div>
+          <div class="sbb-loading__row"></div>
+        </div>
+      </sbb-card>
+    `;
+		}
+		_getRideLegs() {
+			return this.trip?.legs?.filter((e) => k(e)) ?? [];
+		}
+		_getQuayTypeStrings() {
+			if (!this.trip.summary?.product) return null;
+			let e = this._getRideLegs(), t = this.trip.summary.product?.vehicleMode === "TRAIN" ? e[0].serviceJourney.quayTypeShortName || "" : e[0].serviceJourney.quayTypeName || "";
+			return {
+				long: c[this._language.current] + " " + t,
+				short: t
+			};
+		}
+		_renderQuayType() {
+			if (!this.trip.summary?.product) return;
+			let e = this._getQuayTypeStrings();
+			return S`
+      <span class="sbb-timetable__row--quay">
+        <span class="sbb-screen-reader-only">${e?.long}&nbsp;</span>
+        <span class="sbb-timetable__row--quay-type" aria-hidden="true"
+          >${e?.short}</span
+        >
+      </span>
+    `;
+		}
+		_handleHimCus(e) {
+			let { situations: t } = e || {}, n = t && H(t), r = W(e, this._language.current);
+			return {
+				cus: Object.keys(r)?.length ? r : null,
+				him: t?.length ? U(n[0]) : null
+			};
+		}
+		_getAccessibilityText(t) {
+			let { summary: n, legs: r, notices: i } = t || {}, { departureWalk: c, arrivalWalk: v, departure: y, arrival: b, product: x, direction: S, occupancy: C, duration: w } = n || {}, { departureTimeAttribute: T, arrivalTimeAttribute: E } = te(r, c || 0, v || 0, this._language.current, this.a11yFootpath), D = this._getRideLegs(), k = y?.time ? ne(y.time) : void 0, A = b?.time ? ne(b.time) : void 0, j = T ? `${T.text} ${T.duration}, ` : "", M = E ? `${E.text} ${E.duration}, ` : "", N = k ? `${s[this._language.current]}: ${e(k, "HH:mm")}, ` : "", P = () => y?.quayFormatted ? `${y?.quayChanged ? `${u[this._language.current]} ` : ""}${this._getQuayTypeStrings()?.long} ${y?.quayFormatted}, ` : "", F = x && x.vehicleMode ? l[x.vehicleMode.toLowerCase()] && `${l[x.vehicleMode.toLowerCase()][this._language.current]}, ` : "", I = x?.vehicleSubModeShortName ? `${x.vehicleSubModeShortName} ${x.line || ""}, ` : "", L = `${ee[this._language.current]} ${S}, `, R = this._handleHimCus(t), z = R?.cus?.text ? `${f[this._language.current]}: ${R?.cus?.text}, ` : "", B = R?.him?.text ? `${f[this._language.current]}: ${R?.him?.text}, ` : "", V = this.boarding ? `${this.boarding.text}, ` : "", H = `${this.price?.isDiscount ? p[this._language.current] : ""} ${this.price?.text && this.price?.price ? (this.price?.text || "") + " " + (this.price?.price || "") + ", " : ""}`, U = D.length > 2 ? `${D.length - 1} ${h[this._language.current]}, ` : D.length > 1 ? `${D.length - 1} ${m[this._language.current]}, ` : "", W = A ? `${a[this._language.current]}: ${e(A, "HH:mm")}, ` : "", G = "";
+			C && (C.firstClass && C.firstClass !== "UNKNOWN" && (G += `${o.first[this._language.current]} ${d[C.firstClass.toLowerCase()]?.[this._language.current]}.`), C.secondClass && C.secondClass !== "UNKNOWN" && (G += ` ${o.second[this._language.current]} ${d[C.secondClass.toLowerCase()]?.[this._language.current]}.`));
+			let K = i && q(i).length && q(i)?.map((e, t) => t < 4 && e.text?.template).join(", ") + ", ", J = K ? `${g[this._language.current]}: ${K}` : "", Y = w && w > 0 ? `${_[this._language.current]} ${O(w, this._language.current).long}, ` : "";
+			return [
+				j,
+				N,
+				P(),
+				F,
+				I,
+				L,
+				z,
+				V,
+				H,
+				z ? "" : B,
+				W,
+				M,
+				Y,
+				U,
+				G,
+				J
+			].map((e) => e?.trim()).filter((e) => e && e.length > 0).join(" ");
+		}
+		render() {
+			if (this.loadingTrip) return this._renderSkeleton();
+			let { legs: e, id: t, notices: n, summary: r } = this.trip || {}, { product: i, direction: a, departureWalk: o, departure: c, arrival: d, arrivalWalk: f, occupancy: m, duration: h } = r || {}, g = this._handleHimCus(this.trip), v = !!g.cus || !!g.him, y = n && q(n), b = h ? O(h, this._language.current) : null;
+			return S`
+      <sbb-card class="sbb-card-spacing-4x-xxs" id=${t}>
+        <sbb-card-button
+          ?active=${this.active}
+          aria-expanded=${this.accessibilityExpanded ? "true" : C}
+        >
+          ${this.cardActionLabel ? this.cardActionLabel : this._getAccessibilityText(this.trip)}
+        </sbb-card-button>
+        ${this.loadingPrice ? S`<div class="sbb-loading__badge" slot="badge"></div>` : C}
+        ${this.price && !this.loadingPrice ? S`<sbb-card-badge color=${this.price.isDiscount ? "charcoal" : "white"}>
+              ${this.price.isDiscount ? S`<span aria-hidden="true">
+                    %<span class="sbb-screen-reader-only"
+                      >${p[this._language.current]}</span
+                    >
+                  </span>` : C}
+              ${this.price.text ? S`<span>${this.price.text}</span>` : C}
+              ${this.price.price ? S`<span>${this.price.price}</span>` : C}
+            </sbb-card-badge>` : C}
+        <div class="sbb-timetable__row" role="row">
+          <div class="sbb-timetable__row-header" role="gridcell">
+            <div class="sbb-timetable__row-details">
+              ${i?.corporateIdentityPictogram && S`<span class="sbb-timetable__row-transport-wrapper">
+                <sbb-icon
+                  class="sbb-timetable__row-transport-icon"
+                  name="picto:${i.corporateIdentityPictogram}"
+                ></sbb-icon>
+                <span class="sbb-screen-reader-only">
+                  ${i && i.vehicleMode && l[i.vehicleMode.toLowerCase()] && l[i.vehicleMode.toLowerCase()][this._language.current]}
+                  &nbsp;
+                </span>
+              </span>`}
+              ${i && (i.corporateIdentityIcon ? I(i.corporateIdentityIcon, i.name) : i.vehicleSubModeShortName && L(i.vehicleSubModeShortName, i?.line))}
+            </div>
+            ${a ? S`<p>${`${ee[this._language.current]} ${a}`}</p>` : C}
+          </div>
+          <sbb-pearl-chain-time
+            role="gridcell"
+            .legs=${e}
+            .departureTime=${c?.time}
+            .arrivalTime=${d?.time}
+            .departureWalk=${o}
+            .arrivalWalk=${f}
+            ?disable-animation=${this.disableAnimation}
+            ?a11y-footpath=${this.a11yFootpath}
+            .now=${this.now}
+          ></sbb-pearl-chain-time>
+          <div class="sbb-timetable__row-footer" role="gridcell">
+            ${i && c?.quayFormatted ? S`<span
+                  class=${c?.quayChanged ? "sbb-timetable__row-quay--changed" : C}
+                >
+                  <span class="sbb-screen-reader-only">
+                    ${`${s[this._language.current]} ${c?.quayChanged ? u[this._language.current] : ""}`}
+                    &nbsp;
+                  </span>
+                  ${this._renderQuayType()} ${c?.quayFormatted}
+                </span>` : C}
+            ${m?.firstClass && m?.firstClass !== "UNKNOWN" || m?.secondClass && m.secondClass !== "UNKNOWN" ? S`<sbb-timetable-occupancy
+                  .firstClassOccupancy=${m?.firstClass?.toLowerCase()}
+                  .secondClassOccupancy=${m?.secondClass?.toLowerCase()}
+                ></sbb-timetable-occupancy>` : C}
+            ${y && y.length || this.boarding ? S`<ul class="sbb-timetable__row-hints" role="list">
+                  ${y?.map((e, t) => t < 4 ? S`<li>
+                          <sbb-icon
+                            class="sbb-travel-hints__item"
+                            name=${"sa-" + e.name?.toLowerCase()}
+                          ></sbb-icon>
+                          <span class="sbb-screen-reader-only">${e.text?.template}</span>
+                        </li>` : C)}
+                  ${this.boarding ? S`<li>
+                        <sbb-icon
+                          class="sbb-travel-hints__item"
+                          name=${this.boarding?.name}
+                          aria-label=${this.boarding?.text}
+                          aria-hidden="false"
+                        ></sbb-icon>
+                      </li>` : C}
+                </ul>` : C}
+            ${h && h > 0 ? S`<time>
+                  <span class="sbb-screen-reader-only">
+                    ${`${_[this._language.current]} ${b.long}`}
+                  </span>
+                  <span aria-hidden="true">${b.short}</span>
+                </time>` : C}
+            ${v && (g.cus || g.him) ? S`<span class="sbb-timetable__row-warning">
+                  <sbb-icon name=${(g.cus || g.him).name}></sbb-icon>
+                  <span class="sbb-screen-reader-only">${(g.cus || g.him).text}</span>
+                </span>` : C}
+          </div>
+        </div>
+      </sbb-card>
+    `;
+		}
+	};
+})();
+//#endregion
+export { q as a, H as c, U as i, K as n, I as o, W as r, L as s, J as t };

package/timetable-row.js

@@ -1,4 +1,4 @@
-import { a as e, c as t, i as n, n as r, o as i, r as a, s as o, t as s } from "./timetable-row.component-BqIVlISS.js";
+import { a as e, c as t, i as n, n as r, o as i, r as a, s as o, t as s } from "./timetable-row.component-mNKmhRmP.js";
 import "./timetable-row.pure.js";
 //#region src/elements-experimental/timetable-row.ts
 s.define();

package/timetable-row.pure.js

@@ -1,2 +1,2 @@
-import { a as e, c as t, i as n, n as r, o as i, r as a, s as o, t as s } from "./timetable-row.component-BqIVlISS.js";
+import { a as e, c as t, i as n, n as r, o as i, r as a, s as o, t as s } from "./timetable-row.component-mNKmhRmP.js";
 export { s as SbbTimetableRowElement, r as filterNotices, a as getCus, n as getHimIcon, e as handleNotices, i as renderIconProduct, o as renderStringProduct, t as sortSituation };

package/autocomplete-grid-option.component-iEj9qreq.js

@@ -1,35 +0,0 @@
-import { SbbPropertyWatcherController as e, ɵstateController as t } from "@sbb-esta/lyne-elements/core.js";
-import { unsafeCSS as n } from "lit";
-import { SbbOptionBaseElement as r } from "@sbb-esta/lyne-elements/option.pure.js";
-//#region src/elements-experimental/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.scss?inline
-var i = ":host{display:block}:host(:is(:state(negative),[state--negative])){--sbb-option-color: var(--sbb-color-3-negative);--sbb-option-icon-color: var(--sbb-color-5)}:host(:not(:is(:state(disable-highlight),[state--disable-highlight]))) .sbb-option__label slot{display:none}:host(:is(:state(active),[state--active])){--sbb-option-focus-outline-color: var(--sbb-focus-outline-color)}.sbb-option{font-size:var(--sbb-option-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);position:relative;display:flex;align-items:center;column-gap:var(--sbb-option-column-gap);justify-content:start;min-height:var(--sbb-option-min-height);padding-inline:var(--sbb-option-padding-inline);color:var(--sbb-option-color)}.sbb-option:after{content:\"\";display:block;position:absolute;inset:var(--sbb-option-focus-outline-inset);pointer-events:none;border:var(--sbb-focus-outline-width) solid var(--sbb-option-focus-outline-color);border-radius:var(--sbb-option-border-radius)}:host(:not(:is(:state(disabled),[state--disabled]))) .sbb-option__label--highlight{font-weight:700}@media(forced-colors:active){:host(:not(:is(:state(disabled),[state--disabled]))) .sbb-option__label--highlight{color:Highlight}}.sbb-option__icon{display:flex;min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small);color:var(--sbb-option-icon-color)}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-option__icon{display:var(--sbb-option-icon-container-display, none)}.sbb-option__label{text-overflow:var(--sbb-option-text-overflow);overflow:var(--sbb-option-overflow);white-space:var(--sbb-option-white-space, initial)}", a = "sbb-autocomplete-grid-option", o = class extends r {
-	static {
-		this.elementName = "sbb-autocomplete-grid-option";
-	}
-	static {
-		this.role = "gridcell";
-	}
-	static {
-		this.styles = [n(i)];
-	}
-	constructor() {
-		super(), this.optionId = a, this.addController(new e(this, () => this.closest("sbb-autocomplete-grid-optgroup"), {
-			disabled: (e) => {
-				this.disabledFromGroup = e.disabled, t(this.closest?.("sbb-autocomplete-grid-row"))?.toggle("disabled", this.disabled || this.disabledFromGroup), this.updateAriaDisabled();
-			},
-			label: (e) => this.groupLabel = e.label
-		})), this.addController(new e(this, () => this.closest("sbb-autocomplete-grid"), { negative: (e) => this.toggleState("negative", e.negative) }));
-	}
-	willUpdate(e) {
-		super.willUpdate(e), e.has("disabled") && (t(this.closest?.("sbb-autocomplete-grid-row"))?.toggle("disabled", this.disabled || this.disabledFromGroup), this.updateAriaDisabled());
-	}
-	selectByClick(e) {
-		if (this.disabled || this.disabledFromGroup) {
-			e.stopPropagation();
-			return;
-		}
-		this.selectViaUserInteraction(!0);
-	}
-};
-//#endregion
-export { a as n, o as t };

package/core/styles/core.scss

@@ -1,13 +0,0 @@
-$theme: 'standard' !default;
-
-@use 'sass:string';
-
-@use '../../autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.global' as
-  autocomplete-grid-row with (
-  $theme: $theme
-);
-
-// Core variables
-:root {
-  @include autocomplete-grid-row.base;
-}

package/core/styles/theme.scss

@@ -1,5 +0,0 @@
-$theme: 'standard' !default;
-
-@use './core' with (
-  $theme: $theme
-);