@syncfusion/ej2-base 19.2.55 → 19.3.47

package/styles/bootstrap5.scss

@@ -0,0 +1,3 @@
+@import 'ej2-icons/styles/bootstrap5.scss';
+@import 'bootstrap5-definition.scss';
+@import 'all.scss';

package/styles/common/_core.scss

@@ -1,71 +1,36 @@
 @include export-module('base-core') {
   /*! common core */
   .e-control,
-  .e-css {
+  .e-css  {
     font-family: $font-family;
     font-size: $font-size;
     font-weight: $font-weight;
-    }
-  $white: #fff;
-  $background: #e82824;
+  }
 
-  .sf-license-warning {
-    background: $background;
-    color: $white;
-    font-family: 'Segoe UI';
-    font-size: medium;
-    left: 0;
-    line-height: 45px;
-    opacity: .75;
-    position: fixed;
-    right: 0;
-    text-align: center;
-    top: 0;
-    z-index: 999999999;
-    }
-
-  .sf-license-close-btn {
-    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgaGVpZ2h0PSIyMCIgd2lkdGg9IjIwIiB2aWV3Qm94PSIwIDAgMjU2IDI1NiI+ICA8Zz4gICAgPHBhdGggaWQ9InBhdGgxIiB0cmFuc2Zvcm09InJvdGF0ZSgxLDEyOCwxMjgpIHRyYW5zbGF0ZSg1OS4wMTA3Nzk0NDEwNDU1LDU5KSBzY2FsZSg0LjMxMjUwMDI1NzA0NTA1LDQuMzEyNTAwMjU3MDQ1MDUpIiBmaWxsPSIjZmZmZmZmIiBkPSJNMjkuNTkwODE4LDBDMzAuMjA2OTYzLDAgMzAuODIzMjI3LDAuMjM0NDk5OTMgMzEuMjkyMjI5LDAuNzAzNDk5NzkgMzIuMjI5MjU2LDEuNjQwNTAwMSAzMi4yMjkyNTYsMy4xNjA1MDA1IDMxLjI5MjIyOSw0LjEwMDQ5OTJMMTkuMzk4MDAzLDE1Ljk5ODQ5OCAzMS4yOTIyMjksMjcuODkyNDk1QzMyLjIyOTI1NiwyOC44Mjk0OTkgMzIuMjI5MjU2LDMwLjM0OTQ5NiAzMS4yOTIyMjksMzEuMjk0NDk2IDMwLjM1NDIyNywzMi4yMzE1IDI4LjgyNzE2NCwzMi4yMzE1IDI3Ljg5MDEzOSwzMS4yOTQ0OTZMMTUuOTk3OTg4LDE5LjM5OTQ5OSA0LjEwNDc5OTIsMzEuMjk2NTAyQzMuMTY3NzczNCwzMi4yMzQ0OTggMS42Mzk3MzQ3LDMyLjIzNDQ5OCAwLjcwMjc2OTY5LDMxLjI5NjUwMiAtMC4yMzQyNTY1NiwzMC4zNTI1MDIgLTAuMjM0MjU2NTYsMjguODMyNDk4IDAuNzAyNzY5NjksMjcuODk0NTAyTDEyLjU5NjkzNCwxNS45OTg0OTggMC43MDI3Njk2OSw0LjEwMjQ5ODFDLTAuMjM0MjU2NTYsMy4xNjU0OTc4IC0wLjIzNDI1NjU2LDEuNjQ1NDk3MyAwLjcwMjc2OTY5LDAuNzA1NDk4NyAxLjYzOTczNDcsLTAuMjMxNTAxNTggMy4xNjc3NzM0LC0wLjIzMTUwMTU4IDQuMTA0Nzk5MiwwLjcwNTQ5ODdMMTUuOTk2OTUsMTIuNTk3NDk3IDI3Ljg5MDEzOSwwLjcwMzQ5OTc5QzI4LjM1ODY1LDAuMjM0NDk5OTMsMjguOTc0Njc0LDAsMjkuNTkwODE4LDB6IiAvPiAgPC9nPjwvc3ZnPg==');
-    cursor: pointer;
-    height: 20px;
-    margin-top: 14px;
-    padding-top: 10px;
-    position: absolute;
-    right: 20px;
-    width: 20px;
-    }
-
-  $warning: #ffd800;
-
-  .sf-license-warning a,
-  .sf-license-warning a:hover {
-    color: $warning;
-    }
-
-  #{&} .e-error {
+  .e-error {
     color: $error-font-color;
     font-family: $font-family;
     font-size: $font-size;
     font-weight: $font-weight;
-    }
+  }
 
   .e-control,
   .e-control [class^='e-'],
   .e-control [class*=' e-'] {
     box-sizing: border-box;
-    }
+  }
 
   .e-control:focus,
   .e-control *:focus {
     outline: none;
-    }
+  }
 
