@syncfusion/ej2-layouts 19.4.52 → 20.1.58

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 19.4.52
+*  version : 20.1.58
 *  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@19.4.48",
+  "_id": "@syncfusion/ej2-layouts@20.1.55",
   "_inBundle": false,
-  "_integrity": "sha512-wzxIalP5bcx4wLMyQVZGqC8x3Xas0l2+bSTbQu8shS+M11d9Vem9D/CefoEGTUNfJEkBqvVftMptYmCNxHarvA==",
+  "_integrity": "sha512-Op2XpXOOSyULgrsuwDXCu2E4LRmCoeqxMQzMCMbl4oQ6M+7mMYbUnRzL37pK820w1oWIfjyJ/zvadcIusQF+HQ==",
   "_location": "/@syncfusion/ej2-layouts",
   "_phantomChildren": {},
   "_requested": {
@@ -27,8 +27,8 @@
     "/@syncfusion/ej2-react-layouts",
     "/@syncfusion/ej2-vue-layouts"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-layouts/-/ej2-layouts-19.4.48.tgz",
-  "_shasum": "af95de585a1a293b4709c99026a27748ab32fbed",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-layouts/-/ej2-layouts-20.1.55.tgz",
+  "_shasum": "2cc4380fbb340870830e1effed1ebc4b17953360",
   "_spec": "@syncfusion/ej2-layouts@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -36,7 +36,7 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~19.4.52"
+    "@syncfusion/ej2-base": "~20.1.57"
   },
   "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,6 +76,6 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/layouts"
   },
   "typings": "index.d.ts",
-  "version": "19.4.52",
+  "version": "20.1.58",
   "sideEffects": false
 }

package/src/splitter/splitter.js

