@syncfusion/ej2-navigations 20.4.44 → 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 +27 -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 +66 -21
  6. package/dist/es6/ej2-navigations.es2015.js.map +1 -1
  7. package/dist/es6/ej2-navigations.es5.js +75 -30
  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 +5 -0
  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
@@ -2737,6 +2737,11 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
2737
2737
  navIdx.length = 0;
2738
2738
  }
2739
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
+ }
2740
2745
  break;
2741
2746
  }
2742
2747
  }
@@ -3758,8 +3763,11 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
3758
3763
  if (popObj && closest(trgt, '.e-popup')) {
3759
3764
  var popEle = popObj.element;
3760
3765
  var popFrstEle = popEle.firstElementChild;
3761
- if ((value === 'previous' && popFrstEle === clst) || (value === 'next' && popEle.lastElementChild === clst)) {
3762
- 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();
3763
3771
  }
3764
3772
  else {
3765
3773
  this.eleFocus(clst, value);
@@ -3853,7 +3861,7 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
3853
3861
  }
3854
3862
  };
3855
3863
  Toolbar.prototype.eleContains = function (el) {
3856
- 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);
3857
3865
  };
3858
3866
  Toolbar.prototype.eleFocus = function (closest$$1, pos) {
3859
3867
  var sib = Object(closest$$1)[pos + 'ElementSibling'];
@@ -3892,6 +3900,15 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
3892
3900
  }
3893
3901
  }
3894
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
+ }
3895
3912
  };
3896
3913
  Toolbar.prototype.clickHandler = function (e) {
3897
3914
  var _this = this;
@@ -7183,6 +7200,7 @@ var Menu = /** @__PURE__ @class */ (function (_super) {
7183
7200
  catch (e) {
7184
7201
  /* action on catch */
7185
7202
  }
7203
+ this.updateMenuItems(this.items);
7186
7204
  }
7187
7205
  else {
7188
7206
  this.updateMenuItems(this.items);
@@ -7807,6 +7825,14 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
7807
7825
  this.tbObj.createElement = this.createElement;
7808
7826
  this.tbObj.appendTo(this.hdrEle);
7809
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
+ }
7810
7836
  this.setCloseButton(this.showCloseButton);
7811
7837
  var toolbarHeader = this.tbObj.element.querySelector('.' + CLS_TB_ITEMS);
7812
7838
  if (!isNullOrUndefined(toolbarHeader)) {
@@ -8479,10 +8505,6 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
8479
8505
  return;
8480
8506
  }
8481
8507
  if (!this.isTemplate) {
8482
- var prev = this.tbItem[this.prevIndex];
8483
- if (!isNullOrUndefined(prev)) {
8484
- prev.firstElementChild.removeAttribute('aria-controls');
8485
- }
8486
8508
  attributes(trg.firstElementChild, { 'aria-controls': CLS_CONTENT$1 + this.tabId + '_' + value });
8487
8509
  }
8488
8510
  var id = trg.id;
@@ -9982,6 +10004,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
9982
10004
  // Specifies whether the node is dropped or not
9983
10005
  _this.isNodeDropped = false;
9984
10006
  _this.isInteracted = false;
10007
+ _this.isRightClick = false;
9985
10008
  _this.mouseDownStatus = false;
9986
10009
  return _this;
9987
10010
  }
@@ -11290,6 +11313,9 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
11290
11313
  }
11291
11314
  }
11292
11315
  }
11316
+ if (event.originalEvent.which === 3) {
11317
+ this.isRightClick = true;
11318
+ }
11293
11319
  this.triggerClickEvent(event.originalEvent, li);
11294
11320
  }
11295
11321
  };
@@ -11727,7 +11753,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
11727
11753
  if (this.isLoaded) {
11728
11754
  eventArgs = this.getSelectEvent(li, 'select', e);
11729
11755
  this.trigger('nodeSelecting', eventArgs, function (observedArgs) {
11730
- if (!observedArgs.cancel && !observedArgs.node.classList.contains(PREVENTSELECT)) {
11756
+ if ((!observedArgs.cancel) && !observedArgs.node.classList.contains(PREVENTSELECT)) {
11731
11757
  _this.nodeSelectAction(li, e, observedArgs, multiSelect);
11732
11758
  }
11733
11759
  });
@@ -11767,6 +11793,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
11767
11793
  eventArgs.nodeData = this.getNodeData(li);
11768
11794
  this.trigger('nodeSelected', eventArgs);
11769
11795
  }
11796
+ this.isRightClick = false;
11770
11797
  };
