@syncfusion/ej2-navigations 24.1.41 → 24.2.3

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 (95) hide show
  1. package/CHANGELOG.md +34 -0
  2. package/README.md +1 -1
  3. package/dist/ej2-navigations.min.js +2 -2
  4. package/dist/ej2-navigations.umd.min.js +2 -2
  5. package/dist/ej2-navigations.umd.min.js.map +1 -1
  6. package/dist/es6/ej2-navigations.es2015.js +102 -15
  7. package/dist/es6/ej2-navigations.es2015.js.map +1 -1
  8. package/dist/es6/ej2-navigations.es5.js +111 -24
  9. package/dist/es6/ej2-navigations.es5.js.map +1 -1
  10. package/dist/global/ej2-navigations.min.js +2 -2
  11. package/dist/global/ej2-navigations.min.js.map +1 -1
  12. package/dist/global/index.d.ts +1 -1
  13. package/package.json +11 -11
  14. package/src/common/menu-base.js +21 -0
  15. package/src/stepper/stepper.js +26 -12
  16. package/src/tab/tab.js +1 -1
  17. package/src/treeview/treeview.d.ts +1 -0
  18. package/src/treeview/treeview.js +63 -11
  19. package/styles/bootstrap-dark.css +5 -4
  20. package/styles/bootstrap.css +5 -4
  21. package/styles/bootstrap4.css +5 -4
  22. package/styles/bootstrap5-dark.css +14 -11
  23. package/styles/bootstrap5.css +14 -11
  24. package/styles/fabric-dark.css +5 -4
  25. package/styles/fabric.css +5 -4
  26. package/styles/fluent-dark.css +9 -8
  27. package/styles/fluent.css +9 -8
  28. package/styles/highcontrast-light.css +5 -4
  29. package/styles/highcontrast.css +5 -4
  30. package/styles/material-dark.css +5 -4
  31. package/styles/material.css +5 -4
  32. package/styles/material3-dark.css +5 -4
  33. package/styles/material3.css +5 -4
  34. package/styles/menu/_layout.scss +0 -1
  35. package/styles/menu/bootstrap-dark.css +0 -1
  36. package/styles/menu/bootstrap.css +0 -1
  37. package/styles/menu/bootstrap4.css +0 -1
  38. package/styles/menu/bootstrap5-dark.css +0 -1
  39. package/styles/menu/bootstrap5.css +0 -1
  40. package/styles/menu/fabric-dark.css +0 -1
  41. package/styles/menu/fabric.css +0 -1
  42. package/styles/menu/fluent-dark.css +0 -1
  43. package/styles/menu/fluent.css +0 -1
  44. package/styles/menu/highcontrast-light.css +0 -1
  45. package/styles/menu/highcontrast.css +0 -1
  46. package/styles/menu/material-dark.css +0 -1
  47. package/styles/menu/material.css +0 -1
  48. package/styles/menu/material3-dark.css +0 -1
  49. package/styles/menu/material3.css +0 -1
  50. package/styles/menu/tailwind-dark.css +0 -1
  51. package/styles/menu/tailwind.css +0 -1
  52. package/styles/stepper/_bootstrap-dark-definition.scss +1 -0
  53. package/styles/stepper/_bootstrap-definition.scss +1 -0
  54. package/styles/stepper/_bootstrap4-definition.scss +1 -0
  55. package/styles/stepper/_bootstrap5-definition.scss +1 -0
  56. package/styles/stepper/_fabric-dark-definition.scss +1 -0
  57. package/styles/stepper/_fabric-definition.scss +1 -0
  58. package/styles/stepper/_fluent-definition.scss +1 -0
  59. package/styles/stepper/_fusionnew-definition.scss +1 -0
  60. package/styles/stepper/_highcontrast-definition.scss +1 -0
  61. package/styles/stepper/_highcontrast-light-definition.scss +1 -0
  62. package/styles/stepper/_material-dark-definition.scss +1 -0
  63. package/styles/stepper/_material-definition.scss +1 -0
  64. package/styles/stepper/_material3-definition.scss +1 -0
  65. package/styles/stepper/_tailwind-definition.scss +1 -0
  66. package/styles/stepper/_theme.scss +9 -3
  67. package/styles/stepper/bootstrap-dark.css +5 -3
  68. package/styles/stepper/bootstrap.css +5 -3
  69. package/styles/stepper/bootstrap4.css +5 -3
  70. package/styles/stepper/bootstrap5-dark.css +5 -3
  71. package/styles/stepper/bootstrap5.css +5 -3
  72. package/styles/stepper/fabric-dark.css +5 -3
  73. package/styles/stepper/fabric.css +5 -3
  74. package/styles/stepper/fluent-dark.css +5 -3
  75. package/styles/stepper/fluent.css +5 -3
  76. package/styles/stepper/highcontrast-light.css +5 -3
  77. package/styles/stepper/highcontrast.css +5 -3
  78. package/styles/stepper/material-dark.css +5 -3
  79. package/styles/stepper/material.css +5 -3
  80. package/styles/stepper/material3-dark.css +5 -3
  81. package/styles/stepper/material3.css +5 -3
  82. package/styles/stepper/tailwind-dark.css +5 -3
  83. package/styles/stepper/tailwind.css +5 -3
  84. package/styles/tailwind-dark.css +9 -8
  85. package/styles/tailwind.css +9 -8
  86. package/styles/toolbar/_bootstrap5-definition.scss +5 -5
  87. package/styles/toolbar/_fluent-definition.scss +2 -2
  88. package/styles/toolbar/_tailwind-definition.scss +2 -2
  89. package/styles/toolbar/_theme.scss +8 -0
  90. package/styles/toolbar/bootstrap5-dark.css +9 -7
  91. package/styles/toolbar/bootstrap5.css +9 -7
  92. package/styles/toolbar/fluent-dark.css +4 -4
  93. package/styles/toolbar/fluent.css +4 -4
  94. package/styles/toolbar/tailwind-dark.css +4 -4
  95. package/styles/toolbar/tailwind.css +4 -4
