@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
@@ -152,6 +152,7 @@ var HScroll = /** @__PURE__ @class */ (function (_super) {
152
152
  ele.style.display = '';
153
153
  ele.classList.remove(CLS_ROOT);
154
154
  ele.classList.remove(CLS_DEVICE);
155
+ ele.classList.remove(CLS_RTL);
155
156
  var nav = selectAll('.e-' + ele.id + '_nav.' + CLS_HSCROLLNAV, ele);
156
157
  var overlay = selectAll('.' + CLS_OVERLAY, ele);
157
158
  [].slice.call(overlay).forEach(function (ele) {
@@ -646,7 +647,7 @@ var VScroll = /** @__PURE__ @class */ (function (_super) {
646
647
  VScroll.prototype.destroy = function () {
647
648
  var el = this.element;
648
649
  el.style.display = '';
649
- removeClass([this.element], [CLS_ROOT$1, CLS_DEVICE$1]);
650
+ removeClass([this.element], [CLS_ROOT$1, CLS_DEVICE$1, CLS_RTL$1]);
650
651
  var navs = selectAll('.e-' + el.id + '_nav.' + CLS_VSCROLLNAV, el);
651
652
  var overlays = selectAll('.' + CLS_OVERLAY$1, el);
652
653
  [].slice.call(overlays).forEach(function (ele) {
@@ -1666,7 +1667,9 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
1666
1667
  _this.navIdx.pop();
1667
1668
  if (!_this.isMenu) {
1668
1669
  EventHandler.remove(ul_1, 'keydown', _this.keyHandler);
1669
- _this.keyType = '';
1670
+ if (_this.keyType === 'right') {
1671
+ _this.keyType = '';
1672
+ }
1670
1673
  }
1671
1674
  }
1672
1675
  _this.updateReactTemplate();
@@ -3124,20 +3127,10 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
3124
3127
  ul = this.getUlByNavIdx(navIdx.length);
3125
3128
  if (ul) {
3126
3129
  if (ishide) {
3127
- if (Browser.isDevice && !ul.classList.contains('e-contextmenu')) {
3128
- ul.children[index + 1].classList.add(HIDE);
3129
- }
3130
- else {
3131
- ul.children[index].classList.add(HIDE);
3132
- }
3130
+ ul.children[index].classList.add(HIDE);
3133
3131
  }
3134
3132
  else {
3135
- if (Browser.isDevice && !ul.classList.contains('e-contextmenu')) {
3136
- ul.children[index + 1].classList.remove(HIDE);
3137
- }
3138
- else {
3139
- ul.children[index].classList.remove(HIDE);
3140
- }
3133
+ ul.children[index].classList.remove(HIDE);
3141
3134
  }
3142
3135
  }
3143
3136
  }
@@ -8833,6 +8826,9 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
8833
8826
  var icon = (isNullOrUndefined(this.items[index].header) ||
8834
8827
  isNullOrUndefined(this.items[index].header.iconCss)) ? '' : this.items[index].header.iconCss;
8835
8828
  var textVal = this.items[index].headerTemplate || this.items[index].header.text;
8829
+ if (properties[j] === 'headerTemplate') {
8830
+ this.clearTabTemplate(hdrItem, properties[j], CLS_TB_ITEM);
8831
+ }
8836
8832
  if ((textVal === '') && (icon === '')) {
8837
8833
  this.removeTab(index);
8838
8834
  }
@@ -8864,7 +8860,8 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
8864
8860
  document.body.appendChild(this.element.querySelector(oldVal)).style.display = 'none';
8865
8861
  cntItem.innerHTML = newVal;
8866
8862
  }
8867
- else if (this.isReact) {
8863
+ else if (this.isAngular || this.isReact) {
8864
+ this.clearTabTemplate(cntItem, properties[j], CLS_ITEM$2);
8868
8865
  cntItem.innerHTML = '';
8869
8866
  this.templateCompile(cntItem, newVal, index);
8870
8867
  }
@@ -8915,6 +8912,30 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
8915
8912
  }
8916
8913
  }
8917
8914
  };
8915
+ Tab.prototype.clearTabTemplate = function (templateEle, templateName, className) {
8916
+ if (this.registeredTemplate && this.registeredTemplate[templateName]) {
8917
+ var registeredTemplates = this.registeredTemplate;
8918
+ for (var index = 0; index < registeredTemplates[templateName].length; index++) {
8919
+ var registeredItem = registeredTemplates[templateName][index].rootNodes[0];
8920
+ var closestItem = closest(registeredItem, '.' + className);
8921
+ if (!isNullOrUndefined(closestItem) && closestItem === templateEle) {
8922
+ this.clearTemplate([templateName], [registeredTemplates[templateName][index]]);
8923
+ break;
8924
+ }
8925
+ }
8926
+ }
8927
+ else if (this.portals && this.portals.length > 0) {
8928
+ var portals = this.portals;
8929
+ for (var index = 0; index < portals.length; index++) {
8930
+ var portalItem = portals[index];
8931
+ var closestItem = closest(portalItem.containerInfo, '.' + className);
8932
+ if (!isNullOrUndefined(closestItem) && closestItem === templateEle) {
8933
+ this.clearTemplate([templateName], index);
8934
+ break;
8935
+ }
8936
+ }
8937
+ }
8938
+ };
8918
8939
  Tab.prototype.initializeDrag = function (target) {
8919
8940
  var _this = this;
8920
8941
  var dragObj = new Draggable(target, {
@@ -9264,6 +9285,10 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
9264
9285
  var removeArgs = { removedItem: trg, removedIndex: index, cancel: false };
9265
9286
  this.trigger('removing', removeArgs, function (tabRemovingArgs) {
9266
9287
  if (!tabRemovingArgs.cancel) {
9288
+ var header = select('#' + CLS_ITEM$2 + _this.tabId + '_' + _this.extIndex(trg.id), select('.' + CLS_TB_ITEMS, _this.element));
9289
+ if (!isNullOrUndefined(header)) {
9290
+ _this.clearTabTemplate(header, 'headerTemplate', CLS_TB_ITEM);
9291
+ }
9267
9292
  _this.tbObj.removeItems(index);
9268
9293
  if (_this.allowDragAndDrop && (index !== Array.prototype.indexOf.call(_this.itemIndexArray, trg.id))) {
9269
9294
  index = Array.prototype.indexOf.call(_this.itemIndexArray, trg.id);
@@ -9274,32 +9299,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
9274
9299
  _this.refreshActiveBorder();
9275
9300
  var cntTrg = select('#' + CLS_CONTENT$1 + _this.tabId + '_' + _this.extIndex(trg.id), select('.' + CLS_CONTENT$1, _this.element));
9276
9301
  if (!isNullOrUndefined(cntTrg)) {
9277
- var registeredTemplate = _this.registeredTemplate;
9278
- var portal = _this.portals;
9279
- if (registeredTemplate && registeredTemplate.content) {
9280
- var templateToClear = [];
9281
- for (var i = 0; i < registeredTemplate.content.length; i++) {
9282
- var registeredItem = registeredTemplate.content[i].rootNodes[0];
9283
- var closestItem = closest(registeredItem, '.' + CLS_ITEM$2);
9284
- if (!isNullOrUndefined(registeredItem) && closestItem === cntTrg) {
9285
- templateToClear.push(registeredTemplate.content[i]);
9286
- break;
9287
- }
9288
- }
9289
- if (templateToClear.length > 0) {
9290
- _this.clearTemplate(['content'], templateToClear);
9291
- }
9292
- }
9293
- /* else if (portal) {
9294
- for (var i = 0; i < portal.length; i++) {
9295
- var portalItem = portal[i];
9296
- var closestItem = closest(portalItem.containerInfo, '.' + CLS_ITEM);
9297
- if (!isNullOrUndefined(portalItem) && closestItem === cntTrg) {
9298
- this.clearTemplate(['content'], i);
9299
- break;
9300
- }
9301
- }
9302
- } */
9302
+ _this.clearTabTemplate(cntTrg, 'content', CLS_ITEM$2);
9303
9303
  detach(cntTrg);
9304
9304
  }
9305
9305
  _this.trigger('removed', tabRemovingArgs);
@@ -12463,10 +12463,10 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
12463
12463
  return endNode;
12464
12464
  };
12465
12465
  TreeView.prototype.setFocus = function (preNode, nextNode) {
12466
- removeClass([preNode], [HOVER, FOCUS]);
12466
+ removeClass([preNode], FOCUS);
12467
12467
  preNode.setAttribute("tabindex", "-1");
12468
12468
  if (!nextNode.classList.contains('e-disable') && !nextNode.classList.contains(PREVENTSELECT)) {
12469
- addClass([nextNode], [HOVER, FOCUS]);
12469
+ addClass([nextNode], FOCUS);
12470
12470
  nextNode.setAttribute('tabindex', '0');
12471
12471
  nextNode.focus();
12472
12472
  EventHandler.add(nextNode, 'blur', this.focusOut, this);
@@ -12485,7 +12485,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
12485
12485
  if (!this.mouseDownStatus) {
12486
12486
  var focusedElement = this.getFocusedNode();
12487
12487
  focusedElement.setAttribute("tabindex", "0");
12488
- addClass([focusedElement], [HOVER, FOCUS]);
12488
+ addClass([focusedElement], FOCUS);
12489
12489
  EventHandler.add(focusedElement, 'blur', this.focusOut, this);
12490
12490
  }
12491
12491
  this.mouseDownStatus = false;
@@ -12493,7 +12493,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
12493
12493
  TreeView.prototype.focusOut = function (event) {
12494
12494
  var focusedElement = this.getFocusedNode();
12495
12495
  if (event.target == focusedElement) {
12496
- removeClass([focusedElement], [HOVER, FOCUS]);
12496
+ removeClass([focusedElement], FOCUS);
12497
12497
  EventHandler.remove(focusedElement, 'blur', this.focusOut);
12498
12498
  }
12499
12499
  };
@@ -12705,7 +12705,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
12705
12705
  removeClass([liEle], EDITING);
12706
12706
  liEle.focus();
12707
12707
  EventHandler.add(liEle, 'blur', this.focusOut, this);
12708
- addClass([liEle], HOVER);
12708
+ addClass([liEle], FOCUS);
12709
12709
  }
12710
12710
  if (this.allowTextWrap) {
12711
12711
  this.calculateWrap(liEle);