-  #{&} .e-rtl {
+  .e-rtl {
     direction: rtl;
     text-align: right;
-    }
+  }
 
-  #{&} .e-overlay {
+  .e-overlay {
     background-color: $overlay-bg-color;
     filter: alpha(opacity=50);
     height: 100%;
@@ -73,44 +38,44 @@
     pointer-events: none;
     touch-action: none;
     width: 100%;
-    }
+  }
 
-  #{&} .e-hidden {
+  .e-hidden {
     display: none;
-    }
+  }
 
-  #{&} .e-blazor-hidden {
+  .e-blazor-hidden {
     visibility: hidden;
-    }
+  }
 
-  #{&} .e-disabled {
+  .e-disabled {
     background-image: none;
     cursor: default;
     filter: alpha(Opacity=35);
     opacity: .35;
-    }
+  }
 
-  #{&} .e-ul {
+  .e-ul {
     list-style-type: none;
-    }
+  }
 
-  #{&} .e-prevent-select {
+  .e-prevent-select {
     user-select: none;
-    }
+  }
 
-  #{&} .e-warning {
+  .e-warning {
     color: $warning-font-color;
-    }
+  }
 
-  #{&} .e-success {
+  .e-success {
     color: $success-font-color;
-    }
+  }
 
-  #{&} .e-information {
+  .e-information {
     color: $information-font-color;
-    }
+  }
 
-  #{&} .e-block-touch {
+  .e-block-touch {
     touch-action: pinch-zoom;
-    }
+  }
 }

package/styles/definition/_bootstrap-dark.scss

@@ -1,4 +1,4 @@
-$brand-primary: #0070f0 !default;
+$brand-primary: #0070f0 !default !default;
 $brand-primary-darken-10: darken($brand-primary, 10%) !default;
 $brand-primary-darken-15: darken($brand-primary, 20%) !default;
 $brand-primary-darken-25: darken($brand-primary, 30%) !default;
@@ -49,12 +49,12 @@ $brand-warning-font: #9d6106 !default;
 $brand-danger-font: #ac2a2a !default;
 $base-font: #000 !default;
 $shadow: #000 !default;
+$skin-name: 'bootstrap-dark' !default;
 
 // mapping Bootstrap variables
-$grey-base: $gray-base  !default;
+$grey-base: $gray-base !default;
 $grey-darker: $gray-darker !default;
 $grey-dark: $gray-dark !default;
 $grey: $gray !default;
 $grey-light: $gray-light !default;
 $grey-lighter: $gray-lighter !default;
-$skin-name: 'bootstrap-dark' !default;

package/styles/definition/_bootstrap.scss

@@ -44,6 +44,7 @@ $brand-warning-font: #8a6d3b !default;
 $brand-danger-font: #a94442 !default;
 $base-font: #000 !default;
 $shadow: #000 !default;
+$skin-name: 'bootstrap' !default;
 
 // mapping Bootstrap variables
 $grey-base: $gray-base  !default;
@@ -52,4 +53,3 @@ $grey-dark: $gray-dark !default;
 $grey: $gray !default;
 $grey-light: $gray-light !default;
 $grey-lighter: $gray-lighter !default;
-$skin-name: 'bootstrap' !default;

