@material/web 1.0.0-pre.8 → 1.0.0

package/menu/lib/_menu.scss

@@ -1,103 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// go/keep-sorted start
-@use 'sass:list';
-@use 'sass:map';
-@use 'sass:string';
-// go/keep-sorted end
-// go/keep-sorted start
-@use '../../elevation/elevation';
-@use '../../focus/focus-ring';
-@use '../../list/list' as md-list;
-@use '../../list/list-item';
-@use '../../sass/theme';
-@use '../../tokens';
-// go/keep-sorted end
-
-@mixin theme($tokens) {
-  $tokens: theme.validate-theme(tokens.md-comp-menu-values(), $tokens);
-
-  @each $token, $value in $tokens {
-    @if $value {
-      --md-menu-#{$token}: #{$value};
-    }
-  }
-}
-
-@mixin styles() {
-  $tokens: tokens.md-comp-menu-values();
-
-  :host {
-    @each $token, $value in $tokens {
-      --_#{$token}: var(--md-menu-#{$token}, #{$value});
-    }
-
-    @include md-list.theme(
-      (
-        'container-color': var(--_container-color),
-      )
-    );
-
-    @include elevation.theme(
-      (
-        'level': var(--_container-elevation),
-        'shadow-color': var(--_container-shadow-color),
-      )
-    );
-
-    @include focus-ring.theme(
-      (
-        'shape': var(--_container-shape),
-      )
-    );
-
-    min-width: 300px;
-  }
-
-  .menu {
-    border-radius: var(--_container-shape);
-    display: none;
-    opacity: 0;
-    z-index: 20;
-    position: absolute;
-    user-select: none;
-    max-height: inherit;
-    height: inherit;
-    min-width: inherit;
-
-    &.fixed {
-      position: fixed;
-    }
-
-    md-list {
-      height: inherit;
-      max-height: inherit;
-      display: block;
-      overflow: auto;
-      min-width: inherit;
-      border-radius: inherit;
-    }
-
-    &.has-overflow md-list {
-      overflow: visible;
-    }
-
-    &.animating md-list {
-      pointer-events: none;
-      overflow: hidden;
-    }
-
-    &.animating ::slotted(.hidden) {
-      opacity: 0;
-    }
-
-    slot {
-      display: block;
-      height: inherit;
-      max-height: inherit;
-    }
-  }
-}

