@syncfusion/ej2-navigations 22.1.34 → 22.1.38

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 22.1.34
+*  version : 22.1.38
 *  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@21.7.1",
+  "_id": "@syncfusion/ej2-navigations@22.1.36",
   "_inBundle": false,
-  "_integrity": "sha512-cpzwfo5GZ5nlKHW65GtUPLJ1t0vVB1/KEmyReuxNoORS3MrcW57dau+1HXdw7sXgjVKOpYj0BZ27LA46SjtKDQ==",
+  "_integrity": "sha512-iwyGdFKhNWT87685f3EXNa1Sd6Y7FwwsPQVYZXSiw4R7B4cF4HjOVKls5HIL55eNwk4b/jHvMv0lRJAjGGsU/Q==",
   "_location": "/@syncfusion/ej2-navigations",
   "_phantomChildren": {},
   "_requested": {
@@ -39,8 +39,8 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-navigations"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-navigations/-/ej2-navigations-21.7.1.tgz",
-  "_shasum": "2a48594a03e3fa8a48b589fa313f46df08298186",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-22.1.36.tgz",
+  "_shasum": "fcc4a08271c57a350afa32a3db3c70996e600732",
   "_spec": "@syncfusion/ej2-navigations@*",
   "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
@@ -51,12 +51,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~22.1.34",
-    "@syncfusion/ej2-buttons": "~22.1.34",
-    "@syncfusion/ej2-data": "~22.1.34",
-    "@syncfusion/ej2-inputs": "~22.1.34",
+    "@syncfusion/ej2-base": "~22.1.38",
+    "@syncfusion/ej2-buttons": "~22.1.38",
+    "@syncfusion/ej2-data": "~22.1.38",
+    "@syncfusion/ej2-inputs": "~22.1.38",
     "@syncfusion/ej2-lists": "~22.1.34",
-    "@syncfusion/ej2-popups": "~22.1.34"
+    "@syncfusion/ej2-popups": "~22.1.38"
   },
   "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": "22.1.34",
+  "version": "22.1.38",
   "sideEffects": false
 }

package/src/carousel/carousel.js

