@material/web 1.0.0-pre.8 → 1.0.0

package/menu/internal/menuitem/menu-item.js

@@ -0,0 +1,200 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import '../../../ripple/ripple.js';
+import '../../../focus/md-focus-ring.js';
+import '../../../labs/item/item.js';
+import { html, LitElement, nothing } from 'lit';
+import { property, query, queryAssignedElements } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { html as staticHtml, literal } from 'lit/static-html.js';
+import { requestUpdateOnAriaChange } from '../../../internal/aria/delegate.js';
+import { MenuItemController } from '../controllers/menuItemController.js';
+/**
+ * @fires close-menu {CloseMenuEvent}
+ */
+export class MenuItemEl extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Disables the item and makes it non-selectable and non-interactive.
+         */
+        this.disabled = false;
+        /**
+         * Sets the behavior and role of the menu item, defaults to "menuitem".
+         */
+        this.type = 'menuitem';
+        /**
+         * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.
+         */
+        this.href = '';
+        /**
+         * Sets the underlying `HTMLAnchorElement`'s `target` attribute when `href` is
+         * set.
+         */
+        this.target = '';
+        /**
+         * Keeps the menu open if clicked or keyboard selected.
+         */
+        this.keepOpen = false;
+        /**
+         * Sets the item in the selected visual state when a submenu is opened.
+         */
+        this.selected = false;
+        this.menuItemController = new MenuItemController(this, {
+            getHeadlineElements: () => {
+                return this.headlineElements;
+            }
+        });
+    }
+    /**
+     * The text that is selectable via typeahead. If not set, defaults to the
+     * innerText of the item slotted into the `"headline"` slot.
+     */
+    get typeaheadText() {
+        return this.menuItemController.typeaheadText;
+    }
+    set typeaheadText(text) {
+        this.menuItemController.setTypeaheadText(text);
+    }
+    render() {
+        return this.renderListItem(html `
+      <md-item>
+        <div slot="container">
+          ${this.renderRipple()}
+          ${this.renderFocusRing()}
+        </div>
+        <slot name="start" slot="start"></slot>
+        <slot name="end" slot="end"></slot>
+        ${this.renderBody()}
+      </md-item>
+    `);
+    }
+    /**
+     * Renders the root list item.
+     *
+     * @param content the child content of the list item.
+     */
+    renderListItem(content) {
+        const isAnchor = this.type === 'link';
+        let tag;
+        switch (this.menuItemController.tagName) {
+            case 'a':
+                tag = literal `a`;
+                break;
+            case 'button':
+                tag = literal `button`;
+                break;
+            default:
+            case 'li':
+                tag = literal `li`;
+                break;
+        }
+        // TODO(b/265339866): announce "button"/"link" inside of a list item. Until
+        // then all are "menuitem" roles for correct announcement.
+        const target = isAnchor && !!this.target ? this.target : nothing;
+        return staticHtml `
+      <${tag}
+        id="item"
+        tabindex=${this.disabled && !isAnchor ? -1 : 0}
+        role=${this.menuItemController.role}
+        aria-label=${this.ariaLabel || nothing}
+        aria-selected=${this.ariaSelected || nothing}
+        aria-checked=${this.ariaChecked || nothing}
+        aria-expanded=${this.ariaExpanded || nothing}
+        aria-haspopup=${this.ariaHasPopup || nothing}
+        class="list-item ${classMap(this.getRenderClasses())}"
+        href=${this.href || nothing}
+        target=${target}
+        @click=${this.menuItemController.onClick}
+        @keydown=${this.menuItemController.onKeydown}
+      >${content}</${tag}>
+    `;
+    }
+    /**
+     * Handles rendering of the ripple element.
+     */
+    renderRipple() {
+        return html `
+      <md-ripple
+          part="ripple"
+          for="item"
+          ?disabled=${this.disabled}></md-ripple>`;
+    }
+    /**
+     * Handles rendering of the focus ring.
+     */
+    renderFocusRing() {
+        return html `
+      <md-focus-ring
+          part="focus-ring"
+          for="item"
+          inward></md-focus-ring>`;
+    }
+    /**
+     * Classes applied to the list item root.
+     */
+    getRenderClasses() {
+        return {
+            'disabled': this.disabled,
+            'selected': this.selected,
+        };
+    }
+    /**
+     * Handles rendering the headline and supporting text.
+     */
+    renderBody() {
+        return html `
+      <slot></slot>
+      <slot name="overline" slot="overline"></slot>
+      <slot name="headline" slot="headline"></slot>
+      <slot name="supporting-text" slot="supporting-text"></slot>
+      <slot name="trailing-supporting-text"
+          slot="trailing-supporting-text"></slot>
+    `;
+    }
+    focus() {
+        // TODO(b/300334509): needed for some cases where delegatesFocus doesn't
+        // work programmatically like in FF and select-option
+        this.listItemRoot?.focus();
+    }
+}
+(() => {
+    requestUpdateOnAriaChange(MenuItemEl);
+})();
+/** @nocollapse */
+MenuItemEl.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MenuItemEl.prototype, "disabled", void 0);
+__decorate([
+    property()
+], MenuItemEl.prototype, "type", void 0);
+__decorate([
+    property()
+], MenuItemEl.prototype, "href", void 0);
+__decorate([
+    property()
+], MenuItemEl.prototype, "target", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'keep-open' })
+], MenuItemEl.prototype, "keepOpen", void 0);
+__decorate([
+    property({ type: Boolean })
+], MenuItemEl.prototype, "selected", void 0);
+__decorate([
+    query('.list-item')
+], MenuItemEl.prototype, "listItemRoot", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'headline' })
+], MenuItemEl.prototype, "headlineElements", void 0);
+__decorate([
+    property({ attribute: 'typeahead-text' })
+], MenuItemEl.prototype, "typeaheadText", null);
+//# sourceMappingURL=menu-item.js.map

