@syncfusion/ej2-layouts 25.2.3 → 26.1.38

package/src/splitter/splitter.js

@@ -161,8 +161,9 @@ var Splitter = /** @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++) {
@@ -198,11 +199,14 @@ var Splitter = /** @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': {
@@ -531,8 +535,12 @@ var Splitter = /** @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();
@@ -553,9 +561,12 @@ var Splitter = /** @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) {
@@ -582,9 +593,12 @@ var Splitter = /** @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);
             }
         }
@@ -592,9 +606,12 @@ var Splitter = /** @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) {
@@ -659,7 +676,6 @@ var Splitter = /** @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);
                         }
                     }
@@ -712,8 +728,12 @@ var Splitter = /** @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';
@@ -795,8 +815,12 @@ var Splitter = /** @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');
@@ -820,16 +844,28 @@ var Splitter = /** @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]);
+                        }
                     }
                 }
             }
@@ -857,8 +893,7 @@ var Splitter = /** @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 = null || this;
         if (this.orientation === 'Horizontal') {
             this.updateIconClass();
             addClass([arrow2], [NAVIGATE_ARROW, ARROW_LEFT, HIDE_ICON]);
@@ -898,8 +933,12 @@ var Splitter = /** @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;
@@ -1053,9 +1092,9 @@ var Splitter = /** @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) :
@@ -1861,8 +1900,7 @@ var Splitter = /** @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;
@@ -1885,8 +1923,7 @@ var Splitter = /** @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;
@@ -1908,13 +1945,13 @@ var Splitter = /** @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;
@@ -2216,9 +2253,12 @@ var Splitter = /** @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) {

package/src/timeline/timeline-model.d.ts

@@ -1,4 +1,4 @@
-import { Component, INotifyPropertyChanged, ChildProperty, Collection, BaseEventArgs, Event, EmitType, NotifyPropertyChanges, Property, getUniqueID, addClass, attributes, isNullOrUndefined, select, compile, remove, removeClass, append } from '@syncfusion/ej2-base';
+import { Component, INotifyPropertyChanged, ChildProperty, Collection, BaseEventArgs, Event, EmitType, NotifyPropertyChanges, Property, getUniqueID, attributes, select, compile, remove, removeClass, append, isNullOrUndefined } from '@syncfusion/ej2-base';
 import {TimelineOrientation,TimelineAlign,TimelineRenderingEventArgs} from "./timeline";
 import {ComponentModel} from '@syncfusion/ej2-base';
 
@@ -63,7 +63,7 @@ export interface TimelineModel extends ComponentModel{
      * The possible values are:
      * * Horizontal
      * * vertical
-     * 
+     *
      * {% codeBlock src='timeline/orientation/index.md' %}{% endcodeBlock %}
      *
      * @isenumeration true
@@ -80,7 +80,7 @@ export interface TimelineModel extends ComponentModel{
      * * After
      * * Alternate
      * * AlternateReverse
-     * 
+     *
      * {% codeBlock src='timeline/align/index.md' %}{% endcodeBlock %}
      *
      * @isenumeration true
@@ -104,7 +104,7 @@ export interface TimelineModel extends ComponentModel{
     cssClass?: string;
 
     /**
-     * Defines whether to show the timeline items in reverse order or not. 
+     * Defines whether to show the timeline items in reverse order or not.
      *
      * @default false
      */
