@syncfusion/ej2-angular-splitbuttons 20.1.55 → 20.2.36

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

@@ -0,0 +1,25 @@
+//layout variables
+$split-btn-zindex: 2 !default;
+$split-btn-border-radius: 4px !default;
+$split-btn-focus-outline-offset: 0 !default;
+$split-btn-vertical-secondary-icon-line-height: .334em !default;
+$split-btn-seperator-border: 1px solid !default;
+$split-btn-sec-btn-margin-left: -1px !default;
+$split-btn-icon-btn-padding: 8px !default;
+$split-btn-icon-btn-padding-bigger: 12px !default;
+$split-btn-focus-border-color: $secondary-border-color !default;
+$split-btn-focus-vertical-border-color: $secondary-border-color !default;
+$split-btn-seperator-border-color: $secondary-border-color !default;
+$split-btn-seperator-default-border-color: $secondary-border-color !default;
+$split-btn-seperator-vertical-border-color: $secondary-border-color !default;
+$split-btn-hover-border-color: $secondary-border-color !default;
+$split-btn-hover-vertical-border-color: $secondary-border-color !default;
+$split-btn-active-border-color: $secondary-bg-color-pressed !default;
+$split-btn-active-vertical-border-color: $secondary-bg-color-pressed !default;
+$split-btn-disabled-vertical-border-color: $secondary-border-color !default;
+$split-btn-active-box-shadow: $shadow-focus-ring2 !default;
+$split-btn-disabled-left-border-color: $secondary-border-color !default;
+$split-btn-hover-left-border-color: $secondary-border-color !default;
+$split-btn-focus-left-border-color: $secondary-border-color !default;
+$split-btn-active-left-border-color: $secondary-border-color !default;
+

package/styles/split-button/_theme.scss

@@ -0,0 +1,136 @@
+@include export-module('split-button-theme') {
+  /*! splitbutton theme */
+  .e-split-btn-wrapper {
+    .e-split-btn {
+      border-right-color: $split-btn-seperator-border-color;
+
+      &:focus {
+        border-right-color: $split-btn-focus-border-color;
+      }
+
+      &:active {
+        border-right-color: $split-btn-active-border-color;
+      }
+
+      &:disabled {
+        border-right-color: $btn-disabled-bgcolor;
+      }
+    }
+
+    &:hover :not(e-active) {
+      & .e-split-btn {
+        border-right-color: $split-btn-hover-border-color;
+
+        &:disabled {
+          border-right-color: $btn-disabled-border-color;
+        }
+      }
+    }
+
+    &.e-rtl {
+      .e-split-btn {
+        @if $skin-name == 'material' or $skin-name == 'fabric' {
+          border-color: transparent;
+        }
+        @else {
+          border-left-color: $split-btn-seperator-border-color;
+          border-right-color: $split-btn-seperator-default-border-color;
+        }
+
+        &:focus {
+          @if $skin-name == 'material' or $skin-name == 'fabric' {
+            border-color: transparent;
+          }
+          @else {
+            border-left-color: $split-btn-focus-border-color;
+            border-right-color: $split-btn-focus-vertical-border-color;
+          }
+        }
+
+        &:active {
+          @if $skin-name == 'material' or $skin-name == 'fabric' {
+            border-color: transparent;
+          }
+          @else {
+            border-left-color: $split-btn-active-border-color;
+            border-right-color: $split-btn-active-vertical-border-color;
+          }
+        }
+
+        &:disabled {
+          border-left-color: $btn-disabled-border-color;
+          border-right-color: $split-btn-disabled-vertical-border-color;
+        }
+      }
+
+      &:hover {
+        & .e-split-btn :not(e-active) {
+          border-left-color: $split-btn-hover-border-color;
+          border-right-color: $split-btn-hover-vertical-border-color;
+
+          &:disabled {
+            border-left-color: $btn-disabled-border-color;
+          }
+        }
+      }
+    }
+
+    &.e-vertical {
+      .e-split-btn {
+        border-bottom-color: $split-btn-seperator-vertical-border-color;
+        border-right-color: $split-btn-seperator-default-border-color;
+
+        &:focus {
+          border-bottom-color: $split-btn-focus-border-color;
+          border-right-color: $split-btn-focus-vertical-border-color;
+        }
+
+        &:active {
+          border-bottom-color: $split-btn-active-border-color;
+          border-right-color: $split-btn-active-vertical-border-color;
+        }
+
+        &:disabled {
+          border-bottom-color: $btn-disabled-border-color;
+          border-right-color: $split-btn-disabled-vertical-border-color;
+        }
+      }
+
+      &:hover {
+        & .e-split-btn {
+          border-bottom-color: $split-btn-hover-border-color;
+          border-right-color: $split-btn-hover-vertical-border-color;
+
+          &:disabled {
+            border-bottom-color: $btn-disabled-border-color;
+          }
+        }
+      }
+
+      &.e-rtl {
+        .e-split-btn {
+          border-left-color: $split-btn-seperator-default-border-color;
+
+          &:focus {
+            border-left-color: $split-btn-focus-left-border-color;
+          }
+
+          &:active {
+            border-left-color: $split-btn-active-left-border-color;
+          }
+
+          &:disabled {
+            border-left-color: $split-btn-disabled-left-border-color;
+          }
+        }
+
+        &:hover {
+          & .e-split-btn {
+            border-left-color: $split-btn-hover-left-border-color;
+          }
+        }
+      }
+    }
+  }
+}
+  

