@empathyco/x-components 6.0.0-alpha.9 → 6.0.0-alpha.90

package/js/components/auto-progress-bar.vue2.js

@@ -16,7 +16,7 @@ var _sfc_main = defineComponent({
          */
         isLoading: {
             type: Boolean,
-            default: true
+            default: true,
         },
         /**
          * The duration in seconds of the progress bar.
@@ -25,8 +25,8 @@ var _sfc_main = defineComponent({
          */
         durationInSeconds: {
             type: Number,
-            default: 5
-        }
+            default: 5,
+        },
     },
     setup(props) {
         /**
@@ -37,12 +37,12 @@ var _sfc_main = defineComponent({
          * @internal
          */
         const cssStyles = computed(() => ({
-            animationDuration: `${props.durationInSeconds}s`
+            animationDuration: `${props.durationInSeconds}s`,
         }));
         return {
-            cssStyles
+            cssStyles,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/components/auto-progress-bar.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"auto-progress-bar.vue2.js","sources":["../../../src/components/auto-progress-bar.vue"],"sourcesContent":["<template>\n  <div v-if=\"isLoading\" class=\"x-progress-bar\" data-test=\"progress-bar\" role=\"progressbar\">\n    <div class=\"x-progress-bar-fill\" :style=\"cssStyles\" data-test=\"progress-bar-line\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, StyleValue } from 'vue';\n\n  /**\n   * The auto progress bar component is useful for displaying a visual indicator of numerical data\n   * in a bar shape.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'AutoProgressBar',\n    props: {\n      /**\n       * A boolean flag indicating if the bar is loading.\n       *\n       * @public\n       */\n      isLoading: {\n        type: Boolean,\n        default: true\n      },\n      /**\n       * The duration in seconds of the progress bar.\n       *\n       * @public\n       */\n      durationInSeconds: {\n        type: Number,\n        default: 5\n      }\n    },\n    setup(props) {\n      /**\n       * Computed property to calculate the animation's duration.\n       *\n       * @returns The CSS styles of the animation.\n       *\n       * @internal\n       */\n      const cssStyles = computed<StyleValue>(() => ({\n        animationDuration: `${props.durationInSeconds}s`\n      }));\n\n      return {\n        cssStyles\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-progress-bar {\n    display: inline-block;\n    overflow: hidden;\n    background-color: #dbe2e5;\n    border-radius: 4px;\n  }\n\n  .x-progress-bar-fill {\n    height: 4px;\n    background-color: #283034;\n    animation: slide linear;\n    transform-origin: left;\n  }\n\n  @keyframes slide {\n    0% {\n      transform: translateX(-100%);\n    }\n    100% {\n      transform: translateX(0);\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n  after the user clicks the redirection button.\n- [`UserClickedAbortARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n  after the user clicks the abort redirection button.\n\n## See it in action\n\nHere you have a basic example of how the auto progress bar is rendered.\n\n```vue live\n<template>\n  <AutoProgressBar :isLoading=\"isLoading\" :durationInSeconds=\"durationInSeconds\" />\n</template>\n\n<script>\n  import { AutoProgressBar } from '@empathyco/x-components';\n  export default {\n    name: 'AutoProgressBarDemo',\n    components: {\n      AutoProgressBar\n    },\n    data() {\n      return {\n        isLoading: true,\n        durationInSeconds: 100\n      };\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the auto progress bar has been set to do an animation for 5 seconds. There is a way\nto cancel the animation by sending the isLoading prop to false.\n\n```vue live\n<template>\n  <AutoProgressBar :durationInSeconds=\"5\" :isLoading=\"true\" />\n</template>\n\n<script>\n  import { AutoProgressBar } from '@empathyco/x-components';\n  export default {\n    name: 'AutoProgressBarDemo',\n    components: {\n      AutoProgressBar\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;AASE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,iBAAiB;AACvB,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAG;AACb,SAAA;AACD;;;;AAIE;AACF,QAAA,iBAAiB,EAAE;AACjB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAA;AACX,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;;;AAME;AACF,QAAA,MAAM,SAAQ,GAAI,QAAQ,CAAa,OAAO;AAC5C,YAAA,iBAAiB,EAAE,CAAA,EAAG,KAAK,CAAC,iBAAiB,CAAE,CAAA,CAAA;AAChD,SAAA,CAAC,CAAC,CAAA;QAEH,OAAO;YACL,SAAQ;SACT,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"auto-progress-bar.vue2.js","sources":["../../../src/components/auto-progress-bar.vue"],"sourcesContent":["<template>\n  <div v-if=\"isLoading\" class=\"x-progress-bar\" data-test=\"progress-bar\" role=\"progressbar\">\n    <div class=\"x-progress-bar-fill\" :style=\"cssStyles\" data-test=\"progress-bar-line\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { StyleValue } from 'vue'\nimport { computed, defineComponent } from 'vue'\n\n/**\n * The auto progress bar component is useful for displaying a visual indicator of numerical data\n * in a bar shape.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'AutoProgressBar',\n  props: {\n    /**\n     * A boolean flag indicating if the bar is loading.\n     *\n     * @public\n     */\n    isLoading: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * The duration in seconds of the progress bar.\n     *\n     * @public\n     */\n    durationInSeconds: {\n      type: Number,\n      default: 5,\n    },\n  },\n  setup(props) {\n    /**\n     * Computed property to calculate the animation's duration.\n     *\n     * @returns The CSS styles of the animation.\n     *\n     * @internal\n     */\n    const cssStyles = computed<StyleValue>(() => ({\n      animationDuration: `${props.durationInSeconds}s`,\n    }))\n\n    return {\n      cssStyles,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-progress-bar {\n  display: inline-block;\n  overflow: hidden;\n  background-color: #dbe2e5;\n  border-radius: 4px;\n}\n\n.x-progress-bar-fill {\n  height: 4px;\n  background-color: #283034;\n  animation: slide linear;\n  transform-origin: left;\n}\n\n@keyframes slide {\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(0);\n  }\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n  after the user clicks the redirection button.\n- [`UserClickedAbortARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n  after the user clicks the abort redirection button.\n\n## See it in action\n\nHere you have a basic example of how the auto progress bar is rendered.\n\n```vue live\n<template>\n  <AutoProgressBar :isLoading=\"isLoading\" :durationInSeconds=\"durationInSeconds\" />\n</template>\n\n<script>\nimport { AutoProgressBar } from '@empathyco/x-components'\nexport default {\n  name: 'AutoProgressBarDemo',\n  components: {\n    AutoProgressBar,\n  },\n  data() {\n    return {\n      isLoading: true,\n      durationInSeconds: 100,\n    }\n  },\n}\n</script>\n```\n\n### Play with props\n\nIn this example, the auto progress bar has been set to do an animation for 5 seconds. There is a way\nto cancel the animation by sending the isLoading prop to false.\n\n```vue live\n<template>\n  <AutoProgressBar :durationInSeconds=\"5\" :isLoading=\"true\" />\n</template>\n\n<script>\nimport { AutoProgressBar } from '@empathyco/x-components'\nexport default {\n  name: 'AutoProgressBarDemo',\n  components: {\n    AutoProgressBar,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;AAUA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,iBAAiB;AACvB,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,iBAAiB,EAAE;AACjB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAC;AACX,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;;;AAME;AACF,QAAA,MAAM,SAAQ,GAAI,QAAQ,CAAa,OAAO;AAC5C,YAAA,iBAAiB,EAAE,CAAA,EAAG,KAAK,CAAC,iBAAiB,CAAG,CAAA,CAAA;AACjD,SAAA,CAAC,CAAA,CAAA;QAEF,OAAO;YACL,SAAS;SACX,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/components/base-dropdown.vue.js

@@ -1,28 +1,26 @@
 import _sfc_main from './base-dropdown.vue2.js';
-import { openBlock, createElementBlock, withKeys, withModifiers, normalizeClass, createElementVNode, createCommentVNode, renderSlot, createTextVNode, toDisplayString, createBlock, resolveDynamicComponent, withCtx, withDirectives, Fragment, renderList, vShow } from 'vue';
+import { openBlock, createElementBlock, normalizeClass, withKeys, withModifiers, createElementVNode, renderSlot, createTextVNode, toDisplayString, createBlock, resolveDynamicComponent, withCtx, withDirectives, Fragment, renderList, vShow } from 'vue';
 import './base-dropdown.vue3.js';
 import _export_sfc from '../_virtual/_plugin-vue_export-helper.js';
 
 const _hoisted_1 = ["aria-expanded", "aria-controls", "aria-label"];
 const _hoisted_2 = ["id"];
-const _hoisted_3 = ["onClick", "aria-selected"];
+const _hoisted_3 = ["aria-selected", "onClick"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
       ref: "rootRef",
+      class: normalizeClass([_ctx.dropdownCSSClasses, "x-dropdown"]),
       onKeydown: [
         _cache[5] || (_cache[5] = (...args) => _ctx.updateSearchBuffer && _ctx.updateSearchBuffer(...args)),
         _cache[6] || (_cache[6] = withKeys(withModifiers((...args) => _ctx.highlightNextItem && _ctx.highlightNextItem(...args), ["prevent"]), ["down"])),
         _cache[7] || (_cache[7] = withKeys(withModifiers((...args) => _ctx.highlightPreviousItem && _ctx.highlightPreviousItem(...args), ["prevent"]), ["up"]))
-      ],
-      class: normalizeClass([_ctx.dropdownCSSClasses, "x-dropdown"])
+      ]
     },
     [
       createElementVNode("button", {
         ref: "toggleButtonRef",
-        onClick: _cache[0] || (_cache[0] = (...args) => _ctx.toggle && _ctx.toggle(...args)),
-        onKeydown: _cache[1] || (_cache[1] = withKeys(withModifiers((...args) => _ctx.open && _ctx.open(...args), ["prevent", "stop"]), ["up", "down"])),
         class: "x-dropdown__toggle",
         "data-test": "dropdown-toggle",
         role: "combobox",
@@ -30,9 +28,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         "aria-expanded": _ctx.isOpen.toString(),
         "aria-controls": _ctx.listId,
         "aria-label": _ctx.ariaLabel,
-        "aria-autocomplete": "none"
+        "aria-autocomplete": "none",
+        onClick: _cache[0] || (_cache[0] = (...args) => _ctx.toggle && _ctx.toggle(...args)),
+        onKeydown: _cache[1] || (_cache[1] = withKeys(withModifiers((...args) => _ctx.open && _ctx.open(...args), ["prevent", "stop"]), ["up", "down"]))
       }, [
-        createCommentVNode("\n       @slot Used to render the contents of the dropdown toggle button. If not provided, it uses\n       the item slot as fallback.\n       @binding {string|number|Identifiable} item - The item data to render.\n       @binding {boolean} isOpen - True if the dropdown is opened, and false if it is closed.\n     "),
         _ctx.hasToggleSlot ? renderSlot(_ctx.$slots, "toggle", {
           key: 0,
           isOpen: _ctx.isOpen,
@@ -57,16 +56,16 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       (openBlock(), createBlock(resolveDynamicComponent(_ctx.animation), null, {
         default: withCtx(() => [
           withDirectives(createElementVNode("ul", {
-            onKeydown: [
-              _cache[2] || (_cache[2] = withKeys((...args) => _ctx.highlightLastItem && _ctx.highlightLastItem(...args), ["end"])),
-              _cache[3] || (_cache[3] = withKeys((...args) => _ctx.closeAndFocusToggleButton && _ctx.closeAndFocusToggleButton(...args), ["esc"])),
-              _cache[4] || (_cache[4] = withKeys((...args) => _ctx.highlightFirstItem && _ctx.highlightFirstItem(...args), ["home"]))
-            ],
             id: _ctx.listId,
             class: "x-dropdown__items-list",
             "data-test": "dropdown-list",
             role: "listbox",
-            tabindex: "-1"
+            tabindex: "-1",
+            onKeydown: [
+              _cache[2] || (_cache[2] = withKeys((...args) => _ctx.highlightLastItem && _ctx.highlightLastItem(...args), ["end"])),
+              _cache[3] || (_cache[3] = withKeys((...args) => _ctx.closeAndFocusToggleButton && _ctx.closeAndFocusToggleButton(...args), ["esc"])),
+              _cache[4] || (_cache[4] = withKeys((...args) => _ctx.highlightFirstItem && _ctx.highlightFirstItem(...args), ["home"]))
+            ]
           }, [
             (openBlock(true), createElementBlock(
               Fragment,
@@ -79,13 +78,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                   createElementVNode("button", {
                     ref_for: true,
                     ref: (el) => _ctx.itemsButtonRefs[index] = el,
-                    onClick: ($event) => _ctx.emitSelectedItemChanged(item),
                     "aria-selected": (item === _ctx.modelValue).toString(),
                     class: normalizeClass([_ctx.itemsCSSClasses[index], "x-dropdown__item"]),
                     "data-test": "dropdown-item",
-                    role: "option"
+                    role: "option",
+                    onClick: ($event) => _ctx.emitSelectedItemChanged(item)
                   }, [
-                    createCommentVNode("\n               @slot (required) Used to render each one of the items content, and as fallback\n               for the toggle button content slot if it is not provided.\n               @binding {string|number|Identifiable} item - Item to render\n               @binding {boolean} isHighlighted - True when the item has the focus.\n               @binding {boolean} isSelected - True when the item is selected.\n             "),
                     renderSlot(_ctx.$slots, "item", {
                       isHighlighted: index === _ctx.highlightedItemIndex,
                       isSelected: item === _ctx.modelValue,

package/js/components/base-dropdown.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-dropdown.vue.js","sources":["../../../src/components/base-dropdown.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"rootRef\"\n    @keydown=\"updateSearchBuffer\"\n    @keydown.down.prevent=\"highlightNextItem\"\n    @keydown.up.prevent=\"highlightPreviousItem\"\n    :class=\"dropdownCSSClasses\"\n    class=\"x-dropdown\"\n  >\n    <button\n      ref=\"toggleButtonRef\"\n      @click=\"toggle\"\n      @keydown.up.down.prevent.stop=\"open\"\n      class=\"x-dropdown__toggle\"\n      data-test=\"dropdown-toggle\"\n      role=\"combobox\"\n      aria-haspopup=\"listbox\"\n      :aria-expanded=\"isOpen.toString()\"\n      :aria-controls=\"listId\"\n      :aria-label=\"ariaLabel\"\n      aria-autocomplete=\"none\"\n    >\n      <!--\n       @slot Used to render the contents of the dropdown toggle button. If not provided, it uses\n       the item slot as fallback.\n       @binding {string|number|Identifiable} item - The item data to render.\n       @binding {boolean} isOpen - True if the dropdown is opened, and false if it is closed.\n     -->\n      <slot v-if=\"hasToggleSlot\" :isOpen=\"isOpen\" :item=\"modelValue\" name=\"toggle\">\n        {{ modelValue }}\n      </slot>\n      <slot v-else :item=\"modelValue\" name=\"item\">{{ modelValue }}</slot>\n    </button>\n\n    <component :is=\"animation\">\n      <ul\n        v-show=\"isOpen\"\n        @keydown.end=\"highlightLastItem\"\n        @keydown.esc=\"closeAndFocusToggleButton\"\n        @keydown.home=\"highlightFirstItem\"\n        :id=\"listId\"\n        class=\"x-dropdown__items-list\"\n        data-test=\"dropdown-list\"\n        role=\"listbox\"\n        tabindex=\"-1\"\n      >\n        <li v-for=\"(item, index) in items\" :key=\"item.id || item\" class=\"x-dropdown__list-item\">\n          <button\n            :ref=\"el => (itemsButtonRefs[index] = el)\"\n            @click=\"emitSelectedItemChanged(item)\"\n            :aria-selected=\"(item === modelValue).toString()\"\n            :class=\"itemsCSSClasses[index]\"\n            class=\"x-dropdown__item\"\n            data-test=\"dropdown-item\"\n            role=\"option\"\n          >\n            <!--\n               @slot (required) Used to render each one of the items content, and as fallback\n               for the toggle button content slot if it is not provided.\n               @binding {string|number|Identifiable} item - Item to render\n               @binding {boolean} isHighlighted - True when the item has the focus.\n               @binding {boolean} isSelected - True when the item is selected.\n             -->\n            <slot\n              :isHighlighted=\"index === highlightedItemIndex\"\n              :isSelected=\"item === modelValue\"\n              :item=\"item\"\n              name=\"item\"\n            >\n              {{ item }}\n            </slot>\n          </button>\n        </li>\n      </ul>\n    </component>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { Identifiable } from '@empathyco/x-types';\n  import { computed, defineComponent, nextTick, onBeforeUnmount, PropType, ref, watch } from 'vue';\n  import { AnimationProp } from '../types';\n  import { debounceFunction, normalizeString, getTargetElement, isInRange } from '../utils';\n  import { NoAnimation } from './animations';\n\n  type DropdownItem = string | number | Identifiable;\n  let dropdownCount = 0;\n\n  /**\n   * Dropdown component that mimics a Select element behavior, but with the option\n   * to customize the toggle button and each item contents.\n   */\n  export default defineComponent({\n    name: 'BaseDropdown',\n    props: {\n      /** List of items to display.*/\n      items: {\n        type: Array as PropType<DropdownItem[]>,\n        required: true\n      },\n      /** The selected item. */\n      modelValue: {\n        type: null as unknown as PropType<DropdownItem | null>,\n        validator: (v: any) =>\n          typeof v === 'string' || typeof v === 'number' || typeof v === 'object' || v === null,\n        required: true\n      },\n      /** Description of what the dropdown is used for. */\n      ariaLabel: String,\n      /**\n       * Animation component to use for expanding the dropdown. This is a single element animation,\n       * so only `<transition>` components are allowed.\n       */\n      animation: {\n        type: AnimationProp,\n        default: () => NoAnimation\n      },\n      /** Time to wait without receiving any keystroke before resetting the items search query. */\n      searchTimeoutMs: {\n        type: Number,\n        default: 1000\n      }\n    },\n    emits: ['update:modelValue'],\n    setup(props, { emit, slots }) {\n      const rootRef = ref<HTMLElement>();\n      /** The button that opens and closes the list of options. */\n      const toggleButtonRef = ref<HTMLButtonElement>();\n      /** Array containing the dropdown list buttons HTMLElements. */\n      const itemsButtonRefs = ref<HTMLButtonElement[]>([]);\n\n      /** Property to check whether the dropdown is expanded or closed. */\n      const isOpen = ref(false);\n      /** Index of the element that has the focus in the list. -1 means no element has focus. */\n      const highlightedItemIndex = ref(-1);\n      /** String to search for the first element that starts with it. */\n      const searchBuffer = ref('');\n\n      /** Resets the search buffer after a certain time has passed. */\n      let restartResetSearchTimeout: () => void;\n      /* Unique ID to identify the dropdown. */\n      const listId = `x-dropdown-${dropdownCount++}`;\n\n      /**\n       * Dynamic CSS classes to add to the dropdown root element.\n       *\n       * @returns An object containing the CSS classes to add to the dropdown root element.\n       */\n      const dropdownCSSClasses = computed(() => ({ 'x-dropdown--is-open': isOpen }));\n\n      /**\n       * Dynamic CSS classes to add to each one of the items.\n       *\n       * @returns An object containing the CSS classes to add to each item.\n       */\n      const itemsCSSClasses = computed(() =>\n        props.items.map((item, index) => ({\n          'x-dropdown__item--is-selected': props.modelValue === item,\n          'x-dropdown__item--is-highlighted': highlightedItemIndex.value === index\n        }))\n      );\n\n      /* Opens the dropdown. */\n      const open = () => (isOpen.value = true);\n      /* Closes the dropdown. */\n      const close = () => (isOpen.value = false);\n      /* Toggles the dropdown. */\n      const toggle = () => (isOpen.value = !isOpen.value);\n\n      /**\n       * Closes the modal and focuses the toggle button.\n       */\n      function closeAndFocusToggleButton() {\n        close();\n        toggleButtonRef.value?.focus();\n      }\n\n      /**\n       * Emits the event that the selected item has changed.\n       *\n       * @param item - The new selected item.\n       */\n      function emitSelectedItemChanged(item: DropdownItem) {\n        emit('update:modelValue', item);\n        closeAndFocusToggleButton();\n      }\n\n      /**\n       * Highlights the item after the one that is currently highlighted.\n       */\n      function highlightNextItem() {\n        open();\n        highlightedItemIndex.value = (highlightedItemIndex.value + 1) % props.items.length;\n      }\n\n      /**\n       * Highlights the item before the one that is currently highlighted.\n       */\n      function highlightPreviousItem() {\n        const currentIndex = highlightedItemIndex.value;\n        open();\n        highlightedItemIndex.value = currentIndex > 0 ? currentIndex - 1 : props.items.length - 1;\n      }\n\n      /**\n       * Highlights the first of the provided items.\n       */\n      function highlightFirstItem() {\n        highlightedItemIndex.value = 0;\n      }\n\n      /**\n       * Highlights the last of the provided items.\n       */\n      function highlightLastItem() {\n        highlightedItemIndex.value = props.items.length - 1;\n      }\n\n      /**\n       * Updates the variable that is used to search in the filters.\n       *\n       * @param event - The event coming from the user typing.\n       */\n      function updateSearchBuffer(event: KeyboardEvent) {\n        if (/^\\w$/.test(event.key)) {\n          const key = event.key;\n          searchBuffer.value += key;\n          restartResetSearchTimeout();\n        }\n      }\n\n      /**\n       * Resets the search buffer.\n       */\n      function resetSearchBuffer() {\n        searchBuffer.value = '';\n      }\n\n      /**\n       * Closes the dropdown if the passed event has happened on an element out of the dropdown.\n       *\n       * @param event - The event to check if it has happened out of the dropdown component.\n       */\n      function closeIfEventIsOutOfDropdown(event: MouseEvent | TouchEvent | FocusEvent) {\n        if (!rootRef.value?.contains(getTargetElement(event))) {\n          close();\n        }\n      }\n\n      /**\n       * Adds listeners to the document element to detect if the focus has moved out from the\n       * dropdown.\n       */\n      function addDocumentCloseListeners() {\n        document.addEventListener('mousedown', closeIfEventIsOutOfDropdown);\n        document.addEventListener('touchstart', closeIfEventIsOutOfDropdown);\n        document.addEventListener('focusin', closeIfEventIsOutOfDropdown);\n      }\n\n      /**\n       * Removes the listeners of the document element to detect if the focus has moved out from the\n       * dropdown.\n       */\n      function removeDocumentCloseListeners() {\n        document.removeEventListener('mousedown', closeIfEventIsOutOfDropdown);\n        document.removeEventListener('touchstart', closeIfEventIsOutOfDropdown);\n        document.removeEventListener('focusin', closeIfEventIsOutOfDropdown);\n      }\n\n      /**\n       * Highlights the item that matches the search buffer. To do so it checks the list buttons\n       * text content. It highlights items following this priority:\n       * - If an element is already highlighted, it starts searching from that element.\n       * - If no element is found starting from the previously highlighted, it returns the first one.\n       * - If no element is found matching the search query it highlights the first element.\n       *\n       * @param search - The search string to find in the HTML.\n       */\n      watch(searchBuffer, search => {\n        if (search) {\n          const normalizedSearch = normalizeString(search);\n          const matchingIndices = itemsButtonRefs?.value?.reduce<number[]>(\n            (matchingIndices, button, index) => {\n              const safeButtonWordCharacters = button.textContent!.replace(/[^\\w]/g, '');\n              const normalizedButtonText = normalizeString(safeButtonWordCharacters);\n              if (normalizedButtonText.startsWith(normalizedSearch)) {\n                matchingIndices.push(index);\n              }\n              return matchingIndices;\n            },\n            []\n          );\n          highlightedItemIndex.value =\n            // First matching item starting to search from the current highlighted element\n            matchingIndices?.find(index => index >= highlightedItemIndex.value) ??\n            // First matching item\n            matchingIndices?.[0] ??\n            // First item\n            0;\n        }\n      });\n\n      /**\n       * Updates the debounced function to reset the search.\n       *\n       * @param searchTimeoutMs - The new milliseconds that have to pass without typing before\n       * resetting the search.\n       */\n      watch(\n        () => props.searchTimeoutMs,\n        searchTimeoutMs => {\n          restartResetSearchTimeout = debounceFunction(resetSearchBuffer, searchTimeoutMs);\n        },\n        { immediate: true }\n      );\n\n      /**\n       * Focuses the DOM element which matches the `highlightedItemIndex`.\n       *\n       * @param highlightedItemIndex - The index of the HTML element to focus.\n       */\n      watch(\n        highlightedItemIndex,\n        highlightedItemIndex => {\n          nextTick(() => {\n            if (itemsButtonRefs && isInRange(highlightedItemIndex, [0, props.items.length - 1])) {\n              const newItem = itemsButtonRefs?.value?.[highlightedItemIndex];\n              newItem?.focus();\n            }\n          });\n        },\n        { immediate: true }\n      );\n\n      /**\n       * When the dropdown is open it sets the focused element to the one that is selected.\n       *\n       * @param isOpen - True if the dropdown is open, false otherwise.\n       */\n      watch(isOpen, isOpen => {\n        highlightedItemIndex.value = isOpen\n          ? props.modelValue === null\n            ? 0\n            : props.items.indexOf(props.modelValue)\n          : -1;\n      });\n\n      /**\n       * Adds and removes listeners to close the dropdown when it loses the focus.\n       *\n       * @param isOpen - True if the dropdown is open, false otherwise.\n       */\n      watch(isOpen, isOpen => {\n        /*\n         * Because there is an issue with Firefox in macOS and Safari that doesn't focus the target\n         * element of the `mousedown` events, the `focusout` event `relatedTarget` property can't be\n         * used to detect whether the user has blurred the dropdown. The hack here is to use\n         * document listeners that have the side effect of losing the focus.\n         */\n        if (isOpen) {\n          addDocumentCloseListeners();\n        } else {\n          removeDocumentCloseListeners();\n        }\n      });\n\n      /**\n       * If the dropdown is destroyed before removing the document listeners, it ensures that they\n       * are removed too.\n       */\n      onBeforeUnmount(() => {\n        removeDocumentCloseListeners();\n      });\n\n      return {\n        hasToggleSlot: !!slots.toggle,\n        closeAndFocusToggleButton,\n        dropdownCSSClasses,\n        emitSelectedItemChanged,\n        highlightFirstItem,\n        highlightLastItem,\n        highlightNextItem,\n        highlightPreviousItem,\n        highlightedItemIndex,\n        isOpen,\n        itemsButtonRefs,\n        itemsCSSClasses,\n        listId,\n        open,\n        rootRef,\n        toggle,\n        toggleButtonRef,\n        updateSearchBuffer\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-dropdown {\n    position: relative;\n  }\n\n  .x-dropdown__items-list {\n    z-index: 1;\n    list-style: none;\n    position: absolute;\n    padding: 0;\n    margin: 0;\n    top: calc(100% + var(--x-size-gap-dropdown-default, 0));\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Example\n\nThe `Dropdown` component is a simple yet customizable select component. The component needs to work\nthe list of items available to select, which are passed using the `items` prop, and the selected\nitem, which is passed in using the `value` prop.\n\nThe supported items must be an array that can contain unique strings, unique numbers, or objects\nwith a unique `id` property.\n\nThe content of each item can be customized using the `item` slot, which apart from the data of the\nitem, it also receives via prop if the element is selected or highlighted.\n\nThere `toggle` slot can be used to customize the button that opens the dropdown. If this is not\nprovided, the `item` slot will be used for that.\n\n```vue\n<template>\n  <BaseDropdown v-model=\"value\" :items=\"items\">\n    <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}️</template>\n\n    <template #item=\"{ item, isSelected, isHighlighted }\">\n      <span v-if=\"isHighlighted\">🟢</span>\n      <span v-if=\"isSelected\">✅</span>\n      <span>{{ item }}</span>\n    </template>\n  </BaseDropdown>\n</template>\n\n<script>\n  import { BaseDropdown } from '@empathyco/x-components';\n\n  export default {\n    name: 'DropdownTest',\n    components: {\n      BaseDropdown\n    },\n    data() {\n      return {\n        items: ['a', 2, { id: '3' }],\n        value: 'a'\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_withKeys","_withModifiers","dropdownCSSClasses","_normalizeClass","_createElementVNode","listId","ariaLabel","hasToggleSlot","_createCommentVNode","isOpen","_createTextVNode","_toDisplayString","modelValue","_createBlock","_resolveDynamicComponent","_withCtx","_withDirectives","_Fragment","_renderList","itemsButtonRefs","itemsCSSClasses","_renderSlot"],"mappings":";;;;;AAAA,MAAA,UAAA,GAAA,CAAA,eAAA,EAAA,eAAA,EAAA,YAAA,CAAA,CAAA;;;SAEQ,WAAS,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SACZA,SAAO,EAAA,EAAAC,kBAAA;AAAA,IAAA,KAAA;AAAA,IAAA;AAAA,MAAA,GAAA,EAAA,SAAA;;kCAHZ,CAKyB,GAAA,IAAA,KAAA,IAAA,CAAA,kBAAA,IAAA,IAAA,CAAA,kBAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,QAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAC,QAAA,CAAAC,aAAA,CAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,iBAAA,IAAA,IAAA,CAAA,iBAAA,CAAA,GAAA,IAAA,CAAA,EAAA,CAAA,SAAA,CAAA,CAAA,EAAA,CAAA,MAAA,CAAA,CAAA,CAAA;QACpB,MANL,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAMYC,2BACF,CAAY,GAAA,IAAA,KAAA,IAAA,CAAA,qBAAA,IAAA,IAAA,CAAA,qBAAA,CAAA,GAAA,IAAA,CAAA,EAAA,CAAA,SAAA,CAAA,CAAA,EAAA,CAAA,IAAA,CAAA,CAAA,CAAA;AAAA,OAAA;MAElB,KAuBS,EAAAC,cAAA,CAAA,CAAA,IAAA,CAAA,kBAAA,EAAA,YAAA,CAAA,CAAA;AAAA,KAAA;;AArBD,MAAAC,kBAAA,CAAA,QAAA,EAAA;AAAA,QACL,GAAA,EAAA,iBAAA;AAAA,QACD,SAAM,MAAoB,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,MAAA,IAAA,IAAA,CAAA,MAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,QAC1B,SAAA,EAAS,OAAC,CAAiB,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAJ,QAAA,CAAAC,aAAA,CAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,IAAA,IAAA,IAAA,CAAA,IAAA,CAAA,GAAA,IAAA,CAAA,EAAA,CAAA,SAAA,EAAA,MAAA,CAAA,CAAA,EAAA,CAAA,IAAA,EAAA,MAAA,CAAA,CAAA,CAAA;AAAA,QAC3B,KAAK,EAAA,oBAAA;AAAA,QACL,WAAA,EAAA,iBAAA;AAAA,QACC,IAAA,EAAA,UAAA;AAAA,QACA,eAAeI,EAAAA,SAAAA;AAAAA,QACf,iBAAYC,IAAS,CAAA,MAAA,CAAA,QAAA,EAAA;AAAA,QACtB,eAAkB,EAAA,IAAA,CAAA,MAAA;AAAA,QAAA,YAAA,EAAA,IAAA,CAAA,SAAA;AAElB,QAAA,mBAAA,EAAA,MAAA;AAAA,OAMYC,EAAAA;AAAAA,QAELC,kBAAA,CAAA,2TAAA,CAAA;AAAA,QAAA,IAAA,CA9Bb,2BA4B0CC,IAAM,CAAA,MAAA,EAAA,QAAA,EAAA;AAAA,UAAG,GAAI,EAAA,CAAA;AAAA,UAE1C,MAAA,EAAA,IAAA,CAAA,MAAA;AAAA,UA9Bb,IAAA,EAAA,IAAA,CAAA,UAAA;AAAA,SAAA,EAAA,MAAA;AA+BM,UAAAC,eAAA;AAAA,YAAmEC,eAAA,CAAA,IAAA,CAAA,UAAA,CAAA;AAAA,YAAA,CAAA;AAAA;AAAA,WAAA;AAAA,SAAA,EA/BzE,mBA+B0BC,IAAU,CAAA,MAAA,EAAA,MAAA,EAAA;AAAA,UAAqC,GAAA,EAAA,CAAA;AAAA,UA/BzE,IAAA,EAAA,IAAA,CAAA,UAAA;AAAA,SAAA,EAAA,MAAA;;AAAA,YAAAD,eAAA,CAAA,IAAA,CAAA,UAAA,CAAA;AAAA,YAAA,CAAA;AAAA;AAAA,WAAA;AAAA,SAAA,EAAA,IAAA,CAAA;SAAA,EAyEW,EAAA,UAAA,CAAA;AAAA,OAAAb,SAAA,EAAA,EAAAe,WAAA,CAtCLC,uBAsCK,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA,IAAA,EAAA;AAAA,QAAA,OAAA,EApCFC,OAAO,CAAA,MAAA;AAAA,UArChBC,cAAA,CAAAZ,kBAAA,CAAA,IAAA,EAAA;AAAA,YAAA,SAAA,EAAA;AAAA,cAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAJ,QAAA,CAAA,CAAA,GAAA,IAAA,KAuCuB,IAAkB,CAAA,iBAAA,IAAA,IAAA,CAAA,iBAAA,CAAA,GAAA,IAAA,CAAA,EAAA,CAAA,KAAA,CAAA,CAAA,CAAA;AAAA,cAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAA,QAAA,CAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,yBAAA,IAAA,IAAA,CAAA,yBAAA,CAAA,GAAA,IAAA,CAAA,EAAA,CAAA,KAAA,CAAA,CAAA,CAAA;AAC9B,cAAA,MAAA,CAAEK,CAAM,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAL,QAAA,CAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,kBAAA,IAAA,IAAA,CAAA,kBAAA,CAAA,GAAA,IAAA,CAAA,EAAA,CAAA,MAAA,CAAA,CAAA,CAAA;AAAA,aACX;AAAA,YACA,EAAA,EAAA,IAAA,CAAA,MAAA;AAAA,YACA,KAAK,EAAA,wBAAA;AAAA,YACL,WAAS,EAAA,eAAA;AAAA,YAAA,IAAA,EAAA,SAAA;;;uBAEgC,IAAO,CAAA,EAAAD,kBAAA;AAAA,cAAQkB,QAAA;AAAA,cAAA,IAAA;AAAA,cAAAC,UAAA,CAAA,IAAA,CAAA,KAAA,EAAA,CAAA,IAAA,EAAA,KAAA,KAAA;AAAO,gBAAA,OAAApB,SAAA,EAAwB,EAAAC,kBAAA,CAAA,IAAA,EAAA;AAAA,kBAAA,GAAA,EAAA,IAAA,CAAA,EAAA,IAAA,IAAA;AACrF,kBAAA,KAAA,EAAA,uBAAA;AAAA,iBAAA,EAAA;AACeoB,kBAAAA,kBAAAA,CAAAA,QAAAA,EAAAA;AAAAA,oBACZ,OAAK,EAAA,IAAA;AAAA,oBACL,GAAA,EAAA,CAAA,EAAA,KAAA,IAAA,CAAa,gBAAYP,KAAU,CAAA,GAAA,EAAA;AAAA,oBACnC,OAAA,EAnDb,CAmDoBQ,MAAAA,KAAAA,IAAAA,CAAAA,uBAAAA,CAAgB,IAClB,CAAA;AAAA,oBACN,kBAAU,IAAe,KAAA,IAAA,CAAA,UAAA,EAAA,QAAA,EAAA;AAAA,oBACzB,OAAKjB,cAAQ,CAAA,CAAA,IAAA,CAAA,eAAA,CAAA,KAAA,CAAA,EAAA,kBAAA,CAAA,CAAA;AAAA,oBAAA,WAAA,EAAA,eAAA;AAEb,oBAAA,IAAA,EAAA,QAAA;AAAA,mBAOA,EAAA;AAAA,oBAAAK,kBAAA,CACkB,2aAA8B,CAAA;AAAA,oBAAAa,UAAA,CACnC,KAAE,MAAST,EAAAA,MAAAA,EAAAA;AAAAA,sBACrB,aAAU,EAAA,KAAA,KAAA,IAAA,CAAA,oBAAA;AAAA,sBAIN,UAAA,EAAA,IAAA,KAAA,IAAA,CAAA,UAAA;AAAA,sBAtEnB,IAAA;AAAA,qBAAA,EAAA,MAAA;;AAAA,wBAAAD,eAAA,CAAA,IAAA,CAAA;AAAA,wBAAA,CAAA;AAAA;AAAA,uBAAA;AAAA,qBAAA,EAAA,IAAA,CAAA;;;;;;AAoCsB,aAAA;AAAA,WAAA,EAAA,EAAA,EAAA,UAAA,CAAA,EAAA;;AApCtB,WAAA,CAAA;AAAA,SAAA,CAAA;;;;;;;;;;;;;"}
+{"version":3,"file":"base-dropdown.vue.js","sources":["../../../src/components/base-dropdown.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"dropdownCSSClasses\"\n    class=\"x-dropdown\"\n    @keydown=\"updateSearchBuffer\"\n    @keydown.down.prevent=\"highlightNextItem\"\n    @keydown.up.prevent=\"highlightPreviousItem\"\n  >\n    <button\n      ref=\"toggleButtonRef\"\n      class=\"x-dropdown__toggle\"\n      data-test=\"dropdown-toggle\"\n      role=\"combobox\"\n      aria-haspopup=\"listbox\"\n      :aria-expanded=\"isOpen.toString()\"\n      :aria-controls=\"listId\"\n      :aria-label=\"ariaLabel\"\n      aria-autocomplete=\"none\"\n      @click=\"toggle\"\n      @keydown.up.down.prevent.stop=\"open\"\n    >\n      <!--\n       @slot Used to render the contents of the dropdown toggle button. If not provided, it uses\n       the item slot as fallback.\n       @binding {string|number|Identifiable} item - The item data to render.\n       @binding {boolean} isOpen - True if the dropdown is opened, and false if it is closed.\n     -->\n      <slot v-if=\"hasToggleSlot\" :is-open=\"isOpen\" :item=\"modelValue\" name=\"toggle\">\n        {{ modelValue }}\n      </slot>\n      <slot v-else :item=\"modelValue\" name=\"item\">{{ modelValue }}</slot>\n    </button>\n\n    <component :is=\"animation\">\n      <ul\n        v-show=\"isOpen\"\n        :id=\"listId\"\n        class=\"x-dropdown__items-list\"\n        data-test=\"dropdown-list\"\n        role=\"listbox\"\n        tabindex=\"-1\"\n        @keydown.end=\"highlightLastItem\"\n        @keydown.esc=\"closeAndFocusToggleButton\"\n        @keydown.home=\"highlightFirstItem\"\n      >\n        <li v-for=\"(item, index) in items\" :key=\"item.id || item\" class=\"x-dropdown__list-item\">\n          <button\n            :ref=\"el => (itemsButtonRefs[index] = el)\"\n            :aria-selected=\"(item === modelValue).toString()\"\n            :class=\"itemsCSSClasses[index]\"\n            class=\"x-dropdown__item\"\n            data-test=\"dropdown-item\"\n            role=\"option\"\n            @click=\"emitSelectedItemChanged(item)\"\n          >\n            <!--\n               @slot (required) Used to render each one of the items content, and as fallback\n               for the toggle button content slot if it is not provided.\n               @binding {string|number|Identifiable} item - Item to render\n               @binding {boolean} isHighlighted - True when the item has the focus.\n               @binding {boolean} isSelected - True when the item is selected.\n             -->\n            <slot\n              :is-highlighted=\"index === highlightedItemIndex\"\n              :is-selected=\"item === modelValue\"\n              :item=\"item\"\n              name=\"item\"\n            >\n              {{ item }}\n            </slot>\n          </button>\n        </li>\n      </ul>\n    </component>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { Identifiable } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent, nextTick, onBeforeUnmount, ref, watch } from 'vue'\nimport { AnimationProp } from '../types'\nimport { debounceFunction, getTargetElement, normalizeString } from '../utils'\nimport { NoAnimation } from './animations'\n\ntype DropdownItem = string | number | Identifiable\nlet dropdownCount = 0\n\n/**\n * Dropdown component that mimics a Select element behavior, but with the option\n * to customize the toggle button and each item contents.\n */\nexport default defineComponent({\n  name: 'BaseDropdown',\n  props: {\n    /** List of items to display.*/\n    items: {\n      type: Array as PropType<DropdownItem[]>,\n      required: true,\n    },\n    /** The selected item. */\n    modelValue: {\n      type: null as unknown as PropType<DropdownItem | null>,\n      validator: (v: any) =>\n        typeof v === 'string' || typeof v === 'number' || typeof v === 'object' || v === null,\n      required: true,\n    },\n    /** Description of what the dropdown is used for. */\n    ariaLabel: String,\n    /**\n     * Animation component to use for expanding the dropdown. This is a single element animation,\n     * so only `<transition>` components are allowed.\n     */\n    animation: {\n      type: AnimationProp,\n      default: () => NoAnimation,\n    },\n    /** Time to wait without receiving any keystroke before resetting the items search query. */\n    searchTimeoutMs: {\n      type: Number,\n      default: 1000,\n    },\n  },\n  emits: ['update:modelValue'],\n  setup(props, { emit, slots }) {\n    const rootRef = ref<HTMLElement>()\n    /** The button that opens and closes the list of options. */\n    const toggleButtonRef = ref<HTMLButtonElement>()\n    /** Array containing the dropdown list buttons HTMLElements. */\n    const itemsButtonRefs = ref<HTMLButtonElement[]>([])\n\n    /** Property to check whether the dropdown is expanded or closed. */\n    const isOpen = ref(false)\n    /** Index of the element that has the focus in the list. -1 means no element has focus. */\n    const highlightedItemIndex = ref(-1)\n    /** String to search for the first element that starts with it. */\n    const searchBuffer = ref('')\n\n    /** Resets the search buffer after a certain time has passed. */\n    let restartResetSearchTimeout: () => void\n    /* Unique ID to identify the dropdown. */\n    const listId = `x-dropdown-${dropdownCount++}`\n\n    /**\n     * Dynamic CSS classes to add to the dropdown root element.\n     *\n     * @returns An object containing the CSS classes to add to the dropdown root element.\n     */\n    const dropdownCSSClasses = computed(() => ({ 'x-dropdown--is-open': isOpen }))\n\n    /**\n     * Dynamic CSS classes to add to each one of the items.\n     *\n     * @returns An object containing the CSS classes to add to each item.\n     */\n    const itemsCSSClasses = computed(() =>\n      props.items.map((item, index) => ({\n        'x-dropdown__item--is-selected': props.modelValue === item,\n        'x-dropdown__item--is-highlighted': highlightedItemIndex.value === index,\n      })),\n    )\n\n    /* Opens the dropdown. */\n    const open = () => (isOpen.value = true)\n    /* Closes the dropdown. */\n    const close = () => (isOpen.value = false)\n    /* Toggles the dropdown. */\n    const toggle = () => (isOpen.value = !isOpen.value)\n\n    /**\n     * Closes the modal and focuses the toggle button.\n     */\n    function closeAndFocusToggleButton() {\n      close()\n      toggleButtonRef.value?.focus()\n    }\n\n    /**\n     * Emits the event that the selected item has changed.\n     *\n     * @param item - The new selected item.\n     */\n    function emitSelectedItemChanged(item: DropdownItem) {\n      emit('update:modelValue', item)\n      closeAndFocusToggleButton()\n    }\n\n    /**\n     * Highlights the item after the one that is currently highlighted.\n     */\n    function highlightNextItem() {\n      open()\n      highlightedItemIndex.value = (highlightedItemIndex.value + 1) % props.items.length\n    }\n\n    /**\n     * Highlights the item before the one that is currently highlighted.\n     */\n    function highlightPreviousItem() {\n      const currentIndex = highlightedItemIndex.value\n      open()\n      highlightedItemIndex.value = currentIndex > 0 ? currentIndex - 1 : props.items.length - 1\n    }\n\n    /**\n     * Highlights the first of the provided items.\n     */\n    function highlightFirstItem() {\n      highlightedItemIndex.value = 0\n    }\n\n    /**\n     * Highlights the last of the provided items.\n     */\n    function highlightLastItem() {\n      highlightedItemIndex.value = props.items.length - 1\n    }\n\n    /**\n     * Updates the variable that is used to search in the filters.\n     *\n     * @param event - The event coming from the user typing.\n     */\n    function updateSearchBuffer(event: KeyboardEvent) {\n      if (/^\\w$/.test(event.key)) {\n        const key = event.key\n        searchBuffer.value += key\n        restartResetSearchTimeout()\n      }\n    }\n\n    /**\n     * Resets the search buffer.\n     */\n    function resetSearchBuffer() {\n      searchBuffer.value = ''\n    }\n\n    /**\n     * Closes the dropdown if the passed event has happened on an element out of the dropdown.\n     *\n     * @param event - The event to check if it has happened out of the dropdown component.\n     */\n    function closeIfEventIsOutOfDropdown(event: MouseEvent | TouchEvent | FocusEvent) {\n      if (!rootRef.value?.contains(getTargetElement(event))) {\n        close()\n      }\n    }\n\n    /**\n     * Adds listeners to the document element to detect if the focus has moved out from the\n     * dropdown.\n     */\n    function addDocumentCloseListeners() {\n      document.addEventListener('mousedown', closeIfEventIsOutOfDropdown)\n      document.addEventListener('touchstart', closeIfEventIsOutOfDropdown)\n      document.addEventListener('focusin', closeIfEventIsOutOfDropdown)\n    }\n\n    /**\n     * Removes the listeners of the document element to detect if the focus has moved out from the\n     * dropdown.\n     */\n    function removeDocumentCloseListeners() {\n      document.removeEventListener('mousedown', closeIfEventIsOutOfDropdown)\n      document.removeEventListener('touchstart', closeIfEventIsOutOfDropdown)\n      document.removeEventListener('focusin', closeIfEventIsOutOfDropdown)\n    }\n\n    /**\n     * Highlights the item that matches the search buffer. To do so it checks the list buttons\n     * text content. It highlights items following this priority:\n     * - If an element is already highlighted, it starts searching from that element.\n     * - If no element is found starting from the previously highlighted, it returns the first one.\n     * - If no element is found matching the search query it highlights the first element.\n     *\n     * @param search - The search string to find in the HTML.\n     */\n    watch(searchBuffer, search => {\n      if (search) {\n        const normalizedSearch = normalizeString(search)\n        const matchingIndices = itemsButtonRefs?.value?.reduce<number[]>(\n          (matchingIndices, button, index) => {\n            const safeButtonWordCharacters = button.textContent!.replace(/\\W/g, '')\n            const normalizedButtonText = normalizeString(safeButtonWordCharacters)\n            if (normalizedButtonText.startsWith(normalizedSearch)) {\n              matchingIndices.push(index)\n            }\n            return matchingIndices\n          },\n          [],\n        )\n        highlightedItemIndex.value =\n          // First matching item starting to search from the current highlighted element\n          matchingIndices?.find(index => index >= highlightedItemIndex.value) ??\n          // First matching item\n          matchingIndices?.[0] ??\n          // First item\n          0\n      }\n    })\n\n    /**\n     * Updates the debounced function to reset the search.\n     *\n     * @param searchTimeoutMs - The new milliseconds that have to pass without typing before\n     * resetting the search.\n     */\n    watch(\n      () => props.searchTimeoutMs,\n      searchTimeoutMs => {\n        restartResetSearchTimeout = debounceFunction(resetSearchBuffer, searchTimeoutMs)\n      },\n      { immediate: true },\n    )\n\n    /**\n     * Focuses the DOM element which matches the `highlightedItemIndex`.\n     *\n     * @param highlightedItemIndex - The index of the HTML element to focus.\n     */\n    watch(\n      highlightedItemIndex,\n      highlightedItemIndex => {\n        nextTick(() => itemsButtonRefs.value[highlightedItemIndex]?.focus())\n      },\n      { immediate: true },\n    )\n\n    /**\n     * When the dropdown is open it sets the focused element to the one that is selected.\n     *\n     * @param isOpen - True if the dropdown is open, false otherwise.\n     */\n    watch(isOpen, isOpen => {\n      highlightedItemIndex.value = isOpen\n        ? props.modelValue === null\n          ? 0\n          : props.items.indexOf(props.modelValue)\n        : -1\n    })\n\n    /**\n     * Adds and removes listeners to close the dropdown when it loses the focus.\n     *\n     * @param isOpen - True if the dropdown is open, false otherwise.\n     */\n    watch(isOpen, isOpen => {\n      /*\n       * Because there is an issue with Firefox in macOS and Safari that doesn't focus the target\n       * element of the `mousedown` events, the `focusout` event `relatedTarget` property can't be\n       * used to detect whether the user has blurred the dropdown. The hack here is to use\n       * document listeners that have the side effect of losing the focus.\n       */\n      if (isOpen) {\n        addDocumentCloseListeners()\n      } else {\n        removeDocumentCloseListeners()\n      }\n    })\n\n    /**\n     * If the dropdown is destroyed before removing the document listeners, it ensures that they\n     * are removed too.\n     */\n    onBeforeUnmount(() => {\n      removeDocumentCloseListeners()\n    })\n\n    return {\n      hasToggleSlot: !!slots.toggle,\n      closeAndFocusToggleButton,\n      dropdownCSSClasses,\n      emitSelectedItemChanged,\n      highlightFirstItem,\n      highlightLastItem,\n      highlightNextItem,\n      highlightPreviousItem,\n      highlightedItemIndex,\n      isOpen,\n      itemsButtonRefs,\n      itemsCSSClasses,\n      listId,\n      open,\n      rootRef,\n      toggle,\n      toggleButtonRef,\n      updateSearchBuffer,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-dropdown {\n  position: relative;\n}\n\n.x-dropdown__items-list {\n  z-index: 1;\n  list-style: none;\n  position: absolute;\n  padding: 0;\n  margin: 0;\n  top: calc(100% + var(--x-size-gap-dropdown-default, 0));\n}\n</style>\n\n<docs lang=\"mdx\">\n## Example\n\nThe `Dropdown` component is a simple yet customizable select component. The component needs to work\nthe list of items available to select, which are passed using the `items` prop, and the selected\nitem, which is passed in using the `value` prop.\n\nThe supported items must be an array that can contain unique strings, unique numbers, or objects\nwith a unique `id` property.\n\nThe content of each item can be customized using the `item` slot, which apart from the data of the\nitem, it also receives via prop if the element is selected or highlighted.\n\nThere `toggle` slot can be used to customize the button that opens the dropdown. If this is not\nprovided, the `item` slot will be used for that.\n\n```vue\n<template>\n  <BaseDropdown v-model=\"value\" :items=\"items\">\n    <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}️</template>\n\n    <template #item=\"{ item, isSelected, isHighlighted }\">\n      <span v-if=\"isHighlighted\">🟢</span>\n      <span v-if=\"isSelected\">✅</span>\n      <span>{{ item }}</span>\n    </template>\n  </BaseDropdown>\n</template>\n\n<script>\nimport { BaseDropdown } from '@empathyco/x-components'\n\nexport default {\n  name: 'DropdownTest',\n  components: {\n    BaseDropdown,\n  },\n  data() {\n    return {\n      items: ['a', 2, { id: '3' }],\n      value: 'a',\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","dropdownCSSClasses","_normalizeClass","_withKeys","_withModifiers","listId","ariaLabel","hasToggleSlot","_renderSlot","isOpen","_createTextVNode","_toDisplayString","modelValue","_createBlock","_resolveDynamicComponent","_withDirectives","_createElementVNode","_Fragment","_renderList","itemsButtonRefs","itemsCSSClasses"],"mappings":";;;;;AAAA,MAAA,UAAA,GAAA,CAAA,eAAA,EAAA,eAAA,EAAA,YAAA,CAAA,CAAA;;;SAEQ,WAAS,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SACPA,SAHV,EAAA,EAAAC,kBAAA;AAAA,IAGYC,KAAAA;AAAAA,IAAkB;AAAA,MAEzB,GAAA,EAAA,SAAA;AAAA,MAAS,KAAA,EAAAC,cAAA,CAAA,CAAA,IAAA,CAAA,kBAAA,EAAA,YAAA,CAAA,CAAA;AAAA,MAAA,SAAA,EAAA;kCALd,CAOyB,GAAA,IAAA,KAAA,IAAA,CAAA,kBAAA,IAAA,IAAA,CAAA,kBAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,QAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAC,QAAA,CAAAC,aAAA,CAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,iBAAA,IAAA,IAAA,CAAA,iBAAA,CAAA,GAAA,IAAA,CAAA,EAAA,CAAA,SAAA,CAAA,CAAA,EAAA,CAAA,MAAA,CAAA,CAAA,CAAA;;AAErB,OAAA;AAAA,KAAA;;yBAEQ,QAAoB,EAAA;AAAA,QAC1B,GAAA,EAAA,iBAAA;AAAA,QACA,KAAK,EAAA,oBAAA;AAAA,QACL,WAAA,EAAA,iBAAA;AAAA,QACC,IAAA,EAAA,UAAA;AAAA,QACA,eAAeC,EAAAA,SAAAA;AAAAA,QACf,iBAAYC,IAAS,CAAA,MAAA,CAAA,QAAA,EAAA;AAAA,QACtB,eAAkB,EAAA,IAAA,CAAA,MAAA;AAAA,QACjB,YAAK,EAAA,IAAA,CAAA,SAAA;AAAA,QACL,mBAAO,EAAA,MAAA;AAAA,QAAA,OAAA,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,MAAA,IAAA,IAAA,CAAA,MAAA,CAAA,GAAA,IAAA,CAAA,CAAA;mBAQIC,MAAa,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAJ,QAAA,CAAAC,aAAA,CAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,IAAA,IAAA,IAAA,CAAA,IAAA,CAAA,GAAA,IAAA,CAAA,EAAA,CAAA,SAAA,EAAA,MAAA,CAAA,CAAA,EAAA,CAAA,IAAA,EAAA,MAAA,CAAA,CAAA,CAAA;AAAA,OAAA,EAAA;AA5B/B,QAAA,IAAA,CAAA,aAAA,GAAAI,UAAA,CA4B2CC,IAAM,CAAA,MAAA,EAAA,QAAA,EAAA;AAAA,UAAG,GAAI,EAAA,CAAA;AAAA,UAE3C,MAAA,EAAA,IAAA,CAAA,MAAA;AAAA,UA9Bb,IAAA,EAAA,IAAA,CAAA,UAAA;AAAA,SAAA,EAAA,MAAA;AA+BM,UAAAC,eAAA;AAAA,YAAmEC,eAAA,CAAA,IAAA,CAAA,UAAA,CAAA;AAAA,YAAA,CAAA;AAAA;AAAA,WAAA;AAAA,SAAA,EA/BzE,mBA+B0BC,IAAU,CAAA,MAAA,EAAA,MAAA,EAAA;AAAA,UAAqC,GAAA,EAAA,CAAA;AAAA,UA/BzE,IAAA,EAAA,IAAA,CAAA,UAAA;AAAA,SAAA,EAAA,MAAA;;AAAA,YAAAD,eAAA,CAAA,IAAA,CAAA,UAAA,CAAA;AAAA,YAAA,CAAA;AAAA;AAAA,WAAA;AAAA,SAAA,EAAA,IAAA,CAAA;SAAA,EAyEW,EAAA,UAAA,CAAA;AAAA,OAAAZ,SAAA,EAAA,EAAAc,WAAA,CAtCLC,uBAsCK,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA,IAAA,EAAA;AAAA,QAAA,OAAA,EApCET,OAAM,CAAA,MAAA;AAAA,UAAAU,cAAA,CACLC,kBAAwB,CAAA,IAAA,EAAA;AAAA,YAC9B,EAAA,EAAA,IAAA,CAAA,MAAA;AAAA,YACA,KAAK,EAAA,wBAAA;AAAA,YACL,WAAS,EAAA,eAAA;AAAA,YACR,IAAA,EAAA,SAAA;AAAA,YAAA,QAAA,EAAA,IAAA;;AA1CT,cAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAb,QAAA,CAAA,CAAA,GAAA,IAAA,KA4CuB,IAAkB,CAAA,iBAAA,IAAA,IAAA,CAAA,iBAAA,CAAA,GAAA,IAAA,CAAA,EAAA,CAAA,KAAA,CAAA,CAAA,CAAA;AAAA,cAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAA,QAAA,CAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,yBAAA,IAAA,IAAA,CAAA,yBAAA,CAAA,GAAA,IAAA,CAAA,EAAA,CAAA,KAAA,CAAA,CAAA,CAAA;;;;uBAEQ,IAAO,CAAA,EAAAH,kBAAA;AAAA,cAAQiB,QAAA;AAAA,cAAA,IAAA;AAAA,cAAAC,UAAA,CAAA,IAAA,CAAA,KAAA,EAAA,CAAA,IAAA,EAAA,KAAA,KAAA;AAAO,gBAAA,OAAAnB,SAAA,EAAwB,EAAAC,kBAAA,CAAA,IAAA,EAAA;AAAA,kBAAA,GAAA,EAAA,IAAA,CAAA,EAAA,IAAA,IAAA;AACrF,kBAAA,KAAA,EAAA,uBAAA;AAAA,iBAAA,EAAA;AACemB,kBAAAA,kBAAAA,CAAAA,QAAAA,EAAAA;AAAAA,oBACZ,OAAA,EAAA,IAAA;AAAA,oBACA,GAAA,EAAK,QAlDlB,IAkDoBC,CAAAA,eAAAA,CAAAA,KAAAA,CAAAA,GAAAA,EAAAA;AAAAA,oBAER,kBAAU,IAAe,KAAA,IAAA,CAAA,UAAA,EAAA,QAAA,EAAA;AAAA,oBACzB,OAAKlB,cAAQ,CAAA,CAAA,IAAA,CAAA,eAAA,CAAA,KAAA,CAAA,EAAA,kBAAA,CAAA,CAAA;AAAA,oBACZ,WAAK,EAAA,eAAA;AAAA,oBAAA,IAAA,EAAA,QAAA;oBASN,OAOO,EAAA,CAAA,MAAA,KAAA,IAAA,CAAA,uBAAA,CAAA,IAAA,CAAA;AAAA,mBAAA,EAAA;AALO,oBAAAM,UAAA,CAAA,IAAA,CAAE,MAASI,EAAAA,MAAAA,EAAAA;AAAAA,sBACtB,aAAU,EAAA,KAAA,KAAA,IAAA,CAAA,oBAAA;AAAA,sBAIN,UAAA,EAAA,IAAA,KAAA,IAAA,CAAA,UAAA;AAAA,sBAtEnB,IAAA;AAAA,qBAAA,EAAA,MAAA;;AAAA,wBAAAD,eAAA,CAAA,IAAA,CAAA;AAAA,wBAAA,CAAA;AAAA;AAAA,uBAAA;AAAA,qBAAA,EAAA,IAAA,CAAA;;;;;;AAoCsB,aAAA;AAAA,WAAA,EAAA,EAAA,EAAA,UAAA,CAAA,EAAA;;AApCtB,WAAA,CAAA;AAAA,SAAA,CAAA;;;;;;;;;;;;;"}

package/js/components/base-dropdown.vue2.js

@@ -3,8 +3,10 @@ import { AnimationProp } from '../types/animation-prop.js';
 import { debounce } from '../utils/debounce.js';
 import { getTargetElement } from '../utils/html.js';
 import { normalizeString } from '../utils/normalize.js';
-import { isInRange } from '../utils/number.js';
 import '../utils/storage.js';
+import './animations/animate-clip-path/animate-clip-path.style.scss.js';
+import './animations/animate-scale/animate-scale.style.scss.js';
+import './animations/animate-translate/animate-translate.style.scss.js';
 import './animations/animate-width.vue2.js';
 import './animations/animate-width.vue3.js';
 import './animations/collapse-height.vue2.js';
@@ -13,16 +15,13 @@ import './animations/collapse-width.vue2.js';
 import './animations/collapse-width.vue3.js';
 import './animations/cross-fade.vue2.js';
 import './animations/cross-fade.vue3.js';
-import './animations/fade.vue2.js';
-import './animations/fade.vue3.js';
 import './animations/fade-and-slide.vue2.js';
 import './animations/fade-and-slide.vue3.js';
+import './animations/fade.vue2.js';
+import './animations/fade.vue3.js';
 import _sfc_main$1 from './animations/no-animation.vue.js';
 import './animations/staggered-fade-and-slide.vue2.js';
 import './animations/staggered-fade-and-slide.vue3.js';
-import './animations/animate-clip-path/animate-clip-path.style.scss.js';
-import './animations/animate-scale/animate-scale.style.scss.js';
-import './animations/animate-translate/animate-translate.style.scss.js';
 
 let dropdownCount = 0;
 /**
@@ -35,13 +34,13 @@ var _sfc_main = defineComponent({
         /** List of items to display.*/
         items: {
             type: Array,
-            required: true
+            required: true,
         },
         /** The selected item. */
         modelValue: {
             type: null,
             validator: (v) => typeof v === 'string' || typeof v === 'number' || typeof v === 'object' || v === null,
-            required: true
+            required: true,
         },
         /** Description of what the dropdown is used for. */
         ariaLabel: String,
@@ -51,13 +50,13 @@ var _sfc_main = defineComponent({
          */
         animation: {
             type: AnimationProp,
-            default: () => _sfc_main$1
+            default: () => _sfc_main$1,
         },
         /** Time to wait without receiving any keystroke before resetting the items search query. */
         searchTimeoutMs: {
             type: Number,
-            default: 1000
-        }
+            default: 1000,
+        },
     },
     emits: ['update:modelValue'],
     setup(props, { emit, slots }) {
@@ -89,7 +88,7 @@ var _sfc_main = defineComponent({
          */
         const itemsCSSClasses = computed(() => props.items.map((item, index) => ({
             'x-dropdown__item--is-selected': props.modelValue === item,
-            'x-dropdown__item--is-highlighted': highlightedItemIndex.value === index
+            'x-dropdown__item--is-highlighted': highlightedItemIndex.value === index,
         })));
         /* Opens the dropdown. */
         const open = () => (isOpen.value = true);
@@ -199,7 +198,7 @@ var _sfc_main = defineComponent({
             if (search) {
                 const normalizedSearch = normalizeString(search);
                 const matchingIndices = itemsButtonRefs?.value?.reduce((matchingIndices, button, index) => {
-                    const safeButtonWordCharacters = button.textContent.replace(/[^\w]/g, '');
+                    const safeButtonWordCharacters = button.textContent.replace(/\W/g, '');
                     const normalizedButtonText = normalizeString(safeButtonWordCharacters);
                     if (normalizedButtonText.startsWith(normalizedSearch)) {
                         matchingIndices.push(index);
@@ -230,12 +229,7 @@ var _sfc_main = defineComponent({
          * @param highlightedItemIndex - The index of the HTML element to focus.
          */
         watch(highlightedItemIndex, highlightedItemIndex => {
-            nextTick(() => {
-                if (itemsButtonRefs && isInRange(highlightedItemIndex, [0, props.items.length - 1])) {
-                    const newItem = itemsButtonRefs?.value?.[highlightedItemIndex];
-                    newItem?.focus();
-                }
-            });
+            nextTick(() => itemsButtonRefs.value[highlightedItemIndex]?.focus());
         }, { immediate: true });
         /**
          * When the dropdown is open it sets the focused element to the one that is selected.
@@ -293,9 +287,9 @@ var _sfc_main = defineComponent({
             rootRef,
             toggle,
             toggleButtonRef,
-            updateSearchBuffer
+            updateSearchBuffer,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/components/base-dropdown.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-dropdown.vue2.js","sources":["../../../src/components/base-dropdown.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"rootRef\"\n    @keydown=\"updateSearchBuffer\"\n    @keydown.down.prevent=\"highlightNextItem\"\n    @keydown.up.prevent=\"highlightPreviousItem\"\n    :class=\"dropdownCSSClasses\"\n    class=\"x-dropdown\"\n  >\n    <button\n      ref=\"toggleButtonRef\"\n      @click=\"toggle\"\n      @keydown.up.down.prevent.stop=\"open\"\n      class=\"x-dropdown__toggle\"\n      data-test=\"dropdown-toggle\"\n      role=\"combobox\"\n      aria-haspopup=\"listbox\"\n      :aria-expanded=\"isOpen.toString()\"\n      :aria-controls=\"listId\"\n      :aria-label=\"ariaLabel\"\n      aria-autocomplete=\"none\"\n    >\n      <!--\n       @slot Used to render the contents of the dropdown toggle button. If not provided, it uses\n       the item slot as fallback.\n       @binding {string|number|Identifiable} item - The item data to render.\n       @binding {boolean} isOpen - True if the dropdown is opened, and false if it is closed.\n     -->\n      <slot v-if=\"hasToggleSlot\" :isOpen=\"isOpen\" :item=\"modelValue\" name=\"toggle\">\n        {{ modelValue }}\n      </slot>\n      <slot v-else :item=\"modelValue\" name=\"item\">{{ modelValue }}</slot>\n    </button>\n\n    <component :is=\"animation\">\n      <ul\n        v-show=\"isOpen\"\n        @keydown.end=\"highlightLastItem\"\n        @keydown.esc=\"closeAndFocusToggleButton\"\n        @keydown.home=\"highlightFirstItem\"\n        :id=\"listId\"\n        class=\"x-dropdown__items-list\"\n        data-test=\"dropdown-list\"\n        role=\"listbox\"\n        tabindex=\"-1\"\n      >\n        <li v-for=\"(item, index) in items\" :key=\"item.id || item\" class=\"x-dropdown__list-item\">\n          <button\n            :ref=\"el => (itemsButtonRefs[index] = el)\"\n            @click=\"emitSelectedItemChanged(item)\"\n            :aria-selected=\"(item === modelValue).toString()\"\n            :class=\"itemsCSSClasses[index]\"\n            class=\"x-dropdown__item\"\n            data-test=\"dropdown-item\"\n            role=\"option\"\n          >\n            <!--\n               @slot (required) Used to render each one of the items content, and as fallback\n               for the toggle button content slot if it is not provided.\n               @binding {string|number|Identifiable} item - Item to render\n               @binding {boolean} isHighlighted - True when the item has the focus.\n               @binding {boolean} isSelected - True when the item is selected.\n             -->\n            <slot\n              :isHighlighted=\"index === highlightedItemIndex\"\n              :isSelected=\"item === modelValue\"\n              :item=\"item\"\n              name=\"item\"\n            >\n              {{ item }}\n            </slot>\n          </button>\n        </li>\n      </ul>\n    </component>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { Identifiable } from '@empathyco/x-types';\n  import { computed, defineComponent, nextTick, onBeforeUnmount, PropType, ref, watch } from 'vue';\n  import { AnimationProp } from '../types';\n  import { debounceFunction, normalizeString, getTargetElement, isInRange } from '../utils';\n  import { NoAnimation } from './animations';\n\n  type DropdownItem = string | number | Identifiable;\n  let dropdownCount = 0;\n\n  /**\n   * Dropdown component that mimics a Select element behavior, but with the option\n   * to customize the toggle button and each item contents.\n   */\n  export default defineComponent({\n    name: 'BaseDropdown',\n    props: {\n      /** List of items to display.*/\n      items: {\n        type: Array as PropType<DropdownItem[]>,\n        required: true\n      },\n      /** The selected item. */\n      modelValue: {\n        type: null as unknown as PropType<DropdownItem | null>,\n        validator: (v: any) =>\n          typeof v === 'string' || typeof v === 'number' || typeof v === 'object' || v === null,\n        required: true\n      },\n      /** Description of what the dropdown is used for. */\n      ariaLabel: String,\n      /**\n       * Animation component to use for expanding the dropdown. This is a single element animation,\n       * so only `<transition>` components are allowed.\n       */\n      animation: {\n        type: AnimationProp,\n        default: () => NoAnimation\n      },\n      /** Time to wait without receiving any keystroke before resetting the items search query. */\n      searchTimeoutMs: {\n        type: Number,\n        default: 1000\n      }\n    },\n    emits: ['update:modelValue'],\n    setup(props, { emit, slots }) {\n      const rootRef = ref<HTMLElement>();\n      /** The button that opens and closes the list of options. */\n      const toggleButtonRef = ref<HTMLButtonElement>();\n      /** Array containing the dropdown list buttons HTMLElements. */\n      const itemsButtonRefs = ref<HTMLButtonElement[]>([]);\n\n      /** Property to check whether the dropdown is expanded or closed. */\n      const isOpen = ref(false);\n      /** Index of the element that has the focus in the list. -1 means no element has focus. */\n      const highlightedItemIndex = ref(-1);\n      /** String to search for the first element that starts with it. */\n      const searchBuffer = ref('');\n\n      /** Resets the search buffer after a certain time has passed. */\n      let restartResetSearchTimeout: () => void;\n      /* Unique ID to identify the dropdown. */\n      const listId = `x-dropdown-${dropdownCount++}`;\n\n      /**\n       * Dynamic CSS classes to add to the dropdown root element.\n       *\n       * @returns An object containing the CSS classes to add to the dropdown root element.\n       */\n      const dropdownCSSClasses = computed(() => ({ 'x-dropdown--is-open': isOpen }));\n\n      /**\n       * Dynamic CSS classes to add to each one of the items.\n       *\n       * @returns An object containing the CSS classes to add to each item.\n       */\n      const itemsCSSClasses = computed(() =>\n        props.items.map((item, index) => ({\n          'x-dropdown__item--is-selected': props.modelValue === item,\n          'x-dropdown__item--is-highlighted': highlightedItemIndex.value === index\n        }))\n      );\n\n      /* Opens the dropdown. */\n      const open = () => (isOpen.value = true);\n      /* Closes the dropdown. */\n      const close = () => (isOpen.value = false);\n      /* Toggles the dropdown. */\n      const toggle = () => (isOpen.value = !isOpen.value);\n\n      /**\n       * Closes the modal and focuses the toggle button.\n       */\n      function closeAndFocusToggleButton() {\n        close();\n        toggleButtonRef.value?.focus();\n      }\n\n      /**\n       * Emits the event that the selected item has changed.\n       *\n       * @param item - The new selected item.\n       */\n      function emitSelectedItemChanged(item: DropdownItem) {\n        emit('update:modelValue', item);\n        closeAndFocusToggleButton();\n      }\n\n      /**\n       * Highlights the item after the one that is currently highlighted.\n       */\n      function highlightNextItem() {\n        open();\n        highlightedItemIndex.value = (highlightedItemIndex.value + 1) % props.items.length;\n      }\n\n      /**\n       * Highlights the item before the one that is currently highlighted.\n       */\n      function highlightPreviousItem() {\n        const currentIndex = highlightedItemIndex.value;\n        open();\n        highlightedItemIndex.value = currentIndex > 0 ? currentIndex - 1 : props.items.length - 1;\n      }\n\n      /**\n       * Highlights the first of the provided items.\n       */\n      function highlightFirstItem() {\n        highlightedItemIndex.value = 0;\n      }\n\n      /**\n       * Highlights the last of the provided items.\n       */\n      function highlightLastItem() {\n        highlightedItemIndex.value = props.items.length - 1;\n      }\n\n      /**\n       * Updates the variable that is used to search in the filters.\n       *\n       * @param event - The event coming from the user typing.\n       */\n      function updateSearchBuffer(event: KeyboardEvent) {\n        if (/^\\w$/.test(event.key)) {\n          const key = event.key;\n          searchBuffer.value += key;\n          restartResetSearchTimeout();\n        }\n      }\n\n      /**\n       * Resets the search buffer.\n       */\n      function resetSearchBuffer() {\n        searchBuffer.value = '';\n      }\n\n      /**\n       * Closes the dropdown if the passed event has happened on an element out of the dropdown.\n       *\n       * @param event - The event to check if it has happened out of the dropdown component.\n       */\n      function closeIfEventIsOutOfDropdown(event: MouseEvent | TouchEvent | FocusEvent) {\n        if (!rootRef.value?.contains(getTargetElement(event))) {\n          close();\n        }\n      }\n\n      /**\n       * Adds listeners to the document element to detect if the focus has moved out from the\n       * dropdown.\n       */\n      function addDocumentCloseListeners() {\n        document.addEventListener('mousedown', closeIfEventIsOutOfDropdown);\n        document.addEventListener('touchstart', closeIfEventIsOutOfDropdown);\n        document.addEventListener('focusin', closeIfEventIsOutOfDropdown);\n      }\n\n      /**\n       * Removes the listeners of the document element to detect if the focus has moved out from the\n       * dropdown.\n       */\n      function removeDocumentCloseListeners() {\n        document.removeEventListener('mousedown', closeIfEventIsOutOfDropdown);\n        document.removeEventListener('touchstart', closeIfEventIsOutOfDropdown);\n        document.removeEventListener('focusin', closeIfEventIsOutOfDropdown);\n      }\n\n      /**\n       * Highlights the item that matches the search buffer. To do so it checks the list buttons\n       * text content. It highlights items following this priority:\n       * - If an element is already highlighted, it starts searching from that element.\n       * - If no element is found starting from the previously highlighted, it returns the first one.\n       * - If no element is found matching the search query it highlights the first element.\n       *\n       * @param search - The search string to find in the HTML.\n       */\n      watch(searchBuffer, search => {\n        if (search) {\n          const normalizedSearch = normalizeString(search);\n          const matchingIndices = itemsButtonRefs?.value?.reduce<number[]>(\n            (matchingIndices, button, index) => {\n              const safeButtonWordCharacters = button.textContent!.replace(/[^\\w]/g, '');\n              const normalizedButtonText = normalizeString(safeButtonWordCharacters);\n              if (normalizedButtonText.startsWith(normalizedSearch)) {\n                matchingIndices.push(index);\n              }\n              return matchingIndices;\n            },\n            []\n          );\n          highlightedItemIndex.value =\n            // First matching item starting to search from the current highlighted element\n            matchingIndices?.find(index => index >= highlightedItemIndex.value) ??\n            // First matching item\n            matchingIndices?.[0] ??\n            // First item\n            0;\n        }\n      });\n\n      /**\n       * Updates the debounced function to reset the search.\n       *\n       * @param searchTimeoutMs - The new milliseconds that have to pass without typing before\n       * resetting the search.\n       */\n      watch(\n        () => props.searchTimeoutMs,\n        searchTimeoutMs => {\n          restartResetSearchTimeout = debounceFunction(resetSearchBuffer, searchTimeoutMs);\n        },\n        { immediate: true }\n      );\n\n      /**\n       * Focuses the DOM element which matches the `highlightedItemIndex`.\n       *\n       * @param highlightedItemIndex - The index of the HTML element to focus.\n       */\n      watch(\n        highlightedItemIndex,\n        highlightedItemIndex => {\n          nextTick(() => {\n            if (itemsButtonRefs && isInRange(highlightedItemIndex, [0, props.items.length - 1])) {\n              const newItem = itemsButtonRefs?.value?.[highlightedItemIndex];\n              newItem?.focus();\n            }\n          });\n        },\n        { immediate: true }\n      );\n\n      /**\n       * When the dropdown is open it sets the focused element to the one that is selected.\n       *\n       * @param isOpen - True if the dropdown is open, false otherwise.\n       */\n      watch(isOpen, isOpen => {\n        highlightedItemIndex.value = isOpen\n          ? props.modelValue === null\n            ? 0\n            : props.items.indexOf(props.modelValue)\n          : -1;\n      });\n\n      /**\n       * Adds and removes listeners to close the dropdown when it loses the focus.\n       *\n       * @param isOpen - True if the dropdown is open, false otherwise.\n       */\n      watch(isOpen, isOpen => {\n        /*\n         * Because there is an issue with Firefox in macOS and Safari that doesn't focus the target\n         * element of the `mousedown` events, the `focusout` event `relatedTarget` property can't be\n         * used to detect whether the user has blurred the dropdown. The hack here is to use\n         * document listeners that have the side effect of losing the focus.\n         */\n        if (isOpen) {\n          addDocumentCloseListeners();\n        } else {\n          removeDocumentCloseListeners();\n        }\n      });\n\n      /**\n       * If the dropdown is destroyed before removing the document listeners, it ensures that they\n       * are removed too.\n       */\n      onBeforeUnmount(() => {\n        removeDocumentCloseListeners();\n      });\n\n      return {\n        hasToggleSlot: !!slots.toggle,\n        closeAndFocusToggleButton,\n        dropdownCSSClasses,\n        emitSelectedItemChanged,\n        highlightFirstItem,\n        highlightLastItem,\n        highlightNextItem,\n        highlightPreviousItem,\n        highlightedItemIndex,\n        isOpen,\n        itemsButtonRefs,\n        itemsCSSClasses,\n        listId,\n        open,\n        rootRef,\n        toggle,\n        toggleButtonRef,\n        updateSearchBuffer\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-dropdown {\n    position: relative;\n  }\n\n  .x-dropdown__items-list {\n    z-index: 1;\n    list-style: none;\n    position: absolute;\n    padding: 0;\n    margin: 0;\n    top: calc(100% + var(--x-size-gap-dropdown-default, 0));\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Example\n\nThe `Dropdown` component is a simple yet customizable select component. The component needs to work\nthe list of items available to select, which are passed using the `items` prop, and the selected\nitem, which is passed in using the `value` prop.\n\nThe supported items must be an array that can contain unique strings, unique numbers, or objects\nwith a unique `id` property.\n\nThe content of each item can be customized using the `item` slot, which apart from the data of the\nitem, it also receives via prop if the element is selected or highlighted.\n\nThere `toggle` slot can be used to customize the button that opens the dropdown. If this is not\nprovided, the `item` slot will be used for that.\n\n```vue\n<template>\n  <BaseDropdown v-model=\"value\" :items=\"items\">\n    <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}️</template>\n\n    <template #item=\"{ item, isSelected, isHighlighted }\">\n      <span v-if=\"isHighlighted\">🟢</span>\n      <span v-if=\"isSelected\">✅</span>\n      <span>{{ item }}</span>\n    </template>\n  </BaseDropdown>\n</template>\n\n<script>\n  import { BaseDropdown } from '@empathyco/x-components';\n\n  export default {\n    name: 'DropdownTest',\n    components: {\n      BaseDropdown\n    },\n    data() {\n      return {\n        items: ['a', 2, { id: '3' }],\n        value: 'a'\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["NoAnimation","debounceFunction"],"mappings":"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"}
+{"version":3,"file":"base-dropdown.vue2.js","sources":["../../../src/components/base-dropdown.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"dropdownCSSClasses\"\n    class=\"x-dropdown\"\n    @keydown=\"updateSearchBuffer\"\n    @keydown.down.prevent=\"highlightNextItem\"\n    @keydown.up.prevent=\"highlightPreviousItem\"\n  >\n    <button\n      ref=\"toggleButtonRef\"\n      class=\"x-dropdown__toggle\"\n      data-test=\"dropdown-toggle\"\n      role=\"combobox\"\n      aria-haspopup=\"listbox\"\n      :aria-expanded=\"isOpen.toString()\"\n      :aria-controls=\"listId\"\n      :aria-label=\"ariaLabel\"\n      aria-autocomplete=\"none\"\n      @click=\"toggle\"\n      @keydown.up.down.prevent.stop=\"open\"\n    >\n      <!--\n       @slot Used to render the contents of the dropdown toggle button. If not provided, it uses\n       the item slot as fallback.\n       @binding {string|number|Identifiable} item - The item data to render.\n       @binding {boolean} isOpen - True if the dropdown is opened, and false if it is closed.\n     -->\n      <slot v-if=\"hasToggleSlot\" :is-open=\"isOpen\" :item=\"modelValue\" name=\"toggle\">\n        {{ modelValue }}\n      </slot>\n      <slot v-else :item=\"modelValue\" name=\"item\">{{ modelValue }}</slot>\n    </button>\n\n    <component :is=\"animation\">\n      <ul\n        v-show=\"isOpen\"\n        :id=\"listId\"\n        class=\"x-dropdown__items-list\"\n        data-test=\"dropdown-list\"\n        role=\"listbox\"\n        tabindex=\"-1\"\n        @keydown.end=\"highlightLastItem\"\n        @keydown.esc=\"closeAndFocusToggleButton\"\n        @keydown.home=\"highlightFirstItem\"\n      >\n        <li v-for=\"(item, index) in items\" :key=\"item.id || item\" class=\"x-dropdown__list-item\">\n          <button\n            :ref=\"el => (itemsButtonRefs[index] = el)\"\n            :aria-selected=\"(item === modelValue).toString()\"\n            :class=\"itemsCSSClasses[index]\"\n            class=\"x-dropdown__item\"\n            data-test=\"dropdown-item\"\n            role=\"option\"\n            @click=\"emitSelectedItemChanged(item)\"\n          >\n            <!--\n               @slot (required) Used to render each one of the items content, and as fallback\n               for the toggle button content slot if it is not provided.\n               @binding {string|number|Identifiable} item - Item to render\n               @binding {boolean} isHighlighted - True when the item has the focus.\n               @binding {boolean} isSelected - True when the item is selected.\n             -->\n            <slot\n              :is-highlighted=\"index === highlightedItemIndex\"\n              :is-selected=\"item === modelValue\"\n              :item=\"item\"\n              name=\"item\"\n            >\n              {{ item }}\n            </slot>\n          </button>\n        </li>\n      </ul>\n    </component>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { Identifiable } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent, nextTick, onBeforeUnmount, ref, watch } from 'vue'\nimport { AnimationProp } from '../types'\nimport { debounceFunction, getTargetElement, normalizeString } from '../utils'\nimport { NoAnimation } from './animations'\n\ntype DropdownItem = string | number | Identifiable\nlet dropdownCount = 0\n\n/**\n * Dropdown component that mimics a Select element behavior, but with the option\n * to customize the toggle button and each item contents.\n */\nexport default defineComponent({\n  name: 'BaseDropdown',\n  props: {\n    /** List of items to display.*/\n    items: {\n      type: Array as PropType<DropdownItem[]>,\n      required: true,\n    },\n    /** The selected item. */\n    modelValue: {\n      type: null as unknown as PropType<DropdownItem | null>,\n      validator: (v: any) =>\n        typeof v === 'string' || typeof v === 'number' || typeof v === 'object' || v === null,\n      required: true,\n    },\n    /** Description of what the dropdown is used for. */\n    ariaLabel: String,\n    /**\n     * Animation component to use for expanding the dropdown. This is a single element animation,\n     * so only `<transition>` components are allowed.\n     */\n    animation: {\n      type: AnimationProp,\n      default: () => NoAnimation,\n    },\n    /** Time to wait without receiving any keystroke before resetting the items search query. */\n    searchTimeoutMs: {\n      type: Number,\n      default: 1000,\n    },\n  },\n  emits: ['update:modelValue'],\n  setup(props, { emit, slots }) {\n    const rootRef = ref<HTMLElement>()\n    /** The button that opens and closes the list of options. */\n    const toggleButtonRef = ref<HTMLButtonElement>()\n    /** Array containing the dropdown list buttons HTMLElements. */\n    const itemsButtonRefs = ref<HTMLButtonElement[]>([])\n\n    /** Property to check whether the dropdown is expanded or closed. */\n    const isOpen = ref(false)\n    /** Index of the element that has the focus in the list. -1 means no element has focus. */\n    const highlightedItemIndex = ref(-1)\n    /** String to search for the first element that starts with it. */\n    const searchBuffer = ref('')\n\n    /** Resets the search buffer after a certain time has passed. */\n    let restartResetSearchTimeout: () => void\n    /* Unique ID to identify the dropdown. */\n    const listId = `x-dropdown-${dropdownCount++}`\n\n    /**\n     * Dynamic CSS classes to add to the dropdown root element.\n     *\n     * @returns An object containing the CSS classes to add to the dropdown root element.\n     */\n    const dropdownCSSClasses = computed(() => ({ 'x-dropdown--is-open': isOpen }))\n\n    /**\n     * Dynamic CSS classes to add to each one of the items.\n     *\n     * @returns An object containing the CSS classes to add to each item.\n     */\n    const itemsCSSClasses = computed(() =>\n      props.items.map((item, index) => ({\n        'x-dropdown__item--is-selected': props.modelValue === item,\n        'x-dropdown__item--is-highlighted': highlightedItemIndex.value === index,\n      })),\n    )\n\n    /* Opens the dropdown. */\n    const open = () => (isOpen.value = true)\n    /* Closes the dropdown. */\n    const close = () => (isOpen.value = false)\n    /* Toggles the dropdown. */\n    const toggle = () => (isOpen.value = !isOpen.value)\n\n    /**\n     * Closes the modal and focuses the toggle button.\n     */\n    function closeAndFocusToggleButton() {\n      close()\n      toggleButtonRef.value?.focus()\n    }\n\n    /**\n     * Emits the event that the selected item has changed.\n     *\n     * @param item - The new selected item.\n     */\n    function emitSelectedItemChanged(item: DropdownItem) {\n      emit('update:modelValue', item)\n      closeAndFocusToggleButton()\n    }\n\n    /**\n     * Highlights the item after the one that is currently highlighted.\n     */\n    function highlightNextItem() {\n      open()\n      highlightedItemIndex.value = (highlightedItemIndex.value + 1) % props.items.length\n    }\n\n    /**\n     * Highlights the item before the one that is currently highlighted.\n     */\n    function highlightPreviousItem() {\n      const currentIndex = highlightedItemIndex.value\n      open()\n      highlightedItemIndex.value = currentIndex > 0 ? currentIndex - 1 : props.items.length - 1\n    }\n\n    /**\n     * Highlights the first of the provided items.\n     */\n    function highlightFirstItem() {\n      highlightedItemIndex.value = 0\n    }\n\n    /**\n     * Highlights the last of the provided items.\n     */\n    function highlightLastItem() {\n      highlightedItemIndex.value = props.items.length - 1\n    }\n\n    /**\n     * Updates the variable that is used to search in the filters.\n     *\n     * @param event - The event coming from the user typing.\n     */\n    function updateSearchBuffer(event: KeyboardEvent) {\n      if (/^\\w$/.test(event.key)) {\n        const key = event.key\n        searchBuffer.value += key\n        restartResetSearchTimeout()\n      }\n    }\n\n    /**\n     * Resets the search buffer.\n     */\n    function resetSearchBuffer() {\n      searchBuffer.value = ''\n    }\n\n    /**\n     * Closes the dropdown if the passed event has happened on an element out of the dropdown.\n     *\n     * @param event - The event to check if it has happened out of the dropdown component.\n     */\n    function closeIfEventIsOutOfDropdown(event: MouseEvent | TouchEvent | FocusEvent) {\n      if (!rootRef.value?.contains(getTargetElement(event))) {\n        close()\n      }\n    }\n\n    /**\n     * Adds listeners to the document element to detect if the focus has moved out from the\n     * dropdown.\n     */\n    function addDocumentCloseListeners() {\n      document.addEventListener('mousedown', closeIfEventIsOutOfDropdown)\n      document.addEventListener('touchstart', closeIfEventIsOutOfDropdown)\n      document.addEventListener('focusin', closeIfEventIsOutOfDropdown)\n    }\n\n    /**\n     * Removes the listeners of the document element to detect if the focus has moved out from the\n     * dropdown.\n     */\n    function removeDocumentCloseListeners() {\n      document.removeEventListener('mousedown', closeIfEventIsOutOfDropdown)\n      document.removeEventListener('touchstart', closeIfEventIsOutOfDropdown)\n      document.removeEventListener('focusin', closeIfEventIsOutOfDropdown)\n    }\n\n    /**\n     * Highlights the item that matches the search buffer. To do so it checks the list buttons\n     * text content. It highlights items following this priority:\n     * - If an element is already highlighted, it starts searching from that element.\n     * - If no element is found starting from the previously highlighted, it returns the first one.\n     * - If no element is found matching the search query it highlights the first element.\n     *\n     * @param search - The search string to find in the HTML.\n     */\n    watch(searchBuffer, search => {\n      if (search) {\n        const normalizedSearch = normalizeString(search)\n        const matchingIndices = itemsButtonRefs?.value?.reduce<number[]>(\n          (matchingIndices, button, index) => {\n            const safeButtonWordCharacters = button.textContent!.replace(/\\W/g, '')\n            const normalizedButtonText = normalizeString(safeButtonWordCharacters)\n            if (normalizedButtonText.startsWith(normalizedSearch)) {\n              matchingIndices.push(index)\n            }\n            return matchingIndices\n          },\n          [],\n        )\n        highlightedItemIndex.value =\n          // First matching item starting to search from the current highlighted element\n          matchingIndices?.find(index => index >= highlightedItemIndex.value) ??\n          // First matching item\n          matchingIndices?.[0] ??\n          // First item\n          0\n      }\n    })\n\n    /**\n     * Updates the debounced function to reset the search.\n     *\n     * @param searchTimeoutMs - The new milliseconds that have to pass without typing before\n     * resetting the search.\n     */\n    watch(\n      () => props.searchTimeoutMs,\n      searchTimeoutMs => {\n        restartResetSearchTimeout = debounceFunction(resetSearchBuffer, searchTimeoutMs)\n      },\n      { immediate: true },\n    )\n\n    /**\n     * Focuses the DOM element which matches the `highlightedItemIndex`.\n     *\n     * @param highlightedItemIndex - The index of the HTML element to focus.\n     */\n    watch(\n      highlightedItemIndex,\n      highlightedItemIndex => {\n        nextTick(() => itemsButtonRefs.value[highlightedItemIndex]?.focus())\n      },\n      { immediate: true },\n    )\n\n    /**\n     * When the dropdown is open it sets the focused element to the one that is selected.\n     *\n     * @param isOpen - True if the dropdown is open, false otherwise.\n     */\n    watch(isOpen, isOpen => {\n      highlightedItemIndex.value = isOpen\n        ? props.modelValue === null\n          ? 0\n          : props.items.indexOf(props.modelValue)\n        : -1\n    })\n\n    /**\n     * Adds and removes listeners to close the dropdown when it loses the focus.\n     *\n     * @param isOpen - True if the dropdown is open, false otherwise.\n     */\n    watch(isOpen, isOpen => {\n      /*\n       * Because there is an issue with Firefox in macOS and Safari that doesn't focus the target\n       * element of the `mousedown` events, the `focusout` event `relatedTarget` property can't be\n       * used to detect whether the user has blurred the dropdown. The hack here is to use\n       * document listeners that have the side effect of losing the focus.\n       */\n      if (isOpen) {\n        addDocumentCloseListeners()\n      } else {\n        removeDocumentCloseListeners()\n      }\n    })\n\n    /**\n     * If the dropdown is destroyed before removing the document listeners, it ensures that they\n     * are removed too.\n     */\n    onBeforeUnmount(() => {\n      removeDocumentCloseListeners()\n    })\n\n    return {\n      hasToggleSlot: !!slots.toggle,\n      closeAndFocusToggleButton,\n      dropdownCSSClasses,\n      emitSelectedItemChanged,\n      highlightFirstItem,\n      highlightLastItem,\n      highlightNextItem,\n      highlightPreviousItem,\n      highlightedItemIndex,\n      isOpen,\n      itemsButtonRefs,\n      itemsCSSClasses,\n      listId,\n      open,\n      rootRef,\n      toggle,\n      toggleButtonRef,\n      updateSearchBuffer,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-dropdown {\n  position: relative;\n}\n\n.x-dropdown__items-list {\n  z-index: 1;\n  list-style: none;\n  position: absolute;\n  padding: 0;\n  margin: 0;\n  top: calc(100% + var(--x-size-gap-dropdown-default, 0));\n}\n</style>\n\n<docs lang=\"mdx\">\n## Example\n\nThe `Dropdown` component is a simple yet customizable select component. The component needs to work\nthe list of items available to select, which are passed using the `items` prop, and the selected\nitem, which is passed in using the `value` prop.\n\nThe supported items must be an array that can contain unique strings, unique numbers, or objects\nwith a unique `id` property.\n\nThe content of each item can be customized using the `item` slot, which apart from the data of the\nitem, it also receives via prop if the element is selected or highlighted.\n\nThere `toggle` slot can be used to customize the button that opens the dropdown. If this is not\nprovided, the `item` slot will be used for that.\n\n```vue\n<template>\n  <BaseDropdown v-model=\"value\" :items=\"items\">\n    <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}️</template>\n\n    <template #item=\"{ item, isSelected, isHighlighted }\">\n      <span v-if=\"isHighlighted\">🟢</span>\n      <span v-if=\"isSelected\">✅</span>\n      <span>{{ item }}</span>\n    </template>\n  </BaseDropdown>\n</template>\n\n<script>\nimport { BaseDropdown } from '@empathyco/x-components'\n\nexport default {\n  name: 'DropdownTest',\n  components: {\n    BaseDropdown,\n  },\n  data() {\n    return {\n      items: ['a', 2, { id: '3' }],\n      value: 'a',\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["NoAnimation","debounceFunction"],"mappings":"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"}

package/js/components/base-event-button.vue.js

@@ -1,5 +1,5 @@
 import _sfc_main from './base-event-button.vue2.js';
-import { openBlock, createElementBlock, createCommentVNode, renderSlot } from 'vue';
+import { openBlock, createElementBlock, renderSlot } from 'vue';
 import _export_sfc from '../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -7,11 +7,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     "button",
     {
       ref: "rootRef",
-      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.emitEvents && _ctx.emitEvents(...args)),
-      "data-test": "event-button"
+      "data-test": "event-button",
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.emitEvents && _ctx.emitEvents(...args))
     },
     [
-      createCommentVNode(" @slot (Required) Button content with a text, an icon or both "),
       renderSlot(_ctx.$slots, "default")
     ],
     512

package/js/components/base-event-button.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-event-button.vue.js","sources":["../../../src/components/base-event-button.vue"],"sourcesContent":["<template>\n  <button ref=\"rootRef\" @click=\"emitEvents\" data-test=\"event-button\">\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, PropType, ref } from 'vue';\n  import { use$x } from '../composables/use-$x';\n  import { XEvent, XEventsTypes } from '../wiring/events.types';\n  import { WireMetadata } from '../wiring/index';\n\n  /**\n   * Component to be reused that renders a `<button>` with the logic of emitting events to the bus\n   * on click. The events are passed as an object to prop {@link XEvent}.\n   * The keys are the event name and the values are the payload of each event. All events are\n   * emitted with its respective payload. If any event doesn't need payload a `undefined` must be\n   * passed as value.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'BaseEventButton',\n    props: {\n      /** An object where the keys are the {@link XEvent} and the values are the payload. */\n      events: {\n        type: Object as PropType<Partial<XEventsTypes>>,\n        required: true\n      },\n      /**\n       * The metadata property for the request on each query preview.\n       *\n       * @public\n       */\n      metadata: {\n        type: Object as PropType<Omit<WireMetadata, 'moduleName'>>\n      }\n    },\n    setup(props) {\n      const $x = use$x();\n\n      const rootRef = ref<HTMLButtonElement>();\n\n      /**\n       * Emits `events` prop to the X bus with the payload given by it.\n       */\n      function emitEvents() {\n        Object.entries(props.events).forEach(([event, payload]) =>\n          $x.emit(event as XEvent, payload, { target: rootRef.value, ...props.metadata })\n        );\n      }\n\n      return {\n        emitEvents,\n        rootRef\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThe event prop is required. It will render a <button></button> that emits the event passed as prop\nwith the value as payload on click:\n\n```vue\n<BaseEventButton :events=\"{ myEvent: payload }\" />\n```\n\nIf the event doesn't need payload then `undefined` must be passed:\n\n```vue\n<BaseEventButton :events=\"{ myEvent: undefined }\" />\n```\n\nIt can emit multiple events at the same time:\n\n```vue\n<BaseEventButton :events=\"{ myFirstEvent: payload1, mySecondEvent: payload2 }\" />\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_createCommentVNode"],"mappings":";;;;SACc,WAAS,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SAAEA,SAAK,EAAA,EAAAC,kBAAA;AAAA,IAAA,QAAA;AAAA,IAAE;AAAA,MAAY,GAAA,EAAA,SAAA;AAAA,MAAA,OAAA,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,UAAA,IAAA,IAAA,CAAA,UAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AACxC,MAAA,WAAA,EAAA,cAAA;AAAA,KAAA;AACA,IAAA;AAAA,MAAAC,kBAAA,CAAA,gEAAA,CAAA;;;;;;;;;;;"}
+{"version":3,"file":"base-event-button.vue.js","sources":["../../../src/components/base-event-button.vue"],"sourcesContent":["<template>\n  <button ref=\"rootRef\" data-test=\"event-button\" @click=\"emitEvents\">\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { XEvent, XEventsTypes } from '../wiring/events.types'\nimport type { WireMetadata } from '../wiring/index'\nimport { defineComponent, ref } from 'vue'\nimport { use$x } from '../composables/use-$x'\n\n/**\n * Component to be reused that renders a `<button>` with the logic of emitting events to the bus\n * on click. The events are passed as an object to prop {@link XEvent}.\n * The keys are the event name and the values are the payload of each event. All events are\n * emitted with its respective payload. If any event doesn't need payload a `undefined` must be\n * passed as value.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseEventButton',\n  props: {\n    /** An object where the keys are the {@link XEvent} and the values are the payload. */\n    events: {\n      type: Object as PropType<Partial<XEventsTypes>>,\n      required: true,\n    },\n    /**\n     * The metadata property for the request on each query preview.\n     *\n     * @public\n     */\n    metadata: {\n      type: Object as PropType<Omit<WireMetadata, 'moduleName'>>,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    const rootRef = ref<HTMLButtonElement>()\n\n    /**\n     * Emits `events` prop to the X bus with the payload given by it.\n     */\n    function emitEvents() {\n      Object.entries(props.events).forEach(([event, payload]) =>\n        $x.emit(event as XEvent, payload, { target: rootRef.value, ...props.metadata }),\n      )\n    }\n\n    return {\n      emitEvents,\n      rootRef,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThe event prop is required. It will render a <button></button> that emits the event passed as prop\nwith the value as payload on click:\n\n```vue\n<BaseEventButton :events=\"{ myEvent: payload }\" />\n```\n\nIf the event doesn't need payload then `undefined` must be passed:\n\n```vue\n<BaseEventButton :events=\"{ myEvent: undefined }\" />\n```\n\nIt can emit multiple events at the same time:\n\n```vue\n<BaseEventButton :events=\"{ myFirstEvent: payload1, mySecondEvent: payload2 }\" />\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock"],"mappings":";;;;SACc,WAAS,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SAACA,SAAU,EAAA,EAAAC,kBAAA;AAAA,IAAc,QAAA;AAAA,IAAA;AAAA,MAAE,GAAA,EAAA,SAAA;AAAA,MAAA,WAAA,EAAA,cAAA;MAE9C,OAAQ,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,UAAA,IAAA,IAAA,CAAA,UAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,KAAA;;;;;;;;;;;;"}

package/js/components/base-event-button.vue2.js

@@ -16,7 +16,7 @@ var _sfc_main = defineComponent({
         /** An object where the keys are the {@link XEvent} and the values are the payload. */
         events: {
             type: Object,
-            required: true
+            required: true,
         },
         /**
          * The metadata property for the request on each query preview.
@@ -24,8 +24,8 @@ var _sfc_main = defineComponent({
          * @public
          */
         metadata: {
-            type: Object
-        }
+            type: Object,
+        },
     },
     setup(props) {
         const $x = use$x();
@@ -38,9 +38,9 @@ var _sfc_main = defineComponent({
         }
         return {
             emitEvents,
-            rootRef
+            rootRef,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/components/base-event-button.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-event-button.vue2.js","sources":["../../../src/components/base-event-button.vue"],"sourcesContent":["<template>\n  <button ref=\"rootRef\" @click=\"emitEvents\" data-test=\"event-button\">\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, PropType, ref } from 'vue';\n  import { use$x } from '../composables/use-$x';\n  import { XEvent, XEventsTypes } from '../wiring/events.types';\n  import { WireMetadata } from '../wiring/index';\n\n  /**\n   * Component to be reused that renders a `<button>` with the logic of emitting events to the bus\n   * on click. The events are passed as an object to prop {@link XEvent}.\n   * The keys are the event name and the values are the payload of each event. All events are\n   * emitted with its respective payload. If any event doesn't need payload a `undefined` must be\n   * passed as value.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'BaseEventButton',\n    props: {\n      /** An object where the keys are the {@link XEvent} and the values are the payload. */\n      events: {\n        type: Object as PropType<Partial<XEventsTypes>>,\n        required: true\n      },\n      /**\n       * The metadata property for the request on each query preview.\n       *\n       * @public\n       */\n      metadata: {\n        type: Object as PropType<Omit<WireMetadata, 'moduleName'>>\n      }\n    },\n    setup(props) {\n      const $x = use$x();\n\n      const rootRef = ref<HTMLButtonElement>();\n\n      /**\n       * Emits `events` prop to the X bus with the payload given by it.\n       */\n      function emitEvents() {\n        Object.entries(props.events).forEach(([event, payload]) =>\n          $x.emit(event as XEvent, payload, { target: rootRef.value, ...props.metadata })\n        );\n      }\n\n      return {\n        emitEvents,\n        rootRef\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThe event prop is required. It will render a <button></button> that emits the event passed as prop\nwith the value as payload on click:\n\n```vue\n<BaseEventButton :events=\"{ myEvent: payload }\" />\n```\n\nIf the event doesn't need payload then `undefined` must be passed:\n\n```vue\n<BaseEventButton :events=\"{ myEvent: undefined }\" />\n```\n\nIt can emit multiple events at the same time:\n\n```vue\n<BaseEventButton :events=\"{ myFirstEvent: payload1, mySecondEvent: payload2 }\" />\n```\n</docs>\n"],"names":[],"mappings":";;;AAaE;;;;;;;;AAQE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,iBAAiB;AACvB,IAAA,KAAK,EAAE;;AAEL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAyC;AAC/C,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAmD;AAC3D,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;AAElB,QAAA,MAAM,OAAQ,GAAE,GAAG,EAAqB,CAAA;AAExC;;AAEE;AACF,QAAA,SAAS,UAAU,GAAA;AACjB,YAAA,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,EAAE,OAAO,CAAC,KACpD,EAAE,CAAC,IAAI,CAAC,KAAe,EAAE,OAAO,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,KAAK,EAAE,GAAG,KAAK,CAAC,UAAU,CAAA,CAC/E,CAAA;SACH;QAEA,OAAO;YACL,UAAU;YACV,OAAM;SACP,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"base-event-button.vue2.js","sources":["../../../src/components/base-event-button.vue"],"sourcesContent":["<template>\n  <button ref=\"rootRef\" data-test=\"event-button\" @click=\"emitEvents\">\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { XEvent, XEventsTypes } from '../wiring/events.types'\nimport type { WireMetadata } from '../wiring/index'\nimport { defineComponent, ref } from 'vue'\nimport { use$x } from '../composables/use-$x'\n\n/**\n * Component to be reused that renders a `<button>` with the logic of emitting events to the bus\n * on click. The events are passed as an object to prop {@link XEvent}.\n * The keys are the event name and the values are the payload of each event. All events are\n * emitted with its respective payload. If any event doesn't need payload a `undefined` must be\n * passed as value.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseEventButton',\n  props: {\n    /** An object where the keys are the {@link XEvent} and the values are the payload. */\n    events: {\n      type: Object as PropType<Partial<XEventsTypes>>,\n      required: true,\n    },\n    /**\n     * The metadata property for the request on each query preview.\n     *\n     * @public\n     */\n    metadata: {\n      type: Object as PropType<Omit<WireMetadata, 'moduleName'>>,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    const rootRef = ref<HTMLButtonElement>()\n\n    /**\n     * Emits `events` prop to the X bus with the payload given by it.\n     */\n    function emitEvents() {\n      Object.entries(props.events).forEach(([event, payload]) =>\n        $x.emit(event as XEvent, payload, { target: rootRef.value, ...props.metadata }),\n      )\n    }\n\n    return {\n      emitEvents,\n      rootRef,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThe event prop is required. It will render a <button></button> that emits the event passed as prop\nwith the value as payload on click:\n\n```vue\n<BaseEventButton :events=\"{ myEvent: payload }\" />\n```\n\nIf the event doesn't need payload then `undefined` must be passed:\n\n```vue\n<BaseEventButton :events=\"{ myEvent: undefined }\" />\n```\n\nIt can emit multiple events at the same time:\n\n```vue\n<BaseEventButton :events=\"{ myFirstEvent: payload1, mySecondEvent: payload2 }\" />\n```\n</docs>\n"],"names":[],"mappings":";;;AAcA;;;;;;;;AAQE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,iBAAiB;AACvB,IAAA,KAAK,EAAE;;AAEL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAyC;AAC/C,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD;;;;AAIE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAoD;AAC3D,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC,CAAA;AAEjB,QAAA,MAAM,OAAQ,GAAE,GAAG,EAAoB,CAAA;AAEvC;;AAEE;AACF,QAAA,SAAS,UAAU,GAAA;AACjB,YAAA,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,EAAE,OAAO,CAAC,KACpD,EAAE,CAAC,IAAI,CAAC,KAAe,EAAE,OAAO,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,KAAK,EAAE,GAAG,KAAK,CAAC,QAAO,EAAG,CAAC,CACjF,CAAA;SACF;QAEA,OAAO;YACL,UAAU;YACV,OAAO;SACT,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/components/base-grid.vue.js

@@ -1,5 +1,5 @@
 import _sfc_main from './base-grid.vue2.js';
-import { openBlock, createBlock, resolveDynamicComponent, normalizeStyle, normalizeClass, withCtx, createElementBlock, Fragment, renderList, createCommentVNode, renderSlot, createTextVNode, toDisplayString } from 'vue';
+import { openBlock, createBlock, resolveDynamicComponent, normalizeStyle, normalizeClass, withCtx, createElementBlock, Fragment, renderList, renderSlot, createTextVNode, toDisplayString } from 'vue';
 import './base-grid.vue3.js';
 import _export_sfc from '../_virtual/_plugin-vue_export-helper.js';
 
@@ -23,26 +23,19 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               class: normalizeClass([cssClass, "x-base-grid__item"])
             },
             [
-              createCommentVNode("\n        @slot Customized item rendering. Specifying a slot with the item's modelName will result in\n        the item using that slot composition to render.\n            @binding {item} item - Item to render\n      "),
               _ctx.slots[slotName] ? renderSlot(_ctx.$slots, slotName, {
                 key: 0,
                 item
-              }, void 0, true) : (openBlock(), createElementBlock(
-                Fragment,
-                { key: 1 },
-                [
-                  createCommentVNode("\n        @slot (required) Default item rendering. This slot will be used by default for rendering\n        the item without an specific slot implementation.\n            @binding {item} item - Item to render\n      "),
-                  renderSlot(_ctx.$slots, "default", { item }, () => [
-                    createTextVNode(
-                      toDisplayString(item.name || item.modelName || item.id || item),
-                      1
-                      /* TEXT */
-                    )
-                  ], true)
-                ],
-                2112
-                /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-              ))
+              }, void 0, true) : renderSlot(_ctx.$slots, "default", {
+                key: 1,
+                item
+              }, () => [
+                createTextVNode(
+                  toDisplayString(item.name || item.modelName || item.id || item),
+                  1
+                  /* TEXT */
+                )
+              ], true)
             ],
             2
             /* CLASS */