@syncfusion/ej2-navigations 22.2.5 → 22.2.8

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 (53) hide show
  1. package/CHANGELOG.md +16 -6
  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 +60 -27
  6. package/dist/es6/ej2-navigations.es2015.js.map +1 -1
  7. package/dist/es6/ej2-navigations.es5.js +60 -27
  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 +9 -9
  13. package/src/common/menu-base.js +3 -0
  14. package/src/tab/tab-model.d.ts +6 -0
  15. package/src/tab/tab.d.ts +5 -0
  16. package/src/tab/tab.js +9 -1
  17. package/src/toolbar/toolbar.d.ts +1 -0
  18. package/src/toolbar/toolbar.js +48 -26
  19. package/styles/accordion/_theme.scss +5 -1
  20. package/styles/accordion/bootstrap-dark.css +3 -0
  21. package/styles/accordion/bootstrap.css +3 -0
  22. package/styles/accordion/bootstrap4.css +3 -0
  23. package/styles/accordion/bootstrap5-dark.css +3 -0
  24. package/styles/accordion/bootstrap5.css +3 -0
  25. package/styles/accordion/fabric-dark.css +3 -0
  26. package/styles/accordion/fabric.css +3 -0
  27. package/styles/accordion/fluent-dark.css +3 -0
  28. package/styles/accordion/fluent.css +3 -0
  29. package/styles/accordion/highcontrast-light.css +3 -0
  30. package/styles/accordion/highcontrast.css +3 -0
  31. package/styles/accordion/material-dark.css +3 -0
  32. package/styles/accordion/material.css +3 -0
  33. package/styles/accordion/material3-dark.css +3 -0
  34. package/styles/accordion/material3.css +3 -0
  35. package/styles/accordion/tailwind-dark.css +3 -0
  36. package/styles/accordion/tailwind.css +3 -0
  37. package/styles/bootstrap-dark.css +3 -0
  38. package/styles/bootstrap.css +3 -0
  39. package/styles/bootstrap4.css +3 -0
  40. package/styles/bootstrap5-dark.css +3 -0
  41. package/styles/bootstrap5.css +3 -0
  42. package/styles/fabric-dark.css +3 -0
  43. package/styles/fabric.css +3 -0
  44. package/styles/fluent-dark.css +3 -0
  45. package/styles/fluent.css +3 -0
  46. package/styles/highcontrast-light.css +3 -0
  47. package/styles/highcontrast.css +3 -0
  48. package/styles/material-dark.css +3 -0
  49. package/styles/material.css +3 -0
  50. package/styles/material3-dark.css +3 -0
  51. package/styles/material3.css +3 -0
  52. package/styles/tailwind-dark.css +3 -0
  53. package/styles/tailwind.css +3 -0
@@ -2451,6 +2451,9 @@ let MenuBase = class MenuBase extends Component {
2451
2451
  }
2452
2452
  }
