@empathyco/x-components 3.0.0-alpha.39 → 3.0.0-alpha.391

package/js/components/auto-progress-bar.vue_rollup-plugin-vue_styles.0.vue.js

@@ -0,0 +1,16 @@
+import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
+
+var css = ".x-progress-bar {\n  display: inline-block;\n  overflow: hidden;\n  background-color: #dbe2e5;\n  border-radius: 4px;\n}\n.x-progress-bar-fill {\n  height: 4px;\n  background-color: #283034;\n  animation: slide linear;\n  transform-origin: left;\n}\n@keyframes slide {\n0% {\n    transform: translateX(-100%);\n}\n100% {\n    transform: translateX(0);\n}\n}";
+           const isBrowser = /*#__PURE__*/ (function () {
+             return (
+                Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==
+                '[object process]'
+             );
+           })();
+           const useBrowserInjector =
+             (typeof STRIP_SSR_INJECTOR !== 'undefined' && STRIP_SSR_INJECTOR) || isBrowser;
+           const injector = useBrowserInjector ? createInjector({}) : createInjectorSSR({});
+           injector('/home/runner/work/x/x/packages/x-components/src/components/auto-progress-bar.vue?rollup-plugin-vue=styles.0.css',{source:css});
+
+export { css, css as default };
+//# sourceMappingURL=auto-progress-bar.vue_rollup-plugin-vue_styles.0.vue.js.map

package/js/components/auto-progress-bar.vue_rollup-plugin-vue_styles.0.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"auto-progress-bar.vue_rollup-plugin-vue_styles.0.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

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

@@ -1,10 +1,9 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-import __vue_create_injector__ from 'vue-runtime-helpers/dist/inject-style/browser.js';
-import script from './base-dropdown.vue_rollup-plugin-vue=script.js';
+import script from './base-dropdown.vue_rollup-plugin-vue_script.vue.js';
+import './base-dropdown.vue_rollup-plugin-vue_styles.0.vue.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
 
 /* script */
-var __vue_script__ = script;
-
+const __vue_script__ = script;
 /* template */
 var __vue_render__ = function () {
   var _vm = this;
@@ -23,7 +22,8 @@ var __vue_render__ = function () {
               !$event.type.indexOf("key") &&
               _vm._k($event.keyCode, "down", 40, $event.key, [
                 "Down",
-                "ArrowDown" ])
+                "ArrowDown",
+              ])
             ) {
               return null
             }
@@ -39,15 +39,25 @@ var __vue_render__ = function () {
             }
             $event.preventDefault();
             return _vm.highlightPreviousItem.apply(null, arguments)
-          } ],
+          },
+        ],
       },
     },
     [
       _c(
         "button",
         {
+          ref: "toggleButton",
           staticClass: "x-dropdown__toggle",
-          attrs: { "aria-haspopup": "listbox", "data-test": "dropdown-toggle" },
+          attrs: {
+            "data-test": "dropdown-toggle",
+            role: "combobox",
+            "aria-haspopup": "listbox",
+            "aria-expanded": _vm.isOpen.toString(),
+            "aria-controls": _vm.listId,
+            "aria-label": _vm.ariaLabel,
+            "aria-autocomplete": "none",
+          },
           on: {
             click: _vm.toggle,
             keydown: function ($event) {
@@ -55,10 +65,12 @@ var __vue_render__ = function () {
                 !$event.type.indexOf("key") &&
                 _vm._k($event.keyCode, "up", 38, $event.key, [
                   "Up",
-                  "ArrowUp" ]) &&
+                  "ArrowUp",
+                ]) &&
                 _vm._k($event.keyCode, "down", 40, $event.key, [
                   "Down",
-                  "ArrowDown" ])
+                  "ArrowDown",
+                ])
               ) {
                 return null
               }
@@ -73,7 +85,7 @@ var __vue_render__ = function () {
             ? _vm._t(
                 "toggle",
                 function () {
-                  return [_vm._v("\n      " + _vm._s(_vm.value) + "\n    ")]
+                  return [_vm._v(" " + _vm._s(_vm.value) + " ")]
                 },
                 { isOpen: _vm.isOpen, item: _vm.value }
               )
@@ -83,117 +95,116 @@ var __vue_render__ = function () {
                   return [_vm._v(_vm._s(_vm.value))]
                 },
                 { item: _vm.value }
-              ) ],
+              ),
+        ],
         2
       ),
