@syncfusion/ej2-navigations 20.4.43 → 20.4.48

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 (34) hide show
  1. package/CHANGELOG.md +35 -0
  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 +72 -23
  6. package/dist/es6/ej2-navigations.es2015.js.map +1 -1
  7. package/dist/es6/ej2-navigations.es5.js +81 -32
  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 +11 -11
  13. package/src/common/index.d.ts +1 -1
  14. package/src/common/index.js +1 -1
  15. package/src/common/menu-base.js +11 -2
  16. package/src/menu/menu.js +1 -0
  17. package/src/sidebar/sidebar.js +1 -1
  18. package/src/tab/tab.js +8 -4
  19. package/src/toolbar/toolbar.js +15 -3
  20. package/src/treeview/treeview.d.ts +13 -0
  21. package/src/treeview/treeview.js +44 -21
  22. package/styles/bootstrap4.css +1 -1
  23. package/styles/bootstrap5-dark.css +1 -41
  24. package/styles/bootstrap5.css +1 -41
  25. package/styles/context-menu/_theme-mixin.scss +16 -12
  26. package/styles/context-menu/bootstrap5-dark.css +0 -24
  27. package/styles/context-menu/bootstrap5.css +0 -24
  28. package/styles/menu/bootstrap5-dark.css +0 -16
  29. package/styles/menu/bootstrap5.css +0 -16
  30. package/styles/treeview/_bootstrap4-definition.scss +1 -1
  31. package/styles/treeview/_bootstrap5-definition.scss +1 -1
  32. package/styles/treeview/bootstrap4.css +1 -1
  33. package/styles/treeview/bootstrap5-dark.css +1 -1
  34. package/styles/treeview/bootstrap5.css +1 -1
@@ -1672,11 +1672,15 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
1672
1672
  closedLi = trgtpopUp.querySelector('[id="' + trgtliId + '"]');
1673
1673
  trgtLi = (liElem_1 && trgtpopUp.querySelector('[id="' + liElem_1.id + '"]'));
1674
1674
  }
1675
+ else if (trgtpopUp) {
1676
+ closedLi = trgtpopUp.querySelector('.e-menu-item.e-selected');
1677
+ trgtLi = (liElem_1 && trgtpopUp.querySelector('[id="' + liElem_1.id + '"]'));
1678
+ }
1675
1679
  var submenus = liElem_1 && liElem_1.querySelectorAll('.e-menu-item');
1676
1680
  if (isOpen && _this.hamburgerMode && ulIndex && !(submenus.length)) {
1677
1681
  _this.afterCloseMenu(e);
1678
1682
  }
1679
- else if (isOpen && !_this.hamburgerMode && _this.navIdx.length && closedLi && !trgtLi && _this.keyType !== 'left') {
1683
+ else if (isOpen && !_this.hamburgerMode && closedLi && !trgtLi && _this.keyType !== 'left' && (_this.navIdx.length || !_this.isMenu && _this.navIdx.length === 0)) {
1680
1684
  var ele = (e && e.target.classList.contains('e-vscroll'))
1681
1685
  ? closest(e.target, '.e-menu-wrapper') : null;
1682
1686
  if (ele) {
@@ -1690,7 +1694,7 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
1690
1694
  }
1691
1695
  }
1692
1696
  else if (isOpen && !isIterated && !ulIndex && ((_this.hamburgerMode && _this.navIdx.length) ||
1693
- _this.navIdx.length === 1)) {
1697
+ _this.navIdx.length === 1 && liElem_1 && trgtpopUp !== liElem_1.parentElement)) {
1694
1698
  _this.closeMenu(null, e);
1695
1699
  }
1696
1700
  else if (isOpen && isNullOrUndefined(ulIndex) && _this.navIdx.length) {
@@ -2733,6 +2737,11 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
2733
2737
  navIdx.length = 0;
2734
2738
  }
2735
2739
  }
2740
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
2741
+ if (this_1.isReact && this_1.template) {
2742
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
2743
+ this_1.portals = [];
2744
+ }
2736
2745
  break;
2737
2746
  }
2738
2747
  }
