refactor(nav-drawer): Use SlotController and code clean-up

Author: rkaraivanov

src/components/nav-drawer/nav-drawer-item.ts

@@ -1,12 +1,7 @@
 import { html, LitElement } from 'lit';
-import {
-  property,
-  queryAssignedElements,
-  queryAssignedNodes,
-  state,
-} from 'lit/decorators.js';
-
+import { property, state } from 'lit/decorators.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 { styles } from './themes/item.base.css.js';
@@ -30,10 +25,18 @@ export default class IgcNavDrawerItemComponent extends LitElement {
   public static override styles = [styles, shared];
 
   /* blazorSuppress */
-  public static register() {
+  public static register(): void {
     registerComponent(IgcNavDrawerItemComponent);
   }
 
+  private readonly _slots = addSlotController(this, {
+    slots: setSlots('content', 'icon'),
+    onChange: this._handleSlotChange,
+  });
+
+  @state()
+  private _hasContent = true;
+
   /**
    * Determines whether the drawer is disabled.
    * @attr
@@ -48,33 +51,21 @@ export default class IgcNavDrawerItemComponent extends LitElement {
   @property({ type: Boolean, reflect: true })
   public active = false;
 
-  @state()
-  private _textLength!: number;
-
-  @queryAssignedElements({ slot: 'content' })
-  private _text!: Array<HTMLElement>;
-
-  @queryAssignedNodes({ slot: 'icon', flatten: true })
-  protected navdrawerIcon!: Array<Node>;
-
   constructor() {
     super();
     addThemingController(this, all);
   }
 
-  protected override createRenderRoot() {
-    const root = super.createRenderRoot();
-    root.addEventListener('slotchange', () => {
-      this._textLength = this._text.length;
-    });
-
-    return root;
+  protected _handleSlotChange(): void {
+    this._hasContent = this._slots.hasAssignedElements('content');
   }
 
   protected override render() {
+    const hasNoIcon = !this._slots.hasAssignedNodes('icon', true);
+
     return html`
-      <div part=${partMap({ base: true, mini: this._textLength < 1 })}>
-        <span part="icon" .hidden="${this.navdrawerIcon.length === 0}">
+      <div part=${partMap({ base: true, mini: !this._hasContent })}>
+        <span part="icon" ?hidden=${hasNoIcon}>
           <slot name="icon"></slot>
         </span>
         <span part="content">

src/components/nav-drawer/nav-drawer.ts

@@ -1,10 +1,9 @@
 import { html, LitElement } from 'lit';
-import { property, queryAssignedElements } from 'lit/decorators.js';
-
+import { property } from 'lit/decorators.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 { isEmpty } from '../common/util.js';
 import type { NavDrawerPosition } from '../types.js';
 import IgcNavDrawerHeaderItemComponent from './nav-drawer-header-item.js';
 import IgcNavDrawerItemComponent from './nav-drawer-item.js';
@@ -30,16 +29,17 @@ export default class IgcNavDrawerComponent extends LitElement {
   public static override styles = [styles, shared];
 
   /* blazorSuppress */
-  public static register() {
+  public static register(): void {
     registerComponent(
       IgcNavDrawerComponent,
       IgcNavDrawerHeaderItemComponent,
       IgcNavDrawerItemComponent
     );
   }
 
-  @queryAssignedElements({ slot: 'mini' })
-  private _miniSlotElements!: Array<HTMLElement>;
+  private readonly _slots = addSlotController(this, {
+    slots: setSlots('mini'),
+  });
 
   /**
    * The position of the drawer.
@@ -60,12 +60,6 @@ export default class IgcNavDrawerComponent extends LitElement {
     addThemingController(this, all);
   }
 
-  protected override createRenderRoot() {
-    const root = super.createRenderRoot();
-    root.addEventListener('slotchange', () => this.requestUpdate());
-    return root;
-  }
-
   private _waitTransitions() {
     return new Promise<Event>((resolve) => {
       this.renderRoot.addEventListener('transitionend', resolve, {
@@ -114,7 +108,10 @@ export default class IgcNavDrawerComponent extends LitElement {
       </div>
 
       <div
-        part=${partMap({ mini: true, hidden: isEmpty(this._miniSlotElements) })}
+        part=${partMap({
+          mini: true,
+          hidden: !this._slots.hasAssignedElements('mini'),
+        })}
       >
         <slot name="mini"></slot>
       </div>