@syncfusion/ej2-angular-splitbuttons 20.2.43-ngcc → 20.2.45

package/styles/split-button/_layout.scss

@@ -0,0 +1,420 @@
+@include export-module('split-button-layout') {
+
+  /*! splitbutton layout */
+  .e-split-btn-wrapper {
+    display: inline-flex;
+    white-space: nowrap;
+    width: min-content;
+
+    .e-split-btn {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+      text-transform: none;
+      z-index: 1;
+      @if $skin-name == 'bootstrap4' {
+        padding-left: $split-btn-icon-btn-padding;
+        padding-right: $split-btn-icon-btn-padding;
+      }
+      @else if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
+        padding-left: 12px;
+        padding-right: 12px;
+      }
+      @else if $skin-name == 'FluentUI' {
+        padding: 3px 7px;
+      }
+      @else {
+        padding-left: 10px;
+        padding-right: 10px;
+      }
+
+      &:focus {
+        outline-offset: $split-btn-focus-outline-offset;
+      }
+
+      &:hover {
+        @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $theme-name != 'FluentUI' {
+          box-shadow: none;
+        }
+      }
+
+      &:focus {
+        @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
+          box-shadow: $split-btn-active-box-shadow;
+          z-index: $split-btn-zindex;
+        }
+        @else {
+          box-shadow: none;
+        }
+      }
+
+      &:active {
+        box-shadow: $split-btn-active-box-shadow;
+        z-index: $split-btn-zindex;
+      }
+
+      &.e-top-icon-btn {
+        padding-bottom: 10px;
+        padding-top: 10px;
+      }
+
+      .e-btn-icon {
+        font-size: $drop-down-btn-icon-font-size;
+        margin-left: 0;
+        @if $skin-name == 'FluentUI' {
+          padding-right: 4px;
+        }
+        @else {
+          padding-right: 8px;
+        }
+        width: auto;
+      }
+
+      .e-icon-top {
+        padding-bottom: 4px;
+        padding-right: 0;
+      }
+
+      &.e-icon-btn {
+        padding-left: $split-btn-icon-btn-padding;
+        padding-right: $split-btn-icon-btn-padding;
+
+        .e-btn-icon {
+          padding-right: 0;
+        }
+      }
+    }
+
+    .e-dropdown-btn {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+      margin-left: $split-btn-sec-btn-margin-left;
+      @if $skin-name == 'bootstrap4' or $skin-name == 'tailwind' {
+        padding-left: $split-btn-icon-btn-padding;
+        padding-right: $split-btn-icon-btn-padding;
+      }
+      @else if $skin-name == 'FluentUI' {
+        padding: 4px;
+      }
+      @else {
+        padding-left: 4px;
+        padding-right: 4px;
+      }
+      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
+        z-index: 1;
+      }
+
+      &:focus,
+      &:hover {
+        @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $theme-name != 'FluentUI' {
+          box-shadow: none;
+        }
+      }
+
+      &:active {
+        box-shadow: $split-btn-active-box-shadow;
+        z-index: $split-btn-zindex;
+      }
+
+      &:disabled {
+        &:focus,
+        &:hover,
+        &:active {
+          z-index: 0;
+        }
+      }
+
+      &:focus {
+        outline-offset: $split-btn-focus-outline-offset;
+      }
+    }
+
+    .e-btn {
+      @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $theme-name != 'FluentUI' {
+        box-shadow: none;
+      }
+
+      &:hover {
+        @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $theme-name != 'FluentUI' {
+          box-shadow: none;
+        }
+      }
+
+      &:focus {
+        @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
+          box-shadow: $split-btn-active-box-shadow;
+          z-index: $split-btn-zindex;
+        }
+        @else {
+          box-shadow: none;
+        }
+      }
+
+      &:active {
+        box-shadow: $split-btn-active-box-shadow;
+        @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
+          z-index: $split-btn-zindex;
+        }
+      }
+
+      &:disabled {
+        box-shadow: none;
+        @if $skin-name == 'FluentUI' or $theme-name == 'FluentUI' {
+          outline: 0;
+          outline-offset: 0;
+        }
+      }
+    }
+
+    &.e-rtl {
+      .e-split-btn {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: $split-btn-border-radius;
+        border-top-left-radius: 0;
+        border-top-right-radius: $split-btn-border-radius;
+        margin-left: $split-btn-sec-btn-margin-left;
+        @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
+          padding-left: $split-btn-icon-btn-padding;
+          padding-right: $split-btn-icon-btn-padding;
+        }
+        @else if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
+          padding-left: 12px;
+          padding-right: 12px;
+        }
+        @else {
+          padding-left: 4px;
+          padding-right: 10px;
+        }
+
+        .e-btn-icon {
+          margin-right: 0;
+          @if $skin-name == 'FluentUI' {
+            padding-left: 4px;
+          }
+          @else {
+            padding-left: 8px;
+          }
+          padding-right: 0;
+        }
+
+        .e-icon-top {
+          padding-left: 0;
+        }
+
+        &.e-icon-btn {
+          padding-left: $split-btn-icon-btn-padding;
+          padding-right: $split-btn-icon-btn-padding;
+
+          .e-btn-icon {
+            padding-left: 0;
+          }
+        }
+      }
+
+      .e-dropdown-btn {
+        border-bottom-left-radius: $split-btn-border-radius;
+        border-bottom-right-radius: 0;
+        border-top-left-radius: $split-btn-border-radius;
+        border-top-right-radius: 0;
+        margin-left: 0;
+        @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
+          z-index: 1;
+        }
+      }
+    }
+
+    &.e-vertical {
+      display: inline-block;
+
+      .e-split-btn,
+      .e-dropdown-btn {
+        display: block;
+        width: 100%;
+      }
+
+      .e-split-btn {
+        border-bottom-left-radius: 0;
+        border-top-right-radius: $split-btn-border-radius;
+        line-height: 1;
+        @if $skin-name == 'bootstrap4'or $skin-name == 'tailwind' {
+          padding-bottom: $split-btn-icon-btn-padding;
+          padding-right: $split-btn-icon-btn-padding;
+        }
+        @else {
+          padding-bottom: 4px;
+          padding-right: 10px;
+        }
+
+        .e-icon-top {
+          padding-bottom: 4px;
+        }
+      }
+
+      .e-dropdown-btn {
+        border-bottom-left-radius: $split-btn-border-radius;
+        border-top-right-radius: 0;
+        line-height: $split-btn-vertical-secondary-icon-line-height;
+        margin-left: 0;
+        margin-top: $split-btn-sec-btn-margin-left;
+        @if $skin-name == 'bootstrap4' {
+          padding-bottom: $split-btn-icon-btn-padding;
+          padding-top: $split-btn-icon-btn-padding;
+        }
+        @else {
+          padding-bottom: 4px;
+          padding-top: 4px;
+        }
+
+        .e-icon-bottom {
+          padding-top: 0;
+        }
+      }
+
+      &.e-rtl {
+        .e-split-btn {
+          border-bottom-right-radius: 0;
+          border-top-left-radius: $split-btn-border-radius;
+          margin-left: 0;
+        }
+
+        .e-dropdown-btn {
+          border-bottom-right-radius: $split-btn-border-radius;
+          border-top-left-radius: 0;
+        }
+      }
+    }
+  }
+
+  .e-bigger .e-split-btn-wrapper,
+  .e-bigger.e-split-btn-wrapper {
+    .e-split-btn {
+      @if $skin-name == 'bootstrap4'or $skin-name == 'FluentUI' {
+        padding-left: $split-btn-icon-btn-padding-bigger;
+        padding-right: $split-btn-icon-btn-padding-bigger;
+      }
+      @else if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
+        padding-left: 16px;
+        padding-right: 16px;
+      }
+      @else {
+        padding-left: 12px;
+        padding-right: 6px;
+      }
+
+      &.e-top-icon-btn {
+        padding-bottom: 12px;
+        padding-top: 12px;
+      }
+
+      .e-btn-icon {
+        font-size: $drop-down-btn-icon-font-size-bigger;
+        margin-left: 0;
+        @if $skin-name == 'FluentUI' {
+          padding-right: 8px;
+        }
+        @else {
+          padding-right: 10px;
+        }
+        width: auto;
+      }
+
+      .e-icon-top {
+        padding-bottom: 6px;
+        padding-right: 0;
+      }
+
+      &.e-icon-btn {
+        padding-left: $split-btn-icon-btn-padding-bigger;
+        padding-right: $split-btn-icon-btn-padding-bigger;
+
+        .e-btn-icon {
+          padding-right: 0;
+        }
+      }
+    }
+
+    .e-dropdown-btn {
+      @if $skin-name == 'bootstrap4' {
+        padding-left: 10px;
+        padding-right: 10px;
+      }
+      @else {
+        padding-left: 4px;
+        padding-right: 4px;
+      }
+      @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
+        z-index: 1;
+      }
+    }
+
+    &.e-rtl {
+      .e-split-btn {
+        @if $skin-name == 'bootstrap4' {
+          padding-left: $split-btn-icon-btn-padding-bigger;
+          padding-right: $split-btn-icon-btn-padding-bigger;
+        }
+        @else if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
+          padding-left: 12px;
+          padding-right: 12px;
+        }
+        @else {
+          padding-left: 6px;
+          padding-right: 12px;
+        }
+
+        .e-btn-icon {
+          @if $skin-name == 'FluentUI' {
+            padding-left: 8px;
+          }
+          @else {
+            padding-left: 10px;
+          }
+          padding-right: 0;
+        }
+
+        .e-icon-top {
+          padding-left: 0;
+        }
+
+        &.e-icon-btn {
+          padding-left: $split-btn-icon-btn-padding-bigger;
+          padding-right: $split-btn-icon-btn-padding-bigger;
+
+          .e-btn-icon {
+            padding-left: 0;
+          }
+        }
+      }
+    }
+
+    &.e-vertical {
+      .e-split-btn {
+        @if $skin-name == 'bootstrap4' or $skin-name == 'tailwind' {
+          padding-bottom: $split-btn-icon-btn-padding-bigger;
+          padding-right: $split-btn-icon-btn-padding-bigger;
+        }
+        @else {
+          padding-bottom: 6px;
+          padding-right: 12px;
+        }
+      }
+
+      .e-dropdown-btn {
+        @if $skin-name == 'bootstrap4' {
+          padding-bottom: $split-btn-icon-btn-padding-bigger;
+          padding-top: $split-btn-icon-btn-padding-bigger;
+        }
+        @else {
+          padding-bottom: 4px;
+          padding-top: 4px;
+        }
+        @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
+          z-index: 1;
+        }
+
+        .e-icon-bottom {
+          padding-top: 0;
+        }
+      }
+    }
+  }
+}

