feat(esl-carousel): implement updated esl-carousel-relate-to plugin that follows specification and expected flow

Author: ala-n

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

@@ -7,9 +7,9 @@ import {ESLCarouselPlugin} from '../esl-carousel.plugin';
 import {ESLCarouselSlideEvent} from '../../core/esl-carousel.events';
 
 export interface ESLCarouselRelateToConfig {
-  /** Target carousel selector */
+  /** Target carousel selector. Set to '' or 'none' to disable */
   target: string;
-  /** Proactive mode to relate to the target immediately */
+  /** A proactive mode to relate to the target immediately */
   proactive: boolean;
 }
 
@@ -19,37 +19,52 @@ export interface ESLCarouselRelateToConfig {
 @ExportNs('Carousel.RelateTo')
 export class ESLCarouselRelateToMixin extends ESLCarouselPlugin<ESLCarouselRelateToConfig> {
   public static override is = 'esl-carousel-relate-to';
+  public static override DEFAULT_CONFIG: ESLCarouselRelateToConfig = {
+    target: 'none',
+    proactive: false
+  };
   public static override DEFAULT_CONFIG_KEY = 'target';
 
+  /** @returns events name to listen for carousel state changes */
   protected get event(): string {
     return [this.config.proactive ? ESLCarouselSlideEvent.CHANGE : null, ESLCarouselSlideEvent.AFTER].filter(Boolean).join(' ');
   }
 
   /** @returns ESLCarousel target to share state changes */
   @memoize()
   public get $target(): ESLCarousel | null {
-    const $target = ESLTraversingQuery.first(this.config.target);
-    return ($target instanceof ESLCarousel) ? $target : null;
+    const {target} = this.config;
+    if (!target || target === 'none') return null;
+    const $target = ESLTraversingQuery.first(target, this.$host);
+    // Prevent cyclic reference - target should not be the host itself
+    if (!($target instanceof ESLCarousel) || $target === this.$host) return null;
+    return $target;
   }
 
   protected override onInit(): void {
     if (!this.$target) return;
-    this.$target.goTo(this.$host.activeIndex, {activator: this}).catch(console.debug);
+    // Sync host carousel to target's current position
+    this.$host.goTo(this.$target.activeIndex, {activator: this}).catch(console.debug);
   }
 
   @listen({inherit: true})
   protected override onConfigChange(): void {
     // Listener event change is not handled by resubscribe automatically
     this.$$off(this._onSlideChange);
+    super.onConfigChange();
     memoize.clear(this, '$target');
     this.$$on(this._onSlideChange);
   }
 
-  /** Handles event that fires when the carousel slides state is changed. */
-  @listen({event: ($this: ESLCarouselRelateToMixin) => $this.event})
+  /** Handles event that fires when the target carousel slides state is changed. */
+  @listen({
+    event: ($this: ESLCarouselRelateToMixin) => $this.event,
+    target: ($this: ESLCarouselRelateToMixin) => $this.$target
+  })
   protected _onSlideChange(e: ESLCarouselSlideEvent): void {
     if (!this.$target || e.activator === this) return;
-    this.$target.goTo(e.indexAfter, {activator: this}).catch(console.debug);
+    // Make host carousel follow the target carousel
+    this.$host.goTo(e.indexAfter, {activator: this}).catch(console.debug);
   }
 }
 
@@ -58,3 +73,4 @@ declare global {
     RelateTo: typeof ESLCarouselRelateToMixin;
   }
 }
+