@syncfusion/ej2-navigations 28.2.5 → 28.2.11

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 (48) hide show
  1. package/README.md +1 -1
  2. package/dist/ej2-navigations.min.js +2 -2
  3. package/dist/ej2-navigations.umd.min.js +2 -2
  4. package/dist/ej2-navigations.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-navigations.es2015.js +66 -10
  6. package/dist/es6/ej2-navigations.es2015.js.map +1 -1
  7. package/dist/es6/ej2-navigations.es5.js +66 -10
  8. package/dist/es6/ej2-navigations.es5.js.map +1 -1
  9. package/dist/global/ej2-navigations.min.js +2 -2
  10. package/dist/global/ej2-navigations.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +10 -10
  13. package/src/carousel/carousel.js +5 -0
  14. package/src/common/menu-base.js +38 -5
  15. package/src/toolbar/toolbar.js +4 -1
  16. package/src/treeview/treeview.js +19 -4
  17. package/styles/bootstrap4-lite.css +4 -4
  18. package/styles/bootstrap4.css +4 -4
  19. package/styles/bootstrap5-dark-lite.css +10 -10
  20. package/styles/bootstrap5-dark.css +10 -10
  21. package/styles/bootstrap5-lite.css +10 -10
  22. package/styles/bootstrap5.3-lite.css +12 -12
  23. package/styles/bootstrap5.3.css +12 -12
  24. package/styles/bootstrap5.css +10 -10
  25. package/styles/fluent2-lite.css +7 -26
  26. package/styles/fluent2.css +7 -26
  27. package/styles/material3-dark-lite.css +10 -10
  28. package/styles/material3-dark.css +10 -10
  29. package/styles/material3-lite.css +10 -10
  30. package/styles/material3.css +10 -10
  31. package/styles/tab/_bootstrap4-definition.scss +2 -2
  32. package/styles/tab/_bootstrap5-definition.scss +3 -3
  33. package/styles/tab/_bootstrap5.3-definition.scss +3 -3
  34. package/styles/tab/_material3-definition.scss +3 -3
  35. package/styles/tab/_tailwind3-definition.scss +3 -3
  36. package/styles/tab/bootstrap4.css +4 -4
  37. package/styles/tab/bootstrap5-dark.css +10 -10
  38. package/styles/tab/bootstrap5.3.css +10 -10
  39. package/styles/tab/bootstrap5.css +10 -10
  40. package/styles/tab/material3-dark.css +10 -10
  41. package/styles/tab/material3.css +10 -10
  42. package/styles/tab/tailwind3.css +10 -10
  43. package/styles/tailwind3-lite.css +17 -36
  44. package/styles/tailwind3.css +17 -36
  45. package/styles/toolbar/_theme.scss +25 -64
  46. package/styles/toolbar/bootstrap5.3.css +2 -2
  47. package/styles/toolbar/fluent2.css +7 -26
  48. package/styles/toolbar/tailwind3.css +7 -26
@@ -1918,6 +1918,8 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
1918
1918
  this.popupWrapper = this.createElement('div', {
1919
1919
  className: 'e-' + this.getModuleName() + '-wrapper ' + POPUP, id: li.id + '-ej2menu-' + elemId + '-popup'
1920
1920
  });
1921
+ this.popupWrapper.setAttribute('role', 'navigation');
1922
+ this.popupWrapper.setAttribute('aria-label', item.text + '-menu-popup');
1921
1923
  if (this.hamburgerMode) {
1922
1924
  top = li.offsetHeight;
1923
1925
  li.appendChild(this.popupWrapper);
@@ -2396,6 +2398,9 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
2396
2398
  if (!args.curData.htmlAttributes.role) {
2397
2399
  args.item.setAttribute('role', 'separator');
2398
2400
  }
2401
+ if (!args.curData.htmlAttributes.ariaLabel) {
2402
+ args.item.setAttribute('aria-label', 'separator');
2403
+ }
2399
2404
  }
