@syncfusion/ej2-layouts 20.4.53 → 21.1.37

package/CHANGELOG.md

@@ -2,20 +2,8 @@
 
 ## [Unreleased]
 
-### Dashboard Layout
-
-#### Bug Fixes
-
-- `#I443265` - The issue of the dragStop event being triggered twice has been resolved.
-
 ## 20.4.48 (2023-02-01)
 
-### Dashboard Layout
-
-#### Bug Fixes
-
-- `#I423971` - Provided cancel option in Drag Start and Drag Stop events of the Dashboard Layout component.
-
 ### Splitter
 
 #### Bug Fixes

package/dist/ej2-layouts.min.js

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-layouts.min.js
-*  version : 20.4.53
+*  version : 21.1.37
 *  Copyright Syncfusion Inc. 2001 - 2020. 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

package/dist/ej2-layouts.umd.min.js

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-layouts.umd.min.js
-*  version : 20.4.53
+*  version : 21.1.37
 *  Copyright Syncfusion Inc. 2001 - 2020. 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

package/dist/global/ej2-layouts.min.js

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-layouts.min.js
-*  version : 20.4.53
+*  version : 21.1.37
 *  Copyright Syncfusion Inc. 2001 - 2020. 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

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.4.53
+*  version : 21.1.37
 *  Copyright Syncfusion Inc. 2001 - 2020. 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

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-layouts@*",
-  "_id": "@syncfusion/ej2-layouts@20.4.48",
+  "_id": "@syncfusion/ej2-layouts@21.1.35",
   "_inBundle": false,
-  "_integrity": "sha512-wFvRXWO8HbQ0TrViKZ3VPfF4/lk1IZKwLZ2N7wAvEUl6YyI0Gl+OQpRf1h2ncHepTSFKHL0fhGPkLkrDYrNhtw==",
+  "_integrity": "sha512-WCamq1AhfBRIlju3dyNuJ5x9eT9/P0PNdsAlEFrhzYhry5KiQLT/sN/dy3R0CetUOGqpcvB0BG3Fn6LLYhzykA==",
   "_location": "/@syncfusion/ej2-layouts",
   "_phantomChildren": {},
   "_requested": {
@@ -27,16 +27,16 @@
     "/@syncfusion/ej2-react-layouts",
     "/@syncfusion/ej2-vue-layouts"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-layouts/-/ej2-layouts-20.4.48.tgz",
-  "_shasum": "71a303ed7801c7e7cad5b976ce17059e007517cb",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-layouts/-/ej2-layouts-21.1.35.tgz",
+  "_shasum": "52257837007f6efda4fc56e10cdaf802710f1267",
   "_spec": "@syncfusion/ej2-layouts@*",
-  "_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.4.51"
+    "@syncfusion/ej2-base": "~21.1.37"
   },
   "deprecated": false,
   "description": "A package of Essential JS 2 layout pure CSS components such as card and avatar. The card is used as small container to show content in specific structure, whereas the avatars are icons, initials or figures representing particular person.",
@@ -76,7 +76,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/layouts"
   },
   "typings": "index.d.ts",
-  "version": "20.4.53",
+  "version": "21.1.37",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/styles/avatar/_layout.scss

@@ -17,7 +17,7 @@
     overflow: hidden;
     position: relative;
     width: $avatar-base-width;
-    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
+    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
       line-height: $avatar-base-line-height;
     }
 
