@syncfusion/ej2-navigations 24.2.4 → 25.1.35-579988

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 (137) hide show
  1. package/CHANGELOG.md +4 -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 +154 -138
  6. package/dist/es6/ej2-navigations.es2015.js.map +1 -1
  7. package/dist/es6/ej2-navigations.es5.js +154 -138
  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.js +25 -7
  28. package/src/treeview/treeview-model.d.ts +4 -7
  29. package/src/treeview/treeview.d.ts +3 -3
  30. package/src/treeview/treeview.js +14 -16
  31. package/styles/accordion/_bds-definition.scss +180 -0
  32. package/styles/accordion/_material-definition.scss +1 -1
  33. package/styles/accordion/icons/_bds.scss +17 -0
  34. package/styles/accordion/material.css +1 -1
  35. package/styles/appbar/_bds-definition.scss +27 -0
  36. package/styles/bootstrap-dark.css +38 -8
  37. package/styles/bootstrap.css +34 -4
  38. package/styles/bootstrap4.css +38 -8
  39. package/styles/bootstrap5-dark.css +34 -4
  40. package/styles/bootstrap5.css +34 -4
  41. package/styles/breadcrumb/_bds-definition.scss +60 -0
  42. package/styles/breadcrumb/icons/_bds.scss +25 -0
  43. package/styles/carousel/_bds-definition.scss +27 -0
  44. package/styles/carousel/_layout.scss +5 -0
  45. package/styles/carousel/bootstrap-dark.css +6 -0
  46. package/styles/carousel/bootstrap.css +6 -0
  47. package/styles/carousel/bootstrap4.css +6 -0
  48. package/styles/carousel/bootstrap5-dark.css +6 -0
  49. package/styles/carousel/bootstrap5.css +6 -0
  50. package/styles/carousel/fabric-dark.css +6 -0
  51. package/styles/carousel/fabric.css +6 -0
  52. package/styles/carousel/fluent-dark.css +6 -0
  53. package/styles/carousel/fluent.css +6 -0
  54. package/styles/carousel/highcontrast-light.css +6 -0
  55. package/styles/carousel/highcontrast.css +6 -0
  56. package/styles/carousel/icons/_bds.scss +30 -0
  57. package/styles/carousel/material-dark.css +6 -0
  58. package/styles/carousel/material.css +6 -0
  59. package/styles/carousel/material3-dark.css +6 -0
  60. package/styles/carousel/material3.css +6 -0
  61. package/styles/carousel/tailwind-dark.css +6 -0
  62. package/styles/carousel/tailwind.css +6 -0
  63. package/styles/context-menu/_bds-definition.scss +65 -0
  64. package/styles/context-menu/icons/_bds.scss +33 -0
  65. package/styles/fabric-dark.css +34 -4
  66. package/styles/fabric.css +34 -4
  67. package/styles/fluent-dark.css +45 -15
  68. package/styles/fluent.css +45 -15
  69. package/styles/h-scroll/_bds-definition.scss +83 -0
  70. package/styles/h-scroll/icons/_bds.scss +49 -0
  71. package/styles/highcontrast-light.css +34 -4
  72. package/styles/highcontrast.css +34 -4
  73. package/styles/material-dark.css +34 -4
  74. package/styles/material.css +35 -5
  75. package/styles/material3-dark.css +34 -4
  76. package/styles/material3.css +34 -4
  77. package/styles/menu/_bds-definition.scss +66 -0
  78. package/styles/menu/icons/_bds.scss +134 -0
  79. package/styles/pager/_bds-definition.scss +152 -0
  80. package/styles/pager/icons/_bds.scss +50 -0
  81. package/styles/sidebar/_bds-definition.scss +45 -0
  82. package/styles/stepper/_bds-definition.scss +79 -0
  83. package/styles/stepper/_layout.scss +1 -0
  84. package/styles/stepper/bootstrap-dark.css +3 -0
  85. package/styles/stepper/bootstrap.css +3 -0
  86. package/styles/stepper/bootstrap4.css +3 -0
  87. package/styles/stepper/bootstrap5-dark.css +3 -0
  88. package/styles/stepper/bootstrap5.css +3 -0
  89. package/styles/stepper/fabric-dark.css +3 -0
  90. package/styles/stepper/fabric.css +3 -0
  91. package/styles/stepper/fluent-dark.css +3 -0
  92. package/styles/stepper/fluent.css +3 -0
  93. package/styles/stepper/highcontrast-light.css +3 -0
  94. package/styles/stepper/highcontrast.css +3 -0
  95. package/styles/stepper/icons/_bds.scss +5 -0
  96. package/styles/stepper/material-dark.css +3 -0
  97. package/styles/stepper/material.css +3 -0
  98. package/styles/stepper/material3-dark.css +3 -0
  99. package/styles/stepper/material3.css +3 -0
  100. package/styles/stepper/tailwind-dark.css +3 -0
  101. package/styles/stepper/tailwind.css +3 -0
  102. package/styles/tab/_bds-definition.scss +701 -0
  103. package/styles/tab/icons/_bds.scss +92 -0
  104. package/styles/tailwind-dark.css +36 -6
  105. package/styles/tailwind.css +34 -4
  106. package/styles/toolbar/_bds-definition.scss +215 -0
  107. package/styles/toolbar/_bootstrap-dark-definition.scss +3 -3
  108. package/styles/toolbar/_bootstrap4-definition.scss +3 -3
  109. package/styles/toolbar/_fluent-definition.scss +3 -3
  110. package/styles/toolbar/_layout.scss +39 -5
  111. package/styles/toolbar/bootstrap-dark.css +29 -8
  112. package/styles/toolbar/bootstrap.css +25 -4
  113. package/styles/toolbar/bootstrap4.css +29 -8
  114. package/styles/toolbar/bootstrap5-dark.css +25 -4
  115. package/styles/toolbar/bootstrap5.css +25 -4
  116. package/styles/toolbar/fabric-dark.css +25 -4
  117. package/styles/toolbar/fabric.css +25 -4
  118. package/styles/toolbar/fluent-dark.css +36 -15
  119. package/styles/toolbar/fluent.css +36 -15
  120. package/styles/toolbar/highcontrast-light.css +25 -4
  121. package/styles/toolbar/highcontrast.css +25 -4
  122. package/styles/toolbar/icons/_bds.scss +16 -0
  123. package/styles/toolbar/material-dark.css +25 -4
  124. package/styles/toolbar/material.css +25 -4
  125. package/styles/toolbar/material3-dark.css +25 -4
  126. package/styles/toolbar/material3.css +25 -4
  127. package/styles/toolbar/tailwind-dark.css +25 -4
  128. package/styles/toolbar/tailwind.css +25 -4
  129. package/styles/treeview/_bds-definition.scss +132 -0
  130. package/styles/treeview/_tailwind-definition.scss +1 -1
  131. package/styles/treeview/_theme.scss +1 -1
  132. package/styles/treeview/icons/_bds.scss +43 -0
  133. package/styles/treeview/tailwind-dark.css +2 -2
  134. package/styles/v-scroll/_bds-definition.scss +49 -0
  135. package/styles/v-scroll/icons/_bds.scss +27 -0
  136. package/.github/PULL_REQUEST_TEMPLATE/Bug.md +0 -63
  137. package/.github/PULL_REQUEST_TEMPLATE/feature.md +0 -39
