@syncfusion/ej2-layouts 25.2.3 → 26.1.38

package/dist/es6/ej2-layouts.es5.js

@@ -1,4 +1,4 @@
-import { Browser, ChildProperty, Collection, Component, Draggable, Event, EventHandler, NotifyPropertyChanges, Property, SanitizeHtmlHelper, addClass, append, attributes, closest, compile, detach, extend, formatUnit, getUniqueID, getValue, isNullOrUndefined, isUndefined, remove, removeClass, select, selectAll, setStyleAttribute, setValue } from '@syncfusion/ej2-base';
+import { Property, ChildProperty, isNullOrUndefined, removeClass, addClass, Browser, EventHandler, SanitizeHtmlHelper, extend, detach, formatUnit, setStyleAttribute, select, selectAll, compile, Collection, Event, NotifyPropertyChanges, Component, setValue, append, isUndefined, closest, getValue, Draggable, getUniqueID, attributes, remove } from '@syncfusion/ej2-base';
 
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -158,8 +158,9 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
                 case 'paneSettings': {
                     if (!(newProp.paneSettings instanceof Array && oldProp.paneSettings instanceof Array)) {
                         var paneCounts = Object.keys(newProp.paneSettings);
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        var isPaneContentChanged = paneCounts.some(function (count) { return !isNullOrUndefined(newProp.paneSettings[count].content); });
+                        var isPaneContentChanged = paneCounts.some(function (count) {
+                            return !isNullOrUndefined(newProp.paneSettings[count].content);
+                        });
                         if (this.isReact && isPaneContentChanged) {
                             var cPaneCount = 0;
                             for (var k = 0; k < this.paneSettings.length; k++) {
@@ -195,11 +196,14 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
                                         this.collapsibleModelUpdate(index);
                                         break;
                                     case 'collapsed':
-                                        // eslint-disable-next-line
-                                        newProp.paneSettings[index].collapsed ? this.isCollapsed(index) : this.collapsedOnchange(index);
+                                        if (newProp.paneSettings[index].collapsed) {
+                                            this.isCollapsed(index);
+                                        }
+                                        else {
+                                            this.collapsedOnchange(index);
+                                        }
                                         break;
                                     case 'cssClass':
-                                        // eslint-disable-next-line max-len
                                         this.setCssClass(this.allPanes[index], newProp.paneSettings[index].cssClass);
                                         break;
                                     case 'size': {
@@ -528,8 +532,12 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
         return attribute.slice(attribute.lastIndexOf('-') + 1);
     };
     Splitter.prototype.setRTL = function (rtl) {
-        // eslint-disable-next-line
-        rtl ? addClass([this.element], RTL) : removeClass([this.element], RTL);
+        if (rtl) {
+            addClass([this.element], RTL);
+        }
+        else {
+            removeClass([this.element], RTL);
+        }
     };
     Splitter.prototype.setReversePane = function () {
         this.allPanes = this.allPanes.reverse();
@@ -550,9 +558,12 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
     };
     Splitter.prototype.getPanesDimensions = function () {
         for (var index = 0; index < this.allPanes.length; index++) {
-            // eslint-disable-next-line
-            this.orientation === 'Horizontal' ? this.panesDimensions.push(this.allPanes[index].getBoundingClientRect().width) :
+            if (this.orientation === 'Horizontal') {
+                this.panesDimensions.push(this.allPanes[index].getBoundingClientRect().width);
+            }
+            else {
                 this.panesDimensions.push(this.allPanes[index].getBoundingClientRect().height);
+            }
         }
     };
     Splitter.prototype.setCssClass = function (element, className) {
@@ -579,9 +590,12 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
                 this.showResizer(this.allBars[paneIndex]);
                 removeClass([select('.' + RESIZE_BAR, this.allBars[paneIndex])], HIDE_HANDLER);
                 this.allBars[paneIndex].classList.add(RESIZABLE_BAR);
-                // eslint-disable-next-line
-                (index === (this.allBars.length)) ? this.allPanes[index].classList.add(RESIZABLE_PANE) :
+                if (index === (this.allBars.length)) {
+                    this.allPanes[index].classList.add(RESIZABLE_PANE);
+                }
+                else {
                     this.allPanes[paneIndex].classList.add(RESIZABLE_PANE);
+                }
                 this.updateResizablePanes(i);
             }
         }
@@ -589,9 +603,12 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
             this.updateResizablePanes(i);
             this.hideResizer(this.allBars[paneIndex]);
             this.allBars[paneIndex].classList.remove(RESIZABLE_BAR);
-            // eslint-disable-next-line
-            (index === (this.allBars.length)) ? this.allPanes[index].classList.remove(RESIZABLE_PANE) :
+            if (index === (this.allBars.length)) {
+                this.allPanes[index].classList.remove(RESIZABLE_PANE);
+            }
+            else {
                 this.allPanes[paneIndex].classList.remove(RESIZABLE_PANE);
+            }
         }
     };
     Splitter.prototype.collapsibleModelUpdate = function (index) {
@@ -656,7 +673,6 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
                     _this.updateIsCollapsed(index, _this.targetArrows().collapseArrow, _this.targetArrows().lastBarArrow);
                     for (var i = 0; i < collapsedindex.length; i++) {
                         if (!_this.allPanes[collapsedindex[i]].classList.contains(COLLAPSE_PANE)) {
-                            // eslint-disable-next-line max-len
                             _this.updateIsCollapsed(collapsedindex[i], _this.targetArrows().collapseArrow, _this.targetArrows().lastBarArrow);
                         }
                     }
@@ -709,8 +725,12 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
         }
     };
     Splitter.prototype.isEnabled = function (enabled) {
-        // eslint-disable-next-line
-        enabled ? removeClass([this.element], DISABLED) : addClass([this.element], DISABLED);
+        if (enabled) {
+            removeClass([this.element], DISABLED);
+        }
+        else {
+            addClass([this.element], DISABLED);
+        }
     };
     Splitter.prototype.setSeparatorSize = function (size) {
         var sizeValue = isNullOrUndefined(size) ? 'auto' : size + 'px';
@@ -792,8 +812,12 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
     };
     Splitter.prototype.updateSeparatorSize = function (resizeHanlder) {
         var sizeValue = isNullOrUndefined(this.separatorSize) ? '1px' : this.separatorSize + 'px';
-        // eslint-disable-next-line
-        this.orientation === 'Horizontal' ? (resizeHanlder.style.width = sizeValue) : resizeHanlder.style.height = sizeValue;
+        if (this.orientation === 'Horizontal') {
+            resizeHanlder.style.width = sizeValue;
+        }
+        else {
+            resizeHanlder.style.height = sizeValue;
+        }
     };
     Splitter.prototype.addResizeHandler = function (currentBar) {
         var resizeHanlder = this.createElement('div');
@@ -817,16 +841,28 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
     Splitter.prototype.updateCollapseIcons = function (index, arrow1, arrow2) {
         if (!isNullOrUndefined(this.paneSettings[index])) {
             if (!isNullOrUndefined(this.paneSettings[index].collapsible)) {
-                // eslint-disable-next-line
-                this.paneSettings[index].collapsible ? removeClass([arrow2], [HIDE_ICON]) : addClass([arrow2], [HIDE_ICON]);
+                if (this.paneSettings[index].collapsible) {
+                    removeClass([arrow2], [HIDE_ICON]);
+                }
+                else {
+                    addClass([arrow2], [HIDE_ICON]);
+                }
                 if (!isNullOrUndefined(this.paneSettings[index + 1])) {
-                    // eslint-disable-next-line
-                    this.paneSettings[index + 1].collapsible ? removeClass([arrow1], [HIDE_ICON]) : addClass([arrow1], [HIDE_ICON]);
+                    if (this.paneSettings[index + 1].collapsible) {
+                        removeClass([arrow1], [HIDE_ICON]);
+                    }
+                    else {
+                        addClass([arrow1], [HIDE_ICON]);
+                    }
                 }
                 if (!isNullOrUndefined(this.paneSettings[index + 1])) {
                     if ((this.paneSettings[index + 1].collapsible)) {
-                        // eslint-disable-next-line
-                        this.paneSettings[index + 1].collapsible ? removeClass([arrow1], [HIDE_ICON]) : addClass([arrow1], [HIDE_ICON]);
+                        if (this.paneSettings[index + 1].collapsible) {
+                            removeClass([arrow1], [HIDE_ICON]);
+                        }
+                        else {
+                            addClass([arrow1], [HIDE_ICON]);
+                        }
                     }
                 }
             }
@@ -854,8 +890,7 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
         arrow1.setAttribute('type', 'button');
         arrow2.setAttribute('type', 'button');
         var size = isNullOrUndefined(this.separatorSize) ? '1px' : this.separatorSize + 'px';
-        // eslint-disable-next-line
-        var proxy = this;
+        var proxy =  this;
         if (this.orientation === 'Horizontal') {
             this.updateIconClass();
             addClass([arrow2], [NAVIGATE_ARROW, ARROW_LEFT, HIDE_ICON]);
@@ -895,8 +930,12 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
     };
     Splitter.prototype.updateResizablePanes = function (index) {
         this.getPaneDetails();
-        // eslint-disable-next-line
-        this.isResizable() ? this.allPanes[index].classList.add(RESIZABLE_PANE) : this.allPanes[index].classList.remove(RESIZABLE_PANE);
+        if (this.isResizable()) {
+            this.allPanes[index].classList.add(RESIZABLE_PANE);
+        }
+        else {
+            this.allPanes[index].classList.remove(RESIZABLE_PANE);
+        }
     };
     Splitter.prototype.addSeparator = function (target) {
         var childCount = this.allPanes.length;
@@ -1050,9 +1089,9 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
         }
         for (var j = 0, len = this.allBars.length; j < len; j++) {
             totalWidth += this.orientation === 'Horizontal' ? parseInt(getComputedStyle(this.allBars[j]).marginLeft, 10) +
-                // eslint-disable-next-line max-len
-                parseInt(getComputedStyle(this.allBars[j]).marginLeft, 10) : parseInt(getComputedStyle(this.allBars[j]).marginTop, 10) +
-                parseInt(getComputedStyle(this.allBars[j]).marginBottom, 10);
+                parseInt(getComputedStyle(this.allBars[j]).marginLeft, 10) :
+                parseInt(getComputedStyle(this.allBars[j]).marginTop, 10) +
+                    parseInt(getComputedStyle(this.allBars[j]).marginBottom, 10);
         }
         var diff = this.orientation === 'Horizontal' ? this.element.offsetWidth -
             ((this.border * 2) + totalWidth) :
@@ -1858,8 +1897,7 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
             this.updateSplitterSize();
         }
     };
-    // eslint-disable-next-line
-    Splitter.prototype.validateMinRange = function (paneIndex, paneCurrentWidth, pane) {
+    Splitter.prototype.validateMinRange = function (paneIndex, paneCurrentWidth) {
         var paneMinRange = null;
         var paneMinDimensions;
         var difference = 0;
@@ -1882,8 +1920,7 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
         }
         return isNullOrUndefined(validatedVal) ? paneCurrentWidth : validatedVal;
     };
-    // eslint-disable-next-line
-    Splitter.prototype.validateMaxRange = function (paneIndex, paneCurrentWidth, pane) {
+    Splitter.prototype.validateMaxRange = function (paneIndex, paneCurrentWidth) {
         var paneMaxRange = null;
         var paneMaxDimensions;
         var validatedVal;
@@ -1905,13 +1942,13 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
     };
     Splitter.prototype.validateMinMaxValues = function () {
         //validate previous pane minimum range
-        this.prevPaneCurrentWidth = this.validateMinRange(this.prevPaneIndex, this.prevPaneCurrentWidth, this.previousPane);
+        this.prevPaneCurrentWidth = this.validateMinRange(this.prevPaneIndex, this.prevPaneCurrentWidth);
         // Validate next pane minimum range
-        this.nextPaneCurrentWidth = this.validateMinRange(this.nextPaneIndex, this.nextPaneCurrentWidth, this.nextPane);
+        this.nextPaneCurrentWidth = this.validateMinRange(this.nextPaneIndex, this.nextPaneCurrentWidth);
         // validate previous pane maximum range
-        this.prevPaneCurrentWidth = this.validateMaxRange(this.prevPaneIndex, this.prevPaneCurrentWidth, this.previousPane);
+        this.prevPaneCurrentWidth = this.validateMaxRange(this.prevPaneIndex, this.prevPaneCurrentWidth);
         // validate next pane maximum range
-        this.nextPaneCurrentWidth = this.validateMaxRange(this.nextPaneIndex, this.nextPaneCurrentWidth, this.nextPane);
+        this.nextPaneCurrentWidth = this.validateMaxRange(this.nextPaneIndex, this.nextPaneCurrentWidth);
     };
     Splitter.prototype.equatePaneWidths = function () {
         var difference;
@@ -2056,7 +2093,6 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
     };
     // eslint-disable-next-line
     Splitter.prototype.templateCompile = function (ele, cnt) {
-        // eslint-disable-next-line
         var tempEle = this.createElement('div');
         this.compileElement(tempEle, cnt, 'content');
         if (tempEle.childNodes.length !== 0) {
@@ -2066,7 +2102,6 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
         }
     };
     Splitter.prototype.compileElement = function (ele, val, prop) {
-        // eslint-disable-next-line
         if (typeof (val) === 'string') {
             if (val[0] === '.' || val[0] === '#') {
                 var eleVal = document.querySelector(val);
@@ -2211,9 +2246,12 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
         }
     };
     Splitter.prototype.addPaneClass = function (pane) {
-        // eslint-disable-next-line
-        this.orientation === 'Horizontal' ? addClass([pane], [PANE, SPLIT_H_PANE, SCROLL_PANE]) :
+        if (this.orientation === 'Horizontal') {
+            addClass([pane], [PANE, SPLIT_H_PANE, SCROLL_PANE]);
+        }
+        else {
             addClass([pane], [PANE, SPLIT_V_PANE, SCROLL_PANE]);
+        }
         return pane;
     };
     Splitter.prototype.removePaneOrders = function (paneClass) {
@@ -2366,10 +2404,6 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
     return Splitter;
 }(Component));
 
-/**
- * splitter modules
- */
-
 var __extends$1 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -2658,9 +2692,11 @@ var DashboardLayout = /** @__PURE__ @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;
         }
     };
@@ -2689,9 +2725,9 @@ var DashboardLayout = /** @__PURE__ @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 {
@@ -2750,7 +2786,6 @@ var DashboardLayout = /** @__PURE__ @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++) {
@@ -2830,7 +2865,6 @@ var DashboardLayout = /** @__PURE__ @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 };
@@ -2849,7 +2883,6 @@ var DashboardLayout = /** @__PURE__ @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();
     };
@@ -3262,7 +3295,6 @@ var DashboardLayout = /** @__PURE__ @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];
@@ -3340,7 +3372,6 @@ var DashboardLayout = /** @__PURE__ @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) {
                 setStyleAttribute(panelElement, { 'width': '100%' });
@@ -3349,8 +3380,7 @@ var DashboardLayout = /** @__PURE__ @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;
@@ -3387,7 +3417,9 @@ var DashboardLayout = /** @__PURE__ @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++) {
@@ -3404,8 +3436,7 @@ var DashboardLayout = /** @__PURE__ @class */ (function (_super) {
                 (this.cellSize[0] / this.cellAspectRatio) + (this.maxRow() - 1) * this.cellSpacing[1]) + 'px';
         }
         setStyleAttribute(this.element, { 'height': heightValue });
-        // eslint-disable-next-line prefer-const
-        widthValue = window.getComputedStyle(this.element).width;
+        var widthValue = window.getComputedStyle(this.element).width;
         setStyleAttribute(this.element, { 'width': widthValue });
     };
     DashboardLayout.prototype.setHeightAndWidth = function (panelElement, panelModel) {
@@ -3505,7 +3536,6 @@ var DashboardLayout = /** @__PURE__ @class */ (function (_super) {
         }
     };
     DashboardLayout.prototype.panelPropertyChange = function (panel, value) {
-        // eslint-disable-next-line
         panel.setProperties(value, true);
     };
     DashboardLayout.prototype.renderDashBoardCells = function (cells) {
@@ -3548,9 +3578,9 @@ var DashboardLayout = /** @__PURE__ @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 + '\']'));
                 }
             }
         }
@@ -3845,8 +3875,6 @@ var DashboardLayout = /** @__PURE__ @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 {
@@ -3918,7 +3946,7 @@ var DashboardLayout = /** @__PURE__ @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;
                 }
@@ -4073,6 +4101,7 @@ var DashboardLayout = /** @__PURE__ @class */ (function (_super) {
         });
     };
     DashboardLayout.prototype.updatePanelLayout = function (element, panelModel) {
+        var _this = this;
         this.collisionChecker = {};
         var initialModel = [];
         var checkForAdjustment;
@@ -4126,11 +4155,9 @@ var DashboardLayout = /** @__PURE__ @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) {
@@ -4242,15 +4269,14 @@ var DashboardLayout = /** @__PURE__ @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++) {
@@ -4263,27 +4289,21 @@ var DashboardLayout = /** @__PURE__ @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 = [];
@@ -4343,14 +4363,14 @@ var DashboardLayout = /** @__PURE__ @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);
@@ -4408,18 +4428,18 @@ var DashboardLayout = /** @__PURE__ @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)) {
@@ -4503,15 +4523,15 @@ var DashboardLayout = /** @__PURE__ @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;
         }
     };
@@ -4522,7 +4542,6 @@ var DashboardLayout = /** @__PURE__ @class */ (function (_super) {
     };
     DashboardLayout.prototype.updateDragArea = function () {
         this.dragCollection.forEach(function (dragobj) {
-            // eslint-disable-next-line
             dragobj.setDragArea();
         });
     };
@@ -4534,8 +4553,7 @@ var DashboardLayout = /** @__PURE__ @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;
             }
@@ -4569,13 +4587,11 @@ var DashboardLayout = /** @__PURE__ @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] = {};
             }
@@ -4619,7 +4635,7 @@ var DashboardLayout = /** @__PURE__ @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);
@@ -4735,7 +4751,6 @@ var DashboardLayout = /** @__PURE__ @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);
@@ -5058,7 +5073,6 @@ var DashboardLayout = /** @__PURE__ @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');
@@ -5159,8 +5173,7 @@ var DashboardLayout = /** @__PURE__ @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);
@@ -5295,7 +5308,6 @@ var DashboardLayout = /** @__PURE__ @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];
                     }
@@ -5307,16 +5319,16 @@ var DashboardLayout = /** @__PURE__ @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);
         }
     };
     /**
@@ -5404,10 +5416,6 @@ var DashboardLayout = /** @__PURE__ @class */ (function (_super) {
     return DashboardLayout;
 }(Component));
 
-/**
- * dashboardlayout modules
- */
-
 var __extends$2 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -5534,7 +5542,7 @@ var Timeline = /** @__PURE__ @class */ (function (_super) {
     /**
      * To get component name.
      *
-     * @returns {string} - Module Name
+     * @returns {string} - It returns the current module name.
      * @private
      */
     Timeline.prototype.getModuleName = function () {
@@ -5544,7 +5552,7 @@ var Timeline = /** @__PURE__ @class */ (function (_super) {
      * This method is abstract member of the Component<HTMLElement>.
      *
      * @private
-     * @returns {string}
+     * @returns {string} - It returns the persisted data.
      */
     Timeline.prototype.getPersistData = function () {
         return this.addOnPersist([]);
@@ -5562,14 +5570,16 @@ var Timeline = /** @__PURE__ @class */ (function (_super) {
         this.element.appendChild(this.timelineListEle);
     };
     Timeline.prototype.updateOrientation = function () {
-        var orientation = this.orientation.toLowerCase();
-        if (orientation === 'horizontal' || orientation === 'vertical') {
-            this.element.classList.remove(HORIZONTAL, VERTICAL);
-            this.element.classList.add('e-' + orientation);
+        if (!(isNullOrUndefined(this.orientation))) {
+            var orientation_1 = this.orientation.toLowerCase();
+            if (orientation_1 === 'horizontal' || orientation_1 === 'vertical') {
+                this.element.classList.remove(HORIZONTAL, VERTICAL);
+                this.element.classList.add('e-' + orientation_1);
+            }
         }
     };
     Timeline.prototype.updateCssClass = function (addCss, removeCss) {
-        if (removeCss === void 0) { removeCss = ""; }
+        if (removeCss === void 0) { removeCss = ''; }
         var _a, _b;
         var cssClasses;
         if (removeCss) {
@@ -5585,10 +5595,12 @@ var Timeline = /** @__PURE__ @class */ (function (_super) {
         this.element.classList[this.enableRtl ? 'add' : 'remove'](RTL$1);
     };
     Timeline.prototype.updateAlign = function () {
-        var align = this.align.toLowerCase();
-        if (align === 'before' || align === 'after' || align === 'alternate' || align === 'alternatereverse') {
-            this.element.classList.remove('e-align-before', 'e-align-after', 'e-align-alternate', 'e-align-alternatereverse');
-            this.element.classList.add('e-align-' + align);
+        if (!(isNullOrUndefined(this.align))) {
+            var align = this.align.toLowerCase();
+            if (align === 'before' || align === 'after' || align === 'alternate' || align === 'alternatereverse') {
+                this.element.classList.remove('e-align-before', 'e-align-after', 'e-align-alternate', 'e-align-alternatereverse');
+                this.element.classList.add('e-align-' + align);
+            }
         }
     };
     Timeline.prototype.updateReverse = function () {
@@ -5597,19 +5609,14 @@ var Timeline = /** @__PURE__ @class */ (function (_super) {
     Timeline.prototype.renderItems = function () {
         var _this = this;
         var _a;
+        this.haveOneSidecontent();
         for (var index = 0; index < this.items.length; index++) {
             var item = this.items[parseInt(index.toString(), 10)];
             var timelineItem = this.createElement('li', { className: ITEMCONTAINER + ' ' + ITEMCONNECTOR });
             if (!this.template) {
                 var oppositeTextEle = this.createElement('div', { className: OPPOSITECONTENT });
                 if (item.oppositeContent) {
-                    var oppositeCtn = this.getTemplateFunction(item.oppositeContent);
-                    if (typeof oppositeCtn === 'string') {
-                        oppositeTextEle.innerText = oppositeCtn;
-                    }
-                    else {
-                        append(oppositeCtn({ item: item, itemIndex: index }), oppositeTextEle);
-                    }
+                    this.updateItemContent(false, item, index, oppositeTextEle);
                 }
                 timelineItem.appendChild(oppositeTextEle);
                 var dotContainer = this.createElement('div', { className: DOTCONTAINER });
@@ -5619,13 +5626,7 @@ var Timeline = /** @__PURE__ @class */ (function (_super) {
                 timelineItem.appendChild(dotContainer);
                 var contentEle = this.createElement('div', { className: CONTENT });
                 if (item.content) {
-                    var ctn = this.getTemplateFunction(item.content);
-                    if (typeof ctn === 'string') {
-                        contentEle.innerText = ctn;
-                    }
-                    else {
-                        append(ctn({ item: item, itemIndex: index }), contentEle);
-                    }
+                    this.updateItemContent(true, item, index, contentEle);
                 }
                 timelineItem.appendChild(contentEle);
                 if (item.cssClass) {
@@ -5642,6 +5643,36 @@ var Timeline = /** @__PURE__ @class */ (function (_super) {
             this.trigger('beforeItemRender', eventArgs, function (args) { _this.timelineListEle.appendChild(args.element); });
         }
     };
+    Timeline.prototype.haveOneSidecontent = function () {
+        var haveContent = false;
+        var haveOppContent = false;
+        for (var index = 0; index < this.items.length; index++) {
+            var item = this.items[parseInt(index.toString(), 10)];
+            if (!haveContent) {
+                haveContent = item.content.length > 0;
+            }
+            if (!haveOppContent) {
+                haveOppContent = item.oppositeContent.length > 0;
+            }
+        }
+        this.element.classList.remove('e-content-only', 'e-opposite-content-only');
+        if (haveContent && !haveOppContent) {
+            this.element.classList.add('e-content-only');
+        }
+        if (haveOppContent && !haveContent) {
+            this.element.classList.add('e-opposite-content-only');
+        }
+    };
+    Timeline.prototype.updateItemContent = function (isContent, item, index, contentEle) {
+        var notCompile = !(this.isReact || this.isVue);
+        var ctn = this.getTemplateFunction(isContent ? item.content : item.oppositeContent, notCompile);
+        if (typeof ctn === 'string') {
+            contentEle.innerText = ctn;
+        }
+        else {
+            append(ctn({ item: item, itemIndex: index }, this), contentEle);
+        }
+    };
     Timeline.prototype.updateTemplateFunction = function () {
         this.templateFunction = this.template ? this.getTemplateFunction(this.template, false) : null;
     };
@@ -5651,8 +5682,12 @@ var Timeline = /** @__PURE__ @class */ (function (_super) {
             this.removeItemContent(listItems[parseInt((index).toString(), 10)]);
         }
         if (this.template) {
-            isrerender ? listItems[parseInt((index).toString(), 10)].classList.add(TEMPLATE) :
+            if (isrerender) {
+                listItems[parseInt((index).toString(), 10)].classList.add(TEMPLATE);
+            }
+            else {
                 timelineItem.classList.add(TEMPLATE);
+            }
             var item = this.items[parseInt(index.toString(), 10)];
             append(this.templateFunction({ item: item, itemIndex: index }, this, 'timelineTemplate', (this.element.id + '_timelineTemplate'), this.isStringTemplate), isrerender ? listItems[parseInt((index).toString(), 10)] : timelineItem);
         }
@@ -5669,6 +5704,7 @@ var Timeline = /** @__PURE__ @class */ (function (_super) {
      * Gets template content based on the template property value.
      *
      * @param {string | Function} template - Template property value.
+     * @param {boolean} notCompile - Compile property value.
      * @returns {Function} - Return template function.
      * @hidden
      */
@@ -5720,8 +5756,8 @@ var Timeline = /** @__PURE__ @class */ (function (_super) {
         _super.prototype.destroy.call(this);
         // unwires the events and detach the li elements
         this.removeItemElements();
-        this.element.removeAttribute("role");
-        this.element.removeAttribute("aria-label");
+        this.element.removeAttribute('role');
+        this.element.removeAttribute('aria-label');
         this.clearTemplate();
         if (this.timelineListEle) {
             remove(this.timelineListEle);
@@ -5729,6 +5765,43 @@ var Timeline = /** @__PURE__ @class */ (function (_super) {
         this.timelineListEle = null;
         this.updateElementClassArray();
     };
+    Timeline.prototype.updateItems = function (newProp, oldPropItems, index, item) {
+        var _a, _b, _c, _d;
+        var timelineItemElements = this.timelineListEle.querySelectorAll('li');
+        var dotEle;
+        var contentEle;
+        var oppositeEle;
+        switch (newProp) {
+            case 'dotCss':
+                dotEle = timelineItemElements[parseInt(index.toString(), 10)].querySelector('.' + DOTCONTENT);
+                if (oldPropItems.dotCss !== '') {
+                    (_a = dotEle.classList).remove.apply(_a, oldPropItems.dotCss.trim().split(' '));
+                }
+                (_b = dotEle.classList).add.apply(_b, this.items[parseInt(index.toString(), 10)].dotCss.trim().split(' '));
+                break;
+            case 'content':
+                contentEle = timelineItemElements[parseInt(index.toString(), 10)].querySelector('.' + CONTENT);
+                contentEle.innerText = '';
+                this.updateItemContent(true, item, index, contentEle);
+                this.haveOneSidecontent();
+                break;
+            case 'oppositeContent':
+                oppositeEle = timelineItemElements[parseInt(index.toString(), 10)].querySelector('.' + OPPOSITECONTENT);
+                oppositeEle.innerText = '';
+                this.updateItemContent(false, item, index, oppositeEle);
+                this.haveOneSidecontent();
+                break;
+            case 'disabled':
+                timelineItemElements[parseInt(index.toString(), 10)].classList[this.items[parseInt(index.toString(), 10)].disabled ? 'add' : 'remove'](DISABLED$1);
+                break;
+            case 'cssClass':
+                if (oldPropItems.cssClass !== '') {
+                    (_c = timelineItemElements[parseInt(index.toString(), 10)].classList).remove.apply(_c, oldPropItems.cssClass.trim().split(' '));
+                }
+                (_d = timelineItemElements[parseInt(index.toString(), 10)].classList).add.apply(_d, item.cssClass.trim().split(' '));
+                break;
+        }
+    };
     /**
      * Called internally if any of the property value changed.
      *
@@ -5741,11 +5814,20 @@ var Timeline = /** @__PURE__ @class */ (function (_super) {
         for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
             var prop = _a[_i];
             switch (prop) {
-                case 'items': {
-                    this.removeItemElements();
-                    this.renderItems();
+                case 'items':
+                    if (Array.isArray(newProp.items)) {
+                        this.removeItemElements();
+                        this.renderItems();
+                    }
+                    else {
+                        var itemObject = Object.keys(newProp.items);
+                        for (var i = 0; i < itemObject.length; i++) {
+                            var index = parseInt(Object.keys(newProp.items)[i], 10);
+                            var property = Object.keys(newProp.items[index])[0];
+                            this.updateItems(property, oldProp.items[index], index, newProp.items[index]);
+                        }
+                    }
                     break;
-                }
                 case 'orientation':
                     this.updateOrientation();
                     break;
@@ -5798,11 +5880,5 @@ var Timeline = /** @__PURE__ @class */ (function (_super) {
     return Timeline;
 }(Component));
 
-/** Timeline export modules */
-
-/**
- *     Layout all modules
- */
-
-export { PaneProperties, Splitter, Panel, DashboardLayout, TimelineOrientation, TimelineAlign, TimelineItem, Timeline };
+export { DashboardLayout, PaneProperties, Panel, Splitter, Timeline, TimelineAlign, TimelineItem, TimelineOrientation };
 //# sourceMappingURL=ej2-layouts.es5.js.map