@syncfusion/ej2-navigations 21.2.9 → 22.1.34

package/src/carousel/carousel.js

@@ -18,7 +18,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Component, EventHandler, Collection, Property, Event, formatUnit, NotifyPropertyChanges } from '@syncfusion/ej2-base';
+import { Component, EventHandler, Collection, Property, Event, formatUnit, NotifyPropertyChanges, Browser } from '@syncfusion/ej2-base';
 import { ChildProperty, addClass, removeClass, setStyleAttribute, attributes, getUniqueID, compile, getInstance, L10n } from '@syncfusion/ej2-base';
 import { append, closest, isNullOrUndefined, remove, classList, Touch, KeyboardEvents } from '@syncfusion/ej2-base';
 import { Button } from '@syncfusion/ej2-buttons';
@@ -27,6 +27,7 @@ var CLS_CAROUSEL = 'e-carousel';
 var CLS_ACTIVE = 'e-active';
 var CLS_RTL = 'e-rtl';
 var CLS_PARTIAL = 'e-partial';
+var CLS_SWIPE = 'e-swipe';
 var CLS_SLIDE_CONTAINER = 'e-carousel-slide-container';
 var CLS_ITEMS = 'e-carousel-items';
 var CLS_CLONED = 'e-cloned';
@@ -60,6 +61,19 @@ var CLS_PREV_SLIDE = 'e-prev';
 var CLS_NEXT_SLIDE = 'e-next';
 var CLS_TRANSITION_START = 'e-transition-start';
 var CLS_TRANSITION_END = 'e-transition-end';
