@syncfusion/ej2-splitbuttons 32.1.19 → 32.1.22

package/dist/global/index.d.ts

@@ -1,3 +1,12 @@
+/*!
+*  filename: index.d.ts
+*  version : 32.1.22
+*  Copyright Syncfusion Inc. 2001 - 2025. 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
+*  licensing@syncfusion.com. Any infringement will be prosecuted under
+*  applicable laws. 
+*/
 import * as _splitbuttons from '@syncfusion/ej2-splitbuttons';
 
 export declare namespace ej {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-splitbuttons",
-  "version": "32.1.19",
+  "version": "32.1.22",
   "description": "A package of feature-rich Essential JS 2 components such as DropDownButton, SplitButton, ProgressButton and ButtonGroup.",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",

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

@@ -849,7 +849,7 @@ var DropDownButton = /** @class */ (function (_super) {
             EventHandler.remove(this.getPopUpElement(), 'keydown', this.keyBoardHandler);
         }
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        EventHandler.remove(window, 'resize', this.windowResize);
+        EventHandler.remove(window, 'resize', this.windowResize.bind(this));
     };
     /**
      * Called internally if any of the property value changed.

package/styles/bootstrap5.3-lite.css

@@ -1432,8 +1432,25 @@
   overflow: hidden;
   pointer-events: none;
 }
-.e-progress-btn.e-progress-active .e-progress {
-  opacity: 1;
+.e-progress-btn.e-progress-active .e-progress,
+.e-progress-btn.e-progress-active .e-primary .e-progress,
+.e-progress-btn.e-progress-active .e-success .e-progress,
+.e-progress-btn.e-progress-active .e-danger .e-progress {
+  opacity: 0.3;
+}
+.e-progress-btn.e-progress-active .e-warning .e-progress,
+.e-progress-btn.e-progress-active .e-info .e-progress,
+.e-progress-btn.e-progress-active .e-primary.e-outline .e-progress,
+.e-progress-btn.e-progress-active .e-primary.e-flat .e-progress,
+.e-progress-btn.e-progress-active .e-success.e-outline .e-progress,
+.e-progress-btn.e-progress-active .e-success.e-flat .e-progress,
+.e-progress-btn.e-progress-active .e-danger.e-outline .e-progress,
+.e-progress-btn.e-progress-active .e-danger.e-flat .e-progress,
+.e-progress-btn.e-progress-active .e-warning.e-outline .e-progress,
+.e-progress-btn.e-progress-active .e-warning.e-flat .e-progress,
+.e-progress-btn.e-progress-active .e-info.e-outline .e-progress,
+.e-progress-btn.e-progress-active .e-info.e-flat .e-progress {
+  opacity: 0.2;
 }
 .e-progress-btn.e-progress-active .e-animate-end {
   opacity: 0;
@@ -1817,17 +1834,17 @@
 }
 
 .e-progress {
-  background: rgba(var(--color-sf-white), 0.2);
+  background: currentColor;
 }
 
 *.e-primary .e-progress,
 *.e-success .e-progress,
 *.e-danger .e-progress {
-  background: rgba(var(--color-sf-icon-color), 0.2);
+  background: currentColor;
 }
 
 *.e-info .e-progress {
-  background: rgba(var(--color-sf-icon-color), 0.2);
+  background: currentColor;
 }
 
 .e-progress-btn.e-outline .e-spinner-pane .e-spinner-inner svg {

package/styles/bootstrap5.3.css

@@ -1576,8 +1576,25 @@
   overflow: hidden;
   pointer-events: none;
 }
-.e-progress-btn.e-progress-active .e-progress {
-  opacity: 1;
+.e-progress-btn.e-progress-active .e-progress,
+.e-progress-btn.e-progress-active .e-primary .e-progress,
+.e-progress-btn.e-progress-active .e-success .e-progress,
+.e-progress-btn.e-progress-active .e-danger .e-progress {
+  opacity: 0.3;
+}
+.e-progress-btn.e-progress-active .e-warning .e-progress,
+.e-progress-btn.e-progress-active .e-info .e-progress,
+.e-progress-btn.e-progress-active .e-primary.e-outline .e-progress,
+.e-progress-btn.e-progress-active .e-primary.e-flat .e-progress,
+.e-progress-btn.e-progress-active .e-success.e-outline .e-progress,
+.e-progress-btn.e-progress-active .e-success.e-flat .e-progress,
+.e-progress-btn.e-progress-active .e-danger.e-outline .e-progress,
+.e-progress-btn.e-progress-active .e-danger.e-flat .e-progress,
+.e-progress-btn.e-progress-active .e-warning.e-outline .e-progress,
+.e-progress-btn.e-progress-active .e-warning.e-flat .e-progress,
+.e-progress-btn.e-progress-active .e-info.e-outline .e-progress,
+.e-progress-btn.e-progress-active .e-info.e-flat .e-progress {
+  opacity: 0.2;
 }
 .e-progress-btn.e-progress-active .e-animate-end {
   opacity: 0;
@@ -1961,17 +1978,17 @@
 }
 
 .e-progress {
-  background: rgba(var(--color-sf-white), 0.2);
+  background: currentColor;
 }
 
 *.e-primary .e-progress,
 *.e-success .e-progress,
 *.e-danger .e-progress {
-  background: rgba(var(--color-sf-icon-color), 0.2);
+  background: currentColor;
 }
 
 *.e-info .e-progress {
-  background: rgba(var(--color-sf-icon-color), 0.2);
+  background: currentColor;
 }
 
 .e-progress-btn.e-outline .e-spinner-pane .e-spinner-inner svg {

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

@@ -13,14 +13,6 @@ $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($icon-color, .2) !default;
-$progress-btn-bgcolor-normal: rgba($white, .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;
 $btn-flat-primary-path-arc: $white;
 $progress-btn-zero-padding-margin: 0 !default;
 $progress-btn-line-height: 1 !default;

package/styles/progress-button/_layout.scss

@@ -1,5 +1,6 @@
 @use 'ej2-base/styles/common/mixin' as *;
 @use './theme-variables' as *;
+
 @include export-module('progress-button-layout') {
   .e-progress-btn {
     position: relative;
@@ -49,9 +50,34 @@
     &.e-progress-active {
       overflow: hidden;
       pointer-events: none;
+     
+      @if $skin-name == 'bootstrap5.3' {
+        .e-progress,
+        .e-primary .e-progress,
+        .e-success .e-progress,
+        .e-danger .e-progress {
+          opacity: .3;
+        }
 
-      .e-progress {
-        opacity: 1;
+        .e-warning .e-progress,
+        .e-info .e-progress,
+        .e-primary.e-outline .e-progress,
+        .e-primary.e-flat .e-progress,
+        .e-success.e-outline .e-progress,
+        .e-success.e-flat .e-progress,
+        .e-danger.e-outline .e-progress,
+        .e-danger.e-flat .e-progress,
+        .e-warning.e-outline .e-progress,
+        .e-warning.e-flat .e-progress,
+        .e-info.e-outline .e-progress,
+        .e-info.e-flat .e-progress {
+          opacity: .2;
+        }
+      }
+      @else {
+        .e-progress {
+          opacity: 1;
+        }
       }
 
       .e-animate-end {

package/styles/progress-button/_theme.scss

@@ -1,6 +1,7 @@
 @use 'sass:color';
 @use 'ej2-base/styles/common/mixin' as *;
 @use './theme-variables' as *;
+
 @include export-module('progress-button-theme') {
 
   /*! Progress Button Theme */
@@ -467,20 +468,33 @@
   }
 
   .e-progress {
-    background: $progress-btn-bgcolor-normal;
+    @if $skin-name == 'bootstrap5.3'  {
+      background: currentColor;
+    }
+    @else {
+      background: $progress-btn-bgcolor-normal;
+    }
   }
 
   #{if(&, '&', '*')}.e-primary,
   #{if(&, '&', '*')}.e-success,
   #{if(&, '&', '*')}.e-danger {
     .e-progress {
-      background: $progress-btn-bgcolor;
+      @if $skin-name == 'bootstrap5.3'  {
+        background: currentColor;
+      }
+      @else {
+        background: $progress-btn-bgcolor;
+      }
     }
   }
 
   #{if(&, '&', '*')}.e-info {
     .e-progress {
-      @if $skin-name != 'fluent2' {
+      @if $skin-name == 'bootstrap5.3'  {
+        background: currentColor;
+      }
+      @else if $skin-name != 'fluent2' {
         background: $progress-btn-bgcolor;
       }
     }

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

@@ -162,8 +162,25 @@
   overflow: hidden;
   pointer-events: none;
 }
