feat(list): Add support for fetching list items.

PiperOrigin-RevId: 463122235

list/lib/list.ts

@@ -5,15 +5,27 @@
  */
 
 import {ARIARole} from '@material/web/types/aria';
-import {html, LitElement, TemplateResult} from 'lit';
+import {html, LitElement, PropertyValues, TemplateResult} from 'lit';
+import {queryAssignedElements} from 'lit/decorators';
 
 import {ListItemInteractionEvent} from './listitem/constants';
+import {ListItem} from './listitem/list-item';
 
 /** @soyCompatible */
 export class List extends LitElement {
   static override shadowRootOptions:
       ShadowRootInit = {mode: 'open', delegatesFocus: true};
 
+  items: ListItem[] = [];
+
+  @queryAssignedElements() protected assignedElements!: HTMLElement[]|null;
+
+  override firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+
+    this.updateItems();
+  }
+
   /** @soyTemplate */
   protected getAriaRole(): ARIARole {
     return 'list';
@@ -31,10 +43,24 @@ export class List extends LitElement {
     `;
   }
 
-
   handleItemInteraction(event: ListItemInteractionEvent) {
     if (event.detail.state.isSelected) {
       // TODO: manage selection state.
     }
   }
+
+  /** Updates `this.items` based on slot elements in the DOM. */
+  protected updateItems() {
+    const elements = this.assignedElements || [];
+    this.items = elements.filter(this.isListItem, this);
+  }
+
+  protected getListItemTagName() {
+    return 'md-list-item';
+  }
+
+  /** @return Whether the given element is an <md-list-item> element. */
+  private isListItem(element: Element): element is ListItem {
+    return element.tagName.toLowerCase() === this.getListItemTagName();
+  }
 }

list/list_test.ts

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import './list';
+import './list-item';
+
+import {Environment} from '@material/web/testing/environment';
+import {html} from 'lit';
+
+import {MdList} from './list';
+
+const LIST_TEMPLATE = html`
+  <md-list>
+    <md-list-item>One</md-list-item>
+    <md-list-item>Two</md-list-item>
+    <md-list-item>Three</md-list-item>
+  </md-list>
+`;
+
+describe('list tests', () => {
+  const env = new Environment();
+
+  it('`items` property returns correct items', async () => {
+    const element = env.render(LIST_TEMPLATE).querySelector('md-list')!;
+    await env.waitForStability();
+
+    expect(element.items.length).toBe(3);
+  });
+});