11771
11798
  TreeView.prototype.unselectNode = function (li, e) {
11772
11799
  var _this = this;
@@ -12594,7 +12621,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
12594
12621
  newText = observedArgs.cancel ? observedArgs.oldText : observedArgs.newText;
12595
12622
  _this.updateText(liEle, txtEle, newText, isInput);
12596
12623
  if (observedArgs.oldText !== newText) {
12597
- _this.triggerEvent();
12624
+ _this.triggerEvent('nodeEdited', [_this.getNode(liEle)]);
12598
12625
  }
12599
12626
  });
12600
12627
  };
@@ -12908,10 +12935,12 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
12908
12935
  var level;
12909
12936
  var drop = false;
12910
12937
  var dragInstance;
12938
+ var nodeData = [];
12939
+ var liArray = [];
12911
12940
  dragInstance = e.dragData.draggable;
12912
- for (var i = 0; i < dragInstance.ej2_instances.length; i++) {
12913
- if (dragInstance.ej2_instances[i] instanceof TreeView_1) {
12914
- 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];
12915
12944
  break;
12916
12945
  }
12917
12946
  }
@@ -12919,6 +12948,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
12919
12948
  var dragTarget = dragObj.dragTarget;
12920
12949
  var dragLi = (closest(dragTarget, '.' + LISTITEM));
12921
12950
  var dropLi = (closest(dropTarget, '.' + LISTITEM));
12951
+ liArray.push(dragLi);
12922
12952
  if (dropLi == null && dropTarget.classList.contains(ROOT)) {
12923
12953
  dropLi = dropTarget.firstElementChild;
12924
12954
  }
@@ -12932,20 +12962,21 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
12932
12962
  }
12933
12963
  if (dragObj.allowMultiSelection && dragLi.classList.contains(ACTIVE)) {
12934
12964
  var sNodes = selectAll('.' + ACTIVE, dragObj.element);
12965
+ liArray = sNodes;
12935
12966
  if (e.target.offsetHeight <= 33 && offsetY > e.target.offsetHeight - 10 && offsetY > 6) {
12936
- for (var i = sNodes.length - 1; i >= 0; i--) {
12937
- 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)) {
12938
12969
  continue;
12939
12970
  }
12940
- this.appendNode(dropTarget, sNodes[i], dropLi, e, dragObj, offsetY);
12971
+ this.appendNode(dropTarget, sNodes[i_2], dropLi, e, dragObj, offsetY);
12941
12972
  }
12942
12973
  }
12943
12974
  else {
12944
- for (var i = 0; i < sNodes.length; i++) {
12945
- 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)) {
12946
12977
  continue;
12947
12978
  }
12948
- this.appendNode(dropTarget, sNodes[i], dropLi, e, dragObj, offsetY);
12979
+ this.appendNode(dropTarget, sNodes[i_3], dropLi, e, dragObj, offsetY);
12949
12980
  }
12950
12981
  }
12951
12982
  }
@@ -12958,13 +12989,16 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
12958
12989
  if (this.fields.dataSource instanceof DataManager === false) {
12959
12990
  this.preventExpand = false;
12960
12991
  }
12992
+ for (var i = 0; i < liArray.length; i++) {
12993
+ nodeData.push(this.getNode(liArray[i]));
12994
+ }
12961
12995
  this.trigger('nodeDropped', this.getDragEvent(e.event, dragObj, dropTarget, e.target, e.dragData.draggedElement, null, level, drop));
12962
12996
  if (dragObj.element.id !== this.element.id) {
12963
- dragObj.triggerEvent();
12997
+ dragObj.triggerEvent('nodeDropped', nodeData);
12964
12998
  this.isNodeDropped = true;
12965
12999
  this.fields.dataSource = this.treeData;
12966
13000
  }
12967
- this.triggerEvent();
13001
+ this.triggerEvent('nodeDropped', nodeData);
12968
13002
  };
12969
13003
  TreeView.prototype.appendNode = function (dropTarget, dragLi, dropLi, e, dragObj, offsetY) {
12970
13004
  var checkWrapper = closest(dropTarget, '.' + CHECKBOXWRAP);
@@ -13786,9 +13820,16 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
13786
13820
  }
13787
13821
  return removedData;
13788
13822
  };
13789
- TreeView.prototype.triggerEvent = function () {
13823
+ TreeView.prototype.triggerEvent = function (action, node) {
13790
13824
  this.renderReactTemplates();
13791
- 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 };
13792
13833
  this.trigger('dataSourceChanged', eventArgs);
13793
13834
  };
13794
13835
  TreeView.prototype.wireInputEvents = function (inpEle) {
@@ -14166,8 +14207,10 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
14166
14207
  }
14167
14208
  };
