@syncfusion/ej2-navigations 24.2.8 → 25.1.37

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 (133) hide show
  1. package/CHANGELOG.md +9 -34
  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 +165 -137
  6. package/dist/es6/ej2-navigations.es2015.js.map +1 -1
  7. package/dist/es6/ej2-navigations.es5.js +165 -137
  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 -12
  13. package/src/accordion/accordion-model.d.ts +3 -2
  14. package/src/accordion/accordion.d.ts +3 -2
  15. package/src/accordion/accordion.js +7 -7
  16. package/src/breadcrumb/breadcrumb.js +2 -1
  17. package/src/common/menu-base-model.d.ts +3 -2
  18. package/src/common/menu-base.d.ts +3 -2
  19. package/src/common/menu-base.js +101 -101
  20. package/src/menu/menu-model.d.ts +3 -2
  21. package/src/menu/menu.d.ts +3 -2
  22. package/src/menu/menu.js +1 -1
  23. package/src/stepper/stepper.js +1 -2
  24. package/src/tab/tab-model.d.ts +7 -21
  25. package/src/tab/tab.d.ts +7 -21
  26. package/src/tab/tab.js +5 -5
  27. package/src/toolbar/toolbar.d.ts +1 -0
  28. package/src/toolbar/toolbar.js +35 -13
  29. package/src/treeview/treeview-model.d.ts +4 -7
  30. package/src/treeview/treeview.d.ts +3 -3
  31. package/src/treeview/treeview.js +15 -9
  32. package/styles/accordion/_bds-definition.scss +180 -0
  33. package/styles/accordion/_material-definition.scss +1 -1
  34. package/styles/accordion/icons/_bds.scss +17 -0
  35. package/styles/accordion/material.css +1 -1
  36. package/styles/appbar/_bds-definition.scss +27 -0
  37. package/styles/bootstrap-dark.css +12 -4
  38. package/styles/bootstrap.css +12 -4
  39. package/styles/bootstrap4.css +12 -4
  40. package/styles/bootstrap5-dark.css +12 -4
  41. package/styles/bootstrap5.css +12 -4
  42. package/styles/breadcrumb/_bds-definition.scss +60 -0
  43. package/styles/breadcrumb/icons/_bds.scss +25 -0
  44. package/styles/carousel/_bds-definition.scss +27 -0
  45. package/styles/carousel/_layout.scss +5 -0
  46. package/styles/carousel/bootstrap-dark.css +6 -0
  47. package/styles/carousel/bootstrap.css +6 -0
  48. package/styles/carousel/bootstrap4.css +6 -0
  49. package/styles/carousel/bootstrap5-dark.css +6 -0
  50. package/styles/carousel/bootstrap5.css +6 -0
  51. package/styles/carousel/fabric-dark.css +6 -0
  52. package/styles/carousel/fabric.css +6 -0
  53. package/styles/carousel/fluent-dark.css +6 -0
  54. package/styles/carousel/fluent.css +6 -0
  55. package/styles/carousel/highcontrast-light.css +6 -0
  56. package/styles/carousel/highcontrast.css +6 -0
  57. package/styles/carousel/icons/_bds.scss +30 -0
  58. package/styles/carousel/material-dark.css +6 -0
  59. package/styles/carousel/material.css +6 -0
  60. package/styles/carousel/material3-dark.css +6 -0
  61. package/styles/carousel/material3.css +6 -0
  62. package/styles/carousel/tailwind-dark.css +6 -0
  63. package/styles/carousel/tailwind.css +6 -0
  64. package/styles/context-menu/_bds-definition.scss +65 -0
  65. package/styles/context-menu/icons/_bds.scss +33 -0
  66. package/styles/fabric-dark.css +12 -4
  67. package/styles/fabric.css +12 -4
  68. package/styles/fluent-dark.css +12 -4
  69. package/styles/fluent.css +12 -4
  70. package/styles/h-scroll/_bds-definition.scss +83 -0
  71. package/styles/h-scroll/icons/_bds.scss +49 -0
  72. package/styles/highcontrast-light.css +12 -4
  73. package/styles/highcontrast.css +12 -4
  74. package/styles/material-dark.css +12 -4
  75. package/styles/material.css +13 -5
  76. package/styles/material3-dark.css +12 -4
  77. package/styles/material3.css +12 -4
  78. package/styles/menu/_bds-definition.scss +66 -0
  79. package/styles/menu/icons/_bds.scss +134 -0
  80. package/styles/pager/_bds-definition.scss +152 -0
  81. package/styles/pager/icons/_bds.scss +50 -0
  82. package/styles/sidebar/_bds-definition.scss +45 -0
  83. package/styles/stepper/_bds-definition.scss +79 -0
  84. package/styles/stepper/_layout.scss +1 -0
  85. package/styles/stepper/bootstrap-dark.css +3 -0
  86. package/styles/stepper/bootstrap.css +3 -0
  87. package/styles/stepper/bootstrap4.css +3 -0
  88. package/styles/stepper/bootstrap5-dark.css +3 -0
  89. package/styles/stepper/bootstrap5.css +3 -0
  90. package/styles/stepper/fabric-dark.css +3 -0
  91. package/styles/stepper/fabric.css +3 -0
  92. package/styles/stepper/fluent-dark.css +3 -0
  93. package/styles/stepper/fluent.css +3 -0
  94. package/styles/stepper/highcontrast-light.css +3 -0
  95. package/styles/stepper/highcontrast.css +3 -0
  96. package/styles/stepper/icons/_bds.scss +5 -0
  97. package/styles/stepper/material-dark.css +3 -0
  98. package/styles/stepper/material.css +3 -0
  99. package/styles/stepper/material3-dark.css +3 -0
  100. package/styles/stepper/material3.css +3 -0
  101. package/styles/stepper/tailwind-dark.css +3 -0
  102. package/styles/stepper/tailwind.css +3 -0
  103. package/styles/tab/_bds-definition.scss +701 -0
  104. package/styles/tab/icons/_bds.scss +92 -0
  105. package/styles/tailwind-dark.css +14 -6
  106. package/styles/tailwind.css +12 -4
  107. package/styles/toolbar/_bds-definition.scss +215 -0
  108. package/styles/toolbar/_layout.scss +6 -7
  109. package/styles/toolbar/bootstrap-dark.css +3 -4
  110. package/styles/toolbar/bootstrap.css +3 -4
  111. package/styles/toolbar/bootstrap4.css +3 -4
  112. package/styles/toolbar/bootstrap5-dark.css +3 -4
  113. package/styles/toolbar/bootstrap5.css +3 -4
  114. package/styles/toolbar/fabric-dark.css +3 -4
  115. package/styles/toolbar/fabric.css +3 -4
  116. package/styles/toolbar/fluent-dark.css +3 -4
  117. package/styles/toolbar/fluent.css +3 -4
  118. package/styles/toolbar/highcontrast-light.css +3 -4
  119. package/styles/toolbar/highcontrast.css +3 -4
  120. package/styles/toolbar/icons/_bds.scss +16 -0
  121. package/styles/toolbar/material-dark.css +3 -4
  122. package/styles/toolbar/material.css +3 -4
  123. package/styles/toolbar/material3-dark.css +3 -4
  124. package/styles/toolbar/material3.css +3 -4
  125. package/styles/toolbar/tailwind-dark.css +3 -4
  126. package/styles/toolbar/tailwind.css +3 -4
  127. package/styles/treeview/_bds-definition.scss +132 -0
  128. package/styles/treeview/_tailwind-definition.scss +1 -1
  129. package/styles/treeview/_theme.scss +1 -1
  130. package/styles/treeview/icons/_bds.scss +43 -0
  131. package/styles/treeview/tailwind-dark.css +2 -2
  132. package/styles/v-scroll/_bds-definition.scss +49 -0
  133. package/styles/v-scroll/icons/_bds.scss +27 -0