-.e-progress-btn.e-progress-active .e-progress {
-  opacity: 1;
+.e-progress-btn.e-progress-active .e-progress,
+.e-progress-btn.e-progress-active .e-primary .e-progress,
+.e-progress-btn.e-progress-active .e-success .e-progress,
+.e-progress-btn.e-progress-active .e-danger .e-progress {
+  opacity: 0.3;
+}
+.e-progress-btn.e-progress-active .e-warning .e-progress,
+.e-progress-btn.e-progress-active .e-info .e-progress,
+.e-progress-btn.e-progress-active .e-primary.e-outline .e-progress,
+.e-progress-btn.e-progress-active .e-primary.e-flat .e-progress,
+.e-progress-btn.e-progress-active .e-success.e-outline .e-progress,
+.e-progress-btn.e-progress-active .e-success.e-flat .e-progress,
+.e-progress-btn.e-progress-active .e-danger.e-outline .e-progress,
+.e-progress-btn.e-progress-active .e-danger.e-flat .e-progress,
+.e-progress-btn.e-progress-active .e-warning.e-outline .e-progress,
+.e-progress-btn.e-progress-active .e-warning.e-flat .e-progress,
+.e-progress-btn.e-progress-active .e-info.e-outline .e-progress,
+.e-progress-btn.e-progress-active .e-info.e-flat .e-progress {
+  opacity: 0.2;
 }
 .e-progress-btn.e-progress-active .e-animate-end {
   opacity: 0;
@@ -547,17 +564,17 @@
 }
 
 .e-progress {
-  background: rgba(var(--color-sf-white), 0.2);
+  background: currentColor;
 }
 
 *.e-primary .e-progress,
 *.e-success .e-progress,
 *.e-danger .e-progress {
-  background: rgba(var(--color-sf-icon-color), 0.2);
+  background: currentColor;
 }
 
 *.e-info .e-progress {
-  background: rgba(var(--color-sf-icon-color), 0.2);
+  background: currentColor;
 }
 
 .e-progress-btn.e-outline .e-spinner-pane .e-spinner-inner svg {