@@ -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)
@@ -4490,7 +4490,9 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
4490
4490
  popup.appendTo(ele);
4491
4491
  EventHandler.add(document, 'scroll', this.docEvent.bind(this));
4492
4492
  EventHandler.add(document, 'click ', this.docEvent.bind(this));
4493
- popup.element.style.maxHeight = popup.element.offsetHeight + 'px';
4493
+ if (this.overflowMode !== 'Extended') {
4494
+ popup.element.style.maxHeight = popup.element.offsetHeight + 'px';
4495
+ }
4494
4496
  if (this.isVertical) {
4495
4497
  popup.element.style.visibility = 'hidden';
4496
4498
  }
@@ -4505,7 +4507,7 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
4505
4507
  }
4506
4508
  this.popObj = popup;
4507
4509
  }
4508
- else {
4510
+ else if (this.overflowMode !== 'Extended') {
4509
4511
  var popupEle = this.popObj.element;
4510
4512
  setStyleAttribute(popupEle, { maxHeight: '', display: 'block' });
4511
4513
  setStyleAttribute(popupEle, { maxHeight: popupEle.offsetHeight + 'px', display: '' });
@@ -4532,11 +4534,13 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
4532
4534
  var toolEle = this.popObj.element.parentElement;
4533
4535
  var popupNav = toolEle.querySelector('.' + CLS_TBARNAV);
4534
4536
  popupNav.setAttribute('aria-expanded', 'true');
4535
- setStyleAttribute(popObj.element, { height: 'auto', maxHeight: '' });
4536
- popObj.element.style.maxHeight = popObj.element.offsetHeight + 'px';
4537
4537
  if (this.overflowMode === 'Extended') {
4538
4538
  popObj.element.style.minHeight = '';
4539
4539
  }
4540
+ else {
4541
+ setStyleAttribute(popObj.element, { height: 'auto', maxHeight: '' });
4542
+ popObj.element.style.maxHeight = popObj.element.offsetHeight + 'px';
4543
+ }
4540
4544
  var popupElePos = popupEle.offsetTop + popupEle.offsetHeight + calculatePosition(toolEle).top;
4541
4545
  var popIcon = popupNav.firstElementChild;
4542
4546
  popupNav.classList.add(CLS_TBARNAVACT);
@@ -4553,9 +4557,11 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
4553
4557
  break;
4554
4558
  }
4555
4559
  }