@@ -1363,10 +1363,10 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
1363
1363
  }
1364
1364
  this.targetElement = target;
1365
1365
  if (!this.isMenu) {
1366
- EventHandler.add(this.targetElement, 'mousewheel DOMMouseScroll', this.scrollHandler, this);
1366
+ EventHandler.add(this.targetElement, 'scroll', this.scrollHandler, this);
1367
1367
  for (var _i = 0, _a = getScrollableParent(this.targetElement); _i < _a.length; _i++) {
1368
1368
  var parent_1 = _a[_i];
1369
- EventHandler.add(parent_1, 'mousewheel DOMMouseScroll', this.scrollHandler, this);
1369
+ EventHandler.add(parent_1, 'scroll', this.scrollHandler, this);
1370
1370
  }
1371
1371
  }
1372
1372
  }
@@ -2148,9 +2148,11 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
2148
2148
  }
2149
2149
  li.focus();
2150
2150
  cul = _this.getUlByNavIdx();
2151
- var index = _this.isValidLI(cul.children[0], 0, _this.action);
2152
- cul.children[index].classList.add(FOCUSED);
2153
- cul.children[index].focus();
2151
+ if (cul) {
2152
+ var index = _this.isValidLI(cul.children[0], 0, _this.action);
2153
+ cul.children[index].classList.add(FOCUSED);
2154
+ cul.children[index].focus();
2155
+ }
2154
2156
  }
2155
2157
  });
2156
2158
  };
@@ -2472,107 +2474,103 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
2472
2474
  }
2473
2475
  };
