style(esl-carousel): fix points found during review

Co-authored-by: Dmitry Shovchko <dshovchko@exadel.com>

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

@@ -21,6 +21,7 @@ export abstract class ESLCarouselPlugin extends ESLMixinElement {
     }
   }
 
+  /** Register mixin-plugin in ESLMixinRegistry */
   public static override register(): void {
     ESLCarousel.registered.then(() => super.register());
   }

src/modules/esl-carousel/plugin/nav/esl-carousel.nav.dots.less

@@ -15,7 +15,7 @@
     vertical-align: middle;
     background: rgba(118, 118, 118, 0.5);
     border: none;
-    border-radius: 24px;
+    border-radius: 100%;
     cursor: pointer;
   }
 

src/modules/esl-carousel/plugin/relation/esl-carousel.relation.mixin.ts

@@ -7,7 +7,6 @@ import {ESLCarousel} from '../../core/esl-carousel';
 import {ESLCarouselPlugin} from '../esl-carousel.plugin';
 import {ESLCarouselSlideEvent} from '../../core/esl-carousel.events';
 
-
 /**
  * Slide Carousel Link plugin mixin to bind carousel positions
  */
@@ -41,12 +40,10 @@ export class ESLCarouselRelateToMixin extends ESLCarouselPlugin {
   /** Handles event that fires when the carousel slides state is changed. */
   @listen({event: ($this: ESLCarouselRelateToMixin) => $this.event})
   protected _onSlideChange(e: ESLCarouselSlideEvent): void {
-    if (!this.$target) return;
-    if (e.activator !== this) {
-      this.$target.goTo(this.$host.activeIndex, {
-        activator: this
-      });
-    }
+    if (!this.$target || e.activator === this) return;
+    this.$target.goTo(this.$host.activeIndex, {
+      activator: this
+    });
   }
 }
 

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

@@ -42,26 +42,25 @@ export class ESLDefaultCarouselRenderer extends ESLCarouselRenderer {
    * Clear animation.
    */
   public override onUnbind(): void {
-    this.$slides.forEach((el) => {
-      el.toggleAttribute('visible', false);
-      el.style.removeProperty('order');
-    });
+    this.$slides.forEach((el) => el.style.removeProperty('order'));
     this.$area.style.removeProperty('transform');
     this.$area.style.removeProperty(ESLDefaultCarouselRenderer.SIZE_PROP);
-    this.$carousel.toggleAttribute('animating', false);
+    this.$carousel.$$attr('animating', false);
+    this.$carousel.$$attr('active', false);
   }
 
-  /** Get slide offset by the slide index */
+  /** @returns slide offset by the slide index */
   protected getOffset(index: number): number {
     const slide = this.$slides[index];
     if (!slide) return 0;
     return this.vertical ? slide.offsetTop : slide.offsetLeft;
   }
   /** Sets scene offset */
   protected setTransformOffset(offset: number): void {
-    this.$area.style.transform = this.vertical ? `translate3d(0px, ${offset}px, 0px)` : `translate3d(${offset}px, 0px, 0px)`;
+    this.$area.style.transform = `translate3d(${this.vertical ? `0px, ${offset}px` : `${offset}px, 0px`}, 0px)`;
   }
 
+  /** @returns current slide area's transform offset */
   protected getTransformOffset(): number {
     // computed value is matrix(a, b, c, d, tx, ty)
     const transform = getComputedStyle(this.$area).transform;
@@ -73,7 +72,7 @@ export class ESLDefaultCarouselRenderer extends ESLCarouselRenderer {
   /** Pre-processing animation action. */
   public override async onBeforeAnimate(): Promise<void> {
     if (this.$carousel.hasAttribute('animating')) throw new Error('[ESL] Carousel: already animating');
-    this.$carousel.toggleAttribute('active', true);
+    this.$carousel.$$attr('active', true);
   }
 
   /** Processes animation. */
@@ -90,10 +89,10 @@ export class ESLDefaultCarouselRenderer extends ESLCarouselRenderer {
   /** Post-processing animation action. */
   public override async onAfterAnimate(): Promise<void> {
     this.setTransformOffset(-this.getOffset(this.currentIndex));
-    this.$carousel.toggleAttribute('active', false);
+    this.$carousel.$$attr('active', false);
   }
 
-  /** Pre-processing the transition animation of one slide. */
+  /** Makes pre-processing the transition animation of one slide. */
   protected async onBeforeStepAnimate(direction: ESLCarouselDirection): Promise<void> {
     this.reorder(this.currentIndex, direction === 'prev');
 
@@ -103,27 +102,28 @@ export class ESLDefaultCarouselRenderer extends ESLCarouselRenderer {
     this.setTransformOffset(offsetFrom);
     const offsetTo = -this.getOffset(offsetIndex);
 
-    this.$carousel.toggleAttribute('animating', true);
+    this.$carousel.$$attr('animating', true);
     this.setTransformOffset(offsetTo);
 
     if (offsetTo === offsetFrom) return;
     // TODO: still not catches cases with no animation (
     await promisifyTransition(this.$area, 'transform');
   }
 
-  /** Post-processing the transition animation of one slide. */
+  /** Makes post-processing the transition animation of one slide. */
   protected async onAfterStepAnimate(direction: ESLCarouselDirection): Promise<void> {
     this.currentIndex = direction === 'next' ? this.currentIndex + 1 : this.currentIndex - 1;
     this.currentIndex = normalizeIndex(this.currentIndex, this.size);
 
     this.reorder(this.currentIndex);
 
     this.setTransformOffset(-this.getOffset(this.currentIndex));
-    this.$carousel.toggleAttribute('animating', false);
+    this.$carousel.$$attr('animating', false);
     +this.$carousel.offsetLeft;
   }
 
   protected _checkNonLoop(offset: number): boolean {
+    // TODO: get rid of this method by revisiting methods below
     if (this.loop) return true;
 
     const sign = offset < 0 ? 1 : -1;
@@ -173,19 +173,19 @@ export class ESLDefaultCarouselRenderer extends ESLCarouselRenderer {
       this.currentIndex = boundIndex(nextIndex, this.size - this.count);
     }
 
-    this.$carousel.toggleAttribute('animating', true);
+    this.$carousel.$$attr('animating', true);
     const stageOffset = -this.getOffset(this.currentIndex);
 
     this.setTransformOffset(stageOffset);
     if (stageOffset !== this.getTransformOffset()) {
       await promisifyTransition(this.$area, 'transform');
     }
 
-    this.$carousel.toggleAttribute('animating', false);
+    this.$carousel.$$attr('animating', false);
     this.reorder(this.currentIndex);
     this.setTransformOffset(-this.getOffset(this.currentIndex));
     this.setActive(this.currentIndex, {direction: sign > 0 ? 'next' : 'prev'});
-    this.$carousel.toggleAttribute('active', false);
+    this.$carousel.$$attr('active', false);
   }
 
   /** Sets order style property for slides starting at index */