@syncfusion/ej2-navigations 28.2.6 → 28.2.12

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 (46) 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 +63 -23
  6. package/dist/es6/ej2-navigations.es2015.js.map +1 -1
  7. package/dist/es6/ej2-navigations.es5.js +63 -23
  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/common/menu-base.js +38 -5
  14. package/src/treeview/treeview.js +25 -18
  15. package/styles/bootstrap4-lite.css +4 -4
  16. package/styles/bootstrap4.css +4 -4
  17. package/styles/bootstrap5-dark-lite.css +10 -10
  18. package/styles/bootstrap5-dark.css +10 -10
  19. package/styles/bootstrap5-lite.css +10 -10
  20. package/styles/bootstrap5.3-lite.css +12 -12
  21. package/styles/bootstrap5.3.css +12 -12
  22. package/styles/bootstrap5.css +10 -10
  23. package/styles/fluent2-lite.css +7 -26
  24. package/styles/fluent2.css +7 -26
  25. package/styles/material3-dark-lite.css +10 -10
  26. package/styles/material3-dark.css +10 -10
  27. package/styles/material3-lite.css +10 -10
  28. package/styles/material3.css +10 -10
  29. package/styles/tab/_bootstrap4-definition.scss +2 -2
  30. package/styles/tab/_bootstrap5-definition.scss +3 -3
  31. package/styles/tab/_bootstrap5.3-definition.scss +3 -3
  32. package/styles/tab/_material3-definition.scss +3 -3
  33. package/styles/tab/_tailwind3-definition.scss +3 -3
  34. package/styles/tab/bootstrap4.css +4 -4
  35. package/styles/tab/bootstrap5-dark.css +10 -10
  36. package/styles/tab/bootstrap5.3.css +10 -10
  37. package/styles/tab/bootstrap5.css +10 -10
  38. package/styles/tab/material3-dark.css +10 -10
  39. package/styles/tab/material3.css +10 -10
  40. package/styles/tab/tailwind3.css +10 -10
  41. package/styles/tailwind3-lite.css +17 -36
  42. package/styles/tailwind3.css +17 -36
  43. package/styles/toolbar/_theme.scss +25 -64
  44. package/styles/toolbar/bootstrap5.3.css +2 -2
  45. package/styles/toolbar/fluent2.css +7 -26
  46. package/styles/toolbar/tailwind3.css +7 -26
