@pepperi-addons/ngx-lib 0.4.2-beta.137 → 0.4.2-beta.139

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

@@ -0,0 +1,800 @@
+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 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,
+            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']
+            }] } });
+
+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
+ */
+// export * from './carousel.model';
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PepCarouselComponent, PepCarouselItemDirective, PepCarouselModule };
+//# sourceMappingURL=pepperi-addons-ngx-lib-carousel.mjs.map