@spectrum-web-components/tabs 0.11.1 → 0.11.2
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/custom-elements.json +49 -76
- package/package.json +5 -4
- package/src/Tab.d.ts +0 -1
- package/src/Tab.dev.js +0 -15
- package/src/Tab.dev.js.map +2 -2
- package/src/Tab.js +2 -2
- package/src/Tab.js.map +2 -2
- package/src/Tabs.d.ts +4 -7
- package/src/Tabs.dev.js +35 -46
- package/src/Tabs.dev.js.map +2 -2
- package/src/Tabs.js +5 -6
- package/src/Tabs.js.map +3 -3
- package/src/TabsOverflow.d.ts +3 -1
- package/src/TabsOverflow.dev.js +17 -3
- package/src/TabsOverflow.dev.js.map +2 -2
- package/src/TabsOverflow.js +2 -2
- package/src/TabsOverflow.js.map +3 -3
- package/src/spectrum-config.js +219 -83
- package/src/spectrum-tab.css.dev.js +3 -33
- package/src/spectrum-tab.css.dev.js.map +2 -2
- package/src/spectrum-tab.css.js +3 -33
- package/src/spectrum-tab.css.js.map +2 -2
- package/src/spectrum-tabs-sizes.css.d.ts +2 -0
- package/src/spectrum-tabs-sizes.css.dev.js +327 -0
- package/src/spectrum-tabs-sizes.css.dev.js.map +7 -0
- package/src/spectrum-tabs-sizes.css.js +324 -0
- package/src/spectrum-tabs-sizes.css.js.map +7 -0
- package/src/spectrum-tabs.css.dev.js +7 -343
- package/src/spectrum-tabs.css.dev.js.map +2 -2
- package/src/spectrum-tabs.css.js +7 -343
- package/src/spectrum-tabs.css.js.map +2 -2
- package/src/tab.css.dev.js +3 -33
- package/src/tab.css.dev.js.map +2 -2
- package/src/tab.css.js +3 -33
- package/src/tab.css.js.map +2 -2
- package/src/tabs-overflow.css.dev.js +5 -3
- package/src/tabs-overflow.css.dev.js.map +2 -2
- package/src/tabs-overflow.css.js +5 -3
- package/src/tabs-overflow.css.js.map +2 -2
- package/src/tabs-sizes.css.d.ts +2 -0
- package/src/tabs-sizes.css.dev.js +327 -0
- package/src/tabs-sizes.css.dev.js.map +7 -0
- package/src/tabs-sizes.css.js +324 -0
- package/src/tabs-sizes.css.js.map +7 -0
- package/src/tabs.css.dev.js +11 -345
- package/src/tabs.css.dev.js.map +2 -2
- package/src/tabs.css.js +11 -345
- package/src/tabs.css.js.map +2 -2
- package/stories/index.js +8 -3
- package/stories/index.js.map +2 -2
- package/stories/tabs-overflow-panel-sizes.stories.js +35 -0
- package/stories/tabs-overflow-panel-sizes.stories.js.map +7 -0
- package/stories/tabs-overflow-sizes.stories.js +31 -0
- package/stories/tabs-overflow-sizes.stories.js.map +7 -0
- package/stories/tabs-overflow.stories.js +4 -10
- package/stories/tabs-overflow.stories.js.map +2 -2
- package/test/tabs-overflow-panel-sizes.test-vrt.js +5 -0
- package/test/tabs-overflow-panel-sizes.test-vrt.js.map +7 -0
- package/test/tabs-overflow-sizes.test-vrt.js +5 -0
- package/test/{tabs-overflow-panel.test-vrt.js.map → tabs-overflow-sizes.test-vrt.js.map} +2 -2
- package/test/tabs.test.js +4 -7
- package/test/tabs.test.js.map +2 -2
- package/stories/tabs-overflow-panel.stories.js +0 -19
- package/stories/tabs-overflow-panel.stories.js.map +0 -7
- package/test/tabs-overflow-panel.test-vrt.js +0 -5
package/custom-elements.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "sp-tab-panel.
|
|
7
|
+
"path": "sp-tab-panel.js",
|
|
8
8
|
"declarations": [],
|
|
9
9
|
"exports": [
|
|
10
10
|
{
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
},
|
|
20
20
|
{
|
|
21
21
|
"kind": "javascript-module",
|
|
22
|
-
"path": "sp-tab.
|
|
22
|
+
"path": "sp-tab.js",
|
|
23
23
|
"declarations": [],
|
|
24
24
|
"exports": [
|
|
25
25
|
{
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
},
|
|
35
35
|
{
|
|
36
36
|
"kind": "javascript-module",
|
|
37
|
-
"path": "sp-tabs-overflow.
|
|
37
|
+
"path": "sp-tabs-overflow.js",
|
|
38
38
|
"declarations": [],
|
|
39
39
|
"exports": [
|
|
40
40
|
{
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
},
|
|
50
50
|
{
|
|
51
51
|
"kind": "javascript-module",
|
|
52
|
-
"path": "sp-tabs.
|
|
52
|
+
"path": "sp-tabs.js",
|
|
53
53
|
"declarations": [],
|
|
54
54
|
"exports": [
|
|
55
55
|
{
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
},
|
|
65
65
|
{
|
|
66
66
|
"kind": "javascript-module",
|
|
67
|
-
"path": "src/Tab.
|
|
67
|
+
"path": "src/Tab.js",
|
|
68
68
|
"declarations": [
|
|
69
69
|
{
|
|
70
70
|
"kind": "class",
|
|
@@ -161,25 +161,6 @@
|
|
|
161
161
|
"default": "''",
|
|
162
162
|
"attribute": "value",
|
|
163
163
|
"reflects": true
|
|
164
|
-
},
|
|
165
|
-
{
|
|
166
|
-
"kind": "method",
|
|
167
|
-
"name": "handleContentChange",
|
|
168
|
-
"privacy": "protected",
|
|
169
|
-
"return": {
|
|
170
|
-
"type": {
|
|
171
|
-
"text": "void"
|
|
172
|
-
}
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
],
|
|
176
|
-
"events": [
|
|
177
|
-
{
|
|
178
|
-
"name": "sp-tab-contentchange",
|
|
179
|
-
"type": {
|
|
180
|
-
"text": "Event"
|
|
181
|
-
},
|
|
182
|
-
"description": "When the content in a tab has changed, JS powered layout related to that content may also need to be changed."
|
|
183
164
|
}
|
|
184
165
|
],
|
|
185
166
|
"attributes": [
|
|
@@ -252,14 +233,14 @@
|
|
|
252
233
|
"name": "Tab",
|
|
253
234
|
"declaration": {
|
|
254
235
|
"name": "Tab",
|
|
255
|
-
"module": "src/Tab.
|
|
236
|
+
"module": "src/Tab.js"
|
|
256
237
|
}
|
|
257
238
|
}
|
|
258
239
|
]
|
|
259
240
|
},
|
|
260
241
|
{
|
|
261
242
|
"kind": "javascript-module",
|
|
262
|
-
"path": "src/TabPanel.
|
|
243
|
+
"path": "src/TabPanel.js",
|
|
263
244
|
"declarations": [
|
|
264
245
|
{
|
|
265
246
|
"kind": "class",
|
|
@@ -337,14 +318,14 @@
|
|
|
337
318
|
"name": "TabPanel",
|
|
338
319
|
"declaration": {
|
|
339
320
|
"name": "TabPanel",
|
|
340
|
-
"module": "src/TabPanel.
|
|
321
|
+
"module": "src/TabPanel.js"
|
|
341
322
|
}
|
|
342
323
|
}
|
|
343
324
|
]
|
|
344
325
|
},
|
|
345
326
|
{
|
|
346
327
|
"kind": "javascript-module",
|
|
347
|
-
"path": "src/Tabs.
|
|
328
|
+
"path": "src/Tabs.js",
|
|
348
329
|
"declarations": [
|
|
349
330
|
{
|
|
350
331
|
"kind": "variable",
|
|
@@ -468,30 +449,29 @@
|
|
|
468
449
|
},
|
|
469
450
|
{
|
|
470
451
|
"kind": "field",
|
|
471
|
-
"name": "
|
|
452
|
+
"name": "slotEl",
|
|
472
453
|
"type": {
|
|
473
|
-
"text": "
|
|
454
|
+
"text": "HTMLSlotElement"
|
|
474
455
|
},
|
|
475
456
|
"privacy": "private"
|
|
476
457
|
},
|
|
477
458
|
{
|
|
478
459
|
"kind": "field",
|
|
479
|
-
"name": "
|
|
460
|
+
"name": "tabList",
|
|
480
461
|
"type": {
|
|
481
|
-
"text": "
|
|
462
|
+
"text": "HTMLDivElement"
|
|
482
463
|
},
|
|
483
|
-
"privacy": "
|
|
484
|
-
"attribute": "selected",
|
|
485
|
-
"reflects": true
|
|
464
|
+
"privacy": "private"
|
|
486
465
|
},
|
|
487
466
|
{
|
|
488
467
|
"kind": "field",
|
|
489
|
-
"name": "
|
|
468
|
+
"name": "selected",
|
|
490
469
|
"type": {
|
|
491
470
|
"text": "string"
|
|
492
471
|
},
|
|
493
|
-
"
|
|
494
|
-
"
|
|
472
|
+
"default": "''",
|
|
473
|
+
"attribute": "selected",
|
|
474
|
+
"reflects": true
|
|
495
475
|
},
|
|
496
476
|
{
|
|
497
477
|
"kind": "field",
|
|
@@ -510,6 +490,12 @@
|
|
|
510
490
|
"privacy": "private",
|
|
511
491
|
"default": "[]"
|
|
512
492
|
},
|
|
493
|
+
{
|
|
494
|
+
"kind": "field",
|
|
495
|
+
"name": "resizeController",
|
|
496
|
+
"privacy": "protected",
|
|
497
|
+
"default": "new ResizeController(this, {\n callback: () => {\n this.updateSelectionIndicator();\n },\n })"
|
|
498
|
+
},
|
|
513
499
|
{
|
|
514
500
|
"kind": "field",
|
|
515
501
|
"name": "rovingTabindexController",
|
|
@@ -627,16 +613,6 @@
|
|
|
627
613
|
}
|
|
628
614
|
}
|
|
629
615
|
},
|
|
630
|
-
{
|
|
631
|
-
"kind": "method",
|
|
632
|
-
"name": "shouldUpdateCheckedState",
|
|
633
|
-
"privacy": "private",
|
|
634
|
-
"return": {
|
|
635
|
-
"type": {
|
|
636
|
-
"text": "void"
|
|
637
|
-
}
|
|
638
|
-
}
|
|
639
|
-
},
|
|
640
616
|
{
|
|
641
617
|
"kind": "field",
|
|
642
618
|
"name": "updateCheckedState",
|
|
@@ -646,30 +622,6 @@
|
|
|
646
622
|
"kind": "field",
|
|
647
623
|
"name": "updateSelectionIndicator",
|
|
648
624
|
"privacy": "private"
|
|
649
|
-
},
|
|
650
|
-
{
|
|
651
|
-
"kind": "field",
|
|
652
|
-
"name": "tabChangePromise",
|
|
653
|
-
"privacy": "private"
|
|
654
|
-
},
|
|
655
|
-
{
|
|
656
|
-
"kind": "field",
|
|
657
|
-
"name": "tabChangeResolver",
|
|
658
|
-
"type": {
|
|
659
|
-
"text": "() => void"
|
|
660
|
-
},
|
|
661
|
-
"privacy": "private",
|
|
662
|
-
"default": "function () {\n return;\n }"
|
|
663
|
-
},
|
|
664
|
-
{
|
|
665
|
-
"kind": "method",
|
|
666
|
-
"name": "getUpdateComplete",
|
|
667
|
-
"privacy": "protected",
|
|
668
|
-
"return": {
|
|
669
|
-
"type": {
|
|
670
|
-
"text": "Promise<boolean>"
|
|
671
|
-
}
|
|
672
|
-
}
|
|
673
625
|
}
|
|
674
626
|
],
|
|
675
627
|
"events": [
|
|
@@ -746,6 +698,7 @@
|
|
|
746
698
|
"type": {
|
|
747
699
|
"text": "string"
|
|
748
700
|
},
|
|
701
|
+
"default": "''",
|
|
749
702
|
"fieldName": "selected"
|
|
750
703
|
}
|
|
751
704
|
],
|
|
@@ -769,7 +722,7 @@
|
|
|
769
722
|
"name": "ScaledIndicator",
|
|
770
723
|
"declaration": {
|
|
771
724
|
"name": "ScaledIndicator",
|
|
772
|
-
"module": "src/Tabs.
|
|
725
|
+
"module": "src/Tabs.js"
|
|
773
726
|
}
|
|
774
727
|
},
|
|
775
728
|
{
|
|
@@ -777,20 +730,30 @@
|
|
|
777
730
|
"name": "Tabs",
|
|
778
731
|
"declaration": {
|
|
779
732
|
"name": "Tabs",
|
|
780
|
-
"module": "src/Tabs.
|
|
733
|
+
"module": "src/Tabs.js"
|
|
781
734
|
}
|
|
782
735
|
}
|
|
783
736
|
]
|
|
784
737
|
},
|
|
785
738
|
{
|
|
786
739
|
"kind": "javascript-module",
|
|
787
|
-
"path": "src/TabsOverflow.
|
|
740
|
+
"path": "src/TabsOverflow.js",
|
|
788
741
|
"declarations": [
|
|
789
742
|
{
|
|
790
743
|
"kind": "class",
|
|
791
744
|
"description": "",
|
|
792
745
|
"name": "TabsOverflow",
|
|
793
746
|
"members": [
|
|
747
|
+
{
|
|
748
|
+
"kind": "field",
|
|
749
|
+
"name": "compact",
|
|
750
|
+
"type": {
|
|
751
|
+
"text": "boolean"
|
|
752
|
+
},
|
|
753
|
+
"default": "false",
|
|
754
|
+
"attribute": "compact",
|
|
755
|
+
"reflects": true
|
|
756
|
+
},
|
|
794
757
|
{
|
|
795
758
|
"kind": "field",
|
|
796
759
|
"name": "overflowState",
|
|
@@ -863,6 +826,16 @@
|
|
|
863
826
|
]
|
|
864
827
|
}
|
|
865
828
|
],
|
|
829
|
+
"attributes": [
|
|
830
|
+
{
|
|
831
|
+
"name": "compact",
|
|
832
|
+
"type": {
|
|
833
|
+
"text": "boolean"
|
|
834
|
+
},
|
|
835
|
+
"default": "false",
|
|
836
|
+
"fieldName": "compact"
|
|
837
|
+
}
|
|
838
|
+
],
|
|
866
839
|
"mixins": [
|
|
867
840
|
{
|
|
868
841
|
"name": "SizedMixin",
|
|
@@ -883,7 +856,7 @@
|
|
|
883
856
|
"name": "TabsOverflow",
|
|
884
857
|
"declaration": {
|
|
885
858
|
"name": "TabsOverflow",
|
|
886
|
-
"module": "src/TabsOverflow.
|
|
859
|
+
"module": "src/TabsOverflow.js"
|
|
887
860
|
}
|
|
888
861
|
}
|
|
889
862
|
]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/tabs",
|
|
3
|
-
"version": "0.11.
|
|
3
|
+
"version": "0.11.2",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -48,6 +48,7 @@
|
|
|
48
48
|
"./src/tab-panel.css.js": "./src/tab-panel.css.js",
|
|
49
49
|
"./src/tab.css.js": "./src/tab.css.js",
|
|
50
50
|
"./src/tabs-overflow.css.js": "./src/tabs-overflow.css.js",
|
|
51
|
+
"./src/tabs-sizes.css.js": "./src/tabs-sizes.css.js",
|
|
51
52
|
"./src/tabs.css.js": "./src/tabs.css.js",
|
|
52
53
|
"./sp-tabs.js": {
|
|
53
54
|
"development": "./sp-tabs.dev.js",
|
|
@@ -86,8 +87,8 @@
|
|
|
86
87
|
"dependencies": {
|
|
87
88
|
"@lit-labs/observers": "^1.0.1",
|
|
88
89
|
"@spectrum-web-components/base": "^0.7.4",
|
|
89
|
-
"@spectrum-web-components/icon": "^0.12.
|
|
90
|
-
"@spectrum-web-components/icons-ui": "^0.9.
|
|
90
|
+
"@spectrum-web-components/icon": "^0.12.9",
|
|
91
|
+
"@spectrum-web-components/icons-ui": "^0.9.10",
|
|
91
92
|
"@spectrum-web-components/reactive-controllers": "^0.3.5",
|
|
92
93
|
"@spectrum-web-components/shared": "^0.15.5"
|
|
93
94
|
},
|
|
@@ -100,5 +101,5 @@
|
|
|
100
101
|
"./sp-*.js",
|
|
101
102
|
"./**/*.dev.js"
|
|
102
103
|
],
|
|
103
|
-
"gitHead": "
|
|
104
|
+
"gitHead": "1e25ee121f3bc838dbb99bac62f3c95857570f7a"
|
|
104
105
|
}
|
package/src/Tab.d.ts
CHANGED
|
@@ -25,7 +25,6 @@ export declare class Tab extends Tab_base {
|
|
|
25
25
|
selected: boolean;
|
|
26
26
|
vertical: boolean;
|
|
27
27
|
value: string;
|
|
28
|
-
protected handleContentChange(): void;
|
|
29
28
|
protected render(): TemplateResult;
|
|
30
29
|
protected firstUpdated(changes: PropertyValues): void;
|
|
31
30
|
protected updated(changes: PropertyValues): void;
|
package/src/Tab.dev.js
CHANGED
|
@@ -41,14 +41,6 @@ const _Tab = class extends FocusVisiblePolyfillMixin(
|
|
|
41
41
|
get hasLabel() {
|
|
42
42
|
return !!this.label || this.slotHasContent;
|
|
43
43
|
}
|
|
44
|
-
handleContentChange() {
|
|
45
|
-
this.dispatchEvent(
|
|
46
|
-
new Event("sp-tab-contentchange", {
|
|
47
|
-
bubbles: true,
|
|
48
|
-
composed: true
|
|
49
|
-
})
|
|
50
|
-
);
|
|
51
|
-
}
|
|
52
44
|
render() {
|
|
53
45
|
return html`
|
|
54
46
|
${this.hasIcon ? html`
|
|
@@ -66,16 +58,9 @@ const _Tab = class extends FocusVisiblePolyfillMixin(
|
|
|
66
58
|
if (!this.hasAttribute("id")) {
|
|
67
59
|
this.id = `sp-tab-${_Tab.instanceCount++}`;
|
|
68
60
|
}
|
|
69
|
-
this.shadowRoot.addEventListener(
|
|
70
|
-
"slotchange",
|
|
71
|
-
this.handleContentChange
|
|
72
|
-
);
|
|
73
61
|
}
|
|
74
62
|
updated(changes) {
|
|
75
63
|
super.updated(changes);
|
|
76
|
-
if (changes.has("label") && typeof changes.get("label") !== "undefined") {
|
|
77
|
-
this.handleContentChange();
|
|
78
|
-
}
|
|
79
64
|
if (changes.has("selected")) {
|
|
80
65
|
this.setAttribute(
|
|
81
66
|
"aria-selected",
|
package/src/Tab.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Tab.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport {\n FocusVisiblePolyfillMixin,\n ObserveSlotPresence,\n ObserveSlotText,\n} from '@spectrum-web-components/shared';\n\nimport tabItemStyles from './tab.css.js';\n\n/**\n * @element sp-tab\n *\n * @slot - text label of the Tab\n * @slot icon - The icon that appears on the left of the label\n */\nexport class Tab extends FocusVisiblePolyfillMixin(\n ObserveSlotText(ObserveSlotPresence(SpectrumElement, '[slot=\"icon\"]'), '')\n) {\n public static override get styles(): CSSResultArray {\n return [tabItemStyles];\n }\n\n /**\n * @private\n */\n static instanceCount = 0;\n\n protected get hasIcon(): boolean {\n return this.slotContentIsPresent;\n }\n\n protected get hasLabel(): boolean {\n return !!this.label || this.slotHasContent;\n }\n\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n @property({ reflect: true })\n public label = '';\n\n @property({ type: Boolean, reflect: true })\n public selected = false;\n\n @property({ type: Boolean, reflect: true })\n public vertical = false;\n\n @property({ type: String, reflect: true })\n public value = '';\n\n protected
|
|
5
|
-
"mappings": ";;;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EAEA;AAAA,OAEG;AACP,SAAS,gBAAgB;AACzB;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,OACG;AAEP,OAAO,mBAAmB;AAQnB,MAAM,OAAN,cAAkB;AAAA,EACrB,gBAAgB,oBAAoB,iBAAiB,eAAe,GAAG,EAAE;AAC7E,EAAE;AAAA,EAFK;AAAA;AAqBH,SAAO,WAAW;AAGlB,SAAO,QAAQ;AAGf,SAAO,WAAW;AAGlB,SAAO,WAAW;AAGlB,SAAO,QAAQ;AAAA;AAAA,EA9Bf,WAA2B,SAAyB;AAChD,WAAO,CAAC,aAAa;AAAA,EACzB;AAAA,EAOA,IAAc,UAAmB;AAC7B,WAAO,KAAK;AAAA,EAChB;AAAA,EAEA,IAAc,WAAoB;AAC9B,WAAO,CAAC,CAAC,KAAK,SAAS,KAAK;AAAA,EAChC;AAAA,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport {\n FocusVisiblePolyfillMixin,\n ObserveSlotPresence,\n ObserveSlotText,\n} from '@spectrum-web-components/shared';\n\nimport tabItemStyles from './tab.css.js';\n\n/**\n * @element sp-tab\n *\n * @slot - text label of the Tab\n * @slot icon - The icon that appears on the left of the label\n */\nexport class Tab extends FocusVisiblePolyfillMixin(\n ObserveSlotText(ObserveSlotPresence(SpectrumElement, '[slot=\"icon\"]'), '')\n) {\n public static override get styles(): CSSResultArray {\n return [tabItemStyles];\n }\n\n /**\n * @private\n */\n static instanceCount = 0;\n\n protected get hasIcon(): boolean {\n return this.slotContentIsPresent;\n }\n\n protected get hasLabel(): boolean {\n return !!this.label || this.slotHasContent;\n }\n\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n @property({ reflect: true })\n public label = '';\n\n @property({ type: Boolean, reflect: true })\n public selected = false;\n\n @property({ type: Boolean, reflect: true })\n public vertical = false;\n\n @property({ type: String, reflect: true })\n public value = '';\n\n protected override render(): TemplateResult {\n return html`\n ${this.hasIcon\n ? html`\n <slot name=\"icon\"></slot>\n `\n : html``}\n <label id=\"item-label\" ?hidden=${!this.hasLabel}>\n ${this.slotHasContent ? html`` : this.label}\n <slot>${this.label}</slot>\n </label>\n `;\n }\n\n protected override firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n this.setAttribute('role', 'tab');\n if (!this.hasAttribute('id')) {\n this.id = `sp-tab-${Tab.instanceCount++}`;\n }\n }\n\n protected override updated(changes: PropertyValues): void {\n super.updated(changes);\n if (changes.has('selected')) {\n this.setAttribute(\n 'aria-selected',\n this.selected ? 'true' : 'false'\n );\n this.setAttribute('tabindex', this.selected ? '0' : '-1');\n }\n if (changes.has('disabled')) {\n if (this.disabled) {\n this.setAttribute('aria-disabled', 'true');\n } else {\n this.removeAttribute('aria-disabled');\n }\n }\n }\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EAEA;AAAA,OAEG;AACP,SAAS,gBAAgB;AACzB;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,OACG;AAEP,OAAO,mBAAmB;AAQnB,MAAM,OAAN,cAAkB;AAAA,EACrB,gBAAgB,oBAAoB,iBAAiB,eAAe,GAAG,EAAE;AAC7E,EAAE;AAAA,EAFK;AAAA;AAqBH,SAAO,WAAW;AAGlB,SAAO,QAAQ;AAGf,SAAO,WAAW;AAGlB,SAAO,WAAW;AAGlB,SAAO,QAAQ;AAAA;AAAA,EA9Bf,WAA2B,SAAyB;AAChD,WAAO,CAAC,aAAa;AAAA,EACzB;AAAA,EAOA,IAAc,UAAmB;AAC7B,WAAO,KAAK;AAAA,EAChB;AAAA,EAEA,IAAc,WAAoB;AAC9B,WAAO,CAAC,CAAC,KAAK,SAAS,KAAK;AAAA,EAChC;AAAA,EAiBmB,SAAyB;AACxC,WAAO;AAAA,cACD,KAAK,UACD;AAAA;AAAA,sBAGA;AAAA,6CAC2B,CAAC,KAAK;AAAA,kBACjC,KAAK,iBAAiB,SAAS,KAAK;AAAA,wBAC9B,KAAK;AAAA;AAAA;AAAA,EAGzB;AAAA,EAEmB,aAAa,SAA+B;AAC3D,UAAM,aAAa,OAAO;AAC1B,SAAK,aAAa,QAAQ,KAAK;AAC/B,QAAI,CAAC,KAAK,aAAa,IAAI,GAAG;AAC1B,WAAK,KAAK,UAAU,KAAI;AAAA,IAC5B;AAAA,EACJ;AAAA,EAEmB,QAAQ,SAA+B;AACtD,UAAM,QAAQ,OAAO;AACrB,QAAI,QAAQ,IAAI,UAAU,GAAG;AACzB,WAAK;AAAA,QACD;AAAA,QACA,KAAK,WAAW,SAAS;AAAA,MAC7B;AACA,WAAK,aAAa,YAAY,KAAK,WAAW,MAAM,IAAI;AAAA,IAC5D;AACA,QAAI,QAAQ,IAAI,UAAU,GAAG;AACzB,UAAI,KAAK,UAAU;AACf,aAAK,aAAa,iBAAiB,MAAM;AAAA,MAC7C,OAAO;AACH,aAAK,gBAAgB,eAAe;AAAA,MACxC;AAAA,IACJ;AAAA,EACJ;AACJ;AA1EO,WAAM,MAAN;AAAA;AAAA;AAAA;AAAM,IAUF,gBAAgB;AAWhB;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GApBjC,IAqBF;AAGA;AAAA,EADN,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAvBlB,IAwBF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA1BjC,IA2BF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA7BjC,IA8BF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAhChC,IAiCF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/Tab.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var s=(p,l,e,i)=>{for(var t=i>1?void 0:i?c(l,e):l,a=p.length-1,d;a>=0;a--)(d=p[a])&&(t=(i?d(l,e,t):d(t))||t);return i&&t&&n(l,e,t),t};import{html as o,SpectrumElement as b}from"@spectrum-web-components/base";import{property as r}from"@spectrum-web-components/base/src/decorators.js";import{FocusVisiblePolyfillMixin as h,ObserveSlotPresence as f,ObserveSlotText as m}from"@spectrum-web-components/shared";import y from"./tab.css.js";const u=class extends h(m(f(b,'[slot="icon"]'),"")){constructor(){super(...arguments);this.disabled=!1;this.label="";this.selected=!1;this.vertical=!1;this.value=""}static get styles(){return[y]}get hasIcon(){return this.slotContentIsPresent}get hasLabel(){return!!this.label||this.slotHasContent}render(){return o`
|
|
2
2
|
${this.hasIcon?o`
|
|
3
3
|
<slot name="icon"></slot>
|
|
4
4
|
`:o``}
|
|
@@ -6,5 +6,5 @@
|
|
|
6
6
|
${this.slotHasContent?o``:this.label}
|
|
7
7
|
<slot>${this.label}</slot>
|
|
8
8
|
</label>
|
|
9
|
-
`}firstUpdated(e){super.firstUpdated(e),this.setAttribute("role","tab"),this.hasAttribute("id")||(this.id=`sp-tab-${
|
|
9
|
+
`}firstUpdated(e){super.firstUpdated(e),this.setAttribute("role","tab"),this.hasAttribute("id")||(this.id=`sp-tab-${u.instanceCount++}`)}updated(e){super.updated(e),e.has("selected")&&(this.setAttribute("aria-selected",this.selected?"true":"false"),this.setAttribute("tabindex",this.selected?"0":"-1")),e.has("disabled")&&(this.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"))}};export let Tab=u;Tab.instanceCount=0,s([r({type:Boolean,reflect:!0})],Tab.prototype,"disabled",2),s([r({reflect:!0})],Tab.prototype,"label",2),s([r({type:Boolean,reflect:!0})],Tab.prototype,"selected",2),s([r({type:Boolean,reflect:!0})],Tab.prototype,"vertical",2),s([r({type:String,reflect:!0})],Tab.prototype,"value",2);
|
|
10
10
|
//# sourceMappingURL=Tab.js.map
|
package/src/Tab.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Tab.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport {\n FocusVisiblePolyfillMixin,\n ObserveSlotPresence,\n ObserveSlotText,\n} from '@spectrum-web-components/shared';\n\nimport tabItemStyles from './tab.css.js';\n\n/**\n * @element sp-tab\n *\n * @slot - text label of the Tab\n * @slot icon - The icon that appears on the left of the label\n */\nexport class Tab extends FocusVisiblePolyfillMixin(\n ObserveSlotText(ObserveSlotPresence(SpectrumElement, '[slot=\"icon\"]'), '')\n) {\n public static override get styles(): CSSResultArray {\n return [tabItemStyles];\n }\n\n /**\n * @private\n */\n static instanceCount = 0;\n\n protected get hasIcon(): boolean {\n return this.slotContentIsPresent;\n }\n\n protected get hasLabel(): boolean {\n return !!this.label || this.slotHasContent;\n }\n\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n @property({ reflect: true })\n public label = '';\n\n @property({ type: Boolean, reflect: true })\n public selected = false;\n\n @property({ type: Boolean, reflect: true })\n public vertical = false;\n\n @property({ type: String, reflect: true })\n public value = '';\n\n protected
|
|
5
|
-
"mappings": "qNAYA,OAEI,QAAAA,EAEA,mBAAAC,MAEG,gCACP,OAAS,YAAAC,MAAgB,kDACzB,OACI,6BAAAC,EACA,uBAAAC,EACA,mBAAAC,MACG,kCAEP,OAAOC,MAAmB,eAQnB,MAAMC,EAAN,cAAkBJ,EACrBE,EAAgBD,EAAoBH,EAAiB,eAAe,EAAG,EAAE,CAC7E,CAAE,CAFK,kCAqBH,KAAO,SAAW,GAGlB,KAAO,MAAQ,GAGf,KAAO,SAAW,GAGlB,KAAO,SAAW,GAGlB,KAAO,MAAQ,GA9Bf,WAA2B,QAAyB,CAChD,MAAO,CAACK,CAAa,CACzB,CAOA,IAAc,SAAmB,CAC7B,OAAO,KAAK,oBAChB,CAEA,IAAc,UAAoB,CAC9B,MAAO,CAAC,CAAC,KAAK,OAAS,KAAK,cAChC,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport {\n FocusVisiblePolyfillMixin,\n ObserveSlotPresence,\n ObserveSlotText,\n} from '@spectrum-web-components/shared';\n\nimport tabItemStyles from './tab.css.js';\n\n/**\n * @element sp-tab\n *\n * @slot - text label of the Tab\n * @slot icon - The icon that appears on the left of the label\n */\nexport class Tab extends FocusVisiblePolyfillMixin(\n ObserveSlotText(ObserveSlotPresence(SpectrumElement, '[slot=\"icon\"]'), '')\n) {\n public static override get styles(): CSSResultArray {\n return [tabItemStyles];\n }\n\n /**\n * @private\n */\n static instanceCount = 0;\n\n protected get hasIcon(): boolean {\n return this.slotContentIsPresent;\n }\n\n protected get hasLabel(): boolean {\n return !!this.label || this.slotHasContent;\n }\n\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n @property({ reflect: true })\n public label = '';\n\n @property({ type: Boolean, reflect: true })\n public selected = false;\n\n @property({ type: Boolean, reflect: true })\n public vertical = false;\n\n @property({ type: String, reflect: true })\n public value = '';\n\n protected override render(): TemplateResult {\n return html`\n ${this.hasIcon\n ? html`\n <slot name=\"icon\"></slot>\n `\n : html``}\n <label id=\"item-label\" ?hidden=${!this.hasLabel}>\n ${this.slotHasContent ? html`` : this.label}\n <slot>${this.label}</slot>\n </label>\n `;\n }\n\n protected override firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n this.setAttribute('role', 'tab');\n if (!this.hasAttribute('id')) {\n this.id = `sp-tab-${Tab.instanceCount++}`;\n }\n }\n\n protected override updated(changes: PropertyValues): void {\n super.updated(changes);\n if (changes.has('selected')) {\n this.setAttribute(\n 'aria-selected',\n this.selected ? 'true' : 'false'\n );\n this.setAttribute('tabindex', this.selected ? '0' : '-1');\n }\n if (changes.has('disabled')) {\n if (this.disabled) {\n this.setAttribute('aria-disabled', 'true');\n } else {\n this.removeAttribute('aria-disabled');\n }\n }\n }\n}\n"],
|
|
5
|
+
"mappings": "qNAYA,OAEI,QAAAA,EAEA,mBAAAC,MAEG,gCACP,OAAS,YAAAC,MAAgB,kDACzB,OACI,6BAAAC,EACA,uBAAAC,EACA,mBAAAC,MACG,kCAEP,OAAOC,MAAmB,eAQnB,MAAMC,EAAN,cAAkBJ,EACrBE,EAAgBD,EAAoBH,EAAiB,eAAe,EAAG,EAAE,CAC7E,CAAE,CAFK,kCAqBH,KAAO,SAAW,GAGlB,KAAO,MAAQ,GAGf,KAAO,SAAW,GAGlB,KAAO,SAAW,GAGlB,KAAO,MAAQ,GA9Bf,WAA2B,QAAyB,CAChD,MAAO,CAACK,CAAa,CACzB,CAOA,IAAc,SAAmB,CAC7B,OAAO,KAAK,oBAChB,CAEA,IAAc,UAAoB,CAC9B,MAAO,CAAC,CAAC,KAAK,OAAS,KAAK,cAChC,CAiBmB,QAAyB,CACxC,OAAON;AAAA,cACD,KAAK,QACDA;AAAA;AAAA,oBAGAA;AAAA,6CAC2B,CAAC,KAAK;AAAA,kBACjC,KAAK,eAAiBA,IAAS,KAAK;AAAA,wBAC9B,KAAK;AAAA;AAAA,SAGzB,CAEmB,aAAaQ,EAA+B,CAC3D,MAAM,aAAaA,CAAO,EAC1B,KAAK,aAAa,OAAQ,KAAK,EAC1B,KAAK,aAAa,IAAI,IACvB,KAAK,GAAK,UAAUD,EAAI,kBAEhC,CAEmB,QAAQC,EAA+B,CACtD,MAAM,QAAQA,CAAO,EACjBA,EAAQ,IAAI,UAAU,IACtB,KAAK,aACD,gBACA,KAAK,SAAW,OAAS,OAC7B,EACA,KAAK,aAAa,WAAY,KAAK,SAAW,IAAM,IAAI,GAExDA,EAAQ,IAAI,UAAU,IAClB,KAAK,SACL,KAAK,aAAa,gBAAiB,MAAM,EAEzC,KAAK,gBAAgB,eAAe,EAGhD,CACJ,EA1EO,WAAM,IAAND,EAAM,IAUF,cAAgB,EAWhBE,EAAA,CADNP,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GApBjC,IAqBF,wBAGAO,EAAA,CADNP,EAAS,CAAE,QAAS,EAAK,CAAC,GAvBlB,IAwBF,qBAGAO,EAAA,CADNP,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GA1BjC,IA2BF,wBAGAO,EAAA,CADNP,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GA7BjC,IA8BF,wBAGAO,EAAA,CADNP,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAhChC,IAiCF",
|
|
6
6
|
"names": ["html", "SpectrumElement", "property", "FocusVisiblePolyfillMixin", "ObserveSlotPresence", "ObserveSlotText", "tabItemStyles", "_Tab", "changes", "__decorateClass"]
|
|
7
7
|
}
|
package/src/Tabs.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { CSSResult, CSSResultArray, PropertyValues, TemplateResult } from '@spectrum-web-components/base';
|
|
2
|
+
import { ResizeController } from '@lit-labs/observers/resize_controller.js';
|
|
2
3
|
import { Tab } from './Tab.js';
|
|
3
4
|
import { Focusable } from '@spectrum-web-components/shared';
|
|
4
5
|
import { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';
|
|
@@ -47,14 +48,14 @@ export declare class Tabs extends Tabs_base {
|
|
|
47
48
|
quiet: boolean;
|
|
48
49
|
selectionIndicatorStyle: string;
|
|
49
50
|
shouldAnimate: boolean;
|
|
51
|
+
private slotEl;
|
|
50
52
|
private tabList;
|
|
51
|
-
|
|
52
|
-
set selected(value: string);
|
|
53
|
-
private _selected;
|
|
53
|
+
selected: string;
|
|
54
54
|
private set tabs(value);
|
|
55
55
|
private get tabs();
|
|
56
56
|
private _tabs;
|
|
57
57
|
constructor();
|
|
58
|
+
protected resizeController: ResizeController<void>;
|
|
58
59
|
rovingTabindexController: RovingTabindexController<Tab>;
|
|
59
60
|
/**
|
|
60
61
|
* @private
|
|
@@ -73,12 +74,8 @@ export declare class Tabs extends Tabs_base {
|
|
|
73
74
|
private onKeyDown;
|
|
74
75
|
private selectTarget;
|
|
75
76
|
private onSlotChange;
|
|
76
|
-
private shouldUpdateCheckedState;
|
|
77
77
|
private updateCheckedState;
|
|
78
78
|
private updateSelectionIndicator;
|
|
79
|
-
private tabChangePromise;
|
|
80
|
-
private tabChangeResolver;
|
|
81
|
-
protected getUpdateComplete(): Promise<boolean>;
|
|
82
79
|
connectedCallback(): void;
|
|
83
80
|
disconnectedCallback(): void;
|
|
84
81
|
}
|
package/src/Tabs.dev.js
CHANGED
|
@@ -24,9 +24,11 @@ import {
|
|
|
24
24
|
ifDefined
|
|
25
25
|
} from "@spectrum-web-components/base/src/directives.js";
|
|
26
26
|
import { IntersectionController } from "@lit-labs/observers/intersection_controller.js";
|
|
27
|
+
import { ResizeController } from "@lit-labs/observers/resize_controller.js";
|
|
27
28
|
import { Focusable } from "@spectrum-web-components/shared";
|
|
28
29
|
import { RovingTabindexController } from "@spectrum-web-components/reactive-controllers/src/RovingTabindex.js";
|
|
29
30
|
import tabStyles from "./tabs.css.js";
|
|
31
|
+
import tabSizes from "./tabs-sizes.css.js";
|
|
30
32
|
export const ScaledIndicator = {
|
|
31
33
|
baseSize: 100,
|
|
32
34
|
noSelectionStyle: "transform: translateX(0px) scaleX(0) scaleY(0)",
|
|
@@ -62,8 +64,13 @@ export class Tabs extends SizedMixin(Focusable) {
|
|
|
62
64
|
this.quiet = false;
|
|
63
65
|
this.selectionIndicatorStyle = ScaledIndicator.noSelectionStyle;
|
|
64
66
|
this.shouldAnimate = false;
|
|
65
|
-
this.
|
|
67
|
+
this.selected = "";
|
|
66
68
|
this._tabs = [];
|
|
69
|
+
this.resizeController = new ResizeController(this, {
|
|
70
|
+
callback: () => {
|
|
71
|
+
this.updateSelectionIndicator();
|
|
72
|
+
}
|
|
73
|
+
});
|
|
67
74
|
this.rovingTabindexController = new RovingTabindexController(this, {
|
|
68
75
|
focusInIndex: (elements) => {
|
|
69
76
|
let focusInIndex = 0;
|
|
@@ -114,9 +121,6 @@ export class Tabs extends SizedMixin(Focusable) {
|
|
|
114
121
|
}
|
|
115
122
|
};
|
|
116
123
|
this.updateCheckedState = () => {
|
|
117
|
-
if (!this.tabs.length) {
|
|
118
|
-
this.tabs = [...this.querySelectorAll('[role="tab"]')];
|
|
119
|
-
}
|
|
120
124
|
this.tabs.forEach((element) => {
|
|
121
125
|
element.removeAttribute("selected");
|
|
122
126
|
});
|
|
@@ -136,7 +140,6 @@ export class Tabs extends SizedMixin(Focusable) {
|
|
|
136
140
|
}
|
|
137
141
|
}
|
|
138
142
|
this.updateSelectionIndicator();
|
|
139
|
-
this.tabChangeResolver();
|
|
140
143
|
};
|
|
141
144
|
this.updateSelectionIndicator = async () => {
|
|
142
145
|
const selectedElement = this.tabs.find((el) => el.selected);
|
|
@@ -151,10 +154,6 @@ export class Tabs extends SizedMixin(Focusable) {
|
|
|
151
154
|
const { width, height } = selectedElement.getBoundingClientRect();
|
|
152
155
|
this.selectionIndicatorStyle = this.direction === "horizontal" ? ScaledIndicator.transformX(selectedElement.offsetLeft, width) : ScaledIndicator.transformY(selectedElement.offsetTop, height);
|
|
153
156
|
};
|
|
154
|
-
this.tabChangePromise = Promise.resolve();
|
|
155
|
-
this.tabChangeResolver = function() {
|
|
156
|
-
return;
|
|
157
|
-
};
|
|
158
157
|
new IntersectionController(this, {
|
|
159
158
|
config: {
|
|
160
159
|
root: null,
|
|
@@ -167,23 +166,17 @@ export class Tabs extends SizedMixin(Focusable) {
|
|
|
167
166
|
});
|
|
168
167
|
}
|
|
169
168
|
static get styles() {
|
|
170
|
-
return [tabStyles, ScaledIndicator.baseStyles()];
|
|
171
|
-
}
|
|
172
|
-
get selected() {
|
|
173
|
-
return this._selected;
|
|
174
|
-
}
|
|
175
|
-
set selected(value) {
|
|
176
|
-
const oldValue = this.selected;
|
|
177
|
-
if (value === oldValue) {
|
|
178
|
-
return;
|
|
179
|
-
}
|
|
180
|
-
this._selected = value;
|
|
181
|
-
this.shouldUpdateCheckedState();
|
|
182
|
-
this.requestUpdate("selected", oldValue);
|
|
169
|
+
return [tabSizes, tabStyles, ScaledIndicator.baseStyles()];
|
|
183
170
|
}
|
|
184
171
|
set tabs(tabs) {
|
|
185
172
|
if (tabs === this.tabs)
|
|
186
173
|
return;
|
|
174
|
+
this._tabs.forEach((tab) => {
|
|
175
|
+
this.resizeController.unobserve(tab);
|
|
176
|
+
});
|
|
177
|
+
tabs.forEach((tab) => {
|
|
178
|
+
this.resizeController.observe(tab);
|
|
179
|
+
});
|
|
187
180
|
this._tabs = tabs;
|
|
188
181
|
this.rovingTabindexController.clearElementCache();
|
|
189
182
|
}
|
|
@@ -205,13 +198,16 @@ export class Tabs extends SizedMixin(Focusable) {
|
|
|
205
198
|
});
|
|
206
199
|
}
|
|
207
200
|
get scrollState() {
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
201
|
+
if (this.tabList) {
|
|
202
|
+
const { scrollLeft, clientWidth, scrollWidth } = this.tabList;
|
|
203
|
+
const canScrollLeft = Math.abs(scrollLeft) > 0;
|
|
204
|
+
const canScrollRight = Math.ceil(Math.abs(scrollLeft)) < scrollWidth - clientWidth;
|
|
205
|
+
return {
|
|
206
|
+
canScrollLeft: this.dir === "ltr" ? canScrollLeft : canScrollRight,
|
|
207
|
+
canScrollRight: this.dir === "ltr" ? canScrollRight : canScrollLeft
|
|
208
|
+
};
|
|
209
|
+
}
|
|
210
|
+
return {};
|
|
215
211
|
}
|
|
216
212
|
manageAutoFocus() {
|
|
217
213
|
const tabs = [...this.children];
|
|
@@ -244,7 +240,6 @@ export class Tabs extends SizedMixin(Focusable) {
|
|
|
244
240
|
aria-label=${ifDefined(this.label ? this.label : void 0)}
|
|
245
241
|
@click=${this.onClick}
|
|
246
242
|
@keydown=${this.onKeyDown}
|
|
247
|
-
@sp-tab-contentchange=${this.updateSelectionIndicator}
|
|
248
243
|
@scroll=${this.onTabsScroll}
|
|
249
244
|
id="list"
|
|
250
245
|
role="tablist"
|
|
@@ -272,8 +267,11 @@ export class Tabs extends SizedMixin(Focusable) {
|
|
|
272
267
|
this.selectTarget(selectedChild);
|
|
273
268
|
}
|
|
274
269
|
}
|
|
275
|
-
super.
|
|
270
|
+
super.willUpdate(changes);
|
|
276
271
|
if (changes.has("selected")) {
|
|
272
|
+
if (this.tabs.length) {
|
|
273
|
+
this.updateCheckedState();
|
|
274
|
+
}
|
|
277
275
|
if (changes.get("selected")) {
|
|
278
276
|
const previous = this.querySelector(
|
|
279
277
|
`[role="tabpanel"][value="${changes.get("selected")}"]`
|
|
@@ -324,20 +322,8 @@ export class Tabs extends SizedMixin(Focusable) {
|
|
|
324
322
|
}
|
|
325
323
|
}
|
|
326
324
|
onSlotChange() {
|
|
327
|
-
this.tabs =
|
|
328
|
-
this.
|
|
329
|
-
}
|
|
330
|
-
shouldUpdateCheckedState() {
|
|
331
|
-
this.tabChangeResolver();
|
|
332
|
-
this.tabChangePromise = new Promise(
|
|
333
|
-
(res) => this.tabChangeResolver = res
|
|
334
|
-
);
|
|
335
|
-
setTimeout(this.updateCheckedState);
|
|
336
|
-
}
|
|
337
|
-
async getUpdateComplete() {
|
|
338
|
-
const complete = await super.getUpdateComplete();
|
|
339
|
-
await this.tabChangePromise;
|
|
340
|
-
return complete;
|
|
325
|
+
this.tabs = this.slotEl.assignedElements().filter((el) => el.getAttribute("role") === "tab");
|
|
326
|
+
this.updateCheckedState();
|
|
341
327
|
}
|
|
342
328
|
connectedCallback() {
|
|
343
329
|
super.connectedCallback();
|
|
@@ -387,10 +373,13 @@ __decorateClass([
|
|
|
387
373
|
__decorateClass([
|
|
388
374
|
property({ attribute: false })
|
|
389
375
|
], Tabs.prototype, "shouldAnimate", 2);
|
|
376
|
+
__decorateClass([
|
|
377
|
+
query("slot")
|
|
378
|
+
], Tabs.prototype, "slotEl", 2);
|
|
390
379
|
__decorateClass([
|
|
391
380
|
query("#list")
|
|
392
381
|
], Tabs.prototype, "tabList", 2);
|
|
393
382
|
__decorateClass([
|
|
394
383
|
property({ reflect: true })
|
|
395
|
-
], Tabs.prototype, "selected",
|
|
384
|
+
], Tabs.prototype, "selected", 2);
|
|
396
385
|
//# sourceMappingURL=Tabs.dev.js.map
|