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

package/menu/lib/menu-button-styles.scss

@@ -1,8 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-@use './menu-button';
-
-@include menu-button.styles;

package/menu/lib/menu-button.d.ts

@@ -1,27 +0,0 @@
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { LitElement, PropertyValues } from 'lit';
-import { Menu } from './menu.js';
-/**
- * Menu button component that automatically attaches a slotted menu to the
- * slotted button.
- */
-export declare class MenuButton extends LitElement {
-    protected readonly buttonAssignedElements: HTMLElement[];
-    protected readonly menuAssignedElements: HTMLElement[];
-    get button(): HTMLElement;
-    get menu(): Menu;
-    protected render(): import("lit-html").TemplateResult<1>;
-    protected firstUpdated(changedProperties: PropertyValues): void;
-    /**
-     * If key event is ArrowUp or ArrowDown, opens the menu.
-     */
-    private handleButtonKeydown;
-    /**
-     * Toggles the menu on button click.
-     */
-    private handleButtonClick;
-}

package/menu/lib/menu-button.js

@@ -1,93 +0,0 @@
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { __decorate, __metadata } from "tslib";
-import { html, LitElement } from 'lit';
-import { queryAssignedElements } from 'lit/decorators.js';
-import { Menu } from './menu.js';
-/**
- * Menu button component that automatically attaches a slotted menu to the
- * slotted button.
- */
-export class MenuButton extends LitElement {
-    get button() {
-        if (this.buttonAssignedElements.length === 0) {
-            throw new Error('MenuButton: Missing a slot="button" element.');
-        }
-        return this.buttonAssignedElements[0];
-    }
-    get menu() {
-        if (this.menuAssignedElements.length === 0) {
-            throw new Error('MenuButton: Missing a slot="menu" element.');
-        }
-        if (!(this.menuAssignedElements[0] instanceof Menu)) {
-            throw new Error('MenuButton: The slot="menu" element must be an instance of the ' +
-                'Menu component.');
-        }
-        return this.menuAssignedElements[0];
-    }
-    render() {
-        return html `
-      <div class="md3-menu-button">
-        <span>
-          <slot name="button"
-              @click=${this.handleButtonClick}
-              @keydown=${this.handleButtonKeydown}>
-          </slot>
-        </span>
-        <span><slot name="menu"></slot></span>
-      </div>
-    `;
-    }
-    firstUpdated(changedProperties) {
-        super.firstUpdated(changedProperties);
-        if (!this.menu.anchor) {
-            this.menu.anchor = this.button;
-        }
-    }
-    /**
-     * If key event is ArrowUp or ArrowDown, opens the menu.
-     */
-    handleButtonKeydown(event) {
-        if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown')
-            return;
-        if (event.key === 'ArrowUp') {
-            this.menu.defaultFocus = 'LAST_ITEM';
-        }
-        else if (event.key === 'ArrowDown') {
-            this.menu.defaultFocus = 'FIRST_ITEM';
-        }
-        this.menu.show();
-    }
-    /**
-     * Toggles the menu on button click.
-     */
-    handleButtonClick(event) {
-        if (this.menu.open) {
-            this.menu.close();
-            return;
-        }
-        // Whether the click is from SPACE or ENTER keypress on a button, for which
-        // the browser fires a synthetic click event.
-        const isSyntheticClickEvent = event.pointerType === '';
-        if (isSyntheticClickEvent) {
-            // Key events should automatically focus on first menu item.
-            this.menu.defaultFocus = 'FIRST_ITEM';
-        }
-        else {
-            this.menu.defaultFocus = 'LIST_ROOT';
-        }
-        this.menu.show();
-    }
-}
-__decorate([
-    queryAssignedElements({ slot: 'button', flatten: true }),
-    __metadata("design:type", Array)
-], MenuButton.prototype, "buttonAssignedElements", void 0);
-__decorate([
-    queryAssignedElements({ slot: 'menu', flatten: true }),
-    __metadata("design:type", Array)
-], MenuButton.prototype, "menuAssignedElements", void 0);
-//# sourceMappingURL=menu-button.js.map

