\n * \n * Apple\n * \n * \n * \n * \n * \n * \n * \n *
\n * `;\n * ```\n */\nexport class TypeaheadController {\n /**\n * Array of tuples that helps with indexing.\n */\n private typeaheadRecords: TypeaheadRecord[] = [];\n /**\n * Currently-typed text since last buffer timeout\n */\n private typaheadBuffer = '';\n /**\n * The timeout id from the current buffer's setTimeout\n */\n private cancelTypeaheadTimeout = 0;\n /**\n * If we are currently \"typing\"\n */\n isTypingAhead = false;\n /**\n * The record of the last active item.\n */\n lastActiveRecord: TypeaheadRecord | null = null;\n\n /**\n * @param getProperties A function that returns the options of the typeahead\n * controller:\n *\n * {\n * getItems: A function that returns an array of menu items to be searched.\n * typeaheadBufferTime: The maximum time between each keystroke to keep the\n * current type buffer alive.\n * }\n */\n constructor(\n private readonly getProperties: () => TypeaheadControllerProperties,\n ) {}\n\n private get items() {\n return this.getProperties().getItems();\n }\n\n private get active() {\n return this.getProperties().active;\n }\n\n /**\n * Apply this listener to the element that will receive `keydown` events that\n * should trigger this controller.\n *\n * @param event The native browser `KeyboardEvent` from the `keydown` event.\n */\n readonly onKeydown = (event: KeyboardEvent) => {\n if (this.isTypingAhead) {\n this.typeahead(event);\n } else {\n this.beginTypeahead(event);\n }\n };\n\n /**\n * Sets up typingahead\n */\n private beginTypeahead(event: KeyboardEvent) {\n if (!this.active) {\n return;\n }\n\n // We don't want to typeahead if the _beginning_ of the typeahead is a menu\n // navigation, or a selection. We will handle \"Space\" only if it's in the\n // middle of a typeahead\n if (\n event.code === 'Space' ||\n event.code === 'Enter' ||\n event.code.startsWith('Arrow') ||\n event.code === 'Escape'\n ) {\n return;\n }\n\n this.isTypingAhead = true;\n // Generates the record array data structure which is the index, the element\n // and a normalized header.\n this.typeaheadRecords = this.items.map((el, index) => [\n index,\n el,\n el.typeaheadText.trim().toLowerCase(),\n ]);\n this.lastActiveRecord =\n this.typeaheadRecords.find(\n (record) => record[TYPEAHEAD_RECORD.ITEM].tabIndex === 0,\n ) ?? null;\n if (this.lastActiveRecord) {\n this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = -1;\n }\n this.typeahead(event);\n }\n\n /**\n * Performs the typeahead. Based on the normalized items and the current text\n * buffer, finds the _next_ item with matching text and activates it.\n *\n * @example\n *\n * items: Apple, Banana, Olive, Orange, Cucumber\n * buffer: ''\n * user types: o\n *\n * activates Olive\n *\n * @example\n *\n * items: Apple, Banana, Olive (active), Orange, Cucumber\n * buffer: 'o'\n * user types: l\n *\n * activates Olive\n *\n * @example\n *\n * items: Apple, Banana, Olive (active), Orange, Cucumber\n * buffer: ''\n * user types: o\n *\n * activates Orange\n *\n * @example\n *\n * items: Apple, Banana, Olive, Orange (active), Cucumber\n * buffer: ''\n * user types: o\n *\n * activates Olive\n */\n private typeahead(event: KeyboardEvent) {\n if (event.defaultPrevented) return;\n clearTimeout(this.cancelTypeaheadTimeout);\n // Stop typingahead if one of the navigation or selection keys (except for\n // Space) are pressed\n if (\n event.code === 'Enter' ||\n event.code.startsWith('Arrow') ||\n event.code === 'Escape'\n ) {\n this.endTypeahead();\n if (this.lastActiveRecord) {\n this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = -1;\n }\n return;\n }\n\n // If Space is pressed, prevent it from selecting and closing the menu\n if (event.code === 'Space') {\n event.preventDefault();\n }\n\n // Start up a new keystroke buffer timeout\n this.cancelTypeaheadTimeout = setTimeout(\n this.endTypeahead,\n this.getProperties().typeaheadBufferTime,\n );\n\n this.typaheadBuffer += event.key.toLowerCase();\n\n const lastActiveIndex = this.lastActiveRecord\n ? this.lastActiveRecord[TYPEAHEAD_RECORD.INDEX]\n : -1;\n const numRecords = this.typeaheadRecords.length;\n\n /**\n * Sorting function that will resort the items starting with the given index\n *\n * @example\n *\n * this.typeaheadRecords =\n * 0: [0, , 'apple']\n * 1: [1, , 'apricot']\n * 2: [2, , 'banana']\n * 3: [3, , 'olive'] <-- lastActiveIndex\n * 4: [4, , 'orange']\n * 5: [5, , 'strawberry']\n *\n * this.typeaheadRecords.sort((a,b) => rebaseIndexOnActive(a)\n * - rebaseIndexOnActive(b)) ===\n * 0: [3, , 'olive'] <-- lastActiveIndex\n * 1: [4, , 'orange']\n * 2: [5, , 'strawberry']\n * 3: [0, , 'apple']\n * 4: [1, , 'apricot']\n * 5: [2, , 'banana']\n */\n const rebaseIndexOnActive = (record: TypeaheadRecord) => {\n return (\n (record[TYPEAHEAD_RECORD.INDEX] + numRecords - lastActiveIndex) %\n numRecords\n );\n };\n\n // records filtered and sorted / rebased around the last active index\n const matchingRecords = this.typeaheadRecords\n .filter(\n (record) =>\n !record[TYPEAHEAD_RECORD.ITEM].disabled &&\n record[TYPEAHEAD_RECORD.TEXT].startsWith(this.typaheadBuffer),\n )\n .sort((a, b) => rebaseIndexOnActive(a) - rebaseIndexOnActive(b));\n\n // Just leave if there's nothing that matches. Native select will just\n // choose the first thing that starts with the next letter in the alphabet\n // but that's out of scope and hard to localize\n if (matchingRecords.length === 0) {\n clearTimeout(this.cancelTypeaheadTimeout);\n if (this.lastActiveRecord) {\n this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = -1;\n }\n this.endTypeahead();\n return;\n }\n\n const isNewQuery = this.typaheadBuffer.length === 1;\n let nextRecord: TypeaheadRecord;\n\n // This is likely the case that someone is trying to \"tab\" through different\n // entries that start with the same letter\n if (this.lastActiveRecord === matchingRecords[0] && isNewQuery) {\n nextRecord = matchingRecords[1] ?? matchingRecords[0];\n } else {\n nextRecord = matchingRecords[0];\n }\n\n if (this.lastActiveRecord) {\n this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = -1;\n }\n\n this.lastActiveRecord = nextRecord;\n nextRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = 0;\n nextRecord[TYPEAHEAD_RECORD.ITEM].focus();\n return;\n }\n\n /**\n * Ends the current typeahead and clears the buffer.\n */\n private readonly endTypeahead = () => {\n this.isTypingAhead = false;\n this.typaheadBuffer = '';\n this.typeaheadRecords = [];\n };\n}\n","/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\nimport '../../focus/md-focus-ring.js';\n\nimport {LitElement, PropertyValues, html, isServer, nothing} from 'lit';\nimport {property, query, queryAssignedElements, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {styleMap} from 'lit/directives/style-map.js';\n\nimport {EASING, createAnimationSignal} from '../../internal/motion/animation.js';\nimport {\n ListController,\n NavigableKeys,\n} from '../../list/internal/list-controller.js';\nimport {\n getActiveItem,\n getFirstActivatableItem,\n getLastActivatableItem,\n} from '../../list/internal/list-navigation-helpers.js';\n\nimport {MenuItem} from './controllers/menuItemController.js';\nimport {\n ActivateTypeaheadEvent,\n DeactivateTypeaheadEvent,\n FocusState,\n isClosableKey,\n isElementInSubtree,\n} from './controllers/shared.js';\nimport {\n Corner,\n SurfacePositionController,\n SurfacePositionTarget,\n} from './controllers/surfacePositionController.js';\nimport {TypeaheadController} from './controllers/typeaheadController.js';\n\nexport {Corner} from './controllers/surfacePositionController.js';\n\n/**\n * The default value for the typeahead buffer time in Milliseconds.\n */\nexport const DEFAULT_TYPEAHEAD_BUFFER_TIME = 200;\n\nconst submenuNavKeys = new Set([\n NavigableKeys.ArrowDown,\n NavigableKeys.ArrowUp,\n NavigableKeys.Home,\n NavigableKeys.End,\n]);\n\nconst menuNavKeys = new Set([\n NavigableKeys.ArrowLeft,\n NavigableKeys.ArrowRight,\n ...submenuNavKeys,\n]);\n\n/**\n * Gets the currently focused element on the page.\n *\n * @param activeDoc The document or shadowroot from which to start the search.\n * Defaults to `window.document`\n * @return Returns the currently deeply focused element or `null` if none.\n */\nfunction getFocusedElement(\n activeDoc: Document | ShadowRoot = document,\n): HTMLElement | null {\n let activeEl = activeDoc.activeElement as HTMLElement | null;\n\n // Check for activeElement in the case that an element with a shadow root host\n // is currently focused.\n while (activeEl && activeEl?.shadowRoot?.activeElement) {\n activeEl = activeEl.shadowRoot.activeElement as HTMLElement | null;\n }\n\n return activeEl;\n}\n\n/**\n * @fires opening {Event} Fired before the opening animation begins\n * @fires opened {Event} Fired once the menu is open, after any animations\n * @fires closing {Event} Fired before the closing animation begins\n * @fires closed {Event} Fired once the menu is closed, after any animations\n */\nexport abstract class Menu extends LitElement {\n @query('.menu') private readonly surfaceEl!: HTMLElement | null;\n @query('slot') private readonly slotEl!: HTMLSlotElement | null;\n\n /**\n * The ID of the element in the same root node in which the menu should align\n * to. Overrides setting `anchorElement = elementReference`.\n *\n * __NOTE__: anchor or anchorElement must either be an HTMLElement or resolve\n * to an HTMLElement in order for menu to open.\n */\n @property() anchor = '';\n /**\n * Whether the positioning algorithm should calculate relative to the parent\n * of the anchor element (`absolute`), relative to the window (`fixed`), or\n * relative to the document (`document`). `popover` will use the popover API\n * to render the menu in the top-layer. If your browser does not support the\n * popover API, it will fall back to `fixed`.\n *\n * __Examples for `position = 'fixed'`:__\n *\n * - If there is no `position:relative` in the given parent tree and the\n * surface is `position:absolute`\n * - If the surface is `position:fixed`\n * - If the surface is in the \"top layer\"\n * - The anchor and the surface do not share a common `position:relative`\n * ancestor\n *\n * When using `positioning=fixed`, in most cases, the menu should position\n * itself above most other `position:absolute` or `position:fixed` elements\n * when placed inside of them. e.g. using a menu inside of an `md-dialog`.\n *\n * __NOTE__: Fixed menus will not scroll with the page and will be fixed to\n * the window instead.\n *\n * __Examples for `position = 'document'`:__\n *\n * - There is no parent that creates a relative positioning context e.g.\n * `position: relative`, `position: absolute`, `transform: translate(x, y)`,\n * etc.\n * - You put the effort into hoisting the menu to the top of the DOM like the\n * end of the `` to render over everything or in a top-layer.\n * - You are reusing a single `md-menu` element that dynamically renders\n * content.\n *\n * __Examples for `position = 'popover'`:__\n *\n * - Your browser supports `popover`.\n * - Most cases. Once popover is in browsers, this will become the default.\n */\n @property() positioning: 'absolute' | 'fixed' | 'document' | 'popover' =\n 'absolute';\n /**\n * Skips the opening and closing animations.\n */\n @property({type: Boolean}) quick = false;\n /**\n * Displays overflow content like a submenu. Not required in most cases when\n * using `positioning=\"popover\"`.\n *\n * __NOTE__: This may cause adverse effects if you set\n * `md-menu {max-height:...}`\n * and have items overflowing items in the \"y\" direction.\n */\n @property({type: Boolean, attribute: 'has-overflow'}) hasOverflow = false;\n /**\n * Opens the menu and makes it visible. Alternative to the `.show()` and\n * `.close()` methods\n */\n @property({type: Boolean, reflect: true}) open = false;\n /**\n * Offsets the menu's inline alignment from the anchor by the given number in\n * pixels. This value is direction aware and will follow the LTR / RTL\n * direction.\n *\n * e.g. LTR: positive -> right, negative -> left\n * RTL: positive -> left, negative -> right\n */\n @property({type: Number, attribute: 'x-offset'}) xOffset = 0;\n /**\n * Offsets the menu's block alignment from the anchor by the given number in\n * pixels.\n *\n * e.g. positive -> down, negative -> up\n */\n @property({type: Number, attribute: 'y-offset'}) yOffset = 0;\n /**\n * Disable the `flip` behavior that usually happens on the horizontal axis\n * when the surface would render outside the viewport.\n */\n @property({type: Boolean, attribute: 'no-horizontal-flip'}) noHorizontalFlip =\n false;\n /**\n * Disable the `flip` behavior that usually happens on the vertical axis when\n * the surface would render outside the viewport.\n */\n @property({type: Boolean, attribute: 'no-vertical-flip'}) noVerticalFlip =\n false;\n /**\n * The max time between the keystrokes of the typeahead menu behavior before\n * it clears the typeahead buffer.\n */\n @property({type: Number, attribute: 'typeahead-delay'})\n typeaheadDelay = DEFAULT_TYPEAHEAD_BUFFER_TIME;\n /**\n * The corner of the anchor which to align the menu in the standard logical\n * property style of - e.g. `'end-start'`.\n *\n * NOTE: This value may not be respected by the menu positioning algorithm\n * if the menu would render outisde the viewport.\n * Use `no-horizontal-flip` or `no-vertical-flip` to force the usage of the value\n */\n @property({attribute: 'anchor-corner'})\n anchorCorner: Corner = Corner.END_START;\n /**\n * The corner of the menu which to align the anchor in the standard logical\n * property style of - e.g. `'start-start'`.\n *\n * NOTE: This value may not be respected by the menu positioning algorithm\n * if the menu would render outisde the viewport.\n * Use `no-horizontal-flip` or `no-vertical-flip` to force the usage of the value\n */\n @property({attribute: 'menu-corner'}) menuCorner: Corner = Corner.START_START;\n /**\n * Keeps the user clicks outside the menu.\n *\n * NOTE: clicking outside may still cause focusout to close the menu so see\n * `stayOpenOnFocusout`.\n */\n @property({type: Boolean, attribute: 'stay-open-on-outside-click'})\n stayOpenOnOutsideClick = false;\n /**\n * Keeps the menu open when focus leaves the menu's composed subtree.\n *\n * NOTE: Focusout behavior will stop propagation of the focusout event. Set\n * this property to true to opt-out of menu's focusout handling altogether.\n */\n @property({type: Boolean, attribute: 'stay-open-on-focusout'})\n stayOpenOnFocusout = false;\n /**\n * After closing, does not restore focus to the last focused element before\n * the menu was opened.\n */\n @property({type: Boolean, attribute: 'skip-restore-focus'})\n skipRestoreFocus = false;\n /**\n * The element that should be focused by default once opened.\n *\n * NOTE: When setting default focus to 'LIST_ROOT', remember to change\n * `tabindex` to `0` and change md-menu's display to something other than\n * `display: contents` when necessary.\n */\n @property({attribute: 'default-focus'})\n defaultFocus: FocusState = FocusState.FIRST_ITEM;\n\n /**\n * Turns off navigation wrapping. By default, navigating past the end of the\n * menu items will wrap focus back to the beginning and vice versa. Use this\n * for ARIA patterns that do not wrap focus, like combobox.\n */\n @property({type: Boolean, attribute: 'no-navigation-wrap'})\n noNavigationWrap = false;\n\n @queryAssignedElements({flatten: true}) protected slotItems!: HTMLElement[];\n @state() private typeaheadActive = true;\n\n /**\n * Whether or not the current menu is a submenu and should not handle specific\n * navigation keys.\n *\n * @export\n */\n isSubmenu = false;\n\n /**\n * The event path of the last window pointerdown event.\n */\n private pointerPath: EventTarget[] = [];\n\n /**\n * Whether or not the menu is repositoining due to window / document resize\n */\n private isRepositioning = false;\n private readonly openCloseAnimationSignal = createAnimationSignal();\n\n private readonly listController = new ListController