@@ -3754,8 +3763,11 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
3754
3763
  if (popObj && closest(trgt, '.e-popup')) {
3755
3764
  var popEle = popObj.element;
3756
3765
  var popFrstEle = popEle.firstElementChild;
3757
- if ((value === 'previous' && popFrstEle === clst) || (value === 'next' && popEle.lastElementChild === clst)) {
3758
- return;
3766
+ if ((value === 'previous' && popFrstEle === clst)) {
3767
+ popEle.lastElementChild.firstChild.focus();
3768
+ }
3769
+ else if (value === 'next' && popEle.lastElementChild === clst) {
3770
+ popFrstEle.firstChild.focus();
3759
3771
  }
3760
3772
  else {
3761
3773
  this.eleFocus(clst, value);
@@ -3849,7 +3861,7 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
3849
3861
  }
3850
3862
  };
3851
3863
  Toolbar.prototype.eleContains = function (el) {
3852
- return el.classList.contains(CLS_SEPARATOR) || el.classList.contains(CLS_DISABLE$2) || el.getAttribute('disabled') || el.classList.contains(CLS_HIDDEN) || !isVisible(el);
3864
+ return el.classList.contains(CLS_SEPARATOR) || el.classList.contains(CLS_DISABLE$2) || el.getAttribute('disabled') || el.classList.contains(CLS_HIDDEN) || !isVisible(el) || !el.classList.contains(CLS_ITEM);
3853
3865
  };
3854
3866
  Toolbar.prototype.eleFocus = function (closest$$1, pos) {
3855
3867
  var sib = Object(closest$$1)[pos + 'ElementSibling'];
@@ -3888,6 +3900,15 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
3888
3900
  }
3889
3901
  }
3890
3902
  }
3903
+ else if (!isNullOrUndefined(closest$$1)) {
3904
+ var tbrItems = this.element.querySelectorAll('.' + CLS_ITEMS + ' .' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + ')' + ':not(.' + CLS_DISABLE$2 + ')' + ':not(.' + CLS_HIDDEN + ')');
3905
+ if (pos === 'next' && tbrItems) {
3906
+ this.elementFocus(tbrItems[0]);
3907
+ }
3908
+ else if (pos === 'previous' && tbrItems) {
3909
+ this.elementFocus(tbrItems[tbrItems.length - 1]);
3910
+ }
3911
+ }
3891
3912
  };
3892
3913
  Toolbar.prototype.clickHandler = function (e) {
3893
3914
  var _this = this;
@@ -7179,6 +7200,7 @@ var Menu = /** @__PURE__ @class */ (function (_super) {
7179
7200
  catch (e) {
7180
7201
  /* action on catch */
7181
7202
  }
7203
+ this.updateMenuItems(this.items);
7182
7204
  }
7183
7205
  else {
7184
7206
  this.updateMenuItems(this.items);
@@ -7803,6 +7825,14 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
7803
7825
  this.tbObj.createElement = this.createElement;
7804
7826
  this.tbObj.appendTo(this.hdrEle);
7805
7827
  attributes(this.hdrEle, { role: 'tablist' });
7828
+ if (!isNullOrUndefined(this.element.getAttribute('aria-label'))) {
7829
+ this.hdrEle.setAttribute('aria-label', this.element.getAttribute('aria-label'));
7830
+ this.element.removeAttribute('aria-label');
7831
+ }
7832
+ else if (!isNullOrUndefined(this.element.getAttribute('aria-labelledby'))) {
7833
+ this.hdrEle.setAttribute('aria-labelledby', this.element.getAttribute('aria-labelledby'));
7834
+ this.element.removeAttribute('aria-labelledby');
7835
+ }
7806
7836
  this.setCloseButton(this.showCloseButton);
7807
7837
  var toolbarHeader = this.tbObj.element.querySelector('.' + CLS_TB_ITEMS);
7808
7838
  if (!isNullOrUndefined(toolbarHeader)) {
@@ -8475,10 +8505,6 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
8475
8505
  return;
8476
8506
  }
8477
8507
  if (!this.isTemplate) {
8478
- var prev = this.tbItem[this.prevIndex];
8479
- if (!isNullOrUndefined(prev)) {
8480
- prev.firstElementChild.removeAttribute('aria-controls');
8481
- }
8482
8508
  attributes(trg.firstElementChild, { 'aria-controls': CLS_CONTENT$1 + this.tabId + '_' + value });
8483
8509
  }
8484
8510
  var id = trg.id;
@@ -9978,6 +10004,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
9978
10004
  // Specifies whether the node is dropped or not
9979
10005
  _this.isNodeDropped = false;
9980
10006
  _this.isInteracted = false;
10007
+ _this.isRightClick = false;
9981
10008
  _this.mouseDownStatus = false;
9982
10009
  return _this;
9983
10010
  }
@@ -11286,6 +11313,9 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
11286
11313
  }
11287
11314
  }
