@dialpad/dialtone-vue 3.208.0 → 3.210.0-next.2

package/dist/common/mixins/keyboard-list-navigation.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("./dom.cjs"),E=require("../utils/index.cjs"),N="listElementKey is required or the referenced element doesn't exist. Received listElement: ",v=({listItemRole:o="option",indexKey:s="highlightIndex",idKey:n="highlightId",listElementKey:I="listRef",activeItemKey:c="",openMethod:l=null,afterHighlightMethod:r=null,beginningOfListMethod:m=null,endOfListMethod:u=null,scrollToOnHighlight:g=!0,focusOnKeyboardNavigation:f=!1}={})=>({mixins:[a.default],data(){return{[s]:-1,[n]:"",scrollToOnHighlight:g,focusOnKeyboardNavigation:f}},provide(){return{highlightId:()=>this[n]}},methods:{_getListElement(){var t;return E.returnFirstEl((t=this[I]())==null?void 0:t.$el)||this[I]()},_itemsLength(){const t=this._getListItemNodes();return t===null?0:t.length},_getListItemNodes(){const t=this._getListElement();return t?Array.from(t.querySelectorAll(`[role="${o}"], #sr-only-close-button`)):(console.error(N,t),null)},onUpKey(){l&&this[l](!0),this[s]>0?this.setHighlightIndex(this[s]-1):m&&this[m](),this.scrollActiveItemIntoViewIfNeeded(),this.focusActiveItemIfNeeded()},onDownKey(){l&&this[l](!0),this[s]<this._itemsLength()-1?this.setHighlightIndex(this[s]+1):u&&this[u](),this.scrollActiveItemIntoViewIfNeeded(),this.focusActiveItemIfNeeded()},onHomeKey(){this.jumpToBeginning(),this.scrollActiveItemIntoViewIfNeeded(),this.focusActiveItemIfNeeded()},onEndKey(){this.jumpToEnd(),this.scrollActiveItemIntoViewIfNeeded(),this.focusActiveItemIfNeeded()},onNavigationKey(t){const e=this._getListItemNodes(),i=e.filter(h=>h.textContent.trim().toLowerCase().startsWith(t.toLowerCase()));if(i.length<=0)return;const d=i.findIndex(h=>this[s]===e.indexOf(h)),_=e.indexOf(d<i.length-1?i[d+1]:i[0]);this.setHighlightIndex(_),this.scrollActiveItemIntoViewIfNeeded(),this.focusActiveItemIfNeeded()},isValidLetter(t){return t.length>1?!1:t>="a"&&t<="z"||t>="A"&&t<="Z"},jumpToBeginning(){this.setHighlightIndex(0)},jumpToEnd(){this.setHighlightIndex(this._itemsLength()-1)},setHighlightIndex(t){this[s]=t,this[n]=this._getItemId(t),this._itemsLength()&&r&&this[r](t)},setHighlightId(t){this[n]=t,this[s]=this._getItemIndex(t),this._itemsLength()&&r&&this[r](this._getItemIndex(t))},_getItemIndex(t){const e=this._getListElement();return e?Array.from(e.querySelectorAll(`[role="${o}"], #sr-only-close-button`)).indexOf(e.querySelector(`#${t}`)):void 0},_getItemId(t){var i;const e=this._getListElement();if(e)return(i=e.querySelectorAll(`[role="${o}"], #sr-only-close-button`)[t])==null?void 0:i.id},scrollActiveItemIntoViewIfNeeded(){if(!this.scrollToOnHighlight)return;const t=this[c];if(t){const e=this._getListElement();this.scrollElementIntoViewIfNeeded(t,null,null,e)}},focusActiveItemIfNeeded(){if(!this.focusOnKeyboardNavigation)return;const t=this[c];t&&t.focus()}}});exports.default=v;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("./dom.cjs"),E=require("../utils/index.cjs"),N="listElementKey is required or the referenced element doesn't exist. Received listElement: ",v=({listItemRole:o="option",indexKey:s="highlightIndex",idKey:n="highlightId",listElementKey:I="listRef",activeItemKey:c="",openMethod:l=null,afterHighlightMethod:r=null,beginningOfListMethod:u=null,endOfListMethod:m=null,scrollToOnHighlight:g=!0,focusOnKeyboardNavigation:f=!1}={})=>({mixins:[a.default],data(){return{[s]:-1,[n]:"",scrollToOnHighlight:g,focusOnKeyboardNavigation:f}},provide(){return{highlightId:()=>this[n]}},methods:{_getListElement(){var t;return E.returnFirstEl((t=this[I]())==null?void 0:t.$el)||this[I]()},_itemsLength(){const t=this._getListItemNodes();return t===null?0:t.length},_getListItemNodes(){const t=this._getListElement();return t?Array.from(t.querySelectorAll(`[role="${o}"], #sr-only-close-button`)):(console.error(N,t),null)},onUpKey(){l&&this[l](!0),this[s]>0?this.setHighlightIndex(this[s]-1):u&&this[u](),this.scrollActiveItemIntoViewIfNeeded(),this.focusActiveItemIfNeeded()},onDownKey(){l&&this[l](!0),this[s]<this._itemsLength()-1?this.setHighlightIndex(this[s]+1):m&&this[m](),this.scrollActiveItemIntoViewIfNeeded(),this.focusActiveItemIfNeeded()},onHomeKey(){this.jumpToBeginning(),this.scrollActiveItemIntoViewIfNeeded(),this.focusActiveItemIfNeeded()},onEndKey(){this.jumpToEnd(),this.scrollActiveItemIntoViewIfNeeded(),this.focusActiveItemIfNeeded()},onNavigationKey(t){const e=this._getListItemNodes(),i=e.filter(h=>h.textContent.trim().toLowerCase().startsWith(t.toLowerCase()));if(i.length<=0)return;const d=i.findIndex(h=>this[s]===e.indexOf(h)),_=e.indexOf(d<i.length-1?i[d+1]:i[0]);this.setHighlightIndex(_),this.scrollActiveItemIntoViewIfNeeded(),this.focusActiveItemIfNeeded()},isValidLetter(t){return t.length>1?!1:t>="a"&&t<="z"||t>="A"&&t<="Z"},jumpToBeginning(){this.setHighlightIndex(0)},jumpToEnd(){this.setHighlightIndex(this._itemsLength()-1)},setHighlightIndex(t){this[s]=t,this[n]=this._getItemId(t),this._itemsLength()&&r&&this[r](t)},setHighlightId(t){t&&(this[n]=t,this[s]=this._getItemIndex(t),this._itemsLength()&&r&&this[r](this._getItemIndex(t)))},_getItemIndex(t){const e=this._getListElement();return e?Array.from(e.querySelectorAll(`[role="${o}"], #sr-only-close-button`)).indexOf(e.querySelector(`#${t}`)):void 0},_getItemId(t){var i;const e=this._getListElement();if(e)return(i=e.querySelectorAll(`[role="${o}"], #sr-only-close-button`)[t])==null?void 0:i.id},scrollActiveItemIntoViewIfNeeded(){if(!this.scrollToOnHighlight)return;const t=this[c];if(t){const e=this._getListElement();this.scrollElementIntoViewIfNeeded(t,null,null,e)}},focusActiveItemIfNeeded(){if(!this.focusOnKeyboardNavigation)return;const t=this[c];t&&t.focus()}}});exports.default=v;
 //# sourceMappingURL=keyboard-list-navigation.cjs.map

