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

package/fesm2015/pepperi-addons-ngx-lib-carousel.js

@@ -1,701 +1,701 @@
 import { Directive, ElementRef, Inject, HostBinding, Input, EventEmitter, Component, Renderer2, ViewChild, ContentChildren, Output, HostListener, NgModule } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 
-class PepCarouselItemDirective {
-    constructor(elementRef) {
-        this.display = 'inline-block';
-        this._dragDisabled = false;
-        this._elementRef = elementRef;
-    }
-    get dragDisabled() {
-        return this._dragDisabled;
-    }
-    set dragDisabled(value) {
-        this._dragDisabled = value;
-    }
-}
-PepCarouselItemDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[pepCarouselItem]',
-            },] }
-];
-PepCarouselItemDirective.ctorParameters = () => [
-    { type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] }
-];
-PepCarouselItemDirective.propDecorators = {
-    display: [{ type: HostBinding, args: ['style.display',] }],
-    dragDisabled: [{ type: Input, args: ['dragDisabled',] }]
+class PepCarouselItemDirective {
+    constructor(elementRef) {
+        this.display = 'inline-block';
+        this._dragDisabled = false;
+        this._elementRef = elementRef;
+    }
+    get dragDisabled() {
+        return this._dragDisabled;
+    }
+    set dragDisabled(value) {
+        this._dragDisabled = value;
+    }
+}
+PepCarouselItemDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[pepCarouselItem]',
+            },] }
+];
+PepCarouselItemDirective.ctorParameters = () => [
+    { type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] }
+];
+PepCarouselItemDirective.propDecorators = {
+    display: [{ type: HostBinding, args: ['style.display',] }],
+    dragDisabled: [{ type: Input, args: ['dragDisabled',] }]
 };
 
