@syncfusion/ej2-layouts 25.2.3 → 26.1.38

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 25.2.3
+*  version : 26.1.38
 *  Copyright Syncfusion Inc. 2001 - 2023. 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@25.1.37",
+  "_id": "@syncfusion/ej2-layouts@26.1.35",
   "_inBundle": false,
-  "_integrity": "sha512-UoOjUI6/FqHZfPnQpGavKnq4Te0C4cuGaimJpv/AK4lKVWp+SxFv/HIcnWj84VPslmPYGp8GtOFRN+pwkogZwg==",
+  "_integrity": "sha512-+LpjPEbFmjBxK53q+5R0P3hRCgbQeVUVO7OQsUjQhsYFGDKkKhczN7aHCH75VIPyBOs01TKT22YFBVnCC0ZmXA==",
   "_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-25.1.37.tgz",
-  "_shasum": "847d817d541661ca9e70fd0c0f58b23c90bff44e",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-layouts/-/ej2-layouts-26.1.35.tgz",
+  "_shasum": "e6cb9dfa870a6fa4159d87792d291bd5380645eb",
   "_spec": "@syncfusion/ej2-layouts@*",
-  "_where": "/jenkins/workspace/elease-automation_release_25.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_26.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~25.2.3"
+    "@syncfusion/ej2-base": "~26.1.37"
   },
   "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": "25.2.3",
+  "version": "26.1.38",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

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

@@ -508,7 +508,7 @@ export declare class DashboardLayout extends Component<HTMLElement> implements I
      * @returns void
      */
     removePanel(id: string): void;
-    constructor(options?: DashboardLayoutModel, element?: string | HTMLInputElement);
+    constructor(options?: DashboardLayoutModel, element?: string | HTMLElement);
     /**
      *Moves the panel in the DashboardLayout.
      *
@@ -556,7 +556,7 @@ export declare class DashboardLayout extends Component<HTMLElement> implements I
      *
      * @private
      */
