material-web-evo 10002.10001.10000

package/list/internal/list-controller.js

@@ -0,0 +1,186 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { activateFirstItem, activateLastItem, activateNextItem, activatePreviousItem, getActiveItem, getFirstActivatableItem, } from './list-navigation-helpers.js';
+// TODO: move this file to List and make List use this
+/**
+ * Default keys that trigger navigation.
+ */
+// tslint:disable:enforce-name-casing Following Enum style
+export const NavigableKeys = {
+    ArrowDown: 'ArrowDown',
+    ArrowLeft: 'ArrowLeft',
+    ArrowUp: 'ArrowUp',
+    ArrowRight: 'ArrowRight',
+    Home: 'Home',
+    End: 'End',
+};
+/**
+ * A controller that handles list keyboard navigation and item management.
+ */
+export class ListController {
+    constructor(config) {
+        /**
+         * Handles keyboard navigation. Should be bound to the node that will act as
+         * the List.
+         */
+        this.handleKeydown = (event) => {
+            const key = event.key;
+            if (event.defaultPrevented || !this.isNavigableKey(key)) {
+                return;
+            }
+            // do not use this.items directly in upcoming calculations so we don't
+            // re-query the DOM unnecessarily
+            const items = this.items;
+            if (!items.length) {
+                return;
+            }
+            const activeItemRecord = getActiveItem(items, this.isActivatable);
+            event.preventDefault();
+            const isRtl = this.isRtl();
+            const inlinePrevious = isRtl
+                ? NavigableKeys.ArrowRight
+                : NavigableKeys.ArrowLeft;
+            const inlineNext = isRtl
+                ? NavigableKeys.ArrowLeft
+                : NavigableKeys.ArrowRight;
+            let nextActiveItem = null;
+            switch (key) {
+                // Activate the next item
+                case NavigableKeys.ArrowDown:
+                case inlineNext:
+                    nextActiveItem = activateNextItem(items, activeItemRecord, this.isActivatable, this.wrapNavigation());
+                    break;
+                // Activate the previous item
+                case NavigableKeys.ArrowUp:
+                case inlinePrevious:
+                    nextActiveItem = activatePreviousItem(items, activeItemRecord, this.isActivatable, this.wrapNavigation());
+                    break;
+                // Activate the first item
+                case NavigableKeys.Home:
+                    nextActiveItem = activateFirstItem(items, this.isActivatable);
+                    break;
+                // Activate the last item
+                case NavigableKeys.End:
+                    nextActiveItem = activateLastItem(items, this.isActivatable);
+                    break;
+                default:
+                    break;
+            }
+            if (nextActiveItem &&
+                activeItemRecord &&
+                activeItemRecord.item !== nextActiveItem) {
+                // If a new item was activated, remove the tabindex of the previous
+                // activated item.
+                activeItemRecord.item.tabIndex = -1;
+            }
+        };
+        /**
+         * Listener to be bound to the `deactivate-items` item event.
+         */
+        this.onDeactivateItems = () => {
+            const items = this.items;
+            for (const item of items) {
+                this.deactivateItem(item);
+            }
+        };
+        /**
+         * Listener to be bound to the `request-activation` item event..
+         */
+        this.onRequestActivation = (event) => {
+            this.onDeactivateItems();
+            const target = event.target;
+            this.activateItem(target);
+            target.focus();
+        };
+        /**
+         * Listener to be bound to the `slotchange` event for the slot that renders
+         * the items.
+         */
+        this.onSlotchange = () => {
+            const items = this.items;
+            // Whether we have encountered an item that has been activated
+            let encounteredActivated = false;
+            for (const item of items) {
+                const isActivated = !item.disabled && item.tabIndex > -1;
+                if (isActivated && !encounteredActivated) {
+                    encounteredActivated = true;
+                    item.tabIndex = 0;
+                    continue;
+                }
+                // Deactivate the rest including disabled
+                item.tabIndex = -1;
+            }
+            if (encounteredActivated) {
+                return;
+            }
+            const firstActivatableItem = getFirstActivatableItem(items, this.isActivatable);
+            if (!firstActivatableItem) {
+                return;
+            }
+            firstActivatableItem.tabIndex = 0;
+        };
+        const { isItem, getPossibleItems, isRtl, deactivateItem, activateItem, isNavigableKey, isActivatable, wrapNavigation, } = config;
+        this.isItem = isItem;
+        this.getPossibleItems = getPossibleItems;
+        this.isRtl = isRtl;
+        this.deactivateItem = deactivateItem;
+        this.activateItem = activateItem;
+        this.isNavigableKey = isNavigableKey;
+        this.isActivatable = isActivatable;
+        this.wrapNavigation = wrapNavigation ?? (() => true);
+    }
+    /**
+     * The items being managed by the list. Additionally, attempts to see if the
+     * object has a sub-item in the `.item` property.
+     */
+    get items() {
+        const maybeItems = this.getPossibleItems();
+        const items = [];
+        for (const itemOrParent of maybeItems) {
+            const isItem = this.isItem(itemOrParent);
+            // if the item is a list item, add it to the list of items
+            if (isItem) {
+                items.push(itemOrParent);
+                continue;
+            }
+            // If the item exposes an `item` property check if it is a list item.
+            const subItem = itemOrParent.item;
+            if (subItem && this.isItem(subItem)) {
+                items.push(subItem);
+            }
+        }
+        return items;
+    }
+    /**
+     * Activates the next item in the list. If at the end of the list, the first
+     * item will be activated.
+     *
+     * @return The activated list item or `null` if there are no items.
+     */
+    activateNextItem() {
+        const items = this.items;
+        const activeItemRecord = getActiveItem(items, this.isActivatable);
+        if (activeItemRecord) {
+            activeItemRecord.item.tabIndex = -1;
+        }
+        return activateNextItem(items, activeItemRecord, this.isActivatable, this.wrapNavigation());
+    }
+    /**
+     * Activates the previous item in the list. If at the start of the list, the
+     * last item will be activated.
+     *
+     * @return The activated list item or `null` if there are no items.
+     */
+    activatePreviousItem() {
+        const items = this.items;
+        const activeItemRecord = getActiveItem(items, this.isActivatable);
+        if (activeItemRecord) {
+            activeItemRecord.item.tabIndex = -1;
+        }
+        return activatePreviousItem(items, activeItemRecord, this.isActivatable, this.wrapNavigation());
+    }
+}
+//# sourceMappingURL=list-controller.js.map

