@pepperi-addons/ngx-lib 0.4.0-angular14.36 → 0.4.0-angular14.39

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

@@ -2,802 +2,802 @@ import * as i0 from '@angular/core';
 import { ElementRef, Directive, Inject, HostBinding, Input, EventEmitter, Renderer2, Component, 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepCarouselItemDirective, deps: [{ token: ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-PepCarouselItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: PepCarouselItemDirective, selector: "[pepCarouselItem]", inputs: { dragDisabled: "dragDisabled" }, host: { properties: { "style.display": "this.display" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepCarouselItemDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[pepCarouselItem]',
-                }]
-        }], ctorParameters: function () {
-        return [{ type: i0.ElementRef, decorators: [{
-                        type: Inject,
-                        args: [ElementRef]
-                    }] }];
-    }, 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepCarouselItemDirective, deps: [{ token: ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+PepCarouselItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: PepCarouselItemDirective, selector: "[pepCarouselItem]", inputs: { dragDisabled: "dragDisabled" }, host: { properties: { "style.display": "this.display" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepCarouselItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[pepCarouselItem]',
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef, decorators: [{
+                        type: Inject,
+                        args: [ElementRef]
+                    }] }];
+    }, 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepCarouselComponent, deps: [{ token: ElementRef }, { token: Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
+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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepCarouselComponent, deps: [{ token: ElementRef }, { token: Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
 PepCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepCarouselComponent, selector: "pep-carousel", inputs: { scrollbarHidden: "scrollbarHidden", disabled: "disabled", xDisabled: "xDisabled", yDisabled: "yDisabled", xWheelEnabled: "xWheelEnabled", dragDisabled: "dragDisabled", snapDisabled: "snapDisabled", snapOffset: "snapOffset", snapDuration: "snapDuration" }, outputs: { dsInitialized: "dsInitialized", indexChanged: "indexChanged", reachesLeftBound: "reachesLeftBound", reachesRightBound: "reachesRightBound", snapAnimationFinished: "snapAnimationFinished", dragStart: "dragStart", dragEnd: "dragEnd" }, host: { listeners: { "wheel": "onWheel($event)", "window:resize": "onWindowResize()" }, properties: { "style.pointer-events": "this._pointerEvents" } }, queries: [{ propertyName: "_children", predicate: PepCarouselItemDirective, descendants: true }], viewQueries: [{ propertyName: "_contentRef", first: true, predicate: ["contentRef"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
         <div class="carousel-content" #contentRef>
             <ng-content></ng-content>
         </div>
-    `, isInline: true, styles: [":host{overflow:hidden;display:block}.carousel-content{height:100%;overflow:auto;white-space:nowrap}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepCarouselComponent, decorators: [{
-            type: Component,
+    `, isInline: true, styles: [":host{overflow:hidden;display:block}.carousel-content{height:100%;overflow:auto;white-space:nowrap}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepCarouselComponent, decorators: [{
+            type: Component,
             args: [{ selector: 'pep-carousel', template: `
         <div class="carousel-content" #contentRef>
             <ng-content></ng-content>
         </div>
-    `, styles: [":host{overflow:hidden;display:block}.carousel-content{height:100%;overflow:auto;white-space:nowrap}\n"] }]
-        }], ctorParameters: function () {
-        return [{ type: i0.ElementRef, decorators: [{
-                        type: Inject,
-                        args: [ElementRef]
-                    }] }, { type: i0.Renderer2, decorators: [{
-                        type: Inject,
-                        args: [Renderer2]
-                    }] }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [DOCUMENT]
-                    }] }];
-    }, 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']
+    `, styles: [":host{overflow:hidden;display:block}.carousel-content{height:100%;overflow:auto;white-space:nowrap}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef, decorators: [{
+                        type: Inject,
+                        args: [ElementRef]
+                    }] }, { type: i0.Renderer2, decorators: [{
+                        type: Inject,
+                        args: [Renderer2]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [DOCUMENT]
+                    }] }];
+    }, 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepCarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PepCarouselModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepCarouselModule, declarations: [PepCarouselComponent, PepCarouselItemDirective], exports: [PepCarouselComponent, PepCarouselItemDirective] });
-PepCarouselModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepCarouselModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepCarouselModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [PepCarouselComponent, PepCarouselItemDirective],
-                    declarations: [PepCarouselComponent, PepCarouselItemDirective],
-                }]
+class PepCarouselModule {
+}
+PepCarouselModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepCarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PepCarouselModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepCarouselModule, declarations: [PepCarouselComponent, PepCarouselItemDirective], exports: [PepCarouselComponent, PepCarouselItemDirective] });
+PepCarouselModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepCarouselModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: 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 };