@material/web 1.0.0-pre.12 → 1.0.0-pre.14

package/menu/lib/submenuitem/sub-menu-item.js

@@ -1,293 +0,0 @@
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { __decorate } from "tslib";
-import { html } from 'lit';
-import { property, queryAssignedElements } from 'lit/decorators.js';
-import { List } from '../../../list/lib/list.js';
-import { MenuItemEl } from '../menuitem/menu-item.js';
-import { ActivateTypeaheadEvent, CLOSE_REASON, CloseOnFocusoutEvent, DeactivateItemsEvent, DeactivateTypeaheadEvent, KEYDOWN_CLOSE_KEYS, NAVIGABLE_KEY, SELECTION_KEY, StayOpenOnFocusoutEvent } from '../shared.js';
-function stopPropagation(e) {
-    e.stopPropagation();
-}
-/**
- * @fires deactivate-items {DeactivateItemsEvent} Requests the parent menu to
- *     deselect other items when a submenu opens
- * @fires deactivate-typeahead {DeactivateItemsEvent} Requests the parent menu
- *     to deactivate the typeahead functionality when a submenu opens
- * @fires activate-typeahead {DeactivateItemsEvent} Requests the parent menu to
- *     activate the typeahead functionality when a submenu closes
- * @fires stay-open-on-focusout {StayOpenOnFocusoutEvent} Requests the parent
- *     menu to stay open when focusout event is fired or has a `null`
- *     `relatedTarget` when submenu is opened.
- * @fires close-on-focusout {CloseOnFocusoutEvent} Requests the parent
- *     menu to close when focusout event is fired or has a `null`
- *     `relatedTarget` When submenu is closed.
- */
-export class SubMenuItem extends MenuItemEl {
-    constructor() {
-        super(...arguments);
-        /**
-         * The anchorCorner to set on the submenu.
-         */
-        this.anchorCorner = 'START_END';
-        /**
-         * The menuCorner to set on the submenu.
-         */
-        this.menuCorner = 'START_START';
-        /**
-         * The delay between pointerenter and submenu opening.
-         */
-        this.hoverOpenDelay = 400;
-        /**
-         * The delay between ponterleave and the submenu closing.
-         */
-        this.hoverCloseDelay = 400;
-        /**
-         * Sets the item in the selected visual state when a submenu is opened.
-         */
-        this.selected = false;
-        this.keepOpenOnClick = true;
-        this.previousOpenTimeout = 0;
-        this.previousCloseTimeout = 0;
-        /**
-         * Starts the default 400ms countdown to open the submenu.
-         */
-        this.onPointerenter = () => {
-            clearTimeout(this.previousOpenTimeout);
-            clearTimeout(this.previousCloseTimeout);
-            if (this.submenuEl?.open)
-                return;
-            // Open synchronously if delay is 0. (screenshot tests infra
-            // would never resolve otherwise)
-            if (!this.hoverOpenDelay) {
-                this.show();
-            }
-            else {
-                this.previousOpenTimeout = setTimeout(() => {
-                    this.show();
-                }, this.hoverOpenDelay);
-            }
-        };
-        /**
-         * Starts the default 400ms countdown to close the submenu.
-         */
-        this.onPointerleave = () => {
-            clearTimeout(this.previousCloseTimeout);
-            clearTimeout(this.previousOpenTimeout);
-            // Close synchronously if delay is 0. (screenshot tests infra
-            // would never resolve otherwise)
-            if (!this.hoverCloseDelay) {
-                this.close();
-            }
-            else {
-                this.previousCloseTimeout = setTimeout(() => {
-                    this.close();
-                }, this.hoverCloseDelay);
-            }
-        };
-    }
-    get submenuEl() {
-        return this.menus[0];
-    }
-    onClick() {
-        this.show();
-    }
-    /**
-     * On item keydown handles opening the submenu.
-     */
-    onKeydown(e) {
-        const shouldOpenSubmenu = this.isSubmenuOpenKey(e.code);
-        if (e.code === SELECTION_KEY.SPACE) {
-            // prevent space from scrolling. Only open the submenu.
-            e.preventDefault();
-        }
-        if (!shouldOpenSubmenu) {
-            super.onKeydown(e);
-            return;
-        }
-        const submenu = this.submenuEl;
-        if (!submenu)
-            return;
-        const submenuItems = submenu.items;
-        const firstActivatableItem = List.getFirstActivatableItem(submenuItems);
-        if (firstActivatableItem) {
-            this.show(() => {
-                firstActivatableItem.active = true;
-            });
-            return;
-        }
-    }
-    /**
-     * Render the submenu at the end
-     */
-    renderEnd() {
-        return html `${super.renderEnd()}${this.renderSubMenu()}`;
-    }
-    /**
-     * Renders the slot for the submenu.
-     */
-    renderSubMenu() {
-        return html `<span class="submenu"><slot
-        name="submenu"
-        @pointerdown=${stopPropagation}
-        @click=${stopPropagation}
-        @keydown=${this.onSubMenuKeydown}
-        @close-menu=${this.onCloseSubmenu}
-    ></slot></span>`;
-    }
-    onCloseSubmenu(e) {
-        e.itemPath.push(this);
-        // Restore focusout behavior
-        this.dispatchEvent(new CloseOnFocusoutEvent());
-        this.dispatchEvent(new ActivateTypeaheadEvent());
-        // Escape should only close one menu not all of the menus unlike space or
-        // click selection which should close all menus.
-        if (e.reason.kind === CLOSE_REASON.KEYDOWN &&
-            e.reason.key === KEYDOWN_CLOSE_KEYS.ESCAPE) {
-            e.stopPropagation();
-            this.active = true;
-            this.selected = false;
-            // It might already be active so manually focus
-            this.listItemRoot?.focus();
-            return;
-        }
-        this.active = false;
-        this.selected = false;
-    }
-    async onSubMenuKeydown(e) {
-        // Stop propagation so that we don't accidentally close every parent menu.
-        // Additionally, we want to isolate things like the typeahead keydowns
-        // from bubbling up to the parent menu and confounding things.
-        e.stopPropagation();
-        const shouldClose = this.isSubmenuCloseKey(e.code);
-        if (!shouldClose)
-            return;
-        this.close(() => {
-            List.deactivateActiveItem(this.submenuEl.items);
-            this.listItemRoot?.focus();
-            this.active = true;
-        });
-    }
-    /**
-     * Shows the submenu.
-     *
-     * @param onOpened A function to call after the menu is opened.
-     */
-    show(onOpened = () => { }) {
-        const menu = this.submenuEl;
-        if (!menu)
-            return;
-        menu.quick = true;
-        // Submenus are in overflow when not fixed. Can remove once we have native
-        // popup support
-        menu.hasOverflow = true;
-        menu.anchorCorner = this.anchorCorner;
-        menu.menuCorner = this.menuCorner;
-        menu.anchor = this;
-        // We manually set focus with `active` on keyboard navigation. And we
-        // want to focus the root on hover, so the user can pick up navigation with
-        // keyboard after hover.
-        menu.defaultFocus = 'LIST_ROOT';
-        menu.skipRestoreFocus = true;
-        menu.stayOpenOnOutsideClick = true;
-        menu.stayOpenOnFocusout = true;
-        // Menu could already be opened because of mouse interaction
-        const menuAlreadyOpen = menu.open;
-        // We want the parent to stay open in the case such that a middle submenu
-        // has a submenuitem hovered which opens a third submenut. Then if you hover
-        // on yet another middle menu-item (not submenuitem) then focusout Event's
-        // relatedTarget will be `null` thus, causing all the menus to close
-        this.dispatchEvent(new StayOpenOnFocusoutEvent());
-        menu.show();
-        // Deactivate other items. This can be the case if the user has tabbed
-        // around the menu and then mouses over an md-sub-menu.
-        this.dispatchEvent(new DeactivateItemsEvent());
-        this.dispatchEvent(new DeactivateTypeaheadEvent());
-        this.selected = true;
-        // This is the case of mouse hovering when already opened via keyboard or
-        // vice versa
-        if (menuAlreadyOpen) {
-            onOpened();
-        }
-        else {
-            menu.addEventListener('opened', onOpened, { once: true });
-        }
-    }
-    /**
-     * Closes the submenu.
-     *
-     * @param onClosed A function to call after the menu is closed.
-     */
-    close(onClosed = () => { }) {
-        const menu = this.submenuEl;
-        if (!menu || !menu.open)
-            return;
-        this.dispatchEvent(new ActivateTypeaheadEvent());
-        menu.quick = true;
-        menu.close();
-        // Restore focusout behavior.
-        this.dispatchEvent(new CloseOnFocusoutEvent());
-        this.active = false;
-        this.selected = false;
-        menu.addEventListener('closed', onClosed, { once: true });
-    }
-    /**
-     * 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.
-     */
-    isSubmenuOpenKey(code) {
-        const isRtl = getComputedStyle(this).direction === 'rtl';
-        const arrowEnterKey = isRtl ? NAVIGABLE_KEY.LEFT : NAVIGABLE_KEY.RIGHT;
-        switch (code) {
-            case arrowEnterKey:
-            case SELECTION_KEY.SPACE:
-            case SELECTION_KEY.ENTER:
-                return true;
-            default:
-                return false;
-        }
-    }
-    /**
-     * 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.
-     */
-    isSubmenuCloseKey(code) {
-        const isRtl = getComputedStyle(this).direction === 'rtl';
-        const arrowEnterKey = isRtl ? NAVIGABLE_KEY.RIGHT : NAVIGABLE_KEY.LEFT;
-        switch (code) {
-            case arrowEnterKey:
-            case KEYDOWN_CLOSE_KEYS.ESCAPE:
-                return true;
-            default:
-                return false;
-        }
-    }
-}
-__decorate([
-    property({ attribute: 'anchor-corner' })
-], SubMenuItem.prototype, "anchorCorner", void 0);
-__decorate([
-    property({ attribute: 'menu-corner' })
-], SubMenuItem.prototype, "menuCorner", void 0);
-__decorate([
-    property({ type: Number, attribute: 'hover-open-delay' })
-], SubMenuItem.prototype, "hoverOpenDelay", void 0);
-__decorate([
-    property({ type: Number, attribute: 'hover-close-delay' })
-], SubMenuItem.prototype, "hoverCloseDelay", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], SubMenuItem.prototype, "selected", void 0);
-__decorate([
-    queryAssignedElements({ slot: 'submenu', flatten: true })
-], SubMenuItem.prototype, "menus", void 0);
-//# sourceMappingURL=sub-menu-item.js.map

