@syncfusion/ej2-splitbuttons 20.1.57 → 20.2.43

package/helpers/e2e/dropdownbuttonHelper.js

@@ -1,39 +1,56 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const e2e_1 = require("@syncfusion/ej2-base/helpers/e2e");
-class DropDownButtonHelper extends e2e_1.TestHelper {
-    constructor(id, wrapperFn) {
-        super();
-        this.id = id;
-        if (wrapperFn !== undefined) {
-            this.wrapperFn = wrapperFn;
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+define(["require", "exports", "@syncfusion/ej2-base/helpers/e2e"], function (require, exports, e2e_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    var DropDownButtonHelper = (function (_super) {
+        __extends(DropDownButtonHelper, _super);
+        function DropDownButtonHelper(id, wrapperFn) {
+            var _this = _super.call(this) || this;
+            _this.id = id;
+            if (wrapperFn !== undefined) {
+                _this.wrapperFn = wrapperFn;
+            }
+            return _this;
         }
-        return this;
-    }
-    getElement() {
-        return this.selector('#' + this.id);
-    }
-    getPopupElement() {
-        return this.selector('#' + this.id + '_popup');
-    }
-    setModel(property, value) {
-        let cy;
-        return cy.get('#' + this.id).then((ele) => {
-            return ele[0].ej2_instances[0][property] = value;
-        });
-    }
-    getModel(property) {
-        let cy;
-        return cy.get('#' + this.id).then((ele) => {
-            return ele[0].ej2_instances[0][property];
-        });
-    }
-    invoke(fName, args = []) {
-        let cy;
-        return cy.get('#' + this.id).then((ele) => {
-            var inst = ele[0].ej2_instances[0];
-            return inst[fName].apply(inst, args);
-        });
-    }
-}
-exports.DropDownButtonHelper = DropDownButtonHelper;
+        DropDownButtonHelper.prototype.getElement = function () {
+            return this.selector('#' + this.id);
+        };
+        DropDownButtonHelper.prototype.getPopupElement = function () {
+            return this.selector('#' + this.id + '_popup');
+        };
+        DropDownButtonHelper.prototype.setModel = function (property, value) {
+            var cy;
+            return cy.get('#' + this.id).then(function (ele) {
+                return ele[0].ej2_instances[0][property] = value;
+            });
+        };
+        DropDownButtonHelper.prototype.getModel = function (property) {
+            var cy;
+            return cy.get('#' + this.id).then(function (ele) {
+                return ele[0].ej2_instances[0][property];
+            });
+        };
+        DropDownButtonHelper.prototype.invoke = function (fName, args) {
+            if (args === void 0) { args = []; }
+            var cy;
+            return cy.get('#' + this.id).then(function (ele) {
+                var inst = ele[0].ej2_instances[0];
+                return inst[fName].apply(inst, args);
+            });
+        };
+        return DropDownButtonHelper;
+    }(e2e_1.TestHelper));
+    exports.DropDownButtonHelper = DropDownButtonHelper;
+});

package/helpers/e2e/index.js

@@ -1,8 +1,10 @@
-"use strict";
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
-Object.defineProperty(exports, "__esModule", { value: true });
-__export(require("./dropdownbuttonHelper"));
-__export(require("./progressbuttonHelper"));
-__export(require("./splitbuttonHelper"));
+define(["require", "exports", "./dropdownbuttonHelper", "./progressbuttonHelper", "./splitbuttonHelper"], function (require, exports, dropdownbuttonHelper_1, progressbuttonHelper_1, splitbuttonHelper_1) {
+    "use strict";
+    function __export(m) {
+        for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+    }
+    Object.defineProperty(exports, "__esModule", { value: true });
+    __export(dropdownbuttonHelper_1);
+    __export(progressbuttonHelper_1);
+    __export(splitbuttonHelper_1);
+});

package/helpers/e2e/progressbuttonHelper.js

@@ -1,36 +1,53 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const e2e_1 = require("@syncfusion/ej2-base/helpers/e2e");
-class ProgressButtonHelper extends e2e_1.TestHelper {
-    constructor(id, wrapperFn) {
-        super();
-        this.id = id;
-        if (wrapperFn !== undefined) {
-            this.wrapperFn = wrapperFn;
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+define(["require", "exports", "@syncfusion/ej2-base/helpers/e2e"], function (require, exports, e2e_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    var ProgressButtonHelper = (function (_super) {
+        __extends(ProgressButtonHelper, _super);
+        function ProgressButtonHelper(id, wrapperFn) {
+            var _this = _super.call(this) || this;
+            _this.id = id;
+            if (wrapperFn !== undefined) {
+                _this.wrapperFn = wrapperFn;
+            }
+            return _this;
         }
-        return this;
-    }
-    getElement() {
-        return this.selector('#' + this.id);
-    }
-    setModel(property, value) {
-        let cy;
-        return cy.get('#' + this.id).then((ele) => {
-            return ele[0].ej2_instances[0][property] = value;
-        });
-    }
-    getModel(property) {
-        let cy;
-        return cy.get('#' + this.id).then((ele) => {
-            return ele[0].ej2_instances[0][property];
-        });
-    }
-    invoke(fName, args = []) {
-        let cy;
-        return cy.get('#' + this.id).then((ele) => {
-            var inst = ele[0].ej2_instances[0];
-            return inst[fName].apply(inst, args);
-        });
-    }
-}
-exports.ProgressButtonHelper = ProgressButtonHelper;
+        ProgressButtonHelper.prototype.getElement = function () {
+            return this.selector('#' + this.id);
+        };
+        ProgressButtonHelper.prototype.setModel = function (property, value) {
+            var cy;
+            return cy.get('#' + this.id).then(function (ele) {
+                return ele[0].ej2_instances[0][property] = value;
+            });
+        };
+        ProgressButtonHelper.prototype.getModel = function (property) {
+            var cy;
+            return cy.get('#' + this.id).then(function (ele) {
+                return ele[0].ej2_instances[0][property];
+            });
+        };
+        ProgressButtonHelper.prototype.invoke = function (fName, args) {
+            if (args === void 0) { args = []; }
+            var cy;
+            return cy.get('#' + this.id).then(function (ele) {
+                var inst = ele[0].ej2_instances[0];
+                return inst[fName].apply(inst, args);
+            });
+        };
+        return ProgressButtonHelper;
+    }(e2e_1.TestHelper));
+    exports.ProgressButtonHelper = ProgressButtonHelper;
+});

package/helpers/e2e/splitbuttonHelper.js

@@ -1,42 +1,59 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const e2e_1 = require("@syncfusion/ej2-base/helpers/e2e");
-class SplitButtonHelper extends e2e_1.TestHelper {
-    constructor(id, wrapperFn) {
-        super();
-        this.id = id;
-        if (wrapperFn !== undefined) {
-            this.wrapperFn = wrapperFn;
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+define(["require", "exports", "@syncfusion/ej2-base/helpers/e2e"], function (require, exports, e2e_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    var SplitButtonHelper = (function (_super) {
+        __extends(SplitButtonHelper, _super);
+        function SplitButtonHelper(id, wrapperFn) {
+            var _this = _super.call(this) || this;
+            _this.id = id;
+            if (wrapperFn !== undefined) {
+                _this.wrapperFn = wrapperFn;
+            }
+            return _this;
         }
-        return this;
-    }
-    getElement() {
-        return this.selector('#' + this.id);
-    }
-    getDropDownElement() {
-        return this.selector('#' + this.id + '_dropdownbtn');
-    }
-    getPopupElement() {
-        return this.selector('#' + this.id + '_dropdownbtn_popup');
-    }
-    setModel(property, value) {
-        let cy;
-        return cy.get('#' + this.id).then((ele) => {
-            return ele[0].ej2_instances[0][property] = value;
-        });
-    }
-    getModel(property) {
-        let cy;
-        return cy.get('#' + this.id).then((ele) => {
-            return ele[0].ej2_instances[0][property];
-        });
-    }
-    invoke(fName, args = []) {
-        let cy;
-        return cy.get('#' + this.id).then((ele) => {
-            var inst = ele[0].ej2_instances[0];
-            return inst[fName].apply(inst, args);
-        });
-    }
-}
-exports.SplitButtonHelper = SplitButtonHelper;
+        SplitButtonHelper.prototype.getElement = function () {
+            return this.selector('#' + this.id);
+        };
+        SplitButtonHelper.prototype.getDropDownElement = function () {
+            return this.selector('#' + this.id + '_dropdownbtn');
+        };
+        SplitButtonHelper.prototype.getPopupElement = function () {
+            return this.selector('#' + this.id + '_dropdownbtn_popup');
+        };
+        SplitButtonHelper.prototype.setModel = function (property, value) {
+            var cy;
+            return cy.get('#' + this.id).then(function (ele) {
+                return ele[0].ej2_instances[0][property] = value;
+            });
+        };
+        SplitButtonHelper.prototype.getModel = function (property) {
+            var cy;
+            return cy.get('#' + this.id).then(function (ele) {
+                return ele[0].ej2_instances[0][property];
+            });
+        };
+        SplitButtonHelper.prototype.invoke = function (fName, args) {
+            if (args === void 0) { args = []; }
+            var cy;
+            return cy.get('#' + this.id).then(function (ele) {
+                var inst = ele[0].ej2_instances[0];
+                return inst[fName].apply(inst, args);
+            });
+        };
+        return SplitButtonHelper;
+    }(e2e_1.TestHelper));
+    exports.SplitButtonHelper = SplitButtonHelper;
+});

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-splitbuttons@*",
-  "_id": "@syncfusion/ej2-splitbuttons@20.1.47",
+  "_id": "@syncfusion/ej2-splitbuttons@20.2.38",
   "_inBundle": false,
-  "_integrity": "sha512-YLoDlwjsPTpygotqeQuC/PwMUCZgKq85xJzl+rXCT4LkRo+/dFf450xhzQCf146uAfTObREdPH+gidG7iM4aLQ==",
+  "_integrity": "sha512-vDJOw9dEFF22KXMDqyQwphs4kEFWn8MpFqnjPW5HJbDLqGEDPIcB43GGyGLqQWocLdr9CXAj89C9xCCJEDosqA==",
   "_location": "/@syncfusion/ej2-splitbuttons",
   "_phantomChildren": {},
   "_requested": {
@@ -31,8 +31,8 @@
     "/@syncfusion/ej2-richtexteditor",
     "/@syncfusion/ej2-vue-splitbuttons"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-splitbuttons/-/ej2-splitbuttons-20.1.47.tgz",
-  "_shasum": "fcd71526585b17491e31f0081d63373def121b30",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-splitbuttons/-/ej2-splitbuttons-20.2.38.tgz",
+  "_shasum": "a906817eb0b66a3876af13d3a8f3551740778e8a",
   "_spec": "@syncfusion/ej2-splitbuttons@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -43,8 +43,8 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.1.56",
-    "@syncfusion/ej2-popups": "~20.1.57"
+    "@syncfusion/ej2-base": "~20.2.43",
+    "@syncfusion/ej2-popups": "~20.2.43"
   },
   "deprecated": false,
   "description": "A package of feature-rich Essential JS 2 components such as DropDownButton, SplitButton, ProgressButton and ButtonGroup.",
@@ -87,6 +87,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "20.1.57",
+  "version": "20.2.43",
   "sideEffects": false
 }

package/src/drop-down-button/drop-down-button-model.d.ts

@@ -73,6 +73,13 @@ export interface DropDownButtonModel extends ComponentModel{
      */
     target?: string | Element;
 
+    /**
+      * Specifies the event to close the DropDownButton popup.
+      *
+      * @default ""
+      */
+    closeActionEvents?: string;
+
     /**
      * Triggers while rendering each Popup item of DropDownButton.
      *

package/src/drop-down-button/drop-down-button.d.ts

@@ -87,6 +87,12 @@ export declare class DropDownButton extends Component<HTMLButtonElement> impleme
      * @default ""
      */
     target: string | Element;
+    /**
+     * Specifies the event to close the DropDownButton popup.
+     *
+     * @default ""
+     */
+    closeActionEvents: string;
     /**
      * Triggers while rendering each Popup item of DropDownButton.
      *
@@ -215,6 +221,7 @@ export declare class DropDownButton extends Component<HTMLButtonElement> impleme
     private keyEventHandler;
     private getLI;
     private mousedownHandler;
+    private focusoutHandler;
     protected clickHandler(e: MouseEvent | KeyboardEventArgs): void;
     private openPopUp;
     private closePopup;

package/src/drop-down-button/drop-down-button.js

@@ -171,7 +171,7 @@ var DropDownButton = /** @class */ (function (_super) {
             _a['aria-expanded'] = 'false',
             _a['aria-owns'] = this.getPopUpElement().id,
             _a['type'] = 'button',
-            _a['aria-label'] = this.element.textContent + ' dropdownbutton',
+            _a['aria-label'] = this.element.textContent ? this.element.textContent : 'dropdownbutton',
             _a));
         if (this.cssClass) {
             addClass([div], this.cssClass.split(' '));
@@ -201,8 +201,9 @@ var DropDownButton = /** @class */ (function (_super) {
             item = items[i];
             var tempItem = item.text;
             li = this.createElement('li', {
+                innerHTML: item.url ? '' : tempItem,
                 className: item.separator ? classNames.ITEM + ' ' + classNames.SEPARATOR : classNames.ITEM,
-                attrs: { 'role': 'menuItem', 'tabindex': '-1' },
+                attrs: { 'role': 'menuItem', 'tabindex': '-1', 'aria-label': tempItem },
                 id: item.id ? item.id : getUniqueID('e-' + this.getModuleName() + '-item')
             });
             if (this.enableHtmlSanitizer) {
@@ -391,6 +392,9 @@ var DropDownButton = /** @class */ (function (_super) {
         if (popupElement) {
             EventHandler.add(popupElement, 'click', this.clickHandler, this);
             EventHandler.add(popupElement, 'keydown', this.keyBoardHandler, this);
+            if (this.closeActionEvents) {
+                EventHandler.add(popupElement, this.closeActionEvents, this.focusoutHandler, this);
+            }
         }
         this.rippleFn = rippleEffect(popupElement, { selector: '.' + classNames.ITEM });
     };
@@ -402,6 +406,9 @@ var DropDownButton = /** @class */ (function (_super) {
         if (popupElement && popupElement.parentElement) {
             EventHandler.remove(popupElement, 'click', this.clickHandler);
             EventHandler.remove(popupElement, 'keydown', this.keyBoardHandler);
+            if (this.closeActionEvents) {
+                EventHandler.remove(popupElement, this.closeActionEvents, this.focusoutHandler);
+            }
         }
     };
     /**
@@ -469,6 +476,11 @@ var DropDownButton = /** @class */ (function (_super) {
             this.closePopup(e);
         }
     };
+    DropDownButton.prototype.focusoutHandler = function (e) {
+        if (this.isPopupCreated && !this.canOpen()) {
+            this.closePopup(e);
+        }
+    };
     DropDownButton.prototype.clickHandler = function (e) {
         var trgt = e.target;
         if (closest(trgt, '[id="' + this.element.id + '"]')) {
@@ -544,7 +556,9 @@ var DropDownButton = /** @class */ (function (_super) {
                 _this.dropDown.show(null, _this.element);
                 addClass([_this.element], 'e-active');
                 _this.element.setAttribute('aria-expanded', 'true');
-                ul_1.focus();
+                if (ul_1) {
+                    ul_1.focus();
+                }
                 var openArgs = { element: ul_1, items: _this.items };
                 _this.trigger('open', openArgs);
             }
@@ -563,7 +577,10 @@ var DropDownButton = /** @class */ (function (_super) {
             if (!observedArgs.cancel) {
                 _this.popupUnWireEvents();
                 var ul_2 = _this.getULElement();
-                var selectedLi = ul_2.querySelector('.e-selected');
+                var selectedLi = void 0;
+                if (ul_2) {
+                    selectedLi = ul_2.querySelector('.e-selected');
+                }
                 if (selectedLi) {
                     selectedLi.classList.remove('e-selected');
                 }
@@ -706,6 +723,9 @@ var DropDownButton = /** @class */ (function (_super) {
     __decorate([
         Property('')
     ], DropDownButton.prototype, "target", void 0);
+    __decorate([
+        Property('')
+    ], DropDownButton.prototype, "closeActionEvents", void 0);
     __decorate([
         Event()
     ], DropDownButton.prototype, "beforeItemRender", void 0);

package/styles/bootstrap-dark.css

@@ -531,14 +531,6 @@
       flex-direction: row;
   position: relative;
 }
-*.e-btn-group input:focus + label.e-btn,
-*.e-btn-group .e-btn:focus,
-*.e-btn-group .e-btn:hover,
-*.e-css.e-btn-group input:focus + label.e-btn,
-*.e-css.e-btn-group .e-btn:focus,
-*.e-css.e-btn-group .e-btn:hover {
-  z-index: 2;
-}
 *.e-btn-group input + label.e-btn,
 *.e-css.e-btn-group input + label.e-btn {
   margin-bottom: 0;
@@ -1779,19 +1771,19 @@
 }
 
 *.e-flat.e-primary .e-progress {
-  background-color: rgba(255, 64, 129, 0.2);
+  background-color: rgba(255, 255, 255, 0.2);
 }
 *.e-flat.e-success .e-progress {
-  background-color: rgba(77, 132, 29, 0.2);
+  background-color: rgba(255, 255, 255, 0.2);
 }
 *.e-flat.e-info .e-progress {
-  background-color: rgba(3, 120, 213, 0.2);
+  background-color: rgba(255, 255, 255, 0.2);
 }
 *.e-flat.e-warning .e-progress {
-  background-color: rgba(193, 87, 0, 0.2);
+  background-color: rgba(255, 255, 255, 0.2);
 }
 *.e-flat.e-danger .e-progress {
-  background-color: rgba(214, 65, 19, 0.2);
+  background-color: rgba(255, 255, 255, 0.2);
 }
 
 *.e-outline:not(:focus).e-primary .e-progress {

package/styles/bootstrap.css

@@ -531,14 +531,6 @@
       flex-direction: row;
   position: relative;
 }
-*.e-btn-group input:focus + label.e-btn,
-*.e-btn-group .e-btn:focus,
-*.e-btn-group .e-btn:hover,
-*.e-css.e-btn-group input:focus + label.e-btn,
-*.e-css.e-btn-group .e-btn:focus,
-*.e-css.e-btn-group .e-btn:hover {
-  z-index: 2;
-}
 *.e-btn-group input + label.e-btn,
 *.e-css.e-btn-group input + label.e-btn {
   margin-bottom: 0;

package/styles/bootstrap4.css

@@ -514,14 +514,6 @@
       flex-direction: row;
   position: relative;
 }
-*.e-btn-group input:focus + label.e-btn,
-*.e-btn-group .e-btn:focus,
-*.e-btn-group .e-btn:hover,
-*.e-css.e-btn-group input:focus + label.e-btn,
-*.e-css.e-btn-group .e-btn:focus,
-*.e-css.e-btn-group .e-btn:hover {
-  z-index: 2;
-}
 *.e-btn-group input + label.e-btn,
 *.e-css.e-btn-group input + label.e-btn {
   margin-bottom: 0;
@@ -1759,7 +1751,7 @@
 *.e-success .e-progress,
 *.e-danger .e-progress,
 *.e-info .e-progress {
-  background-color: rgba(255, 255, 255, 0.25);
+  background-color: rgba(73, 80, 87, 0.2);
 }
 
 *.e-warning .e-progress {

package/styles/bootstrap5-dark.css

@@ -69,6 +69,7 @@
 
 .e-dropdown-popup {
   position: absolute;
+  border-radius: 4px;
   margin-top: 2px;
 }
 .e-dropdown-popup ul {
@@ -148,6 +149,7 @@
 
 *.e-bigger .e-dropdown-popup {
   background-color: transparent;
+  border-radius: 4px;
 }
 
 *.e-bigger .e-dropdown-popup ul,
@@ -778,6 +780,7 @@
   outline: #6c757d 0 solid;
   outline-offset: 0;
   box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+  border-color: #5c636a;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-primary,
@@ -789,6 +792,7 @@
   color: #fff;
   outline: #6c757d 0 solid;
   box-shadow: 0 0 0 4px rgba(49, 132, 253, 0.5);
+  border-color: #0b5ed7;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-success,
@@ -799,6 +803,7 @@
   border-color: #198754;
   color: #fff;
   box-shadow: 0 0 0 4px rgba(66, 190, 133, 0.5);
+  border-color: #157347;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-info,
@@ -809,6 +814,7 @@
   border-color: #0dcaf0;
   color: #000;
   box-shadow: 0 0 0 4px rgba(49, 210, 242, 0.5);
+  border-color: #31d2f2;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-warning,
@@ -819,6 +825,7 @@
   border-color: #ffc107;
   color: #000;
   box-shadow: 0 0 0 4px rgba(255, 202, 44, 0.5);
+  border-color: #ffca2c;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-danger,
@@ -829,6 +836,7 @@
   border-color: #dc3545;
   color: #fff;
   box-shadow: 0 0 0 4px rgba(232, 120, 131, 0.5);
+  border-color: #bb2d3b;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-link,
@@ -848,36 +856,42 @@
 .e-css.e-btn-group .e-btn:focus.e-outline,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline {
   box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+  border-color: #5c636a;
 }
 .e-btn-group .e-btn:focus.e-outline.e-primary,
 .e-btn-group input:focus + label.e-btn.e-outline.e-primary,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-primary,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-primary {
   box-shadow: 0 0 0 4px rgba(49, 132, 253, 0.5);
+  border-color: #0d6efd;
 }
 .e-btn-group .e-btn:focus.e-outline.e-success,
 .e-btn-group input:focus + label.e-btn.e-outline.e-success,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-success,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-success {
   box-shadow: 0 0 0 4px rgba(66, 190, 133, 0.5);
+  border-color: #157347;
 }
 .e-btn-group .e-btn:focus.e-outline.e-info,
 .e-btn-group input:focus + label.e-btn.e-outline.e-info,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-info,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-info {
   box-shadow: 0 0 0 4px rgba(49, 210, 242, 0.5);
+  border-color: #31d2f2;
 }
 .e-btn-group .e-btn:focus.e-outline.e-warning,
 .e-btn-group input:focus + label.e-btn.e-outline.e-warning,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-warning,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-warning {
   box-shadow: 0 0 0 4px rgba(255, 202, 44, 0.5);
+  border-color: #ffca2c;
 }
 .e-btn-group .e-btn:focus.e-outline.e-danger,
 .e-btn-group input:focus + label.e-btn.e-outline.e-danger,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-danger,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-danger {
   box-shadow: 0 0 0 4px rgba(232, 120, 131, 0.5);
+  border-color: #bb2d3b;
 }
 .e-btn-group .e-btn:active,
 .e-btn-group input:active + label.e-btn,