package/styles/split-button/bootstrap-dark.scss

@@ -1 +1,6 @@
-@import 'ej2-splitbuttons/styles/split-button/bootstrap-dark.scss';
+@import 'ej2-base/styles/bootstrap-dark-definition.scss';
+@import 'ej2-buttons/styles/button/bootstrap-dark-definition.scss';
+@import 'ej2-popups/styles/popup/bootstrap-dark-definition.scss';
+@import './../drop-down-button/bootstrap-dark-definition.scss';
+@import 'bootstrap-dark-definition.scss';
+@import 'all.scss';

package/styles/split-button/bootstrap.scss

@@ -1 +1,6 @@
-@import 'ej2-splitbuttons/styles/split-button/bootstrap.scss';
+@import 'ej2-base/styles/bootstrap-definition.scss';
+@import 'ej2-buttons/styles/button/bootstrap-definition.scss';
+@import 'ej2-popups/styles/popup/bootstrap-definition.scss';
+@import './../drop-down-button/bootstrap-definition.scss';
+@import 'bootstrap-definition.scss';
+@import 'all.scss';

package/styles/split-button/bootstrap4.scss

@@ -1 +1,6 @@
-@import 'ej2-splitbuttons/styles/split-button/bootstrap4.scss';
+@import 'ej2-base/styles/bootstrap4-definition.scss';
+@import 'ej2-buttons/styles/button/bootstrap4-definition.scss';
+@import 'ej2-popups/styles/popup/bootstrap4-definition.scss';
+@import './../drop-down-button/bootstrap4-definition.scss';
+@import 'bootstrap4-definition.scss';
+@import 'all.scss';

package/styles/split-button/bootstrap5-dark.scss

@@ -1 +1,6 @@
-@import 'ej2-splitbuttons/styles/split-button/bootstrap5-dark.scss';
+@import 'ej2-base/styles/bootstrap5-dark-definition.scss';
+@import 'ej2-buttons/styles/button/bootstrap5-dark-definition.scss';
+@import 'ej2-popups/styles/popup/bootstrap5-dark-definition.scss';
+@import './../drop-down-button/bootstrap5-dark-definition.scss';
+@import 'bootstrap5-dark-definition.scss';
+@import 'all.scss';

package/styles/split-button/bootstrap5.scss

@@ -1 +1,6 @@
-@import 'ej2-splitbuttons/styles/split-button/bootstrap5.scss';
+@import 'ej2-base/styles/bootstrap5-definition.scss';
+@import 'ej2-buttons/styles/button/bootstrap5-definition.scss';
+@import 'ej2-popups/styles/popup/bootstrap5-definition.scss';
+@import './../drop-down-button/bootstrap5-definition.scss';
+@import 'bootstrap5-definition.scss';
+@import 'all.scss';

package/styles/split-button/fabric-dark.scss

@@ -1 +1,6 @@
-@import 'ej2-splitbuttons/styles/split-button/fabric-dark.scss';
+@import 'ej2-base/styles/fabric-dark-definition.scss';
+@import 'ej2-buttons/styles/button/fabric-dark-definition.scss';
+@import 'ej2-popups/styles/popup/fabric-dark-definition.scss';
+@import './../drop-down-button/fabric-dark-definition.scss';
+@import 'fabric-dark-definition.scss';
+@import 'all.scss';

package/styles/split-button/fabric.scss

@@ -1 +1,6 @@
-@import 'ej2-splitbuttons/styles/split-button/fabric.scss';
+@import 'ej2-base/styles/fabric-definition.scss';
+@import 'ej2-buttons/styles/button/fabric-definition.scss';
+@import 'ej2-popups/styles/popup/fabric-definition.scss';
+@import './../drop-down-button/fabric-definition.scss';
+@import 'fabric-definition.scss';
+@import 'all.scss';

