@syncfusion/ej2-navigations 21.1.39 → 21.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 (49) hide show
  1. package/CHANGELOG.md +14 -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 +46 -46
  6. package/dist/es6/ej2-navigations.es2015.js.map +1 -1
  7. package/dist/es6/ej2-navigations.es5.js +46 -46
  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 +12 -15
  13. package/src/common/h-scroll.js +1 -0
  14. package/src/common/menu-base.js +5 -13
  15. package/src/common/v-scroll.js +1 -1
  16. package/src/tab/tab.d.ts +1 -0
  17. package/src/tab/tab.js +34 -27
  18. package/src/treeview/treeview.js +5 -5
  19. package/styles/bootstrap-dark.css +35 -16
  20. package/styles/bootstrap.css +35 -16
  21. package/styles/bootstrap4.css +35 -16
  22. package/styles/bootstrap5-dark.css +35 -16
  23. package/styles/bootstrap5.css +35 -16
  24. package/styles/fabric-dark.css +35 -16
  25. package/styles/fabric.css +35 -16
  26. package/styles/fluent-dark.css +35 -16
  27. package/styles/fluent.css +35 -16
  28. package/styles/highcontrast-light.css +35 -16
  29. package/styles/highcontrast.css +37 -17
  30. package/styles/material-dark.css +35 -16
  31. package/styles/material.css +35 -16
  32. package/styles/tailwind-dark.css +35 -16
  33. package/styles/tailwind.css +35 -16
  34. package/styles/treeview/_theme.scss +20 -10
  35. package/styles/treeview/bootstrap-dark.css +35 -16
  36. package/styles/treeview/bootstrap.css +35 -16
  37. package/styles/treeview/bootstrap4.css +35 -16
  38. package/styles/treeview/bootstrap5-dark.css +35 -16
  39. package/styles/treeview/bootstrap5.css +35 -16
  40. package/styles/treeview/fabric-dark.css +35 -16
  41. package/styles/treeview/fabric.css +35 -16
  42. package/styles/treeview/fluent-dark.css +35 -16
  43. package/styles/treeview/fluent.css +35 -16
  44. package/styles/treeview/highcontrast-light.css +35 -16
  45. package/styles/treeview/highcontrast.css +37 -17
  46. package/styles/treeview/material-dark.css +35 -16
  47. package/styles/treeview/material.css +35 -16
  48. package/styles/treeview/tailwind-dark.css +35 -16
  49. package/styles/treeview/tailwind.css +35 -16