-    onPropertyChanged(newProp: DashboardLayoutModel, oldProp: DashboardLayoutModel): void;
+    onPropertyChanged(newProp: DashboardLayoutModel): void;
     /**
      * Gets the properties to be maintained upon browser refresh.
      *

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

@@ -17,6 +17,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Component, Property, NotifyPropertyChanges, isUndefined } from '@syncfusion/ej2-base';
 import { Collection, Draggable, isNullOrUndefined, append, setValue } from '@syncfusion/ej2-base';
 import { Event, formatUnit, ChildProperty, compile, closest, SanitizeHtmlHelper, getValue } from '@syncfusion/ej2-base';
@@ -291,9 +292,11 @@ var DashboardLayout = /** @class */ (function (_super) {
         else {
             this.cellSize[0] = this.element.parentElement &&
                 ((this.element.parentElement.offsetWidth));
-            this.cellSize[0] = this.element.parentElement
-                && ((this.element.parentElement.offsetWidth - ((this.maxCol() - 1) * this.cellSpacing[0]))
-                    / (this.maxCol()));
+            if (!isNullOrUndefined(this.cellSpacing)) {
+                this.cellSize[0] = this.element.parentElement
+                    && ((this.element.parentElement.offsetWidth - ((this.maxCol() - 1) * this.cellSpacing[0]))
+                        / (this.maxCol()));
+            }
             this.cellSize[1] = this.cellSize[0] / this.cellAspectRatio;
         }
     };
@@ -322,9 +325,9 @@ var DashboardLayout = /** @class */ (function (_super) {
     DashboardLayout.prototype.updateOldRowColumn = function () {
         for (var i = 0; i < this.panels.length; i++) {
             var id = this.panels[i].id;
-            if (this.element.querySelector("[id='" + id + "']")) {
-                var row = parseInt(this.element.querySelector("[id='" + id + "']").getAttribute('data-row'), 10);
-                var col = parseInt(this.element.querySelector("[id='" + id + "']").getAttribute('data-col'), 10);
+            if (this.element.querySelector('[id=\'' + id + '\']')) {
+                var row = parseInt(this.element.querySelector('[id=\'' + id + '\']').getAttribute('data-row'), 10);
+                var col = parseInt(this.element.querySelector('[id=\'' + id + '\']').getAttribute('data-col'), 10);
                 this.oldRowCol[this.panels[i].id] = { row: row, col: col };
             }
             else {
@@ -383,7 +386,6 @@ var DashboardLayout = /** @class */ (function (_super) {
             }
         }
         else {
-            // eslint-disable-next-line
             var compilerFn = templateFn({}, this, prop, type, isStringTemplate, null, appendElement);
             if (compilerFn) {
                 for (var _i = 0, compilerFn_1 = compilerFn; _i < compilerFn_1.length; _i++) {
@@ -463,7 +465,6 @@ var DashboardLayout = /** @class */ (function (_super) {
             model.enabled = true;
         }
         panelElement.style.zIndex = '' + model.zIndex;
-        // eslint-disable-next-line
         var panelProp = new Panel(this, 'panels', model, true);
         this.panels.push(panelProp);
         this.oldRowCol[model.id] = { row: model.row, col: model.col };
@@ -482,7 +483,6 @@ var DashboardLayout = /** @class */ (function (_super) {
     };
     DashboardLayout.prototype.bindEvents = function () {
         this.refreshListener = this.refresh.bind(this);
-        // eslint-disable-next-line
         EventHandler.add(window, 'resize', this.refreshListener);
         this.resizeEvents();
     };
@@ -895,7 +895,6 @@ var DashboardLayout = /** @class */ (function (_super) {
         else {
             if (this.element.classList.contains(responsive)) {
                 removeClass([this.element], [responsive]);
-                // eslint-disable-next-line
                 var internalPanels = this.element.querySelectorAll(((this.element.id) ? '#' + this.element.id + ' > ' : '') + '.e-panel');
                 for (var i = 0; i < internalPanels.length; i++) {
                     var ele = internalPanels[i];
@@ -973,7 +972,6 @@ var DashboardLayout = /** @class */ (function (_super) {
         this.updatedRows = updatedPanel.length;
         for (var i = 0; i < updatedPanel.length; i++) {
             var panelElement = document.getElementById(updatedPanel[i].id);
-            // eslint-disable-next-line
             var updatedHeight = void 0;
             if (panelElement) {
                 setStyle(panelElement, { 'width': '100%' });
@@ -982,8 +980,7 @@ var DashboardLayout = /** @class */ (function (_super) {
                 if (updatedPanel[i].sizeY > 1) {
                     updatedHeight = ((this.element.parentElement
                         && this.element.parentElement.offsetWidth / this.cellAspectRatio) * updatedPanel[i].sizeY) +
-                        // eslint-disable-next-line radix
-                        parseInt((Math.round(updatedPanel[i].sizeY / 2) * this.cellSpacing[1]).toString(), 0);
+                        parseInt((Math.round(updatedPanel[i].sizeY / 2) * this.cellSpacing[1]).toString(), 10);
                     panelElement.style.height = '' + updatedHeight + 'px';
                 }
                 this.resizeHeight = true;
@@ -1020,7 +1017,9 @@ var DashboardLayout = /** @class */ (function (_super) {
     };
     DashboardLayout.prototype.setHeightWidth = function () {
         var heightValue;
-        var widthValue;
+        if (isNullOrUndefined(this.cellSpacing)) {
+            return;
+        }
         if (this.checkMediaQuery()) {
             var entirePanelsY = 0;
             for (var i = 0; i < this.panels.length; i++) {
@@ -1037,8 +1036,7 @@ var DashboardLayout = /** @class */ (function (_super) {
                 (this.cellSize[0] / this.cellAspectRatio) + (this.maxRow() - 1) * this.cellSpacing[1]) + 'px';
         }
         setStyle(this.element, { 'height': heightValue });
-        // eslint-disable-next-line prefer-const
-        widthValue = window.getComputedStyle(this.element).width;
+        var widthValue = window.getComputedStyle(this.element).width;
         setStyle(this.element, { 'width': widthValue });
     };
     DashboardLayout.prototype.setHeightAndWidth = function (panelElement, panelModel) {
@@ -1138,7 +1136,6 @@ var DashboardLayout = /** @class */ (function (_super) {
         }
     };
     DashboardLayout.prototype.panelPropertyChange = function (panel, value) {
-        // eslint-disable-next-line
         panel.setProperties(value, true);
     };
     DashboardLayout.prototype.renderDashBoardCells = function (cells) {
@@ -1181,9 +1178,9 @@ var DashboardLayout = /** @class */ (function (_super) {
         for (var h = 0; h < sizeY; ++h) {
             for (var w = 0; w < sizeX; ++w) {
                 item = this.getPanel(row + h, col + w, ignore);
-                if (item && (!ignore || ignore.indexOf(this.element.querySelector("[id='" + item.id + "']")) === -1) &&
-                    items.indexOf(this.element.querySelector("[id='" + item.id + "']")) === -1) {
-                    items.push(this.element.querySelector("[id='" + item.id + "']"));
+                if (item && (!ignore || ignore.indexOf(this.element.querySelector('[id=\'' + item.id + '\']')) === -1) &&
+                    items.indexOf(this.element.querySelector('[id=\'' + item.id + '\']')) === -1) {
+                    items.push(this.element.querySelector('[id=\'' + item.id + '\']'));
                 }
             }
         }
@@ -1478,8 +1475,6 @@ var DashboardLayout = /** @class */ (function (_super) {
                 exclusions.push(ele);
                 if (updatedCollision.length === 0) {
                     isRightAdjudtable = true;
-                    // eslint-disable-next-line no-self-assign
-                    this.spacedColumnValue = this.spacedColumnValue;
                     return isRightAdjudtable;
                 }
                 else {
@@ -1551,7 +1546,7 @@ var DashboardLayout = /** @class */ (function (_super) {
         }
         if (this.mainElement && this.oldRowCol !== this.cloneObject) {
             for (var i = 0; i < this.panels.length; i++) {
-                var element = this.element.querySelector("[id='" + this.panels[i].id + "']");
+                var element = this.element.querySelector('[id=\'' + this.panels[i].id + '\']');
                 if (element === this.mainElement) {
                     continue;
                 }
@@ -1706,6 +1701,7 @@ var DashboardLayout = /** @class */ (function (_super) {
         });
     };
     DashboardLayout.prototype.updatePanelLayout = function (element, panelModel) {
+        var _this = this;
         this.collisionChecker = {};
         var initialModel = [];
         var checkForAdjustment;
@@ -1759,11 +1755,9 @@ var DashboardLayout = /** @class */ (function (_super) {
             }
         }
         if (collisionModels.length > 0) {
-            // eslint-disable-next-line
-            var proxy_1 = this;
             collisionModels.forEach(function (item1) {
-                if (proxy_1.overlapElement.indexOf(item1) === -1) {
-                    proxy_1.overlapElement.push(item1);
+                if (_this.overlapElement.indexOf(item1) === -1) {
+                    _this.overlapElement.push(item1);
                 }
             });
             if (this.overlapElement && this.overlapElement.indexOf(element) !== -1) {
@@ -1875,15 +1869,14 @@ var DashboardLayout = /** @class */ (function (_super) {
         }
     };
     DashboardLayout.prototype.collisionPanel = function (collisionModels, colValue, updatedRow, clone) {
+        var _this = this;
         var panelModel = this.getCellInstance(clone.id);
         this.panelPropertyChange(panelModel, { row: updatedRow, col: colValue });
         if (collisionModels.length > 0) {
-            // eslint-disable-next-line
-            var proxy_2 = this;
             this.overlapElement = [];
             this.shouldRestrict = true;
             collisionModels.forEach(function (item1) {
-                proxy_2.overlapElement.push(item1);
+                _this.overlapElement.push(item1);
             });
             var overlapElementRow1 = parseInt(clone.getAttribute('data-row'), 10);
             for (var m = 0; m < this.overlapElement.length; m++) {
@@ -1896,27 +1889,21 @@ var DashboardLayout = /** @class */ (function (_super) {
                 this.sortedPanel();
             }
             if (this.overlapSubElementClone.length > 0) {
-                var _loop_5 = function (p) {
-                    var rowVal = parseInt(this_3.overlapSubElementClone[p].getAttribute('data-row'), 10);
-                    var colValue_1 = parseInt(this_3.overlapSubElementClone[p].getAttribute('data-col'), 10);
-                    var sizeX = parseInt(this_3.overlapSubElementClone[p].getAttribute('data-sizeX'), 10);
-                    var sizeY = parseInt(this_3.overlapSubElementClone[p].getAttribute('data-sizeY'), 10);
-                    var collisionModels1 = this_3.collisions(rowVal, colValue_1, sizeX, sizeY, this_3.overlapSubElementClone);
-                    if (this_3.mainElement && collisionModels1.indexOf(this_3.mainElement) !== -1) {
-                        collisionModels1.splice(collisionModels1.indexOf(this_3.mainElement), 1);
+                for (var p = 0; p < this.overlapSubElementClone.length; p++) {
+                    var rowVal = parseInt(this.overlapSubElementClone[p].getAttribute('data-row'), 10);
+                    var colValue_1 = parseInt(this.overlapSubElementClone[p].getAttribute('data-col'), 10);
+                    var sizeX = parseInt(this.overlapSubElementClone[p].getAttribute('data-sizeX'), 10);
+                    var sizeY = parseInt(this.overlapSubElementClone[p].getAttribute('data-sizeY'), 10);
+                    var collisionModels1 = this.collisions(rowVal, colValue_1, sizeX, sizeY, this.overlapSubElementClone);
+                    if (this.mainElement && collisionModels1.indexOf(this.mainElement) !== -1) {
+                        collisionModels1.splice(collisionModels1.indexOf(this.mainElement), 1);
                     }
-                    // eslint-disable-next-line
-                    var proxy = this_3;
                     collisionModels1.forEach(function (item1) {
-                        proxy.overlapElement.push(item1);
+                        _this.overlapElement.push(item1);
                     });
                     if (collisionModels1.length > 0) {
-                        this_3.updateRowColumn(rowVal, this_3.overlapElement, this_3.overlapSubElementClone[p]);
+                        this.updateRowColumn(rowVal, this.overlapElement, this.overlapSubElementClone[p]);
                     }
-                };
-                var this_3 = this;
-                for (var p = 0; p < this.overlapSubElementClone.length; p++) {
-                    _loop_5(p);
                 }
             }
             this.overlapSubElementClone = [];
@@ -1976,14 +1963,14 @@ var DashboardLayout = /** @class */ (function (_super) {
     DashboardLayout.prototype.setXYAttributes = function (element, panelModel) {
         var value = {
             value: {
-                sizeX: panelModel.sizeX.toString(),
-                sizeY: panelModel.sizeY.toString(),
-                minSizeX: panelModel.minSizeX.toString(),
-                minSizeY: panelModel.minSizeY.toString(),
+                sizeX: !isNullOrUndefined(panelModel.sizeX) ? panelModel.sizeX.toString() : undefined,
+                sizeY: !isNullOrUndefined(panelModel.sizeY) ? panelModel.sizeY.toString() : undefined,
+                minSizeX: !isNullOrUndefined(panelModel.minSizeX) ? panelModel.minSizeX.toString() : undefined,
+                minSizeY: !isNullOrUndefined(panelModel.minSizeY) ? panelModel.minSizeY.toString() : undefined,
                 maxSizeX: !isNullOrUndefined(panelModel.maxSizeX) ? panelModel.maxSizeX.toString() : undefined,
                 maxSizeY: !isNullOrUndefined(panelModel.maxSizeY) ? panelModel.maxSizeY.toString() : undefined,
-                row: panelModel.row.toString(),
-                col: panelModel.col.toString()
+                row: !isNullOrUndefined(panelModel.row) ? panelModel.row.toString() : undefined,
+                col: !isNullOrUndefined(panelModel.col) ? panelModel.col.toString() : undefined
             }
         };
         this.setAttributes(value, element);
@@ -2041,18 +2028,18 @@ var DashboardLayout = /** @class */ (function (_super) {
     };
     DashboardLayout.prototype.enableDraggingContent = function (collections) {
         var _this = this;
-        var _loop_6 = function (i) {
+        var _loop_5 = function (i) {
             var abortArray = ['.e-resize', '.' + dragRestrict];
             var cellElement = collections[i];
             {
-                this_4.dragobj = new Draggable(cellElement, {
+                this_3.dragobj = new Draggable(cellElement, {
                     preventDefault: false,
                     clone: false,
-                    dragArea: this_4.element,
+                    dragArea: this_3.element,
                     isDragScroll: true,
-                    handle: this_4.draggableHandle ? this_4.draggableHandle : '.e-panel',
+                    handle: this_3.draggableHandle ? this_3.draggableHandle : '.e-panel',
                     abort: abortArray,
-                    dragStart: this_4.onDraggingStart.bind(this_4),
+                    dragStart: this_3.onDraggingStart.bind(this_3),
                     dragStop: function (args) {
                         _this.trigger('dragStop', args);
                         if (isNullOrUndefined(args.cancel)) {
@@ -2136,15 +2123,15 @@ var DashboardLayout = /** @class */ (function (_super) {
                         _this.onDragStart(args);
                     }
                 });
-                if (this_4.dragCollection.indexOf(this_4.dragobj) === -1) {
-                    this_4.dragCollection.push(this_4.dragobj);
+                if (this_3.dragCollection.indexOf(this_3.dragobj) === -1) {
+                    this_3.dragCollection.push(this_3.dragobj);
                 }
             }
             out_i_1 = i;
         };
-        var this_4 = this, out_i_1;
+        var this_3 = this, out_i_1;
         for (var i = 0; i < collections.length; i++) {
-            _loop_6(i);
+            _loop_5(i);
             i = out_i_1;
         }
     };
@@ -2155,7 +2142,6 @@ var DashboardLayout = /** @class */ (function (_super) {
     };
     DashboardLayout.prototype.updateDragArea = function () {
         this.dragCollection.forEach(function (dragobj) {
-            // eslint-disable-next-line
             dragobj.setDragArea();
         });
     };
@@ -2167,8 +2153,7 @@ var DashboardLayout = /** @class */ (function (_super) {
     };
     DashboardLayout.prototype.onDraggingStart = function (args) {
         var dragArgs = args;
-        // eslint-disable-next-line
-        this.trigger('dragStart', dragArgs, function (dragArgs) {
+        this.trigger('dragStart', dragArgs, function () {
             if (isNullOrUndefined(args.cancel)) {
                 args.cancel = false;
             }
@@ -2202,13 +2187,11 @@ var DashboardLayout = /** @class */ (function (_super) {
             removeClass([args.element], [dragging]);
         }
     };
-    // eslint-disable-next-line
     DashboardLayout.prototype.cloneModels = function (source, target) {
         if (target === undefined) {
             target = [];
         }
         for (var i = 0; i < source.length; i++) {
-            // tslint:disable-next-line
             if (!target[i]) {
                 target[i] = {};
             }
@@ -2252,7 +2235,7 @@ var DashboardLayout = /** @class */ (function (_super) {
                         this.mainElement = args.element;
                         var model = panelModel;
                         this.checkCollision = this.collisions(model.row, model.col, model.sizeX, model.sizeY, args.element);
-                        if (panelModel.col >= this.checkColumnValue) {
+                        if (panelModel.col >= 0 || panelModel.col >= this.checkColumnValue) {
                             this.checkCollision = [];
                         }
                         this.updatePanelLayout(args.element, panelModel);
@@ -2368,7 +2351,6 @@ var DashboardLayout = /** @class */ (function (_super) {
             panel.id = 'layout_' + this.panelID.toString();
             this.panelID = this.panelID + 1;
         }
-        // eslint-disable-next-line
         var panelProp = new Panel(this, 'panels', panel, true);
         this.panels.push(panelProp);
         this.panelsInitialModel = this.cloneModels(this.panels);
@@ -2691,7 +2673,6 @@ var DashboardLayout = /** @class */ (function (_super) {
      * @returns void
      */
     DashboardLayout.prototype.destroy = function () {
-        // eslint-disable-next-line
         EventHandler.remove(window, 'resize', this.refreshListener);
         removeClass([this.element], ['e-dashboardlayout', 'e-lib', 'e-responsive', 'e-control']);
         this.element.removeAttribute('style');
@@ -2792,8 +2773,7 @@ var DashboardLayout = /** @class */ (function (_super) {
      *
      * @private
      */
-    // eslint-disable-next-line
-    DashboardLayout.prototype.onPropertyChanged = function (newProp, oldProp) {
+    DashboardLayout.prototype.onPropertyChanged = function (newProp) {
         var _this = this;
         if (newProp.panels && newProp.panels.length > 0 && newProp.panels[0] instanceof Panel) {
             this.checkForIDValues(newProp.panels);
@@ -2928,7 +2908,6 @@ var DashboardLayout = /** @class */ (function (_super) {
                 var key = keys_1[_i];
                 if ((typeof getValue(key, this) === 'object' && !isNullOrUndefined(getValue(key, this)))) {
                     if (Array.isArray(getValue(key, this)) && key === 'panels') {
-                        // eslint-disable-next-line
                         this.mergePanels(dataObj[key], this[key]);
                         this[key] = dataObj[key];
                     }
@@ -2940,16 +2919,16 @@ var DashboardLayout = /** @class */ (function (_super) {
     /* istanbul ignore next */
     DashboardLayout.prototype.mergePanels = function (sortedPanels, panels) {
         var storedColumns = sortedPanels;
-        var _loop_7 = function (i) {
-            this_5.checkForIDValues(panels);
+        var _loop_6 = function (i) {
+            this_4.checkForIDValues(panels);
             var localPanel = panels.filter(function (pan) { return pan.id === storedColumns[i].id; })[0];
             if (!isNullOrUndefined(localPanel)) {
                 storedColumns[i] = extend(localPanel, storedColumns[i], {}, true);
             }
         };
-        var this_5 = this;
+        var this_4 = this;
         for (var i = 0; i < storedColumns.length; i++) {
-            _loop_7(i);
+            _loop_6(i);
         }
     };
     /**