-      _vm._v(" "),
       _c(_vm.animation, { tag: "component" }, [
-        _vm.isOpen
-          ? _c(
-              "ul",
+        _c(
+          "ul",
+          {
+            directives: [
               {
-                staticClass: "x-dropdown__items-list",
-                attrs: {
-                  "aria-expanded": _vm.isOpen.toString(),
-                  role: "listbox",
+                name: "show",
+                rawName: "v-show",
+                value: _vm.isOpen,
+                expression: "isOpen",
+              },
+            ],
+            staticClass: "x-dropdown__items-list",
+            attrs: { id: _vm.listId, role: "listbox", tabindex: "-1" },
+            on: {
+              keydown: [
+                function ($event) {
+                  if (
+                    !$event.type.indexOf("key") &&
+                    _vm._k(
+                      $event.keyCode,
+                      "end",
+                      undefined,
+                      $event.key,
+                      undefined
+                    )
+                  ) {
+                    return null
+                  }
+                  return _vm.highlightLastItem.apply(null, arguments)
                 },
-                on: {
-                  keydown: [
-                    function ($event) {
-                      if (
-                        !$event.type.indexOf("key") &&
-                        _vm._k(
-                          $event.keyCode,
-                          "end",
-                          undefined,
-                          $event.key,
-                          undefined
-                        )
-                      ) {
-                        return null
-                      }
-                      return _vm.highlightLastItem.apply(null, arguments)
-                    },
-                    function ($event) {
-                      if (
-                        !$event.type.indexOf("key") &&
-                        _vm._k($event.keyCode, "esc", 27, $event.key, [
-                          "Esc",
-                          "Escape" ])
-                      ) {
-                        return null
-                      }
-                      return _vm.close.apply(null, arguments)
-                    },
-                    function ($event) {
-                      if (
-                        !$event.type.indexOf("key") &&
-                        _vm._k(
-                          $event.keyCode,
-                          "home",
-                          undefined,
-                          $event.key,
-                          undefined
-                        )
-                      ) {
-                        return null
-                      }
-                      return _vm.highlightFirstItem.apply(null, arguments)
-                    } ],
+                function ($event) {
+                  if (
+                    !$event.type.indexOf("key") &&
+                    _vm._k($event.keyCode, "esc", 27, $event.key, [
+                      "Esc",
+                      "Escape",
+                    ])
+                  ) {
+                    return null
+                  }
+                  return _vm.closeAndFocusToggleButton.apply(null, arguments)
                 },
-              },
-              _vm._l(_vm.items, function (item, index) {
-                return _c(
-                  "li",
+                function ($event) {
+                  if (
+                    !$event.type.indexOf("key") &&
+                    _vm._k(
+                      $event.keyCode,
+                      "home",
+                      undefined,
+                      $event.key,
+                      undefined
+                    )
+                  ) {
+                    return null
+                  }
+                  return _vm.highlightFirstItem.apply(null, arguments)
+                },
+              ],
+            },
+          },
+          _vm._l(_vm.items, function (item, index) {
+            return _c(
+              "li",
+              { key: item.id || item, staticClass: "x-dropdown__list-item" },
+              [
+                _c(
+                  "button",
                   {
-                    key: item.id || item,
-                    staticClass: "x-dropdown__list-item",
+                    ref: "itemButtons",
+                    refInFor: true,
+                    staticClass: "x-dropdown__item",
+                    class: _vm.itemsCSSClasses[index],
+                    attrs: {
+                      "aria-selected": (item === _vm.value).toString(),
+                      "data-test": "dropdown-item",
+                      role: "option",
+                    },
+                    on: {
+                      click: function ($event) {
+                        return _vm.emitSelectedItemChanged(item)
+                      },
+                    },
                   },
                   [
-                    _c(
-                      "button",
-                      {
-                        ref: "itemButtons",
-                        refInFor: true,
-                        staticClass: "x-dropdown__item",
-                        class: _vm.itemsCSSClasses[index],
-                        attrs: {
-                          "aria-selected": (
-                            index === _vm.highlightedItemIndex
-                          ).toString(),
-                          "aria-current": (item === _vm.value).toString(),
-                          "data-test": "dropdown-item",
-                          role: "option",
-                          tabindex: "-1",
-                        },
-                        on: {
-                          click: function ($event) {
-                            return _vm.emitSelectedItemChanged(item)
-                          },
-                        },
+                    _vm._t(
+                      "item",
+                      function () {
+                        return [_vm._v(" " + _vm._s(item) + " ")]
                       },
-                      [
-                        _vm._t(
-                          "item",
-                          function () {
-                            return [
-                              _vm._v(
-                                "\n            " + _vm._s(item) + "\n          "
-                              ) ]
-                          },
-                          {
-                            isHighlighted: index === _vm.highlightedItemIndex,
-                            isSelected: item === _vm.value,
-                            item: item,
-                          }
-                        ) ],
-                      2
-                    ) ]
-                )
-              }),
-              0
+                      {
+                        isHighlighted: index === _vm.highlightedItemIndex,
+                        isSelected: item === _vm.value,
+                        item: item,
+                      }
+                    ),
+                  ],
+                  2
+                ),
+              ]
             )
-          : _vm._e() ]) ],
+          }),
+          0
+        ),
+      ]),
+    ],
     1
   )
 };