@@ -28,11 +28,15 @@
 
     &.e-avatar-circle {
       border-radius: $avatar-circle-border-radius;
+      &.e-avatar-large,
+      &.e-avatar-xlarge  {
+        border-radius: $avatar-circle-border-radius;
+      }
     }
 
     &.e-avatar-xsmall {
       font-size: $avatar-xsmall-font-size;
-      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
+      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
         height: 24px;
         line-height: $avatar-base-xsmall-line-height;
         width: 24px;
@@ -41,7 +45,7 @@
 
     &.e-avatar-small {
       font-size: $avatar-small-font-size;
-      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
+      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
         height: 32px;
         line-height: $avatar-base-small-line-height;
         width: 32px;
@@ -53,7 +57,7 @@
       @if ($skin-name == 'bootstrap5') {
         border-radius: $avatar-large-border-radius;
       }
-      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
+      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
         height: 48px;
         line-height: $avatar-base-large-line-height;
         width: 48px;
@@ -65,7 +69,7 @@
       @if ($skin-name == 'bootstrap5') {
         border-radius: $avatar-large-border-radius;
       }
-      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark'or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
+      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark'or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
         height: 56px;
         line-height: $avatar-base-xlarge-line-height;
         width: 56px;

package/styles/avatar/bootstrap-dark.css

@@ -28,6 +28,9 @@
 .e-avatar.e-avatar-circle {
   border-radius: 50%;
 }
+.e-avatar.e-avatar-circle.e-avatar-large, .e-avatar.e-avatar-circle.e-avatar-xlarge {
+  border-radius: 50%;
+}
 .e-avatar.e-avatar-xsmall {
   font-size: 0.6em;
 }

package/styles/avatar/bootstrap.css

@@ -28,6 +28,9 @@
 .e-avatar.e-avatar-circle {
   border-radius: 50%;
 }
+.e-avatar.e-avatar-circle.e-avatar-large, .e-avatar.e-avatar-circle.e-avatar-xlarge {
+  border-radius: 50%;
+}
 .e-avatar.e-avatar-xsmall {
   font-size: 0.6em;
 }

package/styles/avatar/bootstrap4.css

@@ -28,6 +28,9 @@
 .e-avatar.e-avatar-circle {
   border-radius: 50%;
 }
+.e-avatar.e-avatar-circle.e-avatar-large, .e-avatar.e-avatar-circle.e-avatar-xlarge {
+  border-radius: 50%;
+}
 .e-avatar.e-avatar-xsmall {
   font-size: 0.65em;
 }

package/styles/avatar/bootstrap5-dark.css

@@ -29,6 +29,9 @@
 .e-avatar.e-avatar-circle {
   border-radius: 50%;
 }
+.e-avatar.e-avatar-circle.e-avatar-large, .e-avatar.e-avatar-circle.e-avatar-xlarge {
+  border-radius: 50%;
+}
 .e-avatar.e-avatar-xsmall {
   font-size: 10px;
   height: 24px;

package/styles/avatar/bootstrap5.css

@@ -29,6 +29,9 @@
 .e-avatar.e-avatar-circle {
   border-radius: 50%;
 }
+.e-avatar.e-avatar-circle.e-avatar-large, .e-avatar.e-avatar-circle.e-avatar-xlarge {
+  border-radius: 50%;
+}
 .e-avatar.e-avatar-xsmall {
   font-size: 10px;
   height: 24px;

package/styles/avatar/fabric-dark.css

@@ -28,6 +28,9 @@
 .e-avatar.e-avatar-circle {
   border-radius: 50%;
 }
+.e-avatar.e-avatar-circle.e-avatar-large, .e-avatar.e-avatar-circle.e-avatar-xlarge {
+  border-radius: 50%;
+}
 .e-avatar.e-avatar-xsmall {
   font-size: 0.6em;
 }

package/styles/avatar/fabric.css

@@ -28,6 +28,9 @@
 .e-avatar.e-avatar-circle {
   border-radius: 50%;
 }
+.e-avatar.e-avatar-circle.e-avatar-large, .e-avatar.e-avatar-circle.e-avatar-xlarge {
+  border-radius: 50%;
+}
 .e-avatar.e-avatar-xsmall {
   font-size: 0.6em;
 }

package/styles/avatar/fluent-dark.css

@@ -29,6 +29,9 @@
 .e-avatar.e-avatar-circle {
   border-radius: 50%;
 }
+.e-avatar.e-avatar-circle.e-avatar-large, .e-avatar.e-avatar-circle.e-avatar-xlarge {
+  border-radius: 50%;
+}
 .e-avatar.e-avatar-xsmall {
   font-size: 10px;
   height: 24px;

package/styles/avatar/fluent.css

@@ -29,6 +29,9 @@
 .e-avatar.e-avatar-circle {
   border-radius: 50%;
 }
+.e-avatar.e-avatar-circle.e-avatar-large, .e-avatar.e-avatar-circle.e-avatar-xlarge {
+  border-radius: 50%;
+}
 .e-avatar.e-avatar-xsmall {
   font-size: 10px;
   height: 24px;

package/styles/avatar/highcontrast-light.css

@@ -28,6 +28,9 @@
 .e-avatar.e-avatar-circle {
   border-radius: 50%;
 }
+.e-avatar.e-avatar-circle.e-avatar-large, .e-avatar.e-avatar-circle.e-avatar-xlarge {
+  border-radius: 50%;
+}
 .e-avatar.e-avatar-xsmall {
   font-size: 0.6em;
 }

package/styles/avatar/highcontrast.css

@@ -28,6 +28,9 @@
 .e-avatar.e-avatar-circle {
   border-radius: 50%;
 }
+.e-avatar.e-avatar-circle.e-avatar-large, .e-avatar.e-avatar-circle.e-avatar-xlarge {
+  border-radius: 50%;
+}
 .e-avatar.e-avatar-xsmall {
   font-size: 0.6em;
 }

package/styles/avatar/material-dark.css

@@ -29,6 +29,9 @@
 .e-avatar.e-avatar-circle {
   border-radius: 50%;
 }
+.e-avatar.e-avatar-circle.e-avatar-large, .e-avatar.e-avatar-circle.e-avatar-xlarge {
+  border-radius: 50%;
+}
 .e-avatar.e-avatar-xsmall {
   font-size: 0.6em;
 }

package/styles/avatar/material.css

@@ -29,6 +29,9 @@
 .e-avatar.e-avatar-circle {
   border-radius: 50%;
 }
+.e-avatar.e-avatar-circle.e-avatar-large, .e-avatar.e-avatar-circle.e-avatar-xlarge {
+  border-radius: 50%;
+}
 .e-avatar.e-avatar-xsmall {
   font-size: 0.6em;
 }

package/styles/avatar/tailwind-dark.css

@@ -30,6 +30,9 @@
 .e-avatar.e-avatar-circle {
   border-radius: 50%;
 }
+.e-avatar.e-avatar-circle.e-avatar-large, .e-avatar.e-avatar-circle.e-avatar-xlarge {
+  border-radius: 50%;
+}
 .e-avatar.e-avatar-xsmall {
   font-size: 10px;
   height: 24px;

package/styles/avatar/tailwind.css

@@ -30,6 +30,9 @@
 .e-avatar.e-avatar-circle {
   border-radius: 50%;
 }
+.e-avatar.e-avatar-circle.e-avatar-large, .e-avatar.e-avatar-circle.e-avatar-xlarge {
+  border-radius: 50%;
+}
 .e-avatar.e-avatar-xsmall {
   font-size: 10px;
   height: 24px;

package/styles/bootstrap-dark.css

@@ -28,6 +28,9 @@
 .e-avatar.e-avatar-circle {
   border-radius: 50%;
 }
+.e-avatar.e-avatar-circle.e-avatar-large, .e-avatar.e-avatar-circle.e-avatar-xlarge {
+  border-radius: 50%;
+}
 .e-avatar.e-avatar-xsmall {
   font-size: 0.6em;
 }
@@ -473,6 +476,7 @@
   font-size: 14px;
   line-height: normal;
   padding: 16px;
+  word-wrap: break-word;
 }
 .e-card .e-card-content + :not(.e-card-content),
 .e-card .e-card-content + .e-card-actions.e-card-vertical {
@@ -490,7 +494,7 @@
 /* stylelint-disable property-no-vendor-prefix */
 .e-card {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  background-color: #6e6e6e;
+  background: #6e6e6e;
   border: 1px solid #1a1a1a;
   box-shadow: none;
   color: #fff;

package/styles/bootstrap.css

@@ -28,6 +28,9 @@
 .e-avatar.e-avatar-circle {
   border-radius: 50%;
 }
+.e-avatar.e-avatar-circle.e-avatar-large, .e-avatar.e-avatar-circle.e-avatar-xlarge {
+  border-radius: 50%;
+}
 .e-avatar.e-avatar-xsmall {
   font-size: 0.6em;
 }
@@ -474,6 +477,7 @@
   font-size: 14px;
   line-height: normal;
   padding: 12px;
+  word-wrap: break-word;
 }
 .e-card .e-card-content + :not(.e-card-content),
 .e-card .e-card-content + .e-card-actions.e-card-vertical {
@@ -491,7 +495,7 @@
 /* stylelint-disable property-no-vendor-prefix */
 .e-card {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  background-color: #fff;
+  background: #fff;
   border: 1px solid #ddd;
   box-shadow: none;
   color: #333;

package/styles/bootstrap4.css

@@ -28,6 +28,9 @@
 .e-avatar.e-avatar-circle {
   border-radius: 50%;
 }
+.e-avatar.e-avatar-circle.e-avatar-large, .e-avatar.e-avatar-circle.e-avatar-xlarge {
+  border-radius: 50%;
+}
 .e-avatar.e-avatar-xsmall {
   font-size: 0.65em;
 }
@@ -479,6 +482,7 @@
   font-size: 14px;
   line-height: normal;
   padding: 16px;
+  word-wrap: break-word;
 }
 .e-card .e-card-content + :not(.e-card-content),
 .e-card .e-card-content + .e-card-actions.e-card-vertical {
@@ -496,7 +500,7 @@
 /* stylelint-disable property-no-vendor-prefix */
 .e-card {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  background-color: #fff;
+  background: #fff;
   border: 1px solid rgba(0, 0, 0, 0.12);
   box-shadow: none;
   color: #212529;

package/styles/bootstrap5-dark.css

@@ -29,6 +29,9 @@
 .e-avatar.e-avatar-circle {
   border-radius: 50%;
 }
+.e-avatar.e-avatar-circle.e-avatar-large, .e-avatar.e-avatar-circle.e-avatar-xlarge {
+  border-radius: 50%;
+}
 .e-avatar.e-avatar-xsmall {
   font-size: 10px;
   height: 24px;
@@ -488,6 +491,7 @@
   font-size: 14px;
   line-height: 1.5;
   padding: 12px;
+  word-wrap: break-word;
 }
 .e-card .e-card-content + :not(.e-card-content),
 .e-card .e-card-content + .e-card-actions.e-card-vertical {
@@ -505,7 +509,7 @@
 /* stylelint-disable property-no-vendor-prefix */
 .e-card {
   -webkit-tap-highlight-color: #0d6efd;
-  background-color: #212529;
+  background: #212529;
   border: 1px solid #444c54;
   box-shadow: none;
   color: #fff;

package/styles/bootstrap5.css

@@ -29,6 +29,9 @@
 .e-avatar.e-avatar-circle {
   border-radius: 50%;
 }
+.e-avatar.e-avatar-circle.e-avatar-large, .e-avatar.e-avatar-circle.e-avatar-xlarge {
+  border-radius: 50%;
+}
 .e-avatar.e-avatar-xsmall {
   font-size: 10px;
   height: 24px;
@@ -488,6 +491,7 @@
   font-size: 14px;
   line-height: 1.5;
   padding: 12px;
+  word-wrap: break-word;
 }
 .e-card .e-card-content + :not(.e-card-content),
 .e-card .e-card-content + .e-card-actions.e-card-vertical {
@@ -505,7 +509,7 @@
 /* stylelint-disable property-no-vendor-prefix */
 .e-card {
   -webkit-tap-highlight-color: #0d6efd;
-  background-color: #fff;
+  background: #fff;
   border: 1px solid #dee2e6;
   box-shadow: none;
   color: #212529;

package/styles/card/_bootstrap-dark-definition.scss

@@ -1,5 +1,4 @@
 /*! component's default definitions and variables */
-$skin-name: 'material' !default;
 $card-img-brdr-radious: 50% !default;
 $card-brdr-radious: $border-radius !default;
 $card-action-btn-txt-transform: none !default;

package/styles/card/_bootstrap-definition.scss

@@ -1,5 +1,4 @@
 /*! component's theme wise override material-definitions and variables */
-$skin-name: 'bootstrap' !default;
 $card-img-brdr-radious: 50% !default;
 $card-brdr-radious: 4px !default;
 $card-action-btn-txt-transform: none !default;

package/styles/card/_bootstrap4-definition.scss

@@ -1,6 +1,5 @@
 // Card Base
 
-$skin-name: 'bootstrap4' !default;
 $card-img-brdr-radious: 50% !default;
 $card-brdr-radious: 4px !default;
 $card-action-btn-txt-transform: none !default;

package/styles/card/_bootstrap5-definition.scss

@@ -1,5 +1,3 @@
-$skin-name: 'bootstrap5' !default;
-
 //Layout Variables Start
 $card-img-brdr-radious: 50% !default;
 $card-brdr-radious: 4px !default;

package/styles/card/_fabric-dark-definition.scss

@@ -111,7 +111,6 @@ $card-header-txt-subtitle-color: $default-font-color !default;
 $card-action-btn-icon-color: $default-font-color !default;
 
 /*! component's theme wise override material-definitions and variables */
-$skin-name: 'fabric' !default;
 $card-img-brdr-radious: 50% !default;
 $card-brdr-radious: 4px !default;
 

package/styles/card/_fabric-definition.scss

@@ -1,5 +1,4 @@
 /*! component's theme wise override material-definitions and variables */
-$skin-name: 'fabric' !default;
 $card-img-brdr-radious: 50% !default;
 $card-brdr-radious: 4px !default;
 $card-action-btn-txt-transform: none !default;

package/styles/card/_fluent-definition.scss

@@ -1,5 +1,3 @@
-$skin-name: 'FluentUI' !default;
-
 //Layout Variables Start
 $card-img-brdr-radious: 50% !default;
 $card-brdr-radious: $model-radius !default;

package/styles/card/_fusionnew-definition.scss

@@ -1,5 +1,3 @@
-$skin-name: 'bootstrap5' !default;
-
 //Layout Variables Start
 $card-img-brdr-radious: 50% !default;
 $card-brdr-radious: 4px !default;

package/styles/card/_highcontrast-definition.scss

@@ -1,5 +1,4 @@
 /*! component's theme wise override material-definitions and variables */
-$skin-name: 'highcontrast' !default;
 $card-img-brdr-radious: 50% !default;
 $card-brdr-radious: 4px !default;
 $card-action-btn-txt-transform: none !default;

package/styles/card/_highcontrast-light-definition.scss

@@ -124,7 +124,6 @@ $card-content-font-color: $card-header-txt-subtitle-color !default;
 $card-action-btn-icon-color: $default-font-color !default;
 
 /*! component's theme wise override material-definitions and variables */
-$skin-name: 'highcontrast' !default;
 $card-img-brdr-radious: 50% !default;
 $card-brdr-radious: 4px !default;
 

package/styles/card/_layout.scss

@@ -498,6 +498,7 @@
       font-size: $card-content-font-size;
       line-height: $card-content-line-height;
       padding: $card-nrml-content-padding;
+      word-wrap: break-word;
 
       + :not(.e-card-content),
       + .e-card-actions.e-card-vertical {

package/styles/card/_material-dark-definition.scss

@@ -117,7 +117,6 @@ $card-font-color: $default-font-color !default;
 $card-action-btn-icon-color: $default-font-color !default;
 
 /*! component's theme wise override material-definitions and variables */
-$skin-name: 'material' !default;
 $card-img-brdr-radious: 50% !default;
 $card-brdr-radious: 2px !default;
 $card-action-btn-txt-transform: uppercase !default;

package/styles/card/_material-definition.scss

@@ -1,5 +1,4 @@
 /*! component's theme wise override material-definitions and variables */
-$skin-name: 'material' !default;
 $card-img-brdr-radious: 50% !default;
 $card-brdr-radious: 2px !default;
 $card-action-btn-txt-transform: uppercase !default;

package/styles/card/_tailwind-definition.scss

@@ -1,5 +1,3 @@
-$skin-name: 'tailwind' !default;
-
 //Layout Variables Start
 $card-img-brdr-radious: 50% !default;
 $card-brdr-radious: 6px !default;

package/styles/card/_theme.scss

@@ -5,7 +5,7 @@
 
   .e-card {
     -webkit-tap-highlight-color: $card-highlight-color;
-    background-color: $card-bg-color;
+    background: $card-bg-color;
     border: $card-brdr-size $card-brdr-type $card-brdr-color;
     box-shadow: $card-box-shadow;
     color: $card-font-color;

package/styles/card/bootstrap-dark.css

@@ -430,6 +430,7 @@
   font-size: 14px;
   line-height: normal;
   padding: 16px;
+  word-wrap: break-word;
 }
 .e-card .e-card-content + :not(.e-card-content),
 .e-card .e-card-content + .e-card-actions.e-card-vertical {
@@ -447,7 +448,7 @@
 /* stylelint-disable property-no-vendor-prefix */
 .e-card {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  background-color: #6e6e6e;
+  background: #6e6e6e;
   border: 1px solid #1a1a1a;
   box-shadow: none;
   color: #fff;

package/styles/card/bootstrap.css

@@ -431,6 +431,7 @@
   font-size: 14px;
   line-height: normal;
   padding: 12px;
+  word-wrap: break-word;
 }
 .e-card .e-card-content + :not(.e-card-content),
 .e-card .e-card-content + .e-card-actions.e-card-vertical {
@@ -448,7 +449,7 @@
 /* stylelint-disable property-no-vendor-prefix */
 .e-card {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  background-color: #fff;
+  background: #fff;
   border: 1px solid #ddd;
   box-shadow: none;
   color: #333;

package/styles/card/bootstrap4.css

@@ -436,6 +436,7 @@
   font-size: 14px;
   line-height: normal;
   padding: 16px;
+  word-wrap: break-word;
 }
 .e-card .e-card-content + :not(.e-card-content),
 .e-card .e-card-content + .e-card-actions.e-card-vertical {
@@ -453,7 +454,7 @@
 /* stylelint-disable property-no-vendor-prefix */
 .e-card {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  background-color: #fff;
+  background: #fff;
   border: 1px solid rgba(0, 0, 0, 0.12);
   box-shadow: none;
   color: #212529;

package/styles/card/bootstrap5-dark.css

@@ -430,6 +430,7 @@
   font-size: 14px;
   line-height: 1.5;
   padding: 12px;
+  word-wrap: break-word;
 }
 .e-card .e-card-content + :not(.e-card-content),
 .e-card .e-card-content + .e-card-actions.e-card-vertical {
@@ -447,7 +448,7 @@
 /* stylelint-disable property-no-vendor-prefix */
 .e-card {
   -webkit-tap-highlight-color: #0d6efd;
-  background-color: #212529;
+  background: #212529;
   border: 1px solid #444c54;
   box-shadow: none;
   color: #fff;