@syncfusion/ej2-navigations 16.4.47 → 16.4.52-46585

package/src/accordion/accordion.js

@@ -4,7 +4,7 @@ var __extends = (this && this.__extends) || (function () {
             ({ __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; }
@@ -17,12 +17,13 @@ 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;
 };
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Component, EventHandler, Property, Event, KeyboardEvents, rippleEffect } from '@syncfusion/ej2-base';
 import { getUniqueID, compile as templateCompiler } from '@syncfusion/ej2-base';
-import { addClass, isVisible, closest, attributes, classList, detach, select } from '@syncfusion/ej2-base';
+import { isVisible, closest, attributes, detach, select, addClass, removeClass, append } from '@syncfusion/ej2-base';
 import { NotifyPropertyChanges, ChildProperty, Collection, Animation } from '@syncfusion/ej2-base';
 import { setStyleAttribute as setStyle, Complex } from '@syncfusion/ej2-base';
-import { isNullOrUndefined as isNOU, formatUnit, selectAll } from '@syncfusion/ej2-base';
+import { isNullOrUndefined as isNOU, formatUnit, selectAll, SanitizeHtmlHelper, isRippleEnabled } from '@syncfusion/ej2-base';
 var CLS_ACRDN_ROOT = 'e-acrdn-root';
 var CLS_ROOT = 'e-accordion';
 var CLS_ITEM = 'e-acrdn-item';
@@ -46,6 +47,10 @@ var CLS_DISABLE = 'e-overlay';
 var CLS_TOGANIMATE = 'e-toggle-animation';
 var CLS_NEST = 'e-nested';
 var CLS_EXPANDSTATE = 'e-expand-state';
+var CLS_CONTAINER = 'e-accordion-container';
+/**
+ * Objects used for configuring the Accordion expanding item action properties.
+ */
 var AccordionActionSettings = /** @class */ (function (_super) {
     __extends(AccordionActionSettings, _super);
     function AccordionActionSettings() {
@@ -63,6 +68,9 @@ var AccordionActionSettings = /** @class */ (function (_super) {
     return AccordionActionSettings;
 }(ChildProperty));
 export { AccordionActionSettings };
+/**
+ * Objects used for configuring the Accordion animation properties.
+ */
 var AccordionAnimationSettings = /** @class */ (function (_super) {
     __extends(AccordionAnimationSettings, _super);
     function AccordionAnimationSettings() {
@@ -86,20 +94,29 @@ var AccordionItem = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     __decorate([
-        Property(undefined)
+        Property(null)
     ], AccordionItem.prototype, "content", void 0);
     __decorate([
-        Property(undefined)
+        Property(null)
     ], AccordionItem.prototype, "header", void 0);
     __decorate([
-        Property(undefined)
+        Property(null)
     ], AccordionItem.prototype, "cssClass", void 0);
     __decorate([
-        Property(undefined)
+        Property(null)
     ], AccordionItem.prototype, "iconCss", void 0);
     __decorate([
         Property(false)
     ], AccordionItem.prototype, "expanded", void 0);
+    __decorate([
+        Property(true)
+    ], AccordionItem.prototype, "visible", void 0);
+    __decorate([
+        Property(false)
+    ], AccordionItem.prototype, "disabled", void 0);
+    __decorate([
+        Property()
+    ], AccordionItem.prototype, "id", void 0);
     return AccordionItem;
 }(ChildProperty));
 export { AccordionItem };
@@ -117,8 +134,9 @@ var Accordion = /** @class */ (function (_super) {
     __extends(Accordion, _super);
     /**
      * Initializes a new instance of the Accordion class.
-     * @param options  - Specifies Accordion model properties as options.
-     * @param element  - Specifies the element that is rendered as an Accordion.
+     *
+     * @param {AccordionModel} options  - Specifies Accordion model properties as options.
+     * @param {string | HTMLElement} element  - Specifies the element that is rendered as an Accordion.
      */
     function Accordion(options, element) {
         var _this = _super.call(this, options, element) || this;
@@ -131,38 +149,40 @@ var Accordion = /** @class */ (function (_super) {
             enter: 'enter',
             space: 'space',
             home: 'home',
-            end: 'end',
+            end: 'end'
         };
         return _this;
     }
     /**
      * Removes the control from the DOM and also removes all its related events.
-     * @returns void
+     *
+     * @returns {void}
      */
     Accordion.prototype.destroy = function () {
-        var _this = this;
+        if (this.isReact || this.isAngular || this.isVue) {
+            this.clearTemplate();
+        }
         var ele = this.element;
         _super.prototype.destroy.call(this);
         this.unwireEvents();
         this.isDestroy = true;
-        this.templateEle.forEach(function (eleStr) {
-            if (!isNOU(_this.element.querySelector(eleStr))) {
-                document.body.appendChild(_this.element.querySelector(eleStr)).style.display = 'none';
-            }
+        this.restoreContent(null);
+        [].slice.call(ele.children).forEach(function (el) {
+            ele.removeChild(el);
         });
-        while (ele.firstChild) {
-            ele.removeChild(ele.firstChild);
-        }
         if (this.trgtEle) {
-            while (this.ctrlTem.firstChild) {
-                ele.appendChild(this.ctrlTem.firstChild);
+            this.trgtEle = null;
+            while (this.ctrlTem.firstElementChild) {
+                ele.appendChild(this.ctrlTem.firstElementChild);
             }
+            this.ctrlTem = null;
         }
         ele.classList.remove(CLS_ACRDN_ROOT);
         ele.removeAttribute('style');
-        ['aria-disabled', 'aria-multiselectable', 'role', 'data-ripple'].forEach(function (attrb) {
-            _this.element.removeAttribute(attrb);
-        });
+        this.element.removeAttribute('data-ripple');
+        if (!this.isNested && isRippleEnabled) {
+            this.removeRippleEffect();
+        }
     };
     Accordion.prototype.preRender = function () {
         var nested = closest(this.element, '.' + CLS_CONTENT);
@@ -171,9 +191,11 @@ var Accordion = /** @class */ (function (_super) {
         if (!this.isDestroy) {
             this.isDestroy = false;
         }
-        if (!isNOU(nested)) {
-            nested.classList.add(CLS_NEST);
-            this.isNested = true;
+        if (nested && nested.firstElementChild && nested.firstElementChild.firstElementChild) {
+            if (nested.firstElementChild.firstElementChild.classList.contains(CLS_ROOT)) {
+                nested.classList.add(CLS_NEST);
+                this.isNested = true;
+            }
         }
         else {
             this.element.classList.add(CLS_ACRDN_ROOT);
@@ -181,9 +203,6 @@ var Accordion = /** @class */ (function (_super) {
         if (this.enableRtl) {
             this.add(this.element, CLS_RTL);
         }
-        if (!this.enablePersistence || isNOU(this.expandedItems)) {
-            this.expandedItems = [];
-        }
     };
     Accordion.prototype.add = function (ele, val) {
         ele.classList.add(val);
@@ -193,26 +212,27 @@ var Accordion = /** @class */ (function (_super) {
     };
     /**
      * To initialize the control rendering
+     *
      * @private
+     * @returns {void}
      */
     Accordion.prototype.render = function () {
+        this.initializeHeaderTemplate();
+        this.initializeItemTemplate();
         this.initialize();
         this.renderControl();
         this.wireEvents();
+        this.renderComplete();
     };
     Accordion.prototype.initialize = function () {
         var width = formatUnit(this.width);
         var height = formatUnit(this.height);
         setStyle(this.element, { 'width': width, 'height': height });
-        var ariaAttr = {
-            'aria-disabled': 'false', 'role': 'presentation', 'aria-multiselectable': 'true'
-        };
-        if (this.expandedItems.length > 0) {
-            this.initExpand = this.expandedItems;
+        if (isNOU(this.initExpand)) {
+            this.initExpand = [];
         }
-        attributes(this.element, ariaAttr);
-        if (this.expandMode === 'Single') {
-            this.element.setAttribute('aria-multiselectable', 'false');
+        if (this.expandedIndices.length > 0) {
+            this.initExpand = this.expandedIndices;
         }
     };
     Accordion.prototype.renderControl = function () {
@@ -220,6 +240,18 @@ var Accordion = /** @class */ (function (_super) {
         this.renderItems();
         this.initItemExpand();
     };
+    Accordion.prototype.wireFocusEvents = function () {
+        var acrdItem = [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM));
+        for (var _i = 0, acrdItem_1 = acrdItem; _i < acrdItem_1.length; _i++) {
+            var item = acrdItem_1[_i];
+            var headerEle = item.querySelector('.' + CLS_HEADER);
+            if (item.childElementCount > 0 && headerEle) {
+                EventHandler.clearEvents(headerEle);
+                EventHandler.add(headerEle, 'focus', this.focusIn, this);
+                EventHandler.add(headerEle, 'blur', this.focusOut, this);
+            }
+        }
+    };
     Accordion.prototype.unwireEvents = function () {
         EventHandler.remove(this.element, 'click', this.clickHandler);
         if (!isNOU(this.keyModule)) {
@@ -229,7 +261,7 @@ var Accordion = /** @class */ (function (_super) {
     Accordion.prototype.wireEvents = function () {
         EventHandler.add(this.element, 'click', this.clickHandler, this);
         if (!this.isNested && !this.isDestroy) {
-            rippleEffect(this.element, { selector: '.' + CLS_HEADER });
+            this.removeRippleEffect = rippleEffect(this.element, { selector: '.' + CLS_HEADER });
         }
         if (!this.isNested) {
             this.keyModule = new KeyboardEvents(this.element, {
@@ -239,6 +271,38 @@ var Accordion = /** @class */ (function (_super) {
             });
         }
     };
+    Accordion.prototype.templateParser = function (template) {
+        if (template) {
+            try {
+                if (document.querySelectorAll(template).length) {
+                    return templateCompiler(document.querySelector(template).innerHTML.trim());
+                }
+                else {
+                    return templateCompiler(template);
+                }
+            }
+            catch (error) {
+                return templateCompiler(template);
+            }
+        }
+        return undefined;
+    };
+    Accordion.prototype.initializeHeaderTemplate = function () {
+        if (this.headerTemplate) {
+            this.headerTemplateFn = this.templateParser(this.headerTemplate);
+        }
+    };
+    Accordion.prototype.initializeItemTemplate = function () {
+        if (this.itemTemplate) {
+            this.itemTemplateFn = this.templateParser(this.itemTemplate);
+        }
+    };
+    Accordion.prototype.getHeaderTemplate = function () {
+        return this.headerTemplateFn;
+    };
+    Accordion.prototype.getItemTemplate = function () {
+        return this.itemTemplateFn;
+    };
     Accordion.prototype.focusIn = function (e) {
         e.target.parentElement.classList.add(CLS_ITEMFOCUS);
     };
@@ -246,41 +310,27 @@ var Accordion = /** @class */ (function (_super) {
         e.target.parentElement.classList.remove(CLS_ITEMFOCUS);
     };
     Accordion.prototype.ctrlTemplate = function () {
-        var _this = this;
         this.ctrlTem = this.element.cloneNode(true);
-        var innerEles = this.element.children;
-        var content;
-        addClass([].slice.call(innerEles), [CLS_ITEM]);
+        var innerEles;
+        var rootEle = select('.' + CLS_CONTAINER, this.element);
+        if (rootEle) {
+            innerEles = rootEle.children;
+        }
+        else {
+            innerEles = this.element.children;
+        }
+        var items = [];
         [].slice.call(innerEles).forEach(function (el) {
-            el.id = getUniqueID('acrdn_item');
-            if (el.children.length > 0) {
-                _this.add(el.children[0], CLS_HEADER);
-                var header = el.children[0];
-                attributes(header, { 'tabindex': '0', 'role': 'heading', 'aria-level': innerEles.length.toString() });
-                header.id = getUniqueID('acrdn_header');
-                EventHandler.add(header, 'focus', _this.focusIn, _this);
-                EventHandler.add(header, 'blur', _this.focusOut, _this);
-                var headerEle = header.firstElementChild;
-                if (headerEle) {
-                    headerEle.classList.add(CLS_HEADERCTN);
-                }
-                content = el.children[1];
-                if (content) {
-                    content.id = getUniqueID('acrdn_panel');
-                    header.setAttribute('aria-controls', content.id);
-                    content.style.display = '';
-                    el.classList.add(CLS_SLCT);
-                    el.children[0].appendChild(_this.toggleIconGenerate());
-                    classList(content, [CLS_CONTENT, CLS_CTNHIDE], []);
-                    attributes(content, { 'aria-labelledby': header.id, 'aria-hidden': 'true' });
-                    content = content.firstElementChild;
-                    if (content) {
-                        content.classList.add(CLS_CTENT);
-                        content.style.display = '';
-                    }
-                }
-            }
+            items.push({
+                header: (el.childElementCount > 0 && el.children[0]) ? (el.children[0]) : '',
+                content: (el.childElementCount > 1 && el.children[1]) ? (el.children[1]) : ''
+            });
+            el.parentNode.removeChild(el);
         });
+        if (rootEle) {
+            this.element.removeChild(rootEle);
+        }
+        this.setProperties({ items: items }, true);
     };
     Accordion.prototype.toggleIconGenerate = function () {
         var tglIcon = this.createElement('div', { className: CLS_TOOGLEICN });
@@ -298,37 +348,52 @@ var Accordion = /** @class */ (function (_super) {
         }
         else {
             for (var i = 0; i < len; i++) {
-                this.expandItem(true, this.initExpand[i]);
+                this.expandItem(true, this.initExpand[parseInt(i.toString(), 10)]);
             }
         }
+        if (this.isReact) {
+            this.renderReactTemplates();
+        }
     };
     Accordion.prototype.renderItems = function () {
         var _this = this;
         var ele = this.element;
         var innerItem;
-        if (isNOU(this.initExpand)) {
-            this.initExpand = [];
-        }
-        var items = this.items;
+        var innerDataSourceItem;
         if (!isNOU(this.trgtEle)) {
             this.ctrlTemplate();
         }
-        else if (ele && items.length > 0) {
-            items.forEach(function (item, index) {
-                innerItem = _this.renderInnerItem(item, index);
-                ele.appendChild(innerItem);
-                if (innerItem.childElementCount > 0) {
-                    EventHandler.add(innerItem.querySelector('.' + CLS_HEADER), 'focus', _this.focusIn, _this);
-                    EventHandler.add(innerItem.querySelector('.' + CLS_HEADER), 'blur', _this.focusOut, _this);
+        if (this.dataSource.length > 0) {
+            this.dataSource.forEach(function (item, index) {
+                innerDataSourceItem = _this.renderInnerItem(item, index);
+                ele.appendChild(innerDataSourceItem);
+                if (innerDataSourceItem.childElementCount > 0) {
+                    EventHandler.add(innerDataSourceItem.querySelector('.' + CLS_HEADER), 'focus', _this.focusIn, _this);
+                    EventHandler.add(innerDataSourceItem.querySelector('.' + CLS_HEADER), 'blur', _this.focusOut, _this);
                 }
             });
         }
+        else {
+            var items = this.items;
+            if (ele && items.length > 0) {
+                items.forEach(function (item, index) {
+                    innerItem = _this.renderInnerItem(item, index);
+                    ele.appendChild(innerItem);
+                    if (innerItem.childElementCount > 0) {
+                        EventHandler.add(innerItem.querySelector('.' + CLS_HEADER), 'focus', _this.focusIn, _this);
+                        EventHandler.add(innerItem.querySelector('.' + CLS_HEADER), 'blur', _this.focusOut, _this);
+                    }
+                });
+            }
+        }
+        if (this.isReact) {
+            this.renderReactTemplates();
+        }
     };
     Accordion.prototype.clickHandler = function (e) {
-        var _this = this;
         var trgt = e.target;
+        var items = this.getItems();
         var eventArgs = {};
-        var index;
         var tglIcon;
         var acrdEle = closest(trgt, '.' + CLS_ROOT);
         if (acrdEle !== this.element) {
@@ -346,20 +411,33 @@ var Accordion = /** @class */ (function (_super) {
             tglIcon = select('.' + CLS_TOOGLEICN, acrdnHdr);
         }
         var acrdnCtnItem;
-        if (acrdnCtn) {
+        if (acrdnHdr) {
+            acrdnCtnItem = closest(acrdnHdr, '.' + CLS_ITEM);
+        }
+        else if (acrdnCtn) {
             acrdnCtnItem = closest(acrdnCtn, '.' + CLS_ITEM);
         }
-        var acrdActive = [];
-        index = this.getIndexByItem(acrdnItem);
+        var index = this.getIndexByItem(acrdnItem);
         if (acrdnCtnItem) {
-            eventArgs.item = this.items[this.getIndexByItem(acrdnCtnItem)];
+            eventArgs.item = items[this.getIndexByItem(acrdnCtnItem)];
         }
         eventArgs.originalEvent = e;
-        var ctnCheck = !isNOU(tglIcon) && isNOU(this.trgtEle) && acrdnItem.childElementCount <= 1;
+        var ctnCheck = !isNOU(tglIcon) && acrdnItem.childElementCount <= 1;
         if (ctnCheck && (isNOU(acrdnCtn) || !isNOU(select('.' + CLS_HEADER + ' .' + CLS_TOOGLEICN, acrdnCtnItem)))) {
             acrdnItem.appendChild(this.contentRendering(index));
             this.ariaAttrUpdate(acrdnItem);
+            this.afterContentRender(trgt, eventArgs, acrdnItem, acrdnHdr, acrdnCtn, acrdnCtnItem);
         }
+        else {
+            this.afterContentRender(trgt, eventArgs, acrdnItem, acrdnHdr, acrdnCtn, acrdnCtnItem);
+        }
+        if (this.isReact) {
+            this.renderReactTemplates();
+        }
+    };
+    Accordion.prototype.afterContentRender = function (trgt, eventArgs, acrdnItem, acrdnHdr, acrdnCtn, acrdnCtnItem) {
+        var _this = this;
+        var acrdActive = [];
         this.trigger('clicked', eventArgs);
         var cntclkCheck = (acrdnCtn && !isNOU(select('.e-target', acrdnCtn)));
         var inlineAcrdnSel = '.' + CLS_CONTENT + ' .' + CLS_ROOT;
@@ -370,7 +448,9 @@ var Accordion = /** @class */ (function (_super) {
         if (trgt.classList.contains(CLS_CONTENT) || trgt.classList.contains(CLS_CTENT) || cntclkCheck) {
             return;
         }
-        [].slice.call(this.element.children).forEach(function (el) {
+        var acrdcontainer = this.element.querySelector('.' + CLS_CONTAINER);
+        var acrdnchild = (acrdcontainer) ? acrdcontainer.children : this.element.children;
+        [].slice.call(acrdnchild).forEach(function (el) {
             if (el.classList.contains(CLS_ACTIVE)) {
                 acrdActive.push(el);
             }
@@ -452,28 +532,42 @@ var Accordion = /** @class */ (function (_super) {
                 else {
                     trgt.click();
                 }
+                e.preventDefault();
                 break;
             case 'home':
             case 'end':
                 clst = e.action === 'home' ? root.firstElementChild.children[0] : root.lastElementChild.children[0];
                 clst.focus();
+                e.preventDefault();
                 break;
         }
     };
     Accordion.prototype.headerEleGenerate = function () {
         var header = this.createElement('div', { className: CLS_HEADER, id: getUniqueID('acrdn_header') });
         var ariaAttr = {
-            'tabindex': '0', 'role': 'heading', 'aria-expanded': 'false', 'aria-selected': 'false',
-            'aria-disabled': 'false', 'aria-level': this.items.length.toString()
+            'tabindex': '0', 'role': 'button', 'aria-disabled': 'false', 'aria-expanded': 'false'
         };
         attributes(header, ariaAttr);
         return header;
     };
     Accordion.prototype.renderInnerItem = function (item, index) {
-        var innerEle;
-        innerEle = this.createElement('div', { className: CLS_ITEM });
-        innerEle.id = getUniqueID('acrdn_item');
+        var innerEle = this.createElement('div', {
+            className: CLS_ITEM, id: item.id || getUniqueID('acrdn_item')
+        });
+        if (this.headerTemplate) {
+            var ctnEle = this.headerEleGenerate();
+            var hdrEle = this.createElement('div', { className: CLS_HEADERCTN });
+            ctnEle.appendChild(hdrEle);
+            append(this.getHeaderTemplate()(item, this, 'headerTemplate', this.element.id + '_headerTemplate', false), hdrEle);
+            innerEle.appendChild(ctnEle);
+            ctnEle.appendChild(this.toggleIconGenerate());
+            this.add(innerEle, CLS_SLCT);
+            return innerEle;
+        }
         if (item.header && this.angularnativeCondiCheck(item, 'header')) {
+            if (this.enableHtmlSanitizer && typeof (item.header) === 'string') {
+                item.header = SanitizeHtmlHelper.sanitize(item.header);
+            }
             var ctnEle = this.headerEleGenerate();
             var hdrEle = this.createElement('div', { className: CLS_HEADERCTN });
             ctnEle.appendChild(hdrEle);
@@ -487,7 +581,13 @@ var Accordion = /** @class */ (function (_super) {
             }
         }
         if (item.cssClass) {
-            innerEle.classList.add(item.cssClass);
+            addClass([innerEle], item.cssClass.split(' '));
+        }
+        if (item.disabled) {
+            addClass([innerEle], CLS_DISABLE);
+        }
+        if (item.visible === false) {
+            addClass([innerEle], CLS_ITEMHIDE);
         }
         if (item.iconCss) {
             var hdrIcnEle = this.createElement('div', { className: CLS_HEADERICN });
@@ -533,23 +633,49 @@ var Accordion = /** @class */ (function (_super) {
             return true;
         }
     };
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     Accordion.prototype.fetchElement = function (ele, value, index, isHeader) {
         var templateFn;
         var temString;
         try {
-            if (document.querySelectorAll(value).length) {
+            if (document.querySelectorAll(value).length && value !== 'Button') {
                 var eleVal = document.querySelector(value);
                 temString = eleVal.outerHTML.trim();
                 ele.appendChild(eleVal);
                 eleVal.style.display = '';
             }
+            else {
+                templateFn = templateCompiler(value);
+            }
         }
         catch (e) {
-            templateFn = templateCompiler(value);
+            if (typeof (value) === 'string') {
+                ele.innerHTML = SanitizeHtmlHelper.sanitize(value);
+            }
+            else if (!isNOU(this.trgtEle) && (value instanceof (HTMLElement))) {
+                ele.appendChild(value);
+                ele.firstElementChild.style.display = '';
+            }
+            else {
+                templateFn = templateCompiler(value);
+            }
         }
         var tempArray;
         if (!isNOU(templateFn)) {
-            tempArray = templateFn();
+            if (this.isReact) {
+                this.renderReactTemplates();
+            }
+            var templateProps = void 0;
+            var templateName = void 0;
+            if (ele.classList.contains(CLS_HEADERCTN)) {
+                templateProps = this.element.id + index + '_header';
+                templateName = 'header';
+            }
+            else if (ele.classList.contains(CLS_CTENT)) {
+                templateProps = this.element.id + index + '_content';
+                templateName = 'content';
+            }
+            tempArray = templateFn({}, this, templateName, templateProps, this.isStringTemplate);
         }
         if (!isNOU(tempArray) && tempArray.length > 0 && !(isNOU(tempArray[0].tagName) && tempArray.length === 1)) {
             [].slice.call(tempArray).forEach(function (el) {
@@ -560,10 +686,12 @@ var Accordion = /** @class */ (function (_super) {
             });
         }
         else if (ele.childElementCount === 0) {
-            ele.innerHTML = value;
+            ele.innerHTML = SanitizeHtmlHelper.sanitize(value);
         }
         if (!isNOU(temString)) {
-            this.templateEle.push(value);
+            if (this.templateEle.indexOf(value) === -1) {
+                this.templateEle.push(value);
+            }
         }
         return ele;
     };
@@ -572,17 +700,31 @@ var Accordion = /** @class */ (function (_super) {
         var content = select('.' + CLS_CONTENT, itemEle);
         header.setAttribute('aria-controls', content.id);
         content.setAttribute('aria-labelledby', header.id);
+        content.setAttribute('role', 'region');
     };
     Accordion.prototype.contentRendering = function (index) {
-        var content = this.items[index].content;
         var itemcnt = this.createElement('div', { className: CLS_CONTENT + ' ' + CLS_CTNHIDE, id: getUniqueID('acrdn_panel') });
         attributes(itemcnt, { 'aria-hidden': 'true' });
         var ctn = this.createElement('div', { className: CLS_CTENT });
-        itemcnt.appendChild(this.fetchElement(ctn, content, index, false));
+        if (this.dataSource.length > 0) {
+            if (this.isReact) {
+                this.renderReactTemplates();
+            }
+            append(this.getItemTemplate()(this.dataSource[parseInt(index.toString(), 10)], this, 'itemTemplate', this.element.id + '_itemTemplate', false), ctn);
+            itemcnt.appendChild(ctn);
+        }
+        else {
+            if (this.enableHtmlSanitizer && typeof (this.items[parseInt(index.toString(), 10)].content)) {
+                this.items[parseInt(index.toString(), 10)].content =
+                    SanitizeHtmlHelper.sanitize(this.items[parseInt(index.toString(), 10)].content);
+            }
+            itemcnt.appendChild(this.fetchElement(ctn, this.items[parseInt(index.toString(), 10)].content, index, false));
+        }
         return itemcnt;
     };
     Accordion.prototype.expand = function (trgt) {
-        var eventArgs;
+        var _this = this;
+        var items = this.getItems();
         var trgtItemEle = closest(trgt, '.' + CLS_ITEM);
         if (isNOU(trgt) || (isVisible(trgt) && trgt.getAttribute('e-animate') !== 'true') || trgtItemEle.classList.contains(CLS_DISABLE)) {
             return;
@@ -595,40 +737,40 @@ var Accordion = /** @class */ (function (_super) {
             timingFunction: this.animation.expand.easing
         };
         var icon = select('.' + CLS_TOOGLEICN, trgtItemEle).firstElementChild;
-        eventArgs = { element: trgtItemEle,
-            item: this.items[this.getIndexByItem(trgtItemEle)],
+        var eventArgs = {
+            element: trgtItemEle,
+            item: items[this.getIndexByItem(trgtItemEle)],
             index: this.getIndexByItem(trgtItemEle),
             content: trgtItemEle.querySelector('.' + CLS_CONTENT),
-            isExpanded: true };
-        var eff = animation.name;
-        this.trigger('expanding', eventArgs);
-        if (eventArgs.cancel) {
-            return;
-        }
-        icon.classList.add(CLS_TOGANIMATE);
-        this.expandedItemsPush(trgtItemEle);
-        if (!isNOU(expandState)) {
-            expandState.classList.remove(CLS_EXPANDSTATE);
-        }
-        trgtItemEle.classList.add(CLS_EXPANDSTATE);
-        if ((animation.name === 'None')) {
-            this.expandProgress('begin', icon, trgt, trgtItemEle, eventArgs);
-            this.expandProgress('end', icon, trgt, trgtItemEle, eventArgs);
-            return;
-        }
-        this.expandAnimation(eff, icon, trgt, trgtItemEle, animation, eventArgs);
+            isExpanded: true
+        };
+        this.trigger('expanding', eventArgs, function (expandArgs) {
+            if (!expandArgs.cancel) {
+                icon.classList.add(CLS_TOGANIMATE);
+                _this.expandedItemsPush(trgtItemEle);
+                if (!isNOU(expandState)) {
+                    expandState.classList.remove(CLS_EXPANDSTATE);
+                }
+                trgtItemEle.classList.add(CLS_EXPANDSTATE);
+                if ((animation.name === 'None')) {
+                    _this.expandProgress('begin', icon, trgt, trgtItemEle, expandArgs);
+                    _this.expandProgress('end', icon, trgt, trgtItemEle, expandArgs);
+                }
+                else {
+                    _this.expandAnimation(animation.name, icon, trgt, trgtItemEle, animation, expandArgs);
+                }
+            }
+        });
     };
     Accordion.prototype.expandAnimation = function (ef, icn, trgt, trgtItemEle, animate, args) {
         var _this = this;
         var height;
-        var trgtHgt;
         this.lastActiveItemId = trgtItemEle.id;
         if (ef === 'SlideDown') {
             animate.begin = function () {
                 _this.expandProgress('begin', icn, trgt, trgtItemEle, args);
                 trgt.style.position = 'absolute';
                 height = trgtItemEle.offsetHeight;
-                trgtHgt = trgt.offsetHeight;
                 trgt.style.maxHeight = (trgt.offsetHeight) + 'px';
                 trgtItemEle.style.maxHeight = '';
             };
@@ -658,26 +800,42 @@ var Accordion = /** @class */ (function (_super) {
         if (progress === 'end') {
             this.add(trgtItemEle, CLS_ACTIVE);
             trgt.setAttribute('aria-hidden', 'false');
-            attributes(trgt.previousElementSibling, { 'aria-selected': 'true', 'aria-expanded': 'true' });
+            attributes(trgt.previousElementSibling, { 'aria-expanded': 'true' });
             icon.classList.remove(CLS_TOGANIMATE);
             this.trigger('expanded', eventArgs);
         }
     };
     Accordion.prototype.expandedItemsPush = function (item) {
         var index = this.getIndexByItem(item);
-        if (this.expandedItems.indexOf(index) === -1) {
-            this.expandedItems.push(index);
+        if (this.expandedIndices.indexOf(index) === -1) {
+            var temp = [].slice.call(this.expandedIndices);
+            temp.push(index);
+            this.setProperties({ expandedIndices: temp }, true);
         }
     };
     Accordion.prototype.getIndexByItem = function (item) {
-        return [].slice.call(this.element.children).indexOf(item);
+        var itemEle = this.getItemElements();
+        return [].slice.call(itemEle).indexOf(item);
+    };
+    Accordion.prototype.getItemElements = function () {
+        var itemEle = [];
+        var itemCollection = this.element.children;
+        [].slice.call(itemCollection).forEach(function (el) {
+            if (el.classList.contains(CLS_ITEM)) {
+                itemEle.push(el);
+            }
+        });
+        return itemEle;
     };
     Accordion.prototype.expandedItemsPop = function (item) {
         var index = this.getIndexByItem(item);
-        this.expandedItems.splice(this.expandedItems.indexOf(index), 1);
+        var temp = [].slice.call(this.expandedIndices);
+        temp.splice(temp.indexOf(index), 1);
+        this.setProperties({ expandedIndices: temp }, true);
     };
     Accordion.prototype.collapse = function (trgt) {
-        var eventArgs;
+        var _this = this;
+        var items = this.getItems();
         var trgtItemEle = closest(trgt, '.' + CLS_ITEM);
         if (isNOU(trgt) || !isVisible(trgt) || trgtItemEle.classList.contains(CLS_DISABLE)) {
             return;
@@ -685,28 +843,30 @@ var Accordion = /** @class */ (function (_super) {
         var animation = {
             name: this.animation.collapse.effect,
             duration: this.animation.collapse.duration,
-            timingFunction: this.animation.collapse.easing,
+            timingFunction: this.animation.collapse.easing
         };
         var icon = select('.' + CLS_TOOGLEICN, trgtItemEle).firstElementChild;
-        eventArgs = { element: trgtItemEle,
-            item: this.items[this.getIndexByItem(trgtItemEle)],
+        var eventArgs = {
+            element: trgtItemEle,
+            item: items[this.getIndexByItem(trgtItemEle)],
             index: this.getIndexByItem(trgtItemEle),
             content: trgtItemEle.querySelector('.' + CLS_CONTENT),
-            isExpanded: false };
-        var eff = animation.name;
-        this.trigger('expanding', eventArgs);
-        if (eventArgs.cancel) {
-            return;
-        }
-        this.expandedItemsPop(trgtItemEle);
-        trgtItemEle.classList.add(CLS_EXPANDSTATE);
-        icon.classList.add(CLS_TOGANIMATE);
-        if ((animation.name === 'None')) {
-            this.collapseProgress('begin', icon, trgt, trgtItemEle, eventArgs);
-            this.collapseProgress('end', icon, trgt, trgtItemEle, eventArgs);
-            return;
-        }
-        this.collapseAnimation(eff, trgt, trgtItemEle, icon, animation, eventArgs);
+            isExpanded: false
+        };
+        this.trigger('expanding', eventArgs, function (expandArgs) {
+            if (!expandArgs.cancel) {
+                _this.expandedItemsPop(trgtItemEle);
+                trgtItemEle.classList.remove(CLS_EXPANDSTATE);
+                icon.classList.add(CLS_TOGANIMATE);
+                if ((animation.name === 'None')) {
+                    _this.collapseProgress('begin', icon, trgt, trgtItemEle, expandArgs);
+                    _this.collapseProgress('end', icon, trgt, trgtItemEle, expandArgs);
+                }
+                else {
+                    _this.collapseAnimation(animation.name, trgt, trgtItemEle, icon, animation, expandArgs);
+                }
+            }
+        });
     };
     Accordion.prototype.collapseAnimation = function (ef, trgt, trgtItEl, icn, animate, args) {
         var _this = this;
@@ -756,59 +916,75 @@ var Accordion = /** @class */ (function (_super) {
             icon.classList.remove(CLS_TOGANIMATE);
             this.remove(trgtItemEle, CLS_ACTIVE);
             trgt.setAttribute('aria-hidden', 'true');
-            attributes(trgt.previousElementSibling, { 'aria-selected': 'false', 'aria-expanded': 'false' });
+            attributes(trgt.previousElementSibling, { 'aria-expanded': 'false' });
             this.trigger('expanded', eventArgs);
         }
     };
     /**
      * Returns the current module name.
-     * @returns string
+     *
+     * @returns {string} - It returns the current module name.
      * @private
      */
     Accordion.prototype.getModuleName = function () {
         return 'accordion';
     };
-    Accordion.prototype.itemAttribUpdate = function () {
-        var itemEle = [].slice.call(this.element.children);
-        var itemLen = this.items.length;
-        itemEle.forEach(function (ele) {
-            select('.' + CLS_HEADER, ele).setAttribute('aria-level', '' + itemLen);
-        });
+    Accordion.prototype.getItems = function () {
+        var items;
+        if (this.itemTemplate && this.headerTemplate) {
+            items = this.dataSource;
+        }
+        else {
+            items = this.items;
+        }
+        return items;
     };
     /**
      * Adds new item to the Accordion with the specified index of the Accordion.
-     * @param  {AccordionItemModel} item - Item array that is to be added to the Accordion.
+     *
+     * @param  {AccordionItemModel | AccordionItemModel[] | Object | Object[]} item - Item array that is to be added to the Accordion.
      * @param  {number} index - Number value that determines where the item should be added.
      * By default, item is added at the last index if the index is not specified.
-     * @returns void
+     * @returns {void}
      */
     Accordion.prototype.addItem = function (item, index) {
+        var _this = this;
         var ele = this.element;
+        var itemEle = this.getItemElements();
+        var items = this.getItems();
         if (isNOU(index)) {
-            index = this.items.length;
+            index = items.length;
         }
         if (ele.childElementCount >= index) {
-            this.items.splice(index, 0, item);
-            var innerItemEle = this.renderInnerItem(item, index);
-            if (ele.childElementCount === index) {
-                ele.appendChild(innerItemEle);
-            }
-            else {
-                ele.insertBefore(innerItemEle, ele.children[index]);
-            }
-            EventHandler.add(innerItemEle.querySelector('.' + CLS_HEADER), 'focus', this.focusIn, this);
-            EventHandler.add(innerItemEle.querySelector('.' + CLS_HEADER), 'blur', this.focusOut, this);
-            this.itemAttribUpdate();
+            var addItems = (item instanceof Array) ? item : [item];
+            addItems.forEach(function (addItem, i) {
+                var itemIndex = index + i;
+                items.splice(itemIndex, 0, addItem);
+                var innerItemEle = _this.renderInnerItem(addItem, itemIndex);
+                if (ele.childElementCount === itemIndex) {
+                    ele.appendChild(innerItemEle);
+                }
+                else {
+                    ele.insertBefore(innerItemEle, itemEle[parseInt(itemIndex.toString(), 10)]);
+                }
+                EventHandler.add(innerItemEle.querySelector('.' + CLS_HEADER), 'focus', _this.focusIn, _this);
+                EventHandler.add(innerItemEle.querySelector('.' + CLS_HEADER), 'blur', _this.focusOut, _this);
+                _this.expandedIndices = [];
+                _this.expandedItemRefresh(ele);
+                if (addItem && addItem.expanded) {
+                    _this.expandItem(true, itemIndex);
+                }
+            });
         }
-        this.expandedItems = [];
-        this.expandedItemRefresh(ele);
-        if (item.expanded) {
-            this.expandItem(true, index);
+        if (this.isReact) {
+            this.renderReactTemplates();
         }
     };
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     Accordion.prototype.expandedItemRefresh = function (ele) {
         var _this = this;
-        [].slice.call(ele.children).forEach(function (el) {
+        var itemEle = this.getItemElements();
+        [].slice.call(itemEle).forEach(function (el) {
             if (el.classList.contains(CLS_SLCTED)) {
                 _this.expandedItemsPush(el);
             }
@@ -816,27 +992,35 @@ var Accordion = /** @class */ (function (_super) {
     };
     /**
      * Dynamically removes item from Accordion.
+     *
      * @param  {number} index - Number value that determines which item should be removed.
-     * @returns void.
+     * @returns {void}.
      */
     Accordion.prototype.removeItem = function (index) {
-        var ele = this.element.children[index];
+        if (this.isReact) {
+            this.clearTemplate(['headerTemplate', 'itemTemplate'], index);
+        }
+        var itemEle = this.getItemElements();
+        var ele = itemEle[parseInt(index.toString(), 10)];
+        var items = this.getItems();
         if (isNOU(ele)) {
             return;
         }
+        this.restoreContent(index);
         detach(ele);
-        this.items.splice(index, 1);
-        this.itemAttribUpdate();
-        this.expandedItems = [];
+        items.splice(index, 1);
+        this.expandedIndices = [];
         this.expandedItemRefresh(this.element);
     };
     /**
      * Sets focus to the specified index item header in Accordion.
+     *
      * @param  {number} index - Number value that determines which item should be focused.
-     * @returns void.
+     * @returns {void}.
      */
     Accordion.prototype.select = function (index) {
-        var ele = this.element.children[index];
+        var itemEle = this.getItemElements();
+        var ele = itemEle[parseInt(index.toString(), 10)];
         if (isNOU(ele) || isNOU(select('.' + CLS_HEADER, ele))) {
             return;
         }
@@ -844,30 +1028,39 @@ var Accordion = /** @class */ (function (_super) {
     };
     /**
      * Shows or hides the specified item from Accordion.
+     *
      * @param  {number} index - Number value that determines which item should be hidden/shown.
-     * @param  {Boolean} isHidden - Boolean value that determines the action either hide (true) or show (false). Default value is false.
-     *  If the `isHidden` value is false, the item is shown or else item it is hidden.
-     * @returns void.
+     * @param  {boolean} isHidden - Boolean value that determines the action either hide (true) or show (false). Default value is false.
+     * If the `isHidden` value is false, the item is shown or else item it is hidden.
+     * @returns {void}.
      */
     Accordion.prototype.hideItem = function (index, isHidden) {
-        var ele = this.element.children[index];
+        var itemEle = this.getItemElements();
+        var ele = itemEle[parseInt(index.toString(), 10)];
         if (isNOU(ele)) {
             return;
         }
         if (isNOU(isHidden)) {
             isHidden = true;
         }
-        isHidden ? this.add(ele, CLS_ITEMHIDE) : this.remove(ele, CLS_ITEMHIDE);
+        if (isHidden) {
+            this.add(ele, CLS_ITEMHIDE);
+        }
+        else {
+            this.remove(ele, CLS_ITEMHIDE);
+        }
     };
     /**
      * Enables/Disables the specified Accordion item.
+     *
      * @param  {number} index - Number value that determines which item should be enabled/disabled.
      * @param  {boolean} isEnable - Boolean value that determines the action as enable (true) or disable (false).
      * If the `isEnable` value is true, the item is enabled or else it is disabled.
-     * @returns void.
+     * @returns {void}.
      */
     Accordion.prototype.enableItem = function (index, isEnable) {
-        var ele = this.element.children[index];
+        var itemEle = this.getItemElements();
+        var ele = itemEle[parseInt(index.toString(), 10)];
         if (isNOU(ele)) {
             return;
         }
@@ -889,22 +1082,23 @@ var Accordion = /** @class */ (function (_super) {
     };
     /**
      * Expands/Collapses the specified Accordion item.
+     *
      * @param  {boolean} isExpand - Boolean value that determines the action as expand or collapse.
      * @param  {number} index - Number value that determines which item should be expanded/collapsed.`index` is optional parameter.
-     *  Without Specifying index, based on the `isExpand` value all Accordion item can be expanded or collapsed.
-     * @returns void.
+     * Without Specifying index, based on the `isExpand` value all Accordion item can be expanded or collapsed.
+     * @returns {void}.
      */
     Accordion.prototype.expandItem = function (isExpand, index) {
         var _this = this;
-        var root = this.element;
+        var itemEle = this.getItemElements();
         if (isNOU(index)) {
             if (this.expandMode === 'Single' && isExpand) {
-                var ele = root.children[root.childElementCount - 1];
+                var ele = itemEle[itemEle.length - 1];
                 this.itemExpand(isExpand, ele, this.getIndexByItem(ele));
             }
             else {
                 var item = select('#' + this.lastActiveItemId, this.element);
-                [].slice.call(this.element.children).forEach(function (el) {
+                [].slice.call(itemEle).forEach(function (el) {
                     _this.itemExpand(isExpand, el, _this.getIndexByItem(el));
                     el.classList.remove(CLS_EXPANDSTATE);
                 });
@@ -918,7 +1112,7 @@ var Accordion = /** @class */ (function (_super) {
             }
         }
         else {
-            var ele = this.element.children[index];
+            var ele = itemEle[parseInt(index.toString(), 10)];
             if (isNOU(ele) || !ele.classList.contains(CLS_SLCT) || (ele.classList.contains(CLS_ACTIVE) && isExpand)) {
                 return;
             }
@@ -939,36 +1133,84 @@ var Accordion = /** @class */ (function (_super) {
             ctn = this.contentRendering(index);
             ele.appendChild(ctn);
             this.ariaAttrUpdate(ele);
+            this.expand(ctn);
         }
-        else if (isNOU(ctn)) {
-            return;
+        else if (!isNOU(ctn)) {
+            if (isExpand) {
+                this.expand(ctn);
+            }
+            else {
+                this.collapse(ctn);
+            }
+        }
+        if (this.isReact) {
+            this.renderReactTemplates();
         }
-        isExpand ? this.expand(ctn) : this.collapse(ctn);
     };
     Accordion.prototype.destroyItems = function () {
-        [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM)).forEach(function (el) { detach(el); });
+        this.restoreContent(null);
+        if (this.isReact || this.isAngular || this.isVue) {
+            this.clearTemplate();
+        }
+        [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM)).forEach(function (el) {
+            detach(el);
+        });
+    };
+    Accordion.prototype.restoreContent = function (index) {
+        var ctnElePos;
+        if (isNOU(index)) {
+            ctnElePos = this.element;
+        }
+        else {
+            ctnElePos = this.element.querySelectorAll('.' + CLS_ITEM)[parseInt(index.toString(), 10)];
+        }
+        this.templateEle.forEach(function (eleStr) {
+            if (!isNOU(ctnElePos.querySelector(eleStr))) {
+                document.body.appendChild(ctnElePos.querySelector(eleStr)).style.display = 'none';
+            }
+        });
     };
     Accordion.prototype.updateItem = function (item, index) {
         if (!isNOU(item)) {
-            var itemObj = this.items[index];
-            this.items.splice(index, 1);
+            var items = this.getItems();
+            var itemObj = items[parseInt(index.toString(), 10)];
+            items.splice(index, 1);
+            this.restoreContent(index);
             detach(item);
             this.addItem(itemObj, index);
         }
     };
+    Accordion.prototype.setTemplate = function (template, toElement, index) {
+        toElement.innerHTML = '';
+        this.templateCompile(toElement, template, index);
+        if (this.isReact) {
+            this.renderReactTemplates();
+        }
+    };
+    Accordion.prototype.templateCompile = function (ele, cnt, index) {
+        var tempEle = this.createElement('div');
+        this.fetchElement(tempEle, cnt, index, false);
+        if (tempEle.childNodes.length !== 0) {
+            [].slice.call(tempEle.childNodes).forEach(function (childEle) {
+                ele.appendChild(childEle);
+            });
+        }
+    };
     Accordion.prototype.getPersistData = function () {
-        var keyEntity = ['expandedItems'];
+        var keyEntity = ['expandedIndices'];
         return this.addOnPersist(keyEntity);
     };
     /**
      * Gets called when the model property changes.The data that describes the old and new values of the property that changed.
-     * @param  {AccordionModel} newProp
-     * @param  {AccordionModel} oldProp
-     * @returns void
+     *
+     * @param  {AccordionModel} newProp - It contains the new value of data.
+     * @param  {AccordionModel} oldProp - It contains the old value of data.
+     * @returns {void}
      * @private
      */
     Accordion.prototype.onPropertyChanged = function (newProp, oldProp) {
         var acrdn = this.element;
+        var isRefresh = false;
         for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
             var prop = _a[_i];
             switch (prop) {
@@ -976,35 +1218,75 @@ var Accordion = /** @class */ (function (_super) {
                     if (!(newProp.items instanceof Array && oldProp.items instanceof Array)) {
                         var changedProp = Object.keys(newProp.items);
                         for (var j = 0; j < changedProp.length; j++) {
-                            var index = parseInt(Object.keys(newProp.items)[j], 10);
-                            var property = Object.keys(newProp.items[index])[0];
-                            var item = selectAll('.' + CLS_ITEM, this.element)[index];
-                            var oldVal = Object(oldProp.items[index])[property];
-                            var newVal = Object(newProp.items[index])[property];
+                            var index = parseInt(Object.keys(newProp.items)[parseInt(j.toString(), 10)], 10);
+                            var property = Object.keys(newProp.items[parseInt(index.toString(), 10)])[0];
+                            var item = selectAll('.' + CLS_ITEM, this.element)[parseInt(index.toString(), 10)];
+                            var oldVal = Object(oldProp.items[parseInt(index.toString(), 10)])["" + property];
+                            var newVal = Object(newProp.items[parseInt(index.toString(), 10)])["" + property];
                             var temp = property;
                             if (temp === 'header' || temp === 'iconCss' || temp === 'expanded' || ((temp === 'content') && (oldVal === ''))) {
                                 this.updateItem(item, index);
                             }
                             if (property === 'cssClass' && !isNOU(item)) {
-                                item.classList.remove(oldVal);
-                                item.classList.add(newVal);
+                                if (oldVal) {
+                                    removeClass([item], oldVal.split(' '));
+                                }
+                                if (newVal) {
+                                    addClass([item], newVal.split(' '));
+                                }
+                            }
+                            if (property === 'visible' && !isNOU(item)) {
+                                if (Object(newProp.items[parseInt(index.toString(), 10)])["" + property] === false) {
+                                    item.classList.add(CLS_ITEMHIDE);
+                                }
+                                else {
+                                    item.classList.remove(CLS_ITEMHIDE);
+                                }
+                            }
+                            if (property === 'disabled' && !isNOU(item)) {
+                                this.enableItem(index, !newVal);
                             }
                             if (property === 'content' && !isNOU(item) && item.children.length === 2) {
-                                if (item.classList.contains(CLS_SLCTED)) {
-                                    this.expandItem(false, index);
+                                if (typeof newVal === 'function') {
+                                    var activeContent = item.querySelector('.' + CLS_CTENT);
+                                    activeContent.innerHTML = '';
+                                    this.setTemplate(newVal, activeContent, index);
+                                }
+                                else {
+                                    if (item.classList.contains(CLS_SLCTED)) {
+                                        this.expandItem(false, index);
+                                    }
+                                    detach(item.querySelector('.' + CLS_CONTENT));
                                 }
-                                detach(item.querySelector('.' + CLS_CONTENT));
                             }
                         }
                     }
                     else {
-                        this.destroyItems();
-                        this.renderItems();
-                        this.initItemExpand();
+                        isRefresh = true;
+                    }
+                    break;
+                case 'dataSource':
+                case 'expandedIndices':
+                    if (this.expandedIndices === null) {
+                        this.expandedIndices = [];
                     }
+                    isRefresh = true;
+                    break;
+                case 'headerTemplate':
+                    this.initializeHeaderTemplate();
+                    isRefresh = true;
+                    break;
+                case 'itemTemplate':
+                    this.initializeItemTemplate();
+                    isRefresh = true;
                     break;
                 case 'enableRtl':
-                    newProp.enableRtl ? this.add(acrdn, CLS_RTL) : this.remove(acrdn, CLS_RTL);
+                    if (newProp.enableRtl) {
+                        this.add(acrdn, CLS_RTL);
+                    }
+                    else {
+                        this.remove(acrdn, CLS_RTL);
+                    }
                     break;
                 case 'height':
                     setStyle(this.element, { 'height': formatUnit(newProp.height) });
@@ -1013,31 +1295,49 @@ var Accordion = /** @class */ (function (_super) {
                     setStyle(this.element, { 'width': formatUnit(newProp.width) });
                     break;
                 case 'expandMode':
-                    if (newProp.expandMode === 'Single') {
-                        this.element.setAttribute('aria-multiselectable', 'false');
-                        if (this.expandedItems.length > 1) {
-                            this.expandItem(false);
-                        }
-                    }
-                    else {
-                        this.element.setAttribute('aria-multiselectable', 'true');
+                    if (newProp.expandMode === 'Single' && this.expandedIndices.length > 1) {
+                        this.expandItem(false);
                     }
                     break;
             }
         }
+        if (isRefresh) {
+            this.initExpand = [];
+            if (this.expandedIndices.length > 0) {
+                this.initExpand = this.expandedIndices;
+            }
+            this.destroyItems();
+            this.renderItems();
+            this.initItemExpand();
+        }
     };
     __decorate([
         Collection([], AccordionItem)
     ], Accordion.prototype, "items", void 0);
+    __decorate([
+        Property([])
+    ], Accordion.prototype, "dataSource", void 0);
+    __decorate([
+        Property()
+    ], Accordion.prototype, "itemTemplate", void 0);
+    __decorate([
+        Property()
+    ], Accordion.prototype, "headerTemplate", void 0);
     __decorate([
         Property('100%')
     ], Accordion.prototype, "width", void 0);
     __decorate([
         Property('auto')
     ], Accordion.prototype, "height", void 0);
+    __decorate([
+        Property([])
+    ], Accordion.prototype, "expandedIndices", void 0);
     __decorate([
         Property('Multiple')
     ], Accordion.prototype, "expandMode", void 0);
+    __decorate([
+        Property(false)
+    ], Accordion.prototype, "enableHtmlSanitizer", void 0);
     __decorate([
         Complex({}, AccordionAnimationSettings)
     ], Accordion.prototype, "animation", void 0);