2474
2476
  MenuBase.prototype.clickHandler = function (e) {
2475
- if (this.isTapHold) {
2476
- this.isTapHold = false;
2477
+ this.isTapHold = this.isTapHold ? false : this.isTapHold;
2478
+ var wrapper = this.getWrapper();
2479
+ var trgt = e.target;
2480
+ var cli = this.cli = this.getLI(trgt);
2481
+ var regex = new RegExp('-ej2menu-(.*)-popup');
2482
+ var cliWrapper = cli ? closest(cli, '.e-' + this.getModuleName() + '-wrapper') : null;
2483
+ var isInstLI = cli && cliWrapper && (this.isMenu ? this.getIndex(cli.id, true).length > 0
2484
+ : wrapper.firstElementChild.id === cliWrapper.firstElementChild.id);
2485
+ if (Browser.isDevice && this.isMenu) {
2486
+ this.removeLIStateByClass([FOCUSED], [wrapper].concat(this.getPopups()));
2487
+ this.mouseDownHandler(e);
2477
2488
  }
2478
- else {
2479
- var wrapper = this.getWrapper();
2480
- var trgt = e.target;
2481
- var cli = this.cli = this.getLI(trgt);
2482
- var regex = new RegExp('-ej2menu-(.*)-popup');
2483
- var cliWrapper = cli ? closest(cli, '.e-' + this.getModuleName() + '-wrapper') : null;
2484
- var isInstLI = cli && cliWrapper && (this.isMenu ? this.getIndex(cli.id, true).length > 0
2485
- : wrapper.firstElementChild.id === cliWrapper.firstElementChild.id);
2486
- if (Browser.isDevice && this.isMenu) {
2487
- this.removeLIStateByClass([FOCUSED], [wrapper].concat(this.getPopups()));
2488
- this.mouseDownHandler(e);
2489
- }
2490
- if (cli && cliWrapper && this.isMenu) {
2491
- var cliWrapperId = cliWrapper.id ? regex.exec(cliWrapper.id)[1] : cliWrapper.querySelector('.e-menu-parent').id;
2492
- if (this.element.id !== cliWrapperId) {
2493
- return;
2494
- }
2489
+ if (cli && cliWrapper && this.isMenu) {
2490
+ var cliWrapperId = cliWrapper.id ? regex.exec(cliWrapper.id)[1] : cliWrapper.querySelector('.e-menu-parent').id;
2491
+ if (this.element.id !== cliWrapperId) {
2492
+ return;
2495
2493
  }
2496
- if (isInstLI && e.type === 'click' && !cli.classList.contains(HEADER)) {
2497
- this.setLISelected(cli);
2498
- var navIdx = this.getIndex(cli.id, true);
2499
- var item = this.getItem(navIdx);
2500
- var eventArgs = { element: cli, item: item, event: e };
2501
- this.trigger('select', eventArgs);
2494
+ }
2495
+ if (isInstLI && e.type === 'click' && !cli.classList.contains(HEADER)) {
2496
+ this.setLISelected(cli);
2497
+ var navIdx = this.getIndex(cli.id, true);
2498
+ var item = this.getItem(navIdx);
2499
+ var eventArgs = { element: cli, item: item, event: e };
2500
+ this.trigger('select', eventArgs);
2501
+ }
2502
+ if (isInstLI && (e.type === 'mouseover' || Browser.isDevice || this.showItemOnClick)) {
2503
+ var ul = void 0;
2504
+ if (cli.classList.contains(HEADER)) {
2505
+ ul = wrapper.children[this.navIdx.length - 1];
2506
+ this.toggleAnimation(ul);
2507
+ var sli = this.getLIByClass(ul, SELECTED);
2508
+ if (sli) {
2509
+ sli.classList.remove(SELECTED);
2510
+ }
2511
+ detach(cli.parentNode);
2512
+ this.navIdx.pop();
2502
2513
  }
2503
- if (isInstLI && (e.type === 'mouseover' || Browser.isDevice || this.showItemOnClick)) {
2504
- var ul = void 0;
2505
- if (cli.classList.contains(HEADER)) {
2506
- ul = wrapper.children[this.navIdx.length - 1];
2507
- this.toggleAnimation(ul);
2508
- var sli = this.getLIByClass(ul, SELECTED);
2509
- if (sli) {
2510
- sli.classList.remove(SELECTED);
2514
+ else {
2515
+ if (!cli.classList.contains(SEPARATOR)) {
2516
+ this.showSubMenu = true;
2517
+ var cul = cli.parentNode;
2518
+ if (isNullOrUndefined(cul)) {
2519
+ return;
2511
2520
  }
2512
- detach(cli.parentNode);
2513
- this.navIdx.pop();
2514
- }
2515
- else {
2516
- if (!cli.classList.contains(SEPARATOR)) {
2517
- this.showSubMenu = true;
2518
- var cul = cli.parentNode;
2519
- if (isNullOrUndefined(cul)) {
2520
- return;
2521
+ this.cliIdx = this.getIdx(cul, cli);
2522
+ if (this.isMenu || !Browser.isDevice) {
2523
+ var culIdx = this.isMenu ? Array.prototype.indexOf.call([wrapper].concat(this.getPopups()), closest(cul, '.' + 'e-' + this.getModuleName() + '-wrapper'))
2524
+ : this.getIdx(wrapper, cul);
2525
+ if (this.navIdx[culIdx] === this.cliIdx) {
2526
+ this.showSubMenu = false;
2521
2527
  }
2522
- this.cliIdx = this.getIdx(cul, cli);
2523
- if (this.isMenu || !Browser.isDevice) {
2524
- var culIdx = this.isMenu ? Array.prototype.indexOf.call([wrapper].concat(this.getPopups()), closest(cul, '.' + 'e-' + this.getModuleName() + '-wrapper'))
2525
- : this.getIdx(wrapper, cul);
2526
- if (this.navIdx[culIdx] === this.cliIdx) {
2527
- this.showSubMenu = false;
2528
+ if (culIdx !== this.navIdx.length && (e.type !== 'mouseover' || this.showSubMenu)) {
2529
+ var sli = this.getLIByClass(cul, SELECTED);
2530
+ if (sli) {
2531
+ sli.classList.remove(SELECTED);
2528
2532
  }
2529
- if (culIdx !== this.navIdx.length && (e.type !== 'mouseover' || this.showSubMenu)) {
2530
- var sli = this.getLIByClass(cul, SELECTED);
2531
- if (sli) {
2532
- sli.classList.remove(SELECTED);
2533
- }
2534
- this.isClosed = true;
2535
- this.keyType = 'click';
2536
- if (this.showItemOnClick) {
2537
- this.setLISelected(cli);
2538
- }
2539
- this.closeMenu(culIdx + 1, e);
2540
- if (this.showItemOnClick) {
2541
- this.setLISelected(cli);
2542
- }
2533
+ this.isClosed = true;
2534
+ this.keyType = 'click';
2535
+ if (this.showItemOnClick) {
2536
+ this.setLISelected(cli);
2537
+ }
2538
+ this.closeMenu(culIdx + 1, e);
2539
+ if (this.showItemOnClick) {
2540
+ this.setLISelected(cli);
2543
2541
  }
2544
2542
  }
2545
- if (!this.isClosed) {
2546
- this.afterCloseMenu(e);
2547
- }
2548
- this.isClosed = false;
2549
2543
  }
2544
+ if (!this.isClosed) {
2545
+ this.afterCloseMenu(e);
2546
+ }
2547
+ this.isClosed = false;
2550
2548
  }
2551
2549
  }
2552
- else {
2553
- if (this.isMenu && trgt.tagName === 'DIV' && this.navIdx.length && closest(trgt, '.e-menu-vscroll')) {
2554
- var popupEle = closest(trgt, '.' + POPUP);
2555
- var cIdx = Array.prototype.indexOf.call(this.getPopups(), popupEle) + 1;
2556
- if (cIdx < this.navIdx.length) {
2557
- this.closeMenu(cIdx + 1, e);
2558
- if (popupEle) {
2559
- this.removeLIStateByClass([FOCUSED, SELECTED], [popupEle]);
2560
- }
2550
+ }
2551
+ else {
2552
+ if (this.isMenu && trgt.tagName === 'DIV' && this.navIdx.length && closest(trgt, '.e-menu-vscroll')) {
2553
+ var popupEle = closest(trgt, '.' + POPUP);
2554
+ var cIdx = Array.prototype.indexOf.call(this.getPopups(), popupEle) + 1;
2555
+ if (cIdx < this.navIdx.length) {
2556
+ this.closeMenu(cIdx + 1, e);
2557
+ if (popupEle) {
2558
+ this.removeLIStateByClass([FOCUSED, SELECTED], [popupEle]);
2561
2559
  }
2562
2560
  }
2563
- else if (this.isMenu && this.hamburgerMode && trgt.tagName === 'SPAN'
2564
- && trgt.classList.contains('e-menu-icon')) {
2565
- this.menuHeaderClickHandler(e);
2566
- }
2567
- else {
2568
- if (trgt.tagName !== 'UL' || (this.isMenu ? trgt.parentElement.classList.contains('e-menu-wrapper') &&
2569
- !this.getIndex(trgt.querySelector('.' + ITEM).id, true).length : trgt.parentElement !== wrapper)) {
2570
- if (!cli) {
2571
- this.removeLIStateByClass([SELECTED], [wrapper]);
2572
- }
2573
- if (!cli || !cli.querySelector('.' + CARET)) {
2574
- this.closeMenu(null, e);
2575
- }
2561
+ }
2562
+ else if (this.isMenu && this.hamburgerMode && trgt.tagName === 'SPAN'
2563
+ && trgt.classList.contains('e-menu-icon')) {
2564
+ this.menuHeaderClickHandler(e);
2565
+ }
2566
+ else {
2567
+ if (trgt.tagName !== 'UL' || (this.isMenu ? trgt.parentElement.classList.contains('e-menu-wrapper') &&
2568
+ !this.getIndex(trgt.querySelector('.' + ITEM).id, true).length : trgt.parentElement !== wrapper)) {
2569
+ if (!cli) {
2570
+ this.removeLIStateByClass([SELECTED], [wrapper]);
2571
+ }
2572
+ if (!cli || !cli.querySelector('.' + CARET)) {
2573
+ this.closeMenu(null, e);
2576
2574
  }
2577
2575
  }
2578
2576
  }
@@ -2630,9 +2628,11 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
2630
2628
  li.classList.add(SELECTED);
2631
2629
  };
2632
2630
  MenuBase.prototype.getLIByClass = function (ul, classname) {
2633
- for (var i = 0, len = ul.children.length; i < len; i++) {
2634
- if (ul.children[i].classList.contains(classname)) {
2635
- return ul.children[i];
2631
+ if (ul) {
2632
+ for (var i = 0, len = ul.children.length; i < len; i++) {
2633
+ if (ul.children[i].classList.contains(classname)) {
2634
+ return ul.children[i];
2635
+ }
2636
2636
  }
2637
2637
  }
2638
2638
  return null;
@@ -2924,10 +2924,10 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
2924
2924
  }
2925
2925
  }
2926
2926
  if (!this.isMenu) {
2927
- EventHandler.remove(this.targetElement, 'mousewheel DOMMouseScroll', this.scrollHandler);
2927
+ EventHandler.remove(this.targetElement, 'scroll', this.scrollHandler);
2928
2928
  for (var _i = 0, _a = getScrollableParent(this.targetElement); _i < _a.length; _i++) {
2929
2929
  var parent_2 = _a[_i];
2930
- EventHandler.remove(parent_2, 'mousewheel DOMMouseScroll', this.scrollHandler);
2930
+ EventHandler.remove(parent_2, 'scroll', this.scrollHandler);
2931
2931
  }
2932
2932
  }
2933
2933
  }
@@ -3403,7 +3403,7 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
3403
3403
  Property(false)
3404
3404
  ], MenuBase.prototype, "enableScrolling", void 0);
3405
3405
  __decorate$2([
3406
- Property(false)
3406
+ Property(true)
3407
3407
  ], MenuBase.prototype, "enableHtmlSanitizer", void 0);
3408
3408
  __decorate$2([
3409
3409
  Complex({ itemId: 'id', text: 'text', parentId: 'parentId', iconCss: 'iconCss', url: 'url', separator: 'separator', children: 'items' }, FieldSettings)
@@ -4081,16 +4081,21 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
4081
4081
  popObj.enableRtl = false;
4082
4082
  popObj.position = { X: 'right', Y: 'top' };
4083
4083
  }
4084
- popObj.dataBind();
4085
- popObj.refreshPosition();
4086
- popObj.element.style.top = this.getElementOffsetY() + 'px';
4087
4084
  if (this.overflowMode === 'Extended') {
4088
4085
  popObj.element.style.minHeight = '0px';
4086
+ popObj.width = this.getToolbarPopupWidth(this.element);
4089
4087
  }
4088
+ popObj.dataBind();
4089
+ popObj.refreshPosition();
4090
+ popObj.element.style.top = this.getElementOffsetY() + 'px';
4090
4091
  popupNav.classList.add(CLS_TBARNAVACT);
4091
4092
  popObj.show({ name: 'FadeIn', duration: 100 });
4092
4093
  }
4093
4094
  };
4095
+ Toolbar.prototype.getToolbarPopupWidth = function (ele) {
4096
+ var eleStyles = window.getComputedStyle(ele);
4097
+ return parseFloat(eleStyles.width) + ((parseFloat(eleStyles.borderRightWidth)) * 2);
4098
+ };
4094
4099
  /**
4095
4100
  * To Initialize the control rendering
4096
4101
  *
@@ -4484,13 +4489,15 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
4484
4489
  position: this.enableRtl ? { X: 'left', Y: 'top' } : { X: 'right', Y: 'top' }
4485
4490
  });
4486
4491
  if (this.overflowMode === 'Extended') {
4487
- popup.width = parseFloat(eleStyles.width) + ((parseFloat(eleStyles.borderRightWidth)) * 2);
4492
+ popup.width = this.getToolbarPopupWidth(this.element);
4488
4493
  popup.offsetX = 0;
4489
4494
  }
4490
4495
  popup.appendTo(ele);
4491
4496
  EventHandler.add(document, 'scroll', this.docEvent.bind(this));
4492
4497
  EventHandler.add(document, 'click ', this.docEvent.bind(this));
4493
- popup.element.style.maxHeight = popup.element.offsetHeight + 'px';
4498
+ if (this.overflowMode !== 'Extended') {
4499
+ popup.element.style.maxHeight = popup.element.offsetHeight + 'px';
4500
+ }
4494
4501
  if (this.isVertical) {
4495
4502
  popup.element.style.visibility = 'hidden';
4496
4503
  }
@@ -4505,7 +4512,7 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
4505
4512
  }
4506
4513
  this.popObj = popup;
4507
4514
  }
4508
- else {
4515
+ else if (this.overflowMode !== 'Extended') {
4509
4516
  var popupEle = this.popObj.element;
4510
4517
  setStyleAttribute(popupEle, { maxHeight: '', display: 'block' });
4511
4518
  setStyleAttribute(popupEle, { maxHeight: popupEle.offsetHeight + 'px', display: '' });
@@ -4532,11 +4539,13 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
4532
4539
  var toolEle = this.popObj.element.parentElement;
4533
4540
  var popupNav = toolEle.querySelector('.' + CLS_TBARNAV);
4534
4541
  popupNav.setAttribute('aria-expanded', 'true');
4535
- setStyleAttribute(popObj.element, { height: 'auto', maxHeight: '' });
4536
- popObj.element.style.maxHeight = popObj.element.offsetHeight + 'px';
4537
4542
  if (this.overflowMode === 'Extended') {
4538
4543
  popObj.element.style.minHeight = '';
4539
4544
  }
4545
+ else {
4546
+ setStyleAttribute(popObj.element, { height: 'auto', maxHeight: '' });
4547
+ popObj.element.style.maxHeight = popObj.element.offsetHeight + 'px';
4548
+ }
4540
4549
  var popupElePos = popupEle.offsetTop + popupEle.offsetHeight + calculatePosition(toolEle).top;
4541
4550
  var popIcon = popupNav.firstElementChild;
4542
4551
  popupNav.classList.add(CLS_TBARNAVACT);
@@ -4553,9 +4562,11 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
4553
4562
  break;
4554
4563
  }
4555
4564
  }
4556
- setStyleAttribute(popObj.element, { maxHeight: overflowHeight + 'px' });
4565
+ if (this.overflowMode !== 'Extended') {
4566
+ setStyleAttribute(popObj.element, { maxHeight: overflowHeight + 'px' });
4567
+ }
4557
4568
  }
4558
- else if (this.isVertical) {
4569
+ else if (this.isVertical && this.overflowMode !== 'Extended') {
4559
4570
  var tbEleData = this.element.getBoundingClientRect();
4560
4571
  setStyleAttribute(popObj.element, { maxHeight: (tbEleData.top + this.element.offsetHeight) + 'px', bottom: 0, visibility: '' });
4561
4572
  }
@@ -5439,13 +5450,25 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
5439
5450
  this.activeEle.focus();
5440
5451
  };
5441
5452
  Toolbar.prototype.activeEleRemove = function (curEle) {
5453
+ var previousEle = this.element.querySelector('.' + CLS_ITEM + ':not(.' + CLS_DISABLE$2 + ' ):not(.' + CLS_SEPARATOR + ' ):not(.' + CLS_HIDDEN + ' )');
5442
5454
  if (!isNullOrUndefined(this.activeEle)) {
5443
5455
  this.activeEle.setAttribute('tabindex', this.getDataTabindex(this.activeEle));
5456
+ if (previousEle) {
5457
+ previousEle.removeAttribute('tabindex');
5458
+ }
5459
+ previousEle = this.activeEle;
5444
5460
  }
5445
5461
  this.activeEle = curEle;
5446
5462
  if (this.getDataTabindex(this.activeEle) === '-1') {
5447
5463
  if (isNullOrUndefined(this.trgtEle) && !curEle.parentElement.classList.contains(CLS_TEMPLATE)) {
5448
- this.updateTabIndex('-1');
5464
+ if (!isNullOrUndefined(this.element.querySelector('.e-hor-nav')) && this.element.querySelector('.e-hor-nav').classList.contains('e-nav-active')) {
5465
+ this.updateTabIndex('0');
5466
+ this.getDataTabindex(previousEle) === '-1' ? previousEle.setAttribute('tabindex', '0') :
5467
+ previousEle.setAttribute('tabindex', this.getDataTabindex(previousEle));
5468
+ }
5469
+ else {
5470
+ this.updateTabIndex('-1');
5471
+ }
5449
5472
  curEle.removeAttribute('tabindex');
5450
5473
  }
5451
5474
  else {
@@ -5509,8 +5532,7 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
5509
5532
  }
5510
5533
  if (this.popObj) {
5511
5534
  if (this.overflowMode === 'Extended') {
5512
- var eleStyles = window.getComputedStyle(this.element);
5513
- this.popObj.width = parseFloat(eleStyles.width) + ((parseFloat(eleStyles.borderRightWidth)) * 2);
5535
+ this.popObj.width = this.getToolbarPopupWidth(this.element);
5514
5536
  }
5515
5537
  if (this.tbarAlign) {
5516
5538
  this.removePositioning();
@@ -6436,7 +6458,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
6436
6458
  }
6437
6459
  catch (e) {
6438
6460
  if (typeof (value) === 'string') {
6439
- ele.innerHTML = SanitizeHtmlHelper.sanitize(value);
6461
+ ele.innerHTML = this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(value) : value;
6440
6462
  }
6441
6463
  else if (value instanceof (HTMLElement)) {
6442
6464
  ele.appendChild(value);
@@ -6474,7 +6496,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
6474
6496
  });
6475
6497
  }
6476
6498
  else if (ele.childElementCount === 0) {
6477
- ele.innerHTML = SanitizeHtmlHelper.sanitize(value);
6499
+ ele.innerHTML = this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(value) : value;
6478
6500
  }
6479
6501
  if (!isNullOrUndefined(temString)) {
6480
6502
  if (this.templateEle.indexOf(value) === -1) {
@@ -6502,11 +6524,11 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
6502
6524
  itemcnt.appendChild(ctn);
6503
6525
  }
6504
6526
  else {
6505
- if (this.enableHtmlSanitizer && typeof (this.items[parseInt(index.toString(), 10)].content)) {
6506
- this.items[parseInt(index.toString(), 10)].content =
6507
- SanitizeHtmlHelper.sanitize(this.items[parseInt(index.toString(), 10)].content);
6527
+ var content = this.items[parseInt(index.toString(), 10)].content;
6528
+ if (this.enableHtmlSanitizer && typeof (content) === 'string') {
6529
+ content = SanitizeHtmlHelper.sanitize(content);
6508
6530
  }
6509
- itemcnt.appendChild(this.fetchElement(ctn, this.items[parseInt(index.toString(), 10)].content, index));
6531
+ itemcnt.appendChild(this.fetchElement(ctn, content, index));
6510
6532
  }
6511
6533
  return itemcnt;
6512
6534
  };
@@ -7162,7 +7184,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
7162
7184
  Property('Multiple')
7163
7185
  ], Accordion.prototype, "expandMode", void 0);
7164
7186
  __decorate$4([
7165
- Property(false)
7187
+ Property(true)
7166
7188
  ], Accordion.prototype, "enableHtmlSanitizer", void 0);
7167
7189
  __decorate$4([
7168
7190
  Complex({}, AccordionAnimationSettings)
@@ -7596,7 +7618,7 @@ var Menu = /** @__PURE__ @class */ (function (_super) {
7596
7618
  Property('Menu')
7597
7619
  ], Menu.prototype, "title", void 0);
7598
7620
  __decorate$6([
7599
- Property(false)
7621
+ Property(true)
7600
7622
  ], Menu.prototype, "enableHtmlSanitizer", void 0);
7601
7623
  __decorate$6([
7602
7624
  Complex({ itemId: 'id', text: 'text', parentId: 'parentId', iconCss: 'iconCss', url: 'url', separator: 'separator', children: 'items' }, FieldSettings)
@@ -8405,10 +8427,10 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
8405
8427
  if (typeof val === 'string') {
8406
8428
  val = val.trim();
8407
8429
  if (this.isVue) {
8408
- templateFn = compile(SanitizeHtmlHelper.sanitize(val));
8430
+ templateFn = compile(this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(val) : val);
8409
8431
  }
8410
8432
  else {
8411
- ele.innerHTML = SanitizeHtmlHelper.sanitize(val);
8433
+ ele.innerHTML = this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(val) : val;
8412
8434
  }
8413
8435
  }
8414
8436
  else {
@@ -8608,7 +8630,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
8608
8630
  ele.removeChild(ele.firstChild);
8609
8631
  }
8610
8632
  }
8611
- if (this.isReact) {
8633
+ if (this.isReact || this.isAngular || this.isVue) {
8612
8634
  this.clearTemplate(['content']);
8613
8635
  }
8614
8636
  this.templateEle = [];
@@ -8782,7 +8804,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
8782
8804
  var tbPop = select('.e-popup.e-toolbar-pop', this.hdrEle);
8783
8805
  if (tbPop && tbPop.classList.contains('e-popup-close')) {
8784
8806
  var tbPopObj = (tbPop && tbPop.ej2_instances[0]);
8785
- tbPopObj.position.X = (this.headerPlacement === 'Left') ? 'left' : 'right';
8807
+ tbPopObj.position.X = (this.headerPlacement === 'Left' || this.element.classList.contains(CLS_RTL$4)) ? 'left' : 'right';
8786
8808
  tbPopObj.dataBind();
8787
8809
  tbPopObj.show(config);
8788
8810
  }
@@ -9988,7 +10010,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
9988
10010
  Property(false)
9989
10011
  ], Tab.prototype, "enablePersistence", void 0);
9990
10012
  __decorate$7([
9991
- Property(false)
10013
+ Property(true)
9992
10014
  ], Tab.prototype, "enableHtmlSanitizer", void 0);
9993
10015
  __decorate$7([
9994
10016
  Property(false)
@@ -10246,7 +10268,6 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
10246
10268
  _this.preventExpand = false;
10247
10269
  _this.checkedElement = [];
10248
10270
  _this.disableNode = [];
10249
- // eslint-disable-next-line
10250
10271
  _this.validArr = [];
10251
10272
  _this.validNodes = [];
10252
10273
  _this.expandChildren = [];
@@ -10424,7 +10445,6 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
10424
10445
  this.element.setAttribute('aria-multiselectable', 'false');
10425
10446
  }
10426
10447
  };
10427
- // eslint-disable-next-line
10428
10448
  TreeView.prototype.templateComplier = function (template) {
10429
10449
  if (template) {
10430
10450
  this.hasTemplate = true;
@@ -10449,7 +10469,6 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
10449
10469
  var _this = this;
10450
10470
  this.treeList.push('false');
10451
10471
  if (this.fields.dataSource instanceof DataManager) {
10452
- /* eslint-disable */
10453
10472
  this.isOffline = this.fields.dataSource.dataSource.offline;
10454
10473
  if (this.fields.dataSource.ready) {
10455
10474
  this.fields.dataSource.ready.then(function (e) {
@@ -12176,7 +12195,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
12176
12195
  this.expandOnType = (this.expandOn === 'Auto') ? (Browser.isDevice ? 'Click' : 'DblClick') : this.expandOn;
12177
12196
  };
12178
12197
  TreeView.prototype.expandHandler = function (e) {
12179
- var target = e.originalEvent.target;
12198
+ var target = Browser.isDevice && !Browser.isIos ? document.elementFromPoint(e.originalEvent.changedTouches[0].clientX, e.originalEvent.changedTouches[0].clientY) : e.originalEvent.target;
12180
12199
  if (!target || target.classList.contains(INPUT) || target.classList.contains(ROOT) ||
12181
12200
  target.classList.contains(PARENTITEM) || target.classList.contains(LISTITEM) ||
12182
12201
  target.classList.contains(ICON) || this.showCheckBox && closest(target, '.' + CHECKBOXWRAP)) {
@@ -12731,11 +12750,17 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
12731
12750
  TreeView.prototype.focusIn = function () {
12732
12751
  if (!this.mouseDownStatus) {
12733
12752
  var focusedElement = this.getFocusedNode();
12734
- focusedElement.setAttribute("tabindex", "0");
12735
- addClass([focusedElement], FOCUS);
12736
- EventHandler.add(focusedElement, 'blur', this.focusOut, this);
12753
+ if (focusedElement.classList.contains('e-disable')) {
12754
+ focusedElement.setAttribute("tabindex", "-1");
12755
+ this.navigateNode(true);
12756
+ }
12757
+ else {
12758
+ focusedElement.setAttribute("tabindex", "0");
12759
+ addClass([focusedElement], FOCUS);
12760
+ EventHandler.add(focusedElement, 'blur', this.focusOut, this);
12761
+ }
12762
+ this.mouseDownStatus = false;
12737
12763
  }
12738
- this.mouseDownStatus = false;
12739
12764
  };
12740
12765
  TreeView.prototype.focusOut = function (event) {
12741
12766
  var focusedElement = this.getFocusedNode();
@@ -12745,6 +12770,9 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
12745
12770
  }
12746
12771
  };
12747
12772
  TreeView.prototype.onMouseOver = function (e) {
12773
+ if (Browser.isDevice) {
12774
+ return;
12775
+ }
12748
12776
  var target = e.target;
12749
12777
  var classList$$1 = target.classList;
12750
12778
  var currentLi = closest(target, '.' + LISTITEM);
@@ -15197,7 +15225,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
15197
15225
  Property(null)
15198
15226
  ], TreeView.prototype, "dragArea", void 0);
15199
15227
  __decorate$8([
15200
- Property(false)
15228
+ Property(true)
15201
15229
  ], TreeView.prototype, "enableHtmlSanitizer", void 0);
15202
15230
  __decorate$8([
15203
15231
  Property(false)
@@ -16498,8 +16526,9 @@ var Breadcrumb = /** @__PURE__ @class */ (function (_super) {
16498
16526
  };
16499
16527
  Breadcrumb.prototype.beforeItemRenderChanges = function (prevItem, currItem, elem, isRightIcon) {
16500
16528
  var wrapElem = elem.querySelector('.e-anchor-wrap');
16501
- if (wrapElem) {
16529
+ if (wrapElem && wrapElem.querySelector('.e-home')) {
16502
16530
  wrapElem.parentElement.setAttribute('aria-label', 'home');
16531
+ wrapElem.parentElement.setAttribute('role', 'link');
16503
16532
  }
16504
16533
  if (currItem.text !== prevItem.text) {
16505
16534
  wrapElem.childNodes.forEach(function (child) {
@@ -19363,8 +19392,7 @@ var Stepper = /** @__PURE__ @class */ (function (_super) {
19363
19392
  var selectedEle = this.stepperItemElements[parseInt(this.activeStep.toString(), 10)].firstChild;
19364
19393
  var value = this.activeStep === 0 ? 0 : (selectedEle.offsetLeft - progressPos.offsetLeft + (selectedEle.offsetWidth / 2)) / progressPos.offsetWidth * 100;
19365
19394
  if (this.element.classList.contains(RTL$3)) {
19366
- var elementPos = this.stepperItemElements[0].firstChild;
19367
- value = ((progressPos.offsetWidth - selectedEle.offsetLeft) + Math.abs((elementPos.offsetLeft + elementPos.offsetWidth) - this.stepperItemList.offsetWidth)) / progressPos.offsetWidth * 100;
19395
+ value = (progressPos.getBoundingClientRect().right - selectedEle.getBoundingClientRect().right + (selectedEle.offsetWidth / 2)) / progressPos.offsetWidth * 100;
19368
19396
  this.progressbar.style.setProperty(PROGRESSVALUE$1, (value) + '%');
19369
19397
  }
19370
19398
  else {