+/**
+ * Specifies the action (touch & mouse) which enables the slide swiping action in carousel.
+ * * Touch - Enables or disables the swiping action in touch interaction.
+ * * Mouse - Enables or disables the swiping action in mouse interaction.
+ * @aspNumberEnum
+ */
+export var CarouselSwipeMode;
+(function (CarouselSwipeMode) {
+    /** Enables or disables the swiping action in touch interaction. */
+    CarouselSwipeMode[CarouselSwipeMode["Touch"] = 1] = "Touch";
+    /** Enables or disables the swiping action in mouse interaction. */
+    CarouselSwipeMode[CarouselSwipeMode["Mouse"] = 2] = "Mouse";
+})(CarouselSwipeMode || (CarouselSwipeMode = {}));
 /** Specifies the carousel individual item. */
 var CarouselItem = /** @class */ (function (_super) {
     __extends(CarouselItem, _super);
@@ -90,7 +104,9 @@ var Carousel = /** @class */ (function (_super) {
      * @param {string | HTMLElement} element Accepts the DOM element reference
      */
     function Carousel(options, element) {
-        return _super.call(this, options, element) || this;
+        var _this = _super.call(this, options, element) || this;
+        _this.isSwipe = false;
+        return _this;
     }
     Carousel.prototype.getModuleName = function () {
         return CLS_CAROUSEL.replace('e-', '');
@@ -162,7 +178,7 @@ var Carousel = /** @class */ (function (_super) {
                         this.applySlideInterval();
                     }
                     this.handleNavigatorsActions(this.selectedIndex);
-                    if (this.partialVisible) {
+                    if (this.partialVisible || !(this.swipeMode === (~CarouselSwipeMode.Touch & ~CarouselSwipeMode.Mouse))) {
                         this.reRenderSlides();
                     }
                     break;
@@ -175,11 +191,10 @@ var Carousel = /** @class */ (function (_super) {
                     else {
                         removeClass(rtlElement, CLS_RTL);
                     }
-                    if (this.partialVisible) {
-                        var itemsContainer = this.element.querySelector("." + CLS_ITEMS);
-                        var cloneCount = this.loop ? 2 : 0;
-                        var slideWidth = itemsContainer.firstElementChild.clientWidth;
-                        itemsContainer.style.transform = this.getTranslateX(slideWidth, this.selectedIndex + cloneCount);
+                    if (this.partialVisible || !(this.swipeMode === (~CarouselSwipeMode.Touch & ~CarouselSwipeMode.Mouse))) {
+                        var cloneCount = this.loop ? this.getNumOfItems() : 0;
+                        var slideWidth = this.itemsContainer.firstElementChild.clientWidth;
+                        this.itemsContainer.style.transform = this.getTranslateX(slideWidth, this.selectedIndex + cloneCount);
                     }
                     break;
                 case 'buttonsVisibility':
@@ -219,8 +234,9 @@ var Carousel = /** @class */ (function (_super) {
                     this.autoSlide();
                     break;
                 case 'showIndicators':
+                case 'indicatorsType':
                     target = this.element.querySelector("." + CLS_INDICATORS);
-                    if (!this.showIndicators && target) {
+                    if (target) {
                         this.resetTemplates(['indicatorsTemplate']);
                         remove(target);
                     }
@@ -247,6 +263,13 @@ var Carousel = /** @class */ (function (_super) {
                     }
                     this.reRenderSlides();
                     break;
+                case 'swipeMode':
+                    EventHandler.remove(this.element, 'mousedown touchstart', this.swipeStart);
+                    EventHandler.remove(this.element, 'mousemove touchmove', this.swiping);
+                    EventHandler.remove(this.element, 'mouseup touchend', this.swipStop);
+                    this.swipeModehandlers();
+                    this.reRenderSlides();
+                    break;
             }
         }
     };
@@ -269,6 +292,9 @@ var Carousel = /** @class */ (function (_super) {
         if (this.partialVisible) {
             carouselClasses.push(CLS_PARTIAL);
         }
+        if (!(this.swipeMode === (~CarouselSwipeMode.Touch & ~CarouselSwipeMode.Mouse))) {
+            carouselClasses.push(CLS_SWIPE);
+        }
         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') });
@@ -283,52 +309,52 @@ var Carousel = /** @class */ (function (_super) {
             slideContainer = this.createElement('div', { className: CLS_SLIDE_CONTAINER });
             this.element.appendChild(slideContainer);
         }
-        var itemsContainer = this.createElement('div', { className: CLS_ITEMS, attrs: { 'aria-live': this.autoPlay ? 'off' : 'polite' } });
-        slideContainer.appendChild(itemsContainer);
-        if (this.partialVisible && this.loop) {
+        this.itemsContainer = this.createElement('div', { className: CLS_ITEMS, attrs: { 'aria-live': this.autoPlay ? 'off' : 'polite' } });
+        slideContainer.appendChild(this.itemsContainer);
+        var numOfItems = this.getNumOfItems();
+        if (numOfItems > 0 && this.loop) {
             if (this.items.length > 0) {
-                this.items.slice(-2).forEach(function (item, index) {
-                    _this.renderSlide(item, item.template, index, itemsContainer, true);
+                this.items.slice(-numOfItems).forEach(function (item, index) {
+                    _this.renderSlide(item, item.template, index, _this.itemsContainer, true);
                 });
             }
             else if (this.dataSource.length > 0) {
-                this.dataSource.slice(-2).forEach(function (item, index) {
-                    _this.renderSlide(item, _this.itemTemplate, index, itemsContainer, true);
+                this.dataSource.slice(-numOfItems).forEach(function (item, index) {
+                    _this.renderSlide(item, _this.itemTemplate, index, _this.itemsContainer, true);
                 });
             }
         }
         if (this.items.length > 0) {
             this.slideItems = this.items;
             this.items.forEach(function (item, index) {
-                _this.renderSlide(item, item.template, index, itemsContainer);
+                _this.renderSlide(item, item.template, index, _this.itemsContainer);
             });
         }
         else if (this.dataSource.length > 0) {
             this.slideItems = this.dataSource;
             this.dataSource.forEach(function (item, index) {
-                _this.renderSlide(item, _this.itemTemplate, index, itemsContainer);
+                _this.renderSlide(item, _this.itemTemplate, index, _this.itemsContainer);
             });
         }
-        if (this.partialVisible && this.loop) {
+        if (numOfItems > 0 && this.loop) {
             if (this.items.length > 0) {
-                this.items.slice(0, 2).forEach(function (item, index) {
-                    _this.renderSlide(item, item.template, index, itemsContainer, true);
+                this.items.slice(0, numOfItems).forEach(function (item, index) {
+                    _this.renderSlide(item, item.template, index, _this.itemsContainer, true);
                 });
             }
             else if (this.dataSource.length > 0) {
-                this.dataSource.slice(0, 2).forEach(function (item, index) {
-                    _this.renderSlide(item, _this.itemTemplate, index, itemsContainer, true);
+                this.dataSource.slice(0, numOfItems).forEach(function (item, index) {
+                    _this.renderSlide(item, _this.itemTemplate, index, _this.itemsContainer, true);
                 });
             }
         }
         this.renderTemplates();
-        if (this.partialVisible) {
-            itemsContainer.style.setProperty('--carousel-items-count', "" + itemsContainer.children.length);
-            var slideWidth = itemsContainer.firstElementChild.clientWidth;
-            var cloneCount = this.loop ? 2 : 0;
-            itemsContainer.style.transitionProperty = 'none';
-            itemsContainer.style.transform = this.getTranslateX(slideWidth, this.selectedIndex + cloneCount);
-        }
+        this.itemsContainer.style.setProperty('--carousel-items-count', "" + this.itemsContainer.children.length);
+        var slideWidth = isNullOrUndefined(this.itemsContainer.firstElementChild) ? 0 :
+            this.itemsContainer.firstElementChild.clientWidth;
+        this.itemsContainer.style.transitionProperty = 'none';
+        var cloneCount = this.loop ? numOfItems : 0;
+        this.itemsContainer.style.transform = this.getTranslateX(slideWidth, this.selectedIndex + cloneCount);
         this.autoSlide();
         this.renderTouchActions();
         this.renderKeyboardActions();
@@ -431,8 +457,7 @@ var Carousel = /** @class */ (function (_super) {
             if (isLastSlide) {
                 this.setProperties({ autoPlay: false }, true);
                 playButton.setAttribute('aria-label', this.localeObj.getConstant('playSlideTransition'));
-                var itemsContainer = this.element.querySelector("." + CLS_ITEMS);
-                itemsContainer.setAttribute('aria-live', 'polite');
+                this.itemsContainer.setAttribute('aria-live', 'polite');
             }
             buttonObj.appendTo(playButton);
             playPauseWrap.appendChild(playButton);
@@ -447,34 +472,70 @@ var Carousel = /** @class */ (function (_super) {
         if (!this.showIndicators) {
             return;
         }
-        var indicatorWrap = this.createElement('div', { className: CLS_INDICATORS });
+        var indicatorClass = 'e-default';
+        if (!this.indicatorsTemplate) {
+            indicatorClass = "e-" + this.indicatorsType.toLowerCase();
+        }
+        var indicatorWrap = this.createElement('div', { className: CLS_INDICATORS + " " + indicatorClass });
         var indicatorBars = this.createElement('div', { className: CLS_INDICATOR_BARS });
         indicatorWrap.appendChild(indicatorBars);
+        var progress;
         if (this.slideItems) {
-            this.slideItems.forEach(function (item, index) {
-                var indicatorBar = _this.createElement('div', {
-                    className: CLS_INDICATOR_BAR + ' ' + (_this.selectedIndex === index ? CLS_ACTIVE : ''),
-                    attrs: { 'data-index': index.toString(), 'aria-current': _this.selectedIndex === index ? 'true' : 'false' }
-                });
-                if (_this.indicatorsTemplate) {
-                    addClass([indicatorBar], CLS_TEMPLATE);
-                    var templateId = _this.element.id + '_indicatorsTemplate';
-                    var template = _this.templateParser(_this.indicatorsTemplate)({ index: index, selectedIndex: _this.selectedIndex }, _this, 'indicatorsTemplate', templateId, false);
-                    append(template, indicatorBar);
-                }
-                else {
-                    var indicator = _this.createElement('button', { className: CLS_INDICATOR, attrs: { 'type': 'button', 'aria-label': _this.localeObj.getConstant('slide') + ' ' + (index + 1) + ' ' + _this.localeObj.getConstant('of') + ' ' + _this.slideItems.length } });
-                    indicatorBar.appendChild(indicator);
-                    indicator.appendChild(_this.createElement('div', {}));
-                    var buttonObj = new Button({ cssClass: 'e-flat e-small' });
-                    buttonObj.appendTo(indicator);
-                }
-                indicatorBars.appendChild(indicatorBar);
-                EventHandler.add(indicatorBar, 'click', _this.indicatorClickHandler, _this);
-            });
+            switch (this.indicatorsType) {
+                case 'Fraction':
+                    if (this.indicatorsTemplate) {
+                        this.renderIndicatorTemplate(indicatorBars, this.selectedIndex + 1);
+                    }
+                    else {
+                        indicatorBars.innerText = this.selectedIndex + 1 + " / " + this.slideItems.length;
+                    }
+                    break;
+                case 'Progress':
+                    if (this.indicatorsTemplate) {
+                        this.renderIndicatorTemplate(indicatorBars, this.selectedIndex + 1);
+                    }
+                    else {
+                        progress = this.createElement('div', { className: CLS_INDICATOR_BAR });
+                        progress.style.setProperty('--carousel-items-current', "" + (this.selectedIndex + 1));
+                        progress.style.setProperty('--carousel-items-count', "" + this.slideItems.length);
+                        indicatorBars.appendChild(progress);
+                    }
+                    break;
+                case 'Default':
+                case 'Dynamic':
+                    this.slideItems.forEach(function (item, index) {
+                        var indicatorBar = _this.createElement('div', {
+                            className: CLS_INDICATOR_BAR + ' ' + (_this.selectedIndex === index ? CLS_ACTIVE : _this.selectedIndex - 1 === index ? CLS_PREV_SLIDE : _this.selectedIndex + 1 === index ? CLS_NEXT_SLIDE : ''),
+                            attrs: { 'data-index': index.toString(), 'aria-current': _this.selectedIndex === index ? 'true' : 'false' }
+                        });
+                        indicatorBar.style.setProperty('--carousel-items-current', "" + _this.selectedIndex);
+                        if (_this.indicatorsTemplate) {
+                            _this.renderIndicatorTemplate(indicatorBar, index);
+                        }
+                        else if (_this.indicatorsType === 'Default') {
+                            var indicator = _this.createElement('button', { className: CLS_INDICATOR, attrs: { 'type': 'button', 'aria-label': _this.localeObj.getConstant('slide') + ' ' + (index + 1) + ' ' + _this.localeObj.getConstant('of') + ' ' + _this.slideItems.length } });
+                            indicatorBar.appendChild(indicator);
+                            indicator.appendChild(_this.createElement('div', {}));
+                            var buttonObj = new Button({ cssClass: 'e-flat e-small' });
+                            buttonObj.appendTo(indicator);
+                        }
+                        indicatorBars.appendChild(indicatorBar);
+                        if (_this.indicatorsType === 'Default') {
+                            EventHandler.add(indicatorBar, 'click', _this.indicatorClickHandler, _this);
+                        }
+                    });
+                    break;
+            }
         }
         this.element.appendChild(indicatorWrap);
     };
+    Carousel.prototype.renderIndicatorTemplate = function (indicatorBar, index) {
+        if (index === void 0) { index = 0; }
+        addClass([indicatorBar], CLS_TEMPLATE);
+        var templateId = this.element.id + '_indicatorsTemplate';
+        var template = this.templateParser(this.indicatorsTemplate)({ index: index, selectedIndex: this.selectedIndex }, this, 'indicatorsTemplate', templateId, false);
+        append(template, indicatorBar);
+    };
     Carousel.prototype.renderKeyboardActions = function () {
         this.keyModule = new KeyboardEvents(this.element, { keyAction: this.keyHandler.bind(this), keyConfigs: this.keyConfigs });
     };
@@ -592,13 +653,7 @@ var Carousel = /** @class */ (function (_super) {
             _this.setProperties({ selectedIndex: currentIndex }, true);
             attributes(args.currentSlide, { 'aria-hidden': 'true' });
             attributes(args.nextSlide, { 'aria-hidden': 'false' });
-            var slideIndicators = [].slice.call(_this.element.querySelectorAll("." + CLS_INDICATOR_BAR));
-            if (slideIndicators.length > 0) {
-                attributes(slideIndicators[parseInt(activeIndex.toString(), 10)], { 'aria-current': 'false' });
-                attributes(slideIndicators[parseInt(currentIndex.toString(), 10)], { 'aria-current': 'true' });
-                removeClass(slideIndicators, CLS_ACTIVE);
-                addClass([slideIndicators[parseInt(currentIndex.toString(), 10)]], CLS_ACTIVE);
-            }
+            _this.refreshIndicators(activeIndex, currentIndex);
             _this.slideChangedEventArgs = {
                 currentIndex: args.nextIndex,
                 previousIndex: args.currentIndex,
@@ -607,25 +662,32 @@ var Carousel = /** @class */ (function (_super) {
                 slideDirection: direction,
                 isSwiped: isSwiped
             };
-            if (_this.partialVisible) {
-                var container = _this.element.querySelector('.' + CLS_ITEMS);
-                var slideWidth = allSlides[parseInt(currentIndex.toString(), 10)].clientWidth;
-                container.style.transitionProperty = 'transform';
-                if (_this.loop) {
-                    if (_this.slideChangedEventArgs.currentIndex === 0 && _this.slideChangedEventArgs.slideDirection === 'Next') {
-                        container.style.transform = _this.getTranslateX(slideWidth, allSlides.length + 2);
-                    }
-                    else if (_this.slideChangedEventArgs.currentIndex === _this.slideItems.length - 1 && _this.slideChangedEventArgs.slideDirection === 'Previous') {
-                        container.style.transform = _this.getTranslateX(slideWidth);
-                    }
-                    else {
-                        container.style.transform = _this.getTranslateX(slideWidth, currentIndex + 2);
-                    }
+            var slideWidth = allSlides[parseInt(currentIndex.toString(), 10)].clientWidth;
+            var numOfItems = _this.getNumOfItems();
+            if (!_this.isSwipe) {
+                _this.itemsContainer.style.transitionDuration = '0.6s';
+            }
+            _this.isSwipe = false;
+            if ((_this.animationEffect === 'Fade')) {
+                _this.itemsContainer.classList.add('e-fade-in-out');
+            }
+            else {
+                _this.itemsContainer.style.transitionProperty = 'transform';
+            }
+            if (_this.loop) {
+                if (_this.slideChangedEventArgs.currentIndex === 0 && _this.slideChangedEventArgs.slideDirection === 'Next') {
+                    _this.itemsContainer.style.transform = _this.getTranslateX(slideWidth, allSlides.length + numOfItems);
+                }
+                else if (_this.slideChangedEventArgs.currentIndex === _this.slideItems.length - 1 && _this.slideChangedEventArgs.slideDirection === 'Previous') {
+                    _this.itemsContainer.style.transform = _this.partialVisible ? _this.getTranslateX(slideWidth) : 'translateX(0px)';
                 }
                 else {
-                    container.style.transform = _this.getTranslateX(slideWidth, currentIndex);
+                    _this.itemsContainer.style.transform = _this.getTranslateX(slideWidth, currentIndex + numOfItems);
                 }
             }
+            else {
+                _this.itemsContainer.style.transform = _this.getTranslateX(slideWidth, currentIndex);
+            }
             if (_this.animationEffect === 'Slide') {
                 if (direction === 'Previous') {
                     addClass([args.nextSlide], CLS_PREV_SLIDE);
@@ -660,13 +722,14 @@ var Carousel = /** @class */ (function (_super) {
     };
     Carousel.prototype.onTransitionEnd = function () {
         var _this = this;
+        removeClass(this.element.querySelectorAll("." + CLS_ITEMS), 'e-fade-in-out');
+        var numOfItems = this.getNumOfItems();
         if (this.slideChangedEventArgs) {
-            if (this.partialVisible && this.loop && (this.slideChangedEventArgs.currentIndex === 0 && this.slideChangedEventArgs.slideDirection === 'Next' ||
+            this.itemsContainer.style.transitionProperty = 'none';
+            if (this.loop && (this.slideChangedEventArgs.currentIndex === 0 && this.slideChangedEventArgs.slideDirection === 'Next' ||
                 this.slideChangedEventArgs.currentIndex === this.slideItems.length - 1 && this.slideChangedEventArgs.slideDirection === 'Previous')) {
-                var container = this.element.querySelector('.' + CLS_ITEMS);
                 var slideWidth = this.slideChangedEventArgs.currentSlide.clientWidth;
-                container.style.transitionProperty = 'none';
-                container.style.transform = this.getTranslateX(slideWidth, this.slideChangedEventArgs.currentIndex + 2);
+                this.itemsContainer.style.transform = this.getTranslateX(slideWidth, this.slideChangedEventArgs.currentIndex + numOfItems);
             }
             addClass([this.slideChangedEventArgs.currentSlide], CLS_ACTIVE);
             removeClass([this.slideChangedEventArgs.previousSlide], CLS_ACTIVE);
@@ -676,6 +739,52 @@ var Carousel = /** @class */ (function (_super) {
             });
         }
     };
+    Carousel.prototype.refreshIndicators = function (activeIndex, currentIndex) {
+        var _this = this;
+        var slideIndicator = this.element.querySelector("." + CLS_INDICATOR_BARS);
+        if (isNullOrUndefined(slideIndicator)) {
+            return;
+        }
+        var indicators = [].slice.call(slideIndicator.childNodes);
+        switch (this.indicatorsType) {
+            case 'Default':
+            case 'Dynamic':
+                attributes(indicators[parseInt(activeIndex.toString(), 10)], { 'aria-current': 'false' });
+                attributes(indicators[parseInt(currentIndex.toString(), 10)], { 'aria-current': 'true' });
+                removeClass(indicators, [CLS_ACTIVE, CLS_PREV_SLIDE, CLS_NEXT_SLIDE]);
+                addClass([indicators[parseInt(currentIndex.toString(), 10)]], CLS_ACTIVE);
+                if (indicators[currentIndex - 1]) {
+                    addClass([indicators[currentIndex - 1]], CLS_PREV_SLIDE);
+                }
+                if (indicators[currentIndex + 1]) {
+                    addClass([indicators[currentIndex + 1]], CLS_NEXT_SLIDE);
+                }
+                indicators.forEach(function (item) { return item.style.setProperty('--carousel-items-current', "" + _this.selectedIndex); });
+                break;
+            case 'Fraction':
+                if (this.indicatorsTemplate) {
+                    if (slideIndicator.children.length > 0) {
+                        slideIndicator.removeChild(slideIndicator.firstElementChild);
+                    }
+                    this.renderIndicatorTemplate(slideIndicator, currentIndex + 1);
+                }
+                else {
+                    slideIndicator.innerText = this.selectedIndex + 1 + " / " + this.slideItems.length;
+                }
+                break;
+            case 'Progress':
+                if (this.indicatorsTemplate) {
+                    if (slideIndicator.children.length > 0) {
+                        slideIndicator.removeChild(slideIndicator.firstElementChild);
+                    }
+                    this.renderIndicatorTemplate(slideIndicator, currentIndex + 1);
+                }
+                else {
+                    slideIndicator.firstElementChild.style.setProperty('--carousel-items-current', "" + (this.selectedIndex + 1));
+                }
+                break;
+        }
+    };
     Carousel.prototype.setHtmlAttributes = function (attribute, element) {
         var keys = Object.keys(attribute);
         for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
@@ -691,7 +800,7 @@ var Carousel = /** @class */ (function (_super) {
     Carousel.prototype.templateParser = function (template) {
         if (template) {
             try {
-                if (document.querySelectorAll(template).length) {
+                if (typeof template !== 'function' && document.querySelectorAll(template).length) {
                     return compile(document.querySelector(template).innerHTML.trim());
                 }
                 else {
@@ -741,8 +850,7 @@ var Carousel = /** @class */ (function (_super) {
             playButton.setAttribute('aria-label', this.localeObj.getConstant(this.autoPlay ? 'pauseSlideTransition' : 'playSlideTransition'));
             buttonObj.iconCss = CLS_ICON + ' ' + (this.autoPlay ? CLS_PAUSE_ICON : CLS_PLAY_ICON);
             buttonObj.dataBind();
-            var itemsContainer = this.element.querySelector("." + CLS_ITEMS);
-            itemsContainer.setAttribute('aria-live', this.autoPlay ? 'off' : 'polite');
+            this.itemsContainer.setAttribute('aria-live', this.autoPlay ? 'off' : 'polite');
             if (this.autoPlay && !this.loop && this.selectedIndex === this.slideItems.length - 1) {
                 this.setActiveSlide(0, 'Next');
             }
@@ -826,8 +934,7 @@ var Carousel = /** @class */ (function (_super) {
             if (isButtonUpdate) {
                 this.setProperties({ autoPlay: !isLastSlide }, true);
                 playButton.setAttribute('aria-label', this.localeObj.getConstant(this.autoPlay ? 'pauseSlideTransition' : 'playSlideTransition'));
-                var itemsContainer = this.element.querySelector("." + CLS_ITEMS);
-                itemsContainer.setAttribute('aria-live', this.autoPlay ? 'off' : 'polite');
+                this.itemsContainer.setAttribute('aria-live', this.autoPlay ? 'off' : 'polite');
                 var buttonObj = getInstance(playButton, Button);
                 buttonObj.iconCss = CLS_ICON + ' ' + (this.autoPlay ? CLS_PAUSE_ICON : CLS_PLAY_ICON);
                 buttonObj.dataBind();
@@ -887,7 +994,94 @@ var Carousel = /** @class */ (function (_super) {
             }
         }
     };
+    Carousel.prototype.getNumOfItems = function () {
+        return this.partialVisible ? 2 : 1;
+    };
+    Carousel.prototype.getTranslateValue = function (element) {
+        var style = getComputedStyle(element);
+        return window.WebKitCSSMatrix ?
+            new WebKitCSSMatrix(style.webkitTransform).m41 : 0;
+    };
+    Carousel.prototype.swipeStart = function (e) {
+        if (!this.timeStampStart) {
+            this.timeStampStart = Date.now();
+        }
+        this.isSwipe = false;
+        this.itemsContainer.classList.add('e-swipe-start');
+        this.prevPageX = e.touches ? e.touches[0].pageX : e.pageX;
+        this.initialTranslate = this.getTranslateValue(this.itemsContainer);
+    };
+    Carousel.prototype.swiping = function (e) {
+        if (!this.itemsContainer.classList.contains('e-swipe-start')) {
+            return;
+        }
+        e.preventDefault();
+        var pageX = e.touches ? e.touches[0].pageX : e.pageX;
+        var positionDiff = this.prevPageX - (pageX);
+        if (!this.loop && ((this.enableRtl && ((this.selectedIndex === 0 && positionDiff > 0) ||
+            (this.selectedIndex === this.itemsContainer.childElementCount - 1 && positionDiff < 0))) ||
+            (!this.enableRtl && ((this.selectedIndex === 0 && positionDiff < 0) ||
+                (this.selectedIndex === this.itemsContainer.childElementCount - 1 && positionDiff > 0))))) {
+            return;
+        }
+        this.itemsContainer.style.transform = "translateX(" + (this.initialTranslate + (this.enableRtl ? positionDiff : -positionDiff)) + "px)";
+    };
+    Carousel.prototype.swipStop = function () {
+        this.isSwipe = true;
+        var time = Date.now() - this.timeStampStart;
+        var distanceX = this.getTranslateValue(this.itemsContainer) - this.initialTranslate;
+        distanceX = distanceX < 0 ? distanceX * -1 : distanceX;
+        if (this.isSwipe) {
+            var offsetDist = distanceX * (Browser.isDevice ? 6 : 1.66);
+            this.itemsContainer.style.transitionDuration = (((Browser.isDevice ? distanceX : offsetDist) / time) / 10) + 's';
+        }
+        var slideWidth = this.itemsContainer.firstElementChild.clientWidth;
+        var threshold = slideWidth / 2;
+        this.itemsContainer.classList.remove('e-swipe-start');
+        var value = this.getTranslateValue(this.itemsContainer);
+        if (value - this.initialTranslate < -threshold) {
+            this.swipeNavigation(!this.enableRtl);
+        }
+        else if (value - this.initialTranslate > threshold) {
+            this.swipeNavigation(this.enableRtl);
+        }
+        else {
+            this.itemsContainer.style.transform = "translateX(" + this.initialTranslate + "px)";
+            if (this.animationEffect === 'Fade') {
+                this.itemsContainer.classList.add('e-fade-in-out');
+            }
+        }
+    };
+    Carousel.prototype.swipeNavigation = function (isRtl) {
+        if (isRtl) {
+            this.next();
+        }
+        else {
+            this.prev();
+        }
+    };
+    Carousel.prototype.swipeModehandlers = function () {
+        if ((this.swipeMode & CarouselSwipeMode.Touch) === CarouselSwipeMode.Touch) {
+            EventHandler.add(this.itemsContainer, 'touchstart', this.swipeStart, this);
+            EventHandler.add(this.itemsContainer, 'touchmove', this.swiping, this);
+            EventHandler.add(this.itemsContainer, 'touchend', this.swipStop, this);
+        }
+        if ((this.swipeMode & CarouselSwipeMode.Mouse) === CarouselSwipeMode.Mouse) {
+            EventHandler.add(this.itemsContainer, 'mousedown', this.swipeStart, this);
+            EventHandler.add(this.itemsContainer, 'mousemove', this.swiping, this);
+            EventHandler.add(this.itemsContainer, 'mouseup', this.swipStop, this);
+        }
+        if ((this.swipeMode === 0) && (this.swipeMode & CarouselSwipeMode.Mouse & CarouselSwipeMode.Touch) ===
+            (CarouselSwipeMode.Mouse & CarouselSwipeMode.Touch)) {
+            EventHandler.add(this.itemsContainer, 'mousedown touchstart', this.swipeStart, this);
+            EventHandler.add(this.itemsContainer, 'mousemove touchmove', this.swiping, this);
+            EventHandler.add(this.itemsContainer, 'mouseup touchend', this.swipStop, this);
+        }
+    };
     Carousel.prototype.wireEvents = function () {
+        if (!(this.animationEffect === 'Custom')) {
+            this.swipeModehandlers();
+        }
         EventHandler.add(this.element, 'focusin focusout', this.onFocusActions, this);
         EventHandler.add(this.element, 'mouseenter mouseleave', this.onHoverActions, this);
         EventHandler.add(this.element.firstElementChild, 'animationend', this.onTransitionEnd, this);
@@ -950,8 +1144,7 @@ var Carousel = /** @class */ (function (_super) {
             playButton.setAttribute('aria-label', this.localeObj.getConstant('pauseSlideTransition'));
         }
         this.setProperties({ autoPlay: true }, true);
-        var itemsContainer = this.element.querySelector("." + CLS_ITEMS);
-        itemsContainer.setAttribute('aria-live', 'off');
+        this.itemsContainer.setAttribute('aria-live', 'off');
         this.applySlideInterval();
     };
     /**
@@ -967,8 +1160,7 @@ var Carousel = /** @class */ (function (_super) {
             classList(pauseIcon, [CLS_PLAY_ICON], [CLS_PAUSE_ICON]);
         }
         this.setProperties({ autoPlay: false }, true);
-        var itemsContainer = this.element.querySelector("." + CLS_ITEMS);
-        itemsContainer.setAttribute('aria-live', 'off');
+        this.itemsContainer.setAttribute('aria-live', 'off');
         this.resetSlideInterval();
     };
     /**
@@ -1073,12 +1265,18 @@ var Carousel = /** @class */ (function (_super) {
     __decorate([
         Property(true)
     ], Carousel.prototype, "showIndicators", void 0);
+    __decorate([
+        Property('Default')
+    ], Carousel.prototype, "indicatorsType", void 0);
     __decorate([
         Property('Visible')
     ], Carousel.prototype, "buttonsVisibility", void 0);
     __decorate([
         Property(false)
     ], Carousel.prototype, "partialVisible", void 0);
+    __decorate([
+        Property(CarouselSwipeMode.Touch)
+    ], Carousel.prototype, "swipeMode", void 0);
     __decorate([
         Property()
     ], Carousel.prototype, "htmlAttributes", void 0);

package/src/common/menu-base-model.d.ts

@@ -251,9 +251,10 @@ export interface MenuBaseModel extends ComponentModel{
      * Not applicable to ContextMenu component.
      *
      * @default null
+     * @aspType string
      * @private
      */
-    template?: string;
+    template?: string | Function;
 
     /**
      * Specifies whether to enable / disable the scrollable option in Menu.

package/src/common/menu-base.d.ts

@@ -270,9 +270,10 @@ export declare abstract class MenuBase extends Component<HTMLUListElement> imple
      * Not applicable to ContextMenu component.
      *
      * @default null
+     * @aspType string
      * @private
      */
-    template: string;
+    template: string | Function;
     /**
      * Specifies whether to enable / disable the scrollable option in Menu.
      * Not applicable to ContextMenu component.

package/src/common/menu-base.js

@@ -479,6 +479,7 @@ var MenuBase = /** @class */ (function (_super) {
         var _this = this;
         if (navIdxLen === void 0) { navIdxLen = this.navIdx.length; }
         if (this.isMenu) {
+            var popup = [this.getWrapper()].concat([].slice.call(selectAll('.' + POPUP)))[navIdxLen];
             var popups_1 = [];
             var allPopup = selectAll('.' + POPUP);
             allPopup.forEach(function (elem) {
@@ -486,7 +487,7 @@ var MenuBase = /** @class */ (function (_super) {
                     popups_1.push(elem);
                 }
             });
-            var popup = [this.getWrapper()].concat([].slice.call(popups_1))[navIdxLen];
+            popup = [this.getWrapper()].concat([].slice.call(popups_1))[navIdxLen];
             return isNullOrUndefined(popup) ? null : select('.e-menu-parent', popup);
         }
         else {
@@ -863,7 +864,6 @@ var MenuBase = /** @class */ (function (_super) {
             }
         }
     };
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     MenuBase.prototype.copyObject = function (source, destination) {
         for (var prop in source) {
             destination["" + prop] = source["" + prop];

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

@@ -1,4 +1,4 @@
-import { attributes, NotifyPropertyChanges, INotifyPropertyChanged, Property } from '@syncfusion/ej2-base';import { Browser, Complex, getUniqueID, SanitizeHtmlHelper  } from '@syncfusion/ej2-base';import { MenuBase, FieldSettings } from '../common/menu-base';import { MenuItemModel, FieldSettingsModel } from '../common/menu-base-model';
+import { attributes, NotifyPropertyChanges, INotifyPropertyChanged, Property } from '@syncfusion/ej2-base';import { Browser, Complex, getUniqueID, SanitizeHtmlHelper, compile  } from '@syncfusion/ej2-base';import { MenuBase, FieldSettings } from '../common/menu-base';import { MenuItemModel, FieldSettingsModel } from '../common/menu-base-model';
 import {Orientation} from "./menu";
 import {MenuBaseModel} from "../common/menu-base-model";
 
@@ -25,8 +25,9 @@ export interface MenuModel extends MenuBaseModel{
      * Specifies the template for Menu item.
      *
      * @default null
+     * @aspType string
      */
-    template?: string;
+    template?: string | Function;
 
     /**
      * Specifies whether to enable / disable the scrollable option in Menu.