@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.
Files changed (50) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/README.md +7 -7
  3. package/dist/ej2-navigations.umd.min.js +2 -2
  4. package/dist/ej2-navigations.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-navigations.es2015.js +87 -76
  6. package/dist/es6/ej2-navigations.es2015.js.map +1 -1
  7. package/dist/es6/ej2-navigations.es5.js +87 -76
  8. package/dist/es6/ej2-navigations.es5.js.map +1 -1
  9. package/dist/global/ej2-navigations.min.js +2 -2
  10. package/dist/global/ej2-navigations.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +23 -12
  13. package/src/breadcrumb/breadcrumb.js +19 -10
  14. package/src/common/menu-base.js +2 -2
  15. package/src/tab/tab.js +66 -64
  16. package/styles/bootstrap-dark.css +15 -2
  17. package/styles/bootstrap.css +15 -2
  18. package/styles/bootstrap4.css +15 -2
  19. package/styles/bootstrap5-dark.css +19 -3
  20. package/styles/bootstrap5.css +19 -3
  21. package/styles/breadcrumb/_layout.scss +13 -0
  22. package/styles/breadcrumb/_theme.scss +1 -1
  23. package/styles/breadcrumb/bootstrap-dark.css +13 -0
  24. package/styles/breadcrumb/bootstrap.css +13 -0
  25. package/styles/breadcrumb/bootstrap4.css +13 -0
  26. package/styles/breadcrumb/bootstrap5-dark.css +16 -0
  27. package/styles/breadcrumb/bootstrap5.css +16 -0
  28. package/styles/breadcrumb/fabric-dark.css +16 -0
  29. package/styles/breadcrumb/fabric.css +16 -0
  30. package/styles/breadcrumb/highcontrast-light.css +17 -1
  31. package/styles/breadcrumb/highcontrast.css +17 -1
  32. package/styles/breadcrumb/material-dark.css +16 -0
  33. package/styles/breadcrumb/material.css +16 -0
  34. package/styles/breadcrumb/tailwind-dark.css +16 -0
  35. package/styles/breadcrumb/tailwind.css +16 -0
  36. package/styles/fabric-dark.css +16 -0
  37. package/styles/fabric.css +16 -0
  38. package/styles/highcontrast-light.css +17 -1
  39. package/styles/highcontrast.css +17 -1
  40. package/styles/material-dark.css +16 -0
  41. package/styles/material.css +16 -0
  42. package/styles/tab/_bootstrap5-definition.scss +1 -1
  43. package/styles/tab/_layout.scss +1 -1
  44. package/styles/tab/bootstrap-dark.css +2 -2
  45. package/styles/tab/bootstrap.css +2 -2
  46. package/styles/tab/bootstrap4.css +2 -2
  47. package/styles/tab/bootstrap5-dark.css +3 -3
  48. package/styles/tab/bootstrap5.css +3 -3
  49. package/styles/tailwind-dark.css +16 -0
  50. 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 property = Object.keys(newProp.items[index])[0];
8628
- var oldVal = Object(oldProp.items[index])[property];
8629
- var newVal = Object(newProp.items[index])[property];
8630
- var hdr = this.element.querySelectorAll('.' + CLS_TB_ITEM)[index];
8631
- var itemIndex = void 0;
8632
- if (hdr && !isNullOrUndefined(hdr.id) && hdr.id !== '') {
8633
- var num = (hdr.id.indexOf('_'));
8634
- itemIndex = parseInt(hdr.id.substring(num + 1), 10);
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
- this.tbId = hdr.id;
8650
- var arr = [];
8651
- arr.push(this.items[index]);
8652
- this.items.splice(index, 1);
8653
- this.itemIndexArray.splice(index, 1);
8654
- this.tbObj.items.splice(index, 1);
8655
- var isHiddenEle = hdrItem.classList.contains(CLS_HIDDEN$1);
8656
- detach(hdrItem);
8657
- this.isReplace = true;
8658
- this.addTab(arr, index);
8659
- if (isHiddenEle) {
8660
- this.hideTab(index);
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
- else if (this.isReact && typeof newVal === 'object') {
8677
- cntItem.innerHTML = '';
8678
- this.templateCompile(cntItem, newVal, index);
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
- else if (typeof newVal !== 'function') {
8681
- cntItem.innerHTML = newVal;
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
- if (property === 'cssClass') {
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 (!isNullOrUndefined(cntItem)) {
8690
- cntItem.classList.remove(oldVal);
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
- items.push({ text: uri[i], url: baseUri + uri[i] });
15362
- baseUri += uri[i] + '/';
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 (isDisabled_1 || eventArgs.element.classList.contains('e-disabled')) {
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
  };