@syncfusion/ej2-layouts 24.2.3 → 25.1.35-579988

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

@@ -1,4 +1,4 @@
-import { Browser, ChildProperty, Collection, Component, Draggable, Event, EventHandler, NotifyPropertyChanges, Property, SanitizeHtmlHelper, addClass, append, closest, compile, detach, extend, formatUnit, getValue, isNullOrUndefined, isUndefined, removeClass, select, selectAll, setStyleAttribute, setValue } from '@syncfusion/ej2-base';
+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';
 
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -251,7 +251,9 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
             - staticPaneWidth - (this.border * 2);
         var avgDiffWidth = flexPaneWidth / flexPaneIndexes.length;
         for (var j = 0; j < flexPaneIndexes.length; j++) {
-            this.allPanes[flexPaneIndexes[j]].style.flexBasis = avgDiffWidth + 'px';
+            if (this.allPanes[flexPaneIndexes[j]].style.flexBasis !== '') {
+                this.allPanes[flexPaneIndexes[j]].style.flexBasis = avgDiffWidth + 'px';
+            }
         }
         this.allPanes[index].classList.add(STATIC_PANE);
     };
@@ -1025,7 +1027,9 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
             if (paneCount - 1 === i) {
                 var staticPaneCount = this.element.querySelectorAll('.' + STATIC_PANE).length;
                 if (staticPaneCount === paneCount) {
-                    removeClass([this.allPanes[i]], STATIC_PANE);
+                    if (this.allPanes[i].style.flexBasis === '') {
+                        removeClass([this.allPanes[i]], STATIC_PANE);
+                    }
                 }
             }
         }
