@ni/nimble-components 20.1.3 → 20.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/all-components-bundle.js +24 -18
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +333 -332
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/anchor-tab/styles.js +3 -3
- package/dist/esm/anchor-tabs/index.js +7 -1
- package/dist/esm/anchor-tabs/index.js.map +1 -1
- package/package.json +3 -3
|
@@ -5394,15 +5394,6 @@
|
|
|
5394
5394
|
* is larger than the max, the minimum value will be returned. If the value is smaller than the minimum,
|
|
5395
5395
|
* the maximum will be returned. Otherwise, the value is returned un-changed.
|
|
5396
5396
|
*/
|
|
5397
|
-
function wrapInBounds(min, max, value) {
|
|
5398
|
-
if (value < min) {
|
|
5399
|
-
return max;
|
|
5400
|
-
}
|
|
5401
|
-
else if (value > max) {
|
|
5402
|
-
return min;
|
|
5403
|
-
}
|
|
5404
|
-
return value;
|
|
5405
|
-
}
|
|
5406
5397
|
/**
|
|
5407
5398
|
* Ensures that a value is between a min and max value. If value is lower than min, min will be returned.
|
|
5408
5399
|
* If value is greater than max, max will be returned.
|
|
@@ -13268,8 +13259,11 @@
|
|
|
13268
13259
|
this.isDisabledElement = (el) => {
|
|
13269
13260
|
return el.getAttribute("aria-disabled") === "true";
|
|
13270
13261
|
};
|
|
13262
|
+
this.isHiddenElement = (el) => {
|
|
13263
|
+
return el.hasAttribute("hidden");
|
|
13264
|
+
};
|
|
13271
13265
|
this.isFocusableElement = (el) => {
|
|
13272
|
-
return !this.isDisabledElement(el);
|
|
13266
|
+
return !this.isDisabledElement(el) && !this.isHiddenElement(el);
|
|
13273
13267
|
};
|
|
13274
13268
|
this.setTabs = () => {
|
|
13275
13269
|
const gridHorizontalProperty = "gridColumn";
|
|
@@ -13295,6 +13289,7 @@
|
|
|
13295
13289
|
tab.setAttribute("tabindex", isActiveTab ? "0" : "-1");
|
|
13296
13290
|
if (isActiveTab) {
|
|
13297
13291
|
this.activetab = tab;
|
|
13292
|
+
this.activeid = tabId;
|
|
13298
13293
|
}
|
|
13299
13294
|
}
|
|
13300
13295
|
// If the original property isn't emptied out,
|
|
@@ -13535,9 +13530,14 @@
|
|
|
13535
13530
|
* This method allows the active index to be adjusted by numerical increments
|
|
13536
13531
|
*/
|
|
13537
13532
|
adjust(adjustment) {
|
|
13538
|
-
this.
|
|
13539
|
-
|
|
13540
|
-
|
|
13533
|
+
const focusableTabs = this.tabs.filter(t => this.isFocusableElement(t));
|
|
13534
|
+
const currentActiveTabIndex = focusableTabs.indexOf(this.activetab);
|
|
13535
|
+
const nextTabIndex = limit(0, focusableTabs.length - 1, currentActiveTabIndex + adjustment);
|
|
13536
|
+
// the index of the next focusable tab within the context of all available tabs
|
|
13537
|
+
const nextIndex = this.tabs.indexOf(focusableTabs[nextTabIndex]);
|
|
13538
|
+
if (nextIndex > -1) {
|
|
13539
|
+
this.moveToTabByIndex(this.tabs, nextIndex);
|
|
13540
|
+
}
|
|
13541
13541
|
}
|
|
13542
13542
|
focusTab() {
|
|
13543
13543
|
this.tabs[this.activeTabIndex].focus();
|
|
@@ -16288,7 +16288,7 @@
|
|
|
16288
16288
|
|
|
16289
16289
|
/**
|
|
16290
16290
|
* Do not edit directly
|
|
16291
|
-
* Generated on
|
|
16291
|
+
* Generated on Fri, 11 Aug 2023 21:45:08 GMT
|
|
16292
16292
|
*/
|
|
16293
16293
|
|
|
16294
16294
|
const Information100DarkUi = "#a46eff";
|
|
@@ -17789,7 +17789,7 @@
|
|
|
17789
17789
|
background-color: ${fillHoverColor};
|
|
17790
17790
|
}
|
|
17791
17791
|
|
|
17792
|
-
:host(:hover[aria-
|
|
17792
|
+
:host(:hover[aria-current]) {
|
|
17793
17793
|
background-color: ${fillHoverSelectedColor};
|
|
17794
17794
|
}
|
|
17795
17795
|
|
|
@@ -17865,12 +17865,12 @@
|
|
|
17865
17865
|
border-bottom-width: var(--ni-private-focus-indicator-width);
|
|
17866
17866
|
}
|
|
17867
17867
|
|
|
17868
|
-
:host([aria-
|
|
17868
|
+
:host([aria-current]) a::after {
|
|
17869
17869
|
width: 100%;
|
|
17870
17870
|
border-bottom-width: var(--ni-private-active-indicator-width);
|
|
17871
17871
|
}
|
|
17872
17872
|
|
|
17873
|
-
:host([disabled][aria-
|
|
17873
|
+
:host([disabled][aria-current]) a::after {
|
|
17874
17874
|
border-bottom-color: rgba(${borderHoverColor}, 0.3);
|
|
17875
17875
|
}
|
|
17876
17876
|
|
|
@@ -18003,7 +18003,12 @@
|
|
|
18003
18003
|
}
|
|
18004
18004
|
const isTabStop = this.activeid === tabId && this.isFocusableElement(tab);
|
|
18005
18005
|
tab.setAttribute('id', tabId);
|
|
18006
|
-
|
|
18006
|
+
if (isActiveTab) {
|
|
18007
|
+
tab.setAttribute('aria-current', 'page');
|
|
18008
|
+
}
|
|
18009
|
+
else {
|
|
18010
|
+
tab.removeAttribute('aria-current');
|
|
18011
|
+
}
|
|
18007
18012
|
tab.removeEventListener('click', this.handleTabClick);
|
|
18008
18013
|
tab.addEventListener('click', this.handleTabClick);
|
|
18009
18014
|
tab.removeEventListener('keydown', this.handleTabKeyDown);
|
|
@@ -18113,6 +18118,7 @@
|
|
|
18113
18118
|
focusedTab.focus();
|
|
18114
18119
|
this.tabs.forEach((tab) => {
|
|
18115
18120
|
tab.setAttribute('tabindex', tab === focusedTab ? '0' : '-1');
|
|
18121
|
+
tab.setAttribute('aria-selected', tab === focusedTab ? 'true' : 'false');
|
|
18116
18122
|
});
|
|
18117
18123
|
};
|
|
18118
18124
|
}
|