@brightspace-ui/core 3.94.0 → 3.94.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/tabs/demo/tabs.html +18 -0
- package/components/tabs/tabs.js +169 -123
- package/package.json +1 -1
@@ -44,9 +44,27 @@
|
|
44
44
|
<d2l-tab id="all" text="All" slot="tabs"></d2l-tab>
|
45
45
|
<d2l-tab id="biology" text="Biology" slot="tabs" selected></d2l-tab>
|
46
46
|
<d2l-tab id="chemistry" text="Chemistry" slot="tabs"></d2l-tab>
|
47
|
+
<d2l-tab id="physics" text="Physics" slot="tabs"></d2l-tab>
|
48
|
+
<d2l-tab id="math" text="Math" slot="tabs"></d2l-tab>
|
49
|
+
<d2l-tab id="earth-sciences" text="Earth Sciences" slot="tabs"></d2l-tab>
|
47
50
|
<d2l-tab-panel labelled-by="all" slot="panels" id="all-panel">Tab content for All</d2l-tab-panel>
|
48
51
|
<d2l-tab-panel labelled-by="biology" slot="panels" id="biology-panel">Tab content for Biology</d2l-tab-panel>
|
49
52
|
<d2l-tab-panel labelled-by="chemistry" slot="panels">Tab content for Chemistry</d2l-tab-panel>
|
53
|
+
<d2l-tab-panel labelled-by="physics" slot="panels">Tab content for Physics</d2l-tab-panel>
|
54
|
+
<d2l-tab-panel labelled-by="math" slot="panels">Tab content for Math</d2l-tab-panel>
|
55
|
+
<d2l-tab-panel labelled-by="earth-sciences" slot="panels">Tab content for Earth Sciences</d2l-tab-panel>
|
56
|
+
<d2l-dropdown-button-subtle slot="ext" text="Explore Topics">
|
57
|
+
<d2l-dropdown-menu>
|
58
|
+
<d2l-menu label="Astronomy">
|
59
|
+
<d2l-menu-item text="Introduction"></d2l-menu-item>
|
60
|
+
<d2l-menu-item text="Searching for the Heavens "></d2l-menu-item>
|
61
|
+
<d2l-menu-item text="The Solar System"></d2l-menu-item>
|
62
|
+
<d2l-menu-item text="Stars & Galaxies"></d2l-menu-item>
|
63
|
+
<d2l-menu-item text="The Night Sky"></d2l-menu-item>
|
64
|
+
<d2l-menu-item text="The Universe"></d2l-menu-item>
|
65
|
+
</d2l-menu>
|
66
|
+
</d2l-dropdown-menu>
|
67
|
+
</d2l-dropdown-button-subtle>
|
50
68
|
</d2l-tabs>
|
51
69
|
</template>
|
52
70
|
</d2l-demo-snippet>
|
package/components/tabs/tabs.js
CHANGED
@@ -3,7 +3,7 @@ import '../icons/icon.js';
|
|
3
3
|
import '../../helpers/queueMicrotask.js';
|
4
4
|
import './tab-internal.js';
|
5
5
|
import { css, html, LitElement, unsafeCSS } from 'lit';
|
6
|
-
import { cssEscape, findComposedAncestor } from '../../helpers/dom.js';
|
6
|
+
import { cssEscape, findComposedAncestor, getOffsetParent } from '../../helpers/dom.js';
|
7
7
|
import { ArrowKeysMixin } from '../../mixins/arrow-keys/arrow-keys-mixin.js';
|
8
8
|
import { bodyCompactStyles } from '../typography/styles.js';
|
9
9
|
import { classMap } from 'lit/directives/class-map.js';
|
@@ -19,6 +19,11 @@ const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
19
19
|
|
20
20
|
const scrollButtonWidth = 56;
|
21
21
|
|
22
|
+
function getOffsetLeft(tab, tabRect) {
|
23
|
+
const offsetParent = getOffsetParent(tab);
|
24
|
+
return Math.round(tabRect.left - offsetParent.getBoundingClientRect().left);
|
25
|
+
}
|
26
|
+
|
22
27
|
/**
|
23
28
|
* A component for tabbed content. It supports the "d2l-tab-panel" component for the content, renders tabs responsively, and provides virtual scrolling for large tab lists.
|
24
29
|
* @slot - Contains the tab panels (e.g., "d2l-tab-panel" components)
|
@@ -94,6 +99,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
|
|
94
99
|
}
|
95
100
|
.d2l-tabs-container-list {
|
96
101
|
display: flex;
|
102
|
+
position: relative;
|
97
103
|
-webkit-transition: transform 200ms ease-out;
|
98
104
|
transition: transform 200ms ease-out;
|
99
105
|
white-space: nowrap;
|
@@ -247,10 +253,10 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
|
|
247
253
|
await this.updateComplete;
|
248
254
|
|
249
255
|
if (!this._scrollCollapsed) {
|
250
|
-
return this.
|
256
|
+
return this._updateScrollPositionDefaultSlotBehavior(tabInfo);
|
251
257
|
} else {
|
252
258
|
const measures = this._getMeasures();
|
253
|
-
const newTranslationValue = this.
|
259
|
+
const newTranslationValue = this._calculateScrollPositionDefaultSlotBehavior(tabInfo, measures);
|
254
260
|
|
255
261
|
if (!this.#isRTL()) {
|
256
262
|
if (newTranslationValue >= 0) return;
|
@@ -262,7 +268,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
|
|
262
268
|
if (expanded) {
|
263
269
|
return;
|
264
270
|
} else {
|
265
|
-
return this.
|
271
|
+
return this._updateScrollPositionDefaultSlotBehavior(tabInfo);
|
266
272
|
}
|
267
273
|
}
|
268
274
|
};
|
@@ -350,7 +356,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
|
|
350
356
|
}
|
351
357
|
|
352
358
|
async getLoadingComplete() {
|
353
|
-
return this.
|
359
|
+
return this._loadingCompletePromise;
|
354
360
|
}
|
355
361
|
|
356
362
|
getTabListRect() {
|
@@ -388,91 +394,16 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
|
|
388
394
|
});
|
389
395
|
}
|
390
396
|
|
391
|
-
_calculateScrollPosition(
|
397
|
+
_calculateScrollPosition(selectedTab, measures) {
|
398
|
+
const tabs = this._tabs;
|
399
|
+
const selectedTabIndex = tabs.indexOf(selectedTab);
|
400
|
+
return this.#calculateScrollPositionLogic(tabs, selectedTabIndex, measures);
|
401
|
+
}
|
392
402
|
|
403
|
+
// remove after d2l-tab/d2l-tab-panel backport
|
404
|
+
_calculateScrollPositionDefaultSlotBehavior(selectedTabInfo, measures) {
|
393
405
|
const selectedTabIndex = this._tabInfos.indexOf(selectedTabInfo);
|
394
|
-
|
395
|
-
if (!measures.tabRects[selectedTabIndex]) return 0;
|
396
|
-
|
397
|
-
const selectedTabMeasures = measures.tabRects[selectedTabIndex];
|
398
|
-
|
399
|
-
const isOverflowingLeft = (selectedTabMeasures.offsetLeft + this._translationValue < 0);
|
400
|
-
const isOverflowingRight = (selectedTabMeasures.offsetLeft + selectedTabMeasures.rect.width + this._translationValue > measures.tabsContainerRect.width);
|
401
|
-
|
402
|
-
const isRTL = this.#isRTL();
|
403
|
-
|
404
|
-
let getNewTranslationValue;
|
405
|
-
if (!isRTL) {
|
406
|
-
getNewTranslationValue = () => {
|
407
|
-
if (selectedTabIndex === 0) {
|
408
|
-
// position selected tab at beginning
|
409
|
-
return 0;
|
410
|
-
} else if (selectedTabIndex === (this._tabInfos.length - 1)) {
|
411
|
-
// position selected tab at end
|
412
|
-
return -1 * (selectedTabMeasures.offsetLeft - measures.tabsContainerRect.width + selectedTabMeasures.rect.width);
|
413
|
-
} else {
|
414
|
-
// position selected tab in middle
|
415
|
-
return -1 * (selectedTabMeasures.offsetLeft - (measures.tabsContainerRect.width / 2) + (selectedTabMeasures.rect.width / 2));
|
416
|
-
}
|
417
|
-
};
|
418
|
-
} else {
|
419
|
-
getNewTranslationValue = () => {
|
420
|
-
if (selectedTabIndex === 0) {
|
421
|
-
// position selected tab at beginning
|
422
|
-
return 0;
|
423
|
-
} else if (selectedTabIndex === (this._tabInfos.length - 1)) {
|
424
|
-
// position selected tab at end
|
425
|
-
return -1 * selectedTabMeasures.offsetLeft;
|
426
|
-
} else {
|
427
|
-
// position selected tab in middle
|
428
|
-
return (measures.tabsContainerRect.width / 2) - (selectedTabMeasures.offsetLeft + selectedTabMeasures.rect.width / 2) + (selectedTabMeasures.rect.width / 2);
|
429
|
-
}
|
430
|
-
};
|
431
|
-
}
|
432
|
-
|
433
|
-
let newTranslationValue = this._translationValue;
|
434
|
-
if (isOverflowingLeft || isOverflowingRight) {
|
435
|
-
newTranslationValue = getNewTranslationValue();
|
436
|
-
}
|
437
|
-
|
438
|
-
let expectedPosition;
|
439
|
-
|
440
|
-
// make sure the new position will not place selected tab behind left scroll button
|
441
|
-
if (!isRTL) {
|
442
|
-
expectedPosition = selectedTabMeasures.offsetLeft + newTranslationValue;
|
443
|
-
if (newTranslationValue < 0 && this._isPositionInLeftScrollArea(expectedPosition)) {
|
444
|
-
newTranslationValue = getNewTranslationValue();
|
445
|
-
}
|
446
|
-
} else {
|
447
|
-
expectedPosition = selectedTabMeasures.offsetLeft + selectedTabMeasures.rect.width + newTranslationValue;
|
448
|
-
if (newTranslationValue > 0 && this._isPositionInRightScrollArea(expectedPosition, measures)) {
|
449
|
-
newTranslationValue = getNewTranslationValue();
|
450
|
-
}
|
451
|
-
}
|
452
|
-
|
453
|
-
if (!isRTL) {
|
454
|
-
// make sure there will not be any empty space between left side of container and first tab
|
455
|
-
if (newTranslationValue > 0) newTranslationValue = 0;
|
456
|
-
} else {
|
457
|
-
// make sure there will not be any empty space between right side of container and first tab
|
458
|
-
if (newTranslationValue < 0) newTranslationValue = 0;
|
459
|
-
}
|
460
|
-
|
461
|
-
// make sure the new position will not place selected tab behind the right scroll button
|
462
|
-
if (!isRTL) {
|
463
|
-
expectedPosition = selectedTabMeasures.offsetLeft + selectedTabMeasures.rect.width + newTranslationValue;
|
464
|
-
if ((selectedTabIndex < this._tabInfos.length - 1) && this._isPositionInRightScrollArea(expectedPosition, measures)) {
|
465
|
-
newTranslationValue = getNewTranslationValue();
|
466
|
-
}
|
467
|
-
} else {
|
468
|
-
expectedPosition = selectedTabMeasures.offsetLeft + newTranslationValue;
|
469
|
-
if ((selectedTabIndex < this._tabInfos.length - 1) && this._isPositionInLeftScrollArea(expectedPosition)) {
|
470
|
-
newTranslationValue = getNewTranslationValue();
|
471
|
-
}
|
472
|
-
}
|
473
|
-
|
474
|
-
return newTranslationValue;
|
475
|
-
|
406
|
+
return this.#calculateScrollPositionLogic(this._tabInfos, selectedTabIndex, measures);
|
476
407
|
}
|
477
408
|
|
478
409
|
async _focusSelected() {
|
@@ -480,7 +411,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
|
|
480
411
|
if (!selectedTab) return;
|
481
412
|
|
482
413
|
const selectedTabInfo = this._getTabInfo(selectedTab.controlsPanel);
|
483
|
-
await this.
|
414
|
+
await this._updateScrollPositionDefaultSlotBehavior(selectedTabInfo);
|
484
415
|
|
485
416
|
selectedTab.focus();
|
486
417
|
}
|
@@ -595,7 +526,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
|
|
595
526
|
if (!this._initialized && this._tabInfos.length > 0) {
|
596
527
|
|
597
528
|
this._initialized = true;
|
598
|
-
await this.
|
529
|
+
await this._updateTabsContainerWidthDefaultSlotBehavior(selectedTabInfo);
|
599
530
|
|
600
531
|
} else {
|
601
532
|
|
@@ -613,7 +544,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
|
|
613
544
|
if (selectedTabInfo) {
|
614
545
|
Promise.all(animPromises).then(() => {
|
615
546
|
this._updateMeasures();
|
616
|
-
return this.
|
547
|
+
return this._updateScrollPositionDefaultSlotBehavior(selectedTabInfo);
|
617
548
|
});
|
618
549
|
}
|
619
550
|
|
@@ -738,7 +669,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
|
|
738
669
|
|
739
670
|
}
|
740
671
|
|
741
|
-
_handleTabSelected(e) {
|
672
|
+
async _handleTabSelected(e) {
|
742
673
|
if (this._defaultSlotBehavior) {
|
743
674
|
this._handleTabSelectedDefaultSlotBehavior(e);
|
744
675
|
return;
|
@@ -746,6 +677,8 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
|
|
746
677
|
|
747
678
|
const selectedTab = e.target;
|
748
679
|
this.#updateSelectedTab(selectedTab);
|
680
|
+
await this.updateComplete;
|
681
|
+
this._updateScrollPosition(selectedTab);
|
749
682
|
}
|
750
683
|
|
751
684
|
// remove after d2l-tab/d2l-tab-panel backport
|
@@ -758,7 +691,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
|
|
758
691
|
selectedTabInfo.activeFocusable = true;
|
759
692
|
|
760
693
|
await this.updateComplete;
|
761
|
-
this.
|
694
|
+
this._updateScrollPositionDefaultSlotBehavior(selectedTabInfo);
|
762
695
|
|
763
696
|
selectedPanel.selected = true;
|
764
697
|
this._tabInfos.forEach((tabInfo) => {
|
@@ -800,6 +733,12 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
|
|
800
733
|
|
801
734
|
if (!this._initialized && this._tabs.length > 0) {
|
802
735
|
this._initialized = true;
|
736
|
+
await this._updateTabsContainerWidth(selectedTab);
|
737
|
+
}
|
738
|
+
|
739
|
+
if (selectedTab) {
|
740
|
+
this._updateMeasures();
|
741
|
+
this._updateScrollPosition(selectedTab);
|
803
742
|
}
|
804
743
|
}
|
805
744
|
|
@@ -892,12 +831,15 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
|
|
892
831
|
_updateMeasures() {
|
893
832
|
let totalTabsWidth = 0;
|
894
833
|
if (!this.shadowRoot) return;
|
895
|
-
const tabs = [...this.shadowRoot.querySelectorAll('d2l-tab-internal')];
|
834
|
+
const tabs = this._defaultSlotBehavior ? [...this.shadowRoot.querySelectorAll('d2l-tab-internal')] : this._tabs;
|
896
835
|
|
897
836
|
const tabRects = tabs.map((tab) => {
|
837
|
+
const tabRect = tab.getBoundingClientRect();
|
838
|
+
const offsetLeft = this._defaultSlotBehavior ? tab.offsetLeft : getOffsetLeft(tab, tabRect);
|
839
|
+
|
898
840
|
const measures = {
|
899
|
-
rect:
|
900
|
-
offsetLeft:
|
841
|
+
rect: tabRect,
|
842
|
+
offsetLeft: offsetLeft
|
901
843
|
};
|
902
844
|
totalTabsWidth += measures.rect.width;
|
903
845
|
return measures;
|
@@ -911,22 +853,17 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
|
|
911
853
|
};
|
912
854
|
}
|
913
855
|
|
914
|
-
_updateScrollPosition(
|
856
|
+
_updateScrollPosition(selectedTab) {
|
915
857
|
const measures = this._getMeasures();
|
916
|
-
const newTranslationValue = this._calculateScrollPosition(
|
917
|
-
|
918
|
-
|
919
|
-
|
920
|
-
|
921
|
-
|
922
|
-
|
923
|
-
|
924
|
-
|
925
|
-
this._loadingCompleteResolve();
|
926
|
-
this._loadingCompleteResolve = undefined;
|
927
|
-
}
|
928
|
-
});
|
929
|
-
return p;
|
858
|
+
const newTranslationValue = this._calculateScrollPosition(selectedTab, measures);
|
859
|
+
return this.#updateScrollPositionLogic(measures, newTranslationValue);
|
860
|
+
}
|
861
|
+
|
862
|
+
// remove after d2l-tab/d2l-tab-panel backport
|
863
|
+
_updateScrollPositionDefaultSlotBehavior(selectedTabInfo) {
|
864
|
+
const measures = this._getMeasures();
|
865
|
+
const newTranslationValue = this._calculateScrollPositionDefaultSlotBehavior(selectedTabInfo, measures);
|
866
|
+
return this.#updateScrollPositionLogic(measures, newTranslationValue);
|
930
867
|
}
|
931
868
|
|
932
869
|
_updateScrollVisibility(measures) {
|
@@ -977,28 +914,101 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
|
|
977
914
|
}
|
978
915
|
}
|
979
916
|
|
980
|
-
_updateTabsContainerWidth(
|
917
|
+
_updateTabsContainerWidth(selectedTab) {
|
918
|
+
const tabs = this._tabs;
|
919
|
+
if (!this.maxToShow || this.maxToShow <= 0 || this.maxToShow >= tabs.length) return;
|
920
|
+
if (tabs.indexOf(selectedTab) > this.maxToShow - 1) return;
|
921
|
+
return this.#updateTabsContainerWidthLogic();
|
922
|
+
}
|
923
|
+
|
924
|
+
// remove after d2l-tab/d2l-tab-panel backport
|
925
|
+
_updateTabsContainerWidthDefaultSlotBehavior(selectedTabInfo) {
|
981
926
|
if (!this.maxToShow || this.maxToShow <= 0 || this.maxToShow >= this._tabInfos.length) return;
|
982
927
|
if (this._tabInfos.indexOf(selectedTabInfo) > this.maxToShow - 1) return;
|
928
|
+
return this.#updateTabsContainerWidthLogic();
|
929
|
+
}
|
983
930
|
|
984
|
-
|
931
|
+
#calculateScrollPositionLogic(tabsDataStructure, selectedTabIndex, measures) {
|
932
|
+
if (!measures.tabRects[selectedTabIndex]) return 0;
|
985
933
|
|
986
|
-
|
987
|
-
|
988
|
-
|
934
|
+
const selectedTabMeasures = measures.tabRects[selectedTabIndex];
|
935
|
+
|
936
|
+
const isOverflowingLeft = (selectedTabMeasures.offsetLeft + this._translationValue < 0);
|
937
|
+
const isOverflowingRight = (selectedTabMeasures.offsetLeft + selectedTabMeasures.rect.width + this._translationValue > measures.tabsContainerRect.width);
|
938
|
+
|
939
|
+
const isRTL = this.#isRTL();
|
940
|
+
|
941
|
+
let getNewTranslationValue;
|
942
|
+
if (!isRTL) {
|
943
|
+
getNewTranslationValue = () => {
|
944
|
+
if (selectedTabIndex === 0) {
|
945
|
+
// position selected tab at beginning
|
946
|
+
return 0;
|
947
|
+
} else if (selectedTabIndex === (tabsDataStructure.length - 1)) {
|
948
|
+
// position selected tab at end
|
949
|
+
return -1 * (selectedTabMeasures.offsetLeft - measures.tabsContainerRect.width + selectedTabMeasures.rect.width);
|
950
|
+
} else {
|
951
|
+
// position selected tab in middle
|
952
|
+
return -1 * (selectedTabMeasures.offsetLeft - (measures.tabsContainerRect.width / 2) + (selectedTabMeasures.rect.width / 2));
|
953
|
+
}
|
954
|
+
};
|
955
|
+
} else {
|
956
|
+
getNewTranslationValue = () => {
|
957
|
+
if (selectedTabIndex === 0) {
|
958
|
+
// position selected tab at beginning
|
959
|
+
return 0;
|
960
|
+
} else if (selectedTabIndex === (tabsDataStructure.length - 1)) {
|
961
|
+
// position selected tab at end
|
962
|
+
return -1 * selectedTabMeasures.offsetLeft;
|
963
|
+
} else {
|
964
|
+
// position selected tab in middle
|
965
|
+
return (measures.tabsContainerRect.width / 2) - (selectedTabMeasures.offsetLeft + selectedTabMeasures.rect.width / 2) + (selectedTabMeasures.rect.width / 2);
|
966
|
+
}
|
967
|
+
};
|
989
968
|
}
|
990
969
|
|
991
|
-
|
992
|
-
|
970
|
+
let newTranslationValue = this._translationValue;
|
971
|
+
if (isOverflowingLeft || isOverflowingRight) {
|
972
|
+
newTranslationValue = getNewTranslationValue();
|
993
973
|
}
|
994
974
|
|
995
|
-
|
975
|
+
let expectedPosition;
|
996
976
|
|
997
|
-
|
998
|
-
|
999
|
-
|
977
|
+
// make sure the new position will not place selected tab behind left scroll button
|
978
|
+
if (!isRTL) {
|
979
|
+
expectedPosition = selectedTabMeasures.offsetLeft + newTranslationValue;
|
980
|
+
if (newTranslationValue < 0 && this._isPositionInLeftScrollArea(expectedPosition)) {
|
981
|
+
newTranslationValue = getNewTranslationValue();
|
982
|
+
}
|
983
|
+
} else {
|
984
|
+
expectedPosition = selectedTabMeasures.offsetLeft + selectedTabMeasures.rect.width + newTranslationValue;
|
985
|
+
if (newTranslationValue > 0 && this._isPositionInRightScrollArea(expectedPosition, measures)) {
|
986
|
+
newTranslationValue = getNewTranslationValue();
|
987
|
+
}
|
988
|
+
}
|
1000
989
|
|
1001
|
-
|
990
|
+
if (!isRTL) {
|
991
|
+
// make sure there will not be any empty space between left side of container and first tab
|
992
|
+
if (newTranslationValue > 0) newTranslationValue = 0;
|
993
|
+
} else {
|
994
|
+
// make sure there will not be any empty space between right side of container and first tab
|
995
|
+
if (newTranslationValue < 0) newTranslationValue = 0;
|
996
|
+
}
|
997
|
+
|
998
|
+
// make sure the new position will not place selected tab behind the right scroll button
|
999
|
+
if (!isRTL) {
|
1000
|
+
expectedPosition = selectedTabMeasures.offsetLeft + selectedTabMeasures.rect.width + newTranslationValue;
|
1001
|
+
if ((selectedTabIndex < tabsDataStructure.length - 1) && this._isPositionInRightScrollArea(expectedPosition, measures)) {
|
1002
|
+
newTranslationValue = getNewTranslationValue();
|
1003
|
+
}
|
1004
|
+
} else {
|
1005
|
+
expectedPosition = selectedTabMeasures.offsetLeft + newTranslationValue;
|
1006
|
+
if ((selectedTabIndex < tabsDataStructure.length - 1) && this._isPositionInLeftScrollArea(expectedPosition)) {
|
1007
|
+
newTranslationValue = getNewTranslationValue();
|
1008
|
+
}
|
1009
|
+
}
|
1010
|
+
|
1011
|
+
return newTranslationValue;
|
1002
1012
|
}
|
1003
1013
|
|
1004
1014
|
#isRTL() {
|
@@ -1020,6 +1030,22 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
|
|
1020
1030
|
}, 0);
|
1021
1031
|
}
|
1022
1032
|
|
1033
|
+
#updateScrollPositionLogic(measures, newTranslationValue) {
|
1034
|
+
const scrollToPromise = this._scrollToPosition(newTranslationValue);
|
1035
|
+
const scrollVisibilityPromise = this._updateScrollVisibility(measures);
|
1036
|
+
const p = Promise.all([
|
1037
|
+
scrollVisibilityPromise,
|
1038
|
+
scrollToPromise
|
1039
|
+
]);
|
1040
|
+
p.then(() => {
|
1041
|
+
if (this._loadingCompleteResolve) {
|
1042
|
+
this._loadingCompleteResolve();
|
1043
|
+
this._loadingCompleteResolve = undefined;
|
1044
|
+
}
|
1045
|
+
});
|
1046
|
+
return p;
|
1047
|
+
}
|
1048
|
+
|
1023
1049
|
async #updateSelectedTab(selectedTab) {
|
1024
1050
|
const selectedPanel = this._getPanel(selectedTab.id);
|
1025
1051
|
selectedTab.tabIndex = 0;
|
@@ -1040,6 +1066,26 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
|
|
1040
1066
|
});
|
1041
1067
|
}
|
1042
1068
|
|
1069
|
+
#updateTabsContainerWidthLogic() {
|
1070
|
+
const measures = this._getMeasures();
|
1071
|
+
|
1072
|
+
let maxWidth = 4; // initial value to allow for padding hack
|
1073
|
+
for (let i = 0; i < this.maxToShow; i++) {
|
1074
|
+
maxWidth += measures.tabRects[i].rect.width;
|
1075
|
+
}
|
1076
|
+
|
1077
|
+
if (measures.tabsContainerListRect.width > maxWidth) {
|
1078
|
+
maxWidth += scrollButtonWidth;
|
1079
|
+
}
|
1080
|
+
|
1081
|
+
if (maxWidth >= measures.tabsContainerRect.width) return;
|
1082
|
+
|
1083
|
+
this._maxWidth = maxWidth;
|
1084
|
+
this._scrollCollapsed = true;
|
1085
|
+
this._measures = null;
|
1086
|
+
|
1087
|
+
return this.updateComplete;
|
1088
|
+
}
|
1043
1089
|
}
|
1044
1090
|
|
1045
1091
|
customElements.define('d2l-tabs', Tabs);
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@brightspace-ui/core",
|
3
|
-
"version": "3.94.
|
3
|
+
"version": "3.94.1",
|
4
4
|
"description": "A collection of accessible, free, open-source web components for building Brightspace applications",
|
5
5
|
"type": "module",
|
6
6
|
"repository": "https://github.com/BrightspaceUI/core.git",
|