@syncfusion/ej2-navigations 19.4.55 → 20.1.48

package/dist/es6/ej2-navigations.es2015.js

@@ -198,11 +198,13 @@ let HScroll = class HScroll extends Component {
     createNavIcon(element) {
         const id = element.id.concat('_nav');
         const clsRight = 'e-' + element.id.concat('_nav ' + CLS_HSCROLLNAV + ' ' + CLS_HSCROLLNAVRIGHT);
-        const nav = this.createElement('div', { id: id.concat('_right'), className: clsRight });
+        const rightAttributes = { 'role': 'button', 'id': id.concat('_right'), 'aria-label': 'Scroll right' };
+        const nav = this.createElement('div', { className: clsRight, attrs: rightAttributes });
         nav.setAttribute('aria-disabled', 'false');
         const navItem = this.createElement('div', { className: CLS_NAVRIGHTARROW + ' ' + CLS_NAVARROW + ' e-icons' });
         const clsLeft = 'e-' + element.id.concat('_nav ' + CLS_HSCROLLNAV + ' ' + CLS_HSCROLLNAVLEFT);
-        const navEle = this.createElement('div', { id: id.concat('_left'), className: clsLeft + ' ' + CLS_DISABLE });
+        const leftAttributes = { 'role': 'button', 'id': id.concat('_left'), 'aria-label': 'Scroll left' };
+        const navEle = this.createElement('div', { className: clsLeft + ' ' + CLS_DISABLE, attrs: leftAttributes });
         navEle.setAttribute('aria-disabled', 'true');
         const navLeftItem = this.createElement('div', { className: CLS_NAVLEFTARROW + ' ' + CLS_NAVARROW + ' e-icons' });
         navEle.appendChild(navLeftItem);
@@ -390,7 +392,7 @@ let HScroll = class HScroll extends Component {
                 classList(arrowIcon, [CLS_NAVLEFTARROW], [CLS_NAVRIGHTARROW]);
             }
         }
-        else {
+        else if (addDisable && removeDisable) {
             addDisable.classList.add(CLS_DISABLE);
             addDisable.setAttribute('aria-disabled', 'true');
             addDisable.removeAttribute('tabindex');
@@ -1603,6 +1605,9 @@ let MenuBase = class MenuBase extends Component {
                         this.navIdx.length !== 0 && closest(e.target, '.e-menu-parent.e-control')) {
                         this.closeMenu(0, e);
                     }
+                    else if (isOpen && !this.isMenu && selectAll('.e-menu-parent', wrapper)[ulIndex - 1] && e.which === 3) {
+                        this.closeMenu(null, e);
+                    }
                     else {
                         if (isOpen && (this.keyType === 'right' || this.keyType === 'click')) {
                             this.afterCloseMenu(e);
@@ -1926,14 +1931,8 @@ let MenuBase = class MenuBase extends Component {
                             this.setBlankIconStyle(this.popupWrapper);
                             this.wireKeyboardEvent(this.popupWrapper);
                             rippleEffect(this.popupWrapper, { selector: '.' + ITEM });
-                            if (this.popupWrapper.style.position === 'fixed' && this.top > 0) {
-                                this.popupWrapper.style.left = this.left + 'px';
-                                this.popupWrapper.style.top = this.top + scrollY + 'px';
-                            }
-                            else {
-                                this.popupWrapper.style.left = this.left + 'px';
-                                this.popupWrapper.style.top = this.top + 'px';
-                            }
+                            this.popupWrapper.style.left = this.left + 'px';
+                            this.popupWrapper.style.top = this.top + 'px';
                             const animationOptions = this.animationSettings.effect !== 'None' ? {
                                 name: this.animationSettings.effect, duration: this.animationSettings.duration,
                                 timingFunction: this.animationSettings.easing
@@ -2646,8 +2645,9 @@ let MenuBase = class MenuBase extends Component {
     removeItem(item, navIdx, idx) {
         item.splice(idx, 1);
         const uls = this.getWrapper().children;
-        if (navIdx.length < uls.length) {
-            detach(uls[navIdx.length].children[idx]);
+        const uls_length = this.hamburgerMode ? 1 : uls.length;
+        if (navIdx.length < uls_length) {
+            detach(uls[this.hamburgerMode ? 1 : navIdx.length].children[idx]);
         }
     }
     /**
@@ -3336,6 +3336,7 @@ let Toolbar = class Toolbar extends Component {
         }
         this.popObj = null;
         this.tbarAlign = null;
+        this.tbarItemsCol = [];
         this.remove(this.element, 'e-toolpop');
         if (this.cssClass) {
             removeClass([this.element], this.cssClass.split(' '));
@@ -4805,6 +4806,9 @@ let Toolbar = class Toolbar extends Component {
                     innerItems[0].parentNode.insertBefore(innerEle, innerItems[index]);
                 }
                 this.items.splice(index, 0, item);
+                if (item.template) {
+                    this.tbarEle.splice(this.tbarEle.length - 1, 1);
+                }
                 this.tbarEle.splice(index, 0, innerEle);
                 index++;
                 this.offsetWid = itemsDiv.offsetWidth;
@@ -4876,11 +4880,15 @@ let Toolbar = class Toolbar extends Component {
         if (typeof (templateProp) === 'string' || !isComponent) {
             let templateFn;
             let val = templateProp;
+            const regEx = new RegExp(/<(?=.*? .*?\/ ?>|br|hr|input|!--|wbr)[a-z]+.*?>|<([a-z]+).*?<\/\1>/i);
             val = (typeof (templateProp) === 'string') ? templateProp.trim() : templateProp;
             try {
                 if (typeof (templateProp) === 'object' && !isNullOrUndefined(templateProp.tagName)) {
                     innerEle.appendChild(templateProp);
                 }
+                else if (typeof (templateProp) === 'string' && regEx.test(val)) {
+                    innerEle.innerHTML = val;
+                }
                 else if (document.querySelectorAll(val).length) {
                     const ele = document.querySelector(val);
                     const tempStr = ele.outerHTML.trim();
@@ -4890,6 +4898,9 @@ let Toolbar = class Toolbar extends Component {
                         this.tempId.push(val);
                     }
                 }
+                else {
+                    templateFn = compile(val);
+                }
             }
             catch (e) {
                 templateFn = compile(val);
@@ -5533,9 +5544,11 @@ let Accordion = class Accordion extends Component {
         if (!this.isDestroy) {
             this.isDestroy = false;
         }
-        if (!isNullOrUndefined(nested)) {
-            nested.classList.add(CLS_NEST);
-            this.isNested = true;
+        if (nested && nested.firstElementChild && nested.firstElementChild.firstElementChild) {
+            if (nested.firstElementChild.firstElementChild.classList.contains(CLS_ROOT$2)) {
+                nested.classList.add(CLS_NEST);
+                this.isNested = true;
+            }
         }
         else {
             this.element.classList.add(CLS_ACRDN_ROOT);
@@ -5623,6 +5636,9 @@ let Accordion = class Accordion extends Component {
                 if (document.querySelectorAll(template).length) {
                     return compile(document.querySelector(template).innerHTML.trim());
                 }
+                else {
+                    return compile(template);
+                }
             }
             catch (error) {
                 return compile(template);
@@ -5987,6 +6003,9 @@ let Accordion = class Accordion extends Component {
                 ele.appendChild(eleVal);
                 eleVal.style.display = '';
             }
+            else {
+                templateFn = compile(value);
+            }
         }
         catch (e) {
             if (typeof (value) === 'string') {
@@ -7260,11 +7279,12 @@ let Tab = class Tab extends Component {
      * @returns {void}
      */
     destroy() {
-        if (this.isReact) {
+        if (this.isReact || this.isAngular) {
             this.clearTemplate();
         }
         if (!isNullOrUndefined(this.tbObj)) {
             this.tbObj.destroy();
+            this.tbObj = null;
         }
         this.unWireEvents();
         ['role', 'aria-disabled', 'aria-activedescendant', 'tabindex', 'aria-orientation'].forEach((val) => {
@@ -7283,6 +7303,28 @@ let Tab = class Tab extends Component {
                 cntEle.innerHTML = this.cnt;
             }
         }
+        if (this.btnCls) {
+            this.btnCls = null;
+        }
+        this.hdrEle = null;
+        this.cntEle = null;
+        this.tbItems = null;
+        this.tbItem = null;
+        this.tbPop = null;
+        this.prevItem = null;
+        this.popEle = null;
+        this.bdrLine = null;
+        this.content = null;
+        this.dragItem = null;
+        this.cloneElement = null;
+        this.draggingItems = [];
+        if (this.draggableItems && this.draggableItems.length > 0) {
+            for (let i = 0; i < this.draggableItems.length; i++) {
+                this.draggableItems[i].destroy();
+                this.draggableItems[i] = null;
+            }
+            this.draggableItems = [];
+        }
         super.destroy();
         this.trigger('destroyed');
     }
@@ -7315,6 +7357,9 @@ let Tab = class Tab extends Component {
         this.isSwipeed = false;
         this.itemIndexArray = [];
         this.templateEle = [];
+        if (this.allowDragAndDrop) {
+            this.dragArea = !isNullOrUndefined(this.dragArea) ? this.dragArea : '#' + this.element.id + ' ' + ('.' + CLS_HEADER$1);
+        }
         if (!isNullOrUndefined(nested)) {
             nested.parentElement.classList.add(CLS_NEST$1);
             this.isNested = true;
@@ -7530,7 +7575,15 @@ let Tab = class Tab extends Component {
         }
     }
     parseObject(items, index) {
-        const tbCount = selectAll('.e-tab-header .' + CLS_TB_ITEM, this.element).length;
+        const tbItems = selectAll('.e-tab-header .' + CLS_TB_ITEM, this.element);
+        let maxId = this.lastIndex;
+        if (!this.isReplace && tbItems.length > 0) {
+            const idList = [];
+            tbItems.forEach((item) => {
+                idList.push(parseInt(item.id.slice(item.id.indexOf('_') + 1), 10));
+            });
+            maxId = Math.max(...idList);
+        }
         const tItems = [];
         let txtWrapEle;
         const spliceArray = [];
@@ -7555,8 +7608,7 @@ let Tab = class Tab extends Component {
             else {
                 itemIndex = index + i;
             }
-            const addIndex = this.isAdd ? tbCount + i : this.lastIndex + 1;
-            this.lastIndex = ((tbCount === 0) ? i : ((this.isReplace) ? (itemIndex) : (addIndex)));
+            this.lastIndex = ((tbItems.length === 0) ? i : ((this.isReplace) ? (itemIndex) : (maxId + 1 + i)));
             const disabled = (item.disabled) ? ' ' + CLS_DISABLE$4 + ' ' + CLS_OVERLAY$2 : '';
             const hidden = (item.visible === false) ? ' ' + CLS_HIDDEN$1 : '';
             txtWrapEle = this.createElement('div', { className: CLS_TEXT, attrs: { 'role': 'presentation' } });
@@ -7861,7 +7913,12 @@ let Tab = class Tab extends Component {
         let templateFn;
         if (typeof val === 'string') {
             val = val.trim();
-            ele.innerHTML = SanitizeHtmlHelper.sanitize(val);
+            if (this.isVue) {
+                templateFn = compile(SanitizeHtmlHelper.sanitize(val));
+            }
+            else {
+                ele.innerHTML = SanitizeHtmlHelper.sanitize(val);
+            }
         }
         else {
             templateFn = compile(val);
@@ -8277,6 +8334,7 @@ let Tab = class Tab extends Component {
         }
         if (!isNullOrUndefined(this.cntEle) && !isNullOrUndefined(this.touchModule)) {
             this.touchModule.destroy();
+            this.touchModule = null;
         }
         window.removeEventListener('resize', this.resizeContext);
         EventHandler.remove(this.element, 'mouseover', this.hoverHandler);
@@ -8306,8 +8364,13 @@ let Tab = class Tab extends Component {
         if (e.velocity < 3 && isNullOrUndefined(e.originalEvent.changedTouches)) {
             return;
         }
-        if (e.originalEvent && this.isNested) {
-            e.originalEvent.stopPropagation();
+        if (this.isNested) {
+            this.element.setAttribute('data-swipe', 'true');
+        }
+        const nestedTab = this.element.querySelector('[data-swipe="true"]');
+        if (nestedTab) {
+            nestedTab.removeAttribute('data-swipe');
+            return;
         }
         this.isSwipeed = true;
         if (e.swipeDirection === 'Right' && this.selectedItem !== 0) {
@@ -8528,7 +8591,7 @@ let Tab = class Tab extends Component {
                 this.reRenderItems();
             }
             else {
-                if (this.isRect) {
+                if (this.isReact || this.isAngular) {
                     this.clearTemplate();
                 }
                 this.setItems(newProp.items);
@@ -8541,11 +8604,12 @@ let Tab = class Tab extends Component {
                     detach(selectElement.firstElementChild);
                 }
                 this.select(this.selectedItem);
+                this.draggableItems = [];
+                this.bindDraggable();
             }
         }
     }
     initializeDrag(target) {
-        this.dragArea = !isNullOrUndefined(this.dragArea) ? this.dragArea : '#' + this.element.id + ' ' + ('.' + CLS_HEADER$1);
         let dragObj = new Draggable(target, {
             dragArea: this.dragArea,
             dragTarget: '.' + CLS_TB_ITEM,
@@ -8721,6 +8785,7 @@ let Tab = class Tab extends Component {
     }
     itemDragStop(e) {
         detach(this.cloneElement);
+        this.cloneElement = null;
         this.dragItem.querySelector('.' + CLS_WRAP).style.visibility = 'visible';
         document.body.style.cursor = '';
         let dragStopArgs = {
@@ -8749,6 +8814,7 @@ let Tab = class Tab extends Component {
                 }
             }
         });
+        this.dragItem = null;
     }
     /**
      * Enables or disables the specified Tab item. On passing value as `false`, the item will be disabled.
@@ -8890,12 +8956,25 @@ let Tab = class Tab extends Component {
                     detach(cntTrg);
                 }
                 this.trigger('removed', tabRemovingArgs);
+                if (this.draggableItems && this.draggableItems.length > 0) {
+                    this.draggableItems[index].destroy();
+                    this.draggableItems[index] = null;
+                    this.draggableItems.splice(index, 1);
+                }
                 if (trg.classList.contains(CLS_ACTIVE$1)) {
                     index = (index > selectAll('.' + CLS_TB_ITEM + ':not(.' + CLS_TB_POPUP + ')', this.element).length - 1) ? index - 1 : index;
                     this.enableAnimation = false;
                     this.selectedItem = index;
                     this.select(index);
                 }
+                else if (index !== this.selectedItem) {
+                    if (index < this.selectedItem) {
+                        index = this.itemIndexArray.indexOf(this.tbItem[this.selectedItem].id);
+                        this.setProperties({ selectedItem: index > -1 ? index : this.selectedItem }, true);
+                        this.prevIndex = this.selectedItem;
+                    }
+                    this.tbItem = selectAll('.' + CLS_TB_ITEM, this.getTabHeader());
+                }
                 if (selectAll('.' + CLS_TB_ITEM, this.element).length === 0) {
                     this.hdrEle.style.display = 'none';
                 }
@@ -9044,6 +9123,7 @@ let Tab = class Tab extends Component {
             }
             if (this.tbItem.length > args && args >= 0 && !isNaN(args)) {
                 this.prevIndex = this.selectedItem;
+                this.prevItem = this.tbItem[this.prevIndex];
                 if (this.tbItem[args].classList.contains(CLS_TB_POPUP) && this.reorderActiveTab) {
                     this.setActive(this.popupHandler(this.tbItem[args]), null, isInteracted);
                     if ((!isNullOrUndefined(this.items) && this.items.length > 0) && this.allowDragAndDrop) {
@@ -9734,6 +9814,9 @@ let TreeView = TreeView_1 = class TreeView extends Component {
                 if (document.querySelectorAll(template).length) {
                     return compile(document.querySelector(template).innerHTML.trim());
                 }
+                else {
+                    return compile(template);
+                }
             }
             catch (e) {
                 return compile(template);
@@ -12004,7 +12087,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         return { cancel: false, isInteracted: isNullOrUndefined(e) ? false : true, node: currLi, nodeData: nodeData, event: e };
     }
     renderNodeTemplate(data, textEle, dataId) {
-        let tempArr = this.nodeTemplateFn(data, this, 'nodeTemplate' + dataId, this.element.id + 'nodeTemplate', this.isStringTemplate, undefined, textEle);
+        let tempArr = this.nodeTemplateFn(data, this, 'nodeTemplate' + dataId, this.element.id + 'nodeTemplate', this.isStringTemplate, undefined, textEle, this.root);
         if (tempArr) {
             tempArr = Array.prototype.slice.call(tempArr);
             append(tempArr, textEle);
@@ -15409,6 +15492,12 @@ let Breadcrumb = class Breadcrumb extends Component {
                     }
                     if (!(this.overflowMode === 'Menu' && liElems[i].classList.contains(MENUCLASS))) {
                         liWidth += liElems[i].offsetWidth;
+                        if (liWidth > width) {
+                            maxItems = Math.ceil((i) / 2) + (this.overflowMode === 'Menu' && i <= 2 ? 0 : 1);
+                            this._maxItems = maxItems;
+                            this.initPvtProps();
+                            return this.reRenderItems();
+                        }
                     }
                 }
             }
@@ -15776,9 +15865,955 @@ Breadcrumb = __decorate$10([
  * Breadcrumb modules
  */
 
+var __decorate$11 = (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;
+};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// Constant variables
+const CLS_CAROUSEL = 'e-carousel';
+const CLS_ACTIVE$2 = 'e-active';
+const CLS_RTL$5 = 'e-rtl';
+const CLS_ITEMS$2 = 'e-carousel-items';
+const CLS_ITEM$3 = 'e-carousel-item';
+const CLS_PREVIOUS = 'e-previous';
+const CLS_NEXT = 'e-next';
+const CLS_PREV_ICON = 'e-previous-icon';
+const CLS_NEXT_ICON = 'e-next-icon';
+const CLS_NAVIGATORS = 'e-carousel-navigators';
+const CLS_INDICATORS = 'e-carousel-indicators';
+const CLS_INDICATOR_BARS = 'e-indicator-bars';
+const CLS_INDICATOR_BAR = 'e-indicator-bar';
+const CLS_INDICATOR$1 = 'e-indicator';
+const CLS_ICON$1 = 'e-icons';
+const CLS_PLAY_PAUSE = 'e-play-pause';
+const CLS_PLAY_ICON = 'e-play-icon';
+const CLS_PAUSE_ICON = 'e-pause-icon';
+const CLS_PREV_BUTTON = 'e-previous-button';
+const CLS_NEXT_BUTTON = 'e-next-button';
+const CLS_PLAY_BUTTON = 'e-play-button';
+const CLS_FLAT = 'e-flat';
+const CLS_ROUND = 'e-round';
+const CLS_HOVER_ARROWS = 'e-hover-arrows';
+const CLS_HOVER = 'e-carousel-hover';
+const CLS_TEMPLATE$2 = 'e-template';
+const CLS_SLIDE_ANIMATION = 'e-carousel-slide-animation';
+const CLS_FADE_ANIMATION = 'e-carousel-fade-animation';
+const CLS_PREV_SLIDE = 'e-prev';
+const CLS_NEXT_SLIDE = 'e-next';
+const CLS_TRANSITION_START = 'e-transition-start';
+const CLS_TRANSITION_END = 'e-transition-end';
+/** Specifies the carousel individual item. */
+class CarouselItem extends ChildProperty {
+}
+__decorate$11([
+    Property()
+], CarouselItem.prototype, "cssClass", void 0);
+__decorate$11([
+    Property()
+], CarouselItem.prototype, "interval", void 0);
+__decorate$11([
+    Property()
+], CarouselItem.prototype, "template", void 0);
+__decorate$11([
+    Property()
+], CarouselItem.prototype, "htmlAttributes", void 0);
+/** Specifies the animation configuration for carousel items. */
+class CarouselAnimationSettings extends ChildProperty {
+}
+__decorate$11([
+    Property('Slide')
+], CarouselAnimationSettings.prototype, "effect", void 0);
+__decorate$11([
+    Property()
+], CarouselAnimationSettings.prototype, "customEffect", void 0);
+let Carousel = class Carousel extends Component {
+    /**
+     * Constructor for creating the Carousel widget
+     *
+     * @param {CarouselModel} options Accepts the carousel model properties to initiate the rendering
+     * @param {string | HTMLElement} element Accepts the DOM element reference
+     */
+    constructor(options, element) {
+        super(options, element);
+    }
+    getModuleName() {
+        return CLS_CAROUSEL.replace('e-', '');
+    }
+    getPersistData() {
+        return this.addOnPersist(['selectedIndex']);
+    }
+    preRender() {
+        this.keyConfigs = {
+            home: 'home',
+            end: 'end',
+            space: 'space',
+            moveLeft: 'leftarrow',
+            moveRight: 'rightarrow',
+            moveUp: 'uparrow',
+            moveDown: 'downarrow'
+        };
+        const defaultLocale = {
+            nextSlide: 'Next slide',
+            of: 'of',
+            pauseSlideTransition: 'Pause slide transition',
+            playSlideTransition: 'Play slide transition',
+            previousSlide: 'Previous slide',
+            slide: 'Slide',
+            slideShow: 'Slide show'
+        };
+        this.localeObj = new L10n(this.getModuleName(), defaultLocale, this.locale);
+    }
+    render() {
+        this.initialize();
+        this.renderSlides();
+        this.renderNavigators();
+        this.renderPlayButton();
+        this.renderIndicators();
+        this.applyAnimation();
+        this.wireEvents();
+    }
+    onPropertyChanged(newProp, oldProp) {
+        let target;
+        for (const prop of Object.keys(newProp)) {
+            switch (prop) {
+                case 'animation':
+                    for (const propName of Object.keys(newProp.animation)) {
+                        if (propName === 'customEffect' && !isNullOrUndefined(oldProp.animation.customEffect)) {
+                            removeClass([this.element.querySelector(`.${CLS_ITEMS$2}`)], oldProp.animation.customEffect);
+                        }
+                    }
+                    this.applyAnimation();
+                    break;
+                case 'cssClass':
+                    classList(this.element, [newProp.cssClass], [oldProp.cssClass]);
+                    break;
+                case 'selectedIndex':
+                    this.setActiveSlide(this.selectedIndex, oldProp.selectedIndex > this.selectedIndex ? 'Previous' : 'Next');
+                    this.autoSlide();
+                    break;
+                case 'htmlAttributes':
+                    if (!isNullOrUndefined(this.htmlAttributes)) {
+                        this.setHtmlAttributes(this.htmlAttributes, this.element);
+                    }
+                    break;
+                case 'enableTouchSwipe':
+                    if (!this.enableTouchSwipe && this.touchModule) {
+                        this.touchModule.destroy();
+                    }
+                    if (this.element.querySelector(`.${CLS_ITEMS$2}`)) {
+                        this.renderTouchActions();
+                    }
+                    break;
+                case 'loop':
+                    if (this.loop && isNullOrUndefined(this.autoSlideInterval)) {
+                        this.applySlideInterval();
+                    }
+                    this.handleNavigatorsActions(this.selectedIndex);
+                    break;
+                case 'enableRtl':
+                    if (this.enableRtl) {
+                        addClass([this.element], CLS_RTL$5);
+                    }
+                    else {
+                        removeClass([this.element], CLS_RTL$5);
+                    }
+                    break;
+                case 'buttonsVisibility':
+                    target = this.element.querySelector(`.${CLS_NAVIGATORS}`);
+                    if (target) {
+                        switch (this.buttonsVisibility) {
+                            case 'Hidden':
+                                this.resetTemplates(['previousButtonTemplate', 'nextButtonTemplate']);
+                                remove(target);
+                                break;
+                            case 'VisibleOnHover':
+                                addClass([].slice.call(target.childNodes), CLS_HOVER_ARROWS);
+                                break;
+                            case 'Visible':
+                                removeClass([].slice.call(target.childNodes), CLS_HOVER_ARROWS);
+                                break;
+                        }
+                    }
+                    else {
+                        this.renderNavigators();
+                        this.renderPlayButton();
+                    }
+                    break;
+                case 'width':
+                    setStyleAttribute(this.element, { 'width': formatUnit(this.width) });
+                    break;
+                case 'height':
+                    setStyleAttribute(this.element, { 'height': formatUnit(this.height) });
+                    break;
+                case 'autoPlay':
+                    if (this.showPlayButton && isNullOrUndefined(this.playButtonTemplate)) {
+                        this.playButtonClickHandler(null, true);
+                    }
+                    this.autoSlide();
+                    break;
+                case 'interval':
+                    this.autoSlide();
+                    break;
+                case 'showIndicators':
+                    target = this.element.querySelector(`.${CLS_INDICATORS}`);
+                    if (!this.showIndicators && target) {
+                        this.resetTemplates(['indicatorsTemplate']);
+                        remove(target);
+                    }
+                    this.renderIndicators();
+                    break;
+                case 'showPlayButton':
+                    target = this.element.querySelector(`.${CLS_PLAY_PAUSE}`);
+                    if (!this.showPlayButton && target) {
+                        remove(target);
+                        this.resetTemplates(['playButtonTemplate']);
+                    }
+                    this.renderPlayButton();
+                    break;
+                case 'items':
+                case 'dataSource':
+                    target = this.element.querySelector(`.${CLS_ITEMS$2}`);
+                    if (target) {
+                        this.resetTemplates(['itemTemplate']);
+                        remove(target);
+                    }
+                    this.renderSlides();
+                    break;
+            }
+        }
+    }
+    initialize() {
+        const carouselClasses = [];
+        if (this.cssClass) {
+            carouselClasses.push(this.cssClass);
+        }
+        if (this.enableRtl) {
+            carouselClasses.push(CLS_RTL$5);
+        }
+        addClass([this.element], carouselClasses);
+        setStyleAttribute(this.element, { 'width': formatUnit(this.width), 'height': formatUnit(this.height) });
+        attributes(this.element, { 'tabindex': '0', 'aria-roledescription': 'carousel', 'aria-label': this.localeObj.getConstant('slideShow') });
+        if (!isNullOrUndefined(this.htmlAttributes)) {
+            this.setHtmlAttributes(this.htmlAttributes, this.element);
+        }
+    }
+    renderSlides() {
+        const itemsContainer = this.createElement('div', { className: CLS_ITEMS$2, attrs: { 'aria-live': this.autoPlay ? 'off' : 'polite' } });
+        this.element.appendChild(itemsContainer);
+        if (this.items.length > 0) {
+            this.slideItems = this.items;
+            this.items.forEach((item, index) => {
+                this.renderSlide(item, item.template, index, itemsContainer);
+            });
+        }
+        else if (this.dataSource.length > 0) {
+            this.slideItems = this.dataSource;
+            this.dataSource.forEach((item, index) => {
+                this.renderSlide(item, this.itemTemplate, index, itemsContainer);
+            });
+        }
+        this.renderTemplates();
+        this.autoSlide();
+        this.renderTouchActions();
+        this.renderKeyboardActions();
+    }
+    renderSlide(item, itemTemplate, index, container) {
+        const itemEle = this.createElement('div', {
+            id: getUniqueID('carousel_item'),
+            className: `${CLS_ITEM$3} ${item.cssClass ? item.cssClass : ''} ${this.selectedIndex === index ? CLS_ACTIVE$2 : ''}`,
+            attrs: {
+                'aria-hidden': this.selectedIndex === index ? 'false' : 'true', 'data-index': index.toString(),
+                'aria-role': 'group', 'aria-roledescription': 'slide'
+            }
+        });
+        if (!isNullOrUndefined(item.htmlAttributes)) {
+            this.setHtmlAttributes(item.htmlAttributes, itemEle);
+        }
+        const templateId = this.element.id + '_template';
+        const template = this.templateParser(itemTemplate)(item, this, 'itemTemplate', templateId, false);
+        append(template, itemEle);
+        container.appendChild(itemEle);
+    }
+    renderNavigators() {
+        if (this.buttonsVisibility === 'Hidden') {
+            return;
+        }
+        const navigators = this.createElement('div', { className: CLS_NAVIGATORS });
+        const itemsContainer = this.element.querySelector(`.${CLS_ITEMS$2}`);
+        itemsContainer.insertAdjacentElement('afterend', navigators);
+        this.renderNavigatorButton('Previous');
+        this.renderNavigatorButton('Next');
+        this.renderTemplates();
+    }
+    renderNavigatorButton(direction) {
+        const buttonContainer = this.createElement('div', {
+            className: (direction === 'Previous' ? CLS_PREVIOUS : CLS_NEXT) + ' ' + (this.buttonsVisibility === 'VisibleOnHover' ? CLS_HOVER_ARROWS : ''),
+            attrs: { 'aria-label': this.localeObj.getConstant(direction === 'Previous' ? 'previousSlide' : 'nextSlide') }
+        });
+        if (direction === 'Previous' && this.previousButtonTemplate) {
+            addClass([buttonContainer], CLS_TEMPLATE$2);
+            const templateId = this.element.id + '_previousButtonTemplate';
+            const template = this.templateParser(this.previousButtonTemplate)({ type: 'Previous' }, this, 'previousButtonTemplate', templateId, false);
+            append(template, buttonContainer);
+        }
+        else if (direction === 'Next' && this.nextButtonTemplate) {
+            addClass([buttonContainer], CLS_TEMPLATE$2);
+            const templateId = this.element.id + '_nextButtonTemplate';
+            const template = this.templateParser(this.nextButtonTemplate)({ type: 'Next' }, this, 'nextButtonTemplate', templateId, false);
+            append(template, buttonContainer);
+        }
+        else {
+            const button = this.createElement('button');
+            const buttonObj = new Button({
+                cssClass: CLS_FLAT + ' ' + CLS_ROUND + ' ' + (direction === 'Previous' ? CLS_PREV_BUTTON : CLS_NEXT_BUTTON),
+                iconCss: CLS_ICON$1 + ' ' + (direction === 'Previous' ? CLS_PREV_ICON : CLS_NEXT_ICON),
+                enableRtl: this.enableRtl,
+                disabled: !this.loop && this.selectedIndex === (direction === 'Previous' ? 0 : this.slideItems.length - 1)
+            });
+            buttonObj.appendTo(button);
+            buttonContainer.appendChild(button);
+        }
+        this.element.querySelector('.' + CLS_NAVIGATORS).appendChild(buttonContainer);
+        EventHandler.add(buttonContainer, 'click', this.navigatorClickHandler, this);
+    }
+    renderPlayButton() {
+        if (this.buttonsVisibility === 'Hidden' || !this.showPlayButton) {
+            return;
+        }
+        const playPauseWrap = this.createElement('div', {
+            className: CLS_PLAY_PAUSE + ' ' + (this.buttonsVisibility === 'VisibleOnHover' ? CLS_HOVER_ARROWS : '')
+        });
+        if (this.playButtonTemplate) {
+            addClass([playPauseWrap], CLS_TEMPLATE$2);
+            const templateId = this.element.id + '_playButtonTemplate';
+            const template = this.templateParser(this.playButtonTemplate)({}, this, 'playButtonTemplate', templateId, false);
+            append(template, playPauseWrap);
+        }
+        else {
+            const playButton = this.createElement('button', {
+                attrs: { 'aria-label': this.localeObj.getConstant(this.autoPlay ? 'pauseSlideTransition' : 'playSlideTransition') }
+            });
+            const isLastSlide = this.selectedIndex === this.slideItems.length - 1 && !this.loop;
+            const buttonObj = new Button({
+                cssClass: CLS_FLAT + ' ' + CLS_ROUND + ' ' + CLS_PLAY_BUTTON,
+                iconCss: CLS_ICON$1 + ' ' + (this.autoPlay && !isLastSlide ? CLS_PAUSE_ICON : CLS_PLAY_ICON),
+                isToggle: true,
+                enableRtl: this.enableRtl
+            });
+            if (isLastSlide) {
+                this.setProperties({ autoPlay: false }, true);
+                playButton.setAttribute('aria-label', this.localeObj.getConstant('playSlideTransition'));
+                const itemsContainer = this.element.querySelector(`.${CLS_ITEMS$2}`);
+                itemsContainer.setAttribute('aria-live', 'polite');
+            }
+            buttonObj.appendTo(playButton);
+            playPauseWrap.appendChild(playButton);
+        }
+        const navigators = this.element.querySelector(`.${CLS_NAVIGATORS}`);
+        navigators.insertBefore(playPauseWrap, navigators.lastElementChild);
+        this.renderTemplates();
+        EventHandler.add(playPauseWrap, 'click', this.playButtonClickHandler, this);
+    }
+    renderIndicators() {
+        if (!this.showIndicators) {
+            return;
+        }
+        const indicatorWrap = this.createElement('div', { className: CLS_INDICATORS });
+        const indicatorBars = this.createElement('div', { className: CLS_INDICATOR_BARS });
+        indicatorWrap.appendChild(indicatorBars);
+        if (this.slideItems) {
+            this.slideItems.forEach((item, index) => {
+                const indicatorBar = this.createElement('div', {
+                    className: CLS_INDICATOR_BAR + ' ' + (this.selectedIndex === index ? CLS_ACTIVE$2 : ''),
+                    attrs: { 'data-index': index.toString(), 'aria-current': this.selectedIndex === index ? 'true' : 'false' }
+                });
+                if (this.indicatorsTemplate) {
+                    addClass([indicatorBar], CLS_TEMPLATE$2);
+                    const templateId = this.element.id + '_indicatorsTemplate';
+                    const template = this.templateParser(this.indicatorsTemplate)({ index: index, selectedIndex: this.selectedIndex }, this, 'indicatorsTemplate', templateId, false);
+                    append(template, indicatorBar);
+                }
+                else {
+                    const indicator = this.createElement('button', { className: CLS_INDICATOR$1 });
+                    indicatorBar.appendChild(indicator);
+                    indicator.appendChild(this.createElement('div', {
+                        attrs: {
+                            'aria-label': this.localeObj.getConstant('slide') + ' ' + (index + 1) + ' ' + this.localeObj.getConstant('of') + ' ' + this.slideItems.length
+                        }
+                    }));
+                    const buttonObj = new Button({ cssClass: 'e-flat e-small' });
+                    buttonObj.appendTo(indicator);
+                }
+                indicatorBars.appendChild(indicatorBar);
+                EventHandler.add(indicatorBar, 'click', this.indicatorClickHandler, this);
+            });
+        }
+        this.element.appendChild(indicatorWrap);
+    }
+    renderKeyboardActions() {
+        this.keyModule = new KeyboardEvents(this.element, { keyAction: this.keyHandler.bind(this), keyConfigs: this.keyConfigs });
+    }
+    renderTouchActions() {
+        if (!this.enableTouchSwipe) {
+            return;
+        }
+        this.touchModule = new Touch(this.element, { swipe: this.swipeHandler.bind(this) });
+    }
+    applyAnimation() {
+        const animationTarget = this.element.querySelector(`.${CLS_ITEMS$2}`);
+        removeClass([animationTarget], [CLS_FADE_ANIMATION, CLS_SLIDE_ANIMATION]);
+        if (this.animation.customEffect) {
+            addClass([animationTarget], this.animation.customEffect);
+        }
+        else if (this.animation.effect !== 'None') {
+            const animationClass = this.animation.effect === 'Fade' ? CLS_FADE_ANIMATION : CLS_SLIDE_ANIMATION;
+            addClass([animationTarget], animationClass);
+        }
+    }
+    autoSlide() {
+        this.resetSlideInterval();
+        this.applySlideInterval();
+    }
+    autoSlideChange() {
+        const activeSlide = this.element.querySelector(`.${CLS_ACTIVE$2}`);
+        if (isNullOrUndefined(activeSlide)) {
+            return;
+        }
+        const activeIndex = parseInt(activeSlide.dataset.index, 10);
+        if (!this.loop && activeIndex === this.slideItems.length - 1) {
+            this.resetSlideInterval();
+        }
+        else {
+            const index = (activeIndex + 1) % this.slideItems.length;
+            if (!this.element.classList.contains(CLS_HOVER)) {
+                this.setActiveSlide(index, 'Next');
+            }
+            this.autoSlide();
+        }
+    }
+    applySlideInterval() {
+        if (!this.autoPlay || this.element.classList.contains(CLS_HOVER)) {
+            return;
+        }
+        let itemInterval = this.interval;
+        if (this.items.length > 0 && !isNullOrUndefined(this.items[this.selectedIndex].interval)) {
+            itemInterval = this.items[this.selectedIndex].interval;
+        }
+        this.autoSlideInterval = setInterval(() => this.autoSlideChange(), itemInterval);
+    }
+    resetSlideInterval() {
+        clearInterval(this.autoSlideInterval);
+        this.autoSlideInterval = null;
+    }
+    getSlideIndex(direction) {
+        let currentIndex = this.selectedIndex;
+        if (direction === 'Previous') {
+            currentIndex--;
+            if (currentIndex < 0) {
+                currentIndex = this.slideItems.length - 1;
+            }
+        }
+        else {
+            currentIndex++;
+            if (currentIndex === this.slideItems.length) {
+                currentIndex = 0;
+            }
+        }
+        return currentIndex;
+    }
+    setActiveSlide(currentIndex, direction, isSwiped = false) {
+        if (this.element.querySelectorAll(`.${CLS_ITEM$3}.${CLS_PREV_SLIDE},.${CLS_ITEM$3}.${CLS_NEXT_SLIDE}`).length > 0) {
+            return;
+        }
+        const allSlides = [].slice.call(this.element.querySelectorAll(`.${CLS_ITEM$3}`));
+        const activeSlide = this.element.querySelector(`.${CLS_ITEM$3}.${CLS_ACTIVE$2}`);
+        if (isNullOrUndefined(activeSlide) && this.showIndicators) {
+            const activeIndicator = this.element.querySelector(`.${CLS_INDICATOR_BAR}.${CLS_ACTIVE$2}`);
+            const activeIndex = parseInt(activeIndicator.dataset.index, 10);
+            addClass([allSlides[activeIndex]], CLS_ACTIVE$2);
+            return;
+        }
+        else if (isNullOrUndefined(activeSlide)) {
+            addClass([allSlides[currentIndex]], CLS_ACTIVE$2);
+            return;
+        }
+        const activeIndex = parseInt(activeSlide.dataset.index, 10);
+        const currentSlide = allSlides[currentIndex];
+        const eventArgs = {
+            currentIndex: activeIndex,
+            nextIndex: currentIndex,
+            currentSlide: activeSlide,
+            nextSlide: currentSlide,
+            slideDirection: direction,
+            isSwiped: isSwiped,
+            cancel: false
+        };
+        this.trigger('slideChanging', eventArgs, (args) => {
+            if (args.cancel) {
+                return;
+            }
+            this.setProperties({ selectedIndex: currentIndex }, true);
+            attributes(args.currentSlide, { 'aria-hidden': 'true' });
+            attributes(args.nextSlide, { 'aria-hidden': 'false' });
+            const slideIndicators = [].slice.call(this.element.querySelectorAll(`.${CLS_INDICATOR_BAR}`));
+            if (slideIndicators.length > 0) {
+                attributes(slideIndicators[activeIndex], { 'aria-current': 'false' });
+                attributes(slideIndicators[currentIndex], { 'aria-current': 'true' });
+                removeClass(slideIndicators, CLS_ACTIVE$2);
+                addClass([slideIndicators[currentIndex]], CLS_ACTIVE$2);
+            }
+            this.slideChangedEventArgs = {
+                currentIndex: args.nextIndex,
+                previousIndex: args.currentIndex,
+                currentSlide: args.nextSlide,
+                previousSlide: args.currentSlide,
+                slideDirection: direction,
+                isSwiped: isSwiped
+            };
+            let slideHeight;
+            if (this.animation.effect === 'None' || this.animation.customEffect) {
+                this.onTransitionEnd();
+            }
+            else if (this.animation.effect === 'Slide') {
+                if (direction === 'Previous') {
+                    addClass([args.nextSlide], CLS_PREV_SLIDE);
+                    slideHeight = args.nextSlide.offsetHeight;
+                    addClass([args.currentSlide, args.nextSlide], CLS_TRANSITION_END);
+                }
+                else {
+                    addClass([args.nextSlide], CLS_NEXT_SLIDE);
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    slideHeight = args.nextSlide.offsetHeight;
+                    addClass([args.currentSlide, args.nextSlide], CLS_TRANSITION_START);
+                }
+            }
+            else if (this.animation.effect === 'Fade') {
+                removeClass([args.currentSlide], CLS_ACTIVE$2);
+                addClass([args.nextSlide], CLS_ACTIVE$2);
+            }
+            this.handleNavigatorsActions(currentIndex);
+        });
+    }
+    onTransitionEnd() {
+        if (this.slideChangedEventArgs) {
+            addClass([this.slideChangedEventArgs.currentSlide], CLS_ACTIVE$2);
+            removeClass([this.slideChangedEventArgs.previousSlide], CLS_ACTIVE$2);
+            this.trigger('slideChanged', this.slideChangedEventArgs, () => {
+                removeClass(this.element.querySelectorAll(`.${CLS_ITEM$3}`), [CLS_PREV_SLIDE, CLS_NEXT_SLIDE, CLS_TRANSITION_START, CLS_TRANSITION_END]);
+                this.slideChangedEventArgs = null;
+            });
+        }
+    }
+    setHtmlAttributes(attribute, element) {
+        const keys = Object.keys(attribute);
+        for (const key of keys) {
+            if (key === 'class') {
+                addClass([element], attribute[key]);
+            }
+            else {
+                element.setAttribute(key, attribute[key]);
+            }
+        }
+    }
+    templateParser(template) {
+        if (template) {
+            try {
+                if (document.querySelectorAll(template).length) {
+                    return compile(document.querySelector(template).innerHTML.trim());
+                }
+                else {
+                    return compile(template);
+                }
+            }
+            catch (error) {
+                return compile(template);
+            }
+        }
+        return undefined;
+    }
+    getNavigatorState(target, isPrevious) {
+        const button = target.querySelector(`.${isPrevious ? CLS_PREV_BUTTON : CLS_NEXT_BUTTON}`);
+        if (button) {
+            const buttonObj = getInstance(button, Button);
+            return buttonObj.disabled;
+        }
+        return false;
+    }
+    navigatorClickHandler(e) {
+        const target = e.currentTarget;
+        const isDisabled = this.getNavigatorState(target, target.classList.contains(CLS_PREVIOUS));
+        if (isDisabled) {
+            return;
+        }
+        const direction = target.classList.contains(CLS_PREVIOUS) ? 'Previous' : 'Next';
+        this.setActiveSlide(this.getSlideIndex(direction), direction);
+        this.autoSlide();
+    }
+    indicatorClickHandler(e) {
+        const target = closest(e.target, `.${CLS_INDICATOR_BAR}`);
+        const index = parseInt(target.dataset.index, 10);
+        if (this.selectedIndex !== index) {
+            this.setActiveSlide(index, this.selectedIndex > index ? 'Previous' : 'Next');
+            this.autoSlide();
+        }
+    }
+    playButtonClickHandler(e, isPropertyChange = false) {
+        const playButton = this.element.querySelector(`.${CLS_PLAY_BUTTON}`);
+        if (playButton) {
+            const buttonObj = getInstance(playButton, Button);
+            if (!isPropertyChange) {
+                this.setProperties({ autoPlay: !this.autoPlay }, true);
+            }
+            playButton.setAttribute('aria-label', this.localeObj.getConstant(this.autoPlay ? 'pauseSlideTransition' : 'playSlideTransition'));
+            buttonObj.iconCss = CLS_ICON$1 + ' ' + (this.autoPlay ? CLS_PAUSE_ICON : CLS_PLAY_ICON);
+            buttonObj.dataBind();
+            const itemsContainer = this.element.querySelector(`.${CLS_ITEMS$2}`);
+            itemsContainer.setAttribute('aria-live', this.autoPlay ? 'off' : 'polite');
+            if (this.autoPlay && !this.loop && this.selectedIndex === this.slideItems.length - 1) {
+                this.setActiveSlide(0, 'Next');
+            }
+            this.autoSlide();
+        }
+    }
+    keyHandler(e) {
+        let direction;
+        let slideIndex;
+        let isSlideTransition = false;
+        const target = e.target;
+        e.preventDefault();
+        switch (e.action) {
+            case 'space':
+                if (this.showIndicators && target.classList.contains(CLS_INDICATOR$1)) {
+                    target.click();
+                }
+                else if (target.classList.contains(CLS_CAROUSEL) || target.classList.contains(CLS_PLAY_BUTTON)) {
+                    this.playButtonClickHandler(e);
+                }
+                else if (target.classList.contains(CLS_NEXT_BUTTON)) {
+                    this.next();
+                }
+                else if (target.classList.contains(CLS_PREV_BUTTON)) {
+                    this.prev();
+                }
+                break;
+            case 'end':
+                slideIndex = this.slideItems.length - 1;
+                direction = 'Next';
+                isSlideTransition = true;
+                break;
+            case 'home':
+                slideIndex = 0;
+                direction = 'Previous';
+                isSlideTransition = true;
+                break;
+            case 'moveUp':
+            case 'moveLeft':
+            case 'moveDown':
+            case 'moveRight':
+                if (this.showIndicators && isNullOrUndefined(this.indicatorsTemplate)) {
+                    this.element.focus();
+                }
+                direction = (e.action === 'moveUp' || e.action === 'moveLeft') ? 'Previous' : 'Next';
+                slideIndex = this.getSlideIndex(direction);
+                isSlideTransition = !this.isSuspendSlideTransition(slideIndex, direction);
+                break;
+        }
+        if (isSlideTransition) {
+            this.setActiveSlide(slideIndex, direction);
+            this.autoSlide();
+            isSlideTransition = false;
+        }
+    }
+    swipeHandler(e) {
+        if (this.element.classList.contains(CLS_HOVER)) {
+            return;
+        }
+        const direction = (e.swipeDirection === 'Right') ? 'Previous' : 'Next';
+        const slideIndex = this.getSlideIndex(direction);
+        if (!this.isSuspendSlideTransition(slideIndex, direction)) {
+            this.setActiveSlide(slideIndex, direction, true);
+            this.autoSlide();
+        }
+    }
+    isSuspendSlideTransition(index, direction) {
+        return !this.loop && (direction === 'Next' && index === 0 || direction === 'Previous' && index === this.slideItems.length - 1);
+    }
+    handleNavigatorsActions(index) {
+        if (this.buttonsVisibility === 'Hidden') {
+            return;
+        }
+        if (this.showPlayButton) {
+            const playButton = this.element.querySelector(`.${CLS_PLAY_BUTTON}`);
+            const isLastSlide = this.selectedIndex === this.slideItems.length - 1 && !this.loop;
+            let isButtonUpdate = isNullOrUndefined(this.playButtonTemplate) && playButton && isLastSlide;
+            if (isNullOrUndefined(this.playButtonTemplate) && playButton && !isLastSlide) {
+                isButtonUpdate = !playButton.classList.contains(CLS_ACTIVE$2);
+            }
+            if (isButtonUpdate) {
+                this.setProperties({ autoPlay: !isLastSlide }, true);
+                playButton.setAttribute('aria-label', this.localeObj.getConstant(this.autoPlay ? 'pauseSlideTransition' : 'playSlideTransition'));
+                const itemsContainer = this.element.querySelector(`.${CLS_ITEMS$2}`);
+                itemsContainer.setAttribute('aria-live', this.autoPlay ? 'off' : 'polite');
+                const buttonObj = getInstance(playButton, Button);
+                buttonObj.iconCss = CLS_ICON$1 + ' ' + (this.autoPlay ? CLS_PAUSE_ICON : CLS_PLAY_ICON);
+                buttonObj.dataBind();
+            }
+        }
+        const prevButton = this.element.querySelector(`.${CLS_PREV_BUTTON}`);
+        if (prevButton && isNullOrUndefined(this.previousButtonTemplate)) {
+            const buttonObj = getInstance(prevButton, Button);
+            buttonObj.disabled = !this.loop && index === 0;
+            buttonObj.dataBind();
+        }
+        const nextButton = this.element.querySelector(`.${CLS_NEXT_BUTTON}`);
+        if (nextButton && isNullOrUndefined(this.nextButtonTemplate)) {
+            const buttonObj = getInstance(nextButton, Button);
+            buttonObj.disabled = !this.loop && index === this.slideItems.length - 1;
+            buttonObj.dataBind();
+        }
+    }
+    onHoverActions(e) {
+        const navigator = this.element.querySelector(`.${CLS_NAVIGATORS}`);
+        switch (e.type) {
+            case 'mouseenter':
+                if (this.buttonsVisibility === 'VisibleOnHover' && navigator) {
+                    removeClass([].slice.call(navigator.childNodes), CLS_HOVER_ARROWS);
+                }
+                addClass([this.element], CLS_HOVER);
+                break;
+            case 'mouseleave':
+                if (this.buttonsVisibility === 'VisibleOnHover' && navigator) {
+                    addClass([].slice.call(navigator.childNodes), CLS_HOVER_ARROWS);
+                }
+                removeClass([this.element], CLS_HOVER);
+                break;
+        }
+        this.autoSlide();
+    }
+    onFocusActions(e) {
+        switch (e.type) {
+            case 'focusin':
+                addClass([this.element], CLS_HOVER);
+                break;
+            case 'focusout':
+                removeClass([this.element], CLS_HOVER);
+                break;
+        }
+        this.autoSlide();
+    }
+    destroyButtons() {
+        const buttonCollections = [].slice.call(this.element.querySelectorAll('.e-control.e-btn'));
+        for (const button of buttonCollections) {
+            const instance = getInstance(button, Button);
+            if (instance) {
+                instance.destroy();
+            }
+        }
+    }
+    wireEvents() {
+        EventHandler.add(this.element, 'focusin focusout', this.onFocusActions, this);
+        EventHandler.add(this.element, 'mouseenter mouseleave', this.onHoverActions, this);
+        EventHandler.add(this.element.firstElementChild, 'transitionend', this.onTransitionEnd, this);
+    }
+    unWireEvents() {
+        const indicators = [].slice.call(this.element.querySelectorAll(`.${CLS_INDICATOR_BAR}`));
+        indicators.forEach((indicator) => {
+            EventHandler.remove(indicator, 'click', this.indicatorClickHandler);
+        });
+        const navigators = [].slice.call(this.element.querySelectorAll(`.${CLS_PREVIOUS},.${CLS_NEXT}`));
+        navigators.forEach((navigator) => {
+            EventHandler.remove(navigator, 'click', this.navigatorClickHandler);
+        });
+        const playIcon = this.element.querySelector(`.${CLS_PLAY_PAUSE}`);
+        if (playIcon) {
+            EventHandler.remove(playIcon, 'click', this.playButtonClickHandler);
+        }
+        EventHandler.remove(this.element.firstElementChild, 'transitionend', this.onTransitionEnd);
+        EventHandler.clearEvents(this.element);
+    }
+    /**
+     * Method to transit from the current slide to the previous slide.
+     *
+     * @returns {void}
+     */
+    prev() {
+        if (!this.loop && this.selectedIndex === 0) {
+            return;
+        }
+        const index = (this.selectedIndex === 0) ? this.slideItems.length - 1 : this.selectedIndex - 1;
+        this.setActiveSlide(index, 'Previous');
+        this.autoSlide();
+    }
+    /**
+     * Method to transit from the current slide to the next slide.
+     *
+     * @returns {void}
+     */
+    next() {
+        if (!this.loop && this.selectedIndex === this.slideItems.length - 1) {
+            return;
+        }
+        const index = (this.selectedIndex === this.slideItems.length - 1) ? 0 : this.selectedIndex + 1;
+        this.setActiveSlide(index, 'Next');
+        this.autoSlide();
+    }
+    /**
+     * Method to play the slides programmatically.
+     *
+     * @returns {void}
+     */
+    play() {
+        const playIcon = this.element.querySelector(`.${CLS_PLAY_ICON}`);
+        if (this.showPlayButton && playIcon) {
+            classList(playIcon, [CLS_PAUSE_ICON], [CLS_PLAY_ICON]);
+            const playButton = this.element.querySelector(`.${CLS_PLAY_BUTTON}`);
+            playButton.setAttribute('aria-label', this.localeObj.getConstant('pauseSlideTransition'));
+        }
+        this.setProperties({ autoPlay: true }, true);
+        const itemsContainer = this.element.querySelector(`.${CLS_ITEMS$2}`);
+        itemsContainer.setAttribute('aria-live', 'off');
+        this.applySlideInterval();
+    }
+    /**
+     * Method to pause the slides programmatically.
+     *
+     * @returns {void}
+     */
+    pause() {
+        const pauseIcon = this.element.querySelector(`.${CLS_PAUSE_ICON}`);
+        if (this.showPlayButton && pauseIcon) {
+            const playButton = this.element.querySelector(`.${CLS_PLAY_BUTTON}`);
+            playButton.setAttribute('aria-label', this.localeObj.getConstant('playSlideTransition'));
+            classList(pauseIcon, [CLS_PLAY_ICON], [CLS_PAUSE_ICON]);
+        }
+        this.setProperties({ autoPlay: false }, true);
+        const itemsContainer = this.element.querySelector(`.${CLS_ITEMS$2}`);
+        itemsContainer.setAttribute('aria-live', 'off');
+        this.resetSlideInterval();
+    }
+    /**
+     * Method to render react and angular templates
+     *
+     * @returns {void}
+     * @private
+     */
+    renderTemplates() {
+        if (this.isAngular || this.isReact) {
+            this.renderReactTemplates();
+        }
+    }
+    /**
+     * Method to reset react and angular templates
+     *
+     * @param {string[]} templates Accepts the template ID
+     * @returns {void}
+     * @private
+     */
+    resetTemplates(templates) {
+        if (this.isAngular || this.isReact) {
+            this.clearTemplate(templates);
+        }
+    }
+    /**
+     * Method for destroy the carousel component.
+     *
+     * @returns {void}
+     */
+    destroy() {
+        this.resetTemplates();
+        if (this.touchModule) {
+            this.touchModule.destroy();
+            this.touchModule = null;
+        }
+        this.keyModule.destroy();
+        this.keyModule = null;
+        this.resetSlideInterval();
+        this.destroyButtons();
+        this.unWireEvents();
+        [].slice.call(this.element.children).forEach((ele) => { this.element.removeChild(ele); });
+        removeClass([this.element], [CLS_CAROUSEL, this.cssClass, CLS_RTL$5]);
+        ['tabindex', 'role', 'style'].forEach((attr) => { this.element.removeAttribute(attr); });
+        super.destroy();
+    }
+};
+__decorate$11([
+    Collection([], CarouselItem)
+], Carousel.prototype, "items", void 0);
+__decorate$11([
+    Complex({}, CarouselAnimationSettings)
+], Carousel.prototype, "animation", void 0);
+__decorate$11([
+    Property()
+], Carousel.prototype, "previousButtonTemplate", void 0);
+__decorate$11([
+    Property()
+], Carousel.prototype, "nextButtonTemplate", void 0);
+__decorate$11([
+    Property()
+], Carousel.prototype, "indicatorsTemplate", void 0);
+__decorate$11([
+    Property()
+], Carousel.prototype, "playButtonTemplate", void 0);
+__decorate$11([
+    Property()
+], Carousel.prototype, "cssClass", void 0);
+__decorate$11([
+    Property([])
+], Carousel.prototype, "dataSource", void 0);
+__decorate$11([
+    Property()
+], Carousel.prototype, "itemTemplate", void 0);
+__decorate$11([
+    Property(0)
+], Carousel.prototype, "selectedIndex", void 0);
+__decorate$11([
+    Property('100%')
+], Carousel.prototype, "width", void 0);
+__decorate$11([
+    Property('100%')
+], Carousel.prototype, "height", void 0);
+__decorate$11([
+    Property(5000)
+], Carousel.prototype, "interval", void 0);
+__decorate$11([
+    Property(true)
+], Carousel.prototype, "autoPlay", void 0);
+__decorate$11([
+    Property(true)
+], Carousel.prototype, "loop", void 0);
+__decorate$11([
+    Property(false)
+], Carousel.prototype, "showPlayButton", void 0);
+__decorate$11([
+    Property(true)
+], Carousel.prototype, "enableTouchSwipe", void 0);
+__decorate$11([
+    Property(true)
+], Carousel.prototype, "showIndicators", void 0);
+__decorate$11([
+    Property('Visible')
+], Carousel.prototype, "buttonsVisibility", void 0);
+__decorate$11([
+    Property()
+], Carousel.prototype, "htmlAttributes", void 0);
+__decorate$11([
+    Event()
+], Carousel.prototype, "slideChanging", void 0);
+__decorate$11([
+    Event()
+], Carousel.prototype, "slideChanged", void 0);
+Carousel = __decorate$11([
+    NotifyPropertyChanges
+], Carousel);
+
+/** Carousel export modules */
+
 /**
  * Navigation all modules
  */
 
-export { MenuAnimationSettings, MenuItem, HScroll, VScroll, addScrolling, destroyScroll, Item, Toolbar, AccordionActionSettings, AccordionAnimationSettings, AccordionItem, Accordion, ContextMenu, Menu, TabActionSettings, TabAnimationSettings, Header, TabItem, Tab, FieldsSettings, ActionSettings, NodeAnimationSettings, TreeView, Sidebar, BreadcrumbItem, Breadcrumb };
+export { MenuAnimationSettings, MenuItem, HScroll, VScroll, addScrolling, destroyScroll, Item, Toolbar, AccordionActionSettings, AccordionAnimationSettings, AccordionItem, Accordion, ContextMenu, Menu, TabActionSettings, TabAnimationSettings, Header, TabItem, Tab, FieldsSettings, ActionSettings, NodeAnimationSettings, TreeView, Sidebar, BreadcrumbItem, Breadcrumb, CarouselItem, CarouselAnimationSettings, Carousel };
 //# sourceMappingURL=ej2-navigations.es2015.js.map