@syncfusion/ej2-vue-navigations 19.3.43 → 19.3.53

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-vue-navigations@*",
-  "_id": "@syncfusion/ej2-vue-navigations@19.24.0",
+  "_id": "@syncfusion/ej2-vue-navigations@19.3.46",
   "_inBundle": false,
-  "_integrity": "sha512-gNsZsX4tYXGkZsRM3tGDDnV6rw4zWD8cIjjIGQV6r/qjuytlIoXyX7MoPOoSke1pae4GOB7qXJUVdLmvDjM63Q==",
+  "_integrity": "sha512-Uzt6wDVs/GUB/HXW4sOAa1T39jgbqbLJKwsq9IaZYypLa/3jh1JDvt63dD1x32Dqjjqcz6r0bcpUPO1Wef3ilQ==",
   "_location": "/@syncfusion/ej2-vue-navigations",
   "_phantomChildren": {},
   "_requested": {
@@ -19,8 +19,8 @@
   "_requiredBy": [
     "/"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-vue-navigations/-/ej2-vue-navigations-19.24.0.tgz",
-  "_shasum": "1d90d06acf68e048c038833382320f5ce2b40a43",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix/@syncfusion/ej2-vue-navigations/-/ej2-vue-navigations-19.3.46.tgz",
+  "_shasum": "f77b6d4bc6c07ef01d1ca473a80d4ae2803aea42",
   "_spec": "@syncfusion/ej2-vue-navigations@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -31,9 +31,9 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~19.3.43",
-    "@syncfusion/ej2-navigations": "19.3.43",
-    "@syncfusion/ej2-vue-base": "~19.3.43"
+    "@syncfusion/ej2-base": "~19.3.53",
+    "@syncfusion/ej2-navigations": "19.3.53",
+    "@syncfusion/ej2-vue-base": "~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 for Vue",
@@ -82,6 +82,18 @@
     "context menu",
     "contextmenu",
     "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",
+    "breadcrumb routing",
     "ej2 contextmenu",
     "tab-directive",
     "toolbar-directive",
@@ -151,6 +163,6 @@
     "type": "git",
     "url": "git+https://github.com/syncfusion/ej2-vue-ui-components.git"
   },
-  "version": "19.3.43",
+  "version": "19.3.53",
   "sideEffects": false
 }

package/src/accordion/accordion.component.js

@@ -23,7 +23,7 @@ import { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';
 import { Accordion } from '@syncfusion/ej2-navigations';
 import { AccordionItemsDirective, AccordionItemDirective, AccordionItemsPlugin, AccordionItemPlugin } from './items.directive';
 import { Options } from 'vue-class-component';
-export var properties = ['animation', 'dataSource', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'expandMode', 'expandedIndices', 'headerTemplate', 'height', 'itemTemplate', 'items', 'locale', 'width', 'clicked', 'created', 'destroyed', 'expanded', 'expanding'];
+export var properties = ['islazyUpdate', 'animation', 'dataSource', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'expandMode', 'expandedIndices', 'headerTemplate', 'height', 'itemTemplate', 'items', 'locale', 'width', 'clicked', 'created', 'destroyed', 'expanded', 'expanding'];
 export var modelProps = ['expandedIndices'];
 export var testProp = getProps({ props: properties });
 export var props = testProp[0];
@@ -122,8 +122,10 @@ var AccordionComponent = /** @class */ (function (_super) {
                     this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
                 }
                 else {
-                    this.$emit('update:' + propKey, eventProp[propKey]);
-                    this.$emit('modelchanged', eventProp[propKey]);
+                    if (eventName === 'change' || (this.$props && !this.$props.islazyUpdate)) {
+                        this.$emit('update:' + propKey, eventProp[propKey]);
+                        this.$emit('modelchanged', eventProp[propKey]);
+                    }
                 }
             }
         }

package/src/breadcrumb/breadcrumb.component.js