package/list/internal/list-controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-controller.js","sourceRoot":"","sources":["list-controller.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {\n  activateFirstItem,\n  activateLastItem,\n  activateNextItem,\n  activatePreviousItem,\n  getActiveItem,\n  getFirstActivatableItem,\n  ListItem,\n} from './list-navigation-helpers.js';\n\n// TODO: move this file to List and make List use this\n\n/**\n * Default keys that trigger navigation.\n */\n// tslint:disable:enforce-name-casing Following Enum style\nexport const NavigableKeys = {\n  ArrowDown: 'ArrowDown',\n  ArrowLeft: 'ArrowLeft',\n  ArrowUp: 'ArrowUp',\n  ArrowRight: 'ArrowRight',\n  Home: 'Home',\n  End: 'End',\n} as const;\n// tslint:enable:enforce-name-casing\n\n/**\n * Default set of navigable keys.\n */\nexport type NavigableKeys = (typeof NavigableKeys)[keyof typeof NavigableKeys];\n\n/**\n * The configuration object to customize the behavior of the List Controller\n */\nexport interface ListControllerConfig<Item extends ListItem> {\n  /**\n   * A function that determines whether or not the given element is an Item\n   */\n  isItem: (item: HTMLElement) => item is Item;\n  /**\n   * A function that returns an array of elements to consider as items. For\n   * example, all the slotted elements.\n   */\n  getPossibleItems: () => HTMLElement[];\n  /**\n   * A function that returns whether or not the list is in an RTL context.\n   */\n  isRtl: () => boolean;\n  /**\n   * Deactivates an item such as setting the tabindex to -1 and or sets selected\n   * to false.\n   */\n  deactivateItem: (item: Item) => void;\n  /**\n   * Activates an item such as setting the tabindex to 1 and or sets selected to\n   * true (but does not focus).\n   */\n  activateItem: (item: Item) => void;\n  /**\n   * Whether or not the key should be handled by the list for navigation.\n   */\n  isNavigableKey: (key: string) => boolean;\n  /**\n   * Whether or not the item can be activated. Defaults to items that are not\n   * disabled.\n   */\n  isActivatable?: (item: Item) => boolean;\n  /**\n   * Whether or not navigating past the end of the list wraps to the beginning\n   * and vice versa. Defaults to true.\n   */\n  wrapNavigation?: () => boolean;\n}\n\n/**\n * A controller that handles list keyboard navigation and item management.\n */\nexport class ListController<Item extends ListItem> {\n  isItem: (item: HTMLElement) => item is Item;\n  private readonly getPossibleItems: () => HTMLElement[];\n  private readonly isRtl: () => boolean;\n  private readonly deactivateItem: (item: Item) => void;\n  private readonly activateItem: (item: Item) => void;\n  private readonly isNavigableKey: (key: string) => boolean;\n  private readonly isActivatable?: (item: Item) => boolean;\n  private readonly wrapNavigation: () => boolean;\n\n  constructor(config: ListControllerConfig<Item>) {\n    const {\n      isItem,\n      getPossibleItems,\n      isRtl,\n      deactivateItem,\n      activateItem,\n      isNavigableKey,\n      isActivatable,\n      wrapNavigation,\n    } = config;\n    this.isItem = isItem;\n    this.getPossibleItems = getPossibleItems;\n    this.isRtl = isRtl;\n    this.deactivateItem = deactivateItem;\n    this.activateItem = activateItem;\n    this.isNavigableKey = isNavigableKey;\n    this.isActivatable = isActivatable;\n    this.wrapNavigation = wrapNavigation ?? (() => true);\n  }\n\n  /**\n   * The items being managed by the list. Additionally, attempts to see if the\n   * object has a sub-item in the `.item` property.\n   */\n  get items(): Item[] {\n    const maybeItems = this.getPossibleItems();\n    const items: Item[] = [];\n\n    for (const itemOrParent of maybeItems) {\n      const isItem = this.isItem(itemOrParent);\n      // if the item is a list item, add it to the list of items\n      if (isItem) {\n        items.push(itemOrParent);\n        continue;\n      }\n\n      // If the item exposes an `item` property check if it is a list item.\n      const subItem = (itemOrParent as HTMLElement & {item?: Item}).item;\n      if (subItem && this.isItem(subItem)) {\n        items.push(subItem);\n      }\n    }\n\n    return items;\n  }\n\n  /**\n   * Handles keyboard navigation. Should be bound to the node that will act as\n   * the List.\n   */\n  handleKeydown = (event: KeyboardEvent) => {\n    const key = event.key;\n    if (event.defaultPrevented || !this.isNavigableKey(key)) {\n      return;\n    }\n    // do not use this.items directly in upcoming calculations so we don't\n    // re-query the DOM unnecessarily\n    const items = this.items;\n\n    if (!items.length) {\n      return;\n    }\n\n    const activeItemRecord = getActiveItem(items, this.isActivatable);\n\n    event.preventDefault();\n\n    const isRtl = this.isRtl();\n    const inlinePrevious = isRtl\n      ? NavigableKeys.ArrowRight\n      : NavigableKeys.ArrowLeft;\n    const inlineNext = isRtl\n      ? NavigableKeys.ArrowLeft\n      : NavigableKeys.ArrowRight;\n\n    let nextActiveItem: Item | null = null;\n    switch (key) {\n      // Activate the next item\n      case NavigableKeys.ArrowDown:\n      case inlineNext:\n        nextActiveItem = activateNextItem(\n          items,\n          activeItemRecord,\n          this.isActivatable,\n          this.wrapNavigation(),\n        );\n        break;\n\n      // Activate the previous item\n      case NavigableKeys.ArrowUp:\n      case inlinePrevious:\n        nextActiveItem = activatePreviousItem(\n          items,\n          activeItemRecord,\n          this.isActivatable,\n          this.wrapNavigation(),\n        );\n        break;\n\n      // Activate the first item\n      case NavigableKeys.Home:\n        nextActiveItem = activateFirstItem(items, this.isActivatable);\n        break;\n\n      // Activate the last item\n      case NavigableKeys.End:\n        nextActiveItem = activateLastItem(items, this.isActivatable);\n        break;\n\n      default:\n        break;\n    }\n\n    if (\n      nextActiveItem &&\n      activeItemRecord &&\n      activeItemRecord.item !== nextActiveItem\n    ) {\n      // If a new item was activated, remove the tabindex of the previous\n      // activated item.\n      activeItemRecord.item.tabIndex = -1;\n    }\n  };\n\n  /**\n   * Activates the next item in the list. If at the end of the list, the first\n   * item will be activated.\n   *\n   * @return The activated list item or `null` if there are no items.\n   */\n  activateNextItem(): Item | null {\n    const items = this.items;\n    const activeItemRecord = getActiveItem(items, this.isActivatable);\n    if (activeItemRecord) {\n      activeItemRecord.item.tabIndex = -1;\n    }\n    return activateNextItem(\n      items,\n      activeItemRecord,\n      this.isActivatable,\n      this.wrapNavigation(),\n    );\n  }\n\n  /**\n   * Activates the previous item in the list. If at the start of the list, the\n   * last item will be activated.\n   *\n   * @return The activated list item or `null` if there are no items.\n   */\n  activatePreviousItem(): Item | null {\n    const items = this.items;\n    const activeItemRecord = getActiveItem(items, this.isActivatable);\n    if (activeItemRecord) {\n      activeItemRecord.item.tabIndex = -1;\n    }\n    return activatePreviousItem(\n      items,\n      activeItemRecord,\n      this.isActivatable,\n      this.wrapNavigation(),\n    );\n  }\n\n  /**\n   * Listener to be bound to the `deactivate-items` item event.\n   */\n  onDeactivateItems = () => {\n    const items = this.items;\n\n    for (const item of items) {\n      this.deactivateItem(item);\n    }\n  };\n\n  /**\n   * Listener to be bound to the `request-activation` item event..\n   */\n  onRequestActivation = (event: Event) => {\n    this.onDeactivateItems();\n    const target = event.target as Item;\n    this.activateItem(target);\n    target.focus();\n  };\n\n  /**\n   * Listener to be bound to the `slotchange` event for the slot that renders\n   * the items.\n   */\n  onSlotchange = () => {\n    const items = this.items;\n    // Whether we have encountered an item that has been activated\n    let encounteredActivated = false;\n\n    for (const item of items) {\n      const isActivated = !item.disabled && item.tabIndex > -1;\n\n      if (isActivated && !encounteredActivated) {\n        encounteredActivated = true;\n        item.tabIndex = 0;\n        continue;\n      }\n\n      // Deactivate the rest including disabled\n      item.tabIndex = -1;\n    }\n\n    if (encounteredActivated) {\n      return;\n    }\n\n    const firstActivatableItem = getFirstActivatableItem(\n      items,\n      this.isActivatable,\n    );\n\n    if (!firstActivatableItem) {\n      return;\n    }\n\n    firstActivatableItem.tabIndex = 0;\n  };\n}\n"]}