@@ -137,6 +137,7 @@ let HScroll = class HScroll extends Component {
137
137
  ele.style.display = '';
138
138
  ele.classList.remove(CLS_ROOT);
139
139
  ele.classList.remove(CLS_DEVICE);
140
+ ele.classList.remove(CLS_RTL);
140
141
  const nav = selectAll('.e-' + ele.id + '_nav.' + CLS_HSCROLLNAV, ele);
141
142
  const overlay = selectAll('.' + CLS_OVERLAY, ele);
142
143
  [].slice.call(overlay).forEach((ele) => {
@@ -609,7 +610,7 @@ let VScroll = class VScroll extends Component {
609
610
  destroy() {
610
611
  const el = this.element;
611
612
  el.style.display = '';
612
- removeClass([this.element], [CLS_ROOT$1, CLS_DEVICE$1]);
613
+ removeClass([this.element], [CLS_ROOT$1, CLS_DEVICE$1, CLS_RTL$1]);
613
614
  const navs = selectAll('.e-' + el.id + '_nav.' + CLS_VSCROLLNAV, el);
614
615
  const overlays = selectAll('.' + CLS_OVERLAY$1, el);
615
616
  [].slice.call(overlays).forEach((ele) => {
@@ -1586,7 +1587,9 @@ let MenuBase = class MenuBase extends Component {
1586
1587
  this.navIdx.pop();
1587
1588
  if (!this.isMenu) {
1588
1589
  EventHandler.remove(ul, 'keydown', this.keyHandler);
1589
- this.keyType = '';
1590
+ if (this.keyType === 'right') {
1591
+ this.keyType = '';
1592
+ }
1590
1593
  }
1591
1594
  }
1592
1595
  this.updateReactTemplate();
@@ -3012,20 +3015,10 @@ let MenuBase = class MenuBase extends Component {
3012
3015
  ul = this.getUlByNavIdx(navIdx.length);
3013
3016
  if (ul) {
3014
3017
  if (ishide) {
3015
- if (Browser.isDevice && !ul.classList.contains('e-contextmenu')) {
3016
- ul.children[index + 1].classList.add(HIDE);
3017
- }
3018
- else {
3019
- ul.children[index].classList.add(HIDE);
3020
- }
3018
+ ul.children[index].classList.add(HIDE);
3021
3019
  }
3022
3020
  else {
3023
- if (Browser.isDevice && !ul.classList.contains('e-contextmenu')) {
3024
- ul.children[index + 1].classList.remove(HIDE);
3025
- }
3026
- else {
3027
- ul.children[index].classList.remove(HIDE);
3028
- }
3021
+ ul.children[index].classList.remove(HIDE);
3029
3022
  }
3030
3023
  }
3031
3024
  }
@@ -8559,6 +8552,9 @@ let Tab = class Tab extends Component {
8559
8552
  const icon = (isNullOrUndefined(this.items[index].header) ||
8560
8553
  isNullOrUndefined(this.items[index].header.iconCss)) ? '' : this.items[index].header.iconCss;
8561
8554
  const textVal = this.items[index].headerTemplate || this.items[index].header.text;
8555
+ if (properties[j] === 'headerTemplate') {
8556
+ this.clearTabTemplate(hdrItem, properties[j], CLS_TB_ITEM);
8557
+ }
8562
8558
  if ((textVal === '') && (icon === '')) {
8563
8559
  this.removeTab(index);
8564
8560
  }
@@ -8590,7 +8586,8 @@ let Tab = class Tab extends Component {
8590
8586
  document.body.appendChild(this.element.querySelector(oldVal)).style.display = 'none';
8591
8587
  cntItem.innerHTML = newVal;
8592
8588
  }
8593
- else if (this.isReact) {
8589
+ else if (this.isAngular || this.isReact) {
8590
+ this.clearTabTemplate(cntItem, properties[j], CLS_ITEM$2);
8594
8591
  cntItem.innerHTML = '';
8595
8592
  this.templateCompile(cntItem, newVal, index);
8596
8593
  }
@@ -8641,6 +8638,30 @@ let Tab = class Tab extends Component {
8641
8638
  }
8642
8639
  }
8643
8640
  }
8641
+ clearTabTemplate(templateEle, templateName, className) {
8642
+ if (this.registeredTemplate && this.registeredTemplate[templateName]) {
8643
+ const registeredTemplates = this.registeredTemplate;
8644
+ for (let index = 0; index < registeredTemplates[templateName].length; index++) {
8645
+ const registeredItem = registeredTemplates[templateName][index].rootNodes[0];
8646
+ const closestItem = closest(registeredItem, '.' + className);
8647
+ if (!isNullOrUndefined(closestItem) && closestItem === templateEle) {
8648
+ this.clearTemplate([templateName], [registeredTemplates[templateName][index]]);
8649
+ break;
8650
+ }
8651
+ }
8652
+ }
8653
+ else if (this.portals && this.portals.length > 0) {
8654
+ const portals = this.portals;
8655
+ for (let index = 0; index < portals.length; index++) {
8656
+ const portalItem = portals[index];
8657
+ const closestItem = closest(portalItem.containerInfo, '.' + className);
8658
+ if (!isNullOrUndefined(closestItem) && closestItem === templateEle) {
8659
+ this.clearTemplate([templateName], index);
8660
+ break;
8661
+ }
8662
+ }
8663
+ }
8664
+ }
8644
8665
  initializeDrag(target) {
8645
8666
  let dragObj = new Draggable(target, {
8646
8667
  dragArea: this.dragArea,
@@ -8984,6 +9005,10 @@ let Tab = class Tab extends Component {
8984
9005
  const removeArgs = { removedItem: trg, removedIndex: index, cancel: false };
8985
9006
  this.trigger('removing', removeArgs, (tabRemovingArgs) => {
8986
9007
  if (!tabRemovingArgs.cancel) {
9008
+ const header = select('#' + CLS_ITEM$2 + this.tabId + '_' + this.extIndex(trg.id), select('.' + CLS_TB_ITEMS, this.element));
9009
+ if (!isNullOrUndefined(header)) {
9010
+ this.clearTabTemplate(header, 'headerTemplate', CLS_TB_ITEM);
9011
+ }
8987
9012
  this.tbObj.removeItems(index);
8988
9013
  if (this.allowDragAndDrop && (index !== Array.prototype.indexOf.call(this.itemIndexArray, trg.id))) {
8989
9014
  index = Array.prototype.indexOf.call(this.itemIndexArray, trg.id);
@@ -8994,32 +9019,7 @@ let Tab = class Tab extends Component {
8994
9019
  this.refreshActiveBorder();
8995
9020
  const cntTrg = select('#' + CLS_CONTENT$1 + this.tabId + '_' + this.extIndex(trg.id), select('.' + CLS_CONTENT$1, this.element));
8996
9021
  if (!isNullOrUndefined(cntTrg)) {
8997
- const registeredTemplate = this.registeredTemplate;
8998
- const portal = this.portals;
8999
- if (registeredTemplate && registeredTemplate.content) {
9000
- var templateToClear = [];
9001
- for (let i = 0; i < registeredTemplate.content.length; i++) {
9002
- let registeredItem = registeredTemplate.content[i].rootNodes[0];
9003
- let closestItem = closest(registeredItem, '.' + CLS_ITEM$2);
9004
- if (!isNullOrUndefined(registeredItem) && closestItem === cntTrg) {
9005
- templateToClear.push(registeredTemplate.content[i]);
9006
- break;
9007
- }
9008
- }
9009
- if (templateToClear.length > 0) {
9010
- this.clearTemplate(['content'], templateToClear);
9011
- }
9012
- }
9013
- /* else if (portal) {
9014
- for (var i = 0; i < portal.length; i++) {
9015
- var portalItem = portal[i];
9016
- var closestItem = closest(portalItem.containerInfo, '.' + CLS_ITEM);
9017
- if (!isNullOrUndefined(portalItem) && closestItem === cntTrg) {
9018
- this.clearTemplate(['content'], i);
9019
- break;
9020
- }
9021
- }
9022
- } */
9022
+ this.clearTabTemplate(cntTrg, 'content', CLS_ITEM$2);
9023
9023
  detach(cntTrg);
9024
9024
  }
9025
9025
  this.trigger('removed', tabRemovingArgs);
@@ -12130,10 +12130,10 @@ let TreeView = TreeView_1 = class TreeView extends Component {
12130
12130
  return endNode;
12131
12131
  }
12132
12132
  setFocus(preNode, nextNode) {
12133
- removeClass([preNode], [HOVER, FOCUS]);
12133
+ removeClass([preNode], FOCUS);
12134
12134
  preNode.setAttribute("tabindex", "-1");
12135
12135
  if (!nextNode.classList.contains('e-disable') && !nextNode.classList.contains(PREVENTSELECT)) {
12136
- addClass([nextNode], [HOVER, FOCUS]);
12136
+ addClass([nextNode], FOCUS);
12137
12137
  nextNode.setAttribute('tabindex', '0');
12138
12138
  nextNode.focus();
12139
12139
  EventHandler.add(nextNode, 'blur', this.focusOut, this);
@@ -12152,7 +12152,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
12152
12152
  if (!this.mouseDownStatus) {
12153
12153
  let focusedElement = this.getFocusedNode();
12154
12154
  focusedElement.setAttribute("tabindex", "0");
12155
- addClass([focusedElement], [HOVER, FOCUS]);
12155
+ addClass([focusedElement], FOCUS);
12156
12156
  EventHandler.add(focusedElement, 'blur', this.focusOut, this);
12157
12157
  }
12158
12158
  this.mouseDownStatus = false;
@@ -12160,7 +12160,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
12160
12160
  focusOut(event) {
12161
12161
  let focusedElement = this.getFocusedNode();
12162
12162
  if (event.target == focusedElement) {
12163
- removeClass([focusedElement], [HOVER, FOCUS]);
12163
+ removeClass([focusedElement], FOCUS);
12164
12164
  EventHandler.remove(focusedElement, 'blur', this.focusOut);
12165
12165
  }
12166
12166
  }
@@ -12370,7 +12370,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
12370
12370
  removeClass([liEle], EDITING);
12371
12371
  liEle.focus();
12372
12372
  EventHandler.add(liEle, 'blur', this.focusOut, this);
12373
- addClass([liEle], HOVER);
12373
+ addClass([liEle], FOCUS);
12374
12374
  }
12375
12375
  if (this.allowTextWrap) {
12376
12376
  this.calculateWrap(liEle);