refactor(progress): Use SlotController

Author: rkaraivanov

src/components/progress/base.ts

@@ -1,15 +1,11 @@
 import { html, LitElement, nothing } from 'lit';
-import {
-  property,
-  query,
-  queryAssignedElements,
-  state,
-} from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import type { StyleInfo } from 'lit/directives/style-map.js';
 import { addInternalsController } from '../common/controllers/internals.js';
+import type { SlotController } from '../common/controllers/slot.js';
 import { watch } from '../common/decorators/watch.js';
 import { partMap } from '../common/part-map.js';
-import { asPercent, clamp, formatString, isEmpty } from '../common/util.js';
+import { asPercent, clamp, formatString } from '../common/util.js';
 import type { StyleVariant } from '../types.js';
 
 export abstract class IgcProgressBaseComponent extends LitElement {
@@ -21,8 +17,7 @@ export abstract class IgcProgressBaseComponent extends LitElement {
     },
   });
 
-  @queryAssignedElements()
-  protected _assignedElements!: HTMLElement[];
+  protected abstract _slots: SlotController<any>;
 
   @query('[part="base"]', true)
   protected _base!: HTMLElement;
@@ -97,14 +92,14 @@ export abstract class IgcProgressBaseComponent extends LitElement {
   public labelFormat!: string;
 
   @watch('indeterminate')
-  protected indeterminateChange() {
+  protected _indeterminateChange(): void {
     if (!this.indeterminate) {
       this._updateProgress();
     }
   }
 
   @watch('max')
-  protected maxChange() {
+  protected _maxChange(): void {
     this.max = Math.max(0, this.max);
     if (this.value > this.max) {
       this.value = this.max;
@@ -116,26 +111,22 @@ export abstract class IgcProgressBaseComponent extends LitElement {
   }
 
   @watch('value')
-  protected valueChange() {
+  protected _valueChange(): void {
     this.value = clamp(this.value, 0, this.max);
 
     if (!this.indeterminate) {
       this._updateProgress();
     }
   }
 
-  protected override createRenderRoot() {
-    const root = super.createRenderRoot();
-    root.addEventListener('slotchange', () => this.requestUpdate());
-    return root;
-  }
-
-  protected override updated() {
+  protected override updated(): void {
     this._updateARIA();
   }
 
-  private _updateARIA() {
-    const text = this.labelFormat ? this.renderLabelFormat() : `${this.value}%`;
+  private _updateARIA(): void {
+    const text = this.labelFormat
+      ? this._renderLabelFormat()
+      : `${this.value}%`;
 
     this._internals.setARIA({
       ariaValueMax: this.max.toString(),
@@ -144,7 +135,7 @@ export abstract class IgcProgressBaseComponent extends LitElement {
     });
   }
 
-  private _updateProgress() {
+  private _updateProgress(): void {
     const percentage = asPercent(this.value, Math.max(1, this.max));
     const fractionValue = Math.round((percentage % 1) * 100);
     this._hasFraction = fractionValue > 0;
@@ -157,29 +148,31 @@ export abstract class IgcProgressBaseComponent extends LitElement {
     };
   }
 
-  protected renderLabel() {
+  protected _renderLabel() {
     const parts = {
       label: true,
       value: true,
       fraction: this._hasFraction,
     };
 
     return this.labelFormat
-      ? html`<span part=${partMap(parts)}>${this.renderLabelFormat()}</span>`
+      ? html`<span part=${partMap(parts)}>${this._renderLabelFormat()}</span>`
       : html`<span part=${partMap({ ...parts, counter: true })}></span>`;
   }
 
-  protected renderLabelFormat() {
+  protected _renderLabelFormat(): string {
     return formatString(this.labelFormat, this.value, this.max);
   }
 
-  protected renderDefaultSlot() {
+  protected _renderDefaultSlot() {
     const hideDefaultLabel =
-      this.indeterminate || this.hideLabel || !isEmpty(this._assignedElements);
+      this.indeterminate ||
+      this.hideLabel ||
+      this._slots.hasAssignedElements('[default]');
 
     return html`
       <slot part="label"></slot>
-      ${hideDefaultLabel ? nothing : this.renderLabel()}
+      ${hideDefaultLabel ? nothing : this._renderLabel()}
     `;
   }
 }

src/components/progress/circular-gradient.ts

@@ -1,6 +1,5 @@
 import { LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
-
 import { registerComponent } from '../common/definitions/register.js';
 
 /**
@@ -16,7 +15,7 @@ export default class IgcCircularGradientComponent extends LitElement {
   public static readonly tagName = 'igc-circular-gradient';
 
   /* blazorSuppress */
-  public static register() {
+  public static register(): void {
     registerComponent(IgcCircularGradientComponent);
   }
 

src/components/progress/circular-progress.ts

@@ -1,16 +1,17 @@
 import { html, svg } from 'lit';
-import { queryAssignedElements } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { addThemingController } from '../../theming/theming-controller.js';
+import { addSlotController, setSlots } from '../common/controllers/slot.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { partMap } from '../common/part-map.js';
-import { createCounter, isEmpty } from '../common/util.js';
 import { IgcProgressBaseComponent } from './base.js';
 import IgcCircularGradientComponent from './circular-gradient.js';
 import { styles } from './themes/circular/circular.progress.base.css.js';
 import { styles as shared } from './themes/circular/shared/circular.progress.common.css.js';
 import { all } from './themes/circular/themes.js';
 
+let nextId = 1;
+
 /**
  * A circular progress indicator used to express unspecified wait time or display
  * the length of a process.
@@ -38,32 +39,34 @@ export default class IgcCircularProgressComponent extends IgcProgressBaseCompone
   public static readonly tagName = 'igc-circular-progress';
   public static override styles = [styles, shared];
 
-  private static readonly increment = createCounter();
-
   /* blazorSuppress */
-  public static register() {
+  public static register(): void {
     registerComponent(
       IgcCircularProgressComponent,
       IgcCircularGradientComponent
     );
   }
 
-  private _gradientId = `circular-progress-${IgcCircularProgressComponent.increment()}`;
-
-  @queryAssignedElements({ slot: 'gradient' })
-  private _assignedGradients!: IgcCircularGradientComponent[];
+  private readonly _gradientId = `circular-progress-${nextId++}`;
+  protected override readonly _slots = addSlotController(this, {
+    slots: setSlots('gradient'),
+  });
 
   constructor() {
     super();
     addThemingController(this, all);
   }
 
-  protected renderSvg() {
-    const gradients = !isEmpty(this._assignedGradients)
-      ? this._assignedGradients.map(
-          ({ offset, color, opacity }) =>
-            svg`<stop offset=${offset} stop-color=${color} stop-opacity=${opacity}/>`
-        )
+  protected _renderSvg() {
+    const gradients = this._slots.hasAssignedElements('gradient')
+      ? this._slots
+          .getAssignedElements<IgcCircularGradientComponent>('gradient', {
+            selector: IgcCircularGradientComponent.tagName,
+          })
+          .map(
+            ({ offset, color, opacity }) =>
+              svg`<stop offset=${offset} stop-color=${color} stop-opacity=${opacity}/>`
+          )
       : svg`
         <stop offset="0%" part="gradient_start" />
         <stop offset="100%" part="gradient_end" />
@@ -85,10 +88,10 @@ export default class IgcCircularProgressComponent extends IgcProgressBaseCompone
     return html`
       <div part="base" style=${styleMap(this._styleInfo)}>
         <svg part=${partMap({ svg: true, indeterminate: this.indeterminate })}>
-          ${this.renderSvg()}
+          ${this._renderSvg()}
         </svg>
         <slot name="gradient"></slot>
-        ${this.renderDefaultSlot()}
+        ${this._renderDefaultSlot()}
       </div>
     `;
   }

src/components/progress/linear-progress.ts

@@ -2,6 +2,7 @@ import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { addThemingController } from '../../theming/theming-controller.js';
+import { addSlotController, setSlots } from '../common/controllers/slot.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { partMap } from '../common/part-map.js';
 import type { LinearProgressLabelAlign } from '../types.js';
@@ -35,10 +36,14 @@ export default class IgcLinearProgressComponent extends IgcProgressBaseComponent
   public static override styles = [styles, shared];
 
   /* blazorSuppress */
-  public static register() {
+  public static register(): void {
     registerComponent(IgcLinearProgressComponent);
   }
 
+  protected override readonly _slots = addSlotController(this, {
+    slots: setSlots(),
+  });
+
   /**
    * Sets the striped look of the control.
    * @attr
@@ -72,7 +77,7 @@ export default class IgcLinearProgressComponent extends IgcProgressBaseComponent
           <div part=${partMap(parts)}></div>
           <div part=${partMap({ ...parts, secondary: true })}></div>
         </div>
-        ${this.renderDefaultSlot()}
+        ${this._renderDefaultSlot()}
       </div>
     `;
   }

src/components/slider/slider-label.ts

@@ -21,7 +21,7 @@ export default class IgcSliderLabelComponent extends LitElement {
   `;
 
   /* blazorSuppress */
-  public static register() {
+  public static register(): void {
     registerComponent(IgcSliderLabelComponent);
   }