@@ -1831,6 +1831,8 @@ let MenuBase = class MenuBase extends Component {
1831
1831
  this.popupWrapper = this.createElement('div', {
1832
1832
  className: 'e-' + this.getModuleName() + '-wrapper ' + POPUP, id: li.id + '-ej2menu-' + elemId + '-popup'
1833
1833
  });
1834
+ this.popupWrapper.setAttribute('role', 'navigation');
1835
+ this.popupWrapper.setAttribute('aria-label', item.text + '-menu-popup');
1834
1836
  if (this.hamburgerMode) {
1835
1837
  top = li.offsetHeight;
1836
1838
  li.appendChild(this.popupWrapper);
@@ -2304,6 +2306,9 @@ let MenuBase = class MenuBase extends Component {
2304
2306
  if (!args.curData.htmlAttributes.role) {
2305
2307
  args.item.setAttribute('role', 'separator');
2306
2308
  }
2309
+ if (!args.curData.htmlAttributes.ariaLabel) {
2310
+ args.item.setAttribute('aria-label', 'separator');
2311
+ }
2307
2312
  }
2308
2313
  if (showIcon && !args.curData[args.fields.iconCss]
2309
2314
  && !args.curData[this.getField('separator', level)]) {
@@ -2886,7 +2891,13 @@ let MenuBase = class MenuBase extends Component {
2886
2891
  item.splice(idx, 1);
2887
2892
  const uls = this.getWrapper().children;
2888
2893
  if (navIdx.length < uls.length) {
2889
- detach(uls[navIdx.length].children[idx]);
2894
+ if (this.enableScrolling && !uls[navIdx.length].classList.contains('e-menu-parent')) {
2895
+ const ul = uls[navIdx.length].querySelector('.e-menu-parent');
2896
+ detach(ul.children[idx]);
2897
+ }
2898
+ else {
2899
+ detach(uls[navIdx.length].children[idx]);
2900
+ }
2890
2901
  }
2891
2902
  }
2892
2903
  /**
@@ -3182,7 +3193,13 @@ let MenuBase = class MenuBase extends Component {
3182
3193
  ul.children[idx + 1].classList.add(disabled);
3183
3194
  }
3184
3195
  else {
3185
- ul.children[idx].classList.add(disabled);
3196
+ if (this.enableScrolling && !ul.classList.contains('e-menu-parent')) {
3197
+ const mainUl = ul.querySelector('.e-menu-parent');
3198
+ mainUl.children[idx].classList.add(disabled);
3199
+ }
3200
+ else {
3201
+ ul.children[idx].classList.add(disabled);
3202
+ }
3186
3203
  }
3187
3204
  }
3188
3205
  }
@@ -3220,6 +3237,9 @@ let MenuBase = class MenuBase extends Component {
3220
3237
  ul = this.getUlByNavIdx(navIdx.length);
3221
3238
  item = this.getItems(navIdx);
3222
3239
  if (ul) {
3240
+ if (this.enableScrolling && !ul.classList.contains('e-menu-parent')) {
3241
+ ul = ul.querySelector('.e-menu-parent');
3242
+ }
3223
3243
  const validUl = isUniqueId ? ul.children[index].id : item[index].text.toString();
3224
3244
  if (ishide && validUl === items[i]) {
3225
3245
  ul.children[index].classList.add(HIDE);
@@ -3278,6 +3298,7 @@ let MenuBase = class MenuBase extends Component {
3278
3298
  let navIdx;
3279
3299
  let iitems;
3280
3300
  let menuitem;
3301
+ let parentUl;
3281
3302
  for (let i = 0; i < items.length; i++) {
3282
3303
  navIdx = this.getIndex(text, isUniqueId);
3283
3304
  idx = navIdx.pop();
@@ -3290,11 +3311,23 @@ let MenuBase = class MenuBase extends Component {
3290
3311
  if (!isNullOrUndefined(idx) && navIdx.length < uls.length) {
3291
3312
  idx = isAfter ? idx + 1 : idx;
3292
3313
  li = this.createItems(iitems).children[idx];
3293
- const ul = this.isMenu ? select('.e-menu-parent', uls[navIdx.length]) : uls[navIdx.length];
3314
+ let ul = parentUl = this.isMenu ? select('.e-menu-parent', uls[navIdx.length]) : uls[navIdx.length];
3315
+ if (this.enableScrolling && !ul.classList.contains('e-menu-parent')) {
3316
+ ul = ul.querySelector('.e-menu-parent');
3317
+ }
3294
3318
  ul.insertBefore(li, ul.children[idx]);
3295
3319
  if (i === items.length - 1 && !this.isMenu && ul.style.display === 'block') {
3296
- this.setPosition(null, ul, parseFloat(ul.style.top), parseFloat(ul.style.left));
3297
- ul.style.display = 'block';
3320
+ if (this.enableScrolling) {
3321
+ this.setPosition(null, ul, parseFloat(parentUl.style.top), parseFloat(parentUl.style.left));
3322
+ const scrollElem = closest(ul, '.e-vscroll');
3323
+ if (scrollElem) {
3324
+ scrollElem.style.display = 'block';
3325
+ }
3326
+ }
3327
+ else {
3328
+ this.setPosition(null, ul, parseFloat(ul.style.top), parseFloat(ul.style.left));
3329
+ ul.style.display = 'block';
3330
+ }
3298
3331
  }
3299
3332
  }
3300
3333
  }
@@ -10995,8 +11028,8 @@ let TreeView = TreeView_1 = class TreeView extends Component {
10995
11028
  const oldCheckedNodes = new DataManager(this.OldCheckedData).executeLocal(new Query().where('parentID', 'equal', dataUid, true));
10996
11029
  checkedCount = oldCheckedNodes.length;
10997
11030
  const parentNode = new DataManager(this.OldCheckedData).executeLocal(new Query().where('hasChildren', 'equal', true, true));
10998
- if (parentNode.length > 0
10999
- && (this.OldCheckedData.some((oldNode) => oldNode.id === dataUid) && childNodeChecked)) {
11031
+ if (parentNode.length > 0 && childNodeChecked && ((this.OldCheckedData.some((oldNode) => oldNode.id === dataUid)) ||
11032
+ this.parentNodeCheck.indexOf(dataUid) !== -1)) {
11000
11033
  checkedCount = parentNode.length;
11001
11034
  parentNodeChecked = true;
11002
11035
  }
@@ -11018,7 +11051,8 @@ let TreeView = TreeView_1 = class TreeView extends Component {
11018
11051
  if (count === 0 && checkedCount === 0) {
11019
11052
  return;
11020
11053
  }
11021
- else if (count === checkedCount || ((parentNodeChecked && count > 0) && (oldChildCount.length === matchedChildNodes.length)
11054
+ else if (count === checkedCount || ((parentNodeChecked && count > 0) && ((oldChildCount.length === matchedChildNodes.length)
11055
+ || (oldChildCount.length !== matchedChildNodes.length))
11022
11056
  && (oldChildCount.length !== 0 && matchedChildNodes.length !== 0) && rootNodeChecked
11023
11057
  && (this.autoCheck && this.showCheckBox))) {
11024
11058
  this.changeState(checkBoxEle, 'check', null, true, true);
@@ -11043,25 +11077,31 @@ let TreeView = TreeView_1 = class TreeView extends Component {
11043
11077
  const childKey = typeof this.fields.child === 'string' ? this.fields.child : null;
11044
11078
  const dataId = this.fields.id;
11045
11079
  const parentKey = this.fields.parentID;
11080
+ const matchesDataUid = (childNode) => {
11081
+ if (!isNullOrUndefined(childKey) && childKey in childNode && Array.isArray(childNode[childKey])) {
11082
+ const matchNode = childNode[dataId];
11083
+ if (!isNullOrUndefined(matchNode)) {
11084
+ return matchNode.toString() === dataUid;
11085
+ }
11086
+ }
11087
+ else {
11088
+ const childNodePid = childNode[parentKey];
11089
+ if (!isNullOrUndefined(childNodePid)) {
11090
+ return childNodePid.toString() === dataUid;
11091
+ }
11092
+ }
11093
+ return false;
11094
+ };
11046
11095
  return this.checkedNodes
11047
11096
  .map((checkedNodeId) => {
11048
- return new DataManager(this.DDTTreeData)
11049
- .executeLocal(new Query().where('id', 'equal', checkedNodeId, true))[0];
11097
+ return this.getNodeObject(checkedNodeId);
11050
11098
  })
11051
11099
  .filter((childNode) => {
11052
- if (childNode && typeof childNode === 'object' && (parentKey in childNode || childKey in childNode)) {
11053
- if (!isNullOrUndefined(childKey) && childKey in childNode && Array.isArray(childNode[childKey])) {
11054
- const matchNode = childNode[dataId];
11055
- if (!isNullOrUndefined(matchNode)) {
11056
- return matchNode.toString() === dataUid;
11057
- }
11058
- }
11059
- else {
11060
- const childNodePid = childNode[parentKey];
11061
- if (!isNullOrUndefined(childNodePid)) {
11062
- return childNodePid.toString() === dataUid;
11063
- }
11064
- }
11100
+ if (childNode && typeof childNode === 'object' && (childKey in childNode)) {
11101
+ return matchesDataUid(childNode);
11102
+ }
11103
+ else if (this.dataType !== 2 && typeof childNode === 'object' && (parentKey in childNode || childKey in childNode)) {
11104
+ return matchesDataUid(childNode);
11065
11105
  }
11066
11106
  return false;
11067
11107
  });