4556
- setStyleAttribute(popObj.element, { maxHeight: overflowHeight + 'px' });
4560
+ if (this.overflowMode !== 'Extended') {
4561
+ setStyleAttribute(popObj.element, { maxHeight: overflowHeight + 'px' });
4562
+ }
4557
4563
  }
4558
- else if (this.isVertical) {
4564
+ else if (this.isVertical && this.overflowMode !== 'Extended') {
4559
4565
  var tbEleData = this.element.getBoundingClientRect();
4560
4566
  setStyleAttribute(popObj.element, { maxHeight: (tbEleData.top + this.element.offsetHeight) + 'px', bottom: 0, visibility: '' });
4561
4567
  }
@@ -5439,13 +5445,25 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
5439
5445
  this.activeEle.focus();
5440
5446
  };
5441
5447
  Toolbar.prototype.activeEleRemove = function (curEle) {
5448
+ var previousEle = this.element.querySelector('.' + CLS_ITEM + ':not(.' + CLS_DISABLE$2 + ' ):not(.' + CLS_SEPARATOR + ' ):not(.' + CLS_HIDDEN + ' )');
5442
5449
  if (!isNullOrUndefined(this.activeEle)) {
5443
5450
  this.activeEle.setAttribute('tabindex', this.getDataTabindex(this.activeEle));
5451
+ if (previousEle) {
5452
+ previousEle.removeAttribute('tabindex');
5453
+ }
5454
+ previousEle = this.activeEle;
5444
5455
  }
5445
5456
  this.activeEle = curEle;
5446
5457
  if (this.getDataTabindex(this.activeEle) === '-1') {
5447
5458
  if (isNullOrUndefined(this.trgtEle) && !curEle.parentElement.classList.contains(CLS_TEMPLATE)) {
5448
- this.updateTabIndex('-1');
5459
+ if (!isNullOrUndefined(this.element.querySelector('.e-hor-nav')) && this.element.querySelector('.e-hor-nav').classList.contains('e-nav-active')) {
5460
+ this.updateTabIndex('0');
5461
+ this.getDataTabindex(previousEle) === '-1' ? previousEle.setAttribute('tabindex', '0') :
5462
+ previousEle.setAttribute('tabindex', this.getDataTabindex(previousEle));
5463
+ }
5464
+ else {
5465
+ this.updateTabIndex('-1');
5466
+ }
5449
5467
  curEle.removeAttribute('tabindex');
5450
5468
  }
5451
5469
  else {
@@ -6436,7 +6454,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
6436
6454
  }
6437
6455
  catch (e) {
6438
6456
  if (typeof (value) === 'string') {
6439
- ele.innerHTML = SanitizeHtmlHelper.sanitize(value);
6457
+ ele.innerHTML = this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(value) : value;
6440
6458
  }
6441
6459
  else if (value instanceof (HTMLElement)) {
6442
6460
  ele.appendChild(value);
@@ -6474,7 +6492,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
6474
6492
  });
6475
6493
  }
6476
6494
  else if (ele.childElementCount === 0) {
6477
- ele.innerHTML = SanitizeHtmlHelper.sanitize(value);
6495
+ ele.innerHTML = this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(value) : value;
6478
6496
  }
6479
6497
  if (!isNullOrUndefined(temString)) {
6480
6498
  if (this.templateEle.indexOf(value) === -1) {
@@ -6502,11 +6520,11 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
6502
6520
  itemcnt.appendChild(ctn);
6503
6521
  }
6504
6522
  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);
6523
+ var content = this.items[parseInt(index.toString(), 10)].content;
6524
+ if (this.enableHtmlSanitizer && typeof (content) === 'string') {
6525
+ content = SanitizeHtmlHelper.sanitize(content);
6508
6526
  }
6509
- itemcnt.appendChild(this.fetchElement(ctn, this.items[parseInt(index.toString(), 10)].content, index));
6527
+ itemcnt.appendChild(this.fetchElement(ctn, content, index));
6510
6528
  }
