@syncfusion/ej2-base 21.2.3 → 22.1.34

package/src/validate-lic.js

@@ -14,8 +14,8 @@ var LicenseValidator = /** @class */ (function () {
     function LicenseValidator(key) {
         this.isValidated = false;
         this.isLicensed = true;
-        this.version = '21';
-        this.platform = /JavaScript|ASPNET|ASPNETCORE|ASPNETMVC|FileFormats/i;
+        this.version = '22';
+        this.platform = /JavaScript|ASPNET|ASPNETCORE|ASPNETMVC|FileFormats|essentialstudio/i;
         this.errors = {
             noLicense: '<span>This application was built using a trial version of Syncfusion Essential Studio.' +
                 ' To remove the license validation message permanently, a valid license key must be included.</span>',
@@ -116,7 +116,7 @@ var LicenseValidator = /** @class */ (function () {
                 }
             }
             if (validateMsg && typeof document !== 'undefined' && !isNullOrUndefined(document)) {
-                accountURL = (validateURL && validateURL !== '') ? validateURL : "https://www.syncfusion.com/account/claim-license-key?pl=SmF2YVNjcmlwdA==&vs=MjE=";
+                accountURL = (validateURL && validateURL !== '') ? validateURL : "https://www.syncfusion.com/account/claim-license-key?pl=SmF2YVNjcmlwdA==&vs=MjI=";
                 var errorDiv = createElement('div', {
                     innerHTML: "<img src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzE5OV80KSI+CjxwYXRoIGQ9Ik0xMiAyMUMxNi45NzA2IDIxIDIxIDE2Ljk3MDYgMjEgMTJDMjEgNy4wMjk0NCAxNi45NzA2IDMgMTIgM0M3LjAyOTQ0IDMgMyA3LjAyOTQ0IDMgMTJDMyAxNi45NzA2IDcuMDI5NDQgMjEgMTIgMjFaIiBzdHJva2U9IiM3MzczNzMiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0xMS4yNSAxMS4yNUgxMlYxNi41SDEyLjc1IiBmaWxsPSIjNjE2MDYzIi8+CjxwYXRoIGQ9Ik0xMS4yNSAxMS4yNUgxMlYxNi41SDEyLjc1IiBzdHJva2U9IiM3MzczNzMiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0xMS44MTI1IDlDMTIuNDMzOCA5IDEyLjkzNzUgOC40OTYzMiAxMi45Mzc1IDcuODc1QzEyLjkzNzUgNy4yNTM2OCAxMi40MzM4IDYuNzUgMTEuODEyNSA2Ljc1QzExLjE5MTIgNi43NSAxMC42ODc1IDcuMjUzNjggMTAuNjg3NSA3Ljg3NUMxMC42ODc1IDguNDk2MzIgMTEuMTkxMiA5IDExLjgxMjUgOVoiIGZpbGw9IiM3MzczNzMiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8xOTlfNCI+CjxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K' style=\"top: 6px;\n                    position: absolute;\n                    left: 16px;\n                    width: 24px;\n                    height: 24px;\"/>" + validateMsg + ' ' + '<a style="text-decoration: none;color: #0D6EFD;font-weight: 500;" href=' + accountURL + '>Claim your free account</a>'
                 });

package/styles/_highcontrast-definition.scss

@@ -30,7 +30,7 @@ $active-font-color: $content-font !default;
 $active-icon-color: $content-font !default;
 $error-font-color: $error-alt !default;
 $information-font-color: $info-bg !default;
-$warning-font-color: $bg-base-20 !default;
+$warning-font-color: $msg-warning-color !default;
 $success-font-color: $success-alt !default;
 $overlay-bg-color: #383838 !default;
 $shadow-color: rgba(0, 0, 0, .4) !default;

package/styles/_highcontrast-light-definition.scss

@@ -30,7 +30,7 @@ $active-font-color: $content-font !default;
 $active-icon-color: $content-font !default;
 $error-font-color: $error-alt !default;
 $information-font-color: $info-bg !default;
-$warning-font-color: $bg-base-20 !default;
+$warning-font-color: $msg-warning-color !default;
 $success-font-color: $success-alt !default;
 $overlay-bg-color: #383838 !default;
 $shadow-color: rgba(0, 0, 0, .4) !default;

package/styles/_material3-dark-definition.scss

@@ -0,0 +1,15 @@
+@import 'common/mixin.scss';
+@import 'definition/material3-dark.scss';
+
+@if not variable-exists('is-roboto-loaded') {
+  //sass-lint:disable no-url-protocols,no-url-domains
+  @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap');// stylelint-disable-line no-invalid-position-at-import-rule
+}
+
+$font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif !default;
+$font-size: 12px !default;
+$font-weight: 400 !default;
+$error-font-color: $danger !default;
+$warning-font-color: $warning !default;
+$success-font-color: $success !default;
+$information-font-color: $info !default;

package/styles/_material3-definition.scss

@@ -0,0 +1,16 @@
+@import 'common/mixin.scss';
+@import 'definition/material3.scss';
+
+@if not variable-exists('is-roboto-loaded') {
+  //sass-lint:disable no-url-protocols,no-url-domains
+  @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap');// stylelint-disable-line no-invalid-position-at-import-rule
+}
+  
+$is-roboto-loaded: 'true' !default;
+$font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif !default;
+$font-size: 12px !default;
+$font-weight: 400 !default;
+$error-font-color: $danger !default;
+$warning-font-color: $warning !default;
+$success-font-color: $success !default;
+$information-font-color: $info !default;

package/styles/animation/_all.scss

@@ -10,6 +10,7 @@
       transform: translate(-100%, 0);
     }
   }
+
   @keyframes SlideLeftIn {
     from {
       transform: translate(-100%, 0);
@@ -19,6 +20,7 @@
       transform: translate(0, 0);
     }
   }
+
   @keyframes SlideRightIn {
     from {
       transform: translate(100%, 0);
@@ -28,6 +30,7 @@
       transform: translate(0, 0);
     }
   }
+
   @keyframes SlideRightOut {
     from {
       transform: translate(0, 0);
@@ -37,6 +40,7 @@
       transform: translate(100%, 0);
     }
   }
+
   @keyframes SlideBottomIn {
     from {
       transform: translate(0, 100%);
@@ -46,6 +50,7 @@
       transform: translate(0, 0);
     }
   }
+
   @keyframes SlideBottomOut {
     from {
       transform: translate(0, 0);
@@ -55,6 +60,7 @@
       transform: translate(0, 100%);
     }
   }
+
   @keyframes SlideTopIn {
     from {
       transform: translate(0, -100%);
@@ -64,6 +70,7 @@
       transform: translate(0, 0);
     }
   }
+
   @keyframes SlideTopOut {
     from {
       transform: translate(0, 0);
@@ -73,6 +80,7 @@
       transform: translate(0, -100%);
     }
   }
+
   @keyframes SlideRight {
     from {
       width: 0;
@@ -82,6 +90,7 @@
       width: 100%;
     }
   }
+
   @keyframes SlideLeft {
     from {
       width: 100%;
@@ -91,6 +100,7 @@
       width: 0;
     }
   }
+
   @keyframes SlideDown {
     from {
       height: 0;
@@ -100,6 +110,7 @@
       height: 100%;
     }
   }
+
   @keyframes SlideUp {
     from {
       height: 100%;
@@ -109,6 +120,7 @@
       height: 0;
     }
   }
+
   @keyframes FadeIn {
     0% {
       filter: alpha(opacity=0);
@@ -120,6 +132,7 @@
       opacity: 1;
     }
   }
+
   @keyframes FadeOut {
     from {
       filter: alpha(opacity=100);
@@ -131,6 +144,7 @@
       opacity: 0;
     }
   }
+
   @keyframes ZoomIn {
     from {
       transform: translate(0, 0) scale(0);
@@ -140,6 +154,7 @@
       transform: translate(0, 0) scale(1);
     }
   }
+
   @keyframes ZoomOut {
     from {
       transform: translate(0, 0) scale(1);
@@ -149,6 +164,7 @@
       transform: translate(0, 0) scale(0);
     }
   }
+
   @keyframes FadeZoomIn {
     from {
       filter: alpha(opacity=0);
@@ -162,6 +178,7 @@
       transform: scale(1);
     }
   }
+
   @keyframes FadeZoomOut {
     from {
       filter: alpha(opacity=100);
@@ -175,6 +192,7 @@
       transform: scale(0);
     }
   }
+
   @keyframes FlipRightDownIn {
     from {
       transform: perspective(400px) rotateY(-180deg);
@@ -188,6 +206,7 @@
       transform-style: preserve-3d;
     }
   }
+
   @keyframes FlipRightDownOut {
     from {
       transform: perspective(400px) rotateY(0deg);
@@ -201,6 +220,7 @@
       transform-style: preserve-3d;
     }
   }
+
   @keyframes FlipRightUpIn {
     from {
       transform: perspective(400px) rotateY(135deg);
@@ -214,6 +234,7 @@
       transform-style: preserve-3d;
     }
   }
+
   @keyframes FlipRightUpOut {
     from {
       transform: perspective(400px) rotateY(0deg);
@@ -227,6 +248,7 @@
       transform-style: preserve-3d;
     }
   }
+
   @keyframes FlipLeftDownIn {
     from {
       transform: perspective(400px) rotateY(-180deg);
@@ -240,6 +262,7 @@
       transform-style: preserve-3d;
     }
   }
+
   @keyframes FlipLeftDownOut {
     from {
       transform: perspective(400px) rotateY(0deg);
@@ -253,6 +276,7 @@
       transform-style: preserve-3d;
     }
   }
+
   @keyframes FlipLeftUpIn {
     from {
       transform: perspective(400px) rotateY(-135deg);
@@ -266,6 +290,7 @@
       transform-style: preserve-3d;
     }
   }
+
   @keyframes FlipLeftUpOut {
     from {
       transform: perspective(400px) rotateY(0deg);
@@ -279,6 +304,7 @@
       transform-style: preserve-3d;
     }
   }
+
   @keyframes FlipYLeftIn {
     from {
       filter: alpha(opacity=0);
@@ -300,6 +326,7 @@
       transform-style: preserve-3d;
     }
   }
+
   @keyframes FlipYLeftOut {
     from {
       filter: alpha(opacity=100);
@@ -325,6 +352,7 @@
       transform-style: preserve-3d;
     }
   }
+
   @keyframes FlipYRightIn {
     from {
       filter: alpha(opacity=0);
@@ -346,6 +374,7 @@
       transform-style: preserve-3d;
     }
   }
+
   @keyframes FlipYRightOut {
     from {
       filter: alpha(opacity=100);
@@ -367,6 +396,7 @@
       transform-style: preserve-3d;
     }
   }
+
   @keyframes FlipXDownIn {
     from {
       filter: alpha(opacity=0);
@@ -388,6 +418,7 @@
       transform-style: preserve-3d;
     }
   }
+
   @keyframes FlipXDownOut {
     from {
       filter: alpha(opacity=100);
@@ -413,6 +444,7 @@
       transform-style: preserve-3d;
     }
   }
+
   @keyframes FlipXUpIn {
     from {
       filter: alpha(opacity=0);
@@ -434,6 +466,7 @@
       transform-style: preserve-3d;
     }
   }
+
   @keyframes FlipXUpOut {
     from {
       filter: alpha(opacity=100);
@@ -464,23 +497,44 @@
   }
 
   $ripple-background: rgba(0, 0, 0, .1);
+  $ripple-background-m3: linear-gradient(90deg, rgba(28, 27, 31, .08) 0%, rgba(28, 27, 31, .1) 5%, rgba(28, 27, 31, .1) 50%, rgba(28, 27, 31, .1) 50%, rgba(28, 27, 31, .1) 95%, rgba(28, 27, 31, .08) 100%);
 
   #{&} .e-ripple-element,
   #{&} .e-ripple-style::after {
-    background-color: $ripple-background;
-    border-radius: 100%;
+    @if $skin-name =='Material3' {
+      background: $ripple-background-m3;
+    }
+
+    @else {
+      background-color: $ripple-background;
+    }
+    border-radius: 0;
     overflow: hidden;
     pointer-events: none;
     position: absolute;
     transform: scale(0);
-    transition: opacity, transform 0ms cubic-bezier(0, .1, .2, 1);
+
+    @if $skin-name =='Material3' {
+      transition: opacity .3s transform 50ms cubic-bezier(.2, 0, 0, 1);
+    }
+
+    @else {
+      transition: opacity, transform 0ms cubic-bezier(0, .1, .2, 1);
+    }
   }
 
   #{&} .e-ripple-style {
     $ripple-style-background: rgba(0, 0, 0, .3);
+    $ripple-style-background-m3: rgba(28, 27, 31, .12);
 
     &::after {
-      background: $ripple-style-background;
+      @if $skin-name =='Material3' {
+        background: $ripple-style-background-m3;
+      }
+
+      @else {
+        background: $ripple-style-background;
+      }
       content: '';
       display: block;
       height: 50%;
@@ -488,7 +542,12 @@
       opacity: 0;
       top: 25%;
       transform: scale(3);
-      transition: transform .5s, opacity .5s;
+      @if $skin-name =='Material3' {
+        transition: transform .3s, opacity .3s;
+      }
+      @else {
+        transition: transform .5s, opacity .5s;
+      }
       width: 50%;
     }