14168
14209
  TreeView.prototype.deleteSuccess = function (nodes) {
14210
+ var nodeData = [];
14169
14211
  for (var i = 0, len = nodes.length; i < len; i++) {
14170
14212
  var liEle = this.getElement(nodes[i]);
14213
+ nodeData.push(this.getNode(liEle));
14171
14214
  if (isNullOrUndefined(liEle)) {
14172
14215
  continue;
14173
14216
  }
@@ -14177,7 +14220,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
14177
14220
  if (this.dataType === 1) {
14178
14221
  this.groupedData = this.getGroupedData(this.treeData, this.fields.parentID);
14179
14222
  }
14180
- this.triggerEvent();
14223
+ this.triggerEvent('removeNode', nodeData);
14181
14224
  };
14182
14225
  TreeView.prototype.editSucess = function (target, newText, prevent) {
14183
14226
  var liEle = this.getElement(target);
@@ -14193,12 +14236,12 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
14193
14236
  proxy.renderChildNodes(dropLi, null, function () {
14194
14237
  dropUl = dropLi.querySelector('.' + PARENTITEM);
14195
14238
  proxy.addGivenNodes(nodes, dropLi, index, true, dropUl);
14196
- proxy.triggerEvent();
14239
+ proxy.triggerEvent('addNodes', nodes);
14197
14240
  });
14198
14241
  }
14199
14242
  else {
14200
14243
  this.addGivenNodes(nodes, dropLi, index, true);
14201
- this.triggerEvent();
14244
+ this.triggerEvent('addNodes', nodes);
14202
14245
  }
14203
14246
  };
14204
14247
  TreeView.prototype.dmFailure = function (e, target, prevent) {
@@ -14409,7 +14452,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
14409
14452
  }
14410
14453
  if ((this.fields.dataSource instanceof DataManager === false)) {
14411
14454
  this.preventExpand = false;
14412
- this.triggerEvent();
14455
+ this.triggerEvent('addNodes', nodes);
14413
14456
  }
14414
14457
  };
14415
14458
  /**
@@ -14561,11 +14604,13 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
14561
14604
  */
14562
14605
  TreeView.prototype.moveNodes = function (sourceNodes, target, index, preventTargetExpand) {
14563
14606
  var dropLi = this.getElement(target);
14607
+ var nodeData = [];
14564
14608
  if (isNullOrUndefined(dropLi)) {
14565
14609
  return;
14566
14610
  }
14567
14611
  for (var i = 0; i < sourceNodes.length; i++) {
14568
14612
  var dragLi = this.getElement(sourceNodes[i]);
14613
+ nodeData.push(this.getNode(dragLi));
14569
14614
  if (isNullOrUndefined(dragLi) || dropLi.isSameNode(dragLi) || this.isDescendant(dragLi, dropLi)) {
14570
14615
  continue;
14571
14616
  }
@@ -14575,7 +14620,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
14575
14620
  if (this.fields.dataSource instanceof DataManager === false) {
14576
14621
  this.preventExpand = false;
14577
14622
  }
14578
- this.triggerEvent();
14623
+ this.triggerEvent('moveNodes', nodeData);
14579
14624
  };
14580
14625
  /**
14581
14626
  * Refreshes a particular node of the TreeView.
@@ -14679,7 +14724,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
14679
14724
  addClass([liEle], ACTIVE);
14680
14725
  }
14681
14726
  this.isRefreshed = false;
14682
- this.triggerEvent();
14727
+ this.triggerEvent('refreshNode', [this.getNode(liEle)]);
14683
14728
  };
14684
14729
  /**
14685
14730
  * Removes the collection of TreeView nodes by passing the array of node details as argument to this method.
@@ -15075,7 +15120,7 @@ var Sidebar = /** @__PURE__ @class */ (function (_super) {
15075
15120
  };
15076
15121
  Sidebar.prototype.destroyBackDrop = function () {
15077
15122
  var sibling = document.querySelector('.e-main-content') || this.targetEle;
15078
- if (this.target && this.showBackdrop && sibling) {
15123
+ if (this.target && this.showBackdrop && sibling && !isNullOrUndefined(this.defaultBackdropDiv)) {
15079
15124
  removeClass([this.defaultBackdropDiv], DEFAULTBACKDROP);
15080
15125
  }
15081
15126
  else if (this.showBackdrop && this.modal) {
@@ -17665,5 +17710,5 @@ var AppBar = /** @__PURE__ @class */ (function (_super) {
17665
17710
  * Navigation all modules
17666
17711
  */
17667
17712
 
17668
- 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 };
17669
17714
  //# sourceMappingURL=ej2-navigations.es5.js.map