feat: Slot controller (#1767)

Added a slot controller implementation that handles `slotchange` events inside the host render root.
It features typed slots, and the ability to query assigned nodes/elements similar to the Lit's `@queryAssigned<foo>` decorators.

Cleaned up a bunch of code around components which use the new controller, as well some dubious ARIA properties in the DOM of some of the components.

Author: rkaraivanov

src/components/carousel/carousel-indicator.ts

@@ -35,7 +35,7 @@ export default class IgcCarouselIndicatorComponent extends LitElement {
   });
 
   @consume({ context: carouselContext, subscribe: true })
-  private _carousel?: IgcCarouselComponent;
+  private readonly _carousel?: IgcCarouselComponent;
 
   protected get _labelFormat(): string {
     return this._carousel ? this._carousel.indicatorsLabelFormat : '';

src/components/carousel/carousel-slide.ts

@@ -6,11 +6,13 @@ import { addAnimationController } from '../../animations/player.js';
 import { carouselContext } from '../common/context.js';
 import { addInternalsController } from '../common/controllers/internals.js';
 import { registerComponent } from '../common/definitions/register.js';
-import { createCounter, formatString } from '../common/util.js';
+import { formatString } from '../common/util.js';
 import { animations } from './animations.js';
 import type IgcCarouselComponent from './carousel.js';
 import { styles } from './themes/carousel-slide.base.css.js';
 
+let nextId = 1;
+
 /**
  * A single content container within a set of containers used in the context of an `igc-carousel`.
  *
@@ -27,25 +29,23 @@ export default class IgcCarouselSlideComponent extends LitElement {
     registerComponent(IgcCarouselSlideComponent);
   }
 
-  private static readonly increment = createCounter();
-
   private readonly _internals = addInternalsController(this, {
     initialARIA: {
       role: 'tabpanel',
       ariaRoleDescription: 'slide',
     },
   });
 
-  private readonly _animationPlayer = addAnimationController(this);
+  private readonly _player = addAnimationController(this);
 
   @consume({ context: carouselContext, subscribe: true })
-  private _carousel?: IgcCarouselComponent;
+  private readonly _carousel?: IgcCarouselComponent;
 
-  protected get _index() {
+  protected get _index(): number {
     return this._carousel ? this._carousel.slides.indexOf(this) : 0;
   }
 
-  protected get _total() {
+  protected get _total(): number {
     return this._carousel ? this._carousel.slides.length : 0;
   }
 
@@ -59,7 +59,7 @@ export default class IgcCarouselSlideComponent extends LitElement {
     return animation;
   }
 
-  protected get _labelFormat() {
+  protected get _labelFormat(): string {
     return this._carousel ? this._carousel.slidesLabelFormat : '';
   }
 
@@ -81,21 +81,16 @@ export default class IgcCarouselSlideComponent extends LitElement {
   public async toggleAnimation(
     type: 'in' | 'out',
     direction: 'normal' | 'reverse' = 'normal'
-  ) {
+  ): Promise<boolean> {
     const animation = animations.get(this._animation)!.get(type)!;
 
-    const options: KeyframeAnimationOptions = {
-      duration: 320,
-      easing: EaseInOut.Quad,
-      direction,
-    };
-
-    const [_, event] = await Promise.all([
-      this._animationPlayer.stopAll(),
-      this._animationPlayer.play(animation(options)),
-    ]);
-
-    return event.type === 'finish';
+    return await this._player.playExclusive(
+      animation({
+        duration: 320,
+        easing: EaseInOut.Quad,
+        direction,
+      })
+    );
   }
 
   protected override willUpdate(): void {
@@ -104,15 +99,14 @@ export default class IgcCarouselSlideComponent extends LitElement {
     });
   }
 
+  /** @internal */
   public override connectedCallback(): void {
     super.connectedCallback();
-
-    this.id =
-      this.id || `igc-carousel-slide-${IgcCarouselSlideComponent.increment()}`;
+    this.id = this.id || `igc-carousel-slide-${nextId++}`;
   }
 
   protected override render() {
-    return html` <slot></slot> `;
+    return html`<slot></slot>`;
   }
 }