-class PepCarouselComponent {
-    constructor(_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 EventEmitter();
-        this.indexChanged = new EventEmitter();
-        this.reachesLeftBound = new EventEmitter();
-        this.reachesRightBound = new EventEmitter();
-        this.snapAnimationFinished = new EventEmitter();
-        this.dragStart = new EventEmitter();
-        this.dragEnd = new EventEmitter();
-        this.scrollbarWidth = `${this.getScrollbarWidth()}px`;
-    }
-    /**
-     * Is the user currently dragging the element
-     */
-    get isDragging() {
-        return this._isDragging;
-    }
-    get currIndex() {
-        return this._index;
-    }
-    set currIndex(value) {
-        if (value !== this._index) {
-            this._index = value;
-            this.indexChanged.emit(value);
-        }
-    }
-    /**
-     * Whether the scrollbar is hidden
-     */
-    get scrollbarHidden() {
-        return this._scrollbarHidden;
-    }
-    set scrollbarHidden(value) {
-        this._scrollbarHidden = value;
-    }
-    /**
-     * Whether horizontally and vertically draging and scrolling is be disabled
-     */
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(value) {
-        this._disabled = value;
-    }
-    /**
-     * Whether horizontally dragging and scrolling is be disabled
-     */
-    get xDisabled() {
-        return this._xDisabled;
-    }
-    set xDisabled(value) {
-        this._xDisabled = value;
-    }
-    /**
-     * Whether vertically dragging and scrolling events is disabled
-     */
-    get yDisabled() {
-        return this._yDisabled;
-    }
-    set yDisabled(value) {
-        this._yDisabled = value;
-    }
-    /**
-     * Whether scrolling horizontally with mouse wheel is enabled
-     */
-    get xWheelEnabled() {
-        return this._xWheelEnabled;
-    }
-    set xWheelEnabled(value) {
-        this._xWheelEnabled = value;
-    }
-    get dragDisabled() {
-        return this._dragDisabled;
-    }
-    set dragDisabled(value) {
-        this._dragDisabled = value;
-    }
-    get snapDisabled() {
-        return this._snapDisabled;
-    }
-    set snapDisabled(value) {
-        this._snapDisabled = value;
-    }
-    get snapOffset() {
-        return this._snapOffset;
-    }
-    set snapOffset(value) {
-        this._snapOffset = value;
-    }
-    get snapDuration() {
-        return this._snapDuration;
-    }
-    set snapDuration(value) {
-        this._snapDuration = value;
-    }
-    ngOnChanges() {
-        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');
-        }
-    }
-    ngAfterViewInit() {
-        // 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', (e) => {
-            e.preventDefault();
-        });
-        this.checkNavStatus();
-        this.dsInitialized.emit();
-        this.adjustMarginToLastChild();
-    }
-    ngAfterViewChecked() {
-        // avoid extra checks
-        if (this._children.length !== this.prevChildrenLength) {
-            this.markElDimension();
-            this.checkScrollbar();
-            this.prevChildrenLength = this._children.length;
-            this.checkNavStatus();
-        }
-    }
-    ngOnDestroy() {
-        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();
-        }
-    }
-    onMouseMoveHandler(event) {
-        this.onMouseMove(event);
-    }
-    onMouseMove(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) {
-                const clientX = event.clientX;
-                this._contentRef.nativeElement.scrollLeft =
-                    this._contentRef.nativeElement.scrollLeft -
-                        clientX +
-                        this.downX;
-                this.downX = clientX;
-            }
-            // Drag Y
-            if (!this.yDisabled && !this.dragDisabled) {
-                const clientY = event.clientY;
-                this._contentRef.nativeElement.scrollTop =
-                    this._contentRef.nativeElement.scrollTop -
-                        clientY +
-                        this.downY;
-                this.downY = clientY;
-            }
-        }
-    }
-    onMouseDownHandler(event) {
-        const carouselItem = this.locateCarouselItem(event.target);
-        if (carouselItem && carouselItem.dragDisabled) {
-            return;
-        }
-        const isTouchEvent = event.type === 'touchstart';
-        this._startGlobalListening(isTouchEvent);
-        this.isPressed = true;
-        const mouseEvent = event;
-        this.downX = mouseEvent.clientX;
-        this.downY = mouseEvent.clientY;
-        clearTimeout(this.scrollToTimer);
-    }
-    onScrollHandler() {
-        this.checkNavStatus();
-        if (!this.isPressed && !this.isAnimating && !this.snapDisabled) {
-            this.isScrolling = true;
-            clearTimeout(this.scrollTimer);
-            this.scrollTimer = setTimeout(() => {
-                this.isScrolling = false;
-                this.locateCurrentIndex(true);
-            }, 500);
-        }
-        else {
-            this.locateCurrentIndex();
-        }
-    }
-    onMouseUpHandler(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
-     */
-    moveLeft() {
-        if (this.currIndex !== 0 || this.snapDisabled) {
-            this.currIndex--;
-            clearTimeout(this.scrollToTimer);
-            this.scrollTo(this._contentRef.nativeElement, this.toChildrenLocation(), this.snapDuration);
-        }
-    }
-    moveRight() {
-        const container = this.wrapper || this.parentNode;
-        const 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);
-        }
-    }
-    moveTo(index) {
-        const container = this.wrapper || this.parentNode;
-        const 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);
-        }
-    }
-    checkNavStatus() {
-        setTimeout(() => {
-            const onlyOneItem = Boolean(this._children.length <= 1);
-            const 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);
-    }
-    onWheel(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();
-                }
-            }
-        }
-    }
-    onWindowResize() {
-        this.refreshWrapperDimensions();
-        this.checkNavStatus();
-    }
-    _setIsDragging(value) {
-        if (this._isDragging === value) {
-            return;
-        }
-        this._isDragging = value;
-        value ? this.dragStart.emit() : this.dragEnd.emit();
-    }
-    _startGlobalListening(isTouchEvent) {
-        if (!this._onMouseMoveListener) {
-            const eventName = isTouchEvent ? 'touchmove' : 'mousemove';
-            this._onMouseMoveListener = this._renderer.listen('document', eventName, this.onMouseMoveHandler.bind(this));
-        }
-        if (!this._onMouseUpListener) {
-            const eventName = isTouchEvent ? 'touchend' : 'mouseup';
-            this._onMouseUpListener = this._renderer.listen('document', eventName, this.onMouseUpHandler.bind(this));
-        }
-    }
-    _stopGlobalListening() {
-        if (this._onMouseMoveListener) {
-            this._onMouseMoveListener = this._onMouseMoveListener();
-        }
-        if (this._onMouseUpListener) {
-            this._onMouseUpListener = this._onMouseUpListener();
-        }
-    }
-    disableScroll(axis) {
-        this._renderer.setStyle(this._contentRef.nativeElement, `overflow-${axis}`, 'hidden');
-    }
-    enableScroll(axis) {
-        this._renderer.setStyle(this._contentRef.nativeElement, `overflow-${axis}`, 'auto');
-    }
-    hideScrollbar() {
-        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();
-        }
-    }
-    showScrollbar() {
-        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();
-        }
-    }
-    checkScrollbar() {
-        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})`);
-        }
-    }
-    setScrollBar() {
-        if (this.scrollbarHidden) {
-            this.hideScrollbar();
-        }
-        else {
-            this.showScrollbar();
-        }
-    }
-    getScrollbarWidth() {
-        /**
-         * 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
-         */
-        const 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);
-        const widthNoScroll = outer.offsetWidth;
-        // force scrollbars
-        this._renderer.setStyle(outer, 'overflow', 'scroll');
-        // add innerdiv
-        const inner = this._renderer.createElement('div');
-        this._renderer.setStyle(inner, 'width', '100%');
-        this._renderer.appendChild(outer, inner);
-        const 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;
-    }
-    refreshWrapperDimensions() {
-        if (this.wrapper) {
-            const 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
-     */
-    scrollTo(element, to, duration) {
-        this.isAnimating = true;
-        const start = element.scrollLeft, change = to - start - this.snapOffset, increment = 20;
-        let currentTime = 0;
-        // t = current time
-        // b = start value
-        // c = change in value
-        // d = duration
-        const easeInOutQuad = (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;
-        };
-        const animateScroll = () => {
-            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(() => {
-                    this.isAnimating = false;
-                    this.snapAnimationFinished.emit(this.currIndex);
-                }, increment);
-            }
-        };
-        animateScroll();
-    }
-    locateCurrentIndex(snap) {
-        this.currentChildWidth((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();
-            }
-        });
-    }
-    currentChildWidth(cb) {
-        let childrenWidth = 0;
-        let shouldBreak = false;
-        const breakFunc = function () {
-            shouldBreak = true;
-        };
-        const childrenArr = this._children.toArray();
-        for (let i = 0; i < childrenArr.length; i++) {
-            if (i === childrenArr.length - 1) {
-                break;
-            }
-            if (shouldBreak) {
-                break;
-            }
-            const nextChildrenWidth = childrenWidth +
-                childrenArr[i + 1]._elementRef.nativeElement.clientWidth;
-            const currentClildWidth = childrenArr[i]._elementRef.nativeElement.clientWidth;
-            cb(currentClildWidth, nextChildrenWidth, childrenWidth, i, breakFunc);
-            childrenWidth += currentClildWidth;
-        }
-    }
-    toChildrenLocation() {
-        let to = 0;
-        const childrenArr = this._children.toArray();
-        for (let i = 0; i < this.currIndex; i++) {
-            to += childrenArr[i]._elementRef.nativeElement.clientWidth;
-        }
-        return to;
-    }
-    locateCarouselItem(element) {
-        let item = null;
-        const childrenArr = this._children.toArray();
-        for (let i = 0; i < childrenArr.length; i++) {
-            if (element === childrenArr[i]._elementRef.nativeElement) {
-                item = childrenArr[i];
-            }
-        }
-        return item;
-    }
-    markElDimension() {
-        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';
-        }
-        const container = this.wrapper || this.parentNode;
-        const containerWidth = container ? container.clientWidth : 0;
-        if (this._children.length > 1) {
-            this.indexBound = this.maximumIndex(containerWidth, this._children.toArray());
-        }
-    }
-    maximumIndex(containerWidth, childrenElements) {
-        let count = 0;
-        let childrenWidth = 0;
-        for (let i = 0; i <= childrenElements.length; i++) {
-            // last N element
-            const carouselItemDirective = childrenElements[childrenElements.length - 1 - i];
-            if (!carouselItemDirective) {
-                break;
-            }
-            else {
-                const nativeElement = carouselItemDirective._elementRef.nativeElement;
-                let 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;
-    }
-    isScrollReachesRightEnd() {
-        const 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.
-     */
-    adjustMarginToLastChild() {
-        // 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);
-        //     }
-        // }
-    }
-}
-PepCarouselComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'pep-carousel',
+class PepCarouselComponent {
+    constructor(_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 EventEmitter();
+        this.indexChanged = new EventEmitter();
+        this.reachesLeftBound = new EventEmitter();
+        this.reachesRightBound = new EventEmitter();
+        this.snapAnimationFinished = new EventEmitter();
+        this.dragStart = new EventEmitter();
+        this.dragEnd = new EventEmitter();
+        this.scrollbarWidth = `${this.getScrollbarWidth()}px`;
+    }
+    /**
+     * Is the user currently dragging the element
+     */
+    get isDragging() {
+        return this._isDragging;
+    }
+    get currIndex() {
+        return this._index;
+    }
+    set currIndex(value) {
+        if (value !== this._index) {
+            this._index = value;
+            this.indexChanged.emit(value);
+        }
+    }
+    /**
+     * Whether the scrollbar is hidden
+     */
+    get scrollbarHidden() {
+        return this._scrollbarHidden;
+    }
+    set scrollbarHidden(value) {
+        this._scrollbarHidden = value;
+    }
+    /**
+     * Whether horizontally and vertically draging and scrolling is be disabled
+     */
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = value;
+    }
+    /**
+     * Whether horizontally dragging and scrolling is be disabled
+     */
+    get xDisabled() {
+        return this._xDisabled;
+    }
+    set xDisabled(value) {
+        this._xDisabled = value;
+    }
+    /**
+     * Whether vertically dragging and scrolling events is disabled
+     */
+    get yDisabled() {
+        return this._yDisabled;
+    }
+    set yDisabled(value) {
+        this._yDisabled = value;
+    }
+    /**
+     * Whether scrolling horizontally with mouse wheel is enabled
+     */
+    get xWheelEnabled() {
+        return this._xWheelEnabled;
+    }
+    set xWheelEnabled(value) {
+        this._xWheelEnabled = value;
+    }
+    get dragDisabled() {
+        return this._dragDisabled;
+    }
+    set dragDisabled(value) {
+        this._dragDisabled = value;
+    }
+    get snapDisabled() {
+        return this._snapDisabled;
+    }
+    set snapDisabled(value) {
+        this._snapDisabled = value;
+    }
+    get snapOffset() {
+        return this._snapOffset;
+    }
+    set snapOffset(value) {
+        this._snapOffset = value;
+    }
+    get snapDuration() {
+        return this._snapDuration;
+    }
+    set snapDuration(value) {
+        this._snapDuration = value;
+    }
+    ngOnChanges() {
+        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');
+        }
+    }
+    ngAfterViewInit() {
+        // 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', (e) => {
+            e.preventDefault();
+        });
+        this.checkNavStatus();
+        this.dsInitialized.emit();
+        this.adjustMarginToLastChild();
+    }
+    ngAfterViewChecked() {
+        // avoid extra checks
+        if (this._children.length !== this.prevChildrenLength) {
+            this.markElDimension();
+            this.checkScrollbar();
+            this.prevChildrenLength = this._children.length;
+            this.checkNavStatus();
+        }
+    }
+    ngOnDestroy() {
+        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();
+        }
+    }
+    onMouseMoveHandler(event) {
+        this.onMouseMove(event);
+    }
+    onMouseMove(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) {
+                const clientX = event.clientX;
+                this._contentRef.nativeElement.scrollLeft =
+                    this._contentRef.nativeElement.scrollLeft -
+                        clientX +
+                        this.downX;
+                this.downX = clientX;
+            }
+            // Drag Y
+            if (!this.yDisabled && !this.dragDisabled) {
+                const clientY = event.clientY;
+                this._contentRef.nativeElement.scrollTop =
+                    this._contentRef.nativeElement.scrollTop -
+                        clientY +
+                        this.downY;
+                this.downY = clientY;
+            }
+        }
+    }
+    onMouseDownHandler(event) {
+        const carouselItem = this.locateCarouselItem(event.target);
+        if (carouselItem && carouselItem.dragDisabled) {
+            return;
+        }
+        const isTouchEvent = event.type === 'touchstart';
+        this._startGlobalListening(isTouchEvent);
+        this.isPressed = true;
+        const mouseEvent = event;
+        this.downX = mouseEvent.clientX;
+        this.downY = mouseEvent.clientY;
+        clearTimeout(this.scrollToTimer);
+    }
+    onScrollHandler() {
+        this.checkNavStatus();
+        if (!this.isPressed && !this.isAnimating && !this.snapDisabled) {
+            this.isScrolling = true;
+            clearTimeout(this.scrollTimer);
+            this.scrollTimer = setTimeout(() => {
+                this.isScrolling = false;
+                this.locateCurrentIndex(true);
+            }, 500);
+        }
+        else {
+            this.locateCurrentIndex();
+        }
+    }
+    onMouseUpHandler(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
+     */
+    moveLeft() {
+        if (this.currIndex !== 0 || this.snapDisabled) {
+            this.currIndex--;
+            clearTimeout(this.scrollToTimer);
+            this.scrollTo(this._contentRef.nativeElement, this.toChildrenLocation(), this.snapDuration);
+        }
+    }
+    moveRight() {
+        const container = this.wrapper || this.parentNode;
+        const 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);
+        }
+    }
+    moveTo(index) {
+        const container = this.wrapper || this.parentNode;
+        const 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);
+        }
+    }
+    checkNavStatus() {
+        setTimeout(() => {
+            const onlyOneItem = Boolean(this._children.length <= 1);
+            const 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);
+    }
+    onWheel(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();
+                }
+            }
+        }
+    }
+    onWindowResize() {
+        this.refreshWrapperDimensions();
+        this.checkNavStatus();
+    }
+    _setIsDragging(value) {
+        if (this._isDragging === value) {
+            return;
+        }
+        this._isDragging = value;
+        value ? this.dragStart.emit() : this.dragEnd.emit();
+    }
+    _startGlobalListening(isTouchEvent) {
+        if (!this._onMouseMoveListener) {
+            const eventName = isTouchEvent ? 'touchmove' : 'mousemove';
+            this._onMouseMoveListener = this._renderer.listen('document', eventName, this.onMouseMoveHandler.bind(this));
+        }
+        if (!this._onMouseUpListener) {
+            const eventName = isTouchEvent ? 'touchend' : 'mouseup';
+            this._onMouseUpListener = this._renderer.listen('document', eventName, this.onMouseUpHandler.bind(this));
+        }
+    }
+    _stopGlobalListening() {
+        if (this._onMouseMoveListener) {
+            this._onMouseMoveListener = this._onMouseMoveListener();
+        }
+        if (this._onMouseUpListener) {
+            this._onMouseUpListener = this._onMouseUpListener();
+        }
+    }
+    disableScroll(axis) {
+        this._renderer.setStyle(this._contentRef.nativeElement, `overflow-${axis}`, 'hidden');
+    }
+    enableScroll(axis) {
+        this._renderer.setStyle(this._contentRef.nativeElement, `overflow-${axis}`, 'auto');
+    }
+    hideScrollbar() {
+        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();
+        }
+    }
+    showScrollbar() {
+        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();
+        }
+    }
+    checkScrollbar() {
+        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})`);
+        }
+    }
+    setScrollBar() {
+        if (this.scrollbarHidden) {
+            this.hideScrollbar();
+        }
+        else {
+            this.showScrollbar();
+        }
+    }
+    getScrollbarWidth() {
+        /**
+         * 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
+         */
+        const 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);
+        const widthNoScroll = outer.offsetWidth;
+        // force scrollbars
+        this._renderer.setStyle(outer, 'overflow', 'scroll');
+        // add innerdiv
+        const inner = this._renderer.createElement('div');
+        this._renderer.setStyle(inner, 'width', '100%');
+        this._renderer.appendChild(outer, inner);
+        const 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;
+    }
+    refreshWrapperDimensions() {
+        if (this.wrapper) {
+            const 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
+     */
+    scrollTo(element, to, duration) {
+        this.isAnimating = true;
+        const start = element.scrollLeft, change = to - start - this.snapOffset, increment = 20;
+        let currentTime = 0;
+        // t = current time
+        // b = start value
+        // c = change in value
+        // d = duration
+        const easeInOutQuad = (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;
+        };
+        const animateScroll = () => {
+            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(() => {
+                    this.isAnimating = false;
+                    this.snapAnimationFinished.emit(this.currIndex);
+                }, increment);
+            }
+        };
+        animateScroll();
+    }
+    locateCurrentIndex(snap) {
+        this.currentChildWidth((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();
+            }
+        });
+    }
+    currentChildWidth(cb) {
+        let childrenWidth = 0;
+        let shouldBreak = false;
+        const breakFunc = function () {
+            shouldBreak = true;
+        };
+        const childrenArr = this._children.toArray();
+        for (let i = 0; i < childrenArr.length; i++) {
+            if (i === childrenArr.length - 1) {
+                break;
+            }
+            if (shouldBreak) {
+                break;
+            }
+            const nextChildrenWidth = childrenWidth +
+                childrenArr[i + 1]._elementRef.nativeElement.clientWidth;
+            const currentClildWidth = childrenArr[i]._elementRef.nativeElement.clientWidth;
+            cb(currentClildWidth, nextChildrenWidth, childrenWidth, i, breakFunc);
+            childrenWidth += currentClildWidth;
+        }
+    }
+    toChildrenLocation() {
+        let to = 0;
+        const childrenArr = this._children.toArray();
+        for (let i = 0; i < this.currIndex; i++) {
+            to += childrenArr[i]._elementRef.nativeElement.clientWidth;
+        }
+        return to;
+    }
+    locateCarouselItem(element) {
+        let item = null;
+        const childrenArr = this._children.toArray();
+        for (let i = 0; i < childrenArr.length; i++) {
+            if (element === childrenArr[i]._elementRef.nativeElement) {
+                item = childrenArr[i];
+            }
+        }
+        return item;
+    }
+    markElDimension() {
+        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';
+        }
+        const container = this.wrapper || this.parentNode;
+        const containerWidth = container ? container.clientWidth : 0;
+        if (this._children.length > 1) {
+            this.indexBound = this.maximumIndex(containerWidth, this._children.toArray());
+        }
+    }
+    maximumIndex(containerWidth, childrenElements) {
+        let count = 0;
+        let childrenWidth = 0;
+        for (let i = 0; i <= childrenElements.length; i++) {
+            // last N element
+            const carouselItemDirective = childrenElements[childrenElements.length - 1 - i];
+            if (!carouselItemDirective) {
+                break;
+            }
+            else {
+                const nativeElement = carouselItemDirective._elementRef.nativeElement;
+                let 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;
+    }
+    isScrollReachesRightEnd() {
+        const 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.
+     */
+    adjustMarginToLastChild() {
+        // 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);
+        //     }
+        // }
+    }
+}
+PepCarouselComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pep-carousel',
                 template: `
         <div class="carousel-content" #contentRef>
             <ng-content></ng-content>
         </div>
-    `,
+    `,
                 styles: [`
             :host {
                 overflow: hidden;
@@ -706,54 +706,54 @@ PepCarouselComponent.decorators = [
                 overflow: auto;
                 white-space: nowrap;
             }
-        `]
-            },] }
-];
-PepCarouselComponent.ctorParameters = () => [
-    { type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] },
-    { type: Renderer2, decorators: [{ type: Inject, args: [Renderer2,] }] },
-    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
-];
-PepCarouselComponent.propDecorators = {
-    _contentRef: [{ type: ViewChild, args: ['contentRef', { static: true },] }],
-    _children: [{ type: ContentChildren, args: [PepCarouselItemDirective, { descendants: true },] }],
-    _pointerEvents: [{ type: HostBinding, args: ['style.pointer-events',] }],
-    dsInitialized: [{ type: Output }],
-    indexChanged: [{ type: Output }],
-    reachesLeftBound: [{ type: Output }],
-    reachesRightBound: [{ type: Output }],
-    snapAnimationFinished: [{ type: Output }],
-    dragStart: [{ type: Output }],
-    dragEnd: [{ type: Output }],
-    scrollbarHidden: [{ type: Input, args: ['scrollbarHidden',] }],
-    disabled: [{ type: Input, args: ['disabled',] }],
-    xDisabled: [{ type: Input, args: ['xDisabled',] }],
-    yDisabled: [{ type: Input, args: ['yDisabled',] }],
-    xWheelEnabled: [{ type: Input, args: ['xWheelEnabled',] }],
-    dragDisabled: [{ type: Input, args: ['dragDisabled',] }],
-    snapDisabled: [{ type: Input, args: ['snapDisabled',] }],
-    snapOffset: [{ type: Input, args: ['snapOffset',] }],
-    snapDuration: [{ type: Input, args: ['snapDuration',] }],
-    onWheel: [{ type: HostListener, args: ['wheel', ['$event'],] }],
-    onWindowResize: [{ type: HostListener, args: ['window:resize',] }]
+        `]
+            },] }
+];
+PepCarouselComponent.ctorParameters = () => [
+    { type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] },
+    { type: Renderer2, decorators: [{ type: Inject, args: [Renderer2,] }] },
+    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
+];
+PepCarouselComponent.propDecorators = {
+    _contentRef: [{ type: ViewChild, args: ['contentRef', { static: true },] }],
+    _children: [{ type: ContentChildren, args: [PepCarouselItemDirective, { descendants: true },] }],
+    _pointerEvents: [{ type: HostBinding, args: ['style.pointer-events',] }],
+    dsInitialized: [{ type: Output }],
+    indexChanged: [{ type: Output }],
+    reachesLeftBound: [{ type: Output }],
+    reachesRightBound: [{ type: Output }],
+    snapAnimationFinished: [{ type: Output }],
+    dragStart: [{ type: Output }],
+    dragEnd: [{ type: Output }],
+    scrollbarHidden: [{ type: Input, args: ['scrollbarHidden',] }],
+    disabled: [{ type: Input, args: ['disabled',] }],
+    xDisabled: [{ type: Input, args: ['xDisabled',] }],
+    yDisabled: [{ type: Input, args: ['yDisabled',] }],
+    xWheelEnabled: [{ type: Input, args: ['xWheelEnabled',] }],
+    dragDisabled: [{ type: Input, args: ['dragDisabled',] }],
+    snapDisabled: [{ type: Input, args: ['snapDisabled',] }],
+    snapOffset: [{ type: Input, args: ['snapOffset',] }],
+    snapDuration: [{ type: Input, args: ['snapDuration',] }],
+    onWheel: [{ type: HostListener, args: ['wheel', ['$event'],] }],
+    onWindowResize: [{ type: HostListener, args: ['window:resize',] }]
 };
 
-class PepCarouselModule {
-}
-PepCarouselModule.decorators = [
-    { type: NgModule, args: [{
-                exports: [PepCarouselComponent, PepCarouselItemDirective],
-                declarations: [PepCarouselComponent, PepCarouselItemDirective],
-            },] }
+class PepCarouselModule {
+}
+PepCarouselModule.decorators = [
+    { type: 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.
  */
 
 export { PepCarouselComponent, PepCarouselItemDirective, PepCarouselModule };