@syncfusion/ej2-navigations 24.2.4 → 24.2.8

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 24.2.4
+*  version : 24.2.8
 *  Copyright Syncfusion Inc. 2001 - 2023. 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@24.2.3",
+  "_id": "@syncfusion/ej2-navigations@24.2.4",
   "_inBundle": false,
-  "_integrity": "sha512-y73SLL59xoeK+JAgFfUdS8g4YENlasuurKr/sftaukWRgo2ydlQGnGRUkckTUoiuQLN3R3zP9wqwInQXrZge7g==",
+  "_integrity": "sha512-yGv+M8TSZfo5giPl+68COLjC1TNTMPhdxZth5ZAJ/qfjUlX1X6j4Luammcjo8MN1QszAJ9K0ewWFbelekbzHRg==",
   "_location": "/@syncfusion/ej2-navigations",
   "_phantomChildren": {},
   "_requested": {
@@ -39,8 +39,8 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-navigations"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-24.2.3.tgz",
-  "_shasum": "45b7a0573318cc239b20bb60698f418d927f3982",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-24.2.4.tgz",
+  "_shasum": "9382a04536eca9b09930db9686c86dcad7b09848",
   "_spec": "@syncfusion/ej2-navigations@*",
   "_where": "/jenkins/workspace/elease-automation_release_24.1.1/packages/included",
   "author": {
@@ -51,12 +51,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~24.2.3",
-    "@syncfusion/ej2-buttons": "~24.2.3",
+    "@syncfusion/ej2-base": "~24.2.7",
+    "@syncfusion/ej2-buttons": "~24.2.7",
     "@syncfusion/ej2-data": "~24.2.3",
-    "@syncfusion/ej2-inputs": "~24.2.4",
-    "@syncfusion/ej2-lists": "~24.2.4",
-    "@syncfusion/ej2-popups": "~24.2.3"
+    "@syncfusion/ej2-inputs": "~24.2.7",
+    "@syncfusion/ej2-lists": "~24.2.8",
+    "@syncfusion/ej2-popups": "~24.2.8"
   },
   "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",
@@ -161,6 +161,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "24.2.4",
+  "version": "24.2.8",
   "sideEffects": false
 }

package/src/treeview/treeview.js