@@ -3274,10 +3278,14 @@ var DashboardLayout = /** @__PURE__ @class */ (function (_super) {
             this.panelResponsiveUpdate();
             this.updateGridLines();
         }
-        this.removeResizeClasses(this.panelCollection);
-        this.setClasses(this.panelCollection);
+        if (!isNullOrUndefined(this.panelCollection)) {
+            this.removeResizeClasses(this.panelCollection);
+            this.setClasses(this.panelCollection);
+        }
         this.resizeEvents();
-        this.checkDragging(this.dragCollection);
+        if (!isNullOrUndefined(this.panelCollection)) {
+            this.checkDragging(this.dragCollection);
+        }
     };
     DashboardLayout.prototype.updateGridLines = function () {
         if (this.element.querySelector('.e-dashboard-gridline-table')) {
@@ -3349,9 +3357,13 @@ var DashboardLayout = /** @__PURE__ @class */ (function (_super) {
                 this.panelPropertyChange(updatedPanel[i], { row: i, col: 0 });
                 this.setPanelPosition(panelElement, updatedPanel[i].row, updatedPanel[i].col);
                 this.panelsSizeY = this.panelsSizeY + updatedPanel[i].sizeY;
-                this.setClasses(this.panelCollection);
-                this.checkDragging(this.dragCollection);
-                this.removeResizeClasses(this.panelCollection);
+                if (!isNullOrUndefined(this.panelCollection)) {
+                    this.setClasses(this.panelCollection);
+                    this.removeResizeClasses(this.panelCollection);
+                }
+                if (!isNullOrUndefined(this.dragCollection)) {
+                    this.checkDragging(this.dragCollection);
+                }
             }
         }
         this.updateRowHeight();
@@ -5395,9 +5407,401 @@ var DashboardLayout = /** @__PURE__ @class */ (function (_super) {
  * dashboardlayout modules
  */
 
+var __extends$2 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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);
+    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;
+};
+var ITEMLISTCONTAINER = 'e-timeline-items';
+var ITEMCONTAINER = 'e-timeline-item';
+var OPPOSITECONTENT = 'e-opposite-content';
+var DOTCONTAINER = 'e-dot-item';
+var DOTCONTENT = 'e-dot';
+var CONTENT = 'e-content';
+var ITEMCONNECTOR = 'e-connector';
+var VERTICAL = 'e-vertical';
+var HORIZONTAL = 'e-horizontal';
+var TIMELINEREVERSE = 'e-timeline-reverse';
+var RTL$1 = 'e-rtl';
+var DISABLED$1 = 'e-item-disabled';
+var TEMPLATE = 'e-item-template';
+/**
+ * Defines the orientation type of the Timeline.
+ */
+var TimelineOrientation;
+(function (TimelineOrientation) {
+    /**
+     * Items are displayed horizontally.
+     */
+    TimelineOrientation["Horizontal"] = "Horizontal";
+    /**
+     * Items are displayed vertically.
+     */
+    TimelineOrientation["Vertical"] = "Vertical";
+})(TimelineOrientation || (TimelineOrientation = {}));
+/**
+ * Specifies the alignment of item content within the Timeline.
+ */
+var TimelineAlign;
+(function (TimelineAlign) {
+    /**
+     * Aligns item content to the top and opposite content to the bottom when the Timeline is in a horizontal orientation, or the content to the left and opposite content to the right when the Timeline is in a vertical orientation.
+     */
+    TimelineAlign["Before"] = "Before";
+    /**
+     * Aligns item content to the bottom and opposite content to the top when the Timeline is in a horizontal orientation, or the content to the right and opposite content to the left when the Timeline is in a vertical orientation.
+     */
+    TimelineAlign["After"] = "After";
+    /**
+     * Aligns item content alternatively, regardless of the Timeline's orientation.
+     */
+    TimelineAlign["Alternate"] = "Alternate";
+    /**
+     * Aligns item content in alternate reverse, regardless of the Timeline's orientation.
+     */
+    TimelineAlign["AlternateReverse"] = "AlternateReverse";
+})(TimelineAlign || (TimelineAlign = {}));
+/**
+ * Specifies the items of the Timeline.
+ */
+var TimelineItem = /** @__PURE__ @class */ (function (_super) {
+    __extends$2(TimelineItem, _super);
+    function TimelineItem() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate$2([
+        Property('')
+    ], TimelineItem.prototype, "dotCss", void 0);
+    __decorate$2([
+        Property('')
+    ], TimelineItem.prototype, "content", void 0);
+    __decorate$2([
+        Property('')
+    ], TimelineItem.prototype, "oppositeContent", void 0);
+    __decorate$2([
+        Property(false)
+    ], TimelineItem.prototype, "disabled", void 0);
+    __decorate$2([
+        Property('')
+    ], TimelineItem.prototype, "cssClass", void 0);
+    return TimelineItem;
+}(ChildProperty));
+/**
+ * The Timeline component presents a series of events or activities in chronological order, allowing users to track the progression of time.
+ *
+ * ```html
+ * <div id="timeline"></div>
+ * ```
+ * ```typescript
+ * <script>
+ *   let timelineObj: Timeline = new Timeline({items : [{}, {}, {}, {}, {}]});
+ *   timelineObj.appendTo('#timeline');
+ * </script>
+ * ```
+ */
+var Timeline = /** @__PURE__ @class */ (function (_super) {
+    __extends$2(Timeline, _super);
+    /**
+     * * Constructor for creating the Timeline component.
+     *
+     * @param {TimelineModel} options - Specifies the Timeline model.
+     * @param {string | HTMLElement} element - Specifies the element to render as component.
+     * @private
+     */
+    function Timeline(options, element) {
+        return _super.call(this, options, element) || this;
+    }
+    Timeline.prototype.preRender = function () {
+        if (!this.element.id) {
+            this.element.id = getUniqueID('e-' + this.getModuleName());
+        }
+    };
+    /**
+     * To get component name.
+     *
+     * @returns {string} - Module Name
+     * @private
+     */
+    Timeline.prototype.getModuleName = function () {
+        return 'timeline';
+    };
+    /**
+     * This method is abstract member of the Component<HTMLElement>.
+     *
+     * @private
+     * @returns {string}
+     */
+    Timeline.prototype.getPersistData = function () {
+        return this.addOnPersist([]);
+    };
+    Timeline.prototype.render = function () {
+        attributes(this.element, { 'role': 'navigation', 'aria-label': this.element.id });
+        this.timelineListEle = this.createElement('ol', { className: ITEMLISTCONTAINER });
+        this.updateOrientation();
+        this.updateCssClass(this.cssClass);
+        this.updateAlign();
+        this.updateReverse();
+        this.updateRtl();
+        this.updateTemplateFunction();
+        this.renderItems();
+        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);
+        }
+    };
+    Timeline.prototype.updateCssClass = function (addCss, removeCss) {
+        if (removeCss === void 0) { removeCss = ""; }
+        var _a, _b;
+        var cssClasses;
+        if (removeCss) {
+            cssClasses = removeCss.trim().split(' ');
+            (_a = this.element.classList).remove.apply(_a, cssClasses);
+        }
+        if (addCss) {
+            cssClasses = addCss.trim().split(' ');
+            (_b = this.element.classList).add.apply(_b, cssClasses);
+        }
+    };
+    Timeline.prototype.updateRtl = function () {
+        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);
+        }
+    };
+    Timeline.prototype.updateReverse = function () {
+        this.element.classList[this.reverse ? 'add' : 'remove'](TIMELINEREVERSE);
+    };
+    Timeline.prototype.renderItems = function () {
+        var _this = this;
+        var _a;
+        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);
+                    }
+                }
+                timelineItem.appendChild(oppositeTextEle);
+                var dotContainer = this.createElement('div', { className: DOTCONTAINER });
+                var dotEleCss = item.dotCss ? DOTCONTENT + ' ' + item.dotCss.trim() : DOTCONTENT;
+                var dotEle = this.createElement('div', { className: dotEleCss });
+                dotContainer.appendChild(dotEle);
+                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);
+                    }
+                }
+                timelineItem.appendChild(contentEle);
+                if (item.cssClass) {
+                    (_a = timelineItem.classList).add.apply(_a, item.cssClass.trim().split(' '));
+                }
+                if (item.disabled) {
+                    timelineItem.classList.add(DISABLED$1);
+                }
+            }
+            else {
+                this.renderItemContent(index, false, timelineItem);
+            }
+            var eventArgs = { element: timelineItem, index: index };
+            this.trigger('beforeItemRender', eventArgs, function (args) { _this.timelineListEle.appendChild(args.element); });
+        }
+    };
+    Timeline.prototype.updateTemplateFunction = function () {
+        this.templateFunction = this.template ? this.getTemplateFunction(this.template, false) : null;
+    };
+    Timeline.prototype.renderItemContent = function (index, isrerender, timelineItem) {
+        var listItems = this.timelineListEle.querySelectorAll('li');
+        if (isrerender) {
+            this.removeItemContent(listItems[parseInt((index).toString(), 10)]);
+        }
+        if (this.template) {
+            isrerender ? listItems[parseInt((index).toString(), 10)].classList.add(TEMPLATE) :
+                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);
+        }
+        this.renderReactTemplates();
+    };
+    Timeline.prototype.removeItemContent = function (ele) {
+        ele.classList.remove(TEMPLATE);
+        var firstChild = ele.firstElementChild;
+        for (var i = 0; i < ele.childElementCount; i++) {
+            firstChild.remove();
+        }
+    };
+    /**
+     * Gets template content based on the template property value.
+     *
+     * @param {string | Function} template - Template property value.
+     * @returns {Function} - Return template function.
+     * @hidden
+     */
+    Timeline.prototype.getTemplateFunction = function (template, notCompile) {
+        if (notCompile === void 0) { notCompile = true; }
+        if (typeof template === 'string') {
+            var content = '';
+            try {
+                var tempEle = select(template);
+                if (tempEle) {
+                    //Return innerHTML incase of jsrenderer script else outerHTML
+                    content = tempEle.tagName === 'SCRIPT' ? tempEle.innerHTML : tempEle.outerHTML;
+                    notCompile = false;
+                }
+                else {
+                    content = template;
+                }
+            }
+            catch (e) {
+                content = template;
+            }
+            return notCompile ? content : compile(content);
+        }
+        else {
+            /* eslint-disable-next-line  @typescript-eslint/no-explicit-any */
+            return compile(template);
+        }
+    };
+    Timeline.prototype.removeItemElements = function () {
+        var listItems = this.timelineListEle.querySelectorAll('li');
+        for (var i = 0; i < listItems.length; i++) {
+            remove(listItems[parseInt(i.toString(), 10)]);
+        }
+    };
+    Timeline.prototype.updateElementClassArray = function () {
+        var classArray = [RTL$1, 'e-align-before', 'e-align-after', 'e-outline', 'e-fill', 'e-align-alternate',
+            'e-align-alternatereverse', TIMELINEREVERSE, HORIZONTAL, VERTICAL];
+        removeClass([this.element], classArray);
+    };
+    Timeline.prototype.updateContent = function () {
+        if (this.isReact) {
+            this.clearTemplate(['timelineTemplate']);
+        }
+        for (var i = 0; i < this.items.length; i++) {
+            this.renderItemContent(i, true);
+        }
+    };
+    Timeline.prototype.destroy = function () {
+        _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.clearTemplate();
+        if (this.timelineListEle) {
+            remove(this.timelineListEle);
+        }
+        this.timelineListEle = null;
+        this.updateElementClassArray();
+    };
+    /**
+     * Called internally if any of the property value changed.
+     *
+     * @param  {TimelineModel} newProp - Specifies new properties
+     * @param  {TimelineModel} oldProp - Specifies old properties
+     * @returns {void}
+     * @private
+     */
+    Timeline.prototype.onPropertyChanged = function (newProp, oldProp) {
+        for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
+            var prop = _a[_i];
+            switch (prop) {
+                case 'items': {
+                    this.removeItemElements();
+                    this.renderItems();
+                    break;
+                }
+                case 'orientation':
+                    this.updateOrientation();
+                    break;
+                case 'align':
+                    this.updateAlign();
+                    break;
+                case 'enableRtl':
+                    this.updateRtl();
+                    break;
+                case 'cssClass':
+                    this.updateCssClass(newProp.cssClass, oldProp.cssClass);
+                    break;
+                case 'reverse':
+                    this.element.classList[this.reverse ? 'add' : 'remove'](TIMELINEREVERSE);
+                    break;
+                case 'template':
+                    this.updateTemplateFunction();
+                    this.updateContent();
+                    break;
+            }
+        }
+    };
+    __decorate$2([
+        Property(TimelineOrientation.Vertical)
+    ], Timeline.prototype, "orientation", void 0);
+    __decorate$2([
+        Property(TimelineAlign.After)
+    ], Timeline.prototype, "align", void 0);
+    __decorate$2([
+        Collection([], TimelineItem)
+    ], Timeline.prototype, "items", void 0);
+    __decorate$2([
+        Property('')
+    ], Timeline.prototype, "cssClass", void 0);
+    __decorate$2([
+        Property(false)
+    ], Timeline.prototype, "reverse", void 0);
+    __decorate$2([
+        Property('')
+    ], Timeline.prototype, "template", void 0);
+    __decorate$2([
+        Event()
+    ], Timeline.prototype, "created", void 0);
+    __decorate$2([
+        Event()
+    ], Timeline.prototype, "beforeItemRender", void 0);
+    Timeline = __decorate$2([
+        NotifyPropertyChanges
+    ], Timeline);
+    return Timeline;
+}(Component));
+
+/** Timeline export modules */
+
 /**
  *     Layout all modules
  */
 
-export { PaneProperties, Splitter, Panel, DashboardLayout };
+export { PaneProperties, Splitter, Panel, DashboardLayout, TimelineOrientation, TimelineAlign, TimelineItem, Timeline };
 //# sourceMappingURL=ej2-layouts.es5.js.map