package/styles/split-button/fluent-dark.scss

@@ -1 +1,6 @@
-@import 'ej2-splitbuttons/styles/split-button/fluent-dark.scss';
+@import 'ej2-base/styles/fluent-dark-definition.scss';
+@import 'ej2-buttons/styles/button/fluent-dark-definition.scss';
+@import 'ej2-popups/styles/popup/fluent-dark-definition.scss';
+@import './../drop-down-button/fluent-dark-definition.scss';
+@import 'fluent-dark-definition.scss';
+@import 'all.scss';

package/styles/split-button/fluent.scss

@@ -1 +1,6 @@
-@import 'ej2-splitbuttons/styles/split-button/fluent.scss';
+@import 'ej2-base/styles/fluent-definition.scss';
+@import 'ej2-buttons/styles/button/fluent-definition.scss';
+@import 'ej2-popups/styles/popup/fluent-definition.scss';
+@import './../drop-down-button/fluent-definition.scss';
+@import 'fluent-definition.scss';
+@import 'all.scss';

package/styles/split-button/highcontrast-light.scss

@@ -1 +1,6 @@
-@import 'ej2-splitbuttons/styles/split-button/highcontrast-light.scss';
+@import 'ej2-base/styles/highcontrast-light-definition.scss';
+@import 'ej2-buttons/styles/button/highcontrast-light-definition.scss';
+@import 'ej2-popups/styles/popup/highcontrast-light-definition.scss';
+@import './../drop-down-button/highcontrast-light-definition.scss';
+@import 'highcontrast-light-definition.scss';
+@import 'all.scss';

package/styles/split-button/highcontrast.scss

@@ -1 +1,6 @@
-@import 'ej2-splitbuttons/styles/split-button/highcontrast.scss';
+@import 'ej2-base/styles/highcontrast-definition.scss';
+@import 'ej2-buttons/styles/button/highcontrast-definition.scss';
+@import 'ej2-popups/styles/popup/highcontrast-definition.scss';
+@import './../drop-down-button/highcontrast-definition.scss';
+@import 'highcontrast-definition.scss';
+@import 'all.scss';

package/styles/split-button/material-dark.scss

@@ -1 +1,6 @@
-@import 'ej2-splitbuttons/styles/split-button/material-dark.scss';
+@import 'ej2-base/styles/material-dark-definition.scss';
+@import 'ej2-buttons/styles/button/material-dark-definition.scss';
+@import 'ej2-popups/styles/popup/material-dark-definition.scss';
+@import './../drop-down-button/material-dark-definition.scss';
+@import 'material-dark-definition.scss';
+@import 'all.scss';

package/styles/split-button/material.scss

@@ -1 +1,6 @@
-@import 'ej2-splitbuttons/styles/split-button/material.scss';
+@import 'ej2-base/styles/material-definition.scss';
+@import 'ej2-buttons/styles/button/material-definition.scss';
+@import 'ej2-popups/styles/popup/material-definition.scss';
+@import './../drop-down-button/material-definition.scss';
+@import 'material-definition.scss';
+@import 'all.scss';

package/styles/split-button/tailwind-dark.scss

@@ -1 +1,6 @@
-@import 'ej2-splitbuttons/styles/split-button/tailwind-dark.scss';
+@import 'ej2-base/styles/tailwind-dark-definition.scss';
+@import 'ej2-buttons/styles/button/tailwind-dark-definition.scss';
+@import 'ej2-popups/styles/popup/tailwind-dark-definition.scss';
+@import './../drop-down-button/tailwind-dark-definition.scss';
+@import 'tailwind-dark-definition.scss';
+@import 'all.scss';

package/styles/split-button/tailwind.scss

@@ -1 +1,6 @@
-@import 'ej2-splitbuttons/styles/split-button/tailwind.scss';
+@import 'ej2-base/styles/tailwind-definition.scss';
+@import 'ej2-buttons/styles/button/tailwind-definition.scss';
+@import 'ej2-popups/styles/popup/tailwind-definition.scss';
+@import './../drop-down-button/tailwind-definition.scss';
+@import 'tailwind-definition.scss';
+@import 'all.scss';

package/styles/tailwind-dark.css

@@ -78,6 +78,7 @@
 
 .e-dropdown-popup {
   position: absolute;
+  border-radius: 4px;
   margin-top: 4px;
 }
 .e-dropdown-popup ul {
@@ -157,6 +158,7 @@
 
 *.e-bigger .e-dropdown-popup {
   background-color: transparent;
+  border-radius: 4px;
 }
 
 *.e-bigger .e-dropdown-popup ul,
@@ -549,6 +551,14 @@
       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;
@@ -794,7 +804,6 @@
   outline: #1f2937 0 solid;
   outline-offset: 0;
   box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.95), 0 0 0 4px #22d3ee;
