@syncfusion/ej2-splitbuttons 20.2.36 → 20.2.45

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-splitbuttons@*",
-  "_id": "@syncfusion/ej2-splitbuttons@20.2.1",
+  "_id": "@syncfusion/ej2-splitbuttons@20.2.38",
   "_inBundle": false,
-  "_integrity": "sha512-QPgyFYcS+goyy0ZtopODg8lVT6JbSi17+GQNeGv6/IU/FcMcf7JSwtWx5umiTxGQ8nG70wIwIXBq49btr0HWoQ==",
+  "_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-release/@syncfusion/ej2-splitbuttons/-/ej2-splitbuttons-20.2.1.tgz",
-  "_shasum": "0e33e29493bd7277ab1ec72661da739019329966",
+  "_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.2.36",
-    "@syncfusion/ej2-popups": "~20.2.36"
+    "@syncfusion/ej2-base": "~20.2.45",
+    "@syncfusion/ej2-popups": "~20.2.45"
   },
   "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.2.36",
+  "version": "20.2.45",
   "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

@@ -392,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 });
     };
@@ -403,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);
+            }
         }
     };
     /**
@@ -470,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 + '"]')) {
@@ -545,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);
             }
@@ -564,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');
                 }
@@ -707,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

@@ -1771,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/bootstrap4.css

@@ -1751,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/button-group/fluent-dark.css

@@ -261,7 +261,7 @@
 .e-css.e-btn-group input:focus + label.e-btn.e-primary {
   background-color: #006cbf;
   border-color: #0078d4;
-  color: #fff;
+  color: #1b1a19;
   outline: 1px solid;
   box-shadow: 0 0 rgba(0, 0, 0, 0);
   box-shadow: none;
@@ -273,7 +273,7 @@
 .e-css.e-btn-group input:focus + label.e-btn.e-success {
   background-color: #0a5f0a;
   border-color: #0b6a0b;
-  color: #fff;
+  color: #1b1a19;
   box-shadow: 0 0 rgba(0, 0, 0, 0);
   box-shadow: none;
   outline-color: inherit;
@@ -284,7 +284,7 @@
 .e-css.e-btn-group input:focus + label.e-btn.e-info {
   background-color: #03767a;
   border-color: #038387;
-  color: #fff;
+  color: #1b1a19;
   box-shadow: 0 0 rgba(0, 0, 0, 0);
   box-shadow: none;
   outline-color: inherit;
@@ -295,7 +295,7 @@
 .e-css.e-btn-group input:focus + label.e-btn.e-warning {
   background-color: #cf6228;
   border-color: #ca5010;
-  color: #fff;
+  color: #1b1a19;
   box-shadow: 0 0 rgba(0, 0, 0, 0);
   box-shadow: none;
   outline-color: inherit;
@@ -306,7 +306,7 @@
 .e-css.e-btn-group input:focus + label.e-btn.e-danger {
   background-color: #bc2f32;
   border-color: #d13438;
-  color: #fff;
+  color: #1b1a19;
   box-shadow: 0 0 rgba(0, 0, 0, 0);
   box-shadow: none;
   outline-color: inherit;
@@ -379,7 +379,7 @@
 .e-css.e-btn-group input:checked + label.e-btn.e-primary {
   background-color: #0060aa;
   border-color: #0060aa;
-  color: #fff;
+  color: #1b1a19;
   box-shadow: none;
 }
 .e-btn-group .e-btn:active.e-success,
@@ -390,7 +390,7 @@
 .e-css.e-btn-group input:checked + label.e-btn.e-success {
   background-color: #095509;
   border-color: #095509;
-  color: #fff;
+  color: #1b1a19;
   box-shadow: none;
 }
 .e-btn-group .e-btn:active.e-info,
@@ -400,7 +400,7 @@
 .e-css.e-btn-group input:active + label.e-btn.e-info,
 .e-css.e-btn-group input:checked + label.e-btn.e-info {
   background-color: #359c9f;
-  color: #fff;
+  color: #1b1a19;
   border-color: #359c9f;
   box-shadow: none;
 }
@@ -412,7 +412,7 @@
 .e-css.e-btn-group input:checked + label.e-btn.e-warning {
   background-color: #d57340;
   border-color: #d57340;
-  color: #fff;
+  color: #1b1a19;
   box-shadow: none;
 }
 .e-btn-group .e-btn:active.e-danger,
@@ -423,7 +423,7 @@
 .e-css.e-btn-group input:checked + label.e-btn.e-danger {
   background-color: #a72a2d;
   border-color: #a72a2d;
-  color: #fff;
+  color: #1b1a19;
   box-shadow: none;
 }
 .e-btn-group .e-btn:active.e-outline,
@@ -446,7 +446,7 @@
   background-color: #0060aa;
   border-color: #0078d4;
   box-shadow: none;
-  color: #fff;
+  color: #1b1a19;
 }
 .e-btn-group .e-btn:active.e-outline.e-success,
 .e-btn-group input:active + label.e-btn.e-outline.e-success,
@@ -457,7 +457,7 @@
   background-color: #095509;
   border-color: #095509;
   box-shadow: none;
-  color: #fff;
+  color: #1b1a19;
 }
 .e-btn-group .e-btn:active.e-outline.e-info,
 .e-btn-group input:active + label.e-btn.e-outline.e-info,
@@ -468,7 +468,7 @@
   background-color: #359c9f;
   border-color: #359c9f;
   box-shadow: none;
-  color: #fff;
+  color: #1b1a19;
 }
 .e-btn-group .e-btn:active.e-outline.e-warning,
 .e-btn-group input:active + label.e-btn.e-outline.e-warning,
@@ -479,7 +479,7 @@
   background-color: #d57340;
   border-color: #d57340;
   box-shadow: none;
-  color: #fff;
+  color: #1b1a19;
 }
 .e-btn-group .e-btn:active.e-outline.e-danger,
 .e-btn-group input:active + label.e-btn.e-outline.e-danger,
@@ -490,7 +490,7 @@
   background-color: #a72a2d;
   border-color: #a72a2d;
   box-shadow: none;
-  color: #fff;
+  color: #1b1a19;
 }
 .e-btn-group .e-btn:disabled,
 .e-btn-group input:disabled + label.e-btn,

package/styles/fluent-dark.css

@@ -773,7 +773,7 @@
 .e-css.e-btn-group input:focus + label.e-btn.e-primary {
   background-color: #006cbf;
   border-color: #0078d4;
-  color: #fff;
+  color: #1b1a19;
   outline: 1px solid;
   box-shadow: 0 0 rgba(0, 0, 0, 0);
   box-shadow: none;
@@ -785,7 +785,7 @@
 .e-css.e-btn-group input:focus + label.e-btn.e-success {
   background-color: #0a5f0a;
   border-color: #0b6a0b;
-  color: #fff;
+  color: #1b1a19;
   box-shadow: 0 0 rgba(0, 0, 0, 0);
   box-shadow: none;
   outline-color: inherit;
@@ -796,7 +796,7 @@
 .e-css.e-btn-group input:focus + label.e-btn.e-info {
   background-color: #03767a;
   border-color: #038387;
-  color: #fff;
+  color: #1b1a19;
   box-shadow: 0 0 rgba(0, 0, 0, 0);
   box-shadow: none;
   outline-color: inherit;
@@ -807,7 +807,7 @@
 .e-css.e-btn-group input:focus + label.e-btn.e-warning {
   background-color: #cf6228;
   border-color: #ca5010;
-  color: #fff;
+  color: #1b1a19;
   box-shadow: 0 0 rgba(0, 0, 0, 0);
   box-shadow: none;
   outline-color: inherit;
@@ -818,7 +818,7 @@
 .e-css.e-btn-group input:focus + label.e-btn.e-danger {
   background-color: #bc2f32;
   border-color: #d13438;
-  color: #fff;
+  color: #1b1a19;
   box-shadow: 0 0 rgba(0, 0, 0, 0);
   box-shadow: none;
   outline-color: inherit;
@@ -891,7 +891,7 @@
 .e-css.e-btn-group input:checked + label.e-btn.e-primary {
   background-color: #0060aa;
   border-color: #0060aa;
-  color: #fff;
+  color: #1b1a19;
   box-shadow: none;
 }
 .e-btn-group .e-btn:active.e-success,
@@ -902,7 +902,7 @@
 .e-css.e-btn-group input:checked + label.e-btn.e-success {
   background-color: #095509;
   border-color: #095509;
-  color: #fff;
+  color: #1b1a19;
   box-shadow: none;
 }
 .e-btn-group .e-btn:active.e-info,
@@ -912,7 +912,7 @@
 .e-css.e-btn-group input:active + label.e-btn.e-info,
 .e-css.e-btn-group input:checked + label.e-btn.e-info {
   background-color: #359c9f;
-  color: #fff;
+  color: #1b1a19;
   border-color: #359c9f;
   box-shadow: none;
 }
@@ -924,7 +924,7 @@
 .e-css.e-btn-group input:checked + label.e-btn.e-warning {
   background-color: #d57340;
   border-color: #d57340;
-  color: #fff;
+  color: #1b1a19;
   box-shadow: none;
 }
 .e-btn-group .e-btn:active.e-danger,
@@ -935,7 +935,7 @@
 .e-css.e-btn-group input:checked + label.e-btn.e-danger {
   background-color: #a72a2d;
   border-color: #a72a2d;
-  color: #fff;
+  color: #1b1a19;
   box-shadow: none;
 }
 .e-btn-group .e-btn:active.e-outline,
@@ -958,7 +958,7 @@
   background-color: #0060aa;
   border-color: #0078d4;
   box-shadow: none;
-  color: #fff;
+  color: #1b1a19;
 }
 .e-btn-group .e-btn:active.e-outline.e-success,
 .e-btn-group input:active + label.e-btn.e-outline.e-success,
@@ -969,7 +969,7 @@
   background-color: #095509;
   border-color: #095509;
   box-shadow: none;
-  color: #fff;
+  color: #1b1a19;
 }
 .e-btn-group .e-btn:active.e-outline.e-info,
 .e-btn-group input:active + label.e-btn.e-outline.e-info,
@@ -980,7 +980,7 @@
   background-color: #359c9f;
   border-color: #359c9f;
   box-shadow: none;
-  color: #fff;
+  color: #1b1a19;
 }
 .e-btn-group .e-btn:active.e-outline.e-warning,
 .e-btn-group input:active + label.e-btn.e-outline.e-warning,
@@ -991,7 +991,7 @@
   background-color: #d57340;
   border-color: #d57340;
   box-shadow: none;
-  color: #fff;
+  color: #1b1a19;
 }
 .e-btn-group .e-btn:active.e-outline.e-danger,
 .e-btn-group input:active + label.e-btn.e-outline.e-danger,
@@ -1002,7 +1002,7 @@
   background-color: #a72a2d;
   border-color: #a72a2d;
   box-shadow: none;
-  color: #fff;
+  color: #1b1a19;
 }
 .e-btn-group .e-btn:disabled,
 .e-btn-group input:disabled + label.e-btn,
@@ -1586,14 +1586,14 @@
   stroke: #fff;
 }
 .e-progress-btn.e-primary .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-outline:focus .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
-  fill: #fff;
-  stroke: #fff;
+  fill: #1b1a19;
+  stroke: #1b1a19;
 }
 .e-progress-btn.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(255, 255, 255, 0.7);
+  stroke: rgba(27, 26, 25, 0.7);
 }
 .e-progress-btn.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: #fff;
+  stroke: #1b1a19;
 }
 .e-progress-btn.e-primary.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg {
   fill: #0078d4;
@@ -1606,14 +1606,14 @@
   stroke: #0078d4;
 }
 .e-progress-btn.e-success .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-outline:focus .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
-  fill: #fff;
-  stroke: #fff;
+  fill: #1b1a19;
+  stroke: #1b1a19;
 }
 .e-progress-btn.e-success .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(255, 255, 255, 0.7);
+  stroke: rgba(27, 26, 25, 0.7);
 }
 .e-progress-btn.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: #fff;
+  stroke: #1b1a19;
 }
 .e-progress-btn.e-success.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg {
   fill: #0b6a0b;
@@ -1626,14 +1626,14 @@
   stroke: #0b6a0b;
 }
 .e-progress-btn.e-info .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-outline:focus .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
-  fill: #fff;
-  stroke: #fff;
+  fill: #1b1a19;
+  stroke: #1b1a19;
 }
 .e-progress-btn.e-info .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(255, 255, 255, 0.7);
+  stroke: rgba(27, 26, 25, 0.7);
 }
 .e-progress-btn.e-info .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: #fff;
+  stroke: #1b1a19;
 }
 .e-progress-btn.e-info.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg {
   fill: #038387;
@@ -1646,14 +1646,14 @@
   stroke: #038387;
 }
 .e-progress-btn.e-warning .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-outline:focus .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
-  fill: #fff;
-  stroke: #fff;
+  fill: #1b1a19;
+  stroke: #1b1a19;
 }
 .e-progress-btn.e-warning .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(255, 255, 255, 0.7);
+  stroke: rgba(27, 26, 25, 0.7);
 }
 .e-progress-btn.e-warning .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: #fff;
+  stroke: #1b1a19;
 }
 .e-progress-btn.e-warning.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg {
   fill: #ca5010;
@@ -1666,14 +1666,14 @@
   stroke: #ca5010;
 }
 .e-progress-btn.e-danger .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-outline:focus .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
-  fill: #fff;
-  stroke: #fff;
+  fill: #1b1a19;
+  stroke: #1b1a19;
 }
 .e-progress-btn.e-danger .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(255, 255, 255, 0.7);
+  stroke: rgba(27, 26, 25, 0.7);
 }
 .e-progress-btn.e-danger .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: #fff;
+  stroke: #1b1a19;
 }
 .e-progress-btn.e-danger.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg {
   fill: #d13438;
@@ -1762,19 +1762,19 @@
 }
 
 *.e-flat.e-primary .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(27, 26, 25, 0.2);
 }
 *.e-flat.e-success .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(27, 26, 25, 0.2);
 }
 *.e-flat.e-info .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(27, 26, 25, 0.2);
 }
 *.e-flat.e-warning .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(27, 26, 25, 0.2);
 }
 *.e-flat.e-danger .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(27, 26, 25, 0.2);
 }
 
 *.e-outline:not(:focus).e-primary .e-progress {

package/styles/highcontrast.css

@@ -1814,11 +1814,11 @@
 *.e-success .e-progress,
 *.e-danger .e-progress,
 *.e-info .e-progress {
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: rgba(255, 255, 255, 0.2);
 }
 
 *.e-warning .e-progress {
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: rgba(255, 255, 255, 0.2);
 }
 
 *.e-flat.e-primary .e-progress {

package/styles/progress-button/_bootstrap-dark-definition.scss

@@ -17,10 +17,10 @@ $progress-btn-spinner-padding-small: 10px !default;
 $progress-btn-spinner-padding-bigger: 14px !default;
 $progress-btn-spinner-padding-bigger-small: 12px !default;
 
-$progress-btn-flat-primary-progress-color: #ff4081 !default;
-$progress-btn-flat-success-progress-color: #4d841d !default;
-$progress-btn-flat-info-progress-color: #0378d5 !default;
-$progress-btn-flat-warning-progress-color: #c15700 !default;
-$progress-btn-flat-danger-progress-color: #d64113 !default;
+$progress-btn-flat-primary-progress-color: rgba($brand-primary-font, 1) !default;
+$progress-btn-flat-success-progress-color: rgba($brand-primary-font, 1) !default;
+$progress-btn-flat-info-progress-color: rgba($brand-primary-font, 1) !default;
+$progress-btn-flat-warning-progress-color: rgba($brand-primary-font, 1) !default;
+$progress-btn-flat-danger-progress-color: rgba($brand-primary-font, 1) !default;
 $btn-flat-primary-path-arc: none;
 //enddefault

package/styles/progress-button/_bootstrap4-definition.scss

@@ -1,5 +1,5 @@
 $progress-btn-color: $white !default;
-$progress-btn-bgcolor: rgba($white, .25) !default;
+$progress-btn-bgcolor: rgba($gray-700, .2) !default;
 $progress-btn-bgcolor-normal: rgba($white, .25) !default;
 $progress-btn-warning-progress-color: rgba($gray-900, .25) !default;
 $progress-btn-circle-opacity: 0 !default;

package/styles/progress-button/_highcontrast-definition.scss

@@ -1,5 +1,5 @@
 $progress-btn-color: $content-font !default;
-$progress-btn-bgcolor: rgba($bg-base-0, .3) !default;
+$progress-btn-bgcolor: rgba($content-font, .2) !default;
 $progress-btn-bgcolor-normal: rgba($bg-base-100, .3) !default;
 $progress-btn-warning-progress-color: $progress-btn-bgcolor !default;
 $progress-btn-circle-opacity: 1 !default;

package/styles/progress-button/bootstrap-dark.css

@@ -496,19 +496,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/progress-button/bootstrap4.css

@@ -489,7 +489,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 {