@material/web 1.0.0-pre.0 → 1.0.0-pre.2

package/list/lib/list.d.ts

@@ -3,44 +3,115 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import '../../elevation/elevation.js';
-import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import { LitElement, TemplateResult } from 'lit';
 import { ClassInfo } from 'lit/directives/class-map.js';
 import { ARIARole } from '../../types/aria.js';
 import { ListItem } from './listitem/list-item.js';
-/** @soyCompatible */
 export declare class List extends LitElement {
     static shadowRootOptions: ShadowRootInit;
     ariaLabel: string;
     ariaActivedescendant: string;
     role: ARIARole;
-    listId: string;
+    /**
+     * The tabindex of the underlying list.
+     */
     listTabIndex: number;
-    items: ListItem[];
-    activeListItem: ListItem | null;
     listRoot: HTMLElement;
-    listItemTagName: string;
-    protected assignedElements: HTMLElement[] | null;
-    firstUpdated(changedProperties: PropertyValues): void;
-    /** @soyTemplate */
+    /**
+     * An array of activatable and disableable list items. Queries every assigned
+     * element that has the `md-list-item` attribute.
+     *
+     * _NOTE:_ This is a shallow, flattened query via
+     * `HTMLSlotElement.queryAssignedElements` and thus will _only_ include direct
+     * children / directly slotted elements.
+     */
+    items: ListItem[];
     render(): TemplateResult;
-    /** @soyTemplate */
-    protected getRenderClasses(): ClassInfo;
+    /**
+     * Renders the main list element.
+     */
+    protected renderList(): TemplateResult<1>;
+    /**
+     * The classes to be applied to the underlying list.
+     */
+    protected getListClasses(): ClassInfo;
+    /**
+     * The content to be slotted into the list.
+     */
+    protected renderContent(): TemplateResult<1>;
+    /**
+     * Handles keyboard navigation in the list.
+     *
+     * @param event {KeyboardEvent} The keyboard event that triggers this handler.
+     */
     handleKeydown(event: KeyboardEvent): void;
-    protected activateListItem(item: ListItem): void;
-    protected deactivateListItem(item: ListItem): void;
-    protected isListItemActive(item: ListItem): boolean;
-    protected handleAction(event: CustomEvent): void;
-    activateFirstItem(): void;
-    activateLastItem(): void;
-    resetActiveListItem(): void;
-    focusListRoot(): void;
-    /** Updates `this.items` based on slot elements in the DOM. */
-    protected updateItems(): void;
-    /** @return Whether the given element is a list item element. */
-    private isListItem;
-    private getFirstItem;
-    private getLastItem;
-    private getPrevItem;
-    private getNextItem;
+    /**
+     * Activates the first non-disabled item of a given array of items.
+     *
+     * @param items {Array<ListItem>} The items from which to activate the
+     * first item.
+     */
+    static activateFirstItem<T extends ListItem>(items: T[]): void;
+    /**
+     * Activates the last non-disabled item of a given array of items.
+     *
+     * @param items {Array<ListItem>} The items from which to activate the
+     * last item.
+     */
+    static activateLastItem<T extends ListItem>(items: T[]): void;
+    /**
+     * Deactivates the currently active item of a given array of items.
+     *
+     * @param items {Array<ListItem>} The items from which to deactivate the
+     * active item.
+     * @returns A record of the deleselcted activated item including the item and
+     * the index of the item or `null` if none are deactivated.
+     */
+    static deactivateActiveItem<T extends ListItem>(items: T[]): {
+        item: T;
+        index: number;
+    };
+    focus(): void;
+    /**
+     * Retrieves the the first activated item of a given array of items.
+     *
+     * @param items {Array<ListItem>} The items to search.
+     * @returns A record of the first activated item including the item and the
+     * index of the item or `null` if none are activated.
+     */
+    static getActiveItem<T extends ListItem>(items: T[]): {
+        item: T;
+        index: number;
+    };
+    /**
+     * Retrieves the the first non-disabled item of a given array of items. This
+     * the first item that is not disabled.
+     *
+     * @param items {Array<ListItem>} The items to search.
+     * @returns The first activatable item or `null` if none are activatable.
+     */
+    static getFirstActivatableItem<T extends ListItem>(items: T[]): T;
+    /**
+     * Retrieves the the last non-disabled item of a given array of items.
+     *
+     * @param items {Array<ListItem>} The items to search.
+     * @returns The last activatable item or `null` if none are activatable.
+     */
+    static getLastActivatableItem<T extends ListItem>(items: T[]): T;
+    /**
+     * Retrieves the the next non-disabled item of a given array of items.
+     *
+     * @param items {Array<ListItem>} The items to search.
+     * @param index {{index: number}} The index to search from.
+     * @returns The next activatable item or `null` if none are activatable.
+     */
+    protected static getNextItem<T extends ListItem>(items: T[], index: number): T;
+    /**
+     * Retrieves the the previous non-disabled item of a given array of items.
+     *
+     * @param items {Array<ListItem>} The items to search.
+     * @param index {{index: number}} The index to search from.
+     * @returns The previous activatable item or `null` if none are activatable.
+     */
+    protected static getPrevItem<T extends ListItem>(items: T[], index: number): T;
 }

