@syncfusion/ej2-splitbuttons 19.4.47 → 19.4.48

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-splitbuttons@*",
-  "_id": "@syncfusion/ej2-splitbuttons@19.4.40",
+  "_id": "@syncfusion/ej2-splitbuttons@19.4.47",
   "_inBundle": false,
-  "_integrity": "sha512-RUGdptI2vsIR2/sUC6Mfs4/+W8mfuVn2h0G2iqP3YxeFQ/elnDOVKduAriaGQncGavrKcxyz++gel5KRhjC1nA==",
+  "_integrity": "sha512-nboptRUnBy6Ja9V57f1to2Zifjy3RhFU+PY/MOxz2BhSWAvz6LWi4Ka1jqYkVV5lGSPF/SegCl7aaBGQpTMQIg==",
   "_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-19.4.40.tgz",
-  "_shasum": "40d160e220f9f6369ea812000093789995ee66ef",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-splitbuttons/-/ej2-splitbuttons-19.4.47.tgz",
+  "_shasum": "26bb4625fe10bb9901610c59566236f93d62102c",
   "_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": "~19.4.42",
-    "@syncfusion/ej2-popups": "~19.4.47"
+    "@syncfusion/ej2-base": "~19.4.48",
+    "@syncfusion/ej2-popups": "~19.4.48"
   },
   "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": "19.4.47",
+  "version": "19.4.48",
   "sideEffects": false
 }

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

@@ -1,4 +1,4 @@
-import { Collection, Event, NotifyPropertyChanges, detach, Property, EventHandler, EmitType } from '@syncfusion/ej2-base';import { addClass, INotifyPropertyChanged, getUniqueID, rippleEffect } from '@syncfusion/ej2-base';import { attributes, Component, closest, select, KeyboardEventArgs, SanitizeHtmlHelper } from '@syncfusion/ej2-base';import { classList, removeClass } from '@syncfusion/ej2-base';import { Button } from '@syncfusion/ej2-buttons';import { Popup } from '@syncfusion/ej2-popups';import { MenuEventArgs, BeforeOpenCloseMenuEventArgs, OpenCloseMenuEventArgs, upDownKeyHandler } from './../common/common';import { getModel, SplitButtonIconPosition, Item, setBlankIconStyle } from './../common/common';import { ItemModel } from './../common/common-model';
+import { Collection, Event, NotifyPropertyChanges, detach, Property, EventHandler, EmitType } from '@syncfusion/ej2-base';import { addClass, INotifyPropertyChanged, getUniqueID, rippleEffect, getComponent } from '@syncfusion/ej2-base';import { attributes, Component, closest, select, KeyboardEventArgs, SanitizeHtmlHelper } from '@syncfusion/ej2-base';import { classList, removeClass } from '@syncfusion/ej2-base';import { Button } from '@syncfusion/ej2-buttons';import { Popup } from '@syncfusion/ej2-popups';import { SplitButton } from '../split-button/split-button';import { MenuEventArgs, BeforeOpenCloseMenuEventArgs, OpenCloseMenuEventArgs, upDownKeyHandler } from './../common/common';import { getModel, SplitButtonIconPosition, Item, setBlankIconStyle } from './../common/common';import { ItemModel } from './../common/common-model';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**

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

