@syncfusion/ej2-navigations 19.3.43 → 19.3.53

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 19.3.43
+*  version : 19.3.53
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-navigations@*",
-  "_id": "@syncfusion/ej2-navigations@19.24.0",
+  "_id": "@syncfusion/ej2-navigations@19.3.46",
   "_inBundle": false,
-  "_integrity": "sha512-GwkICjKbKkoanHn3QCyjoIu0/I8D187aan8GD1ucXEPK817+aPCpe6o36AwejZxdpfctgix/3/j13Cvu+V4ktg==",
+  "_integrity": "sha512-ozY9dc0GGqTcNMpbhJCv8MrWV3MgYWHQeVTFadfFnBMqMhwzn6fyNEK73MJrNcfE+nSwjUbz7Dqj8e5K+d/Uaw==",
   "_location": "/@syncfusion/ej2-navigations",
   "_phantomChildren": {},
   "_requested": {
@@ -37,8 +37,8 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-navigations"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-navigations/-/ej2-navigations-19.24.0.tgz",
-  "_shasum": "bdfa57ad56d525886446c2aaf30473d2e4218621",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix/@syncfusion/ej2-navigations/-/ej2-navigations-19.3.46.tgz",
+  "_shasum": "4eeb182a28336382e07bc63c924eb03b3e061c56",
   "_spec": "@syncfusion/ej2-navigations@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -49,12 +49,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~19.3.43",
-    "@syncfusion/ej2-buttons": "~19.3.43",
-    "@syncfusion/ej2-data": "~19.3.43",
-    "@syncfusion/ej2-inputs": "~19.3.43",
-    "@syncfusion/ej2-lists": "~19.3.43",
-    "@syncfusion/ej2-popups": "~19.3.43"
+    "@syncfusion/ej2-base": "~19.3.53",
+    "@syncfusion/ej2-buttons": "~19.3.53",
+    "@syncfusion/ej2-data": "~19.3.53",
+    "@syncfusion/ej2-inputs": "~19.3.53",
+    "@syncfusion/ej2-lists": "~19.3.53",
+    "@syncfusion/ej2-popups": "~19.3.53"
   },
   "deprecated": false,
   "description": "A package of Essential JS 2 navigation components such as Tree-view, Tab, Toolbar, Context-menu, and Accordion which is used to navigate from one page to another",
@@ -137,7 +137,18 @@
     "multiple-sidebar",
     "slide-navigation",
     "navigation-drawer",
-    "breadcrumb"
+    "breadcrumb",
+    "breadcrumb navigation",
+    "breadcrumb trail",
+    "ej2 breadcrumb",
+    "navigation links",
+    "navigational aid",
+    "previous page navigation",
+    "current page hierarchy",
+    "current page location",
+    "path of url",
+    "trace page location",
+    "list of breadcrumb links"
   ],
   "license": "SEE LICENSE IN license",
   "main": "./dist/ej2-navigations.umd.min.js",
@@ -148,6 +159,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "19.3.43",
+  "version": "19.3.53",
   "sideEffects": false
 }

package/src/breadcrumb/breadcrumb.js

