@syncfusion/ej2-navigations 19.4.47 → 19.4.53

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 (46) hide show
  1. package/CHANGELOG.md +42 -0
  2. package/README.md +1 -1
  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 +50 -29
  6. package/dist/es6/ej2-navigations.es2015.js.map +1 -1
  7. package/dist/es6/ej2-navigations.es5.js +49 -28
  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/accordion/accordion.js +13 -11
  14. package/src/common/menu-base.d.ts +1 -1
  15. package/src/common/menu-base.js +13 -10
  16. package/src/sidebar/sidebar.d.ts +1 -0
  17. package/src/sidebar/sidebar.js +3 -1
  18. package/src/tab/tab.js +1 -0
  19. package/src/toolbar/toolbar.js +19 -6
  20. package/styles/bootstrap-dark.css +5 -2
  21. package/styles/bootstrap.css +5 -2
  22. package/styles/bootstrap4.css +5 -2
  23. package/styles/bootstrap5-dark.css +5 -2
  24. package/styles/bootstrap5.css +5 -2
  25. package/styles/fabric-dark.css +5 -2
  26. package/styles/fabric.css +5 -2
  27. package/styles/highcontrast-light.css +5 -2
  28. package/styles/highcontrast.css +5 -2
  29. package/styles/material-dark.css +5 -2
  30. package/styles/material.css +5 -2
  31. package/styles/tailwind-dark.css +5 -2
  32. package/styles/tailwind.css +5 -2
  33. package/styles/toolbar/_layout.scss +4 -2
  34. package/styles/toolbar/bootstrap-dark.css +5 -2
  35. package/styles/toolbar/bootstrap.css +5 -2
  36. package/styles/toolbar/bootstrap4.css +5 -2
  37. package/styles/toolbar/bootstrap5-dark.css +5 -2
  38. package/styles/toolbar/bootstrap5.css +5 -2
  39. package/styles/toolbar/fabric-dark.css +5 -2
  40. package/styles/toolbar/fabric.css +5 -2
  41. package/styles/toolbar/highcontrast-light.css +5 -2
  42. package/styles/toolbar/highcontrast.css +5 -2
  43. package/styles/toolbar/material-dark.css +5 -2
  44. package/styles/toolbar/material.css +5 -2
  45. package/styles/toolbar/tailwind-dark.css +5 -2
  46. package/styles/toolbar/tailwind.css +5 -2
@@ -2545,21 +2545,24 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
2545
2545
  * This method is used to set the menu item in the Menu based on the argument.
2546
2546
  *
2547
2547
  * @param {MenuItem} item - item need to be updated.
2548
- * @param {string} id - id to be passed to update the item.
2548
+ * @param {string} id - id / text to be passed to update the item.
2549
2549
  * @param {boolean} isUniqueId - Set `true` if it is a unique id.
2550
2550
  * @returns {void}
2551
2551
  */
2552
2552
  MenuBase.prototype.setItem = function (item, id, isUniqueId) {
2553
- var idx = id ? id : item.id;
2554
- var isText = (isUniqueId === false) ? false : true;
2555
- var navIdx = this.getIndex(idx, isText);
2553
+ var idx;
2554
+ if (isUniqueId) {
2555
+ idx = id ? id : item.id;
2556
+ }
2557
+ else {
2558
+ idx = id ? id : item.text;
2559
+ }
2560
+ var navIdx = this.getIndex(idx, isUniqueId);
2556
2561
  var newItem = this.getItem(navIdx);
2557
- newItem.iconCss = item.iconCss;
2558
- newItem.id = item.id;
2559
- newItem.text = item.text;
2560
- newItem.url = item.url;
2561
- newItem.separator = item.separator;
2562
- newItem.items = item.items;
2562
+ newItem.iconCss = item.iconCss || newItem.iconCss;
2563
+ newItem.text = item.text || newItem.text;
2564
+ newItem.url = item.url || newItem.url;
2565
+ newItem.separator = item.separator || newItem.separator;
2563
2566
  };
2564
2567
  MenuBase.prototype.getItem = function (navIdx) {
2565
2568
  navIdx = navIdx.slice();
@@ -3436,7 +3439,7 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
3436
3439
  */
3437
3440
  Toolbar.prototype.destroy = function () {
3438
3441
  var _this = this;
3439
- if (this.isReact) {
3442
+ if (this.isReact || this.isAngular) {
3440
3443
  this.clearTemplate();
3441
3444
  }
3442
3445
  var btnItems = this.element.querySelectorAll('.e-control.e-btn');
@@ -3445,20 +3448,28 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
3445
3448
  el.ej2_instances[0].destroy();
3446
3449
  }
3447
3450
  });
3448
- _super.prototype.destroy.call(this);
3449
3451
  this.unwireEvents();