@@ -112,7 +112,7 @@ export interface TimelineModel extends ComponentModel{
 
     /**
      * Defines the template content for each timeline item. The template context will contain the item model.
-     * 
+     *
      * {% codeBlock src='timeline/template/index.md' %}{% endcodeBlock %}
      *
      * @default ''

package/src/timeline/timeline.d.ts

@@ -178,7 +178,6 @@ export declare class Timeline extends Component<HTMLElement> implements INotifyP
     beforeItemRender: EmitType<TimelineRenderingEventArgs>;
     private timelineListEle;
     private templateFunction;
-    private isReact?;
     /**
      * * Constructor for creating the Timeline component.
      *
@@ -191,7 +190,7 @@ export declare class Timeline extends Component<HTMLElement> implements INotifyP
     /**
      * To get component name.
      *
-     * @returns {string} - Module Name
+     * @returns {string} - It returns the current module name.
      * @private
      */
     getModuleName(): string;
@@ -199,7 +198,7 @@ export declare class Timeline extends Component<HTMLElement> implements INotifyP
      * This method is abstract member of the Component<HTMLElement>.
      *
      * @private
-     * @returns {string}
+     * @returns {string} - It returns the persisted data.
      */
     protected getPersistData(): string;
     protected render(): void;
@@ -209,6 +208,8 @@ export declare class Timeline extends Component<HTMLElement> implements INotifyP
     protected updateAlign(): void;
     protected updateReverse(): void;
     private renderItems;
+    private haveOneSidecontent;
+    private updateItemContent;
     private updateTemplateFunction;
     private renderItemContent;
     private removeItemContent;
@@ -216,6 +217,7 @@ export declare class Timeline extends Component<HTMLElement> implements INotifyP
      * 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
      */
@@ -224,6 +226,7 @@ export declare class Timeline extends Component<HTMLElement> implements INotifyP
     private updateElementClassArray;
     private updateContent;
     destroy(): void;
+    private updateItems;
     /**
      * Called internally if any of the property value changed.
      *

package/src/timeline/timeline.js

@@ -17,7 +17,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, ChildProperty, Collection, Event, NotifyPropertyChanges, Property, getUniqueID, attributes, select, compile, remove, removeClass, append } from '@syncfusion/ej2-base';
+import { Component, ChildProperty, Collection, Event, NotifyPropertyChanges, Property, getUniqueID, attributes, select, compile, remove, removeClass, append, isNullOrUndefined } from '@syncfusion/ej2-base';
 var ITEMLISTCONTAINER = 'e-timeline-items';
 var ITEMCONTAINER = 'e-timeline-item';
 var OPPOSITECONTENT = 'e-opposite-content';
@@ -126,7 +126,7 @@ var Timeline = /** @class */ (function (_super) {
     /**
      * To get component name.
      *
-     * @returns {string} - Module Name
+     * @returns {string} - It returns the current module name.
      * @private
      */
     Timeline.prototype.getModuleName = function () {
@@ -136,7 +136,7 @@ var Timeline = /** @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([]);
@@ -154,14 +154,16 @@ var Timeline = /** @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) {
@@ -177,10 +179,12 @@ var Timeline = /** @class */ (function (_super) {
         this.element.classList[this.enableRtl ? 'add' : 'remove'](RTL);
     };
     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 () {
@@ -189,19 +193,14 @@ var Timeline = /** @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 });
@@ -211,13 +210,7 @@ var Timeline = /** @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) {
@@ -234,6 +227,36 @@ var Timeline = /** @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;
     };
@@ -243,8 +266,12 @@ var Timeline = /** @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);
         }
@@ -261,6 +288,7 @@ var Timeline = /** @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
      */
@@ -312,8 +340,8 @@ var Timeline = /** @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);
@@ -321,6 +349,43 @@ var Timeline = /** @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);
+                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.
      *
@@ -333,11 +398,20 @@ var Timeline = /** @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;

package/styles/avatar/_bootstrap5.3-definition.scss

@@ -0,0 +1,26 @@
+// Avatar Base
+$avatar-base-border-radius: 2px !default;
+$avatar-base-background-color: $content-bg-color-alt3 !default;
+$avatar-base-font-size: $text-sm !default;
+$avatar-base-width: 40px !default;
+$avatar-base-height: 40px !default;
+$avatar-base-line-height: 22px !default;
+$avatar-base-text-color: $icon-color !default;
+$avatar-base-font-weight: $font-weight-medium !default;
+$avatar-base-img-height: 100% !default;
+
+// Circle Avatar
+$avatar-circle-border-radius: 50% !default;
+
+// Avatar size
+$avatar-xsmall-font-size: $text-xxs !default;
+$avatar-small-font-size: $text-xs !default;
+$avatar-large-font-size: $text-lg !default;
+$avatar-xlarge-font-size: $text-xl !default;
+$avatar-large-border-radius: 4px !default;
+
+// Avatar Line Height
+$avatar-base-xsmall-line-height: 16px !default;
+$avatar-base-small-line-height: 18px !default;
+$avatar-base-large-line-height: 28px !default;
+$avatar-base-xlarge-line-height: 28px !default;

package/styles/avatar/_fluent2-definition.scss

@@ -0,0 +1,28 @@
+// Avatar Base
+$avatar-base-border-radius: 4px !default;
+$avatar-base-background-color: $content-bg-color-alt3 !default;
+$avatar-base-font-size: $text-sm !default;
+$avatar-base-width: 40px !default;
+$avatar-base-height: 40px !default;
+$avatar-base-line-height: 22px !default;
+$avatar-base-text-color: $content-text-color-alt2 !default;
+$avatar-base-font-weight: $font-weight-normal !default;
+$avatar-base-img-height: 100% !default;
+
+// Circle Avatar
+$avatar-circle-border-radius: 50% !default;
+
+// Avatar size
+$avatar-xsmall-font-size: $text-sm !default;
+$avatar-small-font-size: $text-base !default;
+$avatar-large-font-size: $text-xl !default;
+$avatar-xlarge-font-size: 22px !default;
+
+// Avatar Line Height
+$avatar-base-xsmall-line-height: 16px !default;
+$avatar-base-small-line-height: 18px !default;
+$avatar-base-large-line-height: 28px !default;
+$avatar-base-xlarge-line-height: 28px !default;
+
+//border
+$avatar-border: $dialog-border !default;