@syncfusion/ej2-react-layouts 19.4.47 → 20.1.47

package/CHANGELOG.md

@@ -2,20 +2,6 @@
 
 ## [Unreleased]
 
-### Dashboard Layout
-
-#### Bug Fixes
-
-- `#SF-361218` - The issue with "The Dashboard Layout with nested panels throws a script error on page resizing" has been resolved.
-
-## 19.4.43 (2022-01-18)
-
-### Splitter
-
-#### Bug Fixes
-
-- `#I360945` - Now, the splitter works properly when the target element is passed as a variable in the Splitter constructor.
-
 ## 19.3.43 (2021-09-30)
 
 ### Splitter

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

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-react-layouts.umd.min.js
-*  version : 19.4.47
+*  version : 20.1.47
 *  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-react-layouts@*",
-  "_id": "@syncfusion/ej2-react-layouts@19.4.43",
+  "_id": "@syncfusion/ej2-react-layouts@19.6.9",
   "_inBundle": false,
-  "_integrity": "sha512-bmbiUnFCmDrUDuqTndydlEEbZ/jojLqdOLfXjdGZhdjxBX9WZTe6xciVrCtOpvb3DatLcQwb8Z2cfqZUIQCnhw==",
+  "_integrity": "sha512-EKgnfjh2RRZZarTh0fcBhtYtwJWThZjIGBedOQEsAUKHzTRYn7M+E+lfEB1ipXiAvH+rqJrf9TpQPjg2Q/BNnA==",
   "_location": "/@syncfusion/ej2-react-layouts",
   "_phantomChildren": {},
   "_requested": {
@@ -19,8 +19,8 @@
   "_requiredBy": [
     "/"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-react-layouts/-/ej2-react-layouts-19.4.43.tgz",
-  "_shasum": "bf4a777523a99c59e5b26c47c9d3c87ae9ad8f13",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-react-layouts/-/ej2-react-layouts-19.6.9.tgz",
+  "_shasum": "78f55430db4604c0eae573ada99efaf96c22e1d4",
   "_spec": "@syncfusion/ej2-react-layouts@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -31,9 +31,9 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~19.4.42",
-    "@syncfusion/ej2-layouts": "19.4.47",
-    "@syncfusion/ej2-react-base": "~19.4.47"
+    "@syncfusion/ej2-base": "~20.1.47",
+    "@syncfusion/ej2-layouts": "20.1.47",
+    "@syncfusion/ej2-react-base": "~20.1.47"
   },
   "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. for React",
@@ -65,6 +65,6 @@
     "type": "git",
     "url": "git+https://github.com/syncfusion/ej2-react-ui-components.git"
   },
-  "version": "19.4.47",
+  "version": "20.1.47",
   "sideEffects": false
 }

package/styles/avatar/bootstrap5-dark.css

