@sbb-esta/lyne-elements-dev 5.1.0-dev.1782715106 → 5.1.0-dev.1782718456
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/alert.pure.js +14 -14
- package/breadcrumb.pure.js +3 -3
- package/calendar.pure.js +67 -67
- package/core.js +2 -2
- package/custom-elements.json +24 -24
- package/development/alert.pure.js +14 -14
- package/development/breadcrumb.pure.js +3 -3
- package/development/calendar.pure.js +67 -67
- package/development/core.js +2 -2
- package/development/expansion-panel.pure.js +6 -6
- package/development/image.pure.js +8 -8
- package/development/map-container.pure.js +8 -8
- package/development/notification.pure.js +12 -9
- package/development/option.pure.js +11 -11
- package/development/paginator.pure.js +18 -18
- package/development/signet.pure.js +17 -17
- package/development/tabs.pure.js +4 -4
- package/development/timetable-form.pure.js +3 -3
- package/development/timetable-occupancy.pure.js +22 -22
- package/development/toast.pure.js +6 -6
- package/development/train.pure.js +29 -29
- package/development/visual-checkbox.pure.js +13 -13
- package/expansion-panel.pure.js +6 -6
- package/image.pure.js +8 -8
- package/map-container.pure.js +8 -8
- package/notification.pure.js +12 -9
- package/option.pure.js +11 -11
- package/package.json +2 -2
- package/paginator.pure.js +18 -18
- package/signet.pure.js +17 -17
- package/tabs.pure.js +4 -4
- package/timetable-form.pure.js +3 -3
- package/timetable-occupancy.pure.js +22 -22
- package/toast.pure.js +6 -6
- package/train.pure.js +29 -29
- package/visual-checkbox.pure.js +13 -13
|
@@ -1604,17 +1604,17 @@ let SbbCalendarElement = (() => {
|
|
|
1604
1604
|
${this._weekdays.map((weekDay, index) => html`
|
|
1605
1605
|
<th class="sbb-calendar__table-header-cell">
|
|
1606
1606
|
${this.multiple ? html`
|
|
1607
|
-
|
|
1608
|
-
|
|
1609
|
-
|
|
1607
|
+
<sbb-calendar-weekday
|
|
1608
|
+
.value=${weekDay}
|
|
1609
|
+
@click=${() => {
|
|
1610
1610
|
const days = weeksForSelectMultipleWeekDays.filter((day) => day.weekDayValue === (index + 1) % 7);
|
|
1611
1611
|
this._selectMultipleDates(days);
|
|
1612
1612
|
}}
|
|
1613
|
-
|
|
1614
|
-
|
|
1615
|
-
|
|
1616
|
-
|
|
1617
|
-
|
|
1613
|
+
></sbb-calendar-weekday>
|
|
1614
|
+
` : html`
|
|
1615
|
+
<span class="sbb-screen-reader-only">${weekDay.long}</span>
|
|
1616
|
+
<span aria-hidden="true">${weekDay.narrow}</span>
|
|
1617
|
+
`}
|
|
1618
1618
|
</th>
|
|
1619
1619
|
`)}
|
|
1620
1620
|
</tr>
|
|
@@ -1625,23 +1625,23 @@ let SbbCalendarElement = (() => {
|
|
|
1625
1625
|
if (rowIndex === 0 && firstRowOffset) return html`
|
|
1626
1626
|
<tr>
|
|
1627
1627
|
${this.weekNumbers ? html`
|
|
1628
|
-
|
|
1629
|
-
|
|
1630
|
-
|
|
1631
|
-
|
|
1632
|
-
|
|
1628
|
+
<td class="sbb-calendar__table-header-cell-vertical">
|
|
1629
|
+
${this.multiple ? html`
|
|
1630
|
+
<sbb-calendar-weeknumber
|
|
1631
|
+
.value=${weekNumbers[0]}
|
|
1632
|
+
@click=${() => {
|
|
1633
1633
|
const days = weeksForSelectMultipleWeekNumbers.filter((day) => day.weekValue === weekNumbers[0]);
|
|
1634
1634
|
this._selectMultipleDates(days);
|
|
1635
1635
|
}}
|
|
1636
|
-
|
|
1637
|
-
|
|
1638
|
-
|
|
1639
|
-
|
|
1640
|
-
|
|
1641
|
-
|
|
1642
|
-
|
|
1643
|
-
|
|
1644
|
-
|
|
1636
|
+
></sbb-calendar-weeknumber>
|
|
1637
|
+
` : html`
|
|
1638
|
+
<span class="sbb-screen-reader-only"
|
|
1639
|
+
>${`${i18nCalendarWeekNumber[this._language.current]} ${weekNumbers[0]}`}</span
|
|
1640
|
+
>
|
|
1641
|
+
<span aria-hidden="true">${weekNumbers[0]}</span>
|
|
1642
|
+
`}
|
|
1643
|
+
</td>
|
|
1644
|
+
` : nothing}
|
|
1645
1645
|
${[...Array(firstRowOffset).keys()].map(() => html`<td class="sbb-calendar__table-data"></td>`)}
|
|
1646
1646
|
${this._createDayCells(week)}
|
|
1647
1647
|
</tr>
|
|
@@ -1649,23 +1649,23 @@ let SbbCalendarElement = (() => {
|
|
|
1649
1649
|
return html`
|
|
1650
1650
|
<tr>
|
|
1651
1651
|
${this.weekNumbers ? html`
|
|
1652
|
-
|
|
1653
|
-
|
|
1654
|
-
|
|
1655
|
-
|
|
1656
|
-
|
|
1652
|
+
<td class="sbb-calendar__table-header-cell-vertical">
|
|
1653
|
+
${this.multiple ? html`
|
|
1654
|
+
<sbb-calendar-weeknumber
|
|
1655
|
+
.value=${weekNumbers[rowIndex]}
|
|
1656
|
+
@click=${() => {
|
|
1657
1657
|
const days = weeksForSelectMultipleWeekNumbers.filter((day) => day.weekValue === weekNumbers[rowIndex]);
|
|
1658
1658
|
this._selectMultipleDates(days);
|
|
1659
1659
|
}}
|
|
1660
|
-
|
|
1661
|
-
|
|
1662
|
-
|
|
1663
|
-
|
|
1664
|
-
|
|
1665
|
-
|
|
1666
|
-
|
|
1667
|
-
|
|
1668
|
-
|
|
1660
|
+
></sbb-calendar-weeknumber>
|
|
1661
|
+
` : html`
|
|
1662
|
+
<span class="sbb-screen-reader-only"
|
|
1663
|
+
>${`${i18nCalendarWeekNumber[this._language.current]} ${weekNumbers[rowIndex]}`}</span
|
|
1664
|
+
>
|
|
1665
|
+
<span aria-hidden="true">${weekNumbers[rowIndex]}</span>
|
|
1666
|
+
`}
|
|
1667
|
+
</td>
|
|
1668
|
+
` : nothing}
|
|
1669
1669
|
${this._createDayCells(week)}
|
|
1670
1670
|
</tr>
|
|
1671
1671
|
`;
|
|
@@ -1692,30 +1692,30 @@ let SbbCalendarElement = (() => {
|
|
|
1692
1692
|
@focusout=${(event) => this._handleTableBlur(event.relatedTarget)}
|
|
1693
1693
|
>
|
|
1694
1694
|
${this.weekNumbers ? html`
|
|
1695
|
-
|
|
1696
|
-
|
|
1697
|
-
|
|
1698
|
-
|
|
1699
|
-
|
|
1700
|
-
|
|
1701
|
-
|
|
1702
|
-
|
|
1703
|
-
|
|
1695
|
+
<thead>
|
|
1696
|
+
<tr>
|
|
1697
|
+
<th class="sbb-calendar__table-data"></th>
|
|
1698
|
+
${weekNumbers.map((weekNumber) => html`
|
|
1699
|
+
<th class="sbb-calendar__table-header-cell">
|
|
1700
|
+
${this.multiple ? html`
|
|
1701
|
+
<sbb-calendar-weeknumber
|
|
1702
|
+
.value=${weekNumber}
|
|
1703
|
+
@click=${() => {
|
|
1704
1704
|
const days = weeksForSelectMultipleWeekNumbers.filter((day) => day.weekValue === weekNumber);
|
|
1705
1705
|
this._selectMultipleDates(days);
|
|
1706
1706
|
}}
|
|
1707
|
-
|
|
1708
|
-
|
|
1709
|
-
|
|
1710
|
-
|
|
1711
|
-
|
|
1712
|
-
|
|
1713
|
-
|
|
1714
|
-
|
|
1715
|
-
|
|
1716
|
-
|
|
1717
|
-
|
|
1718
|
-
|
|
1707
|
+
></sbb-calendar-weeknumber>
|
|
1708
|
+
` : html`
|
|
1709
|
+
<span class="sbb-screen-reader-only"
|
|
1710
|
+
>${`${i18nCalendarWeekNumber[this._language.current]} ${weekNumber}`}</span
|
|
1711
|
+
>
|
|
1712
|
+
<span aria-hidden="true">${weekNumber}</span>
|
|
1713
|
+
`}
|
|
1714
|
+
</th>
|
|
1715
|
+
`)}
|
|
1716
|
+
</tr>
|
|
1717
|
+
</thead>
|
|
1718
|
+
` : nothing}
|
|
1719
1719
|
<tbody>
|
|
1720
1720
|
${weeks.map((week, rowIndex) => {
|
|
1721
1721
|
const weekday = this._weekdays[rowIndex];
|
|
@@ -1723,16 +1723,16 @@ let SbbCalendarElement = (() => {
|
|
|
1723
1723
|
<tr>
|
|
1724
1724
|
<td class="sbb-calendar__table-header-cell-vertical">
|
|
1725
1725
|
${this.multiple ? html`
|
|
1726
|
-
|
|
1727
|
-
|
|
1728
|
-
|
|
1729
|
-
|
|
1730
|
-
|
|
1731
|
-
|
|
1732
|
-
|
|
1733
|
-
|
|
1734
|
-
|
|
1735
|
-
|
|
1726
|
+
<sbb-calendar-weekday
|
|
1727
|
+
.value=${weekday}
|
|
1728
|
+
@click=${() => this._selectMultipleDates(week)}
|
|
1729
|
+
>
|
|
1730
|
+
${weekday.narrow}
|
|
1731
|
+
</sbb-calendar-weekday>
|
|
1732
|
+
` : html`
|
|
1733
|
+
<span class="sbb-screen-reader-only">${weekday.long}</span>
|
|
1734
|
+
<span aria-hidden="true">${weekday.narrow}</span>
|
|
1735
|
+
`}
|
|
1736
1736
|
</td>
|
|
1737
1737
|
${rowIndex < weekOffset ? html`<td class="sbb-calendar__table-data"></td>` : nothing}
|
|
1738
1738
|
${this._createDayCells(week)}
|
package/development/core.js
CHANGED
|
@@ -2696,8 +2696,8 @@ let SbbLinkBaseElement = (() => {
|
|
|
2696
2696
|
${renderContent}
|
|
2697
2697
|
</a>
|
|
2698
2698
|
${opensInNewWindow ? html`<span id="sbb-link-new-window" hidden
|
|
2699
|
-
|
|
2700
|
-
|
|
2699
|
+
>${i18nTargetOpensInNewWindow[this.language.current]}</span
|
|
2700
|
+
>` : nothing}
|
|
2701
2701
|
`;
|
|
2702
2702
|
}
|
|
2703
2703
|
};
|
|
@@ -111,12 +111,12 @@ var SbbExpansionPanelHeaderElement = class extends SbbDisabledTabIndexActionMixi
|
|
|
111
111
|
<slot></slot>
|
|
112
112
|
</span>
|
|
113
113
|
${!this.disabled ? html`<span class="sbb-expansion-panel-header__toggle">
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
114
|
+
<sbb-icon
|
|
115
|
+
name="chevron-small-down-medium"
|
|
116
|
+
class="sbb-expansion-panel-header__toggle-icon"
|
|
117
|
+
>
|
|
118
|
+
</sbb-icon>
|
|
119
|
+
</span>` : nothing}
|
|
120
120
|
`;
|
|
121
121
|
}
|
|
122
122
|
};
|
|
@@ -715,14 +715,14 @@ let SbbImageElement = (() => {
|
|
|
715
715
|
return html`
|
|
716
716
|
<div class="sbb-image__wrapper">
|
|
717
717
|
${!this.skipLqip ? html`<img
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
718
|
+
alt=""
|
|
719
|
+
class="sbb-image__blurred"
|
|
720
|
+
src=${imageUrlLQIP}
|
|
721
|
+
width="1000"
|
|
722
|
+
height="562"
|
|
723
|
+
loading=${this.loading ?? nothing}
|
|
724
|
+
decoding=${this.decoding ?? nothing}
|
|
725
|
+
/>` : nothing}
|
|
726
726
|
|
|
727
727
|
<picture>
|
|
728
728
|
<!-- render picture element sources -->
|
|
@@ -159,14 +159,14 @@ let SbbMapContainerElement = (() => {
|
|
|
159
159
|
<slot></slot>
|
|
160
160
|
|
|
161
161
|
${!this.hideScrollUpButton ? html`<sbb-accent-button
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
162
|
+
class="sbb-map-container__sidebar-button"
|
|
163
|
+
size="l"
|
|
164
|
+
icon-name="location-pin-map-small"
|
|
165
|
+
@click=${() => this._onScrollButtonClick()}
|
|
166
|
+
?inert=${!this._scrollUpButtonVisible}
|
|
167
|
+
>
|
|
168
|
+
${i18nMapContainerButtonLabel[this._language.current]}
|
|
169
|
+
</sbb-accent-button>` : nothing}
|
|
170
170
|
</div>
|
|
171
171
|
`;
|
|
172
172
|
}
|
|
@@ -240,15 +240,18 @@ let SbbNotificationElement = (() => {
|
|
|
240
240
|
</span>
|
|
241
241
|
|
|
242
242
|
${!this.readOnly ? html`
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
243
|
+
<sbb-divider
|
|
244
|
+
class="sbb-notification__divider"
|
|
245
|
+
orientation="vertical"
|
|
246
|
+
></sbb-divider>
|
|
247
|
+
<sbb-secondary-button
|
|
248
|
+
size=${this.size || nothing}
|
|
249
|
+
icon-name="cross-small"
|
|
250
|
+
@click=${() => this.close()}
|
|
251
|
+
aria-label=${i18nCloseNotification[this._language.current]}
|
|
252
|
+
class="sbb-notification__close"
|
|
253
|
+
></sbb-secondary-button>
|
|
254
|
+
` : nothing}
|
|
252
255
|
</div>
|
|
253
256
|
</div>
|
|
254
257
|
`;
|
|
@@ -129,11 +129,11 @@ let SbbOptgroupBaseElement = (() => {
|
|
|
129
129
|
render() {
|
|
130
130
|
return html`
|
|
131
131
|
${this.label ? html`
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
132
|
+
<div class="sbb-optgroup__label" aria-hidden="true">
|
|
133
|
+
<div class="sbb-optgroup__icon-space"></div>
|
|
134
|
+
<span>${this.label}</span>
|
|
135
|
+
</div>
|
|
136
|
+
` : nothing}
|
|
137
137
|
<slot @slotchange=${this._handleSlotchange}></slot>
|
|
138
138
|
`;
|
|
139
139
|
}
|
|
@@ -698,12 +698,12 @@ var SbbOptionElement = class extends SbbOptionBaseElement {
|
|
|
698
698
|
|
|
699
699
|
<!-- Checkbox -->
|
|
700
700
|
${this._isMultiple() ? html`
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
701
|
+
<sbb-visual-checkbox
|
|
702
|
+
?checked=${this.selected}
|
|
703
|
+
?disabled=${this.disabled || this.disabledFromGroup}
|
|
704
|
+
?negative=${this.matches?.(":is(:state(negative),[state--negative])")}
|
|
705
|
+
></sbb-visual-checkbox>
|
|
706
|
+
` : nothing}
|
|
707
707
|
`;
|
|
708
708
|
}
|
|
709
709
|
renderLabel() {
|
|
@@ -695,24 +695,24 @@ let SbbPaginatorElement = (() => {
|
|
|
695
695
|
return html`
|
|
696
696
|
<ul class="sbb-paginator__pages">
|
|
697
697
|
${repeat(this._getVisiblePagesIndex(), (item) => item === "ellipsis" ? html`
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
698
|
+
<li class="sbb-paginator__page--ellipsis">
|
|
699
|
+
<span class="sbb-paginator__page--ellipsis-item">…</span>
|
|
700
|
+
</li>
|
|
701
|
+
` : html`
|
|
702
|
+
<li class="sbb-paginator__page--number">
|
|
703
|
+
<button
|
|
704
|
+
?data-selected=${this.pageIndex === item}
|
|
705
|
+
?disabled=${this.disabled}
|
|
706
|
+
class="sbb-paginator__page--number-item"
|
|
707
|
+
data-index=${item}
|
|
708
|
+
aria-label="${this.accessibilityPageLabel ? this.accessibilityPageLabel : i18nPage[this.language.current]} ${item + 1}"
|
|
709
|
+
aria-current=${this.pageIndex === item ? "true" : nothing}
|
|
710
|
+
@click=${() => this._onPageNumberClick(item)}
|
|
711
|
+
>
|
|
712
|
+
<span class="sbb-paginator__page--number-item-label">${item + 1}</span>
|
|
713
|
+
</button>
|
|
714
|
+
</li>
|
|
715
|
+
`)}
|
|
716
716
|
</ul>
|
|
717
717
|
`;
|
|
718
718
|
}
|
|
@@ -90,23 +90,23 @@ let SbbSignetElement = (() => {
|
|
|
90
90
|
return html`
|
|
91
91
|
<span class="sbb-signet__svg-container">
|
|
92
92
|
${this.protectiveRoom === "panel" ? html`
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
93
|
+
<svg focusable="false" viewBox="0 0 143 48" xmlns="http://www.w3.org/2000/svg">
|
|
94
|
+
<title .textContent=${this.accessibilityLabel}></title>
|
|
95
|
+
<path id="sbb-signet__panel" stroke-width="1" d="M1 47h141V1H1v46z"></path>
|
|
96
|
+
<path
|
|
97
|
+
id="sbb-signet__icon"
|
|
98
|
+
d="M87 40h9.3L83.8 27.7h15.5V40h7.4V27.7h15.6L109.7 40h9.3l16-16-15.9-16h-9.3l12.5 12.3h-15.6V8h-7.4v12.3H83.8L96.3 8H87L71 24l16 16z"
|
|
99
|
+
></path>
|
|
100
|
+
</svg>
|
|
101
|
+
` : html`
|
|
102
|
+
<svg focusable="false" viewBox="0 0 80 40" xmlns="http://www.w3.org/2000/svg">
|
|
103
|
+
<title .textContent=${this.accessibilityLabel}></title>
|
|
104
|
+
<path
|
|
105
|
+
id="sbb-signet__icon"
|
|
106
|
+
d="M20.0265 40H31.6821L16 24.6154H35.3907V40H44.6093V24.6154H64.106L48.4238 40H60.0795L80 20.0531L60.0795 0H48.4238L64.106 15.3846H44.6093V0H35.3907V15.3846H16L31.6821 0H20.0265L0 20.0531L20.0265 40Z"
|
|
107
|
+
></path>
|
|
108
|
+
</svg>
|
|
109
|
+
`}
|
|
110
110
|
</span>
|
|
111
111
|
`;
|
|
112
112
|
}
|
package/development/tabs.pure.js
CHANGED
|
@@ -299,10 +299,10 @@ let SbbTabGroupElement = (() => {
|
|
|
299
299
|
<slot name="tab-bar" @slotchange=${this._onLabelSlotChange}></slot>
|
|
300
300
|
</div>
|
|
301
301
|
${!this.fixedHeight ? html`
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
302
|
+
<div class="sbb-tab-group-content">
|
|
303
|
+
<slot @slotchange=${this._onContentSlotChange}></slot>
|
|
304
|
+
</div>
|
|
305
|
+
` : html`<slot @slotchange=${this._onContentSlotChange}></slot>`}
|
|
306
306
|
`;
|
|
307
307
|
}
|
|
308
308
|
};
|
|
@@ -60,9 +60,9 @@ var SbbTimetableFormFieldElement = class extends SbbFormFieldElement {
|
|
|
60
60
|
render() {
|
|
61
61
|
return html`
|
|
62
62
|
${this._routeIcon ? html` <sbb-icon
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
63
|
+
name="route-circle-start-small"
|
|
64
|
+
class="sbb-timetable-form-field__start-route-icon"
|
|
65
|
+
></sbb-icon>` : html` <span class="sbb-timetable-form-field__via-route-icon"></span> `}
|
|
66
66
|
${super.render()}
|
|
67
67
|
`;
|
|
68
68
|
}
|
|
@@ -97,28 +97,28 @@ let SbbTimetableOccupancyElement = (() => {
|
|
|
97
97
|
}
|
|
98
98
|
render() {
|
|
99
99
|
return html` ${(this.firstClassOccupancy || this.secondClassOccupancy) && html`
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
100
|
+
<ul
|
|
101
|
+
class="sbb-timetable-occupancy__list"
|
|
102
|
+
role=${!this.firstClassOccupancy || !this.secondClassOccupancy ? "presentation" : nothing}
|
|
103
|
+
>
|
|
104
|
+
${[this.firstClassOccupancy, this.secondClassOccupancy].map((occupancy, index) => occupancy && html`
|
|
105
|
+
<li class="sbb-timetable-occupancy__list-item">
|
|
106
|
+
<span class="sbb-timetable-occupancy__list-item-class" aria-hidden="true">
|
|
107
|
+
${this.firstClassOccupancy && index === 0 ? "1" : "2"}.
|
|
108
|
+
</span>
|
|
109
|
+
<span class="sbb-screen-reader-only">
|
|
110
|
+
${`${i18nClass[this.firstClassOccupancy && index === 0 ? "first" : "second"][this._language.current]}.`}
|
|
111
|
+
</span>
|
|
112
|
+
<sbb-timetable-occupancy-icon
|
|
113
|
+
class="sbb-timetable-occupancy__list-item-icon"
|
|
114
|
+
?negative=${this.negative}
|
|
115
|
+
.occupancy=${occupancy}
|
|
116
|
+
>
|
|
117
|
+
</sbb-timetable-occupancy-icon>
|
|
118
|
+
</li>
|
|
119
|
+
`)}
|
|
120
|
+
</ul>
|
|
121
|
+
`}`;
|
|
122
122
|
}
|
|
123
123
|
};
|
|
124
124
|
})();
|
|
@@ -250,12 +250,12 @@ let SbbToastElement = (() => {
|
|
|
250
250
|
?negative=${this._isLightMode()}
|
|
251
251
|
></sbb-divider>
|
|
252
252
|
${!this.readOnly ? html`<sbb-transparent-button
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
253
|
+
class="sbb-toast__close-button"
|
|
254
|
+
icon-name="cross-small"
|
|
255
|
+
?negative=${this._isLightMode()}
|
|
256
|
+
aria-label=${i18nCloseAlert[this._language.current]}
|
|
257
|
+
sbb-toast-close
|
|
258
|
+
></sbb-transparent-button>` : nothing}
|
|
259
259
|
</div>
|
|
260
260
|
</div>
|
|
261
261
|
</div>
|
|
@@ -243,18 +243,18 @@ let SbbTrainFormationElement = (() => {
|
|
|
243
243
|
render() {
|
|
244
244
|
return html`
|
|
245
245
|
${this._sectors.length && this._sectors[0].label !== void 0 ? html`<div class="sbb-train-formation__sectors" aria-hidden="true">
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
246
|
+
${this._sectors.map((aggregatedSector) => html`<span
|
|
247
|
+
class="sbb-train-formation__sector"
|
|
248
|
+
style=${styleMap({
|
|
249
249
|
"--sbb-train-formation-wagon-count": aggregatedSector.wagonCount,
|
|
250
250
|
"--sbb-train-formation-wagon-blocked-passage-count": aggregatedSector.blockedPassageCount
|
|
251
251
|
})}
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
252
|
+
>
|
|
253
|
+
<span class="sbb-train-formation__sector-sticky-wrapper">
|
|
254
|
+
${`${aggregatedSector.wagonCount === 1 && aggregatedSector.label ? i18nSectorShort[this._language.current] : i18nSector[this._language.current]} ${aggregatedSector.label ? aggregatedSector.label : ""}`}
|
|
255
|
+
</span>
|
|
256
|
+
</span>`)}
|
|
257
|
+
</div>` : nothing}
|
|
258
258
|
|
|
259
259
|
<div class="sbb-train-formation__trains">
|
|
260
260
|
${this.renderList({
|
|
@@ -636,13 +636,13 @@ const SbbTrainWagonMixin = (superClass) => {
|
|
|
636
636
|
${this.label ? html$1`<li class="sbb-screen-reader-only">${labelString}</li>` : nothing}
|
|
637
637
|
${this.wagonClass && this.wagonType !== "closed" ? html$1`<li class="sbb-train-wagon__class">${wagonClassContent}</li>` : nothing}
|
|
638
638
|
${this.occupancy && this.wagonType !== "closed" ? html$1`<sbb-timetable-occupancy-icon
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
639
|
+
class="sbb-train-wagon__occupancy"
|
|
640
|
+
role="listitem"
|
|
641
|
+
occupancy=${this.occupancy}
|
|
642
|
+
></sbb-timetable-occupancy-icon>` : nothing}
|
|
643
643
|
${hasBlockedPassageEntry ? html$1`<li class="sbb-screen-reader-only">
|
|
644
|
-
|
|
645
|
-
|
|
644
|
+
${i18nBlockedPassage[blockedPassage][this._language.current]}
|
|
645
|
+
</li>` : nothing}
|
|
646
646
|
</ul>`, () => html$1`<div class="sbb-train-wagon__compartment">
|
|
647
647
|
<span class="sbb-screen-reader-only">
|
|
648
648
|
${`${this._wagonTypeLabel()}${this.sector ? `, ${sectorString}` : ""}`}
|
|
@@ -650,17 +650,17 @@ const SbbTrainWagonMixin = (superClass) => {
|
|
|
650
650
|
${this.label ? html$1`<span class="sbb-screen-reader-only">${labelString}</span>` : nothing}
|
|
651
651
|
${this.wagonClass && this.wagonType !== "closed" ? html$1`<span class="sbb-train-wagon__class">${wagonClassContent}</span>` : nothing}
|
|
652
652
|
${this.occupancy && this.wagonType !== "closed" ? html$1`<sbb-timetable-occupancy-icon
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
653
|
+
class="sbb-train-wagon__occupancy"
|
|
654
|
+
occupancy=${this.occupancy}
|
|
655
|
+
></sbb-timetable-occupancy-icon>` : nothing}
|
|
656
656
|
${hasBlockedPassageEntry ? html$1`<span class="sbb-screen-reader-only">
|
|
657
|
-
|
|
658
|
-
|
|
657
|
+
${i18nBlockedPassage[blockedPassage][this._language.current]}
|
|
658
|
+
</span>` : nothing}
|
|
659
659
|
</div> `)}
|
|
660
660
|
${wagonTypeToIconMap[this.wagonType] ? html$1`<sbb-icon
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
661
|
+
name=${wagonTypeToIconMap[this.wagonType]}
|
|
662
|
+
class="sbb-train-wagon__main-icon"
|
|
663
|
+
></sbb-icon>` : nothing}
|
|
664
664
|
<svg class="sbb-train-wagon__shape" viewBox="0 0 84 36" aria-hidden="true">
|
|
665
665
|
<path d=${path}></path>
|
|
666
666
|
<path
|
|
@@ -673,18 +673,18 @@ const SbbTrainWagonMixin = (superClass) => {
|
|
|
673
673
|
></path>
|
|
674
674
|
</svg>
|
|
675
675
|
${this.additionalAccessibilityText ? html$1`<span class="sbb-screen-reader-only"
|
|
676
|
-
|
|
677
|
-
|
|
676
|
+
>, ${this.additionalAccessibilityText}</span
|
|
677
|
+
>` : nothing}
|
|
678
678
|
<span
|
|
679
679
|
class="sbb-train-wagon__information-wrapper"
|
|
680
680
|
?hidden=${!this.listChildren.length && !this.label}
|
|
681
681
|
>
|
|
682
682
|
${this.label ? html$1`<span aria-hidden="true" class="sbb-train-wagon__label">${this.label}</span>` : nothing}
|
|
683
683
|
${this.label && this.listChildren.length ? html$1`<sbb-divider
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
684
|
+
orientation=${this.orientation === "vertical" ? "horizontal" : "vertical"}
|
|
685
|
+
aria-hidden="true"
|
|
686
|
+
class="sbb-train-wagon__label-divider"
|
|
687
|
+
></sbb-divider>` : nothing}
|
|
688
688
|
${this.renderList({
|
|
689
689
|
class: "sbb-train-wagon__attribute-icon-list",
|
|
690
690
|
ariaLabel: i18nAdditionalWagonInformationHeading[this._language.current]
|