@@ -1063,7 +1063,7 @@ var Splitter = /** @class */ (function (_super) {
                         paneMinRange = this.convertPercentageToPixel(this.paneSettings[i].min);
                     }
                     minValue = this.convertPixelToNumber((paneMinRange).toString());
-                    if (this.allPanes[i].offsetWidth < minValue) {
+                    if ((this.orientation === 'Horizontal' ? this.allPanes[i].offsetWidth : this.allPanes[i].offsetHeight) < minValue) {
                         if (i === paneIndex) {
                             updatePane = this.allPanes[i];
                             flexPane = this.allPanes[i + 1];
@@ -1072,12 +1072,15 @@ var Splitter = /** @class */ (function (_super) {
                             updatePane = this.allPanes[i];
                             flexPane = this.allPanes[i - 1];
                         }
-                        var sizeDiff = minValue - this.allPanes[i].offsetWidth;
+                        var sizeDiff = minValue - (this.orientation === 'Horizontal' ?
+                            this.allPanes[i].offsetWidth : this.allPanes[i].offsetHeight);
                         var isPercent = updatePane.style.flexBasis.indexOf('%') > -1;
-                        updatePane.style.flexBasis = isPercent ? this.convertPixelToPercentage(updatePane.offsetWidth + sizeDiff) + '%'
-                            : (updatePane.offsetWidth + sizeDiff) + 'px';
+                        var updatePaneOffset = this.orientation === 'Horizontal' ? updatePane.offsetWidth : updatePane.offsetHeight;
+                        updatePane.style.flexBasis = isPercent ? this.convertPixelToPercentage(updatePaneOffset + sizeDiff) + '%'
+                            : (updatePaneOffset + sizeDiff) + 'px';
+                        var flexPaneOffset = this.orientation === 'Horizontal' ? flexPane.offsetWidth : flexPane.offsetHeight;
                         flexPane.style.flexBasis = flexPane.style.flexBasis.indexOf('%') > -1 ?
-                            this.convertPixelToPercentage(flexPane.offsetWidth - sizeDiff) + '%' : (flexPane.offsetWidth - sizeDiff) + 'px';
+                            this.convertPixelToPercentage(flexPaneOffset - sizeDiff) + '%' : (flexPaneOffset - sizeDiff) + 'px';
                     }
                 }
             }
@@ -1202,22 +1205,20 @@ var Splitter = /** @class */ (function (_super) {
         var visiblePane = collapseCount === this.allPanes.length - 2;
         var panes = this.allPanes;
         for (var i = 0; i < panes.length; i++) {
-            if (panes[i].classList.contains(EXPAND_PANE)) {
-                panes[i].style.flexGrow = '1';
-            }
-            else if (panes[i].classList.contains(COLLAPSE_PANE)) {
-                panes[i].style.flexGrow = '0';
-            }
-            else {
-                panes[i].style.flexGrow = '';
-            }
+            panes[i].style.flexGrow = '';
             if (status && !this.nextPane.classList.contains(COLLAPSE_PANE)) {
                 this.nextPane.style.flexGrow = '1';
             }
-            if (visiblePane && !this.allPanes[i].classList.contains(COLLAPSE_PANE) && this.paneSettings[i].size &&
+            if (visiblePane && this.allPanes[i].classList.contains(COLLAPSE_PANE) && this.paneSettings[i].size &&
                 i !== this.allPanes.length - 1) {
                 panes[i].style.flexGrow = '';
             }
+            if (panes[i].classList.contains(EXPAND_PANE)) {
+                panes[i].style.flexGrow = '1';
+            }
+            else if (panes[i].classList.contains(COLLAPSE_PANE)) {
+                panes[i].style.flexGrow = '0';
+            }
         }
     };
     Splitter.prototype.hideTargetBarIcon = function (targetBar, targetArrow) {
@@ -1871,7 +1872,7 @@ var Splitter = /** @class */ (function (_super) {
         }
     };
     Splitter.prototype.validateDraggedPosition = function (draggedPos, prevPaneHeightWidth, nextPaneHeightWidth) {
-        var separatorTopLeft = (this.orientation === 'Horizontal') ? this.currentSeparator.offsetLeft + window.scrollX :
+        var separatorTopLeft = (this.orientation === 'Horizontal') ? this.currentSeparator.offsetLeft :
             this.currentSeparator.offsetTop;
         var prePaneRange = separatorTopLeft - prevPaneHeightWidth;
         var nextPaneRange = nextPaneHeightWidth + separatorTopLeft;

package/styles/avatar/_bootstrap5-definition.scss

@@ -17,6 +17,7 @@ $avatar-xsmall-font-size: $text-xxs !default;
 $avatar-small-font-size: $text-xs !default;
 $avatar-large-font-size: $text-lg !default;
 $avatar-xlarge-font-size: $text-xl !default;
+$avatar-large-border-radius: 4px !default;
 
 // Avatar Line Height
 $avatar-base-xsmall-line-height: 16px !default;

package/styles/avatar/_fluent-dark-definition.scss

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

package/styles/avatar/_layout.scss

@@ -50,6 +50,9 @@
 
     &.e-avatar-large {
       font-size: $avatar-large-font-size;
+      @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') {
         height: 48px;
         line-height: $avatar-base-large-line-height;
@@ -59,6 +62,9 @@
 
     &.e-avatar-xlarge {
       font-size: $avatar-xlarge-font-size;
+      @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') {
         height: 56px;
         line-height: $avatar-base-xlarge-line-height;

package/styles/avatar/bootstrap-dark.css

@@ -21,28 +21,22 @@
   position: relative;
   width: 3em;
 }
-
 .e-avatar img {
   height: 100%;
   width: auto;
 }
-
 .e-avatar.e-avatar-circle {
   border-radius: 50%;
 }
-
 .e-avatar.e-avatar-xsmall {
   font-size: 0.6em;
 }
-
 .e-avatar.e-avatar-small {
   font-size: 0.8em;
 }
-
 .e-avatar.e-avatar-large {
   font-size: 1.2em;
 }
-
 .e-avatar.e-avatar-xlarge {
   font-size: 1.4em;
-}
+}

package/styles/avatar/bootstrap.css

@@ -21,28 +21,22 @@
   position: relative;
   width: 3em;
 }
-
 .e-avatar img {
   height: 100%;
   width: auto;
 }
-
 .e-avatar.e-avatar-circle {
   border-radius: 50%;
 }
-
 .e-avatar.e-avatar-xsmall {
   font-size: 0.6em;
 }
-
 .e-avatar.e-avatar-small {
   font-size: 0.8em;
 }
-
 .e-avatar.e-avatar-large {
   font-size: 1.2em;
 }
-
 .e-avatar.e-avatar-xlarge {
   font-size: 1.4em;
-}
+}

package/styles/avatar/bootstrap4.css

@@ -21,28 +21,22 @@
   position: relative;
   width: 2.5em;
 }
-
 .e-avatar img {
   height: 100%;
   width: auto;
 }
-
 .e-avatar.e-avatar-circle {
   border-radius: 50%;
 }
-
 .e-avatar.e-avatar-xsmall {
   font-size: 0.65em;
 }
-
 .e-avatar.e-avatar-small {
   font-size: 0.85em;
 }
-
 .e-avatar.e-avatar-large {
   font-size: 1.25em;
 }
-
 .e-avatar.e-avatar-xlarge {
   font-size: 1.45em;
-}
+}

package/styles/avatar/bootstrap5-dark.css

@@ -22,40 +22,36 @@
   width: 40px;
   line-height: 22px;
 }
-
 .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: 18px;
+  border-radius: 4px;
   height: 48px;
   line-height: 28px;
   width: 48px;
 }
-
 .e-avatar.e-avatar-xlarge {
   font-size: 20px;
+  border-radius: 4px;
   height: 56px;
   line-height: 28px;
   width: 56px;
-}
+}

package/styles/avatar/bootstrap5.css

@@ -22,40 +22,36 @@
   width: 40px;
   line-height: 22px;
 }
-
 .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: 18px;
+  border-radius: 4px;
   height: 48px;
   line-height: 28px;
   width: 48px;
 }
