mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +03:00
feat(list): Add support for fetching list items.
PiperOrigin-RevId: 463122235
This commit is contained in:
parent
07aaa8a763
commit
4b79baa980
@ -5,15 +5,27 @@
|
||||
*/
|
||||
|
||||
import {ARIARole} from '@material/web/types/aria';
|
||||
import {html, LitElement, TemplateResult} from 'lit';
|
||||
import {html, LitElement, PropertyValues, TemplateResult} from 'lit';
|
||||
import {queryAssignedElements} from 'lit/decorators';
|
||||
|
||||
import {ListItemInteractionEvent} from './listitem/constants';
|
||||
import {ListItem} from './listitem/list-item';
|
||||
|
||||
/** @soyCompatible */
|
||||
export class List extends LitElement {
|
||||
static override shadowRootOptions:
|
||||
ShadowRootInit = {mode: 'open', delegatesFocus: true};
|
||||
|
||||
items: ListItem[] = [];
|
||||
|
||||
@queryAssignedElements() protected assignedElements!: HTMLElement[]|null;
|
||||
|
||||
override firstUpdated(changedProperties: PropertyValues) {
|
||||
super.firstUpdated(changedProperties);
|
||||
|
||||
this.updateItems();
|
||||
}
|
||||
|
||||
/** @soyTemplate */
|
||||
protected getAriaRole(): ARIARole {
|
||||
return 'list';
|
||||
@ -31,10 +43,24 @@ export class List extends LitElement {
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
handleItemInteraction(event: ListItemInteractionEvent) {
|
||||
if (event.detail.state.isSelected) {
|
||||
// TODO: manage selection state.
|
||||
}
|
||||
}
|
||||
|
||||
/** Updates `this.items` based on slot elements in the DOM. */
|
||||
protected updateItems() {
|
||||
const elements = this.assignedElements || [];
|
||||
this.items = elements.filter(this.isListItem, this);
|
||||
}
|
||||
|
||||
protected getListItemTagName() {
|
||||
return 'md-list-item';
|
||||
}
|
||||
|
||||
/** @return Whether the given element is an <md-list-item> element. */
|
||||
private isListItem(element: Element): element is ListItem {
|
||||
return element.tagName.toLowerCase() === this.getListItemTagName();
|
||||
}
|
||||
}
|
||||
|
32
list/list_test.ts
Normal file
32
list/list_test.ts
Normal file
@ -0,0 +1,32 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2022 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import './list';
|
||||
import './list-item';
|
||||
|
||||
import {Environment} from '@material/web/testing/environment';
|
||||
import {html} from 'lit';
|
||||
|
||||
import {MdList} from './list';
|
||||
|
||||
const LIST_TEMPLATE = html`
|
||||
<md-list>
|
||||
<md-list-item>One</md-list-item>
|
||||
<md-list-item>Two</md-list-item>
|
||||
<md-list-item>Three</md-list-item>
|
||||
</md-list>
|
||||
`;
|
||||
|
||||
describe('list tests', () => {
|
||||
const env = new Environment();
|
||||
|
||||
it('`items` property returns correct items', async () => {
|
||||
const element = env.render(LIST_TEMPLATE).querySelector('md-list')!;
|
||||
await env.waitForStability();
|
||||
|
||||
expect(element.items.length).toBe(3);
|
||||
});
|
||||
});
|
Loading…
Reference in New Issue
Block a user