package/menu/internal/menuitem/menu-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["menu-item.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../../ripple/ripple.js';\nimport '../../../focus/md-focus-ring.js';\nimport '../../../labs/item/item.js';\n\nimport {html, LitElement, nothing, TemplateResult} from 'lit';\nimport {property, query, queryAssignedElements} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {html as staticHtml, literal, StaticValue} from 'lit/static-html.js';\n\nimport {ARIAMixinStrict} from '../../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../../internal/aria/delegate.js';\nimport {MenuItem, MenuItemController, MenuItemType} from '../controllers/menuItemController.js';\n\n/**\n * @fires close-menu {CloseMenuEvent}\n */\nexport class MenuItemEl extends LitElement implements MenuItem {\n  static {\n    requestUpdateOnAriaChange(MenuItemEl);\n  }\n\n  /** @nocollapse */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true\n  };\n\n  /**\n   * Disables the item and makes it non-selectable and non-interactive.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * Sets the behavior and role of the menu item, defaults to \"menuitem\".\n   */\n  @property() type: MenuItemType = 'menuitem';\n\n  /**\n   * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.\n   */\n  @property() href = '';\n\n  /**\n   * Sets the underlying `HTMLAnchorElement`'s `target` attribute when `href` is\n   * set.\n   */\n  @property() target: '_blank'|'_parent'|'_self'|'_top'|'' = '';\n\n  /**\n   * Keeps the menu open if clicked or keyboard selected.\n   */\n  @property({type: Boolean, attribute: 'keep-open'}) keepOpen = false;\n\n  /**\n   * Sets the item in the selected visual state when a submenu is opened.\n   */\n  @property({type: Boolean}) selected = false;\n\n  @query('.list-item') protected readonly listItemRoot!: HTMLElement|null;\n\n  @queryAssignedElements({slot: 'headline'})\n  protected readonly headlineElements!: HTMLElement[];\n\n  /**\n   * The text that is selectable via typeahead. If not set, defaults to the\n   * innerText of the item slotted into the `\"headline\"` slot.\n   */\n  get typeaheadText() {\n    return this.menuItemController.typeaheadText;\n  }\n\n  @property({attribute: 'typeahead-text'})\n  set typeaheadText(text: string) {\n    this.menuItemController.setTypeaheadText(text);\n  }\n\n  private readonly menuItemController = new MenuItemController(this, {\n    getHeadlineElements: () => {\n      return this.headlineElements;\n    }\n  });\n\n  protected override render() {\n    return this.renderListItem(html`\n      <md-item>\n        <div slot=\"container\">\n          ${this.renderRipple()}\n          ${this.renderFocusRing()}\n        </div>\n        <slot name=\"start\" slot=\"start\"></slot>\n        <slot name=\"end\" slot=\"end\"></slot>\n        ${this.renderBody()}\n      </md-item>\n    `);\n  }\n\n  /**\n   * Renders the root list item.\n   *\n   * @param content the child content of the list item.\n   */\n  protected renderListItem(content: unknown) {\n    const isAnchor = this.type === 'link';\n    let tag: StaticValue;\n    switch (this.menuItemController.tagName) {\n      case 'a':\n        tag = literal`a`;\n        break;\n      case 'button':\n        tag = literal`button`;\n        break;\n      default:\n      case 'li':\n        tag = literal`li`;\n        break;\n    }\n\n    // TODO(b/265339866): announce \"button\"/\"link\" inside of a list item. Until\n    // then all are \"menuitem\" roles for correct announcement.\n    const target = isAnchor && !!this.target ? this.target : nothing;\n    return staticHtml`\n      <${tag}\n        id=\"item\"\n        tabindex=${this.disabled && !isAnchor ? -1 : 0}\n        role=${this.menuItemController.role}\n        aria-label=${(this as ARIAMixinStrict).ariaLabel || nothing}\n        aria-selected=${(this as ARIAMixinStrict).ariaSelected || nothing}\n        aria-checked=${(this as ARIAMixinStrict).ariaChecked || nothing}\n        aria-expanded=${(this as ARIAMixinStrict).ariaExpanded || nothing}\n        aria-haspopup=${(this as ARIAMixinStrict).ariaHasPopup || nothing}\n        class=\"list-item ${classMap(this.getRenderClasses())}\"\n        href=${this.href || nothing}\n        target=${target}\n        @click=${this.menuItemController.onClick}\n        @keydown=${this.menuItemController.onKeydown}\n      >${content}</${tag}>\n    `;\n  }\n\n  /**\n   * Handles rendering of the ripple element.\n   */\n  protected renderRipple(): TemplateResult|typeof nothing {\n    return html`\n      <md-ripple\n          part=\"ripple\"\n          for=\"item\"\n          ?disabled=${this.disabled}></md-ripple>`;\n  }\n\n  /**\n   * Handles rendering of the focus ring.\n   */\n  protected renderFocusRing(): TemplateResult|typeof nothing {\n    return html`\n      <md-focus-ring\n          part=\"focus-ring\"\n          for=\"item\"\n          inward></md-focus-ring>`;\n  }\n\n  /**\n   * Classes applied to the list item root.\n   */\n  protected getRenderClasses(): ClassInfo {\n    return {\n      'disabled': this.disabled,\n      'selected': this.selected,\n    };\n  }\n\n  /**\n   * Handles rendering the headline and supporting text.\n   */\n  protected renderBody() {\n    return html`\n      <slot></slot>\n      <slot name=\"overline\" slot=\"overline\"></slot>\n      <slot name=\"headline\" slot=\"headline\"></slot>\n      <slot name=\"supporting-text\" slot=\"supporting-text\"></slot>\n      <slot name=\"trailing-supporting-text\"\n          slot=\"trailing-supporting-text\"></slot>\n    `;\n  }\n\n  override focus() {\n    // TODO(b/300334509): needed for some cases where delegatesFocus doesn't\n    // work programmatically like in FF and select-option\n    this.listItemRoot?.focus();\n  }\n}\n"]}

