@spectrum-web-components/tabs 1.0.0 → 1.1.0-beta.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.
Files changed (2) hide show
  1. package/package.json +7 -7
  2. package/custom-elements.json +0 -1086
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/tabs",
3
- "version": "1.0.0",
3
+ "version": "1.1.0-beta.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -88,11 +88,11 @@
88
88
  ],
89
89
  "dependencies": {
90
90
  "@lit-labs/observers": "^2.0.2",
91
- "@spectrum-web-components/base": "^1.0.0",
92
- "@spectrum-web-components/icon": "^1.0.0",
93
- "@spectrum-web-components/icons-ui": "^1.0.0",
94
- "@spectrum-web-components/reactive-controllers": "^1.0.0",
95
- "@spectrum-web-components/shared": "^1.0.0"
91
+ "@spectrum-web-components/base": "^1.1.0-beta.0",
92
+ "@spectrum-web-components/icon": "^1.1.0-beta.0",
93
+ "@spectrum-web-components/icons-ui": "^1.1.0-beta.0",
94
+ "@spectrum-web-components/reactive-controllers": "^1.1.0-beta.0",
95
+ "@spectrum-web-components/shared": "^1.1.0-beta.0"
96
96
  },
97
97
  "devDependencies": {
98
98
  "@spectrum-css/tabs": "^6.0.0-s2-foundations.16"
@@ -103,5 +103,5 @@
103
103
  "./sp-*.js",
104
104
  "./**/*.dev.js"
105
105
  ],
106
- "gitHead": "5cf5d34645bf9494ebd20f64c42d1619523d2d84"
106
+ "gitHead": "8840da116b3429f0b4de70ad7f690ae3de1c9448"
107
107
  }
