feat: Add media slots to list item components.

PiperOrigin-RevId: 420336581

components/list/lib/list-item.ts

@@ -5,13 +5,103 @@
  */
 
 import {html, LitElement, TemplateResult} from 'lit';
+import {property, queryAssignedNodes} from 'lit/decorators';
+import {ClassInfo, classMap} from 'lit/directives/class-map';
 
 /** @soyCompatible */
 export class ListItem extends LitElement {
+  @property({type: String}) label = '';
+  @property({type: String}) supportingText = '';
+
+  @queryAssignedNodes('start', true)
+  protected startElement!: HTMLElement[]|null;
+
+  @queryAssignedNodes('end', true)
+  protected endElement!: HTMLElement[]|null;
+
+  get leadingIcon() {
+    return this.startElement?.find(
+               (el) => el.classList.contains('md3-list-icon')) ??
+        null;
+  }
+
+  get leadingAvatar() {
+    return this.startElement?.find(
+               (el) => el.classList.contains('md3-list-avatar')) ??
+        null;
+  }
+
+  get leadingThumbnail() {
+    return this.startElement?.find(
+               (el) => el.classList.contains('md3-list-thumbnail')) ??
+        null;
+  }
+
+  get leadingImage() {
+    return this.startElement?.find(
+               (el) => el.classList.contains('md3-list-image')) ??
+        null;
+  }
+
+  get leadingVideo() {
+    return this.startElement?.find(
+               (el) => el.classList.contains('md3-list-video')) ??
+        null;
+  }
+
+  get trailingIcon() {
+    return this.endElement?.find(
+               (el) => el.classList.contains('md3-list-icon')) ??
+        null;
+  }
+
   /** @soyTemplate */
   override render(): TemplateResult {
+    // TODO(b/182405623): restore whitespace
     return html`
-      <li>Item</li>
-    `;
+      <li
+          class="md3-list-item ${classMap(this.getRenderClasses())}"><!--
+        -->${this.renderStart()}<!--
+        -->${this.renderBody()}<!--
+        -->${this.renderEnd()}<!--
+      --></li>`;
+  }
+
+  /** @soyTemplate */
+  protected getRenderClasses(): ClassInfo {
+    return {
+      'md3-list-item--with-one-line': true,
+      'md3-list-item--with-leading-icon': !!this.leadingIcon,
+      'md3-list-item--with-leading-avatar': !!this.leadingAvatar,
+      'md3-list-item--with-leading-thumbnail': !!this.leadingThumbnail,
+      'md3-list-item--with-leading-image': !!this.leadingImage,
+      'md3-list-item--with-leading-video': !!this.leadingVideo,
+      'md3-list-item--with-trailing-icon': !!this.trailingIcon,
+    };
+  }
+
+  /** @soyTemplate */
+  protected renderStart(): TemplateResult {
+    return html`<div class="md3-list-item__start"><!--
+      --><slot name="start" @slotchange=${this.handleSlotChange}></slot><!--
+    --></div>`;
+  }
+
+  /** @soyTemplate */
+  protected renderBody(): TemplateResult {
+    return html`<div class="md3-list-item__body"><!--
+       --><span class="md3-list-item__label">${this.label}</span><!--
+    --></div>`;
+  }
+
+  /** @soyTemplate */
+  protected renderEnd(): TemplateResult {
+    return html`<div class="md3-list-item__end"><!--
+      --><slot name="end" @slotchange=${this.handleSlotChange}></slot><!--
+    --></div>`;
+  }
+
+  protected handleSlotChange() {
+    this.requestUpdate();
   }
 }