chore: update to support toggling a slotted switch element

src/dev/pages/list/list.ejs

@@ -455,6 +455,28 @@
       </forge-list>
     </div>
   </div>
+
+
+  <!-- List with Trailing Switch -->
+  <div>
+    <h3 class="forge-typography--subtitle">List with Trailing Switch</h3>
+    <div class="list-demo">
+      <forge-list>
+        <forge-list-item>
+          List Item
+          <forge-switch slot="trailing"></forge-switch>
+        </forge-list-item>
+        <forge-list-item>
+          List Item
+          <forge-switch slot="trailing"></forge-switch>
+        </forge-list-item>
+        <forge-list-item>
+          List Item
+          <forge-switch slot="trailing"></forge-switch>
+        </forge-list-item>
+      </forge-list>
+    </div>
+  </div>
 
   <!-- List with multiple Checkboxes (requires use of forge-ignore attribute) -->
   <div>

src/lib/list/list-item/list-item-adapter.ts

@@ -7,6 +7,7 @@ import { IListComponent } from '../list/list';
 import { ListComponentItemRole, LIST_CONSTANTS } from '../list/list-constants';
 import { IListItemComponent } from './list-item';
 import { LIST_ITEM_CONSTANTS } from './list-item-constants';
+import { ISwitchComponent } from '../../switch';
 
 export interface IListItemAdapter extends IBaseAdapter<IListItemComponent> {
   initialize(): void;
@@ -113,7 +114,7 @@ export class ListItemAdapter extends BaseAdapter<IListItemComponent> implements
   }
 
   /**
-   * Attempts to toggle a checkbox or radio button within the list item if it can find one.
+   * Attempts to toggle a checkbox radio button, or switch within the list item if it can find one.
    */
   public tryToggleSelectionControl(value?: boolean): void {
     const checkable = this._component.querySelector(LIST_ITEM_CONSTANTS.selectors.CHECKBOX_RADIO_SELECTOR) as HTMLInputElement;
@@ -128,6 +129,23 @@ export class ListItemAdapter extends BaseAdapter<IListItemComponent> implements
       if (!force || currentState !== value) {
         checkable.dispatchEvent(new Event('change', { bubbles: true }));
       }
+    } else {
+      // Special case handling for the Forge switch element since it doesn't have a checked property
+      const switchEl = this._component.querySelector(LIST_ITEM_CONSTANTS.selectors.SWITCH_SELECTOR) as ISwitchComponent;
+      if (!switchEl) {
+        return;
+      }
+
+      const force = typeof value === 'boolean';
+      const currentState = switchEl.on;
+
+      // Check if we are just toggling or forcing to a specific checked state
+      switchEl.on = force ? value as boolean : !switchEl.on;
+
+      // TODO: This seems weird... Should we be dispatching events on slotted elements when changes are made programmatically?
+      if (!force || currentState !== value) {
+        switchEl.dispatchEvent(new CustomEvent('forge-switch-change', { bubbles: true, detail: switchEl.on }));
+      }
     }
   }
 

src/lib/list/list-item/list-item-constants.ts

@@ -31,6 +31,7 @@ const classes = {
 const selectors = {
   ROOT: `.${classes.ROOT}`,
   CHECKBOX_RADIO_SELECTOR: 'input[type=checkbox]:not(:disabled):not([forge-ignore]),input[type=radio]:not(:disabled):not([forge-ignore])',
+  SWITCH_SELECTOR: 'forge-switch:not([disabled]):not([forge-ignore])',
   IGNORE: '[forge-ignore],[data-forge-ignore]'
 };