2400
2405
  if (showIcon && !args.curData[args.fields.iconCss]
2401
2406
  && !args.curData[_this.getField('separator', level)]) {
@@ -2990,7 +2995,13 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
2990
2995
  item.splice(idx, 1);
2991
2996
  var uls = this.getWrapper().children;
2992
2997
  if (navIdx.length < uls.length) {
2993
- detach(uls[navIdx.length].children[idx]);
2998
+ if (this.enableScrolling && !uls[navIdx.length].classList.contains('e-menu-parent')) {
2999
+ var ul = uls[navIdx.length].querySelector('.e-menu-parent');
3000
+ detach(ul.children[idx]);
3001
+ }
3002
+ else {
3003
+ detach(uls[navIdx.length].children[idx]);
3004
+ }
2994
3005
  }
2995
3006
  };
2996
3007
  /**
@@ -3295,7 +3306,13 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
3295
3306
  ul.children[idx + 1].classList.add(disabled);
3296
3307
  }
3297
3308
  else {
3298
- ul.children[idx].classList.add(disabled);
3309
+ if (this.enableScrolling && !ul.classList.contains('e-menu-parent')) {
3310
+ var mainUl = ul.querySelector('.e-menu-parent');
3311
+ mainUl.children[idx].classList.add(disabled);
3312
+ }
3313
+ else {
3314
+ ul.children[idx].classList.add(disabled);
3315
+ }
3299
3316
  }
3300
3317
  }
3301
3318
  }
@@ -3333,6 +3350,9 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
3333
3350
  ul = this.getUlByNavIdx(navIdx.length);
3334
3351
  item = this.getItems(navIdx);
3335
3352
  if (ul) {
3353
+ if (this.enableScrolling && !ul.classList.contains('e-menu-parent')) {
3354
+ ul = ul.querySelector('.e-menu-parent');
3355
+ }
3336
3356
  var validUl = isUniqueId ? ul.children[index].id : item[index].text.toString();
3337
3357
  if (ishide && validUl === items[i]) {
3338
3358
  ul.children[index].classList.add(HIDE);
@@ -3392,6 +3412,7 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
3392
3412
  var navIdx;
3393
3413
  var iitems;
3394
3414
  var menuitem;
3415
+ var parentUl;
3395
3416
  for (var i = 0; i < items.length; i++) {
3396
3417
  navIdx = this.getIndex(text, isUniqueId);
3397
3418
  idx = navIdx.pop();
@@ -3404,11 +3425,23 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
3404
3425
  if (!isNullOrUndefined(idx) && navIdx.length < uls.length) {
3405
3426
  idx = isAfter ? idx + 1 : idx;
3406
3427
  li = this.createItems(iitems).children[idx];
3407
- var ul = this.isMenu ? select('.e-menu-parent', uls[navIdx.length]) : uls[navIdx.length];
3428
+ var ul = parentUl = this.isMenu ? select('.e-menu-parent', uls[navIdx.length]) : uls[navIdx.length];
3429
+ if (this.enableScrolling && !ul.classList.contains('e-menu-parent')) {
3430
+ ul = ul.querySelector('.e-menu-parent');
3431
+ }
3408
3432
  ul.insertBefore(li, ul.children[idx]);
3409
3433
  if (i === items.length - 1 && !this.isMenu && ul.style.display === 'block') {
3410
- this.setPosition(null, ul, parseFloat(ul.style.top), parseFloat(ul.style.left));
3411
- ul.style.display = 'block';
3434
+ if (this.enableScrolling) {
3435
+ this.setPosition(null, ul, parseFloat(parentUl.style.top), parseFloat(parentUl.style.left));
3436
+ var scrollElem = closest(ul, '.e-vscroll');
3437
+ if (scrollElem) {
3438
+ scrollElem.style.display = 'block';
3439
+ }
3440
+ }
3441
+ else {
3442
+ this.setPosition(null, ul, parseFloat(ul.style.top), parseFloat(ul.style.left));
3443
+ ul.style.display = 'block';
3444
+ }
3412
3445
  }
3413
3446
  }
3414
3447
  }
@@ -4391,7 +4424,10 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
4391
4424
  else if (scrollNav) {
4392
4425
  navEleWidth = this.isVertical ? (scrollNav.offsetHeight * (2)) : (scrollNav.offsetWidth * 2);
4393
4426
  }
4394
- if (itemWidth > eleWidth - navEleWidth) {
4427
+ if (eleWidth >= itemWidth && scrollNav) {
4428
+ return false;
4429
+ }
4430
+ else if (itemWidth > eleWidth - navEleWidth) {
4395
4431
  return true;
4396
4432
  }
4397
4433
  else {
@@ -11370,16 +11406,27 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
11370
11406
  };
11371
11407
  TreeView.prototype.getSelectedChildNodeDetails = function (dataUid) {
11372
11408
  var _this = this;
11409
+ var childKey = typeof this.fields.child === 'string' ? this.fields.child : null;
11410
+ var dataId = this.fields.id;
11411
+ var parentKey = this.fields.parentID;
11373
11412
  return this.checkedNodes
11374
11413
  .map(function (checkedNodeId) {
11375
11414
  return new DataManager(_this.DDTTreeData)
11376
11415
  .executeLocal(new Query().where('id', 'equal', checkedNodeId, true))[0];
11377
11416
  })
11378
11417
  .filter(function (childNode) {
11379
- if (childNode && typeof childNode === 'object' && 'pid' in childNode) {
11380
- var childNodePid = childNode.pid;
11381
- if (!isNullOrUndefined(childNodePid)) {
11382
- return childNodePid.toString() === dataUid;
11418
+ if (childNode && typeof childNode === 'object' && (parentKey in childNode || childKey in childNode)) {
11419
+ if (!isNullOrUndefined(childKey) && childKey in childNode && Array.isArray(childNode[childKey])) {
11420
+ var matchNode = childNode[dataId];
11421
+ if (!isNullOrUndefined(matchNode)) {
11422
+ return matchNode.toString() === dataUid;
11423
+ }
11424
+ }
11425
+ else {
11426
+ var childNodePid = childNode[parentKey];
11427
+ if (!isNullOrUndefined(childNodePid)) {
11428
+ return childNodePid.toString() === dataUid;
11429
+ }
11383
11430
  }
11384
11431
  }
11385
11432
  return false;
@@ -11509,14 +11556,18 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
11509
11556
  var checkBoxes = selectAll('.' + CHECKBOXWRAP, this.element);
11510
11557
  if (this.loadOnDemand) {
11511
11558
  for (var index = 0; index < checkBoxes.length; index++) {
11559
+ var liEle = closest(checkBoxes[parseInt(index.toString(), 10)], '.' + LISTITEM);
11512
11560
  this.updateFieldChecked(checkBoxes[parseInt(index.toString(), 10)], doCheck);
11513
11561
  this.changeState(checkBoxes[parseInt(index.toString(), 10)], doCheck ? 'check' : 'uncheck', null, null, null, doCheck);
11562
+ this.updateOldCheckedData([this.getNodeData(liEle)]);
11514
11563
  }
11515
11564
  }
11516
11565
  else {
11517
11566
  for (var index = 0; index < checkBoxes.length; index++) {
11567
+ var liEle = closest(checkBoxes[parseInt(index.toString(), 10)], '.' + LISTITEM);
11518
11568
  this.updateFieldChecked(checkBoxes[parseInt(index.toString(), 10)], doCheck);
11519
11569
  this.changeState(checkBoxes[parseInt(index.toString(), 10)], doCheck ? 'check' : 'uncheck');
11570
+ this.updateOldCheckedData([this.getNodeData(liEle)]);
11520
11571
  }
11521
11572
  }
11522
11573
  }
@@ -18028,6 +18079,9 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
18028
18079
  if (isClone) {
18029
18080
  itemEle.classList.add(CLS_CLONED);
18030
18081
  }
18082
+ if (!(this.selectedIndex === index && !isClone)) {
18083
+ itemEle.setAttribute('inert', 'true');
18084
+ }
18031
18085
  if (!isNullOrUndefined(item.htmlAttributes)) {
18032
18086
  this.setHtmlAttributes(item.htmlAttributes, itemEle);
18033
18087
  }
@@ -18308,7 +18362,9 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
18308
18362
  }
18309
18363
  _this.setProperties({ selectedIndex: currentIndex }, true);
18310
18364
  attributes(args.currentSlide, { 'aria-hidden': 'true' });
18365
+ args.currentSlide.setAttribute('inert', 'true');
18311
18366
  attributes(args.nextSlide, { 'aria-hidden': 'false' });
18367
+ args.nextSlide.removeAttribute('inert');
18312
18368
  _this.refreshIndicators(activeIndex, currentIndex);
18313
18369
  _this.slideChangedEventArgs = {
18314
18370
  currentIndex: args.nextIndex,