@sbb-esta/lyne-elements-experimental 4.8.0 → 4.9.0
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/README.md +2 -2
- package/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.component.js +1 -1
- package/autocomplete-grid/autocomplete-grid-cell.js +1 -1
- package/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.component.js +1 -1
- package/autocomplete-grid/autocomplete-grid-option.js +1 -1
- package/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.component.js +1 -1
- package/autocomplete-grid/autocomplete-grid-row.js +1 -1
- package/{autocomplete-grid-cell.component-Dak9wlBr.js → autocomplete-grid-cell.component-DnCfVJ2l.js} +1 -1
- package/autocomplete-grid-option.component-BlMPM6eh.js +37 -0
- package/autocomplete-grid-row.component-Bo2ZbXVX.js +27 -0
- package/autocomplete-grid.js +3 -3
- package/autocomplete-grid.pure.js +3 -3
- package/custom-elements.json +70 -2
- package/development/seat-reservation/seat-reservation/seat-reservation-base-element.d.ts +3 -0
- package/development/seat-reservation/seat-reservation/seat-reservation-base-element.d.ts.map +1 -1
- package/development/seat-reservation/seat-reservation/seat-reservation-base-element.js +30 -2
- package/development/seat-reservation/seat-reservation/seat-reservation.component.d.ts.map +1 -1
- package/development/seat-reservation/seat-reservation/seat-reservation.component.js +1 -1
- package/development/seat-reservation/seat-reservation-graphic/seat-reservation-assets.js +1 -1
- package/development/seat-reservation/seat-reservation-graphic/seat-reservation-graphic.component.js +1 -1
- package/development/seat-reservation/seat-reservation-graphic.js +1 -1
- package/development/seat-reservation/seat-reservation.js +1 -1
- package/development/seat-reservation-graphic.component-D0xEXmP9.js +203 -0
- package/development/{seat-reservation.component-MOv5kHDC.js → seat-reservation.component-BS53sZR3.js} +8 -5
- package/development/seat-reservation.js +2 -2
- package/development/seat-reservation.pure.js +2 -2
- package/journey-summary/journey-summary.component.js +1 -1
- package/{journey-summary.component-Cq_4kaOp.js → journey-summary.component-DcpXXucp.js} +1 -1
- package/journey-summary.js +1 -1
- package/journey-summary.pure.js +1 -1
- package/package.json +2 -2
- package/pearl-chain/pearl-chain.component.js +1 -1
- package/pearl-chain-time/pearl-chain-time.component.js +1 -1
- package/{pearl-chain-time.component-DGDW5S1c.js → pearl-chain-time.component-v6zRg_3j.js} +1 -1
- package/pearl-chain-time.js +1 -1
- package/pearl-chain-time.pure.js +1 -1
- package/pearl-chain-vertical/pearl-chain-vertical.component.js +1 -1
- package/pearl-chain-vertical-item/pearl-chain-vertical-item.component.js +1 -1
- package/pearl-chain-vertical-item.component-M2KRK6Xv.js +108 -0
- package/pearl-chain-vertical-item.js +1 -1
- package/pearl-chain-vertical-item.pure.js +1 -1
- package/{pearl-chain-vertical.component-CXIDT5RD.js → pearl-chain-vertical.component-BvJwcGpS.js} +1 -1
- package/pearl-chain-vertical.js +1 -1
- package/pearl-chain-vertical.pure.js +1 -1
- package/pearl-chain.component-B-XTTo6h.js +194 -0
- package/pearl-chain.js +1 -1
- package/pearl-chain.pure.js +1 -1
- package/seat-reservation/seat-reservation/seat-reservation-base-element.js +24 -4
- package/seat-reservation/seat-reservation/seat-reservation.component.js +1 -1
- package/seat-reservation/seat-reservation-area/seat-reservation-area.component.js +1 -1
- package/seat-reservation/seat-reservation-area.js +1 -1
- package/seat-reservation/seat-reservation-graphic/seat-reservation-assets.js +1 -1
- package/seat-reservation/seat-reservation-graphic/seat-reservation-graphic.component.js +1 -1
- package/seat-reservation/seat-reservation-graphic.js +1 -1
- package/seat-reservation/seat-reservation-navigation-coach/seat-reservation-navigation-coach.component.js +1 -1
- package/seat-reservation/seat-reservation-navigation-coach.js +1 -1
- package/seat-reservation/seat-reservation-navigation-services/seat-reservation-navigation-services.component.js +1 -1
- package/seat-reservation/seat-reservation-navigation-services.js +1 -1
- package/seat-reservation/seat-reservation-place-control/seat-reservation-place-control.component.js +1 -1
- package/seat-reservation/seat-reservation-place-control.js +1 -1
- package/seat-reservation/seat-reservation-scoped/seat-reservation-scoped.component.js +1 -1
- package/seat-reservation/seat-reservation-scoped.js +1 -1
- package/seat-reservation/seat-reservation.js +1 -1
- package/{seat-reservation-area.component-COD6CXhP.js → seat-reservation-area.component-CY56r75x.js} +1 -1
- package/seat-reservation-graphic.component-DCMFf9uY.js +102 -0
- package/seat-reservation-navigation-coach.component-CXUv1pZM.js +333 -0
- package/{seat-reservation-navigation-services.component-QL0UnilZ.js → seat-reservation-navigation-services.component-ViyU_adt.js} +1 -1
- package/seat-reservation-place-control.component-Dj5Tm0Oa.js +322 -0
- package/{seat-reservation-scoped.component-CY04BT_4.js → seat-reservation-scoped.component-CuACI8ST.js} +1 -1
- package/{seat-reservation.component-zrQHTRl3.js → seat-reservation.component-Dl6bnC7-.js} +8 -5
- package/seat-reservation.js +7 -7
- package/seat-reservation.pure.js +7 -7
- package/timetable-duration/timetable-duration.component.js +1 -1
- package/{timetable-duration.component-DaYoJUGS.js → timetable-duration.component-Puonwsnr.js} +1 -1
- package/timetable-duration.js +1 -1
- package/timetable-duration.pure.js +1 -1
- package/timetable-row/timetable-row.component.js +1 -1
- package/{timetable-row.component-BDMAEsbR.js → timetable-row.component-DMCZaOPM.js} +1 -1
- package/timetable-row.js +1 -1
- package/timetable-row.pure.js +1 -1
- package/autocomplete-grid-option.component-DNRFHOwc.js +0 -37
- package/autocomplete-grid-row.component-DBHZQ0GQ.js +0 -27
- package/development/seat-reservation-graphic.component-lZXqHWIz.js +0 -193
- package/pearl-chain-vertical-item.component-G22bWhLU.js +0 -108
- package/pearl-chain.component-DmjkVIva.js +0 -194
- package/seat-reservation-graphic.component-BNfU5tQM.js +0 -102
- package/seat-reservation-navigation-coach.component-Bh9ILq60.js +0 -333
- package/seat-reservation-place-control.component-BfnZUyHv.js +0 -322
|
@@ -1,193 +0,0 @@
|
|
|
1
|
-
import { __esDecorate, __runInitializers } from "tslib";
|
|
2
|
-
import { SbbElement } from "@sbb-esta/lyne-elements/core/base-elements.js";
|
|
3
|
-
import { SbbLanguageController } from "@sbb-esta/lyne-elements/core/controllers.js";
|
|
4
|
-
import { forceType } from "@sbb-esta/lyne-elements/core/decorators.js";
|
|
5
|
-
import { boxSizingStyles } from "@sbb-esta/lyne-elements/core/styles.js";
|
|
6
|
-
import "@sbb-esta/lyne-elements/icon.js";
|
|
7
|
-
import { css, html, isServer } from "lit";
|
|
8
|
-
import { property } from "lit/decorators.js";
|
|
9
|
-
import { mapIconToSvg } from "./seat-reservation/common/mapper.js";
|
|
10
|
-
import { classMap } from "lit/directives/class-map.js";
|
|
11
|
-
import { getI18nSeatReservation } from "./seat-reservation/common/translations.js";
|
|
12
|
-
//#region src/elements-experimental/seat-reservation/seat-reservation-graphic/seat-reservation-graphic.scss?lit&inline
|
|
13
|
-
var seat_reservation_graphic_default = css`:host {
|
|
14
|
-
--sbb-seat-reservation-graphic-width: 16;
|
|
15
|
-
--sbb-seat-reservation-graphic-height: 16;
|
|
16
|
-
--sbb-seat-reservation-graphic-rotation: 0;
|
|
17
|
-
--sbb-seat-reservation-graphic-inverse-rotation: 0;
|
|
18
|
-
--sbb-seat-reservation-graphic-position: initial;
|
|
19
|
-
--sbb-seat-reservation-graphic-left: 0;
|
|
20
|
-
--sbb-seat-reservation-graphic-top: 0;
|
|
21
|
-
--sbb-icon-svg-width: calc(
|
|
22
|
-
var(--sbb-seat-reservation-graphic-width) *
|
|
23
|
-
var(--sbb-seat-reservation-one-px-rem, 0.0625rem)
|
|
24
|
-
);
|
|
25
|
-
--sbb-icon-svg-height: calc(
|
|
26
|
-
var(--sbb-seat-reservation-graphic-height) *
|
|
27
|
-
var(--sbb-seat-reservation-one-px-rem, 0.0625rem)
|
|
28
|
-
);
|
|
29
|
-
display: flex;
|
|
30
|
-
justify-content: center;
|
|
31
|
-
align-items: center;
|
|
32
|
-
width: calc(var(--sbb-seat-reservation-graphic-width) * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));
|
|
33
|
-
height: calc(var(--sbb-seat-reservation-graphic-height) * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));
|
|
34
|
-
position: var(--sbb-seat-reservation-graphic-position);
|
|
35
|
-
inset-inline-start: calc(var(--sbb-seat-reservation-graphic-left) * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));
|
|
36
|
-
inset-block-start: calc(var(--sbb-seat-reservation-graphic-top) * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
:host(.auto-width) {
|
|
40
|
-
--sbb-icon-svg-width: auto;
|
|
41
|
-
max-width: calc(var(--sbb-seat-reservation-graphic-max-width) * var(--sbb-seat-reservation-one-px-rem, 0.0625rem));
|
|
42
|
-
width: auto;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
:host(.sbb-seat-reservation-graphic--cursor-pointer) {
|
|
46
|
-
cursor: var(--sbb-cursor-pointer);
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
.sbb-sr-icon,
|
|
50
|
-
.sbb-sr-graphic {
|
|
51
|
-
width: inherit;
|
|
52
|
-
height: inherit;
|
|
53
|
-
transform-origin: center;
|
|
54
|
-
rotate: calc(var(--sbb-seat-reservation-graphic-rotation) * 1deg);
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
.sbb-sr-icon {
|
|
58
|
-
color: var(--sbb-color-granite);
|
|
59
|
-
color: light-dark(var(--sbb-color-granite), var(--sbb-color-graphite));
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
.sbb-sr-graphic svg {
|
|
63
|
-
width: 100%;
|
|
64
|
-
height: 100%;
|
|
65
|
-
}
|
|
66
|
-
.sbb-sr-graphic svg .fix-rotation-inverse {
|
|
67
|
-
transform-origin: center;
|
|
68
|
-
rotate: calc(var(--sbb-seat-reservation-graphic-inverse-rotation) * 1deg);
|
|
69
|
-
}
|
|
70
|
-
@media (forced-colors: active) {
|
|
71
|
-
.sbb-sr-graphic svg:not(.color-immutable) [fill]:not([fill=none]) {
|
|
72
|
-
fill: currentcolor;
|
|
73
|
-
}
|
|
74
|
-
.sbb-sr-graphic .no-bg {
|
|
75
|
-
fill: transparent;
|
|
76
|
-
}
|
|
77
|
-
}`;
|
|
78
|
-
//#endregion
|
|
79
|
-
//#region src/elements-experimental/seat-reservation/seat-reservation-graphic/seat-reservation-graphic.component.ts
|
|
80
|
-
/**
|
|
81
|
-
* Output one of the SVG graphics based on its code.
|
|
82
|
-
*/
|
|
83
|
-
var SbbSeatReservationGraphicElement = (() => {
|
|
84
|
-
let _classSuper = SbbElement;
|
|
85
|
-
let _name_decorators;
|
|
86
|
-
let _name_initializers = [];
|
|
87
|
-
let _name_extraInitializers = [];
|
|
88
|
-
let _stretch_decorators;
|
|
89
|
-
let _stretch_initializers = [];
|
|
90
|
-
let _stretch_extraInitializers = [];
|
|
91
|
-
return class SbbSeatReservationGraphicElement extends _classSuper {
|
|
92
|
-
constructor() {
|
|
93
|
-
super(...arguments);
|
|
94
|
-
this.#name_accessor_storage = __runInitializers(this, _name_initializers, "");
|
|
95
|
-
this.#stretch_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _stretch_initializers, false));
|
|
96
|
-
this._language = (__runInitializers(this, _stretch_extraInitializers), new SbbLanguageController(this));
|
|
97
|
-
}
|
|
98
|
-
static {
|
|
99
|
-
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
100
|
-
_name_decorators = [forceType(), property({ attribute: "name" })];
|
|
101
|
-
_stretch_decorators = [forceType(), property({
|
|
102
|
-
attribute: "stretch",
|
|
103
|
-
type: Boolean
|
|
104
|
-
})];
|
|
105
|
-
__esDecorate(this, null, _name_decorators, {
|
|
106
|
-
kind: "accessor",
|
|
107
|
-
name: "name",
|
|
108
|
-
static: false,
|
|
109
|
-
private: false,
|
|
110
|
-
access: {
|
|
111
|
-
has: (obj) => "name" in obj,
|
|
112
|
-
get: (obj) => obj.name,
|
|
113
|
-
set: (obj, value) => {
|
|
114
|
-
obj.name = value;
|
|
115
|
-
}
|
|
116
|
-
},
|
|
117
|
-
metadata: _metadata
|
|
118
|
-
}, _name_initializers, _name_extraInitializers);
|
|
119
|
-
__esDecorate(this, null, _stretch_decorators, {
|
|
120
|
-
kind: "accessor",
|
|
121
|
-
name: "stretch",
|
|
122
|
-
static: false,
|
|
123
|
-
private: false,
|
|
124
|
-
access: {
|
|
125
|
-
has: (obj) => "stretch" in obj,
|
|
126
|
-
get: (obj) => obj.stretch,
|
|
127
|
-
set: (obj, value) => {
|
|
128
|
-
obj.stretch = value;
|
|
129
|
-
}
|
|
130
|
-
},
|
|
131
|
-
metadata: _metadata
|
|
132
|
-
}, _stretch_initializers, _stretch_extraInitializers);
|
|
133
|
-
if (_metadata) Object.defineProperty(this, Symbol.metadata, {
|
|
134
|
-
enumerable: true,
|
|
135
|
-
configurable: true,
|
|
136
|
-
writable: true,
|
|
137
|
-
value: _metadata
|
|
138
|
-
});
|
|
139
|
-
}
|
|
140
|
-
static {
|
|
141
|
-
this.elementName = "sbb-seat-reservation-graphic";
|
|
142
|
-
}
|
|
143
|
-
static {
|
|
144
|
-
this.styles = [boxSizingStyles, seat_reservation_graphic_default];
|
|
145
|
-
}
|
|
146
|
-
#name_accessor_storage;
|
|
147
|
-
/** Name of the SVG graphic to be displayed. */
|
|
148
|
-
get name() {
|
|
149
|
-
return this.#name_accessor_storage;
|
|
150
|
-
}
|
|
151
|
-
set name(value) {
|
|
152
|
-
this.#name_accessor_storage = value;
|
|
153
|
-
}
|
|
154
|
-
#stretch_accessor_storage;
|
|
155
|
-
/** if true, scale the graphic content of the given element non-uniformly if necessary */
|
|
156
|
-
get stretch() {
|
|
157
|
-
return this.#stretch_accessor_storage;
|
|
158
|
-
}
|
|
159
|
-
set stretch(value) {
|
|
160
|
-
this.#stretch_accessor_storage = value;
|
|
161
|
-
}
|
|
162
|
-
render() {
|
|
163
|
-
const svgObj = mapIconToSvg[this.name];
|
|
164
|
-
if (!svgObj?.svg && !svgObj?.svgName) return null;
|
|
165
|
-
return html`<span
|
|
166
|
-
class="${classMap({
|
|
167
|
-
"sbb-sr-icon": !!svgObj.svgName,
|
|
168
|
-
"sbb-sr-graphic": !!svgObj.svg
|
|
169
|
-
})}"
|
|
170
|
-
>
|
|
171
|
-
${svgObj.svgName ? html` <sbb-icon
|
|
172
|
-
name="${svgObj.svgName || ""}"
|
|
173
|
-
aria-hidden="false"
|
|
174
|
-
aria-label="${getI18nSeatReservation(svgObj.svgName, this._language.current)}"
|
|
175
|
-
></sbb-icon>` : html`${this._getSvgElement(svgObj.svg)}`}
|
|
176
|
-
</span>`;
|
|
177
|
-
}
|
|
178
|
-
_getSvgElement(svg) {
|
|
179
|
-
if (!isServer) {
|
|
180
|
-
const parser = new DOMParser();
|
|
181
|
-
const svgString = svg || "<svg></svg>";
|
|
182
|
-
const svgElm = parser.parseFromString(svgString, "image/svg+xml").firstElementChild;
|
|
183
|
-
if (this.stretch && svgElm?.nodeName.toLowerCase() === "svg") svgElm.setAttribute("preserveAspectRatio", "none");
|
|
184
|
-
return svgElm;
|
|
185
|
-
}
|
|
186
|
-
return null;
|
|
187
|
-
}
|
|
188
|
-
};
|
|
189
|
-
})();
|
|
190
|
-
//#endregion
|
|
191
|
-
export { SbbSeatReservationGraphicElement as t };
|
|
192
|
-
|
|
193
|
-
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VhdC1yZXNlcnZhdGlvbi1ncmFwaGljLmNvbXBvbmVudC1sWlhxSFdJei5qcyIsIm5hbWVzIjpbXSwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvZWxlbWVudHMtZXhwZXJpbWVudGFsL3NlYXQtcmVzZXJ2YXRpb24vc2VhdC1yZXNlcnZhdGlvbi1ncmFwaGljL3NlYXQtcmVzZXJ2YXRpb24tZ3JhcGhpYy5zY3NzP2xpdCZpbmxpbmUiLCIuLi8uLi8uLi9zcmMvZWxlbWVudHMtZXhwZXJpbWVudGFsL3NlYXQtcmVzZXJ2YXRpb24vc2VhdC1yZXNlcnZhdGlvbi1ncmFwaGljL3NlYXQtcmVzZXJ2YXRpb24tZ3JhcGhpYy5jb21wb25lbnQudHMiXSwic291cmNlc0NvbnRlbnQiOlsiQHVzZSAnQHNiYi1lc3RhL2x5bmUtZWxlbWVudHMvY29yZS9zdHlsZXMnIGFzIHNiYjtcblxuOmhvc3Qge1xuICAtLXNiYi1zZWF0LXJlc2VydmF0aW9uLWdyYXBoaWMtd2lkdGg6IDE2O1xuICAtLXNiYi1zZWF0LXJlc2VydmF0aW9uLWdyYXBoaWMtaGVpZ2h0OiAxNjtcbiAgLS1zYmItc2VhdC1yZXNlcnZhdGlvbi1ncmFwaGljLXJvdGF0aW9uOiAwO1xuICAtLXNiYi1zZWF0LXJlc2VydmF0aW9uLWdyYXBoaWMtaW52ZXJzZS1yb3RhdGlvbjogMDtcbiAgLS1zYmItc2VhdC1yZXNlcnZhdGlvbi1ncmFwaGljLXBvc2l0aW9uOiBpbml0aWFsO1xuICAtLXNiYi1zZWF0LXJlc2VydmF0aW9uLWdyYXBoaWMtbGVmdDogMDtcbiAgLS1zYmItc2VhdC1yZXNlcnZhdGlvbi1ncmFwaGljLXRvcDogMDtcbiAgLS1zYmItaWNvbi1zdmctd2lkdGg6IGNhbGMoXG4gICAgdmFyKC0tc2JiLXNlYXQtcmVzZXJ2YXRpb24tZ3JhcGhpYy13aWR0aCkgKlxuICAgICAgdmFyKC0tc2JiLXNlYXQtcmVzZXJ2YXRpb24tb25lLXB4LXJlbSwgI3tzYmIucHgtdG8tcmVtLWJ1aWxkKDEpfSlcbiAgKTtcbiAgLS1zYmItaWNvbi1zdmctaGVpZ2h0OiBjYWxjKFxuICAgIHZhcigtLXNiYi1zZWF0LXJlc2VydmF0aW9uLWdyYXBoaWMtaGVpZ2h0KSAqXG4gICAgICB2YXIoLS1zYmItc2VhdC1yZXNlcnZhdGlvbi1vbmUtcHgtcmVtLCAje3NiYi5weC10by1yZW0tYnVpbGQoMSl9KVxuICApO1xuXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICB3aWR0aDogY2FsYyhcbiAgICB2YXIoLS1zYmItc2VhdC1yZXNlcnZhdGlvbi1ncmFwaGljLXdpZHRoKSAqXG4gICAgICB2YXIoLS1zYmItc2VhdC1yZXNlcnZhdGlvbi1vbmUtcHgtcmVtLCAje3NiYi5weC10by1yZW0tYnVpbGQoMSl9KVxuICApO1xuICBoZWlnaHQ6IGNhbGMoXG4gICAgdmFyKC0tc2JiLXNlYXQtcmVzZXJ2YXRpb24tZ3JhcGhpYy1oZWlnaHQpICpcbiAgICAgIHZhcigtLXNiYi1zZWF0LXJlc2VydmF0aW9uLW9uZS1weC1yZW0sICN7c2JiLnB4LXRvLXJlbS1idWlsZCgxKX0pXG4gICk7XG4gIHBvc2l0aW9uOiB2YXIoLS1zYmItc2VhdC1yZXNlcnZhdGlvbi1ncmFwaGljLXBvc2l0aW9uKTtcbiAgaW5zZXQtaW5saW5lLXN0YXJ0OiBjYWxjKFxuICAgIHZhcigtLXNiYi1zZWF0LXJlc2VydmF0aW9uLWdyYXBoaWMtbGVmdCkgKlxuICAgICAgdmFyKC0tc2JiLXNlYXQtcmVzZXJ2YXRpb24tb25lLXB4LXJlbSwgI3tzYmIucHgtdG8tcmVtLWJ1aWxkKDEpfSlcbiAgKTtcbiAgaW5zZXQtYmxvY2stc3RhcnQ6IGNhbGMoXG4gICAgdmFyKC0tc2JiLXNlYXQtcmVzZXJ2YXRpb24tZ3JhcGhpYy10b3ApICpcbiAgICAgIHZhcigtLXNiYi1zZWF0LXJlc2VydmF0aW9uLW9uZS1weC1yZW0sICN7c2JiLnB4LXRvLXJlbS1idWlsZCgxKX0pXG4gICk7XG59XG5cbi8vIGF1dG8td2lkdGggc2V0dGluZ3MgZm9yIGdyYXBoaWNzXG46aG9zdCguYXV0by13aWR0aCkge1xuICAtLXNiYi1pY29uLXN2Zy13aWR0aDogYXV0bztcblxuICBtYXgtd2lkdGg6IGNhbGMoXG4gICAgdmFyKC0tc2JiLXNlYXQtcmVzZXJ2YXRpb24tZ3JhcGhpYy1tYXgtd2lkdGgpICpcbiAgICAgIHZhcigtLXNiYi1zZWF0LXJlc2VydmF0aW9uLW9uZS1weC1yZW0sICN7c2JiLnB4LXRvLXJlbS1idWlsZCgxKX0pXG4gICk7XG4gIHdpZHRoOiBhdXRvO1xufVxuXG4vLyBob3ZlciBzdGF0ZSB3aXRoIHBvaW50ZXIgY3Vyc29yIGZvciBzZXJ2aWNlIGljb25zIGFuZCBwb3BvdmVyXG46aG9zdCguc2JiLXNlYXQtcmVzZXJ2YXRpb24tZ3JhcGhpYy0tY3Vyc29yLXBvaW50ZXIpIHtcbiAgY3Vyc29yOiB2YXIoLS1zYmItY3Vyc29yLXBvaW50ZXIpO1xufVxuXG4uc2JiLXNyLWljb24sXG4uc2JiLXNyLWdyYXBoaWMge1xuICB3aWR0aDogaW5oZXJpdDtcbiAgaGVpZ2h0OiBpbmhlcml0O1xuICB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXI7XG4gIHJvdGF0ZTogY2FsYyh2YXIoLS1zYmItc2VhdC1yZXNlcnZhdGlvbi1ncmFwaGljLXJvdGF0aW9uKSAqIDFkZWcpO1xufVxuXG4uc2JiLXNyLWljb24ge1xuICAvLyBvdmVycmlkZSBjb2xvciBkaXJlY3RseSBzZXQgaW4gdGhlIFNWRyBmaWxlIGNvbWluZyBmcm9tIENETlxuICBjb2xvcjogbGlnaHQtZGFyayh2YXIoLS1zYmItY29sb3ItZ3Jhbml0ZSksIHZhcigtLXNiYi1jb2xvci1ncmFwaGl0ZSkpO1xufVxuXG4uc2JiLXNyLWdyYXBoaWMge1xuICBzdmcge1xuICAgIHdpZHRoOiBjbGFtcCgxMDAlLCAxMDAlLCAxMDAlKTtcbiAgICBoZWlnaHQ6IGNsYW1wKDEwMCUsIDEwMCUsIDEwMCUpO1xuXG4gICAgLmZpeC1yb3RhdGlvbi1pbnZlcnNlIHtcbiAgICAgIHRyYW5zZm9ybS1vcmlnaW46IGNlbnRlcjtcbiAgICAgIHJvdGF0ZTogY2FsYyh2YXIoLS1zYmItc2VhdC1yZXNlcnZhdGlvbi1ncmFwaGljLWludmVyc2Utcm90YXRpb24pICogMWRlZyk7XG4gICAgfVxuICB9XG5cbiAgQGluY2x1ZGUgc2JiLmlmLWZvcmNlZC1jb2xvcnMge1xuICAgIHN2Zzpub3QoLmNvbG9yLWltbXV0YWJsZSkge1xuICAgICAgW2ZpbGxdOm5vdChbZmlsbD0nbm9uZSddKSB7XG4gICAgICAgIGZpbGw6IGN1cnJlbnRjb2xvcjtcbiAgICAgIH1cbiAgICB9XG5cbiAgICAubm8tYmcge1xuICAgICAgZmlsbDogdHJhbnNwYXJlbnQ7XG4gICAgfVxuICB9XG59XG4iLCJpbXBvcnQgeyBTYmJFbGVtZW50IH0gZnJvbSAnQHNiYi1lc3RhL2x5bmUtZWxlbWVudHMvY29yZS9iYXNlLWVsZW1lbnRzLmpzJztcbmltcG9ydCB7IFNiYkxhbmd1YWdlQ29udHJvbGxlciB9IGZyb20gJ0BzYmItZXN0YS9seW5lLWVsZW1lbnRzL2NvcmUvY29udHJvbGxlcnMuanMnO1xuaW1wb3J0IHsgZm9yY2VUeXBlIH0gZnJvbSAnQHNiYi1lc3RhL2x5bmUtZWxlbWVudHMvY29yZS9kZWNvcmF0b3JzLmpzJztcbmltcG9ydCB7IGJveFNpemluZ1N0eWxlcyB9IGZyb20gJ0BzYmItZXN0YS9seW5lLWVsZW1lbnRzL2NvcmUvc3R5bGVzLmpzJztcbmltcG9ydCB7IHR5cGUgQ1NTUmVzdWx0R3JvdXAsIGlzU2VydmVyLCB0eXBlIFRlbXBsYXRlUmVzdWx0IH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGh0bWwgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgcHJvcGVydHkgfSBmcm9tICdsaXQvZGVjb3JhdG9ycy5qcyc7XG5pbXBvcnQgeyBjbGFzc01hcCB9IGZyb20gJ2xpdC9kaXJlY3RpdmVzL2NsYXNzLW1hcC5qcyc7XG5cbmltcG9ydCB7IG1hcEljb25Ub1N2ZyB9IGZyb20gJy4uL2NvbW1vbi9tYXBwZXIudHMnO1xuaW1wb3J0IHsgZ2V0STE4blNlYXRSZXNlcnZhdGlvbiB9IGZyb20gJy4uL2NvbW1vbi90cmFuc2xhdGlvbnMudHMnO1xuXG5pbXBvcnQgc3R5bGUgZnJvbSAnLi9zZWF0LXJlc2VydmF0aW9uLWdyYXBoaWMuc2Nzcz9saXQmaW5saW5lJztcblxuaW1wb3J0ICdAc2JiLWVzdGEvbHluZS1lbGVtZW50cy9pY29uLmpzJztcblxuLyoqXG4gKiBPdXRwdXQgb25lIG9mIHRoZSBTVkcgZ3JhcGhpY3MgYmFzZWQgb24gaXRzIGNvZGUuXG4gKi9cbmV4cG9ydCBjbGFzcyBTYmJTZWF0UmVzZXJ2YXRpb25HcmFwaGljRWxlbWVudCBleHRlbmRzIFNiYkVsZW1lbnQge1xuICBwdWJsaWMgc3RhdGljIG92ZXJyaWRlIHJlYWRvbmx5IGVsZW1lbnROYW1lOiBzdHJpbmcgPSAnc2JiLXNlYXQtcmVzZXJ2YXRpb24tZ3JhcGhpYyc7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgc3R5bGVzOiBDU1NSZXN1bHRHcm91cCA9IFtib3hTaXppbmdTdHlsZXMsIHN0eWxlXTtcblxuICAvKiogTmFtZSBvZiB0aGUgU1ZHIGdyYXBoaWMgdG8gYmUgZGlzcGxheWVkLiAqL1xuICBAZm9yY2VUeXBlKClcbiAgQHByb3BlcnR5KHsgYXR0cmlidXRlOiAnbmFtZScgfSlcbiAgcHVibGljIGFjY2Vzc29yIG5hbWU6IHN0cmluZyA9ICcnO1xuXG4gIC8qKiBpZiB0cnVlLCBzY2FsZSB0aGUgZ3JhcGhpYyBjb250ZW50IG9mIHRoZSBnaXZlbiBlbGVtZW50IG5vbi11bmlmb3JtbHkgaWYgbmVjZXNzYXJ5ICovXG4gIEBmb3JjZVR5cGUoKVxuICBAcHJvcGVydHkoeyBhdHRyaWJ1dGU6ICdzdHJldGNoJywgdHlwZTogQm9vbGVhbiB9KVxuICBwdWJsaWMgYWNjZXNzb3Igc3RyZXRjaDogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIHByaXZhdGUgX2xhbmd1YWdlID0gbmV3IFNiYkxhbmd1YWdlQ29udHJvbGxlcih0aGlzKTtcblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgcmVuZGVyKCk6IFRlbXBsYXRlUmVzdWx0IHwgbnVsbCB7XG4gICAgY29uc3Qgc3ZnT2JqID0gbWFwSWNvblRvU3ZnW3RoaXMubmFtZV07XG5cbiAgICBpZiAoIXN2Z09iaj8uc3ZnICYmICFzdmdPYmo/LnN2Z05hbWUpIHtcbiAgICAgIHJldHVybiBudWxsO1xuICAgIH1cblxuICAgIHJldHVybiBodG1sYDxzcGFuXG4gICAgICBjbGFzcz1cIiR7Y2xhc3NNYXAoe1xuICAgICAgICAnc2JiLXNyLWljb24nOiAhIXN2Z09iai5zdmdOYW1lLFxuICAgICAgICAnc2JiLXNyLWdyYXBoaWMnOiAhIXN2Z09iai5zdmcsXG4gICAgICB9KX1cIlxuICAgID5cbiAgICAgICR7c3ZnT2JqLnN2Z05hbWVcbiAgICAgICAgPyBodG1sYCA8c2JiLWljb25cbiAgICAgICAgICAgIG5hbWU9XCIke3N2Z09iai5zdmdOYW1lIHx8ICcnfVwiXG4gICAgICAgICAgICBhcmlhLWhpZGRlbj1cImZhbHNlXCJcbiAgICAgICAgICAgIGFyaWEtbGFiZWw9XCIke2dldEkxOG5TZWF0UmVzZXJ2YXRpb24oc3ZnT2JqLnN2Z05hbWUsIHRoaXMuX2xhbmd1YWdlLmN1cnJlbnQpfVwiXG4gICAgICAgICAgPjwvc2JiLWljb24+YFxuICAgICAgICA6IGh0bWxgJHt0aGlzLl9nZXRTdmdFbGVtZW50KHN2Z09iai5zdmchKX1gfVxuICAgIDwvc3Bhbj5gO1xuICB9XG5cbiAgcHJpdmF0ZSBfZ2V0U3ZnRWxlbWVudChzdmc6IHN0cmluZyk6IEVsZW1lbnQgfCBudWxsIHtcbiAgICBpZiAoIWlzU2VydmVyKSB7XG4gICAgICBjb25zdCBwYXJzZXIgPSBuZXcgRE9NUGFyc2VyKCk7XG4gICAgICBjb25zdCBzdmdTdHJpbmcgPSBzdmcgfHwgJzxzdmc+PC9zdmc+JztcbiAgICAgIGNvbnN0IHN2Z0VsbSA9IHBhcnNlci5wYXJzZUZyb21TdHJpbmcoc3ZnU3RyaW5nLCAnaW1hZ2Uvc3ZnK3htbCcpLmZpcnN0RWxlbWVudENoaWxkO1xuICAgICAgaWYgKHRoaXMuc3RyZXRjaCAmJiBzdmdFbG0/Lm5vZGVOYW1lLnRvTG93ZXJDYXNlKCkgPT09ICdzdmcnKSB7XG4gICAgICAgIHN2Z0VsbS5zZXRBdHRyaWJ1dGUoJ3ByZXNlcnZlQXNwZWN0UmF0aW8nLCAnbm9uZScpO1xuICAgICAgfVxuICAgICAgcmV0dXJuIHN2Z0VsbTtcbiAgICB9XG5cbiAgICByZXR1cm4gbnVsbDtcbiAgfVxufVxuXG5kZWNsYXJlIGdsb2JhbCB7XG4gIGludGVyZmFjZSBIVE1MRWxlbWVudFRhZ05hbWVNYXAge1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbmFtaW5nLWNvbnZlbnRpb25cbiAgICAnc2JiLXNlYXQtcmVzZXJ2YXRpb24tZ3JhcGhpYyc6IFNiYlNlYXRSZXNlcnZhdGlvbkdyYXBoaWNFbGVtZW50O1xuICB9XG59XG4iXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7SUNtQmEsMENBQWdDO21CQUFTOzs7Ozs7O2NBQXpDLHlDQUF5QyxZQUFVOzs7QUFPOUMsU0FBQSx3QkFBQSxrQkFBQSxNQUFBLG9CQUFlLEdBQUU7QUFLakIsU0FBQSw0QkFBQSxrQkFBQSxNQUFBLHdCQUFBLEVBQUEsa0JBQUEsTUFBQSx1QkFBbUIsTUFBSztBQUVoQyxRQUFBLGFBQVMsa0JBQUEsTUFBQSwyQkFBQSxFQUFHLElBQUksc0JBQXNCLEtBQUs7Ozs7dUJBVGxELFdBQVcsRUFDWCxTQUFTLEVBQUUsV0FBVyxRQUFRLENBQUMsQ0FBQTswQkFJL0IsV0FBVyxFQUNYLFNBQVM7SUFBRSxXQUFXO0lBQVcsTUFBTTtJQUFTLENBQUMsQ0FBQTtBQUpsRCxnQkFBQSxNQUFBLE1BQUEsa0JBQUE7SUFBQSxNQUFBO0lBQUEsTUFBQTtJQUFBLFFBQUE7SUFBQSxTQUFBO0lBQUEsUUFBQTtLQUFBLE1BQUEsUUFBQSxVQUFBO0tBQUEsTUFBQSxRQUFBLElBQWdCO0tBQUksTUFBQSxLQUFBLFVBQUE7QUFBQSxVQUFKLE9BQUk7O0tBQUE7SUFBQSxVQUFBO0lBQUEsRUFBQSxvQkFBQSx3QkFBQTtBQUtwQixnQkFBQSxNQUFBLE1BQUEscUJBQUE7SUFBQSxNQUFBO0lBQUEsTUFBQTtJQUFBLFFBQUE7SUFBQSxTQUFBO0lBQUEsUUFBQTtLQUFBLE1BQUEsUUFBQSxhQUFBO0tBQUEsTUFBQSxRQUFBLElBQWdCO0tBQU8sTUFBQSxLQUFBLFVBQUE7QUFBQSxVQUFQLFVBQU87O0tBQUE7SUFBQSxVQUFBO0lBQUEsRUFBQSx1QkFBQSwyQkFBQTs7Ozs7Ozs7O0FBWFMsUUFBQSxjQUFzQjs7O0FBQy9CLFFBQUEsU0FBeUIsQ0FBQyxpQkFBaUIsaUNBQU07O0VBS3hFOztFQUFBLElBQWdCLE9BQUk7QUFBQSxVQUFBLE1BQUE7O0VBQXBCLElBQWdCLEtBQUksT0FBQTtBQUFBLFNBQUEsd0JBQUE7O0VBS3BCOztFQUFBLElBQWdCLFVBQU87QUFBQSxVQUFBLE1BQUE7O0VBQXZCLElBQWdCLFFBQU8sT0FBQTtBQUFBLFNBQUEsMkJBQUE7O0VBSUosU0FBTTtHQUN2QixNQUFNLFNBQVMsYUFBYSxLQUFLO0FBRWpDLE9BQUksQ0FBQyxRQUFRLE9BQU8sQ0FBQyxRQUFRLFFBQzNCLFFBQU87QUFHVCxVQUFPLElBQUk7ZUFDQSxTQUFTO0lBQ2hCLGVBQWUsQ0FBQyxDQUFDLE9BQU87SUFDeEIsa0JBQWtCLENBQUMsQ0FBQyxPQUFPO0lBQzVCLENBQUMsQ0FBQTs7UUFFQSxPQUFPLFVBQ0wsSUFBSTtvQkFDTSxPQUFPLFdBQVcsR0FBRTs7MEJBRWQsdUJBQXVCLE9BQU8sU0FBUyxLQUFLLFVBQVUsUUFBUSxDQUFBOzBCQUU5RSxJQUFJLEdBQUcsS0FBSyxlQUFlLE9BQU8sSUFBSyxHQUFBOzs7RUFJdkMsZUFBZSxLQUFXO0FBQ2hDLE9BQUksQ0FBQyxVQUFVO0lBQ2IsTUFBTSxTQUFTLElBQUksV0FBVztJQUM5QixNQUFNLFlBQVksT0FBTztJQUN6QixNQUFNLFNBQVMsT0FBTyxnQkFBZ0IsV0FBVyxnQkFBZ0IsQ0FBQztBQUNsRSxRQUFJLEtBQUssV0FBVyxRQUFRLFNBQVMsYUFBYSxLQUFLLE1BQ3JELFFBQU8sYUFBYSx1QkFBdUIsT0FBTztBQUVwRCxXQUFPOztBQUdULFVBQU8ifQ==
|
|
@@ -1,108 +0,0 @@
|
|
|
1
|
-
import { __esDecorate as e, __runInitializers as t } from "tslib";
|
|
2
|
-
import { SbbElement as n } from "@sbb-esta/lyne-elements/core/base-elements.js";
|
|
3
|
-
import { forceType as r } from "@sbb-esta/lyne-elements/core/decorators.js";
|
|
4
|
-
import { boxSizingStyles as i } from "@sbb-esta/lyne-elements/core/styles.js";
|
|
5
|
-
import { css as a, html as o, nothing as s } from "lit";
|
|
6
|
-
import { property as c } from "lit/decorators.js";
|
|
7
|
-
import { styleMap as l } from "lit/directives/style-map.js";
|
|
8
|
-
//#region src/elements-experimental/pearl-chain-vertical-item/pearl-chain-vertical-item.scss?lit&inline
|
|
9
|
-
var u = a`:host{--sbb-pearl-chain-position-color:var(--sbb-color-primary);--sbb-pearl-chain-bullet-size-start-end:.625rem;--sbb-pearl-chain-bullet-size-stop:.5rem;--sbb-pearl-chain-bullet-color:var(--sbb-background-color-3-inverted);--sbb-pearl-chain-bullet-color-past:var(--lightningcss-light,var(--sbb-color-metal))var(--lightningcss-dark,var(--sbb-color-granite));--sbb-pearl-chain-bullet-color-irrelevant:var(--lightningcss-light,var(--sbb-color-metal))var(--lightningcss-dark,var(--sbb-color-granite));--sbb-pearl-chain-bullet-color-disruption:var(--sbb-color-error);--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;--sbb-pearl-chain-vertical-right-item-width:100%;--sbb-pearl-chain-vertical-middle-item-min-width:var(--sbb-pearl-chain-bullet-size-start-end);--sbb-pearl-chain-vertical-item-border-width:var(--sbb-border-width-2x);--sbb-pearl-chain-vertical-item-border-width-thin:var(--sbb-border-width-1x);--sbb-pearl-chain-vertical-item-spacing-small:var(--sbb-spacing-fixed-1x);--sbb-pearl-chain-vertical-item-color-default:var(--sbb-pearl-chain-bullet-color);--sbb-pearl-chain-vertical-item-color-disruption:var(--sbb-pearl-chain-bullet-color-disruption);--sbb-pearl-chain-vertical-item-color-past:var(--sbb-pearl-chain-bullet-color-past);--sbb-pearl-chain-vertical-item-color-walk:var(--sbb-color-sky);--sbb-pearl-chain-vertical-item-inline-start:50%;--sbb-pearl-chain-vertical-item-transform:translateX(-50%);display:table-row;position:relative}slot[name=right],.sbb-pearl-chain-vertical-item__column{vertical-align:top;display:table-cell;position:relative}slot[name=right]{width:var(--sbb-pearl-chain-vertical-right-item-width)}.sbb-pearl-chain-vertical-item__column--middle{min-width:var(--sbb-pearl-chain-vertical-middle-item-min-width,--sbb-pearl-chain-vertical-middle-min-width)}slot[name=left]::slotted(*){margin-block-start:var(--sbb-pearl-chain-vertical-left-item-block-start);padding-inline-end:var(--sbb-pearl-chain-vertical-left-item-inline-end)}slot[name=right]::slotted(*){margin-block-start:var(--sbb-pearl-chain-vertical-right-item-block-start);padding-inline-start:var(--sbb-pearl-chain-vertical-right-item-inline-start)}.sbb-pearl-chain-vertical-item__middle{vertical-align:top;border-spacing:0}.sbb-pearl-chain-vertical-item__line{bottom:0;transform:var(--sbb-pearl-chain-vertical-item-transform);width:var(--sbb-border-width-2x);position:absolute;inset-block-start:calc(var(--sbb-pearl-chain-bullet-size-start-end) / 2);inset-inline-start:var(--sbb-pearl-chain-vertical-item-inline-start)}.sbb-pearl-chain-vertical-item__line:after{content:"";height:var(--sbb-pearl-chain-vertical-item-leg-status);width:var(--sbb-pearl-chain-vertical-item-border-width);background-color:var(--sbb-pearl-chain-vertical-item-color-past);position:absolute;inset-block-start:0;inset-inline-start:0}@media (forced-colors:active){.sbb-pearl-chain-vertical-item__line:after{--sbb-pearl-chain-vertical-item-color-past:GrayText}}.sbb-pearl-chain-vertical-item__line--dotted{background-color:unset;border-color:unset;background-image:linear-gradient(currentColor 0% 50%,canvas 50%);background-repeat:repeat-y;background-size:calc(2 * var(--sbb-pearl-chain-vertical-item-spacing-small)) var(--sbb-pearl-chain-vertical-item-spacing-small)}@media (forced-colors:active){.sbb-pearl-chain-vertical-item__line--dotted{border-inline-start:.0625rem dashed highlight;transform:translateY(.0625rem);background-color:unset!important}}.sbb-pearl-chain-vertical-item__line--thin{width:var(--sbb-pearl-chain-vertical-item-border-width-thin)}.sbb-pearl-chain-vertical-item__line--default{background-color:var(--sbb-pearl-chain-vertical-item-color-default);border-color:var(--sbb-pearl-chain-vertical-item-color-default);color:var(--sbb-pearl-chain-vertical-item-color-default)}@media (forced-colors:active){.sbb-pearl-chain-vertical-item__line--default{--sbb-pearl-chain-vertical-item-color-default:CanvasText}}.sbb-pearl-chain-vertical-item__line--disruption{border-color:var(--sbb-pearl-chain-vertical-item-color-disruption);background-color:var(--sbb-pearl-chain-vertical-item-color-disruption);color:var(--sbb-pearl-chain-vertical-item-color-disruption)}@media (forced-colors:active){.sbb-pearl-chain-vertical-item__line--disruption{--sbb-pearl-chain-vertical-item-color-disruption:Highlight}}.sbb-pearl-chain-vertical-item__line--past{border-color:var(--sbb-pearl-chain-vertical-item-color-past);background-color:var(--sbb-pearl-chain-vertical-item-color-past);color:var(--sbb-pearl-chain-vertical-item-color-past)}@media (forced-colors:active){.sbb-pearl-chain-vertical-item__line--past{--sbb-pearl-chain-vertical-item-color-past:GrayText}}.sbb-pearl-chain-vertical-item__line--walk{border-color:var(--sbb-pearl-chain-vertical-item-color-walk);background-color:var(--sbb-pearl-chain-vertical-item-color-walk);color:var(--sbb-pearl-chain-vertical-item-color-walk)}.sbb-pearl-chain-vertical-item__bullet{transform:var(--sbb-pearl-chain-vertical-item-transform);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%;position:relative;inset-inline-start:var(--sbb-pearl-chain-vertical-item-inline-start)}@media (forced-colors:active){.sbb-pearl-chain-vertical-item__bullet{--sbb-pearl-chain-bullet-color:CanvasText}}.sbb-pearl-chain-vertical-item__bullet--start-end{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-vertical-item__bullet--stop{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-vertical-item__bullet--disruption{--sbb-pearl-chain-bullet-color:var(--sbb-pearl-chain-bullet-color-disruption)}@media (forced-colors:active){.sbb-pearl-chain-vertical-item__bullet--disruption{--sbb-pearl-chain-bullet-color:Highlight}}.sbb-pearl-chain-vertical-item__bullet--irrelevant,.sbb-pearl-chain-vertical-item__bullet--past{--sbb-pearl-chain-bullet-color:var(--sbb-pearl-chain-bullet-color-past)}@media (forced-colors:active){.sbb-pearl-chain-vertical-item__bullet--irrelevant,.sbb-pearl-chain-vertical-item__bullet--past{--sbb-pearl-chain-bullet-color:GrayText!important}}.sbb-pearl-chain-vertical-item__bullet--stop.sbb-pearl-chain-vertical-item__bullet--irrelevant{--sbb-pearl-chain-bullet-border-width:var(--sbb-border-width-1x);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-vertical-item__bullet--start-end.sbb-pearl-chain-vertical-item__bullet--skipped{border:var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;background:canvas}.sbb-pearl-chain-vertical-item__bullet--start-end.sbb-pearl-chain-vertical-item__bullet--skipped:before{content:"";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);position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)rotate(45deg)}@media (forced-colors:active){.sbb-pearl-chain-vertical-item__bullet--start-end.sbb-pearl-chain-vertical-item__bullet--skipped:before{background:highlight}}.sbb-pearl-chain-vertical-item__bullet--stop.sbb-pearl-chain-vertical-item__bullet--skipped{--sbb-pearl-chain-bullet-crossed-width:.706875rem;--sbb-pearl-chain-bullet-crossed-height:.1875rem;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;border:var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;background:canvas}.sbb-pearl-chain-vertical-item__bullet--stop.sbb-pearl-chain-vertical-item__bullet--skipped:before{content:"";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);position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)rotate(45deg)}@media (forced-colors:active){.sbb-pearl-chain-vertical-item__bullet--stop.sbb-pearl-chain-vertical-item__bullet--skipped:before{background:highlight}}.sbb-pearl-chain-vertical-item__bullet--position{inset-block-start:var(--sbb-pearl-chain-vertical-item-position);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);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%;position:absolute;left:50%;transform:translate(-50%)}@media (forced-colors:active){.sbb-pearl-chain-vertical-item__bullet--position{--sbb-pearl-chain-bullet-color:CanvasText}}.sbb-pearl-chain-vertical-item__bullet--position{--sbb-pearl-chain-bullet-color:var(--sbb-pearl-chain-position-color)}@media (forced-colors:active){.sbb-pearl-chain-vertical-item__bullet--position{--sbb-pearl-chain-position-color:Highlight}}@keyframes pearl-chain-bullet-position-pulse{0%{box-shadow:0 0 0 0 var(--sbb-pearl-chain-position-color)}25%{box-shadow:0 0 0 0 var(--sbb-pearl-chain-position-color)}50%{box-shadow:0 0 0 .1875rem color-mix(in srgb, var(--sbb-pearl-chain-position-color) 20%, transparent)}to{box-shadow:0 0 0 0 var(--sbb-pearl-chain-position-color)}}.sbb-pearl-chain-vertical-item__bullet--position{animation:pearl-chain-bullet-position-pulse var(--sbb-pearl-chain-bullet-animation-duration) var(--sbb-pearl-chain-bullet-animation-easing) infinite}:host([disable-animation]) .sbb-pearl-chain-vertical-item__bullet--position{animation:unset!important}`, d = (() => {
|
|
10
|
-
let a = n, d, f = [], p = [], m, h = [], g = [];
|
|
11
|
-
return class extends a {
|
|
12
|
-
static {
|
|
13
|
-
let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
|
|
14
|
-
d = [c({
|
|
15
|
-
attribute: "pearl-chain-vertical-item-attributes",
|
|
16
|
-
type: Object
|
|
17
|
-
})], m = [r(), c({
|
|
18
|
-
attribute: "disable-animation",
|
|
19
|
-
reflect: !0,
|
|
20
|
-
type: Boolean
|
|
21
|
-
})], e(this, null, d, {
|
|
22
|
-
kind: "accessor",
|
|
23
|
-
name: "pearlChainVerticalItemAttributes",
|
|
24
|
-
static: !1,
|
|
25
|
-
private: !1,
|
|
26
|
-
access: {
|
|
27
|
-
has: (e) => "pearlChainVerticalItemAttributes" in e,
|
|
28
|
-
get: (e) => e.pearlChainVerticalItemAttributes,
|
|
29
|
-
set: (e, t) => {
|
|
30
|
-
e.pearlChainVerticalItemAttributes = t;
|
|
31
|
-
}
|
|
32
|
-
},
|
|
33
|
-
metadata: t
|
|
34
|
-
}, f, p), e(this, null, m, {
|
|
35
|
-
kind: "accessor",
|
|
36
|
-
name: "disableAnimation",
|
|
37
|
-
static: !1,
|
|
38
|
-
private: !1,
|
|
39
|
-
access: {
|
|
40
|
-
has: (e) => "disableAnimation" in e,
|
|
41
|
-
get: (e) => e.disableAnimation,
|
|
42
|
-
set: (e, t) => {
|
|
43
|
-
e.disableAnimation = t;
|
|
44
|
-
}
|
|
45
|
-
},
|
|
46
|
-
metadata: t
|
|
47
|
-
}, h, g), t && Object.defineProperty(this, Symbol.metadata, {
|
|
48
|
-
enumerable: !0,
|
|
49
|
-
configurable: !0,
|
|
50
|
-
writable: !0,
|
|
51
|
-
value: t
|
|
52
|
-
});
|
|
53
|
-
}
|
|
54
|
-
static {
|
|
55
|
-
this.elementName = "sbb-pearl-chain-vertical-item";
|
|
56
|
-
}
|
|
57
|
-
static {
|
|
58
|
-
this.styles = [i, u];
|
|
59
|
-
}
|
|
60
|
-
#e = t(this, f, null);
|
|
61
|
-
get pearlChainVerticalItemAttributes() {
|
|
62
|
-
return this.#e;
|
|
63
|
-
}
|
|
64
|
-
set pearlChainVerticalItemAttributes(e) {
|
|
65
|
-
this.#e = e;
|
|
66
|
-
}
|
|
67
|
-
#t = (t(this, p), t(this, h, !1));
|
|
68
|
-
get disableAnimation() {
|
|
69
|
-
return this.#t;
|
|
70
|
-
}
|
|
71
|
-
set disableAnimation(e) {
|
|
72
|
-
this.#t = e;
|
|
73
|
-
}
|
|
74
|
-
render() {
|
|
75
|
-
let { bulletType: e, lineType: t, lineColor: n, hideLine: r, minHeight: i, bulletSize: a, position: c } = this.pearlChainVerticalItemAttributes || {}, u = c && c > 0 && c <= 100 ? "sbb-pearl-chain-vertical-item__bullet--past" : `sbb-pearl-chain-vertical-item__bullet--${e}`;
|
|
76
|
-
return o`
|
|
77
|
-
<div
|
|
78
|
-
class="sbb-pearl-chain-vertical-item__column"
|
|
79
|
-
style=${l({ height: `${i}px` })}
|
|
80
|
-
>
|
|
81
|
-
<slot name="left"></slot>
|
|
82
|
-
</div>
|
|
83
|
-
<div
|
|
84
|
-
aria-hidden="true"
|
|
85
|
-
class="sbb-pearl-chain-vertical-item__column sbb-pearl-chain-vertical-item__column--middle"
|
|
86
|
-
>
|
|
87
|
-
${r ? s : o`<div
|
|
88
|
-
style=${l({ "--sbb-pearl-chain-vertical-item-leg-status": `${c}%` })}
|
|
89
|
-
class="sbb-pearl-chain-vertical-item__line sbb-pearl-chain-vertical-item__line--${t} sbb-pearl-chain-vertical-item__line--${n}"
|
|
90
|
-
></div>`}
|
|
91
|
-
${e ? o`<div
|
|
92
|
-
class="sbb-pearl-chain-vertical-item__bullet sbb-pearl-chain-vertical-item__bullet--${a} ${u}"
|
|
93
|
-
></div>` : s}
|
|
94
|
-
${c && c > 0 ? o`<div
|
|
95
|
-
style=${l({ "--sbb-pearl-chain-vertical-item-position": `${c}%` })}
|
|
96
|
-
class="sbb-pearl-chain-vertical-item__bullet--position"
|
|
97
|
-
></div>` : s}
|
|
98
|
-
</div>
|
|
99
|
-
<slot name="right"></slot>
|
|
100
|
-
`;
|
|
101
|
-
}
|
|
102
|
-
constructor() {
|
|
103
|
-
super(...arguments), t(this, g);
|
|
104
|
-
}
|
|
105
|
-
};
|
|
106
|
-
})();
|
|
107
|
-
//#endregion
|
|
108
|
-
export { d as t };
|
|
@@ -1,194 +0,0 @@
|
|
|
1
|
-
import { t as e } from "./toDate-p-Tpkb7t.js";
|
|
2
|
-
import { r as t, t as n } from "./differenceInMinutes-Dr9gRqtu.js";
|
|
3
|
-
import { __esDecorate as r, __runInitializers as i } from "tslib";
|
|
4
|
-
import { SbbElement as a } from "@sbb-esta/lyne-elements/core/base-elements.js";
|
|
5
|
-
import { forceType as o } from "@sbb-esta/lyne-elements/core/decorators.js";
|
|
6
|
-
import { boxSizingStyles as s } from "@sbb-esta/lyne-elements/core/styles.js";
|
|
7
|
-
import { css as c, html as l, nothing as u } from "lit";
|
|
8
|
-
import { defaultDateAdapter as d } from "@sbb-esta/lyne-elements/core/datetime.js";
|
|
9
|
-
import { property as f } from "lit/decorators.js";
|
|
10
|
-
import { removeTimezoneFromISOTimeString as p } from "./core/datetime.js";
|
|
11
|
-
import { isRideLeg as m } from "./core/timetable.js";
|
|
12
|
-
import { styleMap as h } from "lit/directives/style-map.js";
|
|
13
|
-
//#region node_modules/date-fns/isAfter.js
|
|
14
|
-
function g(t, n) {
|
|
15
|
-
return +e(t) > +e(n);
|
|
16
|
-
}
|
|
17
|
-
//#endregion
|
|
18
|
-
//#region node_modules/date-fns/isBefore.js
|
|
19
|
-
function _(t, n) {
|
|
20
|
-
return +e(t) < +e(n);
|
|
21
|
-
}
|
|
22
|
-
//#endregion
|
|
23
|
-
//#region src/elements-experimental/pearl-chain/pearl-chain.scss?lit&inline
|
|
24
|
-
var v = c`:host{--sbb-pearl-chain-height:var(--sbb-border-width-2x);--sbb-pearl-chain-spacing-small:.125rem;--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-position-color:var(--sbb-color-primary);--sbb-pearl-chain-bullet-size-start-end:.625rem;--sbb-pearl-chain-bullet-size-stop:.5rem;--sbb-pearl-chain-bullet-color:var(--sbb-background-color-3-inverted);--sbb-pearl-chain-bullet-color-past:var(--lightningcss-light,var(--sbb-color-metal))var(--lightningcss-dark,var(--sbb-color-granite));--sbb-pearl-chain-bullet-color-irrelevant:var(--lightningcss-light,var(--sbb-color-metal))var(--lightningcss-dark,var(--sbb-color-granite));--sbb-pearl-chain-bullet-color-disruption:var(--sbb-color-error);--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{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);flex-wrap:nowrap;justify-content:space-between;padding-inline-end:var(--sbb-pearl-chain-bullet-size-start-end);display:flex;position:relative}.sbb-pearl-chain__bullet{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);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{--sbb-pearl-chain-bullet-color:CanvasText}}.sbb-pearl-chain__bullet{content:"";z-index:3;background-color:currentColor;position:absolute;inset-block-start:0}.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{height:var(--sbb-pearl-chain-height);border-inline-end:var(--sbb-pearl-chain-spacing-small) solid Canvas;width:var(--sbb-pearl-chain-leg-width);background-color:currentColor;flex-grow:0;flex-shrink:0;align-items:center;display:flex;position:relative}@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{z-index:2;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%;position:relative}@media (forced-colors:active){.sbb-pearl-chain__stop{--sbb-pearl-chain-bullet-color:CanvasText}}.sbb-pearl-chain__stop{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__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{color:var(--sbb-pearl-chain-color-past);--sbb-pearl-chain-bullet-color:var(--sbb-pearl-chain-bullet-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;background-color:graytext!important}}.sbb-pearl-chain__bullet--progress{background:var(--sbb-pearl-chain-bullet-color);--sbb-pearl-chain-bullet-color:var(--sbb-pearl-chain-bullet-color-past)}@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{color:var(--sbb-pearl-chain-color-disruption);--sbb-pearl-chain-bullet-color:var(--sbb-pearl-chain-bullet-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;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(90deg,currentColor 0% 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(90deg,currentColor 0% 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;border:var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;background:canvas}.sbb-pearl-chain__stop--departure-skipped:before{content:"";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);position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)rotate(45deg)}@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:"";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);position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)rotate(45deg)}@media (forced-colors:active){.sbb-pearl-chain--arrival-skipped:before,.sbb-pearl-chain--departure-skipped:before{background:highlight}}.sbb-pearl-chain__leg:after{content:"";border-radius:var(--sbb-pearl-chain-height);z-index:1;background-color:currentColor;position:absolute;inset-block:0;inset-inline-start:0}@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{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);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__position{--sbb-pearl-chain-bullet-color:CanvasText}}.sbb-pearl-chain__position{--sbb-pearl-chain-bullet-color:var(--sbb-pearl-chain-position-color)}@media (forced-colors:active){.sbb-pearl-chain__position{--sbb-pearl-chain-position-color:Highlight}}@keyframes pearl-chain-bullet-position-pulse{0%{box-shadow:0 0 0 0 var(--sbb-pearl-chain-position-color)}25%{box-shadow:0 0 0 0 var(--sbb-pearl-chain-position-color)}50%{box-shadow:0 0 0 .1875rem color-mix(in srgb, var(--sbb-pearl-chain-position-color) 20%, transparent)}to{box-shadow:0 0 0 0 var(--sbb-pearl-chain-position-color)}}.sbb-pearl-chain__position{animation:pearl-chain-bullet-position-pulse var(--sbb-pearl-chain-bullet-animation-duration) var(--sbb-pearl-chain-bullet-animation-easing) infinite;z-index:4;position:absolute;inset-block-start:-200%;inset-inline-start:var(--sbb-pearl-chain-status-position)}.sbb-pearl-chain__position--no-animation{animation:unset}.sbb-screen-reader-only{clip-path:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}`, y = (() => {
|
|
25
|
-
let e = a, c = [], y, b = [], x = [], S, C = [], w = [], T;
|
|
26
|
-
return class extends e {
|
|
27
|
-
constructor() {
|
|
28
|
-
super(...arguments), this.#e = (i(this, c), i(this, b, [])), this.#t = (i(this, x), i(this, C, !1)), this._now = (i(this, w), null);
|
|
29
|
-
}
|
|
30
|
-
static {
|
|
31
|
-
let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(e[Symbol.metadata] ?? null) : void 0;
|
|
32
|
-
y = [f({ type: Array })], S = [o(), f({
|
|
33
|
-
attribute: "disable-animation",
|
|
34
|
-
type: Boolean
|
|
35
|
-
})], T = [f()], r(this, null, y, {
|
|
36
|
-
kind: "accessor",
|
|
37
|
-
name: "legs",
|
|
38
|
-
static: !1,
|
|
39
|
-
private: !1,
|
|
40
|
-
access: {
|
|
41
|
-
has: (e) => "legs" in e,
|
|
42
|
-
get: (e) => e.legs,
|
|
43
|
-
set: (e, t) => {
|
|
44
|
-
e.legs = t;
|
|
45
|
-
}
|
|
46
|
-
},
|
|
47
|
-
metadata: t
|
|
48
|
-
}, b, x), r(this, null, S, {
|
|
49
|
-
kind: "accessor",
|
|
50
|
-
name: "disableAnimation",
|
|
51
|
-
static: !1,
|
|
52
|
-
private: !1,
|
|
53
|
-
access: {
|
|
54
|
-
has: (e) => "disableAnimation" in e,
|
|
55
|
-
get: (e) => e.disableAnimation,
|
|
56
|
-
set: (e, t) => {
|
|
57
|
-
e.disableAnimation = t;
|
|
58
|
-
}
|
|
59
|
-
},
|
|
60
|
-
metadata: t
|
|
61
|
-
}, C, w), r(this, null, T, {
|
|
62
|
-
kind: "setter",
|
|
63
|
-
name: "now",
|
|
64
|
-
static: !1,
|
|
65
|
-
private: !1,
|
|
66
|
-
access: {
|
|
67
|
-
has: (e) => "now" in e,
|
|
68
|
-
set: (e, t) => {
|
|
69
|
-
e.now = t;
|
|
70
|
-
}
|
|
71
|
-
},
|
|
72
|
-
metadata: t
|
|
73
|
-
}, null, c), t && Object.defineProperty(this, Symbol.metadata, {
|
|
74
|
-
enumerable: !0,
|
|
75
|
-
configurable: !0,
|
|
76
|
-
writable: !0,
|
|
77
|
-
value: t
|
|
78
|
-
});
|
|
79
|
-
}
|
|
80
|
-
static {
|
|
81
|
-
this.elementName = "sbb-pearl-chain";
|
|
82
|
-
}
|
|
83
|
-
static {
|
|
84
|
-
this.styles = [s, v];
|
|
85
|
-
}
|
|
86
|
-
#e;
|
|
87
|
-
get legs() {
|
|
88
|
-
return this.#e;
|
|
89
|
-
}
|
|
90
|
-
set legs(e) {
|
|
91
|
-
this.#e = e;
|
|
92
|
-
}
|
|
93
|
-
#t;
|
|
94
|
-
get disableAnimation() {
|
|
95
|
-
return this.#t;
|
|
96
|
-
}
|
|
97
|
-
set disableAnimation(e) {
|
|
98
|
-
this.#t = e;
|
|
99
|
-
}
|
|
100
|
-
set now(e) {
|
|
101
|
-
this._now = d.getValidDateOrNull(d.deserialize(e));
|
|
102
|
-
}
|
|
103
|
-
get now() {
|
|
104
|
-
return this._now;
|
|
105
|
-
}
|
|
106
|
-
_getAllDuration(e) {
|
|
107
|
-
return e?.reduce((e, t) => {
|
|
108
|
-
let r = p(t.arrival?.time), i = p(t.departure?.time);
|
|
109
|
-
return r && i ? e + n(p(t.arrival.time), p(t.departure.time)) : e;
|
|
110
|
-
}, 0);
|
|
111
|
-
}
|
|
112
|
-
_isAllCancelled(e) {
|
|
113
|
-
return e?.every((e) => e?.serviceJourney?.serviceAlteration?.cancelled);
|
|
114
|
-
}
|
|
115
|
-
_getRelativeDuration(e, t) {
|
|
116
|
-
let r = p(t.arrival?.time), i = p(t.departure?.time);
|
|
117
|
-
if (r && i) {
|
|
118
|
-
let r = n(p(t.arrival.time), p(t.departure.time)), i = this._getAllDuration(e);
|
|
119
|
-
return i === 0 ? 100 : r / i * 100;
|
|
120
|
-
}
|
|
121
|
-
return 0;
|
|
122
|
-
}
|
|
123
|
-
_getProgress(e, r, i) {
|
|
124
|
-
if (!r?.time || !i?.time) return 0;
|
|
125
|
-
let a = t(r.time, r.delay ?? 0), o = n(t(i.time, i.delay ?? 0), a), s = n(e, a);
|
|
126
|
-
return o && s / o * 100;
|
|
127
|
-
}
|
|
128
|
-
_getStatus(e, n, r) {
|
|
129
|
-
let i = n && n.time && t(n.time, n.delay ?? 0), a = r && r.time && t(r.time, r.delay ?? 0);
|
|
130
|
-
return i && _(i, e) && a && g(a, e) ? "progress" : a && _(a, e) ? "past" : "future";
|
|
131
|
-
}
|
|
132
|
-
_renderPosition(e, t, n) {
|
|
133
|
-
let r = this._getProgress(e, t, n);
|
|
134
|
-
if (r < 0 && r > 100) return;
|
|
135
|
-
let i = () => ({
|
|
136
|
-
"--sbb-pearl-chain-status-position": `${r}%`,
|
|
137
|
-
...r >= 50 ? { transform: "translateX(-100%)" } : {}
|
|
138
|
-
}), a = this.disableAnimation ? "sbb-pearl-chain__position--no-animation" : "";
|
|
139
|
-
return l`<span
|
|
140
|
-
style=${h(i())}
|
|
141
|
-
class="sbb-pearl-chain__position ${a}"
|
|
142
|
-
></span>`;
|
|
143
|
-
}
|
|
144
|
-
render() {
|
|
145
|
-
let e = this.now ?? /* @__PURE__ */ new Date(), t = this.legs?.filter((e) => m(e)), n = t?.length && p(t[0]?.departure?.time), r = n && {
|
|
146
|
-
time: n,
|
|
147
|
-
delay: t[0].departure.delay ?? 0
|
|
148
|
-
}, i = t?.length && p(t[t.length - 1].arrival?.time), a = i && {
|
|
149
|
-
time: i,
|
|
150
|
-
delay: t[t.length - 1]?.arrival.delay ?? 0
|
|
151
|
-
}, o = t && t[0]?.serviceJourney?.stopPoints && t[0]?.serviceJourney?.stopPoints[0].stopStatus === "NOT_SERVICED" ? "sbb-pearl-chain--departure-skipped" : "", s = (() => {
|
|
152
|
-
let e = t && t[t.length - 1], n = e && e.serviceJourney?.stopPoints;
|
|
153
|
-
return n && n[n.length - 1].stopStatus === "NOT_SERVICED" ? "sbb-pearl-chain--arrival-skipped" : "";
|
|
154
|
-
})(), c = t && t[0]?.serviceJourney?.serviceAlteration?.cancelled ? "sbb-pearl-chain--departure-disruption" : "", d = t && t[t.length - 1]?.serviceJourney?.serviceAlteration?.cancelled ? "sbb-pearl-chain--arrival-disruption" : "", f = r && a && this._getStatus(e, r, a), g = t && f && !c ? "sbb-pearl-chain__bullet--" + f : "", _ = t && f && !d ? "sbb-pearl-chain__bullet--" + this._getStatus(e, void 0, a) : "";
|
|
155
|
-
return this._isAllCancelled(t) ? l`
|
|
156
|
-
<div class="sbb-pearl-chain">
|
|
157
|
-
<span class="sbb-pearl-chain__bullet sbb-pearl-chain--departure-disruption"></span>
|
|
158
|
-
<div class="sbb-pearl-chain__leg sbb-pearl-chain__leg--disruption"></div>
|
|
159
|
-
<span class="sbb-pearl-chain__bullet sbb-pearl-chain--departure-disruption"></span>
|
|
160
|
-
</div>
|
|
161
|
-
` : l`
|
|
162
|
-
<div class="sbb-pearl-chain">
|
|
163
|
-
<span
|
|
164
|
-
class="sbb-pearl-chain__bullet ${g} ${o} ${c}"
|
|
165
|
-
></span>
|
|
166
|
-
${t?.map((n, r) => {
|
|
167
|
-
let { stopPoints: i, serviceAlteration: a } = n?.serviceJourney || {}, o = this._getRelativeDuration(t, n), s = p(n.departure?.time), c = p(n.arrival?.time), d = i && i[i.length - 1]?.stopStatus === "NOT_SERVICED", f = i && i[i.length - 1]?.stopStatus === "PLANNED", m = i && i[0]?.stopStatus === "NOT_SERVICED", g = r > 0 && t[r - 1].serviceJourney.stopPoints, _ = g && g[g.length - 1]?.stopStatus === "NOT_SERVICED", v = d || m && f ? "sbb-pearl-chain__leg--skipped" : "", y = m || _ ? "sbb-pearl-chain__stop--departure-skipped" : "", b = a?.cancelled || a?.partiallyCancelled ? "sbb-pearl-chain__leg--disruption" : "", x = {
|
|
168
|
-
time: s,
|
|
169
|
-
delay: n.departure?.delay ?? 0
|
|
170
|
-
}, S = {
|
|
171
|
-
time: c,
|
|
172
|
-
delay: n.arrival?.delay ?? 0
|
|
173
|
-
}, C = this._getStatus(e, x, S);
|
|
174
|
-
return l` <div
|
|
175
|
-
class="sbb-pearl-chain__leg ${!b && !v && "sbb-pearl-chain__leg--" + C || ""} ${b} ${v}"
|
|
176
|
-
style=${h({
|
|
177
|
-
"--sbb-pearl-chain-leg-width": `${o}%`,
|
|
178
|
-
...C === "progress" && !b && !v ? { "--sbb-pearl-chain-leg-status": `${this._getProgress(e, x, S)}%` } : {}
|
|
179
|
-
})}
|
|
180
|
-
>
|
|
181
|
-
${r > 0 && r < t.length ? l`<span class="sbb-pearl-chain__stop ${y}"></span>` : u}
|
|
182
|
-
${C === "progress" && !b && !v ? this._renderPosition(e, x, S) : u}
|
|
183
|
-
</div>`;
|
|
184
|
-
})}
|
|
185
|
-
<span
|
|
186
|
-
class="sbb-pearl-chain__bullet ${_} ${s} ${d}"
|
|
187
|
-
></span>
|
|
188
|
-
</div>
|
|
189
|
-
`;
|
|
190
|
-
}
|
|
191
|
-
};
|
|
192
|
-
})();
|
|
193
|
-
//#endregion
|
|
194
|
-
export { y as t };
|
|
@@ -1,102 +0,0 @@
|
|
|
1
|
-
import { __esDecorate as e, __runInitializers as t } from "tslib";
|
|
2
|
-
import { SbbElement as n } from "@sbb-esta/lyne-elements/core/base-elements.js";
|
|
3
|
-
import { SbbLanguageController as r } from "@sbb-esta/lyne-elements/core/controllers.js";
|
|
4
|
-
import { forceType as i } from "@sbb-esta/lyne-elements/core/decorators.js";
|
|
5
|
-
import { boxSizingStyles as a } from "@sbb-esta/lyne-elements/core/styles.js";
|
|
6
|
-
import "@sbb-esta/lyne-elements/icon.js";
|
|
7
|
-
import { css as o, html as s, isServer as c } from "lit";
|
|
8
|
-
import { property as l } from "lit/decorators.js";
|
|
9
|
-
import { mapIconToSvg as u } from "./seat-reservation/common/mapper.js";
|
|
10
|
-
import { classMap as d } from "lit/directives/class-map.js";
|
|
11
|
-
import { getI18nSeatReservation as f } from "./seat-reservation/common/translations.js";
|
|
12
|
-
//#region src/elements-experimental/seat-reservation/seat-reservation-graphic/seat-reservation-graphic.scss?lit&inline
|
|
13
|
-
var p = o`:host{--sbb-seat-reservation-graphic-width:16;--sbb-seat-reservation-graphic-height:16;--sbb-seat-reservation-graphic-rotation:0;--sbb-seat-reservation-graphic-inverse-rotation:0;--sbb-seat-reservation-graphic-position:initial;--sbb-seat-reservation-graphic-left:0;--sbb-seat-reservation-graphic-top:0;--sbb-icon-svg-width:calc(var(--sbb-seat-reservation-graphic-width) * var(--sbb-seat-reservation-one-px-rem,.0625rem));--sbb-icon-svg-height:calc(var(--sbb-seat-reservation-graphic-height) * var(--sbb-seat-reservation-one-px-rem,.0625rem));width:calc(var(--sbb-seat-reservation-graphic-width) * var(--sbb-seat-reservation-one-px-rem,.0625rem));height:calc(var(--sbb-seat-reservation-graphic-height) * var(--sbb-seat-reservation-one-px-rem,.0625rem));position:var(--sbb-seat-reservation-graphic-position);justify-content:center;align-items:center;display:flex;inset-block-start:calc(var(--sbb-seat-reservation-graphic-top) * var(--sbb-seat-reservation-one-px-rem,.0625rem));inset-inline-start:calc(var(--sbb-seat-reservation-graphic-left) * var(--sbb-seat-reservation-one-px-rem,.0625rem))}:host(.auto-width){--sbb-icon-svg-width:auto;max-width:calc(var(--sbb-seat-reservation-graphic-max-width) * var(--sbb-seat-reservation-one-px-rem,.0625rem));width:auto}:host(.sbb-seat-reservation-graphic--cursor-pointer){cursor:var(--sbb-cursor-pointer)}.sbb-sr-icon,.sbb-sr-graphic{width:inherit;height:inherit;transform-origin:50%;rotate:calc(var(--sbb-seat-reservation-graphic-rotation) * 1deg)}.sbb-sr-icon{color:var(--lightningcss-light,var(--sbb-color-granite))var(--lightningcss-dark,var(--sbb-color-graphite))}.sbb-sr-graphic svg{width:100%;height:100%}.sbb-sr-graphic svg .fix-rotation-inverse{transform-origin:50%;rotate:calc(var(--sbb-seat-reservation-graphic-inverse-rotation) * 1deg)}@media (forced-colors:active){.sbb-sr-graphic svg:not(.color-immutable) [fill]:not([fill=none]){fill:currentColor}.sbb-sr-graphic .no-bg{fill:#0000}}`, m = (() => {
|
|
14
|
-
let o = n, m, h = [], g = [], _, v = [], y = [];
|
|
15
|
-
return class extends o {
|
|
16
|
-
constructor() {
|
|
17
|
-
super(...arguments), this.#e = t(this, h, ""), this.#t = (t(this, g), t(this, v, !1)), this._language = (t(this, y), new r(this));
|
|
18
|
-
}
|
|
19
|
-
static {
|
|
20
|
-
let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
|
|
21
|
-
m = [i(), l({ attribute: "name" })], _ = [i(), l({
|
|
22
|
-
attribute: "stretch",
|
|
23
|
-
type: Boolean
|
|
24
|
-
})], e(this, null, m, {
|
|
25
|
-
kind: "accessor",
|
|
26
|
-
name: "name",
|
|
27
|
-
static: !1,
|
|
28
|
-
private: !1,
|
|
29
|
-
access: {
|
|
30
|
-
has: (e) => "name" in e,
|
|
31
|
-
get: (e) => e.name,
|
|
32
|
-
set: (e, t) => {
|
|
33
|
-
e.name = t;
|
|
34
|
-
}
|
|
35
|
-
},
|
|
36
|
-
metadata: t
|
|
37
|
-
}, h, g), e(this, null, _, {
|
|
38
|
-
kind: "accessor",
|
|
39
|
-
name: "stretch",
|
|
40
|
-
static: !1,
|
|
41
|
-
private: !1,
|
|
42
|
-
access: {
|
|
43
|
-
has: (e) => "stretch" in e,
|
|
44
|
-
get: (e) => e.stretch,
|
|
45
|
-
set: (e, t) => {
|
|
46
|
-
e.stretch = t;
|
|
47
|
-
}
|
|
48
|
-
},
|
|
49
|
-
metadata: t
|
|
50
|
-
}, v, y), t && Object.defineProperty(this, Symbol.metadata, {
|
|
51
|
-
enumerable: !0,
|
|
52
|
-
configurable: !0,
|
|
53
|
-
writable: !0,
|
|
54
|
-
value: t
|
|
55
|
-
});
|
|
56
|
-
}
|
|
57
|
-
static {
|
|
58
|
-
this.elementName = "sbb-seat-reservation-graphic";
|
|
59
|
-
}
|
|
60
|
-
static {
|
|
61
|
-
this.styles = [a, p];
|
|
62
|
-
}
|
|
63
|
-
#e;
|
|
64
|
-
get name() {
|
|
65
|
-
return this.#e;
|
|
66
|
-
}
|
|
67
|
-
set name(e) {
|
|
68
|
-
this.#e = e;
|
|
69
|
-
}
|
|
70
|
-
#t;
|
|
71
|
-
get stretch() {
|
|
72
|
-
return this.#t;
|
|
73
|
-
}
|
|
74
|
-
set stretch(e) {
|
|
75
|
-
this.#t = e;
|
|
76
|
-
}
|
|
77
|
-
render() {
|
|
78
|
-
let e = u[this.name];
|
|
79
|
-
return !e?.svg && !e?.svgName ? null : s`<span
|
|
80
|
-
class="${d({
|
|
81
|
-
"sbb-sr-icon": !!e.svgName,
|
|
82
|
-
"sbb-sr-graphic": !!e.svg
|
|
83
|
-
})}"
|
|
84
|
-
>
|
|
85
|
-
${e.svgName ? s` <sbb-icon
|
|
86
|
-
name="${e.svgName || ""}"
|
|
87
|
-
aria-hidden="false"
|
|
88
|
-
aria-label="${f(e.svgName, this._language.current)}"
|
|
89
|
-
></sbb-icon>` : s`${this._getSvgElement(e.svg)}`}
|
|
90
|
-
</span>`;
|
|
91
|
-
}
|
|
92
|
-
_getSvgElement(e) {
|
|
93
|
-
if (!c) {
|
|
94
|
-
let t = new DOMParser(), n = e || "<svg></svg>", r = t.parseFromString(n, "image/svg+xml").firstElementChild;
|
|
95
|
-
return this.stretch && r?.nodeName.toLowerCase() === "svg" && r.setAttribute("preserveAspectRatio", "none"), r;
|
|
96
|
-
}
|
|
97
|
-
return null;
|
|
98
|
-
}
|
|
99
|
-
};
|
|
100
|
-
})();
|
|
101
|
-
//#endregion
|
|
102
|
-
export { m as t };
|