@syncfusion/ej2-navigations 21.2.8 → 22.1.34

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

@@ -1458,7 +1458,15 @@ let MenuBase = class MenuBase extends Component {
     }
     getUlByNavIdx(navIdxLen = this.navIdx.length) {
         if (this.isMenu) {
-            const popup = [this.getWrapper()].concat([].slice.call(selectAll('.' + POPUP)))[navIdxLen];
+            let popup = [this.getWrapper()].concat([].slice.call(selectAll('.' + POPUP)))[navIdxLen];
+            const popups = [];
+            const allPopup = selectAll('.' + POPUP);
+            allPopup.forEach((elem) => {
+                if (this.element.id === elem.id.split('-')[2]) {
+                    popups.push(elem);
+                }
+            });
+            popup = [this.getWrapper()].concat([].slice.call(popups))[navIdxLen];
             return isNullOrUndefined(popup) ? null : select('.e-menu-parent', popup);
         }
         else {
@@ -1826,7 +1834,6 @@ let MenuBase = class MenuBase extends Component {
             }
         }
     }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     copyObject(source, destination) {
         for (const prop in source) {
             destination[`${prop}`] = source[`${prop}`];
@@ -3633,20 +3640,20 @@ let Toolbar = class Toolbar extends Component {
                         if (isVisible(this.popObj.element)) {
                             nodes = [].slice.call(popupCheck.children);
                             if (e.action === 'home') {
-                                ele = nodes[0];
+                                ele = this.focusFirstVisibleEle(nodes);
                             }
                             else {
-                                ele = nodes[nodes.length - 1];
+                                ele = this.focusLastVisibleEle(nodes);
                             }
                         }
                     }
                     else {
                         nodes = this.element.querySelectorAll('.' + CLS_ITEMS + ' .' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + ')');
                         if (e.action === 'home') {
-                            ele = nodes[0];
+                            ele = this.focusFirstVisibleEle(nodes);
                         }
                         else {
-                            ele = nodes[nodes.length - 1];
+                            ele = this.focusLastVisibleEle(nodes);
                         }
                     }
                     if (ele) {
@@ -3760,6 +3767,30 @@ let Toolbar = class Toolbar extends Component {
     eleContains(el) {
         return el.classList.contains(CLS_SEPARATOR) || el.classList.contains(CLS_DISABLE$2) || el.getAttribute('disabled') || el.classList.contains(CLS_HIDDEN) || !isVisible(el) || !el.classList.contains(CLS_ITEM);
     }
+    focusFirstVisibleEle(nodes) {
+        let element;
+        let index = 0;
+        while (index < nodes.length) {
+            const ele = nodes[parseInt(index.toString(), 10)];
+            if (!ele.classList.contains(CLS_HIDDEN) && !ele.classList.contains(CLS_DISABLE$2)) {
+                return ele;
+            }
+            index++;
+        }
+        return element;
+    }
+    focusLastVisibleEle(nodes) {
+        let element;
+        let index = nodes.length - 1;
+        while (index >= 0) {
+            const ele = nodes[parseInt(index.toString(), 10)];
+            if (!ele.classList.contains(CLS_HIDDEN) && !ele.classList.contains(CLS_DISABLE$2)) {
+                return ele;
+            }
+            index--;
+        }
+        return element;
+    }
     eleFocus(closest$$1, pos) {
         const sib = Object(closest$$1)[pos + 'ElementSibling'];
         if (sib) {
@@ -4401,12 +4432,10 @@ let Toolbar = class Toolbar extends Component {
             if (checkoffset) {
                 if (inEle[parseInt(i.toString(), 10)].classList.contains(CLS_SEPARATOR)) {
                     if (this.overflowMode === 'Extended') {
-                        if (itemCount === itemPopCount) {
-                            const sepEle = inEle[parseInt(i.toString(), 10)];
-                            if (checkClass(sepEle, [CLS_SEPARATOR, CLS_TBARIGNORE])) {
-                                inEle[parseInt(i.toString(), 10)].classList.add(CLS_POPUP);
-                                itemPopCount++;
-                            }
+                        const sepEle = inEle[parseInt(i.toString(), 10)];
+                        if (checkClass(sepEle, [CLS_SEPARATOR, CLS_TBARIGNORE])) {
+                            inEle[parseInt(i.toString(), 10)].classList.add(CLS_POPUP);
+                            itemPopCount++;
                         }
                         itemCount++;
                     }
@@ -5357,10 +5386,7 @@ let Toolbar = class Toolbar extends Component {
                     break;
                 case 'width':
                     setStyleAttribute(tEle, { 'width': formatUnit(newProp.width) });
-                    this.renderOverflowMode();
-                    if (this.popObj && wid < tEle.offsetWidth) {
-                        this.popupRefresh(this.popObj.element, false);
-                    }
+                    this.refreshOverflow();
                     break;
                 case 'height':
                     setStyleAttribute(this.element, { 'height': formatUnit(newProp.height) });
@@ -5752,7 +5778,7 @@ let Accordion = class Accordion extends Component {
     templateParser(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 {
@@ -7041,7 +7067,7 @@ let Menu = class Menu extends MenuBase {
         this.element.id = this.element.id || getUniqueID('ej2-menu');
         if (this.template) {
             try {
-                if (document.querySelectorAll(this.template).length) {
+                if (typeof this.template !== 'function' && document.querySelectorAll(this.template).length) {
                     this.template = document.querySelector(this.template).innerHTML.trim();
                     this.clearChanges();
                 }
@@ -9964,7 +9990,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             // eslint-disable-next-line
             this.element.classList.add(INTERACTION);
             try {
-                if (document.querySelectorAll(template).length) {
+                if (typeof template !== 'function' && document.querySelectorAll(template).length) {
                     return compile(document.querySelector(template).innerHTML.trim());
                 }
                 else {
@@ -16224,6 +16250,7 @@ const CLS_CAROUSEL = 'e-carousel';
 const CLS_ACTIVE$2 = 'e-active';
 const CLS_RTL$5 = 'e-rtl';
 const CLS_PARTIAL = 'e-partial';
+const CLS_SWIPE = 'e-swipe';
 const CLS_SLIDE_CONTAINER = 'e-carousel-slide-container';
 const CLS_ITEMS$2 = 'e-carousel-items';
 const CLS_CLONED = 'e-cloned';
@@ -16257,6 +16284,19 @@ 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 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
+ */
+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. */
 class CarouselItem extends ChildProperty {
 }
@@ -16281,6 +16321,7 @@ let Carousel = class Carousel extends Component {
      */
     constructor(options, element) {
         super(options, element);
+        this.isSwipe = false;
     }
     getModuleName() {
         return CLS_CAROUSEL.replace('e-', '');
@@ -16351,7 +16392,7 @@ let Carousel = class Carousel extends Component {
                         this.applySlideInterval();
                     }
                     this.handleNavigatorsActions(this.selectedIndex);
-                    if (this.partialVisible) {
+                    if (this.partialVisible || !(this.swipeMode === (~CarouselSwipeMode.Touch & ~CarouselSwipeMode.Mouse))) {
                         this.reRenderSlides();
                     }
                     break;
@@ -16365,11 +16406,10 @@ let Carousel = class Carousel extends Component {
                     else {
                         removeClass(rtlElement, CLS_RTL$5);
                     }
-                    if (this.partialVisible) {
-                        const itemsContainer = this.element.querySelector(`.${CLS_ITEMS$2}`);
-                        const cloneCount = this.loop ? 2 : 0;
-                        const slideWidth = itemsContainer.firstElementChild.clientWidth;
-                        itemsContainer.style.transform = this.getTranslateX(slideWidth, this.selectedIndex + cloneCount);
+                    if (this.partialVisible || !(this.swipeMode === (~CarouselSwipeMode.Touch & ~CarouselSwipeMode.Mouse))) {
+                        const cloneCount = this.loop ? this.getNumOfItems() : 0;
+                        const slideWidth = this.itemsContainer.firstElementChild.clientWidth;
+                        this.itemsContainer.style.transform = this.getTranslateX(slideWidth, this.selectedIndex + cloneCount);
                     }
                     break;
                 case 'buttonsVisibility':
@@ -16409,8 +16449,9 @@ let Carousel = class Carousel extends Component {
                     this.autoSlide();
                     break;
                 case 'showIndicators':
+                case 'indicatorsType':
                     target = this.element.querySelector(`.${CLS_INDICATORS}`);
-                    if (!this.showIndicators && target) {
+                    if (target) {
                         this.resetTemplates(['indicatorsTemplate']);
                         remove(target);
                     }
@@ -16437,6 +16478,13 @@ let Carousel = class Carousel extends Component {
                     }
                     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;
             }
         }
     }
@@ -16459,6 +16507,9 @@ let Carousel = class Carousel extends Component {
         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') });
@@ -16472,52 +16523,52 @@ let Carousel = class Carousel extends Component {
             slideContainer = this.createElement('div', { className: CLS_SLIDE_CONTAINER });
             this.element.appendChild(slideContainer);
         }
-        const itemsContainer = this.createElement('div', { className: CLS_ITEMS$2, attrs: { 'aria-live': this.autoPlay ? 'off' : 'polite' } });
-        slideContainer.appendChild(itemsContainer);
-        if (this.partialVisible && this.loop) {
+        this.itemsContainer = this.createElement('div', { className: CLS_ITEMS$2, attrs: { 'aria-live': this.autoPlay ? 'off' : 'polite' } });
+        slideContainer.appendChild(this.itemsContainer);
+        const numOfItems = this.getNumOfItems();
+        if (numOfItems > 0 && this.loop) {
             if (this.items.length > 0) {
-                this.items.slice(-2).forEach((item, index) => {
-                    this.renderSlide(item, item.template, index, itemsContainer, true);
+                this.items.slice(-numOfItems).forEach((item, index) => {
+                    this.renderSlide(item, item.template, index, this.itemsContainer, true);
                 });
             }
             else if (this.dataSource.length > 0) {
-                this.dataSource.slice(-2).forEach((item, index) => {
-                    this.renderSlide(item, this.itemTemplate, index, itemsContainer, true);
+                this.dataSource.slice(-numOfItems).forEach((item, index) => {
+                    this.renderSlide(item, this.itemTemplate, index, this.itemsContainer, true);
                 });
             }
         }
         if (this.items.length > 0) {
             this.slideItems = this.items;
             this.items.forEach((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((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((item, index) => {
-                    this.renderSlide(item, item.template, index, itemsContainer, true);
+                this.items.slice(0, numOfItems).forEach((item, index) => {
+                    this.renderSlide(item, item.template, index, this.itemsContainer, true);
                 });
             }
             else if (this.dataSource.length > 0) {
-                this.dataSource.slice(0, 2).forEach((item, index) => {
-                    this.renderSlide(item, this.itemTemplate, index, itemsContainer, true);
+                this.dataSource.slice(0, numOfItems).forEach((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}`);
-            const slideWidth = itemsContainer.firstElementChild.clientWidth;
-            const 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}`);
+        const slideWidth = isNullOrUndefined(this.itemsContainer.firstElementChild) ? 0 :
+            this.itemsContainer.firstElementChild.clientWidth;
+        this.itemsContainer.style.transitionProperty = 'none';
+        const cloneCount = this.loop ? numOfItems : 0;
+        this.itemsContainer.style.transform = this.getTranslateX(slideWidth, this.selectedIndex + cloneCount);
         this.autoSlide();
         this.renderTouchActions();
         this.renderKeyboardActions();
@@ -16618,8 +16669,7 @@ let Carousel = class Carousel extends Component {
             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');
+                this.itemsContainer.setAttribute('aria-live', 'polite');
             }
             buttonObj.appendTo(playButton);
             playPauseWrap.appendChild(playButton);
@@ -16633,34 +16683,69 @@ let Carousel = class Carousel extends Component {
         if (!this.showIndicators) {
             return;
         }
-        const indicatorWrap = this.createElement('div', { className: CLS_INDICATORS });
+        let indicatorClass = 'e-default';
+        if (!this.indicatorsTemplate) {
+            indicatorClass = `e-${this.indicatorsType.toLowerCase()}`;
+        }
+        const indicatorWrap = this.createElement('div', { className: `${CLS_INDICATORS} ${indicatorClass}` });
         const indicatorBars = this.createElement('div', { className: CLS_INDICATOR_BARS });
         indicatorWrap.appendChild(indicatorBars);
+        let progress;
         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, 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', {}));
-                    const 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((item, index) => {
+                        const indicatorBar = this.createElement('div', {
+                            className: CLS_INDICATOR_BAR + ' ' + (this.selectedIndex === index ? CLS_ACTIVE$2 : 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') {
+                            const indicator = this.createElement('button', { className: CLS_INDICATOR$1, 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', {}));
+                            const 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);
     }
+    renderIndicatorTemplate(indicatorBar, index = 0) {
+        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);
+    }
     renderKeyboardActions() {
         this.keyModule = new KeyboardEvents(this.element, { keyAction: this.keyHandler.bind(this), keyConfigs: this.keyConfigs });
     }
@@ -16775,13 +16860,7 @@ let Carousel = class Carousel extends Component {
             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[parseInt(activeIndex.toString(), 10)], { 'aria-current': 'false' });
-                attributes(slideIndicators[parseInt(currentIndex.toString(), 10)], { 'aria-current': 'true' });
-                removeClass(slideIndicators, CLS_ACTIVE$2);
-                addClass([slideIndicators[parseInt(currentIndex.toString(), 10)]], CLS_ACTIVE$2);
-            }
+            this.refreshIndicators(activeIndex, currentIndex);
             this.slideChangedEventArgs = {
                 currentIndex: args.nextIndex,
                 previousIndex: args.currentIndex,
@@ -16790,25 +16869,32 @@ let Carousel = class Carousel extends Component {
                 slideDirection: direction,
                 isSwiped: isSwiped
             };
-            if (this.partialVisible) {
-                const container = this.element.querySelector('.' + CLS_ITEMS$2);
-                const 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);
-                    }
+            const slideWidth = allSlides[parseInt(currentIndex.toString(), 10)].clientWidth;
+            const 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);
@@ -16842,13 +16928,14 @@ let Carousel = class Carousel extends Component {
         });
     }
     onTransitionEnd() {
+        removeClass(this.element.querySelectorAll(`.${CLS_ITEMS$2}`), 'e-fade-in-out');
+        const 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')) {
-                const container = this.element.querySelector('.' + CLS_ITEMS$2);
                 const 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$2);
             removeClass([this.slideChangedEventArgs.previousSlide], CLS_ACTIVE$2);
@@ -16858,6 +16945,51 @@ let Carousel = class Carousel extends Component {
             });
         }
     }
+    refreshIndicators(activeIndex, currentIndex) {
+        const slideIndicator = this.element.querySelector(`.${CLS_INDICATOR_BARS}`);
+        if (isNullOrUndefined(slideIndicator)) {
+            return;
+        }
+        const 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$2, CLS_PREV_SLIDE, CLS_NEXT_SLIDE]);
+                addClass([indicators[parseInt(currentIndex.toString(), 10)]], CLS_ACTIVE$2);
+                if (indicators[currentIndex - 1]) {
+                    addClass([indicators[currentIndex - 1]], CLS_PREV_SLIDE);
+                }
+                if (indicators[currentIndex + 1]) {
+                    addClass([indicators[currentIndex + 1]], CLS_NEXT_SLIDE);
+                }
+                indicators.forEach((item) => 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;
+        }
+    }
     setHtmlAttributes(attribute, element) {
         const keys = Object.keys(attribute);
         for (const key of keys) {
@@ -16872,7 +17004,7 @@ let Carousel = class Carousel extends Component {
     templateParser(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 {
@@ -16921,8 +17053,7 @@ let Carousel = class Carousel extends Component {
             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');
+            this.itemsContainer.setAttribute('aria-live', this.autoPlay ? 'off' : 'polite');
             if (this.autoPlay && !this.loop && this.selectedIndex === this.slideItems.length - 1) {
                 this.setActiveSlide(0, 'Next');
             }
@@ -17006,8 +17137,7 @@ let Carousel = class Carousel extends Component {
             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');
+                this.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();
@@ -17066,7 +17196,94 @@ let Carousel = class Carousel extends Component {
             }
         }
     }
+    getNumOfItems() {
+        return this.partialVisible ? 2 : 1;
+    }
+    getTranslateValue(element) {
+        const style = getComputedStyle(element);
+        return window.WebKitCSSMatrix ?
+            new WebKitCSSMatrix(style.webkitTransform).m41 : 0;
+    }
+    swipeStart(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);
+    }
+    swiping(e) {
+        if (!this.itemsContainer.classList.contains('e-swipe-start')) {
+            return;
+        }
+        e.preventDefault();
+        const pageX = e.touches ? e.touches[0].pageX : e.pageX;
+        const 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)`;
+    }
+    swipStop() {
+        this.isSwipe = true;
+        const time = Date.now() - this.timeStampStart;
+        let distanceX = this.getTranslateValue(this.itemsContainer) - this.initialTranslate;
+        distanceX = distanceX < 0 ? distanceX * -1 : distanceX;
+        if (this.isSwipe) {
+            const offsetDist = distanceX * (Browser.isDevice ? 6 : 1.66);
+            this.itemsContainer.style.transitionDuration = (((Browser.isDevice ? distanceX : offsetDist) / time) / 10) + 's';
+        }
+        const slideWidth = this.itemsContainer.firstElementChild.clientWidth;
+        const threshold = slideWidth / 2;
+        this.itemsContainer.classList.remove('e-swipe-start');
+        const 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');
+            }
+        }
+    }
+    swipeNavigation(isRtl) {
+        if (isRtl) {
+            this.next();
+        }
+        else {
+            this.prev();
+        }
+    }
+    swipeModehandlers() {
+        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);
+        }
+    }
     wireEvents() {
+        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);
@@ -17128,8 +17345,7 @@ let Carousel = class Carousel extends Component {
             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.itemsContainer.setAttribute('aria-live', 'off');
         this.applySlideInterval();
     }
     /**
@@ -17145,8 +17361,7 @@ let Carousel = class Carousel extends Component {
             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.itemsContainer.setAttribute('aria-live', 'off');
         this.resetSlideInterval();
     }
     /**
@@ -17251,12 +17466,18 @@ __decorate$11([
 __decorate$11([
     Property(true)
 ], Carousel.prototype, "showIndicators", void 0);
+__decorate$11([
+    Property('Default')
+], Carousel.prototype, "indicatorsType", void 0);
 __decorate$11([
     Property('Visible')
 ], Carousel.prototype, "buttonsVisibility", void 0);
 __decorate$11([
     Property(false)
 ], Carousel.prototype, "partialVisible", void 0);
+__decorate$11([
+    Property(CarouselSwipeMode.Touch)
+], Carousel.prototype, "swipeMode", void 0);
 __decorate$11([
     Property()
 ], Carousel.prototype, "htmlAttributes", void 0);
@@ -17478,5 +17699,5 @@ AppBar = __decorate$12([
  * Navigation all modules
  */
 
-export { MenuAnimationSettings, MenuItem, FieldSettings, HScroll, VScroll, addScrolling, destroyScroll, Item, Toolbar, AccordionActionSettings, AccordionAnimationSettings, AccordionItem, Accordion, ContextMenu, Menu, TabActionSettings, TabAnimationSettings, Header, TabItem, Tab, FieldsSettings, ActionSettings, NodeAnimationSettings, TreeView, Sidebar, BreadcrumbOverflowMode, BreadcrumbItem, Breadcrumb, CarouselItem, Carousel, AppBar };
+export { MenuAnimationSettings, MenuItem, FieldSettings, HScroll, VScroll, addScrolling, destroyScroll, Item, Toolbar, AccordionActionSettings, AccordionAnimationSettings, AccordionItem, Accordion, ContextMenu, Menu, TabActionSettings, TabAnimationSettings, Header, TabItem, Tab, FieldsSettings, ActionSettings, NodeAnimationSettings, TreeView, Sidebar, BreadcrumbOverflowMode, BreadcrumbItem, Breadcrumb, CarouselSwipeMode, CarouselItem, Carousel, AppBar };
 //# sourceMappingURL=ej2-navigations.es2015.js.map