@empathyco/x-components 3.0.0-alpha.8 → 3.0.0-alpha.82

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

@@ -1,12 +1,12 @@
-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 __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import __vue_create_injector__ from 'vue-runtime-helpers/dist/inject-style/browser.mjs';
 
 /* script */
-var __vue_script__ = script;
+const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -18,12 +18,12 @@ var __vue_render__ = function() {
       on: {
         keydown: [
           _vm.updateSearchBuffer,
-          function($event) {
+          function ($event) {
             if (
               !$event.type.indexOf("key") &&
               _vm._k($event.keyCode, "down", 40, $event.key, [
                 "Down",
-                "ArrowDown"
+                "ArrowDown",
               ])
             ) {
               return null
@@ -31,7 +31,7 @@ var __vue_render__ = function() {
             $event.preventDefault();
             return _vm.highlightNextItem.apply(null, arguments)
           },
-          function($event) {
+          function ($event) {
             if (
               !$event.type.indexOf("key") &&
               _vm._k($event.keyCode, "up", 38, $event.key, ["Up", "ArrowUp"])
@@ -40,9 +40,9 @@ var __vue_render__ = function() {
             }
             $event.preventDefault();
             return _vm.highlightPreviousItem.apply(null, arguments)
-          }
-        ]
-      }
+          },
+        ],
+      },
     },
     [
       _c(
@@ -52,16 +52,16 @@ var __vue_render__ = function() {
           attrs: { "aria-haspopup": "listbox", "data-test": "dropdown-toggle" },
           on: {
             click: _vm.toggle,
-            keydown: function($event) {
+            keydown: function ($event) {
               if (
                 !$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
@@ -69,13 +69,25 @@ var __vue_render__ = function() {
               $event.preventDefault();
               $event.stopPropagation();
               return _vm.open.apply(null, arguments)
-            }
-          }
+            },
+          },
         },
         [
           _vm.$scopedSlots.toggle
-            ? _vm._t("toggle", null, { isOpen: _vm.isOpen, item: _vm.value })
-            : _vm._t("item", null, { item: _vm.value })
+            ? _vm._t(
+                "toggle",
+                function () {
+                  return [_vm._v("\n      " + _vm._s(_vm.value) + "\n    ")]
+                },
+                { isOpen: _vm.isOpen, item: _vm.value }
+              )
+            : _vm._t(
+                "item",
+                function () {
+                  return [_vm._v(_vm._s(_vm.value))]
+                },
+                { item: _vm.value }
+              ),
         ],
         2
       ),
@@ -88,11 +100,11 @@ var __vue_render__ = function() {
                 staticClass: "x-dropdown__items-list",
                 attrs: {
                   "aria-expanded": _vm.isOpen.toString(),
-                  role: "listbox"
+                  role: "listbox",
                 },
                 on: {
                   keydown: [
-                    function($event) {
+                    function ($event) {
                       if (
                         !$event.type.indexOf("key") &&
                         _vm._k(
@@ -107,19 +119,19 @@ var __vue_render__ = function() {
                       }
                       return _vm.highlightLastItem.apply(null, arguments)
                     },
-                    function($event) {
+                    function ($event) {
                       if (
                         !$event.type.indexOf("key") &&
                         _vm._k($event.keyCode, "esc", 27, $event.key, [
                           "Esc",
-                          "Escape"
+                          "Escape",
                         ])
                       ) {
                         return null
                       }
                       return _vm.close.apply(null, arguments)
                     },
-                    function($event) {
+                    function ($event) {
                       if (
                         !$event.type.indexOf("key") &&
                         _vm._k(
@@ -133,16 +145,16 @@ var __vue_render__ = function() {
                         return null
                       }
                       return _vm.highlightFirstItem.apply(null, arguments)
-                    }
-                  ]
-                }
+                    },
+                  ],
+                },
               },
-              _vm._l(_vm.items, function(item, index) {
+              _vm._l(_vm.items, function (item, index) {
                 return _c(
                   "li",
                   {
                     key: item.id || item,
-                    staticClass: "x-dropdown__list-item"
+                    staticClass: "x-dropdown__list-item",
                   },
                   [
                     _c(
@@ -159,30 +171,40 @@ var __vue_render__ = function() {
                           "aria-current": (item === _vm.value).toString(),
                           "data-test": "dropdown-item",
                           role: "option",
-                          tabindex: "-1"
+                          tabindex: "-1",
                         },
                         on: {
-                          click: function($event) {
+                          click: function ($event) {
                             return _vm.emitSelectedItemChanged(item)
-                          }
-                        }
+                          },
+                        },
                       },
                       [
-                        _vm._t("item", null, {
-                          isHighlighted: index === _vm.highlightedItemIndex,
-                          isSelected: item === _vm.value,
-                          item: 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
             )
-          : _vm._e()
-      ])
+          : _vm._e(),
+      ]),
     ],
     1
   )
@@ -191,24 +213,24 @@ var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
 
   /* style */
-  var __vue_inject_styles__ = function (inject) {
-    if (!inject) { return }
-    inject("data-v-6fde3ef0_0", { source: ".x-dropdown[data-v-6fde3ef0] {\n  position: relative;\n}\n.x-dropdown__items-list[data-v-6fde3ef0] {\n  z-index: 1;\n  list-style: none;\n  position: absolute;\n  padding: 0;\n  margin: 0;\n  left: 0;\n  top: 100%;\n}", map: undefined, media: undefined });
+  const __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 });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-6fde3ef0";
+  const __vue_scope_id__ = "data-v-12a3cc4e";
   /* 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 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__,
@@ -221,5 +243,5 @@ __vue_render__._withStripped = true;
     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      <slot v-else :item=\"value\" name=\"item\" />\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          </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      left: 0;\n      top: 100%;\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      @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":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/base-dropdown.vue_rollup-plugin-vue_script.vue.js

@@ -0,0 +1,327 @@
+import { __decorate } from 'tslib';
+import { Prop, Watch, Component } from 'vue-property-decorator';
+import Vue from 'vue';
+import { normalizeString } from '../utils/normalize.js';
+import { isInRange } from '../utils/number.js';
+import { debounce } from '../utils/debounce.js';
+import { NoElement } from './no-element.js';
+
+/**
+ * Dropdown component that mimics a Select element behavior, but with the option
+ * to customize the toggle button and each item contents.
+ *
+ * @public
+ */
+let BaseDropdown = class BaseDropdown extends Vue {
+    constructor() {
+        super(...arguments);
+        /**
+         * Property to track whether the dropdown is expanded and displaying the full
+         * list of items, or closed.
+         *
+         * @internal
+         */
+        this.isOpen = false;
+        /**
+         * Index of the element that has the focus in the list. -1 means no element has focus.
+         *
+         * @internal
+         */
+        this.highlightedItemIndex = -1;
+        /**
+         * String to search for the first element that starts with it.
+         *
+         * @internal
+         */
+        this.searchBuffer = '';
+    }
+    /**
+     * Dynamic CSS classes to add to the dropdown root element.
+     *
+     * @returns An object containing the CSS classes to add to the dropdown root element.
+     * @internal
+     */
+    get dropdownCSSClasses() {
+        return {
+            'x-dropdown--is-open': this.isOpen
+        };
+    }
+    /**
+     * Dynamic CSS classes to add to each one of the items.
+     *
+     * @returns An object containing the CSS classes to add to each item.
+     * @internal
+     */
+    get itemsCSSClasses() {
+        return this.items.map((item, index) => {
+            return {
+                'x-dropdown__item--is-selected': this.value === item,
+                'x-dropdown__item--is-highlighted': this.highlightedItemIndex === index
+            };
+        });
+    }
+    /**
+     * If the dropdown is destroyed before removing the document listeners, it ensures that they
+     * are removed too.
+     *
+     * @internal
+     */
+    beforeDestroy() {
+        this.removeDocumentCloseListeners();
+    }
+    /**
+     * Opens the dropdown.
+     *
+     * @internal
+     */
+    open() {
+        this.isOpen = true;
+    }
+    /**
+     * Closes the dropdown.
+     *
+     * @internal
+     */
+    close() {
+        this.isOpen = false;
+    }
+    /**
+     * If the dropdown is opened it closes it. If it is closed it opens it.
+     *
+     * @internal
+     */
+    toggle() {
+        this.isOpen = !this.isOpen;
+    }
+    /**
+     * Emits the event that the selected item has changed.
+     *
+     * @param item - The new selected item.
+     * @internal
+     */
+    emitSelectedItemChanged(item) {
+        this.$emit('change', item);
+        this.close();
+    }
+    /**
+     * Highlights the item after the one that is currently highlighted.
+     *
+     * @internal
+     */
+    highlightNextItem() {
+        this.open();
+        this.highlightedItemIndex = (this.highlightedItemIndex + 1) % this.items.length;
+    }
+    /**
+     * Highlights the item before the one that is currently highlighted.
+     *
+     * @internal
+     */
+    highlightPreviousItem() {
+        this.open();
+        this.highlightedItemIndex =
+            this.highlightedItemIndex > 0 ? this.highlightedItemIndex - 1 : this.items.length - 1;
+    }
+    /**
+     * Highlights the first of the provided items.
+     *
+     * @internal
+     */
+    highlightFirstItem() {
+        this.highlightedItemIndex = 0;
+    }
+    /**
+     * Highlights the last of the provided items.
+     *
+     * @internal
+     */
+    highlightLastItem() {
+        this.highlightedItemIndex = this.items.length - 1;
+    }
+    /**
+     * Updates the variable that is used to search in the filters.
+     *
+     * @param event - The event coming from the user typing.
+     * @internal
+     */
+    updateSearchBuffer(event) {
+        if (/^\w$/.test(event.key)) {
+            const key = event.key;
+            this.searchBuffer += key;
+            this.restartResetSearchTimeout();
+        }
+    }
+    /**
+     * Highlights the item that matches the search buffer. To do so it checks the list buttons
+     * text content. It highlights items folowing this priority:
+     * - If an element is already highlighted, it starts searching from that element.
+     * - If no element is found starting from the previously highlighted, it returns the first one.
+     * - If no element is found matching the search query it highlights the first element.
+     *
+     * @param search - The search string to find in the HTML.
+     * @internal
+     */
+    highlightMatchingItem(search) {
+        if (search) {
+            const normalizedSearch = normalizeString(search);
+            const matchingIndices = this.$refs.itemButtons.reduce((matchingIndices, button, index) => {
+                const safeButtonWordCharacters = button.textContent.replace(/[^\w]/g, '');
+                const normalizedButtonText = normalizeString(safeButtonWordCharacters);
+                if (normalizedButtonText.startsWith(normalizedSearch)) {
+                    matchingIndices.push(index);
+                }
+                return matchingIndices;
+            }, []);
+            this.highlightedItemIndex =
+                // First matching item starting to search from the current highlighted element
+                matchingIndices.find(index => index >= this.highlightedItemIndex) ??
+                    // First matching item
+                    matchingIndices[0] ??
+                    // First item
+                    0;
+        }
+    }
+    /**
+     * Resets the search buffer.
+     *
+     * @internal
+     */
+    resetSearch() {
+        this.searchBuffer = '';
+    }
+    /** Updates the debounced function to reset the search.
+     *
+     * @param searchTimeoutMs - The new milliseconds that have to pass without typing before
+     * resetting the search.
+     * @internal
+     */
+    updateSearchTimeout(searchTimeoutMs) {
+        // eslint-disable-next-line @typescript-eslint/unbound-method
+        this.restartResetSearchTimeout = debounce(this.resetSearch, searchTimeoutMs);
+    }
+    /**
+     * Focuses the DOM element which matches the `highlightedItemIndex`.
+     *
+     * @param highlightedItemIndex - The index of the HTML element to focus.
+     * @internal
+     */
+    focusHighlightedItem(highlightedItemIndex) {
+        this.$nextTick(() => {
+            if (this.$refs.itemButtons && isInRange(highlightedItemIndex, [0, this.items.length - 1])) {
+                const newItem = this.$refs.itemButtons[this.highlightedItemIndex];
+                newItem.focus();
+            }
+        });
+    }
+    /**
+     * When the dropdown is open it sets the focused element to the one that is selected.
+     *
+     * @param isOpen - True if the dropdown is open, false otherwise.
+     * @internal
+     */
+    updateHighlightedItem(isOpen) {
+        if (isOpen) {
+            this.highlightedItemIndex = this.value === null ? 0 : this.items.indexOf(this.value);
+        }
+        else {
+            this.highlightedItemIndex = -1;
+        }
+    }
+    /**
+     * Adds and removes listeners to close the dropdown when it loses the focus.
+     *
+     * @param isOpen - True if the dropdown is open, false otherwise.
+     * @internal
+     */
+    syncCloseListeners(isOpen) {
+        /*
+         * Because there is an issue with Firefox in macOS and Safari that doesn't focus the target
+         * element of the `mousedown` events, the `focusout` event `relatedTarget` property can't be
+         * used to detect whether or not the user has blurred the dropdown. The hack here is to use
+         * document listeners that have the side effect of losing the focus.
+         */
+        if (isOpen) {
+            this.addDocumentCloseListeners();
+        }
+        else {
+            this.removeDocumentCloseListeners();
+        }
+    }
+    /**
+     * Adds listeners to the document element to detect if the focus has moved out from the
+     * dropdown.
+     *
+     * @internal
+     */
+    addDocumentCloseListeners() {
+        /* eslint-disable @typescript-eslint/unbound-method */
+        document.addEventListener('mousedown', this.closeIfEventIsOutOfDropdown);
+        document.addEventListener('touchstart', this.closeIfEventIsOutOfDropdown);
+        document.addEventListener('focusin', this.closeIfEventIsOutOfDropdown);
+        /* eslint-enable @typescript-eslint/unbound-method */
+    }
+    /**
+     * Removes the listeners of the document element to detect if the focus has moved out from the
+     * dropdown.
+     *
+     * @internal
+     */
+    removeDocumentCloseListeners() {
+        /* eslint-disable @typescript-eslint/unbound-method */
+        document.removeEventListener('mousedown', this.closeIfEventIsOutOfDropdown);
+        document.removeEventListener('touchstart', this.closeIfEventIsOutOfDropdown);
+        document.removeEventListener('focusin', this.closeIfEventIsOutOfDropdown);
+        /* eslint-enable @typescript-eslint/unbound-method */
+    }
+    /**
+     * Closes the dropdown if the passed event has happened on an element out of the dropdown.
+     *
+     * @param event - The event to check if it has happen out of the dropdown component.
+     */
+    closeIfEventIsOutOfDropdown(event) {
+        if (!this.$el.contains(event.target)) {
+            this.close();
+        }
+    }
+};
+__decorate([
+    Prop({ required: true })
+], BaseDropdown.prototype, "items", void 0);
+__decorate([
+    Prop({ required: true })
+], BaseDropdown.prototype, "value", void 0);
+__decorate([
+    Prop({ default: 'NoElement' })
+], BaseDropdown.prototype, "animation", void 0);
+__decorate([
+    Prop({ default: 1000 })
+], BaseDropdown.prototype, "searchTimeoutMs", void 0);
+__decorate([
+    Watch('searchBuffer')
+], BaseDropdown.prototype, "highlightMatchingItem", null);
+__decorate([
+    Watch('searchTimeoutMs', { immediate: true })
+], BaseDropdown.prototype, "updateSearchTimeout", null);
+__decorate([
+    Watch('highlightedItemIndex', { immediate: true })
+], BaseDropdown.prototype, "focusHighlightedItem", null);
+__decorate([
+    Watch('isOpen')
+], BaseDropdown.prototype, "updateHighlightedItem", null);
+__decorate([
+    Watch('isOpen')
+], BaseDropdown.prototype, "syncCloseListeners", null);
+BaseDropdown = __decorate([
+    Component({
+        components: {
+            NoElement
+        },
+        model: {
+            event: 'change'
+        }
+    })
+], BaseDropdown);
+var script = BaseDropdown;
+
+export { script as default };
+//# sourceMappingURL=base-dropdown.vue_rollup-plugin-vue_script.vue.js.map