package/dist/common/mixins/keyboard-list-navigation.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard-list-navigation.cjs","sources":["../../../common/mixins/keyboard_list_navigation.js"],"sourcesContent":["import Dom from './dom';\nimport { returnFirstEl } from '@/common/utils';\n\nconst ERROR_INVALID_LIST_ELEMENT = (\n  'listElementKey is required or the referenced ' +\n  'element doesn\\'t exist. Received listElement: '\n);\n\n/**\n * Usage: `mixins: [keyboardNavigationMixin(options)]`\n *\n * This mixin provides some common data and methods to navigate a list of items\n * (such as a dropdown or select menu) by keyboard.\n *\n * To be effective, you must bind the onUpKey and onDownKey events, usually to\n * the root element of the component.\n *\n * @param listItemRole\n * @param indexKey\n * @param idKey\n * @param listElementKey\n * @param activeItemKey\n * @param openMethod\n * @param afterHighlightMethod\n * @param beginningOfListMethod\n * @param endOfListMethod\n * @param scrollToOnHighlight\n * @param focusOnKeyboardNavigation\n * @displayName Keyboard Navigation Mixin\n */\nexport default ({\n  // Role of the list items in the component. This is used to identify the list items\n  // so you must update this if the role of your list items is anything other than 'option'\n  listItemRole = 'option',\n  // Key of the data prop that will be added to the component.\n  indexKey = 'highlightIndex',\n  idKey = 'highlightId',\n  // Key of the method that references the list element.\n  listElementKey = 'listRef',\n  // Optional, Key of the computed prop that references the currently active item element.\n  activeItemKey = '',\n  // Optional, name of the method that toggles the list visibility. Used for\n  // opening the list when up or down is pressed.\n  openMethod = null,\n  // Optional, method to call when the highlightIndex is changed.\n  afterHighlightMethod = null,\n  // Optional, method to call when the highlightIndex goes past the beginning of the list.\n  beginningOfListMethod = null,\n  // Optional, method to call when the highlightIndex goes past the end of the list.\n  endOfListMethod = null,\n  // Scroll the active element into view when highlighted by a keyboard event.\n  scrollToOnHighlight = true,\n  // Focus the active element on keyboard navigation.\n  focusOnKeyboardNavigation = false,\n} = {}) => ({\n  mixins: [Dom],\n\n  data () {\n    return {\n      [indexKey]: -1,\n      [idKey]: '',\n      scrollToOnHighlight,\n      focusOnKeyboardNavigation,\n    };\n  },\n\n  provide () {\n    return {\n      highlightId: () => this[idKey],\n    };\n  },\n\n  methods: {\n    // Returns the list element\n    // this[listElement]() can return a Vue component, in which case we need to target\n    // the $el property, or it can simply be an html element.\n    _getListElement () {\n      return returnFirstEl(this[listElementKey]()?.$el) || this[listElementKey]();\n    },\n\n    // Gets the length of all the items in the list, uses the listItemRole param to determine\n    // whether an element is a list item.\n    _itemsLength () {\n      const listItems = this._getListItemNodes();\n\n      if (listItems === null) {\n        return 0;\n      }\n\n      return listItems.length;\n    },\n\n    // Gets all the list item nodes within the list element\n    _getListItemNodes () {\n      const listElement = this._getListElement();\n\n      if (!listElement) {\n        console.error(ERROR_INVALID_LIST_ELEMENT, listElement);\n        return null;\n      }\n\n      return Array.from(listElement.querySelectorAll(`[role=\"${listItemRole}\"], #sr-only-close-button`));\n    },\n\n    onUpKey () {\n      if (openMethod) {\n        this[openMethod](true);\n      }\n      if (this[indexKey] > 0) {\n        this.setHighlightIndex(this[indexKey] - 1);\n      } else if (beginningOfListMethod) {\n        this[beginningOfListMethod]();\n      }\n      this.scrollActiveItemIntoViewIfNeeded();\n      this.focusActiveItemIfNeeded();\n    },\n\n    onDownKey () {\n      if (openMethod) {\n        this[openMethod](true);\n      }\n      if (this[indexKey] < this._itemsLength() - 1) {\n        this.setHighlightIndex(this[indexKey] + 1);\n      } else if (endOfListMethod) {\n        this[endOfListMethod]();\n      }\n      this.scrollActiveItemIntoViewIfNeeded();\n      this.focusActiveItemIfNeeded();\n    },\n\n    onHomeKey () {\n      this.jumpToBeginning();\n      this.scrollActiveItemIntoViewIfNeeded();\n      this.focusActiveItemIfNeeded();\n    },\n\n    onEndKey () {\n      this.jumpToEnd();\n      this.scrollActiveItemIntoViewIfNeeded();\n      this.focusActiveItemIfNeeded();\n    },\n\n    onNavigationKey (key) {\n      const listItems = this._getListItemNodes();\n\n      const matchingItems = listItems.filter(item => {\n        const content = item.textContent.trim().toLowerCase();\n        return content.startsWith(key.toLowerCase());\n      });\n\n      if (matchingItems.length <= 0) {\n        return;\n      }\n\n      const highlightedMatchingItemIndex = matchingItems.findIndex(item => {\n        return this[indexKey] === listItems.indexOf(item);\n      });\n\n      const nextHighlightedItemIndex = listItems.indexOf(\n        highlightedMatchingItemIndex < matchingItems.length - 1\n          ? matchingItems[highlightedMatchingItemIndex + 1]\n          : matchingItems[0],\n      );\n\n      this.setHighlightIndex(nextHighlightedItemIndex);\n      this.scrollActiveItemIntoViewIfNeeded();\n      this.focusActiveItemIfNeeded();\n    },\n\n    isValidLetter (key) {\n      if (key.length > 1) {\n        return false;\n      }\n\n      return (key >= 'a' && key <= 'z') || (key >= 'A' && key <= 'Z');\n    },\n\n    jumpToBeginning () {\n      this.setHighlightIndex(0);\n    },\n\n    jumpToEnd () {\n      this.setHighlightIndex(this._itemsLength() - 1);\n    },\n\n    setHighlightIndex (num) {\n      this[indexKey] = num;\n      this[idKey] = this._getItemId(num);\n\n      if (this._itemsLength() && afterHighlightMethod) {\n        this[afterHighlightMethod](num);\n      }\n    },\n\n    setHighlightId (id) {\n      this[idKey] = id;\n      this[indexKey] = this._getItemIndex(id);\n\n      if (this._itemsLength() && afterHighlightMethod) {\n        this[afterHighlightMethod](this._getItemIndex(id));\n      }\n    },\n\n    _getItemIndex (id) {\n      const listElement = this._getListElement();\n      if (!listElement) {\n        return;\n      }\n\n      const listItems = Array.from(listElement.querySelectorAll(`[role=\"${listItemRole}\"], #sr-only-close-button`));\n      return listItems.indexOf(listElement.querySelector(`#${id}`));\n    },\n\n    _getItemId (index) {\n      const listElement = this._getListElement();\n      if (!listElement) {\n        return;\n      }\n\n      return listElement.querySelectorAll(`[role=\"${listItemRole}\"], #sr-only-close-button`)[index]?.id;\n    },\n\n    scrollActiveItemIntoViewIfNeeded () {\n      if (!this.scrollToOnHighlight) {\n        return;\n      }\n      const activeItemEl = this[activeItemKey];\n      if (activeItemEl) {\n        // When listElementKey is not passed,\n        // scrollElementIntoViewIfNeeded will default to the immediate wrapper of the item.\n        const listElement = this._getListElement();\n        this.scrollElementIntoViewIfNeeded(activeItemEl, null, null, listElement);\n      }\n    },\n\n    focusActiveItemIfNeeded () {\n      if (!this.focusOnKeyboardNavigation) {\n        return;\n      }\n      const activeItemEl = this[activeItemKey];\n      if (activeItemEl) {\n        activeItemEl.focus();\n      }\n    },\n  },\n});\n"],"names":["ERROR_INVALID_LIST_ELEMENT","KeyboardNavigation","listItemRole","indexKey","idKey","listElementKey","activeItemKey","openMethod","afterHighlightMethod","beginningOfListMethod","endOfListMethod","scrollToOnHighlight","focusOnKeyboardNavigation","Dom","returnFirstEl","_a","listItems","listElement","key","matchingItems","item","highlightedMatchingItemIndex","nextHighlightedItemIndex","num","id","index","activeItemEl"],"mappings":"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"}
+{"version":3,"file":"keyboard-list-navigation.cjs","sources":["../../../common/mixins/keyboard_list_navigation.js"],"sourcesContent":["import Dom from './dom';\nimport { returnFirstEl } from '@/common/utils';\n\nconst ERROR_INVALID_LIST_ELEMENT = (\n  'listElementKey is required or the referenced ' +\n  'element doesn\\'t exist. Received listElement: '\n);\n\n/**\n * Usage: `mixins: [keyboardNavigationMixin(options)]`\n *\n * This mixin provides some common data and methods to navigate a list of items\n * (such as a dropdown or select menu) by keyboard.\n *\n * To be effective, you must bind the onUpKey and onDownKey events, usually to\n * the root element of the component.\n *\n * @param listItemRole\n * @param indexKey\n * @param idKey\n * @param listElementKey\n * @param activeItemKey\n * @param openMethod\n * @param afterHighlightMethod\n * @param beginningOfListMethod\n * @param endOfListMethod\n * @param scrollToOnHighlight\n * @param focusOnKeyboardNavigation\n * @displayName Keyboard Navigation Mixin\n */\nexport default ({\n  // Role of the list items in the component. This is used to identify the list items\n  // so you must update this if the role of your list items is anything other than 'option'\n  listItemRole = 'option',\n  // Key of the data prop that will be added to the component.\n  indexKey = 'highlightIndex',\n  idKey = 'highlightId',\n  // Key of the method that references the list element.\n  listElementKey = 'listRef',\n  // Optional, Key of the computed prop that references the currently active item element.\n  activeItemKey = '',\n  // Optional, name of the method that toggles the list visibility. Used for\n  // opening the list when up or down is pressed.\n  openMethod = null,\n  // Optional, method to call when the highlightIndex is changed.\n  afterHighlightMethod = null,\n  // Optional, method to call when the highlightIndex goes past the beginning of the list.\n  beginningOfListMethod = null,\n  // Optional, method to call when the highlightIndex goes past the end of the list.\n  endOfListMethod = null,\n  // Scroll the active element into view when highlighted by a keyboard event.\n  scrollToOnHighlight = true,\n  // Focus the active element on keyboard navigation.\n  focusOnKeyboardNavigation = false,\n} = {}) => ({\n  mixins: [Dom],\n\n  data () {\n    return {\n      [indexKey]: -1,\n      [idKey]: '',\n      scrollToOnHighlight,\n      focusOnKeyboardNavigation,\n    };\n  },\n\n  provide () {\n    return {\n      highlightId: () => this[idKey],\n    };\n  },\n\n  methods: {\n    // Returns the list element\n    // this[listElement]() can return a Vue component, in which case we need to target\n    // the $el property, or it can simply be an html element.\n    _getListElement () {\n      return returnFirstEl(this[listElementKey]()?.$el) || this[listElementKey]();\n    },\n\n    // Gets the length of all the items in the list, uses the listItemRole param to determine\n    // whether an element is a list item.\n    _itemsLength () {\n      const listItems = this._getListItemNodes();\n\n      if (listItems === null) {\n        return 0;\n      }\n\n      return listItems.length;\n    },\n\n    // Gets all the list item nodes within the list element\n    _getListItemNodes () {\n      const listElement = this._getListElement();\n\n      if (!listElement) {\n        console.error(ERROR_INVALID_LIST_ELEMENT, listElement);\n        return null;\n      }\n\n      return Array.from(listElement.querySelectorAll(`[role=\"${listItemRole}\"], #sr-only-close-button`));\n    },\n\n    onUpKey () {\n      if (openMethod) {\n        this[openMethod](true);\n      }\n      if (this[indexKey] > 0) {\n        this.setHighlightIndex(this[indexKey] - 1);\n      } else if (beginningOfListMethod) {\n        this[beginningOfListMethod]();\n      }\n      this.scrollActiveItemIntoViewIfNeeded();\n      this.focusActiveItemIfNeeded();\n    },\n\n    onDownKey () {\n      if (openMethod) {\n        this[openMethod](true);\n      }\n      if (this[indexKey] < this._itemsLength() - 1) {\n        this.setHighlightIndex(this[indexKey] + 1);\n      } else if (endOfListMethod) {\n        this[endOfListMethod]();\n      }\n      this.scrollActiveItemIntoViewIfNeeded();\n      this.focusActiveItemIfNeeded();\n    },\n\n    onHomeKey () {\n      this.jumpToBeginning();\n      this.scrollActiveItemIntoViewIfNeeded();\n      this.focusActiveItemIfNeeded();\n    },\n\n    onEndKey () {\n      this.jumpToEnd();\n      this.scrollActiveItemIntoViewIfNeeded();\n      this.focusActiveItemIfNeeded();\n    },\n\n    onNavigationKey (key) {\n      const listItems = this._getListItemNodes();\n\n      const matchingItems = listItems.filter(item => {\n        const content = item.textContent.trim().toLowerCase();\n        return content.startsWith(key.toLowerCase());\n      });\n\n      if (matchingItems.length <= 0) {\n        return;\n      }\n\n      const highlightedMatchingItemIndex = matchingItems.findIndex(item => {\n        return this[indexKey] === listItems.indexOf(item);\n      });\n\n      const nextHighlightedItemIndex = listItems.indexOf(\n        highlightedMatchingItemIndex < matchingItems.length - 1\n          ? matchingItems[highlightedMatchingItemIndex + 1]\n          : matchingItems[0],\n      );\n\n      this.setHighlightIndex(nextHighlightedItemIndex);\n      this.scrollActiveItemIntoViewIfNeeded();\n      this.focusActiveItemIfNeeded();\n    },\n\n    isValidLetter (key) {\n      if (key.length > 1) {\n        return false;\n      }\n\n      return (key >= 'a' && key <= 'z') || (key >= 'A' && key <= 'Z');\n    },\n\n    jumpToBeginning () {\n      this.setHighlightIndex(0);\n    },\n\n    jumpToEnd () {\n      this.setHighlightIndex(this._itemsLength() - 1);\n    },\n\n    setHighlightIndex (num) {\n      this[indexKey] = num;\n      this[idKey] = this._getItemId(num);\n\n      if (this._itemsLength() && afterHighlightMethod) {\n        this[afterHighlightMethod](num);\n      }\n    },\n\n    setHighlightId (id) {\n      if (!id) return;\n      this[idKey] = id;\n      this[indexKey] = this._getItemIndex(id);\n\n      if (this._itemsLength() && afterHighlightMethod) {\n        this[afterHighlightMethod](this._getItemIndex(id));\n      }\n    },\n\n    _getItemIndex (id) {\n      const listElement = this._getListElement();\n      if (!listElement) {\n        return;\n      }\n\n      const listItems = Array.from(listElement.querySelectorAll(`[role=\"${listItemRole}\"], #sr-only-close-button`));\n      return listItems.indexOf(listElement.querySelector(`#${id}`));\n    },\n\n    _getItemId (index) {\n      const listElement = this._getListElement();\n      if (!listElement) {\n        return;\n      }\n\n      return listElement.querySelectorAll(`[role=\"${listItemRole}\"], #sr-only-close-button`)[index]?.id;\n    },\n\n    scrollActiveItemIntoViewIfNeeded () {\n      if (!this.scrollToOnHighlight) {\n        return;\n      }\n      const activeItemEl = this[activeItemKey];\n      if (activeItemEl) {\n        // When listElementKey is not passed,\n        // scrollElementIntoViewIfNeeded will default to the immediate wrapper of the item.\n        const listElement = this._getListElement();\n        this.scrollElementIntoViewIfNeeded(activeItemEl, null, null, listElement);\n      }\n    },\n\n    focusActiveItemIfNeeded () {\n      if (!this.focusOnKeyboardNavigation) {\n        return;\n      }\n      const activeItemEl = this[activeItemKey];\n      if (activeItemEl) {\n        activeItemEl.focus();\n      }\n    },\n  },\n});\n"],"names":["ERROR_INVALID_LIST_ELEMENT","KeyboardNavigation","listItemRole","indexKey","idKey","listElementKey","activeItemKey","openMethod","afterHighlightMethod","beginningOfListMethod","endOfListMethod","scrollToOnHighlight","focusOnKeyboardNavigation","Dom","returnFirstEl","_a","listItems","listElement","key","matchingItems","item","highlightedMatchingItemIndex","nextHighlightedItemIndex","num","id","index","activeItemEl"],"mappings":"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"}

package/dist/common/mixins/keyboard-list-navigation.js

@@ -19,9 +19,9 @@ const _ = "listElementKey is required or the referenced element doesn't exist. R
   // Optional, method to call when the highlightIndex goes past the beginning of the list.
   beginningOfListMethod: m = null,
   // Optional, method to call when the highlightIndex goes past the end of the list.
-  endOfListMethod: g = null,
+  endOfListMethod: u = null,
   // Scroll the active element into view when highlighted by a keyboard event.
-  scrollToOnHighlight: f = !0,
+  scrollToOnHighlight: g = !0,
   // Focus the active element on keyboard navigation.
   focusOnKeyboardNavigation: d = !1
 } = {}) => ({
@@ -30,7 +30,7 @@ const _ = "listElementKey is required or the referenced element doesn't exist. R
     return {
       [s]: -1,
       [n]: "",
-      scrollToOnHighlight: f,
+      scrollToOnHighlight: g,
       focusOnKeyboardNavigation: d
     };
   },
@@ -62,7 +62,7 @@ const _ = "listElementKey is required or the referenced element doesn't exist. R
       l && this[l](!0), this[s] > 0 ? this.setHighlightIndex(this[s] - 1) : m && this[m](), this.scrollActiveItemIntoViewIfNeeded(), this.focusActiveItemIfNeeded();
     },
     onDownKey() {
-      l && this[l](!0), this[s] < this._itemsLength() - 1 ? this.setHighlightIndex(this[s] + 1) : g && this[g](), this.scrollActiveItemIntoViewIfNeeded(), this.focusActiveItemIfNeeded();
+      l && this[l](!0), this[s] < this._itemsLength() - 1 ? this.setHighlightIndex(this[s] + 1) : u && this[u](), this.scrollActiveItemIntoViewIfNeeded(), this.focusActiveItemIfNeeded();
     },
     onHomeKey() {
       this.jumpToBeginning(), this.scrollActiveItemIntoViewIfNeeded(), this.focusActiveItemIfNeeded();
@@ -74,8 +74,8 @@ const _ = "listElementKey is required or the referenced element doesn't exist. R
       const e = this._getListItemNodes(), i = e.filter((h) => h.textContent.trim().toLowerCase().startsWith(t.toLowerCase()));
       if (i.length <= 0)
         return;
-      const u = i.findIndex((h) => this[s] === e.indexOf(h)), a = e.indexOf(
-        u < i.length - 1 ? i[u + 1] : i[0]
+      const f = i.findIndex((h) => this[s] === e.indexOf(h)), a = e.indexOf(
+        f < i.length - 1 ? i[f + 1] : i[0]
       );
       this.setHighlightIndex(a), this.scrollActiveItemIntoViewIfNeeded(), this.focusActiveItemIfNeeded();
     },
@@ -92,7 +92,7 @@ const _ = "listElementKey is required or the referenced element doesn't exist. R
       this[s] = t, this[n] = this._getItemId(t), this._itemsLength() && r && this[r](t);
     },
     setHighlightId(t) {
-      this[n] = t, this[s] = this._getItemIndex(t), this._itemsLength() && r && this[r](this._getItemIndex(t));
+      t && (this[n] = t, this[s] = this._getItemIndex(t), this._itemsLength() && r && this[r](this._getItemIndex(t)));
     },
     _getItemIndex(t) {
       const e = this._getListElement();

package/dist/common/mixins/keyboard-list-navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard-list-navigation.js","sources":["../../../common/mixins/keyboard_list_navigation.js"],"sourcesContent":["import Dom from './dom';\nimport { returnFirstEl } from '@/common/utils';\n\nconst ERROR_INVALID_LIST_ELEMENT = (\n  'listElementKey is required or the referenced ' +\n  'element doesn\\'t exist. Received listElement: '\n);\n\n/**\n * Usage: `mixins: [keyboardNavigationMixin(options)]`\n *\n * This mixin provides some common data and methods to navigate a list of items\n * (such as a dropdown or select menu) by keyboard.\n *\n * To be effective, you must bind the onUpKey and onDownKey events, usually to\n * the root element of the component.\n *\n * @param listItemRole\n * @param indexKey\n * @param idKey\n * @param listElementKey\n * @param activeItemKey\n * @param openMethod\n * @param afterHighlightMethod\n * @param beginningOfListMethod\n * @param endOfListMethod\n * @param scrollToOnHighlight\n * @param focusOnKeyboardNavigation\n * @displayName Keyboard Navigation Mixin\n */\nexport default ({\n  // Role of the list items in the component. This is used to identify the list items\n  // so you must update this if the role of your list items is anything other than 'option'\n  listItemRole = 'option',\n  // Key of the data prop that will be added to the component.\n  indexKey = 'highlightIndex',\n  idKey = 'highlightId',\n  // Key of the method that references the list element.\n  listElementKey = 'listRef',\n  // Optional, Key of the computed prop that references the currently active item element.\n  activeItemKey = '',\n  // Optional, name of the method that toggles the list visibility. Used for\n  // opening the list when up or down is pressed.\n  openMethod = null,\n  // Optional, method to call when the highlightIndex is changed.\n  afterHighlightMethod = null,\n  // Optional, method to call when the highlightIndex goes past the beginning of the list.\n  beginningOfListMethod = null,\n  // Optional, method to call when the highlightIndex goes past the end of the list.\n  endOfListMethod = null,\n  // Scroll the active element into view when highlighted by a keyboard event.\n  scrollToOnHighlight = true,\n  // Focus the active element on keyboard navigation.\n  focusOnKeyboardNavigation = false,\n} = {}) => ({\n  mixins: [Dom],\n\n  data () {\n    return {\n      [indexKey]: -1,\n      [idKey]: '',\n      scrollToOnHighlight,\n      focusOnKeyboardNavigation,\n    };\n  },\n\n  provide () {\n    return {\n      highlightId: () => this[idKey],\n    };\n  },\n\n  methods: {\n    // Returns the list element\n    // this[listElement]() can return a Vue component, in which case we need to target\n    // the $el property, or it can simply be an html element.\n    _getListElement () {\n      return returnFirstEl(this[listElementKey]()?.$el) || this[listElementKey]();\n    },\n\n    // Gets the length of all the items in the list, uses the listItemRole param to determine\n    // whether an element is a list item.\n    _itemsLength () {\n      const listItems = this._getListItemNodes();\n\n      if (listItems === null) {\n        return 0;\n      }\n\n      return listItems.length;\n    },\n\n    // Gets all the list item nodes within the list element\n    _getListItemNodes () {\n      const listElement = this._getListElement();\n\n      if (!listElement) {\n        console.error(ERROR_INVALID_LIST_ELEMENT, listElement);\n        return null;\n      }\n\n      return Array.from(listElement.querySelectorAll(`[role=\"${listItemRole}\"], #sr-only-close-button`));\n    },\n\n    onUpKey () {\n      if (openMethod) {\n        this[openMethod](true);\n      }\n      if (this[indexKey] > 0) {\n        this.setHighlightIndex(this[indexKey] - 1);\n      } else if (beginningOfListMethod) {\n        this[beginningOfListMethod]();\n      }\n      this.scrollActiveItemIntoViewIfNeeded();\n      this.focusActiveItemIfNeeded();\n    },\n\n    onDownKey () {\n      if (openMethod) {\n        this[openMethod](true);\n      }\n      if (this[indexKey] < this._itemsLength() - 1) {\n        this.setHighlightIndex(this[indexKey] + 1);\n      } else if (endOfListMethod) {\n        this[endOfListMethod]();\n      }\n      this.scrollActiveItemIntoViewIfNeeded();\n      this.focusActiveItemIfNeeded();\n    },\n\n    onHomeKey () {\n      this.jumpToBeginning();\n      this.scrollActiveItemIntoViewIfNeeded();\n      this.focusActiveItemIfNeeded();\n    },\n\n    onEndKey () {\n      this.jumpToEnd();\n      this.scrollActiveItemIntoViewIfNeeded();\n      this.focusActiveItemIfNeeded();\n    },\n\n    onNavigationKey (key) {\n      const listItems = this._getListItemNodes();\n\n      const matchingItems = listItems.filter(item => {\n        const content = item.textContent.trim().toLowerCase();\n        return content.startsWith(key.toLowerCase());\n      });\n\n      if (matchingItems.length <= 0) {\n        return;\n      }\n\n      const highlightedMatchingItemIndex = matchingItems.findIndex(item => {\n        return this[indexKey] === listItems.indexOf(item);\n      });\n\n      const nextHighlightedItemIndex = listItems.indexOf(\n        highlightedMatchingItemIndex < matchingItems.length - 1\n          ? matchingItems[highlightedMatchingItemIndex + 1]\n          : matchingItems[0],\n      );\n\n      this.setHighlightIndex(nextHighlightedItemIndex);\n      this.scrollActiveItemIntoViewIfNeeded();\n      this.focusActiveItemIfNeeded();\n    },\n\n    isValidLetter (key) {\n      if (key.length > 1) {\n        return false;\n      }\n\n      return (key >= 'a' && key <= 'z') || (key >= 'A' && key <= 'Z');\n    },\n\n    jumpToBeginning () {\n      this.setHighlightIndex(0);\n    },\n\n    jumpToEnd () {\n      this.setHighlightIndex(this._itemsLength() - 1);\n    },\n\n    setHighlightIndex (num) {\n      this[indexKey] = num;\n      this[idKey] = this._getItemId(num);\n\n      if (this._itemsLength() && afterHighlightMethod) {\n        this[afterHighlightMethod](num);\n      }\n    },\n\n    setHighlightId (id) {\n      this[idKey] = id;\n      this[indexKey] = this._getItemIndex(id);\n\n      if (this._itemsLength() && afterHighlightMethod) {\n        this[afterHighlightMethod](this._getItemIndex(id));\n      }\n    },\n\n    _getItemIndex (id) {\n      const listElement = this._getListElement();\n      if (!listElement) {\n        return;\n      }\n\n      const listItems = Array.from(listElement.querySelectorAll(`[role=\"${listItemRole}\"], #sr-only-close-button`));\n      return listItems.indexOf(listElement.querySelector(`#${id}`));\n    },\n\n    _getItemId (index) {\n      const listElement = this._getListElement();\n      if (!listElement) {\n        return;\n      }\n\n      return listElement.querySelectorAll(`[role=\"${listItemRole}\"], #sr-only-close-button`)[index]?.id;\n    },\n\n    scrollActiveItemIntoViewIfNeeded () {\n      if (!this.scrollToOnHighlight) {\n        return;\n      }\n      const activeItemEl = this[activeItemKey];\n      if (activeItemEl) {\n        // When listElementKey is not passed,\n        // scrollElementIntoViewIfNeeded will default to the immediate wrapper of the item.\n        const listElement = this._getListElement();\n        this.scrollElementIntoViewIfNeeded(activeItemEl, null, null, listElement);\n      }\n    },\n\n    focusActiveItemIfNeeded () {\n      if (!this.focusOnKeyboardNavigation) {\n        return;\n      }\n      const activeItemEl = this[activeItemKey];\n      if (activeItemEl) {\n        activeItemEl.focus();\n      }\n    },\n  },\n});\n"],"names":["ERROR_INVALID_LIST_ELEMENT","KeyboardNavigation","listItemRole","indexKey","idKey","listElementKey","activeItemKey","openMethod","afterHighlightMethod","beginningOfListMethod","endOfListMethod","scrollToOnHighlight","focusOnKeyboardNavigation","Dom","returnFirstEl","_a","listItems","listElement","key","matchingItems","item","highlightedMatchingItemIndex","nextHighlightedItemIndex","num","id","index","activeItemEl"],"mappings":";;AAGA,MAAMA,IACJ,8FA0BFC,IAAe,CAAC;AAAA;AAAA;AAAA,EAGd,cAAAC,IAAe;AAAA;AAAA,EAEf,UAAAC,IAAW;AAAA,EACX,OAAAC,IAAQ;AAAA;AAAA,EAER,gBAAAC,IAAiB;AAAA;AAAA,EAEjB,eAAAC,IAAgB;AAAA;AAAA;AAAA,EAGhB,YAAAC,IAAa;AAAA;AAAA,EAEb,sBAAAC,IAAuB;AAAA;AAAA,EAEvB,uBAAAC,IAAwB;AAAA;AAAA,EAExB,iBAAAC,IAAkB;AAAA;AAAA,EAElB,qBAAAC,IAAsB;AAAA;AAAA,EAEtB,2BAAAC,IAA4B;AAC9B,IAAI,QAAQ;AAAA,EACV,QAAQ,CAACC,CAAG;AAAA,EAEZ,OAAQ;AACN,WAAO;AAAA,MACL,CAACV,CAAQ,GAAG;AAAA,MACZ,CAACC,CAAK,GAAG;AAAA,MACT,qBAAAO;AAAA,MACA,2BAAAC;AAAA,IACN;AAAA,EACE;AAAA,EAEA,UAAW;AACT,WAAO;AAAA,MACL,aAAa,MAAM,KAAKR,CAAK;AAAA,IACnC;AAAA,EACE;AAAA,EAEA,SAAS;AAAA;AAAA;AAAA;AAAA,IAIP,kBAAmB;;AACjB,aAAOU,GAAcC,IAAA,KAAKV,CAAc,EAAC,MAApB,gBAAAU,EAAwB,GAAG,KAAK,KAAKV,CAAc,EAAC;AAAA,IAC3E;AAAA;AAAA;AAAA,IAIA,eAAgB;AACd,YAAMW,IAAY,KAAK,kBAAiB;AAExC,aAAIA,MAAc,OACT,IAGFA,EAAU;AAAA,IACnB;AAAA;AAAA,IAGA,oBAAqB;AACnB,YAAMC,IAAc,KAAK,gBAAe;AAExC,aAAKA,IAKE,MAAM,KAAKA,EAAY,iBAAiB,UAAUf,CAAY,2BAA2B,CAAC,KAJ/F,QAAQ,MAAMF,GAA4BiB,CAAW,GAC9C;AAAA,IAIX;AAAA,IAEA,UAAW;AACT,MAAIV,KACF,KAAKA,CAAU,EAAE,EAAI,GAEnB,KAAKJ,CAAQ,IAAI,IACnB,KAAK,kBAAkB,KAAKA,CAAQ,IAAI,CAAC,IAChCM,KACT,KAAKA,CAAqB,EAAC,GAE7B,KAAK,iCAAgC,GACrC,KAAK,wBAAuB;AAAA,IAC9B;AAAA,IAEA,YAAa;AACX,MAAIF,KACF,KAAKA,CAAU,EAAE,EAAI,GAEnB,KAAKJ,CAAQ,IAAI,KAAK,aAAY,IAAK,IACzC,KAAK,kBAAkB,KAAKA,CAAQ,IAAI,CAAC,IAChCO,KACT,KAAKA,CAAe,EAAC,GAEvB,KAAK,iCAAgC,GACrC,KAAK,wBAAuB;AAAA,IAC9B;AAAA,IAEA,YAAa;AACX,WAAK,gBAAe,GACpB,KAAK,iCAAgC,GACrC,KAAK,wBAAuB;AAAA,IAC9B;AAAA,IAEA,WAAY;AACV,WAAK,UAAS,GACd,KAAK,iCAAgC,GACrC,KAAK,wBAAuB;AAAA,IAC9B;AAAA,IAEA,gBAAiBQ,GAAK;AACpB,YAAMF,IAAY,KAAK,kBAAiB,GAElCG,IAAgBH,EAAU,OAAO,CAAAI,MACrBA,EAAK,YAAY,KAAI,EAAG,YAAW,EACpC,WAAWF,EAAI,YAAW,CAAE,CAC5C;AAED,UAAIC,EAAc,UAAU;AAC1B;AAGF,YAAME,IAA+BF,EAAc,UAAU,CAAAC,MACpD,KAAKjB,CAAQ,MAAMa,EAAU,QAAQI,CAAI,CACjD,GAEKE,IAA2BN,EAAU;AAAA,QACzCK,IAA+BF,EAAc,SAAS,IAClDA,EAAcE,IAA+B,CAAC,IAC9CF,EAAc,CAAC;AAAA,MAC3B;AAEM,WAAK,kBAAkBG,CAAwB,GAC/C,KAAK,iCAAgC,GACrC,KAAK,wBAAuB;AAAA,IAC9B;AAAA,IAEA,cAAeJ,GAAK;AAClB,aAAIA,EAAI,SAAS,IACR,KAGDA,KAAO,OAAOA,KAAO,OAASA,KAAO,OAAOA,KAAO;AAAA,IAC7D;AAAA,IAEA,kBAAmB;AACjB,WAAK,kBAAkB,CAAC;AAAA,IAC1B;AAAA,IAEA,YAAa;AACX,WAAK,kBAAkB,KAAK,aAAY,IAAK,CAAC;AAAA,IAChD;AAAA,IAEA,kBAAmBK,GAAK;AACtB,WAAKpB,CAAQ,IAAIoB,GACjB,KAAKnB,CAAK,IAAI,KAAK,WAAWmB,CAAG,GAE7B,KAAK,aAAY,KAAMf,KACzB,KAAKA,CAAoB,EAAEe,CAAG;AAAA,IAElC;AAAA,IAEA,eAAgBC,GAAI;AAClB,WAAKpB,CAAK,IAAIoB,GACd,KAAKrB,CAAQ,IAAI,KAAK,cAAcqB,CAAE,GAElC,KAAK,aAAY,KAAMhB,KACzB,KAAKA,CAAoB,EAAE,KAAK,cAAcgB,CAAE,CAAC;AAAA,IAErD;AAAA,IAEA,cAAeA,GAAI;AACjB,YAAMP,IAAc,KAAK,gBAAe;AACxC,aAAKA,IAIa,MAAM,KAAKA,EAAY,iBAAiB,UAAUf,CAAY,2BAA2B,CAAC,EAC3F,QAAQe,EAAY,cAAc,IAAIO,CAAE,EAAE,CAAC,IAJ1D;AAAA,IAKJ;AAAA,IAEA,WAAYC,GAAO;;AACjB,YAAMR,IAAc,KAAK,gBAAe;AACxC,UAAKA;AAIL,gBAAOF,IAAAE,EAAY,iBAAiB,UAAUf,CAAY,2BAA2B,EAAEuB,CAAK,MAArF,gBAAAV,EAAwF;AAAA,IACjG;AAAA,IAEA,mCAAoC;AAClC,UAAI,CAAC,KAAK;AACR;AAEF,YAAMW,IAAe,KAAKpB,CAAa;AACvC,UAAIoB,GAAc;AAGhB,cAAMT,IAAc,KAAK,gBAAe;AACxC,aAAK,8BAA8BS,GAAc,MAAM,MAAMT,CAAW;AAAA,MAC1E;AAAA,IACF;AAAA,IAEA,0BAA2B;AACzB,UAAI,CAAC,KAAK;AACR;AAEF,YAAMS,IAAe,KAAKpB,CAAa;AACvC,MAAIoB,KACFA,EAAa,MAAK;AAAA,IAEtB;AAAA,EACJ;AACA;"}
+{"version":3,"file":"keyboard-list-navigation.js","sources":["../../../common/mixins/keyboard_list_navigation.js"],"sourcesContent":["import Dom from './dom';\nimport { returnFirstEl } from '@/common/utils';\n\nconst ERROR_INVALID_LIST_ELEMENT = (\n  'listElementKey is required or the referenced ' +\n  'element doesn\\'t exist. Received listElement: '\n);\n\n/**\n * Usage: `mixins: [keyboardNavigationMixin(options)]`\n *\n * This mixin provides some common data and methods to navigate a list of items\n * (such as a dropdown or select menu) by keyboard.\n *\n * To be effective, you must bind the onUpKey and onDownKey events, usually to\n * the root element of the component.\n *\n * @param listItemRole\n * @param indexKey\n * @param idKey\n * @param listElementKey\n * @param activeItemKey\n * @param openMethod\n * @param afterHighlightMethod\n * @param beginningOfListMethod\n * @param endOfListMethod\n * @param scrollToOnHighlight\n * @param focusOnKeyboardNavigation\n * @displayName Keyboard Navigation Mixin\n */\nexport default ({\n  // Role of the list items in the component. This is used to identify the list items\n  // so you must update this if the role of your list items is anything other than 'option'\n  listItemRole = 'option',\n  // Key of the data prop that will be added to the component.\n  indexKey = 'highlightIndex',\n  idKey = 'highlightId',\n  // Key of the method that references the list element.\n  listElementKey = 'listRef',\n  // Optional, Key of the computed prop that references the currently active item element.\n  activeItemKey = '',\n  // Optional, name of the method that toggles the list visibility. Used for\n  // opening the list when up or down is pressed.\n  openMethod = null,\n  // Optional, method to call when the highlightIndex is changed.\n  afterHighlightMethod = null,\n  // Optional, method to call when the highlightIndex goes past the beginning of the list.\n  beginningOfListMethod = null,\n  // Optional, method to call when the highlightIndex goes past the end of the list.\n  endOfListMethod = null,\n  // Scroll the active element into view when highlighted by a keyboard event.\n  scrollToOnHighlight = true,\n  // Focus the active element on keyboard navigation.\n  focusOnKeyboardNavigation = false,\n} = {}) => ({\n  mixins: [Dom],\n\n  data () {\n    return {\n      [indexKey]: -1,\n      [idKey]: '',\n      scrollToOnHighlight,\n      focusOnKeyboardNavigation,\n    };\n  },\n\n  provide () {\n    return {\n      highlightId: () => this[idKey],\n    };\n  },\n\n  methods: {\n    // Returns the list element\n    // this[listElement]() can return a Vue component, in which case we need to target\n    // the $el property, or it can simply be an html element.\n    _getListElement () {\n      return returnFirstEl(this[listElementKey]()?.$el) || this[listElementKey]();\n    },\n\n    // Gets the length of all the items in the list, uses the listItemRole param to determine\n    // whether an element is a list item.\n    _itemsLength () {\n      const listItems = this._getListItemNodes();\n\n      if (listItems === null) {\n        return 0;\n      }\n\n      return listItems.length;\n    },\n\n    // Gets all the list item nodes within the list element\n    _getListItemNodes () {\n      const listElement = this._getListElement();\n\n      if (!listElement) {\n        console.error(ERROR_INVALID_LIST_ELEMENT, listElement);\n        return null;\n      }\n\n      return Array.from(listElement.querySelectorAll(`[role=\"${listItemRole}\"], #sr-only-close-button`));\n    },\n\n    onUpKey () {\n      if (openMethod) {\n        this[openMethod](true);\n      }\n      if (this[indexKey] > 0) {\n        this.setHighlightIndex(this[indexKey] - 1);\n      } else if (beginningOfListMethod) {\n        this[beginningOfListMethod]();\n      }\n      this.scrollActiveItemIntoViewIfNeeded();\n      this.focusActiveItemIfNeeded();\n    },\n\n    onDownKey () {\n      if (openMethod) {\n        this[openMethod](true);\n      }\n      if (this[indexKey] < this._itemsLength() - 1) {\n        this.setHighlightIndex(this[indexKey] + 1);\n      } else if (endOfListMethod) {\n        this[endOfListMethod]();\n      }\n      this.scrollActiveItemIntoViewIfNeeded();\n      this.focusActiveItemIfNeeded();\n    },\n\n    onHomeKey () {\n      this.jumpToBeginning();\n      this.scrollActiveItemIntoViewIfNeeded();\n      this.focusActiveItemIfNeeded();\n    },\n\n    onEndKey () {\n      this.jumpToEnd();\n      this.scrollActiveItemIntoViewIfNeeded();\n      this.focusActiveItemIfNeeded();\n    },\n\n    onNavigationKey (key) {\n      const listItems = this._getListItemNodes();\n\n      const matchingItems = listItems.filter(item => {\n        const content = item.textContent.trim().toLowerCase();\n        return content.startsWith(key.toLowerCase());\n      });\n\n      if (matchingItems.length <= 0) {\n        return;\n      }\n\n      const highlightedMatchingItemIndex = matchingItems.findIndex(item => {\n        return this[indexKey] === listItems.indexOf(item);\n      });\n\n      const nextHighlightedItemIndex = listItems.indexOf(\n        highlightedMatchingItemIndex < matchingItems.length - 1\n          ? matchingItems[highlightedMatchingItemIndex + 1]\n          : matchingItems[0],\n      );\n\n      this.setHighlightIndex(nextHighlightedItemIndex);\n      this.scrollActiveItemIntoViewIfNeeded();\n      this.focusActiveItemIfNeeded();\n    },\n\n    isValidLetter (key) {\n      if (key.length > 1) {\n        return false;\n      }\n\n      return (key >= 'a' && key <= 'z') || (key >= 'A' && key <= 'Z');\n    },\n\n    jumpToBeginning () {\n      this.setHighlightIndex(0);\n    },\n\n    jumpToEnd () {\n      this.setHighlightIndex(this._itemsLength() - 1);\n    },\n\n    setHighlightIndex (num) {\n      this[indexKey] = num;\n      this[idKey] = this._getItemId(num);\n\n      if (this._itemsLength() && afterHighlightMethod) {\n        this[afterHighlightMethod](num);\n      }\n    },\n\n    setHighlightId (id) {\n      if (!id) return;\n      this[idKey] = id;\n      this[indexKey] = this._getItemIndex(id);\n\n      if (this._itemsLength() && afterHighlightMethod) {\n        this[afterHighlightMethod](this._getItemIndex(id));\n      }\n    },\n\n    _getItemIndex (id) {\n      const listElement = this._getListElement();\n      if (!listElement) {\n        return;\n      }\n\n      const listItems = Array.from(listElement.querySelectorAll(`[role=\"${listItemRole}\"], #sr-only-close-button`));\n      return listItems.indexOf(listElement.querySelector(`#${id}`));\n    },\n\n    _getItemId (index) {\n      const listElement = this._getListElement();\n      if (!listElement) {\n        return;\n      }\n\n      return listElement.querySelectorAll(`[role=\"${listItemRole}\"], #sr-only-close-button`)[index]?.id;\n    },\n\n    scrollActiveItemIntoViewIfNeeded () {\n      if (!this.scrollToOnHighlight) {\n        return;\n      }\n      const activeItemEl = this[activeItemKey];\n      if (activeItemEl) {\n        // When listElementKey is not passed,\n        // scrollElementIntoViewIfNeeded will default to the immediate wrapper of the item.\n        const listElement = this._getListElement();\n        this.scrollElementIntoViewIfNeeded(activeItemEl, null, null, listElement);\n      }\n    },\n\n    focusActiveItemIfNeeded () {\n      if (!this.focusOnKeyboardNavigation) {\n        return;\n      }\n      const activeItemEl = this[activeItemKey];\n      if (activeItemEl) {\n        activeItemEl.focus();\n      }\n    },\n  },\n});\n"],"names":["ERROR_INVALID_LIST_ELEMENT","KeyboardNavigation","listItemRole","indexKey","idKey","listElementKey","activeItemKey","openMethod","afterHighlightMethod","beginningOfListMethod","endOfListMethod","scrollToOnHighlight","focusOnKeyboardNavigation","Dom","returnFirstEl","_a","listItems","listElement","key","matchingItems","item","highlightedMatchingItemIndex","nextHighlightedItemIndex","num","id","index","activeItemEl"],"mappings":"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"}