@aurodesignsystem-dev/auro-tabs 0.0.0-pr87.1 → 0.0.0-pr87.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/custom-elements.json +2300 -0
- package/demo/api.html +18 -6
- package/demo/api.md +123 -42
- package/demo/auro-tabpanel.min.js +88 -12
- package/demo/index.html +16 -19
- package/demo/index.md +53 -46
- package/demo/lit-element.min.js +2 -2
- package/dist/auro-tabpanel-CmN2vp5_.js +23 -0
- package/dist/index.d.ts +7 -7
- package/dist/index.js +1 -1
- package/dist/registered.js +1 -1
- package/package.json +10 -9
- package/demo/demo.md +0 -608
- package/dist/auro-tabpanel-CbLgu51a.js +0 -23
package/demo/demo.md
DELETED
|
@@ -1,608 +0,0 @@
|
|
|
1
|
-
<!--
|
|
2
|
-
The demo.md file is a compiled document. No edits should be made directly to this file.
|
|
3
|
-
README.md is created by running `npm run build:docs`.
|
|
4
|
-
This file is generated based on a template fetched from `./docs/partials/demo.md`
|
|
5
|
-
-->
|
|
6
|
-
|
|
7
|
-
# Tabs
|
|
8
|
-
|
|
9
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./description.md) -->
|
|
10
|
-
<!-- The below content is automatically added from ./description.md -->
|
|
11
|
-
`<auro-tabs>` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose of showing a set of layered sections of content, known as tab panels, that display one panel of content at a time. Each tab panel has an associated tab element, that when activated, displays the panel. The list of tab elements is arranged along one edge of the currently displayed panel, most commonly the top edge.
|
|
12
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
13
|
-
|
|
14
|
-
## auro-tabs use cases
|
|
15
|
-
|
|
16
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./useCases.md) -->
|
|
17
|
-
<!-- The below content is automatically added from ./useCases.md -->
|
|
18
|
-
The `<auro-tabs>` element should be used in situations where users:
|
|
19
|
-
|
|
20
|
-
* show a list of content without reloading the page or compromising on space
|
|
21
|
-
* need to organize large amount of content that can be separated
|
|
22
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
23
|
-
|
|
24
|
-
## Example(s)
|
|
25
|
-
|
|
26
|
-
## Default
|
|
27
|
-
|
|
28
|
-
`auro-tabpanel` needs to be defined directly after `auro-tab` so that it can be paired.
|
|
29
|
-
If there is a use-case where a tab doesn't have a tabpanel, then leave the tabpanel undefined.
|
|
30
|
-
Example below:
|
|
31
|
-
|
|
32
|
-
<div class="exampleWrapper">
|
|
33
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/basic.html) -->
|
|
34
|
-
<!-- The below content is automatically added from ./../../apiExamples/basic.html -->
|
|
35
|
-
<auro-tabgroup>
|
|
36
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
37
|
-
Baggage Info
|
|
38
|
-
</auro-tab>
|
|
39
|
-
<auro-tabpanel slot="panel">
|
|
40
|
-
<span>Tab 1 Content</span>
|
|
41
|
-
</auro-tabpanel>
|
|
42
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
43
|
-
Help
|
|
44
|
-
</auro-tab>
|
|
45
|
-
<auro-tabpanel slot="panel"><span>Tab 2 Content</span></auro-tabpanel>
|
|
46
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
47
|
-
More
|
|
48
|
-
</auro-tab>
|
|
49
|
-
<auro-tabpanel slot="panel"><span>Tab 3 Content</span></auro-tabpanel>
|
|
50
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
51
|
-
No Panel
|
|
52
|
-
</auro-tab>
|
|
53
|
-
</auro-tabgroup>
|
|
54
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
55
|
-
</div>
|
|
56
|
-
<auro-accordion lowProfile justifyRight>
|
|
57
|
-
<span slot="trigger">See code</span>
|
|
58
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/basic.html) -->
|
|
59
|
-
<!-- The below code snippet is automatically added from ./../../apiExamples/basic.html -->
|
|
60
|
-
|
|
61
|
-
```html
|
|
62
|
-
<auro-tabgroup>
|
|
63
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
64
|
-
Baggage Info
|
|
65
|
-
</auro-tab>
|
|
66
|
-
<auro-tabpanel slot="panel">
|
|
67
|
-
<span>Tab 1 Content</span>
|
|
68
|
-
</auro-tabpanel>
|
|
69
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
70
|
-
Help
|
|
71
|
-
</auro-tab>
|
|
72
|
-
<auro-tabpanel slot="panel"><span>Tab 2 Content</span></auro-tabpanel>
|
|
73
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
74
|
-
More
|
|
75
|
-
</auro-tab>
|
|
76
|
-
<auro-tabpanel slot="panel"><span>Tab 3 Content</span></auro-tabpanel>
|
|
77
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
78
|
-
No Panel
|
|
79
|
-
</auro-tab>
|
|
80
|
-
</auro-tabgroup>
|
|
81
|
-
```
|
|
82
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
83
|
-
</auro-accordion>
|
|
84
|
-
|
|
85
|
-
## States
|
|
86
|
-
|
|
87
|
-
There are five states which `auro-tabs` supported:
|
|
88
|
-
- default
|
|
89
|
-
- hover
|
|
90
|
-
- focus
|
|
91
|
-
- selected
|
|
92
|
-
- disabled
|
|
93
|
-
|
|
94
|
-
Try hover & focus state by forcing the `<a>` element state inside auro-tab with css styles console.
|
|
95
|
-
|
|
96
|
-
Selected and Disabled state can be set directly with property: `selected` or `disabled` to the auro-tab itself.
|
|
97
|
-
Although, `selected` is automatically added on tab clicked.
|
|
98
|
-
|
|
99
|
-
<div class="exampleWrapper">
|
|
100
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/states.html) -->
|
|
101
|
-
<!-- The below content is automatically added from ./../../apiExamples/states.html -->
|
|
102
|
-
<auro-tabgroup>
|
|
103
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
104
|
-
Baggage Info
|
|
105
|
-
</auro-tab>
|
|
106
|
-
<auro-tabpanel slot="panel">
|
|
107
|
-
<span>Tab 1 Content</span>
|
|
108
|
-
</auro-tabpanel>
|
|
109
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
110
|
-
Help
|
|
111
|
-
</auro-tab>
|
|
112
|
-
<auro-tabpanel slot="panel"><span>Tab 2 Content</span></auro-tabpanel>
|
|
113
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
114
|
-
More
|
|
115
|
-
</auro-tab>
|
|
116
|
-
<auro-tabpanel slot="panel"><span>Tab 3 Content</span></auro-tabpanel>
|
|
117
|
-
<auro-tab disabled href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
118
|
-
Disabled
|
|
119
|
-
</auro-tab>
|
|
120
|
-
<auro-tabpanel slot="panel"><span>Disabled Content</span></auro-tabpanel>
|
|
121
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
122
|
-
No Panel
|
|
123
|
-
</auro-tab>
|
|
124
|
-
</auro-tabgroup>
|
|
125
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
126
|
-
</div>
|
|
127
|
-
<auro-accordion lowProfile justifyRight>
|
|
128
|
-
<span slot="trigger">See code</span>
|
|
129
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/states.html) -->
|
|
130
|
-
<!-- The below code snippet is automatically added from ./../../apiExamples/states.html -->
|
|
131
|
-
|
|
132
|
-
```html
|
|
133
|
-
<auro-tabgroup>
|
|
134
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
135
|
-
Baggage Info
|
|
136
|
-
</auro-tab>
|
|
137
|
-
<auro-tabpanel slot="panel">
|
|
138
|
-
<span>Tab 1 Content</span>
|
|
139
|
-
</auro-tabpanel>
|
|
140
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
141
|
-
Help
|
|
142
|
-
</auro-tab>
|
|
143
|
-
<auro-tabpanel slot="panel"><span>Tab 2 Content</span></auro-tabpanel>
|
|
144
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
145
|
-
More
|
|
146
|
-
</auro-tab>
|
|
147
|
-
<auro-tabpanel slot="panel"><span>Tab 3 Content</span></auro-tabpanel>
|
|
148
|
-
<auro-tab disabled href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
149
|
-
Disabled
|
|
150
|
-
</auro-tab>
|
|
151
|
-
<auro-tabpanel slot="panel"><span>Disabled Content</span></auro-tabpanel>
|
|
152
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
153
|
-
No Panel
|
|
154
|
-
</auro-tab>
|
|
155
|
-
</auro-tabgroup>
|
|
156
|
-
```
|
|
157
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
158
|
-
</auro-accordion>
|
|
159
|
-
|
|
160
|
-
## Scroll behaviour
|
|
161
|
-
|
|
162
|
-
`auro-tabs` in desktop breakpoint (>=768px) will show a button in left & right side, when the number of `auro-tab` exceeds the container size. In mobile breakpoint (<767px), it will normally show a browser scrollbar under the tabgroup.
|
|
163
|
-
|
|
164
|
-
Example below:
|
|
165
|
-
|
|
166
|
-
<div class="exampleWrapper">
|
|
167
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/scroll.html) -->
|
|
168
|
-
<!-- The below content is automatically added from ./../../apiExamples/scroll.html -->
|
|
169
|
-
<auro-tabgroup>
|
|
170
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
171
|
-
Baggage Info
|
|
172
|
-
</auro-tab>
|
|
173
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
174
|
-
Help
|
|
175
|
-
</auro-tab>
|
|
176
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
177
|
-
More
|
|
178
|
-
</auro-tab>
|
|
179
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
180
|
-
More 2
|
|
181
|
-
</auro-tab>
|
|
182
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
183
|
-
More 3
|
|
184
|
-
</auro-tab>
|
|
185
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
186
|
-
More 4
|
|
187
|
-
</auro-tab>
|
|
188
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
189
|
-
More 5
|
|
190
|
-
</auro-tab>
|
|
191
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
192
|
-
More 6
|
|
193
|
-
</auro-tab>
|
|
194
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
195
|
-
More 7
|
|
196
|
-
</auro-tab>
|
|
197
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
198
|
-
More 8
|
|
199
|
-
</auro-tab>
|
|
200
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
201
|
-
More 9
|
|
202
|
-
</auro-tab>
|
|
203
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
204
|
-
More 10
|
|
205
|
-
</auro-tab>
|
|
206
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
207
|
-
More 11
|
|
208
|
-
</auro-tab>
|
|
209
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
210
|
-
More 12
|
|
211
|
-
</auro-tab>
|
|
212
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
213
|
-
More 13
|
|
214
|
-
</auro-tab>
|
|
215
|
-
<auro-tab disabled href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
216
|
-
Disabled
|
|
217
|
-
</auro-tab>
|
|
218
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
219
|
-
No Panel
|
|
220
|
-
</auro-tab>
|
|
221
|
-
</auro-tabgroup>
|
|
222
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
223
|
-
</div>
|
|
224
|
-
<auro-accordion lowProfile justifyRight>
|
|
225
|
-
<span slot="trigger">See code</span>
|
|
226
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/scroll.html) -->
|
|
227
|
-
<!-- The below code snippet is automatically added from ./../../apiExamples/scroll.html -->
|
|
228
|
-
|
|
229
|
-
```html
|
|
230
|
-
<auro-tabgroup>
|
|
231
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
232
|
-
Baggage Info
|
|
233
|
-
</auro-tab>
|
|
234
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
235
|
-
Help
|
|
236
|
-
</auro-tab>
|
|
237
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
238
|
-
More
|
|
239
|
-
</auro-tab>
|
|
240
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
241
|
-
More 2
|
|
242
|
-
</auro-tab>
|
|
243
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
244
|
-
More 3
|
|
245
|
-
</auro-tab>
|
|
246
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
247
|
-
More 4
|
|
248
|
-
</auro-tab>
|
|
249
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
250
|
-
More 5
|
|
251
|
-
</auro-tab>
|
|
252
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
253
|
-
More 6
|
|
254
|
-
</auro-tab>
|
|
255
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
256
|
-
More 7
|
|
257
|
-
</auro-tab>
|
|
258
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
259
|
-
More 8
|
|
260
|
-
</auro-tab>
|
|
261
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
262
|
-
More 9
|
|
263
|
-
</auro-tab>
|
|
264
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
265
|
-
More 10
|
|
266
|
-
</auro-tab>
|
|
267
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
268
|
-
More 11
|
|
269
|
-
</auro-tab>
|
|
270
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
271
|
-
More 12
|
|
272
|
-
</auro-tab>
|
|
273
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
274
|
-
More 13
|
|
275
|
-
</auro-tab>
|
|
276
|
-
<auro-tab disabled href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
277
|
-
Disabled
|
|
278
|
-
</auro-tab>
|
|
279
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
280
|
-
No Panel
|
|
281
|
-
</auro-tab>
|
|
282
|
-
</auro-tabgroup>
|
|
283
|
-
```
|
|
284
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
285
|
-
</auro-accordion>
|
|
286
|
-
|
|
287
|
-
#### Container width: 400px
|
|
288
|
-
|
|
289
|
-
<div class="exampleWrapper">
|
|
290
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/scroll-400.html) -->
|
|
291
|
-
<!-- The below content is automatically added from ./../../apiExamples/scroll-400.html -->
|
|
292
|
-
<div style="width: 400px;">
|
|
293
|
-
<auro-tabgroup>
|
|
294
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
295
|
-
Baggage Info
|
|
296
|
-
</auro-tab>
|
|
297
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
298
|
-
Help
|
|
299
|
-
</auro-tab>
|
|
300
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
301
|
-
More
|
|
302
|
-
</auro-tab>
|
|
303
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
304
|
-
More 2
|
|
305
|
-
</auro-tab>
|
|
306
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
307
|
-
More 3
|
|
308
|
-
</auro-tab>
|
|
309
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
310
|
-
More 4
|
|
311
|
-
</auro-tab>
|
|
312
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
313
|
-
More 5
|
|
314
|
-
</auro-tab>
|
|
315
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
316
|
-
More 6
|
|
317
|
-
</auro-tab>
|
|
318
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
319
|
-
More 7
|
|
320
|
-
</auro-tab>
|
|
321
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
322
|
-
More 8
|
|
323
|
-
</auro-tab>
|
|
324
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
325
|
-
More 9
|
|
326
|
-
</auro-tab>
|
|
327
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
328
|
-
More 10
|
|
329
|
-
</auro-tab>
|
|
330
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
331
|
-
More 11
|
|
332
|
-
</auro-tab>
|
|
333
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
334
|
-
More 12
|
|
335
|
-
</auro-tab>
|
|
336
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
337
|
-
More 13
|
|
338
|
-
</auro-tab>
|
|
339
|
-
<auro-tab disabled href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
340
|
-
Disabled
|
|
341
|
-
</auro-tab>
|
|
342
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
343
|
-
No Panel
|
|
344
|
-
</auro-tab>
|
|
345
|
-
</auro-tabgroup>
|
|
346
|
-
</div>
|
|
347
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
348
|
-
</div>
|
|
349
|
-
<auro-accordion lowProfile justifyRight>
|
|
350
|
-
<span slot="trigger">See code</span>
|
|
351
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/scroll-400.html) -->
|
|
352
|
-
<!-- The below code snippet is automatically added from ./../../apiExamples/scroll-400.html -->
|
|
353
|
-
|
|
354
|
-
```html
|
|
355
|
-
<div style="width: 400px;">
|
|
356
|
-
<auro-tabgroup>
|
|
357
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
358
|
-
Baggage Info
|
|
359
|
-
</auro-tab>
|
|
360
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
361
|
-
Help
|
|
362
|
-
</auro-tab>
|
|
363
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
364
|
-
More
|
|
365
|
-
</auro-tab>
|
|
366
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
367
|
-
More 2
|
|
368
|
-
</auro-tab>
|
|
369
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
370
|
-
More 3
|
|
371
|
-
</auro-tab>
|
|
372
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
373
|
-
More 4
|
|
374
|
-
</auro-tab>
|
|
375
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
376
|
-
More 5
|
|
377
|
-
</auro-tab>
|
|
378
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
379
|
-
More 6
|
|
380
|
-
</auro-tab>
|
|
381
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
382
|
-
More 7
|
|
383
|
-
</auro-tab>
|
|
384
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
385
|
-
More 8
|
|
386
|
-
</auro-tab>
|
|
387
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
388
|
-
More 9
|
|
389
|
-
</auro-tab>
|
|
390
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
391
|
-
More 10
|
|
392
|
-
</auro-tab>
|
|
393
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
394
|
-
More 11
|
|
395
|
-
</auro-tab>
|
|
396
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
397
|
-
More 12
|
|
398
|
-
</auro-tab>
|
|
399
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
400
|
-
More 13
|
|
401
|
-
</auro-tab>
|
|
402
|
-
<auro-tab disabled href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
403
|
-
Disabled
|
|
404
|
-
</auro-tab>
|
|
405
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
406
|
-
No Panel
|
|
407
|
-
</auro-tab>
|
|
408
|
-
</auro-tabgroup>
|
|
409
|
-
</div>
|
|
410
|
-
```
|
|
411
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
412
|
-
</auro-accordion>
|
|
413
|
-
|
|
414
|
-
## Custom tab content
|
|
415
|
-
|
|
416
|
-
Auro tab also supports rich content inside of a tab. Instead of passing simple text, use html markup as needed to fit
|
|
417
|
-
your design spec. The wrapper `auro-tabgroup` also exposes two css parts for custom sliders (active indicator) -
|
|
418
|
-
`slider` and the parent `slider-positioner`.
|
|
419
|
-
|
|
420
|
-
Note: `slider` css is not overwritten by the JavaScript logic, while `slider-positioner` **width** and **left** properties
|
|
421
|
-
are used internally to position the slider and will be automatically overwritten.
|
|
422
|
-
|
|
423
|
-
<div class="exampleWrapper">
|
|
424
|
-
<auro-tabgroup id="custom-tab-example">
|
|
425
|
-
<auro-tab slot="tab">
|
|
426
|
-
<div class="custom-tab">
|
|
427
|
-
<span>Flights</span>
|
|
428
|
-
<span role="img" aria-label="airplane emoji">✈️</span>
|
|
429
|
-
</div>
|
|
430
|
-
</auro-tab>
|
|
431
|
-
<auro-tabpanel slot="panel">
|
|
432
|
-
<span>Tab 1 Content</span>
|
|
433
|
-
</auro-tabpanel>
|
|
434
|
-
<auro-tab slot="tab">
|
|
435
|
-
<div class="custom-tab">
|
|
436
|
-
<span>Rentals</span>
|
|
437
|
-
<span role="img" aria-label="car emoji">🚗</span>
|
|
438
|
-
</div>
|
|
439
|
-
</auro-tab>
|
|
440
|
-
<auro-tabpanel slot="panel">
|
|
441
|
-
<span>Tab 2 Content</span>
|
|
442
|
-
</auro-tabpanel>
|
|
443
|
-
</auro-tabgroup>
|
|
444
|
-
</div>
|
|
445
|
-
|
|
446
|
-
<auro-accordion lowProfile justifyRight>
|
|
447
|
-
<span slot="trigger">See code</span>
|
|
448
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/custom-content.html) -->
|
|
449
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
450
|
-
</auro-accordion>
|
|
451
|
-
|
|
452
|
-
CSS used in the example above:
|
|
453
|
-
```css
|
|
454
|
-
#custom-tab-example::part(slider) {
|
|
455
|
-
height: 5px;
|
|
456
|
-
margin-top: -3px;
|
|
457
|
-
border-radius: 1rem;
|
|
458
|
-
width: 25px;
|
|
459
|
-
}
|
|
460
|
-
|
|
461
|
-
.custom-tab {
|
|
462
|
-
padding: 5px 15px 10px;
|
|
463
|
-
display: flex;
|
|
464
|
-
flex-direction: column;
|
|
465
|
-
justify-content: center;
|
|
466
|
-
align-items: center;
|
|
467
|
-
}
|
|
468
|
-
|
|
469
|
-
.custom-panel-wrapper {
|
|
470
|
-
padding: 1rem;
|
|
471
|
-
}
|
|
472
|
-
```
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
## Accessibility
|
|
476
|
-
|
|
477
|
-
### Tab Role
|
|
478
|
-
|
|
479
|
-
Each of `auro-tabgroup`, `auro-tab`, and `auro-tabpanel` have predefined role as tablist, button, or tabpanel. Except for auro-tab which is an extension of `auro-hyperlink`. If `href` property is defined, then the `auro-tab` role is not set.
|
|
480
|
-
|
|
481
|
-
Q: Why `auro-tab`'s role assigned as 'button' instead of 'tab' ?
|
|
482
|
-
|
|
483
|
-
A: Because auro-tab is currently extends the [auro-hyperlink](https://auro.alaskaair.com/components/auro/hyperlink) component, it is either to be rendered as `<a>` element or return as its given slot. The element needs to be a [focusable element](https://allyjs.io/data-tables/focusable.html), and left & right arrow can be used to navigate through the tab items, for that reason we give it role 'button'.
|
|
484
|
-
|
|
485
|
-
<div class="exampleWrapper">
|
|
486
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/role.html) -->
|
|
487
|
-
<!-- The below content is automatically added from ./../../apiExamples/role.html -->
|
|
488
|
-
<auro-tabgroup>
|
|
489
|
-
<auro-tab slot="tab">
|
|
490
|
-
Baggage Info
|
|
491
|
-
</auro-tab>
|
|
492
|
-
<auro-tabpanel slot="panel">
|
|
493
|
-
<span>Tab 1 Content</span>
|
|
494
|
-
</auro-tabpanel>
|
|
495
|
-
<auro-tab slot="tab">
|
|
496
|
-
Help
|
|
497
|
-
</auro-tab>
|
|
498
|
-
<auro-tabpanel slot="panel"><span><a href="https://www.google.com">Tab 2 Content</a></span></auro-tabpanel>
|
|
499
|
-
<auro-tab slot="tab">
|
|
500
|
-
More
|
|
501
|
-
</auro-tab>
|
|
502
|
-
<auro-tabpanel slot="panel"><span>Tab 3 Content</span></auro-tabpanel>
|
|
503
|
-
<auro-tab disabled slot="tab">
|
|
504
|
-
Disabled
|
|
505
|
-
</auro-tab>
|
|
506
|
-
<auro-tabpanel slot="panel"><span>Disabled Content</span></auro-tabpanel>
|
|
507
|
-
<auro-tab slot="tab">
|
|
508
|
-
No Panel
|
|
509
|
-
</auro-tab>
|
|
510
|
-
</auro-tabgroup>
|
|
511
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
512
|
-
</div>
|
|
513
|
-
<auro-accordion lowProfile justifyRight>
|
|
514
|
-
<span slot="trigger">See code</span>
|
|
515
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/role.html) -->
|
|
516
|
-
<!-- The below code snippet is automatically added from ./../../apiExamples/role.html -->
|
|
517
|
-
|
|
518
|
-
```html
|
|
519
|
-
<auro-tabgroup>
|
|
520
|
-
<auro-tab slot="tab">
|
|
521
|
-
Baggage Info
|
|
522
|
-
</auro-tab>
|
|
523
|
-
<auro-tabpanel slot="panel">
|
|
524
|
-
<span>Tab 1 Content</span>
|
|
525
|
-
</auro-tabpanel>
|
|
526
|
-
<auro-tab slot="tab">
|
|
527
|
-
Help
|
|
528
|
-
</auro-tab>
|
|
529
|
-
<auro-tabpanel slot="panel"><span><a href="https://www.google.com">Tab 2 Content</a></span></auro-tabpanel>
|
|
530
|
-
<auro-tab slot="tab">
|
|
531
|
-
More
|
|
532
|
-
</auro-tab>
|
|
533
|
-
<auro-tabpanel slot="panel"><span>Tab 3 Content</span></auro-tabpanel>
|
|
534
|
-
<auro-tab disabled slot="tab">
|
|
535
|
-
Disabled
|
|
536
|
-
</auro-tab>
|
|
537
|
-
<auro-tabpanel slot="panel"><span>Disabled Content</span></auro-tabpanel>
|
|
538
|
-
<auro-tab slot="tab">
|
|
539
|
-
No Panel
|
|
540
|
-
</auro-tab>
|
|
541
|
-
</auro-tabgroup>
|
|
542
|
-
```
|
|
543
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
544
|
-
</auro-accordion>
|
|
545
|
-
|
|
546
|
-
## Recommended Use and Version Control
|
|
547
|
-
|
|
548
|
-
There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom clement. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-tabs` custom element is defined automatically.
|
|
549
|
-
|
|
550
|
-
To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `registerComponent(name, type)` method and pass in a unique name.
|
|
551
|
-
|
|
552
|
-
`type` can be either `'group(default)' | 'tab' | 'panel'`
|
|
553
|
-
|
|
554
|
-
```js
|
|
555
|
-
import '@alaskaairux/auro-tabs';
|
|
556
|
-
registerComponent('custom-tabgroup');
|
|
557
|
-
registerComponent('custom-tab', 'tab');
|
|
558
|
-
registerComponent('custom-tabpanel', 'tabpanel');
|
|
559
|
-
```
|
|
560
|
-
|
|
561
|
-
This will create a new custom element that you can use in your HTML that will function identically to the `auro-tabgroup` element.
|
|
562
|
-
|
|
563
|
-
<div class="exampleWrapper">
|
|
564
|
-
<custom-tabgroup>
|
|
565
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
566
|
-
Baggage Info
|
|
567
|
-
</auro-tab>
|
|
568
|
-
<auro-tabpanel slot="panel">
|
|
569
|
-
<span>Tab 1 Content</span>
|
|
570
|
-
</auro-tabpanel>
|
|
571
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
572
|
-
Help
|
|
573
|
-
</auro-tab>
|
|
574
|
-
<auro-tabpanel slot="panel"><span>Tab 2 Content</span></auro-tabpanel>
|
|
575
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
576
|
-
More
|
|
577
|
-
</auro-tab>
|
|
578
|
-
<auro-tabpanel slot="panel"><span>Tab 3 Content</span></auro-tabpanel>
|
|
579
|
-
<auro-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
580
|
-
No Panel
|
|
581
|
-
</auro-tab>
|
|
582
|
-
</custom-tabgroup>
|
|
583
|
-
</div>
|
|
584
|
-
<auro-accordion lowProfile justifyRight>
|
|
585
|
-
<span slot="trigger">See code</span>
|
|
586
|
-
|
|
587
|
-
```html
|
|
588
|
-
<custom-tabgroup class="compact-default">
|
|
589
|
-
<custom-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
590
|
-
Baggage Info
|
|
591
|
-
</custom-tab>
|
|
592
|
-
<custom-tabpanel slot="panel">
|
|
593
|
-
<span>Tab 1 Content</span>
|
|
594
|
-
</custom-tabpanel>
|
|
595
|
-
<custom-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
596
|
-
Help
|
|
597
|
-
</custom-tab>
|
|
598
|
-
<custom-tabpanel slot="panel"><span>Tab 2 Content</span></custom-tabpanel>
|
|
599
|
-
<custom-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
600
|
-
More
|
|
601
|
-
</custom-tab>
|
|
602
|
-
<custom-tabpanel slot="panel"><span>Tab 3 Content</span></custom-tabpanel>
|
|
603
|
-
<custom-tab href="#/" relative="http://localhost:8000/demo" slot="tab">
|
|
604
|
-
No Panel
|
|
605
|
-
</custom-tab>
|
|
606
|
-
</custom-tabgroup>
|
|
607
|
-
```
|
|
608
|
-
</auro-accordion>
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import{css as t,LitElement as e,html as s}from"lit";import{html as i}from"lit/static-html.js";import{styleMap as r}from"lit/directives/style-map.js";class o{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{})}closestElement(t,e=this,s=(e,i=e&&e.closest(t))=>e&&e!==document&&e!==window?i||s(e.getRootNode().host):null){return s(e)}handleComponentTagRename(t,e){const s=e.toLowerCase();t.tagName.toLowerCase()!==s&&t.setAttribute(s,!0)}elementMatch(t,e){const s=e.toLowerCase();return t.tagName.toLowerCase()===s||t.hasAttribute(s)}}var a=t`:host #tab-root{cursor:pointer;white-space:nowrap}:host([disabled]){pointer-events:none}:host(:focus-within),:host(:focus:not(:focus-visible)){position:relative;outline:none}:host(:focus-within):before,:host(:focus:not(:focus-visible)):before{position:absolute;top:0;left:50%;display:inline-block;width:100%;height:calc(100% + var(--ds-size-50, .25rem));border:1px solid var(--ds-color-border-active-default, #0074c8);border-radius:var(--ds-border-radius, .375rem);content:"";transform:translate(-50%)}
|
|
2
|
-
`;class n extends e{static get properties(){return{selected:{type:Boolean,reflect:!0},focused:{type:Boolean,state:!0},disabled:{type:Boolean,reflect:!0},variant:{type:String,reflect:!0}}}static get styles(){return[a]}constructor(){super(),n.incrementInstanceCount(),this.handleTagName(),this.setId(),this.setInitialValues(),this.setAttributes(),this.addEventListeners()}static incrementInstanceCount(){n.instanceCount=(n.instanceCount||0)+1}addEventListeners(){this.addEventListener("keydown",this.onKeyDown)}onKeyDown=t=>{"Enter"!==t.key&&" "!==t.key||(this.selected=!0,t.preventDefault())};setFocused(t){t&&this.focus(),this.focused=t,this.setAttribute("tabindex",t?0:-1),this.dispatchCustomEvent(t?"tab-focused":"tab-blurred",this)}setId(){this.id=this.id||`auro-tab-${n.instanceCount}`}setInitialValues(){this.disabled=!1,this.panel=null}setAttributes(){this.setAttribute("role","tab")}handleTagName(){o.prototype.handleComponentTagRename(this,"auro-tab")}applyA11y(){const t=this.shadowRoot.querySelector("a");t&&t.setAttribute("role","none")}updateSelected(){this.setAttribute("tabindex",this.selected||this.focused?0:-1),this.setAttribute("aria-selected",this.selected?"true":"false"),this.selected&&this.dispatchCustomEvent("tab-selected",this)}dispatchCustomEvent(t,e){const s=new CustomEvent(t,{bubbles:!0,composed:!0,detail:e});this.dispatchEvent(s)}static register(t="auro-tab"){o.prototype.registerComponent(t,n)}firstUpdated(){this.applyA11y()}updated(t){t.has("selected")&&this.updateSelected()}render(){return i`
|
|
3
|
-
<div part="tab-root" id="tab-root">
|
|
4
|
-
<slot></slot>
|
|
5
|
-
</div>
|
|
6
|
-
`}}class l{#t=[];#e=[];#s=[];get current(){return this.#t}subscribe(t){if("function"!=typeof t)throw new Error("AuroTabService | subscribe: Callback must be a function");return this.#s.push(t),()=>this.unsubscribe(t)}unsubscribe(t){if("function"!=typeof t)throw new Error("AuroTabService | unsubscribe: Callback must be a function");return this.#s=this.#s.filter(e=>e!==t),!0}#i(){for(const t of this.#s)t(this.#t,this.#e)}add(t){if("object"!=typeof t||null===t)throw new Error("AuroTabService | addItem: Item must be an object");this.#e=this.#r(),this.#t.push(t),this.#i()}addMany(t){if(!t||"function"!=typeof t[Symbol.iterator]||"string"==typeof t)throw new Error("AuroTabService | addMany: Items must be iterable (array, etc.)");this.#e=this.#r(),this.#t.push(...t),this.#i()}remove(t){if("object"!=typeof t||null===t)throw new Error("AuroTabService | removeItem: Item must be an object");this.#e=this.#r(),this.#t=this.#t.filter(e=>e!==t),this.#i()}clear(){this.#e=this.#r(),this.#t=[],this.#i()}getItemByIndex(t){return this.#t[t]}getItemByNumber(t){if(0===this.#t.length||"number"!=typeof t||t<0||t>this.#t.length)throw new Error("AuroTabService | getItemByNumber: Number must be a valid index within the range of items.");return this.#t[t-1]}getPreviousItem(t){if("number"!=typeof t||t<1||t>this.#t.length)throw new Error("AuroTabService | getPreviousItem: Index must be a valid number within the range of previous items.");let e=t-2;return e=e<0?this.#t.length-1:e,this.#t[e]}getNextItem(t){if("number"!=typeof t||t<1||t>this.#t.length)throw new Error("AuroTabService | getNextItem: Index must be a valid number within the range of previous items.");let e=t;return e=e>=this.#t.length?0:e,this.#t[e]}#r(){return[...this.#t]}}var h=t`::slotted(auro-tabpanel){flex-basis:100%}:host{position:relative;display:block}.tabgroupContainer{display:flex;flex-direction:column;transition:scroll .5s ease-in-out}.tabgroup{position:relative;padding-bottom:0}.tabgroup ::slotted([slot=tabs]){display:flex;overflow:unset;width:fit-content;flex-wrap:nowrap}.sliderPositioner{position:absolute;bottom:-1px;left:0;display:flex;width:0;height:calc(var(--ds-size-25, .125rem) + 1px);align-items:center;justify-content:center;transition:all .25s}.slider{width:100%;height:100%;background-color:var(--ds-color-ui-active-default, #054687)}
|
|
7
|
-
`;class c{static getPreviousNotDisabledIndex(t,e){let s=t;const i=()=>{0===s?s=e.length-1:s-=1};for(i();e[s].hasAttribute("disabled");)i();return s}static findNextNotDisabledIndex(t,e){let s=t;const i=()=>{s===e.length-1?s=0:s+=1};for(i();e[s].hasAttribute("disabled");)i();return s}}const u="ArrowLeft",d="ArrowRight",b="Home",p="End";class m extends e{static get properties(){return{scrollPosition:{type:Number},selectOnFocus:{type:Boolean,reflect:!0},sliderStyles:{type:Object},rightChevronIsVisible:{type:Boolean,attribute:!1,reflect:!1,default:!0},leftChevronIsVisible:{type:Boolean,attribute:!1,reflect:!1}}}get allTabs(){return this.tabs.current}get allPanels(){return this.panels.current}get currentTabIndex(){return this.focusedTabIdx}get currentTab(){return this.allTabs[this.focusedTabIdx]}get scrollSize(){return this.tabGroupContainer?this.tabGroupContainer.scrollWidth-this.tabGroupContainer.clientWidth:0}get busy(){return"true"===this.getAttribute("aria-busy")}set busy(t){this.setAttribute("aria-busy",String(t))}static get styles(){return[h]}constructor(){super(),this.handleTagName(),this.setInitialValues(),this.bindMethods(),this.tabs=new l,this.panels=new l,this.tabs.subscribe(this.#o),this.panels.subscribe(this.#o)}handleTagName(){o.prototype.handleComponentTagRename(this,"auro-tabgroup")}setInitialValues(){this.scrollPosition=0,this.sliderStyles={},this.selectOnFocus=!1,this.focusedTabIdx=-1,this.resizeObserver=void 0}bindMethods(){this.handleTabSelected=this.handleTabSelected.bind(this),this.handleTabFocused=this.handleTabFocused.bind(this)}static register(t="auro-tabgroup"){o.prototype.registerComponent(t,m)}#a(){this.allTabs.forEach((t,e)=>{const s=this.panels.getItemByIndex(e);s&&(s.hidden=!0,t.panel=s,t.setAttribute("aria-controls",s.id),s.setAttribute("aria-labelledby",t.id),t.selected&&this.selectTab(t))})}addEventListeners(){this.addEventListener("tab-selected",this.handleTabSelected),this.addEventListener("tab-focused",this.handleTabFocused),this.addEventListener("keydown",this.onKeyDown),this.addEventListener("click",this.onClick)}removeEventListeners(){this.removeEventListener("keydown",this.onKeyDown),this.removeEventListener("click",this.onClick),this.resizeObserver?.disconnect()}#o=()=>{this.busy=!0,this.#a(),-1===this.focusedTabIdx&&this.allTabs[0]?.panel&&this.selectTab(this.allTabs[0]),this.busy=!1};selectTab(t){const e=this.allTabs;this.focusedTabIdx=-1;for(let s=0;s<e.length;s++){const i=e[s];i===t&&(this.focusedTabIdx=s),i.selected=i===t,i.panel&&(i.panel.hidden=i!==t)}if(this.scrollSize>0){const e=t.getBoundingClientRect(),s=this.tabGroupContainer.clientWidth/2;this.tabGroupContainer.scrollBy({left:e.x-s,behavior:"smooth"})}t.panel||console.warn(`No panel with id ${t.id}`)}selectTabByIndex(t){const e=this.tabs.current[t];e&&this.selectTab(e)}onKeyDown(t){if(t.altKey)return;const e=t.target.getAttribute("role");if("tab"!==e&&"tablist"!==e)return;const s=this.allTabs;let i=0;switch(t.key){case u:i=c.getPreviousNotDisabledIndex(this.focusedTabIdx,s);break;case d:i=c.findNextNotDisabledIndex(this.focusedTabIdx,s);break;case b:i=0;break;case p:i=s.length-1;break;default:return}this.focusedTabIdx=i,t.preventDefault();const r=s[i];r&&(this.tabs.current.forEach((t,e)=>{t.setFocused(t===r)}),this.selectOnFocus&&this.selectTab(r))}onClick(t){const e="tab"!==t.target.getAttribute("role"),s=t.target.closest("[role=tab]");e&&!s&&"auro-tab"!==t.target.localName||(s?this.selectTab(s):this.selectTab(t.target))}handleTabSelected(t){this.sliderStyles.width=0;const e=t.target;e&&(this.selectTab(e),this.sliderStyles={width:`${e.clientWidth}px`,left:e.offsetLeft-.5+"px"})}handleTabFocused(t){const e=t.target;this.focusedTabIdx=this.tabs.current.indexOf(e)||0}generateIcon(t){return(new DOMParser).parseFromString(t.svg,"text/html").body.firstChild}onTabGroupScroll(){this.scrollPosition=this.tabGroupContainer.scrollLeft}scrollTab(t){if(this.tabGroupContainer)switch(t){case"prev":this.tabGroupContainer.scrollLeft>0&&this.tabGroupContainer.scrollBy({left:-this.tabGroupContainer.clientWidth,behavior:"smooth"});break;case"next":this.tabGroupContainer.scrollLeft<this.scrollSize&&this.tabGroupContainer.scrollBy({left:this.tabGroupContainer.clientWidth,behavior:"smooth"})}}setResizeObserver(t){this.resizeObserver=new ResizeObserver(()=>{this.handleTabSelected({target:this.currentTab})});const e=t.querySelector(".tabgroup");this.resizeObserver.observe(e,{box:"border-box"})}setupTabGroupContainer(){this.tabGroupContainer=this.shadowRoot.querySelector(".tabgroupContainer"),this.tabGroupContainer.addEventListener("scroll",()=>this.onTabGroupScroll())}updateChevronVisibility(){this.leftChevronIsVisible=(this.scrollPosition>=this.scrollSize||0!==this.scrollPosition)&&this.scrollSize>0,this.rightChevronIsVisible=(0===this.scrollPosition||this.scrollPosition<this.scrollSize)&&this.scrollSize>0}firstUpdated(){this.setupTabGroupContainer(),this.setResizeObserver(this.tabGroupContainer)}updated(){this.updateChevronVisibility()}connectedCallback(){super.connectedCallback(),this.addEventListeners()}disconnectedCallback(){this.removeEventListeners()}#n=()=>{const t=this.querySelectorAll("auro-tab, [auro-tab]"),e=this.querySelectorAll("auro-tabpanel, [auro-tabpanel]");this.tabs.clear(),this.panels.clear(),this.tabs.addMany(t),this.panels.addMany(e),this.#o()};render(){const t=r(this.sliderStyles);return s`
|
|
8
|
-
<div part="tabgroup__root" class="tabgroupContainer">
|
|
9
|
-
<div part="tabgroup__tabs" class="tabgroup" role="tablist">
|
|
10
|
-
<slot name="tabs" @slotchange="${this.#n}"></slot>
|
|
11
|
-
<div part="slider-positioner" class="sliderPositioner" style=${t}>
|
|
12
|
-
<div part="slider" class="slider"></div>
|
|
13
|
-
</div>
|
|
14
|
-
</div>
|
|
15
|
-
|
|
16
|
-
<div part="tabgroup__panels">
|
|
17
|
-
<slot name="panels" @slotchange="${this.#n}"></slot>
|
|
18
|
-
</div>
|
|
19
|
-
</div>
|
|
20
|
-
`}}var f=t`:host{display:block;width:100%}:host([hidden]){display:none}
|
|
21
|
-
`;class g extends e{static get properties(){return{hidden:{type:Boolean,reflect:!0}}}static get styles(){return[f]}constructor(){super(),g.incrementInstanceCount(),this.handleTagName(),this.setId(),this.setAttributes()}static incrementInstanceCount(){g.instanceCount=(g.instanceCount||0)+1}static register(t="auro-tabpanel"){o.prototype.registerComponent(t,g)}handleTagName(){o.prototype.handleComponentTagRename(this,"auro-tabpanel")}setId(){this.id=this.id||`auro-tabpanel-${g.instanceCount}`}setAttributes(){this.setAttribute("role","tabpanel"),this.setAttribute("tabindex",0)}updated(t){t.has("hidden")&&this.setAttribute("tabindex",this.hidden?-1:0)}render(){return s`
|
|
22
|
-
<slot></slot>
|
|
23
|
-
`}}export{n as A,m as a,g as b};
|