@@ -1580,7 +1580,25 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
1580
1580
  fli.classList.add(SELECTED);
1581
1581
  eventArgs = { element: fli, item: item, event: e };
1582
1582
  this.trigger('select', eventArgs);
1583
+ var aEle = fli.querySelector('.e-menu-url');
1584
+ if (item.url && aEle) {
1585
+ switch (aEle.getAttribute('target')) {
1586
+ case '_blank':
1587
+ window.open(item.url, '_blank');
1588
+ break;
1589
+ case '_parent':
1590
+ window.parent.location.href = item.url;
1591
+ break;
1592
+ default:
1593
+ window.location.href = item.url;
1594
+ }
1595
+ }
1583
1596
  this.closeMenu(null, e);
1597
+ var sli = this.getLIByClass(this.getUlByNavIdx(), SELECTED);
1598
+ if (sli) {
1599
+ sli.classList.add(FOCUSED);
1600
+ sli.focus();
1601
+ }
1584
1602
  }
1585
1603
  }
1586
1604
  }
@@ -1678,6 +1696,9 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
1678
1696
  closeArgs = { element: ul_1, parentItem: item_1, items: items_1 };
1679
1697
  _this.trigger('onClose', closeArgs);
1680
1698
  _this.navIdx.pop();
1699
+ if (_this.navIdx.length === 0 && e && e.type === 'keyup') {
1700
+ _this.showSubMenu = false;
1701
+ }
1681
1702
  if (!_this.isMenu) {
1682
1703
  EventHandler.remove(ul_1, 'keydown', _this.keyHandler);
1683
1704
  if (_this.keyType === 'right') {
@@ -8666,7 +8687,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
8666
8687
  if (isInteracted === void 0) { isInteracted = false; }
8667
8688
  this.tbItem = selectAll('.' + CLS_TB_ITEM, this.getTabHeader());
8668
8689
  var trg = this.tbItem[value];
8669
- if (value < 0 || isNaN(value) || this.tbItem.length === 0) {
8690
+ if (value < 0 || isNaN(value) || this.tbItem.length === 0 || !isNullOrUndefined(trg) && trg.classList.contains(CLS_DISABLE$4)) {
8670
8691
  return;
8671
8692
  }
8672
8693
  if (value >= 0 && !skipDataBind) {
@@ -10524,6 +10545,14 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
10524
10545
  this.rootData = this.treeData;
10525
10546
  }
10526
10547
  };
10548
+ TreeView.prototype.isChildObject = function () {
10549
+ if (typeof this.fields.child === 'object') {
10550
+ return true;
10551
+ }
10552
+ else {
10553
+ return false;
10554
+ }
10555
+ };
10527
10556
  TreeView.prototype.renderItems = function (isSorted) {
10528
10557
  /* eslint-disable */
10529
10558
  this.listBaseOption.ariaAttributes.level = 1;
@@ -10843,6 +10872,9 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
10843
10872
  if ((typeof mapper.child === 'string') && !isNullOrUndefined(getValue(mapper.child, ds[i]))) {
10844
10873
  return 2;
10845
10874
  }
10875
+ if (this.isChildObject()) {
10876
+ return 2;
10877
+ }
10846
10878
  if (!isNullOrUndefined(getValue(mapper.parentID, ds[i])) || !isNullOrUndefined(getValue(mapper.hasChildren, ds[i]))) {
10847
10879
  return 1;
10848
10880
  }
@@ -11790,7 +11822,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
11790
11822
  }
11791
11823
  }
11792
11824
  else {
11793
- childItems = this.getChildNodes(this.treeData, parentLi.getAttribute('data-uid'));
11825
+ childItems = this.getChildNodes(this.treeData, parentLi.getAttribute('data-uid'), false, parseFloat(parentLi.getAttribute('aria-level')) + 1);
11794
11826
  this.currentLoadData = this.getSortedData(childItems);
11795
11827
  if (isNullOrUndefined(childItems) || childItems.length === 0) {
11796
11828
  detach(eicon);
@@ -11892,7 +11924,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
11892
11924
  TreeView.prototype.getChildMapper = function (mapper) {
11893
11925
  return (typeof mapper.child === 'string' || isNullOrUndefined(mapper.child)) ? mapper : mapper.child;
11894
11926
  };
11895
- TreeView.prototype.getChildNodes = function (obj, parentId, isRoot) {
11927
+ TreeView.prototype.getChildNodes = function (obj, parentId, isRoot, level) {
11896
11928
  var _this = this;
11897
11929
  if (isRoot === void 0) { isRoot = false; }
11898
11930
  var childNodes;
@@ -11924,6 +11956,39 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
11924
11956
  }
11925
11957
  }
11926
11958
  }
11959
+ else if (this.isChildObject()) {
11960
+ var tempField = !isNullOrUndefined(level) ? this.fields : this.fields.child;
11961
+ var i = 1;
11962
+ while (i < level) {
11963
+ if (!isNullOrUndefined(tempField.child)) {
11964
+ tempField = tempField.child;
11965
+ }
11966
+ else {
11967
+ break;
11968
+ }
11969
+ i++;
11970
+ }
11971
+ this.updateListProp(tempField);
11972
+ var index = obj.findIndex(function (data) { return getValue(_this.fields.id, data) && getValue(_this.fields.id, data).toString() === parentId; });
11973
+ if (index !== -1) {
11974
+ return getValue('child', obj[index]);
11975
+ }
11976
+ if (index === -1) {
11977
+ for (var i_1 = 0, objlen = obj.length; i_1 < objlen; i_1++) {
11978
+ var tempArray = getValue('child', obj[i_1]);
11979
+ var childIndex = !isNullOrUndefined(tempArray) ? tempArray.findIndex(function (data) { return getValue(_this.fields.child.id, data) && getValue(_this.fields.child.id, data).toString() === parentId; }) : -1;
11980
+ if (childIndex !== -1) {
11981
+ return getValue('child', tempArray[childIndex]);
11982
+ }
11983
+ else if (!isNullOrUndefined(tempArray)) {
11984
+ childNodes = this.getChildNodes(tempArray, parentId, false, level);
11985
+ if (childNodes !== undefined) {
11986
+ break;
11987
+ }
11988
+ }
11989
+ }
11990
+ }
11991
+ }
11927
11992
  }
11928
11993
  return childNodes;
11929
11994
  };
