@sbb-esta/lyne-elements-experimental 0.52.0 → 0.52.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/core/datetime.js +6 -12
- package/core/timetable.js +17 -17
- package/development/core/datetime.js +8 -15
- package/development/{format-WI2gcVKN.js → format-BOXfsJCN.js} +7 -13
- package/development/journey-summary/journey-summary.d.ts +2 -2
- package/development/journey-summary.js +3 -4
- package/development/pearl-chain/pearl-chain.d.ts +1 -1
- package/development/pearl-chain-time/pearl-chain-time.d.ts +1 -1
- package/development/pearl-chain-time.js +3 -4
- package/development/pearl-chain-vertical-item.js +2 -3
- package/development/pearl-chain-vertical.js +2 -3
- package/development/pearl-chain.js +3 -5
- package/development/timetable-duration.js +2 -3
- package/development/timetable-row/timetable-row.d.ts +1 -1
- package/development/timetable-row.js +11 -20
- package/{format-CEz7IGRJ.js → format-qHhIvnY8.js} +4 -8
- package/journey-summary/journey-summary.d.ts +2 -2
- package/journey-summary.js +57 -57
- package/package.json +2 -2
- package/pearl-chain/pearl-chain.d.ts +1 -1
- package/pearl-chain-time/pearl-chain-time.d.ts +1 -1
- package/pearl-chain-time.js +29 -29
- package/pearl-chain.js +69 -70
- package/timetable-duration.js +15 -15
- package/timetable-row/timetable-row.d.ts +1 -1
- package/timetable-row.js +192 -198
package/pearl-chain-time.js
CHANGED
|
@@ -1,47 +1,47 @@
|
|
|
1
|
-
import { SbbLanguageController as
|
|
1
|
+
import { SbbLanguageController as d } from "@sbb-esta/lyne-elements/core/controllers.js";
|
|
2
2
|
import { defaultDateAdapter as h } from "@sbb-esta/lyne-elements/core/datetime.js";
|
|
3
|
-
import { i18nDeparture as
|
|
4
|
-
import { css as
|
|
5
|
-
import { property as
|
|
3
|
+
import { i18nDeparture as g, i18nTransferProcedures as u, i18nArrival as v } from "@sbb-esta/lyne-elements/core/i18n.js";
|
|
4
|
+
import { css as y, LitElement as _, html as p, nothing as m } from "lit";
|
|
5
|
+
import { property as s, customElement as x } from "lit/decorators.js";
|
|
6
6
|
import { removeTimezoneFromISOTimeString as c } from "./core/datetime.js";
|
|
7
7
|
import { getDepartureArrivalTimeAttribute as w, isRideLeg as $ } from "./core/timetable.js";
|
|
8
8
|
import "./pearl-chain.js";
|
|
9
|
-
import { f
|
|
10
|
-
const T =
|
|
11
|
-
var z = Object.defineProperty, A = Object.getOwnPropertyDescriptor, i = (r, a, b,
|
|
12
|
-
for (var e =
|
|
13
|
-
(o = r[l]) && (e = (
|
|
14
|
-
return
|
|
9
|
+
import { f } from "./format-qHhIvnY8.js";
|
|
10
|
+
const T = y`*,:before,:after{box-sizing:border-box}:host{--sbb-pearl-chain-time-height: auto;display:block}@media (min-width: 37.5rem){:host{--sbb-pearl-chain-time-height: 1.5625rem}}@media (min-width: 52.5rem){:host{--sbb-pearl-chain-time-height: 1.75rem}}.sbb-pearl-chain__time{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;height:var(--sbb-pearl-chain-time-height)}.sbb-pearl-chain__time-walktime,.sbb-pearl-chain__time-transfer{--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);display:inline-flex;align-items:center}.sbb-pearl-chain__time-walktime--left{transform:translate(-.4375rem);margin-inline-end:calc(var(--sbb-spacing-fixed-2x) - .4375rem)}.sbb-pearl-chain__time-walktime--right{margin-inline-start:calc(var(--sbb-spacing-fixed-2x) - .25rem)}.sbb-pearl-chain__time-walktime-prime-symbol{float:right}.sbb-pearl-chain__time-transfer{gap:var(--sbb-spacing-fixed-1x)}.sbb-pearl-chain__time-transfer--departure{margin-inline-end:var(--sbb-spacing-fixed-2x)}.sbb-pearl-chain__time-transfer--arrival{margin-inline-start:calc(var(--sbb-spacing-fixed-2x) - .25rem)}.sbb-pearl-chain__time-chain{flex:1 1 auto;align-self:center;margin-inline:var(--sbb-spacing-fixed-3x)}.sbb-pearl-chain__time-time{--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);font-weight:700;color:var(--sbb-color-charcoal)}.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}`;
|
|
11
|
+
var z = Object.defineProperty, A = Object.getOwnPropertyDescriptor, i = (r, a, b, n) => {
|
|
12
|
+
for (var e = n > 1 ? void 0 : n ? A(a, b) : a, l = r.length - 1, o; l >= 0; l--)
|
|
13
|
+
(o = r[l]) && (e = (n ? o(a, b, e) : o(e)) || e);
|
|
14
|
+
return n && e && z(a, b, e), e;
|
|
15
15
|
};
|
|
16
|
-
let t = class extends
|
|
16
|
+
let t = class extends _ {
|
|
17
17
|
constructor() {
|
|
18
|
-
super(...arguments), this.
|
|
18
|
+
super(...arguments), this.b = null, this.a = new d(this);
|
|
19
19
|
}
|
|
20
20
|
set now(r) {
|
|
21
|
-
this.
|
|
21
|
+
this.b = h.getValidDateOrNull(h.deserialize(r));
|
|
22
22
|
}
|
|
23
23
|
get now() {
|
|
24
|
-
return this.
|
|
24
|
+
return this.b ?? /* @__PURE__ */ new Date();
|
|
25
25
|
}
|
|
26
26
|
render() {
|
|
27
27
|
var l;
|
|
28
|
-
const r = this.departureTime ? c(this.departureTime) : void 0, a = this.arrivalTime ? c(this.arrivalTime) : void 0, { renderDepartureTimeAttribute: b, renderArrivalTimeAttribute:
|
|
28
|
+
const r = this.departureTime ? c(this.departureTime) : void 0, a = this.arrivalTime ? c(this.arrivalTime) : void 0, { renderDepartureTimeAttribute: b, renderArrivalTimeAttribute: n } = w(
|
|
29
29
|
this.legs,
|
|
30
30
|
this.departureWalk || 0,
|
|
31
31
|
this.arrivalWalk || 0,
|
|
32
|
-
this.
|
|
32
|
+
this.a.current
|
|
33
33
|
), e = (l = this.legs) == null ? void 0 : l.filter((o) => $(o));
|
|
34
34
|
return p`
|
|
35
35
|
<div class="sbb-pearl-chain__time">
|
|
36
36
|
${b()}
|
|
37
37
|
${r ? p`<time class="sbb-pearl-chain__time-time" datetime=${this.departureTime}>
|
|
38
38
|
<span class="sbb-screen-reader-only"
|
|
39
|
-
>${
|
|
39
|
+
>${g[this.a.current]}: </span
|
|
40
40
|
>
|
|
41
|
-
${
|
|
41
|
+
${f(r, "HH:mm")}
|
|
42
42
|
</time>` : m}
|
|
43
43
|
${(e == null ? void 0 : e.length) > 1 ? p`<span class="sbb-screen-reader-only" role="paragraph">
|
|
44
|
-
${(e == null ? void 0 : e.length) - 1} ${u[this.
|
|
44
|
+
${(e == null ? void 0 : e.length) - 1} ${u[this.a.current]}
|
|
45
45
|
</span>` : m}
|
|
46
46
|
<sbb-pearl-chain
|
|
47
47
|
class="sbb-pearl-chain__time-chain"
|
|
@@ -51,36 +51,36 @@ let t = class extends y {
|
|
|
51
51
|
></sbb-pearl-chain>
|
|
52
52
|
${a ? p`<time class="sbb-pearl-chain__time-time" datetime=${this.arrivalTime}>
|
|
53
53
|
<span class="sbb-screen-reader-only"
|
|
54
|
-
>${
|
|
54
|
+
>${v[this.a.current]}: </span
|
|
55
55
|
>
|
|
56
|
-
${
|
|
56
|
+
${f(a, "HH:mm")}
|
|
57
57
|
</time>` : m}
|
|
58
|
-
${
|
|
58
|
+
${n()}
|
|
59
59
|
</div>
|
|
60
60
|
`;
|
|
61
61
|
}
|
|
62
62
|
};
|
|
63
63
|
t.styles = T;
|
|
64
64
|
i([
|
|
65
|
-
|
|
65
|
+
s({ type: Array })
|
|
66
66
|
], t.prototype, "legs", 2);
|
|
67
67
|
i([
|
|
68
|
-
|
|
68
|
+
s({ attribute: "departure-time" })
|
|
69
69
|
], t.prototype, "departureTime", 2);
|
|
70
70
|
i([
|
|
71
|
-
|
|
71
|
+
s({ attribute: "arrival-time" })
|
|
72
72
|
], t.prototype, "arrivalTime", 2);
|
|
73
73
|
i([
|
|
74
|
-
|
|
74
|
+
s({ attribute: "departure-walk", type: Number })
|
|
75
75
|
], t.prototype, "departureWalk", 2);
|
|
76
76
|
i([
|
|
77
|
-
|
|
77
|
+
s({ attribute: "arrival-walk", type: Number })
|
|
78
78
|
], t.prototype, "arrivalWalk", 2);
|
|
79
79
|
i([
|
|
80
|
-
|
|
80
|
+
s({ attribute: "disable-animation", type: Boolean })
|
|
81
81
|
], t.prototype, "disableAnimation", 2);
|
|
82
82
|
i([
|
|
83
|
-
|
|
83
|
+
s()
|
|
84
84
|
], t.prototype, "now", 1);
|
|
85
85
|
t = i([
|
|
86
86
|
x("sbb-pearl-chain-time")
|
package/pearl-chain.js
CHANGED
|
@@ -1,130 +1,129 @@
|
|
|
1
1
|
import { defaultDateAdapter as O } from "@sbb-esta/lyne-elements/core/datetime.js";
|
|
2
|
-
import { css as q, LitElement as K, html as
|
|
2
|
+
import { css as q, LitElement as K, html as _, nothing as H } from "lit";
|
|
3
3
|
import { property as y, customElement as Q } from "lit/decorators.js";
|
|
4
4
|
import { styleMap as J } from "lit/directives/style-map.js";
|
|
5
5
|
import { removeTimezoneFromISOTimeString as n } from "./core/datetime.js";
|
|
6
6
|
import { isRideLeg as U } from "./core/timetable.js";
|
|
7
7
|
import { d as m } from "./differenceInMinutes-CDpgJIgL.js";
|
|
8
8
|
import { t as f } from "./constants-ClrwyPF-.js";
|
|
9
|
-
function W(
|
|
10
|
-
const
|
|
11
|
-
return
|
|
9
|
+
function W(a, r) {
|
|
10
|
+
const e = f(a), l = f(r);
|
|
11
|
+
return e.getTime() > l.getTime();
|
|
12
12
|
}
|
|
13
|
-
function
|
|
14
|
-
const
|
|
15
|
-
return +
|
|
13
|
+
function I(a, r) {
|
|
14
|
+
const e = f(a), l = f(r);
|
|
15
|
+
return +e < +l;
|
|
16
16
|
}
|
|
17
17
|
const Z = q`*,:before,:after{box-sizing:border-box}:host{--sbb-pearl-chain-height: var(--sbb-border-width-2x);--sbb-pearl-chain-spacing-small: var(--sbb-spacing-fixed-1x);--sbb-pearl-chain-color: var(--sbb-pearl-chain-bullet-color);--sbb-pearl-chain-color-disruption: var(--sbb-pearl-chain-bullet-color-disruption);--sbb-pearl-chain-color-past: var(--sbb-pearl-chain-bullet-color-past);--sbb-pearl-chain-leg-width: 100%;--sbb-pearl-chain-bullet-size-start-end: .625rem;--sbb-pearl-chain-bullet-size-stop: .5rem;--sbb-pearl-chain-bullet-color: var(--sbb-color-charcoal);--sbb-pearl-chain-bullet-color-past: var(--sbb-color-metal);--sbb-pearl-chain-bullet-color-irrelevant: var(--sbb-color-metal);--sbb-pearl-chain-bullet-color-disruption: var(--sbb-color-red);--sbb-pearl-chain-bullet-border-width: var(--sbb-border-width-2x);--sbb-pearl-chain-bullet-animation-duration: 1.92s;--sbb-pearl-chain-bullet-animation-easing: ease-out;--sbb-pearl-chain-bullet-crossed-width: .88375rem;--sbb-pearl-chain-bullet-crossed-height: .21875rem;--sbb-pearl-chain-bullet-crossed-border-width: .09375rem;display:block}.sbb-pearl-chain{position:relative;display:flex;justify-content:space-between;flex-wrap:nowrap;color:var(--sbb-pearl-chain-color);width:100%;padding-block:calc((var(--sbb-pearl-chain-bullet-size-start-end) - var(--sbb-pearl-chain-height)) / 2);padding-inline-end:var(--sbb-pearl-chain-bullet-size-start-end)}.sbb-pearl-chain__bullet{background:var(--sbb-pearl-chain-bullet-color);color:var(--sbb-pearl-chain-bullet-color);border-color:var(--sbb-pearl-chain-bullet-color);border-radius:100%;min-height:var(--sbb-pearl-chain-bullet-size-start-end);min-width:var(--sbb-pearl-chain-bullet-size-start-end);height:var(--sbb-pearl-chain-bullet-size-start-end);width:var(--sbb-pearl-chain-bullet-size-start-end);content:"";position:absolute;background-color:currentcolor;inset-block-start:0;z-index:3}@media (forced-colors: active){.sbb-pearl-chain__bullet{--sbb-pearl-chain-bullet-color: CanvasText}}.sbb-pearl-chain__bullet:first-of-type{inset-inline-start:0}.sbb-pearl-chain__bullet:last-of-type{inset-inline-end:0}.sbb-pearl-chain__leg{flex-shrink:0;flex-grow:0;position:relative;height:var(--sbb-pearl-chain-height);border-inline-end:var(--sbb-pearl-chain-spacing-small) solid Canvas;background-color:currentcolor;width:var(--sbb-pearl-chain-leg-width);display:flex;align-items:center}@media (forced-colors: active){.sbb-pearl-chain__leg{background-color:CanvasText}.sbb-pearl-chain--past .sbb-pearl-chain__leg{background-color:GrayText}}.sbb-pearl-chain__leg:last-of-type{border:none}.sbb-pearl-chain__stop{background:var(--sbb-pearl-chain-bullet-color);color:var(--sbb-pearl-chain-bullet-color);border-color:var(--sbb-pearl-chain-bullet-color);border-radius:100%;min-height:var(--sbb-pearl-chain-bullet-size-stop);min-width:var(--sbb-pearl-chain-bullet-size-stop);height:var(--sbb-pearl-chain-bullet-size-stop);width:var(--sbb-pearl-chain-bullet-size-stop);border:var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;background:Canvas;position:relative;z-index:2}@media (forced-colors: active){.sbb-pearl-chain__stop{--sbb-pearl-chain-bullet-color: CanvasText}}.sbb-pearl-chain__bullet--future{background:var(--sbb-pearl-chain-bullet-color);color:var(--sbb-pearl-chain-bullet-color);border-color:var(--sbb-pearl-chain-bullet-color);border-radius:100%}@media (forced-colors: active){.sbb-pearl-chain__bullet--future{--sbb-pearl-chain-bullet-color: CanvasText}}.sbb-pearl-chain__leg--past,.sbb-pearl-chain--past,.sbb-pearl-chain__leg--past:after,.sbb-pearl-chain__leg--progress:after,.sbb-pearl-chain__leg--progress .sbb-pearl-chain__stop,.sbb-pearl-chain--progress,.sbb-pearl-chain__bullet--past{--sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-past);color:var(--sbb-pearl-chain-color-past)}@media (forced-colors: active){.sbb-pearl-chain__leg--past,.sbb-pearl-chain--past,.sbb-pearl-chain__leg--past:after,.sbb-pearl-chain__leg--progress:after,.sbb-pearl-chain__leg--progress .sbb-pearl-chain__stop,.sbb-pearl-chain--progress,.sbb-pearl-chain__bullet--past{--sbb-pearl-chain-bullet-color: GrayText !important}}@media (forced-colors: active){.sbb-pearl-chain__leg--past,.sbb-pearl-chain--past,.sbb-pearl-chain__leg--past:after,.sbb-pearl-chain__leg--progress:after,.sbb-pearl-chain__leg--progress .sbb-pearl-chain__stop,.sbb-pearl-chain--progress,.sbb-pearl-chain__bullet--past{background-color:GrayText!important}}.sbb-pearl-chain__bullet--progress{--sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-past);background:var(--sbb-pearl-chain-bullet-color)}@media (forced-colors: active){.sbb-pearl-chain__bullet--progress{--sbb-pearl-chain-bullet-color: GrayText !important}}.sbb-pearl-chain__bullet--departure-disruption,.sbb-pearl-chain--arrival-disruption,.sbb-pearl-chain--departure-disruption,.sbb-pearl-chain__leg--disruption{--sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-disruption);color:var(--sbb-pearl-chain-color-disruption)}@media (forced-colors: active){.sbb-pearl-chain__bullet--departure-disruption,.sbb-pearl-chain--arrival-disruption,.sbb-pearl-chain--departure-disruption,.sbb-pearl-chain__leg--disruption{--sbb-pearl-chain-bullet-color: Highlight}}@media (forced-colors: active){.sbb-pearl-chain__bullet--departure-disruption,.sbb-pearl-chain--arrival-disruption,.sbb-pearl-chain--departure-disruption,.sbb-pearl-chain__leg--disruption{color:Highlight;background:Highlight}}.sbb-pearl-chain__leg--disruption .sbb-pearl-chain__stop{--sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-disruption)}@media (forced-colors: active){.sbb-pearl-chain__leg--disruption .sbb-pearl-chain__stop{--sbb-pearl-chain-bullet-color: Highlight}}.sbb-pearl-chain__leg--past .sbb-pearl-chain__stop{--sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-past)}@media (forced-colors: active){.sbb-pearl-chain__leg--past .sbb-pearl-chain__stop{--sbb-pearl-chain-bullet-color: GrayText !important}}.sbb-pearl-chain__leg--disruption:after{background-color:unset;background-image:linear-gradient(to right,currentcolor 0%,currentcolor 50%,Canvas 50%);background-repeat:repeat-x;background-size:calc(2 * var(--sbb-pearl-chain-spacing-small)) var(--sbb-pearl-chain-height);inset-inline-end:var(--sbb-pearl-chain-height)}@media (forced-colors: active){.sbb-pearl-chain__leg--disruption:after{background:unset;border-block-start:.0625rem dashed Highlight;transform:translateY(.0625rem)}}.sbb-pearl-chain__leg--skipped{color:var(--sbb-pearl-chain-color-disruption)}.sbb-pearl-chain__leg--skipped:after{background-color:unset;background-image:linear-gradient(to right,currentcolor 0%,currentcolor 50%,Canvas 50%);background-repeat:repeat-x;background-size:calc(2 * var(--sbb-pearl-chain-spacing-small)) var(--sbb-pearl-chain-height);inset-inline-end:var(--sbb-pearl-chain-height)}@media (forced-colors: active){.sbb-pearl-chain__leg--skipped:after{background:unset;border-block-start:.0625rem dashed Highlight;transform:translateY(.0625rem)}}.sbb-pearl-chain__stop--departure-skipped{min-height:var(--sbb-pearl-chain-bullet-size-stop);min-width:var(--sbb-pearl-chain-bullet-size-stop);height:var(--sbb-pearl-chain-bullet-size-stop);width:var(--sbb-pearl-chain-bullet-size-stop);border:var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;background:Canvas}.sbb-pearl-chain__stop--departure-skipped:before{content:"";position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%) rotate(45deg);border-block-start:var(--sbb-pearl-chain-bullet-crossed-border-width) solid canvas;background:var(--sbb-pearl-chain-bullet-color-disruption);height:var(--sbb-pearl-chain-bullet-crossed-height);width:var(--sbb-pearl-chain-bullet-crossed-width)}@media (forced-colors: active){.sbb-pearl-chain__stop--departure-skipped:before{background:Highlight}}.sbb-pearl-chain--arrival-skipped,.sbb-pearl-chain--departure-skipped{min-height:var(--sbb-pearl-chain-bullet-size-start-end);min-width:var(--sbb-pearl-chain-bullet-size-start-end);height:var(--sbb-pearl-chain-bullet-size-start-end);width:var(--sbb-pearl-chain-bullet-size-start-end);border:var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;background:Canvas}.sbb-pearl-chain--arrival-skipped:before,.sbb-pearl-chain--departure-skipped:before{content:"";position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%) rotate(45deg);border-block-start:var(--sbb-pearl-chain-bullet-crossed-border-width) solid canvas;background:var(--sbb-pearl-chain-bullet-color-disruption);height:var(--sbb-pearl-chain-bullet-crossed-height);width:var(--sbb-pearl-chain-bullet-crossed-width)}@media (forced-colors: active){.sbb-pearl-chain--arrival-skipped:before,.sbb-pearl-chain--departure-skipped:before{background:Highlight}}.sbb-pearl-chain__leg:after{content:"";position:absolute;inset-block:0;inset-inline-start:0;background-color:currentcolor;border-radius:var(--sbb-pearl-chain-height);z-index:1}@media (forced-colors: active){.sbb-pearl-chain__leg:after{background-color:CanvasText}.sbb-pearl-chain--past .sbb-pearl-chain__leg:after{background-color:GrayText}}.sbb-pearl-chain__leg:last-of-type:after{inset-inline-end:calc(-1 * var(--sbb-pearl-chain-height))}.sbb-pearl-chain__leg--progress:after{background-color:var(--sbb-pearl-chain-color-past);width:var(--sbb-pearl-chain-leg-status)}.sbb-pearl-chain__position{background:var(--sbb-pearl-chain-bullet-color);color:var(--sbb-pearl-chain-bullet-color);border-color:var(--sbb-pearl-chain-bullet-color);border-radius:100%;min-height:var(--sbb-pearl-chain-bullet-size-start-end);min-width:var(--sbb-pearl-chain-bullet-size-start-end);height:var(--sbb-pearl-chain-bullet-size-start-end);width:var(--sbb-pearl-chain-bullet-size-start-end);--sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-disruption);animation:pearl-chain-bullet-position-pulse var(--sbb-pearl-chain-bullet-animation-duration) var(--sbb-pearl-chain-bullet-animation-easing) infinite;position:absolute;inset-block-start:-200%;z-index:4;inset-inline-start:var(--sbb-pearl-chain-status-position)}@media (forced-colors: active){.sbb-pearl-chain__position{--sbb-pearl-chain-bullet-color: CanvasText}}@media (forced-colors: active){.sbb-pearl-chain__position{--sbb-pearl-chain-bullet-color: Highlight}}@keyframes pearl-chain-bullet-position-pulse{0%{box-shadow:0 0 0 0 var(--sbb-pearl-chain-bullet-color-disruption)}25%{box-shadow:0 0 0 0 var(--sbb-pearl-chain-bullet-color-disruption)}50%{box-shadow:0 0 0 .1875rem var(--sbb-color-red-alpha-20)}to{box-shadow:0 0 0 0 var(--sbb-pearl-chain-bullet-color-disruption)}}.sbb-pearl-chain__position--no-animation{animation:unset}.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}`;
|
|
18
|
-
var L = Object.defineProperty, rr = Object.getOwnPropertyDescriptor, k = (
|
|
19
|
-
for (var
|
|
20
|
-
(c =
|
|
21
|
-
return
|
|
18
|
+
var L = Object.defineProperty, rr = Object.getOwnPropertyDescriptor, k = (a, r, e, l) => {
|
|
19
|
+
for (var s = l > 1 ? void 0 : l ? rr(r, e) : r, o = a.length - 1, c; o >= 0; o--)
|
|
20
|
+
(c = a[o]) && (s = (l ? c(r, e, s) : c(s)) || s);
|
|
21
|
+
return l && s && L(r, e, s), s;
|
|
22
22
|
};
|
|
23
23
|
let d = class extends K {
|
|
24
24
|
constructor() {
|
|
25
|
-
super(...arguments), this.
|
|
25
|
+
super(...arguments), this.b = null;
|
|
26
26
|
}
|
|
27
|
-
set now(
|
|
28
|
-
this.
|
|
27
|
+
set now(a) {
|
|
28
|
+
this.b = O.getValidDateOrNull(O.deserialize(a));
|
|
29
29
|
}
|
|
30
30
|
get now() {
|
|
31
|
-
return this.
|
|
31
|
+
return this.b;
|
|
32
32
|
}
|
|
33
|
-
|
|
34
|
-
return
|
|
33
|
+
d(a) {
|
|
34
|
+
return a == null ? void 0 : a.reduce((r, e) => {
|
|
35
35
|
var o, c;
|
|
36
|
-
const
|
|
37
|
-
return
|
|
38
|
-
n(
|
|
39
|
-
n(
|
|
36
|
+
const l = n((o = e.arrival) == null ? void 0 : o.time), s = n((c = e.departure) == null ? void 0 : c.time);
|
|
37
|
+
return l && s ? r + m(
|
|
38
|
+
n(e.arrival.time),
|
|
39
|
+
n(e.departure.time)
|
|
40
40
|
) : r;
|
|
41
41
|
}, 0);
|
|
42
42
|
}
|
|
43
|
-
|
|
44
|
-
return
|
|
45
|
-
var
|
|
46
|
-
return (
|
|
43
|
+
e(a) {
|
|
44
|
+
return a == null ? void 0 : a.every((r) => {
|
|
45
|
+
var e, l;
|
|
46
|
+
return (l = (e = r == null ? void 0 : r.serviceJourney) == null ? void 0 : e.serviceAlteration) == null ? void 0 : l.cancelled;
|
|
47
47
|
});
|
|
48
48
|
}
|
|
49
|
-
|
|
50
|
-
var
|
|
51
|
-
const
|
|
52
|
-
if (
|
|
49
|
+
f(a, r) {
|
|
50
|
+
var s, o;
|
|
51
|
+
const e = n((s = r.arrival) == null ? void 0 : s.time), l = n((o = r.departure) == null ? void 0 : o.time);
|
|
52
|
+
if (e && l) {
|
|
53
53
|
const c = m(
|
|
54
54
|
n(r.arrival.time),
|
|
55
55
|
n(r.departure.time)
|
|
56
|
-
),
|
|
57
|
-
return
|
|
56
|
+
), v = this.d(a);
|
|
57
|
+
return v === 0 ? 100 : c / v * 100;
|
|
58
58
|
}
|
|
59
59
|
return 0;
|
|
60
60
|
}
|
|
61
|
-
|
|
62
|
-
if (!r || !
|
|
61
|
+
c(a, r, e) {
|
|
62
|
+
if (!r || !e)
|
|
63
63
|
return 0;
|
|
64
|
-
const
|
|
65
|
-
return
|
|
64
|
+
const l = m(e, r), s = m(a, r);
|
|
65
|
+
return l && s / l * 100;
|
|
66
66
|
}
|
|
67
|
-
|
|
68
|
-
return
|
|
67
|
+
a(a, r, e) {
|
|
68
|
+
return e && r && I(e, a) && W(r, a) ? "progress" : r && I(r, a) ? "past" : "future";
|
|
69
69
|
}
|
|
70
|
-
|
|
71
|
-
const
|
|
72
|
-
if (
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
"
|
|
76
|
-
...t >= 50 ? { transform: "translateX(-100%)" } : {}
|
|
70
|
+
g(a, r, e) {
|
|
71
|
+
const l = this.c(a, r, e);
|
|
72
|
+
if (l < 0 && l > 100) return;
|
|
73
|
+
const s = () => ({
|
|
74
|
+
"--sbb-pearl-chain-status-position": `${l}%`,
|
|
75
|
+
...l >= 50 ? { transform: "translateX(-100%)" } : {}
|
|
77
76
|
}), o = this.disableAnimation ? "sbb-pearl-chain__position--no-animation" : "";
|
|
78
|
-
return
|
|
79
|
-
style=${J(
|
|
77
|
+
return _`<span
|
|
78
|
+
style=${J(s())}
|
|
80
79
|
class="sbb-pearl-chain__position ${o}"
|
|
81
80
|
></span>`;
|
|
82
81
|
}
|
|
83
82
|
render() {
|
|
84
|
-
var z, x,
|
|
85
|
-
const
|
|
86
|
-
var
|
|
87
|
-
return r && ((b = (
|
|
83
|
+
var z, x, T, C;
|
|
84
|
+
const a = this.now ?? /* @__PURE__ */ new Date(), r = (z = this.legs) == null ? void 0 : z.filter((t) => U(t)), e = (r == null ? void 0 : r.length) && n((T = (x = r[0]) == null ? void 0 : x.departure) == null ? void 0 : T.time), l = (r == null ? void 0 : r.length) && n((C = r[(r == null ? void 0 : r.length) - 1].arrival) == null ? void 0 : C.time), s = (() => {
|
|
85
|
+
var t, b, i, p;
|
|
86
|
+
return r && ((b = (t = r[0]) == null ? void 0 : t.serviceJourney) != null && b.stopPoints) && ((p = (i = r[0]) == null ? void 0 : i.serviceJourney) == null ? void 0 : p.stopPoints[0].stopStatus) === "NOT_SERVICED" ? "sbb-pearl-chain--departure-skipped" : "";
|
|
88
87
|
})(), o = (() => {
|
|
89
|
-
var
|
|
90
|
-
const
|
|
88
|
+
var i;
|
|
89
|
+
const t = r && r[r.length - 1], b = t && ((i = t.serviceJourney) == null ? void 0 : i.stopPoints);
|
|
91
90
|
return b && b[b.length - 1].stopStatus === "NOT_SERVICED" ? "sbb-pearl-chain--arrival-skipped" : "";
|
|
92
91
|
})(), c = (() => {
|
|
93
|
-
var
|
|
94
|
-
return r && ((
|
|
95
|
-
})(),
|
|
96
|
-
var
|
|
97
|
-
return r && ((
|
|
98
|
-
})(),
|
|
99
|
-
return this.
|
|
92
|
+
var t, b, i;
|
|
93
|
+
return r && ((i = (b = (t = r[0]) == null ? void 0 : t.serviceJourney) == null ? void 0 : b.serviceAlteration) != null && i.cancelled) ? "sbb-pearl-chain--departure-disruption" : "";
|
|
94
|
+
})(), v = (() => {
|
|
95
|
+
var t, b, i;
|
|
96
|
+
return r && ((i = (b = (t = r[r.length - 1]) == null ? void 0 : t.serviceJourney) == null ? void 0 : b.serviceAlteration) != null && i.cancelled) ? "sbb-pearl-chain--arrival-disruption" : "";
|
|
97
|
+
})(), G = r && e && l && !c ? "sbb-pearl-chain__bullet--" + this.a(a, l, e) : "", R = r && l && !v ? "sbb-pearl-chain__bullet--" + this.a(a, l) : "";
|
|
98
|
+
return this.e(r) ? _`
|
|
100
99
|
<div class="sbb-pearl-chain">
|
|
101
100
|
<span class="sbb-pearl-chain__bullet sbb-pearl-chain--departure-disruption"></span>
|
|
102
101
|
<div class="sbb-pearl-chain__leg sbb-pearl-chain__leg--disruption"></div>
|
|
103
102
|
<span class="sbb-pearl-chain__bullet sbb-pearl-chain--departure-disruption"></span>
|
|
104
103
|
</div>
|
|
105
|
-
` :
|
|
104
|
+
` : _`
|
|
106
105
|
<div class="sbb-pearl-chain">
|
|
107
106
|
<span
|
|
108
|
-
class="sbb-pearl-chain__bullet ${
|
|
107
|
+
class="sbb-pearl-chain__bullet ${G} ${s} ${c}"
|
|
109
108
|
></span>
|
|
110
|
-
${r == null ? void 0 : r.map((
|
|
111
|
-
var D,
|
|
112
|
-
const { stopPoints:
|
|
113
|
-
return
|
|
109
|
+
${r == null ? void 0 : r.map((t, b) => {
|
|
110
|
+
var $, N, D, E, P, A;
|
|
111
|
+
const { stopPoints: i, serviceAlteration: p } = (t == null ? void 0 : t.serviceJourney) || {}, V = this.f(r, t), h = n(($ = t.departure) == null ? void 0 : $.time), u = n((N = t.arrival) == null ? void 0 : N.time), B = i && ((D = i[i.length - 1]) == null ? void 0 : D.stopStatus) === "NOT_SERVICED", j = i && ((E = i[i.length - 1]) == null ? void 0 : E.stopStatus) === "PLANNED", S = i && ((P = i[0]) == null ? void 0 : P.stopStatus) === "NOT_SERVICED", w = b > 0 && r[b - 1].serviceJourney.stopPoints, M = w && ((A = w[w.length - 1]) == null ? void 0 : A.stopStatus) === "NOT_SERVICED", Y = B || S && j ? "sbb-pearl-chain__leg--skipped" : "", F = S || M ? "sbb-pearl-chain__stop--departure-skipped" : "", g = p != null && p.cancelled ? "sbb-pearl-chain__leg--disruption" : "", X = !g && this.a(a, h, u) && "sbb-pearl-chain__leg--" + this.a(a, u, h);
|
|
112
|
+
return _` <div
|
|
114
113
|
class="sbb-pearl-chain__leg ${X} ${g} ${Y}"
|
|
115
114
|
style=${J({
|
|
116
115
|
"--sbb-pearl-chain-leg-width": `${V}%`,
|
|
117
|
-
...this.
|
|
118
|
-
"--sbb-pearl-chain-leg-status": `${this.
|
|
116
|
+
...this.a(a, u, h) === "progress" && !g ? {
|
|
117
|
+
"--sbb-pearl-chain-leg-status": `${this.c(a, h, u)}%`
|
|
119
118
|
} : {}
|
|
120
119
|
})}
|
|
121
120
|
>
|
|
122
|
-
${b > 0 && b < r.length ?
|
|
123
|
-
${this.
|
|
121
|
+
${b > 0 && b < r.length ? _`<span class="sbb-pearl-chain__stop ${F}"></span>` : H}
|
|
122
|
+
${this.a(a, u, h) === "progress" && !g ? this.g(a, h, u) : H}
|
|
124
123
|
</div>`;
|
|
125
124
|
})}
|
|
126
125
|
<span
|
|
127
|
-
class="sbb-pearl-chain__bullet ${
|
|
126
|
+
class="sbb-pearl-chain__bullet ${R} ${o} ${v}"
|
|
128
127
|
></span>
|
|
129
128
|
</div>
|
|
130
129
|
`;
|
package/timetable-duration.js
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import { SbbLanguageController as
|
|
1
|
+
import { SbbLanguageController as b } from "@sbb-esta/lyne-elements/core/controllers.js";
|
|
2
2
|
import { i18nDurationHour as l, i18nDurationMinute as u } from "@sbb-esta/lyne-elements/core/i18n.js";
|
|
3
|
-
import { css as
|
|
4
|
-
import { property as
|
|
5
|
-
const d =
|
|
6
|
-
var
|
|
7
|
-
for (var t = r > 1 ? void 0 : r ?
|
|
8
|
-
(o = e[
|
|
9
|
-
return r && t &&
|
|
3
|
+
import { css as h, LitElement as c, html as m } from "lit";
|
|
4
|
+
import { property as f, customElement as g } from "lit/decorators.js";
|
|
5
|
+
const d = h`*,:before,:after{box-sizing:border-box}:host{display:inline-block}.duration{--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);margin:0;white-space:nowrap}.duration__text--visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
|
|
6
|
+
var x = Object.defineProperty, v = Object.getOwnPropertyDescriptor, p = (e, i, s, r) => {
|
|
7
|
+
for (var t = r > 1 ? void 0 : r ? v(i, s) : i, n = e.length - 1, o; n >= 0; n--)
|
|
8
|
+
(o = e[n]) && (t = (r ? o(i, s, t) : o(t)) || t);
|
|
9
|
+
return r && t && x(i, s, t), t;
|
|
10
10
|
};
|
|
11
|
-
let a = class extends
|
|
11
|
+
let a = class extends c {
|
|
12
12
|
constructor() {
|
|
13
|
-
super(...arguments), this.
|
|
13
|
+
super(...arguments), this.a = new b(this);
|
|
14
14
|
}
|
|
15
15
|
render() {
|
|
16
|
-
const e = JSON.parse(this.config),
|
|
17
|
-
let r = "", t = "",
|
|
18
|
-
return e.hours === 1 && (
|
|
16
|
+
const e = JSON.parse(this.config), i = l.multiple.short[this.a.current], s = u.multiple.short[this.a.current];
|
|
17
|
+
let r = "", t = "", n = l.multiple.long[this.a.current], o = u.multiple.long[this.a.current];
|
|
18
|
+
return e.hours === 1 && (n = l.single.long[this.a.current]), e.minutes === 1 && (o = u.single.long[this.a.current]), e.hours !== 0 && (r += `${e.hours} ${i}`, t += `${e.hours} ${n}`), r += ` ${e.minutes} ${s}`, t += ` ${e.minutes} ${o}.`, m`
|
|
19
19
|
<p aria-label=${t} class="duration" role="text">
|
|
20
20
|
<span aria-hidden="true" class="duration__text--visual" role="presentation">
|
|
21
21
|
${r}
|
|
@@ -27,10 +27,10 @@ let a = class extends h {
|
|
|
27
27
|
};
|
|
28
28
|
a.styles = d;
|
|
29
29
|
p([
|
|
30
|
-
|
|
30
|
+
f()
|
|
31
31
|
], a.prototype, "config", 2);
|
|
32
32
|
a = p([
|
|
33
|
-
|
|
33
|
+
g("sbb-timetable-duration")
|
|
34
34
|
], a);
|
|
35
35
|
export {
|
|
36
36
|
a as SbbTimetableDurationElement
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { SbbDateLike } from '
|
|
1
|
+
import { SbbDateLike } from '@sbb-esta/lyne-elements/core/interfaces.js';
|
|
2
2
|
import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
|
|
3
3
|
import { ITripItem, Notice, PtSituation } from '../core/timetable.js';
|
|
4
4
|
|