package/styles/split-button/_material-dark-definition.scss

@@ -0,0 +1,26 @@
+//default
+$split-btn-zindex: 0;
+$split-btn-border-radius: 2px;
+$split-btn-focus-border-color: transparent;
+$split-btn-focus-vertical-border-color: transparent;
+$split-btn-focus-outline-offset: 0;
+$split-btn-vertical-secondary-icon-line-height: .417em;
+$split-btn-seperator-border: 1px solid;
+$split-btn-seperator-border-color: transparent;
+$split-btn-seperator-default-border-color: transparent;
+$split-btn-seperator-vertical-border-color: transparent;
+$split-btn-hover-border-color: transparent;
+$split-btn-hover-vertical-border-color: transparent;
+$split-btn-active-border-color: transparent;
+$split-btn-active-vertical-border-color: transparent;
+$split-btn-disabled-vertical-border-color: transparent;
+$split-btn-active-box-shadow: none;
+$split-btn-disabled-left-border-color: transparent;
+$split-btn-hover-left-border-color: transparent;
+$split-btn-focus-left-border-color: transparent;
+$split-btn-active-left-border-color: transparent;
+$split-btn-sec-btn-margin-left: 0;
+$split-btn-icon-btn-padding: 6px;
+$split-btn-icon-btn-padding-bigger: 9px;
+
+//enddefault

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