package/styles/definition/_bootstrap5-dark.scss

@@ -0,0 +1,357 @@
+// color system
+
+// black
+$black:    #000 !default;
+
+// White
+$white:    #fff !default;
+
+@function shade-color($color, $percentage) {
+  @return mix($black, $color, $percentage);
+}
+
+@function tint-color($color, $percentage) {
+  @return mix($white, $color, $percentage);
+}
+
+// Transparent
+$transparent: transparent;
+
+// scss-docs-start gray-color-variables
+$gray-100: #f8f9fa !default;//
+$gray-200: #e9ecef !default;//
+$gray-300: #dee2e6 !default;//
+$gray-400: #ced4da !default;//
+$gray-500: #adb5bd !default;//
+$gray-600: #6c757d !default;//
+$gray-700: #495057 !default;//
+$gray-800: #343a40 !default;//
+$gray-900: #212529 !default;//
+
+// scss-docs-start color-variables
+$blue:    #0d6efd !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #d63384 !default;
+$red:     #dc3545 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #ffc107 !default;
+$green:   #198754 !default;
+$teal:    #20c997 !default;
+$cyan:    #0dcaf0 !default;
+
+
+$primary:       $blue !default;
+$secondary:     $gray-600 !default;
+$success:       lighten($green, 10%) !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        lighten($red, 10%) !default;
+$success-light:       tint-color($success, 80%) !default;
+$info-light:          tint-color($info, 80%) !default;
+$warning-light:       tint-color($warning, 80%) !default;
+$danger-light:        tint-color($danger, 80%) !default;
+$primary-text-color: $white !default;
+$primary-light:       tint-color($primary, 50%) !default;
+$primary-lighter:     shade-color($primary, 80%) !default;
+$success-dark:       darken($success, 10%) !default;
+$info-dark:          darken($info, 25%) !default;
+$warning-dark:       darken($warning, 25%) !default;
+$danger-dark:        darken($danger, 10%) !default;
+$success-light-alt:       darken($green, 20%) !default;
+$info-light-alt:          darken($cyan, 25%) !default;
+$warning-light-alt:       darken($yellow, 20%) !default;
+$danger-light-alt:        darken($red, 25%) !default;
+
+
+
+// backgroundcolor
+$content-bg-color: $gray-900 !default;
+$content-bg-color-alt1: lighten($gray-900, 3%) !default;
+$content-bg-color-alt2: $gray-800 !default;
+$content-bg-color-alt3: $gray-700 !default;
+$content-bg-color-alt4: $gray-600 !default;
+$content-bg-color-alt5: $gray-500 !default;
+$content-bg-color-hover: lighten($content-bg-color, 7%) !default;
+$content-bg-color-pressed: $gray-700 !default;
+$content-bg-color-focus: $content-bg-color-hover !default;
+$content-bg-color-selected: $primary !default;
+$content-bg-color-dragged: $gray-800 !default;
+$content-bg-color-disabled: $content-bg-color !default;
+$flyout-bg-color: $gray-800 !default;
+$flyout-bg-color-hover: lighten($flyout-bg-color, 7%) !default;
+$flyout-bg-color-pressed: $primary !default;
+$flyout-bg-color-focus: $flyout-bg-color-hover !default;
+$flyout-border: $gray-700 !default;
+$overlay-bg-color: rgba($black, .4) !default;
+$table-bg-color-hover: lighten($content-bg-color, 7%) !default;
+$table-bg-color-pressed: $gray-700 !default;
+$table-bg-color-selected: lighten($content-bg-color, 12%) !default;
+
+//All theme commoon color
+$colorpicker-gradient-1: #f00 !default;
+$colorpicker-gradient-2: #ff0 !default;
+$ccolorpicker-gradient-3: #0f0 !default;
+$colorpicker-gradient-4: #0ff !default;
+$colorpicker-gradient-5: #00f !default;
+$colorpicker-gradient-6: #f0f !default;
+$colorpicker-gradient-7: #ff0004 !default;
+$spreadsheet-selection-1: #673ab8;
+$spreadsheet-selection-2: #9c27b0;
+$spreadsheet-selection-3: #029688;
+$spreadsheet-selection-4: #4caf51;
+$spreadsheet-selection-5: #fe9800;
+$spreadsheet-selection-6: #3f52b5;
+
+
+// text-color
+$content-text-color: $white !default;
+$content-text-color-alt1: $gray-200 !default;
+$content-text-color-alt2: $gray-400 !default;
+$content-text-color-alt3: lighten($gray-600, 6%) !default;
+$content-text-color-hover: $white !default;
+$content-text-color-pressed: $white !default;
+$content-text-color-focus: $white !default;
+$content-text-color-selected: $primary-text-color !default;
+$content-text-color-dragged: $white !default;
+$content-text-color-disabled: $gray-600 !default;
+$placeholder-text-color: $gray-600  !default;
+$flyout-text-color: $white !default;
+$flyout-text-color-hover: $white !default;
+$flyout-text-color-pressed: $primary-text-color !default;
+$flyout-text-color-focus: $white !default;
+$table-text-color-hover: $white !default;
+$table-text-color-pressed: $white !default;
+$table-text-color-selected: $white !default;
+
+// icon-color
+$icon-color: $gray-500 !default;
+$icon-color-hover: $gray-300 !default;
+$icon-color-pressed: $gray-100 !default;
+$icon-color-disabled: $gray-500 !default;
+
+// border-color
+$border-light: lighten($gray-800, 7%) !default;
+$border: $gray-600 !default;
+$border-dark: $gray-500 !default;
+$border-hover: $gray-700 !default;
+$border-pressed: $gray-600 !default;
+$border-focus: $gray-700 !default;
+$border-selected: $gray-600 !default;
+$border-dragged: $gray-600 !default;
+$border-disabled: $border-light !default;
+$border-warning: lighten($yellow, 10%) !default;
+$border-error: lighten($red, 10%) !default;
+$border-success: lighten($green, 10%) !default;
+$spreadsheet-gridline: $gray-300 !default;
+
+// Tooltip
+$tooltip-bg-color: $gray-200 !default;
+$tooltip-border: $gray-200;
+$toooltip-text-color: $gray-900 !default;
+
+
+
+// shadow
+$shadow: 0 .8px 16px rgba($black, .15) !default;
+$shadow-sm: 0 2px 4px rgba($black, .075) !default;
+$shadow-md: 0 8px 12px rgba($black, .15) !default;
+$shadow-lg:  0 16px 48px rgba($black, .175) !default;
+$shadow-xl: 0 20px 25px -5px rgba($black, .1), 0 10px 10px -5px rgba($black, .04) !default;
+$shadow-2xl: 0 25px 50px -12px rgba($black, .25) !default;
+$shadow-inner: inset 0 1px 2px rgba($black, .075) !default;
+$shadow-none: 0 0 rgba($black, 0) !default;
+$shadow-focus-ring1: 0 0 0 4px rgba($primary, .25) !default;
+$shadow-focus-ring2: 0 0 0 4px rgba($primary, .25) !default;
+$primary-shadow-focus: 0 0 0 4px rgba(tint-color($primary, 15%), .5) !default;
+$secondary-shadow-focus: 0 0 0 4px rgba(tint-color($secondary, 15%), .5) !default;
+$success-shadow-focus: 0 0 0 4px rgba(tint-color($success, 15%), .5) !default;
+$danger-shadow-focus: 0 0 0 4px rgba(tint-color($danger, 15%), .5) !default;
+$info-shadow-focus: 0 0 0 4px rgba(tint-color($info, 15%), .5) !default;
+$warning-shadow-focus: 0 0 0 4px rgba(tint-color($warning, 15%), .5) !default;
+
+
+// fontfamily
+$font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
+
+
+// default font Size
+$text-xxs: 10px !default;
+$text-xs: 12px !default;
+$text-sm: 14px !default;
+$text-base: 16px !default;
+$text-lg: 18px !default;
+$text-xl: 20px !default;
+$text-2xl: 24px !default;
+$text-3xl: 30px !default;
+$text-4xl: 36px !default;
+$text-5xl: 48px !default;
+$text-6xl: 60px !default;
+$text-7xl: 72px !default;
+$text-8xl: 96px !default;
+$text-9xl: 128px !default;
+
+// heading
+$h1-font-size: 40px !default;
+$h2-font-size: 32px !default;
+$h3-font-size: 28px !default;
+$h4-font-size: $text-2xl !default;
+$h5-font-size: $text-xl !default;
+$h6-font-size: $text-base !default;
+
+// Display
+
+// Line height
+$leading-none: 1 !default;
+$leading-tight: 1.25 !default;
+$leading-snug: 1.375 !default;
+$leading-normal: 1.5 !default;
+$leading-relaxed: 1.625 !default;
+$leading-loose: 2 !default;
+
+
+// font Weight
+$font-weight-lighter:         lighter !default;
+$font-weight-light:           300 !default;
+$font-weight-normal:          400 !default;
+$font-weight-medium:          500 !default;
+$font-weight-bold:            700 !default;
+$font-weight-bolder:          bolder !default;
+
+
+// Secondary-button
+
+$secondary-bg-color: $secondary !default;
+$secondary-border-color: $secondary-bg-color !default;
+$secondary-text-color: $white !default;
+$secondary-bg-color-hover: shade-color($secondary-bg-color, 15%) !default;
+$secondary-border-color-hover: shade-color($secondary-bg-color, 20%) !default;
+$secondary-text-color-hover: $secondary-text-color !default;
+$secondary-bg-color-pressed: shade-color($secondary-bg-color, 20%) !default;
+$secondary-border-color-pressed: shade-color($secondary-bg-color, 25%) !default;
+$secondary-text-color-pressed: $secondary-text-color !default;
+$secondary-bg-color-focus: $secondary-bg-color-hover !default;
+$secondary-border-color-focus: $secondary-border-color-hover !default;
+$secondary-text-color-focus: $secondary-text-color-hover !default;
+$secondary-bg-color-disabled: rgba($secondary-bg-color, .65) !default;
+$secondary-border-color-disabled: $secondary-bg-color-disabled !default;
+$secondary-text-color-disabled: rgba($secondary-text-color, .65) !default;
+
+
+
+// Primary-button
+
+$primary-bg-color: $primary !default;
+$primary-border-color: $primary !default;
+$primary-text: $primary-text-color !default;
+$primary-bg-color-hover: shade-color($primary-bg-color, 15%) !default;
+$primary-border-color-hover: shade-color($primary-bg-color, 20%) !default;
+$primary-text-hover: $primary-text !default;
+$primary-bg-color-pressed: shade-color($primary-bg-color, 20%) !default;
+$primary-border-color-pressed: shade-color($primary-bg-color, 25%) !default;
+$primary-text-pressed: $primary-text-color !default;
+$primary-bg-color-focus: $primary-bg-color-hover !default;
+$primary-border-color-focus: $primary-border-color-hover !default;
+$primary-text-focus: $primary-text !default;
+$primary-bg-color-disabled: rgba($primary-bg-color, .65) !default;
+$primary-border-color-disabled: $primary-bg-color-disabled !default;
+$primary-text-disabled: rgba($primary-text, .65) !default;
+
+// Success-button
+
+$success-bg-color: $green !default;
+$success-border-color: $green !default;
+$success-text: $white !default;
+$success-bg-color-hover: shade-color($success-bg-color, 15%) !default;
+$success-border-color-hover: shade-color($success-bg-color, 20%) !default;
+$success-text-hover: $success-text !default;
+$success-bg-color-pressed: shade-color($success-bg-color, 20%) !default;
+$success-border-color-pressed: shade-color($success-bg-color, 25%) !default;
+$success-text-pressed: $success-text !default;
+$success-bg-color-focus: $success-bg-color-hover !default;
+$success-border-color-focus: $success-border-color-hover !default;
+$success-text-focus: $success-text !default;
+$success-bg-color-disabled: rgba($success-bg-color, .65) !default;
+$success-border-color-disabled: $success-bg-color-disabled !default;
+$success-text-disabled: rgba($success-text, .65) !default;
+
+// Warning-button
+$warning-bg-color: $yellow !default;
+$warning-border-color: $yellow !default;
+$warning-text: $black !default;
+$warning-bg-color-hover: tint-color($warning-bg-color, 15%) !default;
+$warning-border-color-hover: tint-color($warning-bg-color, 10%) !default;
+$warning-text-hover: $warning-text !default;
+$warning-bg-color-pressed: tint-color($warning-bg-color, 20%) !default;
+$warning-border-color-pressed: tint-color($warning-bg-color, 10%) !default;
+$warning-text-pressed: $warning-text !default;
+$warning-bg-color-focus: $warning-bg-color-hover !default;
+$warning-border-color-focus: $warning-border-color-hover !default;
+$warning-text-focus: $warning-text !default;
+$warning-bg-color-disabled: rgba($warning-bg-color, .65) !default;
+$warning-border-color-disabled: $warning-bg-color-disabled !default;
+$warning-text-disabled: rgba($warning-text, .65) !default;
+
+// danger-button
+$danger-bg-color: $red !default;
+$danger-border-color: $red !default;
+$danger-text: $white !default;
+$danger-bg-color-hover: shade-color($danger-bg-color, 15%) !default;
+$danger-border-color-hover: shade-color($danger-bg-color, 20%) !default;
+$danger-text-hover: $danger-text !default;
+$danger-bg-color-pressed: shade-color($danger-bg-color, 20%) !default;
+$danger-border-color-pressed: shade-color($danger-bg-color, 25%) !default;
+$danger-text-pressed: $danger-text !default;
+$danger-bg-color-focus: $danger-bg-color-hover !default;
+$danger-border-color-focus: $danger-border-color-hover !default;
+$danger-text-focus: $danger-text !default;
+$danger-bg-color-disabled: rgba($danger-bg-color, .65) !default;
+$danger-border-color-disabled: $danger-bg-color-disabled !default;
+$danger-text-disabled: rgba($danger-text, .65) !default;
+
+// Info-button
+$info-bg-color: $cyan !default;
+$info-border-color: $cyan !default;
+$info-text: $black !default;
+$info-bg-color-hover: tint-color($info-bg-color, 15%) !default;
+$info-border-color-hover: tint-color($info-bg-color, 10%) !default;
+$info-text-hover: $info-text !default;
+$info-bg-color-pressed: tint-color($info-bg-color, 20%) !default;
+$info-border-color-pressed: tint-color($info-bg-color, 10%) !default;
+$info-text-pressed: $info-text !default;
+$info-bg-color-focus: $info-bg-color-hover !default;
+$info-border-color-focus: $info-border-color-hover !default;
+$info-text-focus: $info-text-hover !default;
+$info-bg-color-disabled: rgba($info-bg-color, .65) !default;
+$info-border-color-disabled: $info-bg-color-disabled !default;
+$info-text-disabled: rgba($info-text, .65) !default;
+
+//Outline button
+$primary-outline: lighten($primary, 10%) !default;
+$secondary-outline: lighten($secondary, 10%) !default;
+$warning-outline: lighten($warning, 10%) !default;
+$danger-outline: lighten($danger, 10%) !default;
+$success-outline: lighten($success, 10%) !default;
+$info-outline: lighten($info, 10%) !default;
+
+
+
+// Chart series
+$series-1: $gray-800;
+$series-2: $gray-700;
+$series-3: $gray-600;
+$series-4: $gray-500;
+$series-5: #5ecb9b;
+$series-6: #a860f1;
+$series-7: #557ef7;
+$series-8: #eba844;
+$series-9: #e9599b;
+$series-10: #3bc6cf;
+$series-11: #74b706;
+$series-12: #ea6266;
+$skin-name: 'bootstrap5' !default;
+
+//Diagram Palette color
+$diagram-palette-background: $gray-300 !default;
+$diagram-palette-hover-background: $gray-400 !default;
+