@@ -12963,6 +13028,14 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
12963
13028
  break;
12964
13029
  }
12965
13030
  }
13031
+ else if (this.isChildObject()) {
13032
+ var children = 'child';
13033
+ var childData = getValue(children, obj[i]);
13034
+ newList = this.getChildNodeObject(childData, this.getChildMapper(mapper), id);
13035
+ if (newList !== undefined) {
13036
+ break;
13037
+ }
13038
+ }
12966
13039
  }
12967
13040
  return newList;
12968
13041
  };
@@ -13185,9 +13258,9 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
13185
13258
  var nodeData = [];
13186
13259
  var liArray = [];
13187
13260
  dragInstance = e.dragData.draggable;
13188
- for (var i_1 = 0; i_1 < dragInstance.ej2_instances.length; i_1++) {
13189
- if (dragInstance.ej2_instances[i_1] instanceof TreeView_1) {
13190
- dragObj = dragInstance.ej2_instances[i_1];
13261
+ for (var i_2 = 0; i_2 < dragInstance.ej2_instances.length; i_2++) {
13262
+ if (dragInstance.ej2_instances[i_2] instanceof TreeView_1) {
13263
+ dragObj = dragInstance.ej2_instances[i_2];
13191
13264
  break;
13192
13265
  }
13193
13266
  }
@@ -13211,19 +13284,19 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
13211
13284
  var sNodes = selectAll('.' + ACTIVE, dragObj.element);
13212
13285
  liArray = sNodes;
13213
13286
  if (e.target.offsetHeight <= 33 && offsetY > e.target.offsetHeight - 10 && offsetY > 6) {
13214
- for (var i_2 = sNodes.length - 1; i_2 >= 0; i_2--) {
13215
- if (dropLi.isSameNode(sNodes[i_2]) || this.isDescendant(sNodes[i_2], dropLi)) {
13287
+ for (var i_3 = sNodes.length - 1; i_3 >= 0; i_3--) {
13288
+ if (dropLi.isSameNode(sNodes[i_3]) || this.isDescendant(sNodes[i_3], dropLi)) {
13216
13289
  continue;
13217
13290
  }
13218
- this.appendNode(dropTarget, sNodes[i_2], dropLi, e, dragObj, offsetY);
13291
+ this.appendNode(dropTarget, sNodes[i_3], dropLi, e, dragObj, offsetY);
13219
13292
  }
13220
13293
  }
13221
13294
  else {
13222
- for (var i_3 = 0; i_3 < sNodes.length; i_3++) {
13223
- if (dropLi.isSameNode(sNodes[i_3]) || this.isDescendant(sNodes[i_3], dropLi)) {
13295
+ for (var i_4 = 0; i_4 < sNodes.length; i_4++) {
13296
+ if (dropLi.isSameNode(sNodes[i_4]) || this.isDescendant(sNodes[i_4], dropLi)) {
13224
13297
  continue;
13225
13298
  }
13226
- this.appendNode(dropTarget, sNodes[i_3], dropLi, e, dragObj, offsetY);
13299
+ this.appendNode(dropTarget, sNodes[i_4], dropLi, e, dragObj, offsetY);
13227
13300
  }
13228
13301
  }
13229
13302
  }
@@ -18677,6 +18750,7 @@ var Stepper = /** @__PURE__ @class */ (function (_super) {
18677
18750
  home: 'home',
18678
18751
  end: 'end',
18679
18752
  tab: 'tab',
18753
+ shiftTab: 'shift+tab',
18680
18754
  escape: 'escape'
18681
18755
  };
18682
18756
  this.tooltipOpen = false;
@@ -19274,7 +19348,7 @@ var Stepper = /** @__PURE__ @class */ (function (_super) {
19274
19348
  var itemElement = this.stepperItemElements[parseInt(i.toString(), 10)];
19275
19349
  var item = this.steps[parseInt(i.toString(), 10)];
19276
19350
  itemElement.classList.remove(SELECTED$2, INPROGRESS, COMPLETED, NOTSTARTED);
19277
- if (i === this.activeStep || this.activeStep === this.steps.length - 1) {
19351
+ if (i === this.activeStep) {
19278
19352
  itemElement.classList.add(SELECTED$2);
19279
19353
  }
19280
19354
  if (this.activeStep >= 0 && this.progressbar) {
@@ -19336,7 +19410,7 @@ var Stepper = /** @__PURE__ @class */ (function (_super) {
19336
19410
  }
19337
19411
  var prevOnChange_1 = this.isProtectedOnChange;
19338
19412
  this.isProtectedOnChange = true;
19339
- if (isUpdated != false) {
19413
+ if (isUpdated !== false) {
19340
19414
  if (i < this.activeStep || (this.steps.length - 1 === this.activeStep && item.status.toLowerCase() === "completed")) {
19341
19415
  item.status = StepStatus.Completed;
19342
19416
  }
@@ -19446,17 +19520,12 @@ var Stepper = /** @__PURE__ @class */ (function (_super) {
19446
19520
  switch (e.action) {
19447
19521
  case 'uparrow':
19448
19522
  case 'downarrow':
19449
- if (this.element.classList.contains(VERTICALSTEP)) {
19450
- this.handleNavigation(e.action === 'uparrow' ? false : true, e);
19451
- }
19452
- break;
19453
19523
  case 'leftarrow':
19454
19524
  case 'rightarrow':
19455
- if (this.element.classList.contains(HORIZSTEP)) {
19456
- this.handleNavigation(this.enableRtl ? e.action === 'leftarrow' : e.action === 'rightarrow', e);
19457
- }
19458
- break;
19459
19525
  case 'tab':
19526
+ case 'shiftTab':
19527
+ this.handleNavigation(this.enableRtl && this.element.classList.contains(HORIZSTEP) ? (e.action === 'leftarrow' || e.action === 'shiftTab' || e.action === 'uparrow') : (e.action === 'rightarrow' || e.action === 'tab' || e.action === 'downarrow'), e);
19528
+ break;
19460
19529
  case 'space':
19461
19530
  case 'enter':
19462
19531
  case 'escape':
@@ -19477,11 +19546,22 @@ var Stepper = /** @__PURE__ @class */ (function (_super) {
19477
19546
  }
19478
19547
  var stepItems = Array.prototype.slice.call(this.stepperItemList.children);
19479
19548
  var index = stepItems.indexOf(focusedEle);
19480
- if (e.action === 'tab' || e.action === 'escape') {
19549
+ if (e.action === 'tab' || e.action === 'shiftTab' || e.action === 'downarrow' || e.action === 'uparrow' || e.action === 'space' || e.action === 'home' || e.action === 'end') {
19550
+ if ((e.action === 'tab' && index === stepItems.length - 1) || (e.action === 'shiftTab' && index === 0)) {
19551
+ if (focusedEle.classList.contains(FOCUS$1)) {
19552
+ this.updateStepFocus();
19553
+ return;
19554
+ }
19555
+ }
19556
+ else {
19557
+ e.preventDefault();
19558
+ }
19559
+ }
19560
+ if (e.action === 'escape') {
19481
19561
  stepItems[parseInt(index.toString(), 10)].classList.remove(FOCUS$1);
19482
19562
  this.element.classList.remove('e-steps-focus');
19483
19563
  }
19484
- if (!(e.action === 'space' || e.action === 'enter' || e.action === 'tab')) {
19564
+ if (!(e.action === 'space' || e.action === 'enter')) {
19485
19565
  var prevIndex = index;
19486
19566
  index = isNextStep ? index + 1 : index - 1;
19487
19567
  while ((index >= 0 && index < stepItems.length) && stepItems[parseInt(index.toString(), 10)].classList.contains(DISABLED$2)) {
@@ -19504,14 +19584,21 @@ var Stepper = /** @__PURE__ @class */ (function (_super) {
19504
19584
  }
19505
19585
  }
19506
19586
  else if ((e.action === 'space' || e.action === 'enter')) {
19587
+ var isupdateFocus = false;
19507
19588
  if (this.linear) {
19508
19589
  var linearModeValue = this.activeStep - index;
19509
19590
  if (Math.abs(linearModeValue) === 1) {
19510
19591
  this.navigateToStep(index, null, null, true);
19592
+ isupdateFocus = true;
19511
19593
  }
19512
19594
  }
19513
19595
  else {
19514
19596
  this.navigateToStep(index, null, null, true);
19597
+ isupdateFocus = true;
19598
+ }
19599
+ if (isupdateFocus) {
19600
+ this.updateStepFocus();
19601
+ this.stepperItemElements[index].focus();
19515
19602
  }
19516
19603
  }
19517
19604
  };