2453
2453
  afterCloseMenu(e) {
2454
+ if (isNullOrUndefined(e)) {
2455
+ return;
2456
+ }
2454
2457
  let isHeader;
2455
2458
  if (this.showSubMenu) {
2456
2459
  if (this.showItemOnClick && this.navIdx.length === 0) {
@@ -5035,7 +5038,7 @@ let Toolbar = class Toolbar extends Component {
5035
5038
  this.tbarAlgEle[(this.items[parseInt(eleIdx.toString(), 10)].align + 's').toLowerCase()].splice(parseInt(indexAgn.toString(), 10), 1);
5036
5039
  }
5037
5040
  if (this.isReact) {
5038
- this.clearTemplate();
5041
+ this.clearToolbarTemplate(innerItems[parseInt(index.toString(), 10)]);
5039
5042
  }
5040
5043
  const btnItem = innerItems[parseInt(index.toString(), 10)].querySelector('.e-control.e-btn');
5041
5044
  if (!isNullOrUndefined(btnItem) && !isNullOrUndefined(btnItem.ej2_instances[0]) && !(btnItem.ej2_instances[0].isDestroyed)) {
@@ -5347,6 +5350,30 @@ let Toolbar = class Toolbar extends Component {
5347
5350
  nextEle = innerItems[++eleIndex];
5348
5351
  }
5349
5352
  }
5353
+ clearToolbarTemplate(templateEle) {
5354
+ if (this.registeredTemplate && this.registeredTemplate[`${'template'}`]) {
5355
+ const registeredTemplates = this.registeredTemplate;
5356
+ for (let index = 0; index < registeredTemplates[`${'template'}`].length; index++) {
5357
+ const registeredItem = registeredTemplates[`${'template'}`][parseInt(index.toString(), 10)].rootNodes[0];
5358
+ const closestItem = closest(registeredItem, '.' + CLS_ITEM);
5359
+ if (!isNullOrUndefined(closestItem) && closestItem === templateEle) {
5360
+ this.clearTemplate(['template'], [registeredTemplates[`${'template'}`][parseInt(index.toString(), 10)]]);
5361
+ break;
5362
+ }
5363
+ }
5364
+ }
5365
+ else if (this.portals && this.portals.length > 0) {
5366
+ const portals = this.portals;
5367
+ for (let index = 0; index < portals.length; index++) {
5368
+ const portalItem = portals[parseInt(index.toString(), 10)];
5369
+ const closestItem = closest(portalItem.containerInfo, '.' + CLS_ITEM);
5370
+ if (!isNullOrUndefined(closestItem) && closestItem === templateEle) {
5371
+ this.clearTemplate(['template'], index);
5372
+ break;
5373
+ }
5374
+ }
5375
+ }
5376
+ }
5350
5377
  /**
5351
5378
  * Gets called when the model property changes.The data that describes the old and new values of the property that changed.
5352
5379
  *
@@ -5368,31 +5395,29 @@ let Toolbar = class Toolbar extends Component {
5368
5395
  const index = parseInt(Object.keys(newProp.items)[parseInt(i.toString(), 10)], 10);
5369
5396
  const property = Object.keys(newProp.items[parseInt(index.toString(), 10)])[0];
5370
5397
  const newProperty = Object(newProp.items[parseInt(index.toString(), 10)])[`${property}`];
5371
- if (typeof newProperty !== 'function') {
5372
- if (this.tbarAlign || property === 'align') {
5373
- this.refresh();
5374
- this.trigger('created');
5375
- break;
5376
- }
5377
- const popupPriCheck = property === 'showAlwaysInPopup' && !newProperty;
5378
- const booleanCheck = property === 'overflow' && this.popupPriCount !== 0;
5379
- if ((popupPriCheck) || (this.items[parseInt(index.toString(), 10)].showAlwaysInPopup) && booleanCheck) {
5380
- --this.popupPriCount;
5381
- }
5382
- if (isNullOrUndefined(this.scrollModule)) {
5383
- this.destroyMode();
5384
- }
5385
- const itemCol = [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, tEle));
5386
- if (this.isReact && this.items[parseInt(index.toString(), 10)].template) {
5387
- this.clearTemplate();
5388
- }
5389
- detach(itemCol[parseInt(index.toString(), 10)]);
5390
- this.tbarEle.splice(index, 1);
5391
- this.addItems([this.items[parseInt(index.toString(), 10)]], index);
5392
- this.items.splice(index, 1);
5393
- if (this.items[parseInt(index.toString(), 10)].template) {
5394
- this.tbarEle.splice(this.items.length, 1);
5395
- }
5398
+ if (this.tbarAlign || property === 'align') {
5399
+ this.refresh();
5400
+ this.trigger('created');
5401
+ break;
5402
+ }
5403
+ const popupPriCheck = property === 'showAlwaysInPopup' && !newProperty;
5404
+ const booleanCheck = property === 'overflow' && this.popupPriCount !== 0;
5405
+ if ((popupPriCheck) || (this.items[parseInt(index.toString(), 10)].showAlwaysInPopup) && booleanCheck) {
5406
+ --this.popupPriCount;
5407
+ }
5408
+ if (isNullOrUndefined(this.scrollModule)) {
5409
+ this.destroyMode();
5410
+ }
5411
+ const itemCol = [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, tEle));
5412
+ if (this.isReact && this.items[parseInt(index.toString(), 10)].template) {
5413
+ this.clearToolbarTemplate(itemCol[parseInt(index.toString(), 10)]);
5414
+ }
5415
+ detach(itemCol[parseInt(index.toString(), 10)]);
5416
+ this.tbarEle.splice(index, 1);
5417
+ this.addItems([this.items[parseInt(index.toString(), 10)]], index);
5418
+ this.items.splice(index, 1);
5419
+ if (this.items[parseInt(index.toString(), 10)].template) {
5420
+ this.tbarEle.splice(this.items.length, 1);
5396
5421
  }
5397
5422
  }
5398
5423
  }
@@ -8731,6 +8756,9 @@ let Tab = class Tab extends Component {
8731
8756
  }
8732
8757
  }
8733
8758
  clearTabTemplate(templateEle, templateName, className) {
8759
+ if (!this.clearTemplates) {
8760
+ return;
8761
+ }
8734
8762
  if (this.registeredTemplate && this.registeredTemplate[templateName]) {
8735
8763
  const registeredTemplates = this.registeredTemplate;
8736
8764
  for (let index = 0; index < registeredTemplates[templateName].length; index++) {
@@ -9204,7 +9232,9 @@ let Tab = class Tab extends Component {
9204
9232
  }
9205
9233
  }
9206
9234
  this.setActiveBorder();
9207
- item.setAttribute('aria-hidden', '' + value);
9235
+ if (!isNullOrUndefined(item.firstElementChild)) {
9236
+ item.firstElementChild.setAttribute('aria-hidden', '' + value);
9237
+ }
9208
9238
  if (this.overflowMode === 'Popup' && this.tbObj) {
9209
9239
  this.tbObj.refreshOverflow();
9210
9240
  }
@@ -9621,6 +9651,9 @@ __decorate$7([
9621
9651
  __decorate$7([
9622
9652
  Property(false)
9623
9653
  ], Tab.prototype, "allowDragAndDrop", void 0);
9654
+ __decorate$7([
9655
+ Property(true)
9656
+ ], Tab.prototype, "clearTemplates", void 0);
9624
9657
  __decorate$7([
9625
9658
  Complex({}, TabAnimationSettings)
9626
9659
  ], Tab.prototype, "animation", void 0);