@@ -0,0 +1,23 @@
+$split-btn-zindex: 0 !default;
+$split-btn-border-radius: 2px !default;
+$split-btn-focus-border-color: transparent !default;
+$split-btn-focus-vertical-border-color: transparent !default;
+$split-btn-focus-outline-offset: 0 !default;
+$split-btn-vertical-secondary-icon-line-height: .417em !default;
+$split-btn-seperator-border: 1px solid !default;
+$split-btn-seperator-border-color: transparent !default;
+$split-btn-seperator-default-border-color: transparent !default;
+$split-btn-seperator-vertical-border-color: transparent !default;
+$split-btn-hover-border-color: transparent !default;
+$split-btn-hover-vertical-border-color: transparent !default;
+$split-btn-active-border-color: transparent !default;
+$split-btn-active-vertical-border-color: transparent !default;
+$split-btn-disabled-vertical-border-color: transparent !default;
+$split-btn-active-box-shadow: none !default;
+$split-btn-disabled-left-border-color: transparent !default;
+$split-btn-hover-left-border-color: transparent !default;
+$split-btn-focus-left-border-color: transparent !default;
+$split-btn-active-left-border-color: transparent !default;
+$split-btn-sec-btn-margin-left: 0 !default;
+$split-btn-icon-btn-padding: 6px !default;
+$split-btn-icon-btn-padding-bigger: 9px !default;

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

@@ -0,0 +1,24 @@
+//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: 10px !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: $secondary-shadow-focus !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/_tailwind-dark-definition.scss

@@ -0,0 +1 @@
+@import './tailwind-definition.scss';

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

@@ -0,0 +1,24 @@
+//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.css

@@ -1,3 +1,4 @@
+/* stylelint-disable-line no-empty-source */
 /*! splitbutton layout */
 .e-split-btn-wrapper {
   display: -ms-inline-flexbox;

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';