@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
@@ -2639,6 +2639,11 @@ let MenuBase = class MenuBase extends Component {
2639
2639
  navIdx.length = 0;
2640
2640
  }
2641
2641
  }
2642
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
2643
+ if (this.isReact && this.template) {
2644
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
2645
+ this.portals = [];
2646
+ }
2642
2647
  break;
2643
2648
  }
2644
2649
  }
@@ -3620,8 +3625,11 @@ let Toolbar = class Toolbar extends Component {
3620
3625
  if (popObj && closest(trgt, '.e-popup')) {
3621
3626
  const popEle = popObj.element;
3622
3627
  const popFrstEle = popEle.firstElementChild;
3623
- if ((value === 'previous' && popFrstEle === clst) || (value === 'next' && popEle.lastElementChild === clst)) {
3624
- return;
3628
+ if ((value === 'previous' && popFrstEle === clst)) {
3629
+ popEle.lastElementChild.firstChild.focus();
3630
+ }
3631
+ else if (value === 'next' && popEle.lastElementChild === clst) {
3632
+ popFrstEle.firstChild.focus();
3625
3633
  }
3626
3634
  else {
3627
3635
  this.eleFocus(clst, value);
@@ -3715,7 +3723,7 @@ let Toolbar = class Toolbar extends Component {
3715
3723
  }
3716
3724
  }
3717
3725
  eleContains(el) {
3718
- return el.classList.contains(CLS_SEPARATOR) || el.classList.contains(CLS_DISABLE$2) || el.getAttribute('disabled') || el.classList.contains(CLS_HIDDEN) || !isVisible(el);
3726
+ 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);
3719
3727
  }
3720
3728
  eleFocus(closest$$1, pos) {
3721
3729
  const sib = Object(closest$$1)[pos + 'ElementSibling'];
@@ -3754,6 +3762,15 @@ let Toolbar = class Toolbar extends Component {
3754
3762
  }
3755
3763
  }
3756
3764
  }
3765
+ else if (!isNullOrUndefined(closest$$1)) {
3766
+ const tbrItems = this.element.querySelectorAll('.' + CLS_ITEMS + ' .' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + ')' + ':not(.' + CLS_DISABLE$2 + ')' + ':not(.' + CLS_HIDDEN + ')');
3767
+ if (pos === 'next' && tbrItems) {
3768
+ this.elementFocus(tbrItems[0]);
3769
+ }
3770
+ else if (pos === 'previous' && tbrItems) {
3771
+ this.elementFocus(tbrItems[tbrItems.length - 1]);
3772
+ }
3773
+ }
3757
3774
  }