@@ -48,6 +48,7 @@
 
 .e-avatar.e-avatar-large {
   font-size: 18px;
+  border-radius: 4px;
   height: 48px;
   line-height: 28px;
   width: 48px;
@@ -55,6 +56,7 @@
 
 .e-avatar.e-avatar-xlarge {
   font-size: 20px;
+  border-radius: 4px;
   height: 56px;
   line-height: 28px;
   width: 56px;

package/styles/avatar/bootstrap5.css

@@ -48,6 +48,7 @@
 
 .e-avatar.e-avatar-large {
   font-size: 18px;
+  border-radius: 4px;
   height: 48px;
   line-height: 28px;
   width: 48px;
@@ -55,6 +56,7 @@
 
 .e-avatar.e-avatar-xlarge {
   font-size: 20px;
+  border-radius: 4px;
   height: 56px;
   line-height: 28px;
   width: 56px;

package/styles/avatar/fluent-dark.css

@@ -0,0 +1,61 @@
+.e-avatar {
+  -ms-flex-line-pack: center;
+      align-content: center;
+  -ms-flex-align: center;
+      align-items: center;
+  background-color: #292827;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: 4px;
+  color: #a19f9d;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  height: 40px;
+  -ms-flex-pack: center;
+      justify-content: center;
+  overflow: hidden;
+  position: relative;
+  width: 40px;
+  line-height: 24px;
+}
+
+.e-avatar img {
+  height: 100%;
+  width: auto;
+}
+
+.e-avatar.e-avatar-circle {
+  border-radius: 50%;
+}
+
+.e-avatar.e-avatar-xsmall {
+  font-size: 10px;
+  height: 24px;
+  line-height: 16px;
+  width: 24px;
+}
+
+.e-avatar.e-avatar-small {
+  font-size: 12px;
+  height: 32px;
+  line-height: 18px;
+  width: 32px;
+}
+
+.e-avatar.e-avatar-large {
+  font-size: 20px;
+  height: 48px;
+  line-height: 28px;
+  width: 48px;
+}
+
+.e-avatar.e-avatar-xlarge {
+  font-size: 24px;
+  height: 56px;
+  line-height: 28px;
+  width: 56px;
+}

package/styles/avatar/fluent-dark.scss

@@ -0,0 +1 @@
+@import 'ej2-layouts/styles/avatar/fluent-dark.scss';

package/styles/avatar/fluent.css

@@ -0,0 +1,61 @@
+.e-avatar {
+  -ms-flex-line-pack: center;
+      align-content: center;
+  -ms-flex-align: center;
+      align-items: center;
+  background-color: #edebe9;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: 4px;
+  color: #605e5c;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  height: 40px;
+  -ms-flex-pack: center;
+      justify-content: center;
+  overflow: hidden;
+  position: relative;
+  width: 40px;
+  line-height: 24px;
+}
+
+.e-avatar img {
+  height: 100%;
+  width: auto;
+}
+
+.e-avatar.e-avatar-circle {
+  border-radius: 50%;
+}
+
+.e-avatar.e-avatar-xsmall {
+  font-size: 10px;
+  height: 24px;
+  line-height: 16px;
+  width: 24px;
+}
+
+.e-avatar.e-avatar-small {
+  font-size: 12px;
+  height: 32px;
+  line-height: 18px;
+  width: 32px;
+}
+
+.e-avatar.e-avatar-large {
+  font-size: 20px;
+  height: 48px;
+  line-height: 28px;
+  width: 48px;
+}
+
+.e-avatar.e-avatar-xlarge {
+  font-size: 24px;
+  height: 56px;
+  line-height: 28px;
+  width: 56px;
+}

package/styles/avatar/fluent.scss

@@ -0,0 +1 @@
+@import 'ej2-layouts/styles/avatar/fluent.scss';

package/styles/bootstrap-dark.css

@@ -762,7 +762,7 @@
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   right: 22px;
 }
 
@@ -770,7 +770,7 @@
   border-radius: 50%;
   left: 22px;
   right: auto;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
@@ -980,14 +980,14 @@
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   left: 22px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down {
   border-radius: 50%;
   right: 22px;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::before, .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {

package/styles/bootstrap.css

@@ -763,7 +763,7 @@
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   right: 22px;
 }
 
@@ -771,7 +771,7 @@
   border-radius: 50%;
   left: 22px;
   right: auto;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
@@ -981,14 +981,14 @@
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   left: 22px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down {
   border-radius: 50%;
   right: 22px;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::before, .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {

package/styles/bootstrap4.css

@@ -769,7 +769,7 @@
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   right: 22px;
 }
 
@@ -777,7 +777,7 @@
   border-radius: 50%;
   left: 22px;
   right: auto;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
@@ -987,14 +987,14 @@
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   left: 22px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down {
   border-radius: 50%;
   right: 22px;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::before, .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {

package/styles/bootstrap5-dark.css

@@ -48,6 +48,7 @@
 
 .e-avatar.e-avatar-large {
   font-size: 18px;
+  border-radius: 4px;
   height: 48px;
   line-height: 28px;
   width: 48px;
@@ -55,6 +56,7 @@
 
 .e-avatar.e-avatar-xlarge {
   font-size: 20px;
+  border-radius: 4px;
   height: 56px;
   line-height: 28px;
   width: 56px;
@@ -106,6 +108,7 @@
 .e-bigger.e-card .e-card-header {
   min-height: 30px;
   padding: 16px;
+  padding-bottom: 0;
 }
 
 .e-bigger .e-card .e-card-header .e-card-content,
@@ -159,7 +162,7 @@
 
 .e-bigger .e-card .e-card-actions,
 .e-bigger.e-card .e-card-actions {
-  padding: 16px 20px;
+  padding: 16px;
 }
 
 .e-bigger .e-card .e-card-actions.e-card-vertical,
@@ -357,6 +360,7 @@
   min-height: 22.5px;
   padding: 12px;
   width: inherit;
+  padding-bottom: 0;
 }
 
 .e-card .e-card-header .e-card-content {
@@ -463,7 +467,7 @@
   display: inline-block;
   -ms-flex-pack: start;
       justify-content: flex-start;
-  padding: 16px 20px;
+  padding: 12px;
 }
 
 .e-card .e-card-actions.e-card-vertical {
@@ -578,7 +582,7 @@
 .e-card {
   -webkit-tap-highlight-color: #0d6efd;
   background-color: #212529;
-  border: 1px solid #ced4da;
+  border: 1px solid #444c54;
   box-shadow: none;
   color: #fff;
   outline: none;
@@ -764,7 +768,7 @@
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   right: 22px;
 }
 
@@ -772,7 +776,7 @@
   border-radius: 50%;
   left: 22px;
   right: auto;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
@@ -982,14 +986,14 @@
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   left: 22px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down {
   border-radius: 50%;
   right: 22px;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::before, .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
@@ -1111,7 +1115,7 @@
 }
 
 .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-navigate-arrow.e-arrow-left, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-navigate-arrow.e-arrow-right, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-navigate-arrow.e-arrow-left, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-navigate-arrow.e-arrow-right {
-  background-color: #fff;
+  background-color: transparent;
   border-color: #0d6efd;
   border-width: 1px;
   opacity: .9;
@@ -1166,7 +1170,7 @@
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-navigate-arrow.e-arrow-up, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-navigate-arrow.e-arrow-down, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-navigate-arrow.e-arrow-up, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-navigate-arrow.e-arrow-down {
-  background-color: #fff;
+  background-color: transparent;
   border-color: #0d6efd;
   border-width: 1px;
   opacity: .9;
@@ -1360,7 +1364,7 @@
 }
 
 .e-dashboardlayout.e-control .e-panel .e-panel-header {
-  border-bottom: none;
+  border-bottom: 1px solid #444c54;
   color: #fff;
   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";
   font-size: 14px;

package/styles/bootstrap5.css

@@ -48,6 +48,7 @@
 
 .e-avatar.e-avatar-large {
   font-size: 18px;
+  border-radius: 4px;
   height: 48px;
   line-height: 28px;
   width: 48px;
@@ -55,6 +56,7 @@
 
 .e-avatar.e-avatar-xlarge {
   font-size: 20px;
+  border-radius: 4px;
   height: 56px;
   line-height: 28px;
   width: 56px;
@@ -106,6 +108,7 @@
 .e-bigger.e-card .e-card-header {
   min-height: 30px;
   padding: 16px;
+  padding-bottom: 0;
 }
 
 .e-bigger .e-card .e-card-header .e-card-content,
@@ -159,7 +162,7 @@
 
 .e-bigger .e-card .e-card-actions,
 .e-bigger.e-card .e-card-actions {
-  padding: 16px 20px;
+  padding: 16px;
 }
 
 .e-bigger .e-card .e-card-actions.e-card-vertical,
@@ -357,6 +360,7 @@
   min-height: 22.5px;
   padding: 12px;
   width: inherit;
+  padding-bottom: 0;
 }
 
 .e-card .e-card-header .e-card-content {
@@ -463,7 +467,7 @@
   display: inline-block;
   -ms-flex-pack: start;
       justify-content: flex-start;
-  padding: 16px 20px;
+  padding: 12px;
 }
 
 .e-card .e-card-actions.e-card-vertical {
@@ -578,7 +582,7 @@
 .e-card {
   -webkit-tap-highlight-color: #0d6efd;
   background-color: #fff;
-  border: 1px solid #ced4da;
+  border: 1px solid #dee2e6;
   box-shadow: none;
   color: #212529;
   outline: none;
@@ -764,7 +768,7 @@
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   right: 22px;
 }
 
@@ -772,7 +776,7 @@
   border-radius: 50%;
   left: 22px;
   right: auto;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
@@ -982,14 +986,14 @@
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   left: 22px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down {
   border-radius: 50%;
   right: 22px;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::before, .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
@@ -1111,7 +1115,7 @@
 }
 
 .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-navigate-arrow.e-arrow-left, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-navigate-arrow.e-arrow-right, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-navigate-arrow.e-arrow-left, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-navigate-arrow.e-arrow-right {
-  background-color: #fff;
+  background-color: transparent;
   border-color: #0d6efd;
   border-width: 1px;
   opacity: .9;
@@ -1166,7 +1170,7 @@
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-navigate-arrow.e-arrow-up, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-navigate-arrow.e-arrow-down, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-navigate-arrow.e-arrow-up, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-navigate-arrow.e-arrow-down {
-  background-color: #fff;
+  background-color: transparent;
   border-color: #0d6efd;
   border-width: 1px;
   opacity: .9;
@@ -1360,7 +1364,7 @@
 }
 
 .e-dashboardlayout.e-control .e-panel .e-panel-header {
-  border-bottom: none;
+  border-bottom: 1px solid #dee2e6;
   color: #212529;
   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";
   font-size: 14px;

package/styles/card/bootstrap5-dark.css

@@ -44,6 +44,7 @@
 .e-bigger.e-card .e-card-header {
   min-height: 30px;
   padding: 16px;
+  padding-bottom: 0;
 }
 
 .e-bigger .e-card .e-card-header .e-card-content,
@@ -97,7 +98,7 @@
 
 .e-bigger .e-card .e-card-actions,
 .e-bigger.e-card .e-card-actions {
-  padding: 16px 20px;
+  padding: 16px;
 }
 
 .e-bigger .e-card .e-card-actions.e-card-vertical,
@@ -295,6 +296,7 @@
   min-height: 22.5px;
   padding: 12px;
   width: inherit;
+  padding-bottom: 0;
 }
 
 .e-card .e-card-header .e-card-content {
@@ -401,7 +403,7 @@
   display: inline-block;
   -ms-flex-pack: start;
       justify-content: flex-start;
-  padding: 16px 20px;
+  padding: 12px;
 }
 
 .e-card .e-card-actions.e-card-vertical {
@@ -516,7 +518,7 @@
 .e-card {
   -webkit-tap-highlight-color: #0d6efd;
   background-color: #212529;
-  border: 1px solid #ced4da;
+  border: 1px solid #444c54;
   box-shadow: none;
   color: #fff;
   outline: none;

package/styles/card/bootstrap5.css

@@ -44,6 +44,7 @@
 .e-bigger.e-card .e-card-header {
   min-height: 30px;
   padding: 16px;
+  padding-bottom: 0;
 }
 
 .e-bigger .e-card .e-card-header .e-card-content,
@@ -97,7 +98,7 @@
 
 .e-bigger .e-card .e-card-actions,
 .e-bigger.e-card .e-card-actions {
-  padding: 16px 20px;
+  padding: 16px;
 }
 
 .e-bigger .e-card .e-card-actions.e-card-vertical,
@@ -295,6 +296,7 @@
   min-height: 22.5px;
   padding: 12px;
   width: inherit;
+  padding-bottom: 0;
 }
 
 .e-card .e-card-header .e-card-content {
@@ -401,7 +403,7 @@
   display: inline-block;
   -ms-flex-pack: start;
       justify-content: flex-start;
-  padding: 16px 20px;
+  padding: 12px;
 }
 
 .e-card .e-card-actions.e-card-vertical {
@@ -516,7 +518,7 @@
 .e-card {
   -webkit-tap-highlight-color: #0d6efd;
   background-color: #fff;
-  border: 1px solid #ced4da;
+  border: 1px solid #dee2e6;
   box-shadow: none;
   color: #212529;
   outline: none;