feat(list): Added avatar web component to list

PiperOrigin-RevId: 461805434

list/lib/_list-item-theme.scss

@@ -52,8 +52,8 @@ $light-theme: (
   list-item-leading-video-width: null,
   list-item-leading-video-height: null,
   list-item-leading-avatar-color: null,
-  list-item-leading-avatar-shape: null,
-  list-item-leading-avatar-size: null,
+  list-item-leading-avatar-shape: 9999px,
+  list-item-leading-avatar-size: 40px,
   list-item-leading-avatar-label-color: null,
   list-item-leading-avatar-label-font: null,
   list-item-leading-avatar-label-line-height: null,

list/lib/_list-item.scss

@@ -23,10 +23,6 @@
     padding-inline-start: 16px;
   }
 
-  .md3-list-item--with-leading-avatar {
-    @include avatar-item-root;
-  }
-
   .md3-list-item--with-leading-thumbnail {
     @include thumbnail-item-root;
   }
@@ -96,12 +92,6 @@
   }
 }
 
-@mixin avatar-item-root() {
-  .md3-list-item__start {
-    padding-inline-start: 16px;
-  }
-}
-
 @mixin thumbnail-item-root() {
   .md3-list-item__start {
     padding-inline-start: 16px;

list/lib/avatar/_list-item-avatar-theme.scss

@@ -0,0 +1,30 @@
+@use 'sass:map';
+@use '@material/web/sass/theme';
+@use '@material/web/sass/map-ext';
+@use '../list-item-theme';
+
+$light-theme: map-ext.pick(
+  list-item-theme.$light-theme,
+  (
+    list-item-leading-avatar-color,
+    list-item-leading-avatar-shape,
+    list-item-leading-avatar-size
+  )
+);
+
+@mixin theme-styles($theme) {
+  $theme: theme.validate-theme($light-theme, $theme);
+  $theme: theme.create-theme-vars($theme, list);
+
+  @include _shape(map.get($theme, list-item-leading-avatar-shape));
+  @include _size(map.get($theme, list-item-leading-avatar-size));
+}
+
+@mixin _shape($shape) {
+  border-radius: $shape;
+}
+
+@mixin _size($size) {
+  height: $size;
+  width: $size;
+}

list/lib/avatar/_list-item-avatar.scss

@@ -0,0 +1,14 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@mixin static-styles() {
+  .md3-list-item__avatar {
+    display: inline-flex;
+    margin-inline-start: 16px;
+  }
+}

list/lib/avatar/list-item-avatar-styles.scss

@@ -0,0 +1,20 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@use './list-item-avatar';
+@use './list-item-avatar-theme';
+
+:host {
+  @include list-item-avatar.static-styles();
+
+  .md3-list-item__avatar {
+    @include list-item-avatar-theme.theme-styles(
+      list-item-avatar-theme.$light-theme
+    );
+  }
+}

list/lib/avatar/list-item-avatar.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {html, LitElement, TemplateResult} from 'lit';
+import {property} from 'lit/decorators';
+
+/** @soyCompatible */
+export class ListItemAvatar extends LitElement {
+  @property({type: String, reflect: true}) avatar = '';
+  @property({type: String, reflect: true}) altText = '';
+
+  /** @soyTemplate */
+  override render(): TemplateResult {
+    return html`
+       <img src="${this.avatar}" alt="${this.altText}"
+        class="md3-list-item__avatar" />
+     `;
+  }
+}

list/list-item-avatar.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {customElement} from 'lit/decorators';
+
+import {ListItemAvatar} from './lib/avatar/list-item-avatar';
+import {styles} from './lib/avatar/list-item-avatar-styles.css';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'md-list-item-avatar': MdListItemAvatar;
+  }
+}
+
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+@customElement('md-list-item-avatar')
+export class MdListItemAvatar extends ListItemAvatar {
+  static override styles = [styles];
+}