3450
3452
  this.tempId.forEach(function (ele) {
3451
3453
  if (!isNullOrUndefined(_this.element.querySelector(ele))) {
3452
3454
  document.body.appendChild(_this.element.querySelector(ele)).style.display = 'none';
3453
3455
  }
3454
3456
  });
3457
+ this.destroyItems();
3455
3458
  while (this.element.lastElementChild) {
3456
3459
  this.element.removeChild(this.element.lastElementChild);
3457
3460
  }
3458
3461
  if (this.trgtEle) {
3459
3462
  this.element.appendChild(this.ctrlTem);
3463
+ this.trgtEle = null;
3464
+ this.ctrlTem = null;
3465
+ }
3466
+ if (this.popObj) {
3467
+ this.popObj.destroy();
3468
+ detach(this.popObj.element);
3469
+ }
3470
+ if (this.activeEle) {
3471
+ this.activeEle = null;
3460
3472
  }
3461
- this.clearProperty();
3462
3473
  this.popObj = null;
3463
3474
  this.tbarAlign = null;
3464
3475
  this.remove(this.element, 'e-toolpop');
@@ -3469,6 +3480,7 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
3469
3480
  ['aria-disabled', 'aria-orientation', 'aria-haspopup', 'role'].forEach(function (attrb) {
3470
3481
  return _this.element.removeAttribute(attrb);
3471
3482
  });
3483
+ _super.prototype.destroy.call(this);
3472
3484
  };
3473
3485
  /**
3474
3486
  * Initialize the event handler
@@ -3558,8 +3570,8 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
3558
3570
  if (this.element) {
3559
3571
  [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM)).forEach(function (el) { detach(el); });
3560
3572
  }
3561
- var tbarItems = this.element.querySelector('.' + CLS_ITEMS);
3562
3573
  if (this.tbarAlign) {
3574
+ var tbarItems = this.element.querySelector('.' + CLS_ITEMS);
3563
3575
  [].slice.call(tbarItems.children).forEach(function (el) {
3564
3576
  detach(el);
3565
3577
  });
@@ -3643,6 +3655,10 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
3643
3655
  case 'end':
3644
3656
  if (clst) {
3645
3657
  var popupCheck = closest(clst, '.e-popup');
3658
+ var extendedPopup = this.element.querySelector('.' + CLS_EXTENDABLECLASS);
3659
+ if (this.overflowMode === 'Extended' && extendedPopup && extendedPopup.classList.contains('e-popup-open')) {
3660
+ popupCheck = e.action === 'end' ? extendedPopup : null;
3661
+ }
3646
3662
  if (popupCheck) {
3647
3663
  if (isVisible(this.popObj.element)) {
3648
3664
  nodes = [].slice.call(popupCheck.children);
@@ -3655,7 +3671,7 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
3655
3671
  }
3656
3672
  }
3657
3673
  else {
3658
- nodes = this.element.querySelectorAll('.' + CLS_ITEMS + ' .' + CLS_ITEM);
3674
+ nodes = this.element.querySelectorAll('.' + CLS_ITEMS + ' .' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + ')');
3659
3675
  if (e.action === 'home') {
3660
3676
  ele = nodes[0];
3661
3677
  }
@@ -5199,7 +5215,7 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
5199
5215
  };
5200
5216
  Toolbar.prototype.itemsRerender = function (newProp) {
5201
5217
  this.items = this.tbarItemsCol;
5202
- if (this.isReact) {
5218
+ if (this.isReact || this.isAngular) {
5203
5219
  this.clearTemplate();
5204
5220
  }
5205
5221
  this.destroyMode();
@@ -5668,7 +5684,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
5668
5684
  */
5669
5685
  Accordion.prototype.destroy = function () {
5670
5686
  var _this = this;
5671
- if (this.isReact) {
5687
+ if (this.isReact || this.isAngular || this.isVue) {
5672
5688
  this.clearTemplate();
5673
5689
  }
5674
5690
  var ele = this.element;
@@ -5680,9 +5696,11 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
5680
5696
  ele.removeChild(el);
5681
5697
  });
5682
5698
  if (this.trgtEle) {
5699
+ this.trgtEle = null;
5683
5700
  while (this.ctrlTem.firstElementChild) {
5684
5701
  ele.appendChild(this.ctrlTem.firstElementChild);
5685
5702
  }
5703
+ this.ctrlTem = null;
5686
5704
  }
5687
5705
  ele.classList.remove(CLS_ACRDN_ROOT);
5688
5706
  ele.removeAttribute('style');
@@ -6043,11 +6061,13 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
6043
6061
  else {
6044
6062
  trgt.click();
6045
6063
  }
6064
+ e.preventDefault();
6046
6065
  break;
6047
6066
  case 'home':
6048
6067
  case 'end':
6049
6068
  clst = e.action === 'home' ? root.firstElementChild.children[0] : root.lastElementChild.children[0];
6050
6069
  clst.focus();
6070
+ e.preventDefault();
6051
6071
  break;
