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

package/menu/lib/menu.js

@@ -4,331 +4,591 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { __decorate, __metadata } from "tslib";
+// Required for @ariaProperty
+// tslint:disable:no-new-decorators
 import '../../list/list.js';
-import '../../menusurface/menu-surface.js';
+import '../../focus/focus-ring.js';
+import '../../elevation/elevation.js';
 import { html, LitElement } from 'lit';
 import { property, query } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
 import { ariaProperty } from '../../decorators/aria-property.js';
-import { MenuSurface } from '../../menusurface/lib/menu-surface.js';
-import { MDCMenuFoundation } from './foundation.js';
+import { MdFocusRing } from '../../focus/focus-ring.js';
+import { pointerPress, shouldShowStrongFocus } from '../../focus/strong-focus.js';
+import { List } from '../../list/lib/list.js';
+import { createAnimationSignal, EASING } from '../../motion/animation.js';
+import { SurfacePositionController } from './surfacePositionController.js';
+import { TypeaheadController } from './typeaheadController.js';
 /**
- * @fires selected {SelectedDetail}
- * @fires action {ActionDetail}
- * @fires items-updated
- * @fires opened
- * @fires closed
+ * Gets the currently focused element on the page.
+ *
+ * @param activeDoc The document or shadowroot from which to start the search.
+ *    Defaults to `window.document`
+ * @return Returns the currently deeply focused element or `null` if none.
+ */
+function getFocusedElement(activeDoc = document) {
+    const activeEl = activeDoc.activeElement;
+    if (!activeEl) {
+        return null;
+    }
+    if (activeEl.shadowRoot) {
+        return getFocusedElement(activeEl.shadowRoot) ?? activeEl;
+    }
+    return activeEl;
+}
+/**
+ * @fires opening Fired before the opening animation begins (not fired on quick)
+ * @fires opened Fired once the menu is open, after any animations
+ * @fires closing Fired before the closing animation begins (not fired on quick)
+ * @fires closed Fired once the menu is closed, after any animations
  */
 export class Menu extends LitElement {
     constructor() {
         super(...arguments);
-        this.listElementInternal = null;
+        /**
+         * The element in which the menu should align to.
+         */
         this.anchor = null;
-        this.open = false;
-        this.quick = false;
-        this.corner = 'BOTTOM_START';
-        this.x = null;
-        this.y = null;
-        this.absolute = false;
-        this.activatable = false;
+        /**
+         * 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.
+         */
         this.fixed = false;
-        this.forceGroupSelection = false;
-        this.fullwidth = false;
-        this.flipMenuHorizontally = false;
-        this.stayOpenOnBodyClick = false;
+        /**
+         * Skips the opening and closing animations.
+         */
+        this.quick = false;
+        /**
+         * 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.
+         */
+        this.hasOverflow = false;
+        /**
+         * Opens the menu and makes it visible. Alternative to the `.show()` and
+         * `.close()` methods
+         */
+        this.open = false;
+        /**
+         * 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
+         */
+        this.xOffset = 0;
+        /**
+         * Offsets the menu's block alignment from the anchor by the given number in
+         * pixels.
+         *
+         * e.g. positive -> down, negative -> up
+         */
+        this.yOffset = 0;
+        /**
+         * The tabindex of the underlying list element.
+         */
+        this.listTabIndex = 0;
+        /**
+         * The max time between the keystrokes of the typeahead menu behavior before
+         * it clears the typeahead buffer.
+         */
+        this.typeaheadBufferTime = 200;
+        /**
+         * The corner of the anchor which to align the menu in the standard logical
+         * property style of <block>_<inline>.
+         */
+        this.anchorCorner = 'END_START';
+        /**
+         * The corner of the menu which to align the anchor in the standard logical
+         * property style of <block>_<inline>.
+         */
+        this.menuCorner = 'START_START';
+        /**
+         * Keeps the user clicks outside the menu
+         */
+        this.stayOpenOnOutsideClick = false;
+        /**
+         * After closing, does not restore focus to the last focused element before
+         * the menu was opened.
+         */
         this.skipRestoreFocus = false;
+        /**
+         * The element that should be focused by default once opened.
+         */
         this.defaultFocus = 'LIST_ROOT';
-        this.listUpdateComplete = null;
+        this.openCloseAnimationSignal = createAnimationSignal();
+        /**
+         * The element that was focused before the menu opened.
+         */
+        this.lastFocusedElement = null;
+        /**
+         * Handles typeahead navigation through the menu.
+         */
+        this.typeaheadController = new TypeaheadController(() => {
+            return {
+                getItems: () => this.items,
+                typeaheadBufferTime: this.typeaheadBufferTime,
+            };
+        });
+        /**
+         * Handles positioning the surface and aligning it to the anchor.
+         */
+        this.menuPositionController = new SurfacePositionController(this, () => {
+            return {
+                anchorCorner: this.anchorCorner,
+                surfaceCorner: this.menuCorner,
+                surfaceEl: this.surfaceEl,
+                anchorEl: this.anchor,
+                isTopLayer: this.fixed,
+                isOpen: this.open,
+                xOffset: this.xOffset,
+                yOffset: this.yOffset,
+                onOpen: this.onOpened,
+                beforeClose: this.beforeClose,
+                onClose: this.onClosed,
+            };
+        });
+        /**
+         * Saves the last focused element focuses the new element based on
+         * `defaultFocus`, and animates open.
+         */
+        this.onOpened = () => {
+            this.lastFocusedElement = getFocusedElement();
+            if (!this.listElement)
+                return;
+            const items = this.listElement.items;
+            const activeItemRecord = List.getActiveItem(items);
+            if (activeItemRecord && this.defaultFocus !== 'NONE') {
+                activeItemRecord.item.active = false;
+            }
+            switch (this.defaultFocus) {
+                case 'FIRST_ITEM':
+                    const first = List.getFirstActivatableItem(items);
+                    if (first) {
+                        first.active = true;
+                    }
+                    break;
+                case 'LAST_ITEM':
+                    const last = List.getLastActivatableItem(items);
+                    if (last) {
+                        last.active = true;
+                    }
+                    break;
+                case 'LIST_ROOT':
+                    this.listElement?.focus();
+                    break;
+                default:
+                case 'NONE':
+                    // Do nothing.
+                    break;
+            }
+            if (this.quick) {
+                this.dispatchEvent(new Event('opened'));
+            }
+            else {
+                this.animateOpen();
+            }
+        };
+        /**
+         * Animates closed.
+         */
+        this.beforeClose = async () => {
+            this.open = false;
+            if (!this.quick) {
+                await this.animateClose();
+            }
+        };
+        /**
+         * Focuses the last focused element.
+         */
+        this.onClosed = () => {
+            if (this.quick) {
+                this.dispatchEvent(new Event('closed'));
+            }
+            if (!this.skipRestoreFocus) {
+                this.lastFocusedElement?.focus?.();
+            }
+        };
+        this.onWindowClick = (e) => {
+            if (!this.stayOpenOnOutsideClick && !e.composedPath().includes(this)) {
+                this.open = false;
+            }
+        };
     }
-    get listElement() {
-        if (!this.listElementInternal) {
-            this.listElementInternal = this.renderRoot.querySelector('md-list');
-            return this.listElementInternal;
-        }
-        return this.listElementInternal;
+    /**
+     * Whether the menu is animating upwards or downwards when opening. This is
+     * helpful for calculating some animation calculations.
+     */
+    get openDirection() {
+        const menuCornerBlock = this.menuCorner.split('_')[0];
+        return menuCornerBlock === 'START' ? 'DOWN' : 'UP';
     }
+    /**
+     * 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() {
         const listElement = this.listElement;
         if (listElement) {
-            return listElement.items;
+            return listElement.items.filter(el => el.hasAttribute('md-menu-item'));
         }
         return [];
     }
     render() {
+        return this.renderSurface();
+    }
+    /**
+     * Renders the positionable surface element and its contents.
+     */
+    renderSurface() {
+        return html `
+       <div
+           class="menu ${classMap(this.getSurfaceClasses())}"
+           style=${styleMap(this.menuPositionController.surfaceStyles)}>
+        ${this.renderList()} 
+        ${this.renderElevation()}
+        ${this.renderFocusRing()}
+       </div>
+     `;
+    }
+    /**
+     * Renders the List element and its items
+     */
+    renderList() {
         return html `
-      <md-menu-surface
-          ?hidden=${!this.open}
-          .anchor=${this.anchor}
-          .open=${this.open}
-          .quick=${this.quick}
-          .corner=${this.corner}
-          .x=${this.x}
-          .y=${this.y}
-          .absolute=${this.absolute}
-          .fixed=${this.fixed}
-          .fullwidth=${this.fullwidth}
-          .flipMenuHorizontally=${this.flipMenuHorizontally}
-          .skipRestoreFocus=${this.skipRestoreFocus}
-          ?stayOpenOnBodyClick=${this.stayOpenOnBodyClick}
-          class="md3-menu"
-          @closed=${this.onClosed}
-          @opened=${this.onOpened}
-          @keydown=${this.onKeydown}>
-        <md-list
-          aria-label="${ifDefined(this.ariaLabel)}"
-          role=${'menu'}
-          .listTabIndex=${-1}
-          .listItemTagName=${this.getMenuItemTagName()}
-          @action=${this.onAction}>
-        <slot></slot>
-      </md-list>
-    </md-menu-surface>`;
+       <md-list
+           .ariaLabel=${this.ariaLabel}
+           role="menu"
+           listTabIndex=${this.listTabIndex}
+           @focus=${this.onListFocus}
+           @blur=${this.onListBlur}
+           @click=${this.onListClick}
+           @keydown=${this.typeaheadController.onKeydown}>
+         ${this.renderMenuItems()}
+       </md-list>`;
+    }
+    /**
+     * Renders the menu items' slot
+     */
+    renderMenuItems() {
+        return html `<slot
+        @close-menu=${this.onCloseMenu}
+        @deactivate-items=${this.onDeactivateItems}></slot>`;
     }
-    getMenuItemTagName() {
-        return 'md-menu-item';
+    /**
+     * Renders the elevation component.
+     */
+    renderElevation() {
+        return html `<md-elevation shadow surface></md-elevation>`;
     }
-    createAdapter() {
+    /**
+     * Renders the focus ring component.
+     */
+    renderFocusRing() {
+        return html `<md-focus-ring></md-focus-ring>`;
+    }
+    getSurfaceClasses() {
         return {
-            addClassToElementAtIndex: (index, className) => {
-                const listElement = this.listElement;
-                if (!listElement) {
-                    return;
-                }
-                const element = listElement.items[index];
-                if (!element) {
-                    return;
-                }
-                element.classList.add(className);
-            },
-            removeClassFromElementAtIndex: (index, className) => {
-                const listElement = this.listElement;
-                if (!listElement) {
-                    return;
-                }
-                const element = listElement.items[index];
-                if (!element) {
-                    return;
-                }
-                element.classList.remove(className);
-            },
-            addAttributeToElementAtIndex: (index, attr, value) => {
-                // TODO(b/240174946): This method is only used for setting
-                // `aria-checked` and `aria-disabled` on the menu items when selected
-                // and disabled states change. Remove this in favor of adding to the
-                // template declaratively.
-            },
-            removeAttributeFromElementAtIndex: (index, attr) => {
-                const listElement = this.listElement;
-                if (!listElement) {
-                    return;
-                }
-                const element = listElement.items[index];
-                if (!element) {
-                    return;
-                }
-                element.removeAttribute(attr);
-            },
-            getAttributeFromElementAtIndex: (index, attr) => {
-                const listElement = this.listElement;
-                if (!listElement) {
-                    return null;
-                }
-                const element = listElement.items[index];
-                if (!element) {
-                    return null;
-                }
-                return element.getAttribute(attr);
-            },
-            elementContainsClass: (element, className) => element.classList.contains(className),
-            closeSurface: (skipRestoreFocus) => {
-                this.skipRestoreFocus = Boolean(skipRestoreFocus);
-                this.open = false;
-            },
-            getElementIndex: (element) => {
-                const listElement = this.listElement;
-                if (listElement) {
-                    return listElement.items.indexOf(element);
-                }
-                return -1;
-            },
-            notifySelected: () => { },
-            getMenuItemCount: () => {
-                const listElement = this.listElement;
-                if (!listElement) {
-                    return 0;
-                }
-                return listElement.items.length;
-            },
-            getSelectedSiblingOfItemAtIndex: (index) => {
-                const listElement = this.listElement;
-                if (!listElement) {
-                    return -1;
-                }
-                // TODO(b/240177152): Remove/refactor this when implementing keyboard
-                // navigation support.
-                // const elementAtIndex = listElement.items[index];
-                // if (!elementAtIndex || !elementAtIndex.group) {
-                //   return -1;
-                // }
-                // for (let i = 0; i < listElement.items.length; i++) {
-                //   if (i === index) {
-                //     continue;
-                //   }
-                //   const current = listElement.items[i];
-                //   if (current.selected && current.group === elementAtIndex.group) {
-                //     return i;
-                //   }
-                // }
-                return -1;
-            },
-            isSelectableItemAtIndex: (index) => {
-                const listElement = this.listElement;
-                if (!listElement) {
-                    return false;
-                }
-                const elementAtIndex = listElement.items[index];
-                if (!elementAtIndex) {
-                    return false;
-                }
-                return elementAtIndex.hasAttribute('group');
-            },
+            open: this.open,
+            fixed: this.fixed,
+            'has-overflow': this.hasOverflow,
         };
     }
-    onKeydown(evt) {
-        if (this.mdcFoundation) {
-            this.mdcFoundation.handleKeydown(evt);
+    onListFocus() {
+        this.focusRing.visible = shouldShowStrongFocus();
+    }
+    onListClick() {
+        pointerPress();
+        this.focusRing.visible = shouldShowStrongFocus();
+    }
+    onListBlur() {
+        this.focusRing.visible = false;
+    }
+    /**
+     * Performs the opening animation:
+     *
+     * https://direct.googleplex.com/#/spec/295000003+271060003
+     */
+    animateOpen() {
+        const surfaceEl = this.surfaceEl;
+        const slotEl = this.slotEl;
+        if (!surfaceEl || !slotEl)
+            return;
+        const openDirection = this.openDirection;
+        this.dispatchEvent(new Event('opening'));
+        // needs to be imperative because we don't want to mix animation and Lit
+        // render timing
+        surfaceEl.classList.toggle('animating', true);
+        const signal = this.openCloseAnimationSignal.start();
+        const height = surfaceEl.offsetHeight;
+        const openingUpwards = openDirection === 'UP';
+        const children = this.items;
+        const FULL_DURATION = 500;
+        const SURFACE_OPACITY_DURATION = 50;
+        const ITEM_OPACITY_DURATION = 250;
+        // We want to fit every child fade-in animation within the full duration of
+        // the animation.
+        const DELAY_BETWEEN_ITEMS = (FULL_DURATION - ITEM_OPACITY_DURATION) / children.length;
+        const surfaceHeightAnimation = surfaceEl.animate([{ height: '0px' }, { height: `${height}px` }], {
+            duration: FULL_DURATION,
+            easing: EASING.EMPHASIZED,
+        });
+        // When we are opening upwards, we want to make sure the last item is always
+        // in view, so we need to translate it upwards the opposite direction of the
+        // height animation
+        const upPositionCorrectionAnimation = slotEl.animate([
+            { transform: openingUpwards ? `translateY(-${height}px)` : '' },
+            { transform: '' }
+        ], { duration: FULL_DURATION, easing: EASING.EMPHASIZED });
+        const surfaceOpacityAnimation = surfaceEl.animate([{ opacity: 0 }, { opacity: 1 }], SURFACE_OPACITY_DURATION);
+        const childrenAnimations = [];
+        for (let i = 0; i < children.length; i++) {
+            // If we are animating upwards, then reverse the children list.
+            const directionalIndex = openingUpwards ? children.length - 1 - i : i;
+            const child = children[directionalIndex];
+            const animation = child.animate([{ opacity: 0 }, { opacity: 1 }], {
+                duration: ITEM_OPACITY_DURATION,
+                delay: DELAY_BETWEEN_ITEMS * i,
+            });
+            // Make them all initially hidden and then clean up at the end of each
+            // animation.
+            child.classList.toggle('hidden', true);
+            animation.addEventListener('finish', () => {
+                child.classList.toggle('hidden', false);
+            });
+            childrenAnimations.push([child, animation]);
         }
+        signal.addEventListener('abort', () => {
+            surfaceHeightAnimation.cancel();
+            upPositionCorrectionAnimation.cancel();
+            surfaceOpacityAnimation.cancel();
+            childrenAnimations.forEach(([child, animation]) => {
+                child.classList.toggle('hidden', false);
+                animation.cancel();
+            });
+        });
+        surfaceHeightAnimation.addEventListener('finish', () => {
+            surfaceEl.classList.toggle('animating', false);
+            this.openCloseAnimationSignal.finish();
+            this.dispatchEvent(new Event('opened'));
+        });
     }
-    onAction(evt) {
-        const listElement = this.listElement;
-        if (this.mdcFoundation && listElement) {
-            const el = evt.detail.item;
-            if (el) {
-                this.mdcFoundation.handleItemAction(el);
+    /**
+     * Performs the closing animation:
+     *
+     * https://direct.googleplex.com/#/spec/295000003+271060003
+     */
+    animateClose() {
+        let resolve;
+        let reject;
+        // This promise blocks the surface position controller from setting
+        // display: none on the surface which will interfere with this animation.
+        const animationEnded = new Promise((res, rej) => {
+            resolve = res;
+            reject = rej;
+        });
+        const surfaceEl = this.surfaceEl;
+        const slotEl = this.slotEl;
+        if (!surfaceEl || !slotEl) {
+            reject();
+            return animationEnded;
+        }
+        const openDirection = this.openDirection;
+        const closingDownwards = openDirection === 'UP';
+        this.dispatchEvent(new Event('closing'));
+        // needs to be imperative because we don't want to mix animation and Lit
+        // render timing
+        surfaceEl.classList.toggle('animating', true);
+        const signal = this.openCloseAnimationSignal.start();
+        const height = surfaceEl.offsetHeight;
+        const children = this.items;
+        const FULL_DURATION = 150;
+        const SURFACE_OPACITY_DURATION = 50;
+        // The surface fades away at the very end
+        const SURFACE_OPACITY_DELAY = FULL_DURATION - SURFACE_OPACITY_DURATION;
+        const ITEM_OPACITY_DURATION = 50;
+        const ITEM_OPACITY_INITIAL_DELAY = 50;
+        const END_HEIGHT_PRECENTAGE = .35;
+        // We want to fit every child fade-out animation within the full duration of
+        // the animation.
+        const DELAY_BETWEEN_ITEMS = (FULL_DURATION - ITEM_OPACITY_INITIAL_DELAY - ITEM_OPACITY_DURATION) /
+            children.length;
+        // The mock has the animation shrink to 35%
+        const surfaceHeightAnimation = surfaceEl.animate([
+            { height: `${height}px` },
+            { height: `${height * END_HEIGHT_PRECENTAGE}px` }
+        ], {
+            duration: FULL_DURATION,
+            easing: EASING.EMPHASIZED_ACCELERATE,
+        });
+        // When we are closing downwards, we want to make sure the last item is
+        // always in view, so we need to translate it upwards the opposite direction
+        // of the height animation
+        const downPositionCorrectionAnimation = slotEl.animate([
+            { transform: '' }, {
+                transform: closingDownwards ?
+                    `translateY(-${height * (1 - END_HEIGHT_PRECENTAGE)}px)` :
+                    ''
             }
+        ], { duration: FULL_DURATION, easing: EASING.EMPHASIZED_ACCELERATE });
+        const surfaceOpacityAnimation = surfaceEl.animate([{ opacity: 1 }, { opacity: 0 }], { duration: SURFACE_OPACITY_DURATION, delay: SURFACE_OPACITY_DELAY });
+        const childrenAnimations = [];
+        for (let i = 0; i < children.length; i++) {
+            // If the animation is closing upwards, then reverse the list of
+            // children so that we animate in the opposite direction.
+            const directionalIndex = closingDownwards ? i : children.length - 1 - i;
+            const child = children[directionalIndex];
+            const animation = child.animate([{ opacity: 1 }, { opacity: 0 }], {
+                duration: ITEM_OPACITY_DURATION,
+                delay: ITEM_OPACITY_INITIAL_DELAY + DELAY_BETWEEN_ITEMS * i,
+            });
+            // Make sure the items stay hidden at the end of each child animation.
+            // We clean this up at the end of the overall animation.
+            animation.addEventListener('finish', () => {
+                child.classList.toggle('hidden', true);
+            });
+            childrenAnimations.push([child, animation]);
         }
+        signal.addEventListener('abort', () => {
+            surfaceHeightAnimation.cancel();
+            downPositionCorrectionAnimation.cancel();
+            surfaceOpacityAnimation.cancel();
+            childrenAnimations.forEach(([child, animation]) => {
+                animation.cancel();
+                child.classList.toggle('hidden', false);
+            });
+            reject();
+        });
+        surfaceHeightAnimation.addEventListener('finish', () => {
+            surfaceEl.classList.toggle('animating', false);
+            childrenAnimations.forEach(([child]) => {
+                child.classList.toggle('hidden', false);
+            });
+            this.openCloseAnimationSignal.finish();
+            this.dispatchEvent(new Event('closed'));
+            resolve(true);
+        });
+        return animationEnded;
     }
-    onOpened() {
-        this.skipRestoreFocus = false;
-        this.open = true;
-        this.listElement?.resetActiveListItem();
-        switch (this.defaultFocus) {
-            case 'FIRST_ITEM':
-                this.listElement?.activateFirstItem();
-                break;
-            case 'LAST_ITEM':
-                this.listElement?.activateLastItem();
-                break;
-            case 'NONE':
-                // Do nothing.
-                break;
-            case 'LIST_ROOT':
-            default:
-                this.listElement?.focus();
-                break;
+    connectedCallback() {
+        super.connectedCallback();
+        if (window && window.addEventListener) {
+            window.addEventListener('click', this.onWindowClick, { capture: true });
         }
     }
-    onClosed() {
-        this.open = false;
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (window && window.removeEventListener) {
+            window.removeEventListener('click', this.onWindowClick);
+        }
     }
-    // tslint:disable:ban-ts-suppressions
-    async getUpdateComplete() {
-        await this.listUpdateComplete;
-        // @ts-ignore
-        const result = await super.getUpdateComplete();
-        return result;
+    onCloseMenu(e) {
+        this.close();
     }
-    // tslint:enable:ban-ts-suppressions
-    async firstUpdated() {
-        if (this.mdcFoundation !== undefined) {
-            this.mdcFoundation.destroy();
-        }
-        this.mdcFoundation = new MDCMenuFoundation(this.createAdapter());
-        const listElement = this.listElement;
-        if (listElement) {
-            this.listUpdateComplete = listElement.updateComplete;
-            await this.listUpdateComplete;
+    onDeactivateItems(e) {
+        e.stopPropagation();
+        const items = this.items;
+        for (const item of items) {
+            item.active = false;
         }
     }
+    focus() {
+        this.listElement?.focus();
+    }
     close() {
         this.open = false;
+        this.items.forEach(item => {
+            item.close?.();
+        });
     }
     show() {
         this.open = true;
     }
 }
 __decorate([
-    query('.md3-menu'),
-    __metadata("design:type", MenuSurface)
-], Menu.prototype, "mdcRoot", void 0);
+    query('md-list'),
+    __metadata("design:type", List)
+], Menu.prototype, "listElement", void 0);
+__decorate([
+    query('.menu'),
+    __metadata("design:type", HTMLElement)
+], Menu.prototype, "surfaceEl", void 0);
 __decorate([
     query('slot'),
     __metadata("design:type", HTMLSlotElement)
-], Menu.prototype, "slotElement", void 0);
+], Menu.prototype, "slotEl", void 0);
 __decorate([
-    property({ type: Object }),
-    __metadata("design:type", HTMLElement)
-], Menu.prototype, "anchor", void 0);
+    query('md-focus-ring'),
+    __metadata("design:type", MdFocusRing)
+], Menu.prototype, "focusRing", void 0);
 __decorate([
-    ariaProperty // tslint:disable-line:no-new-decorators
-    ,
+    ariaProperty,
     property({ type: String, attribute: 'data-aria-label', noAccessor: true }),
     __metadata("design:type", String)
 ], Menu.prototype, "ariaLabel", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true }),
+    property({ attribute: false }),
+    __metadata("design:type", HTMLElement)
+], Menu.prototype, "anchor", void 0);
+__decorate([
+    property({ type: Boolean }),
     __metadata("design:type", Object)
-], Menu.prototype, "open", void 0);
+], Menu.prototype, "fixed", void 0);
 __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Object)
 ], Menu.prototype, "quick", void 0);
 __decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], Menu.prototype, "corner", void 0);
-__decorate([
-    property({ type: Number }),
-    __metadata("design:type", Number)
-], Menu.prototype, "x", void 0);
-__decorate([
-    property({ type: Number }),
-    __metadata("design:type", Number)
-], Menu.prototype, "y", void 0);
-__decorate([
-    property({ type: Boolean }),
+    property({ type: Boolean, attribute: 'has-overflow' }),
     __metadata("design:type", Object)
-], Menu.prototype, "absolute", void 0);
+], Menu.prototype, "hasOverflow", void 0);
 __decorate([
-    property({ type: Boolean }),
+    property({ type: Boolean, reflect: true }),
     __metadata("design:type", Object)
-], Menu.prototype, "activatable", void 0);
+], Menu.prototype, "open", void 0);
 __decorate([
-    property({ type: Boolean }),
+    property({ type: Number, attribute: 'x-offset' }),
     __metadata("design:type", Object)
-], Menu.prototype, "fixed", void 0);
+], Menu.prototype, "xOffset", void 0);
 __decorate([
-    property({ type: Boolean }),
+    property({ type: Number, attribute: 'y-offset' }),
     __metadata("design:type", Object)
-], Menu.prototype, "forceGroupSelection", void 0);
+], Menu.prototype, "yOffset", void 0);
 __decorate([
-    property({ type: Boolean }),
+    property({ type: Number, attribute: 'list-tab-index' }),
     __metadata("design:type", Object)
-], Menu.prototype, "fullwidth", void 0);
+], Menu.prototype, "listTabIndex", void 0);
 __decorate([
-    property({ type: Boolean }),
+    property({ type: Number, attribute: 'typeahead-delay' }),
     __metadata("design:type", Object)
-], Menu.prototype, "flipMenuHorizontally", void 0);
+], Menu.prototype, "typeaheadBufferTime", void 0);
 __decorate([
-    property({ type: Boolean }),
+    property({ type: String, attribute: 'anchor-corner' }),
+    __metadata("design:type", String)
+], Menu.prototype, "anchorCorner", void 0);
+__decorate([
+    property({ type: String, attribute: 'menu-corner' }),
+    __metadata("design:type", String)
+], Menu.prototype, "menuCorner", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'stay-open-on-outside-click' }),
     __metadata("design:type", Object)
-], Menu.prototype, "stayOpenOnBodyClick", void 0);
+], Menu.prototype, "stayOpenOnOutsideClick", void 0);
 __decorate([
-    property({ type: Boolean }),
+    property({ type: Boolean, attribute: 'skip-restore-focus' }),
     __metadata("design:type", Object)
 ], Menu.prototype, "skipRestoreFocus", void 0);
 __decorate([
-    property({ type: String }),
+    property({ type: String, attribute: 'default-focus' }),
     __metadata("design:type", String)
 ], Menu.prototype, "defaultFocus", void 0);
 //# sourceMappingURL=menu.js.map