@syncfusion/ej2-navigations 24.2.4 → 25.1.35
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.
- package/CHANGELOG.md +4 -34
- package/dist/ej2-navigations.min.js +2 -2
- package/dist/ej2-navigations.umd.min.js +2 -2
- package/dist/ej2-navigations.umd.min.js.map +1 -1
- package/dist/es6/ej2-navigations.es2015.js +154 -138
- package/dist/es6/ej2-navigations.es2015.js.map +1 -1
- package/dist/es6/ej2-navigations.es5.js +154 -138
- package/dist/es6/ej2-navigations.es5.js.map +1 -1
- package/dist/global/ej2-navigations.min.js +2 -2
- package/dist/global/ej2-navigations.min.js.map +1 -1
- package/dist/global/index.d.ts +1 -1
- package/package.json +12 -12
- package/src/accordion/accordion-model.d.ts +3 -2
- package/src/accordion/accordion.d.ts +3 -2
- package/src/accordion/accordion.js +7 -7
- package/src/breadcrumb/breadcrumb.js +2 -1
- package/src/common/menu-base-model.d.ts +3 -2
- package/src/common/menu-base.d.ts +3 -2
- package/src/common/menu-base.js +101 -101
- package/src/menu/menu-model.d.ts +3 -2
- package/src/menu/menu.d.ts +3 -2
- package/src/menu/menu.js +1 -1
- package/src/stepper/stepper.js +1 -2
- package/src/tab/tab-model.d.ts +7 -21
- package/src/tab/tab.d.ts +7 -21
- package/src/tab/tab.js +5 -5
- package/src/toolbar/toolbar.js +25 -7
- package/src/treeview/treeview-model.d.ts +4 -7
- package/src/treeview/treeview.d.ts +3 -3
- package/src/treeview/treeview.js +14 -16
- package/styles/accordion/_bds-definition.scss +180 -0
- package/styles/accordion/_material-definition.scss +1 -1
- package/styles/accordion/icons/_bds.scss +17 -0
- package/styles/accordion/material.css +1 -1
- package/styles/appbar/_bds-definition.scss +27 -0
- package/styles/bootstrap-dark.css +38 -8
- package/styles/bootstrap.css +34 -4
- package/styles/bootstrap4.css +38 -8
- package/styles/bootstrap5-dark.css +34 -4
- package/styles/bootstrap5.css +34 -4
- package/styles/breadcrumb/_bds-definition.scss +60 -0
- package/styles/breadcrumb/icons/_bds.scss +25 -0
- package/styles/carousel/_bds-definition.scss +27 -0
- package/styles/carousel/_layout.scss +5 -0
- package/styles/carousel/bootstrap-dark.css +6 -0
- package/styles/carousel/bootstrap.css +6 -0
- package/styles/carousel/bootstrap4.css +6 -0
- package/styles/carousel/bootstrap5-dark.css +6 -0
- package/styles/carousel/bootstrap5.css +6 -0
- package/styles/carousel/fabric-dark.css +6 -0
- package/styles/carousel/fabric.css +6 -0
- package/styles/carousel/fluent-dark.css +6 -0
- package/styles/carousel/fluent.css +6 -0
- package/styles/carousel/highcontrast-light.css +6 -0
- package/styles/carousel/highcontrast.css +6 -0
- package/styles/carousel/icons/_bds.scss +30 -0
- package/styles/carousel/material-dark.css +6 -0
- package/styles/carousel/material.css +6 -0
- package/styles/carousel/material3-dark.css +6 -0
- package/styles/carousel/material3.css +6 -0
- package/styles/carousel/tailwind-dark.css +6 -0
- package/styles/carousel/tailwind.css +6 -0
- package/styles/context-menu/_bds-definition.scss +65 -0
- package/styles/context-menu/icons/_bds.scss +33 -0
- package/styles/fabric-dark.css +34 -4
- package/styles/fabric.css +34 -4
- package/styles/fluent-dark.css +45 -15
- package/styles/fluent.css +45 -15
- package/styles/h-scroll/_bds-definition.scss +83 -0
- package/styles/h-scroll/icons/_bds.scss +49 -0
- package/styles/highcontrast-light.css +34 -4
- package/styles/highcontrast.css +34 -4
- package/styles/material-dark.css +34 -4
- package/styles/material.css +35 -5
- package/styles/material3-dark.css +34 -4
- package/styles/material3.css +34 -4
- package/styles/menu/_bds-definition.scss +66 -0
- package/styles/menu/icons/_bds.scss +134 -0
- package/styles/pager/_bds-definition.scss +152 -0
- package/styles/pager/icons/_bds.scss +50 -0
- package/styles/sidebar/_bds-definition.scss +45 -0
- package/styles/stepper/_bds-definition.scss +79 -0
- package/styles/stepper/_layout.scss +1 -0
- package/styles/stepper/bootstrap-dark.css +3 -0
- package/styles/stepper/bootstrap.css +3 -0
- package/styles/stepper/bootstrap4.css +3 -0
- package/styles/stepper/bootstrap5-dark.css +3 -0
- package/styles/stepper/bootstrap5.css +3 -0
- package/styles/stepper/fabric-dark.css +3 -0
- package/styles/stepper/fabric.css +3 -0
- package/styles/stepper/fluent-dark.css +3 -0
- package/styles/stepper/fluent.css +3 -0
- package/styles/stepper/highcontrast-light.css +3 -0
- package/styles/stepper/highcontrast.css +3 -0
- package/styles/stepper/icons/_bds.scss +5 -0
- package/styles/stepper/material-dark.css +3 -0
- package/styles/stepper/material.css +3 -0
- package/styles/stepper/material3-dark.css +3 -0
- package/styles/stepper/material3.css +3 -0
- package/styles/stepper/tailwind-dark.css +3 -0
- package/styles/stepper/tailwind.css +3 -0
- package/styles/tab/_bds-definition.scss +701 -0
- package/styles/tab/icons/_bds.scss +92 -0
- package/styles/tailwind-dark.css +36 -6
- package/styles/tailwind.css +34 -4
- package/styles/toolbar/_bds-definition.scss +215 -0
- package/styles/toolbar/_bootstrap-dark-definition.scss +3 -3
- package/styles/toolbar/_bootstrap4-definition.scss +3 -3
- package/styles/toolbar/_fluent-definition.scss +3 -3
- package/styles/toolbar/_layout.scss +39 -5
- package/styles/toolbar/bootstrap-dark.css +29 -8
- package/styles/toolbar/bootstrap.css +25 -4
- package/styles/toolbar/bootstrap4.css +29 -8
- package/styles/toolbar/bootstrap5-dark.css +25 -4
- package/styles/toolbar/bootstrap5.css +25 -4
- package/styles/toolbar/fabric-dark.css +25 -4
- package/styles/toolbar/fabric.css +25 -4
- package/styles/toolbar/fluent-dark.css +36 -15
- package/styles/toolbar/fluent.css +36 -15
- package/styles/toolbar/highcontrast-light.css +25 -4
- package/styles/toolbar/highcontrast.css +25 -4
- package/styles/toolbar/icons/_bds.scss +16 -0
- package/styles/toolbar/material-dark.css +25 -4
- package/styles/toolbar/material.css +25 -4
- package/styles/toolbar/material3-dark.css +25 -4
- package/styles/toolbar/material3.css +25 -4
- package/styles/toolbar/tailwind-dark.css +25 -4
- package/styles/toolbar/tailwind.css +25 -4
- package/styles/treeview/_bds-definition.scss +132 -0
- package/styles/treeview/_tailwind-definition.scss +1 -1
- package/styles/treeview/_theme.scss +1 -1
- package/styles/treeview/icons/_bds.scss +43 -0
- package/styles/treeview/tailwind-dark.css +2 -2
- package/styles/v-scroll/_bds-definition.scss +49 -0
- package/styles/v-scroll/icons/_bds.scss +27 -0
- package/.github/PULL_REQUEST_TEMPLATE/Bug.md +0 -63
- 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, '
|
|
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, '
|
|
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
|
-
|
|
2152
|
-
|
|
2153
|
-
|
|
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
|
-
|
|
2476
|
-
|
|
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
|
-
|
|
2479
|
-
var
|
|
2480
|
-
|
|
2481
|
-
|
|
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
|
-
|
|
2497
|
-
|
|
2498
|
-
|
|
2499
|
-
|
|
2500
|
-
|
|
2501
|
-
|
|
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
|
-
|
|
2504
|
-
|
|
2505
|
-
|
|
2506
|
-
|
|
2507
|
-
|
|
2508
|
-
|
|
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
|
-
|
|
2513
|
-
this.
|
|
2514
|
-
|
|
2515
|
-
|
|
2516
|
-
|
|
2517
|
-
|
|
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.
|
|
2523
|
-
|
|
2524
|
-
|
|
2525
|
-
|
|
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
|
-
|
|
2530
|
-
|
|
2531
|
-
|
|
2532
|
-
|
|
2533
|
-
|
|
2534
|
-
|
|
2535
|
-
|
|
2536
|
-
|
|
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
|
-
|
|
2553
|
-
|
|
2554
|
-
|
|
2555
|
-
|
|
2556
|
-
|
|
2557
|
-
|
|
2558
|
-
|
|
2559
|
-
|
|
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
|
-
|
|
2564
|
-
|
|
2565
|
-
|
|
2566
|
-
|
|
2567
|
-
|
|
2568
|
-
|
|
2569
|
-
|
|
2570
|
-
|
|
2571
|
-
|
|
2572
|
-
|
|
2573
|
-
|
|
2574
|
-
|
|
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
|
-
|
|
2634
|
-
|
|
2635
|
-
|
|
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, '
|
|
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, '
|
|
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(
|
|
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
|
-
|
|
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
|
-
|
|
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.
|
|
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
|
-
|
|
6506
|
-
|
|
6507
|
-
|
|
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,
|
|
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(
|
|
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(
|
|
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(
|
|
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.
|
|
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
|
-
|
|
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
|
-
|
|
10825
|
+
e.item.setAttribute('aria-checked', 'true');
|
|
10813
10826
|
this.addCheck(e.item);
|
|
10814
10827
|
}
|
|
10815
10828
|
else {
|
|
10816
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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 =
|
|
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(
|
|
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
|
-
|
|
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 {
|