@material/web 1.0.0-pre.8 → 1.0.0

package/list/lib/_list.scss

@@ -1,55 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
-// go/keep-sorted start
-@use 'sass:list';
-@use 'sass:map';
-@use 'sass:string';
-// go/keep-sorted end
-// go/keep-sorted start
-@use '../../sass/theme';
-@use '../../tokens';
-@use './listitem/list-item';
-// go/keep-sorted end
-
-@mixin theme($tokens) {
-  $tokens: theme.validate-theme(tokens.md-comp-list-values(), $tokens);
-
-  @each $token, $value in $tokens {
-    @if $value {
-      --md-list-#{$token}: #{$value};
-    }
-  }
-}
-
-@mixin styles() {
-  $tokens: tokens.md-comp-list-values();
-
-  :host {
-    @each $token, $value in $tokens {
-      --_#{$token}: var(--md-list-#{$token}, #{$value});
-    }
-
-    color: unset;
-    min-width: 300px;
-  }
-
-  .md3-list {
-    background-color: var(--_container-color);
-    border-radius: inherit;
-    display: block;
-    list-style-type: none;
-    margin: 0;
-    min-width: inherit;
-    outline: none;
-    padding: 8px 0;
-    // Add position so the elevation overlay (which is absolutely positioned)
-    // can be positioned relative to the list root.
-    position: relative;
-  }
-}

package/list/lib/list-styles.css.js

@@ -1,9 +0,0 @@
-/**
-  * @license
-  * Copyright 2022 Google LLC
-  * SPDX-License-Identifier: Apache-2.0
-  */
-import { css } from 'lit';
-export const styles = css `:host{--_container-color: var(--md-list-container-color, var(--md-sys-color-surface, #fef7ff));color:unset;min-width:300px}.md3-list{background-color:var(--_container-color);border-radius:inherit;display:block;list-style-type:none;margin:0;min-width:inherit;outline:none;padding:8px 0;position:relative}/*# sourceMappingURL=list-styles.css.map */
-`;
-//# sourceMappingURL=list-styles.css.js.map

package/list/lib/list-styles.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"list-styles.css.js","sourceRoot":"","sources":["list-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_container-color: var(--md-list-container-color, var(--md-sys-color-surface, #fef7ff));color:unset;min-width:300px}.md3-list{background-color:var(--_container-color);border-radius:inherit;display:block;list-style-type:none;margin:0;min-width:inherit;outline:none;padding:8px 0;position:relative}/*# sourceMappingURL=list-styles.css.map */\n`;\n "]}

package/list/lib/list.d.ts

@@ -1,110 +0,0 @@
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { LitElement } from 'lit';
-import { ARIARole } from '../../types/aria.js';
-import { ListItem } from './listitem/list-item.js';
-export declare class List extends LitElement {
-    static shadowRootOptions: ShadowRootInit;
-    type: ARIARole | '';
-    /**
-     * The tabindex of the underlying list.
-     */
-    listTabIndex: number;
-    listRoot: HTMLElement | null;
-    /**
-     * 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[];
-    protected render(): import("lit-html").TemplateResult<1>;
-    /**
-     * Renders the main list element.
-     */
-    private renderList;
-    /**
-     * The content to be slotted into the list.
-     */
-    private renderContent;
-    /**
-     * Handles keyboard navigation in the list.
-     *
-     * @param event {KeyboardEvent} The keyboard event that triggers this handler.
-     */
-    handleKeydown(event: KeyboardEvent): void;
-    /**
-     * 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.
-     */
-    private static getNextItem;
-    /**
-     * 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.
-     */
-    private static getPrevItem;
-}

package/list/lib/list.js

@@ -1,260 +0,0 @@
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-var _a;
-import { __decorate } from "tslib";
-import { html, LitElement, nothing } from 'lit';
-import { property, query, queryAssignedElements } from 'lit/decorators.js';
-import { requestUpdateOnAriaChange } from '../../aria/delegate.js';
-const NAVIGABLE_KEYS = {
-    ArrowDown: 'ArrowDown',
-    ArrowUp: 'ArrowUp',
-    Home: 'Home',
-    End: 'End',
-};
-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);
-        this.type = 'list';
-        /**
-         * The tabindex of the underlying list.
-         */
-        this.listTabIndex = 0;
-    }
-    render() {
-        return this.renderList();
-    }
-    /**
-     * Renders the main list element.
-     */
-    renderList() {
-        // Needed for closure conformance
-        const { ariaLabel } = this;
-        return html `
-    <ul class="md3-list"
-        aria-label=${ariaLabel || nothing}
-        tabindex=${this.listTabIndex}
-        role=${this.type || nothing}
-        @keydown=${this.handleKeydown}
-        >
-      ${this.renderContent()}
-    </ul>
-  `;
-    }
-    /**
-     * 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) {
-        const key = event.key;
-        if (!isNavigableKey(key)) {
-            return;
-        }
-        // do not use this.items directly so we don't re-query the DOM unnecessarily
-        const items = this.items;
-        if (!items.length) {
-            return;
-        }
-        const activeItemRecord = List.getActiveItem(items);
-        if (activeItemRecord) {
-            activeItemRecord.item.active = false;
-        }
-        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;
-        }
-    }
-    /**
-     * 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;
-        }
-    }
-    /**
-     * 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;
-        }
-    }
-    /**
-     * 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;
-    }
-    focus() {
-        this.listRoot?.focus();
-    }
-    /**
-     * 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;
-    }
-    /**
-     * 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;
-    }
-    /**
-     * 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;
-    }
-    /**
-     * 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;
-    }
-    /**
-     * 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;
-    }
-}
-_a = List;
-(() => {
-    requestUpdateOnAriaChange(_a);
-})();
-List.shadowRootOptions = { mode: 'open', delegatesFocus: true };
-__decorate([
-    property()
-], List.prototype, "type", void 0);
-__decorate([
-    property({ type: Number })
-], List.prototype, "listTabIndex", void 0);
-__decorate([
-    query('.md3-list')
-], List.prototype, "listRoot", void 0);
-__decorate([
-    queryAssignedElements({ flatten: true, selector: '[md-list-item]' })
-], List.prototype, "items", void 0);
-//# sourceMappingURL=list.js.map

package/list/lib/list.js.map

@@ -1 +0,0 @@
-{"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 {html, LitElement, nothing} from 'lit';\nimport {property, query, queryAssignedElements} from 'lit/decorators.js';\n\nimport {requestUpdateOnAriaChange} from '../../aria/delegate.js';\nimport {ARIAMixinStrict, 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 {\n    requestUpdateOnAriaChange(this);\n  }\n\n  static override shadowRootOptions:\n      ShadowRootInit = {mode: 'open', delegatesFocus: true};\n\n  @property() type: ARIARole|'' = 'list';\n\n  /**\n   * The tabindex of the underlying list.\n   */\n  @property({type: Number}) listTabIndex = 0;\n\n  @query('.md3-list') listRoot!: HTMLElement|null;\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  protected override render() {\n    return this.renderList();\n  }\n\n  /**\n   * Renders the main list element.\n   */\n  private renderList() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n    <ul class=\"md3-list\"\n        aria-label=${ariaLabel || nothing}\n        tabindex=${this.listTabIndex}\n        role=${this.type || nothing}\n        @keydown=${this.handleKeydown}\n        >\n      ${this.renderContent()}\n    </ul>\n  `;\n  }\n\n  /**\n   * The content to be slotted into the list.\n   */\n  private 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  private 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  private 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"]}