@@ -23,7 +23,7 @@ import { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';
 import { Breadcrumb } from '@syncfusion/ej2-navigations';
 import { BreadcrumbItemsDirective, BreadcrumbItemDirective, BreadcrumbItemsPlugin, BreadcrumbItemPlugin } from './items.directive';
 import { Options } from 'vue-class-component';
-export var properties = ['activeItem', 'cssClass', 'enableActiveItemNavigation', 'enableNavigation', 'enablePersistence', 'enableRtl', 'itemTemplate', 'items', 'locale', 'maxItems', 'overflowMode', 'separatorTemplate', 'url', 'width', 'beforeItemRender', 'created', 'itemClick'];
+export var properties = ['islazyUpdate', 'activeItem', 'cssClass', 'enableActiveItemNavigation', 'enableNavigation', 'enablePersistence', 'enableRtl', 'itemTemplate', 'items', 'locale', 'maxItems', 'overflowMode', 'separatorTemplate', 'url', 'width', 'beforeItemRender', 'created', 'itemClick'];
 export var modelProps = ['activeItem'];
 export var testProp = getProps({ props: properties });
 export var props = testProp[0];
@@ -122,8 +122,10 @@ var BreadcrumbComponent = /** @class */ (function (_super) {
                     this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
                 }
                 else {
-                    this.$emit('update:' + propKey, eventProp[propKey]);
-                    this.$emit('modelchanged', eventProp[propKey]);
+                    if (eventName === 'change' || (this.$props && !this.$props.islazyUpdate)) {
+                        this.$emit('update:' + propKey, eventProp[propKey]);
+                        this.$emit('modelchanged', eventProp[propKey]);
+                    }
                 }
             }
         }

package/src/context-menu/contextmenu.component.js