package/list/lib/list.js

@@ -4,165 +4,268 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { __decorate, __metadata } from "tslib";
-import '../../elevation/elevation.js';
+// Required for @ariaProperty
+// tslint:disable:no-new-decorators
 import { html, LitElement } from 'lit';
 import { property, query, queryAssignedElements } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { ariaProperty } from '../../decorators/aria-property.js';
-const NAVIGATABLE_KEYS = {
+const NAVIGABLE_KEYS = {
     ArrowDown: 'ArrowDown',
     ArrowUp: 'ArrowUp',
     Home: 'Home',
     End: 'End',
 };
-/** @soyCompatible */
+const navigableKeySet = new Set(Object.values(NAVIGABLE_KEYS));
+function isNavigableKey(key) {
+    return navigableKeySet.has(key);
+}
+// tslint:disable-next-line:enforce-comments-on-exported-symbols
 export class List extends LitElement {
     constructor() {
         super(...arguments);
         // @ts-ignore(b/264292293): Use `override` with TS 4.9+
         this.role = 'list';
-        this.listId = '';
+        /**
+         * The tabindex of the underlying list.
+         */
         this.listTabIndex = 0;
-        this.items = [];
-        this.activeListItem = null;
-        this.listItemTagName = 'md-list-item';
-    }
-    firstUpdated(changedProperties) {
-        super.firstUpdated(changedProperties);
-        this.updateItems();
     }
-    /** @soyTemplate */
     render() {
+        return this.renderList();
+    }
+    /**
+     * Renders the main list element.
+     */
+    renderList() {
         return html `
-      <ul class="md3-list ${classMap(this.getRenderClasses())}"
-          aria-label="${ifDefined(this.ariaLabel)}"
-          id=${ifDefined(this.listId || undefined)}
-          tabindex=${this.listTabIndex}
-          role=${this.role}
-          @action=${this.handleAction}
-          @keydown=${this.handleKeydown}
-          >
-        <span><slot></slot></span>
-        <md-elevation surface></md-elevation>
-      </ul>
-    `;
+    <ul class="md3-list ${classMap(this.getListClasses())}"
+        aria-label="${ifDefined(this.ariaLabel)}"
+        tabindex=${this.listTabIndex}
+        role=${this.role}
+        @keydown=${this.handleKeydown}
+        >
+      ${this.renderContent()}
+    </ul>
+  `;
     }
-    /** @soyTemplate */
-    getRenderClasses() {
+    /**
+     * The classes to be applied to the underlying list.
+     */
+    getListClasses() {
         return {};
     }
+    /**
+     * The content to be slotted into the list.
+     */
+    renderContent() {
+        return html `<span><slot @click=${(e) => {
+            e.stopPropagation();
+        }}></slot></span>`;
+    }
+    /**
+     * Handles keyboard navigation in the list.
+     *
+     * @param event {KeyboardEvent} The keyboard event that triggers this handler.
+     */
     handleKeydown(event) {
-        if (Object.values(NAVIGATABLE_KEYS).indexOf(event.key) === -1)
+        const key = event.key;
+        if (!isNavigableKey(key)) {
             return;
-        for (const item of this.items) {
-            if (this.isListItemActive(item)) {
-                this.activeListItem = item;
-            }
-            this.deactivateListItem(item);
         }
-        if (event.key === NAVIGATABLE_KEYS.ArrowDown) {
-            event.preventDefault();
-            if (this.activeListItem) {
-                this.activeListItem = this.getNextItem(this.activeListItem);
-            }
-            else {
-                this.activeListItem = this.getFirstItem();
-            }
-        }
-        if (event.key === NAVIGATABLE_KEYS.ArrowUp) {
-            event.preventDefault();
-            if (this.activeListItem) {
-                this.activeListItem = this.getPrevItem(this.activeListItem);
-            }
-            else {
-                this.activeListItem = this.getLastItem();
-            }
-        }
-        if (event.key === NAVIGATABLE_KEYS.Home) {
-            event.preventDefault();
-            this.activeListItem = this.getFirstItem();
+        // do not use this.items directly so we don't re-query the DOM unnecessarily
+        const items = this.items;
+        if (!items.length) {
+            return;
         }
-        if (event.key === NAVIGATABLE_KEYS.End) {
-            event.preventDefault();
-            this.activeListItem = this.getLastItem();
+        const activeItemRecord = List.getActiveItem(items);
+        if (activeItemRecord) {
+            activeItemRecord.item.active = false;
         }
-        if (this.activeListItem) {
-            this.activateListItem(this.activeListItem);
+        event.preventDefault();
+        switch (key) {
+            // Activate the next item
+            case NAVIGABLE_KEYS.ArrowDown:
+                if (activeItemRecord) {
+                    const next = List.getNextItem(items, activeItemRecord.index);
+                    if (next)
+                        next.active = true;
+                }
+                else {
+                    List.activateFirstItem(items);
+                }
+                break;
+            // Activate the previous item
+            case NAVIGABLE_KEYS.ArrowUp:
+                if (activeItemRecord) {
+                    const prev = List.getPrevItem(items, activeItemRecord.index);
+                    if (prev)
+                        prev.active = true;
+                }
+                else {
+                    items[items.length - 1].active = true;
+                }
+                break;
+            // Activate the first item
+            case NAVIGABLE_KEYS.Home:
+                List.activateFirstItem(items);
+                break;
+            // Activate the last item
+            case NAVIGABLE_KEYS.End:
+                List.activateLastItem(items);
+                break;
+            default:
+                break;
         }
     }
-    activateListItem(item) {
-        item.activate();
-    }
-    deactivateListItem(item) {
-        item.deactivate();
-    }
-    isListItemActive(item) {
-        return item.isActive();
-    }
-    handleAction(event) { }
-    activateFirstItem() {
-        this.activeListItem = this.getFirstItem();
-        this.activeListItem.activate();
+    /**
+     * Activates the first non-disabled item of a given array of items.
+     *
+     * @param items {Array<ListItem>} The items from which to activate the
+     * first item.
+     */
+    static activateFirstItem(items) {
+        // NOTE: These selector functions are static and not on the instance such
+        // that multiple operations can be chained and we do not have to re-query
+        // the DOM
+        const firstItem = List.getFirstActivatableItem(items);
+        if (firstItem) {
+            firstItem.active = true;
+        }
     }
-    activateLastItem() {
-        this.activeListItem = this.getLastItem();
-        this.activeListItem.activate();
+    /**
+     * Activates the last non-disabled item of a given array of items.
+     *
+     * @param items {Array<ListItem>} The items from which to activate the
+     * last item.
+     */
+    static activateLastItem(items) {
+        const lastItem = List.getLastActivatableItem(items);
+        if (lastItem) {
+            lastItem.active = true;
+        }
     }
-    resetActiveListItem() {
-        this.activeListItem = null;
+    /**
+     * Deactivates the currently active item of a given array of items.
+     *
+     * @param items {Array<ListItem>} The items from which to deactivate the
+     * active item.
+     * @returns A record of the deleselcted activated item including the item and
+     * the index of the item or `null` if none are deactivated.
+     */
+    static deactivateActiveItem(items) {
+        const activeItem = List.getActiveItem(items);
+        if (activeItem) {
+            activeItem.item.active = false;
+        }
+        return activeItem;
     }
-    focusListRoot() {
+    focus() {
         this.listRoot.focus();
     }
-    /** Updates `this.items` based on slot elements in the DOM. */
-    updateItems() {
-        const elements = this.assignedElements || [];
-        this.items = elements.filter(this.isListItem, this);
-    }
-    /** @return Whether the given element is a list item element. */
-    isListItem(element) {
-        return element.tagName.toLowerCase() === this.listItemTagName;
+    /**
+     * Retrieves the the first activated item of a given array of items.
+     *
+     * @param items {Array<ListItem>} The items to search.
+     * @returns A record of the first activated item including the item and the
+     * index of the item or `null` if none are activated.
+     */
+    static getActiveItem(items) {
+        for (let i = 0; i < items.length; i++) {
+            const item = items[i];
+            if (item.active) {
+                return {
+                    item,
+                    index: i,
+                };
+            }
+        }
+        return null;
     }
-    getFirstItem() {
-        return this.items[0];
+    /**
+     * Retrieves the the first non-disabled item of a given array of items. This
+     * the first item that is not disabled.
+     *
+     * @param items {Array<ListItem>} The items to search.
+     * @returns The first activatable item or `null` if none are activatable.
+     */
+    static getFirstActivatableItem(items) {
+        for (const item of items) {
+            if (!item.disabled) {
+                return item;
+            }
+        }
+        return null;
     }
-    getLastItem() {
-        return this.items[this.items.length - 1];
+    /**
+     * Retrieves the the last non-disabled item of a given array of items.
+     *
+     * @param items {Array<ListItem>} The items to search.
+     * @returns The last activatable item or `null` if none are activatable.
+     */
+    static getLastActivatableItem(items) {
+        for (let i = items.length - 1; i >= 0; i--) {
+            const item = items[i];
+            if (!item.disabled) {
+                return item;
+            }
+        }
+        return null;
     }
-    getPrevItem(item) {
-        const curIndex = this.items.indexOf(item);
-        return this.items[curIndex === 0 ? this.items.length - 1 : curIndex - 1];
+    /**
+     * Retrieves the the next non-disabled item of a given array of items.
+     *
+     * @param items {Array<ListItem>} The items to search.
+     * @param index {{index: number}} The index to search from.
+     * @returns The next activatable item or `null` if none are activatable.
+     */
+    static getNextItem(items, index) {
+        for (let i = 1; i < items.length; i++) {
+            const nextIndex = (i + index) % items.length;
+            const item = items[nextIndex];
+            if (!item.disabled) {
+                return item;
+            }
+        }
+        return null;
     }
-    getNextItem(item) {
-        const curIndex = this.items.indexOf(item);
-        return this.items[(curIndex + 1) % this.items.length];
+    /**
+     * Retrieves the the previous non-disabled item of a given array of items.
+     *
+     * @param items {Array<ListItem>} The items to search.
+     * @param index {{index: number}} The index to search from.
+     * @returns The previous activatable item or `null` if none are activatable.
+     */
+    static getPrevItem(items, index) {
+        for (let i = 1; i < items.length; i++) {
+            const prevIndex = (index - i + items.length) % items.length;
+            const item = items[prevIndex];
+            if (!item.disabled) {
+                return item;
+            }
+        }
+        return null;
     }
 }
 List.shadowRootOptions = { mode: 'open', delegatesFocus: true };
 __decorate([
-    ariaProperty // tslint:disable-line:no-new-decorators
-    ,
+    ariaProperty,
     property({ type: String, attribute: 'data-aria-label', noAccessor: true }),
     __metadata("design:type", String)
 ], List.prototype, "ariaLabel", void 0);
 __decorate([
-    ariaProperty // tslint:disable-line:no-new-decorators
-    ,
+    ariaProperty,
     property({ type: String, attribute: 'data-aria-activedescendant', noAccessor: true }),
     __metadata("design:type", String)
 ], List.prototype, "ariaActivedescendant", void 0);
 __decorate([
-    ariaProperty // tslint:disable-line:no-new-decorators
-    // tslint:disable-next-line:decorator-placement
+    ariaProperty
+    // tslint:disable-next-line
     ,
     property({ type: String, attribute: 'data-role', noAccessor: true }),
     __metadata("design:type", String)
 ], List.prototype, "role", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], List.prototype, "listId", void 0);
 __decorate([
     property({ type: Number }),
     __metadata("design:type", Number)
@@ -172,11 +275,7 @@ __decorate([
     __metadata("design:type", HTMLElement)
 ], List.prototype, "listRoot", void 0);
 __decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], List.prototype, "listItemTagName", void 0);
-__decorate([
-    queryAssignedElements({ flatten: true }),
+    queryAssignedElements({ flatten: true, selector: '[md-list-item]' }),
     __metadata("design:type", Array)
-], List.prototype, "assignedElements", void 0);
+], List.prototype, "items", void 0);
 //# sourceMappingURL=list.js.map

package/list/lib/list.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.js","sourceRoot":"","sources":["list.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\n\nimport {html, LitElement, PropertyValues, TemplateResult} from 'lit';\nimport {property, query, queryAssignedElements} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\nimport {ariaProperty} from '../../decorators/aria-property.js';\nimport {ARIARole} from '../../types/aria.js';\n\nimport {ListItem} from './listitem/list-item.js';\n\nconst NAVIGATABLE_KEYS = {\n  ArrowDown: 'ArrowDown',\n  ArrowUp: 'ArrowUp',\n  Home: 'Home',\n  End: 'End',\n};\n\n/** @soyCompatible */\nexport class List extends LitElement {\n  static override shadowRootOptions:\n      ShadowRootInit = {mode: 'open', delegatesFocus: true};\n\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property({type: String, attribute: 'data-aria-label', noAccessor: true})\n  override ariaLabel!: string;\n\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property(\n      {type: String, attribute: 'data-aria-activedescendant', noAccessor: true})\n  ariaActivedescendant!: string;\n\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  // tslint:disable-next-line:decorator-placement\n  @property({type: String, attribute: 'data-role', noAccessor: true})\n  // @ts-ignore(b/264292293): Use `override` with TS 4.9+\n  role: ARIARole = 'list';\n\n  @property({type: String}) listId = '';\n\n  @property({type: Number}) listTabIndex: number = 0;\n\n  items: ListItem[] = [];\n  activeListItem: ListItem|null = null;\n\n  @query('.md3-list') listRoot!: HTMLElement;\n\n  @property({type: String}) listItemTagName = 'md-list-item';\n\n  @queryAssignedElements({flatten: true})\n  protected assignedElements!: HTMLElement[]|null;\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n\n    this.updateItems();\n  }\n\n  /** @soyTemplate */\n  override render(): TemplateResult {\n    return html`\n      <ul class=\"md3-list ${classMap(this.getRenderClasses())}\"\n          aria-label=\"${ifDefined(this.ariaLabel)}\"\n          id=${ifDefined(this.listId || undefined)}\n          tabindex=${this.listTabIndex}\n          role=${this.role}\n          @action=${this.handleAction}\n          @keydown=${this.handleKeydown}\n          >\n        <span><slot></slot></span>\n        <md-elevation surface></md-elevation>\n      </ul>\n    `;\n  }\n\n  /** @soyTemplate */\n  protected getRenderClasses(): ClassInfo {\n    return {};\n  }\n\n  handleKeydown(event: KeyboardEvent) {\n    if (Object.values(NAVIGATABLE_KEYS).indexOf(event.key) === -1) return;\n\n    for (const item of this.items) {\n      if (this.isListItemActive(item)) {\n        this.activeListItem = item;\n      }\n\n      this.deactivateListItem(item);\n    }\n\n    if (event.key === NAVIGATABLE_KEYS.ArrowDown) {\n      event.preventDefault();\n      if (this.activeListItem) {\n        this.activeListItem = this.getNextItem(this.activeListItem);\n      } else {\n        this.activeListItem = this.getFirstItem();\n      }\n    }\n\n    if (event.key === NAVIGATABLE_KEYS.ArrowUp) {\n      event.preventDefault();\n      if (this.activeListItem) {\n        this.activeListItem = this.getPrevItem(this.activeListItem);\n      } else {\n        this.activeListItem = this.getLastItem();\n      }\n    }\n\n    if (event.key === NAVIGATABLE_KEYS.Home) {\n      event.preventDefault();\n      this.activeListItem = this.getFirstItem();\n    }\n\n    if (event.key === NAVIGATABLE_KEYS.End) {\n      event.preventDefault();\n      this.activeListItem = this.getLastItem();\n    }\n\n    if (this.activeListItem) {\n      this.activateListItem(this.activeListItem);\n    }\n  }\n\n  protected activateListItem(item: ListItem) {\n    item.activate();\n  }\n\n  protected deactivateListItem(item: ListItem) {\n    item.deactivate();\n  }\n\n  protected isListItemActive(item: ListItem): boolean {\n    return item.isActive();\n  }\n\n  protected handleAction(event: CustomEvent) {}\n\n  activateFirstItem() {\n    this.activeListItem = this.getFirstItem();\n    this.activeListItem.activate();\n  }\n\n  activateLastItem() {\n    this.activeListItem = this.getLastItem();\n    this.activeListItem.activate();\n  }\n\n  resetActiveListItem() {\n    this.activeListItem = null;\n  }\n\n  focusListRoot() {\n    this.listRoot.focus();\n  }\n\n  /** Updates `this.items` based on slot elements in the DOM. */\n  protected updateItems() {\n    const elements = this.assignedElements || [];\n    this.items = elements.filter(this.isListItem, this);\n  }\n\n  /** @return Whether the given element is a list item element. */\n  private isListItem(element: Element): element is ListItem {\n    return element.tagName.toLowerCase() === this.listItemTagName;\n  }\n\n  private getFirstItem(): ListItem {\n    return this.items[0];\n  }\n\n  private getLastItem(): ListItem {\n    return this.items[this.items.length - 1];\n  }\n\n  private getPrevItem(item: ListItem): ListItem {\n    const curIndex = this.items.indexOf(item);\n    return this.items[curIndex === 0 ? this.items.length - 1 : curIndex - 1];\n  }\n\n  private getNextItem(item: ListItem): ListItem {\n    const curIndex = this.items.indexOf(item);\n    return this.items[(curIndex + 1) % this.items.length];\n  }\n}\n"]}
+{"version":3,"file":"list.js","sourceRoot":"","sources":["list.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// Required for @ariaProperty\n// tslint:disable:no-new-decorators\n\nimport {html, LitElement, TemplateResult} from 'lit';\nimport {property, query, queryAssignedElements} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\nimport {ariaProperty} from '../../decorators/aria-property.js';\nimport {ARIARole} from '../../types/aria.js';\n\nimport {ListItem} from './listitem/list-item.js';\n\nconst NAVIGABLE_KEYS = {\n  ArrowDown: 'ArrowDown',\n  ArrowUp: 'ArrowUp',\n  Home: 'Home',\n  End: 'End',\n} as const;\n\ntype NavigatableValues = typeof NAVIGABLE_KEYS[keyof typeof NAVIGABLE_KEYS];\n\nconst navigableKeySet = new Set(Object.values(NAVIGABLE_KEYS));\n\nfunction isNavigableKey(key: string): key is NavigatableValues {\n  return navigableKeySet.has(key as NavigatableValues);\n}\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class List extends LitElement {\n  static override shadowRootOptions:\n      ShadowRootInit = {mode: 'open', delegatesFocus: true};\n\n  @ariaProperty\n  @property({type: String, attribute: 'data-aria-label', noAccessor: true})\n  override ariaLabel!: string;\n\n  @ariaProperty\n  @property(\n      {type: String, attribute: 'data-aria-activedescendant', noAccessor: true})\n  ariaActivedescendant!: string;\n\n  @ariaProperty\n  // tslint:disable-next-line\n  @property({type: String, attribute: 'data-role', noAccessor: true})\n  // @ts-ignore(b/264292293): Use `override` with TS 4.9+\n  role: ARIARole = 'list';\n\n  /**\n   * The tabindex of the underlying list.\n   */\n  @property({type: Number}) listTabIndex: number = 0;\n\n  @query('.md3-list') listRoot!: HTMLElement;\n\n  /**\n   * An array of activatable and disableable list items. Queries every assigned\n   * element that has the `md-list-item` attribute.\n   *\n   * _NOTE:_ This is a shallow, flattened query via\n   * `HTMLSlotElement.queryAssignedElements` and thus will _only_ include direct\n   * children / directly slotted elements.\n   */\n  @queryAssignedElements({flatten: true, selector: '[md-list-item]'})\n  items!: ListItem[];\n\n  override render(): TemplateResult {\n    return this.renderList();\n  }\n\n  /**\n   * Renders the main list element.\n   */\n  protected renderList() {\n    return html`\n    <ul class=\"md3-list ${classMap(this.getListClasses())}\"\n        aria-label=\"${ifDefined(this.ariaLabel)}\"\n        tabindex=${this.listTabIndex}\n        role=${this.role}\n        @keydown=${this.handleKeydown}\n        >\n      ${this.renderContent()}\n    </ul>\n  `;\n  }\n\n  /**\n   * The classes to be applied to the underlying list.\n   */\n  protected getListClasses(): ClassInfo {\n    return {};\n  }\n\n  /**\n   * The content to be slotted into the list.\n   */\n  protected renderContent() {\n    return html`<span><slot @click=${(e: Event) => {\n      e.stopPropagation();\n    }}></slot></span>`;\n  }\n\n  /**\n   * Handles keyboard navigation in the list.\n   *\n   * @param event {KeyboardEvent} The keyboard event that triggers this handler.\n   */\n  handleKeydown(event: KeyboardEvent) {\n    const key = event.key;\n    if (!isNavigableKey(key)) {\n      return;\n    }\n    // do not use this.items directly so we don't re-query the DOM unnecessarily\n    const items = this.items;\n\n    if (!items.length) {\n      return;\n    }\n\n    const activeItemRecord = List.getActiveItem(items);\n\n    if (activeItemRecord) {\n      activeItemRecord.item.active = false;\n    }\n\n    event.preventDefault();\n\n    switch (key) {\n      // Activate the next item\n      case NAVIGABLE_KEYS.ArrowDown:\n        if (activeItemRecord) {\n          const next = List.getNextItem(items, activeItemRecord.index);\n\n          if (next) next.active = true;\n        } else {\n          List.activateFirstItem(items);\n        }\n        break;\n\n      // Activate the previous item\n      case NAVIGABLE_KEYS.ArrowUp:\n        if (activeItemRecord) {\n          const prev = List.getPrevItem(items, activeItemRecord.index);\n          if (prev) prev.active = true;\n        } else {\n          items[items.length - 1].active = true;\n        }\n        break;\n\n      // Activate the first item\n      case NAVIGABLE_KEYS.Home:\n        List.activateFirstItem(items);\n        break;\n\n      // Activate the last item\n      case NAVIGABLE_KEYS.End:\n        List.activateLastItem(items);\n        break;\n\n      default:\n        break;\n    }\n  }\n\n  /**\n   * Activates the first non-disabled item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items from which to activate the\n   * first item.\n   */\n  static activateFirstItem<T extends ListItem>(items: T[]) {\n    // NOTE: These selector functions are static and not on the instance such\n    // that multiple operations can be chained and we do not have to re-query\n    // the DOM\n    const firstItem = List.getFirstActivatableItem(items);\n    if (firstItem) {\n      firstItem.active = true;\n    }\n  }\n\n  /**\n   * Activates the last non-disabled item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items from which to activate the\n   * last item.\n   */\n  static activateLastItem<T extends ListItem>(items: T[]) {\n    const lastItem = List.getLastActivatableItem(items);\n    if (lastItem) {\n      lastItem.active = true;\n    }\n  }\n\n  /**\n   * Deactivates the currently active item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items from which to deactivate the\n   * active item.\n   * @returns A record of the deleselcted activated item including the item and\n   * the index of the item or `null` if none are deactivated.\n   */\n  static deactivateActiveItem<T extends ListItem>(items: T[]) {\n    const activeItem = List.getActiveItem(items);\n    if (activeItem) {\n      activeItem.item.active = false;\n    }\n    return activeItem;\n  }\n\n  override focus() {\n    this.listRoot.focus();\n  }\n\n  /**\n   * Retrieves the the first activated item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items to search.\n   * @returns A record of the first activated item including the item and the\n   * index of the item or `null` if none are activated.\n   */\n  static getActiveItem<T extends ListItem>(items: T[]) {\n    for (let i = 0; i < items.length; i++) {\n      const item = items[i];\n      if (item.active) {\n        return {\n          item,\n          index: i,\n        };\n      }\n    }\n    return null;\n  }\n\n  /**\n   * Retrieves the the first non-disabled item of a given array of items. This\n   * the first item that is not disabled.\n   *\n   * @param items {Array<ListItem>} The items to search.\n   * @returns The first activatable item or `null` if none are activatable.\n   */\n  static getFirstActivatableItem<T extends ListItem>(items: T[]) {\n    for (const item of items) {\n      if (!item.disabled) {\n        return item;\n      }\n    }\n\n    return null;\n  }\n\n  /**\n   * Retrieves the the last non-disabled item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items to search.\n   * @returns The last activatable item or `null` if none are activatable.\n   */\n  static getLastActivatableItem<T extends ListItem>(items: T[]) {\n    for (let i = items.length - 1; i >= 0; i--) {\n      const item = items[i];\n      if (!item.disabled) {\n        return item;\n      }\n    }\n\n    return null;\n  }\n\n  /**\n   * Retrieves the the next non-disabled item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items to search.\n   * @param index {{index: number}} The index to search from.\n   * @returns The next activatable item or `null` if none are activatable.\n   */\n  protected static getNextItem<T extends ListItem>(items: T[], index: number) {\n    for (let i = 1; i < items.length; i++) {\n      const nextIndex = (i + index) % items.length;\n      const item = items[nextIndex];\n      if (!item.disabled) {\n        return item;\n      }\n    }\n    return null;\n  }\n\n  /**\n   * Retrieves the the previous non-disabled item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items to search.\n   * @param index {{index: number}} The index to search from.\n   * @returns The previous activatable item or `null` if none are activatable.\n   */\n  protected static getPrevItem<T extends ListItem>(items: T[], index: number) {\n    for (let i = 1; i < items.length; i++) {\n      const prevIndex = (index - i + items.length) % items.length;\n      const item = items[prevIndex];\n\n      if (!item.disabled) {\n        return item;\n      }\n    }\n    return null;\n  }\n}\n"]}