package/list/internal/list-navigation-helpers.d.ts

@@ -0,0 +1,136 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+export interface ListItem extends HTMLElement {
+    disabled: boolean;
+}
+/**
+ * A record that describes a list item in a list with metadata such a reference
+ * to the item and its index in the list.
+ */
+export interface ItemRecord<Item extends ListItem> {
+    item: Item;
+    index: number;
+}
+/**
+ * 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.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ */
+export declare function activateFirstItem<Item extends ListItem>(items: Item[], isActivatable?: (item: Item) => boolean): Item;
+/**
+ * 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.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @nocollapse
+ */
+export declare function activateLastItem<Item extends ListItem>(items: Item[], isActivatable?: (item: Item) => boolean): Item;
+/**
+ * Deactivates the currently active item of a given array of items.
+ *
+ * @param items {Array<ListItem>} The items from which to deactivate the
+ *     active item.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @return A record of the deleselcted activated item including the item and
+ *     the index of the item or `null` if none are deactivated.
+ * @nocollapse
+ */
+export declare function deactivateActiveItem<Item extends ListItem>(items: Item[], isActivatable?: (item: Item) => boolean): ItemRecord<Item>;
+/**
+ * Retrieves the first activated item of a given array of items.
+ *
+ * @param items {Array<ListItem>} The items to search.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @return A record of the first activated item including the item and the
+ *     index of the item or `null` if none are activated.
+ * @nocollapse
+ */
+export declare function getActiveItem<Item extends ListItem>(items: Item[], isActivatable?: (item: Item) => boolean): ItemRecord<Item>;
+/**
+ * Retrieves 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.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @return The first activatable item or `null` if none are activatable.
+ * @nocollapse
+ */
+export declare function getFirstActivatableItem<Item extends ListItem>(items: Item[], isActivatable?: (item: Item) => boolean): Item;
+/**
+ * Retrieves the last non-disabled item of a given array of items.
+ *
+ * @param items {Array<ListItem>} The items to search.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @return The last activatable item or `null` if none are activatable.
+ * @nocollapse
+ */
+export declare function getLastActivatableItem<Item extends ListItem>(items: Item[], isActivatable?: (item: Item) => boolean): Item;
+/**
+ * Retrieves 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.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @param wrap If true, then the next item at the end of the list is the first
+ *     item. Defaults to true.
+ * @return The next activatable item or `null` if none are activatable.
+ */
+export declare function getNextItem<Item extends ListItem>(items: Item[], index: number, isActivatable?: (item: Item) => boolean, wrap?: boolean): Item;
+/**
+ * Retrieves 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.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @param wrap If true, then the previous item at the beginning of the list is
+ *     the last item. Defaults to true.
+ * @return The previous activatable item or `null` if none are activatable.
+ */
+export declare function getPrevItem<Item extends ListItem>(items: Item[], index: number, isActivatable?: (item: Item) => boolean, wrap?: boolean): Item;
+/**
+ * Activates the next item and focuses it. If nothing is currently activated,
+ * activates the first item.
+ */
+export declare function activateNextItem<Item extends ListItem>(items: Item[], activeItemRecord: null | ItemRecord<Item>, isActivatable?: (item: Item) => boolean, wrap?: boolean): Item | null;
+/**
+ * Activates the previous item and focuses it. If nothing is currently
+ * activated, activates the last item.
+ */
+export declare function activatePreviousItem<Item extends ListItem>(items: Item[], activeItemRecord: null | ItemRecord<Item>, isActivatable?: (item: Item) => boolean, wrap?: boolean): Item | null;
+/**
+ * Creates an event that requests the parent md-list to deactivate all other
+ * items.
+ */
+export declare function createDeactivateItemsEvent(): Event;
+/**
+ * The type of the event that requests the parent md-list to deactivate all
+ * other items.
+ */
+export type DeactivateItemsEvent = ReturnType<typeof createDeactivateItemsEvent>;
+/**
+ * Creates an event that requests the menu to set `tabindex=0` on the item and
+ * focus it. We use this pattern because List keeps track of what element is
+ * active in the List by maintaining tabindex. We do not want list items
+ * to set tabindex on themselves or focus themselves so that we can organize all
+ * that logic in the parent List and Menus, and list item stays as dumb as
+ * possible.
+ */
+export declare function createRequestActivationEvent(): Event;
+/**
+ * The type of the event that requests the list activates and focuses the item.
+ */
+export type RequestActivationEvent = ReturnType<typeof createRequestActivationEvent>;

