Merge pull request #2692 from exadel-inc/feat/esl-carousel-single-slide

feat(esl-carousel): add attribute to carousel if it has only one slide

src/modules/esl-carousel/core/esl-carousel.ts

@@ -60,6 +60,8 @@ export class ESLCarousel extends ESLBaseElement {
   @boolAttr({readonly: true}) public animating: boolean;
   /** true if carousel is empty */
   @boolAttr({readonly: true}) public empty: boolean;
+  /** true if carousel has only one item */
+  @boolAttr({readonly: true}) public singleSlide: boolean;
   /** true if carousel is incomplete (total slides count is less or equal to visible slides count) */
   @boolAttr({readonly: true}) public incomplete: boolean;
 
@@ -174,6 +176,7 @@ export class ESLCarousel extends ESLBaseElement {
 
   protected updateStateMarkers(): void {
     this.$$attr('empty', !this.size);
+    this.$$attr('single-slide', this.size === 1);
     this.$$attr('incomplete', this.size <= this.renderer.count);
 
     if (!this.$container) return;

src/modules/esl-carousel/renderers/esl-carousel.grid.renderer.ts

@@ -28,11 +28,12 @@ export class ESLGridCarouselRenderer extends ESLDefaultCarouselRenderer {
 
   /** Count of fake slides to fill the last "row" or incomplete carousel state */
   public get fakeSlidesCount(): number {
-    if (this.$carousel.$slides.length === 0) return 0;
-    if (this.$carousel.$slides.length < this.count) {
-      return this.count - this.$carousel.$slides.length;
+    const slidesLength = this.$carousel.$slides.length;
+    if (slidesLength === 0) return 0;
+    if (slidesLength < this.count) {
+      return this.count - slidesLength;
     }
-    return this.$carousel.$slides.length % this.ROWS;
+    return slidesLength % this.ROWS;
   }
 
   /**