@syncfusion/ej2-navigations 19.3.43 → 19.3.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 +18 -0
- package/README.md +7 -7
- 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 +87 -76
- package/dist/es6/ej2-navigations.es2015.js.map +1 -1
- package/dist/es6/ej2-navigations.es5.js +87 -76
- 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 +23 -12
- package/src/breadcrumb/breadcrumb.js +19 -10
- package/src/common/menu-base.js +2 -2
- package/src/tab/tab.js +66 -64
- package/styles/bootstrap-dark.css +15 -2
- package/styles/bootstrap.css +15 -2
- package/styles/bootstrap4.css +15 -2
- package/styles/bootstrap5-dark.css +19 -3
- package/styles/bootstrap5.css +19 -3
- package/styles/breadcrumb/_layout.scss +13 -0
- package/styles/breadcrumb/_theme.scss +1 -1
- package/styles/breadcrumb/bootstrap-dark.css +13 -0
- package/styles/breadcrumb/bootstrap.css +13 -0
- package/styles/breadcrumb/bootstrap4.css +13 -0
- package/styles/breadcrumb/bootstrap5-dark.css +16 -0
- package/styles/breadcrumb/bootstrap5.css +16 -0
- package/styles/breadcrumb/fabric-dark.css +16 -0
- package/styles/breadcrumb/fabric.css +16 -0
- package/styles/breadcrumb/highcontrast-light.css +17 -1
- package/styles/breadcrumb/highcontrast.css +17 -1
- package/styles/breadcrumb/material-dark.css +16 -0
- package/styles/breadcrumb/material.css +16 -0
- package/styles/breadcrumb/tailwind-dark.css +16 -0
- package/styles/breadcrumb/tailwind.css +16 -0
- package/styles/fabric-dark.css +16 -0
- package/styles/fabric.css +16 -0
- package/styles/highcontrast-light.css +17 -1
- package/styles/highcontrast.css +17 -1
- package/styles/material-dark.css +16 -0
- package/styles/material.css +16 -0
- package/styles/tab/_bootstrap5-definition.scss +1 -1
- package/styles/tab/_layout.scss +1 -1
- package/styles/tab/bootstrap-dark.css +2 -2
- package/styles/tab/bootstrap.css +2 -2
- package/styles/tab/bootstrap4.css +2 -2
- package/styles/tab/bootstrap5-dark.css +3 -3
- package/styles/tab/bootstrap5.css +3 -3
- package/styles/tailwind-dark.css +16 -0
- package/styles/tailwind.css +16 -0
|
@@ -2015,8 +2015,8 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
|
|
|
2015
2015
|
_this.setBlankIconStyle(_this.popupWrapper);
|
|
2016
2016
|
_this.wireKeyboardEvent(_this.popupWrapper);
|
|
2017
2017
|
rippleEffect(_this.popupWrapper, { selector: '.' + ITEM });
|
|
2018
|
-
_this.popupWrapper.style.left = _this.left + 'px';
|
|
2019
|
-
_this.popupWrapper.style.top = _this.top + 'px';
|
|
2018
|
+
_this.popupWrapper.style.left = _this.left + pageXOffset + 'px';
|
|
2019
|
+
_this.popupWrapper.style.top = _this.top + pageYOffset + 'px';
|
|
2020
2020
|
var animationOptions = _this.animationSettings.effect !== 'None' ? {
|
|
2021
2021
|
name: _this.animationSettings.effect, duration: _this.animationSettings.duration,
|
|
2022
2022
|
timingFunction: _this.animationSettings.easing
|
|
@@ -8624,79 +8624,81 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
|
|
|
8624
8624
|
var changedProp = Object.keys(newProp.items);
|
|
8625
8625
|
for (var i = 0; i < changedProp.length; i++) {
|
|
8626
8626
|
var index = parseInt(Object.keys(newProp.items)[i], 10);
|
|
8627
|
-
var
|
|
8628
|
-
var
|
|
8629
|
-
|
|
8630
|
-
|
|
8631
|
-
|
|
8632
|
-
|
|
8633
|
-
|
|
8634
|
-
|
|
8635
|
-
|
|
8636
|
-
else {
|
|
8637
|
-
itemIndex = index;
|
|
8638
|
-
}
|
|
8639
|
-
var hdrItem = select('.' + CLS_TB_ITEMS + ' #' + CLS_ITEM$2 + this.tabId + '_' + itemIndex, this.element);
|
|
8640
|
-
var cntItem = select('.' + CLS_CONTENT$1 + ' #' + CLS_CONTENT$1 + this.tabId + '_' + itemIndex, this.element);
|
|
8641
|
-
if (property === 'header' || property === 'headerTemplate') {
|
|
8642
|
-
var icon = (isNullOrUndefined(this.items[index].header) ||
|
|
8643
|
-
isNullOrUndefined(this.items[index].header.iconCss)) ? '' : this.items[index].header.iconCss;
|
|
8644
|
-
var textVal = this.items[index].headerTemplate || this.items[index].header.text;
|
|
8645
|
-
if ((textVal === '') && (icon === '')) {
|
|
8646
|
-
this.removeTab(index);
|
|
8627
|
+
var properties = Object.keys(newProp.items[index]);
|
|
8628
|
+
for (var j = 0; j < properties.length; j++) {
|
|
8629
|
+
var oldVal = Object(oldProp.items[index])[properties[j]];
|
|
8630
|
+
var newVal = Object(newProp.items[index])[properties[j]];
|
|
8631
|
+
var hdr = this.element.querySelectorAll('.' + CLS_TB_ITEM)[index];
|
|
8632
|
+
var itemIndex = void 0;
|
|
8633
|
+
if (hdr && !isNullOrUndefined(hdr.id) && hdr.id !== '') {
|
|
8634
|
+
var num = (hdr.id.indexOf('_'));
|
|
8635
|
+
itemIndex = parseInt(hdr.id.substring(num + 1), 10);
|
|
8647
8636
|
}
|
|
8648
8637
|
else {
|
|
8649
|
-
|
|
8650
|
-
|
|
8651
|
-
|
|
8652
|
-
|
|
8653
|
-
|
|
8654
|
-
this.
|
|
8655
|
-
|
|
8656
|
-
|
|
8657
|
-
|
|
8658
|
-
|
|
8659
|
-
|
|
8660
|
-
|
|
8638
|
+
itemIndex = index;
|
|
8639
|
+
}
|
|
8640
|
+
var hdrItem = select('.' + CLS_TB_ITEMS + ' #' + CLS_ITEM$2 + this.tabId + '_' + itemIndex, this.element);
|
|
8641
|
+
var cntItem = select('.' + CLS_CONTENT$1 + ' #' + CLS_CONTENT$1 + this.tabId + '_' + itemIndex, this.element);
|
|
8642
|
+
if (properties[j] === 'header' || properties[j] === 'headerTemplate') {
|
|
8643
|
+
var icon = (isNullOrUndefined(this.items[index].header) ||
|
|
8644
|
+
isNullOrUndefined(this.items[index].header.iconCss)) ? '' : this.items[index].header.iconCss;
|
|
8645
|
+
var textVal = this.items[index].headerTemplate || this.items[index].header.text;
|
|
8646
|
+
if ((textVal === '') && (icon === '')) {
|
|
8647
|
+
this.removeTab(index);
|
|
8648
|
+
}
|
|
8649
|
+
else {
|
|
8650
|
+
this.tbId = hdr.id;
|
|
8651
|
+
var arr = [];
|
|
8652
|
+
arr.push(this.items[index]);
|
|
8653
|
+
this.items.splice(index, 1);
|
|
8654
|
+
this.itemIndexArray.splice(index, 1);
|
|
8655
|
+
this.tbObj.items.splice(index, 1);
|
|
8656
|
+
var isHiddenEle = hdrItem.classList.contains(CLS_HIDDEN$1);
|
|
8657
|
+
detach(hdrItem);
|
|
8658
|
+
this.isReplace = true;
|
|
8659
|
+
this.addTab(arr, index);
|
|
8660
|
+
if (isHiddenEle) {
|
|
8661
|
+
this.hideTab(index);
|
|
8662
|
+
}
|
|
8663
|
+
this.isReplace = false;
|
|
8661
8664
|
}
|
|
8662
|
-
this.isReplace = false;
|
|
8663
|
-
}
|
|
8664
|
-
}
|
|
8665
|
-
if (property === 'content' && !isNullOrUndefined(cntItem)) {
|
|
8666
|
-
var strVal = typeof newVal === 'string' || isNullOrUndefined(newVal.innerHTML);
|
|
8667
|
-
if (strVal && (newVal[0] === '.' || newVal[0] === '#') && newVal.length) {
|
|
8668
|
-
var eleVal = document.querySelector(newVal);
|
|
8669
|
-
cntItem.appendChild(eleVal);
|
|
8670
|
-
eleVal.style.display = '';
|
|
8671
|
-
}
|
|
8672
|
-
else if (newVal === '' && oldVal[0] === '#') {
|
|
8673
|
-
document.body.appendChild(this.element.querySelector(oldVal)).style.display = 'none';
|
|
8674
|
-
cntItem.innerHTML = newVal;
|
|
8675
8665
|
}
|
|
8676
|
-
|
|
8677
|
-
|
|
8678
|
-
|
|
8666
|
+
if (properties[j] === 'content' && !isNullOrUndefined(cntItem)) {
|
|
8667
|
+
var strVal = typeof newVal === 'string' || isNullOrUndefined(newVal.innerHTML);
|
|
8668
|
+
if (strVal && (newVal[0] === '.' || newVal[0] === '#') && newVal.length) {
|
|
8669
|
+
var eleVal = document.querySelector(newVal);
|
|
8670
|
+
cntItem.appendChild(eleVal);
|
|
8671
|
+
eleVal.style.display = '';
|
|
8672
|
+
}
|
|
8673
|
+
else if (newVal === '' && oldVal[0] === '#') {
|
|
8674
|
+
document.body.appendChild(this.element.querySelector(oldVal)).style.display = 'none';
|
|
8675
|
+
cntItem.innerHTML = newVal;
|
|
8676
|
+
}
|
|
8677
|
+
else if (this.isReact) {
|
|
8678
|
+
cntItem.innerHTML = '';
|
|
8679
|
+
this.templateCompile(cntItem, newVal, index);
|
|
8680
|
+
}
|
|
8681
|
+
else if (typeof newVal !== 'function') {
|
|
8682
|
+
cntItem.innerHTML = newVal;
|
|
8683
|
+
}
|
|
8679
8684
|
}
|
|
8680
|
-
|
|
8681
|
-
|
|
8685
|
+
if (properties[j] === 'cssClass') {
|
|
8686
|
+
if (!isNullOrUndefined(hdrItem)) {
|
|
8687
|
+
hdrItem.classList.remove(oldVal);
|
|
8688
|
+
hdrItem.classList.add(newVal);
|
|
8689
|
+
}
|
|
8690
|
+
if (!isNullOrUndefined(cntItem)) {
|
|
8691
|
+
cntItem.classList.remove(oldVal);
|
|
8692
|
+
cntItem.classList.add(newVal);
|
|
8693
|
+
}
|
|
8682
8694
|
}
|
|
8683
|
-
|
|
8684
|
-
|
|
8685
|
-
if (!isNullOrUndefined(hdrItem)) {
|
|
8686
|
-
hdrItem.classList.remove(oldVal);
|
|
8687
|
-
hdrItem.classList.add(newVal);
|
|
8695
|
+
if (properties[j] === 'disabled') {
|
|
8696
|
+
this.enableTab(index, ((newVal === true) ? false : true));
|
|
8688
8697
|
}
|
|
8689
|
-
if (
|
|
8690
|
-
|
|
8691
|
-
cntItem.classList.add(newVal);
|
|
8698
|
+
if (properties[j] === 'visible') {
|
|
8699
|
+
this.hideTab(index, ((newVal === true) ? false : true));
|
|
8692
8700
|
}
|
|
8693
8701
|
}
|
|
8694
|
-
if (property === 'disabled') {
|
|
8695
|
-
this.enableTab(index, ((newVal === true) ? false : true));
|
|
8696
|
-
}
|
|
8697
|
-
if (property === 'visible') {
|
|
8698
|
-
this.hideTab(index, ((newVal === true) ? false : true));
|
|
8699
|
-
}
|
|
8700
8702
|
}
|
|
8701
8703
|
}
|
|
8702
8704
|
else {
|
|
@@ -15327,6 +15329,9 @@ var Breadcrumb = /** @__PURE__ @class */ (function (_super) {
|
|
|
15327
15329
|
if (this.cssClass) {
|
|
15328
15330
|
addClass([this.element], this.cssClass.split(' '));
|
|
15329
15331
|
}
|
|
15332
|
+
if (this.enableRtl) {
|
|
15333
|
+
this.element.classList.add('e-rtl');
|
|
15334
|
+
}
|
|
15330
15335
|
this.setWidth();
|
|
15331
15336
|
this.initItems();
|
|
15332
15337
|
this.initPvtProps();
|
|
@@ -15358,8 +15363,10 @@ var Breadcrumb = /** @__PURE__ @class */ (function (_super) {
|
|
|
15358
15363
|
}
|
|
15359
15364
|
items.push({ iconCss: 'e-icons e-home', url: baseUri });
|
|
15360
15365
|
for (var i = 0; i < uri.length; i++) {
|
|
15361
|
-
|
|
15362
|
-
|
|
15366
|
+
if (uri[i]) {
|
|
15367
|
+
items.push({ text: uri[i], url: baseUri + uri[i] });
|
|
15368
|
+
baseUri += uri[i] + '/';
|
|
15369
|
+
}
|
|
15363
15370
|
}
|
|
15364
15371
|
this.setProperties({ items: items }, true);
|
|
15365
15372
|
}
|
|
@@ -15386,13 +15393,6 @@ var Breadcrumb = /** @__PURE__ @class */ (function (_super) {
|
|
|
15386
15393
|
itemNavigable: true,
|
|
15387
15394
|
itemCreated: function (args) {
|
|
15388
15395
|
var isLastItem = args.curData.isLastItem;
|
|
15389
|
-
if (args.curData.isEmptyUrl) {
|
|
15390
|
-
args.item.children[0].removeAttribute('href');
|
|
15391
|
-
if (!isLastItem || (isLastItem && _this.enableActiveItemNavigation)) {
|
|
15392
|
-
args.item.children[0].setAttribute('tabindex', '0');
|
|
15393
|
-
EventHandler.add(args.item.children[0], 'keydown', _this.keyDownHandler, _this);
|
|
15394
|
-
}
|
|
15395
|
-
}
|
|
15396
15396
|
if (isLastItem && args.item.children.length && !_this.itemTemplate) {
|
|
15397
15397
|
delete args.curData.isLastItem;
|
|
15398
15398
|
args.item.innerHTML = _this.createElement('span', { className: ITEMTEXTCLASS, innerHTML: args.item.children[0].innerHTML }).outerHTML;
|
|
@@ -15416,13 +15416,21 @@ var Breadcrumb = /** @__PURE__ @class */ (function (_super) {
|
|
|
15416
15416
|
args.curData.properties : args.curData), element: args.item
|
|
15417
15417
|
};
|
|
15418
15418
|
_this.trigger('beforeItemRender', eventArgs);
|
|
15419
|
+
var isItemDisabled = isDisabled_1 || eventArgs.element.classList.contains('e-disabled');
|
|
15419
15420
|
var containsRightIcon = (isIconRight || eventArgs.element.classList.contains(ICONRIGHT));
|
|
15420
15421
|
if (containsRightIcon && args.curData.iconCss && !_this.itemTemplate) {
|
|
15421
15422
|
args.item.querySelector('.e-anchor-wrap').append(args.item.querySelector('.' + ICONCLASS));
|
|
15422
15423
|
}
|
|
15423
|
-
if (
|
|
15424
|
+
if (isItemDisabled) {
|
|
15424
15425
|
args.item.setAttribute('aria-disabled', 'true');
|
|
15425
15426
|
}
|
|
15427
|
+
if (args.curData.isEmptyUrl) {
|
|
15428
|
+
args.item.children[0].removeAttribute('href');
|
|
15429
|
+
if ((!isLastItem || (isLastItem && _this.enableActiveItemNavigation)) && !isItemDisabled) {
|
|
15430
|
+
args.item.children[0].setAttribute('tabindex', '0');
|
|
15431
|
+
EventHandler.add(args.item.children[0], 'keydown', _this.keyDownHandler, _this);
|
|
15432
|
+
}
|
|
15433
|
+
}
|
|
15426
15434
|
if (!_this.itemTemplate) {
|
|
15427
15435
|
_this.beforeItemRenderChanges(args.curData, eventArgs.item, args.item, containsRightIcon);
|
|
15428
15436
|
}
|
|
@@ -15643,6 +15651,9 @@ var Breadcrumb = /** @__PURE__ @class */ (function (_super) {
|
|
|
15643
15651
|
this.reRenderItems();
|
|
15644
15652
|
}
|
|
15645
15653
|
break;
|
|
15654
|
+
case 'enableRtl':
|
|
15655
|
+
this.element.classList.toggle('e-rtl');
|
|
15656
|
+
break;
|
|
15646
15657
|
}
|
|
15647
15658
|
}
|
|
15648
15659
|
};
|