package/list/internal/list-navigation-helpers.js

@@ -0,0 +1,230 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * 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.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ */
+export function activateFirstItem(items, isActivatable = (isItemNotDisabled)) {
+    // 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 = getFirstActivatableItem(items, isActivatable);
+    if (firstItem) {
+        firstItem.tabIndex = 0;
+        firstItem.focus();
+    }
+    return firstItem;
+}
+/**
+ * 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.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @nocollapse
+ */
+export function activateLastItem(items, isActivatable = (isItemNotDisabled)) {
+    const lastItem = getLastActivatableItem(items, isActivatable);
+    if (lastItem) {
+        lastItem.tabIndex = 0;
+        lastItem.focus();
+    }
+    return lastItem;
+}
+/**
+ * Deactivates the currently active item of a given array of items.
+ *
+ * @param items {Array<ListItem>} The items from which to deactivate the
+ *     active item.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @return A record of the deleselcted activated item including the item and
+ *     the index of the item or `null` if none are deactivated.
+ * @nocollapse
+ */
+export function deactivateActiveItem(items, isActivatable = (isItemNotDisabled)) {
+    const activeItem = getActiveItem(items, isActivatable);
+    if (activeItem) {
+        activeItem.item.tabIndex = -1;
+    }
+    return activeItem;
+}
+/**
+ * Retrieves the first activated item of a given array of items.
+ *
+ * @param items {Array<ListItem>} The items to search.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @return A record of the first activated item including the item and the
+ *     index of the item or `null` if none are activated.
+ * @nocollapse
+ */
+export function getActiveItem(items, isActivatable = (isItemNotDisabled)) {
+    for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+        if (item.tabIndex === 0 && isActivatable(item)) {
+            return {
+                item,
+                index: i,
+            };
+        }
+    }
+    return null;
+}
+/**
+ * Retrieves 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.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @return The first activatable item or `null` if none are activatable.
+ * @nocollapse
+ */
+export function getFirstActivatableItem(items, isActivatable = (isItemNotDisabled)) {
+    for (const item of items) {
+        if (isActivatable(item)) {
+            return item;
+        }
+    }
+    return null;
+}
+/**
+ * Retrieves the last non-disabled item of a given array of items.
+ *
+ * @param items {Array<ListItem>} The items to search.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @return The last activatable item or `null` if none are activatable.
+ * @nocollapse
+ */
+export function getLastActivatableItem(items, isActivatable = (isItemNotDisabled)) {
+    for (let i = items.length - 1; i >= 0; i--) {
+        const item = items[i];
+        if (isActivatable(item)) {
+            return item;
+        }
+    }
+    return null;
+}
+/**
+ * Retrieves 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.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @param wrap If true, then the next item at the end of the list is the first
+ *     item. Defaults to true.
+ * @return The next activatable item or `null` if none are activatable.
+ */
+export function getNextItem(items, index, isActivatable = (isItemNotDisabled), wrap = true) {
+    for (let i = 1; i < items.length; i++) {
+        const nextIndex = (i + index) % items.length;
+        if (nextIndex < index && !wrap) {
+            // Return if the index loops back to the beginning and not wrapping.
+            return null;
+        }
+        const item = items[nextIndex];
+        if (isActivatable(item)) {
+            return item;
+        }
+    }
+    return items[index] ? items[index] : null;
+}
+/**
+ * Retrieves 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.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @param wrap If true, then the previous item at the beginning of the list is
+ *     the last item. Defaults to true.
+ * @return The previous activatable item or `null` if none are activatable.
+ */
+export function getPrevItem(items, index, isActivatable = (isItemNotDisabled), wrap = true) {
+    for (let i = 1; i < items.length; i++) {
+        const prevIndex = (index - i + items.length) % items.length;
+        if (prevIndex > index && !wrap) {
+            // Return if the index loops back to the end and not wrapping.
+            return null;
+        }
+        const item = items[prevIndex];
+        if (isActivatable(item)) {
+            return item;
+        }
+    }
+    return items[index] ? items[index] : null;
+}
+/**
+ * Activates the next item and focuses it. If nothing is currently activated,
+ * activates the first item.
+ */
+export function activateNextItem(items, activeItemRecord, isActivatable = (isItemNotDisabled), wrap = true) {
+    if (activeItemRecord) {
+        const next = getNextItem(items, activeItemRecord.index, isActivatable, wrap);
+        if (next) {
+            next.tabIndex = 0;
+            next.focus();
+        }
+        return next;
+    }
+    else {
+        return activateFirstItem(items, isActivatable);
+    }
+}
+/**
+ * Activates the previous item and focuses it. If nothing is currently
+ * activated, activates the last item.
+ */
+export function activatePreviousItem(items, activeItemRecord, isActivatable = (isItemNotDisabled), wrap = true) {
+    if (activeItemRecord) {
+        const prev = getPrevItem(items, activeItemRecord.index, isActivatable, wrap);
+        if (prev) {
+            prev.tabIndex = 0;
+            prev.focus();
+        }
+        return prev;
+    }
+    else {
+        return activateLastItem(items, isActivatable);
+    }
+}
+/**
+ * Creates an event that requests the parent md-list to deactivate all other
+ * items.
+ */
+export function createDeactivateItemsEvent() {
+    return new Event('deactivate-items', { bubbles: true, composed: true });
+}
+/**
+ * Creates an event that requests the menu to set `tabindex=0` on the item and
+ * focus it. We use this pattern because List keeps track of what element is
+ * active in the List by maintaining tabindex. We do not want list items
+ * to set tabindex on themselves or focus themselves so that we can organize all
+ * that logic in the parent List and Menus, and list item stays as dumb as
+ * possible.
+ */
+export function createRequestActivationEvent() {
+    return new Event('request-activation', { bubbles: true, composed: true });
+}
+/**
+ * The default `isActivatable` function, which checks if an item is not
+ * disabled.
+ *
+ * @param item The item to check.
+ * @return true if `item.disabled` is `false.
+ */
+function isItemNotDisabled(item) {
+    return !item.disabled;
+}
+//# sourceMappingURL=list-navigation-helpers.js.map

