feat(esl-carousel): add centered renderer

Co-authored-by: ala'n (Alexey Stsefanovich) <[email protected]>

src/modules/esl-carousel/core.ts

@@ -26,3 +26,4 @@ export * from './plugin/wheel/esl-carousel.wheel.mixin';
 import './renderers/esl-carousel.none.renderer';
 import './renderers/esl-carousel.default.renderer';
 import './renderers/esl-carousel.grid.renderer';
+import './renderers/esl-carousel.centered.renderer';

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

@@ -0,0 +1,37 @@
+import {ESLCarouselRenderer} from '../core/esl-carousel.renderer';
+import {ESLDefaultCarouselRenderer} from './esl-carousel.default.renderer';
+import {normalize} from '../core/nav/esl-carousel.nav.utils';
+
+@ESLCarouselRenderer.register
+export class ESLCenteredCarouselRenderer extends ESLDefaultCarouselRenderer {
+  public static override is = 'centered';
+  public static override classes: string[] = ['esl-carousel-centered-renderer', 'esl-carousel-default-renderer'];
+
+  /** @returns size of all active slides */
+  public get activeSlidesSize(): number {
+    let width = (this.count - 1) * this.gap;
+    for (let i = 0; i < this.count; i++) {
+      const position = normalize(i + this.currentIndex, this.size);
+      const $slide = this.$slides[position];
+      width += this.vertical ? $slide.offsetHeight : $slide.offsetWidth;
+    }
+    return width;
+  }
+
+  /** @returns carousel area size */
+  public get carouselSize(): number {
+    return this.vertical ? this.$carousel.clientHeight : this.$carousel.clientWidth;
+  }
+
+  /** @returns carousel padding value */
+  public get carouselPadding(): number {
+    const carouselStyles = getComputedStyle(this.$carousel);
+    return parseFloat(carouselStyles[this.vertical ? 'paddingTop' : 'paddingLeft']);
+  }
+
+  /** @returns slide offset by the slide index */
+  protected override getOffset(index: number): number {
+    const offset = super.getOffset(index);
+    return offset - (this.carouselSize - this.activeSlidesSize) / 2 + this.carouselPadding;
+  }
+}