6511
6529
  return itemcnt;
6512
6530
  };
@@ -7162,7 +7180,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
7162
7180
  Property('Multiple')
7163
7181
  ], Accordion.prototype, "expandMode", void 0);
7164
7182
  __decorate$4([
7165
- Property(false)
7183
+ Property(true)
7166
7184
  ], Accordion.prototype, "enableHtmlSanitizer", void 0);
7167
7185
  __decorate$4([
7168
7186
  Complex({}, AccordionAnimationSettings)
@@ -7596,7 +7614,7 @@ var Menu = /** @__PURE__ @class */ (function (_super) {
7596
7614
  Property('Menu')
7597
7615
  ], Menu.prototype, "title", void 0);
7598
7616
  __decorate$6([
7599
- Property(false)
7617
+ Property(true)
7600
7618
  ], Menu.prototype, "enableHtmlSanitizer", void 0);
7601
7619
  __decorate$6([
7602
7620
  Complex({ itemId: 'id', text: 'text', parentId: 'parentId', iconCss: 'iconCss', url: 'url', separator: 'separator', children: 'items' }, FieldSettings)
@@ -8405,10 +8423,10 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
8405
8423
  if (typeof val === 'string') {
8406
8424
  val = val.trim();
8407
8425
  if (this.isVue) {
8408
- templateFn = compile(SanitizeHtmlHelper.sanitize(val));
8426
+ templateFn = compile(this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(val) : val);
8409
8427
  }
8410
8428
  else {
8411
- ele.innerHTML = SanitizeHtmlHelper.sanitize(val);
8429
+ ele.innerHTML = this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(val) : val;
8412
8430
  }
8413
8431
  }
8414
8432
  else {
@@ -8608,7 +8626,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
8608
8626
  ele.removeChild(ele.firstChild);
8609
8627
  }
8610
8628
  }
8611
- if (this.isReact) {
8629
+ if (this.isReact || this.isAngular || this.isVue) {
8612
8630
  this.clearTemplate(['content']);
8613
8631
  }
8614
8632
  this.templateEle = [];
@@ -8782,7 +8800,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
8782
8800
  var tbPop = select('.e-popup.e-toolbar-pop', this.hdrEle);
8783
8801
  if (tbPop && tbPop.classList.contains('e-popup-close')) {
8784
8802
  var tbPopObj = (tbPop && tbPop.ej2_instances[0]);
8785
- tbPopObj.position.X = (this.headerPlacement === 'Left') ? 'left' : 'right';
8803
+ tbPopObj.position.X = (this.headerPlacement === 'Left' || this.element.classList.contains(CLS_RTL$4)) ? 'left' : 'right';
8786
8804
  tbPopObj.dataBind();
8787
8805
  tbPopObj.show(config);
8788
8806
  }
@@ -9988,7 +10006,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
9988
10006
  Property(false)
9989
10007
  ], Tab.prototype, "enablePersistence", void 0);
9990
10008
  __decorate$7([
9991
- Property(false)
10009
+ Property(true)
9992
10010
  ], Tab.prototype, "enableHtmlSanitizer", void 0);
9993
10011
  __decorate$7([
9994
10012
  Property(false)
@@ -10246,7 +10264,6 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
10246
10264
  _this.preventExpand = false;
10247
10265
  _this.checkedElement = [];
10248
10266
  _this.disableNode = [];
10249
- // eslint-disable-next-line
10250
10267
  _this.validArr = [];
10251
10268
  _this.validNodes = [];
10252
10269
  _this.expandChildren = [];
@@ -10424,7 +10441,6 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
10424
10441
  this.element.setAttribute('aria-multiselectable', 'false');
10425
10442
  }
10426
10443
  };
10427
- // eslint-disable-next-line
10428
10444
  TreeView.prototype.templateComplier = function (template) {
10429
10445
  if (template) {
10430
10446
  this.hasTemplate = true;
@@ -10449,7 +10465,6 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
10449
10465
  var _this = this;
10450
10466
  this.treeList.push('false');
10451
10467
  if (this.fields.dataSource instanceof DataManager) {
10452
- /* eslint-disable */
10453
10468
  this.isOffline = this.fields.dataSource.dataSource.offline;
10454
10469
  if (this.fields.dataSource.ready) {
10455
10470
  this.fields.dataSource.ready.then(function (e) {
@@ -10741,7 +10756,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
10741
10756
  element = this.element.querySelector('[data-uid="' + data[this.fields.id] + '"]');
10742
10757
  }
10743
10758
  if (element) {
10744
- var ariaChecked = element.querySelector('.' + CHECKBOXWRAP).getAttribute('aria-checked');
10759
+ var ariaChecked = element.getAttribute('aria-checked');
10745
10760
  if (ariaChecked !== 'true') {
10746
10761
  this.changeState(element, 'indeterminate', null, true, true);
10747
10762
  }
@@ -10796,24 +10811,22 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
10796
10811
  TreeView.prototype.beforeNodeCreate = function (e) {
10797
10812
  if (this.showCheckBox) {
10798
10813
  var checkboxEle = createCheckBox(this.createElement, true, { cssClass: this.touchClass });
10799
- checkboxEle.setAttribute('role', 'checkbox');
10800
- checkboxEle.setAttribute('aria-label', e.text);
10801
10814
  var icon = select('div.' + ICON, e.item);
10802
10815
  var id = e.item.getAttribute('data-uid');
10803
10816
  e.item.childNodes[0].insertBefore(checkboxEle, e.item.childNodes[0].childNodes[isNullOrUndefined(icon) ? 0 : 1]);
10804
10817
  var checkValue = getValue(e.fields.isChecked, e.curData);
10805
10818
  if (this.checkedNodes.indexOf(id) > -1) {
10806
10819
  select('.' + CHECKBOXFRAME, checkboxEle).classList.add(CHECK);
10807
- checkboxEle.setAttribute('aria-checked', 'true');
10820
+ e.item.setAttribute('aria-checked', 'true');
10808
10821
  this.addCheck(e.item);
10809
10822
  }
10810
10823
  else if (!isNullOrUndefined(checkValue) && checkValue.toString() === 'true') {
10811
10824
  select('.' + CHECKBOXFRAME, checkboxEle).classList.add(CHECK);
10812
- checkboxEle.setAttribute('aria-checked', 'true');
10825
+ e.item.setAttribute('aria-checked', 'true');
10813
10826
  this.addCheck(e.item);
10814
10827
  }
10815
10828
  else {
10816
- checkboxEle.setAttribute('aria-checked', 'false');
10829
+ e.item.setAttribute('aria-checked', 'false');
10817
10830
  }
10818
10831
  var frame = select('.' + CHECKBOXFRAME, checkboxEle);
10819
10832
  EventHandler.add(frame, 'mousedown', this.frameMouseHandler, this);
@@ -11347,7 +11360,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
11347
11360
  }
11348
11361
  ariaState = state === 'check' ? 'true' : state === 'uncheck' ? 'false' : ariaState;
11349
11362
  if (!isNullOrUndefined(ariaState)) {
11350
- wrapper.setAttribute('aria-checked', ariaState);
11363
+ currLi.setAttribute('aria-checked', ariaState);
11351
11364
  }
11352
11365
  if (isAdd) {
11353
11366
  var data = [].concat([], this.checkActionNodes);
@@ -11361,7 +11374,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
11361
11374
  }
11362
11375
  if (!isPrevent) {
11363
11376
  if (!isNullOrUndefined(ariaState)) {
11364
- wrapper.setAttribute('aria-checked', ariaState);
11377
+ currLi.setAttribute('aria-checked', ariaState);
11365
11378
  eventArgs.data[0].checked = ariaState;
11366
11379
  this.trigger('nodeChecked', eventArgs);
11367
11380
  this.checkActionNodes = [];
@@ -12067,7 +12080,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
12067
12080
  }
12068
12081
  };
12069
12082
  TreeView.prototype.nodeSelectAction = function (li, e, eventArgs, multiSelect) {
12070
- if (!this.allowMultiSelection || (!multiSelect && (!e || (e && !e.ctrlKey)))) {
12083
+ if (!this.allowMultiSelection || (!multiSelect && (!e || (e && !(e.ctrlKey || e.metaKey))))) {
12071
12084
  this.removeSelectAll();
12072
12085
  }
12073
12086
  if (this.allowMultiSelection && e && e.shiftKey) {
@@ -12178,7 +12191,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
12178
12191
  this.expandOnType = (this.expandOn === 'Auto') ? (Browser.isDevice ? 'Click' : 'DblClick') : this.expandOn;
12179
12192
  };
12180
12193
  TreeView.prototype.expandHandler = function (e) {
12181
- var target = e.originalEvent.target;
12194
+ var target = Browser.isDevice && !Browser.isIos ? document.elementFromPoint(e.originalEvent.changedTouches[0].clientX, e.originalEvent.changedTouches[0].clientY) : e.originalEvent.target;
12182
12195
  if (!target || target.classList.contains(INPUT) || target.classList.contains(ROOT) ||
12183
12196
  target.classList.contains(PARENTITEM) || target.classList.contains(LISTITEM) ||
12184
12197
  target.classList.contains(ICON) || this.showCheckBox && closest(target, '.' + CHECKBOXWRAP)) {
@@ -12395,7 +12408,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
12395
12408
  this.checkActionNodes = [];
12396
12409
  var ariaState = !isCheck ? 'true' : 'false';
12397
12410
  if (!isNullOrUndefined(ariaState)) {
12398
- checkWrap.setAttribute('aria-checked', ariaState);
12411
+ currLi.setAttribute('aria-checked', ariaState);
12399
12412
  }
12400
12413
  var eventArgs = this.getCheckEvent(currLi, isCheck ? 'uncheck' : 'check', e);
12401
12414
  this.trigger('nodeChecking', eventArgs, function (observedArgs) {
@@ -12747,6 +12760,9 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
12747
12760
  }
12748
12761
  };
12749
12762
  TreeView.prototype.onMouseOver = function (e) {
12763
+ if (Browser.isDevice) {
12764
+ return;
12765
+ }
12750
12766
  var target = e.target;
12751
12767
  var classList$$1 = target.classList;
12752
12768
  var currentLi = closest(target, '.' + LISTITEM);
@@ -12791,7 +12807,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
12791
12807
  var checked = null;
12792
12808
  var checkboxElement = select('.' + CHECKBOXWRAP, currLi);
12793
12809
  if (this.showCheckBox && checkboxElement) {
12794
- checked = checkboxElement.getAttribute('aria-checked');
12810
+ checked = currLi.getAttribute('aria-checked');
12795
12811
  }
12796
12812
  return {
12797
12813
  id: id, text: text, parentID: pid, selected: selected, selectable: selectable, expanded: expanded,
@@ -15199,7 +15215,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
15199
15215
  Property(null)
15200
15216
  ], TreeView.prototype, "dragArea", void 0);
15201
15217
  __decorate$8([
15202
- Property(false)
15218
+ Property(true)
15203
15219
  ], TreeView.prototype, "enableHtmlSanitizer", void 0);
15204
15220
  __decorate$8([
15205
15221
  Property(false)
@@ -16500,8 +16516,9 @@ var Breadcrumb = /** @__PURE__ @class */ (function (_super) {
16500
16516
  };
16501
16517
  Breadcrumb.prototype.beforeItemRenderChanges = function (prevItem, currItem, elem, isRightIcon) {
16502
16518
  var wrapElem = elem.querySelector('.e-anchor-wrap');
16503
- if (wrapElem) {
16519
+ if (wrapElem && wrapElem.querySelector('.e-home')) {
16504
16520
  wrapElem.parentElement.setAttribute('aria-label', 'home');
16521
+ wrapElem.parentElement.setAttribute('role', 'link');
16505
16522
  }
16506
16523
  if (currItem.text !== prevItem.text) {
16507
16524
  wrapElem.childNodes.forEach(function (child) {
@@ -19365,8 +19382,7 @@ var Stepper = /** @__PURE__ @class */ (function (_super) {
19365
19382
  var selectedEle = this.stepperItemElements[parseInt(this.activeStep.toString(), 10)].firstChild;
19366
19383
  var value = this.activeStep === 0 ? 0 : (selectedEle.offsetLeft - progressPos.offsetLeft + (selectedEle.offsetWidth / 2)) / progressPos.offsetWidth * 100;
19367
19384
  if (this.element.classList.contains(RTL$3)) {
19368
- var elementPos = this.stepperItemElements[0].firstChild;
19369
- value = ((progressPos.offsetWidth - selectedEle.offsetLeft) + Math.abs((elementPos.offsetLeft + elementPos.offsetWidth) - this.stepperItemList.offsetWidth)) / progressPos.offsetWidth * 100;
19385
+ value = (progressPos.getBoundingClientRect().right - selectedEle.getBoundingClientRect().right + (selectedEle.offsetWidth / 2)) / progressPos.offsetWidth * 100;
19370
19386
  this.progressbar.style.setProperty(PROGRESSVALUE$1, (value) + '%');
19371
19387
  }
19372
19388
  else {