primeng 8.0.2 → 8.1.1

package/components/carousel/carousel.js

@@ -10,29 +10,107 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var core_1 = require("@angular/core");
-var domhandler_1 = require("../dom/domhandler");
 var shared_1 = require("../common/shared");
 var common_1 = require("@angular/common");
+var uniquecomponentid_1 = require("../utils/uniquecomponentid");
 var Carousel = /** @class */ (function () {
-    function Carousel(el, renderer, cd) {
+    function Carousel(el, zone) {
         this.el = el;
-        this.renderer = renderer;
-        this.cd = cd;
-        this.numVisible = 3;
-        this.firstVisible = 0;
+        this.zone = zone;
+        this.orientation = "horizontal";
+        this.verticalViewPortHeight = "300px";
+        this.contentClass = "";
+        this.dotsContainerClass = "";
         this.circular = false;
-        this.breakpoint = 560;
-        this.responsive = true;
         this.autoplayInterval = 0;
-        this.effectDuration = '1s';
-        this.easing = 'ease-out';
-        this.pageLinks = 3;
         this.onPage = new core_1.EventEmitter();
-        this.left = 0;
-        this.columns = 0;
+        this._numVisible = 1;
+        this._numScroll = 1;
+        this._oldNumScroll = 0;
+        this.prevState = {
+            numScroll: 0,
+            numVisible: 0,
+            value: []
+        };
+        this.defaultNumScroll = 1;
+        this.defaultNumVisible = 1;
+        this._page = 0;
+        this.isRemainingItemsAdded = false;
+        this.remainingItems = 0;
+        this.totalShiftedItems = this.page * this.numScroll * -1;
     }
+    Object.defineProperty(Carousel.prototype, "page", {
+        get: function () {
+            return this._page;
+        },
+        set: function (val) {
+            if (this.isCreated && val !== this._page) {
+                if (this.autoplayInterval) {
+                    this.stopAutoplay();
+                    this.allowAutoplay = false;
+                }
+                if (val > this._page && val < (this.totalDots() - 1)) {
+                    this.step(-1, val);
+                }
+                else if (val < this._page && val !== 0) {
+                    this.step(1, val);
+                }
+            }
+            this._page = val;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(Carousel.prototype, "numVisible", {
+        get: function () {
+            return this._numVisible;
+        },
+        set: function (val) {
+            this._numVisible = val;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(Carousel.prototype, "numScroll", {
+        get: function () {
+            return this._numVisible;
+        },
+        set: function (val) {
+            this._numScroll = val;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(Carousel.prototype, "value", {
+        get: function () {
+            return this._value;
+        },
+        set: function (val) {
+            this._value = val;
+            if (this.circular && this._value) {
+                this.setCloneItems();
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    ;
     Carousel.prototype.ngAfterContentInit = function () {
         var _this = this;
+        this.id = uniquecomponentid_1.UniqueComponentId();
+        this.allowAutoplay = !!this.autoplayInterval;
+        if (this.circular) {
+            this.setCloneItems();
+        }
+        if (this.responsiveOptions) {
+            this.defaultNumScroll = this._numScroll;
+            this.defaultNumVisible = this._numVisible;
+        }
+        this.createStyle();
+        this.calculatePosition();
+        if (this.responsiveOptions) {
+            this.bindDocumentListeners();
+        }
         this.templates.forEach(function (item) {
             switch (item.getType()) {
                 case 'item':
@@ -44,189 +122,317 @@ var Carousel = /** @class */ (function () {
             }
         });
     };
-    Object.defineProperty(Carousel.prototype, "value", {
-        get: function () {
-            return this._value;
-        },
-        set: function (val) {
-            this._value = val;
-            this.handleDataChange();
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Carousel.prototype.handleDataChange = function () {
-        if (this.value && this.value.length) {
-            if (this.value.length && this.firstVisible >= this.value.length) {
-                this.setPage(this.totalPages - 1);
+    Carousel.prototype.ngAfterContentChecked = function () {
+        var isCircular = this.isCircular();
+        var totalShiftedItems = this.totalShiftedItems;
+        if (this.value && (this.prevState.numScroll !== this._numScroll || this.prevState.numVisible !== this._numVisible || this.prevState.value.length !== this.value.length)) {
+            if (this.autoplayInterval) {
+                this.stopAutoplay();
+            }
+            this.remainingItems = (this.value.length - this._numVisible) % this._numScroll;
+            var page = this._page;
+            if (this.totalDots() !== 0 && page >= this.totalDots()) {
+                page = this.totalDots() - 1;
+                this._page = page;
+                this.onPage.emit({
+                    page: this.page
+                });
+            }
+            totalShiftedItems = (page * this._numScroll) * -1;
+            if (isCircular) {
+                totalShiftedItems -= this._numVisible;
+            }
+            if (page === (this.totalDots() - 1) && this.remainingItems > 0) {
+                totalShiftedItems += (-1 * this.remainingItems) + this._numScroll;
+                this.isRemainingItemsAdded = true;
+            }
+            else {
+                this.isRemainingItemsAdded = false;
+            }
+            if (totalShiftedItems !== this.totalShiftedItems) {
+                this.totalShiftedItems = totalShiftedItems;
+            }
+            this._oldNumScroll = this._numScroll;
+            this.prevState.numScroll = this._numScroll;
+            this.prevState.numVisible = this._numVisible;
+            this.prevState.value = this._value;
+            this.itemsContainer.nativeElement.style.transform = this.isVertical() ? "translate3d(0, " + totalShiftedItems * (100 / this._numVisible) + "%, 0)" : "translate3d(" + totalShiftedItems * (100 / this._numVisible) + "%, 0, 0)";
+            this.isCreated = true;
+            if (this.autoplayInterval && this.isAutoplay()) {
+                this.startAutoplay();
             }
         }
-        else {
-            this.setPage(0);
+        if (isCircular) {
+            if (this.page === 0) {
+                totalShiftedItems = -1 * this._numVisible;
+            }
+            else if (totalShiftedItems === 0) {
+                totalShiftedItems = -1 * this.value.length;
+                if (this.remainingItems > 0) {
+                    this.isRemainingItemsAdded = true;
+                }
+            }
+            if (totalShiftedItems !== this.totalShiftedItems) {
+                this.totalShiftedItems = totalShiftedItems;
+            }
         }
-        this.valuesChanged = true;
     };
-    Carousel.prototype.ngAfterViewChecked = function () {
-        if (this.valuesChanged && this.containerViewChild && this.containerViewChild.nativeElement.offsetParent) {
-            this.render();
-            this.valuesChanged = false;
+    Carousel.prototype.createStyle = function () {
+        if (!this.carouselStyle) {
+            this.carouselStyle = document.createElement('style');
+            this.carouselStyle.type = 'text/css';
+            document.body.appendChild(this.carouselStyle);
         }
-    };
-    Carousel.prototype.ngAfterViewInit = function () {
-        var _this = this;
-        if (this.responsive) {
-            this.documentResponsiveListener = this.renderer.listen('window', 'resize', function (event) {
-                _this.updateState();
+        var innerHTML = "\n            #" + this.id + " .ui-carousel-item {\n\t\t\t\tflex: 1 0 " + (100 / this.numVisible) + "%\n\t\t\t}\n        ";
+        if (this.responsiveOptions) {
+            this.responsiveOptions.sort(function (data1, data2) {
+                var value1 = data1.breakpoint;
+                var value2 = data2.breakpoint;
+                var result = null;
+                if (value1 == null && value2 != null)
+                    result = -1;
+                else if (value1 != null && value2 == null)
+                    result = 1;
+                else if (value1 == null && value2 == null)
+                    result = 0;
+                else if (typeof value1 === 'string' && typeof value2 === 'string')
+                    result = value1.localeCompare(value2, undefined, { numeric: true });
+                else
+                    result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;
+                return -1 * result;
             });
+            for (var i = 0; i < this.responsiveOptions.length; i++) {
+                var res = this.responsiveOptions[i];
+                innerHTML += "\n                    @media screen and (max-width: " + res.breakpoint + ") {\n                        #" + this.id + " .ui-carousel-item {\n                            flex: 1 0 " + (100 / res.numVisible) + "%\n                        }\n                    }\n                ";
+            }
         }
+        this.carouselStyle.innerHTML = innerHTML;
     };
-    Carousel.prototype.updateLinks = function () {
-        this.anchorPageLinks = [];
-        for (var i = 0; i < this.totalPages; i++) {
-            this.anchorPageLinks.push(i);
+    Carousel.prototype.calculatePosition = function () {
+        if (this.itemsContainer && this.responsiveOptions) {
+            var windowWidth = window.innerWidth;
+            var matchedResponsiveData = {
+                numVisible: this.defaultNumVisible,
+                numScroll: this.defaultNumScroll
+            };
+            for (var i = 0; i < this.responsiveOptions.length; i++) {
+                var res = this.responsiveOptions[i];
+                if (parseInt(res.breakpoint, 10) >= windowWidth) {
+                    matchedResponsiveData = res;
+                }
+            }
+            if (this._numScroll !== matchedResponsiveData.numScroll) {
+                var page = this._page;
+                page = Math.floor((page * this._numScroll) / matchedResponsiveData.numScroll);
+                var totalShiftedItems = (matchedResponsiveData.numScroll * this.page) * -1;
+                if (this.isCircular()) {
+                    totalShiftedItems -= matchedResponsiveData.numVisible;
+                }
+                this.totalShiftedItems = totalShiftedItems;
+                this._numScroll = matchedResponsiveData.numScroll;
+                this._page = page;
+                this.onPage.emit({
+                    page: this.page
+                });
+            }
+            if (this._numVisible !== matchedResponsiveData.numVisible) {
+                this._numVisible = matchedResponsiveData.numVisible;
+                this.setCloneItems();
+            }
         }
     };
-    Carousel.prototype.updateDropdown = function () {
-        this.selectDropdownOptions = [];
-        for (var i = 0; i < this.totalPages; i++) {
-            this.selectDropdownOptions.push(i);
+    Carousel.prototype.setCloneItems = function () {
+        var _a, _b;
+        this.clonedItemsForStarting = [];
+        this.clonedItemsForFinishing = [];
+        if (this.isCircular()) {
+            (_a = this.clonedItemsForStarting).push.apply(_a, this.value.slice(-1 * this._numVisible));
+            (_b = this.clonedItemsForFinishing).push.apply(_b, this.value.slice(0, this._numVisible));
         }
     };
-    Carousel.prototype.updateMobileDropdown = function () {
-        this.mobileDropdownOptions = [];
-        if (this.value && this.value.length) {
-            for (var i = 0; i < this.value.length; i++) {
-                this.mobileDropdownOptions.push(i);
-            }
-        }
+    Carousel.prototype.firstIndex = function () {
+        return this.isCircular() ? (-1 * (this.totalShiftedItems + this.numVisible)) : (this.totalShiftedItems * -1);
+    };
+    Carousel.prototype.lastIndex = function () {
+        return this.firstIndex() + this.numVisible - 1;
+    };
+    Carousel.prototype.totalDots = function () {
+        return this.value ? Math.ceil((this.value.length - this._numVisible) / this._numScroll) + 1 : 0;
+    };
+    Carousel.prototype.totalDotsArray = function () {
+        return Array(this.value ? Math.ceil((this.value.length - this._numVisible) / this._numScroll) + 1 : 0).fill(0);
+        ;
+    };
+    Carousel.prototype.containerClass = function () {
+        return { 'ui-carousel ui-widget': true,
+            'ui-carousel-vertical': this.isVertical(),
+            'ui-carousel-horizontal': !this.isVertical()
+        };
+    };
+    Carousel.prototype.contentClasses = function () {
+        return 'ui-carousel-content ' + this.contentClass;
+    };
+    Carousel.prototype.dotsContentClasses = function () {
+        return 'ui-carousel-dots-container ui-helper-reset ' + this.dotsContainerClass;
+    };
+    Carousel.prototype.isVertical = function () {
+        return this.orientation === 'vertical';
+    };
+    Carousel.prototype.isCircular = function () {
+        return this.circular && this.value && this.value.length >= this.numVisible;
+    };
+    Carousel.prototype.isAutoplay = function () {
+        return this.autoplayInterval && this.allowAutoplay;
     };
-    Carousel.prototype.render = function () {
+    Carousel.prototype.navForward = function (e, index) {
+        if (this.circular || this._page < (this.totalDots() - 1)) {
+            this.step(-1, index);
+        }
         if (this.autoplayInterval) {
             this.stopAutoplay();
+            this.allowAutoplay = false;
+        }
+        if (e && e.cancelable) {
+            e.preventDefault();
         }
-        this.items = domhandler_1.DomHandler.find(this.itemsViewChild.nativeElement, 'li');
-        this.calculateColumns();
-        this.calculateItemWidths();
-        this.setPage(Math.floor(this.firstVisible / this.columns), true);
-        if (!this.responsive) {
-            this.containerViewChild.nativeElement.style.width = (domhandler_1.DomHandler.width(this.containerViewChild.nativeElement)) + 'px';
+    };
+    Carousel.prototype.navBackward = function (e, index) {
+        if (this.circular || this._page !== 0) {
+            this.step(1, index);
         }
         if (this.autoplayInterval) {
-            this.circular = true;
-            this.startAutoplay();
+            this.stopAutoplay();
+            this.allowAutoplay = false;
+        }
+        if (e && e.cancelable) {
+            e.preventDefault();
         }
-        this.updateMobileDropdown();
-        this.updateLinks();
-        this.updateDropdown();
-        this.cd.detectChanges();
     };
-    Carousel.prototype.calculateItemWidths = function () {
-        var firstItem = (this.items && this.items.length) ? this.items[0] : null;
-        if (firstItem) {
-            for (var i = 0; i < this.items.length; i++) {
-                this.items[i].style.width = ((domhandler_1.DomHandler.innerWidth(this.viewportViewChild.nativeElement) - (domhandler_1.DomHandler.getHorizontalMargin(firstItem) * this.columns)) / this.columns) + 'px';
-            }
+    Carousel.prototype.onDotClick = function (e, index) {
+        var page = this._page;
+        if (this.autoplayInterval) {
+            this.stopAutoplay();
+            this.allowAutoplay = false;
+        }
+        if (index > page) {
+            this.navForward(e, index);
+        }
+        else if (index < page) {
+            this.navBackward(e, index);
         }
     };
-    Carousel.prototype.calculateColumns = function () {
-        if (window.innerWidth <= this.breakpoint) {
-            this.shrinked = true;
-            this.columns = 1;
+    Carousel.prototype.step = function (dir, page) {
+        var totalShiftedItems = this.totalShiftedItems;
+        var isCircular = this.isCircular();
+        if (page != null) {
+            totalShiftedItems = (this._numScroll * page) * -1;
+            if (isCircular) {
+                totalShiftedItems -= this._numVisible;
+            }
+            this.isRemainingItemsAdded = false;
         }
         else {
-            this.shrinked = false;
-            this.columns = this.numVisible;
+            totalShiftedItems += (this._numScroll * dir);
+            if (this.isRemainingItemsAdded) {
+                totalShiftedItems += this.remainingItems - (this._numScroll * dir);
+                this.isRemainingItemsAdded = false;
+            }
+            var originalShiftedItems = isCircular ? (totalShiftedItems + this._numVisible) : totalShiftedItems;
+            page = Math.abs(Math.floor((originalShiftedItems / this._numScroll)));
         }
-        this.page = Math.floor(this.firstVisible / this.columns);
-    };
-    Carousel.prototype.onNextNav = function () {
-        var lastPage = (this.page === (this.totalPages - 1));
-        if (!lastPage)
-            this.setPage(this.page + 1);
-        else if (this.circular)
-            this.setPage(0);
+        if (isCircular && this.page === (this.totalDots() - 1) && dir === -1) {
+            totalShiftedItems = -1 * (this.value.length + this._numVisible);
+            page = 0;
+        }
+        else if (isCircular && this.page === 0 && dir === 1) {
+            totalShiftedItems = 0;
+            page = (this.totalDots() - 1);
+        }
+        else if (page === (this.totalDots() - 1) && this.remainingItems > 0) {
+            totalShiftedItems += ((this.remainingItems * -1) - (this._numScroll * dir));
+            this.isRemainingItemsAdded = true;
+        }
+        if (this.itemsContainer) {
+            this.itemsContainer.nativeElement.style.transform = this.isVertical() ? "translate3d(0, " + totalShiftedItems * (100 / this._numVisible) + "%, 0)" : "translate3d(" + totalShiftedItems * (100 / this._numVisible) + "%, 0, 0)";
+            this.itemsContainer.nativeElement.style.transition = 'transform 500ms ease 0s';
+        }
+        this.totalShiftedItems = totalShiftedItems;
+        this._page = page;
+        this.onPage.emit({
+            page: this.page
+        });
     };
-    Carousel.prototype.onPrevNav = function () {
-        if (this.page !== 0)
-            this.setPage(this.page - 1);
-        else if (this.circular)
-            this.setPage(this.totalPages - 1);
+    Carousel.prototype.startAutoplay = function () {
+        var _this = this;
+        this.interval = setInterval(function () {
+            if (_this.page === (_this.totalDots() - 1)) {
+                _this.step(-1, 0);
+            }
+            else {
+                _this.step(-1, _this.page + 1);
+            }
+        }, this.autoplayInterval);
     };
-    Carousel.prototype.setPageWithLink = function (event, p) {
-        this.setPage(p);
-        event.preventDefault();
+    Carousel.prototype.stopAutoplay = function () {
+        if (this.interval) {
+            clearInterval(this.interval);
+        }
     };
-    Carousel.prototype.setPage = function (p, enforce) {
-        if (p !== this.page || enforce) {
-            this.page = p;
-            this.left = (-1 * (domhandler_1.DomHandler.innerWidth(this.viewportViewChild.nativeElement) * this.page));
-            this.firstVisible = this.page * this.columns;
-            this.onPage.emit({
-                page: this.page
-            });
+    Carousel.prototype.onTransitionEnd = function () {
+        if (this.itemsContainer) {
+            this.itemsContainer.nativeElement.style.transition = '';
+            if ((this.page === 0 || this.page === (this.totalDots() - 1)) && this.isCircular()) {
+                this.itemsContainer.nativeElement.style.transform = this.isVertical() ? "translate3d(0, " + this.totalShiftedItems * (100 / this._numVisible) + "%, 0)" : "translate3d(" + this.totalShiftedItems * (100 / this._numVisible) + "%, 0, 0)";
+            }
         }
     };
-    Carousel.prototype.onDropdownChange = function (val) {
-        this.setPage(parseInt(val));
+    Carousel.prototype.onTouchStart = function (e) {
+        var touchobj = e.changedTouches[0];
+        this.startPos = {
+            x: touchobj.pageX,
+            y: touchobj.pageY
+        };
     };
-    Object.defineProperty(Carousel.prototype, "displayPageLinks", {
-        get: function () {
-            return (this.totalPages <= this.pageLinks && !this.shrinked);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(Carousel.prototype, "displayPageDropdown", {
-        get: function () {
-            return (this.totalPages > this.pageLinks && !this.shrinked);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(Carousel.prototype, "totalPages", {
-        get: function () {
-            return (this.value && this.value.length) ? Math.ceil(this.value.length / this.columns) : 0;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Carousel.prototype.routerDisplay = function () {
-        var win = window;
-        if (win.innerWidth <= this.breakpoint)
-            return true;
-        else
-            return false;
+    Carousel.prototype.onTouchMove = function (e) {
+        if (e.cancelable) {
+            e.preventDefault();
+        }
+    };
+    Carousel.prototype.onTouchEnd = function (e) {
+        var touchobj = e.changedTouches[0];
+        if (this.isVertical()) {
+            this.changePageOnTouch(e, (touchobj.pageY - this.startPos.y));
+        }
+        else {
+            this.changePageOnTouch(e, (touchobj.pageX - this.startPos.x));
+        }
     };
-    Carousel.prototype.updateState = function () {
-        var win = window;
-        if (win.innerWidth <= this.breakpoint) {
-            this.shrinked = true;
-            this.columns = 1;
-        }
-        else if (this.shrinked) {
-            this.shrinked = false;
-            this.columns = this.numVisible;
-            this.updateLinks();
-            this.updateDropdown();
-        }
-        this.calculateItemWidths();
-        this.setPage(Math.floor(this.firstVisible / this.columns), true);
+    Carousel.prototype.changePageOnTouch = function (e, diff) {
+        if (diff < 0) {
+            this.navForward(e);
+        }
+        else {
+            this.navBackward(e);
+        }
     };
-    Carousel.prototype.startAutoplay = function () {
+    Carousel.prototype.bindDocumentListeners = function () {
         var _this = this;
-        this.interval = setInterval(function () {
-            if (_this.page === (_this.totalPages - 1))
-                _this.setPage(0);
-            else
-                _this.setPage(_this.page + 1);
-        }, this.autoplayInterval);
+        if (!this.documentResizeListener) {
+            this.documentResizeListener = function (e) {
+                _this.calculatePosition();
+            };
+            window.addEventListener('resize', this.documentResizeListener);
+        }
     };
-    Carousel.prototype.stopAutoplay = function () {
-        clearInterval(this.interval);
+    Carousel.prototype.unbindDocumentListeners = function () {
+        if (this.documentResizeListener) {
+            window.removeEventListener('resize', this.documentResizeListener);
+            this.documentResizeListener = null;
+        }
     };
     Carousel.prototype.ngOnDestroy = function () {
-        if (this.documentResponsiveListener) {
-            this.documentResponsiveListener();
+        if (this.responsiveOptions) {
+            this.unbindDocumentListeners();
         }
         if (this.autoplayInterval) {
             this.stopAutoplay();
@@ -234,44 +440,52 @@ var Carousel = /** @class */ (function () {
     };
     __decorate([
         core_1.Input(),
-        __metadata("design:type", Number)
-    ], Carousel.prototype, "numVisible", void 0);
+        __metadata("design:type", Number),
+        __metadata("design:paramtypes", [Number])
+    ], Carousel.prototype, "page", null);
     __decorate([
         core_1.Input(),
-        __metadata("design:type", Number)
-    ], Carousel.prototype, "firstVisible", void 0);
+        __metadata("design:type", Number),
+        __metadata("design:paramtypes", [Number])
+    ], Carousel.prototype, "numVisible", null);
     __decorate([
         core_1.Input(),
-        __metadata("design:type", String)
-    ], Carousel.prototype, "headerText", void 0);
+        __metadata("design:type", Number),
+        __metadata("design:paramtypes", [Number])
+    ], Carousel.prototype, "numScroll", null);
     __decorate([
         core_1.Input(),
-        __metadata("design:type", Boolean)
-    ], Carousel.prototype, "circular", void 0);
+        __metadata("design:type", Array)
+    ], Carousel.prototype, "responsiveOptions", void 0);
     __decorate([
         core_1.Input(),
-        __metadata("design:type", Number)
-    ], Carousel.prototype, "breakpoint", void 0);
+        __metadata("design:type", Object)
+    ], Carousel.prototype, "orientation", void 0);
     __decorate([
         core_1.Input(),
-        __metadata("design:type", Boolean)
-    ], Carousel.prototype, "responsive", void 0);
+        __metadata("design:type", Object)
+    ], Carousel.prototype, "verticalViewPortHeight", void 0);
     __decorate([
         core_1.Input(),
-        __metadata("design:type", Number)
-    ], Carousel.prototype, "autoplayInterval", void 0);
+        __metadata("design:type", String)
+    ], Carousel.prototype, "contentClass", void 0);
     __decorate([
         core_1.Input(),
-        __metadata("design:type", Object)
-    ], Carousel.prototype, "effectDuration", void 0);
+        __metadata("design:type", String)
+    ], Carousel.prototype, "dotsContainerClass", void 0);
     __decorate([
         core_1.Input(),
-        __metadata("design:type", String)
-    ], Carousel.prototype, "easing", void 0);
+        __metadata("design:type", Array),
+        __metadata("design:paramtypes", [Object])
+    ], Carousel.prototype, "value", null);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", Boolean)
+    ], Carousel.prototype, "circular", void 0);
     __decorate([
         core_1.Input(),
         __metadata("design:type", Number)
-    ], Carousel.prototype, "pageLinks", void 0);
+    ], Carousel.prototype, "autoplayInterval", void 0);
     __decorate([
         core_1.Input(),
         __metadata("design:type", Object)
@@ -285,32 +499,27 @@ var Carousel = /** @class */ (function () {
         __metadata("design:type", core_1.EventEmitter)
     ], Carousel.prototype, "onPage", void 0);
     __decorate([
-        core_1.ContentChildren(shared_1.PrimeTemplate),
-        __metadata("design:type", core_1.QueryList)
-    ], Carousel.prototype, "templates", void 0);
-    __decorate([
-        core_1.ViewChild('container', { static: false }),
+        core_1.ViewChild('itemsContainer', { static: true }),
         __metadata("design:type", core_1.ElementRef)
-    ], Carousel.prototype, "containerViewChild", void 0);
+    ], Carousel.prototype, "itemsContainer", void 0);
     __decorate([
-        core_1.ViewChild('viewport', { static: false }),
-        __metadata("design:type", core_1.ElementRef)
-    ], Carousel.prototype, "viewportViewChild", void 0);
+        core_1.ContentChild(shared_1.Header, { static: false }),
+        __metadata("design:type", Object)
+    ], Carousel.prototype, "headerFacet", void 0);
     __decorate([
-        core_1.ViewChild('items', { static: false }),
-        __metadata("design:type", core_1.ElementRef)
-    ], Carousel.prototype, "itemsViewChild", void 0);
+        core_1.ContentChild(shared_1.Footer, { static: false }),
+        __metadata("design:type", Object)
+    ], Carousel.prototype, "footerFacet", void 0);
     __decorate([
-        core_1.Input(),
-        __metadata("design:type", Array),
-        __metadata("design:paramtypes", [Array])
-    ], Carousel.prototype, "value", null);
+        core_1.ContentChildren(shared_1.PrimeTemplate),
+        __metadata("design:type", core_1.QueryList)
+    ], Carousel.prototype, "templates", void 0);
     Carousel = __decorate([
         core_1.Component({
             selector: 'p-carousel',
-            template: "\n        <div #container [ngClass]=\"{'ui-carousel ui-widget ui-widget-content ui-corner-all':true}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <div class=\"ui-carousel-header ui-widget-header ui-corner-all\">\n                <span class=\"ui-carousel-header-title\">{{headerText}}</span>\n                <span class=\"ui-carousel-button ui-carousel-next-button pi pi-arrow-circle-right\" (click)=\"onNextNav()\" \n                        [ngClass]=\"{'ui-state-disabled':(page === (totalPages-1)) && !circular}\" *ngIf=\"value&&value.length\"></span>\n                <span class=\"ui-carousel-button ui-carousel-prev-button pi pi-arrow-circle-left\" (click)=\"onPrevNav()\" \n                        [ngClass]=\"{'ui-state-disabled':(page === 0 && !circular)}\" *ngIf=\"value&&value.length\"></span>\n                <div *ngIf=\"displayPageLinks\" class=\"ui-carousel-page-links\">\n                    <a tabindex=\"0\" (click)=\"setPageWithLink($event,i)\" class=\"ui-carousel-page-link pi\" *ngFor=\"let links of anchorPageLinks;let i=index\" [ngClass]=\"{'pi-circle-on': page===i, 'pi-circle-off': page !== i}\"></a>\n                </div>\n                <select *ngIf=\"displayPageDropdown\" class=\"ui-carousel-dropdown ui-widget ui-state-default ui-corner-left\" [value]=\"page\" (change)=\"onDropdownChange($event.target.value)\">\n                    <option *ngFor=\"let option of selectDropdownOptions\" [value]=\"option\" [selected]=\"value == option\">{{option+1}}</option>\n                </select>\n                <select *ngIf=\"responsive&&value&&value.length\" class=\"ui-carousel-mobiledropdown ui-widget ui-state-default ui-corner-left\" [value]=\"page\" (change)=\"onDropdownChange($event.target.value)\"\n                    [style.display]=\"shrinked ? 'block' : 'none'\">\n                    <option *ngFor=\"let option of mobileDropdownOptions\" [value]=\"option\" [selected]=\"value == option\">{{option+1}}</option>\n                </select>\n            </div>\n            <div #viewport class=\"ui-carousel-viewport\">\n                <ul #items class=\"ui-carousel-items\" [style.left.px]=\"left\" [style.transitionProperty]=\"'left'\" \n                            [style.transitionDuration]=\"effectDuration\" [style.transitionTimingFunction]=\"easing\">\n                    <li *ngFor=\"let item of value\" class=\"ui-carousel-item ui-widget-content ui-corner-all\">\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"></ng-container>\n                    </li>\n                </ul>\n            </div>\n        </div>\n    "
+            template: "\n\t\t<div [attr.id]=\"id\" [ngClass]=\"containerClass()\" [ngStyle]=\"style\" [class]=\"styleClass\">\n\t\t\t<div class=\"ui-carousel-header\" *ngIf=\"headerFacet\">\n\t\t\t\t<ng-content select=\"p-header\"></ng-content>\n\t\t\t</div>\n\t\t\t<div [class]=\"contentClasses()\">\n\t\t\t\t<div class=\"ui-carousel-container\">\n\t\t\t\t\t<button [ngClass]=\"{'ui-carousel-prev ui-button ui-widget ui-state-default ui-corner-all':true, 'ui-state-disabled': _page === 0  && !circular}\" [disabled]=\"_page === 0  && !circular\" (click)=\"navBackward($event)\">\n\t\t\t\t\t\t<span [ngClass]=\"{'ui-carousel-prev-icon pi': true, 'pi-chevron-left': !isVertical(), 'pi-chevron-up': isVertical()}\"></span>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div class=\"ui-carousel-items-content\" [ngStyle]=\"{'height': isVertical() ? verticalViewPortHeight : 'auto'}\">\n\t\t\t\t\t\t<div #itemsContainer class=\"ui-carousel-items-container\" (transitionend)=\"onTransitionEnd()\" (touchend)=\"onTouchEnd($event)\" (touchstart)=\"onTouchStart($event)\" (touchmove)=\"onTouchMove($event)\">\n\t\t\t\t\t\t\t<div *ngFor=\"let item of clonedItemsForStarting; let index = index\" [ngClass]= \"{'ui-carousel-item ui-carousel-item-cloned': true,'ui-carousel-item-active': (totalShiftedItems * -1) === (value.length),\n\t\t\t\t\t\t\t'ui-carousel-item-start': 0 === index,\n\t\t\t\t\t\t\t'ui-carousel-item-end': (clonedItemsForStarting.length - 1) === index}\">\n\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"></ng-container>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div *ngFor=\"let item of value; let index = index\" [ngClass]= \"{'ui-carousel-item': true,'ui-carousel-item-active': (firstIndex() <= index && lastIndex() >= index),\n\t\t\t\t\t\t\t'ui-carousel-item-start': firstIndex() === index,\n\t\t\t\t\t\t\t'ui-carousel-item-end': lastIndex() === index}\">\n\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"></ng-container>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div *ngFor=\"let item of clonedItemsForFinishing; let index = index\" [ngClass]= \"{'ui-carousel-item ui-carousel-item-cloned': true,'ui-carousel-item-active': ((totalShiftedItems *-1) === numVisible),\n\t\t\t\t\t\t\t'ui-carousel-item-start': 0 === index,\n\t\t\t\t\t\t\t'ui-carousel-item-end': (clonedItemsForFinishing.length - 1) === index}\">\n\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"></ng-container>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<button [ngClass]=\"{'ui-carousel-next ui-button ui-widget ui-state-default ui-corner-all': true, 'ui-state-disabled': (_page === totalDots()-1 && !circular)}\" [disabled]=\"_page === totalDots()-1 && !circular\" (click)=\"navForward($event)\">\n\t\t\t\t\t\t<span [ngClass]=\"{'ui-carousel-next-icon pi': true, 'pi-chevron-right': !isVertical(), 'pi-chevron-down': isVertical()}\"></span>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t\t<ul [class]=\"dotsContentClasses()\">\n\t\t\t\t\t<li *ngFor=\"let totalDot of totalDotsArray(); let i = index\" [ngClass]=\"{'ui-carousel-dot-item':true,'ui-state-highlight': _page === i}\">\n\t\t\t\t\t\t<button class=\"ui-button ui-widget ui-state-default ui-corner-all\" (click)=\"onDotClick($event, i)\">\n\t\t\t\t\t\t\t<span [ngClass]=\"{'ui-carousel-dot-icon pi':true, 'pi-circle-on': _page === i, 'pi-circle-off': !(_page === i)}\"></span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</div>\n\t\t\t<div class=\"ui-carousel-footer\" *ngIf=\"footerFacet\">\n\t\t\t\t<ng-content select=\"p-footer\"></ng-content>\n\t\t\t</div>\n\t\t</div>\n\t"
         }),
-        __metadata("design:paramtypes", [core_1.ElementRef, core_1.Renderer2, core_1.ChangeDetectorRef])
+        __metadata("design:paramtypes", [core_1.ElementRef, core_1.NgZone])
     ], Carousel);
     return Carousel;
 }());
@@ -321,7 +530,7 @@ var CarouselModule = /** @class */ (function () {
     CarouselModule = __decorate([
         core_1.NgModule({
             imports: [common_1.CommonModule, shared_1.SharedModule],
-            exports: [Carousel, shared_1.SharedModule],
+            exports: [common_1.CommonModule, Carousel, shared_1.SharedModule],
             declarations: [Carousel]
         })
     ], CarouselModule);