@@ -201,24 +212,22 @@ var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
 
   /* style */
-  var __vue_inject_styles__ = function (inject) {
-    if (!inject) { return }
-    inject("data-v-12a3cc4e_0", { source: ".x-dropdown[data-v-12a3cc4e] {\n  position: relative;\n}\n.x-dropdown__items-list[data-v-12a3cc4e] {\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}", map: undefined, media: undefined });
-
-  };
+  const __vue_inject_styles__ = undefined;
   /* scoped */
-  var __vue_scope_id__ = "data-v-12a3cc4e";
+  const __vue_scope_id__ = "data-v-3e509310";
   /* module identifier */
-  var __vue_module_identifier__ = undefined;
+  const __vue_module_identifier__ = undefined;
   /* functional template */
-  var __vue_is_functional_template__ = false;
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  var __vue_component__ = /*#__PURE__*/__vue_normalize__(
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
     { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
     __vue_inject_styles__,
     __vue_script__,
@@ -226,10 +235,10 @@ __vue_render__._withStripped = true;
     __vue_is_functional_template__,
     __vue_module_identifier__,
     false,
-    __vue_create_injector__,
+    undefined,
     undefined,
     undefined
   );
 
-export default __vue_component__;
+export { __vue_component__ as default };
 //# sourceMappingURL=base-dropdown.vue.js.map

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    @keydown=\"updateSearchBuffer\"\n    @keydown.down.prevent=\"highlightNextItem\"\n    @keydown.up.prevent=\"highlightPreviousItem\"\n    :class=\"dropdownCSSClasses\"\n    class=\"x-dropdown\"\n  >\n    <button\n      @click=\"toggle\"\n      @keydown.up.down.prevent.stop=\"open\"\n      aria-haspopup=\"listbox\"\n      class=\"x-dropdown__toggle\"\n      data-test=\"dropdown-toggle\"\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=\"$scopedSlots.toggle\" :isOpen=\"isOpen\" :item=\"value\" name=\"toggle\">\n        {{ value }}\n      </slot>\n      <slot v-else :item=\"value\" name=\"item\">{{ value }}</slot>\n    </button>\n\n    <component :is=\"animation\">\n      <ul\n        v-if=\"isOpen\"\n        @keydown.end=\"highlightLastItem\"\n        @keydown.esc=\"close\"\n        @keydown.home=\"highlightFirstItem\"\n        :aria-expanded=\"isOpen.toString()\"\n        class=\"x-dropdown__items-list\"\n        role=\"listbox\"\n      >\n        <li v-for=\"(item, index) in items\" :key=\"item.id || item\" class=\"x-dropdown__list-item\">\n          <button\n            ref=\"itemButtons\"\n            @click=\"emitSelectedItemChanged(item)\"\n            :aria-selected=\"(index === highlightedItemIndex).toString()\"\n            :aria-current=\"(item === value).toString()\"\n            :class=\"itemsCSSClasses[index]\"\n            class=\"x-dropdown__item\"\n            data-test=\"dropdown-item\"\n            role=\"option\"\n            tabindex=\"-1\"\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 === value\"\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 { Component, Prop, Watch } from 'vue-property-decorator';\n  import Vue from 'vue';\n  import { normalizeString } from '../utils/normalize';\n  import { isInRange } from '../utils/number';\n  import { debounce } from '../utils/debounce';\n  import { VueCSSClasses } from '../utils/types';\n  import { NoElement } from './no-element';\n\n  type DropdownItem = string | number | Identifiable;\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   * @public\n   */\n  @Component({\n    components: {\n      NoElement\n    },\n    model: {\n      event: 'change'\n    }\n  })\n  export default class BaseDropdown extends Vue {\n    /**\n     * List of items to display.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    public items!: DropdownItem[];\n\n    /**\n     * The selected item.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    public value!: DropdownItem | null;\n\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     * @public\n     */\n    @Prop({ default: 'NoElement' })\n    public animation!: typeof Vue | string;\n\n    /**\n     * Time to wait without receiving any keystroke before resetting the items search query.\n     *\n     * @public\n     */\n    @Prop({ default: 1000 })\n    public searchTimeoutMs!: number;\n\n    public $refs!: {\n      /** Array containing the dropdown list buttons HTMLElements. */\n      itemButtons: HTMLButtonElement[];\n    };\n\n    /**\n     * Property to track whether the dropdown is expanded and displaying the full\n     * list of items, or closed.\n     *\n     * @internal\n     */\n    protected isOpen = false;\n\n    /**\n     * Index of the element that has the focus in the list. -1 means no element has focus.\n     *\n     * @internal\n     */\n    protected highlightedItemIndex = -1;\n\n    /**\n     * String to search for the first element that starts with it.\n     *\n     * @internal\n     */\n    protected searchBuffer = '';\n\n    /**\n     * Resets the search buffer after a certain time has passed.\n     *\n     * @internal\n     */\n    protected restartResetSearchTimeout!: () => void;\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     * @internal\n     */\n    protected get dropdownCSSClasses(): VueCSSClasses {\n      return {\n        'x-dropdown--is-open': this.isOpen\n      };\n    }\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     * @internal\n     */\n    protected get itemsCSSClasses(): VueCSSClasses[] {\n      return this.items.map((item, index) => {\n        return {\n          'x-dropdown__item--is-selected': this.value === item,\n          'x-dropdown__item--is-highlighted': this.highlightedItemIndex === index\n        };\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     * @internal\n     */\n    protected beforeDestroy(): void {\n      this.removeDocumentCloseListeners();\n    }\n\n    /**\n     * Opens the dropdown.\n     *\n     * @internal\n     */\n    protected open(): void {\n      this.isOpen = true;\n    }\n\n    /**\n     * Closes the dropdown.\n     *\n     * @internal\n     */\n    protected close(): void {\n      this.isOpen = false;\n    }\n\n    /**\n     * If the dropdown is opened it closes it. If it is closed it opens it.\n     *\n     * @internal\n     */\n    protected toggle(): void {\n      this.isOpen = !this.isOpen;\n    }\n\n    /**\n     * Emits the event that the selected item has changed.\n     *\n     * @param item - The new selected item.\n     * @internal\n     */\n    protected emitSelectedItemChanged(item: DropdownItem): void {\n      this.$emit('change', item);\n      this.close();\n    }\n\n    /**\n     * Highlights the item after the one that is currently highlighted.\n     *\n     * @internal\n     */\n    protected highlightNextItem(): void {\n      this.open();\n      this.highlightedItemIndex = (this.highlightedItemIndex + 1) % this.items.length;\n    }\n\n    /**\n     * Highlights the item before the one that is currently highlighted.\n     *\n     * @internal\n     */\n    protected highlightPreviousItem(): void {\n      this.open();\n      this.highlightedItemIndex =\n        this.highlightedItemIndex > 0 ? this.highlightedItemIndex - 1 : this.items.length - 1;\n    }\n\n    /**\n     * Highlights the first of the provided items.\n     *\n     * @internal\n     */\n    protected highlightFirstItem(): void {\n      this.highlightedItemIndex = 0;\n    }\n\n    /**\n     * Highlights the last of the provided items.\n     *\n     * @internal\n     */\n    protected highlightLastItem(): void {\n      this.highlightedItemIndex = this.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     * @internal\n     */\n    protected updateSearchBuffer(event: KeyboardEvent): void {\n      if (/^\\w$/.test(event.key)) {\n        const key = event.key;\n        this.searchBuffer += key;\n        this.restartResetSearchTimeout();\n      }\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 folowing 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     * @internal\n     */\n    @Watch('searchBuffer')\n    protected highlightMatchingItem(search: string): void {\n      if (search) {\n        const normalizedSearch = normalizeString(search);\n        const matchingIndices = this.$refs.itemButtons.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        this.highlightedItemIndex =\n          // First matching item starting to search from the current highlighted element\n          matchingIndices.find(index => index >= this.highlightedItemIndex) ??\n          // First matching item\n          matchingIndices[0] ??\n          // First item\n          0;\n      }\n    }\n\n    /**\n     * Resets the search buffer.\n     *\n     * @internal\n     */\n    protected resetSearch(): void {\n      this.searchBuffer = '';\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     * @internal\n     */\n    @Watch('searchTimeoutMs', { immediate: true })\n    protected updateSearchTimeout(searchTimeoutMs: number): void {\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      this.restartResetSearchTimeout = debounce(this.resetSearch, searchTimeoutMs);\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     * @internal\n     */\n    @Watch('highlightedItemIndex', { immediate: true })\n    protected focusHighlightedItem(highlightedItemIndex: number): void {\n      this.$nextTick(() => {\n        if (this.$refs.itemButtons && isInRange(highlightedItemIndex, [0, this.items.length - 1])) {\n          const newItem = this.$refs.itemButtons[this.highlightedItemIndex];\n          newItem.focus();\n        }\n      });\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     * @internal\n     */\n    @Watch('isOpen')\n    protected updateHighlightedItem(isOpen: boolean): void {\n      if (isOpen) {\n        this.highlightedItemIndex = this.value === null ? 0 : this.items.indexOf(this.value);\n      } else {\n        this.highlightedItemIndex = -1;\n      }\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     * @internal\n     */\n    @Watch('isOpen')\n    protected syncCloseListeners(isOpen: boolean): void {\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 or not 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        this.addDocumentCloseListeners();\n      } else {\n        this.removeDocumentCloseListeners();\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     * @internal\n     */\n    protected addDocumentCloseListeners(): void {\n      /* eslint-disable @typescript-eslint/unbound-method */\n      document.addEventListener('mousedown', this.closeIfEventIsOutOfDropdown);\n      document.addEventListener('touchstart', this.closeIfEventIsOutOfDropdown);\n      document.addEventListener('focusin', this.closeIfEventIsOutOfDropdown);\n      /* eslint-enable @typescript-eslint/unbound-method */\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     * @internal\n     */\n    protected removeDocumentCloseListeners(): void {\n      /* eslint-disable @typescript-eslint/unbound-method */\n      document.removeEventListener('mousedown', this.closeIfEventIsOutOfDropdown);\n      document.removeEventListener('touchstart', this.closeIfEventIsOutOfDropdown);\n      document.removeEventListener('focusin', this.closeIfEventIsOutOfDropdown);\n      /* eslint-enable @typescript-eslint/unbound-method */\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 happen out of the dropdown component.\n     */\n    protected closeIfEventIsOutOfDropdown(event: MouseEvent | TouchEvent | FocusEvent): void {\n      if (!this.$el.contains(event.target as HTMLElement)) {\n        this.close();\n      }\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-dropdown {\n    position: relative;\n\n    &__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  }\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 :items=\"items\" v-model=\"value\">\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":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-dropdown.vue.js","sources":["../../../src/components/base-dropdown.vue"],"sourcesContent":["<template>\n  <div\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=\"toggleButton\"\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=\"$scopedSlots.toggle\" :isOpen=\"isOpen\" :item=\"value\" name=\"toggle\">\n        {{ value }}\n      </slot>\n      <slot v-else :item=\"value\" name=\"item\">{{ value }}</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        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=\"itemButtons\"\n            @click=\"emitSelectedItemChanged(item)\"\n            :aria-selected=\"(item === value).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 === value\"\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 { Component, Prop, Watch } from 'vue-property-decorator';\n  import Vue from 'vue';\n  import { getTargetElement } from '../utils/html';\n  import { normalizeString } from '../utils/normalize';\n  import { isInRange } from '../utils/number';\n  import { debounce } from '../utils/debounce';\n  import { VueCSSClasses } from '../utils/types';\n  import { NoElement } from './no-element';\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   * @public\n   */\n  @Component({\n    components: {\n      NoElement\n    },\n    model: {\n      event: 'change'\n    }\n  })\n  export default class BaseDropdown extends Vue {\n    /**\n     * List of items to display.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    public items!: DropdownItem[];\n\n    /**\n     * Description of what the dropdown is used for.\n     *\n     * @public\n     */\n    @Prop()\n    public ariaLabel?: string;\n\n    /**\n     * The selected item.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    public value!: DropdownItem | null;\n\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     * @public\n     */\n    @Prop({ default: 'NoElement' })\n    public animation!: typeof Vue | string;\n\n    /**\n     * Time to wait without receiving any keystroke before resetting the items search query.\n     *\n     * @public\n     */\n    @Prop({ default: 1000 })\n    public searchTimeoutMs!: number;\n\n    public $refs!: {\n      /** Array containing the dropdown list buttons HTMLElements. */\n      itemButtons: HTMLButtonElement[];\n      /** The button that opens and closes the list of options. */\n      toggleButton: HTMLButtonElement;\n    };\n\n    /**\n     * Property to track whether the dropdown is expanded and displaying the full\n     * list of items, or closed.\n     *\n     * @internal\n     */\n    protected isOpen = false;\n\n    /**\n     * Index of the element that has the focus in the list. -1 means no element has focus.\n     *\n     * @internal\n     */\n    protected highlightedItemIndex = -1;\n\n    /**\n     * String to search for the first element that starts with it.\n     *\n     * @internal\n     */\n    protected searchBuffer = '';\n\n    /**\n     * Resets the search buffer after a certain time has passed.\n     *\n     * @internal\n     */\n    protected restartResetSearchTimeout!: () => void;\n\n    protected readonly listId = `x-dropdown-${dropdownCount++}`;\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     * @internal\n     */\n    protected get dropdownCSSClasses(): VueCSSClasses {\n      return {\n        'x-dropdown--is-open': this.isOpen\n      };\n    }\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     * @internal\n     */\n    protected get itemsCSSClasses(): VueCSSClasses[] {\n      return this.items.map((item, index) => {\n        return {\n          'x-dropdown__item--is-selected': this.value === item,\n          'x-dropdown__item--is-highlighted': this.highlightedItemIndex === index\n        };\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     * @internal\n     */\n    protected beforeDestroy(): void {\n      this.removeDocumentCloseListeners();\n    }\n\n    /**\n     * Opens the dropdown.\n     *\n     * @internal\n     */\n    protected open(): void {\n      this.isOpen = true;\n    }\n\n    /**\n     * Closes the dropdown.\n     *\n     * @internal\n     */\n    protected close(): void {\n      this.isOpen = false;\n    }\n\n    /**\n     * Closes the modal and focuses the toggle button.\n     *\n     * @internal\n     */\n    protected closeAndFocusToggleButton(): void {\n      this.close();\n      this.$refs.toggleButton.focus();\n    }\n\n    /**\n     * If the dropdown is opened it closes it. If it is closed it opens it.\n     *\n     * @internal\n     */\n    protected toggle(): void {\n      this.isOpen = !this.isOpen;\n    }\n\n    /**\n     * Emits the event that the selected item has changed.\n     *\n     * @param item - The new selected item.\n     * @internal\n     */\n    protected emitSelectedItemChanged(item: DropdownItem): void {\n      this.$emit('change', item);\n      this.closeAndFocusToggleButton();\n    }\n\n    /**\n     * Highlights the item after the one that is currently highlighted.\n     *\n     * @internal\n     */\n    protected highlightNextItem(): void {\n      this.open();\n      this.highlightedItemIndex = (this.highlightedItemIndex + 1) % this.items.length;\n    }\n\n    /**\n     * Highlights the item before the one that is currently highlighted.\n     *\n     * @internal\n     */\n    protected highlightPreviousItem(): void {\n      this.open();\n      this.highlightedItemIndex =\n        this.highlightedItemIndex > 0 ? this.highlightedItemIndex - 1 : this.items.length - 1;\n    }\n\n    /**\n     * Highlights the first of the provided items.\n     *\n     * @internal\n     */\n    protected highlightFirstItem(): void {\n      this.highlightedItemIndex = 0;\n    }\n\n    /**\n     * Highlights the last of the provided items.\n     *\n     * @internal\n     */\n    protected highlightLastItem(): void {\n      this.highlightedItemIndex = this.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     * @internal\n     */\n    protected updateSearchBuffer(event: KeyboardEvent): void {\n      if (/^\\w$/.test(event.key)) {\n        const key = event.key;\n        this.searchBuffer += key;\n        this.restartResetSearchTimeout();\n      }\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 folowing 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     * @internal\n     */\n    @Watch('searchBuffer')\n    protected highlightMatchingItem(search: string): void {\n      if (search) {\n        const normalizedSearch = normalizeString(search);\n        const matchingIndices = this.$refs.itemButtons.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        this.highlightedItemIndex =\n          // First matching item starting to search from the current highlighted element\n          matchingIndices.find(index => index >= this.highlightedItemIndex) ??\n          // First matching item\n          matchingIndices[0] ??\n          // First item\n          0;\n      }\n    }\n\n    /**\n     * Resets the search buffer.\n     *\n     * @internal\n     */\n    protected resetSearch(): void {\n      this.searchBuffer = '';\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     * @internal\n     */\n    @Watch('searchTimeoutMs', { immediate: true })\n    protected updateSearchTimeout(searchTimeoutMs: number): void {\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      this.restartResetSearchTimeout = debounce(this.resetSearch, searchTimeoutMs);\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     * @internal\n     */\n    @Watch('highlightedItemIndex', { immediate: true })\n    protected focusHighlightedItem(highlightedItemIndex: number): void {\n      this.$nextTick(() => {\n        if (this.$refs.itemButtons && isInRange(highlightedItemIndex, [0, this.items.length - 1])) {\n          const newItem = this.$refs.itemButtons[this.highlightedItemIndex];\n          newItem.focus();\n        }\n      });\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     * @internal\n     */\n    @Watch('isOpen')\n    protected updateHighlightedItem(isOpen: boolean): void {\n      if (isOpen) {\n        this.highlightedItemIndex = this.value === null ? 0 : this.items.indexOf(this.value);\n      } else {\n        this.highlightedItemIndex = -1;\n      }\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     * @internal\n     */\n    @Watch('isOpen')\n    protected syncCloseListeners(isOpen: boolean): void {\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 or not 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        this.addDocumentCloseListeners();\n      } else {\n        this.removeDocumentCloseListeners();\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     * @internal\n     */\n    protected addDocumentCloseListeners(): void {\n      /* eslint-disable @typescript-eslint/unbound-method */\n      document.addEventListener('mousedown', this.closeIfEventIsOutOfDropdown);\n      document.addEventListener('touchstart', this.closeIfEventIsOutOfDropdown);\n      document.addEventListener('focusin', this.closeIfEventIsOutOfDropdown);\n      /* eslint-enable @typescript-eslint/unbound-method */\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     * @internal\n     */\n    protected removeDocumentCloseListeners(): void {\n      /* eslint-disable @typescript-eslint/unbound-method */\n      document.removeEventListener('mousedown', this.closeIfEventIsOutOfDropdown);\n      document.removeEventListener('touchstart', this.closeIfEventIsOutOfDropdown);\n      document.removeEventListener('focusin', this.closeIfEventIsOutOfDropdown);\n      /* eslint-enable @typescript-eslint/unbound-method */\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 happen out of the dropdown component.\n     */\n    protected closeIfEventIsOutOfDropdown(event: MouseEvent | TouchEvent | FocusEvent): void {\n      if (!this.$el.contains(getTargetElement(event))) {\n        this.close();\n      }\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-dropdown {\n    position: relative;\n\n    &__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  }\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 :items=\"items\" v-model=\"value\">\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":[],"mappings":";;;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}