package/custom-elements.json DELETED
@@ -1,1086 +0,0 @@
1
- {
2
- "schemaVersion": "1.0.0",
3
- "readme": "",
4
- "modules": [
5
- {
6
- "kind": "javascript-module",
7
- "path": "sp-tab-panel.js",
8
- "declarations": [],
9
- "exports": [
10
- {
11
- "kind": "custom-element-definition",
12
- "name": "sp-tab-panel",
13
- "declaration": {
14
- "name": "TabPanel",
15
- "module": "/src/TabPanel.js"
16
- }
17
- }
18
- ]
19
- },
20
- {
21
- "kind": "javascript-module",
22
- "path": "sp-tab.js",
23
- "declarations": [],
24
- "exports": [
25
- {
26
- "kind": "custom-element-definition",
27
- "name": "sp-tab",
28
- "declaration": {
29
- "name": "Tab",
30
- "module": "/src/Tab.js"
31
- }
32
- }
33
- ]
34
- },
35
- {
36
- "kind": "javascript-module",
37
- "path": "sp-tabs-overflow.js",
38
- "declarations": [],
39
- "exports": [
40
- {
41
- "kind": "custom-element-definition",
42
- "name": "sp-tabs-overflow",
43
- "declaration": {
44
- "name": "TabsOverflow",
45
- "module": "/src/TabsOverflow.js"
46
- }
47
- }
48
- ]
49
- },
50
- {
51
- "kind": "javascript-module",
52
- "path": "sp-tabs.js",
53
- "declarations": [],
54
- "exports": [
55
- {
56
- "kind": "custom-element-definition",
57
- "name": "sp-tabs",
58
- "declaration": {
59
- "name": "Tabs",
60
- "module": "/src/Tabs.js"
61
- }
62
- }
63
- ]
64
- },
65
- {
66
- "kind": "javascript-module",
67
- "path": "src/Tab.js",
68
- "declarations": [
69
- {
70
- "kind": "class",
71
- "description": "",
72
- "name": "Tab",
73
- "slots": [
74
- {
75
- "description": "text label of the Tab",
76
- "name": ""
77
- },
78
- {
79
- "description": "The icon that appears on the left of the label",
80
- "name": "icon"
81
- }
82
- ],
83
- "members": [
84
- {
85
- "kind": "field",
86
- "name": "hasIcon",
87
- "type": {
88
- "text": "boolean"
89
- },
90
- "privacy": "protected",
91
- "readonly": true
92
- },
93
- {
94
- "kind": "field",
95
- "name": "hasLabel",
96
- "type": {
97
- "text": "boolean"
98
- },
99
- "privacy": "protected",
100
- "readonly": true
101
- },
102
- {
103
- "kind": "field",
104
- "name": "disabled",
105
- "type": {
106
- "text": "boolean"
107
- },
108
- "privacy": "public",
109
- "default": "false",
110
- "attribute": "disabled",
111
- "reflects": true
112
- },
113
- {
114
- "kind": "field",
115
- "name": "label",
116
- "type": {
117
- "text": "string"
118
- },
119
- "privacy": "public",
120
- "default": "''",
121
- "attribute": "label",
122
- "reflects": true
123
- },
124
- {
125
- "kind": "field",
126
- "name": "selected",
127
- "type": {
128
- "text": "boolean"
129
- },
130
- "privacy": "public",
131
- "default": "false",
132
- "attribute": "selected",
133
- "reflects": true
134
- },
135
- {
136
- "kind": "field",
137
- "name": "vertical",
138
- "type": {
139
- "text": "boolean"
140
- },
141
- "privacy": "public",
142
- "default": "false",
143
- "attribute": "vertical",
144
- "reflects": true
145
- },
146
- {
147
- "kind": "field",
148
- "name": "value",
149
- "type": {
150
- "text": "string"
151
- },
152
- "privacy": "public",
153
- "default": "''",
154
- "attribute": "value",
155
- "reflects": true
156
- }
157
- ],
158
- "attributes": [
159
- {
160
- "name": "disabled",
161
- "type": {
162
- "text": "boolean"
163
- },
164
- "default": "false",
165
- "fieldName": "disabled"
166
- },
167
- {
168
- "name": "label",
169
- "type": {
170
- "text": "string"
171
- },
172
- "default": "''",
173
- "fieldName": "label"
174
- },
175
- {
176
- "name": "selected",
177
- "type": {
178
- "text": "boolean"
179
- },
180
- "default": "false",
181
- "fieldName": "selected"
182
- },
183
- {
184
- "name": "vertical",
185
- "type": {
186
- "text": "boolean"
187
- },
188
- "default": "false",
189
- "fieldName": "vertical"
190
- },
191
- {
192
- "name": "value",
193
- "type": {
194
- "text": "string"
195
- },
196
- "default": "''",
197
- "fieldName": "value"
198
- }
199
- ],
200
- "mixins": [
201
- {
202
- "name": "FocusVisiblePolyfillMixin",
203
- "package": "@spectrum-web-components/shared/src/focus-visible.js"
204
- },
205
- {
206
- "name": "ObserveSlotText",
207
- "package": "@spectrum-web-components/shared/src/observe-slot-text.js"
208
- },
209
- {
210
- "name": "ObserveSlotPresence",
211
- "package": "@spectrum-web-components/shared/src/observe-slot-presence.js"
212
- }
213
- ],
214
- "superclass": {
215
- "name": "SpectrumElement",
216
- "package": "@spectrum-web-components/base"
217
- },
218
- "tagName": "sp-tab",
219
- "customElement": true
220
- }
221
- ],
222
- "exports": [
223
- {
224
- "kind": "js",
225
- "name": "Tab",
226
- "declaration": {
227
- "name": "Tab",
228
- "module": "src/Tab.js"
229
- }
230
- }
231
- ]
232
- },
233
- {
234
- "kind": "javascript-module",
235
- "path": "src/TabPanel.js",
236
- "declarations": [
237
- {
238
- "kind": "class",
239
- "description": "",
240
- "name": "TabPanel",
241
- "slots": [
242
- {
243
- "description": "content of the Tab Panel",
244
- "name": ""
245
- }
246
- ],
247
- "members": [
248
- {
249
- "kind": "field",
250
- "name": "selected",
251
- "type": {
252
- "text": "boolean"
253
- },
254
- "privacy": "public",
255
- "default": "false",
256
- "attribute": "selected",
257
- "reflects": true
258
- },
259
- {
260
- "kind": "field",
261
- "name": "value",
262
- "type": {
263
- "text": "string"
264
- },
265
- "privacy": "public",
266
- "default": "''",
267
- "attribute": "value",
268
- "reflects": true
269
- },
270
- {
271
- "kind": "method",
272
- "name": "handleFocusin",
273
- "privacy": "protected",
274
- "return": {
275
- "type": {
276
- "text": "void"
277
- }
278
- }
279
- },
280
- {
281
- "kind": "method",
282
- "name": "handleFocusout",
283
- "privacy": "protected",
284
- "return": {
285
- "type": {
286
- "text": "void"
287
- }
288
- }
289
- }
290
- ],
291
- "attributes": [
292
- {
293
- "name": "selected",
294
- "type": {
295
- "text": "boolean"
296
- },
297
- "default": "false",
298
- "fieldName": "selected"
299
- },
300
- {
301
- "name": "value",
302
- "type": {
303
- "text": "string"
304
- },
305
- "default": "''",
306
- "fieldName": "value"
307
- }
308
- ],
309
- "superclass": {
310
- "name": "SpectrumElement",
311
- "package": "@spectrum-web-components/base"
312
- },
313
- "tagName": "sp-tab-panel",
314
- "customElement": true
315
- }
316
- ],
317
- "exports": [
318
- {
319
- "kind": "js",
320
- "name": "TabPanel",
321
- "declaration": {
322
- "name": "TabPanel",
323
- "module": "src/TabPanel.js"
324
- }
325
- }
326
- ]
327
- },
328
- {
329
- "kind": "javascript-module",
330
- "path": "src/Tabs.js",
331
- "declarations": [
332
- {
333
- "kind": "variable",
334
- "name": "ScaledIndicator",
335
- "type": {
336
- "text": "object"
337
- },
338
- "default": "{\n baseSize: 100 as const,\n noSelectionStyle: 'transform: translateX(0px) scaleX(0) scaleY(0)',\n\n transformX(left: number, width: number): string {\n const scale = width / this.baseSize;\n return `transform: translateX(${left}px) scaleX(${scale});`;\n },\n\n transformY(top: number, height: number): string {\n const scale = height / this.baseSize;\n return `transform: translateY(${top}px) scaleY(${scale});`;\n },\n\n baseStyles(): CSSResult {\n return css`\n :host([direction='vertical-right']) #selection-indicator,\n :host([direction='vertical']) #selection-indicator {\n height: ${this.baseSize}px;\n }\n :host([dir][direction='horizontal']) #selection-indicator {\n width: ${this.baseSize}px;\n }\n `;\n },\n}"
339
- },
340
- {
341
- "kind": "function",
342
- "name": "calculateScrollTargetForRightSide",
343
- "return": {
344
- "type": {
345
- "text": "number"
346
- }
347
- },
348
- "parameters": [
349
- {
350
- "name": "index",
351
- "type": {
352
- "text": "number"
353
- }
354
- },
355
- {
356
- "name": "direction",
357
- "type": {
358
- "text": "'rtl' | 'ltr'"
359
- }
360
- },
361
- {
362
- "name": "tabs",
363
- "type": {
364
- "text": "Tab[]"
365
- }
366
- },
367
- {
368
- "name": "container",
369
- "type": {
370
- "text": "HTMLDivElement"
371
- }
372
- }
373
- ],
374
- "description": "Given that the scroll needs to be on the right side of the viewport.\nReturns the coordonate x it needs to scroll so that the tab with given index is visible."
375
- },
376
- {
377
- "kind": "function",
378
- "name": "calculateScrollTargetForLeftSide",
379
- "return": {
380
- "type": {
381
- "text": "number"
382
- }
383
- },
384
- "parameters": [
385
- {
386
- "name": "index",
387
- "type": {
388
- "text": "number"
389
- }
390
- },
391
- {
392
- "name": "direction",
393
- "type": {
394
- "text": "'rtl' | 'ltr'"
395
- }
396
- },
397
- {
398
- "name": "tabs",
399
- "type": {
400
- "text": "Tab[]"
401
- }
402
- },
403
- {
404
- "name": "container",
405
- "type": {
406
- "text": "HTMLDivElement"
407
- }
408
- }
409
- ],
410
- "description": "Given that the scroll needs to be on the left side of the viewport.\nReturns the coordonate x it needs to scroll so that the tab with given index is visible."
411
- },
412
- {
413
- "kind": "class",
414
- "description": "",
415
- "name": "Tabs",
416
- "cssParts": [
417
- {
418
- "description": "Container element for the slotted sp-tab elements",
419
- "name": "tablist"
420
- }
421
- ],
422
- "slots": [
423
- {
424
- "description": "Tab elements to manage as a group",
425
- "name": ""
426
- },
427
- {
428
- "description": "Tab Panel elements related to the listed Tab elements",
429
- "name": "tab-panel"
430
- }
431
- ],
432
- "members": [
433
- {
434
- "kind": "field",
435
- "name": "auto",
436
- "type": {
437
- "text": "boolean"
438
- },
439
- "privacy": "public",
440
- "default": "false",
441
- "description": "Whether to activate a tab on keyboard focus or not.\n\nBy default a tab is activated via a \"click\" interaction. This is specifically intended for when\ntab content cannot be displayed instantly, e.g. not all of the DOM content is available, etc.\nTo learn more about \"Deciding When to Make Selection Automatically Follow Focus\", visit:\nhttps://w3c.github.io/aria-practices/#kbd_selection_follows_focus",
442
- "attribute": "auto"
443
- },
444
- {
445
- "kind": "field",
446
- "name": "compact",
447
- "type": {
448
- "text": "boolean"
449
- },
450
- "privacy": "public",
451
- "default": "false",
452
- "description": "The tab items are displayed closer together.",
453
- "attribute": "compact",
454
- "reflects": true
455
- },
456
- {
457
- "kind": "field",
458
- "name": "dir",
459
- "type": {
460
- "text": "'ltr' | 'rtl'"
461
- },
462
- "privacy": "public",
463
- "attribute": "dir",
464
- "reflects": true
465
- },
466
- {
467
- "kind": "field",
468
- "name": "direction",
469
- "type": {
470
- "text": "'vertical' | 'vertical-right' | 'horizontal'"
471
- },
472
- "privacy": "public",
473
- "default": "'horizontal'",
474
- "attribute": "direction",
475
- "reflects": true
476
- },
477
- {
478
- "kind": "field",
479
- "name": "emphasized",
480
- "type": {
481
- "text": "boolean"
482
- },
483
- "privacy": "public",
484
- "default": "false",
485
- "attribute": "emphasized",
486
- "reflects": true
487
- },
488
- {
489
- "kind": "field",
490
- "name": "label",
491
- "type": {
492
- "text": "string"
493
- },
494
- "privacy": "public",
495
- "default": "''",
496
- "attribute": "label"
497
- },
498
- {
499
- "kind": "field",
500
- "name": "enableTabsScroll",
501
- "type": {
502
- "text": "boolean"
503
- },
504
- "privacy": "public",
505
- "default": "false",
506
- "attribute": "enableTabsScroll"
507
- },
508
- {
509
- "kind": "field",
510
- "name": "quiet",
511
- "type": {
512
- "text": "boolean"
513
- },
514
- "privacy": "public",
515
- "default": "false",
516
- "description": "The tab list is displayed without a border.",
517
- "attribute": "quiet",
518
- "reflects": true
519
- },
520
- {
521
- "kind": "field",
522
- "name": "selectionIndicatorStyle",
523
- "privacy": "public"
524
- },
525
- {
526
- "kind": "field",
527
- "name": "shouldAnimate",
528
- "type": {
529
- "text": "boolean"
530
- },
531
- "privacy": "public",
532
- "default": "false"
533
- },
534
- {
535
- "kind": "field",
536
- "name": "slotEl",
537
- "type": {
538
- "text": "HTMLSlotElement"
539
- },
540
- "privacy": "private"
541
- },
542
- {
543
- "kind": "field",
544
- "name": "tabList",
545
- "type": {
546
- "text": "HTMLDivElement"
547
- },
548
- "privacy": "private"
549
- },
550
- {
551
- "kind": "field",
552
- "name": "selected",
553
- "type": {
554
- "text": "string"
555
- },
556
- "default": "''",
557
- "attribute": "selected",
558
- "reflects": true
559
- },
560
- {
561
- "kind": "field",
562
- "name": "tabs",
563
- "privacy": "private",
564
- "type": {
565
- "text": "Tab[]"
566
- }
567
- },
568
- {
569
- "kind": "field",
570
- "name": "_tabs",
571
- "type": {
572
- "text": "Tab[]"
573
- },
574
- "privacy": "private",
575
- "default": "[]"
576
- },
577
- {
578
- "kind": "field",
579
- "name": "resizeController",
580
- "privacy": "protected",
581
- "default": "new ResizeController(this, {\n callback: () => {\n this.updateSelectionIndicator();\n },\n })"
582
- },
583
- {
584
- "kind": "field",
585
- "name": "rovingTabindexController",
586
- "default": "new RovingTabindexController<Tab>(this, {\n focusInIndex: (elements) => {\n let focusInIndex = 0;\n const firstFocusableElement = elements.find((el, index) => {\n const focusInElement = this.selected\n ? !el.disabled && el.value === this.selected\n : !el.disabled;\n focusInIndex = index;\n return focusInElement;\n });\n return firstFocusableElement ? focusInIndex : -1;\n },\n direction: () => 'both',\n elementEnterAction: (el) => {\n if (!this.auto) return;\n\n this.shouldAnimate = true;\n this.selectTarget(el);\n },\n elements: () => this.tabs,\n isFocusableElement: (el) => !el.disabled,\n listenerScope: () => this.tabList,\n })"
587
- },
588
- {
589
- "kind": "field",
590
- "name": "focusElement",
591
- "type": {
592
- "text": "Tab | this"
593
- },
594
- "privacy": "private",
595
- "readonly": true
596
- },
597
- {
598
- "kind": "method",
599
- "name": "limitDeltaToInterval",
600
- "privacy": "private",
601
- "parameters": [
602
- {
603
- "name": "min",
604
- "type": {
605
- "text": "number"
606
- }
607
- },
608
- {
609
- "name": "max",
610
- "type": {
611
- "text": "number"
612
- }
613
- }
614
- ]
615
- },
616
- {
617
- "kind": "method",
618
- "name": "scrollTabs",
619
- "privacy": "public",
620
- "return": {
621
- "type": {
622
- "text": "void"
623
- }
624
- },
625
- "parameters": [
626
- {
627
- "name": "delta",
628
- "type": {
629
- "text": "number"
630
- },
631
- "description": "The ammount of pixels to scroll by. If the value is positive, the tabs will scroll to the right. If the value is negative, the tabs will scroll to the left."
632
- },
633
- {
634
- "name": "behavior",
635
- "default": "'smooth'",
636
- "type": {
637
- "text": "ScrollBehavior"
638
- },
639
- "description": "The scroll behavior to use. Defaults to 'smooth'."
640
- }
641
- ],
642
- "description": "Scrolls through the tabs component, on the X-axis, by a given ammount of pixels/ delta. The given delta is limited to the scrollable area of the tabs component."
643
- },
644
- {
645
- "kind": "field",
646
- "name": "scrollState",
647
- "type": {
648
- "text": "Record<string, boolean>"
649
- },
650
- "privacy": "public",
651
- "readonly": true
652
- },
653
- {
654
- "kind": "method",
655
- "name": "getUpdateComplete",
656
- "return": {
657
- "type": {
658
- "text": "Promise<boolean>"
659
- }
660
- }
661
- },
662
- {
663
- "kind": "method",
664
- "name": "getNecessaryAutoScroll",
665
- "privacy": "private",
666
- "return": {
667
- "type": {
668
- "text": "number"
669
- }
670
- },
671
- "parameters": [
672
- {
673
- "name": "index",
674
- "type": {
675
- "text": "number"
676
- }
677
- }
678
- ]
679
- },
680
- {
681
- "kind": "method",
682
- "name": "scrollToSelection",
683
- "privacy": "public",
684
- "return": {
685
- "type": {
686
- "text": "Promise<void>"
687
- }
688
- }
689
- },
690
- {
691
- "kind": "method",
692
- "name": "managePanels",
693
- "privacy": "protected",
694
- "return": {
695
- "type": {
696
- "text": "void"
697
- }
698
- },
699
- "parameters": [
700
- {
701
- "name": "{\n target,\n }",
702
- "type": {
703
- "text": "Event & { target: HTMLSlotElement }"
704
- }
705
- }
706
- ]
707
- },
708
- {
709
- "kind": "field",
710
- "name": "onTabsScroll",
711
- "privacy": "private"
712
- },
713
- {
714
- "kind": "field",
715
- "name": "onClick",
716
- "privacy": "private"
717
- },
718
- {
719
- "kind": "field",
720
- "name": "onKeyDown",
721
- "privacy": "private"
722
- },
723
- {
724
- "kind": "method",
725
- "name": "selectTarget",
726
- "privacy": "private",
727
- "return": {
728
- "type": {
729
- "text": "void"
730
- }
731
- },
732
- "parameters": [
733
- {
734
- "name": "target",
735
- "type": {
736
- "text": "HTMLElement"
737
- }
738
- }
739
- ]
740
- },
741
- {
742
- "kind": "method",
743
- "name": "onSlotChange",
744
- "privacy": "private",
745
- "return": {
746
- "type": {
747
- "text": "void"
748
- }
749
- }
750
- },
751
- {
752
- "kind": "field",
753
- "name": "updateCheckedState",
754
- "privacy": "private"
755
- },
756
- {
757
- "kind": "field",
758
- "name": "updateSelectionIndicator",
759
- "privacy": "private"
760
- }
761
- ],
762
- "events": [
763
- {
764
- "name": "change",
765
- "type": {
766
- "text": "Event"
767
- },
768
- "description": "The selected Tab child has changed."
769
- }
770
- ],
771
- "attributes": [
772
- {
773
- "name": "auto",
774
- "type": {
775
- "text": "boolean"
776
- },
777
- "default": "false",
778
- "description": "Whether to activate a tab on keyboard focus or not.\n\nBy default a tab is activated via a \"click\" interaction. This is specifically intended for when\ntab content cannot be displayed instantly, e.g. not all of the DOM content is available, etc.\nTo learn more about \"Deciding When to Make Selection Automatically Follow Focus\", visit:\nhttps://w3c.github.io/aria-practices/#kbd_selection_follows_focus",
779
- "fieldName": "auto"
780
- },
781
- {
782
- "name": "compact",
783
- "type": {
784
- "text": "boolean"
785
- },
786
- "default": "false",
787
- "description": "The tab items are displayed closer together.",
788
- "fieldName": "compact"
789
- },
790
- {
791
- "name": "dir",
792
- "type": {
793
- "text": "'ltr' | 'rtl'"
794
- },
795
- "fieldName": "dir"
796
- },
797
- {
798
- "name": "direction",
799
- "type": {
800
- "text": "'vertical' | 'vertical-right' | 'horizontal'"
801
- },
802
- "default": "'horizontal'",
803
- "fieldName": "direction"
804
- },
805
- {
806
- "name": "emphasized",
807
- "type": {
808
- "text": "boolean"
809
- },
810
- "default": "false",
811
- "fieldName": "emphasized"
812
- },
813
- {
814
- "name": "label",
815
- "type": {
816
- "text": "string"
817
- },
818
- "default": "''",
819
- "fieldName": "label"
820
- },
821
- {
822
- "name": "enableTabsScroll",
823
- "type": {
824
- "text": "boolean"
825
- },
826
- "default": "false",
827
- "fieldName": "enableTabsScroll"
828
- },
829
- {
830
- "name": "quiet",
831
- "type": {
832
- "text": "boolean"
833
- },
834
- "default": "false",
835
- "description": "The tab list is displayed without a border.",
836
- "fieldName": "quiet"
837
- },
838
- {
839
- "name": "selected",
840
- "type": {
841
- "text": "string"
842
- },
843
- "default": "''",
844
- "fieldName": "selected"
845
- }
846
- ],
847
- "mixins": [
848
- {
849
- "name": "SizedMixin",
850
- "package": "@spectrum-web-components/base"
851
- }
852
- ],
853
- "superclass": {
854
- "name": "Focusable",
855
- "package": "@spectrum-web-components/shared"
856
- },
857
- "tagName": "sp-tabs",
858
- "customElement": true
859
- }
860
- ],
861
- "exports": [
862
- {
863
- "kind": "js",
864
- "name": "ScaledIndicator",
865
- "declaration": {
866
- "name": "ScaledIndicator",
867
- "module": "src/Tabs.js"
868
- }
869
- },
870
- {
871
- "kind": "js",
872
- "name": "calculateScrollTargetForRightSide",
873
- "declaration": {
874
- "name": "calculateScrollTargetForRightSide",
875
- "module": "src/Tabs.js"
876
- }
877
- },
878
- {
879
- "kind": "js",
880
- "name": "calculateScrollTargetForLeftSide",
881
- "declaration": {
882
- "name": "calculateScrollTargetForLeftSide",
883
- "module": "src/Tabs.js"
884
- }
885
- },
886
- {
887
- "kind": "js",
888
- "name": "Tabs",
889
- "declaration": {
890
- "name": "Tabs",
891
- "module": "src/Tabs.js"
892
- }
893
- }
894
- ]
895
- },
896
- {
897
- "kind": "javascript-module",
898
- "path": "src/TabsOverflow.js",
899
- "declarations": [
900
- {
901
- "kind": "class",
902
- "description": "",
903
- "name": "TabsOverflow",
904
- "members": [
905
- {
906
- "kind": "field",
907
- "name": "compact",
908
- "type": {
909
- "text": "boolean"
910
- },
911
- "privacy": "public",
912
- "default": "false",
913
- "attribute": "compact",
914
- "reflects": true
915
- },
916
- {
917
- "kind": "field",
918
- "name": "labelPrevious",
919
- "type": {
920
- "text": "string"
921
- },
922
- "privacy": "public",
923
- "default": "'Scroll to previous tabs'",
924
- "attribute": "label-previous"
925
- },
926
- {
927
- "kind": "field",
928
- "name": "labelNext",
929
- "type": {
930
- "text": "string"
931
- },
932
- "privacy": "public",
933
- "default": "'Scroll to next tabs'",
934
- "attribute": "label-next"
935
- },
936
- {
937
- "kind": "field",
938
- "name": "dir",
939
- "type": {
940
- "text": "'ltr' | 'rtl'"
941
- },
942
- "privacy": "public",
943
- "attribute": "dir",
944
- "reflects": true
945
- },
946
- {
947
- "kind": "field",
948
- "name": "overflowState",
949
- "type": {
950
- "text": "TabsOverflowState"
951
- },
952
- "privacy": "private",
953
- "default": "{\n canScrollLeft: false,\n canScrollRight: false,\n }"
954
- },
955
- {
956
- "kind": "field",
957
- "name": "scrollContent",
958
- "type": {
959
- "text": "Tabs[]"
960
- },
961
- "privacy": "private"
962
- },
963
- {
964
- "kind": "field",
965
- "name": "overflowContainer",
966
- "type": {
967
- "text": "HTMLDivElement"
968
- },
969
- "privacy": "private"
970
- },
971
- {
972
- "kind": "field",
973
- "name": "resizeController",
974
- "type": {
975
- "text": "ResizeController"
976
- },
977
- "default": "new ResizeController(this, {\n target: this,\n callback: (): void => {\n this._updateScrollState();\n },\n })"
978
- },
979
- {
980
- "kind": "method",
981
- "name": "_handleSlotChange",
982
- "privacy": "private",
983
- "return": {
984
- "type": {
985
- "text": "Promise<void>"
986
- }
987
- }
988
- },
989
- {
990
- "kind": "method",
991
- "name": "_updateScrollState",
992
- "privacy": "private",
993
- "return": {
994
- "type": {
995
- "text": "void"
996
- }
997
- }
998
- },
999
- {
1000
- "kind": "field",
1001
- "name": "scrollFactor",
1002
- "type": {
1003
- "text": "number"
1004
- },
1005
- "privacy": "private",
1006
- "default": "0.5"
1007
- },
1008
- {
1009
- "kind": "method",
1010
- "name": "_handleScrollClick",
1011
- "privacy": "private",
1012
- "return": {
1013
- "type": {
1014
- "text": "void"
1015
- }
1016
- },
1017
- "parameters": [
1018
- {
1019
- "name": "event",
1020
- "type": {
1021
- "text": "MouseEvent"
1022
- }
1023
- }
1024
- ]
1025
- }
1026
- ],
1027
- "attributes": [
1028
- {
1029
- "name": "compact",
1030
- "type": {
1031
- "text": "boolean"
1032
- },
1033
- "default": "false",
1034
- "fieldName": "compact"
1035
- },
1036
- {
1037
- "name": "label-previous",
1038
- "type": {
1039
- "text": "string"
1040
- },
1041
- "default": "'Scroll to previous tabs'",
1042
- "fieldName": "labelPrevious"
1043
- },
1044
- {
1045
- "name": "label-next",
1046
- "type": {
1047
- "text": "string"
1048
- },
1049
- "default": "'Scroll to next tabs'",
1050
- "fieldName": "labelNext"
1051
- },
1052
- {
1053
- "name": "dir",
1054
- "type": {
1055
- "text": "'ltr' | 'rtl'"
1056
- },
1057
- "fieldName": "dir"
1058
- }
1059
- ],
1060
- "mixins": [
1061
- {
1062
- "name": "SizedMixin",
1063
- "package": "@spectrum-web-components/base"
1064
- }
1065
- ],
1066
- "superclass": {
1067
- "name": "SpectrumElement",
1068
- "package": "@spectrum-web-components/base"
1069
- },
1070
- "tagName": "sp-tabs-overflow",
1071
- "customElement": true
1072
- }
1073
- ],
1074
- "exports": [
1075
- {
1076
- "kind": "js",
1077
- "name": "TabsOverflow",
1078
- "declaration": {
1079
- "name": "TabsOverflow",
1080
- "module": "src/TabsOverflow.js"
1081
- }
1082
- }
1083
- ]
1084
- }
1085
- ]
1086
- }