feat(list): Added video web component to list

PiperOrigin-RevId: 461910693

list/lib/_list-item-theme.scss

@@ -13,6 +13,7 @@
 @use '@material/web/sass/resolvers';
 @use '@material/web/sass/theme';
 @use './image/list-item-image-theme';
+@use './video/list-item-video-theme';
 @use './tokens';
 
 $selectors: (
@@ -129,6 +130,16 @@ $light-theme: tokens.md-comp-list-values();
         map.get($theme, list-item-leading-image-shape),
     )
   );
+  @include list-item-video-theme.theme(
+    (
+      list-item-leading-video-height:
+        map.get($theme, list-item-leading-video-height),
+      list-item-leading-video-width:
+        map.get($theme, list-item-leading-video-width),
+      list-item-leading-video-shape:
+        map.get($theme, list-item-leading-video-shape),
+    )
+  );
 }
 
 @mixin _set-leading-icon-size($size) {

list/lib/_tokens.scss

@@ -39,9 +39,9 @@
     list-item-overline-tracking: null,
     list-item-overline-weight: null,
     list-item-leading-icon-size: 24px,
-    list-item-leading-video-shape: null,
-    list-item-leading-video-width: null,
-    list-item-leading-video-height: null,
+    list-item-leading-video-shape: 0px,
+    list-item-leading-video-width: 114px,
+    list-item-leading-video-height: 64px,
     list-item-leading-avatar-color: null,
     list-item-leading-avatar-shape: 9999px,
     list-item-leading-avatar-size: 40px,

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

@@ -0,0 +1,36 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use 'sass:map';
+@use '@material/web/sass/theme';
+@use '@material/web/sass/map-ext';
+@use '../tokens';
+
+$light-theme: map-ext.pick(
+  tokens.md-comp-list-values(),
+  (
+    list-item-leading-video-height,
+    list-item-leading-video-width,
+    list-item-leading-video-shape
+  )
+);
+
+$_custom-property-prefix: 'list-item-video';
+
+@mixin theme($theme) {
+  $theme: theme.validate-theme($light-theme, $theme);
+  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
+
+  @include theme.emit-theme-vars($theme);
+}
+
+@mixin theme-styles($theme) {
+  $theme: theme.validate-theme($light-theme, $theme);
+  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
+
+  height: map.get($theme, list-item-leading-video-height);
+  width: map.get($theme, list-item-leading-video-width);
+  border-radius: map.get($theme, list-item-leading-video-shape);
+}

list/lib/video/_list-item-video.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__video {
+    display: inline-flex;
+    object-fit: cover;
+  }
+}

list/lib/video/list-item-video-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-video';
+@use './list-item-video-theme';
+
+:host {
+  @include list-item-video.static-styles();
+
+  .md3-list-item__video {
+    @include list-item-video-theme.theme-styles(
+      list-item-video-theme.$light-theme
+    );
+  }
+}

list/lib/video/list-item-video.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {html, LitElement, TemplateResult} from 'lit';
+import {property} from 'lit/decorators';
+import {ifDefined} from 'lit/directives/if-defined';
+
+/** @soyCompatible */
+export class ListItemVideo extends LitElement {
+  @property({type: String, reflect: true}) media = 'video';
+  @property({type: String, reflect: true}) video = '';
+  @property({type: String, reflect: true}) altText?: string;
+
+  /** @soyTemplate */
+  override render(): TemplateResult {
+    return html`
+        <img src="${this.video}" alt="${ifDefined(this.altText)}"
+         class="md3-list-item__video" />
+      `;
+  }
+}

list/list-item-video.ts

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