@sbb-esta/lyne-elements 1.11.3 → 1.12.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/_index.scss +1 -1
- package/core/i18n/i18n.d.ts +5 -0
- package/core/i18n/i18n.d.ts.map +1 -1
- package/core/i18n.js +85 -55
- package/core/styles/core/functions.scss +1 -1
- package/core/styles/lists.scss +4 -0
- package/core/styles/mixins/helpers.scss +1 -1
- package/core/styles/mixins/lists.scss +128 -77
- package/core/styles/mixins/scrollbar.scss +2 -2
- package/core/styles/mixins/table.scss +4 -6
- package/core/styles/normalize.scss +62 -131
- package/core.css +0 -5
- package/custom-elements.json +781 -77
- package/development/accordion.js +2 -9
- package/development/action-group.js +2 -9
- package/development/alert/alert-group.js +2 -9
- package/development/alert/alert.js +2 -9
- package/development/autocomplete-grid/autocomplete-grid-button.js +2 -9
- package/development/autocomplete-grid/autocomplete-grid-cell.js +2 -9
- package/development/autocomplete-grid/autocomplete-grid-option.js +2 -9
- package/development/autocomplete-grid/autocomplete-grid-row.js +2 -9
- package/development/autocomplete.js +2 -12
- package/development/breadcrumb/breadcrumb-group.js +2 -9
- package/development/breadcrumb/breadcrumb.js +2 -9
- package/development/button/common.js +2 -11
- package/development/button/mini-button-group.js +2 -9
- package/development/button/mini-button.js +2 -9
- package/development/calendar.js +2 -9
- package/development/card/card-badge.js +2 -9
- package/development/card/card.js +2 -9
- package/development/card/common.js +2 -9
- package/development/checkbox/checkbox-group.js +2 -9
- package/development/checkbox/checkbox.js +2 -9
- package/development/checkbox/common.js +1 -8
- package/development/chip.js +2 -9
- package/development/clock.js +2 -9
- package/development/container/container.js +1 -8
- package/development/container/sticky-bar.js +2 -9
- package/development/core/i18n/i18n.d.ts +5 -0
- package/development/core/i18n/i18n.d.ts.map +1 -1
- package/development/core/i18n.js +36 -1
- package/development/core/mixins.js +2 -9
- package/development/datepicker/datepicker-next-day.js +2 -9
- package/development/datepicker/datepicker-previous-day.js +2 -9
- package/development/datepicker/datepicker-toggle.js +2 -9
- package/development/datepicker/datepicker.js +2 -9
- package/development/dialog/dialog-actions.js +2 -9
- package/development/dialog/dialog-content.js +2 -11
- package/development/dialog/dialog-title.js +2 -9
- package/development/dialog/dialog.js +2 -9
- package/development/divider.js +2 -9
- package/development/expansion-panel/expansion-panel-content.js +2 -9
- package/development/expansion-panel/expansion-panel-header.js +2 -9
- package/development/expansion-panel/expansion-panel.js +2 -9
- package/development/file-selector.js +2 -9
- package/development/flip-card/flip-card-details.js +2 -9
- package/development/flip-card/flip-card-summary.js +2 -9
- package/development/flip-card/flip-card.js +2 -9
- package/development/footer.js +2 -9
- package/development/form-error.js +2 -9
- package/development/form-field/form-field-clear.js +2 -9
- package/development/form-field/form-field.js +1 -12
- package/development/header/common.js +2 -9
- package/development/header/header.js +2 -9
- package/development/icon.js +2 -9
- package/development/image/image.d.ts +1 -0
- package/development/image/image.d.ts.map +1 -1
- package/development/image.js +13 -13
- package/development/journey-header.js +2 -9
- package/development/lead-container.js +2 -9
- package/development/link/common.js +4 -25
- package/development/link-list/common.js +2 -9
- package/development/link-list/link-list-anchor.js +2 -9
- package/development/link-list/link-list.js +2 -9
- package/development/loading-indicator.js +2 -10
- package/development/logo.js +2 -9
- package/development/map-container.js +2 -11
- package/development/menu/common.js +2 -9
- package/development/menu/menu.js +2 -11
- package/development/message.js +2 -9
- package/development/navigation/common.js +2 -9
- package/development/navigation/navigation-list.js +2 -9
- package/development/navigation/navigation-marker.js +2 -9
- package/development/navigation/navigation-section.js +2 -11
- package/development/navigation/navigation.js +2 -11
- package/development/notification.js +2 -10
- package/development/option/optgroup.js +2 -9
- package/development/option/option.js +2 -9
- package/development/overlay.js +2 -11
- package/development/paginator/index.d.ts +2 -0
- package/development/paginator/index.d.ts.map +1 -0
- package/development/paginator/paginator.d.ts +91 -0
- package/development/paginator/paginator.d.ts.map +1 -0
- package/development/paginator.d.ts +2 -0
- package/development/paginator.d.ts.map +1 -0
- package/development/paginator.js +519 -0
- package/development/popover/popover-trigger.js +2 -9
- package/development/popover/popover.js +2 -9
- package/development/radio-button/common.js +2 -9
- package/development/radio-button/radio-button-group/radio-button-group.d.ts +1 -1
- package/development/radio-button/radio-button-group/radio-button-group.d.ts.map +1 -1
- package/development/radio-button/radio-button-group.js +19 -22
- package/development/radio-button/radio-button.js +2 -9
- package/development/screen-reader-only.js +2 -9
- package/development/select/select.d.ts +6 -0
- package/development/select/select.d.ts.map +1 -1
- package/development/select.js +23 -18
- package/development/selection-expansion-panel.js +2 -9
- package/development/signet.js +2 -9
- package/development/skiplink-list.js +2 -9
- package/development/slider/slider.d.ts +35 -16
- package/development/slider/slider.d.ts.map +1 -1
- package/development/slider.js +102 -88
- package/development/status.js +2 -9
- package/development/stepper/step-label.js +2 -9
- package/development/stepper/step.js +2 -9
- package/development/stepper/stepper.js +2 -9
- package/development/table/table-wrapper.js +2 -11
- package/development/tabs/tab-group.js +2 -9
- package/development/tabs/tab-label.js +2 -9
- package/development/tabs/tab.js +1 -8
- package/development/tag/tag-group.js +2 -9
- package/development/tag/tag.js +2 -9
- package/development/teaser-hero.js +2 -9
- package/development/teaser-product/common.js +2 -9
- package/development/teaser-product/teaser-product.js +2 -9
- package/development/teaser.js +12 -11
- package/development/time-input.js +2 -9
- package/development/timetable-occupancy-icon.js +2 -9
- package/development/timetable-occupancy.js +2 -9
- package/development/title.js +3 -17
- package/development/toast.js +2 -9
- package/development/toggle/toggle-option.js +2 -9
- package/development/toggle/toggle.js +2 -9
- package/development/toggle-check.js +1 -8
- package/development/train/train-blocked-passage.js +2 -9
- package/development/train/train-formation.js +2 -11
- package/development/train/train-wagon.js +2 -9
- package/development/train/train.js +2 -9
- package/development/visual-checkbox.js +2 -9
- package/image/image.d.ts +1 -0
- package/image/image.d.ts.map +1 -1
- package/image.js +7 -7
- package/index.d.ts +2 -0
- package/index.js +2 -0
- package/lists.css +97 -38
- package/normalize.css +21 -113
- package/package.json +6 -1
- package/paginator/index.d.ts +2 -0
- package/paginator/index.d.ts.map +1 -0
- package/paginator/paginator.d.ts +91 -0
- package/paginator/paginator.d.ts.map +1 -0
- package/paginator.d.ts +2 -0
- package/paginator.d.ts.map +1 -0
- package/paginator.js +263 -0
- package/radio-button/radio-button-group/radio-button-group.d.ts +1 -1
- package/radio-button/radio-button-group/radio-button-group.d.ts.map +1 -1
- package/radio-button/radio-button-group.js +13 -8
- package/select/select.d.ts +6 -0
- package/select/select.d.ts.map +1 -1
- package/select.js +40 -24
- package/slider/slider.d.ts +35 -16
- package/slider/slider.d.ts.map +1 -1
- package/slider.js +111 -78
- package/standard-theme.css +116 -160
- package/teaser.js +16 -16
package/lists.css
CHANGED
|
@@ -8,7 +8,6 @@
|
|
|
8
8
|
margin: 0;
|
|
9
9
|
padding: 0;
|
|
10
10
|
padding-inline-start: var(--sbb-list-padding-inline-start);
|
|
11
|
-
color: var(--sbb-color-iron);
|
|
12
11
|
}
|
|
13
12
|
.sbb-list:where(ol, ul) > li + li,
|
|
14
13
|
.sbb-list:where(ol, ul) :is(ol, ul) > li + li {
|
|
@@ -58,7 +57,6 @@
|
|
|
58
57
|
display: grid;
|
|
59
58
|
grid-template-columns: auto minmax(20%, 1fr);
|
|
60
59
|
gap: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-fixed-2x);
|
|
61
|
-
color: var(--sbb-color-iron);
|
|
62
60
|
}
|
|
63
61
|
.sbb-list:where(dl) :is(dt, dd) {
|
|
64
62
|
margin: 0;
|
|
@@ -66,24 +64,54 @@
|
|
|
66
64
|
}
|
|
67
65
|
|
|
68
66
|
.sbb-step-list {
|
|
69
|
-
--sbb-step-list-
|
|
70
|
-
--sbb-step-list-padding-block: var(--sbb-spacing-fixed-3x);
|
|
67
|
+
--sbb-step-list-dimensions: 2.125rem;
|
|
71
68
|
--sbb-step-list-padding-inline: var(--sbb-spacing-responsive-xxs);
|
|
72
|
-
--sbb-step-list-
|
|
73
|
-
--sbb-step-list-
|
|
74
|
-
--sbb-step-list-text-to-marker-block-offset: calc(
|
|
75
|
-
0.5 *
|
|
76
|
-
(
|
|
77
|
-
var(--sbb-step-list-marker-dimensions) - var(--sbb-typo-line-height-body-text) *
|
|
78
|
-
var(--sbb-text-font-size)
|
|
79
|
-
)
|
|
80
|
-
);
|
|
81
|
-
--sbb-step-list-vertical-gap: var(--sbb-spacing-fixed-1x);
|
|
69
|
+
--sbb-step-list-to-text-gap: var(--sbb-spacing-responsive-xxxs);
|
|
70
|
+
--sbb-step-list-text-to-marker-block-offset: calc(0.5 * (var(--sbb-step-list-dimensions) - var(--sbb-typo-line-height-body-text) * var(--sbb-text-font-size)));
|
|
82
71
|
list-style: none;
|
|
83
72
|
margin: 0;
|
|
84
73
|
padding: 0;
|
|
74
|
+
}
|
|
75
|
+
@media (min-width: calc(52.5rem)) {
|
|
76
|
+
.sbb-step-list:where(.sbb-text-xl) {
|
|
77
|
+
--sbb-step-list-dimensions: 2.5625rem;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
.sbb-step-list > li {
|
|
81
|
+
position: relative;
|
|
82
|
+
padding-inline: calc(var(--sbb-step-list-padding-inline) + var(--sbb-step-list-dimensions) + var(--sbb-step-list-to-text-gap)) var(--sbb-step-list-padding-inline);
|
|
83
|
+
min-height: var(--sbb-step-list-dimensions);
|
|
84
|
+
}
|
|
85
|
+
.sbb-step-list > li::before {
|
|
86
|
+
--sbb-text-font-size: var(--sbb-font-size-text-xxs);
|
|
87
|
+
font-family: var(--sbb-typo-font-family);
|
|
88
|
+
font-weight: normal;
|
|
89
|
+
line-height: var(--sbb-typo-line-height-body-text);
|
|
90
|
+
letter-spacing: var(--sbb-typo-letter-spacing-body-text);
|
|
91
|
+
font-size: var(--sbb-text-font-size);
|
|
92
|
+
font-weight: bold;
|
|
93
|
+
position: absolute;
|
|
94
|
+
height: var(--sbb-step-list-dimensions);
|
|
95
|
+
width: var(--sbb-step-list-dimensions);
|
|
96
|
+
margin-block-start: calc(-1 * var(--sbb-step-list-text-to-marker-block-offset));
|
|
97
|
+
inset-inline-start: var(--sbb-step-list-padding-inline);
|
|
98
|
+
border-radius: 50%;
|
|
99
|
+
}
|
|
100
|
+
.sbb-step-list > li + li {
|
|
101
|
+
margin-block-start: var(--sbb-step-list-vertical-gap);
|
|
102
|
+
}
|
|
103
|
+
.sbb-step-list > li p {
|
|
104
|
+
margin-block: 0;
|
|
105
|
+
}
|
|
106
|
+
.sbb-step-list > li > * + p {
|
|
107
|
+
margin-block-start: var(--sbb-spacing-responsive-xxxs);
|
|
108
|
+
}
|
|
109
|
+
.sbb-step-list {
|
|
110
|
+
--sbb-step-list-padding-block: var(--sbb-spacing-fixed-3x);
|
|
111
|
+
--sbb-step-list-vertical-gap: var(--sbb-spacing-fixed-1x);
|
|
112
|
+
--sbb-step-list-border-radius: var(--sbb-border-radius-4x);
|
|
85
113
|
counter-reset: steps;
|
|
86
|
-
|
|
114
|
+
color: var(--sbb-color-iron);
|
|
87
115
|
}
|
|
88
116
|
.sbb-step-list:where(.sbb-text-s) {
|
|
89
117
|
--sbb-step-list-padding-block: var(--sbb-spacing-fixed-4x);
|
|
@@ -91,18 +119,20 @@
|
|
|
91
119
|
.sbb-step-list:where(.sbb-text-m, .sbb-text-l, .sbb-text-xl) {
|
|
92
120
|
--sbb-step-list-padding-block: var(--sbb-spacing-fixed-5x);
|
|
93
121
|
}
|
|
94
|
-
@media (min-width: calc(52.5rem)) {
|
|
95
|
-
.sbb-step-list:where(.sbb-text-xl) {
|
|
96
|
-
--sbb-step-list-marker-dimensions: 2.5625rem;
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
122
|
.sbb-step-list > li {
|
|
100
|
-
position: relative;
|
|
101
123
|
counter-increment: steps;
|
|
102
124
|
background-color: var(--sbb-color-milk);
|
|
103
125
|
padding-block: calc(var(--sbb-step-list-padding-block) + var(--sbb-step-list-text-to-marker-block-offset)) var(--sbb-step-list-padding-block);
|
|
104
|
-
padding-inline: calc(var(--sbb-step-list-padding-inline) + var(--sbb-step-list-
|
|
105
|
-
min-height: calc(var(--sbb-step-list-
|
|
126
|
+
padding-inline: calc(var(--sbb-step-list-padding-inline) + var(--sbb-step-list-dimensions) + var(--sbb-step-list-to-text-gap)) var(--sbb-step-list-padding-inline);
|
|
127
|
+
min-height: calc(var(--sbb-step-list-dimensions) + 2 * var(--sbb-step-list-padding-block));
|
|
128
|
+
}
|
|
129
|
+
.sbb-step-list > li::before {
|
|
130
|
+
content: counter(steps);
|
|
131
|
+
display: flex;
|
|
132
|
+
align-items: center;
|
|
133
|
+
justify-content: center;
|
|
134
|
+
border: var(--sbb-border-width-1x) solid var(--sbb-color-cement);
|
|
135
|
+
color: var(--sbb-color-charcoal);
|
|
106
136
|
}
|
|
107
137
|
.sbb-step-list > li:first-of-type {
|
|
108
138
|
border-start-start-radius: var(--sbb-step-list-border-radius);
|
|
@@ -112,7 +142,27 @@
|
|
|
112
142
|
border-end-start-radius: var(--sbb-step-list-border-radius);
|
|
113
143
|
border-end-end-radius: var(--sbb-step-list-border-radius);
|
|
114
144
|
}
|
|
115
|
-
|
|
145
|
+
|
|
146
|
+
.sbb-icon-list {
|
|
147
|
+
--sbb-icon-list-dimensions: 2.125rem;
|
|
148
|
+
--sbb-icon-list-padding-inline: var(--sbb-spacing-responsive-xxs);
|
|
149
|
+
--sbb-icon-list-to-text-gap: var(--sbb-spacing-responsive-xxxs);
|
|
150
|
+
--sbb-icon-list-text-to-marker-block-offset: calc(0.5 * (var(--sbb-icon-list-dimensions) - var(--sbb-typo-line-height-body-text) * var(--sbb-text-font-size)));
|
|
151
|
+
list-style: none;
|
|
152
|
+
margin: 0;
|
|
153
|
+
padding: 0;
|
|
154
|
+
}
|
|
155
|
+
@media (min-width: calc(52.5rem)) {
|
|
156
|
+
.sbb-icon-list:where(.sbb-text-xl) {
|
|
157
|
+
--sbb-icon-list-dimensions: 2.5625rem;
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
.sbb-icon-list > li {
|
|
161
|
+
position: relative;
|
|
162
|
+
padding-inline: calc(var(--sbb-icon-list-padding-inline) + var(--sbb-icon-list-dimensions) + var(--sbb-icon-list-to-text-gap)) var(--sbb-icon-list-padding-inline);
|
|
163
|
+
min-height: var(--sbb-icon-list-dimensions);
|
|
164
|
+
}
|
|
165
|
+
.sbb-icon-list > li::before {
|
|
116
166
|
--sbb-text-font-size: var(--sbb-font-size-text-xxs);
|
|
117
167
|
font-family: var(--sbb-typo-font-family);
|
|
118
168
|
font-weight: normal;
|
|
@@ -120,25 +170,34 @@
|
|
|
120
170
|
letter-spacing: var(--sbb-typo-letter-spacing-body-text);
|
|
121
171
|
font-size: var(--sbb-text-font-size);
|
|
122
172
|
font-weight: bold;
|
|
123
|
-
content: counter(steps);
|
|
124
173
|
position: absolute;
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
width: var(--sbb-step-list-marker-dimensions);
|
|
130
|
-
margin-block-start: calc(-1 * var(--sbb-step-list-text-to-marker-block-offset));
|
|
131
|
-
inset-inline-start: var(--sbb-step-list-padding-inline);
|
|
132
|
-
border: var(--sbb-border-width-1x) solid var(--sbb-color-cement);
|
|
174
|
+
height: var(--sbb-icon-list-dimensions);
|
|
175
|
+
width: var(--sbb-icon-list-dimensions);
|
|
176
|
+
margin-block-start: calc(-1 * var(--sbb-icon-list-text-to-marker-block-offset));
|
|
177
|
+
inset-inline-start: var(--sbb-icon-list-padding-inline);
|
|
133
178
|
border-radius: 50%;
|
|
134
|
-
color: var(--sbb-color-charcoal);
|
|
135
179
|
}
|
|
136
|
-
.sbb-
|
|
137
|
-
margin-block-start: var(--sbb-
|
|
180
|
+
.sbb-icon-list > li + li {
|
|
181
|
+
margin-block-start: var(--sbb-icon-list-vertical-gap);
|
|
138
182
|
}
|
|
139
|
-
.sbb-
|
|
183
|
+
.sbb-icon-list > li p {
|
|
140
184
|
margin-block: 0;
|
|
141
185
|
}
|
|
142
|
-
.sbb-
|
|
186
|
+
.sbb-icon-list > li > * + p {
|
|
143
187
|
margin-block-start: var(--sbb-spacing-responsive-xxxs);
|
|
188
|
+
}
|
|
189
|
+
.sbb-icon-list {
|
|
190
|
+
--sbb-icon-list-marker-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M3 12a9 9 0 0 1 9-9 9 9 0 0 1 9 9 9 9 0 0 1-9 9 9 9 0 0 1-9-9m9-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m-1.104 13.305 5-6.5-.792-.61-4.69 6.096-2.102-1.681-.624.78 2.5 2 .398.319z" clip-rule="evenodd"></path></svg>');
|
|
191
|
+
--sbb-icon-list-marker-icon-color: currentcolor;
|
|
192
|
+
--sbb-icon-list-vertical-gap: var(--sbb-spacing-fixed-2x);
|
|
193
|
+
--sbb-icon-list-dimensions: var(--sbb-size-icon-ui-small);
|
|
194
|
+
--sbb-icon-list-to-text-gap: var(--sbb-spacing-fixed-2x);
|
|
195
|
+
}
|
|
196
|
+
.sbb-icon-list > li::before {
|
|
197
|
+
content: "";
|
|
198
|
+
background-color: var(--sbb-icon-list-marker-icon-color);
|
|
199
|
+
mask-image: var(--sbb-icon-list-marker-icon);
|
|
200
|
+
mask-repeat: no-repeat;
|
|
201
|
+
mask-position: center;
|
|
202
|
+
mask-size: 100%;
|
|
144
203
|
}
|
package/normalize.css
CHANGED
|
@@ -1,189 +1,97 @@
|
|
|
1
|
-
/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
|
|
2
|
-
/*
|
|
3
|
-
Document
|
|
4
|
-
========
|
|
5
|
-
*/
|
|
6
|
-
/**
|
|
7
|
-
1. Correct the line height in all browsers. ///// Commented out since we define own line-height /////
|
|
8
|
-
2. Prevent adjustments of font size after orientation changes in iOS.
|
|
9
|
-
3. Use a more readable tab size (opinionated).
|
|
10
|
-
*/
|
|
11
1
|
html {
|
|
12
|
-
-webkit-text-size-adjust: 100%;
|
|
13
|
-
-moz-text-size-adjust: 100%;
|
|
14
|
-
text-size-adjust: 100%;
|
|
15
|
-
tab-size: 4;
|
|
2
|
+
-webkit-text-size-adjust: 100%;
|
|
3
|
+
-moz-text-size-adjust: 100%;
|
|
4
|
+
text-size-adjust: 100%;
|
|
5
|
+
tab-size: 4;
|
|
16
6
|
}
|
|
17
7
|
|
|
18
|
-
/*
|
|
19
|
-
Sections
|
|
20
|
-
========
|
|
21
|
-
*/
|
|
22
8
|
body {
|
|
23
|
-
margin: 0;
|
|
9
|
+
margin: 0;
|
|
24
10
|
}
|
|
25
11
|
|
|
26
|
-
/*
|
|
27
|
-
Grouping content
|
|
28
|
-
================
|
|
29
|
-
*/
|
|
30
|
-
/**
|
|
31
|
-
1. Add the correct height in Firefox.
|
|
32
|
-
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
|
|
33
|
-
*/
|
|
34
12
|
hr {
|
|
35
|
-
height: 0;
|
|
36
|
-
color: inherit;
|
|
13
|
+
height: 0;
|
|
14
|
+
color: inherit;
|
|
37
15
|
}
|
|
38
16
|
|
|
39
|
-
/*
|
|
40
|
-
Text-level semantics
|
|
41
|
-
====================
|
|
42
|
-
*/
|
|
43
|
-
/**
|
|
44
|
-
Add the correct text decoration in Chrome, Edge, and Safari.
|
|
45
|
-
*/
|
|
46
17
|
abbr[title] {
|
|
47
18
|
text-decoration: underline dotted;
|
|
48
19
|
}
|
|
49
20
|
|
|
50
|
-
/**
|
|
51
|
-
Add the correct font weight in Edge and Safari.
|
|
52
|
-
*/
|
|
53
21
|
b,
|
|
54
22
|
strong {
|
|
55
23
|
font-weight: bolder;
|
|
56
24
|
}
|
|
57
25
|
|
|
58
|
-
/**
|
|
59
|
-
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
|
|
60
|
-
2. Correct the odd 'em' font sizing in all browsers.
|
|
61
|
-
*/
|
|
62
26
|
code,
|
|
63
27
|
kbd,
|
|
64
28
|
samp,
|
|
65
29
|
pre {
|
|
66
|
-
font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
|
|
67
|
-
font-size: 1em;
|
|
30
|
+
font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
|
|
31
|
+
font-size: 1em;
|
|
68
32
|
}
|
|
69
33
|
|
|
70
|
-
/**
|
|
71
|
-
Add the correct font size in all browsers.
|
|
72
|
-
*/
|
|
73
34
|
small {
|
|
74
35
|
font-size: 80%;
|
|
75
36
|
}
|
|
76
37
|
|
|
77
|
-
/*
|
|
78
|
-
Tabular data
|
|
79
|
-
============
|
|
80
|
-
*/
|
|
81
|
-
/**
|
|
82
|
-
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
|
|
83
|
-
2. Correct table border color inheritance in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
|
|
84
|
-
*/
|
|
85
38
|
table {
|
|
86
|
-
text-indent: 0;
|
|
87
|
-
border-color: inherit;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
/*
|
|
91
|
-
Forms
|
|
92
|
-
=====
|
|
93
|
-
*/
|
|
94
|
-
/**
|
|
95
|
-
1. Change the font styles in all browsers.
|
|
96
|
-
2. Remove the margin in Firefox and Safari.
|
|
97
|
-
*/
|
|
39
|
+
text-indent: 0;
|
|
40
|
+
border-color: inherit;
|
|
41
|
+
}
|
|
42
|
+
|
|
98
43
|
button,
|
|
99
44
|
input,
|
|
100
45
|
optgroup,
|
|
101
46
|
select,
|
|
102
47
|
textarea {
|
|
103
|
-
font-family: inherit;
|
|
104
|
-
font-size: 100%;
|
|
105
|
-
line-height: 1.15;
|
|
106
|
-
margin: 0;
|
|
48
|
+
font-family: inherit;
|
|
49
|
+
font-size: 100%;
|
|
50
|
+
line-height: 1.15;
|
|
51
|
+
margin: 0;
|
|
107
52
|
}
|
|
108
53
|
|
|
109
|
-
/**
|
|
110
|
-
Remove the inheritance of text transform in Edge and Firefox.
|
|
111
|
-
*/
|
|
112
54
|
button,
|
|
113
55
|
select {
|
|
114
56
|
text-transform: none;
|
|
115
57
|
}
|
|
116
58
|
|
|
117
|
-
/**
|
|
118
|
-
Correct the inability to style clickable types in iOS and Safari.
|
|
119
|
-
*/
|
|
120
59
|
button,
|
|
121
60
|
:is(button, input):where([type=button], [type=reset], [type=submit]) {
|
|
122
61
|
-webkit-appearance: button;
|
|
123
62
|
}
|
|
124
63
|
|
|
125
|
-
/**
|
|
126
|
-
Remove the additional ':invalid' styles in Firefox.
|
|
127
|
-
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
|
|
128
|
-
*/
|
|
129
64
|
:-moz-ui-invalid {
|
|
130
65
|
box-shadow: none;
|
|
131
66
|
}
|
|
132
67
|
|
|
133
|
-
/**
|
|
134
|
-
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
|
|
135
|
-
*/
|
|
136
68
|
legend {
|
|
137
69
|
padding: 0;
|
|
138
70
|
}
|
|
139
71
|
|
|
140
|
-
/**
|
|
141
|
-
Add the correct vertical alignment in Chrome and Firefox.
|
|
142
|
-
*/
|
|
143
72
|
progress {
|
|
144
73
|
vertical-align: baseline;
|
|
145
74
|
}
|
|
146
75
|
|
|
147
|
-
/**
|
|
148
|
-
Correct the cursor style of increment and decrement buttons in Safari.
|
|
149
|
-
*/
|
|
150
76
|
::-webkit-inner-spin-button,
|
|
151
77
|
::-webkit-outer-spin-button {
|
|
152
78
|
height: auto;
|
|
153
79
|
}
|
|
154
80
|
|
|
155
|
-
/**
|
|
156
|
-
1. Correct the odd appearance in Chrome and Safari.
|
|
157
|
-
2. Correct the outline style in Safari.
|
|
158
|
-
*/
|
|
159
81
|
[type=search] {
|
|
160
|
-
-webkit-appearance: textfield;
|
|
161
|
-
outline-offset: -2px;
|
|
82
|
+
-webkit-appearance: textfield;
|
|
83
|
+
outline-offset: -2px;
|
|
162
84
|
}
|
|
163
85
|
|
|
164
|
-
/**
|
|
165
|
-
Remove the inner padding in Chrome and Safari on macOS.
|
|
166
|
-
*/
|
|
167
86
|
::-webkit-search-decoration {
|
|
168
87
|
-webkit-appearance: none;
|
|
169
88
|
}
|
|
170
89
|
|
|
171
|
-
/**
|
|
172
|
-
1. Correct the inability to style clickable types in iOS and Safari.
|
|
173
|
-
2. Change font properties to 'inherit' in Safari.
|
|
174
|
-
*/
|
|
175
90
|
::-webkit-file-upload-button {
|
|
176
|
-
-webkit-appearance: button;
|
|
177
|
-
font: inherit;
|
|
91
|
+
-webkit-appearance: button;
|
|
92
|
+
font: inherit;
|
|
178
93
|
}
|
|
179
94
|
|
|
180
|
-
/*
|
|
181
|
-
Interactive
|
|
182
|
-
===========
|
|
183
|
-
*/
|
|
184
|
-
/*
|
|
185
|
-
Add the correct display in Chrome and Safari.
|
|
186
|
-
*/
|
|
187
95
|
summary {
|
|
188
96
|
display: list-item;
|
|
189
97
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sbb-esta/lyne-elements",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.12.1",
|
|
4
4
|
"description": "Lyne Design System",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design system",
|
|
@@ -735,6 +735,11 @@
|
|
|
735
735
|
"development": "./development/overlay.js",
|
|
736
736
|
"default": "./overlay.js"
|
|
737
737
|
},
|
|
738
|
+
"./paginator.js": {
|
|
739
|
+
"types": "./development/paginator.d.ts",
|
|
740
|
+
"development": "./development/paginator.js",
|
|
741
|
+
"default": "./paginator.js"
|
|
742
|
+
},
|
|
738
743
|
"./popover.js": {
|
|
739
744
|
"types": "./development/popover.d.ts",
|
|
740
745
|
"development": "./development/popover.js",
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/paginator/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
|
|
2
|
+
export type SbbPaginatorPageEventDetails = {
|
|
3
|
+
length: number;
|
|
4
|
+
pageSize: number;
|
|
5
|
+
pageIndex: number;
|
|
6
|
+
previousPageIndex: number;
|
|
7
|
+
};
|
|
8
|
+
declare const SbbPaginatorElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbNegativeMixinType> & typeof LitElement;
|
|
9
|
+
/**
|
|
10
|
+
* It displays a paginator component.
|
|
11
|
+
*
|
|
12
|
+
* @event {CustomEvent<SbbPaginatorPageEventDetails>} page - Emits when the pageIndex changes.
|
|
13
|
+
*/
|
|
14
|
+
export declare class SbbPaginatorElement extends SbbPaginatorElement_base {
|
|
15
|
+
static styles: CSSResultGroup;
|
|
16
|
+
static readonly events: Record<string, string>;
|
|
17
|
+
/** Total number of items. */
|
|
18
|
+
set length(value: number);
|
|
19
|
+
get length(): number;
|
|
20
|
+
private _length;
|
|
21
|
+
/** Number of items per page. */
|
|
22
|
+
set pageSize(value: number);
|
|
23
|
+
get pageSize(): number;
|
|
24
|
+
private _pageSize;
|
|
25
|
+
/** Current page index. */
|
|
26
|
+
set pageIndex(value: number);
|
|
27
|
+
get pageIndex(): number;
|
|
28
|
+
private _pageIndex;
|
|
29
|
+
/** The available `pageSize` choices. */
|
|
30
|
+
set pageSizeOptions(value: number[]);
|
|
31
|
+
get pageSizeOptions(): number[] | undefined;
|
|
32
|
+
private _pageSizeOptions?;
|
|
33
|
+
/**
|
|
34
|
+
* Position of the prev/next buttons: if `pageSizeOptions` is set, the sbb-select for the pageSize change
|
|
35
|
+
* will be positioned oppositely with the page numbers always in the center.
|
|
36
|
+
*/
|
|
37
|
+
pagerPosition: 'start' | 'end';
|
|
38
|
+
/** Size variant, either m or s. */
|
|
39
|
+
size: 'm' | 's';
|
|
40
|
+
private _page;
|
|
41
|
+
private _paginatorOptionsLabel;
|
|
42
|
+
private _language;
|
|
43
|
+
private _markForFocus;
|
|
44
|
+
private _updateSelectAriaLabelledBy;
|
|
45
|
+
protected updated(changedProperties: PropertyValues<this>): void;
|
|
46
|
+
/**
|
|
47
|
+
* Calculates the current number of pages based on the `length` and the `pageSize`;
|
|
48
|
+
* value must be rounded up (e.g. `length = 21` and `pageSize = 10` means 3 pages).
|
|
49
|
+
*/
|
|
50
|
+
private _numberOfPages;
|
|
51
|
+
/**
|
|
52
|
+
* If the `pageSize` changes due to user interaction with the `pageSizeOptions` select,
|
|
53
|
+
* emit the `page` event and then update the `pageSize` value.
|
|
54
|
+
*/
|
|
55
|
+
private _pageSizeChanged;
|
|
56
|
+
/**
|
|
57
|
+
* If the `pageIndex` changes due to user interaction,
|
|
58
|
+
* emit the `page` event and then update the `pageIndex` value.
|
|
59
|
+
*/
|
|
60
|
+
private _pageIndexChanged;
|
|
61
|
+
private _emitPageEvent;
|
|
62
|
+
/** Returns the displayed page elements. */
|
|
63
|
+
private _getVisiblePages;
|
|
64
|
+
/** Evaluate `pageIndex` by excluding edge cases. */
|
|
65
|
+
private _coercePageIndexInRange;
|
|
66
|
+
/**
|
|
67
|
+
* Calculate the pages set based on the following rules:
|
|
68
|
+
* - the first page must always be visible;
|
|
69
|
+
* - the last page must always be visible;
|
|
70
|
+
* - if there are more than `MAX_PAGE_NUMBERS_DISPLAYED` other pages, ellipsis button must be used.
|
|
71
|
+
*/
|
|
72
|
+
private _getVisiblePagesIndex;
|
|
73
|
+
/** Creates an array of consecutive numbers given the length and the starting value. */
|
|
74
|
+
private _range;
|
|
75
|
+
private _handleKeyUp;
|
|
76
|
+
private _currentPageLabel;
|
|
77
|
+
private _renderPrevNextButtons;
|
|
78
|
+
private _renderItemPerPageTemplate;
|
|
79
|
+
private _renderPageNumbers;
|
|
80
|
+
protected render(): TemplateResult;
|
|
81
|
+
}
|
|
82
|
+
declare global {
|
|
83
|
+
interface HTMLElementTagNameMap {
|
|
84
|
+
'sbb-paginator': SbbPaginatorElement;
|
|
85
|
+
}
|
|
86
|
+
interface HTMLElementEventMap {
|
|
87
|
+
page: CustomEvent<SbbPaginatorPageEventDetails>;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
export {};
|
|
91
|
+
//# sourceMappingURL=paginator.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"paginator.d.ts","sourceRoot":"","sources":["../../../src/elements/paginator/paginator.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAoBb,OAAO,0BAA0B,CAAC;AAClC,OAAO,gCAAgC,CAAC;AACxC,OAAO,eAAe,CAAC;AACvB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,cAAc,CAAC;AACtB,OAAO,cAAc,CAAC;AACtB,OAAO,0BAA0B,CAAC;AAElC,MAAM,MAAM,4BAA4B,GAAG;IACzC,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,EAAE,MAAM,CAAC;CAC3B,CAAC;;AAMF;;;;GAIG;AACH,qBAIa,mBAAoB,SAAQ,wBAA4B;IACnE,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAE1C;IAEX,6BAA6B;IAC7B,IACW,MAAM,CAAC,KAAK,EAAE,MAAM,EAK9B;IACD,IAAW,MAAM,IAAI,MAAM,CAE1B;IACD,OAAO,CAAC,OAAO,CAAa;IAE5B,gCAAgC;IAChC,IACW,QAAQ,CAAC,KAAK,EAAE,MAAM,EAMhC;IACD,IAAW,QAAQ,IAAI,MAAM,CAE5B;IACD,OAAO,CAAC,SAAS,CAAc;IAE/B,0BAA0B;IAC1B,IACW,SAAS,CAAC,KAAK,EAAE,MAAM,EAEjC;IACD,IAAW,SAAS,IAAI,MAAM,CAE7B;IACD,OAAO,CAAC,UAAU,CAAa;IAE/B,wCAAwC;IACxC,IACW,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,EAGzC;IACD,IAAW,eAAe,IAAI,MAAM,EAAE,GAAG,SAAS,CAEjD;IACD,OAAO,CAAC,gBAAgB,CAAC,CAAW;IAEpC;;;OAGG;IAC8D,aAAa,EAAE,OAAO,GAAG,KAAK,CACrF;IAEV,mCAAmC;IACC,IAAI,EAAE,GAAG,GAAG,GAAG,CAAO;IAE1D,OAAO,CAAC,KAAK,CAIX;IAEF,OAAO,CAAC,sBAAsB,CAA6C;IAC3E,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,aAAa,CAAuB;IAC5C,OAAO,CAAC,2BAA2B,CAAkB;cAElC,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IA8BzE;;;OAGG;IACH,OAAO,CAAC,cAAc;IAItB;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAUxB;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,cAAc;IAStB,2CAA2C;IAC3C,OAAO,CAAC,gBAAgB;IAIxB,oDAAoD;IACpD,OAAO,CAAC,uBAAuB;IAO/B;;;;;OAKG;IACH,OAAO,CAAC,qBAAqB;IA2B7B,uFAAuF;IACvF,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,sBAAsB;IAsB9B,OAAO,CAAC,0BAA0B;IA8BlC,OAAO,CAAC,kBAAkB;cAgCP,MAAM,IAAI,cAAc;CAkB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,mBAAmB,CAAC;KACtC;IACD,UAAU,mBAAmB;QAC3B,IAAI,EAAE,WAAW,CAAC,4BAA4B,CAAC,CAAC;KACjD;CACF"}
|
package/paginator.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"paginator.d.ts","sourceRoot":"","sources":["../../src/elements/paginator.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}
|