feat(autocomplete): Create autocomplete item and connect action to fi…

…ll value

PiperOrigin-RevId: 471072998

autocomplete/autocomplete-item.ts

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

autocomplete/lib/autocomplete.ts

@@ -12,6 +12,8 @@ import {html as staticHtml, StaticValue} from 'lit/static-html.js';
 import {MenuSurface} from '../../menusurface/lib/menu-surface.js';
 import {TextField} from '../../textfield/lib/text-field.js';
 
+import {AutocompleteItem} from './autocompleteitem/autocomplete-item.js';
+
 /** @soyCompatible */
 export abstract class Autocomplete extends LitElement {
   static override shadowRootOptions:
@@ -47,7 +49,8 @@ export abstract class Autocomplete extends LitElement {
   override render(): TemplateResult {
     return html`<div class="md3-autocomplete"
             @click=${this.handleClick}
-            @focusout=${this.handleFocusout}>
+            @focusout=${this.handleFocusout}
+            @action=${this.handleAction}>
             ${this.renderTextField()}
             ${this.renderMenuSurface()}</div>`;
   }
@@ -124,4 +127,9 @@ export abstract class Autocomplete extends LitElement {
     }
     this.close();
   }
+
+  handleAction(event: CustomEvent<{item: AutocompleteItem}>) {
+    const detail = event.detail;
+    this.value = detail.item.headline;
+  }
 }

autocomplete/lib/autocompleteitem/autocomplete-item.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {ListItem} from '@material/web/list/lib/listitem/list-item.js';
+import {ARIARole} from '@material/web/types/aria.js';
+
+/** Base class for autocomplete item component. */
+export class AutocompleteItem extends ListItem {
+  override role: ARIARole = 'option';
+}

autocomplete/lib/autocompleteitem/harness.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {ListItemHarness} from '@material/web/list/lib/listitem/harness.js';
+
+/**
+ * Test harness for autocomplete item.
+ */
+export class AutocompleteItemHarness extends ListItemHarness {}