@syncfusion/ej2-layouts 25.2.3 → 26.1.38

package/dist/es6/ej2-layouts.es2015.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 { ChildProperty, Property, Component, isNullOrUndefined, removeClass, addClass, Browser, EventHandler, SanitizeHtmlHelper, extend, detach, formatUnit, setStyleAttribute, select, selectAll, compile, Collection, Event, NotifyPropertyChanges, setValue, append, isUndefined, closest, Draggable, getValue, getUniqueID, attributes, remove } from '@syncfusion/ej2-base';
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -137,7 +137,6 @@ let Splitter = class Splitter extends Component {
                 case 'paneSettings': {
                     if (!(newProp.paneSettings instanceof Array && oldProp.paneSettings instanceof Array)) {
                         const paneCounts = Object.keys(newProp.paneSettings);
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         const isPaneContentChanged = paneCounts.some((count) => !isNullOrUndefined(newProp.paneSettings[count].content));
                         if (this.isReact && isPaneContentChanged) {
                             let cPaneCount = 0;
@@ -174,11 +173,14 @@ let Splitter = class Splitter extends Component {
                                         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': {
@@ -507,8 +509,12 @@ let Splitter = class Splitter extends Component {
         return attribute.slice(attribute.lastIndexOf('-') + 1);
     }
     setRTL(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);
+        }
     }
     setReversePane() {
         this.allPanes = this.allPanes.reverse();
@@ -529,9 +535,12 @@ let Splitter = class Splitter extends Component {
     }
     getPanesDimensions() {
         for (let 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);
+            }
         }
     }
     setCssClass(element, className) {
@@ -558,9 +567,12 @@ let Splitter = class Splitter extends Component {
                 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);
             }
         }
@@ -568,9 +580,12 @@ let Splitter = class Splitter extends Component {
             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);
+            }
         }
     }
     collapsibleModelUpdate(index) {
@@ -634,7 +649,6 @@ let Splitter = class Splitter extends Component {
                     this.updateIsCollapsed(index, this.targetArrows().collapseArrow, this.targetArrows().lastBarArrow);
                     for (let 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);
                         }
                     }
@@ -687,8 +701,12 @@ let Splitter = class Splitter extends Component {
         }
     }
     isEnabled(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);
+        }
     }
     setSeparatorSize(size) {
         const sizeValue = isNullOrUndefined(size) ? 'auto' : size + 'px';
@@ -770,8 +788,12 @@ let Splitter = class Splitter extends Component {
     }
     updateSeparatorSize(resizeHanlder) {
         const 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;
+        }
     }
     addResizeHandler(currentBar) {
         const resizeHanlder = this.createElement('div');
@@ -795,16 +817,28 @@ let Splitter = class Splitter extends Component {
     updateCollapseIcons(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]);
+                        }
                     }
                 }
             }
@@ -832,8 +866,7 @@ let Splitter = class Splitter extends Component {
         arrow1.setAttribute('type', 'button');
         arrow2.setAttribute('type', 'button');
         const size = isNullOrUndefined(this.separatorSize) ? '1px' : this.separatorSize + 'px';
-        // eslint-disable-next-line
-        const proxy = this;
+        const proxy =  this;
         if (this.orientation === 'Horizontal') {
             this.updateIconClass();
             addClass([arrow2], [NAVIGATE_ARROW, ARROW_LEFT, HIDE_ICON]);
@@ -873,8 +906,12 @@ let Splitter = class Splitter extends Component {
     }
     updateResizablePanes(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);
+        }
     }
     addSeparator(target) {
         const childCount = this.allPanes.length;
@@ -1026,9 +1063,9 @@ let Splitter = class Splitter extends Component {
         }
         for (let 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);
         }
         const diff = this.orientation === 'Horizontal' ? this.element.offsetWidth -
             ((this.border * 2) + totalWidth) :
@@ -1829,8 +1866,7 @@ let Splitter = class Splitter extends Component {
             this.updateSplitterSize();
         }
     }