package/menu/lib/submenuitem/sub-menu-item.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"sub-menu-item.js","sourceRoot":"","sources":["sub-menu-item.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html} from 'lit';\nimport {property, queryAssignedElements} from 'lit/decorators.js';\n\nimport {List} from '../../../list/lib/list.js';\nimport {Corner, Menu} from '../menu.js';\nimport {MenuItemEl} from '../menuitem/menu-item.js';\nimport {ActivateTypeaheadEvent, CLOSE_REASON, CloseMenuEvent, CloseOnFocusoutEvent, DeactivateItemsEvent, DeactivateTypeaheadEvent, KEYDOWN_CLOSE_KEYS, NAVIGABLE_KEY, SELECTION_KEY, StayOpenOnFocusoutEvent} from '../shared.js';\n\nfunction stopPropagation(e: Event) {\n  e.stopPropagation();\n}\n\n/**\n * @fires deactivate-items {DeactivateItemsEvent} Requests the parent menu to\n *     deselect other items when a submenu opens\n * @fires deactivate-typeahead {DeactivateItemsEvent} Requests the parent menu\n *     to deactivate the typeahead functionality when a submenu opens\n * @fires activate-typeahead {DeactivateItemsEvent} Requests the parent menu to\n *     activate the typeahead functionality when a submenu closes\n * @fires stay-open-on-focusout {StayOpenOnFocusoutEvent} Requests the parent\n *     menu to stay open when focusout event is fired or has a `null`\n *     `relatedTarget` when submenu is opened.\n * @fires close-on-focusout {CloseOnFocusoutEvent} Requests the parent\n *     menu to close when focusout event is fired or has a `null`\n *     `relatedTarget` When submenu is closed.\n */\nexport class SubMenuItem extends MenuItemEl {\n  /**\n   * The anchorCorner to set on the submenu.\n   */\n  @property({attribute: 'anchor-corner'}) anchorCorner: Corner = 'START_END';\n  /**\n   * The menuCorner to set on the submenu.\n   */\n  @property({attribute: 'menu-corner'}) menuCorner: Corner = 'START_START';\n  /**\n   * The delay between pointerenter and submenu opening.\n   */\n  @property({type: Number, attribute: 'hover-open-delay'}) hoverOpenDelay = 400;\n  /**\n   * The delay between ponterleave and the submenu closing.\n   */\n  @property({type: Number, attribute: 'hover-close-delay'})\n  hoverCloseDelay = 400;\n  /**\n   * Sets the item in the selected visual state when a submenu is opened.\n   */\n  @property({type: Boolean, reflect: true}) selected = false;\n\n  @queryAssignedElements({slot: 'submenu', flatten: true})\n  private readonly menus!: Menu[];\n\n  protected override keepOpenOnClick = true;\n  private previousOpenTimeout = 0;\n  private previousCloseTimeout = 0;\n\n  private get submenuEl(): Menu|undefined {\n    return this.menus[0];\n  }\n\n  /**\n   * Starts the default 400ms countdown to open the submenu.\n   */\n  protected override onPointerenter = () => {\n    clearTimeout(this.previousOpenTimeout);\n    clearTimeout(this.previousCloseTimeout);\n    if (this.submenuEl?.open) return;\n\n    // Open synchronously if delay is 0. (screenshot tests infra\n    // would never resolve otherwise)\n    if (!this.hoverOpenDelay) {\n      this.show();\n    } else {\n      this.previousOpenTimeout = setTimeout(() => {\n        this.show();\n      }, this.hoverOpenDelay);\n    }\n  };\n\n  /**\n   * Starts the default 400ms countdown to close the submenu.\n   */\n  protected override onPointerleave = () => {\n    clearTimeout(this.previousCloseTimeout);\n    clearTimeout(this.previousOpenTimeout);\n\n    // Close synchronously if delay is 0. (screenshot tests infra\n    // would never resolve otherwise)\n    if (!this.hoverCloseDelay) {\n      this.close();\n    } else {\n      this.previousCloseTimeout = setTimeout(() => {\n        this.close();\n      }, this.hoverCloseDelay);\n    }\n  };\n\n  protected override onClick() {\n    this.show();\n  }\n\n  /**\n   * On item keydown handles opening the submenu.\n   */\n  protected override onKeydown(e: KeyboardEvent) {\n    const shouldOpenSubmenu = this.isSubmenuOpenKey(e.code);\n\n    if (e.code === SELECTION_KEY.SPACE) {\n      // prevent space from scrolling. Only open the submenu.\n      e.preventDefault();\n    }\n\n    if (!shouldOpenSubmenu) {\n      super.onKeydown(e);\n      return;\n    }\n\n    const submenu = this.submenuEl;\n    if (!submenu) return;\n\n    const submenuItems = submenu.items;\n    const firstActivatableItem = List.getFirstActivatableItem(submenuItems);\n\n    if (firstActivatableItem) {\n      this.show(() => {\n        firstActivatableItem.active = true;\n      });\n\n      return;\n    }\n  }\n\n  /**\n   * Render the submenu at the end\n   */\n  protected override renderEnd() {\n    return html`${super.renderEnd()}${this.renderSubMenu()}`;\n  }\n\n  /**\n   * Renders the slot for the submenu.\n   */\n  private renderSubMenu() {\n    return html`<span class=\"submenu\"><slot\n        name=\"submenu\"\n        @pointerdown=${stopPropagation}\n        @click=${stopPropagation}\n        @keydown=${this.onSubMenuKeydown}\n        @close-menu=${this.onCloseSubmenu}\n    ></slot></span>`;\n  }\n\n  private onCloseSubmenu(e: CloseMenuEvent) {\n    e.itemPath.push(this);\n    // Restore focusout behavior\n    this.dispatchEvent(new CloseOnFocusoutEvent());\n    this.dispatchEvent(new ActivateTypeaheadEvent());\n    // Escape should only close one menu not all of the menus unlike space or\n    // click selection which should close all menus.\n    if (e.reason.kind === CLOSE_REASON.KEYDOWN &&\n        e.reason.key === KEYDOWN_CLOSE_KEYS.ESCAPE) {\n      e.stopPropagation();\n      this.active = true;\n      this.selected = false;\n      // It might already be active so manually focus\n      this.listItemRoot?.focus();\n      return;\n    }\n\n    this.active = false;\n    this.selected = false;\n  }\n\n  private async onSubMenuKeydown(e: KeyboardEvent) {\n    // Stop propagation so that we don't accidentally close every parent menu.\n    // Additionally, we want to isolate things like the typeahead keydowns\n    // from bubbling up to the parent menu and confounding things.\n    e.stopPropagation();\n    const shouldClose = this.isSubmenuCloseKey(e.code);\n\n    if (!shouldClose) return;\n\n    this.close(() => {\n      List.deactivateActiveItem(this.submenuEl!.items);\n      this.listItemRoot?.focus();\n      this.active = true;\n    });\n  }\n\n  /**\n   * Shows the submenu.\n   *\n   * @param onOpened A function to call after the menu is opened.\n   */\n  show(onOpened = () => {}) {\n    const menu = this.submenuEl;\n    if (!menu) return;\n\n    menu.quick = true;\n    // Submenus are in overflow when not fixed. Can remove once we have native\n    // popup support\n    menu.hasOverflow = true;\n    menu.anchorCorner = this.anchorCorner;\n    menu.menuCorner = this.menuCorner;\n    menu.anchor = this;\n    // We manually set focus with `active` on keyboard navigation. And we\n    // want to focus the root on hover, so the user can pick up navigation with\n    // keyboard after hover.\n    menu.defaultFocus = 'LIST_ROOT';\n    menu.skipRestoreFocus = true;\n    menu.stayOpenOnOutsideClick = true;\n    menu.stayOpenOnFocusout = true;\n\n    // Menu could already be opened because of mouse interaction\n    const menuAlreadyOpen = menu.open;\n    // We want the parent to stay open in the case such that a middle submenu\n    // has a submenuitem hovered which opens a third submenut. Then if you hover\n    // on yet another middle menu-item (not submenuitem) then focusout Event's\n    // relatedTarget will be `null` thus, causing all the menus to close\n    this.dispatchEvent(new StayOpenOnFocusoutEvent());\n    menu.show();\n\n    // Deactivate other items. This can be the case if the user has tabbed\n    // around the menu and then mouses over an md-sub-menu.\n    this.dispatchEvent(new DeactivateItemsEvent());\n    this.dispatchEvent(new DeactivateTypeaheadEvent());\n    this.selected = true;\n\n    // This is the case of mouse hovering when already opened via keyboard or\n    // vice versa\n    if (menuAlreadyOpen) {\n      onOpened();\n    } else {\n      menu.addEventListener('opened', onOpened, {once: true});\n    }\n  }\n\n  /**\n   * Closes the submenu.\n   *\n   * @param onClosed A function to call after the menu is closed.\n   */\n  close(onClosed = () => {}) {\n    const menu = this.submenuEl;\n    if (!menu || !menu.open) return;\n\n    this.dispatchEvent(new ActivateTypeaheadEvent());\n    menu.quick = true;\n    menu.close();\n    // Restore focusout behavior.\n    this.dispatchEvent(new CloseOnFocusoutEvent());\n    this.active = false;\n    this.selected = false;\n    menu.addEventListener('closed', onClosed, {once: true});\n  }\n\n  /**\n   * Determines whether the given KeyboardEvent code is one that should open\n   * the submenu. This is RTL-aware. By default, left, right, space, or enter.\n   *\n   * @param code The native KeyboardEvent code.\n   * @return Whether or not the key code should open the submenu.\n   */\n  private isSubmenuOpenKey(code: string) {\n    const isRtl = getComputedStyle(this).direction === 'rtl';\n    const arrowEnterKey = isRtl ? NAVIGABLE_KEY.LEFT : NAVIGABLE_KEY.RIGHT;\n    switch (code) {\n      case arrowEnterKey:\n      case SELECTION_KEY.SPACE:\n      case SELECTION_KEY.ENTER:\n        return true;\n      default:\n        return false;\n    }\n  }\n\n  /**\n   * Determines whether the given KeyboardEvent code is one that should close\n   * the submenu. This is RTL-aware. By default right, left, or escape.\n   *\n   * @param code The native KeyboardEvent code.\n   * @return Whether or not the key code should close the submenu.\n   */\n  private isSubmenuCloseKey(code: string) {\n    const isRtl = getComputedStyle(this).direction === 'rtl';\n    const arrowEnterKey = isRtl ? NAVIGABLE_KEY.RIGHT : NAVIGABLE_KEY.LEFT;\n    switch (code) {\n      case arrowEnterKey:\n      case KEYDOWN_CLOSE_KEYS.ESCAPE:\n        return true;\n      default:\n        return false;\n    }\n  }\n}\n"]}