11288
11315
  }
11316
+ if (event.originalEvent.which === 3) {
11317
+ this.isRightClick = true;
11318
+ }
11289
11319
  this.triggerClickEvent(event.originalEvent, li);
11290
11320
  }
11291
11321
  };
@@ -11723,7 +11753,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
11723
11753
  if (this.isLoaded) {
11724
11754
  eventArgs = this.getSelectEvent(li, 'select', e);
11725
11755
  this.trigger('nodeSelecting', eventArgs, function (observedArgs) {
11726
- if (!observedArgs.cancel && !observedArgs.node.classList.contains(PREVENTSELECT)) {
11756
+ if ((!observedArgs.cancel) && !observedArgs.node.classList.contains(PREVENTSELECT)) {
11727
11757
  _this.nodeSelectAction(li, e, observedArgs, multiSelect);
11728
11758
  }
11729
11759
  });
@@ -11763,6 +11793,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
11763
11793
  eventArgs.nodeData = this.getNodeData(li);
11764
11794
  this.trigger('nodeSelected', eventArgs);
11765
11795
  }
11796
+ this.isRightClick = false;
11766
11797
  };
11767
11798
  TreeView.prototype.unselectNode = function (li, e) {
11768
11799
  var _this = this;
@@ -12590,7 +12621,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
12590
12621
  newText = observedArgs.cancel ? observedArgs.oldText : observedArgs.newText;
12591
12622
  _this.updateText(liEle, txtEle, newText, isInput);
12592
12623
  if (observedArgs.oldText !== newText) {
12593
- _this.triggerEvent();
12624
+ _this.triggerEvent('nodeEdited', [_this.getNode(liEle)]);
12594
12625
  }
12595
12626
  });
12596
12627
  };
@@ -12904,10 +12935,12 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
12904
12935
  var level;
12905
12936
  var drop = false;
12906
12937
  var dragInstance;
12938
+ var nodeData = [];
12939
+ var liArray = [];
12907
12940
  dragInstance = e.dragData.draggable;
