@empathyco/x-components 3.0.0-alpha.52 → 3.0.0-alpha.53

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

@@ -0,0 +1,34 @@
+import { __decorate } from 'tslib';
+import Vue from 'vue';
+import { Prop, Component } from 'vue-property-decorator';
+
+/**
+ * An auto progress bar component.
+ *
+ * @public
+ */
+let AutoProgressBar = class AutoProgressBar extends Vue {
+    /**
+     * Computed property to calculate the animation's duration.
+     *
+     * @returns The CSS styles of the animation.
+     *
+     * @internal
+     */
+    get cssStyles() {
+        return { animationDuration: `${this.durationInSeconds}s` };
+    }
+};
+__decorate([
+    Prop({ default: true })
+], AutoProgressBar.prototype, "isLoading", void 0);
+__decorate([
+    Prop({ default: 5 })
+], AutoProgressBar.prototype, "durationInSeconds", void 0);
+AutoProgressBar = __decorate([
+    Component
+], AutoProgressBar);
+var script = AutoProgressBar;
+
+export { script as default };
+//# sourceMappingURL=auto-progress-bar.vue_rollup-plugin-vue_script.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"auto-progress-bar.vue_rollup-plugin-vue_script.vue.js","sources":["../../../src/components/auto-progress-bar.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\n\n/**\n * An auto progress bar component.\n *\n * @public\n */\n@Component\nexport default class AutoProgressBar extends Vue {\n  /**\n   * A boolean flag indicating if the bar is loading.\n   *\n   * @public\n   */\n  @Prop({ default: true })\n  public isLoading!: boolean;\n\n  /**\n   * The duration in seconds of the progress bar.\n   *\n   * @public\n   */\n  @Prop({ default: 5 })\n  public durationInSeconds!: number;\n\n  /**\n   * Computed property to calculate the animation's duration.\n   *\n   * @returns The CSS styles of the animation.\n   *\n   * @internal\n   */\n  protected get cssStyles(): Partial<CSSStyleDeclaration> {\n    return { animationDuration: `${this.durationInSeconds}s` };\n  }\n}\n"],"names":[],"mappings":";;;;AAUA;;;;;AAMA,IAAqB,eAAe,GAApC,MAAqB,eAAgB,SAAQ,GAAG;;;;;;;;IAwB9C,IAAc,SAAS;QACrB,OAAO,EAAE,iBAAiB,EAAE,GAAG,IAAI,CAAC,iBAAiB,GAAG,EAAE,CAAC;KAC5D;CACF,CAAA;AApBC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDACG;AAQ3B;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;0DACa;AAff,eAAe;IADnC,SAAS;GACW,eAAe,CA2BnC;aA3BoB,eAAe;;;;"}

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

@@ -1,9 +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 __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 () {
@@ -23,7 +23,8 @@ var __vue_render__ = function () {
               !$event.type.indexOf("key") &&
               _vm._k($event.keyCode, "down", 40, $event.key, [
                 "Down",
-                "ArrowDown" ])
+                "ArrowDown",
+              ])
             ) {
               return null
             }
@@ -39,7 +40,8 @@ var __vue_render__ = function () {
             }
             $event.preventDefault();
             return _vm.highlightPreviousItem.apply(null, arguments)
-          } ],
+          },
+        ],
       },
     },
     [
@@ -55,10 +57,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
               }
@@ -83,7 +87,8 @@ var __vue_render__ = function () {
                   return [_vm._v(_vm._s(_vm.value))]
                 },
                 { item: _vm.value }
-              ) ],
+              ),
+        ],
         2
       ),
       _vm._v(" "),
@@ -119,7 +124,8 @@ var __vue_render__ = function () {
                         !$event.type.indexOf("key") &&
                         _vm._k($event.keyCode, "esc", 27, $event.key, [
                           "Esc",
-                          "Escape" ])
+                          "Escape",
+                        ])
                       ) {
                         return null
                       }
@@ -139,7 +145,8 @@ var __vue_render__ = function () {
                         return null
                       }
                       return _vm.highlightFirstItem.apply(null, arguments)
-                    } ],
+                    },
+                  ],
                 },
               },
               _vm._l(_vm.items, function (item, index) {
@@ -179,21 +186,26 @@ var __vue_render__ = 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
   )
 };
@@ -201,24 +213,24 @@ var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
 
   /* style */
-  var __vue_inject_styles__ = function (inject) {
-    if (!inject) { return }
+  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-12a3cc4e";
+  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__,
@@ -231,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        {{ 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      @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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}