-
 .e-avatar.e-avatar-xlarge {
   font-size: 20px;
+  border-radius: 4px;
   height: 56px;
   line-height: 28px;
   width: 56px;
-}
+}

package/styles/avatar/fabric-dark.css

@@ -21,28 +21,22 @@
   position: relative;
   width: 3em;
 }
-
 .e-avatar img {
   height: 100%;
   width: auto;
 }
-
 .e-avatar.e-avatar-circle {
   border-radius: 50%;
 }
-
 .e-avatar.e-avatar-xsmall {
   font-size: 0.6em;
 }
-
 .e-avatar.e-avatar-small {
   font-size: 0.8em;
 }
-
 .e-avatar.e-avatar-large {
   font-size: 1.2em;
 }
-
 .e-avatar.e-avatar-xlarge {
   font-size: 1.4em;
-}
+}

package/styles/avatar/fabric.css

@@ -21,28 +21,22 @@
   position: relative;
   width: 3em;
 }
-
 .e-avatar img {
   height: 100%;
   width: auto;
 }
-
 .e-avatar.e-avatar-circle {
   border-radius: 50%;
 }
-
 .e-avatar.e-avatar-xsmall {
   font-size: 0.6em;
 }
-
 .e-avatar.e-avatar-small {
   font-size: 0.8em;
 }
-
 .e-avatar.e-avatar-large {
   font-size: 1.2em;
 }
-
 .e-avatar.e-avatar-xlarge {
   font-size: 1.4em;
-}
+}

package/styles/avatar/fluent-dark.css

@@ -0,0 +1,55 @@
+.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,3 @@
+@import 'ej2-base/styles/fluent-dark-definition.scss';
+@import 'fluent-dark-definition.scss';
+@import 'all.scss';

package/styles/avatar/fluent.css

@@ -0,0 +1,55 @@
+.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,3 @@
+@import 'ej2-base/styles/fluent-definition.scss';
+@import 'fluent-definition.scss';
+@import 'all.scss';

package/styles/avatar/highcontrast-light.css

@@ -21,28 +21,22 @@
   position: relative;
   width: 3em;
 }
-
 .e-avatar img {
   height: 100%;
   width: auto;
 }
-
 .e-avatar.e-avatar-circle {
   border-radius: 50%;
 }
-
 .e-avatar.e-avatar-xsmall {
   font-size: 0.6em;
 }
-
 .e-avatar.e-avatar-small {
   font-size: 0.8em;
 }
-
 .e-avatar.e-avatar-large {
   font-size: 1.2em;
 }
-
 .e-avatar.e-avatar-xlarge {
   font-size: 1.4em;
-}
+}

package/styles/avatar/highcontrast.css

@@ -21,28 +21,22 @@
   position: relative;
   width: 3em;
 }
-
 .e-avatar img {
   height: 100%;
   width: auto;
 }
-
 .e-avatar.e-avatar-circle {
   border-radius: 50%;
 }
-
 .e-avatar.e-avatar-xsmall {
   font-size: 0.6em;
 }
-
 .e-avatar.e-avatar-small {
   font-size: 0.8em;
 }
-
 .e-avatar.e-avatar-large {
   font-size: 1.2em;
 }
-
 .e-avatar.e-avatar-xlarge {
   font-size: 1.4em;
-}
+}

package/styles/avatar/material-dark.css

@@ -22,28 +22,22 @@
   position: relative;
   width: 3em;
 }
-
 .e-avatar img {
   height: 100%;
   width: auto;
 }
-
 .e-avatar.e-avatar-circle {
   border-radius: 50%;
 }
-
 .e-avatar.e-avatar-xsmall {
   font-size: 0.6em;
 }
-
 .e-avatar.e-avatar-small {
   font-size: 0.8em;
 }
-
 .e-avatar.e-avatar-large {
   font-size: 1.2em;
 }
-
 .e-avatar.e-avatar-xlarge {
   font-size: 1.4em;
-}
+}

package/styles/avatar/material.css

@@ -22,28 +22,22 @@
   position: relative;
   width: 3em;
 }
-
 .e-avatar img {
   height: 100%;
   width: auto;
 }
-
 .e-avatar.e-avatar-circle {
   border-radius: 50%;
 }
-
 .e-avatar.e-avatar-xsmall {
   font-size: 0.6em;
 }
-
 .e-avatar.e-avatar-small {
   font-size: 0.8em;
 }
-
 .e-avatar.e-avatar-large {
   font-size: 1.2em;
 }
-
 .e-avatar.e-avatar-xlarge {
   font-size: 1.4em;
-}
+}

package/styles/avatar/tailwind-dark.css

@@ -23,40 +23,34 @@
   width: 40px;
   line-height: 22px;
 }
-
 .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: 18px;
   height: 48px;
   line-height: 28px;
   width: 48px;
 }
-
 .e-avatar.e-avatar-xlarge {
   font-size: 20px;
   height: 56px;
   line-height: 28px;
   width: 56px;
-}
+}