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

package/timetable-row/timetable-row.component.js

@@ -5,10 +5,10 @@ var Ne = (t, i, s) => i.has(t) || ke("Cannot " + s);
 var f = (t, i, s) => (Ne(t, i, "read from private field"), s ? s.call(t) : i.get(t)), y = (t, i, s) => i.has(t) ? ke("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(t) : i.set(t, s), l = (t, i, s, n) => (Ne(t, i, "write to private field"), n ? n.call(t, s) : i.set(t, s), s);
 import { __runInitializers as o, __esDecorate as _ } from "tslib";
 import { SbbLanguageController as nt } from "@sbb-esta/lyne-elements/core/controllers.js";
-import { defaultDateAdapter as ze } from "@sbb-esta/lyne-elements/core/datetime.js";
+import { defaultDateAdapter as Ie } from "@sbb-esta/lyne-elements/core/datetime.js";
 import { forceType as N } from "@sbb-esta/lyne-elements/core/decorators.js";
 import { setOrRemoveAttribute as ot } from "@sbb-esta/lyne-elements/core/dom.js";
-import { i18nFromPlatform as lt, i18nDeparture as Ie, i18nMeansOfTransport as J, i18nDirection as Le, i18nRealTimeInfo as Re, i18nSupersaver as Me, i18nTransferProcedures as ct, i18nTransferProcedure as bt, i18nArrival as dt, i18nClass as Ee, i18nOccupancy as Oe, i18nTravelhints as gt, i18nTripDuration as Pe, i18nNew as De, i18nTripQuayChange as pt } from "@sbb-esta/lyne-elements/core/i18n.js";
+import { i18nFromPlatform as lt, i18nDeparture as ze, i18nMeansOfTransport as J, i18nDirection as Le, i18nRealTimeInfo as Re, i18nSupersaver as Me, i18nTransferProcedures as ct, i18nTransferProcedure as bt, i18nArrival as dt, i18nClass as Ee, i18nOccupancy as Oe, i18nTravelhints as gt, i18nTripDuration as Pe, i18nNew as De, i18nTripQuayChange as pt } from "@sbb-esta/lyne-elements/core/i18n.js";
 import { boxSizingStyles as ut } from "@sbb-esta/lyne-elements/core/styles.js";
 import { css as ht, LitElement as mt, nothing as g, html as c } from "lit";
 import { customElement as _t, property as v } from "lit/decorators.js";
@@ -19,7 +19,7 @@ import "@sbb-esta/lyne-elements/icon.js";
 import "@sbb-esta/lyne-elements/timetable-occupancy.js";
 import "../pearl-chain-time.js";
 import { f as Be } from "../format-lqeCzmzS.js";
-const yt = ht`: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-screen-reader-only{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-timetable__row--quay{margin-inline-end:var(--sbb-spacing-fixed-1x)}.sbb-timetable__row--quay-type{float:left}ul{list-style:none;margin:0;padding:0;font-size:inherit;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-border-radius-4x);transform:skew(16deg);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)}}`, vt = (t, i) => c`<span class="sbb-timetable__row-transport">
+const yt = ht`: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-screen-reader-only{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-timetable__row--quay{margin-inline-end:var(--sbb-spacing-fixed-1x)}.sbb-timetable__row--quay-type{float:left}ul{list-style:none;margin:0;padding:0;font-size:inherit;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)}}`, vt = (t, i) => c`<span class="sbb-timetable__row-transport">
     <sbb-icon name=${t}></sbb-icon>
     <span class="sbb-screen-reader-only">${i}</span>
   </span>`, xt = (t, i) => {
@@ -108,13 +108,13 @@ const yt = ht`:host{--sbb-timetable-row-gap: var(--sbb-spacing-fixed-2x);--sbb-t
   return i === void 0 ? s : s.length ? s[0].name === "Z" && s[1] ? [s[0], i, s[1]].concat(s.slice(2)) : [i, ...s] : [i];
 };
 let Ht = (() => {
-  var z, I, L, R, M, E, O, P, D, F, b;
+  var I, z, L, R, M, E, O, P, D, F, b;
   let t = [_t("sbb-timetable-row")], i, s = [], n, p = mt, h = [], S, X = [], Z = [], G, V = [], ee = [], te, ae = [], ie = [], se, re = [], ne = [], oe, le = [], ce = [], be, de = [], ge = [], pe, ue = [], he = [], me, _e = [], fe = [], ye, ve = [], xe = [], we, $e = [], Te = [], Ae;
   return b = class extends p {
     constructor() {
       super(...arguments);
-      y(this, z);
       y(this, I);
+      y(this, z);
       y(this, L);
       y(this, R);
       y(this, M);
@@ -123,21 +123,21 @@ let Ht = (() => {
       y(this, P);
       y(this, D);
       y(this, F);
-      l(this, z, (o(this, h), o(this, X, null))), l(this, I, (o(this, Z), o(this, V, null))), l(this, L, (o(this, ee), o(this, ae, !1))), l(this, R, (o(this, ie), o(this, re, null))), l(this, M, (o(this, ne), o(this, le, !1))), l(this, E, (o(this, ce), o(this, de, !1))), l(this, O, (o(this, ge), o(this, ue, !1))), l(this, P, (o(this, he), o(this, _e, ""))), l(this, D, (o(this, fe), o(this, ve, !1))), l(this, F, (o(this, xe), o(this, $e, !1))), this._now = (o(this, Te), null), this._language = new nt(this);
+      l(this, I, (o(this, h), o(this, X, null))), l(this, z, (o(this, Z), o(this, V, null))), l(this, L, (o(this, ee), o(this, ae, !1))), l(this, R, (o(this, ie), o(this, re, null))), l(this, M, (o(this, ne), o(this, le, !1))), l(this, E, (o(this, ce), o(this, de, !1))), l(this, O, (o(this, ge), o(this, ue, !1))), l(this, P, (o(this, he), o(this, _e, ""))), l(this, D, (o(this, fe), o(this, ve, !1))), l(this, F, (o(this, xe), o(this, $e, !1))), this._now = (o(this, Te), null), this._language = new nt(this);
     }
     /** The trip Prop. */
     get trip() {
-      return f(this, z);
+      return f(this, I);
     }
     set trip(a) {
-      l(this, z, a);
+      l(this, I, a);
     }
     /** The price Prop, which consists of the data for the badge. */
     get price() {
-      return f(this, I);
+      return f(this, z);
     }
     set price(a) {
-      l(this, I, a);
+      l(this, z, a);
     }
     /** This will be forwarded to the sbb-pearl-chain component - if true the position won't be animated. */
     get disableAnimation() {
@@ -213,7 +213,7 @@ let Ht = (() => {
      * Only recommended for testing purposes.
      */
     set now(a) {
-      this._now = ze.getValidDateOrNull(ze.deserialize(a));
+      this._now = Ie.getValidDateOrNull(Ie.deserialize(a));
     }
     get now() {
       return this._now ?? /* @__PURE__ */ new Date();
@@ -224,8 +224,8 @@ let Ht = (() => {
     /** The skeleton render function for the loading state */
     _renderSkeleton() {
       return c`
-      <sbb-card size="l" class="sbb-loading">
-        ${this.loadingPrice ? c`<sbb-card-badge class="sbb-loading__badge"></sbb-card-badge>` : g}
+      <sbb-card class="sbb-loading sbb-card-spacing-4x-xxs">
+        ${this.loadingPrice ? c`<div class="sbb-loading__badge" slot="badge"></div>` : g}
         <div class="sbb-loading__wrapper">
           <div class="sbb-loading__row"></div>
           <div class="sbb-loading__row"></div>
@@ -268,7 +268,7 @@ let Ht = (() => {
       };
     }
     _getAccessibilityText(a) {
-      const { summary: e, legs: r, notices: w } = a || {}, { departureWalk: d, arrivalWalk: W, departure: C, arrival: $, product: x, direction: H, occupancy: u, duration: T } = e || {}, { departureTimeAttribute: m, arrivalTimeAttribute: q } = ft(r, d || 0, W || 0, this._language.current, this.a11yFootpath), A = this._getRideLegs(), B = C?.time ? Fe(C.time) : void 0, U = $?.time ? Fe($.time) : void 0, Q = m ? `${m.text} ${m.duration}, ` : "", He = q ? `${q.text} ${q.duration}, ` : "", Qe = B ? `${Ie[this._language.current]}: ${Be(B, "HH:mm")}, ` : "", Ke = () => C?.quayFormatted ? `${C?.quayChanged ? `${De[this._language.current]} ` : ""}${this._getQuayTypeStrings()?.long} ${C?.quayFormatted}, ` : "", Ye = x && x.vehicleMode ? J[x.vehicleMode.toLowerCase()] && `${J[x.vehicleMode.toLowerCase()][this._language.current]}, ` : "", Xe = x?.vehicleSubModeShortName ? `${x.vehicleSubModeShortName} ${x.line || ""}, ` : "", Ze = `${Le[this._language.current]} ${H}, `, j = this._handleHimCus(a), Se = j?.cus?.text ? `${Re[this._language.current]}: ${j?.cus?.text}, ` : "", Ge = j?.him?.text ? `${Re[this._language.current]}: ${j?.him?.text}, ` : "", Ve = this.boarding ? `${this.boarding.text}, ` : "", et = `${this.price?.isDiscount ? Me[this._language.current] : ""} ${this.price?.text && this.price?.price ? (this.price?.text || "") + " " + (this.price?.price || "") + ", " : ""}`, tt = A.length > 2 ? `${A.length - 1} ${ct[this._language.current]}, ` : A.length > 1 ? `${A.length - 1} ${bt[this._language.current]}, ` : "", at = U ? `${dt[this._language.current]}: ${Be(U, "HH:mm")}, ` : "";
+      const { summary: e, legs: r, notices: w } = a || {}, { departureWalk: d, arrivalWalk: W, departure: C, arrival: $, product: x, direction: H, occupancy: u, duration: T } = e || {}, { departureTimeAttribute: m, arrivalTimeAttribute: q } = ft(r, d || 0, W || 0, this._language.current, this.a11yFootpath), A = this._getRideLegs(), B = C?.time ? Fe(C.time) : void 0, U = $?.time ? Fe($.time) : void 0, Q = m ? `${m.text} ${m.duration}, ` : "", He = q ? `${q.text} ${q.duration}, ` : "", Qe = B ? `${ze[this._language.current]}: ${Be(B, "HH:mm")}, ` : "", Ke = () => C?.quayFormatted ? `${C?.quayChanged ? `${De[this._language.current]} ` : ""}${this._getQuayTypeStrings()?.long} ${C?.quayFormatted}, ` : "", Ye = x && x.vehicleMode ? J[x.vehicleMode.toLowerCase()] && `${J[x.vehicleMode.toLowerCase()][this._language.current]}, ` : "", Xe = x?.vehicleSubModeShortName ? `${x.vehicleSubModeShortName} ${x.line || ""}, ` : "", Ze = `${Le[this._language.current]} ${H}, `, j = this._handleHimCus(a), Se = j?.cus?.text ? `${Re[this._language.current]}: ${j?.cus?.text}, ` : "", Ge = j?.him?.text ? `${Re[this._language.current]}: ${j?.him?.text}, ` : "", Ve = this.boarding ? `${this.boarding.text}, ` : "", et = `${this.price?.isDiscount ? Me[this._language.current] : ""} ${this.price?.text && this.price?.price ? (this.price?.text || "") + " " + (this.price?.price || "") + ", " : ""}`, tt = A.length > 2 ? `${A.length - 1} ${ct[this._language.current]}, ` : A.length > 1 ? `${A.length - 1} ${bt[this._language.current]}, ` : "", at = U ? `${dt[this._language.current]}: ${Be(U, "HH:mm")}, ` : "";
       let K = "";
       u && (u.firstClass && u.firstClass !== "UNKNOWN" && (K += `${Ee.first[this._language.current]} ${Oe[u.firstClass.toLowerCase()]?.[this._language.current]}.`), u.secondClass && u.secondClass !== "UNKNOWN" && (K += ` ${Ee.second[this._language.current]} ${Oe[u.secondClass.toLowerCase()]?.[this._language.current]}.`));
       const Ce = w && Y(w).length && Y(w)?.map((k, rt) => rt < 4 && k.text?.template).join(", ") + ", ", it = Ce ? `${gt[this._language.current]}: ${Ce}` : "", st = T && T > 0 ? `${Pe[this._language.current]} ${qe(T, this._language.current).long}, ` : "";
@@ -296,14 +296,14 @@ let Ht = (() => {
         return this._renderSkeleton();
       const { legs: a, id: e, notices: r, summary: w } = this.trip || {}, { product: d, direction: W, departureWalk: C, departure: $, arrival: x, arrivalWalk: H, occupancy: u, duration: T } = w || {}, m = this._handleHimCus(this.trip), q = !!m.cus || !!m.him, A = r && Y(r), B = T ? qe(T, this._language.current) : null;
       return c`
-      <sbb-card size="l" id=${e}>
+      <sbb-card class="sbb-card-spacing-4x-xxs" id=${e}>
         <sbb-card-button
           ?active=${this.active}
           aria-expanded=${this.accessibilityExpanded ? "true" : g}
         >
           ${this.cardActionLabel ? this.cardActionLabel : this._getAccessibilityText(this.trip)}
         </sbb-card-button>
-        ${this.loadingPrice ? c`<sbb-card-badge class="sbb-loading__badge"></sbb-card-badge>` : g}
+        ${this.loadingPrice ? c`<div class="sbb-loading__badge" slot="badge"></div>` : g}
         ${this.price && !this.loadingPrice ? c`<sbb-card-badge color=${this.price.isDiscount ? "charcoal" : "white"}>
               ${this.price.isDiscount ? c`<span aria-hidden="true">
                     %<span class="sbb-screen-reader-only"
@@ -346,7 +346,7 @@ let Ht = (() => {
                   class=${$?.quayChanged ? "sbb-timetable__row-quay--changed" : g}
                 >
                   <span class="sbb-screen-reader-only">
-                    ${`${Ie[this._language.current]} ${$?.quayChanged ? De[this._language.current] : ""}`}
+                    ${`${ze[this._language.current]} ${$?.quayChanged ? De[this._language.current] : ""}`}
                     &nbsp;
                   </span>
                   ${this._renderQuayType()} ${$?.quayFormatted}
@@ -387,7 +387,7 @@ let Ht = (() => {
       </sbb-card>
     `;
     }
-  }, z = new WeakMap(), I = new WeakMap(), L = new WeakMap(), R = new WeakMap(), M = new WeakMap(), E = new WeakMap(), O = new WeakMap(), P = new WeakMap(), D = new WeakMap(), F = new WeakMap(), n = b, (() => {
+  }, I = new WeakMap(), z = new WeakMap(), L = new WeakMap(), R = new WeakMap(), M = new WeakMap(), E = new WeakMap(), O = new WeakMap(), P = new WeakMap(), D = new WeakMap(), F = new WeakMap(), n = b, (() => {
     const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(p[Symbol.metadata] ?? null) : void 0;
     S = [v({ type: Object })], G = [v({ type: Object })], te = [N(), v({ attribute: "disable-animation", reflect: !0, type: Boolean })], se = [v({ type: Object })], oe = [N(), v({ attribute: "loading-trip", type: Boolean })], be = [N(), v({ attribute: "a11y-footpath", type: Boolean })], pe = [N(), v({ attribute: "loading-price", type: Boolean })], me = [N(), v({ attribute: "card-action-label" })], ye = [N(), v({ attribute: "accessibility-expanded", type: Boolean })], we = [N(), v({ type: Boolean })], Ae = [v()], _(b, null, S, { kind: "accessor", name: "trip", static: !1, private: !1, access: { has: (e) => "trip" in e, get: (e) => e.trip, set: (e, r) => {
       e.trip = r;

package/timetable-row.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './timetable-row/timetable-row.component.js';
+export * from './timetable-row/timetable-row.component.ts';
 //# sourceMappingURL=timetable-row.d.ts.map