package/list/internal/list-navigation-helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-navigation-helpers.js","sourceRoot":"","sources":["list-navigation-helpers.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nexport interface ListItem extends HTMLElement {\n  disabled: boolean;\n}\n\n/**\n * A record that describes a list item in a list with metadata such a reference\n * to the item and its index in the list.\n */\nexport interface ItemRecord<Item extends ListItem> {\n  item: Item;\n  index: number;\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 * @param isActivatable Function to determine if an item can be  activated.\n *     Defaults to non-disabled items.\n */\nexport function activateFirstItem<Item extends ListItem>(\n  items: Item[],\n  isActivatable = isItemNotDisabled<Item>,\n) {\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 = getFirstActivatableItem(items, isActivatable);\n  if (firstItem) {\n    firstItem.tabIndex = 0;\n    firstItem.focus();\n  }\n  return firstItem;\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 * @param isActivatable Function to determine if an item can be  activated.\n *     Defaults to non-disabled items.\n * @nocollapse\n */\nexport function activateLastItem<Item extends ListItem>(\n  items: Item[],\n  isActivatable = isItemNotDisabled<Item>,\n) {\n  const lastItem = getLastActivatableItem(items, isActivatable);\n  if (lastItem) {\n    lastItem.tabIndex = 0;\n    lastItem.focus();\n  }\n  return lastItem;\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 * @param isActivatable Function to determine if an item can be  activated.\n *     Defaults to non-disabled items.\n * @return A record of the deleselcted activated item including the item and\n *     the index of the item or `null` if none are deactivated.\n * @nocollapse\n */\nexport function deactivateActiveItem<Item extends ListItem>(\n  items: Item[],\n  isActivatable = isItemNotDisabled<Item>,\n) {\n  const activeItem = getActiveItem(items, isActivatable);\n  if (activeItem) {\n    activeItem.item.tabIndex = -1;\n  }\n  return activeItem;\n}\n\n/**\n * Retrieves the first activated item of a given array of items.\n *\n * @param items {Array<ListItem>} The items to search.\n * @param isActivatable Function to determine if an item can be  activated.\n *     Defaults to non-disabled items.\n * @return A record of the first activated item including the item and the\n *     index of the item or `null` if none are activated.\n * @nocollapse\n */\nexport function getActiveItem<Item extends ListItem>(\n  items: Item[],\n  isActivatable = isItemNotDisabled<Item>,\n) {\n  for (let i = 0; i < items.length; i++) {\n    const item = items[i];\n    if (item.tabIndex === 0 && isActivatable(item)) {\n      return {\n        item,\n        index: i,\n      } as ItemRecord<Item>;\n    }\n  }\n  return null;\n}\n\n/**\n * Retrieves 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 * @param isActivatable Function to determine if an item can be  activated.\n *     Defaults to non-disabled items.\n * @return The first activatable item or `null` if none are activatable.\n * @nocollapse\n */\nexport function getFirstActivatableItem<Item extends ListItem>(\n  items: Item[],\n  isActivatable = isItemNotDisabled<Item>,\n) {\n  for (const item of items) {\n    if (isActivatable(item)) {\n      return item;\n    }\n  }\n\n  return null;\n}\n\n/**\n * Retrieves the last non-disabled item of a given array of items.\n *\n * @param items {Array<ListItem>} The items to search.\n * @param isActivatable Function to determine if an item can be  activated.\n *     Defaults to non-disabled items.\n * @return The last activatable item or `null` if none are activatable.\n * @nocollapse\n */\nexport function getLastActivatableItem<Item extends ListItem>(\n  items: Item[],\n  isActivatable = isItemNotDisabled<Item>,\n) {\n  for (let i = items.length - 1; i >= 0; i--) {\n    const item = items[i];\n    if (isActivatable(item)) {\n      return item;\n    }\n  }\n\n  return null;\n}\n\n/**\n * Retrieves 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 * @param isActivatable Function to determine if an item can be  activated.\n *     Defaults to non-disabled items.\n * @param wrap If true, then the next item at the end of the list is the first\n *     item. Defaults to true.\n * @return The next activatable item or `null` if none are activatable.\n */\nexport function getNextItem<Item extends ListItem>(\n  items: Item[],\n  index: number,\n  isActivatable = isItemNotDisabled<Item>,\n  wrap = true,\n) {\n  for (let i = 1; i < items.length; i++) {\n    const nextIndex = (i + index) % items.length;\n    if (nextIndex < index && !wrap) {\n      // Return if the index loops back to the beginning and not wrapping.\n      return null;\n    }\n\n    const item = items[nextIndex];\n    if (isActivatable(item)) {\n      return item;\n    }\n  }\n\n  return items[index] ? items[index] : null;\n}\n\n/**\n * Retrieves 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 * @param isActivatable Function to determine if an item can be  activated.\n *     Defaults to non-disabled items.\n * @param wrap If true, then the previous item at the beginning of the list is\n *     the last item. Defaults to true.\n * @return The previous activatable item or `null` if none are activatable.\n */\nexport function getPrevItem<Item extends ListItem>(\n  items: Item[],\n  index: number,\n  isActivatable = isItemNotDisabled<Item>,\n  wrap = true,\n) {\n  for (let i = 1; i < items.length; i++) {\n    const prevIndex = (index - i + items.length) % items.length;\n    if (prevIndex > index && !wrap) {\n      // Return if the index loops back to the end and not wrapping.\n      return null;\n    }\n\n    const item = items[prevIndex];\n\n    if (isActivatable(item)) {\n      return item;\n    }\n  }\n\n  return items[index] ? items[index] : null;\n}\n\n/**\n * Activates the next item and focuses it. If nothing is currently activated,\n * activates the first item.\n */\nexport function activateNextItem<Item extends ListItem>(\n  items: Item[],\n  activeItemRecord: null | ItemRecord<Item>,\n  isActivatable = isItemNotDisabled<Item>,\n  wrap = true,\n): Item | null {\n  if (activeItemRecord) {\n    const next = getNextItem(\n      items,\n      activeItemRecord.index,\n      isActivatable,\n      wrap,\n    );\n\n    if (next) {\n      next.tabIndex = 0;\n      next.focus();\n    }\n\n    return next;\n  } else {\n    return activateFirstItem(items, isActivatable);\n  }\n}\n\n/**\n * Activates the previous item and focuses it. If nothing is currently\n * activated, activates the last item.\n */\nexport function activatePreviousItem<Item extends ListItem>(\n  items: Item[],\n  activeItemRecord: null | ItemRecord<Item>,\n  isActivatable = isItemNotDisabled<Item>,\n  wrap = true,\n): Item | null {\n  if (activeItemRecord) {\n    const prev = getPrevItem(\n      items,\n      activeItemRecord.index,\n      isActivatable,\n      wrap,\n    );\n    if (prev) {\n      prev.tabIndex = 0;\n      prev.focus();\n    }\n    return prev;\n  } else {\n    return activateLastItem(items, isActivatable);\n  }\n}\n\n/**\n * Creates an event that requests the parent md-list to deactivate all other\n * items.\n */\nexport function createDeactivateItemsEvent() {\n  return new Event('deactivate-items', {bubbles: true, composed: true});\n}\n\n/**\n * The type of the event that requests the parent md-list to deactivate all\n * other items.\n */\nexport type DeactivateItemsEvent = ReturnType<\n  typeof createDeactivateItemsEvent\n>;\n\n/**\n * Creates an event that requests the menu to set `tabindex=0` on the item and\n * focus it. We use this pattern because List keeps track of what element is\n * active in the List by maintaining tabindex. We do not want list items\n * to set tabindex on themselves or focus themselves so that we can organize all\n * that logic in the parent List and Menus, and list item stays as dumb as\n * possible.\n */\nexport function createRequestActivationEvent() {\n  return new Event('request-activation', {bubbles: true, composed: true});\n}\n\n/**\n * The type of the event that requests the list activates and focuses the item.\n */\nexport type RequestActivationEvent = ReturnType<\n  typeof createRequestActivationEvent\n>;\n\n/**\n * The default `isActivatable` function, which checks if an item is not\n * disabled.\n *\n * @param item The item to check.\n * @return true if `item.disabled` is `false.\n */\nfunction isItemNotDisabled<Item extends ListItem>(item: Item) {\n  return !item.disabled;\n}\n"]}

package/list/internal/list-styles.css

@@ -0,0 +1 @@
+:host{background:var(--md-list-container-color, var(--md-sys-color-surface, #fef7ff));color:unset;display:flex;flex-direction:column;outline:none;padding:8px 0;position:relative}/*# sourceMappingURL=list-styles.css.map */

package/list/internal/list-styles.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["_list.scss"],"names":[],"mappings":"AA+BE,MACE,gFACA,YACA,aACA,sBACA,aACA,cAGA","file":"list-styles.css"}

package/list/internal/list-styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/list/internal/list-styles.js

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./list/internal/list-styles.css.
+import { css } from 'lit';
+export const styles = css `:host{background:var(--md-list-container-color, var(--md-sys-color-surface, #fef7ff));color:unset;display:flex;flex-direction:column;outline:none;padding:8px 0;position:relative}
+`;
+//# sourceMappingURL=list-styles.js.map

package/list/internal/list-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-styles.js","sourceRoot":"","sources":["list-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,4DAA4D;AAC5D,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACxB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2024 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n// Generated stylesheet for ./list/internal/list-styles.css.\nimport {css} from 'lit';\nexport const styles = css`:host{background:var(--md-list-container-color, var(--md-sys-color-surface, #fef7ff));color:unset;display:flex;flex-direction:column;outline:none;padding:8px 0;position:relative}\n`;\n"]}

package/list/internal/list-styles.scss

@@ -0,0 +1,10 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use './list';
+// go/keep-sorted end
+
+@include list.styles;