@@ -21,7 +21,7 @@ import { ComponentBase, EJComponentDecorator, getProps, gh } from '@syncfusion/e
 import { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';
 import { ContextMenu } from '@syncfusion/ej2-navigations';
 import { Options } from 'vue-class-component';
-export var properties = ['animationSettings', 'cssClass', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'enableScrolling', 'fields', 'filter', 'hoverDelay', 'items', 'locale', 'showItemOnClick', 'target', 'template', 'beforeClose', 'beforeItemRender', 'beforeOpen', 'created', 'onClose', 'onOpen', 'select'];
+export var properties = ['islazyUpdate', 'animationSettings', 'cssClass', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'enableScrolling', 'fields', 'filter', 'hoverDelay', 'items', 'locale', 'showItemOnClick', 'target', 'template', 'beforeClose', 'beforeItemRender', 'beforeOpen', 'created', 'onClose', 'onOpen', 'select'];
 export var modelProps = [];
 export var testProp = getProps({ props: properties });
 export var props = testProp[0];

package/src/menu/menu.component.js

@@ -22,7 +22,7 @@ import { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';
 import { Menu } from '@syncfusion/ej2-navigations';
 import { MenuItemsDirective, MenuItemDirective, MenuItemsPlugin, MenuItemPlugin } from './items.directive';
 import { Options } from 'vue-class-component';
-export var properties = ['animationSettings', 'cssClass', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'enableScrolling', 'fields', 'filter', 'hamburgerMode', 'hoverDelay', 'items', 'locale', 'orientation', 'showItemOnClick', 'target', 'template', 'title', 'beforeClose', 'beforeItemRender', 'beforeOpen', 'created', 'onClose', 'onOpen', 'select'];
+export var properties = ['islazyUpdate', 'animationSettings', 'cssClass', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'enableScrolling', 'fields', 'filter', 'hamburgerMode', 'hoverDelay', 'items', 'locale', 'orientation', 'showItemOnClick', 'target', 'template', 'title', 'beforeClose', 'beforeItemRender', 'beforeOpen', 'created', 'onClose', 'onOpen', 'select'];
 export var modelProps = [];
 export var testProp = getProps({ props: properties });
 export var props = testProp[0];

package/src/sidebar/sidebar.component.js

@@ -22,7 +22,7 @@ import { ComponentBase, EJComponentDecorator, getProps, gh } from '@syncfusion/e
 import { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';
 import { Sidebar } from '@syncfusion/ej2-navigations';
 import { Options } from 'vue-class-component';
-export var properties = ['animate', 'closeOnDocumentClick', 'dockSize', 'enableDock', 'enableGestures', 'enablePersistence', 'enableRtl', 'height', 'isOpen', 'locale', 'mediaQuery', 'position', 'showBackdrop', 'target', 'type', 'width', 'zIndex', 'change', 'close', 'created', 'destroyed', 'open'];
+export var properties = ['islazyUpdate', 'animate', 'closeOnDocumentClick', 'dockSize', 'enableDock', 'enableGestures', 'enablePersistence', 'enableRtl', 'height', 'isOpen', 'locale', 'mediaQuery', 'position', 'showBackdrop', 'target', 'type', 'width', 'zIndex', 'change', 'close', 'created', 'destroyed', 'open'];
 export var modelProps = ['isOpen'];
 export var testProp = getProps({ props: properties });
 export var props = testProp[0];
@@ -121,8 +121,10 @@ var SidebarComponent = /** @class */ (function (_super) {
                     this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
                 }
                 else {
-                    this.$emit('update:' + propKey, eventProp[propKey]);
-                    this.$emit('modelchanged', eventProp[propKey]);
+                    if (eventName === 'change' || (this.$props && !this.$props.islazyUpdate)) {
+                        this.$emit('update:' + propKey, eventProp[propKey]);
+                        this.$emit('modelchanged', eventProp[propKey]);
+                    }
                 }
             }
         }

package/src/tab/tab.component.js

@@ -22,7 +22,7 @@ import { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';
 import { Tab } from '@syncfusion/ej2-navigations';
 import { TabItemsDirective, TabItemDirective, TabItemsPlugin, TabItemPlugin } from './items.directive';
 import { Options } from 'vue-class-component';
-export var properties = ['allowDragAndDrop', 'animation', 'cssClass', 'dragArea', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'headerPlacement', 'height', 'heightAdjustMode', 'items', 'loadOn', 'locale', 'overflowMode', 'scrollStep', 'selectedItem', 'showCloseButton', 'width', 'added', 'adding', 'created', 'destroyed', 'dragged', 'dragging', 'onDragStart', 'removed', 'removing', 'selected', 'selecting'];
+export var properties = ['islazyUpdate', 'allowDragAndDrop', 'animation', 'cssClass', 'dragArea', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'headerPlacement', 'height', 'heightAdjustMode', 'items', 'loadOn', 'locale', 'overflowMode', 'scrollStep', 'selectedItem', 'showCloseButton', 'width', 'added', 'adding', 'created', 'destroyed', 'dragged', 'dragging', 'onDragStart', 'removed', 'removing', 'selected', 'selecting'];
 export var modelProps = [];
 export var testProp = getProps({ props: properties });
 export var props = testProp[0];

package/src/toolbar/toolbar.component.js

@@ -22,7 +22,7 @@ import { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';
 import { Toolbar } from '@syncfusion/ej2-navigations';
 import { ItemsDirective, ItemDirective, ItemsPlugin, ItemPlugin } from './items.directive';
 import { Options } from 'vue-class-component';
-export var properties = ['allowKeyboard', 'cssClass', 'enableCollision', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'height', 'items', 'locale', 'overflowMode', 'scrollStep', 'width', 'beforeCreate', 'clicked', 'created', 'destroyed'];
+export var properties = ['islazyUpdate', 'allowKeyboard', 'cssClass', 'enableCollision', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'height', 'items', 'locale', 'overflowMode', 'scrollStep', 'width', 'beforeCreate', 'clicked', 'created', 'destroyed'];
 export var modelProps = [];
 export var testProp = getProps({ props: properties });
 export var props = testProp[0];

package/src/treeview/treeview.component.js

@@ -21,7 +21,7 @@ import { ComponentBase, EJComponentDecorator, getProps, gh } from '@syncfusion/e
 import { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';
 import { TreeView } from '@syncfusion/ej2-navigations';
 import { Options } from 'vue-class-component';
-export var properties = ['allowDragAndDrop', 'allowEditing', 'allowMultiSelection', 'animation', 'autoCheck', 'checkedNodes', 'cssClass', 'disabled', 'dragArea', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'expandOn', 'expandedNodes', 'fields', 'fullRowNavigable', 'fullRowSelect', 'loadOnDemand', 'locale', 'nodeTemplate', 'selectedNodes', 'showCheckBox', 'sortOrder', 'actionFailure', 'created', 'dataBound', 'dataSourceChanged', 'destroyed', 'drawNode', 'keyPress', 'nodeChecked', 'nodeChecking', 'nodeClicked', 'nodeCollapsed', 'nodeCollapsing', 'nodeDragStart', 'nodeDragStop', 'nodeDragging', 'nodeDropped', 'nodeEdited', 'nodeEditing', 'nodeExpanded', 'nodeExpanding', 'nodeSelected', 'nodeSelecting'];
+export var properties = ['islazyUpdate', 'allowDragAndDrop', 'allowEditing', 'allowMultiSelection', 'animation', 'autoCheck', 'checkedNodes', 'cssClass', 'disabled', 'dragArea', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'expandOn', 'expandedNodes', 'fields', 'fullRowNavigable', 'fullRowSelect', 'loadOnDemand', 'locale', 'nodeTemplate', 'selectedNodes', 'showCheckBox', 'sortOrder', 'actionFailure', 'created', 'dataBound', 'dataSourceChanged', 'destroyed', 'drawNode', 'keyPress', 'nodeChecked', 'nodeChecking', 'nodeClicked', 'nodeCollapsed', 'nodeCollapsing', 'nodeDragStart', 'nodeDragStop', 'nodeDragging', 'nodeDropped', 'nodeEdited', 'nodeEditing', 'nodeExpanded', 'nodeExpanding', 'nodeSelected', 'nodeSelecting'];
 export var modelProps = [];
 export var testProp = getProps({ props: properties });
 export var props = testProp[0];

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/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;

package/styles/breadcrumb/bootstrap4.css

@@ -9,6 +9,7 @@
 
 /*! breadcrumb layout */
 .e-breadcrumb {
+  display: block;
   background-color: #e9ecef;
   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: -7px;
+  padding-left: 8px;
+  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: 8px;
+}
+
 .e-bigger.e-breadcrumb .e-breadcrumb-collapsed,
 .e-bigger .e-breadcrumb .e-breadcrumb-collapsed {
   font-size: 18px;

package/styles/breadcrumb/bootstrap5-dark.css

@@ -17,6 +17,10 @@
 }
 
 /*! breadcrumb layout */
+.e-breadcrumb {
+  display: block;
+}
+
 .e-breadcrumb ol {
   -ms-flex-align: center;
       align-items: center;
@@ -125,6 +129,13 @@
   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;
 }
@@ -204,6 +215,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: 8px;
+}
+
 .e-bigger.e-breadcrumb .e-breadcrumb-collapsed,
 .e-bigger .e-breadcrumb .e-breadcrumb-collapsed {
   font-size: 18px;

package/styles/breadcrumb/bootstrap5.css

@@ -17,6 +17,10 @@
 }
 
 /*! breadcrumb layout */
+.e-breadcrumb {
+  display: block;
+}
+
 .e-breadcrumb ol {
   -ms-flex-align: center;
       align-items: center;
@@ -125,6 +129,13 @@
   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;
 }
@@ -204,6 +215,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: 8px;
+}
+
 .e-bigger.e-breadcrumb .e-breadcrumb-collapsed,
 .e-bigger .e-breadcrumb .e-breadcrumb-collapsed {
   font-size: 18px;

package/styles/breadcrumb/fabric-dark.css

@@ -8,6 +8,10 @@
 }
 
 /*! breadcrumb layout */
+.e-breadcrumb {
+  display: block;
+}
+
 .e-breadcrumb ol {
   -ms-flex-align: center;
       align-items: center;
@@ -105,6 +109,13 @@
   padding-left: 0;
 }
 
+.e-breadcrumb.e-rtl .e-breadcrumb-separator + .e-breadcrumb-separator {
+  margin-left: 0;
+  margin-right: -4px;
+  padding-left: 3px;
+  padding-right: 0;
+}
+
 .e-breadcrumb .e-breadcrumb-collapsed {
   cursor: pointer;
   font-size: 21px;
@@ -177,6 +188,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: 5px;
+}
+
 .e-bigger.e-breadcrumb .e-breadcrumb-collapsed,
 .e-bigger .e-breadcrumb .e-breadcrumb-collapsed {
   font-size: 21px;