@@ -1104,6 +1104,7 @@ var Carousel = /** @class */ (function (_super) {
         EventHandler.remove(this.element.firstElementChild, 'animationend', this.onTransitionEnd);
         EventHandler.remove(this.element.firstElementChild, 'transitionend', this.onTransitionEnd);
         EventHandler.clearEvents(this.element);
+        EventHandler.clearEvents(this.itemsContainer);
     };
     /**
      * Method to transit from the current slide to the previous slide.
@@ -1204,8 +1205,9 @@ var Carousel = /** @class */ (function (_super) {
         this.destroyButtons();
         this.unWireEvents();
         [].slice.call(this.element.children).forEach(function (ele) { _this.element.removeChild(ele); });
-        removeClass([this.element], [CLS_CAROUSEL, this.cssClass, CLS_RTL]);
+        removeClass([this.element], [CLS_CAROUSEL, this.cssClass, CLS_RTL, CLS_SWIPE]);
         ['tabindex', 'role', 'style'].forEach(function (attr) { _this.element.removeAttribute(attr); });
+        this.itemsContainer = null;
         _super.prototype.destroy.call(this);
     };
     __decorate([

package/src/tab/tab.d.ts

@@ -52,6 +52,8 @@ export interface SelectEventArgs extends BaseEventArgs {
     selectedContent: HTMLElement;
     /** Determines whether the event is triggered via user interaction or programmatic way. True, if the event is triggered by user interaction. */
     isInteracted?: boolean;
+    /** Determines whether the Tab item needs to focus or not after it is selected */
+    preventFocus?: boolean;
 }
 /** An interface that holds options to control the selecting item action. */
 export interface SelectingEventArgs extends SelectEventArgs {
@@ -264,7 +266,7 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
     private isInteracted;
     private prevActiveEle;
     private lastIndex;
-    private isSwipeed;
+    private isSwiped;
     private isNested;
     private itemIndexArray;
     private templateEle;

package/src/tab/tab.js

@@ -286,7 +286,7 @@ var Tab = /** @class */ (function (_super) {
         this.isNested = false;
         this.isPopup = false;
         this.initRender = true;
-        this.isSwipeed = false;
+        this.isSwiped = false;
         this.itemIndexArray = [];
         this.templateEle = [];
         if (this.allowDragAndDrop) {
@@ -1136,17 +1136,21 @@ var Tab = /** @class */ (function (_super) {
         this.setActiveBorder();
         this.refreshItemVisibility(trg);
         if (!this.initRender && !skipDataBind) {
-            trg.firstElementChild.focus();
             var eventArg = {
                 previousItem: this.prevItem,
                 previousIndex: this.prevIndex,
                 selectedItem: trg,
                 selectedIndex: value,
                 selectedContent: select('#' + CLS_CONTENT + this.tabId + '_' + this.selectingID, this.content),
-                isSwiped: this.isSwipeed,
-                isInteracted: isInteracted
+                isSwiped: this.isSwiped,
+                isInteracted: isInteracted,
+                preventFocus: false
             };
-            this.trigger('selected', eventArg);
+            this.trigger('selected', eventArg, function (selectEventArgs) {
+                if (!selectEventArgs.preventFocus) {
+                    trg.firstElementChild.focus();
+                }
+            });
         }
     };
     Tab.prototype.setItems = function (items) {
@@ -1251,7 +1255,7 @@ var Tab = /** @class */ (function (_super) {
             nestedTab.removeAttribute('data-swipe');
             return;
         }
-        this.isSwipeed = true;
+        this.isSwiped = true;
         if (e.swipeDirection === 'Right' && this.selectedItem !== 0) {
             for (var k = this.selectedItem - 1; k >= 0; k--) {
                 if (!this.tbItem[k].classList.contains(CLS_HIDDEN)) {
@@ -1268,7 +1272,7 @@ var Tab = /** @class */ (function (_super) {
                 }
             }
         }
-        this.isSwipeed = false;
+        this.isSwiped = false;
     };
     Tab.prototype.spaceKeyDown = function (e) {
         if ((e.keyCode === 32 && e.which === 32) || (e.keyCode === 35 && e.which === 35)) {
@@ -2017,7 +2021,7 @@ var Tab = /** @class */ (function (_super) {
             selectingIndex: args,
             selectingContent: !isNOU(this.content) ?
                 select('#' + CLS_CONTENT + this.tabId + '_' + this.selectingID, this.content) : null,
-            isSwiped: this.isSwipeed,
+            isSwiped: this.isSwiped,
             isInteracted: this.isInteracted,
             cancel: false
         };

package/src/toolbar/toolbar.d.ts

@@ -251,6 +251,7 @@ export declare class Toolbar extends Component<HTMLElement> implements INotifyPr
     private tempId;
     private isExtendedOpen;
     private resizeContext;
+    private orientationChangeContext;
     /**
      * Contains the keyboard configuration of the Toolbar.
      */
@@ -495,6 +496,7 @@ export declare class Toolbar extends Component<HTMLElement> implements INotifyPr
     protected getModuleName(): string;
     private itemsRerender;
     private resize;
+    private orientationChange;
     private extendedOpen;
     private updateHideEleTabIndex;
     /**

package/src/toolbar/toolbar.js

@@ -154,6 +154,7 @@ var Toolbar = /** @class */ (function (_super) {
     function Toolbar(options, element) {
         var _this = _super.call(this, options, element) || this;
         _this.resizeContext = _this.resize.bind(_this);
+        _this.orientationChangeContext = _this.orientationChange.bind(_this);
         /**
          * Contains the keyboard configuration of the Toolbar.
          */
@@ -246,6 +247,7 @@ var Toolbar = /** @class */ (function (_super) {
     Toolbar.prototype.wireEvents = function () {
         EventHandler.add(this.element, 'click', this.clickHandler, this);
         window.addEventListener('resize', this.resizeContext);
+        window.addEventListener('orientationchange', this.orientationChangeContext);
         if (this.allowKeyboard) {
             this.wireKeyboardEvent();
         }
@@ -292,6 +294,7 @@ var Toolbar = /** @class */ (function (_super) {
         this.destroyScroll();
         this.unwireKeyboardEvent();
         window.removeEventListener('resize', this.resizeContext);
+        window.removeEventListener('orientationchange', this.orientationChangeContext);
         EventHandler.remove(document, 'scroll', this.docEvent);
         EventHandler.remove(document, 'click', this.docEvent);
     };
@@ -1013,8 +1016,9 @@ var Toolbar = /** @class */ (function (_super) {
         var sepHeight;
         var sepItem;
         if (this.overflowMode === 'Extended') {
-            sepItem = element.querySelector('.' + CLS_SEPARATOR + ':not(.' + CLS_POPUP + ')');
-            sepHeight = (element.style.height === 'auto' || element.style.height === '') ? null : sepItem.offsetHeight;
+            sepItem = element.querySelector('.' + CLS_SEPARATOR);
+            sepHeight =
+                (element.style.height === 'auto' || element.style.height === '') ? null : (sepItem && sepItem.offsetHeight);
         }
         var eleItem = element.querySelector('.' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + '):not(.' + CLS_POPUP + ')');
         var eleHeight = (element.style.height === 'auto' || element.style.height === '') ? null : (eleItem && eleItem.offsetHeight);
@@ -1266,7 +1270,7 @@ var Toolbar = /** @class */ (function (_super) {
         nav.setAttribute('role', 'button');
         element.appendChild(nav);
     };
-    Toolbar.prototype.tbarPriRef = function (inEle, indx, sepPri, el, des, elWid, wid, ig) {
+    Toolbar.prototype.tbarPriRef = function (inEle, indx, sepPri, el, des, elWid, wid, ig, eleStyles) {
         var ignoreCount = ig;
         var popEle = this.popObj.element;
         var query = '.' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + '):not(.' + CLS_TBAROVERFLOW + ')';
@@ -1278,8 +1282,7 @@ var Toolbar = /** @class */ (function (_super) {
             var eleSep = inEle.children[indx - (indx - sepPri) - 1];
             var ignoreCheck = (!isNOU(eleSep) && checkClass(eleSep, CLS_TBARIGNORE));
             if ((!isNOU(eleSep) && checkClass(eleSep, CLS_SEPARATOR) && !isVisible(eleSep)) || ignoreCheck) {
-                var sepDisplay = 'none';
-                eleSep.style.display = 'inherit';
+                eleSep.style.display = 'unset';
                 var eleSepWidth = eleSep.offsetWidth + (parseFloat(window.getComputedStyle(eleSep).marginRight) * 2);
                 var prevSep = eleSep.previousElementSibling;
                 if ((elWid + eleSepWidth) < wid || des) {
@@ -1289,8 +1292,9 @@ var Toolbar = /** @class */ (function (_super) {
                     }
                 }
                 else {
+                    setStyle(el, eleStyles);
                     if (prevSep.classList.contains(CLS_SEPARATOR)) {
-                        prevSep.style.display = sepDisplay;
+                        prevSep.style.display = 'none';
                     }
                 }
                 eleSep.style.display = '';
@@ -1409,6 +1413,7 @@ var Toolbar = /** @class */ (function (_super) {
             }
             el.style.position = '';
             if (elWidth < width || destroy) {
+                var inlineStyles = { minWidth: el.style.minWidth, height: el.style.height, minHeight: el.style.minHeight };
                 setStyle(el, { minWidth: '', height: '', minHeight: '' });
                 if (!el.classList.contains(CLS_POPOVERFLOW)) {
                     el.classList.remove(CLS_POPUP);
@@ -1434,7 +1439,7 @@ var Toolbar = /** @class */ (function (_super) {
                 }
                 ignoreCount = this_1.ignoreEleFetch(index, innerEle);
                 if (el.classList.contains(CLS_TBAROVERFLOW)) {
-                    this_1.tbarPriRef(innerEle, index, sepBeforePri_1, el, destroy, elWidth, width, ignoreCount);
+                    this_1.tbarPriRef(innerEle, index, sepBeforePri_1, el, destroy, elWidth, width, ignoreCount, inlineStyles);
                     width -= el.offsetWidth;
                 }
                 else if (index === 0) {
@@ -2090,6 +2095,12 @@ var Toolbar = /** @class */ (function (_super) {
         this.tbResize = false;
         this.separator();
     };
+    Toolbar.prototype.orientationChange = function () {
+        var _this = this;
+        setTimeout(function () {
+            _this.resize();
+        }, 500);
+    };
     Toolbar.prototype.extendedOpen = function () {
         var sib = this.element.querySelector('.' + CLS_EXTENDABLECLASS);
         if (this.overflowMode === 'Extended' && sib) {

package/src/treeview/treeview-model.d.ts

@@ -398,6 +398,7 @@ export interface TreeViewModel extends ComponentModel{
      * @angularType string | object
      * @reactType string | function | JSX.Element
      * @vueType string | function
+     * @aspType string
      */
     nodeTemplate?: string | Function;
 

package/src/treeview/treeview.d.ts

@@ -772,6 +772,7 @@ export declare class TreeView extends Component<HTMLElement> implements INotifyP
      * @angularType string | object
      * @reactType string | function | JSX.Element
      * @vueType string | function
+     * @aspType string
      */
     nodeTemplate: string | Function;
     /**

package/styles/bootstrap.css

@@ -1180,7 +1180,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 {
@@ -1335,7 +1335,7 @@
 .e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover,
 .e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:focus,
 .e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:active {
-  padding: 0 6px;
+  padding: 0 7px;
 }
 .e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item:not(.e-separator),
 .e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item:not(.e-separator) {
@@ -1554,7 +1554,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;
@@ -1807,7 +1807,7 @@
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover,
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:focus,
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:active {
-  padding: 0 1.5px;
+  padding: 0 2.5px;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item:not(.e-separator) {
   min-width: 30px;
@@ -1973,7 +1973,7 @@
   color: #333;
   border-color: #8c8c8c;
   border-style: solid;
-  border-width: 1px;
+  border-width: 0;
   box-shadow: none;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-icons {
@@ -1986,7 +1986,7 @@
   background: #e6e6e6;
   border-color: #adadad;
   border-style: solid;
-  border-width: 1px;
+  border-width: 0;
   border-radius: 4px;
   color: #333;
 }
@@ -2006,7 +2006,7 @@
   background: #e6e6e6;
   border-color: #adadad;
   border-style: solid;
-  border-width: 1px;
+  border-width: 0;
   border-radius: 4px;
   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   color: #333;
@@ -2162,7 +2162,7 @@
   border-radius: 4px;
   border-color: #8c8c8c;
   border-style: solid;
-  border-width: 1px;
+  border-width: 0;
   box-shadow: none;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
@@ -2170,7 +2170,7 @@
   border-radius: 4px;
   border-color: #adadad;
   border-style: solid;
-  border-width: 1px;
+  border-width: 0;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:active {
   background: #e6e6e6;
@@ -2178,7 +2178,7 @@
   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   border-color: #adadad;
   border-style: solid;
-  border-width: 1px;
+  border-width: 0;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-separator {
   border: solid #ccc;

package/styles/toolbar/_bootstrap-definition.scss

@@ -120,7 +120,7 @@ $tbar-separator-nrml-mrgn: 5.5px 6px !default;
 $tbar-separator-vertical-bgr-mrgn: 6px !default;
 $tbar-separator-vertical-nrml-mrgn: 6px 5.5px !default;
 $tbar-btn-bgr-padding: 1px 7px !default;
-$tbar-btn-bgr-focus-padding: 0 6px !default;
+$tbar-btn-bgr-focus-padding: 0 7px !default;
 $tbar-btn-nrml-padding: 1px 2.5px !default;
 $tbar-icons-bgr-font-size: 14px !default;
 $tbar-multirow-items-mrgn-bigger: 15px !default;
@@ -130,16 +130,16 @@ $tbar-multirow-item-top-btm-mrgn-small: 0 !default;
 
 $tbar-bgr-btn-text-font-size: 14px !default;
 $tbar-bgr-btn-icon-font-size: 16px !default;
-$tbar-bgr-btn-focus-padding: 0 6px !default;
+$tbar-bgr-btn-focus-padding: 0 7px !default;
 
 $tbar-nrml-btn-border-radius: 4px !default;
-$tbar-nrml-btn-focus-padding: 0 1.5px !default;
+$tbar-nrml-btn-focus-padding: 0 2.5px !default;
 $tbar-nrml-btn-focus-outline: 0 !default;
 
 $tbar-btn-icons-focus-color: $tbar-press-font !default;
 $tbar-btn-text-focus-color: $tbar-press-font !default;
 $tbar-btn-focus-border-color: $tbar-focus-border-color !default;
-$tbar-btn-hover-border-size: $tbar-border-size !default;
+$tbar-btn-hover-border-size: 0 !default;
 $tbar-btn-hover-active-icons-color: $tbar-press-font !default;
 $tbar-btn-hover-active-text-color: $tbar-press-font !default;
 $tbar-btn-overlay-opacity: .5 !default;
@@ -152,7 +152,7 @@ $tbar-btn-pressed-focus-box-shadow: inset 0 3px 5px rgba($grey-base, .125) !defa
 $tbar-btn-pressed-bg: $grey-e6 !default;
 $tbar-flat-btn-active-box-shadow: inset 0 3px 5px rgba($grey-base, .125) !default;
 
-$tbar-ext-btn-focus-padding: 0 1.5px !default;
+$tbar-ext-btn-focus-padding: 0 2.5px !default;
 $tbar-ext-btn-icon-padding: 0 !default;
 $tbar-ext-btn-icon-font-size: 14px !default;
 $tbar-ext-btn-focus-box-shadow: none !default;

package/styles/toolbar/bootstrap.css

@@ -55,7 +55,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 {
@@ -210,7 +210,7 @@
 .e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover,
 .e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:focus,
 .e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:active {
-  padding: 0 6px;
+  padding: 0 7px;
 }
 .e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item:not(.e-separator),
 .e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item:not(.e-separator) {
@@ -429,7 +429,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;
@@ -682,7 +682,7 @@
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover,
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:focus,
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:active {
-  padding: 0 1.5px;
+  padding: 0 2.5px;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item:not(.e-separator) {
   min-width: 30px;
@@ -848,7 +848,7 @@
   color: #333;
   border-color: #8c8c8c;
   border-style: solid;
-  border-width: 1px;
+  border-width: 0;
   box-shadow: none;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-icons {
@@ -861,7 +861,7 @@
   background: #e6e6e6;
   border-color: #adadad;
   border-style: solid;
-  border-width: 1px;
+  border-width: 0;
   border-radius: 4px;
   color: #333;
 }
@@ -881,7 +881,7 @@
   background: #e6e6e6;
   border-color: #adadad;
   border-style: solid;
-  border-width: 1px;
+  border-width: 0;
   border-radius: 4px;
   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   color: #333;
@@ -1037,7 +1037,7 @@
   border-radius: 4px;
   border-color: #8c8c8c;
   border-style: solid;
-  border-width: 1px;
+  border-width: 0;
   box-shadow: none;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
@@ -1045,7 +1045,7 @@
   border-radius: 4px;
   border-color: #adadad;
   border-style: solid;
-  border-width: 1px;
+  border-width: 0;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:active {
   background: #e6e6e6;
@@ -1053,7 +1053,7 @@
   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   border-color: #adadad;
   border-style: solid;
-  border-width: 1px;
+  border-width: 0;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-separator {
   border: solid #ccc;