package/menu/lib/menu-button.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"menu-button.js","sourceRoot":"","sources":["menu-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AACrD,OAAO,EAAC,qBAAqB,EAAC,MAAM,mBAAmB,CAAC;AAExD,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAC;AAE/B;;;GAGG;AACH,MAAM,OAAO,UAAW,SAAQ,UAAU;IAOxC,IAAI,MAAM;QACR,IAAI,IAAI,CAAC,sBAAsB,CAAC,MAAM,KAAK,CAAC,EAAE;YAC5C,MAAM,IAAI,KAAK,CAAC,8CAA8C,CAAC,CAAA;SAChE;QACD,OAAO,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC;IACxC,CAAC;IAED,IAAI,IAAI;QACN,IAAI,IAAI,CAAC,oBAAoB,CAAC,MAAM,KAAK,CAAC,EAAE;YAC1C,MAAM,IAAI,KAAK,CAAC,4CAA4C,CAAC,CAAA;SAC9D;QACD,IAAI,CAAC,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,YAAY,IAAI,CAAC,EAAE;YACnD,MAAM,IAAI,KAAK,CACX,iEAAiE;gBACjE,iBAAiB,CAAC,CAAC;SACxB;QACD,OAAO,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC;IACtC,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;uBAIQ,IAAI,CAAC,iBAAiB;yBACpB,IAAI,CAAC,mBAAmB;;;;;KAK5C,CAAC;IACJ,CAAC;IAEkB,YAAY,CAAC,iBAAiC;QAC/D,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QAEtC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YACrB,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;SAChC;IACH,CAAC;IAED;;OAEG;IACK,mBAAmB,CAAC,KAAoB;QAC9C,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW;YAAE,OAAO;QAEjE,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE;YAC3B,IAAI,CAAC,IAAI,CAAC,YAAY,GAAG,WAAW,CAAC;SACtC;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;YACpC,IAAI,CAAC,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;SACvC;QACD,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IACnB,CAAC;IAED;;OAEG;IACK,iBAAiB,CAAC,KAAmB;QAC3C,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YAClB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAClB,OAAO;SACR;QAED,2EAA2E;QAC3E,6CAA6C;QAC7C,MAAM,qBAAqB,GAAG,KAAK,CAAC,WAAW,KAAK,EAAE,CAAC;QACvD,IAAI,qBAAqB,EAAE;YACzB,4DAA4D;YAC5D,IAAI,CAAC,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;SACvC;aAAM;YACL,IAAI,CAAC,IAAI,CAAC,YAAY,GAAG,WAAW,CAAC;SACtC;QAED,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IACnB,CAAC;CACF;AAjFC;IADC,qBAAqB,CAAC,EAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;;0DACG;AAG1D;IADC,qBAAqB,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;;wDACG","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, PropertyValues} from 'lit';\nimport {queryAssignedElements} from 'lit/decorators.js';\n\nimport {Menu} from './menu.js';\n\n/**\n * Menu button component that automatically attaches a slotted menu to the\n * slotted button.\n */\nexport class MenuButton extends LitElement {\n  @queryAssignedElements({slot: 'button', flatten: true})\n  protected readonly buttonAssignedElements!: HTMLElement[];\n\n  @queryAssignedElements({slot: 'menu', flatten: true})\n  protected readonly menuAssignedElements!: HTMLElement[];\n\n  get button(): HTMLElement {\n    if (this.buttonAssignedElements.length === 0) {\n      throw new Error('MenuButton: Missing a slot=\"button\" element.')\n    }\n    return this.buttonAssignedElements[0];\n  }\n\n  get menu(): Menu {\n    if (this.menuAssignedElements.length === 0) {\n      throw new Error('MenuButton: Missing a slot=\"menu\" element.')\n    }\n    if (!(this.menuAssignedElements[0] instanceof Menu)) {\n      throw new Error(\n          'MenuButton: The slot=\"menu\" element must be an instance of the ' +\n          'Menu component.');\n    }\n    return this.menuAssignedElements[0];\n  }\n\n  protected override render() {\n    return html`\n      <div class=\"md3-menu-button\">\n        <span>\n          <slot name=\"button\"\n              @click=${this.handleButtonClick}\n              @keydown=${this.handleButtonKeydown}>\n          </slot>\n        </span>\n        <span><slot name=\"menu\"></slot></span>\n      </div>\n    `;\n  }\n\n  protected override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n\n    if (!this.menu.anchor) {\n      this.menu.anchor = this.button;\n    }\n  }\n\n  /**\n   * If key event is ArrowUp or ArrowDown, opens the menu.\n   */\n  private handleButtonKeydown(event: KeyboardEvent) {\n    if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') return;\n\n    if (event.key === 'ArrowUp') {\n      this.menu.defaultFocus = 'LAST_ITEM';\n    } else if (event.key === 'ArrowDown') {\n      this.menu.defaultFocus = 'FIRST_ITEM';\n    }\n    this.menu.show();\n  }\n\n  /**\n   * Toggles the menu on button click.\n   */\n  private handleButtonClick(event: PointerEvent) {\n    if (this.menu.open) {\n      this.menu.close();\n      return;\n    }\n\n    // Whether the click is from SPACE or ENTER keypress on a button, for which\n    // the browser fires a synthetic click event.\n    const isSyntheticClickEvent = event.pointerType === '';\n    if (isSyntheticClickEvent) {\n      // Key events should automatically focus on first menu item.\n      this.menu.defaultFocus = 'FIRST_ITEM';\n    } else {\n      this.menu.defaultFocus = 'LIST_ROOT';\n    }\n\n    this.menu.show();\n  }\n}\n"]}

package/menu/menu-button.d.ts

@@ -1,14 +0,0 @@
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { MenuButton } from './lib/menu-button.js';
-declare global {
-    interface HTMLElementTagNameMap {
-        'md-menu-button': MdMenuButton;
-    }
-}
-export declare class MdMenuButton extends MenuButton {
-    static styles: import("lit").CSSResult[];
-}

package/menu/menu-button.js

@@ -1,17 +0,0 @@
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { __decorate } from "tslib";
-import { customElement } from 'lit/decorators.js';
-import { MenuButton } from './lib/menu-button.js';
-import { styles } from './lib/menu-button-styles.css.js';
-let MdMenuButton = class MdMenuButton extends MenuButton {
-};
-MdMenuButton.styles = [styles];
-MdMenuButton = __decorate([
-    customElement('md-menu-button')
-], MdMenuButton);
-export { MdMenuButton };
-//# sourceMappingURL=menu-button.js.map

package/menu/menu-button.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"menu-button.js","sourceRoot":"","sources":["menu-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAC,MAAM,EAAC,MAAM,iCAAiC,CAAC;AASvD,IAAa,YAAY,GAAzB,MAAa,YAAa,SAAQ,UAAU;CAE3C,CAAA;AADiB,mBAAM,GAAG,CAAC,MAAM,CAAE,CAAA;AADvB,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAExB;SAFY,YAAY","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {MenuButton} from './lib/menu-button.js';\nimport {styles} from './lib/menu-button-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-menu-button': MdMenuButton;\n  }\n}\n\n@customElement('md-menu-button')\nexport class MdMenuButton extends MenuButton {\n  static override styles = [styles];\n}\n"]}