-    // eslint-disable-next-line
-    validateMinRange(paneIndex, paneCurrentWidth, pane) {
+    validateMinRange(paneIndex, paneCurrentWidth) {
         let paneMinRange = null;
         let paneMinDimensions;
         let difference = 0;
@@ -1853,8 +1889,7 @@ let Splitter = class Splitter extends Component {
         }
         return isNullOrUndefined(validatedVal) ? paneCurrentWidth : validatedVal;
     }
-    // eslint-disable-next-line
-    validateMaxRange(paneIndex, paneCurrentWidth, pane) {
+    validateMaxRange(paneIndex, paneCurrentWidth) {
         let paneMaxRange = null;
         let paneMaxDimensions;
         let validatedVal;
@@ -1876,13 +1911,13 @@ let Splitter = class Splitter extends Component {
     }
     validateMinMaxValues() {
         //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);
     }
     equatePaneWidths() {
         let difference;
@@ -2027,7 +2062,6 @@ let Splitter = class Splitter extends Component {
     }
     // eslint-disable-next-line
     templateCompile(ele, cnt) {
-        // eslint-disable-next-line
         const tempEle = this.createElement('div');
         this.compileElement(tempEle, cnt, 'content');
         if (tempEle.childNodes.length !== 0) {
@@ -2037,7 +2071,6 @@ let Splitter = class Splitter extends Component {
         }
     }
     compileElement(ele, val, prop) {
-        // eslint-disable-next-line
         if (typeof (val) === 'string') {
             if (val[0] === '.' || val[0] === '#') {
                 const eleVal = document.querySelector(val);
@@ -2182,9 +2215,12 @@ let Splitter = class Splitter extends Component {
         }
     }
     addPaneClass(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;
     }
     removePaneOrders(paneClass) {
@@ -2336,10 +2372,6 @@ Splitter = __decorate([
     NotifyPropertyChanges
 ], Splitter);
 
-/**
- * splitter modules
- */
-
 var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -2608,9 +2640,11 @@ let DashboardLayout = class DashboardLayout extends Component {
         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;
         }
     }
@@ -2639,9 +2673,9 @@ let DashboardLayout = class DashboardLayout extends Component {
     updateOldRowColumn() {
         for (let i = 0; i < this.panels.length; i++) {
             const id = this.panels[i].id;
-            if (this.element.querySelector("[id='" + id + "']")) {
-                const row = parseInt(this.element.querySelector("[id='" + id + "']").getAttribute('data-row'), 10);
-                const col = parseInt(this.element.querySelector("[id='" + id + "']").getAttribute('data-col'), 10);
+            if (this.element.querySelector('[id=\'' + id + '\']')) {
+                const row = parseInt(this.element.querySelector('[id=\'' + id + '\']').getAttribute('data-row'), 10);
+                const col = parseInt(this.element.querySelector('[id=\'' + id + '\']').getAttribute('data-col'), 10);
                 this.oldRowCol[this.panels[i].id] = { row: row, col: col };
             }
             else {
@@ -2700,7 +2734,6 @@ let DashboardLayout = class DashboardLayout extends Component {
             }
         }
         else {
-            // eslint-disable-next-line
             const compilerFn = templateFn({}, this, prop, type, isStringTemplate, null, appendElement);
             if (compilerFn) {
                 for (const item of compilerFn) {
@@ -2779,7 +2812,6 @@ let DashboardLayout = class DashboardLayout extends Component {
             model.enabled = true;
         }
         panelElement.style.zIndex = '' + model.zIndex;
-        // eslint-disable-next-line
         const panelProp = new Panel(this, 'panels', model, true);
         this.panels.push(panelProp);
         this.oldRowCol[model.id] = { row: model.row, col: model.col };
@@ -2798,7 +2830,6 @@ let DashboardLayout = class DashboardLayout extends Component {
     }
     bindEvents() {
         this.refreshListener = this.refresh.bind(this);
-        // eslint-disable-next-line
         EventHandler.add(window, 'resize', this.refreshListener);
         this.resizeEvents();
     }
@@ -3211,7 +3242,6 @@ let DashboardLayout = class DashboardLayout extends Component {
         else {
             if (this.element.classList.contains(responsive)) {
                 removeClass([this.element], [responsive]);
-                // eslint-disable-next-line
                 const internalPanels = this.element.querySelectorAll(((this.element.id) ? '#' + this.element.id + ' > ' : '') + '.e-panel');
                 for (let i = 0; i < internalPanels.length; i++) {
                     const ele = internalPanels[i];
@@ -3282,7 +3312,6 @@ let DashboardLayout = class DashboardLayout extends Component {
         this.updatedRows = updatedPanel.length;
         for (let i = 0; i < updatedPanel.length; i++) {
             const panelElement = document.getElementById(updatedPanel[i].id);
-            // eslint-disable-next-line
             let updatedHeight;
             if (panelElement) {
                 setStyleAttribute(panelElement, { 'width': '100%' });
@@ -3291,8 +3320,7 @@ let DashboardLayout = class DashboardLayout extends Component {
                 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;
@@ -3329,7 +3357,9 @@ let DashboardLayout = class DashboardLayout extends Component {
     }
     setHeightWidth() {
         let heightValue;
-        let widthValue;
+        if (isNullOrUndefined(this.cellSpacing)) {
+            return;
+        }
         if (this.checkMediaQuery()) {
             let entirePanelsY = 0;
             for (let i = 0; i < this.panels.length; i++) {
@@ -3346,8 +3376,7 @@ let DashboardLayout = class DashboardLayout extends Component {
                 (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;
+        const widthValue = window.getComputedStyle(this.element).width;
         setStyleAttribute(this.element, { 'width': widthValue });
     }
     setHeightAndWidth(panelElement, panelModel) {
@@ -3447,7 +3476,6 @@ let DashboardLayout = class DashboardLayout extends Component {
         }
     }
     panelPropertyChange(panel, value) {
-        // eslint-disable-next-line
         panel.setProperties(value, true);
     }
     renderDashBoardCells(cells) {
@@ -3490,9 +3518,9 @@ let DashboardLayout = class DashboardLayout extends Component {
         for (let h = 0; h < sizeY; ++h) {
             for (let 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 + '\']'));
                 }
             }
         }
@@ -3785,8 +3813,6 @@ let DashboardLayout = class DashboardLayout extends Component {
                 exclusions.push(ele);
                 if (updatedCollision.length === 0) {
                     isRightAdjudtable = true;
-                    // eslint-disable-next-line no-self-assign
-                    this.spacedColumnValue = this.spacedColumnValue;
                     return isRightAdjudtable;
                 }
                 else {
@@ -3850,7 +3876,7 @@ let DashboardLayout = class DashboardLayout extends Component {
         }
         if (this.mainElement && this.oldRowCol !== this.cloneObject) {
             for (let i = 0; i < this.panels.length; i++) {
-                const element = this.element.querySelector("[id='" + this.panels[i].id + "']");
+                const element = this.element.querySelector('[id=\'' + this.panels[i].id + '\']');
                 if (element === this.mainElement) {
                     continue;
                 }
@@ -4057,11 +4083,9 @@ let DashboardLayout = class DashboardLayout extends Component {
             }
         }
         if (collisionModels.length > 0) {
-            // eslint-disable-next-line
-            const proxy = this;
             collisionModels.forEach((item1) => {
-                if (proxy.overlapElement.indexOf(item1) === -1) {
-                    proxy.overlapElement.push(item1);
+                if (this.overlapElement.indexOf(item1) === -1) {
+                    this.overlapElement.push(item1);
                 }
             });
             if (this.overlapElement && this.overlapElement.indexOf(element) !== -1) {
@@ -4176,12 +4200,10 @@ let DashboardLayout = class DashboardLayout extends Component {
         const panelModel = this.getCellInstance(clone.id);
         this.panelPropertyChange(panelModel, { row: updatedRow, col: colValue });
         if (collisionModels.length > 0) {
-            // eslint-disable-next-line
-            const proxy = this;
             this.overlapElement = [];
             this.shouldRestrict = true;
             collisionModels.forEach((item1) => {
-                proxy.overlapElement.push(item1);
+                this.overlapElement.push(item1);
             });
             const overlapElementRow1 = parseInt(clone.getAttribute('data-row'), 10);
             for (let m = 0; m < this.overlapElement.length; m++) {
@@ -4203,10 +4225,8 @@ let DashboardLayout = class DashboardLayout extends Component {
                     if (this.mainElement && collisionModels1.indexOf(this.mainElement) !== -1) {
                         collisionModels1.splice(collisionModels1.indexOf(this.mainElement), 1);
                     }
-                    // eslint-disable-next-line
-                    const proxy = this;
                     collisionModels1.forEach((item1) => {
-                        proxy.overlapElement.push(item1);
+                        this.overlapElement.push(item1);
                     });
                     if (collisionModels1.length > 0) {
                         this.updateRowColumn(rowVal, this.overlapElement, this.overlapSubElementClone[p]);
@@ -4270,14 +4290,14 @@ let DashboardLayout = class DashboardLayout extends Component {
     setXYAttributes(element, panelModel) {
         const 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);
@@ -4442,7 +4462,6 @@ let DashboardLayout = class DashboardLayout extends Component {
     }
     updateDragArea() {
         this.dragCollection.forEach((dragobj) => {
-            // eslint-disable-next-line
             dragobj.setDragArea();
         });
     }
@@ -4454,8 +4473,7 @@ let DashboardLayout = class DashboardLayout extends Component {
     }
     onDraggingStart(args) {
         const dragArgs = args;
-        // eslint-disable-next-line
-        this.trigger('dragStart', dragArgs, (dragArgs) => {
+        this.trigger('dragStart', dragArgs, () => {
             if (isNullOrUndefined(args.cancel)) {
                 args.cancel = false;
             }
@@ -4489,13 +4507,11 @@ let DashboardLayout = class DashboardLayout extends Component {
             removeClass([args.element], [dragging]);
         }
     }
-    // eslint-disable-next-line
     cloneModels(source, target) {
         if (target === undefined) {
             target = [];
         }
         for (let i = 0; i < source.length; i++) {
-            // tslint:disable-next-line
             if (!target[i]) {
                 target[i] = {};
             }
@@ -4539,7 +4555,7 @@ let DashboardLayout = class DashboardLayout extends Component {
                         this.mainElement = args.element;
                         const 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);
@@ -4655,7 +4671,6 @@ let DashboardLayout = class DashboardLayout extends Component {
             panel.id = 'layout_' + this.panelID.toString();
             this.panelID = this.panelID + 1;
         }
-        // eslint-disable-next-line
         const panelProp = new Panel(this, 'panels', panel, true);
         this.panels.push(panelProp);
         this.panelsInitialModel = this.cloneModels(this.panels);
@@ -4977,7 +4992,6 @@ let DashboardLayout = class DashboardLayout extends Component {
      * @returns void
      */
     destroy() {
-        // 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');
@@ -5077,8 +5091,7 @@ let DashboardLayout = class DashboardLayout extends Component {
      *
      * @private
      */
-    // eslint-disable-next-line
-    onPropertyChanged(newProp, oldProp) {
+    onPropertyChanged(newProp) {
         if (newProp.panels && newProp.panels.length > 0 && newProp.panels[0] instanceof Panel) {
             this.checkForIDValues(newProp.panels);
         }
@@ -5210,7 +5223,6 @@ let DashboardLayout = class DashboardLayout extends Component {
             for (const key of keys) {
                 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];
                     }
@@ -5314,10 +5326,6 @@ DashboardLayout = __decorate$1([
     NotifyPropertyChanges
 ], DashboardLayout);
 
-/**
- * dashboardlayout modules
- */
-
 var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -5425,7 +5433,7 @@ let Timeline = class Timeline extends Component {
     /**
      * To get component name.
      *
-     * @returns {string} - Module Name
+     * @returns {string} - It returns the current module name.
      * @private
      */
     getModuleName() {
@@ -5435,7 +5443,7 @@ let Timeline = class Timeline extends Component {
      * This method is abstract member of the Component<HTMLElement>.
      *
      * @private
-     * @returns {string}
+     * @returns {string} - It returns the persisted data.
      */
     getPersistData() {
         return this.addOnPersist([]);
@@ -5453,13 +5461,15 @@ let Timeline = class Timeline extends Component {
         this.element.appendChild(this.timelineListEle);
     }
     updateOrientation() {
-        const 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))) {
+            const orientation = this.orientation.toLowerCase();
+            if (orientation === 'horizontal' || orientation === 'vertical') {
+                this.element.classList.remove(HORIZONTAL, VERTICAL);
+                this.element.classList.add('e-' + orientation);
+            }
         }
     }
-    updateCssClass(addCss, removeCss = "") {
+    updateCssClass(addCss, removeCss = '') {
         let cssClasses;
         if (removeCss) {
             cssClasses = removeCss.trim().split(' ');
@@ -5474,29 +5484,26 @@ let Timeline = class Timeline extends Component {
         this.element.classList[this.enableRtl ? 'add' : 'remove'](RTL$1);
     }
     updateAlign() {
-        const 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))) {
+            const 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);
+            }
         }
     }
     updateReverse() {
         this.element.classList[this.reverse ? 'add' : 'remove'](TIMELINEREVERSE);
     }
     renderItems() {
+        this.haveOneSidecontent();
         for (let index = 0; index < this.items.length; index++) {
             const item = this.items[parseInt(index.toString(), 10)];
             const timelineItem = this.createElement('li', { className: ITEMCONTAINER + ' ' + ITEMCONNECTOR });
             if (!this.template) {
                 const oppositeTextEle = this.createElement('div', { className: OPPOSITECONTENT });
                 if (item.oppositeContent) {
-                    const 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);
                 const dotContainer = this.createElement('div', { className: DOTCONTAINER });
@@ -5506,13 +5513,7 @@ let Timeline = class Timeline extends Component {
                 timelineItem.appendChild(dotContainer);
                 const contentEle = this.createElement('div', { className: CONTENT });
                 if (item.content) {
-                    const 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) {
@@ -5529,6 +5530,36 @@ let Timeline = class Timeline extends Component {
             this.trigger('beforeItemRender', eventArgs, (args) => { this.timelineListEle.appendChild(args.element); });
         }
     }
+    haveOneSidecontent() {
+        let haveContent = false;
+        let haveOppContent = false;
+        for (let index = 0; index < this.items.length; index++) {
+            const 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');
+        }
+    }
+    updateItemContent(isContent, item, index, contentEle) {
+        const notCompile = !(this.isReact || this.isVue);
+        const 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);
+        }
+    }
     updateTemplateFunction() {
         this.templateFunction = this.template ? this.getTemplateFunction(this.template, false) : null;
     }
@@ -5538,8 +5569,12 @@ let Timeline = class Timeline extends Component {
             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);
+            }
             const 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);
         }
@@ -5556,6 +5591,7 @@ let Timeline = class Timeline extends Component {
      * 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
      */
@@ -5606,8 +5642,8 @@ let Timeline = class Timeline extends Component {
         super.destroy();
         // 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);
@@ -5615,6 +5651,42 @@ let Timeline = class Timeline extends Component {
         this.timelineListEle = null;
         this.updateElementClassArray();
     }
+    updateItems(newProp, oldPropItems, index, item) {
+        const timelineItemElements = this.timelineListEle.querySelectorAll('li');
+        let dotEle;
+        let contentEle;
+        let oppositeEle;
+        switch (newProp) {
+            case 'dotCss':
+                dotEle = timelineItemElements[parseInt(index.toString(), 10)].querySelector('.' + DOTCONTENT);
+                if (oldPropItems.dotCss !== '') {
+                    dotEle.classList.remove(...oldPropItems.dotCss.trim().split(' '));
+                }
+                dotEle.classList.add(...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 !== '') {
+                    timelineItemElements[parseInt(index.toString(), 10)].classList.remove(...oldPropItems.cssClass.trim().split(' '));
+                }
+                timelineItemElements[parseInt(index.toString(), 10)].classList.add(...item.cssClass.trim().split(' '));
+                break;
+        }
+    }
     /**
      * Called internally if any of the property value changed.
      *
@@ -5626,11 +5698,20 @@ let Timeline = class Timeline extends Component {
     onPropertyChanged(newProp, oldProp) {
         for (const prop of Object.keys(newProp)) {
             switch (prop) {
-                case 'items': {
-                    this.removeItemElements();
-                    this.renderItems();
+                case 'items':
+                    if (Array.isArray(newProp.items)) {
+                        this.removeItemElements();
+                        this.renderItems();
+                    }
+                    else {
+                        const itemObject = Object.keys(newProp.items);
+                        for (let i = 0; i < itemObject.length; i++) {
+                            const index = parseInt(Object.keys(newProp.items)[i], 10);
+                            const property = Object.keys(newProp.items[index])[0];
+                            this.updateItems(property, oldProp.items[index], index, newProp.items[index]);
+                        }
+                    }
                     break;
-                }
                 case 'orientation':
                     this.updateOrientation();
                     break;
@@ -5682,11 +5763,5 @@ Timeline = __decorate$2([
     NotifyPropertyChanges
 ], Timeline);
 
-/** 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.es2015.js.map