@syncfusion/ej2-layouts 27.2.2 → 28.1.33

package/dist/global/index.d.ts

@@ -1,7 +1,7 @@
 /*!
 *  filename: index.d.ts
-*  version : 27.2.2
-*  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
+*  version : 28.1.33
+*  Copyright Syncfusion Inc. 2001 - 2024. 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
 *  licensing@syncfusion.com. Any infringement will be prosecuted under

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-layouts@*",
-  "_id": "@syncfusion/ej2-layouts@27.1.56",
+  "_id": "@syncfusion/ej2-layouts@21.4.6",
   "_inBundle": false,
-  "_integrity": "sha512-sszrBhUu9tu0iOjPsal6RQJLd5f0Y+1xa+PjiUFSRqHLOeqpOo7dBMANT1X1jy1U6udu27y0pNLJ4L3ll9TIMg==",
+  "_integrity": "sha512-92StvO4fbRN6YGb4IgUyal1wHizH99XJ0dhLLZzVr+d/X0VpBPE2xuwK1IZ7n42WjaHZCic3hCVOQRMJ+a6HJQ==",
   "_location": "/@syncfusion/ej2-layouts",
   "_phantomChildren": {},
   "_requested": {
@@ -26,16 +26,16 @@
     "/@syncfusion/ej2-react-layouts",
     "/@syncfusion/ej2-vue-layouts"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-layouts/-/ej2-layouts-27.1.56.tgz",
-  "_shasum": "1b3f78a572ea7341798f70c496ffdce823d34777",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-release/@syncfusion/ej2-layouts/-/ej2-layouts-21.4.6.tgz",
+  "_shasum": "49561da959d8e856a733b0aee27efda61bd976b2",
   "_spec": "@syncfusion/ej2-layouts@*",
-  "_where": "/jenkins/workspace/elease-automation_release_27.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_28.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~27.2.2"
+    "@syncfusion/ej2-base": "~28.1.33"
   },
   "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.",
@@ -75,7 +75,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/layouts"
   },
   "typings": "index.d.ts",
-  "version": "27.2.2",
+  "version": "28.1.33",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/splitter/splitter.js

@@ -2227,7 +2227,6 @@ var Splitter = /** @class */ (function (_super) {
             while (this.element.attributes.length > 0) {
                 this.element.removeAttribute(this.element.attributes[0].name);
             }
-            this.element.innerHTML = this.wrapper.innerHTML;
             for (var i = 0; i < this.wrapper.attributes.length; i++) {
                 this.element.setAttribute(this.wrapper.attributes[i].name, this.wrapper.attributes[i].value);
             }
@@ -2241,11 +2240,36 @@ var Splitter = /** @class */ (function (_super) {
             if (this.isReact) {
                 this.clearTemplate();
             }
+            var separators = this.element.querySelectorAll('.e-split-bar');
+            if (separators.length > 0) {
+                for (var i = 0; i < separators.length; i++) {
+                    EventHandler.remove(separators[i], 'touchstart', this.clickHandler);
+                    EventHandler.remove(separators[i], 'touchstart', this.onMouseDown);
+                    EventHandler.remove(separators[i], 'click', this.clickHandler);
+                    EventHandler.remove(separators[i], 'mousedown', this.onMouseDown);
+                    separators[i].parentNode.removeChild(separators[i]); // Use parentNode for broader compatibility
+                }
+            }
+            var panes = this.element.querySelectorAll('.e-pane');
+            if (panes.length > 0) {
+                for (var i = 0; i < panes.length; i++) {
+                    panes[i].classList.remove(SPLIT_H_PANE, SPLIT_V_PANE, STATIC_PANE, SCROLL_PANE, PANE, RESIZABLE_PANE, HIDE_HANDLER, COLLAPSIBLE, EXPAND_PANE, PANE_HIDDEN);
+                    while (panes[i].attributes.length > 0) {
+                        panes[i].removeAttribute(panes[i].attributes[0].name);
+                    }
+                }
+            }
             this.allBars = [];
+            this.allBars = null;
             this.allPanes = [];
+            this.allPanes = null;
             this.previousPane = null;
             this.nextPane = null;
             this.currentSeparator = null;
+            this.wrapper = null;
+            this.prevBar = null;
+            this.nextBar = null;
+            this.templateElement = null;
         }
     };
     Splitter.prototype.restoreElem = function () {

package/styles/avatar/_layout.scss

@@ -23,7 +23,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' or $skin-name == 'Material3') {
+    @if ($skin-name == 'tailwind3' or $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;
     }
 
@@ -48,21 +48,21 @@
 
     &.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 == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
+      @if ($skin-name == 'tailwind3' or $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
         @include avatar-size(24px, 24px, $avatar-base-xsmall-line-height);
       }
     }
 
     &.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 == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
+      @if ($skin-name == 'tailwind3' or $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
         @include avatar-size(32px, 32px, $avatar-base-small-line-height);
       }
     }
 
     &.e-avatar-large {
       font-size: $avatar-large-font-size;
-      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
+      @if ($skin-name == 'tailwind3' or $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
         @include avatar-size(48px, 48px, $avatar-base-large-line-height);
       }
       @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
@@ -72,7 +72,7 @@
 
     &.e-avatar-xlarge {
       font-size: $avatar-xlarge-font-size;
-      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
+      @if ($skin-name == 'tailwind3' or $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
         @include avatar-size(56px, 56px, $avatar-base-xlarge-line-height);
       }
       @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {

package/styles/avatar/_tailwind3-definition.scss

@@ -0,0 +1,26 @@
+// Avatar Base
+$avatar-base-border-radius: 6px !default;
+$avatar-base-background-color: $content-bg-color-alt2 !default;
+$avatar-base-font-size: $text-2xl !default;
+$avatar-base-width: 40px !default;
+$avatar-base-height: 40px !default;
+$avatar-base-line-height: 24px !default;
+$avatar-base-text-color: $icon-color !default;
+$avatar-base-font-weight: $font-weight-normal !default;
+$avatar-base-img-height: 100% !default;
+
+// Circle Avatar
+$avatar-circle-border-radius: 50% !default;
+
+// Avatar size
+$avatar-xsmall-font-size: $text-base !default;
+$avatar-small-font-size: $text-lg !default;
+$avatar-large-font-size: $text-3xl !default;
+$avatar-xlarge-font-size: 34px !default;
+$avatar-large-border-radius: 4px !default;
+
+// Avatar Line Height
+$avatar-base-xsmall-line-height: 16px !default;
+$avatar-base-small-line-height: 18px !default;
+$avatar-base-large-line-height: 30px !default;
+$avatar-base-xlarge-line-height: 34px !default;

package/styles/avatar/bds.css

@@ -0,0 +1,69 @@
+
+
+
+
+.e-avatar {
+  border: 1px solid var(--color-sf-utility-avatar-border-color);
+}
+
+.e-avatar {
+  -ms-flex-line-pack: center;
+      align-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  background-color: var(--color-sf-bg-tertiary);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: 8px;
+  color: var(--color-sf-text-tertiary);
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-family: "Inter";
+  font-size: 14px;
+  font-weight: 500;
+  height: 40px;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  overflow: hidden;
+  position: relative;
+  width: 40px;
+  line-height: 22px;
+}
+.e-avatar img {
+  height: 100%;
+  width: auto;
+}
+.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;
+  width: 24px;
+  line-height: 16px;
+}
+.e-avatar.e-avatar-small {
+  font-size: 12px;
+  height: 32px;
+  width: 32px;
+  line-height: 18px;
+}
+.e-avatar.e-avatar-large {
+  font-size: 18px;
+  height: 48px;
+  width: 48px;
+  line-height: 28px;
+}
+.e-avatar.e-avatar-xlarge {
+  font-size: 20px;
+  height: 56px;
+  width: 56px;
+  line-height: 28px;
+}

package/styles/avatar/bds.scss

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

package/styles/avatar/fluent2.css

@@ -19,7 +19,7 @@
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  font-family: "Segoe UI", -apple-system, blinkMacSystemfont, "Roboto", "Helvetica Neue", sans-serif;
+  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
   font-size: 14px;
   font-weight: 400;
   height: 40px;

package/styles/avatar/tailwind3.css

@@ -0,0 +1,65 @@
+
+
+
+
+.e-avatar {
+  -ms-flex-line-pack: center;
+      align-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  background-color: var(--color-sf-content-bg-color-alt2);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: 6px;
+  color: var(--color-sf-icon-color);
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  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: 24px;
+  font-weight: 400;
+  height: 40px;
+  -webkit-box-pack: center;
+      -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-circle.e-avatar-large, .e-avatar.e-avatar-circle.e-avatar-xlarge {
+  border-radius: 50%;
+}
+.e-avatar.e-avatar-xsmall {
+  font-size: 16px;
+  height: 24px;
+  width: 24px;
+  line-height: 16px;
+}
+.e-avatar.e-avatar-small {
+  font-size: 18px;
+  height: 32px;
+  width: 32px;
+  line-height: 18px;
+}
+.e-avatar.e-avatar-large {
+  font-size: 30px;
+  height: 48px;
+  width: 48px;
+  line-height: 30px;
+}
+.e-avatar.e-avatar-xlarge {
+  font-size: 34px;
+  height: 56px;
+  width: 56px;
+  line-height: 34px;
+}

package/styles/avatar/tailwind3.scss

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