@syncfusion/ej2-navigations 19.4.47 → 19.4.53
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 +42 -0
- package/README.md +1 -1
- 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 +50 -29
- package/dist/es6/ej2-navigations.es2015.js.map +1 -1
- package/dist/es6/ej2-navigations.es5.js +49 -28
- 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 +11 -11
- package/src/accordion/accordion.js +13 -11
- package/src/common/menu-base.d.ts +1 -1
- package/src/common/menu-base.js +13 -10
- package/src/sidebar/sidebar.d.ts +1 -0
- package/src/sidebar/sidebar.js +3 -1
- package/src/tab/tab.js +1 -0
- package/src/toolbar/toolbar.js +19 -6
- package/styles/bootstrap-dark.css +5 -2
- package/styles/bootstrap.css +5 -2
- package/styles/bootstrap4.css +5 -2
- package/styles/bootstrap5-dark.css +5 -2
- package/styles/bootstrap5.css +5 -2
- package/styles/fabric-dark.css +5 -2
- package/styles/fabric.css +5 -2
- package/styles/highcontrast-light.css +5 -2
- package/styles/highcontrast.css +5 -2
- package/styles/material-dark.css +5 -2
- package/styles/material.css +5 -2
- package/styles/tailwind-dark.css +5 -2
- package/styles/tailwind.css +5 -2
- package/styles/toolbar/_layout.scss +4 -2
- package/styles/toolbar/bootstrap-dark.css +5 -2
- package/styles/toolbar/bootstrap.css +5 -2
- package/styles/toolbar/bootstrap4.css +5 -2
- package/styles/toolbar/bootstrap5-dark.css +5 -2
- package/styles/toolbar/bootstrap5.css +5 -2
- package/styles/toolbar/fabric-dark.css +5 -2
- package/styles/toolbar/fabric.css +5 -2
- package/styles/toolbar/highcontrast-light.css +5 -2
- package/styles/toolbar/highcontrast.css +5 -2
- package/styles/toolbar/material-dark.css +5 -2
- package/styles/toolbar/material.css +5 -2
- package/styles/toolbar/tailwind-dark.css +5 -2
- package/styles/toolbar/tailwind.css +5 -2
|
@@ -2545,21 +2545,24 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
|
|
|
2545
2545
|
* This method is used to set the menu item in the Menu based on the argument.
|
|
2546
2546
|
*
|
|
2547
2547
|
* @param {MenuItem} item - item need to be updated.
|
|
2548
|
-
* @param {string} id - id to be passed to update the item.
|
|
2548
|
+
* @param {string} id - id / text to be passed to update the item.
|
|
2549
2549
|
* @param {boolean} isUniqueId - Set `true` if it is a unique id.
|
|
2550
2550
|
* @returns {void}
|
|
2551
2551
|
*/
|
|
2552
2552
|
MenuBase.prototype.setItem = function (item, id, isUniqueId) {
|
|
2553
|
-
var idx
|
|
2554
|
-
|
|
2555
|
-
|
|
2553
|
+
var idx;
|
|
2554
|
+
if (isUniqueId) {
|
|
2555
|
+
idx = id ? id : item.id;
|
|
2556
|
+
}
|
|
2557
|
+
else {
|
|
2558
|
+
idx = id ? id : item.text;
|
|
2559
|
+
}
|
|
2560
|
+
var navIdx = this.getIndex(idx, isUniqueId);
|
|
2556
2561
|
var newItem = this.getItem(navIdx);
|
|
2557
|
-
newItem.iconCss = item.iconCss;
|
|
2558
|
-
newItem.
|
|
2559
|
-
newItem.
|
|
2560
|
-
newItem.
|
|
2561
|
-
newItem.separator = item.separator;
|
|
2562
|
-
newItem.items = item.items;
|
|
2562
|
+
newItem.iconCss = item.iconCss || newItem.iconCss;
|
|
2563
|
+
newItem.text = item.text || newItem.text;
|
|
2564
|
+
newItem.url = item.url || newItem.url;
|
|
2565
|
+
newItem.separator = item.separator || newItem.separator;
|
|
2563
2566
|
};
|
|
2564
2567
|
MenuBase.prototype.getItem = function (navIdx) {
|
|
2565
2568
|
navIdx = navIdx.slice();
|
|
@@ -3436,7 +3439,7 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
|
|
|
3436
3439
|
*/
|
|
3437
3440
|
Toolbar.prototype.destroy = function () {
|
|
3438
3441
|
var _this = this;
|
|
3439
|
-
if (this.isReact) {
|
|
3442
|
+
if (this.isReact || this.isAngular) {
|
|
3440
3443
|
this.clearTemplate();
|
|
3441
3444
|
}
|
|
3442
3445
|
var btnItems = this.element.querySelectorAll('.e-control.e-btn');
|
|
@@ -3445,20 +3448,28 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
|
|
|
3445
3448
|
el.ej2_instances[0].destroy();
|
|
3446
3449
|
}
|
|
3447
3450
|
});
|
|
3448
|
-
_super.prototype.destroy.call(this);
|
|
3449
3451
|
this.unwireEvents();
|
|
3450
3452
|
this.tempId.forEach(function (ele) {
|
|
3451
3453
|
if (!isNullOrUndefined(_this.element.querySelector(ele))) {
|
|
3452
3454
|
document.body.appendChild(_this.element.querySelector(ele)).style.display = 'none';
|
|
3453
3455
|
}
|
|
3454
3456
|
});
|
|
3457
|
+
this.destroyItems();
|
|
3455
3458
|
while (this.element.lastElementChild) {
|
|
3456
3459
|
this.element.removeChild(this.element.lastElementChild);
|
|
3457
3460
|
}
|
|
3458
3461
|
if (this.trgtEle) {
|
|
3459
3462
|
this.element.appendChild(this.ctrlTem);
|
|
3463
|
+
this.trgtEle = null;
|
|
3464
|
+
this.ctrlTem = null;
|
|
3465
|
+
}
|
|
3466
|
+
if (this.popObj) {
|
|
3467
|
+
this.popObj.destroy();
|
|
3468
|
+
detach(this.popObj.element);
|
|
3469
|
+
}
|
|
3470
|
+
if (this.activeEle) {
|
|
3471
|
+
this.activeEle = null;
|
|
3460
3472
|
}
|
|
3461
|
-
this.clearProperty();
|
|
3462
3473
|
this.popObj = null;
|
|
3463
3474
|
this.tbarAlign = null;
|
|
3464
3475
|
this.remove(this.element, 'e-toolpop');
|
|
@@ -3469,6 +3480,7 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
|
|
|
3469
3480
|
['aria-disabled', 'aria-orientation', 'aria-haspopup', 'role'].forEach(function (attrb) {
|
|
3470
3481
|
return _this.element.removeAttribute(attrb);
|
|
3471
3482
|
});
|
|
3483
|
+
_super.prototype.destroy.call(this);
|
|
3472
3484
|
};
|
|
3473
3485
|
/**
|
|
3474
3486
|
* Initialize the event handler
|
|
@@ -3558,8 +3570,8 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
|
|
|
3558
3570
|
if (this.element) {
|
|
3559
3571
|
[].slice.call(this.element.querySelectorAll('.' + CLS_ITEM)).forEach(function (el) { detach(el); });
|
|
3560
3572
|
}
|
|
3561
|
-
var tbarItems = this.element.querySelector('.' + CLS_ITEMS);
|
|
3562
3573
|
if (this.tbarAlign) {
|
|
3574
|
+
var tbarItems = this.element.querySelector('.' + CLS_ITEMS);
|
|
3563
3575
|
[].slice.call(tbarItems.children).forEach(function (el) {
|
|
3564
3576
|
detach(el);
|
|
3565
3577
|
});
|
|
@@ -3643,6 +3655,10 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
|
|
|
3643
3655
|
case 'end':
|
|
3644
3656
|
if (clst) {
|
|
3645
3657
|
var popupCheck = closest(clst, '.e-popup');
|
|
3658
|
+
var extendedPopup = this.element.querySelector('.' + CLS_EXTENDABLECLASS);
|
|
3659
|
+
if (this.overflowMode === 'Extended' && extendedPopup && extendedPopup.classList.contains('e-popup-open')) {
|
|
3660
|
+
popupCheck = e.action === 'end' ? extendedPopup : null;
|
|
3661
|
+
}
|
|
3646
3662
|
if (popupCheck) {
|
|
3647
3663
|
if (isVisible(this.popObj.element)) {
|
|
3648
3664
|
nodes = [].slice.call(popupCheck.children);
|
|
@@ -3655,7 +3671,7 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
|
|
|
3655
3671
|
}
|
|
3656
3672
|
}
|
|
3657
3673
|
else {
|
|
3658
|
-
nodes = this.element.querySelectorAll('.' + CLS_ITEMS + ' .' + CLS_ITEM);
|
|
3674
|
+
nodes = this.element.querySelectorAll('.' + CLS_ITEMS + ' .' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + ')');
|
|
3659
3675
|
if (e.action === 'home') {
|
|
3660
3676
|
ele = nodes[0];
|
|
3661
3677
|
}
|
|
@@ -5199,7 +5215,7 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
|
|
|
5199
5215
|
};
|
|
5200
5216
|
Toolbar.prototype.itemsRerender = function (newProp) {
|
|
5201
5217
|
this.items = this.tbarItemsCol;
|
|
5202
|
-
if (this.isReact) {
|
|
5218
|
+
if (this.isReact || this.isAngular) {
|
|
5203
5219
|
this.clearTemplate();
|
|
5204
5220
|
}
|
|
5205
5221
|
this.destroyMode();
|
|
@@ -5668,7 +5684,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
|
|
|
5668
5684
|
*/
|
|
5669
5685
|
Accordion.prototype.destroy = function () {
|
|
5670
5686
|
var _this = this;
|
|
5671
|
-
if (this.isReact) {
|
|
5687
|
+
if (this.isReact || this.isAngular || this.isVue) {
|
|
5672
5688
|
this.clearTemplate();
|
|
5673
5689
|
}
|
|
5674
5690
|
var ele = this.element;
|
|
@@ -5680,9 +5696,11 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
|
|
|
5680
5696
|
ele.removeChild(el);
|
|
5681
5697
|
});
|
|
5682
5698
|
if (this.trgtEle) {
|
|
5699
|
+
this.trgtEle = null;
|
|
5683
5700
|
while (this.ctrlTem.firstElementChild) {
|
|
5684
5701
|
ele.appendChild(this.ctrlTem.firstElementChild);
|
|
5685
5702
|
}
|
|
5703
|
+
this.ctrlTem = null;
|
|
5686
5704
|
}
|
|
5687
5705
|
ele.classList.remove(CLS_ACRDN_ROOT);
|
|
5688
5706
|
ele.removeAttribute('style');
|
|
@@ -6043,11 +6061,13 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
|
|
|
6043
6061
|
else {
|
|
6044
6062
|
trgt.click();
|
|
6045
6063
|
}
|
|
6064
|
+
e.preventDefault();
|
|
6046
6065
|
break;
|
|
6047
6066
|
case 'home':
|
|
6048
6067
|
case 'end':
|
|
6049
6068
|
clst = e.action === 'home' ? root.firstElementChild.children[0] : root.lastElementChild.children[0];
|
|
6050
6069
|
clst.focus();
|
|
6070
|
+
e.preventDefault();
|
|
6051
6071
|
break;
|
|
6052
6072
|
}
|
|
6053
6073
|
};
|
|
@@ -6055,19 +6075,17 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
|
|
|
6055
6075
|
var header = this.createElement('div', { className: CLS_HEADER, id: getUniqueID('acrdn_header') });
|
|
6056
6076
|
var items = this.getItems();
|
|
6057
6077
|
var ariaAttr = {
|
|
6058
|
-
'tabindex': '0', 'role': 'heading', 'aria-
|
|
6078
|
+
'tabindex': '0', 'role': 'heading', 'aria-label': 'collapsed',
|
|
6059
6079
|
'aria-disabled': 'false', 'aria-level': items.length.toString()
|
|
6060
6080
|
};
|
|
6061
6081
|
attributes(header, ariaAttr);
|
|
6062
6082
|
return header;
|
|
6063
6083
|
};
|
|
6064
6084
|
Accordion.prototype.renderInnerItem = function (item, index) {
|
|
6065
|
-
var innerEle = this.createElement('div', {
|
|
6066
|
-
|
|
6067
|
-
|
|
6068
|
-
|
|
6069
|
-
}
|
|
6070
|
-
attributes(innerEle, { 'aria-expanded': 'false', 'role': 'row' });
|
|
6085
|
+
var innerEle = this.createElement('div', {
|
|
6086
|
+
className: CLS_ITEM$1, id: item.id || getUniqueID('acrdn_item'),
|
|
6087
|
+
attrs: { 'aria-expanded': 'false', 'role': 'row' }
|
|
6088
|
+
});
|
|
6071
6089
|
if (this.headerTemplate) {
|
|
6072
6090
|
var ctnEle = this.headerEleGenerate();
|
|
6073
6091
|
var hdrEle = this.createElement('div', { className: CLS_HEADERCTN });
|
|
@@ -6311,7 +6329,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
|
|
|
6311
6329
|
this.add(trgtItemEle, CLS_ACTIVE);
|
|
6312
6330
|
trgt.setAttribute('aria-hidden', 'false');
|
|
6313
6331
|
attributes(trgtItemEle, { 'aria-expanded': 'true' });
|
|
6314
|
-
attributes(trgt.previousElementSibling, { 'aria-
|
|
6332
|
+
attributes(trgt.previousElementSibling, { 'aria-label': 'expanded' });
|
|
6315
6333
|
icon.classList.remove(CLS_TOGANIMATE);
|
|
6316
6334
|
this.trigger('expanded', eventArgs);
|
|
6317
6335
|
}
|
|
@@ -6428,7 +6446,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
|
|
|
6428
6446
|
this.remove(trgtItemEle, CLS_ACTIVE);
|
|
6429
6447
|
trgt.setAttribute('aria-hidden', 'true');
|
|
6430
6448
|
attributes(trgtItemEle, { 'aria-expanded': 'false' });
|
|
6431
|
-
attributes(trgt.previousElementSibling, { 'aria-
|
|
6449
|
+
attributes(trgt.previousElementSibling, { 'aria-label': 'collapsed' });
|
|
6432
6450
|
this.trigger('expanded', eventArgs);
|
|
6433
6451
|
}
|
|
6434
6452
|
};
|
|
@@ -6671,7 +6689,7 @@ var Accordion = /** @__PURE__ @class */ (function (_super) {
|
|
|
6671
6689
|
};
|
|
6672
6690
|
Accordion.prototype.destroyItems = function () {
|
|
6673
6691
|
this.restoreContent(null);
|
|
6674
|
-
if (this.isReact) {
|
|
6692
|
+
if (this.isReact || this.isAngular || this.isVue) {
|
|
6675
6693
|
this.clearTemplate();
|
|
6676
6694
|
}
|
|
6677
6695
|
[].slice.call(this.element.querySelectorAll('.' + CLS_ITEM$1)).forEach(function (el) {
|
|
@@ -8136,6 +8154,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
|
|
|
8136
8154
|
};
|
|
8137
8155
|
Tab.prototype.getContent = function (ele, cnt, callType, index) {
|
|
8138
8156
|
var eleStr;
|
|
8157
|
+
cnt = isNullOrUndefined(cnt) ? "" : cnt;
|
|
8139
8158
|
if (typeof cnt === 'string' || isNullOrUndefined(cnt.innerHTML)) {
|
|
8140
8159
|
if (typeof cnt === 'string' && this.enableHtmlSanitizer) {
|
|
8141
8160
|
cnt = SanitizeHtmlHelper.sanitize(cnt);
|
|
@@ -14756,6 +14775,7 @@ var Sidebar = /** @__PURE__ @class */ (function (_super) {
|
|
|
14756
14775
|
}
|
|
14757
14776
|
if (this.isOpen) {
|
|
14758
14777
|
this.show();
|
|
14778
|
+
this.firstRender = true;
|
|
14759
14779
|
}
|
|
14760
14780
|
else {
|
|
14761
14781
|
this.setMediaQuery();
|
|
@@ -14866,9 +14886,10 @@ var Sidebar = /** @__PURE__ @class */ (function (_super) {
|
|
|
14866
14886
|
};
|
|
14867
14887
|
Sidebar.prototype.transitionEnd = function (e) {
|
|
14868
14888
|
this.setDock();
|
|
14869
|
-
if (!isNullOrUndefined(e)) {
|
|
14889
|
+
if (!isNullOrUndefined(e) && !this.firstRender) {
|
|
14870
14890
|
this.triggerChange();
|
|
14871
14891
|
}
|
|
14892
|
+
this.firstRender = false;
|
|
14872
14893
|
EventHandler.remove(this.element, 'transitionend', this.transitionEnd);
|
|
14873
14894
|
};
|
|
14874
14895
|
Sidebar.prototype.destroyBackDrop = function () {
|