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

package/js/components/{base-dropdown.vue_rollup-plugin-vue=script.js → base-dropdown.vue_rollup-plugin-vue_script.vue.js}

@@ -1,9 +1,9 @@
-import { __extends, __decorate } from 'tslib';
-import Vue from 'vue';
+import { __decorate } from 'tslib';
 import { Prop, Watch, Component } from 'vue-property-decorator';
-import { debounce } from '../utils/debounce.js';
+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';
 
 /**
@@ -12,156 +12,145 @@ import { NoElement } from './no-element.js';
  *
  * @public
  */
-var BaseDropdown = /** @class */ (function (_super) {
-    __extends(BaseDropdown, _super);
-    function BaseDropdown() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
+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;
+        this.isOpen = false;
         /**
          * Index of the element that has the focus in the list. -1 means no element has focus.
          *
          * @internal
          */
-        _this.highlightedItemIndex = -1;
+        this.highlightedItemIndex = -1;
         /**
          * String to search for the first element that starts with it.
          *
          * @internal
          */
-        _this.searchBuffer = '';
-        return _this;
+        this.searchBuffer = '';
     }
-    Object.defineProperty(BaseDropdown.prototype, "dropdownCSSClasses", {
-        /**
-         * 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: function () {
+    /**
+     * 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--is-open': this.isOpen
+                'x-dropdown__item--is-selected': this.value === item,
+                'x-dropdown__item--is-highlighted': this.highlightedItemIndex === index
             };
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(BaseDropdown.prototype, "itemsCSSClasses", {
-        /**
-         * 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: function () {
-            var _this = this;
-            return this.items.map(function (item, index) {
-                return {
-                    'x-dropdown__item--is-selected': _this.value === item,
-                    'x-dropdown__item--is-highlighted': _this.highlightedItemIndex === index
-                };
-            });
-        },
-        enumerable: false,
-        configurable: true
-    });
+        });
+    }
     /**
      * If the dropdown is destroyed before removing the document listeners, it ensures that they
      * are removed too.
      *
      * @internal
      */
-    BaseDropdown.prototype.beforeDestroy = function () {
+    beforeDestroy() {
         this.removeDocumentCloseListeners();
-    };
+    }
     /**
      * Opens the dropdown.
      *
      * @internal
      */
-    BaseDropdown.prototype.open = function () {
+    open() {
         this.isOpen = true;
-    };
+    }
     /**
      * Closes the dropdown.
      *
      * @internal
      */
-    BaseDropdown.prototype.close = function () {
+    close() {
         this.isOpen = false;
-    };
+    }
     /**
      * If the dropdown is opened it closes it. If it is closed it opens it.
      *
      * @internal
      */
-    BaseDropdown.prototype.toggle = function () {
+    toggle() {
         this.isOpen = !this.isOpen;
-    };
+    }
     /**
      * Emits the event that the selected item has changed.
      *
      * @param item - The new selected item.
      * @internal
      */
-    BaseDropdown.prototype.emitSelectedItemChanged = function (item) {
+    emitSelectedItemChanged(item) {
         this.$emit('change', item);
         this.close();
-    };
+    }
     /**
      * Highlights the item after the one that is currently highlighted.
      *
      * @internal
      */
-    BaseDropdown.prototype.highlightNextItem = function () {
+    highlightNextItem() {
         this.open();
         this.highlightedItemIndex = (this.highlightedItemIndex + 1) % this.items.length;
-    };
+    }
     /**
      * Highlights the item before the one that is currently highlighted.
      *
      * @internal
      */
-    BaseDropdown.prototype.highlightPreviousItem = function () {
+    highlightPreviousItem() {
         this.open();
         this.highlightedItemIndex =
             this.highlightedItemIndex > 0 ? this.highlightedItemIndex - 1 : this.items.length - 1;
-    };
+    }
     /**
      * Highlights the first of the provided items.
      *
      * @internal
      */
-    BaseDropdown.prototype.highlightFirstItem = function () {
+    highlightFirstItem() {
         this.highlightedItemIndex = 0;
-    };
+    }
     /**
      * Highlights the last of the provided items.
      *
      * @internal
      */
-    BaseDropdown.prototype.highlightLastItem = function () {
+    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
      */
-    BaseDropdown.prototype.updateSearchBuffer = function (event) {
+    updateSearchBuffer(event) {
         if (/^\w$/.test(event.key)) {
-            var key = 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:
@@ -172,82 +161,79 @@ var BaseDropdown = /** @class */ (function (_super) {
      * @param search - The search string to find in the HTML.
      * @internal
      */
-    BaseDropdown.prototype.highlightMatchingItem = function (search) {
-        var _this = this;
-        var _a, _b;
+    highlightMatchingItem(search) {
         if (search) {
-            var normalizedSearch_1 = normalizeString(search);
-            var matchingIndices = this.$refs.itemButtons.reduce(function (matchingIndices, button, index) {
-                var safeButtonWordCharacters = button.textContent.replace(/[^\w]/g, '');
-                var normalizedButtonText = normalizeString(safeButtonWordCharacters);
-                if (normalizedButtonText.startsWith(normalizedSearch_1)) {
+            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
-                (_b = (_a = matchingIndices.find(function (index) { return index >= _this.highlightedItemIndex; })) !== null && _a !== void 0 ? _a : 
-                // First matching item
-                matchingIndices[0]) !== null && _b !== void 0 ? _b : 
-                // First item
-                0;
+                matchingIndices.find(index => index >= this.highlightedItemIndex) ??
+                    // First matching item
+                    matchingIndices[0] ??
+                    // First item
+                    0;
         }
-    };
+    }
     /**
      * Resets the search buffer.
      *
      * @internal
      */
-    BaseDropdown.prototype.resetSearch = function () {
+    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
      */
-    BaseDropdown.prototype.updateSearchTimeout = function (searchTimeoutMs) {
+    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
      */
-    BaseDropdown.prototype.focusHighlightedItem = function (highlightedItemIndex) {
-        var _this = this;
-        this.$nextTick(function () {
-            if (_this.$refs.itemButtons && isInRange(highlightedItemIndex, [0, _this.items.length - 1])) {
-                var newItem = _this.$refs.itemButtons[_this.highlightedItemIndex];
+    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
      */
-    BaseDropdown.prototype.updateHighlightedItem = function (isOpen) {
+    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
      */
-    BaseDropdown.prototype.syncCloseListeners = function (isOpen) {
+    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
@@ -260,82 +246,82 @@ var BaseDropdown = /** @class */ (function (_super) {
         else {
             this.removeDocumentCloseListeners();
         }
-    };
+    }
     /**
      * Adds listeners to the document element to detect if the focus has moved out from the
      * dropdown.
      *
      * @internal
      */
-    BaseDropdown.prototype.addDocumentCloseListeners = function () {
+    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
      */
-    BaseDropdown.prototype.removeDocumentCloseListeners = function () {
+    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.
      */
-    BaseDropdown.prototype.closeIfEventIsOutOfDropdown = function (event) {
+    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: NoElement
-            },
-            model: {
-                event: 'change'
-            }
-        })
-    ], BaseDropdown);
-    return BaseDropdown;
-}(Vue));
+    }
+};
+__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 default BaseDropdown;
-//# sourceMappingURL=base-dropdown.vue_rollup-plugin-vue=script.js.map
+export { script as default };
+//# sourceMappingURL=base-dropdown.vue_rollup-plugin-vue_script.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"base-dropdown.vue_rollup-plugin-vue_script.vue.js","sources":["../../../src/components/base-dropdown.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { Identifiable } from '@empathyco/x-types';\nimport { Component, Prop, Watch } from 'vue-property-decorator';\nimport Vue from 'vue';\nimport { normalizeString } from '../utils/normalize';\nimport { isInRange } from '../utils/number';\nimport { debounce } from '../utils/debounce';\nimport { VueCSSClasses } from '../utils/types';\nimport { NoElement } from './no-element';\n\ntype 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})\nexport 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"],"names":[],"mappings":"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"}

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

@@ -1,8 +1,8 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-import script from './base-event-button.vue_rollup-plugin-vue=script.js';
+import script from './base-event-button.vue_rollup-plugin-vue_script.vue.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
 
 /* script */
-var __vue_script__ = script;
+const __vue_script__ = script;
 
 /* template */
 var __vue_render__ = function () {
@@ -23,13 +23,13 @@ var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
 
   /* style */
-  var __vue_inject_styles__ = undefined;
+  const __vue_inject_styles__ = undefined;
   /* scoped */
-  var __vue_scope_id__ = undefined;
+  const __vue_scope_id__ = undefined;
   /* module identifier */
-  var __vue_module_identifier__ = undefined;
+  const __vue_module_identifier__ = undefined;
   /* functional template */
-  var __vue_is_functional_template__ = false;
+  const __vue_is_functional_template__ = false;
   /* style inject */
   
   /* style inject SSR */
@@ -38,7 +38,7 @@ __vue_render__._withStripped = true;
   
 
   
-  var __vue_component__ = /*#__PURE__*/__vue_normalize__(
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
     { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
     __vue_inject_styles__,
     __vue_script__,
@@ -51,5 +51,5 @@ __vue_render__._withStripped = true;
     undefined
   );
 
-export default __vue_component__;
+export { __vue_component__ as default };
 //# sourceMappingURL=base-event-button.vue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"base-event-button.vue.js","sources":["../../../src/components/base-event-button.vue"],"sourcesContent":["<template>\n  <button v-on=\"$listeners\" @click=\"emitEvents\" data-test=\"event-button\">\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { XEvent, XEventsTypes } from '../wiring';\n\n  /**\n   * Component to be reused that renders a `<button>` with the logic of emitting events to the bus\n   * on click. The events are passed as an object to prop {@link XEventsTypes | events}.\n   * The keys are the event name and the values are the payload of each event. All events are\n   * emitted with its respective payload. If any event doesn't need payload a `undefined` must be\n   * passed as value.\n   *\n   * @public\n   */\n  @Component\n  export default class BaseEventButton extends Vue {\n    /**\n     * (Required) A object where the keys are the {@link XEvent} and the values\n     * are the payload of each event.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected events!: Partial<XEventsTypes>;\n\n    protected emitEvents(): void {\n      Object.entries(this.events).forEach(([event, payload]) => {\n        this.$x.emit(event as XEvent, payload, { target: this.$el as HTMLElement });\n      });\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThe event prop is required. It will render a <button></button> that emits the event passed as prop\nwith the value as payload on click:\n\n```vue\n<BaseEventButton :events=\"{ myEvent: payload }\" />\n```\n\nIf the event doesn't need payload then `undefined` must be passed:\n\n```vue\n<BaseEventButton :events=\"{ myEvent: undefined }\" />\n```\n\nIt can emit multiple events at the same time:\n\n```vue\n<BaseEventButton :events=\"{ myFirstEvent: payload1, mySecondEvent: payload2 }\" />\n```\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-event-button.vue.js","sources":["../../../src/components/base-event-button.vue"],"sourcesContent":["<template>\n  <button v-on=\"$listeners\" @click=\"emitEvents\" data-test=\"event-button\">\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { XEvent, XEventsTypes } from '../wiring';\n\n  /**\n   * Component to be reused that renders a `<button>` with the logic of emitting events to the bus\n   * on click. The events are passed as an object to prop {@link XEventsTypes | events}.\n   * The keys are the event name and the values are the payload of each event. All events are\n   * emitted with its respective payload. If any event doesn't need payload a `undefined` must be\n   * passed as value.\n   *\n   * @public\n   */\n  @Component\n  export default class BaseEventButton extends Vue {\n    /**\n     * (Required) A object where the keys are the {@link XEvent} and the values\n     * are the payload of each event.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected events!: Partial<XEventsTypes>;\n\n    protected emitEvents(): void {\n      Object.entries(this.events).forEach(([event, payload]) => {\n        this.$x.emit(event as XEvent, payload, { target: this.$el as HTMLElement });\n      });\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThe event prop is required. It will render a <button></button> that emits the event passed as prop\nwith the value as payload on click:\n\n```vue\n<BaseEventButton :events=\"{ myEvent: payload }\" />\n```\n\nIf the event doesn't need payload then `undefined` must be passed:\n\n```vue\n<BaseEventButton :events=\"{ myEvent: undefined }\" />\n```\n\nIt can emit multiple events at the same time:\n\n```vue\n<BaseEventButton :events=\"{ myFirstEvent: payload1, mySecondEvent: payload2 }\" />\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/base-event-button.vue_rollup-plugin-vue_script.vue.js

@@ -0,0 +1,30 @@
+import { __decorate } from 'tslib';
+import Vue from 'vue';
+import { Prop, Component } from 'vue-property-decorator';
+
+/**
+ * Component to be reused that renders a `<button>` with the logic of emitting events to the bus
+ * on click. The events are passed as an object to prop {@link XEventsTypes | events}.
+ * The keys are the event name and the values are the payload of each event. All events are
+ * emitted with its respective payload. If any event doesn't need payload a `undefined` must be
+ * passed as value.
+ *
+ * @public
+ */
+let BaseEventButton = class BaseEventButton extends Vue {
+    emitEvents() {
+        Object.entries(this.events).forEach(([event, payload]) => {
+            this.$x.emit(event, payload, { target: this.$el });
+        });
+    }
+};
+__decorate([
+    Prop({ required: true })
+], BaseEventButton.prototype, "events", void 0);
+BaseEventButton = __decorate([
+    Component
+], BaseEventButton);
+var script = BaseEventButton;
+
+export { script as default };
+//# sourceMappingURL=base-event-button.vue_rollup-plugin-vue_script.vue.js.map

package/js/components/base-event-button.vue_rollup-plugin-vue_script.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-event-button.vue_rollup-plugin-vue_script.vue.js","sources":["../../../src/components/base-event-button.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { XEvent, XEventsTypes } from '../wiring';\n\n/**\n * Component to be reused that renders a `<button>` with the logic of emitting events to the bus\n * on click. The events are passed as an object to prop {@link XEventsTypes | events}.\n * The keys are the event name and the values are the payload of each event. All events are\n * emitted with its respective payload. If any event doesn't need payload a `undefined` must be\n * passed as value.\n *\n * @public\n */\n@Component\nexport default class BaseEventButton extends Vue {\n  /**\n   * (Required) A object where the keys are the {@link XEvent} and the values\n   * are the payload of each event.\n   *\n   * @public\n   */\n  @Prop({ required: true })\n  protected events!: Partial<XEventsTypes>;\n\n  protected emitEvents(): void {\n    Object.entries(this.events).forEach(([event, payload]) => {\n      this.$x.emit(event as XEvent, payload, { target: this.$el as HTMLElement });\n    });\n  }\n}\n"],"names":[],"mappings":";;;;AAYA;;;;;;;;;AAUA,IAAqB,eAAe,GAApC,MAAqB,eAAgB,SAAQ,GAAG;IAUpC,UAAU;QAClB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,EAAE,OAAO,CAAC;YACnD,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAe,EAAE,OAAO,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,GAAkB,EAAE,CAAC,CAAC;SAC7E,CAAC,CAAC;KACJ;CACF,CAAA;AAPC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;+CACgB;AARtB,eAAe;IADnC,SAAS;GACW,eAAe,CAenC;aAfoB,eAAe;;;;"}

package/js/components/base-grid.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-grid.vue_rollup-plugin-vue=script.js';
+import script from './base-grid.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 () {
@@ -39,10 +39,12 @@ var __vue_render__ = function () {
                   return [
                     _vm._v(
                       _vm._s(item.name || item.modelName || item.id || item)
-                    ) ]
+                    ),
+                  ]
                 },
                 { item: item }
-              ) ],
+              ),
+        ],
         2
       )
     }),
@@ -53,24 +55,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-22d07af6_0", { source: ".x-base-grid[data-v-22d07af6] {\n  padding: var(--x-size-padding-grid, 0);\n  margin: 0;\n  display: grid;\n  grid-auto-flow: dense;\n  list-style: none;\n}\n.x-base-grid__banner[data-v-22d07af6] {\n  grid-column-start: 1;\n  grid-column-end: -1;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-22d07af6";
+  const __vue_scope_id__ = "data-v-22d07af6";
   /* 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__,
@@ -83,5 +85,5 @@ __vue_render__._withStripped = true;
     undefined
   );
 
-export default __vue_component__;
+export { __vue_component__ as default };
 //# sourceMappingURL=base-grid.vue.js.map