@fundamental-ngx/core 0.34.3-rc.10 → 0.34.3-rc.13

package/carousel/fesm2020/fundamental-ngx-core-carousel.mjs

@@ -547,7 +547,7 @@ class CarouselComponent {
         this._changeDetectorRef = _changeDetectorRef;
         this._carouselService = _carouselService;
         this._rtlService = _rtlService;
-        /** Id for the Carousel. */
+        /** ID for the Carousel. */
         this.id = `fd-carousel-${carouselCounter++}`;
         /** Sets aria-label attribute for carousel */
         this.ariaLabel = null;
@@ -577,8 +577,6 @@ class CarouselComponent {
         this.swipeEnabled = true;
         /** Is carousel is vertical. Default value is false. */
         this.vertical = false;
-        /** Number of items to be visible at a time */
-        this.visibleSlidesCount = 1;
         /** An event that is emitted after a slide transition has happened */
         this.slideChange = new EventEmitter();
         /**
@@ -602,6 +600,10 @@ class CarouselComponent {
         /** @hidden */
         this._slidesWrapperSize = 0;
         /** @hidden */
+        this._visibleSlidesCount = 1;
+        /** @hidden */
+        this._visibleSlidesNumericCount = 1;
+        /** @hidden */
         this._resourceStrings = CarouselResourceStringsEN;
         /** @hidden */
         this._config = {};
@@ -625,6 +627,14 @@ class CarouselComponent {
     get resourceStrings() {
         return this._resourceStrings;
     }
+    /** Number of items to be visible at a time */
+    set visibleSlidesCount(value) {
+        this._visibleSlidesCount = value;
+        this._visibleSlidesNumericCount = this._getVisibleSlidesCount();
+    }
+    get visibleSlidesCount() {
+        return this._visibleSlidesCount;
+    }
     /**
      * @hidden Returns the `tabIndex` of the carousel component.
      */
@@ -669,16 +679,16 @@ class CarouselComponent {
     ngAfterViewInit() {
         this._initializeServiceConfig();
         this._carouselService.initialise(this._config, this.slides, this.slideContainer);
-        this._previousVisibleSlidesCount = this.visibleSlidesCount;
+        this._previousVisibleSlidesCount = this._visibleSlidesNumericCount;
         this._resizeContentContainer();
     }
     /** @hidden */
     ngAfterViewChecked() {
-        if (this._previousVisibleSlidesCount && this._previousVisibleSlidesCount !== this.visibleSlidesCount) {
+        if (this._previousVisibleSlidesCount && this._previousVisibleSlidesCount !== this._visibleSlidesNumericCount) {
             this._initializeCarousel();
             this._initializeServiceConfig();
             this._carouselService.updateConfig(this._config);
-            this._previousVisibleSlidesCount = this.visibleSlidesCount;
+            this._previousVisibleSlidesCount = this._visibleSlidesNumericCount;
             this._changeDetectorRef.detectChanges();
         }
     }
@@ -802,8 +812,8 @@ class CarouselComponent {
                 this.rightButtonDisabled = true;
                 this.leftButtonDisabled = false;
             }
-            else if (this.visibleSlidesCount > 1 &&
-                this.currentActiveSlidesStartIndex + this.visibleSlidesCount >= this.slides.length) {
+            else if (this._visibleSlidesNumericCount > 1 &&
+                this.currentActiveSlidesStartIndex + this._visibleSlidesNumericCount >= this.slides.length) {
                 this.rightButtonDisabled = true;
             }
             else {
@@ -837,19 +847,19 @@ class CarouselComponent {
         this._buttonVisibility();
         let arrayLength;
         // set page indicator count with fake array, to use in template
-        if (this.loop && this.visibleSlidesCount > 1) {
+        if (this.loop && this._visibleSlidesNumericCount > 1) {
             // If loop with multi item visible.
             arrayLength = this.slides.length;
         }
         else {
-            arrayLength = this.slides.length - this.visibleSlidesCount + 1;
+            arrayLength = this.slides.length - this._visibleSlidesNumericCount + 1;
         }
         const pageIndicatorsIfZeroCount = this.slides.length === 0 ? 0 : 1;
         this.pageIndicatorsCountArray = new Array(arrayLength > 0 ? arrayLength : pageIndicatorsIfZeroCount);
         this._goToFirstItem();
         this.slides.forEach((_slide, index) => {
             if (index >= this.currentActiveSlidesStartIndex &&
-                index < this.currentActiveSlidesStartIndex + this.visibleSlidesCount) {
+                index < this.currentActiveSlidesStartIndex + this._visibleSlidesNumericCount) {
                 _slide.visibility = 'visible';
             }
             else {
@@ -869,7 +879,7 @@ class CarouselComponent {
     /** @hidden Initialize config for Carousel service */
     _initializeServiceConfig() {
         this._config.vertical = this.vertical;
-        this._config.elementsAtOnce = this.visibleSlidesCount;
+        this._config.elementsAtOnce = this._visibleSlidesNumericCount;
         this._config.gestureSupport = this.swipeEnabled;
         this._config.infinite = this.loop;
         this._config.transition = String(this.slideTransitionDuration) + 'ms';
@@ -920,7 +930,7 @@ class CarouselComponent {
         else {
             firstActiveSlideIndex = this.currentActiveSlidesStartIndex;
         }
-        for (let activeSlideIndex = 0; activeSlideIndex < this.visibleSlidesCount; activeSlideIndex++) {
+        for (let activeSlideIndex = 0; activeSlideIndex < this._visibleSlidesNumericCount; activeSlideIndex++) {
             const index = firstActiveSlideIndex + activeSlideIndex;
             const slide = this.slides.get(index);
             if (slide) {
@@ -936,7 +946,7 @@ class CarouselComponent {
     _manageSlideVisibility(firstActiveSlideIndex) {
         setTimeout(() => {
             this.slides.forEach((_slides, index) => {
-                if (index >= firstActiveSlideIndex && index < firstActiveSlideIndex + this.visibleSlidesCount) {
+                if (index >= firstActiveSlideIndex && index < firstActiveSlideIndex + this._visibleSlidesNumericCount) {
                     if (_slides.visibility === 'hidden') {
                         _slides.visibility = 'visible';
                     }
@@ -989,7 +999,7 @@ class CarouselComponent {
         }
     }
     /**
-     * @hidden Making slides visible when slides are dragged. Otherwise it looses the effect.
+     * @hidden Making slides visible when slides are dragged. Otherwise, it looses the effect.
      */
     _onSlideDrag(isDragging) {
         if (isDragging) {
@@ -1012,11 +1022,52 @@ class CarouselComponent {
      */
     _resizeContentContainer() {
         merge(resizeObservable(this.slideContainer.nativeElement), resizeObservable(this.carouselContainer.nativeElement))
-            .pipe(debounceTime(30), takeUntil(this._onDestroy$))
+            .pipe(debounceTime(100), takeUntil(this._onDestroy$))
             .subscribe(() => {
-            const { width } = this.carouselContainer.nativeElement.getBoundingClientRect();
-            let maxSize = 0;
-            for (const slide of this.slides.toArray().slice(this.currentActiveSlidesStartIndex)) {
+            const { width, slides } = this._getFittingSlidesAndWidth();
+            if (this.visibleSlidesCount === 'auto') {
+                this._visibleSlidesNumericCount = slides;
+                const totalSlides = this.slides.length;
+                let needleSlideIndex = this.currentActiveSlidesStartIndex;
+                // If amount of slides insufficient to fill whole carousel, slide back a bit.
+                if (this.currentActiveSlidesStartIndex + slides > totalSlides) {
+                    needleSlideIndex =
+                        this.currentActiveSlidesStartIndex -
+                            (this.currentActiveSlidesStartIndex + slides - totalSlides);
+                }
+                const needleSlide = this.slides.get(needleSlideIndex);
+                this.currentActiveSlidesStartIndex = needleSlideIndex;
+                this._carouselService.active = needleSlide;
+                // Refresh carousel config and transition to the current slide.
+                this._initializeCarousel();
+                this._carouselService.goToItem(needleSlide);
+                this._notifySlideChange(SlideDirection.None);
+            }
+            if (this._slidesWrapperSize !== width) {
+                this._slidesWrapperSize = width;
+            }
+            this._changeDetectorRef.detectChanges();
+        });
+    }
+    /**
+     * @hidden
+     * Calculates how many slides can be shown within current carousel viewport.
+     * @returns Object containing fitting slides count and total width of those slides.
+     */
+    _getFittingSlidesAndWidth() {
+        if (!this.carouselContainer) {
+            return {
+                width: 0,
+                slides: 1
+            };
+        }
+        const { width } = this.carouselContainer.nativeElement.getBoundingClientRect();
+        let maxSize = 0;
+        let slidesCount = 0;
+        const carouselSlides = this.slides.toArray();
+        const previousSlides = carouselSlides.splice(0, this.currentActiveSlidesStartIndex);
+        const getSlides = (slides) => {
+            for (const slide of slides) {
                 const slideWidth = slide.getWidth();
                 if (!slideWidth) {
                     break;
@@ -1026,13 +1077,26 @@ class CarouselComponent {
                     break;
                 }
                 maxSize = newSize;
+                slidesCount++;
             }
-            if (this._slidesWrapperSize === maxSize) {
-                return;
-            }
-            this._slidesWrapperSize = maxSize;
-            this._changeDetectorRef.detectChanges();
-        });
+        };
+        getSlides(carouselSlides);
+        // If with of the rest of the slides is lesser than carouse's viewport, add previous slides to it.
+        if (maxSize < width) {
+            getSlides(previousSlides);
+        }
+        return {
+            width: maxSize,
+            slides: slidesCount
+        };
+    }
+    /** @hidden */
+    _getVisibleSlidesCount() {
+        if (this._visibleSlidesCount !== 'auto') {
+            return this._visibleSlidesCount;
+        }
+        const { slides } = this._getFittingSlidesAndWidth();
+        return slides;
     }
 }
 CarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: CarouselComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: CarouselService }, { token: i2.RtlService, optional: true }], target: i0.ɵɵFactoryTarget.Component });