@@ -18,7 +18,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Collection, Event, NotifyPropertyChanges, detach, Property, EventHandler } from '@syncfusion/ej2-base';
-import { addClass, getUniqueID, rippleEffect } from '@syncfusion/ej2-base';
+import { addClass, getUniqueID, rippleEffect, getComponent } from '@syncfusion/ej2-base';
 import { attributes, Component, closest, select, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
 import { classList, removeClass } from '@syncfusion/ej2-base';
 import { Button } from '@syncfusion/ej2-buttons';
@@ -504,9 +504,30 @@ var DropDownButton = /** @class */ (function (_super) {
     DropDownButton.prototype.openPopUp = function (e) {
         var _this = this;
         if (e === void 0) { e = null; }
+        var isReact = false;
+        var popupElem = this.getPopUpElement();
         if (!this.target) {
             this.createItems(true);
         }
+        else {
+            if (this.activeElem.length > 1) {
+                var splitButton = getComponent(this.activeElem[0], 'split-btn');
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                if (splitButton.isReact && popupElem.childNodes.length < 1) {
+                    isReact = true;
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    splitButton.appendReactElement(this.getTargetElement(), this.getPopUpElement());
+                }
+            }
+            else {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                if (this.isReact && popupElem.childNodes.length < 1) {
+                    isReact = true;
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    this.appendReactElement(this.getTargetElement(), this.getPopUpElement());
+                }
+            }
+        }
         var ul = this.getULElement();
         this.popupWireEvents();
         var beforeOpenArgs = { element: ul, items: this.items, event: e, cancel: false };

package/styles/bootstrap5-dark.css

@@ -2050,38 +2050,38 @@
 }
 
 .e-progress {
-  background-color: rgba(255, 255, 255, 0.75);
+  background-color: rgba(173, 181, 189, 0.2);
 }
 
 *.e-primary .e-progress,
 *.e-success .e-progress,
 *.e-danger .e-progress,
 *.e-info .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(173, 181, 189, 0.2);
 }
 
 *.e-warning .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(173, 181, 189, 0.2);
 }
 
 *.e-flat.e-primary .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(13, 110, 253, 0.2);
 }
 
 *.e-flat.e-success .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(33, 178, 111, 0.2);
 }
 
 *.e-flat.e-info .e-progress {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(13, 202, 240, 0.2);
 }
 
 *.e-flat.e-warning .e-progress {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(255, 193, 7, 0.2);
 }
 
 *.e-flat.e-danger .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(228, 96, 109, 0.2);
 }
 
 *.e-outline:not(:focus).e-primary .e-progress {

package/styles/bootstrap5.css

@@ -2050,38 +2050,38 @@
 }
 
 .e-progress {
-  background-color: rgba(255, 255, 255, 0.75);
+  background-color: rgba(108, 117, 125, 0.2);
 }
 
 *.e-primary .e-progress,
 *.e-success .e-progress,
 *.e-danger .e-progress,
 *.e-info .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(108, 117, 125, 0.2);
 }
 
 *.e-warning .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(108, 117, 125, 0.2);
 }
 
 *.e-flat.e-primary .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(13, 110, 253, 0.2);
 }
 
 *.e-flat.e-success .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(25, 135, 84, 0.2);
 }
 
 *.e-flat.e-info .e-progress {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(13, 202, 240, 0.2);
 }
 
 *.e-flat.e-warning .e-progress {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(255, 193, 7, 0.2);
 }
 
 *.e-flat.e-danger .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(220, 53, 69, 0.2);
 }
 
 *.e-outline:not(:focus).e-primary .e-progress {

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

@@ -10,12 +10,12 @@ $progress-btn-small-spin-btn-padding: 14px !default;
 $progress-btn-bigger-spin-btn-padding: 20px !default;
 $progress-btn-bigger-small-spin-btn-padding: 16px !default;
 $progress-btn-color: $secondary-text-color !default;
-$progress-btn-bgcolor: rgba($secondary-text-color, .2) !default;
-$progress-btn-bgcolor-normal: rgba($secondary-text-color, .75) !default;
+$progress-btn-bgcolor: rgba($icon-color, .2) !default;
+$progress-btn-bgcolor-normal: rgba($icon-color, .2) !default;
 $progress-btn-warning-progress-color: $progress-btn-bgcolor !default;
-$progress-btn-flat-primary-progress-color: rgba($primary-text-color, 1) !default;
-$progress-btn-flat-success-progress-color: rgba($success-text, 1) !default;
-$progress-btn-flat-info-progress-color: rgba($info-text, 1) !default;
-$progress-btn-flat-warning-progress-color: rgba($warning-text, 1) !default;
-$progress-btn-flat-danger-progress-color: rgba($danger-text, 1) !default;
+$progress-btn-flat-primary-progress-color: rgba($primary, 1) !default;
+$progress-btn-flat-success-progress-color: rgba($success, 1) !default;
+$progress-btn-flat-info-progress-color: rgba($info, 1) !default;
+$progress-btn-flat-warning-progress-color: rgba($warning, 1) !default;
+$progress-btn-flat-danger-progress-color: rgba($danger, 1) !default;
 $btn-flat-primary-path-arc: $white;

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

@@ -10,12 +10,12 @@ $progress-btn-small-spin-btn-padding: 14px !default;
 $progress-btn-bigger-spin-btn-padding: 20px !default;
 $progress-btn-bigger-small-spin-btn-padding: 16px !default;
 $progress-btn-color: $secondary-text-color !default;
-$progress-btn-bgcolor: rgba($secondary-text-color, .2) !default;
-$progress-btn-bgcolor-normal: rgba($secondary-text-color, .2) !default;
+$progress-btn-bgcolor: rgba($icon-color, .2) !default;
+$progress-btn-bgcolor-normal: rgba($icon-color, .2) !default;
 $progress-btn-warning-progress-color: $progress-btn-bgcolor !default;
-$progress-btn-flat-primary-progress-color: rgba($primary-text-color, 1) !default;
-$progress-btn-flat-success-progress-color: rgba($success-text, 1) !default;
-$progress-btn-flat-info-progress-color: rgba($info-text, 1) !default;
-$progress-btn-flat-warning-progress-color: rgba($warning-text, 1) !default;
-$progress-btn-flat-danger-progress-color: rgba($danger-text, 1) !default;
+$progress-btn-flat-primary-progress-color: rgba($primary, 1) !default;
+$progress-btn-flat-success-progress-color: rgba($success, 1) !default;
+$progress-btn-flat-info-progress-color: rgba($info, 1) !default;
+$progress-btn-flat-warning-progress-color: rgba($warning, 1) !default;
+$progress-btn-flat-danger-progress-color: rgba($danger, 1) !default;
 $btn-flat-primary-path-arc: $white;

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

@@ -590,38 +590,38 @@
 }
 
 .e-progress {
-  background-color: rgba(255, 255, 255, 0.75);
+  background-color: rgba(173, 181, 189, 0.2);
 }
 
 *.e-primary .e-progress,
 *.e-success .e-progress,
 *.e-danger .e-progress,
 *.e-info .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(173, 181, 189, 0.2);
 }
 
 *.e-warning .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(173, 181, 189, 0.2);
 }
 
 *.e-flat.e-primary .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(13, 110, 253, 0.2);
 }
 
 *.e-flat.e-success .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(33, 178, 111, 0.2);
 }
 
 *.e-flat.e-info .e-progress {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(13, 202, 240, 0.2);
 }
 
 *.e-flat.e-warning .e-progress {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(255, 193, 7, 0.2);
 }
 
 *.e-flat.e-danger .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(228, 96, 109, 0.2);
 }
 
 *.e-outline:not(:focus).e-primary .e-progress {

package/styles/progress-button/bootstrap5.css

@@ -590,38 +590,38 @@
 }
 
 .e-progress {
-  background-color: rgba(255, 255, 255, 0.75);
+  background-color: rgba(108, 117, 125, 0.2);
 }
 
 *.e-primary .e-progress,
 *.e-success .e-progress,
 *.e-danger .e-progress,
 *.e-info .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(108, 117, 125, 0.2);
 }
 
 *.e-warning .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(108, 117, 125, 0.2);
 }
 
 *.e-flat.e-primary .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(13, 110, 253, 0.2);
 }
 
 *.e-flat.e-success .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(25, 135, 84, 0.2);
 }
 
 *.e-flat.e-info .e-progress {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(13, 202, 240, 0.2);
 }
 
 *.e-flat.e-warning .e-progress {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(255, 193, 7, 0.2);
 }
 
 *.e-flat.e-danger .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(220, 53, 69, 0.2);
 }
 
 *.e-outline:not(:focus).e-primary .e-progress {

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

@@ -593,38 +593,38 @@
 }
 
 .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(209, 213, 219, 0.2);
 }
 
 *.e-primary .e-progress,
 *.e-success .e-progress,
 *.e-danger .e-progress,
 *.e-info .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(209, 213, 219, 0.2);
 }
 
 *.e-warning .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(209, 213, 219, 0.2);
 }
 
 *.e-flat.e-primary .e-progress {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(34, 211, 238, 0.2);
 }
 
 *.e-flat.e-success .e-progress {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(34, 197, 94, 0.2);
 }
 
 *.e-flat.e-info .e-progress {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(56, 189, 248, 0.2);
 }
 
 *.e-flat.e-warning .e-progress {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(249, 115, 22, 0.2);
 }
 
 *.e-flat.e-danger .e-progress {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(248, 113, 113, 0.2);
 }
 
 *.e-outline:not(:focus).e-primary .e-progress {

package/styles/progress-button/tailwind.css

@@ -593,38 +593,38 @@
 }
 
 .e-progress {
-  background-color: rgba(55, 65, 81, 0.2);
+  background-color: rgba(107, 114, 128, 0.2);
 }
 
 *.e-primary .e-progress,
 *.e-success .e-progress,
 *.e-danger .e-progress,
 *.e-info .e-progress {
-  background-color: rgba(55, 65, 81, 0.2);
+  background-color: rgba(107, 114, 128, 0.2);
 }
 
 *.e-warning .e-progress {
-  background-color: rgba(55, 65, 81, 0.2);
+  background-color: rgba(107, 114, 128, 0.2);
 }
 
 *.e-flat.e-primary .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(79, 70, 229, 0.2);
 }
 
 *.e-flat.e-success .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(21, 128, 61, 0.2);
 }
 
 *.e-flat.e-info .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(14, 116, 144, 0.2);
 }
 
 *.e-flat.e-warning .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(194, 65, 12, 0.2);
 }
 
 *.e-flat.e-danger .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(220, 38, 38, 0.2);
 }
 
 *.e-outline:not(:focus).e-primary .e-progress {

package/styles/tailwind-dark.css

@@ -2081,38 +2081,38 @@
 }
 
 .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(209, 213, 219, 0.2);
 }
 
 *.e-primary .e-progress,
 *.e-success .e-progress,
 *.e-danger .e-progress,
 *.e-info .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(209, 213, 219, 0.2);
 }
 
 *.e-warning .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(209, 213, 219, 0.2);
 }
 
 *.e-flat.e-primary .e-progress {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(34, 211, 238, 0.2);
 }
 
 *.e-flat.e-success .e-progress {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(34, 197, 94, 0.2);
 }
 
 *.e-flat.e-info .e-progress {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(56, 189, 248, 0.2);
 }
 
 *.e-flat.e-warning .e-progress {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(249, 115, 22, 0.2);
 }
 
 *.e-flat.e-danger .e-progress {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(248, 113, 113, 0.2);
 }
 
 *.e-outline:not(:focus).e-primary .e-progress {

package/styles/tailwind.css

@@ -2081,38 +2081,38 @@
 }
 
 .e-progress {
-  background-color: rgba(55, 65, 81, 0.2);
+  background-color: rgba(107, 114, 128, 0.2);
 }
 
 *.e-primary .e-progress,
 *.e-success .e-progress,
 *.e-danger .e-progress,
 *.e-info .e-progress {
-  background-color: rgba(55, 65, 81, 0.2);
+  background-color: rgba(107, 114, 128, 0.2);
 }
 
 *.e-warning .e-progress {
-  background-color: rgba(55, 65, 81, 0.2);
+  background-color: rgba(107, 114, 128, 0.2);
 }
 
 *.e-flat.e-primary .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(79, 70, 229, 0.2);
 }
 
 *.e-flat.e-success .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(21, 128, 61, 0.2);
 }
 
 *.e-flat.e-info .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(14, 116, 144, 0.2);
 }
 
 *.e-flat.e-warning .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(194, 65, 12, 0.2);
 }
 
 *.e-flat.e-danger .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(220, 38, 38, 0.2);
 }
 
 *.e-outline:not(:focus).e-primary .e-progress {