3758
3775
  clickHandler(e) {
3759
3776
  const trgt = e.target;
@@ -6955,6 +6972,7 @@ let Menu = class Menu extends MenuBase {
6955
6972
  catch (e) {
6956
6973
  /* action on catch */
6957
6974
  }
6975
+ this.updateMenuItems(this.items);
6958
6976
  }
6959
6977
  else {
6960
6978
  this.updateMenuItems(this.items);
@@ -7540,6 +7558,14 @@ let Tab = class Tab extends Component {
7540
7558
  this.tbObj.createElement = this.createElement;
7541
7559
  this.tbObj.appendTo(this.hdrEle);
7542
7560
  attributes(this.hdrEle, { role: 'tablist' });
7561
+ if (!isNullOrUndefined(this.element.getAttribute('aria-label'))) {
7562
+ this.hdrEle.setAttribute('aria-label', this.element.getAttribute('aria-label'));
7563
+ this.element.removeAttribute('aria-label');
7564
+ }
7565
+ else if (!isNullOrUndefined(this.element.getAttribute('aria-labelledby'))) {
7566
+ this.hdrEle.setAttribute('aria-labelledby', this.element.getAttribute('aria-labelledby'));
7567
+ this.element.removeAttribute('aria-labelledby');
7568
+ }
7543
7569
  this.setCloseButton(this.showCloseButton);
7544
7570
  const toolbarHeader = this.tbObj.element.querySelector('.' + CLS_TB_ITEMS);
7545
7571
  if (!isNullOrUndefined(toolbarHeader)) {
@@ -8206,10 +8232,6 @@ let Tab = class Tab extends Component {
8206
8232
  return;
8207
8233
  }
8208
8234
  if (!this.isTemplate) {
8209
- const prev = this.tbItem[this.prevIndex];
8210
- if (!isNullOrUndefined(prev)) {
8211
- prev.firstElementChild.removeAttribute('aria-controls');
8212
- }
8213
8235
  attributes(trg.firstElementChild, { 'aria-controls': CLS_CONTENT$1 + this.tabId + '_' + value });
8214
8236
  }
8215
8237
  const id = trg.id;
@@ -9668,6 +9690,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
9668
9690
  // Specifies whether the node is dropped or not
9669
9691
  this.isNodeDropped = false;
9670
9692
  this.isInteracted = false;
9693
+ this.isRightClick = false;
9671
9694
  this.mouseDownStatus = false;
9672
9695
  }
9673
9696
  /**
@@ -10969,6 +10992,9 @@ let TreeView = TreeView_1 = class TreeView extends Component {
10969
10992
  }
10970
10993
  }
10971
10994
  }
10995
+ if (event.originalEvent.which === 3) {
10996
+ this.isRightClick = true;
10997
+ }
10972
10998
  this.triggerClickEvent(event.originalEvent, li);
10973
10999
  }
10974
11000
  }
@@ -11399,7 +11425,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
11399
11425
  if (this.isLoaded) {
11400
11426
  eventArgs = this.getSelectEvent(li, 'select', e);
11401
11427
  this.trigger('nodeSelecting', eventArgs, (observedArgs) => {
11402
- if (!observedArgs.cancel && !observedArgs.node.classList.contains(PREVENTSELECT)) {
11428
+ if ((!observedArgs.cancel) && !observedArgs.node.classList.contains(PREVENTSELECT)) {
11403
11429
  this.nodeSelectAction(li, e, observedArgs, multiSelect);
11404
11430
  }
11405
11431
  });
@@ -11439,6 +11465,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
11439
11465
  eventArgs.nodeData = this.getNodeData(li);
11440
11466
  this.trigger('nodeSelected', eventArgs);
11441
11467
  }
11468
+ this.isRightClick = false;
11442
11469
  }
11443
11470
  unselectNode(li, e) {
11444
11471
  let eventArgs;
@@ -12259,7 +12286,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
12259
12286
  newText = observedArgs.cancel ? observedArgs.oldText : observedArgs.newText;
12260
12287
  this.updateText(liEle, txtEle, newText, isInput);
12261
12288
  if (observedArgs.oldText !== newText) {
12262
- this.triggerEvent();
12289
+ this.triggerEvent('nodeEdited', [this.getNode(liEle)]);
12263
12290
  }
12264
12291
  });
12265
12292
  }
@@ -12572,6 +12599,8 @@ let TreeView = TreeView_1 = class TreeView extends Component {
12572
12599
  let level;
12573
12600
  let drop = false;
12574
12601
  let dragInstance;
12602
+ let nodeData = [];
12603
+ let liArray = [];
12575
12604
  dragInstance = e.dragData.draggable;
12576
12605
  for (let i = 0; i < dragInstance.ej2_instances.length; i++) {
12577
12606
  if (dragInstance.ej2_instances[i] instanceof TreeView_1) {
@@ -12583,6 +12612,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
12583
12612
  let dragTarget = dragObj.dragTarget;
12584
12613
  let dragLi = (closest(dragTarget, '.' + LISTITEM));
12585
12614
  let dropLi = (closest(dropTarget, '.' + LISTITEM));
12615
+ liArray.push(dragLi);
12586
12616
  if (dropLi == null && dropTarget.classList.contains(ROOT)) {
12587
12617
  dropLi = dropTarget.firstElementChild;
12588
12618
  }
@@ -12596,6 +12626,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
12596
12626
  }
12597
12627
  if (dragObj.allowMultiSelection && dragLi.classList.contains(ACTIVE)) {
12598
12628
  let sNodes = selectAll('.' + ACTIVE, dragObj.element);
12629
+ liArray = sNodes;
12599
12630
  if (e.target.offsetHeight <= 33 && offsetY > e.target.offsetHeight - 10 && offsetY > 6) {
12600
12631
  for (let i = sNodes.length - 1; i >= 0; i--) {
12601
12632
  if (dropLi.isSameNode(sNodes[i]) || this.isDescendant(sNodes[i], dropLi)) {
@@ -12622,13 +12653,16 @@ let TreeView = TreeView_1 = class TreeView extends Component {
12622
12653
  if (this.fields.dataSource instanceof DataManager === false) {
12623
12654
  this.preventExpand = false;
12624
12655
  }
12656
+ for (var i = 0; i < liArray.length; i++) {
12657
+ nodeData.push(this.getNode(liArray[i]));
12658
+ }
12625
12659
  this.trigger('nodeDropped', this.getDragEvent(e.event, dragObj, dropTarget, e.target, e.dragData.draggedElement, null, level, drop));
12626
12660
  if (dragObj.element.id !== this.element.id) {
12627
- dragObj.triggerEvent();
12661
+ dragObj.triggerEvent('nodeDropped', nodeData);
12628
12662
  this.isNodeDropped = true;
12629
12663
  this.fields.dataSource = this.treeData;
12630
12664
  }
12631
- this.triggerEvent();
12665
+ this.triggerEvent('nodeDropped', nodeData);
12632
12666
  }
12633
12667
  appendNode(dropTarget, dragLi, dropLi, e, dragObj, offsetY) {
12634
12668
  let checkWrapper = closest(dropTarget, '.' + CHECKBOXWRAP);
@@ -13447,9 +13481,16 @@ let TreeView = TreeView_1 = class TreeView extends Component {
13447
13481
  }
13448
13482
  return removedData;
13449
13483
  }
13450
- triggerEvent() {
13484
+ triggerEvent(action, node) {
13451
13485
  this.renderReactTemplates();
13452
- let eventArgs = { data: this.treeData };
13486
+ if (action === 'addNodes') {
13487
+ let nodeData = [];
13488
+ for (let i = 0; i < node.length; i++) {
13489
+ nodeData.push(this.getNode(this.getElement(isNullOrUndefined(node[i][this.fields.id]) ? getValue(this.fields.id, node[i]).toString() : null)));
13490
+ }
13491
+ node = nodeData;
13492
+ }
13493
+ let eventArgs = { data: this.treeData, action: action, nodeData: node };
13453
13494
  this.trigger('dataSourceChanged', eventArgs);
13454
13495
  }
13455
13496
  wireInputEvents(inpEle) {
@@ -13824,8 +13865,10 @@ let TreeView = TreeView_1 = class TreeView extends Component {
13824
13865
  }
13825
13866
  }
13826
13867
  deleteSuccess(nodes) {
13868
+ let nodeData = [];
13827
13869
  for (let i = 0, len = nodes.length; i < len; i++) {
13828
13870
  let liEle = this.getElement(nodes[i]);
13871
+ nodeData.push(this.getNode(liEle));
13829
13872
  if (isNullOrUndefined(liEle)) {
13830
13873
  continue;
13831
13874
  }
@@ -13835,7 +13878,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
13835
13878
  if (this.dataType === 1) {
13836
13879
  this.groupedData = this.getGroupedData(this.treeData, this.fields.parentID);
13837
13880
  }
13838
- this.triggerEvent();
13881
+ this.triggerEvent('removeNode', nodeData);
13839
13882
  }
13840
13883
  editSucess(target, newText, prevent) {
13841
13884
  let liEle = this.getElement(target);
@@ -13851,12 +13894,12 @@ let TreeView = TreeView_1 = class TreeView extends Component {
13851
13894
  proxy.renderChildNodes(dropLi, null, () => {
13852
13895
  dropUl = dropLi.querySelector('.' + PARENTITEM);
13853
13896
  proxy.addGivenNodes(nodes, dropLi, index, true, dropUl);
13854
- proxy.triggerEvent();
13897
+ proxy.triggerEvent('addNodes', nodes);
13855
13898
  });
13856
13899
  }
13857
13900
  else {
13858
13901
  this.addGivenNodes(nodes, dropLi, index, true);
13859
- this.triggerEvent();
13902
+ this.triggerEvent('addNodes', nodes);
13860
13903
  }
13861
13904
  }
13862
13905
  dmFailure(e, target, prevent) {
@@ -14066,7 +14109,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
14066
14109
  }
14067
14110
  if ((this.fields.dataSource instanceof DataManager === false)) {
14068
14111
  this.preventExpand = false;
14069
- this.triggerEvent();
14112
+ this.triggerEvent('addNodes', nodes);
14070
14113
  }
14071
14114
  }
14072
14115
  /**
@@ -14218,11 +14261,13 @@ let TreeView = TreeView_1 = class TreeView extends Component {
14218
14261
  */
14219
14262
  moveNodes(sourceNodes, target, index, preventTargetExpand) {
14220
14263
  let dropLi = this.getElement(target);
14264
+ let nodeData = [];
14221
14265
  if (isNullOrUndefined(dropLi)) {
14222
14266
  return;
14223
14267
  }
14224
14268
  for (let i = 0; i < sourceNodes.length; i++) {
14225
14269
  let dragLi = this.getElement(sourceNodes[i]);
14270
+ nodeData.push(this.getNode(dragLi));
14226
14271
  if (isNullOrUndefined(dragLi) || dropLi.isSameNode(dragLi) || this.isDescendant(dragLi, dropLi)) {
14227
14272
  continue;
14228
14273
  }
@@ -14232,7 +14277,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
14232
14277
  if (this.fields.dataSource instanceof DataManager === false) {
14233
14278
  this.preventExpand = false;
14234
14279
  }
14235
- this.triggerEvent();
14280
+ this.triggerEvent('moveNodes', nodeData);
14236
14281
  }
14237
14282
  /**
14238
14283
  * Refreshes a particular node of the TreeView.
@@ -14336,7 +14381,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
14336
14381
  addClass([liEle], ACTIVE);
14337
14382
  }
14338
14383
  this.isRefreshed = false;
14339
- this.triggerEvent();
14384
+ this.triggerEvent('refreshNode', [this.getNode(liEle)]);
14340
14385
  }
14341
14386
  /**
14342
14387
  * Removes the collection of TreeView nodes by passing the array of node details as argument to this method.
@@ -14715,7 +14760,7 @@ let Sidebar = class Sidebar extends Component {
14715
14760
  }
14716
14761
  destroyBackDrop() {
14717
14762
  const sibling = document.querySelector('.e-main-content') || this.targetEle;
14718
- if (this.target && this.showBackdrop && sibling) {
14763
+ if (this.target && this.showBackdrop && sibling && !isNullOrUndefined(this.defaultBackdropDiv)) {
14719
14764
  removeClass([this.defaultBackdropDiv], DEFAULTBACKDROP);
14720
14765
  }
14721
14766
  else if (this.showBackdrop && this.modal) {
@@ -17225,5 +17270,5 @@ AppBar = __decorate$12([
17225
17270
  * Navigation all modules
17226
17271
  */
17227
17272
 
17228
- 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 };
17273
+ 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 };
17229
17274
  //# sourceMappingURL=ej2-navigations.es2015.js.map