@syncfusion/ej2-layouts 28.2.3 → 28.2.5

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 28.2.3
+*  version : 28.2.5
 *  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

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-layouts@*",
-  "_id": "@syncfusion/ej2-layouts@28.1.33",
+  "_id": "@syncfusion/ej2-layouts@28.2.3",
   "_inBundle": false,
-  "_integrity": "sha512-eitoXhb2i+d4DKpw+eg2XG7WJUQPBypxI6/2rT7/EpZ72BaDPUtpgPWRgbzuMRQrllulgp+KrmA9NvQp3jzlwA==",
+  "_integrity": "sha512-P+LsAf5zfQ+8Ky+n654yJQ2sJ9W53TLqXxFKijrzEKD2WjwpM/QAZ16MyP7VbP5fLIzMzltzZeivsU8+m7+EAw==",
   "_location": "/@syncfusion/ej2-layouts",
   "_phantomChildren": {},
   "_requested": {
@@ -26,8 +26,8 @@
     "/@syncfusion/ej2-react-layouts",
     "/@syncfusion/ej2-vue-layouts"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-layouts/-/ej2-layouts-28.1.33.tgz",
-  "_shasum": "a936189faa82fb47ee07316c11f5fb11c914eb87",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-layouts/-/ej2-layouts-28.2.3.tgz",
+  "_shasum": "16816c6b4e4e620a3f0fd0cb8cb7c4d4e1dfd6ff",
   "_spec": "@syncfusion/ej2-layouts@*",
   "_where": "/jenkins/workspace/elease-automation_release_28.1.1/packages/included",
   "author": {
@@ -35,7 +35,7 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~28.2.3"
+    "@syncfusion/ej2-base": "~28.2.5"
   },
   "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": "28.2.3",
+  "version": "28.2.5",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/dashboard-layout/dashboard-layout.d.ts

@@ -477,6 +477,10 @@ export declare class DashboardLayout extends Component<HTMLElement> implements I
     protected getPanelBase(args: HTMLElement | DragEventArgs | string): HTMLElement;
     protected getPanel(row: number, column: number, excludeItems: HTMLElement[] | HTMLElement): PanelModel;
     protected setHolderPosition(args: DragEventArgs): void;
+    protected calculateShadowElementSize(sizeX: number, sizeY: number): {
+        width: string;
+        height: string;
+    };
     protected getCellInstance(idValue: string): PanelModel;
     /**
      * Allows to add a panel to the Dashboardlayout.

package/src/dashboard-layout/dashboard-layout.js

@@ -2184,16 +2184,17 @@ var DashboardLayout = /** @class */ (function (_super) {
             this.updateRowsHeight(eleRowValue, eleSizeY, eleSizeY);
             this.updateDragArea();
             this.shadowEle = document.createElement('div');
-            this.shadowEle.classList.add('e-holder');
-            this.shadowEle.classList.add('e-holder-transition');
+            this.shadowEle.classList.add('e-holder', 'e-holder-transition');
             setStyle(this.shadowEle, { 'position': 'absolute' });
             addClass([this.element], [preventSelect]);
             addClass([args.element], [dragging]);
             this.element.appendChild(this.shadowEle);
             this.renderReactTemplates();
             this.shadowEle = document.querySelector('.e-holder');
-            this.shadowEle.style.height = (this.getCellInstance(args.element.id).sizeY * this.cellSize[1]) + 'px';
-            this.shadowEle.style.width = (this.getCellInstance(args.element.id).sizeX * this.cellSize[0]) + 'px';
+            var panelValues = this.getCellInstance(args.element.id);
+            var shadowSize = this.calculateShadowElementSize(panelValues.sizeX, panelValues.sizeY);
+            this.shadowEle.style.height = shadowSize.height;
+            this.shadowEle.style.width = shadowSize.width;
             var panelInstance = this.getCellInstance(args.element.id);
             this.setPanelPosition(this.shadowEle, panelInstance.row, panelInstance.col);
         }
@@ -2329,12 +2330,17 @@ var DashboardLayout = /** @class */ (function (_super) {
         var heightValue = this.getCellSize()[1];
         var top = row === 0 ? 0 : (((row) * (heightValue + this.cellSpacing[1])));
         var left = col === 0 ? 0 : (((col) * (widthValue + this.cellSpacing[0])));
-        var cellSizeOne = this.getCellSize()[1];
-        var cellSizeZero = this.getCellSize()[0];
         this.elementRef.top = this.shadowEle.style.top = top + 'px';
         this.elementRef.left = this.shadowEle.style.left = left + 'px';
-        this.elementRef.height = this.shadowEle.style.height = ((sizeY * cellSizeOne) + ((sizeY - 1) * this.cellSpacing[1])) + 'px';
-        this.elementRef.width = this.shadowEle.style.width = ((sizeX * cellSizeZero) + ((sizeX - 1) * this.cellSpacing[0])) + 'px';
+        var shadowSize = this.calculateShadowElementSize(sizeX, sizeY);
+        this.elementRef.height = this.shadowEle.style.height = shadowSize.height;
+        this.elementRef.width = this.shadowEle.style.width = shadowSize.width;
+    };
+    DashboardLayout.prototype.calculateShadowElementSize = function (sizeX, sizeY) {
+        return {
+            width: (sizeX * this.cellSize[0]) + ((sizeX - 1) * this.cellSpacing[0]) + 'px',
+            height: (sizeY * this.cellSize[1]) + ((sizeY - 1) * this.cellSpacing[1]) + 'px'
+        };
     };
     DashboardLayout.prototype.getCellInstance = function (idValue) {
         var currentCellInstance;