package/menu/lib/menu-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-menu-container-color, var(--md-sys-color-surface-container, #f3edf7));--_container-elevation: var(--md-menu-container-elevation, 2);--_container-shadow-color: var(--md-menu-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-menu-container-shape, 4px);--md-list-container-color: var(--_container-color);--md-elevation-level:var(--_container-elevation);--md-elevation-shadow-color:var(--_container-shadow-color);--md-focus-ring-shape: var(--_container-shape);min-width:300px}.menu{border-radius:var(--_container-shape);display:none;opacity:0;z-index:20;position:absolute;user-select:none;max-height:inherit;height:inherit;min-width:inherit}.menu.fixed{position:fixed}.menu md-list{height:inherit;max-height:inherit;display:block;overflow:auto;min-width:inherit;border-radius:inherit}.menu.has-overflow md-list{overflow:visible}.menu.animating md-list{pointer-events:none;overflow:hidden}.menu.animating ::slotted(.hidden){opacity:0}.menu slot{display:block;height:inherit;max-height:inherit}/*# sourceMappingURL=menu-styles.css.map */
-`;
-//# sourceMappingURL=menu-styles.css.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"menu-styles.css.js","sourceRoot":"","sources":["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{--_container-color: var(--md-menu-container-color, var(--md-sys-color-surface-container, #f3edf7));--_container-elevation: var(--md-menu-container-elevation, 2);--_container-shadow-color: var(--md-menu-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-menu-container-shape, 4px);--md-list-container-color: var(--_container-color);--md-elevation-level:var(--_container-elevation);--md-elevation-shadow-color:var(--_container-shadow-color);--md-focus-ring-shape: var(--_container-shape);min-width:300px}.menu{border-radius:var(--_container-shape);display:none;opacity:0;z-index:20;position:absolute;user-select:none;max-height:inherit;height:inherit;min-width:inherit}.menu.fixed{position:fixed}.menu md-list{height:inherit;max-height:inherit;display:block;overflow:auto;min-width:inherit;border-radius:inherit}.menu.has-overflow md-list{overflow:visible}.menu.animating md-list{pointer-events:none;overflow:hidden}.menu.animating ::slotted(.hidden){opacity:0}.menu slot{display:block;height:inherit;max-height:inherit}/*# sourceMappingURL=menu-styles.css.map */\n`;\n "]}

package/menu/lib/menu.d.ts

@@ -1,211 +0,0 @@
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import '../../list/list.js';
-import '../../focus/focus-ring.js';
-import '../../elevation/elevation.js';
-import { LitElement } from 'lit';
-import { ARIARole } from '../../types/aria.js';
-import { MenuItem } from './shared.js';
-import { Corner, SurfacePositionTarget } from './surfacePositionController.js';
-import { TypeaheadController } from './typeaheadController.js';
-export { Corner } from './surfacePositionController.js';
-/**
- * The default value for the typeahead buffer time in Milliseconds.
- */
-export declare const DEFAULT_TYPEAHEAD_BUFFER_TIME = 200;
-/**
- * Element to focus on when menu is first opened.
- */
-export type DefaultFocusState = 'NONE' | 'LIST_ROOT' | 'FIRST_ITEM' | 'LAST_ITEM';
-/**
- * @fires opening Fired before the opening animation begins
- * @fires opened Fired once the menu is open, after any animations
- * @fires closing Fired before the closing animation begins
- * @fires closed Fired once the menu is closed, after any animations
- */
-export declare abstract class Menu extends LitElement {
-    private readonly listElement;
-    private readonly surfaceEl;
-    private readonly slotEl;
-    /**
-     * The element in which the menu should align to.
-     */
-    anchor: HTMLElement & Partial<SurfacePositionTarget> | null;
-    /**
-     * Makes the element use `position:fixed` instead of `position:absolute`. In
-     * most cases, the menu should position itself above most other
-     * `position:absolute` or `position:fixed` elements when placed inside of
-     * them. e.g. using a menu inside of an `md-dialog`.
-     *
-     * __NOTE__: Fixed menus will not scroll with the page and will be fixed to
-     * the window instead.
-     */
-    fixed: boolean;
-    /**
-     * Skips the opening and closing animations.
-     */
-    quick: boolean;
-    /**
-     * Displays overflow content like a submenu.
-     *
-     * __NOTE__: This may cause adverse effects if you set
-     * `md-menu {max-height:...}`
-     * and have items overflowing items in the "y" direction.
-     */
-    hasOverflow: boolean;
-    /**
-     * Opens the menu and makes it visible. Alternative to the `.show()` and
-     * `.close()` methods
-     */
-    open: boolean;
-    /**
-     * Offsets the menu's inline alignment from the anchor by the given number in
-     * pixels. This value is direction aware and will follow the LTR / RTL
-     * direction.
-     *
-     * e.g. LTR: positive -> right, negative -> left
-     *      RTL: positive -> left, negative -> right
-     */
-    xOffset: number;
-    /**
-     * Offsets the menu's block alignment from the anchor by the given number in
-     * pixels.
-     *
-     * e.g. positive -> down, negative -> up
-     */
-    yOffset: number;
-    /**
-     * The tabindex of the underlying list element.
-     */
-    listTabIndex: number;
-    /**
-     * The role of the underlying list element.
-     */
-    type: ARIARole;
-    /**
-     * The max time between the keystrokes of the typeahead menu behavior before
-     * it clears the typeahead buffer.
-     */
-    typeaheadBufferTime: number;
-    /**
-     * The corner of the anchor which to align the menu in the standard logical
-     * property style of <block>_<inline>.
-     */
-    anchorCorner: Corner;
-    /**
-     * The corner of the menu which to align the anchor in the standard logical
-     * property style of <block>_<inline>.
-     */
-    menuCorner: Corner;
-    /**
-     * Keeps the user clicks outside the menu.
-     *
-     * NOTE: clicking outside may still cause focusout to close the menu so see
-     * `stayOpenOnFocusout`.
-     */
-    stayOpenOnOutsideClick: boolean;
-    /**
-     * Keeps the menu open when focus leaves the menu's composed subtree.
-     *
-     * NOTE: Focusout behavior will stop propagation of the focusout event. Set
-     * this property to true to opt-out of menu's focuout handling altogether.
-     */
-    stayOpenOnFocusout: boolean;
-    /**
-     * After closing, does not restore focus to the last focused element before
-     * the menu was opened.
-     */
-    skipRestoreFocus: boolean;
-    /**
-     * The element that should be focused by default once opened.
-     */
-    defaultFocus: DefaultFocusState;
-    private typeaheadActive;
-    private readonly openCloseAnimationSignal;
-    /**
-     * Whether the menu is animating upwards or downwards when opening. This is
-     * helpful for calculating some animation calculations.
-     */
-    private get openDirection();
-    /**
-     * The element that was focused before the menu opened.
-     */
-    private lastFocusedElement;
-    /**
-     * Handles typeahead navigation through the menu.
-     */
-    typeaheadController: TypeaheadController;
-    /**
-     * Handles positioning the surface and aligning it to the anchor.
-     */
-    private readonly menuPositionController;
-    /**
-     * The menu items associated with this menu. The items must be `MenuItem`s and
-     * have both the `md-menu-item` and `md-list-item` attributes.
-     */
-    get items(): MenuItem[];
-    protected render(): import("lit-html").TemplateResult<1>;
-    /**
-     * Renders the positionable surface element and its contents.
-     */
-    private renderSurface;
-    /**
-     * Renders the List element and its items
-     */
-    private renderList;
-    /**
-     * Renders the menu items' slot
-     */
-    private renderMenuItems;
-    /**
-     * Renders the elevation component.
-     */
-    private renderElevation;
-    /**
-     * Renders the focus ring component.
-     */
-    private renderFocusRing;
-    private getSurfaceClasses;
-    private handleFocusout;
-    private handleListKeydown;
-    /**
-     * Saves the last focused element focuses the new element based on
-     * `defaultFocus`, and animates open.
-     */
-    private readonly onOpened;
-    /**
-     * Animates closed.
-     */
-    private readonly beforeClose;
-    /**
-     * Focuses the last focused element.
-     */
-    private readonly onClosed;
-    /**
-     * Performs the opening animation:
-     *
-     * https://direct.googleplex.com/#/spec/295000003+271060003
-     */
-    private animateOpen;
-    /**
-     * Performs the closing animation:
-     *
-     * https://direct.googleplex.com/#/spec/295000003+271060003
-     */
-    private animateClose;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private readonly onWindowClick;
-    private onCloseMenu;
-    private onDeactivateItems;
-    private handleDeactivateTypeahead;
-    private handleActivateTypeahead;
-    private handleStayOpenOnFocusout;
-    private handleCloseOnFocusout;
-    focus(): void;
-    close(): void;
-    show(): void;
-}