@pepperi-addons/ngx-lib 0.3.15-beta.19 → 0.3.15-beta.21

package/bundles/pepperi-addons-ngx-lib-carousel.umd.js

@@ -4,802 +4,802 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['pepperi-addons'] = global['pepperi-addons'] || {}, global['pepperi-addons']['ngx-lib'] = global['pepperi-addons']['ngx-lib'] || {}, global['pepperi-addons']['ngx-lib'].carousel = {}), global.ng.core, global.ng.common));
 }(this, (function (exports, core, common) { 'use strict';
 
-    var PepCarouselItemDirective = /** @class */ (function () {
-        function PepCarouselItemDirective(elementRef) {
-            this.display = 'inline-block';
-            this._dragDisabled = false;
-            this._elementRef = elementRef;
-        }
-        Object.defineProperty(PepCarouselItemDirective.prototype, "dragDisabled", {
-            get: function () {
-                return this._dragDisabled;
-            },
-            set: function (value) {
-                this._dragDisabled = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return PepCarouselItemDirective;
-    }());
-    PepCarouselItemDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[pepCarouselItem]',
-                },] }
-    ];
-    PepCarouselItemDirective.ctorParameters = function () { return [
-        { type: core.ElementRef, decorators: [{ type: core.Inject, args: [core.ElementRef,] }] }
-    ]; };
-    PepCarouselItemDirective.propDecorators = {
-        display: [{ type: core.HostBinding, args: ['style.display',] }],
-        dragDisabled: [{ type: core.Input, args: ['dragDisabled',] }]
+    var PepCarouselItemDirective = /** @class */ (function () {
+        function PepCarouselItemDirective(elementRef) {
+            this.display = 'inline-block';
+            this._dragDisabled = false;
+            this._elementRef = elementRef;
+        }
+        Object.defineProperty(PepCarouselItemDirective.prototype, "dragDisabled", {
+            get: function () {
+                return this._dragDisabled;
+            },
+            set: function (value) {
+                this._dragDisabled = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return PepCarouselItemDirective;
+    }());
+    PepCarouselItemDirective.decorators = [
+        { type: core.Directive, args: [{
+                    selector: '[pepCarouselItem]',
+                },] }
+    ];
+    PepCarouselItemDirective.ctorParameters = function () { return [
+        { type: core.ElementRef, decorators: [{ type: core.Inject, args: [core.ElementRef,] }] }
+    ]; };
+    PepCarouselItemDirective.propDecorators = {
+        display: [{ type: core.HostBinding, args: ['style.display',] }],
+        dragDisabled: [{ type: core.Input, args: ['dragDisabled',] }]
     };
 
-    var PepCarouselComponent = /** @class */ (function () {
-        function PepCarouselComponent(_elementRef, _renderer, _document) {
-            this._elementRef = _elementRef;
-            this._renderer = _renderer;
-            this._document = _document;
-            this._index = 0;
-            this._scrollbarHidden = false;
-            this._disabled = false;
-            this._xDisabled = false;
-            this._xWheelEnabled = false;
-            this._yDisabled = false;
-            this._dragDisabled = false;
-            this._snapDisabled = false;
-            this._snapOffset = 0;
-            this._snapDuration = 500;
-            this._isDragging = false;
-            /**
-             * Is the user currently pressing the element
-             */
-            this.isPressed = false;
-            /**
-             * Is the user currently scrolling the element
-             */
-            this.isScrolling = false;
-            /**
-             * The x coordinates on the element
-             */
-            this.downX = 0;
-            /**
-             * The y coordinates on the element
-             */
-            this.downY = 0;
-            this.displayType = 'block';
-            this.elWidth = null;
-            this.elHeight = null;
-            this._pointerEvents = 'auto';
-            this.scrollbarWidth = null;
-            this.isAnimating = false;
-            this.prevChildrenLength = 0;
-            this.indexBound = 0;
-            this.dsInitialized = new core.EventEmitter();
-            this.indexChanged = new core.EventEmitter();
-            this.reachesLeftBound = new core.EventEmitter();
-            this.reachesRightBound = new core.EventEmitter();
-            this.snapAnimationFinished = new core.EventEmitter();
-            this.dragStart = new core.EventEmitter();
-            this.dragEnd = new core.EventEmitter();
-            this.scrollbarWidth = this.getScrollbarWidth() + "px";
-        }
-        Object.defineProperty(PepCarouselComponent.prototype, "isDragging", {
-            /**
-             * Is the user currently dragging the element
-             */
-            get: function () {
-                return this._isDragging;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepCarouselComponent.prototype, "currIndex", {
-            get: function () {
-                return this._index;
-            },
-            set: function (value) {
-                if (value !== this._index) {
-                    this._index = value;
-                    this.indexChanged.emit(value);
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepCarouselComponent.prototype, "scrollbarHidden", {
-            /**
-             * Whether the scrollbar is hidden
-             */
-            get: function () {
-                return this._scrollbarHidden;
-            },
-            set: function (value) {
-                this._scrollbarHidden = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepCarouselComponent.prototype, "disabled", {
-            /**
-             * Whether horizontally and vertically draging and scrolling is be disabled
-             */
-            get: function () {
-                return this._disabled;
-            },
-            set: function (value) {
-                this._disabled = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepCarouselComponent.prototype, "xDisabled", {
-            /**
-             * Whether horizontally dragging and scrolling is be disabled
-             */
-            get: function () {
-                return this._xDisabled;
-            },
-            set: function (value) {
-                this._xDisabled = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepCarouselComponent.prototype, "yDisabled", {
-            /**
-             * Whether vertically dragging and scrolling events is disabled
-             */
-            get: function () {
-                return this._yDisabled;
-            },
-            set: function (value) {
-                this._yDisabled = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepCarouselComponent.prototype, "xWheelEnabled", {
-            /**
-             * Whether scrolling horizontally with mouse wheel is enabled
-             */
-            get: function () {
-                return this._xWheelEnabled;
-            },
-            set: function (value) {
-                this._xWheelEnabled = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepCarouselComponent.prototype, "dragDisabled", {
-            get: function () {
-                return this._dragDisabled;
-            },
-            set: function (value) {
-                this._dragDisabled = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepCarouselComponent.prototype, "snapDisabled", {
-            get: function () {
-                return this._snapDisabled;
-            },
-            set: function (value) {
-                this._snapDisabled = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepCarouselComponent.prototype, "snapOffset", {
-            get: function () {
-                return this._snapOffset;
-            },
-            set: function (value) {
-                this._snapOffset = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepCarouselComponent.prototype, "snapDuration", {
-            get: function () {
-                return this._snapDuration;
-            },
-            set: function (value) {
-                this._snapDuration = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        PepCarouselComponent.prototype.ngOnChanges = function () {
-            this.setScrollBar();
-            if (this.xDisabled || this.disabled || this._scrollbarHidden) {
-                this.disableScroll('x');
-            }
-            else {
-                this.enableScroll('x');
-            }
-            if (this.yDisabled || this.disabled) {
-                this.disableScroll('y');
-            }
-            else {
-                this.enableScroll('y');
-            }
-        };
-        PepCarouselComponent.prototype.ngAfterViewInit = function () {
-            // auto assign computed css
-            this._renderer.setAttribute(this._contentRef.nativeElement, 'drag-scroll', 'true');
-            this.displayType =
-                typeof window !== 'undefined'
-                    ? window.getComputedStyle(this._elementRef.nativeElement)
-                        .display
-                    : 'block';
-            this._renderer.setStyle(this._contentRef.nativeElement, 'display', this.displayType);
-            this._renderer.setStyle(this._contentRef.nativeElement, 'whiteSpace', 'noWrap');
-            // store ele width height for later user
-            this.markElDimension();
-            this._renderer.setStyle(this._contentRef.nativeElement, 'width', this.elWidth);
-            this._renderer.setStyle(this._contentRef.nativeElement, 'height', this.elHeight);
-            if (this.wrapper) {
-                this.checkScrollbar();
-            }
-            this._onMouseDownListener = this._renderer.listen(this._contentRef.nativeElement, 'mousedown', this.onMouseDownHandler.bind(this));
-            this._onScrollListener = this._renderer.listen(this._contentRef.nativeElement, 'scroll', this.onScrollHandler.bind(this));
-            // prevent Firefox from dragging images
-            this._onDragStartListener = this._renderer.listen('document', 'dragstart', function (e) {
-                e.preventDefault();
-            });
-            this.checkNavStatus();
-            this.dsInitialized.emit();
-            this.adjustMarginToLastChild();
-        };
-        PepCarouselComponent.prototype.ngAfterViewChecked = function () {
-            // avoid extra checks
-            if (this._children.length !== this.prevChildrenLength) {
-                this.markElDimension();
-                this.checkScrollbar();
-                this.prevChildrenLength = this._children.length;
-                this.checkNavStatus();
-            }
-        };
-        PepCarouselComponent.prototype.ngOnDestroy = function () {
-            this._renderer.setAttribute(this._contentRef.nativeElement, 'drag-scroll', 'false');
-            if (this._onMouseDownListener) {
-                this._onMouseDownListener = this._onMouseDownListener();
-            }
-            if (this._onScrollListener) {
-                this._onScrollListener = this._onScrollListener();
-            }
-            if (this._onDragStartListener) {
-                this._onDragStartListener = this._onDragStartListener();
-            }
-        };
-        PepCarouselComponent.prototype.onMouseMoveHandler = function (event) {
-            this.onMouseMove(event);
-        };
-        PepCarouselComponent.prototype.onMouseMove = function (event) {
-            if (this.isPressed && !this.disabled) {
-                // Workaround for prevent scroll stuck if browser lost focus
-                // MouseEvent.buttons not support by Safari
-                if (!event.buttons && !event.which) {
-                    return this.onMouseUpHandler(event);
-                }
-                this._pointerEvents = 'none';
-                this._setIsDragging(true);
-                // Drag X
-                if (!this.xDisabled && !this.dragDisabled) {
-                    var clientX = event.clientX;
-                    this._contentRef.nativeElement.scrollLeft =
-                        this._contentRef.nativeElement.scrollLeft -
-                            clientX +
-                            this.downX;
-                    this.downX = clientX;
-                }
-                // Drag Y
-                if (!this.yDisabled && !this.dragDisabled) {
-                    var clientY = event.clientY;
-                    this._contentRef.nativeElement.scrollTop =
-                        this._contentRef.nativeElement.scrollTop -
-                            clientY +
-                            this.downY;
-                    this.downY = clientY;
-                }
-            }
-        };
-        PepCarouselComponent.prototype.onMouseDownHandler = function (event) {
-            var carouselItem = this.locateCarouselItem(event.target);
-            if (carouselItem && carouselItem.dragDisabled) {
-                return;
-            }
-            var isTouchEvent = event.type === 'touchstart';
-            this._startGlobalListening(isTouchEvent);
-            this.isPressed = true;
-            var mouseEvent = event;
-            this.downX = mouseEvent.clientX;
-            this.downY = mouseEvent.clientY;
-            clearTimeout(this.scrollToTimer);
-        };
-        PepCarouselComponent.prototype.onScrollHandler = function () {
-            var _this = this;
-            this.checkNavStatus();
-            if (!this.isPressed && !this.isAnimating && !this.snapDisabled) {
-                this.isScrolling = true;
-                clearTimeout(this.scrollTimer);
-                this.scrollTimer = setTimeout(function () {
-                    _this.isScrolling = false;
-                    _this.locateCurrentIndex(true);
-                }, 500);
-            }
-            else {
-                this.locateCurrentIndex();
-            }
-        };
-        PepCarouselComponent.prototype.onMouseUpHandler = function (event) {
-            if (this.isPressed) {
-                this.isPressed = false;
-                this._pointerEvents = 'auto';
-                this._setIsDragging(false);
-                if (!this.snapDisabled) {
-                    this.locateCurrentIndex(true);
-                }
-                else {
-                    this.locateCurrentIndex();
-                }
-                this._stopGlobalListening();
-            }
-        };
-        /*
-         * Nav button
-         */
-        PepCarouselComponent.prototype.moveLeft = function () {
-            if (this.currIndex !== 0 || this.snapDisabled) {
-                this.currIndex--;
-                clearTimeout(this.scrollToTimer);
-                this.scrollTo(this._contentRef.nativeElement, this.toChildrenLocation(), this.snapDuration);
-            }
-        };
-        PepCarouselComponent.prototype.moveRight = function () {
-            var container = this.wrapper || this.parentNode;
-            var containerWidth = container ? container.clientWidth : 0;
-            if (!this.isScrollReachesRightEnd() &&
-                this.currIndex <
-                    this.maximumIndex(containerWidth, this._children.toArray())) {
-                this.currIndex++;
-                clearTimeout(this.scrollToTimer);
-                this.scrollTo(this._contentRef.nativeElement, this.toChildrenLocation(), this.snapDuration);
-            }
-        };
-        PepCarouselComponent.prototype.moveTo = function (index) {
-            var container = this.wrapper || this.parentNode;
-            var containerWidth = container ? container.clientWidth : 0;
-            if (index >= 0 &&
-                index !== this.currIndex &&
-                this.currIndex <=
-                    this.maximumIndex(containerWidth, this._children.toArray())) {
-                this.currIndex = Math.min(index, this.maximumIndex(containerWidth, this._children.toArray()));
-                clearTimeout(this.scrollToTimer);
-                this.scrollTo(this._contentRef.nativeElement, this.toChildrenLocation(), this.snapDuration);
-            }
-        };
-        PepCarouselComponent.prototype.checkNavStatus = function () {
-            var _this = this;
-            setTimeout(function () {
-                var onlyOneItem = Boolean(_this._children.length <= 1);
-                var containerIsLargerThanContent = Boolean(_this._contentRef.nativeElement.scrollWidth <=
-                    _this._contentRef.nativeElement.clientWidth);
-                if (onlyOneItem || containerIsLargerThanContent) {
-                    // only one element
-                    _this.reachesLeftBound.emit(true);
-                    _this.reachesRightBound.emit(true);
-                }
-                else if (_this.isScrollReachesRightEnd()) {
-                    // reached right end
-                    _this.reachesLeftBound.emit(false);
-                    _this.reachesRightBound.emit(true);
-                }
-                else if (_this._contentRef.nativeElement.scrollLeft === 0 &&
-                    _this._contentRef.nativeElement.scrollWidth >
-                        _this._contentRef.nativeElement.clientWidth) {
-                    // reached left end
-                    _this.reachesLeftBound.emit(true);
-                    _this.reachesRightBound.emit(false);
-                }
-                else {
-                    // in the middle
-                    _this.reachesLeftBound.emit(false);
-                    _this.reachesRightBound.emit(false);
-                }
-            }, 0);
-        };
-        PepCarouselComponent.prototype.onWheel = function (event) {
-            if (this._xWheelEnabled) {
-                event.preventDefault();
-                if (this._snapDisabled) {
-                    this._contentRef.nativeElement.scrollBy(event.deltaY, 0);
-                }
-                else {
-                    if (event.deltaY < 0) {
-                        this.moveLeft();
-                    }
-                    else if (event.deltaY > 0) {
-                        this.moveRight();
-                    }
-                }
-            }
-        };
-        PepCarouselComponent.prototype.onWindowResize = function () {
-            this.refreshWrapperDimensions();
-            this.checkNavStatus();
-        };
-        PepCarouselComponent.prototype._setIsDragging = function (value) {
-            if (this._isDragging === value) {
-                return;
-            }
-            this._isDragging = value;
-            value ? this.dragStart.emit() : this.dragEnd.emit();
-        };
-        PepCarouselComponent.prototype._startGlobalListening = function (isTouchEvent) {
-            if (!this._onMouseMoveListener) {
-                var eventName = isTouchEvent ? 'touchmove' : 'mousemove';
-                this._onMouseMoveListener = this._renderer.listen('document', eventName, this.onMouseMoveHandler.bind(this));
-            }
-            if (!this._onMouseUpListener) {
-                var eventName = isTouchEvent ? 'touchend' : 'mouseup';
-                this._onMouseUpListener = this._renderer.listen('document', eventName, this.onMouseUpHandler.bind(this));
-            }
-        };
-        PepCarouselComponent.prototype._stopGlobalListening = function () {
-            if (this._onMouseMoveListener) {
-                this._onMouseMoveListener = this._onMouseMoveListener();
-            }
-            if (this._onMouseUpListener) {
-                this._onMouseUpListener = this._onMouseUpListener();
-            }
-        };
-        PepCarouselComponent.prototype.disableScroll = function (axis) {
-            this._renderer.setStyle(this._contentRef.nativeElement, "overflow-" + axis, 'hidden');
-        };
-        PepCarouselComponent.prototype.enableScroll = function (axis) {
-            this._renderer.setStyle(this._contentRef.nativeElement, "overflow-" + axis, 'auto');
-        };
-        PepCarouselComponent.prototype.hideScrollbar = function () {
-            if (this._contentRef.nativeElement.style.display !== 'none' &&
-                !this.wrapper) {
-                this.parentNode = this._contentRef.nativeElement.parentNode;
-                // create container element
-                this.wrapper = this._renderer.createElement('div');
-                this._renderer.addClass(this.wrapper, 'carousel-wrapper');
-                // this._renderer.setAttribute(this.wrapper, 'class', 'carousel-wrapper');
-                // this._renderer.addClass(this.wrapper, 'carousel-container');
-                this.refreshWrapperDimensions();
-                this._renderer.setStyle(this.wrapper, 'overflow', 'hidden');
-                this._renderer.setStyle(this._contentRef.nativeElement, 'width', "calc(100% + " + this.scrollbarWidth + ")");
-                this._renderer.setStyle(this._contentRef.nativeElement, 'height', "calc(100% + " + this.scrollbarWidth + ")");
-                // Append container element to component element.
-                this._renderer.appendChild(this._elementRef.nativeElement, this.wrapper);
-                // Append content element to container element.
-                this._renderer.appendChild(this.wrapper, this._contentRef.nativeElement);
-                this.adjustMarginToLastChild();
-            }
-        };
-        PepCarouselComponent.prototype.showScrollbar = function () {
-            if (this.wrapper) {
-                this._renderer.setStyle(this._contentRef.nativeElement, 'width', '100%');
-                this._renderer.setStyle(this._contentRef.nativeElement, 'height', this.wrapper.style.height);
-                if (this.parentNode !== null) {
-                    this.parentNode.removeChild(this.wrapper);
-                    this.parentNode.appendChild(this._contentRef.nativeElement);
-                }
-                this.wrapper = null;
-                this.adjustMarginToLastChild();
-            }
-        };
-        PepCarouselComponent.prototype.checkScrollbar = function () {
-            if (this._contentRef.nativeElement.scrollWidth <=
-                this._contentRef.nativeElement.clientWidth) {
-                this._renderer.setStyle(this._contentRef.nativeElement, 'height', '100%');
-            }
-            else {
-                this._renderer.setStyle(this._contentRef.nativeElement, 'height', "calc(100% + " + this.scrollbarWidth + ")");
-            }
-            if (this._contentRef.nativeElement.scrollHeight <=
-                this._contentRef.nativeElement.clientHeight) {
-                this._renderer.setStyle(this._contentRef.nativeElement, 'width', '100%');
-            }
-            else {
-                this._renderer.setStyle(this._contentRef.nativeElement, 'width', "calc(100% + " + this.scrollbarWidth + ")");
-            }
-        };
-        PepCarouselComponent.prototype.setScrollBar = function () {
-            if (this.scrollbarHidden) {
-                this.hideScrollbar();
-            }
-            else {
-                this.showScrollbar();
-            }
-        };
-        PepCarouselComponent.prototype.getScrollbarWidth = function () {
-            /**
-             * Browser Scrollbar Widths (2016)
-             * OSX (Chrome, Safari, Firefox) - 15px
-             * Windows XP (IE7, Chrome, Firefox) - 17px
-             * Windows 7 (IE10, IE11, Chrome, Firefox) - 17px
-             * Windows 8.1 (IE11, Chrome, Firefox) - 17px
-             * Windows 10 (IE11, Chrome, Firefox) - 17px
-             * Windows 10 (Edge 12/13) - 12px
-             */
-            var outer = this._renderer.createElement('div');
-            this._renderer.setStyle(outer, 'visibility', 'hidden');
-            this._renderer.setStyle(outer, 'width', '100px');
-            this._renderer.setStyle(outer, 'msOverflowStyle', 'scrollbar'); // needed for WinJS apps
-            // document.body.appendChild(outer);
-            this._renderer.appendChild(this._document.body, outer);
-            // this._renderer.appendChild(this._renderer.selectRootElement('body'), outer);
-            var widthNoScroll = outer.offsetWidth;
-            // force scrollbars
-            this._renderer.setStyle(outer, 'overflow', 'scroll');
-            // add innerdiv
-            var inner = this._renderer.createElement('div');
-            this._renderer.setStyle(inner, 'width', '100%');
-            this._renderer.appendChild(outer, inner);
-            var widthWithScroll = inner.offsetWidth;
-            // remove divs
-            this._renderer.removeChild(this._document.body, outer);
-            /**
-             * Scrollbar width will be 0 on Mac OS with the
-             * default "Only show scrollbars when scrolling" setting (Yosemite and up).
-             * setting default width to 20;
-             */
-            return widthNoScroll - widthWithScroll || 20;
-        };
-        PepCarouselComponent.prototype.refreshWrapperDimensions = function () {
-            if (this.wrapper) {
-                var height = this._elementRef.nativeElement.style.height ||
-                    this._elementRef.nativeElement.offsetHeight;
-                this._renderer.setStyle(this.wrapper, 'width', '100%');
-                this._renderer.setStyle(this.wrapper, 'height', height === 0 ? 'auto' : height + 'px');
-            }
-        };
-        /*
-         * The below solution is heavily inspired from
-         * https://gist.github.com/andjosh/6764939
-         */
-        PepCarouselComponent.prototype.scrollTo = function (element, to, duration) {
-            var _this = this;
-            this.isAnimating = true;
-            var start = element.scrollLeft, change = to - start - this.snapOffset, increment = 20;
-            var currentTime = 0;
-            // t = current time
-            // b = start value
-            // c = change in value
-            // d = duration
-            var easeInOutQuad = function (t, b, c, d) {
-                t /= d / 2;
-                if (t < 1) {
-                    return (c / 2) * t * t + b;
-                }
-                t--;
-                return (-c / 2) * (t * (t - 2) - 1) + b;
-            };
-            var animateScroll = function () {
-                currentTime += increment;
-                element.scrollLeft = easeInOutQuad(currentTime, start, change, duration);
-                if (currentTime < duration) {
-                    _this.scrollToTimer = setTimeout(animateScroll, increment);
-                }
-                else {
-                    // run one more frame to make sure the animation is fully finished
-                    setTimeout(function () {
-                        _this.isAnimating = false;
-                        _this.snapAnimationFinished.emit(_this.currIndex);
-                    }, increment);
-                }
-            };
-            animateScroll();
-        };
-        PepCarouselComponent.prototype.locateCurrentIndex = function (snap) {
-            var _this = this;
-            this.currentChildWidth(function (currentChildWidth, nextChildrenWidth, childrenWidth, idx, stop) {
-                if (_this._contentRef.nativeElement.scrollLeft >=
-                    childrenWidth &&
-                    _this._contentRef.nativeElement.scrollLeft <=
-                        nextChildrenWidth) {
-                    if (nextChildrenWidth -
-                        _this._contentRef.nativeElement.scrollLeft >
-                        currentChildWidth / 2 &&
-                        !_this.isScrollReachesRightEnd()) {
-                        // roll back scrolling
-                        if (!_this.isAnimating) {
-                            _this.currIndex = idx;
-                        }
-                        if (snap) {
-                            _this.scrollTo(_this._contentRef.nativeElement, childrenWidth, _this.snapDuration);
-                        }
-                    }
-                    else if (_this._contentRef.nativeElement.scrollLeft !== 0) {
-                        // forward scrolling
-                        if (!_this.isAnimating) {
-                            _this.currIndex = idx + 1;
-                        }
-                        if (snap) {
-                            _this.scrollTo(_this._contentRef.nativeElement, childrenWidth + currentChildWidth, _this.snapDuration);
-                        }
-                    }
-                    stop();
-                }
-                else if (idx + 1 === _this._children.length - 1) {
-                    // reaches last index
-                    if (!_this.isAnimating) {
-                        _this.currIndex = idx + 1;
-                    }
-                    stop();
-                }
-            });
-        };
-        PepCarouselComponent.prototype.currentChildWidth = function (cb) {
-            var childrenWidth = 0;
-            var shouldBreak = false;
-            var breakFunc = function () {
-                shouldBreak = true;
-            };
-            var childrenArr = this._children.toArray();
-            for (var i = 0; i < childrenArr.length; i++) {
-                if (i === childrenArr.length - 1) {
-                    break;
-                }
-                if (shouldBreak) {
-                    break;
-                }
-                var nextChildrenWidth = childrenWidth +
-                    childrenArr[i + 1]._elementRef.nativeElement.clientWidth;
-                var currentClildWidth = childrenArr[i]._elementRef.nativeElement.clientWidth;
-                cb(currentClildWidth, nextChildrenWidth, childrenWidth, i, breakFunc);
-                childrenWidth += currentClildWidth;
-            }
-        };
-        PepCarouselComponent.prototype.toChildrenLocation = function () {
-            var to = 0;
-            var childrenArr = this._children.toArray();
-            for (var i = 0; i < this.currIndex; i++) {
-                to += childrenArr[i]._elementRef.nativeElement.clientWidth;
-            }
-            return to;
-        };
-        PepCarouselComponent.prototype.locateCarouselItem = function (element) {
-            var item = null;
-            var childrenArr = this._children.toArray();
-            for (var i = 0; i < childrenArr.length; i++) {
-                if (element === childrenArr[i]._elementRef.nativeElement) {
-                    item = childrenArr[i];
-                }
-            }
-            return item;
-        };
-        PepCarouselComponent.prototype.markElDimension = function () {
-            if (this.wrapper) {
-                this.elWidth = this.wrapper.style.width;
-                this.elHeight = this.wrapper.style.height;
-            }
-            else {
-                this.elWidth =
-                    this._elementRef.nativeElement.style.width ||
-                        this._elementRef.nativeElement.offsetWidth + 'px';
-                this.elHeight =
-                    this._elementRef.nativeElement.style.height ||
-                        this._elementRef.nativeElement.offsetHeight + 'px';
-            }
-            var container = this.wrapper || this.parentNode;
-            var containerWidth = container ? container.clientWidth : 0;
-            if (this._children.length > 1) {
-                this.indexBound = this.maximumIndex(containerWidth, this._children.toArray());
-            }
-        };
-        PepCarouselComponent.prototype.maximumIndex = function (containerWidth, childrenElements) {
-            var count = 0;
-            var childrenWidth = 0;
-            for (var i = 0; i <= childrenElements.length; i++) {
-                // last N element
-                var carouselItemDirective = childrenElements[childrenElements.length - 1 - i];
-                if (!carouselItemDirective) {
-                    break;
-                }
-                else {
-                    var nativeElement = carouselItemDirective._elementRef.nativeElement;
-                    var itemWidth = nativeElement.clientWidth;
-                    if (itemWidth === 0 && nativeElement.firstElementChild) {
-                        itemWidth =
-                            carouselItemDirective._elementRef.nativeElement
-                                .firstElementChild.clientWidth;
-                    }
-                    childrenWidth += itemWidth;
-                    if (childrenWidth < containerWidth) {
-                        count++;
-                    }
-                    else {
-                        break;
-                    }
-                }
-            }
-            return childrenElements.length - count;
-        };
-        PepCarouselComponent.prototype.isScrollReachesRightEnd = function () {
-            var scrollLeftPos = this._contentRef.nativeElement.scrollLeft +
-                this._contentRef.nativeElement.offsetWidth;
-            return scrollLeftPos >= this._contentRef.nativeElement.scrollWidth;
-        };
-        /**
-         * adds a margin right style to the last child element which will resolve the issue
-         * of last item gets cutoff.
-         */
-        PepCarouselComponent.prototype.adjustMarginToLastChild = function () {
-            // if (this._children && this._children.length > 0 && this.hideScrollbar) {
-            //     const childrenArr = this._children.toArray();
-            //     const lastItem = childrenArr[childrenArr.length - 1]._elementRef.nativeElement;
-            //     if (this.wrapper && childrenArr.length > 1) {
-            //         this._renderer.setStyle(lastItem, 'margin-right', this.scrollbarWidth);
-            //     } else {
-            //         this._renderer.setStyle(lastItem, 'margin-right', 0);
-            //     }
-            // }
-        };
-        return PepCarouselComponent;
-    }());
-    PepCarouselComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'pep-carousel',
-                    template: "\n        <div class=\"carousel-content\" #contentRef>\n            <ng-content></ng-content>\n        </div>\n    ",
-                    styles: ["\n            :host {\n                overflow: hidden;\n                display: block;\n            }\n            .carousel-content {\n                height: 100%;\n                overflow: auto;\n                white-space: nowrap;\n            }\n        "]
-                },] }
-    ];
-    PepCarouselComponent.ctorParameters = function () { return [
-        { type: core.ElementRef, decorators: [{ type: core.Inject, args: [core.ElementRef,] }] },
-        { type: core.Renderer2, decorators: [{ type: core.Inject, args: [core.Renderer2,] }] },
-        { type: undefined, decorators: [{ type: core.Inject, args: [common.DOCUMENT,] }] }
-    ]; };
-    PepCarouselComponent.propDecorators = {
-        _contentRef: [{ type: core.ViewChild, args: ['contentRef', { static: true },] }],
-        _children: [{ type: core.ContentChildren, args: [PepCarouselItemDirective, { descendants: true },] }],
-        _pointerEvents: [{ type: core.HostBinding, args: ['style.pointer-events',] }],
-        dsInitialized: [{ type: core.Output }],
-        indexChanged: [{ type: core.Output }],
-        reachesLeftBound: [{ type: core.Output }],
-        reachesRightBound: [{ type: core.Output }],
-        snapAnimationFinished: [{ type: core.Output }],
-        dragStart: [{ type: core.Output }],
-        dragEnd: [{ type: core.Output }],
-        scrollbarHidden: [{ type: core.Input, args: ['scrollbarHidden',] }],
-        disabled: [{ type: core.Input, args: ['disabled',] }],
-        xDisabled: [{ type: core.Input, args: ['xDisabled',] }],
-        yDisabled: [{ type: core.Input, args: ['yDisabled',] }],
-        xWheelEnabled: [{ type: core.Input, args: ['xWheelEnabled',] }],
-        dragDisabled: [{ type: core.Input, args: ['dragDisabled',] }],
-        snapDisabled: [{ type: core.Input, args: ['snapDisabled',] }],
-        snapOffset: [{ type: core.Input, args: ['snapOffset',] }],
-        snapDuration: [{ type: core.Input, args: ['snapDuration',] }],
-        onWheel: [{ type: core.HostListener, args: ['wheel', ['$event'],] }],
-        onWindowResize: [{ type: core.HostListener, args: ['window:resize',] }]
+    var PepCarouselComponent = /** @class */ (function () {
+        function PepCarouselComponent(_elementRef, _renderer, _document) {
+            this._elementRef = _elementRef;
+            this._renderer = _renderer;
+            this._document = _document;
+            this._index = 0;
+            this._scrollbarHidden = false;
+            this._disabled = false;
+            this._xDisabled = false;
+            this._xWheelEnabled = false;
+            this._yDisabled = false;
+            this._dragDisabled = false;
+            this._snapDisabled = false;
+            this._snapOffset = 0;
+            this._snapDuration = 500;
+            this._isDragging = false;
+            /**
+             * Is the user currently pressing the element
+             */
+            this.isPressed = false;
+            /**
+             * Is the user currently scrolling the element
+             */
+            this.isScrolling = false;
+            /**
+             * The x coordinates on the element
+             */
+            this.downX = 0;
+            /**
+             * The y coordinates on the element
+             */
+            this.downY = 0;
+            this.displayType = 'block';
+            this.elWidth = null;
+            this.elHeight = null;
+            this._pointerEvents = 'auto';
+            this.scrollbarWidth = null;
+            this.isAnimating = false;
+            this.prevChildrenLength = 0;
+            this.indexBound = 0;
+            this.dsInitialized = new core.EventEmitter();
+            this.indexChanged = new core.EventEmitter();
+            this.reachesLeftBound = new core.EventEmitter();
+            this.reachesRightBound = new core.EventEmitter();
+            this.snapAnimationFinished = new core.EventEmitter();
+            this.dragStart = new core.EventEmitter();
+            this.dragEnd = new core.EventEmitter();
+            this.scrollbarWidth = this.getScrollbarWidth() + "px";
+        }
+        Object.defineProperty(PepCarouselComponent.prototype, "isDragging", {
+            /**
+             * Is the user currently dragging the element
+             */
+            get: function () {
+                return this._isDragging;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepCarouselComponent.prototype, "currIndex", {
+            get: function () {
+                return this._index;
+            },
+            set: function (value) {
+                if (value !== this._index) {
+                    this._index = value;
+                    this.indexChanged.emit(value);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepCarouselComponent.prototype, "scrollbarHidden", {
+            /**
+             * Whether the scrollbar is hidden
+             */
+            get: function () {
+                return this._scrollbarHidden;
+            },
+            set: function (value) {
+                this._scrollbarHidden = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepCarouselComponent.prototype, "disabled", {
+            /**
+             * Whether horizontally and vertically draging and scrolling is be disabled
+             */
+            get: function () {
+                return this._disabled;
+            },
+            set: function (value) {
+                this._disabled = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepCarouselComponent.prototype, "xDisabled", {
+            /**
+             * Whether horizontally dragging and scrolling is be disabled
+             */
+            get: function () {
+                return this._xDisabled;
+            },
+            set: function (value) {
+                this._xDisabled = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepCarouselComponent.prototype, "yDisabled", {
+            /**
+             * Whether vertically dragging and scrolling events is disabled
+             */
+            get: function () {
+                return this._yDisabled;
+            },
+            set: function (value) {
+                this._yDisabled = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepCarouselComponent.prototype, "xWheelEnabled", {
+            /**
+             * Whether scrolling horizontally with mouse wheel is enabled
+             */
+            get: function () {
+                return this._xWheelEnabled;
+            },
+            set: function (value) {
+                this._xWheelEnabled = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepCarouselComponent.prototype, "dragDisabled", {
+            get: function () {
+                return this._dragDisabled;
+            },
+            set: function (value) {
+                this._dragDisabled = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepCarouselComponent.prototype, "snapDisabled", {
+            get: function () {
+                return this._snapDisabled;
+            },
+            set: function (value) {
+                this._snapDisabled = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepCarouselComponent.prototype, "snapOffset", {
+            get: function () {
+                return this._snapOffset;
+            },
+            set: function (value) {
+                this._snapOffset = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepCarouselComponent.prototype, "snapDuration", {
+            get: function () {
+                return this._snapDuration;
+            },
+            set: function (value) {
+                this._snapDuration = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PepCarouselComponent.prototype.ngOnChanges = function () {
+            this.setScrollBar();
+            if (this.xDisabled || this.disabled || this._scrollbarHidden) {
+                this.disableScroll('x');
+            }
+            else {
+                this.enableScroll('x');
+            }
+            if (this.yDisabled || this.disabled) {
+                this.disableScroll('y');
+            }
+            else {
+                this.enableScroll('y');
+            }
+        };
+        PepCarouselComponent.prototype.ngAfterViewInit = function () {
+            // auto assign computed css
+            this._renderer.setAttribute(this._contentRef.nativeElement, 'drag-scroll', 'true');
+            this.displayType =
+                typeof window !== 'undefined'
+                    ? window.getComputedStyle(this._elementRef.nativeElement)
+                        .display
+                    : 'block';
+            this._renderer.setStyle(this._contentRef.nativeElement, 'display', this.displayType);
+            this._renderer.setStyle(this._contentRef.nativeElement, 'whiteSpace', 'noWrap');
+            // store ele width height for later user
+            this.markElDimension();
+            this._renderer.setStyle(this._contentRef.nativeElement, 'width', this.elWidth);
+            this._renderer.setStyle(this._contentRef.nativeElement, 'height', this.elHeight);
+            if (this.wrapper) {
+                this.checkScrollbar();
+            }
+            this._onMouseDownListener = this._renderer.listen(this._contentRef.nativeElement, 'mousedown', this.onMouseDownHandler.bind(this));
+            this._onScrollListener = this._renderer.listen(this._contentRef.nativeElement, 'scroll', this.onScrollHandler.bind(this));
+            // prevent Firefox from dragging images
+            this._onDragStartListener = this._renderer.listen('document', 'dragstart', function (e) {
+                e.preventDefault();
+            });
+            this.checkNavStatus();
+            this.dsInitialized.emit();
+            this.adjustMarginToLastChild();
+        };
+        PepCarouselComponent.prototype.ngAfterViewChecked = function () {
+            // avoid extra checks
+            if (this._children.length !== this.prevChildrenLength) {
+                this.markElDimension();
+                this.checkScrollbar();
+                this.prevChildrenLength = this._children.length;
+                this.checkNavStatus();
+            }
+        };
+        PepCarouselComponent.prototype.ngOnDestroy = function () {
+            this._renderer.setAttribute(this._contentRef.nativeElement, 'drag-scroll', 'false');
+            if (this._onMouseDownListener) {
+                this._onMouseDownListener = this._onMouseDownListener();
+            }
+            if (this._onScrollListener) {
+                this._onScrollListener = this._onScrollListener();
+            }
+            if (this._onDragStartListener) {
+                this._onDragStartListener = this._onDragStartListener();
+            }
+        };
+        PepCarouselComponent.prototype.onMouseMoveHandler = function (event) {
+            this.onMouseMove(event);
+        };
+        PepCarouselComponent.prototype.onMouseMove = function (event) {
+            if (this.isPressed && !this.disabled) {
+                // Workaround for prevent scroll stuck if browser lost focus
+                // MouseEvent.buttons not support by Safari
+                if (!event.buttons && !event.which) {
+                    return this.onMouseUpHandler(event);
+                }
+                this._pointerEvents = 'none';
+                this._setIsDragging(true);
+                // Drag X
+                if (!this.xDisabled && !this.dragDisabled) {
+                    var clientX = event.clientX;
+                    this._contentRef.nativeElement.scrollLeft =
+                        this._contentRef.nativeElement.scrollLeft -
+                            clientX +
+                            this.downX;
+                    this.downX = clientX;
+                }
+                // Drag Y
+                if (!this.yDisabled && !this.dragDisabled) {
+                    var clientY = event.clientY;
+                    this._contentRef.nativeElement.scrollTop =
+                        this._contentRef.nativeElement.scrollTop -
+                            clientY +
+                            this.downY;
+                    this.downY = clientY;
+                }
+            }
+        };
+        PepCarouselComponent.prototype.onMouseDownHandler = function (event) {
+            var carouselItem = this.locateCarouselItem(event.target);
+            if (carouselItem && carouselItem.dragDisabled) {
+                return;
+            }
+            var isTouchEvent = event.type === 'touchstart';
+            this._startGlobalListening(isTouchEvent);
+            this.isPressed = true;
+            var mouseEvent = event;
+            this.downX = mouseEvent.clientX;
+            this.downY = mouseEvent.clientY;
+            clearTimeout(this.scrollToTimer);
+        };
+        PepCarouselComponent.prototype.onScrollHandler = function () {
+            var _this = this;
+            this.checkNavStatus();
+            if (!this.isPressed && !this.isAnimating && !this.snapDisabled) {
+                this.isScrolling = true;
+                clearTimeout(this.scrollTimer);
+                this.scrollTimer = setTimeout(function () {
+                    _this.isScrolling = false;
+                    _this.locateCurrentIndex(true);
+                }, 500);
+            }
+            else {
+                this.locateCurrentIndex();
+            }
+        };
+        PepCarouselComponent.prototype.onMouseUpHandler = function (event) {
+            if (this.isPressed) {
+                this.isPressed = false;
+                this._pointerEvents = 'auto';
+                this._setIsDragging(false);
+                if (!this.snapDisabled) {
+                    this.locateCurrentIndex(true);
+                }
+                else {
+                    this.locateCurrentIndex();
+                }
+                this._stopGlobalListening();
+            }
+        };
+        /*
+         * Nav button
+         */
+        PepCarouselComponent.prototype.moveLeft = function () {
+            if (this.currIndex !== 0 || this.snapDisabled) {
+                this.currIndex--;
+                clearTimeout(this.scrollToTimer);
+                this.scrollTo(this._contentRef.nativeElement, this.toChildrenLocation(), this.snapDuration);
+            }
+        };
+        PepCarouselComponent.prototype.moveRight = function () {
+            var container = this.wrapper || this.parentNode;
+            var containerWidth = container ? container.clientWidth : 0;
+            if (!this.isScrollReachesRightEnd() &&
+                this.currIndex <
+                    this.maximumIndex(containerWidth, this._children.toArray())) {
+                this.currIndex++;
+                clearTimeout(this.scrollToTimer);
+                this.scrollTo(this._contentRef.nativeElement, this.toChildrenLocation(), this.snapDuration);
+            }
+        };
+        PepCarouselComponent.prototype.moveTo = function (index) {
+            var container = this.wrapper || this.parentNode;
+            var containerWidth = container ? container.clientWidth : 0;
+            if (index >= 0 &&
+                index !== this.currIndex &&
+                this.currIndex <=
+                    this.maximumIndex(containerWidth, this._children.toArray())) {
+                this.currIndex = Math.min(index, this.maximumIndex(containerWidth, this._children.toArray()));
+                clearTimeout(this.scrollToTimer);
+                this.scrollTo(this._contentRef.nativeElement, this.toChildrenLocation(), this.snapDuration);
+            }
+        };
+        PepCarouselComponent.prototype.checkNavStatus = function () {
+            var _this = this;
+            setTimeout(function () {
+                var onlyOneItem = Boolean(_this._children.length <= 1);
+                var containerIsLargerThanContent = Boolean(_this._contentRef.nativeElement.scrollWidth <=
+                    _this._contentRef.nativeElement.clientWidth);
+                if (onlyOneItem || containerIsLargerThanContent) {
+                    // only one element
+                    _this.reachesLeftBound.emit(true);
+                    _this.reachesRightBound.emit(true);
+                }
+                else if (_this.isScrollReachesRightEnd()) {
+                    // reached right end
+                    _this.reachesLeftBound.emit(false);
+                    _this.reachesRightBound.emit(true);
+                }
+                else if (_this._contentRef.nativeElement.scrollLeft === 0 &&
+                    _this._contentRef.nativeElement.scrollWidth >
+                        _this._contentRef.nativeElement.clientWidth) {
+                    // reached left end
+                    _this.reachesLeftBound.emit(true);
+                    _this.reachesRightBound.emit(false);
+                }
+                else {
+                    // in the middle
+                    _this.reachesLeftBound.emit(false);
+                    _this.reachesRightBound.emit(false);
+                }
+            }, 0);
+        };
+        PepCarouselComponent.prototype.onWheel = function (event) {
+            if (this._xWheelEnabled) {
+                event.preventDefault();
+                if (this._snapDisabled) {
+                    this._contentRef.nativeElement.scrollBy(event.deltaY, 0);
+                }
+                else {
+                    if (event.deltaY < 0) {
+                        this.moveLeft();
+                    }
+                    else if (event.deltaY > 0) {
+                        this.moveRight();
+                    }
+                }
+            }
+        };
+        PepCarouselComponent.prototype.onWindowResize = function () {
+            this.refreshWrapperDimensions();
+            this.checkNavStatus();
+        };
+        PepCarouselComponent.prototype._setIsDragging = function (value) {
+            if (this._isDragging === value) {
+                return;
+            }
+            this._isDragging = value;
+            value ? this.dragStart.emit() : this.dragEnd.emit();
+        };
+        PepCarouselComponent.prototype._startGlobalListening = function (isTouchEvent) {
+            if (!this._onMouseMoveListener) {
+                var eventName = isTouchEvent ? 'touchmove' : 'mousemove';
+                this._onMouseMoveListener = this._renderer.listen('document', eventName, this.onMouseMoveHandler.bind(this));
+            }
+            if (!this._onMouseUpListener) {
+                var eventName = isTouchEvent ? 'touchend' : 'mouseup';
+                this._onMouseUpListener = this._renderer.listen('document', eventName, this.onMouseUpHandler.bind(this));
+            }
+        };
+        PepCarouselComponent.prototype._stopGlobalListening = function () {
+            if (this._onMouseMoveListener) {
+                this._onMouseMoveListener = this._onMouseMoveListener();
+            }
+            if (this._onMouseUpListener) {
+                this._onMouseUpListener = this._onMouseUpListener();
+            }
+        };
+        PepCarouselComponent.prototype.disableScroll = function (axis) {
+            this._renderer.setStyle(this._contentRef.nativeElement, "overflow-" + axis, 'hidden');
+        };
+        PepCarouselComponent.prototype.enableScroll = function (axis) {
+            this._renderer.setStyle(this._contentRef.nativeElement, "overflow-" + axis, 'auto');
+        };
+        PepCarouselComponent.prototype.hideScrollbar = function () {
+            if (this._contentRef.nativeElement.style.display !== 'none' &&
+                !this.wrapper) {
+                this.parentNode = this._contentRef.nativeElement.parentNode;
+                // create container element
+                this.wrapper = this._renderer.createElement('div');
+                this._renderer.addClass(this.wrapper, 'carousel-wrapper');
+                // this._renderer.setAttribute(this.wrapper, 'class', 'carousel-wrapper');
+                // this._renderer.addClass(this.wrapper, 'carousel-container');
+                this.refreshWrapperDimensions();
+                this._renderer.setStyle(this.wrapper, 'overflow', 'hidden');
+                this._renderer.setStyle(this._contentRef.nativeElement, 'width', "calc(100% + " + this.scrollbarWidth + ")");
+                this._renderer.setStyle(this._contentRef.nativeElement, 'height', "calc(100% + " + this.scrollbarWidth + ")");
+                // Append container element to component element.
+                this._renderer.appendChild(this._elementRef.nativeElement, this.wrapper);
+                // Append content element to container element.
+                this._renderer.appendChild(this.wrapper, this._contentRef.nativeElement);
+                this.adjustMarginToLastChild();
+            }
+        };
+        PepCarouselComponent.prototype.showScrollbar = function () {
+            if (this.wrapper) {
+                this._renderer.setStyle(this._contentRef.nativeElement, 'width', '100%');
+                this._renderer.setStyle(this._contentRef.nativeElement, 'height', this.wrapper.style.height);
+                if (this.parentNode !== null) {
+                    this.parentNode.removeChild(this.wrapper);
+                    this.parentNode.appendChild(this._contentRef.nativeElement);
+                }
+                this.wrapper = null;
+                this.adjustMarginToLastChild();
+            }
+        };
+        PepCarouselComponent.prototype.checkScrollbar = function () {
+            if (this._contentRef.nativeElement.scrollWidth <=
+                this._contentRef.nativeElement.clientWidth) {
+                this._renderer.setStyle(this._contentRef.nativeElement, 'height', '100%');
+            }
+            else {
+                this._renderer.setStyle(this._contentRef.nativeElement, 'height', "calc(100% + " + this.scrollbarWidth + ")");
+            }
+            if (this._contentRef.nativeElement.scrollHeight <=
+                this._contentRef.nativeElement.clientHeight) {
+                this._renderer.setStyle(this._contentRef.nativeElement, 'width', '100%');
+            }
+            else {
+                this._renderer.setStyle(this._contentRef.nativeElement, 'width', "calc(100% + " + this.scrollbarWidth + ")");
+            }
+        };
+        PepCarouselComponent.prototype.setScrollBar = function () {
+            if (this.scrollbarHidden) {
+                this.hideScrollbar();
+            }
+            else {
+                this.showScrollbar();
+            }
+        };
+        PepCarouselComponent.prototype.getScrollbarWidth = function () {
+            /**
+             * Browser Scrollbar Widths (2016)
+             * OSX (Chrome, Safari, Firefox) - 15px
+             * Windows XP (IE7, Chrome, Firefox) - 17px
+             * Windows 7 (IE10, IE11, Chrome, Firefox) - 17px
+             * Windows 8.1 (IE11, Chrome, Firefox) - 17px
+             * Windows 10 (IE11, Chrome, Firefox) - 17px
+             * Windows 10 (Edge 12/13) - 12px
+             */
+            var outer = this._renderer.createElement('div');
+            this._renderer.setStyle(outer, 'visibility', 'hidden');
+            this._renderer.setStyle(outer, 'width', '100px');
+            this._renderer.setStyle(outer, 'msOverflowStyle', 'scrollbar'); // needed for WinJS apps
+            // document.body.appendChild(outer);
+            this._renderer.appendChild(this._document.body, outer);
+            // this._renderer.appendChild(this._renderer.selectRootElement('body'), outer);
+            var widthNoScroll = outer.offsetWidth;
+            // force scrollbars
+            this._renderer.setStyle(outer, 'overflow', 'scroll');
+            // add innerdiv
+            var inner = this._renderer.createElement('div');
+            this._renderer.setStyle(inner, 'width', '100%');
+            this._renderer.appendChild(outer, inner);
+            var widthWithScroll = inner.offsetWidth;
+            // remove divs
+            this._renderer.removeChild(this._document.body, outer);
+            /**
+             * Scrollbar width will be 0 on Mac OS with the
+             * default "Only show scrollbars when scrolling" setting (Yosemite and up).
+             * setting default width to 20;
+             */
+            return widthNoScroll - widthWithScroll || 20;
+        };
+        PepCarouselComponent.prototype.refreshWrapperDimensions = function () {
+            if (this.wrapper) {
+                var height = this._elementRef.nativeElement.style.height ||
+                    this._elementRef.nativeElement.offsetHeight;
+                this._renderer.setStyle(this.wrapper, 'width', '100%');
+                this._renderer.setStyle(this.wrapper, 'height', height === 0 ? 'auto' : height + 'px');
+            }
+        };
+        /*
+         * The below solution is heavily inspired from
+         * https://gist.github.com/andjosh/6764939
+         */
+        PepCarouselComponent.prototype.scrollTo = function (element, to, duration) {
+            var _this = this;
+            this.isAnimating = true;
+            var start = element.scrollLeft, change = to - start - this.snapOffset, increment = 20;
+            var currentTime = 0;
+            // t = current time
+            // b = start value
+            // c = change in value
+            // d = duration
+            var easeInOutQuad = function (t, b, c, d) {
+                t /= d / 2;
+                if (t < 1) {
+                    return (c / 2) * t * t + b;
+                }
+                t--;
+                return (-c / 2) * (t * (t - 2) - 1) + b;
+            };
+            var animateScroll = function () {
+                currentTime += increment;
+                element.scrollLeft = easeInOutQuad(currentTime, start, change, duration);
+                if (currentTime < duration) {
+                    _this.scrollToTimer = setTimeout(animateScroll, increment);
+                }
+                else {
+                    // run one more frame to make sure the animation is fully finished
+                    setTimeout(function () {
+                        _this.isAnimating = false;
+                        _this.snapAnimationFinished.emit(_this.currIndex);
+                    }, increment);
+                }
+            };
+            animateScroll();
+        };
+        PepCarouselComponent.prototype.locateCurrentIndex = function (snap) {
+            var _this = this;
+            this.currentChildWidth(function (currentChildWidth, nextChildrenWidth, childrenWidth, idx, stop) {
+                if (_this._contentRef.nativeElement.scrollLeft >=
+                    childrenWidth &&
+                    _this._contentRef.nativeElement.scrollLeft <=
+                        nextChildrenWidth) {
+                    if (nextChildrenWidth -
+                        _this._contentRef.nativeElement.scrollLeft >
+                        currentChildWidth / 2 &&
+                        !_this.isScrollReachesRightEnd()) {
+                        // roll back scrolling
+                        if (!_this.isAnimating) {
+                            _this.currIndex = idx;
+                        }
+                        if (snap) {
+                            _this.scrollTo(_this._contentRef.nativeElement, childrenWidth, _this.snapDuration);
+                        }
+                    }
+                    else if (_this._contentRef.nativeElement.scrollLeft !== 0) {
+                        // forward scrolling
+                        if (!_this.isAnimating) {
+                            _this.currIndex = idx + 1;
+                        }
+                        if (snap) {
+                            _this.scrollTo(_this._contentRef.nativeElement, childrenWidth + currentChildWidth, _this.snapDuration);
+                        }
+                    }
+                    stop();
+                }
+                else if (idx + 1 === _this._children.length - 1) {
+                    // reaches last index
+                    if (!_this.isAnimating) {
+                        _this.currIndex = idx + 1;
+                    }
+                    stop();
+                }
+            });
+        };
+        PepCarouselComponent.prototype.currentChildWidth = function (cb) {
+            var childrenWidth = 0;
+            var shouldBreak = false;
+            var breakFunc = function () {
+                shouldBreak = true;
+            };
+            var childrenArr = this._children.toArray();
+            for (var i = 0; i < childrenArr.length; i++) {
+                if (i === childrenArr.length - 1) {
+                    break;
+                }
+                if (shouldBreak) {
+                    break;
+                }
+                var nextChildrenWidth = childrenWidth +
+                    childrenArr[i + 1]._elementRef.nativeElement.clientWidth;
+                var currentClildWidth = childrenArr[i]._elementRef.nativeElement.clientWidth;
+                cb(currentClildWidth, nextChildrenWidth, childrenWidth, i, breakFunc);
+                childrenWidth += currentClildWidth;
+            }
+        };
+        PepCarouselComponent.prototype.toChildrenLocation = function () {
+            var to = 0;
+            var childrenArr = this._children.toArray();
+            for (var i = 0; i < this.currIndex; i++) {
+                to += childrenArr[i]._elementRef.nativeElement.clientWidth;
+            }
+            return to;
+        };
+        PepCarouselComponent.prototype.locateCarouselItem = function (element) {
+            var item = null;
+            var childrenArr = this._children.toArray();
+            for (var i = 0; i < childrenArr.length; i++) {
+                if (element === childrenArr[i]._elementRef.nativeElement) {
+                    item = childrenArr[i];
+                }
+            }
+            return item;
+        };
+        PepCarouselComponent.prototype.markElDimension = function () {
+            if (this.wrapper) {
+                this.elWidth = this.wrapper.style.width;
+                this.elHeight = this.wrapper.style.height;
+            }
+            else {
+                this.elWidth =
+                    this._elementRef.nativeElement.style.width ||
+                        this._elementRef.nativeElement.offsetWidth + 'px';
+                this.elHeight =
+                    this._elementRef.nativeElement.style.height ||
+                        this._elementRef.nativeElement.offsetHeight + 'px';
+            }
+            var container = this.wrapper || this.parentNode;
+            var containerWidth = container ? container.clientWidth : 0;
+            if (this._children.length > 1) {
+                this.indexBound = this.maximumIndex(containerWidth, this._children.toArray());
+            }
+        };
+        PepCarouselComponent.prototype.maximumIndex = function (containerWidth, childrenElements) {
+            var count = 0;
+            var childrenWidth = 0;
+            for (var i = 0; i <= childrenElements.length; i++) {
+                // last N element
+                var carouselItemDirective = childrenElements[childrenElements.length - 1 - i];
+                if (!carouselItemDirective) {
+                    break;
+                }
+                else {
+                    var nativeElement = carouselItemDirective._elementRef.nativeElement;
+                    var itemWidth = nativeElement.clientWidth;
+                    if (itemWidth === 0 && nativeElement.firstElementChild) {
+                        itemWidth =
+                            carouselItemDirective._elementRef.nativeElement
+                                .firstElementChild.clientWidth;
+                    }
+                    childrenWidth += itemWidth;
+                    if (childrenWidth < containerWidth) {
+                        count++;
+                    }
+                    else {
+                        break;
+                    }
+                }
+            }
+            return childrenElements.length - count;
+        };
+        PepCarouselComponent.prototype.isScrollReachesRightEnd = function () {
+            var scrollLeftPos = this._contentRef.nativeElement.scrollLeft +
+                this._contentRef.nativeElement.offsetWidth;
+            return scrollLeftPos >= this._contentRef.nativeElement.scrollWidth;
+        };
+        /**
+         * adds a margin right style to the last child element which will resolve the issue
+         * of last item gets cutoff.
+         */
+        PepCarouselComponent.prototype.adjustMarginToLastChild = function () {
+            // if (this._children && this._children.length > 0 && this.hideScrollbar) {
+            //     const childrenArr = this._children.toArray();
+            //     const lastItem = childrenArr[childrenArr.length - 1]._elementRef.nativeElement;
+            //     if (this.wrapper && childrenArr.length > 1) {
+            //         this._renderer.setStyle(lastItem, 'margin-right', this.scrollbarWidth);
+            //     } else {
+            //         this._renderer.setStyle(lastItem, 'margin-right', 0);
+            //     }
+            // }
+        };
+        return PepCarouselComponent;
+    }());
+    PepCarouselComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'pep-carousel',
+                    template: "\n        <div class=\"carousel-content\" #contentRef>\n            <ng-content></ng-content>\n        </div>\n    ",
+                    styles: ["\n            :host {\n                overflow: hidden;\n                display: block;\n            }\n            .carousel-content {\n                height: 100%;\n                overflow: auto;\n                white-space: nowrap;\n            }\n        "]
+                },] }
+    ];
+    PepCarouselComponent.ctorParameters = function () { return [
+        { type: core.ElementRef, decorators: [{ type: core.Inject, args: [core.ElementRef,] }] },
+        { type: core.Renderer2, decorators: [{ type: core.Inject, args: [core.Renderer2,] }] },
+        { type: undefined, decorators: [{ type: core.Inject, args: [common.DOCUMENT,] }] }
+    ]; };
+    PepCarouselComponent.propDecorators = {
+        _contentRef: [{ type: core.ViewChild, args: ['contentRef', { static: true },] }],
+        _children: [{ type: core.ContentChildren, args: [PepCarouselItemDirective, { descendants: true },] }],
+        _pointerEvents: [{ type: core.HostBinding, args: ['style.pointer-events',] }],
+        dsInitialized: [{ type: core.Output }],
+        indexChanged: [{ type: core.Output }],
+        reachesLeftBound: [{ type: core.Output }],
+        reachesRightBound: [{ type: core.Output }],
+        snapAnimationFinished: [{ type: core.Output }],
+        dragStart: [{ type: core.Output }],
+        dragEnd: [{ type: core.Output }],
+        scrollbarHidden: [{ type: core.Input, args: ['scrollbarHidden',] }],
+        disabled: [{ type: core.Input, args: ['disabled',] }],
+        xDisabled: [{ type: core.Input, args: ['xDisabled',] }],
+        yDisabled: [{ type: core.Input, args: ['yDisabled',] }],
+        xWheelEnabled: [{ type: core.Input, args: ['xWheelEnabled',] }],
+        dragDisabled: [{ type: core.Input, args: ['dragDisabled',] }],
+        snapDisabled: [{ type: core.Input, args: ['snapDisabled',] }],
+        snapOffset: [{ type: core.Input, args: ['snapOffset',] }],
+        snapDuration: [{ type: core.Input, args: ['snapDuration',] }],
+        onWheel: [{ type: core.HostListener, args: ['wheel', ['$event'],] }],
+        onWindowResize: [{ type: core.HostListener, args: ['window:resize',] }]
     };
 
-    var PepCarouselModule = /** @class */ (function () {
-        function PepCarouselModule() {
-        }
-        return PepCarouselModule;
-    }());
-    PepCarouselModule.decorators = [
-        { type: core.NgModule, args: [{
-                    exports: [PepCarouselComponent, PepCarouselItemDirective],
-                    declarations: [PepCarouselComponent, PepCarouselItemDirective],
-                },] }
+    var PepCarouselModule = /** @class */ (function () {
+        function PepCarouselModule() {
+        }
+        return PepCarouselModule;
+    }());
+    PepCarouselModule.decorators = [
+        { type: core.NgModule, args: [{
+                    exports: [PepCarouselComponent, PepCarouselItemDirective],
+                    declarations: [PepCarouselComponent, PepCarouselItemDirective],
+                },] }
     ];
 
-    /*
-     * Public API Surface of carousel
-     */
+    /*
+     * Public API Surface of carousel
+     */
     // export * from './carousel.model';
 
-    /**
-     * Generated bundle index. Do not edit.
+    /**
+     * Generated bundle index. Do not edit.
      */
 
     exports.PepCarouselComponent = PepCarouselComponent;