@syncfusion/ej2-layouts 24.2.3 → 25.1.35-579988

package/dist/es6/ej2-layouts.es2015.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 __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;
@@ -230,7 +230,9 @@ let Splitter = class Splitter extends Component {
             - staticPaneWidth - (this.border * 2);
         const avgDiffWidth = flexPaneWidth / flexPaneIndexes.length;
         for (let 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);
     }
@@ -1001,7 +1003,9 @@ let Splitter = class Splitter extends Component {
             if (paneCount - 1 === i) {
                 const 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);
+                    }
                 }
             }
         }
@@ -3223,10 +3227,14 @@ let DashboardLayout = class DashboardLayout extends Component {
             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);
+        }
     }
     updateGridLines() {
         if (this.element.querySelector('.e-dashboard-gridline-table')) {
@@ -3291,9 +3299,13 @@ let DashboardLayout = class DashboardLayout extends Component {
                 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();
@@ -5305,9 +5317,375 @@ DashboardLayout = __decorate$1([
  * 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);
+    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;
+};
+const ITEMLISTCONTAINER = 'e-timeline-items';
+const ITEMCONTAINER = 'e-timeline-item';
+const OPPOSITECONTENT = 'e-opposite-content';
+const DOTCONTAINER = 'e-dot-item';
+const DOTCONTENT = 'e-dot';
+const CONTENT = 'e-content';
+const ITEMCONNECTOR = 'e-connector';
+const VERTICAL = 'e-vertical';
+const HORIZONTAL = 'e-horizontal';
+const TIMELINEREVERSE = 'e-timeline-reverse';
+const RTL$1 = 'e-rtl';
+const DISABLED$1 = 'e-item-disabled';
+const 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.
+ */
+class TimelineItem extends ChildProperty {
+}
+__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);
+/**
+ * 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>
+ * ```
+ */
+let Timeline = class Timeline extends Component {
+    /**
+     * * 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
+     */
+    constructor(options, element) {
+        super(options, element);
+    }
+    preRender() {
+        if (!this.element.id) {
+            this.element.id = getUniqueID('e-' + this.getModuleName());
+        }
+    }
+    /**
+     * To get component name.
+     *
+     * @returns {string} - Module Name
+     * @private
+     */
+    getModuleName() {
+        return 'timeline';
+    }
+    /**
+     * This method is abstract member of the Component<HTMLElement>.
+     *
+     * @private
+     * @returns {string}
+     */
+    getPersistData() {
+        return this.addOnPersist([]);
+    }
+    render() {
+        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);
+    }
+    updateOrientation() {
+        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 = "") {
+        let cssClasses;
+        if (removeCss) {
+            cssClasses = removeCss.trim().split(' ');
+            this.element.classList.remove(...cssClasses);
+        }
+        if (addCss) {
+            cssClasses = addCss.trim().split(' ');
+            this.element.classList.add(...cssClasses);
+        }
+    }
+    updateRtl() {
+        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);
+        }
+    }
+    updateReverse() {
+        this.element.classList[this.reverse ? 'add' : 'remove'](TIMELINEREVERSE);
+    }
+    renderItems() {
+        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);
+                    }
+                }
+                timelineItem.appendChild(oppositeTextEle);
+                const dotContainer = this.createElement('div', { className: DOTCONTAINER });
+                const dotEleCss = item.dotCss ? DOTCONTENT + ' ' + item.dotCss.trim() : DOTCONTENT;
+                const dotEle = this.createElement('div', { className: dotEleCss });
+                dotContainer.appendChild(dotEle);
+                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);
+                    }
+                }
+                timelineItem.appendChild(contentEle);
+                if (item.cssClass) {
+                    timelineItem.classList.add(...item.cssClass.trim().split(' '));
+                }
+                if (item.disabled) {
+                    timelineItem.classList.add(DISABLED$1);
+                }
+            }
+            else {
+                this.renderItemContent(index, false, timelineItem);
+            }
+            const eventArgs = { element: timelineItem, index: index };
+            this.trigger('beforeItemRender', eventArgs, (args) => { this.timelineListEle.appendChild(args.element); });
+        }
+    }
+    updateTemplateFunction() {
+        this.templateFunction = this.template ? this.getTemplateFunction(this.template, false) : null;
+    }
+    renderItemContent(index, isrerender, timelineItem) {
+        const 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);
+            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);
+        }
+        this.renderReactTemplates();
+    }
+    removeItemContent(ele) {
+        ele.classList.remove(TEMPLATE);
+        const firstChild = ele.firstElementChild;
+        for (let 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
+     */
+    getTemplateFunction(template, notCompile = true) {
+        if (typeof template === 'string') {
+            let content = '';
+            try {
+                const 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);
+        }
+    }
+    removeItemElements() {
+        const listItems = this.timelineListEle.querySelectorAll('li');
+        for (let i = 0; i < listItems.length; i++) {
+            remove(listItems[parseInt(i.toString(), 10)]);
+        }
+    }
+    updateElementClassArray() {
+        const 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);
+    }
+    updateContent() {
+        if (this.isReact) {
+            this.clearTemplate(['timelineTemplate']);
+        }
+        for (let i = 0; i < this.items.length; i++) {
+            this.renderItemContent(i, true);
+        }
+    }
+    destroy() {
+        super.destroy();
+        // 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
+     */
+    onPropertyChanged(newProp, oldProp) {
+        for (const prop of Object.keys(newProp)) {
+            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);
+
+/** Timeline export modules */
+
 /**
  *     Layout all modules
  */
 
-export { PaneProperties, Splitter, Panel, DashboardLayout };
+export { PaneProperties, Splitter, Panel, DashboardLayout, TimelineOrientation, TimelineAlign, TimelineItem, Timeline };
 //# sourceMappingURL=ej2-layouts.es2015.js.map