@maggioli-design-system/mds-paginator-item 3.0.2 → 3.2.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/dist/cjs/{index-4b969f26.js → index-f1dcb949.js} +117 -77
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/mds-paginator-item.cjs.entry.js +2 -2
- package/dist/cjs/mds-paginator-item.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/common/floating-controller.js +3 -3
- package/dist/collection/common/slot.js +10 -1
- package/dist/collection/common/string.js +30 -0
- package/dist/collection/components/mds-paginator-item/mds-paginator-item.css +137 -36
- package/dist/collection/dictionary/keyboard.js +84 -0
- package/dist/collection/type/keyboard.js +1 -0
- package/dist/components/mds-paginator-item.js +1 -1
- package/dist/documentation.json +2 -2
- package/dist/esm/{index-fa18d67b.js → index-6b7cef50.js} +117 -77
- package/dist/esm/loader.js +2 -2
- package/dist/esm/mds-paginator-item.entry.js +2 -2
- package/dist/esm/mds-paginator-item.js +3 -3
- package/dist/esm-es5/index-6b7cef50.js +1 -0
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/mds-paginator-item.entry.js +1 -1
- package/dist/esm-es5/mds-paginator-item.js +1 -1
- package/dist/mds-paginator-item/mds-paginator-item.esm.js +1 -1
- package/dist/mds-paginator-item/mds-paginator-item.js +1 -1
- package/dist/mds-paginator-item/p-064170da.system.entry.js +1 -0
- package/dist/mds-paginator-item/p-2fca24e5.js +2 -0
- package/dist/mds-paginator-item/{p-a712c4b4.system.js → p-87174d3f.system.js} +1 -1
- package/dist/mds-paginator-item/p-9c9808f6.system.js +2 -0
- package/dist/mds-paginator-item/p-db02f4fe.entry.js +1 -0
- package/dist/stats.json +38 -33
- package/dist/types/common/slot.d.ts +2 -1
- package/dist/types/common/string.d.ts +4 -0
- package/dist/types/dictionary/keyboard.d.ts +2 -0
- package/dist/types/type/keyboard.d.ts +12 -0
- package/documentation.json +22 -2
- package/package.json +4 -4
- package/src/common/floating-controller.ts +6 -6
- package/src/common/slot.ts +11 -0
- package/src/common/string.ts +42 -0
- package/src/components/mds-paginator-item/css/mds-paginator-item-pref-animation.css +5 -12
- package/src/components/mds-paginator-item/css/mds-paginator-item-pref-theme.css +16 -27
- package/src/components/mds-paginator-item/mds-paginator-item.css +1 -2
- package/src/dictionary/keyboard.ts +87 -0
- package/src/fixtures/icons.json +18 -1
- package/src/meta/keyboard/keys.json +83 -0
- package/src/tailwind/components.css +11 -46
- package/src/tailwind/fouc.css +118 -0
- package/src/tailwind/index.css +4 -0
- package/src/type/keyboard.ts +93 -0
- package/www/build/mds-paginator-item.esm.js +1 -1
- package/www/build/mds-paginator-item.js +1 -1
- package/www/build/p-064170da.system.entry.js +1 -0
- package/www/build/p-2fca24e5.js +2 -0
- package/www/build/{p-a712c4b4.system.js → p-87174d3f.system.js} +1 -1
- package/www/build/p-9c9808f6.system.js +2 -0
- package/www/build/p-db02f4fe.entry.js +1 -0
- package/dist/esm-es5/index-fa18d67b.js +0 -1
- package/dist/mds-paginator-item/p-81ef4377.system.entry.js +0 -1
- package/dist/mds-paginator-item/p-90a28ad3.js +0 -2
- package/dist/mds-paginator-item/p-e85cd5bf.system.js +0 -2
- package/dist/mds-paginator-item/p-fa75e3f7.entry.js +0 -1
- package/www/build/p-81ef4377.system.entry.js +0 -1
- package/www/build/p-90a28ad3.js +0 -2
- package/www/build/p-e85cd5bf.system.js +0 -2
- package/www/build/p-fa75e3f7.entry.js +0 -1
|
@@ -9,7 +9,6 @@
|
|
|
9
9
|
}
|
|
10
10
|
/* included for focus effect */
|
|
11
11
|
@tailwind components;
|
|
12
|
-
@tailwind utilities;
|
|
13
12
|
|
|
14
13
|
/**
|
|
15
14
|
* @prop --mds-paginator-item-background-disabled: Sets the background-color of the item when is disabled
|
|
@@ -29,7 +28,6 @@
|
|
|
29
28
|
*/
|
|
30
29
|
|
|
31
30
|
:host {
|
|
32
|
-
|
|
33
31
|
--mds-paginator-item-background-disabled: rgb(var(--tone-neutral-09));
|
|
34
32
|
--mds-paginator-item-background-hover: rgb(var(--tone-neutral-08));
|
|
35
33
|
--mds-paginator-item-background-selected: rgb(var(--variant-primary-03));
|
|
@@ -57,7 +55,6 @@
|
|
|
57
55
|
}
|
|
58
56
|
|
|
59
57
|
:host:focus-visible {
|
|
60
|
-
|
|
61
58
|
--magma-outline-blur: var(--magma-outline-focus);
|
|
62
59
|
|
|
63
60
|
animation-play-state: running;
|
|
@@ -88,7 +85,6 @@
|
|
|
88
85
|
}
|
|
89
86
|
|
|
90
87
|
:host(:focus-visible) {
|
|
91
|
-
|
|
92
88
|
--magma-outline-blur: var(--magma-outline-focus);
|
|
93
89
|
|
|
94
90
|
animation-play-state: running;
|
|
@@ -128,26 +124,33 @@
|
|
|
128
124
|
fill: currentcolor;
|
|
129
125
|
}
|
|
130
126
|
|
|
131
|
-
|
|
127
|
+
:host-context(.pref-animation-reduce) {
|
|
128
|
+
transition-duration: 0s;
|
|
129
|
+
}
|
|
132
130
|
|
|
133
|
-
@
|
|
134
|
-
:host {
|
|
131
|
+
@media (prefers-reduced-motion) {
|
|
132
|
+
:host-context(.pref-animation-system) {
|
|
135
133
|
transition-duration: 0s;
|
|
136
134
|
}
|
|
137
135
|
}
|
|
138
136
|
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
137
|
+
:host-context(.pref-theme-dark) {
|
|
138
|
+
--mds-paginator-item-background-disabled: rgb(var(--tone-neutral-09));
|
|
139
|
+
--mds-paginator-item-background-hover: rgb(var(--tone-neutral-08));
|
|
140
|
+
--mds-paginator-item-background-selected: rgb(var(--variant-primary-03));
|
|
141
|
+
--mds-paginator-item-background: transparent;
|
|
142
|
+
--mds-paginator-item-color-disabled: rgb(var(--tone-neutral-06));
|
|
143
|
+
--mds-paginator-item-color-hover: rgb(var(--tone-neutral-02));
|
|
144
|
+
--mds-paginator-item-color-selected: rgb(var(--tone-neutral));
|
|
145
|
+
--mds-paginator-item-color: rgb(var(--tone-neutral-02));
|
|
146
|
+
--mds-paginator-item-shadow-disabled: none;
|
|
147
|
+
--mds-paginator-item-shadow-hover: none;
|
|
148
|
+
--mds-paginator-item-shadow-selected: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);
|
|
149
|
+
--mds-paginator-item-shadow: none;
|
|
146
150
|
}
|
|
147
151
|
|
|
148
|
-
@
|
|
149
|
-
:host {
|
|
150
|
-
|
|
152
|
+
@media (prefers-color-scheme: dark) {
|
|
153
|
+
:host-context(.pref-theme-system) {
|
|
151
154
|
--mds-paginator-item-background-disabled: rgb(var(--tone-neutral-09));
|
|
152
155
|
--mds-paginator-item-background-hover: rgb(var(--tone-neutral-08));
|
|
153
156
|
--mds-paginator-item-background-selected: rgb(var(--variant-primary-03));
|
|
@@ -163,24 +166,122 @@
|
|
|
163
166
|
}
|
|
164
167
|
}
|
|
165
168
|
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
169
|
+
:host(:not(:is([hydrated], .hydrated))) {
|
|
170
|
+
animation-duration: 0s;
|
|
171
|
+
border-color: transparent;
|
|
172
|
+
box-shadow: 0 0 0 transparent;
|
|
173
|
+
opacity: 0;
|
|
174
|
+
outline-color: transparent;
|
|
175
|
+
transition-delay: 0s;
|
|
176
|
+
transition-duration: 0s;
|
|
177
|
+
visibility: hidden;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */
|
|
181
|
+
|
|
182
|
+
mds-accordion:not(:is([hydrated], .hydrated)),
|
|
183
|
+
mds-accordion-item:not(:is([hydrated], .hydrated)),
|
|
184
|
+
mds-accordion-timer:not(:is([hydrated], .hydrated)),
|
|
185
|
+
mds-accordion-timer-item:not(:is([hydrated], .hydrated)),
|
|
186
|
+
mds-author:not(:is([hydrated], .hydrated)),
|
|
187
|
+
mds-avatar:not(:is([hydrated], .hydrated)),
|
|
188
|
+
mds-badge:not(:is([hydrated], .hydrated)),
|
|
189
|
+
mds-banner:not(:is([hydrated], .hydrated)),
|
|
190
|
+
mds-benchmark-bar:not(:is([hydrated], .hydrated)),
|
|
191
|
+
mds-bibliography:not(:is([hydrated], .hydrated)),
|
|
192
|
+
mds-breadcrumb:not(:is([hydrated], .hydrated)),
|
|
193
|
+
mds-breadcrumb-item:not(:is([hydrated], .hydrated)),
|
|
194
|
+
mds-button:not(:is([hydrated], .hydrated)),
|
|
195
|
+
mds-card:not(:is([hydrated], .hydrated)),
|
|
196
|
+
mds-card-content:not(:is([hydrated], .hydrated)),
|
|
197
|
+
mds-card-footer:not(:is([hydrated], .hydrated)),
|
|
198
|
+
mds-card-header:not(:is([hydrated], .hydrated)),
|
|
199
|
+
mds-card-media:not(:is([hydrated], .hydrated)),
|
|
200
|
+
mds-chip:not(:is([hydrated], .hydrated)),
|
|
201
|
+
mds-details:not(:is([hydrated], .hydrated)),
|
|
202
|
+
mds-dropdown:not(:is([hydrated], .hydrated)),
|
|
203
|
+
mds-entity:not(:is([hydrated], .hydrated)),
|
|
204
|
+
mds-file:not(:is([hydrated], .hydrated)),
|
|
205
|
+
mds-file-preview:not(:is([hydrated], .hydrated)),
|
|
206
|
+
mds-filter:not(:is([hydrated], .hydrated)),
|
|
207
|
+
mds-filter-item:not(:is([hydrated], .hydrated)),
|
|
208
|
+
mds-header:not(:is([hydrated], .hydrated)),
|
|
209
|
+
mds-header-bar:not(:is([hydrated], .hydrated)),
|
|
210
|
+
mds-help:not(:is([hydrated], .hydrated)),
|
|
211
|
+
mds-horizontal-scroll:not(:is([hydrated], .hydrated)),
|
|
212
|
+
mds-hr:not(:is([hydrated], .hydrated)),
|
|
213
|
+
mds-icon:not(:is([hydrated], .hydrated)),
|
|
214
|
+
mds-img:not(:is([hydrated], .hydrated)),
|
|
215
|
+
mds-input:not(:is([hydrated], .hydrated)),
|
|
216
|
+
mds-input-field:not(:is([hydrated], .hydrated)),
|
|
217
|
+
mds-input-range:not(:is([hydrated], .hydrated)),
|
|
218
|
+
mds-input-select:not(:is([hydrated], .hydrated)),
|
|
219
|
+
mds-input-switch:not(:is([hydrated], .hydrated)),
|
|
220
|
+
mds-input-tip:not(:is([hydrated], .hydrated)),
|
|
221
|
+
mds-input-tip-item:not(:is([hydrated], .hydrated)),
|
|
222
|
+
mds-input-upload:not(:is([hydrated], .hydrated)),
|
|
223
|
+
mds-keyboard:not(:is([hydrated], .hydrated)),
|
|
224
|
+
mds-keyboard-key:not(:is([hydrated], .hydrated)),
|
|
225
|
+
mds-kpi:not(:is([hydrated], .hydrated)),
|
|
226
|
+
mds-kpi-item:not(:is([hydrated], .hydrated)),
|
|
227
|
+
mds-label:not(:is([hydrated], .hydrated)),
|
|
228
|
+
mds-list:not(:is([hydrated], .hydrated)),
|
|
229
|
+
mds-list-item:not(:is([hydrated], .hydrated)),
|
|
230
|
+
mds-modal:not(:is([hydrated], .hydrated)),
|
|
231
|
+
mds-note:not(:is([hydrated], .hydrated)),
|
|
232
|
+
mds-notification:not(:is([hydrated], .hydrated)),
|
|
233
|
+
mds-paginator:not(:is([hydrated], .hydrated)),
|
|
234
|
+
mds-paginator-item:not(:is([hydrated], .hydrated)),
|
|
235
|
+
mds-pref:not(:is([hydrated], .hydrated)),
|
|
236
|
+
mds-pref-animation:not(:is([hydrated], .hydrated)),
|
|
237
|
+
mds-pref-consumption:not(:is([hydrated], .hydrated)),
|
|
238
|
+
mds-pref-contrast:not(:is([hydrated], .hydrated)),
|
|
239
|
+
mds-pref-language:not(:is([hydrated], .hydrated)),
|
|
240
|
+
mds-pref-language-item:not(:is([hydrated], .hydrated)),
|
|
241
|
+
mds-pref-theme:not(:is([hydrated], .hydrated)),
|
|
242
|
+
mds-price-table:not(:is([hydrated], .hydrated)),
|
|
243
|
+
mds-price-table-features:not(:is([hydrated], .hydrated)),
|
|
244
|
+
mds-price-table-features-cell:not(:is([hydrated], .hydrated)),
|
|
245
|
+
mds-price-table-features-row:not(:is([hydrated], .hydrated)),
|
|
246
|
+
mds-price-table-header:not(:is([hydrated], .hydrated)),
|
|
247
|
+
mds-price-table-list:not(:is([hydrated], .hydrated)),
|
|
248
|
+
mds-price-table-list-item:not(:is([hydrated], .hydrated)),
|
|
249
|
+
mds-progress:not(:is([hydrated], .hydrated)),
|
|
250
|
+
mds-push-notification:not(:is([hydrated], .hydrated)),
|
|
251
|
+
mds-push-notifications:not(:is([hydrated], .hydrated)),
|
|
252
|
+
mds-quote:not(:is([hydrated], .hydrated)),
|
|
253
|
+
mds-separator:not(:is([hydrated], .hydrated)),
|
|
254
|
+
mds-spinner:not(:is([hydrated], .hydrated)),
|
|
255
|
+
mds-stepper-bar:not(:is([hydrated], .hydrated)),
|
|
256
|
+
mds-stepper-bar-item:not(:is([hydrated], .hydrated)),
|
|
257
|
+
mds-tab:not(:is([hydrated], .hydrated)),
|
|
258
|
+
mds-tab-bar:not(:is([hydrated], .hydrated)),
|
|
259
|
+
mds-tab-bar-item:not(:is([hydrated], .hydrated)),
|
|
260
|
+
mds-tab-item:not(:is([hydrated], .hydrated)),
|
|
261
|
+
mds-table:not(:is([hydrated], .hydrated)),
|
|
262
|
+
mds-table-body:not(:is([hydrated], .hydrated)),
|
|
263
|
+
mds-table-cell:not(:is([hydrated], .hydrated)),
|
|
264
|
+
mds-table-footer:not(:is([hydrated], .hydrated)),
|
|
265
|
+
mds-table-header:not(:is([hydrated], .hydrated)),
|
|
266
|
+
mds-table-header-cell:not(:is([hydrated], .hydrated)),
|
|
267
|
+
mds-table-row:not(:is([hydrated], .hydrated)),
|
|
268
|
+
mds-text:not(:is([hydrated], .hydrated)),
|
|
269
|
+
mds-toast:not(:is([hydrated], .hydrated)),
|
|
270
|
+
mds-tooltip:not(:is([hydrated], .hydrated)),
|
|
271
|
+
mds-tree:not(:is([hydrated], .hydrated)),
|
|
272
|
+
mds-tree-item:not(:is([hydrated], .hydrated)),
|
|
273
|
+
mds-url-view:not(:is([hydrated], .hydrated)),
|
|
274
|
+
mds-usage:not(:is([hydrated], .hydrated)),
|
|
275
|
+
mds-video-wall:not(:is([hydrated], .hydrated)),
|
|
276
|
+
mds-zero:not(:is([hydrated], .hydrated))
|
|
277
|
+
{
|
|
278
|
+
animation-duration: 0s;
|
|
279
|
+
border-color: transparent;
|
|
280
|
+
box-shadow: 0 0 0 transparent;
|
|
281
|
+
opacity: 0;
|
|
282
|
+
outline-color: transparent;
|
|
283
|
+
transition-delay: 0s;
|
|
284
|
+
transition-duration: 0s;
|
|
285
|
+
visibility: hidden;
|
|
185
286
|
}
|
|
186
287
|
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
const keyboardKeyNameDictionary = [
|
|
2
|
+
'0',
|
|
3
|
+
'1',
|
|
4
|
+
'2',
|
|
5
|
+
'3',
|
|
6
|
+
'4',
|
|
7
|
+
'5',
|
|
8
|
+
'6',
|
|
9
|
+
'7',
|
|
10
|
+
'8',
|
|
11
|
+
'9',
|
|
12
|
+
'a',
|
|
13
|
+
'alt',
|
|
14
|
+
'altleft',
|
|
15
|
+
'altright',
|
|
16
|
+
'arrowdown',
|
|
17
|
+
'arrowleft',
|
|
18
|
+
'arrowright',
|
|
19
|
+
'arrowup',
|
|
20
|
+
'b',
|
|
21
|
+
'backspace',
|
|
22
|
+
'c',
|
|
23
|
+
'capslock',
|
|
24
|
+
'command',
|
|
25
|
+
'commandleft',
|
|
26
|
+
'commandright',
|
|
27
|
+
'control',
|
|
28
|
+
'controlleft',
|
|
29
|
+
'controlright',
|
|
30
|
+
'd',
|
|
31
|
+
'delete',
|
|
32
|
+
'e',
|
|
33
|
+
'end',
|
|
34
|
+
'enter',
|
|
35
|
+
'escape',
|
|
36
|
+
'f',
|
|
37
|
+
'f1',
|
|
38
|
+
'f10',
|
|
39
|
+
'f11',
|
|
40
|
+
'f12',
|
|
41
|
+
'f2',
|
|
42
|
+
'f3',
|
|
43
|
+
'f4',
|
|
44
|
+
'f5',
|
|
45
|
+
'f6',
|
|
46
|
+
'f7',
|
|
47
|
+
'f8',
|
|
48
|
+
'f9',
|
|
49
|
+
'g',
|
|
50
|
+
'h',
|
|
51
|
+
'home',
|
|
52
|
+
'i',
|
|
53
|
+
'j',
|
|
54
|
+
'k',
|
|
55
|
+
'l',
|
|
56
|
+
'm',
|
|
57
|
+
'n',
|
|
58
|
+
'o',
|
|
59
|
+
'option',
|
|
60
|
+
'optionleft',
|
|
61
|
+
'optionright',
|
|
62
|
+
'p',
|
|
63
|
+
'pagedown',
|
|
64
|
+
'pageup',
|
|
65
|
+
'q',
|
|
66
|
+
'r',
|
|
67
|
+
's',
|
|
68
|
+
'shift',
|
|
69
|
+
'shiftleft',
|
|
70
|
+
'shiftright',
|
|
71
|
+
'space',
|
|
72
|
+
't',
|
|
73
|
+
'tab',
|
|
74
|
+
'u',
|
|
75
|
+
'v',
|
|
76
|
+
'w',
|
|
77
|
+
'windows',
|
|
78
|
+
'windowsleft',
|
|
79
|
+
'windowsright',
|
|
80
|
+
'x',
|
|
81
|
+
'y',
|
|
82
|
+
'z',
|
|
83
|
+
];
|
|
84
|
+
export { keyboardKeyNameDictionary, };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -46,7 +46,7 @@ class KeyboardManager {
|
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
-
const mdsPaginatorItemCss = "@-webkit-keyframes focus-bounce {\n 0%, 75%, 100% {\n outline-offset: var(--magma-outline-focus-offset, 6px);\n }\n\n 50% {\n outline-offset: var(--magma-outline-blur-offset, 2px);\n }\n}\n @keyframes focus-bounce {\n 0%, 75%, 100% {\n outline-offset: var(--magma-outline-focus-offset, 6px);\n }\n\n 50% {\n outline-offset: var(--magma-outline-blur-offset, 2px);\n }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-paginator-item-background-disabled: Sets the background-color of the item when is disabled\n * @prop --mds-paginator-item-background-hover: Sets the background-color of the item when the mouse is over it\n * @prop --mds-paginator-item-background-selected: Sets the background-color of the item when is selected\n * @prop --mds-paginator-item-background: Sets the background-color of the pages area and the item\n * @prop --mds-paginator-item-color-disabled: Sets the color of the item when is disabled\n * @prop --mds-paginator-item-color-hover: Sets the text color of the item when the mouse is over it\n * @prop --mds-paginator-item-color-selected: Sets the text color of the item when is selected\n * @prop --mds-paginator-item-color: Sets the text color of the component\n * @prop --mds-paginator-item-radius: Sets the border-radius of the component\n * @prop --mds-paginator-item-shadow-disabled: Sets the box-shadow of the item when is disabled\n * @prop --mds-paginator-item-shadow-hover: Sets the box-shadow of the item when the mouse is over it\n * @prop --mds-paginator-item-shadow-selected: Sets the box-shadow of the item when is selected\n * @prop --mds-paginator-item-shadow: Sets the box-shadow of the component\n * @prop --mds-paginator-item-size: Sets the height and the min-width of the paginator item\n */\n\n:host {\n\n --mds-paginator-item-background-disabled: rgb(var(--tone-neutral-09));\n --mds-paginator-item-background-hover: rgb(var(--tone-neutral-08));\n --mds-paginator-item-background-selected: rgb(var(--variant-primary-03));\n --mds-paginator-item-background: transparent;\n --mds-paginator-item-color-disabled: rgb(var(--tone-neutral-06));\n --mds-paginator-item-color-hover: rgb(var(--tone-neutral-02));\n --mds-paginator-item-color-selected: rgb(var(--tone-neutral));\n --mds-paginator-item-color: rgb(var(--tone-neutral-02));\n --mds-paginator-item-radius: 200px;\n --mds-paginator-item-shadow-disabled: none;\n --mds-paginator-item-shadow-hover: none;\n --mds-paginator-item-shadow-selected: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);\n --mds-paginator-item-shadow: none;\n --mds-paginator-item-size: 2.25rem;\n -webkit-animation-duration: var(--magma-outline-animation-duration, 1s);\n animation-duration: var(--magma-outline-animation-duration, 1s);\n -webkit-animation-fill-mode: forwards;\n animation-fill-mode: forwards;\n -webkit-animation-iteration-count: infinite;\n animation-iteration-count: infinite;\n -webkit-animation-name: focus-bounce;\n animation-name: focus-bounce;\n -webkit-animation-play-state: paused;\n animation-play-state: paused;\n -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n outline: var(--magma-outline-blur);\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;\n transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: ease-in-out;\n transition-timing-function: ease-in-out;\n}\n\n:host:focus-visible {\n\n --magma-outline-blur: var(--magma-outline-focus);\n\n -webkit-animation-play-state: running;\n\n animation-play-state: running;\n }\n\n:host {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n -ms-flex-align: center;\n\n align-items: center;\n background-color: var(--mds-paginator-item-background);\n border-radius: var(--mds-paginator-item-radius);\n -webkit-box-shadow: var(--mds-paginator-item-shadow);\n box-shadow: var(--mds-paginator-item-shadow);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: var(--mds-paginator-item-color);\n cursor: pointer;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n height: var(--mds-paginator-item-size);\n -ms-flex-pack: center;\n justify-content: center;\n min-width: var(--mds-paginator-item-size);\n -webkit-transition-property: background-color, color, outline, outline-offset, -webkit-box-shadow;\n transition-property: background-color, color, outline, outline-offset, -webkit-box-shadow;\n transition-property: background-color, box-shadow, color, outline, outline-offset;\n transition-property: background-color, box-shadow, color, outline, outline-offset, -webkit-box-shadow;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n:host(:focus-visible) {\n\n --magma-outline-blur: var(--magma-outline-focus);\n\n -webkit-animation-play-state: running;\n\n animation-play-state: running;\n }\n\n:host(:hover) {\n background-color: var(--mds-paginator-item-background-hover);\n -webkit-box-shadow: var(--mds-paginator-item-shadow-hover);\n box-shadow: var(--mds-paginator-item-shadow-hover);\n color: var(--mds-paginator-item-color-hover);\n fill: var(--mds-paginator-item-color-hover);\n}\n\n:host([icon]) {\n padding: 0rem;\n}\n\n:host([selected]) {\n background-color: var(--mds-paginator-item-background-selected);\n -webkit-box-shadow: var(--mds-paginator-item-shadow-selected);\n box-shadow: var(--mds-paginator-item-shadow-selected);\n color: var(--mds-paginator-item-color-selected);\n fill: var(--mds-paginator-item-color-selected);\n pointer-events: none;\n}\n\n:host([disabled]) {\n background-color: var(--mds-paginator-item-background-disabled);\n -webkit-box-shadow: var(--mds-paginator-item-shadow-disabled);\n box-shadow: var(--mds-paginator-item-shadow-disabled);\n color: var(--mds-paginator-item-color-disabled);\n fill: var(--mds-paginator-item-color-disabled);\n pointer-events: none;\n}\n\n.icon {\n padding-left: 0rem;\n padding-right: 0rem;\n\n fill: currentcolor;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n@container style(--magma-pref-theme: dark) {\n :host {\n\n --mds-paginator-item-background-disabled: rgb(var(--tone-neutral-09));\n --mds-paginator-item-background-hover: rgb(var(--tone-neutral-08));\n --mds-paginator-item-background-selected: rgb(var(--variant-primary-03));\n --mds-paginator-item-background: transparent;\n --mds-paginator-item-color-disabled: rgb(var(--tone-neutral-06));\n --mds-paginator-item-color-hover: rgb(var(--tone-neutral-02));\n --mds-paginator-item-color-selected: rgb(var(--tone-neutral));\n --mds-paginator-item-color: rgb(var(--tone-neutral-02));\n --mds-paginator-item-shadow-disabled: none;\n --mds-paginator-item-shadow-hover: none;\n --mds-paginator-item-shadow-selected: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);\n --mds-paginator-item-shadow: none;\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n :host {\n\n --mds-paginator-item-background-disabled: rgb(var(--tone-neutral-09));\n --mds-paginator-item-background-hover: rgb(var(--tone-neutral-08));\n --mds-paginator-item-background-selected: rgb(var(--variant-primary-03));\n --mds-paginator-item-background: transparent;\n --mds-paginator-item-color-disabled: rgb(var(--tone-neutral-06));\n --mds-paginator-item-color-hover: rgb(var(--tone-neutral-02));\n --mds-paginator-item-color-selected: rgb(var(--tone-neutral));\n --mds-paginator-item-color: rgb(var(--tone-neutral-02));\n --mds-paginator-item-shadow-disabled: none;\n --mds-paginator-item-shadow-hover: none;\n --mds-paginator-item-shadow-selected: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);\n --mds-paginator-item-shadow: none;\n }\n }\n}\n\n";
|
|
49
|
+
const mdsPaginatorItemCss = "@-webkit-keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@tailwind components; :host{--mds-paginator-item-background-disabled:rgb(var(--tone-neutral-09));--mds-paginator-item-background-hover:rgb(var(--tone-neutral-08));--mds-paginator-item-background-selected:rgb(var(--variant-primary-03));--mds-paginator-item-background:transparent;--mds-paginator-item-color-disabled:rgb(var(--tone-neutral-06));--mds-paginator-item-color-hover:rgb(var(--tone-neutral-02));--mds-paginator-item-color-selected:rgb(var(--tone-neutral));--mds-paginator-item-color:rgb(var(--tone-neutral-02));--mds-paginator-item-radius:200px;--mds-paginator-item-shadow-disabled:none;--mds-paginator-item-shadow-hover:none;--mds-paginator-item-shadow-selected:0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);--mds-paginator-item-shadow:none;--mds-paginator-item-size:2.25rem;-webkit-animation-duration:var(--magma-outline-animation-duration, 1s);animation-duration:var(--magma-outline-animation-duration, 1s);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:focus-bounce;animation-name:focus-bounce;-webkit-animation-play-state:paused;animation-play-state:paused;-webkit-animation-timing-function:cubic-bezier(0, 0, 0.2, 1);animation-timing-function:cubic-bezier(0, 0, 0.2, 1);outline:var(--magma-outline-blur);-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}:host:focus-visible{--magma-outline-blur:var(--magma-outline-focus);-webkit-animation-play-state:running;animation-play-state:running}:host{padding-left:0.75rem;padding-right:0.75rem;-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);-ms-flex-align:center;align-items:center;background-color:var(--mds-paginator-item-background);border-radius:var(--mds-paginator-item-radius);-webkit-box-shadow:var(--mds-paginator-item-shadow);box-shadow:var(--mds-paginator-item-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--mds-paginator-item-color);cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-negative:0;flex-shrink:0;height:var(--mds-paginator-item-size);-ms-flex-pack:center;justify-content:center;min-width:var(--mds-paginator-item-size);-webkit-transition-property:background-color, color, outline, outline-offset, -webkit-box-shadow;transition-property:background-color, color, outline, outline-offset, -webkit-box-shadow;transition-property:background-color, box-shadow, color, outline, outline-offset;transition-property:background-color, box-shadow, color, outline, outline-offset, -webkit-box-shadow;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(:focus-visible){--magma-outline-blur:var(--magma-outline-focus);-webkit-animation-play-state:running;animation-play-state:running}:host(:hover){background-color:var(--mds-paginator-item-background-hover);-webkit-box-shadow:var(--mds-paginator-item-shadow-hover);box-shadow:var(--mds-paginator-item-shadow-hover);color:var(--mds-paginator-item-color-hover);fill:var(--mds-paginator-item-color-hover)}:host([icon]){padding:0rem}:host([selected]){background-color:var(--mds-paginator-item-background-selected);-webkit-box-shadow:var(--mds-paginator-item-shadow-selected);box-shadow:var(--mds-paginator-item-shadow-selected);color:var(--mds-paginator-item-color-selected);fill:var(--mds-paginator-item-color-selected);pointer-events:none}:host([disabled]){background-color:var(--mds-paginator-item-background-disabled);-webkit-box-shadow:var(--mds-paginator-item-shadow-disabled);box-shadow:var(--mds-paginator-item-shadow-disabled);color:var(--mds-paginator-item-color-disabled);fill:var(--mds-paginator-item-color-disabled);pointer-events:none}.icon{padding-left:0rem;padding-right:0rem;fill:currentcolor}:host-context(.pref-animation-reduce){-webkit-transition-duration:0s;transition-duration:0s}@media (prefers-reduced-motion){:host-context(.pref-animation-system){-webkit-transition-duration:0s;transition-duration:0s}}:host-context(.pref-theme-dark){--mds-paginator-item-background-disabled:rgb(var(--tone-neutral-09));--mds-paginator-item-background-hover:rgb(var(--tone-neutral-08));--mds-paginator-item-background-selected:rgb(var(--variant-primary-03));--mds-paginator-item-background:transparent;--mds-paginator-item-color-disabled:rgb(var(--tone-neutral-06));--mds-paginator-item-color-hover:rgb(var(--tone-neutral-02));--mds-paginator-item-color-selected:rgb(var(--tone-neutral));--mds-paginator-item-color:rgb(var(--tone-neutral-02));--mds-paginator-item-shadow-disabled:none;--mds-paginator-item-shadow-hover:none;--mds-paginator-item-shadow-selected:0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);--mds-paginator-item-shadow:none}@media (prefers-color-scheme: dark){:host-context(.pref-theme-system){--mds-paginator-item-background-disabled:rgb(var(--tone-neutral-09));--mds-paginator-item-background-hover:rgb(var(--tone-neutral-08));--mds-paginator-item-background-selected:rgb(var(--variant-primary-03));--mds-paginator-item-background:transparent;--mds-paginator-item-color-disabled:rgb(var(--tone-neutral-06));--mds-paginator-item-color-hover:rgb(var(--tone-neutral-02));--mds-paginator-item-color-selected:rgb(var(--tone-neutral));--mds-paginator-item-color:rgb(var(--tone-neutral-02));--mds-paginator-item-shadow-disabled:none;--mds-paginator-item-shadow-hover:none;--mds-paginator-item-shadow-selected:0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);--mds-paginator-item-shadow:none}}:host(:not(:is([hydrated],.hydrated))){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}mds-accordion:not(:is([hydrated],.hydrated)),mds-accordion-item:not(:is([hydrated],.hydrated)),mds-accordion-timer:not(:is([hydrated],.hydrated)),mds-accordion-timer-item:not(:is([hydrated],.hydrated)),mds-author:not(:is([hydrated],.hydrated)),mds-avatar:not(:is([hydrated],.hydrated)),mds-badge:not(:is([hydrated],.hydrated)),mds-banner:not(:is([hydrated],.hydrated)),mds-benchmark-bar:not(:is([hydrated],.hydrated)),mds-bibliography:not(:is([hydrated],.hydrated)),mds-breadcrumb:not(:is([hydrated],.hydrated)),mds-breadcrumb-item:not(:is([hydrated],.hydrated)),mds-button:not(:is([hydrated],.hydrated)),mds-card:not(:is([hydrated],.hydrated)),mds-card-content:not(:is([hydrated],.hydrated)),mds-card-footer:not(:is([hydrated],.hydrated)),mds-card-header:not(:is([hydrated],.hydrated)),mds-card-media:not(:is([hydrated],.hydrated)),mds-chip:not(:is([hydrated],.hydrated)),mds-details:not(:is([hydrated],.hydrated)),mds-dropdown:not(:is([hydrated],.hydrated)),mds-entity:not(:is([hydrated],.hydrated)),mds-file:not(:is([hydrated],.hydrated)),mds-file-preview:not(:is([hydrated],.hydrated)),mds-filter:not(:is([hydrated],.hydrated)),mds-filter-item:not(:is([hydrated],.hydrated)),mds-header:not(:is([hydrated],.hydrated)),mds-header-bar:not(:is([hydrated],.hydrated)),mds-help:not(:is([hydrated],.hydrated)),mds-horizontal-scroll:not(:is([hydrated],.hydrated)),mds-hr:not(:is([hydrated],.hydrated)),mds-icon:not(:is([hydrated],.hydrated)),mds-img:not(:is([hydrated],.hydrated)),mds-input:not(:is([hydrated],.hydrated)),mds-input-field:not(:is([hydrated],.hydrated)),mds-input-range:not(:is([hydrated],.hydrated)),mds-input-select:not(:is([hydrated],.hydrated)),mds-input-switch:not(:is([hydrated],.hydrated)),mds-input-tip:not(:is([hydrated],.hydrated)),mds-input-tip-item:not(:is([hydrated],.hydrated)),mds-input-upload:not(:is([hydrated],.hydrated)),mds-keyboard:not(:is([hydrated],.hydrated)),mds-keyboard-key:not(:is([hydrated],.hydrated)),mds-kpi:not(:is([hydrated],.hydrated)),mds-kpi-item:not(:is([hydrated],.hydrated)),mds-label:not(:is([hydrated],.hydrated)),mds-list:not(:is([hydrated],.hydrated)),mds-list-item:not(:is([hydrated],.hydrated)),mds-modal:not(:is([hydrated],.hydrated)),mds-note:not(:is([hydrated],.hydrated)),mds-notification:not(:is([hydrated],.hydrated)),mds-paginator:not(:is([hydrated],.hydrated)),mds-paginator-item:not(:is([hydrated],.hydrated)),mds-pref:not(:is([hydrated],.hydrated)),mds-pref-animation:not(:is([hydrated],.hydrated)),mds-pref-consumption:not(:is([hydrated],.hydrated)),mds-pref-contrast:not(:is([hydrated],.hydrated)),mds-pref-language:not(:is([hydrated],.hydrated)),mds-pref-language-item:not(:is([hydrated],.hydrated)),mds-pref-theme:not(:is([hydrated],.hydrated)),mds-price-table:not(:is([hydrated],.hydrated)),mds-price-table-features:not(:is([hydrated],.hydrated)),mds-price-table-features-cell:not(:is([hydrated],.hydrated)),mds-price-table-features-row:not(:is([hydrated],.hydrated)),mds-price-table-header:not(:is([hydrated],.hydrated)),mds-price-table-list:not(:is([hydrated],.hydrated)),mds-price-table-list-item:not(:is([hydrated],.hydrated)),mds-progress:not(:is([hydrated],.hydrated)),mds-push-notification:not(:is([hydrated],.hydrated)),mds-push-notifications:not(:is([hydrated],.hydrated)),mds-quote:not(:is([hydrated],.hydrated)),mds-separator:not(:is([hydrated],.hydrated)),mds-spinner:not(:is([hydrated],.hydrated)),mds-stepper-bar:not(:is([hydrated],.hydrated)),mds-stepper-bar-item:not(:is([hydrated],.hydrated)),mds-tab:not(:is([hydrated],.hydrated)),mds-tab-bar:not(:is([hydrated],.hydrated)),mds-tab-bar-item:not(:is([hydrated],.hydrated)),mds-tab-item:not(:is([hydrated],.hydrated)),mds-table:not(:is([hydrated],.hydrated)),mds-table-body:not(:is([hydrated],.hydrated)),mds-table-cell:not(:is([hydrated],.hydrated)),mds-table-footer:not(:is([hydrated],.hydrated)),mds-table-header:not(:is([hydrated],.hydrated)),mds-table-header-cell:not(:is([hydrated],.hydrated)),mds-table-row:not(:is([hydrated],.hydrated)),mds-text:not(:is([hydrated],.hydrated)),mds-toast:not(:is([hydrated],.hydrated)),mds-tooltip:not(:is([hydrated],.hydrated)),mds-tree:not(:is([hydrated],.hydrated)),mds-tree-item:not(:is([hydrated],.hydrated)),mds-url-view:not(:is([hydrated],.hydrated)),mds-usage:not(:is([hydrated],.hydrated)),mds-video-wall:not(:is([hydrated],.hydrated)),mds-zero:not(:is([hydrated],.hydrated)){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}";
|
|
50
50
|
const MdsPaginatorItemStyle0 = mdsPaginatorItemCss;
|
|
51
51
|
|
|
52
52
|
const MdsPaginatorItem$1 = /*@__PURE__*/ proxyCustomElement(class MdsPaginatorItem extends HTMLElement {
|