@@ -702,7 +702,7 @@ var TreeView = /** @class */ (function (_super) {
             element = this.element.querySelector('[data-uid="' + data[this.fields.id] + '"]');
         }
         if (element) {
-            var ariaChecked = element.querySelector('.' + CHECKBOXWRAP).getAttribute('aria-checked');
+            var ariaChecked = element.getAttribute('aria-checked');
             if (ariaChecked !== 'true') {
                 this.changeState(element, 'indeterminate', null, true, true);
             }
@@ -757,24 +757,22 @@ var TreeView = /** @class */ (function (_super) {
     TreeView.prototype.beforeNodeCreate = function (e) {
         if (this.showCheckBox) {
             var checkboxEle = createCheckBox(this.createElement, true, { cssClass: this.touchClass });
-            checkboxEle.setAttribute('role', 'checkbox');
-            checkboxEle.setAttribute('aria-label', e.text);
             var icon = select('div.' + ICON, e.item);
             var id = e.item.getAttribute('data-uid');
             e.item.childNodes[0].insertBefore(checkboxEle, e.item.childNodes[0].childNodes[isNOU(icon) ? 0 : 1]);
             var checkValue = getValue(e.fields.isChecked, e.curData);
             if (this.checkedNodes.indexOf(id) > -1) {
                 select('.' + CHECKBOXFRAME, checkboxEle).classList.add(CHECK);
-                checkboxEle.setAttribute('aria-checked', 'true');
+                e.item.setAttribute('aria-checked', 'true');
                 this.addCheck(e.item);
             }
             else if (!isNOU(checkValue) && checkValue.toString() === 'true') {
                 select('.' + CHECKBOXFRAME, checkboxEle).classList.add(CHECK);
-                checkboxEle.setAttribute('aria-checked', 'true');
+                e.item.setAttribute('aria-checked', 'true');
                 this.addCheck(e.item);
             }
             else {
-                checkboxEle.setAttribute('aria-checked', 'false');
+                e.item.setAttribute('aria-checked', 'false');
             }
             var frame = select('.' + CHECKBOXFRAME, checkboxEle);
             EventHandler.add(frame, 'mousedown', this.frameMouseHandler, this);
@@ -1308,7 +1306,7 @@ var TreeView = /** @class */ (function (_super) {
         }
         ariaState = state === 'check' ? 'true' : state === 'uncheck' ? 'false' : ariaState;
         if (!isNOU(ariaState)) {
-            wrapper.setAttribute('aria-checked', ariaState);
+            currLi.setAttribute('aria-checked', ariaState);
         }
         if (isAdd) {
             var data = [].concat([], this.checkActionNodes);
@@ -1322,7 +1320,7 @@ var TreeView = /** @class */ (function (_super) {
         }
         if (!isPrevent) {
             if (!isNOU(ariaState)) {
-                wrapper.setAttribute('aria-checked', ariaState);
+                currLi.setAttribute('aria-checked', ariaState);
                 eventArgs.data[0].checked = ariaState;
                 this.trigger('nodeChecked', eventArgs);
                 this.checkActionNodes = [];
@@ -2029,7 +2027,7 @@ var TreeView = /** @class */ (function (_super) {
         }
     };
     TreeView.prototype.nodeSelectAction = function (li, e, eventArgs, multiSelect) {
-        if (!this.allowMultiSelection || (!multiSelect && (!e || (e && !e.ctrlKey)))) {
+        if (!this.allowMultiSelection || (!multiSelect && (!e || (e && !(e.ctrlKey || e.metaKey))))) {
             this.removeSelectAll();
         }
         if (this.allowMultiSelection && e && e.shiftKey) {
@@ -2357,7 +2355,7 @@ var TreeView = /** @class */ (function (_super) {
         this.checkActionNodes = [];
         var ariaState = !isCheck ? 'true' : 'false';
         if (!isNOU(ariaState)) {
-            checkWrap.setAttribute('aria-checked', ariaState);
+            currLi.setAttribute('aria-checked', ariaState);
         }
         var eventArgs = this.getCheckEvent(currLi, isCheck ? 'uncheck' : 'check', e);
         this.trigger('nodeChecking', eventArgs, function (observedArgs) {
@@ -2753,7 +2751,7 @@ var TreeView = /** @class */ (function (_super) {
             var checked = null;
             var checkboxElement = select('.' + CHECKBOXWRAP, currLi);
             if (this.showCheckBox && checkboxElement) {
-                checked = checkboxElement.getAttribute('aria-checked');
+                checked = currLi.getAttribute('aria-checked');
             }
             return {
                 id: id, text: text, parentID: pid, selected: selected, selectable: selectable, expanded: expanded,

package/styles/bootstrap-dark.css

@@ -1286,7 +1286,7 @@
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:focus,
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover,
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:active {
-  padding: 0 6px;
+  padding: 0 7px;
 }
 .e-bigger .e-toolbar .e-toolbar-item,
 .e-toolbar.e-bigger .e-toolbar-item {
@@ -1518,6 +1518,19 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar.e-spacer-toolbar .e-toolbar-items {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: nowrap;
+      flex-wrap: nowrap;
+  width: 100%;
+}
+.e-toolbar.e-spacer-toolbar .e-toolbar-items:not(.e-toolbar-multirow) {
+  position: absolute;
+}
+.e-toolbar.e-spacer-toolbar.e-pop-mode .e-toolbar-items {
+  width: calc(100% - 38px);
+}
 .e-toolbar .e-blazor-toolbar-items {
   position: absolute;
   top: -9999px;
@@ -1622,6 +1635,12 @@
   min-height: 0;
   vertical-align: middle;
   width: auto;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+}
+.e-toolbar .e-toolbar-item.e-spacer {
+  -ms-flex-positive: 1;
+      flex-grow: 1;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn {
   display: -ms-flexbox;
@@ -1637,7 +1656,7 @@
   padding: 1px 2.5px;
   border-radius: 4px;
   line-height: 27px;
-  border: none;
+  border: 1px solid transparent;
   cursor: pointer;
   font-size: 16px;
   font-weight: 400;
@@ -1660,7 +1679,7 @@
   line-height: 25px;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:hover, .e-toolbar .e-toolbar-item .e-tbar-btn:focus, .e-toolbar .e-toolbar-item .e-tbar-btn:active {
-  padding: 0 1.5px;
+  padding: 0 2.5px;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus {
   outline: 0;
@@ -1965,6 +1984,9 @@
 .e-toolbar.e-extended-toolbar .e-hor-nav.e-ie-align {
   display: table;
 }
+.e-toolbar.e-rtl:not(.e-spacer-toolbar) .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
+  margin-right: 15px;
+}
 .e-toolbar.e-rtl .e-toolbar-item .e-tbar-btn.e-tbtn-txt .e-icons.e-btn-icon {
   padding: 0 12px 0 0;
 }
@@ -2055,7 +2077,7 @@
   background: #131313;
   box-shadow: none;
   color: #f0f0f0;
-  border: none;
+  border: 1px solid transparent;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
   color: #f0f0f0;

package/styles/bootstrap.css

@@ -1521,6 +1521,19 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar.e-spacer-toolbar .e-toolbar-items {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: nowrap;
+      flex-wrap: nowrap;
+  width: 100%;
+}
+.e-toolbar.e-spacer-toolbar .e-toolbar-items:not(.e-toolbar-multirow) {
+  position: absolute;
+}
+.e-toolbar.e-spacer-toolbar.e-pop-mode .e-toolbar-items {
+  width: calc(100% - 38px);
+}
 .e-toolbar .e-blazor-toolbar-items {
   position: absolute;
   top: -9999px;
@@ -1625,6 +1638,12 @@
   min-height: 0;
   vertical-align: middle;
   width: auto;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+}
+.e-toolbar .e-toolbar-item.e-spacer {
+  -ms-flex-positive: 1;
+      flex-grow: 1;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn {
   display: -ms-flexbox;
@@ -1968,6 +1987,9 @@
 .e-toolbar.e-extended-toolbar .e-hor-nav.e-ie-align {
   display: table;
 }
+.e-toolbar.e-rtl:not(.e-spacer-toolbar) .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
+  margin-right: 3px;
+}
 .e-toolbar.e-rtl .e-toolbar-item .e-tbar-btn.e-tbtn-txt .e-icons.e-btn-icon {
   padding: 0 12px 0 0;
 }

package/styles/bootstrap4.css

@@ -1289,7 +1289,7 @@
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:focus,
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover,
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:active {
-  padding: 0 4.5px;
+  padding: 1.5px 5.5px;
 }
 .e-bigger .e-toolbar .e-toolbar-item,
 .e-toolbar.e-bigger .e-toolbar-item {
@@ -1521,6 +1521,19 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar.e-spacer-toolbar .e-toolbar-items {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: nowrap;
+      flex-wrap: nowrap;
+  width: 100%;
+}
+.e-toolbar.e-spacer-toolbar .e-toolbar-items:not(.e-toolbar-multirow) {
+  position: absolute;
+}
+.e-toolbar.e-spacer-toolbar.e-pop-mode .e-toolbar-items {
+  width: calc(100% - 38px);
+}
 .e-toolbar .e-blazor-toolbar-items {
   position: absolute;
   top: -9999px;
@@ -1625,6 +1638,12 @@
   min-height: 0;
   vertical-align: middle;
   width: auto;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+}
+.e-toolbar .e-toolbar-item.e-spacer {
+  -ms-flex-positive: 1;
+      flex-grow: 1;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn {
   display: -ms-flexbox;
@@ -1640,7 +1659,7 @@
   padding: 0 3px;
   border-radius: 4px;
   line-height: 27px;
-  border: none;
+  border: 1px solid transparent;
   cursor: pointer;
   font-size: 14px;
   font-weight: 400;
@@ -1663,7 +1682,7 @@
   line-height: 26px;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:hover, .e-toolbar .e-toolbar-item .e-tbar-btn:focus, .e-toolbar .e-toolbar-item .e-tbar-btn:active {
-  padding: 0 2px;
+  padding: 0 3px;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus {
   outline: 0;
@@ -1968,6 +1987,9 @@
 .e-toolbar.e-extended-toolbar .e-hor-nav.e-ie-align {
   display: table;
 }
+.e-toolbar.e-rtl:not(.e-spacer-toolbar) .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
+  margin-right: 12px;
+}
 .e-toolbar.e-rtl .e-toolbar-item .e-tbar-btn.e-tbtn-txt .e-icons.e-btn-icon {
   padding: 0 4px 0 6px;
 }
@@ -2058,7 +2080,7 @@
   background: #f8f9fa;
   box-shadow: none;
   color: #495057;
-  border: none;
+  border: 1px solid transparent;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
   color: #495057;

package/styles/bootstrap5-dark.css

@@ -1587,6 +1587,19 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar.e-spacer-toolbar .e-toolbar-items {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: nowrap;
+      flex-wrap: nowrap;
+  width: 100%;
+}
+.e-toolbar.e-spacer-toolbar .e-toolbar-items:not(.e-toolbar-multirow) {
+  position: absolute;
+}
+.e-toolbar.e-spacer-toolbar.e-pop-mode .e-toolbar-items {
+  width: calc(100% - 28px);
+}
 .e-toolbar .e-blazor-toolbar-items {
   position: absolute;
   top: -9999px;
@@ -1691,6 +1704,12 @@
   min-height: 38px;
   vertical-align: middle;
   width: auto;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+}
+.e-toolbar .e-toolbar-item.e-spacer {
+  -ms-flex-positive: 1;
+      flex-grow: 1;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn {
   display: -ms-flexbox;
@@ -2034,6 +2053,9 @@
 .e-toolbar.e-extended-toolbar .e-hor-nav.e-ie-align {
   display: table;
 }
+.e-toolbar.e-rtl:not(.e-spacer-toolbar) .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
+  margin-right: 8px;
+}
 .e-toolbar.e-rtl .e-toolbar-item .e-tbar-btn.e-tbtn-txt .e-icons.e-btn-icon {
   padding: 4px;
 }

package/styles/bootstrap5.css

@@ -1587,6 +1587,19 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar.e-spacer-toolbar .e-toolbar-items {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: nowrap;
+      flex-wrap: nowrap;
+  width: 100%;
+}
+.e-toolbar.e-spacer-toolbar .e-toolbar-items:not(.e-toolbar-multirow) {
+  position: absolute;
+}
+.e-toolbar.e-spacer-toolbar.e-pop-mode .e-toolbar-items {
+  width: calc(100% - 28px);
+}
 .e-toolbar .e-blazor-toolbar-items {
   position: absolute;
   top: -9999px;
@@ -1691,6 +1704,12 @@
   min-height: 38px;
   vertical-align: middle;
   width: auto;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+}
+.e-toolbar .e-toolbar-item.e-spacer {
+  -ms-flex-positive: 1;
+      flex-grow: 1;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn {
   display: -ms-flexbox;
@@ -2034,6 +2053,9 @@
 .e-toolbar.e-extended-toolbar .e-hor-nav.e-ie-align {
   display: table;
 }
+.e-toolbar.e-rtl:not(.e-spacer-toolbar) .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
+  margin-right: 8px;
+}
 .e-toolbar.e-rtl .e-toolbar-item .e-tbar-btn.e-tbtn-txt .e-icons.e-btn-icon {
   padding: 4px;
 }

package/styles/fabric-dark.css

@@ -1518,6 +1518,19 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar.e-spacer-toolbar .e-toolbar-items {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: nowrap;
+      flex-wrap: nowrap;
+  width: 100%;
+}
+.e-toolbar.e-spacer-toolbar .e-toolbar-items:not(.e-toolbar-multirow) {
+  position: absolute;
+}
+.e-toolbar.e-spacer-toolbar.e-pop-mode .e-toolbar-items {
+  width: calc(100% - 40px);
+}
 .e-toolbar .e-blazor-toolbar-items {
   position: absolute;
   top: -9999px;
@@ -1622,6 +1635,12 @@
   min-height: 39px;
   vertical-align: middle;
   width: auto;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+}
+.e-toolbar .e-toolbar-item.e-spacer {
+  -ms-flex-positive: 1;
+      flex-grow: 1;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn {
   display: -ms-flexbox;
@@ -1965,6 +1984,9 @@
 .e-toolbar.e-extended-toolbar .e-hor-nav.e-ie-align {
   display: table;
 }
+.e-toolbar.e-rtl:not(.e-spacer-toolbar) .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
+  margin-right: 3px;
+}
 .e-toolbar.e-rtl .e-toolbar-item .e-tbar-btn.e-tbtn-txt .e-icons.e-btn-icon {
   padding: 0 12px 0 0;
 }

package/styles/fabric.css

@@ -1520,6 +1520,19 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar.e-spacer-toolbar .e-toolbar-items {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: nowrap;
+      flex-wrap: nowrap;
+  width: 100%;
+}
+.e-toolbar.e-spacer-toolbar .e-toolbar-items:not(.e-toolbar-multirow) {
+  position: absolute;
+}
+.e-toolbar.e-spacer-toolbar.e-pop-mode .e-toolbar-items {
+  width: calc(100% - 40px);
+}
 .e-toolbar .e-blazor-toolbar-items {
   position: absolute;
   top: -9999px;
@@ -1624,6 +1637,12 @@
   min-height: 39px;
   vertical-align: middle;
   width: auto;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+}
+.e-toolbar .e-toolbar-item.e-spacer {
+  -ms-flex-positive: 1;
+      flex-grow: 1;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn {
   display: -ms-flexbox;
@@ -1967,6 +1986,9 @@
 .e-toolbar.e-extended-toolbar .e-hor-nav.e-ie-align {
   display: table;
 }
+.e-toolbar.e-rtl:not(.e-spacer-toolbar) .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
+  margin-right: 3px;
+}
 .e-toolbar.e-rtl .e-toolbar-item .e-tbar-btn.e-tbtn-txt .e-icons.e-btn-icon {
   padding: 0 12px 0 0;
 }

package/styles/fluent-dark.css

@@ -1553,6 +1553,19 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar.e-spacer-toolbar .e-toolbar-items {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: nowrap;
+      flex-wrap: nowrap;
+  width: 100%;
+}
+.e-toolbar.e-spacer-toolbar .e-toolbar-items:not(.e-toolbar-multirow) {
+  position: absolute;
+}
+.e-toolbar.e-spacer-toolbar.e-pop-mode .e-toolbar-items {
+  width: calc(100% - 28px);
+}
 .e-toolbar .e-blazor-toolbar-items {
   position: absolute;
   top: -9999px;
@@ -1657,6 +1670,12 @@
   min-height: 38px;
   vertical-align: middle;
   width: auto;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+}
+.e-toolbar .e-toolbar-item.e-spacer {
+  -ms-flex-positive: 1;
+      flex-grow: 1;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn {
   display: -ms-flexbox;
@@ -1672,7 +1691,7 @@
   padding: 0 4px;
   border-radius: 2px;
   line-height: 22px;
-  border: none;
+  border: 1px solid transparent;
   cursor: pointer;
   font-size: 18px;
   font-weight: 400;
@@ -2000,6 +2019,9 @@
 .e-toolbar.e-extended-toolbar .e-hor-nav.e-ie-align {
   display: table;
 }
+.e-toolbar.e-rtl:not(.e-spacer-toolbar) .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
+  margin-right: 8px;
+}
 .e-toolbar.e-rtl .e-toolbar-item .e-tbar-btn.e-tbtn-txt .e-icons.e-btn-icon {
   padding: 4px;
 }
@@ -2090,7 +2112,7 @@
   background: transparent;
   box-shadow: none;
   color: #a19f9d;
-  border: none;
+  border: 1px solid transparent;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
   color: #a19f9d;
@@ -2112,9 +2134,9 @@
   background: none;
   border-radius: 0;
   color: #f3f2f1;
-  border-color: #a19f9d;
+  border-color: transparent;
   border-style: solid;
-  border-width: 0;
+  border-width: 1px;
   box-shadow: inset 0 0 0 1px;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-icons {
@@ -2127,7 +2149,7 @@
   background: #292827;
   border-color: #a19f9d;
   border-style: solid;
-  border-width: 0;
+  border-width: 1px;
   border-radius: 0;
   color: #f3f2f1;
 }
@@ -2147,7 +2169,7 @@
   background: #323130;
   border-color: #323130;
   border-style: solid;
-  border-width: 0;
+  border-width: 1px;
   border-radius: 0;
   box-shadow: none;
   color: #f3f2f1;
@@ -2283,7 +2305,7 @@
 .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus {
   background: #323130;
   box-shadow: none;
-  border-color: #a19f9d;
+  border-color: transparent;
   border-style: solid;
   border-width: 0;
 }
@@ -2301,9 +2323,9 @@
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus {
   background: none;
   border-radius: 0;
-  border-color: #a19f9d;
+  border-color: transparent;
   border-style: solid;
-  border-width: 0;
+  border-width: 1px;
   box-shadow: inset 0 0 0 1px;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
@@ -2311,7 +2333,7 @@
   border-radius: 0;
   border-color: #a19f9d;
   border-style: solid;
-  border-width: 0;
+  border-width: 1px;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:active {
   background: #323130;
@@ -2319,7 +2341,7 @@
   box-shadow: none;
   border-color: #323130;
   border-style: solid;
-  border-width: 0;
+  border-width: 1px;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-separator {
   border: solid #797775;