-  box-shadow: none;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-primary,
@@ -806,7 +815,6 @@
   color: #000;
   outline: #1f2937 0 solid;
   box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.95), 0 0 0 4px #22d3ee;
-  box-shadow: none;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-success,
@@ -817,7 +825,6 @@
   border-color: #22c55e;
   color: #000;
   box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.95), 0 0 0 4px #22d3ee;
-  box-shadow: none;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-info,
@@ -828,7 +835,6 @@
   border-color: #0ea5e9;
   color: #fff;
   box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.95), 0 0 0 4px #22d3ee;
-  box-shadow: none;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-warning,
@@ -839,7 +845,6 @@
   border-color: #ea580c;
   color: #fff;
   box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.95), 0 0 0 4px #22d3ee;
-  box-shadow: none;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-danger,
@@ -850,7 +855,6 @@
   border-color: #f87171;
   color: #000;
   box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.95), 0 0 0 4px #22d3ee;
-  box-shadow: none;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-link,
@@ -870,42 +874,36 @@
 .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 2px rgba(31, 41, 55, 0.95), 0 0 0 4px #22d3ee;
-  box-shadow: none;
 }
 .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 2px rgba(31, 41, 55, 0.95), 0 0 0 4px #22d3ee;
-  box-shadow: none;
 }
 .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 2px rgba(31, 41, 55, 0.95), 0 0 0 4px #22d3ee;
-  box-shadow: none;
 }
 .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 2px rgba(31, 41, 55, 0.95), 0 0 0 4px #22d3ee;
-  box-shadow: none;
 }
 .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 2px rgba(31, 41, 55, 0.95), 0 0 0 4px #22d3ee;
-  box-shadow: none;
 }
 .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 2px rgba(31, 41, 55, 0.95), 0 0 0 4px #22d3ee;
-  box-shadow: none;
 }
 .e-btn-group .e-btn:active,
 .e-btn-group input:active + label.e-btn,

package/styles/tailwind.css

@@ -78,6 +78,7 @@
 
 .e-dropdown-popup {
   position: absolute;
+  border-radius: 4px;
   margin-top: 4px;
 }
 .e-dropdown-popup ul {
@@ -157,6 +158,7 @@
 
 *.e-bigger .e-dropdown-popup {
   background-color: transparent;
+  border-radius: 4px;
 }
 
 *.e-bigger .e-dropdown-popup ul,
@@ -549,6 +551,14 @@
       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;
@@ -794,7 +804,6 @@
   outline: #fff 0 solid;
   outline-offset: 0;
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 4px #4f46e5;
-  box-shadow: none;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-primary,
@@ -806,7 +815,6 @@
   color: #fff;
   outline: #fff 0 solid;
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 4px #4f46e5;
-  box-shadow: none;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-success,
@@ -817,7 +825,6 @@
   border-color: #15803d;
   color: #fff;
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 4px #4f46e5;
-  box-shadow: none;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-info,
@@ -828,7 +835,6 @@
   border-color: #0e7490;
   color: #fff;
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 4px #4f46e5;
-  box-shadow: none;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-warning,
@@ -839,7 +845,6 @@
   border-color: #c2410c;
   color: #fff;
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 4px #4f46e5;
-  box-shadow: none;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-danger,
@@ -850,7 +855,6 @@
   border-color: #dc2626;
   color: #fff;
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 4px #4f46e5;
-  box-shadow: none;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-link,
@@ -870,42 +874,36 @@
 .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 2px rgba(255, 255, 255, 0.95), 0 0 0 4px #4f46e5;
-  box-shadow: none;
 }
 .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 2px rgba(255, 255, 255, 0.95), 0 0 0 4px #4f46e5;
-  box-shadow: none;
 }
 .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 2px rgba(255, 255, 255, 0.95), 0 0 0 4px #4f46e5;
-  box-shadow: none;
 }
 .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 2px rgba(255, 255, 255, 0.95), 0 0 0 4px #4f46e5;
-  box-shadow: none;
 }
 .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 2px rgba(255, 255, 255, 0.95), 0 0 0 4px #4f46e5;
-  box-shadow: none;
 }
 .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 2px rgba(255, 255, 255, 0.95), 0 0 0 4px #4f46e5;
-  box-shadow: none;
 }
 .e-btn-group .e-btn:active,
 .e-btn-group input:active + label.e-btn,

package/syncfusion-ej2-angular-splitbuttons.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@syncfusion/ej2-angular-splitbuttons" />
+export * from './public_api';