12908
- for (var i = 0; i < dragInstance.ej2_instances.length; i++) {
12909
- if (dragInstance.ej2_instances[i] instanceof TreeView_1) {
12910
- dragObj = dragInstance.ej2_instances[i];
12941
+ for (var i_1 = 0; i_1 < dragInstance.ej2_instances.length; i_1++) {
12942
+ if (dragInstance.ej2_instances[i_1] instanceof TreeView_1) {
12943
+ dragObj = dragInstance.ej2_instances[i_1];
12911
12944
  break;
12912
12945
  }
12913
12946
  }
@@ -12915,6 +12948,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
12915
12948
  var dragTarget = dragObj.dragTarget;
12916
12949
  var dragLi = (closest(dragTarget, '.' + LISTITEM));
12917
12950
  var dropLi = (closest(dropTarget, '.' + LISTITEM));
12951
+ liArray.push(dragLi);
12918
12952
  if (dropLi == null && dropTarget.classList.contains(ROOT)) {
12919
12953
  dropLi = dropTarget.firstElementChild;
12920
12954
  }
@@ -12928,20 +12962,21 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
12928
12962
  }
12929
12963
  if (dragObj.allowMultiSelection && dragLi.classList.contains(ACTIVE)) {
12930
12964
  var sNodes = selectAll('.' + ACTIVE, dragObj.element);
12965
+ liArray = sNodes;
12931
12966
  if (e.target.offsetHeight <= 33 && offsetY > e.target.offsetHeight - 10 && offsetY > 6) {
12932
- for (var i = sNodes.length - 1; i >= 0; i--) {
12933
- if (dropLi.isSameNode(sNodes[i]) || this.isDescendant(sNodes[i], dropLi)) {
12967
+ for (var i_2 = sNodes.length - 1; i_2 >= 0; i_2--) {
12968
+ if (dropLi.isSameNode(sNodes[i_2]) || this.isDescendant(sNodes[i_2], dropLi)) {
12934
12969
  continue;
12935
12970
  }
12936
- this.appendNode(dropTarget, sNodes[i], dropLi, e, dragObj, offsetY);
12971
+ this.appendNode(dropTarget, sNodes[i_2], dropLi, e, dragObj, offsetY);
12937
12972
  }
12938
12973
  }
12939
12974
  else {
12940
- for (var i = 0; i < sNodes.length; i++) {
12941
- if (dropLi.isSameNode(sNodes[i]) || this.isDescendant(sNodes[i], dropLi)) {
12975
+ for (var i_3 = 0; i_3 < sNodes.length; i_3++) {
12976
+ if (dropLi.isSameNode(sNodes[i_3]) || this.isDescendant(sNodes[i_3], dropLi)) {
12942
12977
  continue;
12943
12978
  }
12944
- this.appendNode(dropTarget, sNodes[i], dropLi, e, dragObj, offsetY);
12979
+ this.appendNode(dropTarget, sNodes[i_3], dropLi, e, dragObj, offsetY);
12945
12980
  }
12946
12981
  }
12947
12982
  }
@@ -12954,13 +12989,16 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
12954
12989
  if (this.fields.dataSource instanceof DataManager === false) {
12955
12990
  this.preventExpand = false;
12956
12991
  }
12992
+ for (var i = 0; i < liArray.length; i++) {
12993
+ nodeData.push(this.getNode(liArray[i]));
12994
+ }
12957
12995
  this.trigger('nodeDropped', this.getDragEvent(e.event, dragObj, dropTarget, e.target, e.dragData.draggedElement, null, level, drop));
12958
12996
  if (dragObj.element.id !== this.element.id) {
12959
- dragObj.triggerEvent();
12997
+ dragObj.triggerEvent('nodeDropped', nodeData);
12960
12998
  this.isNodeDropped = true;
12961
12999
  this.fields.dataSource = this.treeData;
12962
13000
  }
12963
- this.triggerEvent();
13001
+ this.triggerEvent('nodeDropped', nodeData);
12964
13002
  };
12965
13003
  TreeView.prototype.appendNode = function (dropTarget, dragLi, dropLi, e, dragObj, offsetY) {
12966
13004
  var checkWrapper = closest(dropTarget, '.' + CHECKBOXWRAP);
@@ -13782,9 +13820,16 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
13782
13820
  }
13783
13821
  return removedData;
13784
13822
  };
13785
- TreeView.prototype.triggerEvent = function () {
13823
+ TreeView.prototype.triggerEvent = function (action, node) {
13786
13824
  this.renderReactTemplates();
13787
- var eventArgs = { data: this.treeData };
13825
+ if (action === 'addNodes') {
13826
+ var nodeData = [];
13827
+ for (var i = 0; i < node.length; i++) {
13828
+ nodeData.push(this.getNode(this.getElement(isNullOrUndefined(node[i][this.fields.id]) ? getValue(this.fields.id, node[i]).toString() : null)));
13829
+ }
13830
+ node = nodeData;
13831
+ }
13832
+ var eventArgs = { data: this.treeData, action: action, nodeData: node };
13788
13833
  this.trigger('dataSourceChanged', eventArgs);
13789
13834
  };
13790
13835
  TreeView.prototype.wireInputEvents = function (inpEle) {
@@ -14162,8 +14207,10 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
14162
14207
  }
14163
14208
  };
14164
14209
  TreeView.prototype.deleteSuccess = function (nodes) {
14210
+ var nodeData = [];
14165
14211
  for (var i = 0, len = nodes.length; i < len; i++) {
14166
14212
  var liEle = this.getElement(nodes[i]);
14213
+ nodeData.push(this.getNode(liEle));
14167
14214
  if (isNullOrUndefined(liEle)) {
14168
14215
  continue;
14169
14216
  }
@@ -14173,7 +14220,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
14173
14220
  if (this.dataType === 1) {
14174
14221
  this.groupedData = this.getGroupedData(this.treeData, this.fields.parentID);
14175
14222
  }
14176
- this.triggerEvent();
14223
+ this.triggerEvent('removeNode', nodeData);
14177
14224
  };
14178
14225
  TreeView.prototype.editSucess = function (target, newText, prevent) {
14179
14226
  var liEle = this.getElement(target);
@@ -14189,12 +14236,12 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
14189
14236
  proxy.renderChildNodes(dropLi, null, function () {
14190
14237
  dropUl = dropLi.querySelector('.' + PARENTITEM);
14191
14238
  proxy.addGivenNodes(nodes, dropLi, index, true, dropUl);
14192
- proxy.triggerEvent();
14239
+ proxy.triggerEvent('addNodes', nodes);
14193
14240
  });
14194
14241
  }
14195
14242
  else {
14196
14243
  this.addGivenNodes(nodes, dropLi, index, true);
14197
- this.triggerEvent();
14244
+ this.triggerEvent('addNodes', nodes);
14198
14245
  }
14199
14246
  };
14200
14247
  TreeView.prototype.dmFailure = function (e, target, prevent) {
@@ -14405,7 +14452,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
14405
14452
  }
14406
14453
  if ((this.fields.dataSource instanceof DataManager === false)) {
14407
14454
  this.preventExpand = false;
14408
- this.triggerEvent();
14455
+ this.triggerEvent('addNodes', nodes);
14409
14456
  }
14410
14457
  };
14411
14458
  /**
@@ -14557,11 +14604,13 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
14557
14604
  */
14558
14605
  TreeView.prototype.moveNodes = function (sourceNodes, target, index, preventTargetExpand) {
14559
14606
  var dropLi = this.getElement(target);
14607
+ var nodeData = [];
14560
14608
  if (isNullOrUndefined(dropLi)) {
14561
14609
  return;
14562
14610
  }
14563
14611
  for (var i = 0; i < sourceNodes.length; i++) {
14564
14612
  var dragLi = this.getElement(sourceNodes[i]);
14613
+ nodeData.push(this.getNode(dragLi));
14565
14614
  if (isNullOrUndefined(dragLi) || dropLi.isSameNode(dragLi) || this.isDescendant(dragLi, dropLi)) {
14566
14615
  continue;
14567
14616
  }
@@ -14571,7 +14620,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
14571
14620
  if (this.fields.dataSource instanceof DataManager === false) {
14572
14621
  this.preventExpand = false;
14573
14622
  }
14574
- this.triggerEvent();
14623
+ this.triggerEvent('moveNodes', nodeData);
14575
14624
  };
14576
14625
  /**
14577
14626
  * Refreshes a particular node of the TreeView.
@@ -14675,7 +14724,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
14675
14724
  addClass([liEle], ACTIVE);
14676
14725
  }
14677
14726
  this.isRefreshed = false;
14678
- this.triggerEvent();
14727
+ this.triggerEvent('refreshNode', [this.getNode(liEle)]);
14679
14728
  };
14680
14729
  /**
14681
14730
  * Removes the collection of TreeView nodes by passing the array of node details as argument to this method.
@@ -15071,7 +15120,7 @@ var Sidebar = /** @__PURE__ @class */ (function (_super) {
15071
15120
  };
15072
15121
  Sidebar.prototype.destroyBackDrop = function () {
15073
15122
  var sibling = document.querySelector('.e-main-content') || this.targetEle;
15074
- if (this.target && this.showBackdrop && sibling) {
15123
+ if (this.target && this.showBackdrop && sibling && !isNullOrUndefined(this.defaultBackdropDiv)) {
15075
15124
  removeClass([this.defaultBackdropDiv], DEFAULTBACKDROP);
15076
15125
  }
15077
15126
  else if (this.showBackdrop && this.modal) {
@@ -17661,5 +17710,5 @@ var AppBar = /** @__PURE__ @class */ (function (_super) {
17661
17710
  * Navigation all modules
17662
17711
  */
17663
17712
 
17664
- export { MenuAnimationSettings, MenuItem, HScroll, VScroll, addScrolling, destroyScroll, Item, Toolbar, AccordionActionSettings, AccordionAnimationSettings, AccordionItem, Accordion, ContextMenu, Menu, TabActionSettings, TabAnimationSettings, Header, TabItem, Tab, FieldsSettings, ActionSettings, NodeAnimationSettings, TreeView, Sidebar, BreadcrumbItem, Breadcrumb, CarouselItem, Carousel, AppBar };
17713
+ export { MenuAnimationSettings, MenuItem, FieldSettings, HScroll, VScroll, addScrolling, destroyScroll, Item, Toolbar, AccordionActionSettings, AccordionAnimationSettings, AccordionItem, Accordion, ContextMenu, Menu, TabActionSettings, TabAnimationSettings, Header, TabItem, Tab, FieldsSettings, ActionSettings, NodeAnimationSettings, TreeView, Sidebar, BreadcrumbItem, Breadcrumb, CarouselItem, Carousel, AppBar };
17665
17714
  //# sourceMappingURL=ej2-navigations.es5.js.map