@syncfusion/ej2-layouts 28.2.3 → 28.2.4

package/dist/global/index.d.ts

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