package/menu/internal/submenu/_sub-menu.scss

@@ -0,0 +1,12 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin styles {
+  :host {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+  }
+}

package/menu/internal/submenu/sub-menu-styles.css.js

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * SPDX-License-Identifier: Apache-2.0
+  */
+import { css } from 'lit';
+export const styles = css `:host{position:relative;display:flex;flex-direction:column}/*# sourceMappingURL=sub-menu-styles.css.map */
+`;
+//# sourceMappingURL=sub-menu-styles.css.js.map

package/menu/internal/submenu/sub-menu-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sub-menu-styles.css.js","sourceRoot":"","sources":["sub-menu-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{position:relative;display:flex;flex-direction:column}/*# sourceMappingURL=sub-menu-styles.css.map */\n`;\n "]}

package/menu/internal/submenu/sub-menu-styles.scss

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

package/menu/internal/submenu/sub-menu.d.ts

@@ -0,0 +1,101 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { LitElement } from 'lit';
+import { MenuItem } from '../controllers/menuItemController.js';
+import { Menu } from '../controllers/shared.js';
+import { Corner } from '../menu.js';
+/**
+ * @fires deactivate-items Requests the parent menu to deselect other items when
+ * a submenu opens
+ * @fires request-activation Requests the parent make the slotted item focusable
+ * and focuses the item.
+ * @fires deactivate-typeahead Requests the parent menu to deactivate the
+ * typeahead functionality when a submenu opens
+ * @fires activate-typeahead Requests the parent menu to activate the typeahead
+ * functionality when a submenu closes
+ */
+export declare class SubMenu extends LitElement {
+    /**
+     * The anchorCorner to set on the submenu.
+     */
+    anchorCorner: Corner;
+    /**
+     * The menuCorner to set on the submenu.
+     */
+    menuCorner: Corner;
+    /**
+     * The delay between mouseenter and submenu opening.
+     */
+    hoverOpenDelay: number;
+    /**
+     * The delay between ponterleave and the submenu closing.
+     */
+    hoverCloseDelay: number;
+    /**
+     * READONLY: self-identifies as a menu item and sets its identifying attribute
+     */
+    isSubMenu: boolean;
+    get item(): MenuItem;
+    get menu(): Menu;
+    private readonly items;
+    private readonly menus;
+    private previousOpenTimeout;
+    private previousCloseTimeout;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+    /**
+     * Shows the submenu.
+     */
+    show(): Promise<void>;
+    /**
+     * Closes the submenu.
+     */
+    close(): Promise<void>;
+    protected onSlotchange(): void;
+    /**
+     * Starts the default 400ms countdown to open the submenu.
+     *
+     * NOTE: We explicitly use mouse events and not pointer events because
+     * pointer events apply to touch events. And if a user were to tap a
+     * sub-menu, it would fire the "pointerenter", "pointerleave", "click" events
+     * which would open the menu on click, and then set the timeout to close the
+     * menu due to pointerleave.
+     */
+    protected onMouseenter: () => void;
+    /**
+     * Starts the default 400ms countdown to close the submenu.
+     *
+     * NOTE: We explicitly use mouse events and not pointer events because
+     * pointer events apply to touch events. And if a user were to tap a
+     * sub-menu, it would fire the "pointerenter", "pointerleave", "click" events
+     * which would open the menu on click, and then set the timeout to close the
+     * menu due to pointerleave.
+     */
+    protected onMouseleave: () => void;
+    protected onClick(): void;
+    /**
+     * On item keydown handles opening the submenu.
+     */
+    protected onKeydown(event: KeyboardEvent): Promise<void>;
+    private onCloseSubmenu;
+    private onSubMenuKeydown;
+    /**
+     * Determines whether the given KeyboardEvent code is one that should open
+     * the submenu. This is RTL-aware. By default, left, right, space, or enter.
+     *
+     * @param code The native KeyboardEvent code.
+     * @return Whether or not the key code should open the submenu.
+     */
+    private isSubmenuOpenKey;
+    /**
+     * Determines whether the given KeyboardEvent code is one that should close
+     * the submenu. This is RTL-aware. By default right, left, or escape.
+     *
+     * @param code The native KeyboardEvent code.
+     * @return Whether or not the key code should close the submenu.
+     */
+    private isSubmenuCloseKey;
+}