diff --git a/autocomplete/autocomplete-item.ts b/autocomplete/autocomplete-item.ts new file mode 100644 index 0000000000..ffc00db932 --- /dev/null +++ b/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]; +} diff --git a/autocomplete/lib/autocomplete.ts b/autocomplete/lib/autocomplete.ts index b7a567726e..82a3f15188 100644 --- a/autocomplete/lib/autocomplete.ts +++ b/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`
+ @focusout=${this.handleFocusout} + @action=${this.handleAction}> ${this.renderTextField()} ${this.renderMenuSurface()}
`; } @@ -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; + } } diff --git a/autocomplete/lib/autocompleteitem/autocomplete-item.ts b/autocomplete/lib/autocompleteitem/autocomplete-item.ts new file mode 100644 index 0000000000..266be3b518 --- /dev/null +++ b/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'; +} diff --git a/autocomplete/lib/autocompleteitem/harness.ts b/autocomplete/lib/autocompleteitem/harness.ts new file mode 100644 index 0000000000..eba63e87e6 --- /dev/null +++ b/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 {}