package/menu/lib/typeaheadController.d.ts

@@ -1,157 +0,0 @@
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { MenuItem } from './shared.js';
-/**
- * The options that are passed to the typeahead controller.
- */
-export interface TypeaheadControllerProperties {
-    /**
-     * A function that returns an array of menu items to be searched.
-     * @return An array of menu items to be searched by typing.
-     */
-    getItems: () => MenuItem[];
-    /**
-     * The maximum time between each keystroke to keep the current type buffer
-     * alive.
-     */
-    typeaheadBufferTime: number;
-    /**
-     * Whether or not the typeahead should listen for keystrokes or not.
-     */
-    active: boolean;
-}
-/**
- * Data structure tuple that helps with indexing.
- *
- * [index, item, normalized header text]
- */
-type TypeaheadRecord = [number, MenuItem, string];
-/**
- * Indicies to access the TypeaheadRecord tuple type.
- */
-export declare const TYPEAHEAD_RECORD: {
-    readonly INDEX: 0;
-    readonly ITEM: 1;
-    readonly TEXT: 2;
-};
-/**
- * This controller listens to `keydown` events and searches the header text of
- * an array of `MenuItem`s with the corresponding entered keys within the buffer
- * time and activates the item.
- *
- * @example
- * ```ts
- * const typeaheadController = new TypeaheadController(() => ({
- *   typeaheadBufferTime: 50,
- *   getItems: () => Array.from(document.querySelectorAll('md-menu-item'))
- * }));
- * html`
- *   <div
- *       @keydown=${typeaheadController.onKeydown}
- *       tabindex="0"
- *       class="activeItemText">
- *     <!-- focusable element that will receive keydown events -->
- *     Apple
- *   </div>
- *   <div>
- *     <md-menu-item active header="Apple"></md-menu-item>
- *     <md-menu-item header="Apricot"></md-menu-item>
- *     <md-menu-item header="Banana"></md-menu-item>
- *     <md-menu-item header="Olive"></md-menu-item>
- *     <md-menu-item header="Orange"></md-menu-item>
- *   </div>
- * `;
- * ```
- */
-export declare class TypeaheadController {
-    private readonly getProperties;
-    /**
-     * Array of tuples that helps with indexing.
-     */
-    private typeaheadRecords;
-    /**
-     * Currently-typed text since last buffer timeout
-     */
-    private typaheadBuffer;
-    /**
-     * The timeout id from the current buffer's setTimeout
-     */
-    private cancelTypeaheadTimeout;
-    /**
-     * If we are currently "typing"
-     */
-    isTypingAhead: boolean;
-    /**
-     * The record of the last active item.
-     */
-    lastActiveRecord: TypeaheadRecord | null;
-    /**
-     * @param getProperties A function that returns the options of the typeahead
-     * controller:
-     *
-     * {
-     *   getItems: A function that returns an array of menu items to be searched.
-     *   typeaheadBufferTime: The maximum time between each keystroke to keep the
-     *       current type buffer alive.
-     * }
-     */
-    constructor(getProperties: () => TypeaheadControllerProperties);
-    private get items();
-    private get active();
-    /**
-     * Apply this listener to the element that will receive `keydown` events that
-     * should trigger this controller.
-     *
-     * @param e The native browser `KeyboardEvent` from the `keydown` event.
-     */
-    readonly onKeydown: (e: KeyboardEvent) => void;
-    /**
-     * Sets up typingahead
-     */
-    private beginTypeahead;
-    /**
-     * Performs the typeahead. Based on the normalized items and the current text
-     * buffer, finds the _next_ item with matching text and activates it.
-     *
-     * @example
-     *
-     * items: Apple, Banana, Olive, Orange, Cucumber
-     * buffer: ''
-     * user types: o
-     *
-     * activates Olive
-     *
-     * @example
-     *
-     * items: Apple, Banana, Olive (active), Orange, Cucumber
-     * buffer: 'o'
-     * user types: l
-     *
-     * activates Olive
-     *
-     * @example
-     *
-     * items: Apple, Banana, Olive (active), Orange, Cucumber
-     * buffer: ''
-     * user types: o
-     *
-     * activates Orange
-     *
-     * @example
-     *
-     * items: Apple, Banana, Olive, Orange (active), Cucumber
-     * buffer: ''
-     * user types: o
-     *
-     * activates Olive
-     */
-    private typeahead;
-    /**
-     * Ends the current typeahead and clears the buffer.
-     */
-    private readonly endTypeahead;
-}
-export {};