@@ -88,6 +88,9 @@ var Breadcrumb = /** @class */ (function (_super) {
         if (this.cssClass) {
             addClass([this.element], this.cssClass.split(' '));
         }
+        if (this.enableRtl) {
+            this.element.classList.add('e-rtl');
+        }
         this.setWidth();
         this.initItems();
         this.initPvtProps();
@@ -119,8 +122,10 @@ var Breadcrumb = /** @class */ (function (_super) {
             }
             items.push({ iconCss: 'e-icons e-home', url: baseUri });
             for (var i = 0; i < uri.length; i++) {
-                items.push({ text: uri[i], url: baseUri + uri[i] });
-                baseUri += uri[i] + '/';
+                if (uri[i]) {
+                    items.push({ text: uri[i], url: baseUri + uri[i] });
+                    baseUri += uri[i] + '/';
+                }
             }
             this.setProperties({ items: items }, true);
         }
@@ -147,13 +152,6 @@ var Breadcrumb = /** @class */ (function (_super) {
                 itemNavigable: true,
                 itemCreated: function (args) {
                     var isLastItem = args.curData.isLastItem;
-                    if (args.curData.isEmptyUrl) {
-                        args.item.children[0].removeAttribute('href');
-                        if (!isLastItem || (isLastItem && _this.enableActiveItemNavigation)) {
-                            args.item.children[0].setAttribute('tabindex', '0');
-                            EventHandler.add(args.item.children[0], 'keydown', _this.keyDownHandler, _this);
-                        }
-                    }
                     if (isLastItem && args.item.children.length && !_this.itemTemplate) {
                         delete args.curData.isLastItem;
                         args.item.innerHTML = _this.createElement('span', { className: ITEMTEXTCLASS, innerHTML: args.item.children[0].innerHTML }).outerHTML;
@@ -177,13 +175,21 @@ var Breadcrumb = /** @class */ (function (_super) {
                             args.curData.properties : args.curData), element: args.item
                     };
                     _this.trigger('beforeItemRender', eventArgs);
+                    var isItemDisabled = isDisabled_1 || eventArgs.element.classList.contains('e-disabled');
                     var containsRightIcon = (isIconRight || eventArgs.element.classList.contains(ICONRIGHT));
                     if (containsRightIcon && args.curData.iconCss && !_this.itemTemplate) {
                         args.item.querySelector('.e-anchor-wrap').append(args.item.querySelector('.' + ICONCLASS));
                     }
-                    if (isDisabled_1 || eventArgs.element.classList.contains('e-disabled')) {
+                    if (isItemDisabled) {
                         args.item.setAttribute('aria-disabled', 'true');
                     }
+                    if (args.curData.isEmptyUrl) {
+                        args.item.children[0].removeAttribute('href');
+                        if ((!isLastItem || (isLastItem && _this.enableActiveItemNavigation)) && !isItemDisabled) {
+                            args.item.children[0].setAttribute('tabindex', '0');
+                            EventHandler.add(args.item.children[0], 'keydown', _this.keyDownHandler, _this);
+                        }
+                    }
                     if (!_this.itemTemplate) {
                         _this.beforeItemRenderChanges(args.curData, eventArgs.item, args.item, containsRightIcon);
                     }
@@ -404,6 +410,9 @@ var Breadcrumb = /** @class */ (function (_super) {
                         this.reRenderItems();
                     }
                     break;
+                case 'enableRtl':
+                    this.element.classList.toggle('e-rtl');
+                    break;
             }
         }
     };

package/src/common/menu-base.js

@@ -964,8 +964,8 @@ var MenuBase = /** @class */ (function (_super) {
                             _this.setBlankIconStyle(_this.popupWrapper);
                             _this.wireKeyboardEvent(_this.popupWrapper);
                             rippleEffect(_this.popupWrapper, { selector: '.' + ITEM });
-                            _this.popupWrapper.style.left = _this.left + 'px';
-                            _this.popupWrapper.style.top = _this.top + 'px';
+                            _this.popupWrapper.style.left = _this.left + pageXOffset + 'px';
+                            _this.popupWrapper.style.top = _this.top + pageYOffset + 'px';
                             var animationOptions = _this.animationSettings.effect !== 'None' ? {
                                 name: _this.animationSettings.effect, duration: _this.animationSettings.duration,
                                 timingFunction: _this.animationSettings.easing

package/src/tab/tab.js

@@ -1383,79 +1383,81 @@ var Tab = /** @class */ (function (_super) {
             var changedProp = Object.keys(newProp.items);
             for (var i = 0; i < changedProp.length; i++) {
                 var index = parseInt(Object.keys(newProp.items)[i], 10);
-                var property = Object.keys(newProp.items[index])[0];
-                var oldVal = Object(oldProp.items[index])[property];
-                var newVal = Object(newProp.items[index])[property];
-                var hdr = this.element.querySelectorAll('.' + CLS_TB_ITEM)[index];
-                var itemIndex = void 0;
-                if (hdr && !isNOU(hdr.id) && hdr.id !== '') {
-                    var num = (hdr.id.indexOf('_'));
-                    itemIndex = parseInt(hdr.id.substring(num + 1), 10);
-                }
-                else {
-                    itemIndex = index;
-                }
-                var hdrItem = select('.' + CLS_TB_ITEMS + ' #' + CLS_ITEM + this.tabId + '_' + itemIndex, this.element);
-                var cntItem = select('.' + CLS_CONTENT + ' #' + CLS_CONTENT + this.tabId + '_' + itemIndex, this.element);
-                if (property === 'header' || property === 'headerTemplate') {
-                    var icon = (isNOU(this.items[index].header) ||
-                        isNOU(this.items[index].header.iconCss)) ? '' : this.items[index].header.iconCss;
-                    var textVal = this.items[index].headerTemplate || this.items[index].header.text;
-                    if ((textVal === '') && (icon === '')) {
-                        this.removeTab(index);
+                var properties = Object.keys(newProp.items[index]);
+                for (var j = 0; j < properties.length; j++) {
+                    var oldVal = Object(oldProp.items[index])[properties[j]];
+                    var newVal = Object(newProp.items[index])[properties[j]];
+                    var hdr = this.element.querySelectorAll('.' + CLS_TB_ITEM)[index];
+                    var itemIndex = void 0;
+                    if (hdr && !isNOU(hdr.id) && hdr.id !== '') {
+                        var num = (hdr.id.indexOf('_'));
+                        itemIndex = parseInt(hdr.id.substring(num + 1), 10);
                     }
                     else {
-                        this.tbId = hdr.id;
-                        var arr = [];
-                        arr.push(this.items[index]);
-                        this.items.splice(index, 1);
-                        this.itemIndexArray.splice(index, 1);
-                        this.tbObj.items.splice(index, 1);
-                        var isHiddenEle = hdrItem.classList.contains(CLS_HIDDEN);
-                        detach(hdrItem);
-                        this.isReplace = true;
-                        this.addTab(arr, index);
-                        if (isHiddenEle) {
-                            this.hideTab(index);
-                        }
-                        this.isReplace = false;
-                    }
-                }
-                if (property === 'content' && !isNOU(cntItem)) {
-                    var strVal = typeof newVal === 'string' || isNOU(newVal.innerHTML);
-                    if (strVal && (newVal[0] === '.' || newVal[0] === '#') && newVal.length) {
-                        var eleVal = document.querySelector(newVal);
-                        cntItem.appendChild(eleVal);
-                        eleVal.style.display = '';
+                        itemIndex = index;
                     }
-                    else if (newVal === '' && oldVal[0] === '#') {
-                        document.body.appendChild(this.element.querySelector(oldVal)).style.display = 'none';
-                        cntItem.innerHTML = newVal;
+                    var hdrItem = select('.' + CLS_TB_ITEMS + ' #' + CLS_ITEM + this.tabId + '_' + itemIndex, this.element);
+                    var cntItem = select('.' + CLS_CONTENT + ' #' + CLS_CONTENT + this.tabId + '_' + itemIndex, this.element);
+                    if (properties[j] === 'header' || properties[j] === 'headerTemplate') {
+                        var icon = (isNOU(this.items[index].header) ||
+                            isNOU(this.items[index].header.iconCss)) ? '' : this.items[index].header.iconCss;
+                        var textVal = this.items[index].headerTemplate || this.items[index].header.text;
+                        if ((textVal === '') && (icon === '')) {
+                            this.removeTab(index);
+                        }
+                        else {
+                            this.tbId = hdr.id;
+                            var arr = [];
+                            arr.push(this.items[index]);
+                            this.items.splice(index, 1);
+                            this.itemIndexArray.splice(index, 1);
+                            this.tbObj.items.splice(index, 1);
+                            var isHiddenEle = hdrItem.classList.contains(CLS_HIDDEN);
+                            detach(hdrItem);
+                            this.isReplace = true;
+                            this.addTab(arr, index);
+                            if (isHiddenEle) {
+                                this.hideTab(index);
+                            }
+                            this.isReplace = false;
+                        }
                     }
-                    else if (this.isReact && typeof newVal === 'object') {
-                        cntItem.innerHTML = '';
-                        this.templateCompile(cntItem, newVal, index);
+                    if (properties[j] === 'content' && !isNOU(cntItem)) {
+                        var strVal = typeof newVal === 'string' || isNOU(newVal.innerHTML);
+                        if (strVal && (newVal[0] === '.' || newVal[0] === '#') && newVal.length) {
+                            var eleVal = document.querySelector(newVal);
+                            cntItem.appendChild(eleVal);
+                            eleVal.style.display = '';
+                        }
+                        else if (newVal === '' && oldVal[0] === '#') {
+                            document.body.appendChild(this.element.querySelector(oldVal)).style.display = 'none';
+                            cntItem.innerHTML = newVal;
+                        }
+                        else if (this.isReact) {
+                            cntItem.innerHTML = '';
+                            this.templateCompile(cntItem, newVal, index);
+                        }
+                        else if (typeof newVal !== 'function') {
+                            cntItem.innerHTML = newVal;
+                        }
                     }
-                    else if (typeof newVal !== 'function') {
-                        cntItem.innerHTML = newVal;
+                    if (properties[j] === 'cssClass') {
+                        if (!isNOU(hdrItem)) {
+                            hdrItem.classList.remove(oldVal);
+                            hdrItem.classList.add(newVal);
+                        }
+                        if (!isNOU(cntItem)) {
+                            cntItem.classList.remove(oldVal);
+                            cntItem.classList.add(newVal);
+                        }
                     }
-                }
-                if (property === 'cssClass') {
-                    if (!isNOU(hdrItem)) {
-                        hdrItem.classList.remove(oldVal);
-                        hdrItem.classList.add(newVal);
+                    if (properties[j] === 'disabled') {
+                        this.enableTab(index, ((newVal === true) ? false : true));
                     }
-                    if (!isNOU(cntItem)) {
-                        cntItem.classList.remove(oldVal);
-                        cntItem.classList.add(newVal);
+                    if (properties[j] === 'visible') {
+                        this.hideTab(index, ((newVal === true) ? false : true));
                     }
                 }
-                if (property === 'disabled') {
-                    this.enableTab(index, ((newVal === true) ? false : true));
-                }
-                if (property === 'visible') {
-                    this.hideTab(index, ((newVal === true) ? false : true));
-                }
             }
         }
         else {

package/styles/bootstrap-dark.css

@@ -2941,8 +2941,8 @@
   }
 }
 
-.e-bigger .e-tab .e-tab-header .e-toolbar-items .e-indicator + .e-toolbar-item:nth-last-child(1).e-active,
-.e-tab.e-bigger .e-tab-header .e-toolbar-items .e-indicator + .e-toolbar-item:nth-last-child(1).e-active {
+.e-bigger .e-tab .e-tab-header .e-toolbar-items .e-indicator + .e-toolbar-item:last-child.e-active,
+.e-tab.e-bigger .e-tab-header .e-toolbar-items .e-indicator + .e-toolbar-item:last-child.e-active {
   margin: 1px 2px 0 0;
 }
 
@@ -9390,6 +9390,7 @@ ejs-sidebar {
 
 /*! breadcrumb layout */
 .e-breadcrumb {
+  display: block;
   background-color: #2a2a2a;
   border-radius: 4px;
 }
@@ -9492,6 +9493,13 @@ ejs-sidebar {
   padding-left: 0;
 }
 
+.e-breadcrumb.e-rtl .e-breadcrumb-separator + .e-breadcrumb-separator {
+  margin-left: 0;
+  margin-right: -5px;
+  padding-left: 6px;
+  padding-right: 0;
+}
+
 .e-breadcrumb .e-breadcrumb-collapsed {
   cursor: pointer;
   font-size: 16px;
@@ -9562,6 +9570,11 @@ ejs-sidebar {
   padding-left: 0;
 }
 
+.e-bigger.e-breadcrumb.e-rtl .e-breadcrumb-separator + .e-breadcrumb-separator,
+.e-bigger .e-breadcrumb.e-rtl .e-breadcrumb-separator + .e-breadcrumb-separator {
+  padding-left: 6px;
+}
+
 .e-bigger.e-breadcrumb .e-breadcrumb-collapsed,
 .e-bigger .e-breadcrumb .e-breadcrumb-collapsed {
   font-size: 18px;

package/styles/bootstrap.css

@@ -2953,8 +2953,8 @@
   }
 }
 
-.e-bigger .e-tab .e-tab-header .e-toolbar-items .e-indicator + .e-toolbar-item:nth-last-child(1).e-active,
-.e-tab.e-bigger .e-tab-header .e-toolbar-items .e-indicator + .e-toolbar-item:nth-last-child(1).e-active {
+.e-bigger .e-tab .e-tab-header .e-toolbar-items .e-indicator + .e-toolbar-item:last-child.e-active,
+.e-tab.e-bigger .e-tab-header .e-toolbar-items .e-indicator + .e-toolbar-item:last-child.e-active {
   margin: 1px 2px 0 0;
 }
 
@@ -9409,6 +9409,7 @@ ejs-sidebar {
 
 /*! breadcrumb layout */
 .e-breadcrumb {
+  display: block;
   background-color: #f5f5f5;
   border-radius: 4px;
 }
@@ -9511,6 +9512,13 @@ ejs-sidebar {
   padding-left: 0;
 }
 
+.e-breadcrumb.e-rtl .e-breadcrumb-separator + .e-breadcrumb-separator {
+  margin-left: 0;
+  margin-right: -5px;
+  padding-left: 6px;
+  padding-right: 0;
+}
+
 .e-breadcrumb .e-breadcrumb-collapsed {
   cursor: pointer;
   font-size: 16px;
@@ -9581,6 +9589,11 @@ ejs-sidebar {
   padding-left: 0;
 }
 
+.e-bigger.e-breadcrumb.e-rtl .e-breadcrumb-separator + .e-breadcrumb-separator,
+.e-bigger .e-breadcrumb.e-rtl .e-breadcrumb-separator + .e-breadcrumb-separator {
+  padding-left: 6px;
+}
+
 .e-bigger.e-breadcrumb .e-breadcrumb-collapsed,
 .e-bigger .e-breadcrumb .e-breadcrumb-collapsed {
   font-size: 18px;

package/styles/bootstrap4.css

@@ -3046,8 +3046,8 @@
   }
 }
 
-.e-bigger .e-tab .e-tab-header .e-toolbar-items .e-indicator + .e-toolbar-item:nth-last-child(1).e-active,
-.e-tab.e-bigger .e-tab-header .e-toolbar-items .e-indicator + .e-toolbar-item:nth-last-child(1).e-active {
+.e-bigger .e-tab .e-tab-header .e-toolbar-items .e-indicator + .e-toolbar-item:last-child.e-active,
+.e-tab.e-bigger .e-tab-header .e-toolbar-items .e-indicator + .e-toolbar-item:last-child.e-active {
   margin: 1px 2px 0 0;
 }
 
@@ -9710,6 +9710,7 @@ ejs-sidebar {
 
 /*! breadcrumb layout */
 .e-breadcrumb {
+  display: block;
   background-color: #e9ecef;
   border-radius: 4px;
 }
@@ -9812,6 +9813,13 @@ ejs-sidebar {
   padding-left: 0;
 }
 
+.e-breadcrumb.e-rtl .e-breadcrumb-separator + .e-breadcrumb-separator {
+  margin-left: 0;
+  margin-right: -7px;
+  padding-left: 8px;
+  padding-right: 0;
+}
+
 .e-breadcrumb .e-breadcrumb-collapsed {
   cursor: pointer;
   font-size: 16px;
@@ -9882,6 +9890,11 @@ ejs-sidebar {
   padding-left: 0;
 }
 
+.e-bigger.e-breadcrumb.e-rtl .e-breadcrumb-separator + .e-breadcrumb-separator,
+.e-bigger .e-breadcrumb.e-rtl .e-breadcrumb-separator + .e-breadcrumb-separator {
+  padding-left: 8px;
+}
+
 .e-bigger.e-breadcrumb .e-breadcrumb-collapsed,
 .e-bigger .e-breadcrumb .e-breadcrumb-collapsed {
   font-size: 18px;

package/styles/bootstrap5-dark.css

@@ -2939,8 +2939,8 @@
   }
 }
 
-.e-bigger .e-tab .e-tab-header .e-toolbar-items .e-indicator + .e-toolbar-item:nth-last-child(1).e-active,
-.e-tab.e-bigger .e-tab-header .e-toolbar-items .e-indicator + .e-toolbar-item:nth-last-child(1).e-active {
+.e-bigger .e-tab .e-tab-header .e-toolbar-items .e-indicator + .e-toolbar-item:last-child.e-active,
+.e-tab.e-bigger .e-tab-header .e-toolbar-items .e-indicator + .e-toolbar-item:last-child.e-active {
   margin: 1px 2px 0 0;
 }
 
@@ -6210,7 +6210,7 @@
 
 /*! tab theme */
 .e-tab {
-  background: transparent;
+  background: #212529;
   border: none;
 }
 
@@ -9642,6 +9642,10 @@ ejs-sidebar {
 }
 
 /*! breadcrumb layout */
+.e-breadcrumb {
+  display: block;
+}
+
 .e-breadcrumb ol {
   -ms-flex-align: center;
       align-items: center;
@@ -9750,6 +9754,13 @@ ejs-sidebar {
   padding-left: 0;
 }
 
+.e-breadcrumb.e-rtl .e-breadcrumb-separator + .e-breadcrumb-separator {
+  margin-left: 0;
+  margin-right: -8px;
+  padding-left: 8px;
+  padding-right: 0;
+}
+
 .e-breadcrumb .e-icon-item + .e-breadcrumb-separator {
   padding-left: 5px;
 }
@@ -9829,6 +9840,11 @@ ejs-sidebar {
   padding-left: 0;
 }
 
+.e-bigger.e-breadcrumb.e-rtl .e-breadcrumb-separator + .e-breadcrumb-separator,
+.e-bigger .e-breadcrumb.e-rtl .e-breadcrumb-separator + .e-breadcrumb-separator {
+  padding-left: 8px;
+}
+
 .e-bigger.e-breadcrumb .e-breadcrumb-collapsed,
 .e-bigger .e-breadcrumb .e-breadcrumb-collapsed {
   font-size: 18px;

package/styles/bootstrap5.css

@@ -2939,8 +2939,8 @@
   }
 }
 
-.e-bigger .e-tab .e-tab-header .e-toolbar-items .e-indicator + .e-toolbar-item:nth-last-child(1).e-active,
-.e-tab.e-bigger .e-tab-header .e-toolbar-items .e-indicator + .e-toolbar-item:nth-last-child(1).e-active {
+.e-bigger .e-tab .e-tab-header .e-toolbar-items .e-indicator + .e-toolbar-item:last-child.e-active,
+.e-tab.e-bigger .e-tab-header .e-toolbar-items .e-indicator + .e-toolbar-item:last-child.e-active {
   margin: 1px 2px 0 0;
 }
 
@@ -6210,7 +6210,7 @@
 
 /*! tab theme */
 .e-tab {
-  background: transparent;
+  background: #fff;
   border: none;
 }
 
@@ -9642,6 +9642,10 @@ ejs-sidebar {
 }
 
 /*! breadcrumb layout */
+.e-breadcrumb {
+  display: block;
+}
+
 .e-breadcrumb ol {
   -ms-flex-align: center;
       align-items: center;
@@ -9750,6 +9754,13 @@ ejs-sidebar {
   padding-left: 0;
 }
 
+.e-breadcrumb.e-rtl .e-breadcrumb-separator + .e-breadcrumb-separator {
+  margin-left: 0;
+  margin-right: -8px;
+  padding-left: 8px;
+  padding-right: 0;
+}
+
 .e-breadcrumb .e-icon-item + .e-breadcrumb-separator {
   padding-left: 5px;
 }
@@ -9829,6 +9840,11 @@ ejs-sidebar {
   padding-left: 0;
 }
 
+.e-bigger.e-breadcrumb.e-rtl .e-breadcrumb-separator + .e-breadcrumb-separator,
+.e-bigger .e-breadcrumb.e-rtl .e-breadcrumb-separator + .e-breadcrumb-separator {
+  padding-left: 8px;
+}
+
 .e-bigger.e-breadcrumb .e-breadcrumb-collapsed,
 .e-bigger .e-breadcrumb .e-breadcrumb-collapsed {
   font-size: 18px;

package/styles/breadcrumb/_layout.scss

@@ -1,6 +1,8 @@
 @include export-module('breadcrumb-layout') {
   /*! breadcrumb layout */
   .e-breadcrumb {
+    display: block;
+
     ol {
       align-items: center;
       display: inline-flex;
@@ -147,6 +149,13 @@
       }
     }
 
+    &.e-rtl .e-breadcrumb-separator + .e-breadcrumb-separator {
+      margin-left: 0;
+      margin-right: $breadcrumb-sibling-separator-margin-left;
+      padding-left: nth($breadcrumb-separator-padding, 2);
+      padding-right: $breadcrumb-sibling-separator-padding;
+    }
+
     @if $breadcrumb-skin == 'bootstrap5' {
       .e-icon-item  + .e-breadcrumb-separator {
         padding-left: $breadcrumb-icon-only-item-next-separator-padding-left;
@@ -255,6 +264,10 @@
       }
     }
 
+    &.e-rtl .e-breadcrumb-separator + .e-breadcrumb-separator {
+      padding-left: nth($breadcrumb-separator-bigger-padding, 2);
+    }
+
     .e-breadcrumb-collapsed {
       font-size: $breadcrumb-collapsed-icon-bigger-font-size;
       padding: $breadcrumb-collapsed-icon-bigger-padding;

package/styles/breadcrumb/_theme.scss

@@ -73,7 +73,7 @@
           }
         }
 
-        &:active {
+        &:active:not(:last-child) {
           .e-breadcrumb-icon {
             color: $breadcrumb-icon-active-color;
           }

package/styles/breadcrumb/bootstrap-dark.css

@@ -9,6 +9,7 @@
 
 /*! breadcrumb layout */
 .e-breadcrumb {
+  display: block;
   background-color: #2a2a2a;
   border-radius: 4px;
 }
@@ -111,6 +112,13 @@
   padding-left: 0;
 }
 
+.e-breadcrumb.e-rtl .e-breadcrumb-separator + .e-breadcrumb-separator {
+  margin-left: 0;
+  margin-right: -5px;
+  padding-left: 6px;
+  padding-right: 0;
+}
+
 .e-breadcrumb .e-breadcrumb-collapsed {
   cursor: pointer;
   font-size: 16px;
@@ -181,6 +189,11 @@
   padding-left: 0;
 }
 
+.e-bigger.e-breadcrumb.e-rtl .e-breadcrumb-separator + .e-breadcrumb-separator,
+.e-bigger .e-breadcrumb.e-rtl .e-breadcrumb-separator + .e-breadcrumb-separator {
+  padding-left: 6px;
+}
+
 .e-bigger.e-breadcrumb .e-breadcrumb-collapsed,
 .e-bigger .e-breadcrumb .e-breadcrumb-collapsed {
   font-size: 18px;

package/styles/breadcrumb/bootstrap.css

@@ -9,6 +9,7 @@
 
 /*! breadcrumb layout */
 .e-breadcrumb {
+  display: block;
   background-color: #f5f5f5;
   border-radius: 4px;
 }
@@ -111,6 +112,13 @@
   padding-left: 0;
 }
 
+.e-breadcrumb.e-rtl .e-breadcrumb-separator + .e-breadcrumb-separator {
+  margin-left: 0;
+  margin-right: -5px;
+  padding-left: 6px;
+  padding-right: 0;
+}
+
 .e-breadcrumb .e-breadcrumb-collapsed {
   cursor: pointer;
   font-size: 16px;
@@ -181,6 +189,11 @@
   padding-left: 0;
 }
 
+.e-bigger.e-breadcrumb.e-rtl .e-breadcrumb-separator + .e-breadcrumb-separator,
+.e-bigger .e-breadcrumb.e-rtl .e-breadcrumb-separator + .e-breadcrumb-separator {
+  padding-left: 6px;
+}
+
 .e-bigger.e-breadcrumb .e-breadcrumb-collapsed,
 .e-bigger .e-breadcrumb .e-breadcrumb-collapsed {
   font-size: 18px;