6052
6072
  }
6053
6073
  };
@@ -6055,19 +6075,17 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
6055
6075
  var header = this.createElement('div', { className: CLS_HEADER, id: getUniqueID('acrdn_header') });
6056
6076
  var items = this.getItems();
6057
6077
  var ariaAttr = {
6058
- 'tabindex': '0', 'role': 'heading', 'aria-selected': 'false', 'aria-label': 'collapsed',
6078
+ 'tabindex': '0', 'role': 'heading', 'aria-label': 'collapsed',
6059
6079
  'aria-disabled': 'false', 'aria-level': items.length.toString()
6060
6080
  };
6061
6081
  attributes(header, ariaAttr);
6062
6082
  return header;
6063
6083
  };
6064
6084
  Accordion.prototype.renderInnerItem = function (item, index) {
6065
- var innerEle = this.createElement('div', { className: CLS_ITEM$1 });
6066
- innerEle.id = getUniqueID('acrdn_item');
6067
- if (isNullOrUndefined(item.id)) {
6068
- item.id = innerEle.id;
6069
- }
6070
- attributes(innerEle, { 'aria-expanded': 'false', 'role': 'row' });
6085
+ var innerEle = this.createElement('div', {
6086
+ className: CLS_ITEM$1, id: item.id || getUniqueID('acrdn_item'),
6087
+ attrs: { 'aria-expanded': 'false', 'role': 'row' }
6088
+ });
6071
6089
  if (this.headerTemplate) {
6072
6090
  var ctnEle = this.headerEleGenerate();
6073
6091
  var hdrEle = this.createElement('div', { className: CLS_HEADERCTN });
@@ -6311,7 +6329,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
6311
6329
  this.add(trgtItemEle, CLS_ACTIVE);
6312
6330
  trgt.setAttribute('aria-hidden', 'false');
6313
6331
  attributes(trgtItemEle, { 'aria-expanded': 'true' });
6314
- attributes(trgt.previousElementSibling, { 'aria-selected': 'true', 'aria-label': 'expanded' });
6332
+ attributes(trgt.previousElementSibling, { 'aria-label': 'expanded' });
6315
6333
  icon.classList.remove(CLS_TOGANIMATE);
6316
6334
  this.trigger('expanded', eventArgs);
6317
6335
  }
@@ -6428,7 +6446,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
6428
6446
  this.remove(trgtItemEle, CLS_ACTIVE);
6429
6447
  trgt.setAttribute('aria-hidden', 'true');
6430
6448
  attributes(trgtItemEle, { 'aria-expanded': 'false' });
6431
- attributes(trgt.previousElementSibling, { 'aria-selected': 'false', 'aria-label': 'collapsed' });
6449
+ attributes(trgt.previousElementSibling, { 'aria-label': 'collapsed' });
6432
6450
  this.trigger('expanded', eventArgs);
6433
6451
  }
6434
6452
  };
@@ -6671,7 +6689,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
6671
6689
  };
6672
6690
  Accordion.prototype.destroyItems = function () {
6673
6691
  this.restoreContent(null);
6674
- if (this.isReact) {
6692
+ if (this.isReact || this.isAngular || this.isVue) {
6675
6693
  this.clearTemplate();
6676
6694
  }
6677
6695
  [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM$1)).forEach(function (el) {
@@ -8136,6 +8154,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
8136
8154
  };
8137
8155
  Tab.prototype.getContent = function (ele, cnt, callType, index) {
8138
8156
  var eleStr;
8157
+ cnt = isNullOrUndefined(cnt) ? "" : cnt;
8139
8158
  if (typeof cnt === 'string' || isNullOrUndefined(cnt.innerHTML)) {
8140
8159
  if (typeof cnt === 'string' && this.enableHtmlSanitizer) {
8141
8160
  cnt = SanitizeHtmlHelper.sanitize(cnt);
@@ -14756,6 +14775,7 @@ var Sidebar = /** @__PURE__ @class */ (function (_super) {
14756
14775
  }
14757
14776
  if (this.isOpen) {
14758
14777
  this.show();
14778
+ this.firstRender = true;
14759
14779
  }
14760
14780
  else {
14761
14781
  this.setMediaQuery();
@@ -14866,9 +14886,10 @@ var Sidebar = /** @__PURE__ @class */ (function (_super) {
14866
14886
  };
14867
14887
  Sidebar.prototype.transitionEnd = function (e) {
14868
14888
  this.setDock();
14869
- if (!isNullOrUndefined(e)) {
14889
+ if (!isNullOrUndefined(e) && !this.firstRender) {
14870
14890
  this.triggerChange();
14871
14891
  }
14892
+ this.firstRender = false;
14872
14893
  EventHandler.remove(this.element, 'transitionend', this.transitionEnd);
14873
14894
  };
14874
14895
  Sidebar.prototype.destroyBackDrop = function () {