@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.
- package/CHANGELOG.md +9 -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 +165 -137
- package/dist/es6/ej2-navigations.es2015.js.map +1 -1
- package/dist/es6/ej2-navigations.es5.js +165 -137
- 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.d.ts +1 -0
- package/src/toolbar/toolbar.js +35 -13
- package/src/treeview/treeview-model.d.ts +4 -7
- package/src/treeview/treeview.d.ts +3 -3
- package/src/treeview/treeview.js +15 -9
- 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 +12 -4
- package/styles/bootstrap.css +12 -4
- package/styles/bootstrap4.css +12 -4
- package/styles/bootstrap5-dark.css +12 -4
- package/styles/bootstrap5.css +12 -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 +12 -4
- package/styles/fabric.css +12 -4
- package/styles/fluent-dark.css +12 -4
- package/styles/fluent.css +12 -4
- package/styles/h-scroll/_bds-definition.scss +83 -0
- package/styles/h-scroll/icons/_bds.scss +49 -0
- package/styles/highcontrast-light.css +12 -4
- package/styles/highcontrast.css +12 -4
- package/styles/material-dark.css +12 -4
- package/styles/material.css +13 -5
- package/styles/material3-dark.css +12 -4
- package/styles/material3.css +12 -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 +14 -6
- package/styles/tailwind.css +12 -4
- package/styles/toolbar/_bds-definition.scss +215 -0
- package/styles/toolbar/_layout.scss +6 -7
- package/styles/toolbar/bootstrap-dark.css +3 -4
- package/styles/toolbar/bootstrap.css +3 -4
- package/styles/toolbar/bootstrap4.css +3 -4
- package/styles/toolbar/bootstrap5-dark.css +3 -4
- package/styles/toolbar/bootstrap5.css +3 -4
- package/styles/toolbar/fabric-dark.css +3 -4
- package/styles/toolbar/fabric.css +3 -4
- package/styles/toolbar/fluent-dark.css +3 -4
- package/styles/toolbar/fluent.css +3 -4
- package/styles/toolbar/highcontrast-light.css +3 -4
- package/styles/toolbar/highcontrast.css +3 -4
- package/styles/toolbar/icons/_bds.scss +16 -0
- package/styles/toolbar/material-dark.css +3 -4
- package/styles/toolbar/material.css +3 -4
- package/styles/toolbar/material3-dark.css +3 -4
- package/styles/toolbar/material3.css +3 -4
- package/styles/toolbar/tailwind-dark.css +3 -4
- package/styles/toolbar/tailwind.css +3 -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
|
@@ -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)
|
|
@@ -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 =
|
|
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
|
-
|
|
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
|
-
|
|
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.
|
|
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
|
-
|
|
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
|
-
|
|
6506
|
-
|
|
6507
|
-
|
|
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,
|
|
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(
|
|
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(
|
|
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(
|
|
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.
|
|
12735
|
-
|
|
12736
|
-
|
|
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(
|
|
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
|
-
|
|
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 {
|