@sbb-esta/lyne-elements-experimental-dev 5.0.0-next.1-dev.1777534953 → 5.0.0-next.1-dev.1777543035
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/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.component-BtAwrvVE.js +473 -0
- package/development/seat-reservation.js +1 -1
- package/development/seat-reservation.pure.js +1 -1
- package/package.json +2 -2
- package/seat-reservation/seat-reservation/seat-reservation.component.js +1 -1
- package/{seat-reservation.component-CNtc2Xcr.js → seat-reservation.component-SoXTIEnc.js} +78 -77
- package/seat-reservation.js +1 -1
- package/seat-reservation.pure.js +1 -1
- package/development/seat-reservation.component-CZm8Lsj1.js +0 -472
|
@@ -10,5 +10,5 @@ import { t as SbbSeatReservationNavigationServicesElement } from "./seat-reserva
|
|
|
10
10
|
import { t as SbbSeatReservationPlaceControlElement } from "./seat-reservation-place-control.component-BEeaDOS6.js";
|
|
11
11
|
import { t as SbbSeatReservationScopedElement } from "./seat-reservation-scoped.component-X-Kq0-w5.js";
|
|
12
12
|
import { SeatReservationBaseElement } from "./seat-reservation/seat-reservation/seat-reservation-base-element.js";
|
|
13
|
-
import { t as SbbSeatReservationElement } from "./seat-reservation.component-
|
|
13
|
+
import { t as SbbSeatReservationElement } from "./seat-reservation.component-BtAwrvVE.js";
|
|
14
14
|
export { SbbSeatReservationAreaElement, SbbSeatReservationElement, SbbSeatReservationGraphicElement, SbbSeatReservationNavigationCoachElement, SbbSeatReservationNavigationServicesElement, SbbSeatReservationPlaceControlElement, SbbSeatReservationScopedElement, SeatReservationBaseElement, getI18nSeatReservation, mapCoachInfosToCoachSelection, mapIconToSvg, mapPlaceAndCoachToSeatReservationPlaceSelection, mapPlaceInfosToPlaceSelection, mapRawDataToSeatReservation, svgs };
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sbb-esta/lyne-elements-experimental-dev",
|
|
3
|
-
"version": "5.0.0-next.1-dev.
|
|
3
|
+
"version": "5.0.0-next.1-dev.1777543035",
|
|
4
4
|
"description": "Lyne Design System",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design system",
|
|
7
7
|
"web components",
|
|
8
8
|
"lit",
|
|
9
9
|
"storybook",
|
|
10
|
-
"https://github.com/sbb-design-systems/lyne-components/commit/
|
|
10
|
+
"https://github.com/sbb-design-systems/lyne-components/commit/df9c7184648b124ad517912ea84175bfe360ff0a"
|
|
11
11
|
],
|
|
12
12
|
"type": "module",
|
|
13
13
|
"exports": {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as e } from "../../seat-reservation.component-
|
|
1
|
+
import { t as e } from "../../seat-reservation.component-SoXTIEnc.js";
|
|
2
2
|
export { e as SbbSeatReservationElement };
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
import { SeatReservationBaseElement as e } from "./seat-reservation/seat-reservation/seat-reservation-base-element.js";
|
|
2
2
|
import { SbbSecondaryButtonElement as t } from "@sbb-esta/lyne-elements/button.pure.js";
|
|
3
|
-
import { SbbLanguageController as n, boxSizingStyles as r, screenReaderOnlyStyles as i } from "@sbb-esta/lyne-elements/core.js";
|
|
4
|
-
import { html as
|
|
5
|
-
import { styleMap as
|
|
6
|
-
import { classMap as
|
|
7
|
-
import { getI18nSeatReservation as
|
|
8
|
-
import { SbbSeatReservationGraphicElement as
|
|
9
|
-
import { SbbPopoverElement as
|
|
10
|
-
import { repeat as
|
|
11
|
-
import { SbbSeatReservationAreaElement as
|
|
12
|
-
import { SbbSeatReservationNavigationCoachElement as
|
|
13
|
-
import { SbbSeatReservationPlaceControlElement as
|
|
14
|
-
import { SbbSeatReservationScopedElement as
|
|
3
|
+
import { SbbLanguageController as n, boxSizingStyles as r, screenReaderOnlyStyles as i, scrollbarStyles as a } from "@sbb-esta/lyne-elements/core.js";
|
|
4
|
+
import { html as o, isServer as s, nothing as c, unsafeCSS as l } from "lit";
|
|
5
|
+
import { styleMap as u } from "lit/directives/style-map.js";
|
|
6
|
+
import { classMap as d } from "lit/directives/class-map.js";
|
|
7
|
+
import { getI18nSeatReservation as f } from "./seat-reservation/common/translations.js";
|
|
8
|
+
import { SbbSeatReservationGraphicElement as p } from "./seat-reservation/seat-reservation-graphic/seat-reservation-graphic.component.js";
|
|
9
|
+
import { SbbPopoverElement as m } from "@sbb-esta/lyne-elements/popover.pure.js";
|
|
10
|
+
import { repeat as h } from "lit/directives/repeat.js";
|
|
11
|
+
import { SbbSeatReservationAreaElement as g } from "./seat-reservation/seat-reservation-area/seat-reservation-area.component.js";
|
|
12
|
+
import { SbbSeatReservationNavigationCoachElement as _ } from "./seat-reservation/seat-reservation-navigation-coach/seat-reservation-navigation-coach.component.js";
|
|
13
|
+
import { SbbSeatReservationPlaceControlElement as v } from "./seat-reservation/seat-reservation-place-control/seat-reservation-place-control.component.js";
|
|
14
|
+
import { SbbSeatReservationScopedElement as y } from "./seat-reservation/seat-reservation-scoped/seat-reservation-scoped.component.js";
|
|
15
15
|
//#region src/elements-experimental/seat-reservation/seat-reservation/seat-reservation.scss?inline
|
|
16
|
-
var
|
|
16
|
+
var b = ":host{--sbb-seat-reservation-grid-size: 16px;--sbb-seat-reservation-height: 0;--sbb-seat-reservation-decks: 1;display:block;height:inherit}:host ::part(coach-floor){fill:var(--sbb-background-color-2)}@media(forced-colors:active){:host ::part(coach-floor){fill:transparent}}:host(:dir(rtl)) :not(.sbb-sr-place-ctrl--type-bicycle,.sbb-sr-place-ctrl--orientation-90,.sbb-sr-place-ctrl--orientation-270,.sbb-sr-place-ctrl--state-selected) ::part(coach-floor){rotate:180deg}[popover]:where(sbb-popover){margin:0;padding:0;border:none;width:auto;height:auto;background-color:transparent;color:inherit;pointer-events:none}[popover]:where(sbb-popover) .sbb-sr-popover{margin-block:calc(4 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}:host([align-vertical]) .sbb-sr__component{flex-direction:row-reverse;justify-content:flex-end;gap:calc(22 * var(--sbb-seat-reservation-one-px-rem, .0625rem));height:inherit}@media(min-width:37.5rem){:host([align-vertical]) .sbb-sr__component{gap:calc(54 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}}:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation,:host([align-vertical]) .sbb-sr__component ul.sbb-sr-navigation__list-coaches{flex-direction:column}:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation{padding:calc(16 * var(--sbb-seat-reservation-one-px-rem, .0625rem)) 0}:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation .sbb-sr__navigation-control-button{left:calc(1 * var(--sbb-seat-reservation-one-px-rem, .0625rem));top:0;rotate:90deg}@media(min-width:64rem){:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation .sbb-sr__navigation-control-button{left:calc(-1 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}}:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation ul.sbb-sr-navigation__list-coaches{max-width:initial;padding:calc(5 * var(--sbb-seat-reservation-one-px-rem, .0625rem));overflow:hidden scroll}:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation ul.sbb-sr-navigation__list-coaches li{display:flex}:host([align-vertical]) .sbb-sr__wrapper-coach-decks{flex-direction:column}:host([align-vertical]) .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels{flex-direction:column-reverse;width:calc((var(--sbb-seat-reservation-height) + 24) * var(--sbb-seat-reservation-one-px-rem, .0625rem));height:initial}:host([align-vertical]) .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels b{inline-size:calc(50% - 16 * var(--sbb-seat-reservation-one-px-rem, .0625rem));block-size:calc(20 * var(--sbb-seat-reservation-one-px-rem, .0625rem));margin-bottom:calc(16 * var(--sbb-seat-reservation-one-px-rem, .0625rem));rotate:initial;writing-mode:initial}:host([align-vertical]) .sbb-sr__wrapper-scrollarea{width:calc((var(--sbb-seat-reservation-height) + 24) * var(--sbb-seat-reservation-one-px-rem, .0625rem));height:100%;overflow:hidden scroll}:host([align-vertical]) .sbb-sr__wrapper-scrollarea .sbb-sr__parent{rotate:90deg}:host([align-vertical]) .sbb-sr-travel-direction-wrapper{width:calc(var(--sbb-seat-reservation-height) * var(--sbb-seat-reservation-one-px-rem, .0625rem));margin-block-start:calc(4 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr-navigation{gap:calc(3 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr-navigation .sbb-sr__navigation-control-button{position:relative;top:calc(2 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}@media(min-width:64rem){.sbb-sr-navigation .sbb-sr__navigation-control-button{top:0}}.sbb-sr__component{display:flex;flex-direction:column;gap:calc(64 * var(--sbb-seat-reservation-one-px-rem, .0625rem) - 16px)}.sbb-sr-travel-direction-wrapper{display:flex;justify-content:center;align-items:center;column-gap:calc(4 * var(--sbb-seat-reservation-one-px-rem, .0625rem));margin-block:calc(8 * var(--sbb-seat-reservation-one-px-rem, .0625rem)) calc(4 * var(--sbb-seat-reservation-one-px-rem, .0625rem));font-size:var(--sbb-text-font-size-s)}.sbb-sr-travel-direction-wrapper .sbb-sr__travel-direction--arrow{display:flex;align-items:center}.sbb-sr-navigation-wrapper{display:flex}.sbb-sr-navigation{display:flex;justify-content:center;width:100%;padding-inline:16px}.sbb-sr-navigation__list-coaches{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-wrap:nowrap;gap:calc(4 * var(--sbb-seat-reservation-one-px-rem, .0625rem));padding:calc(6 * var(--sbb-seat-reservation-one-px-rem, .0625rem)) calc(5 * var(--sbb-seat-reservation-one-px-rem, .0625rem)) 0;max-width:856px;--sbb-scrollbar-color: transparent;overflow:scroll hidden;position:relative}.sbb-sr__wrapper-coach-decks{display:flex;overflow:hidden;height:inherit}.sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels{display:flex;justify-content:space-between;height:calc(var(--sbb-seat-reservation-height) * var(--sbb-seat-reservation-one-px-rem, .0625rem));writing-mode:vertical-lr}.sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels b{height:calc(50% - 16 * var(--sbb-seat-reservation-one-px-rem, .0625rem));width:calc(20 * var(--sbb-seat-reservation-one-px-rem, .0625rem));margin-block-end:16px;rotate:180deg;text-align:center;line-height:calc(20 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr__wrapper-scrollarea{overflow:scroll hidden;padding-block:calc(8 * var(--sbb-seat-reservation-one-px-rem, .0625rem)) calc(16 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr__wrapper-scrollarea .sbb-sr__parent{display:flex;flex-direction:column;position:relative}.sbb-sr__list-decks{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-direction:column}.sbb-sr__list-decks--gap{gap:calc(48 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr__list-item-deck{position:relative}.sbb-sr__list-coaches{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;gap:calc(4 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr__list-decks:has(.sbb-sr-coach-has-overhanging-elements) .sbb-sr__list-coaches{gap:calc(8 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr__item-coach{position:relative}.sbb-sr-coach-wrapper__table{outline:0}", x = class extends e {
|
|
17
17
|
constructor() {
|
|
18
18
|
super(...arguments), this._language = new n(this);
|
|
19
19
|
}
|
|
@@ -23,19 +23,20 @@ var y = ":host{--sbb-seat-reservation-grid-size: 16px;--sbb-seat-reservation-hei
|
|
|
23
23
|
static {
|
|
24
24
|
this.elementDependencies = [
|
|
25
25
|
t,
|
|
26
|
+
m,
|
|
27
|
+
g,
|
|
26
28
|
p,
|
|
27
|
-
|
|
28
|
-
f,
|
|
29
|
+
v,
|
|
29
30
|
_,
|
|
30
|
-
|
|
31
|
-
v
|
|
31
|
+
y
|
|
32
32
|
];
|
|
33
33
|
}
|
|
34
34
|
static {
|
|
35
35
|
this.styles = [
|
|
36
36
|
r,
|
|
37
|
+
a,
|
|
37
38
|
i,
|
|
38
|
-
|
|
39
|
+
l(b)
|
|
39
40
|
];
|
|
40
41
|
}
|
|
41
42
|
willUpdate(e) {
|
|
@@ -50,7 +51,7 @@ var y = ":host{--sbb-seat-reservation-grid-size: 16px;--sbb-seat-reservation-hei
|
|
|
50
51
|
return this._initVehicleSeatReservationConstruction(), this._coachesHtmlTemplate || null;
|
|
51
52
|
}
|
|
52
53
|
_initVehicleSeatReservationConstruction() {
|
|
53
|
-
this._coachesHtmlTemplate =
|
|
54
|
+
this._coachesHtmlTemplate = o`
|
|
54
55
|
${this._renderTravelDirection()}
|
|
55
56
|
<div class="sbb-sr__component">
|
|
56
57
|
${this._renderNavigation()}
|
|
@@ -62,17 +63,17 @@ var y = ":host{--sbb-seat-reservation-grid-size: 16px;--sbb-seat-reservation-hei
|
|
|
62
63
|
<div
|
|
63
64
|
@scroll=${() => this.coachAreaScrollend()}
|
|
64
65
|
id="sbb-sr__wrapper-scrollarea"
|
|
65
|
-
class="sbb-sr__wrapper-scrollarea"
|
|
66
|
+
class="sbb-sr__wrapper-scrollarea sbb-scrollbar"
|
|
66
67
|
tabindex="-1"
|
|
67
68
|
>
|
|
68
69
|
<div id="sbb-sr__parent-area" class="sbb-sr__parent">
|
|
69
70
|
<ul
|
|
70
|
-
class="${
|
|
71
|
+
class="${d({
|
|
71
72
|
"sbb-sr__list-decks": !0,
|
|
72
73
|
"sbb-sr__list-decks--gap": this.hasMultipleDecks
|
|
73
74
|
})}"
|
|
74
75
|
>
|
|
75
|
-
${this.seatReservations?.map((e, t) =>
|
|
76
|
+
${this.seatReservations?.map((e, t) => o`<li class="sbb-sr__list-item-deck">
|
|
76
77
|
<ul class="sbb-sr__list-coaches" role="presentation">
|
|
77
78
|
${this._renderCoaches(e, t)}
|
|
78
79
|
</ul>
|
|
@@ -85,12 +86,12 @@ var y = ":host{--sbb-seat-reservation-grid-size: 16px;--sbb-seat-reservation-hei
|
|
|
85
86
|
`;
|
|
86
87
|
}
|
|
87
88
|
_renderDeckLabels() {
|
|
88
|
-
return this.hasMultipleDecks ? this.seatReservations.map((e) =>
|
|
89
|
+
return this.hasMultipleDecks ? this.seatReservations.map((e) => o`<b aria-hidden="true">${f(e.deckCoachLevel, this._language.current)}</b>`) : null;
|
|
89
90
|
}
|
|
90
91
|
_renderNavigationControlButton(e) {
|
|
91
92
|
if (!this.hasNavigation || !this.seatReservations) return null;
|
|
92
|
-
let t = e == "DIRECTION_RIGHT" ? "sbb-sr-navigation__wrapper-button-direction--right" : "sbb-sr-navigation__wrapper-button-direction--left", n = e == "DIRECTION_RIGHT" ? "chevron-small-right-small" : "chevron-small-left-small", r =
|
|
93
|
-
return (e == "DIRECTION_LEFT" && this.selectedCoachIndex > 0 || e == "DIRECTION_RIGHT" && this.selectedCoachIndex < this.coachItemDetailsElements.length - 1) && (i = !1),
|
|
93
|
+
let t = e == "DIRECTION_RIGHT" ? "sbb-sr-navigation__wrapper-button-direction--right" : "sbb-sr-navigation__wrapper-button-direction--left", n = e == "DIRECTION_RIGHT" ? "chevron-small-right-small" : "chevron-small-left-small", r = f(e == "DIRECTION_RIGHT" ? "SEAT_RESERVATION_END" : "SEAT_RESERVATION_BEGIN", this._language.current), i = !0;
|
|
94
|
+
return (e == "DIRECTION_LEFT" && this.selectedCoachIndex > 0 || e == "DIRECTION_RIGHT" && this.selectedCoachIndex < this.coachItemDetailsElements.length - 1) && (i = !1), o`<div class="sbb-sr-navigation__wrapper-button-direction">
|
|
94
95
|
<sbb-secondary-button
|
|
95
96
|
@click="${() => this.navigateByDirectionBtn(e)}"
|
|
96
97
|
@focus="${() => this.onFocusNavDirectionButton()}"
|
|
@@ -101,15 +102,15 @@ var y = ":host{--sbb-seat-reservation-grid-size: 16px;--sbb-seat-reservation-hei
|
|
|
101
102
|
type="button"
|
|
102
103
|
aria-label="${r}"
|
|
103
104
|
role="button"
|
|
104
|
-
.disabledInteractive="${i ||
|
|
105
|
-
.disabled="${i ||
|
|
105
|
+
.disabledInteractive="${i || c}"
|
|
106
|
+
.disabled="${i || c}"
|
|
106
107
|
></sbb-secondary-button>
|
|
107
108
|
</div>`;
|
|
108
109
|
}
|
|
109
110
|
_renderTravelDirection() {
|
|
110
111
|
if (!this.travelDirection || this.travelDirection === "NONE") return null;
|
|
111
|
-
let e =
|
|
112
|
-
return
|
|
112
|
+
let e = f("SEAT_RESERVATION_TRAVEL_DIRECTION", this._language.current);
|
|
113
|
+
return o`<div class="sbb-sr-travel-direction-wrapper">
|
|
113
114
|
<div class="sbb-sr__travel-direction--arrow">
|
|
114
115
|
<sbb-icon slot="icon" name="${`arrow-${this.alignVertical ? this.travelDirection === "RIGHT" ? "down" : "up" : this.travelDirection === "RIGHT" ? "right" : "left"}-small`}"></sbb-icon>
|
|
115
116
|
</div>
|
|
@@ -117,15 +118,15 @@ var y = ":host{--sbb-seat-reservation-grid-size: 16px;--sbb-seat-reservation-hei
|
|
|
117
118
|
</div>`;
|
|
118
119
|
}
|
|
119
120
|
_renderNavigation() {
|
|
120
|
-
return
|
|
121
|
+
return s || !this.hasNavigation || !this.seatReservations ? null : o`<div class="sbb-sr-navigation-wrapper">
|
|
121
122
|
<nav id="sbb-sr-navigation" class="sbb-sr-navigation">
|
|
122
123
|
${this._renderNavigationControlButton("DIRECTION_LEFT")}
|
|
123
124
|
<ul
|
|
124
125
|
id="sbb-sr__navigation-list-coaches"
|
|
125
|
-
class="sbb-sr-navigation__list-coaches"
|
|
126
|
-
aria-label="${
|
|
126
|
+
class="sbb-sr-navigation__list-coaches sbb-scrollbar"
|
|
127
|
+
aria-label="${f("SEAT_RESERVATION_NAVIGATION", this._language.current)}"
|
|
127
128
|
>
|
|
128
|
-
${this.coachItemDetailsElements.map((e, t) =>
|
|
129
|
+
${this.coachItemDetailsElements.map((e, t) => o`<li>
|
|
129
130
|
<sbb-seat-reservation-navigation-coach
|
|
130
131
|
@selectcoach=${(e) => this._onSelectNavCoach(e)}
|
|
131
132
|
@focuscoach=${() => this._onFocusNavCoach()}
|
|
@@ -148,16 +149,16 @@ var y = ":host{--sbb-seat-reservation-grid-size: 16px;--sbb-seat-reservation-hei
|
|
|
148
149
|
}
|
|
149
150
|
_renderCoaches(e, t) {
|
|
150
151
|
let n = JSON.parse(JSON.stringify(e?.coachItems));
|
|
151
|
-
return !n ||
|
|
152
|
+
return !n || s ? null : n.map((n, r) => o`
|
|
152
153
|
<li class="sbb-sr__item-coach">
|
|
153
154
|
${this._renderCoachElement(n, r, t, e.deckCoachIndex)}
|
|
154
155
|
</li>
|
|
155
156
|
`);
|
|
156
157
|
}
|
|
157
158
|
_renderCoachElement(e, t, n, r) {
|
|
158
|
-
let i = this.getCalculatedDimension(e.dimension),
|
|
159
|
-
return
|
|
160
|
-
style=${
|
|
159
|
+
let i = this.getCalculatedDimension(e.dimension), a = this._getDescriptionTableCoach(e);
|
|
160
|
+
return o`<sbb-seat-reservation-scoped
|
|
161
|
+
style=${u({
|
|
161
162
|
"--sbb-seat-reservation-scoped-width": i.w,
|
|
162
163
|
"--sbb-seat-reservation-scoped-height": i.h
|
|
163
164
|
})}
|
|
@@ -175,7 +176,7 @@ var y = ":host{--sbb-seat-reservation-grid-size: 16px;--sbb-seat-reservation-hei
|
|
|
175
176
|
tabindex="-1"
|
|
176
177
|
>
|
|
177
178
|
<caption id="sbb-sr-coach-caption-${t}" tabindex="-1">
|
|
178
|
-
<span class="sbb-screen-reader-only">${
|
|
179
|
+
<span class="sbb-screen-reader-only">${a}</span>
|
|
179
180
|
</caption>
|
|
180
181
|
${this._getRenderedRowPlaces(e, t, n, r)}
|
|
181
182
|
</table>
|
|
@@ -183,11 +184,11 @@ var y = ":host{--sbb-seat-reservation-grid-size: 16px;--sbb-seat-reservation-hei
|
|
|
183
184
|
}
|
|
184
185
|
_getRenderedCoachBorders(e, t, n) {
|
|
185
186
|
if (!e.graphicElements) return null;
|
|
186
|
-
let r = this.seatReservationStructure.decks[t].deckCoaches[n], i = r.borderMiddleElement,
|
|
187
|
-
return
|
|
187
|
+
let r = this.seatReservationStructure.decks[t].deckCoaches[n], i = r.borderMiddleElement, a = r.hasOverhangingElements;
|
|
188
|
+
return o`
|
|
188
189
|
<sbb-seat-reservation-graphic
|
|
189
|
-
class="${
|
|
190
|
-
style=${
|
|
190
|
+
class="${d({ "sbb-sr-coach-has-overhanging-elements": a || !1 })}"
|
|
191
|
+
style=${u({
|
|
191
192
|
"--sbb-seat-reservation-graphic-width": i.dimension.w,
|
|
192
193
|
"--sbb-seat-reservation-graphic-height": i.dimension.h,
|
|
193
194
|
"--sbb-seat-reservation-graphic-top": i.position.y,
|
|
@@ -204,7 +205,7 @@ var y = ":host{--sbb-seat-reservation-grid-size: 16px;--sbb-seat-reservation-hei
|
|
|
204
205
|
if (!e.places) return null;
|
|
205
206
|
let i = {};
|
|
206
207
|
for (let t of e.places) i[t.position.y] ? i[t.position.y].push(t) : i[t.position.y] = [t];
|
|
207
|
-
return Object.values(i).map((e, i) =>
|
|
208
|
+
return Object.values(i).map((e, i) => o`
|
|
208
209
|
<tr id="row-${t}-${e[0].position.y}" data-row-index=${i}>
|
|
209
210
|
${this._getRenderedColumnPlaces(e, t, n, r)}
|
|
210
211
|
</tr>
|
|
@@ -213,22 +214,22 @@ var y = ":host{--sbb-seat-reservation-grid-size: 16px;--sbb-seat-reservation-hei
|
|
|
213
214
|
_getRenderedColumnPlaces(e, t, n, r) {
|
|
214
215
|
e.sort((e, t) => Number(e.position.x) - Number(t.position.x));
|
|
215
216
|
let i = t + "-" + r;
|
|
216
|
-
return
|
|
217
|
-
let
|
|
218
|
-
return
|
|
217
|
+
return o`${h(e, (e) => i + "-" + e.number, (e, i) => {
|
|
218
|
+
let a = this.getCalculatedDimension(e.dimension), s = this.getCalculatedPosition(e.position), c = e.rotation || 0, l = this.alignVertical ? -90 : 0, d = this.getPlaceElementId(n, t, e.number);
|
|
219
|
+
return o`
|
|
219
220
|
<td
|
|
220
221
|
id="cell-${n}-${t}-${e.position.y}-${i}"
|
|
221
222
|
class="graphical-element"
|
|
222
223
|
>
|
|
223
224
|
<sbb-seat-reservation-place-control
|
|
224
|
-
style=${
|
|
225
|
-
"--sbb-seat-reservation-place-control-text-scale-value": Math.min(
|
|
226
|
-
"--sbb-seat-reservation-place-control-width":
|
|
227
|
-
"--sbb-seat-reservation-place-control-height":
|
|
225
|
+
style=${u({
|
|
226
|
+
"--sbb-seat-reservation-place-control-text-scale-value": Math.min(a.w, a.h),
|
|
227
|
+
"--sbb-seat-reservation-place-control-width": a.w,
|
|
228
|
+
"--sbb-seat-reservation-place-control-height": a.h,
|
|
228
229
|
"--sbb-seat-reservation-place-control-top": s.y,
|
|
229
230
|
"--sbb-seat-reservation-place-control-left": s.x,
|
|
230
231
|
"--sbb-seat-reservation-place-control-rotation": c,
|
|
231
|
-
"--sbb-seat-reservation-place-control-text-rotation":
|
|
232
|
+
"--sbb-seat-reservation-place-control-text-rotation": l
|
|
232
233
|
})}
|
|
233
234
|
@selectplace=${(e) => this._onSelectPlace(e)}
|
|
234
235
|
exportparts="sbb-sr-place-part"
|
|
@@ -250,8 +251,8 @@ var y = ":host{--sbb-seat-reservation-grid-size: 16px;--sbb-seat-reservation-hei
|
|
|
250
251
|
})}`;
|
|
251
252
|
}
|
|
252
253
|
_getRenderedCoachElements(e, t) {
|
|
253
|
-
return this.seatReservationStructure.decks[e].deckCoaches[t].otherElements.map((e) =>
|
|
254
|
-
style=${
|
|
254
|
+
return this.seatReservationStructure.decks[e].deckCoaches[t].otherElements.map((e) => o` <sbb-seat-reservation-graphic
|
|
255
|
+
style=${u({
|
|
255
256
|
"--sbb-seat-reservation-graphic-width": e.dimension.w,
|
|
256
257
|
"--sbb-seat-reservation-graphic-height": e.dimension.h,
|
|
257
258
|
"--sbb-seat-reservation-graphic-top": e.position.y,
|
|
@@ -259,57 +260,57 @@ var y = ":host{--sbb-seat-reservation-grid-size: 16px;--sbb-seat-reservation-hei
|
|
|
259
260
|
"--sbb-seat-reservation-graphic-position": "absolute",
|
|
260
261
|
"--sbb-seat-reservation-graphic-rotation": e.rotation
|
|
261
262
|
})}
|
|
262
|
-
name=${e.icon ??
|
|
263
|
+
name=${e.icon ?? c}
|
|
263
264
|
aria-hidden="true"
|
|
264
265
|
?stretch=${!0}
|
|
265
266
|
></sbb-seat-reservation-graphic>`);
|
|
266
267
|
}
|
|
267
268
|
_getRenderedAreaElements(e, t) {
|
|
268
269
|
return this.seatReservationStructure.decks[e].deckCoaches[t].areaElements.map((n) => {
|
|
269
|
-
let r = `popover-trigger-${e}-${t}-${n.position.x}-${n.position.y}`, i = n.icon?.indexOf("TABLE") === -1,
|
|
270
|
-
return
|
|
270
|
+
let r = `popover-trigger-${e}-${t}-${n.position.x}-${n.position.y}`, i = n.icon?.indexOf("TABLE") === -1, a = n.icon && i ? n.icon : null, s = n.icon ? f(n.icon, this._language.current) : c;
|
|
271
|
+
return o`
|
|
271
272
|
<sbb-seat-reservation-area
|
|
272
273
|
id="${r}"
|
|
273
|
-
class="${
|
|
274
|
-
style=${
|
|
274
|
+
class="${d({ "sbb-seat-reservation-area--cursor-pointer": a !== null })}"
|
|
275
|
+
style=${u({
|
|
275
276
|
"--sbb-seat-reservation-area-width": n.dimension.w,
|
|
276
277
|
"--sbb-seat-reservation-area-height": n.dimension.h,
|
|
277
278
|
"--sbb-seat-reservation-area-top": n.position.y,
|
|
278
279
|
"--sbb-seat-reservation-area-left": n.position.x,
|
|
279
280
|
"--sbb-seat-reservation-area-z-index": n.position.z
|
|
280
281
|
})}
|
|
281
|
-
mounting=${n.mounting ??
|
|
282
|
+
mounting=${n.mounting ?? c}
|
|
282
283
|
background="dark"
|
|
283
284
|
aria-hidden="true"
|
|
284
285
|
>
|
|
285
|
-
${
|
|
286
|
+
${a ? o`
|
|
286
287
|
<sbb-seat-reservation-graphic
|
|
287
|
-
style=${
|
|
288
|
+
style=${u({
|
|
288
289
|
"--sbb-seat-reservation-graphic-max-width": this.globalAreaIconDim.w,
|
|
289
290
|
"--sbb-seat-reservation-graphic-max-height": this.globalAreaIconDim.h,
|
|
290
291
|
"--sbb-seat-reservation-graphic-width": n.dimension.w,
|
|
291
292
|
"--sbb-seat-reservation-graphic-height": n.dimension.h,
|
|
292
293
|
"--sbb-seat-reservation-graphic-rotation": n.rotation,
|
|
293
|
-
"--sbb-seat-reservation-graphic-padding-percent":
|
|
294
|
+
"--sbb-seat-reservation-graphic-padding-percent": a === "ENTRY_EXIT" ? 1 : this.globalAreaIconPadding
|
|
294
295
|
})}
|
|
295
|
-
name=${
|
|
296
|
+
name=${a}
|
|
296
297
|
role="img"
|
|
297
298
|
aria-hidden="true"
|
|
298
299
|
class="sbb-sr-graphic__dimension--square-dim"
|
|
299
300
|
></sbb-seat-reservation-graphic>
|
|
300
|
-
` :
|
|
301
|
+
` : c}
|
|
301
302
|
</sbb-seat-reservation-area>
|
|
302
|
-
${
|
|
303
|
+
${a ? this._popover(r, s) : c}
|
|
303
304
|
`;
|
|
304
305
|
});
|
|
305
306
|
}
|
|
306
307
|
_getRenderedServiceElements(e, t) {
|
|
307
308
|
return this.seatReservationStructure.decks[e].deckCoaches[t].serviceElements.map((n) => {
|
|
308
|
-
let r = `popover-trigger-${e}-${t}-${n.position.x}-${n.position.y}`, i = n.icon ?
|
|
309
|
-
return
|
|
309
|
+
let r = `popover-trigger-${e}-${t}-${n.position.x}-${n.position.y}`, i = n.icon ? f(n.icon, this._language.current) : null;
|
|
310
|
+
return o`
|
|
310
311
|
<sbb-seat-reservation-graphic
|
|
311
312
|
id="${r}"
|
|
312
|
-
style=${
|
|
313
|
+
style=${u({
|
|
313
314
|
"--sbb-seat-reservation-graphic-width": n.dimension.w,
|
|
314
315
|
"--sbb-seat-reservation-graphic-height": n.dimension.h,
|
|
315
316
|
"--sbb-seat-reservation-graphic-top": n.position.y,
|
|
@@ -318,7 +319,7 @@ var y = ":host{--sbb-seat-reservation-grid-size: 16px;--sbb-seat-reservation-hei
|
|
|
318
319
|
"--sbb-seat-reservation-graphic-rotation": n.rotation
|
|
319
320
|
})}
|
|
320
321
|
class="sbb-seat-reservation-graphic--cursor-pointer"
|
|
321
|
-
name=${n.icon ??
|
|
322
|
+
name=${n.icon ?? c}
|
|
322
323
|
role="img"
|
|
323
324
|
aria-hidden="true"
|
|
324
325
|
></sbb-seat-reservation-graphic>
|
|
@@ -338,7 +339,7 @@ var y = ":host{--sbb-seat-reservation-grid-size: 16px;--sbb-seat-reservation-hei
|
|
|
338
339
|
this.preventCoachScrollByPlaceClick ? this.focusPlaceElement(this.currSelectedPlace) : this.preselectPlaceInCoach(), this.isAutoScrolling = !1;
|
|
339
340
|
}
|
|
340
341
|
_popover(e, t) {
|
|
341
|
-
return
|
|
342
|
+
return o`
|
|
342
343
|
<sbb-popover trigger="${e}" hover-trigger="">
|
|
343
344
|
<p class="sbb-text-s sbb-sr-popover">${t}</p>
|
|
344
345
|
</sbb-popover>
|
|
@@ -348,24 +349,24 @@ var y = ":host{--sbb-seat-reservation-grid-size: 16px;--sbb-seat-reservation-hei
|
|
|
348
349
|
this.shadowRoot?.querySelectorAll("sbb-popover:is(:state(state-opened),[state--state-opened])").forEach((e) => e.close());
|
|
349
350
|
}
|
|
350
351
|
_getDescriptionTableCoach(e) {
|
|
351
|
-
if (e.type === "LOCOMOTIVE_COACH") return
|
|
352
|
-
if (!e.places?.length) return
|
|
352
|
+
if (e.type === "LOCOMOTIVE_COACH") return f("COACH_LOCOMOTIVE", this._language.current);
|
|
353
|
+
if (!e.places?.length) return f("COACH_BLOCKED_TABLE_CAPTION", this._language.current, [e.id]);
|
|
353
354
|
let t, n = this._getTitleDescriptionListString(e.graphicElements), r = this._getTitleDescriptionListString(e.serviceElements);
|
|
354
|
-
if (t =
|
|
355
|
-
let n = this.getAvailableFreePlacesNumFromCoach(e.places), r =
|
|
355
|
+
if (t = f("COACH_TABLE_CAPTION", this._language.current, [e.id]), !this.hasNavigation) {
|
|
356
|
+
let n = this.getAvailableFreePlacesNumFromCoach(e.places), r = f("COACH_AVAILABLE_NUMBER_OF_PLACES", this._language.current, [n.seats, n.bicycles]);
|
|
356
357
|
t = t.concat(". ").concat(r).concat(". ");
|
|
357
358
|
}
|
|
358
|
-
return (n || r) && (t += ". " +
|
|
359
|
+
return (n || r) && (t += ". " + f("COACH_AVAILABLE_SERVICES", this._language.current) + ": ", t += r + ", " + n + "."), t;
|
|
359
360
|
}
|
|
360
361
|
_getTitleDescriptionListString(e) {
|
|
361
362
|
let t = [];
|
|
362
363
|
return e?.map((e) => {
|
|
363
364
|
let n = e.icon;
|
|
364
365
|
if (!n) return null;
|
|
365
|
-
let r = t.indexOf(n) > -1, i =
|
|
366
|
+
let r = t.indexOf(n) > -1, i = f(e.icon, this._language.current), a = this.notFixedRotatableAreaIcons.indexOf(n) === -1 && this.notAreaElements.indexOf(n) === -1;
|
|
366
367
|
return r || t.push(e.icon), i && !r && a ? i : null;
|
|
367
368
|
}).filter((e) => !!e).join(", ");
|
|
368
369
|
}
|
|
369
370
|
};
|
|
370
371
|
//#endregion
|
|
371
|
-
export {
|
|
372
|
+
export { x as t };
|
package/seat-reservation.js
CHANGED
|
@@ -9,7 +9,7 @@ import { t as u } from "./seat-reservation-navigation-services.component-BSeCIGn
|
|
|
9
9
|
import { t as d } from "./seat-reservation-place-control.component-DOEKL6FP.js";
|
|
10
10
|
import { t as f } from "./seat-reservation-scoped.component-CdB7HYzl.js";
|
|
11
11
|
import { SeatReservationBaseElement as p } from "./seat-reservation/seat-reservation/seat-reservation-base-element.js";
|
|
12
|
-
import { t as m } from "./seat-reservation.component-
|
|
12
|
+
import { t as m } from "./seat-reservation.component-SoXTIEnc.js";
|
|
13
13
|
import "./seat-reservation.pure.js";
|
|
14
14
|
m.define(), s.define(), c.define(), l.define(), u.define(), d.define(), f.define();
|
|
15
15
|
//#endregion
|
package/seat-reservation.pure.js
CHANGED
|
@@ -10,5 +10,5 @@ import { t as u } from "./seat-reservation-navigation-services.component-BSeCIGn
|
|
|
10
10
|
import { t as d } from "./seat-reservation-place-control.component-DOEKL6FP.js";
|
|
11
11
|
import { t as f } from "./seat-reservation-scoped.component-CdB7HYzl.js";
|
|
12
12
|
import { SeatReservationBaseElement as p } from "./seat-reservation/seat-reservation/seat-reservation-base-element.js";
|
|
13
|
-
import { t as m } from "./seat-reservation.component-
|
|
13
|
+
import { t as m } from "./seat-reservation.component-SoXTIEnc.js";
|
|
14
14
|
export { s as SbbSeatReservationAreaElement, m as SbbSeatReservationElement, c as SbbSeatReservationGraphicElement, l as SbbSeatReservationNavigationCoachElement, u as SbbSeatReservationNavigationServicesElement, d as SbbSeatReservationPlaceControlElement, f as SbbSeatReservationScopedElement, p as SeatReservationBaseElement, o as getI18nSeatReservation, r as mapCoachInfosToCoachSelection, i as mapIconToSvg, t as mapPlaceAndCoachToSeatReservationPlaceSelection, n as mapPlaceInfosToPlaceSelection, e as mapRawDataToSeatReservation, a as svgs };
|