@empathyco/x-components 3.0.0-alpha.214 → 3.0.0-alpha.216

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-alpha.216](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.215...@empathyco/x-components@3.0.0-alpha.216) (2022-11-08)
+
+**Note:** Version bump only for package @empathyco/x-components
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [3.0.0-alpha.215](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.214...@empathyco/x-components@3.0.0-alpha.215) (2022-11-04)
+
+### Features
+
+- wai-aria for BaseEventButton based components (#816)
+  ([3dfd29e](https://github.com/empathyco/x/commit/3dfd29e8f8cc57c5caeeda609ccd4903434bd74a)),
+  closes [EX-7204](https://searchbroker.atlassian.net/browse/EX-7204)
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 ## [3.0.0-alpha.214](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.213...@empathyco/x-components@3.0.0-alpha.214) (2022-11-03)
 
 ### Features

package/design-system/full-theme.css

@@ -6540,29 +6540,6 @@
   -webkit-box-orient: vertical !important;
   -webkit-line-clamp: 6 !important;
 }
-.x-line-height--none {
-  line-height: 1 !important;
-}
-
-.x-line-height--tight {
-  line-height: 1.25 !important;
-}
-
-.x-line-height--snug {
-  line-height: 1.375 !important;
-}
-
-.x-line-height--normal {
-  line-height: 1.5 !important;
-}
-
-.x-line-height--relaxed {
-  line-height: 1.625 !important;
-}
-
-.x-line-height--loose {
-  line-height: 2 !important;
-}
 .x-margin--auto {
   margin: auto !important;
 }
@@ -7025,6 +7002,29 @@
 [dir="rtl"] .x-margin--left-20 {
   margin-right: var(--x-size-base-20) !important;
 }
+.x-line-height--none {
+  line-height: 1 !important;
+}
+
+.x-line-height--tight {
+  line-height: 1.25 !important;
+}
+
+.x-line-height--snug {
+  line-height: 1.375 !important;
+}
+
+.x-line-height--normal {
+  line-height: 1.5 !important;
+}
+
+.x-line-height--relaxed {
+  line-height: 1.625 !important;
+}
+
+.x-line-height--loose {
+  line-height: 2 !important;
+}
 .x-padding--00 {
   padding: 0 !important;
 }

package/docs/API-reference/api/x-components.removehistoryquery.removehistoryqueryevent.md

@@ -14,5 +14,5 @@ protected get removeHistoryQueryEvent(): Partial<XEventsTypes>;
 
 ## Remarks
 
-\* [HistoryQueriesXEvents.UserPressedRemoveHistoryQuery](./x-components.historyqueriesxevents.userpressedremovehistoryquery.md)<!-- -->: historyQuery
+[HistoryQueriesXEvents.UserPressedRemoveHistoryQuery](./x-components.historyqueriesxevents.userpressedremovehistoryquery.md)<!-- -->: historyQuery
 

package/js/components/column-picker/base-column-picker-list.vue.js

@@ -36,8 +36,9 @@ var __vue_render__ = function () {
               class: _vm.buttonClass,
               attrs: {
                 "data-test": "column-picker-button",
-                "aria-selected": isSelected.toString(),
+                "aria-pressed": isSelected,
                 events: events,
+                "aria-label": column + " columns",
               },
             },
             [
@@ -65,7 +66,7 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = undefined;
   /* scoped */
-  const __vue_scope_id__ = "data-v-5eadffbc";
+  const __vue_scope_id__ = "data-v-566dd3a8";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */

package/js/components/column-picker/base-column-picker-list.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-column-picker-list.vue.js","sources":["../../../../src/components/column-picker/base-column-picker-list.vue"],"sourcesContent":["<template>\n  <ul class=\"x-option-list x-column-picker-list\" data-test=\"column-picker-list\">\n    <li\n      v-for=\"{ column, cssClasses, events, isSelected } in columnsWithCssClasses\"\n      :key=\"column\"\n      :class=\"cssClasses\"\n      class=\"x-option-list__item x-column-picker-list__item\"\n      data-test=\"column-picker-item\"\n    >\n      <BaseEventButton\n        class=\"x-button column-picker-item__button\"\n        :class=\"buttonClass\"\n        data-test=\"column-picker-button\"\n        :aria-selected=\"isSelected.toString()\"\n        :events=\"events\"\n      >\n        <!--\n          @slot Customized Column Picker Button content. Specifying a slot with the column value\n          will result in the column using that slot composition to render.\n            @binding {number} column - Columns Number to pick.\n            @binding {boolean} isSelected - True if the columns number are the chosen value.\n        -->\n        <slot v-bind=\"{ column, isSelected }\">\n          {{ column }}\n        </slot>\n      </BaseEventButton>\n    </li>\n  </ul>\n</template>\n\n<script lang=\"ts\">\n  import { mixins } from 'vue-class-component';\n  import { Component } from 'vue-property-decorator';\n  import { VueCSSClasses } from '../../utils/types';\n  import { XEventsTypes } from '../../wiring';\n  import BaseEventButton from '../base-event-button.vue';\n  import { dynamicPropsMixin } from '../dynamic-props.mixin';\n  import ColumnPickerMixin from './column-picker.mixin';\n\n  interface ColumnPickerItem {\n    column: number;\n    cssClasses: VueCSSClasses;\n    events: Partial<XEventsTypes>;\n    isSelected: boolean;\n  }\n\n  /**\n   * Column picker list component renders a list of buttons to choose the columns number.\n   *\n   * Additionally, this component exposes the following props to modify the classes of the\n   * elements: `buttonClass`.\n   *\n   * @remarks It extends {@link ColumnPickerMixin}.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseEventButton }\n  })\n  export default class BaseColumnPickerList extends mixins(\n    ColumnPickerMixin,\n    dynamicPropsMixin(['buttonClass'])\n  ) {\n    /**\n     * Maps the column to an object containing: the `column` and `CSS classes`.\n     *\n     * @returns An array of objects containing the column number and CSS classes.\n     *\n     * @internal\n     */\n    protected get columnsWithCssClasses(): ColumnPickerItem[] {\n      return this.columns.map(column => ({\n        column,\n        cssClasses: [\n          `x-column-picker-list__item--${column}-cols`,\n          {\n            'x-column-picker-list__item--is-selected': this.selectedColumns === column,\n            'x-option-list__item--is-selected': this.selectedColumns === column\n          }\n        ],\n        isSelected: this.selectedColumns === column,\n        events: {\n          UserClickedColumnPicker: column,\n          ColumnsNumberProvided: column\n        }\n      }));\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-column-picker-list {\n    display: flex;\n    list-style-type: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a list of elements in different slots depending on the columns prop. Each\nelement will emit the needed events to sync other instances of columns pickers, or grids with the\nnumber of columns that it is being selected when it is clicked.\n\n### Default usage\n\nIt is required to send the columns prop.\n\n```vue\n<template>\n  <BaseColumnPickerList :columns=\"columns\" />\n</template>\n<script>\n  import { BaseColumnPickerList } from '@empathyco/xcomponents';\n\n  export default {\n    components: {\n      BaseColumnPickerList\n    },\n    data() {\n      return { columns: [2, 4, 6] };\n    }\n  };\n</script>\n```\n\n#### Using v-model\n\nIt is possible to do two way binding in order to synchronize the value with the parents. It will be\nupdated if it changed the value or if the parent changes it.\n\n```vue\n<template>\n  <BaseColumnPickerList :columns=\"columns\" v-model=\"selectedColumns\" />\n</template>\n<script>\n  import { BaseColumnPickerList } from '@empathyco/xcomponents';\n\n  export default {\n    components: {\n      BaseColumnPickerList\n    },\n    data() {\n      return { columns: [2, 4, 6], selectedColumns: 4 };\n    }\n  };\n</script>\n```\n\n### Customized usage\n\n#### Overriding the slots\n\nIt is possible to override the column picker button content.\n\n```vue\n<template>\n  <BaseColumnPickerList :columns=\"columns\" #default=\"{ column, isSelected }\">\n    <span>{{ column }} {{ isSelected ? '🟢' : '' }}</span>\n  </BaseColumnPickerList>\n</template>\n<script>\n  import { BaseColumnPickerList } from '@empathyco/xcomponents';\n\n  export default {\n    components: {\n      BaseColumnPickerList\n    },\n    data() {\n      return { columns: [2, 4, 6] };\n    }\n  };\n</script>\n```\n\n#### Customizing the buttons with classes\n\nThe `buttonClass` prop can be used to add classes to the buttons.\n\n```vue\n<template>\n  <BaseColumnPickerList :columns=\"columns\" buttonClass=\"x-button--round\" />\n</template>\n<script>\n  import { BaseColumnPickerList } from '@empathyco/xcomponents';\n\n  export default {\n    components: {\n      BaseColumnPickerList\n    },\n    data() {\n      return { columns: [2, 4, 6] };\n    }\n  };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserClickedColumnPicker`: the event is emitted after the user clicks an item. The event payload\n  is the number of columns that the clicked item represents.\n- `ColumnsNumberProvided`: the event is emitted on component mount. The event payload is the current\n  `selectedColumns` value.\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-column-picker-list.vue.js","sources":["../../../../src/components/column-picker/base-column-picker-list.vue"],"sourcesContent":["<template>\n  <ul class=\"x-option-list x-column-picker-list\" data-test=\"column-picker-list\">\n    <li\n      v-for=\"{ column, cssClasses, events, isSelected } in columnsWithCssClasses\"\n      :key=\"column\"\n      :class=\"cssClasses\"\n      class=\"x-option-list__item x-column-picker-list__item\"\n      data-test=\"column-picker-item\"\n    >\n      <BaseEventButton\n        class=\"x-button column-picker-item__button\"\n        :class=\"buttonClass\"\n        data-test=\"column-picker-button\"\n        :aria-pressed=\"isSelected\"\n        :events=\"events\"\n        :aria-label=\"`${column} columns`\"\n      >\n        <!--\n          @slot Customized Column Picker Button content. Specifying a slot with the column value\n          will result in the column using that slot composition to render.\n            @binding {number} column - Columns Number to pick.\n            @binding {boolean} isSelected - True if the columns number are the chosen value.\n        -->\n        <slot v-bind=\"{ column, isSelected }\">\n          {{ column }}\n        </slot>\n      </BaseEventButton>\n    </li>\n  </ul>\n</template>\n\n<script lang=\"ts\">\n  import { mixins } from 'vue-class-component';\n  import { Component } from 'vue-property-decorator';\n  import { VueCSSClasses } from '../../utils/types';\n  import { XEventsTypes } from '../../wiring';\n  import BaseEventButton from '../base-event-button.vue';\n  import { dynamicPropsMixin } from '../dynamic-props.mixin';\n  import ColumnPickerMixin from './column-picker.mixin';\n\n  interface ColumnPickerItem {\n    column: number;\n    cssClasses: VueCSSClasses;\n    events: Partial<XEventsTypes>;\n    isSelected: boolean;\n  }\n\n  /**\n   * Column picker list component renders a list of buttons to choose the columns number.\n   *\n   * Additionally, this component exposes the following props to modify the classes of the\n   * elements: `buttonClass`.\n   *\n   * @remarks It extends {@link ColumnPickerMixin}.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseEventButton }\n  })\n  export default class BaseColumnPickerList extends mixins(\n    ColumnPickerMixin,\n    dynamicPropsMixin(['buttonClass'])\n  ) {\n    /**\n     * Maps the column to an object containing: the `column` and `CSS classes`.\n     *\n     * @returns An array of objects containing the column number and CSS classes.\n     *\n     * @internal\n     */\n    protected get columnsWithCssClasses(): ColumnPickerItem[] {\n      return this.columns.map(column => ({\n        column,\n        cssClasses: [\n          `x-column-picker-list__item--${column}-cols`,\n          {\n            'x-column-picker-list__item--is-selected': this.selectedColumns === column,\n            'x-option-list__item--is-selected': this.selectedColumns === column\n          }\n        ],\n        isSelected: this.selectedColumns === column,\n        events: {\n          UserClickedColumnPicker: column,\n          ColumnsNumberProvided: column\n        }\n      }));\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-column-picker-list {\n    display: flex;\n    list-style-type: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a list of elements in different slots depending on the columns prop. Each\nelement will emit the needed events to sync other instances of columns pickers, or grids with the\nnumber of columns that it is being selected when it is clicked.\n\n### Default usage\n\nIt is required to send the columns prop.\n\n```vue\n<template>\n  <BaseColumnPickerList :columns=\"columns\" />\n</template>\n<script>\n  import { BaseColumnPickerList } from '@empathyco/xcomponents';\n\n  export default {\n    components: {\n      BaseColumnPickerList\n    },\n    data() {\n      return { columns: [2, 4, 6] };\n    }\n  };\n</script>\n```\n\n#### Using v-model\n\nIt is possible to do two way binding in order to synchronize the value with the parents. It will be\nupdated if it changed the value or if the parent changes it.\n\n```vue\n<template>\n  <BaseColumnPickerList :columns=\"columns\" v-model=\"selectedColumns\" />\n</template>\n<script>\n  import { BaseColumnPickerList } from '@empathyco/xcomponents';\n\n  export default {\n    components: {\n      BaseColumnPickerList\n    },\n    data() {\n      return { columns: [2, 4, 6], selectedColumns: 4 };\n    }\n  };\n</script>\n```\n\n### Customized usage\n\n#### Overriding the slots\n\nIt is possible to override the column picker button content.\n\n```vue\n<template>\n  <BaseColumnPickerList :columns=\"columns\" #default=\"{ column, isSelected }\">\n    <span>{{ column }} {{ isSelected ? '🟢' : '' }}</span>\n  </BaseColumnPickerList>\n</template>\n<script>\n  import { BaseColumnPickerList } from '@empathyco/xcomponents';\n\n  export default {\n    components: {\n      BaseColumnPickerList\n    },\n    data() {\n      return { columns: [2, 4, 6] };\n    }\n  };\n</script>\n```\n\n#### Customizing the buttons with classes\n\nThe `buttonClass` prop can be used to add classes to the buttons.\n\n```vue\n<template>\n  <BaseColumnPickerList :columns=\"columns\" buttonClass=\"x-button--round\" />\n</template>\n<script>\n  import { BaseColumnPickerList } from '@empathyco/xcomponents';\n\n  export default {\n    components: {\n      BaseColumnPickerList\n    },\n    data() {\n      return { columns: [2, 4, 6] };\n    }\n  };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserClickedColumnPicker`: the event is emitted after the user clicks an item. The event payload\n  is the number of columns that the clicked item represents.\n- `ColumnsNumberProvided`: the event is emitted on component mount. The event payload is the current\n  `selectedColumns` value.\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/column-picker/base-column-picker-list.vue_rollup-plugin-vue_script.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-column-picker-list.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/column-picker/base-column-picker-list.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\nimport { mixins } from 'vue-class-component';\nimport { Component } from 'vue-property-decorator';\nimport { VueCSSClasses } from '../../utils/types';\nimport { XEventsTypes } from '../../wiring';\nimport BaseEventButton from '../base-event-button.vue';\nimport { dynamicPropsMixin } from '../dynamic-props.mixin';\nimport ColumnPickerMixin from './column-picker.mixin';\n\ninterface ColumnPickerItem {\n  column: number;\n  cssClasses: VueCSSClasses;\n  events: Partial<XEventsTypes>;\n  isSelected: boolean;\n}\n\n/**\n * Column picker list component renders a list of buttons to choose the columns number.\n *\n * Additionally, this component exposes the following props to modify the classes of the\n * elements: `buttonClass`.\n *\n * @remarks It extends {@link ColumnPickerMixin}.\n *\n * @public\n */\n@Component({\n  components: { BaseEventButton }\n})\nexport default class BaseColumnPickerList extends mixins(\n  ColumnPickerMixin,\n  dynamicPropsMixin(['buttonClass'])\n) {\n  /**\n   * Maps the column to an object containing: the `column` and `CSS classes`.\n   *\n   * @returns An array of objects containing the column number and CSS classes.\n   *\n   * @internal\n   */\n  protected get columnsWithCssClasses(): ColumnPickerItem[] {\n    return this.columns.map(column => ({\n      column,\n      cssClasses: [\n        `x-column-picker-list__item--${column}-cols`,\n        {\n          'x-column-picker-list__item--is-selected': this.selectedColumns === column,\n          'x-option-list__item--is-selected': this.selectedColumns === column\n        }\n      ],\n      isSelected: this.selectedColumns === column,\n      events: {\n        UserClickedColumnPicker: column,\n        ColumnsNumberProvided: column\n      }\n    }));\n  }\n}\n"],"names":["BaseEventButton"],"mappings":";;;;;;;AA8CA;;;;;;;;;;AAaA,IAAqB,oBAAoB,GAAzC,MAAqB,oBAAqB,SAAQ,MAAM,CACtD,iBAAiB,EACjB,iBAAiB,CAAC,CAAC,aAAa,CAAC,CAAC,CACnC;;;;;;;;IAQC,IAAc,qBAAqB;QACjC,OAAO,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,KAAK;YACjC,MAAM;YACN,UAAU,EAAE;gBACV,+BAA+B,MAAM,OAAO;gBAC5C;oBACE,yCAAyC,EAAE,IAAI,CAAC,eAAe,KAAK,MAAM;oBAC1E,kCAAkC,EAAE,IAAI,CAAC,eAAe,KAAK,MAAM;iBACpE;aACF;YACD,UAAU,EAAE,IAAI,CAAC,eAAe,KAAK,MAAM;YAC3C,MAAM,EAAE;gBACN,uBAAuB,EAAE,MAAM;gBAC/B,qBAAqB,EAAE,MAAM;aAC9B;SACF,CAAC,CAAC,CAAC;KACL;CACF,CAAA;AA5BoB,oBAAoB;IAHxC,SAAS,CAAC;QACT,UAAU,EAAE,mBAAEA,iBAAe,EAAE;KAChC,CAAC;GACmB,oBAAoB,CA4BxC;aA5BoB,oBAAoB;;;;"}
+{"version":3,"file":"base-column-picker-list.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/column-picker/base-column-picker-list.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\nimport { mixins } from 'vue-class-component';\nimport { Component } from 'vue-property-decorator';\nimport { VueCSSClasses } from '../../utils/types';\nimport { XEventsTypes } from '../../wiring';\nimport BaseEventButton from '../base-event-button.vue';\nimport { dynamicPropsMixin } from '../dynamic-props.mixin';\nimport ColumnPickerMixin from './column-picker.mixin';\n\ninterface ColumnPickerItem {\n  column: number;\n  cssClasses: VueCSSClasses;\n  events: Partial<XEventsTypes>;\n  isSelected: boolean;\n}\n\n/**\n * Column picker list component renders a list of buttons to choose the columns number.\n *\n * Additionally, this component exposes the following props to modify the classes of the\n * elements: `buttonClass`.\n *\n * @remarks It extends {@link ColumnPickerMixin}.\n *\n * @public\n */\n@Component({\n  components: { BaseEventButton }\n})\nexport default class BaseColumnPickerList extends mixins(\n  ColumnPickerMixin,\n  dynamicPropsMixin(['buttonClass'])\n) {\n  /**\n   * Maps the column to an object containing: the `column` and `CSS classes`.\n   *\n   * @returns An array of objects containing the column number and CSS classes.\n   *\n   * @internal\n   */\n  protected get columnsWithCssClasses(): ColumnPickerItem[] {\n    return this.columns.map(column => ({\n      column,\n      cssClasses: [\n        `x-column-picker-list__item--${column}-cols`,\n        {\n          'x-column-picker-list__item--is-selected': this.selectedColumns === column,\n          'x-option-list__item--is-selected': this.selectedColumns === column\n        }\n      ],\n      isSelected: this.selectedColumns === column,\n      events: {\n        UserClickedColumnPicker: column,\n        ColumnsNumberProvided: column\n      }\n    }));\n  }\n}\n"],"names":["BaseEventButton"],"mappings":";;;;;;;AA+CA;;;;;;;;;;AAaA,IAAqB,oBAAoB,GAAzC,MAAqB,oBAAqB,SAAQ,MAAM,CACtD,iBAAiB,EACjB,iBAAiB,CAAC,CAAC,aAAa,CAAC,CAAC,CACnC;;;;;;;;IAQC,IAAc,qBAAqB;QACjC,OAAO,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,KAAK;YACjC,MAAM;YACN,UAAU,EAAE;gBACV,+BAA+B,MAAM,OAAO;gBAC5C;oBACE,yCAAyC,EAAE,IAAI,CAAC,eAAe,KAAK,MAAM;oBAC1E,kCAAkC,EAAE,IAAI,CAAC,eAAe,KAAK,MAAM;iBACpE;aACF;YACD,UAAU,EAAE,IAAI,CAAC,eAAe,KAAK,MAAM;YAC3C,MAAM,EAAE;gBACN,uBAAuB,EAAE,MAAM;gBAC/B,qBAAqB,EAAE,MAAM;aAC9B;SACF,CAAC,CAAC,CAAC;KACL;CACF,CAAA;AA5BoB,oBAAoB;IAHxC,SAAS,CAAC;QACT,UAAU,EAAE,mBAAEA,iBAAe,EAAE;KAChC,CAAC;GACmB,oBAAoB,CA4BxC;aA5BoB,oBAAoB;;;;"}

package/js/components/column-picker/base-column-picker-list.vue_rollup-plugin-vue_styles.0.vue.js

@@ -1,6 +1,6 @@
 import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
 
-var css = ".x-column-picker-list[data-v-5eadffbc] {\n  display: flex;\n  list-style-type: none;\n}";
+var css = ".x-column-picker-list[data-v-566dd3a8] {\n  display: flex;\n  list-style-type: none;\n}";
            const isBrowser = /*#__PURE__*/ (function () {
              return (
                 Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==

package/js/components/panels/base-id-toggle-panel-button.vue.js

@@ -14,7 +14,11 @@ var __vue_render__ = function () {
     _vm._g(
       {
         staticClass: "x-button x-base-id-toggle-panel-button",
-        attrs: { events: _vm.events, "data-test": "base-id-toggle-button" },
+        attrs: {
+          events: _vm.events,
+          "data-test": "base-id-toggle-button",
+          "aria-pressed": _vm.isPanelOpen,
+        },
       },
       _vm.$listeners
     ),

package/js/components/panels/base-id-toggle-panel-button.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-id-toggle-panel-button.vue.js","sources":["../../../../src/components/panels/base-id-toggle-panel-button.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    v-on=\"$listeners\"\n    :events=\"events\"\n    class=\"x-button x-base-id-toggle-panel-button\"\n    data-test=\"base-id-toggle-button\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot :isPanelOpen=\"isPanelOpen\" />\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { XEventsTypes } from '../../wiring/events.types';\n  import { WireMetadata } from '../../wiring/wiring.types';\n  import BaseEventButton from '../base-event-button.vue';\n  import { XOn } from '../decorators/bus.decorators';\n\n  /**\n   * Component containing an event button that emits\n   * {@link XEventsTypes.UserClickedPanelToggleButton} when clicked with\n   * the panelId as payload.\n   *\n   * It has a default slot to customize its contents.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseEventButton }\n  })\n  export default class BaseIdTogglePanelButton extends Vue {\n    /**\n     * The panel state to pass through the slot.\n     */\n    protected isPanelOpen = false;\n\n    /** The panelId to use for the toggle event listeners. */\n    @Prop({ required: true })\n    protected panelId!: string;\n\n    /**\n     * List of events to emit by the BaseEventButton.\n     *\n     * @returns An object with the event and payload.\n     *\n     * @internal\n     */\n    protected get events(): Partial<XEventsTypes> {\n      return { UserClickedPanelToggleButton: this.panelId };\n    }\n\n    /**\n     * The subscription to the {@link XEventsTypes.TogglePanelStateChanged} event\n     * to update the `isPanelOpen` property.\n     *\n     * @param newState - The new isOpen state of the panel.\n     * @param id - The `panelId`.\n     */\n    @XOn('TogglePanelStateChanged')\n    updatePanelState(newState: boolean, { id }: WireMetadata): void {\n      if (this.panelId === id) {\n        this.isPanelOpen = newState;\n      }\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThe component rendering content passed to the default slot and opening the panel toggle with panelId\n`my-toggle`.\n\n```vue\n<template>\n  <div>\n    <BaseIdTogglePanelButton v-slot=\"{ isPanelOpen }\" panelId=\"myToggle\">\n      <template #default=\"{ isPanelOpen }\" v-if=\"isPanelOpen\">\n        <img src=\"./close-button-icon.svg\" />\n        <span>Close aside</span>\n      </template>\n      <template v-else>\n        <img src=\"./open-button-icon.svg\" />\n        <span>Open aside</span>\n      </template>\n    </BaseIdTogglePanelButton>\n    <BaseIdTogglePanel :startOpen=\"true\" :animation=\"animation\" panelId=\"myToggle\">\n      <div class=\"x-text\">My toggle</div>\n    </BaseIdTogglePanel>\n  </div>\n</template>\n\n<script>\n  import {\n    BaseIdTogglePanel,\n    BaseIdTogglePanelButton,\n    CollapseFromTop\n  } from '@empathyco/x-components';\n\n  export default {\n    components: {\n      BaseIdTogglePanel,\n      BaseIdTogglePanelButton,\n      CollapseFromTop\n    },\n    data: function () {\n      return {\n        animation: CollapseFromTop\n      };\n    }\n  };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserClickedPanelToggleButton`: the event is emitted after the user clicks the button. The event\n  payload is the id of the panelId that is going to be toggled.\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-id-toggle-panel-button.vue.js","sources":["../../../../src/components/panels/base-id-toggle-panel-button.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    v-on=\"$listeners\"\n    :events=\"events\"\n    class=\"x-button x-base-id-toggle-panel-button\"\n    data-test=\"base-id-toggle-button\"\n    :aria-pressed=\"isPanelOpen\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot :isPanelOpen=\"isPanelOpen\" />\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { XEventsTypes } from '../../wiring/events.types';\n  import { WireMetadata } from '../../wiring/wiring.types';\n  import BaseEventButton from '../base-event-button.vue';\n  import { XOn } from '../decorators/bus.decorators';\n\n  /**\n   * Component containing an event button that emits\n   * {@link XEventsTypes.UserClickedPanelToggleButton} when clicked with\n   * the panelId as payload.\n   *\n   * It has a default slot to customize its contents.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseEventButton }\n  })\n  export default class BaseIdTogglePanelButton extends Vue {\n    /**\n     * The panel state to pass through the slot.\n     */\n    protected isPanelOpen = false;\n\n    /** The panelId to use for the toggle event listeners. */\n    @Prop({ required: true })\n    protected panelId!: string;\n\n    /**\n     * List of events to emit by the BaseEventButton.\n     *\n     * @returns An object with the event and payload.\n     *\n     * @internal\n     */\n    protected get events(): Partial<XEventsTypes> {\n      return { UserClickedPanelToggleButton: this.panelId };\n    }\n\n    /**\n     * The subscription to the {@link XEventsTypes.TogglePanelStateChanged} event\n     * to update the `isPanelOpen` property.\n     *\n     * @param newState - The new isOpen state of the panel.\n     * @param id - The `panelId`.\n     */\n    @XOn('TogglePanelStateChanged')\n    updatePanelState(newState: boolean, { id }: WireMetadata): void {\n      if (this.panelId === id) {\n        this.isPanelOpen = newState;\n      }\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThe component rendering content passed to the default slot and opening the panel toggle with panelId\n`my-toggle`.\n\n```vue\n<template>\n  <div>\n    <BaseIdTogglePanelButton v-slot=\"{ isPanelOpen }\" panelId=\"myToggle\">\n      <template #default=\"{ isPanelOpen }\" v-if=\"isPanelOpen\">\n        <img src=\"./close-button-icon.svg\" />\n        <span>Close aside</span>\n      </template>\n      <template v-else>\n        <img src=\"./open-button-icon.svg\" />\n        <span>Open aside</span>\n      </template>\n    </BaseIdTogglePanelButton>\n    <BaseIdTogglePanel :startOpen=\"true\" :animation=\"animation\" panelId=\"myToggle\">\n      <div class=\"x-text\">My toggle</div>\n    </BaseIdTogglePanel>\n  </div>\n</template>\n\n<script>\n  import {\n    BaseIdTogglePanel,\n    BaseIdTogglePanelButton,\n    CollapseFromTop\n  } from '@empathyco/x-components';\n\n  export default {\n    components: {\n      BaseIdTogglePanel,\n      BaseIdTogglePanelButton,\n      CollapseFromTop\n    },\n    data: function () {\n      return {\n        animation: CollapseFromTop\n      };\n    }\n  };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserClickedPanelToggleButton`: the event is emitted after the user clicks the button. The event\n  payload is the id of the panelId that is going to be toggled.\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/panels/base-id-toggle-panel-button.vue_rollup-plugin-vue_script.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-id-toggle-panel-button.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/panels/base-id-toggle-panel-button.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { XEventsTypes } from '../../wiring/events.types';\nimport { WireMetadata } from '../../wiring/wiring.types';\nimport BaseEventButton from '../base-event-button.vue';\nimport { XOn } from '../decorators/bus.decorators';\n\n/**\n * Component containing an event button that emits\n * {@link XEventsTypes.UserClickedPanelToggleButton} when clicked with\n * the panelId as payload.\n *\n * It has a default slot to customize its contents.\n *\n * @public\n */\n@Component({\n  components: { BaseEventButton }\n})\nexport default class BaseIdTogglePanelButton extends Vue {\n  /**\n   * The panel state to pass through the slot.\n   */\n  protected isPanelOpen = false;\n\n  /** The panelId to use for the toggle event listeners. */\n  @Prop({ required: true })\n  protected panelId!: string;\n\n  /**\n   * List of events to emit by the BaseEventButton.\n   *\n   * @returns An object with the event and payload.\n   *\n   * @internal\n   */\n  protected get events(): Partial<XEventsTypes> {\n    return { UserClickedPanelToggleButton: this.panelId };\n  }\n\n  /**\n   * The subscription to the {@link XEventsTypes.TogglePanelStateChanged} event\n   * to update the `isPanelOpen` property.\n   *\n   * @param newState - The new isOpen state of the panel.\n   * @param id - The `panelId`.\n   */\n  @XOn('TogglePanelStateChanged')\n  updatePanelState(newState: boolean, { id }: WireMetadata): void {\n    if (this.panelId === id) {\n      this.isPanelOpen = newState;\n    }\n  }\n}\n"],"names":["BaseEventButton"],"mappings":";;;;;;AAoBA;;;;;;;;;AAYA,IAAqB,uBAAuB,GAA5C,MAAqB,uBAAwB,SAAQ,GAAG;IAAxD;;;;;QAIY,gBAAW,GAAG,KAAK,CAAC;KA8B/B;;;;;;;;IAjBC,IAAc,MAAM;QAClB,OAAO,EAAE,4BAA4B,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC;KACvD;;;;;;;;IAUD,gBAAgB,CAAC,QAAiB,EAAE,EAAE,EAAE,EAAgB;QACtD,IAAI,IAAI,CAAC,OAAO,KAAK,EAAE,EAAE;YACvB,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC;SAC7B;KACF;CACF,CAAA;AA1BC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;wDACE;AAqB3B;IADC,GAAG,CAAC,yBAAyB,CAAC;+DAK9B;AAjCkB,uBAAuB;IAH3C,SAAS,CAAC;QACT,UAAU,EAAE,mBAAEA,iBAAe,EAAE;KAChC,CAAC;GACmB,uBAAuB,CAkC3C;aAlCoB,uBAAuB;;;;"}
+{"version":3,"file":"base-id-toggle-panel-button.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/panels/base-id-toggle-panel-button.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { XEventsTypes } from '../../wiring/events.types';\nimport { WireMetadata } from '../../wiring/wiring.types';\nimport BaseEventButton from '../base-event-button.vue';\nimport { XOn } from '../decorators/bus.decorators';\n\n/**\n * Component containing an event button that emits\n * {@link XEventsTypes.UserClickedPanelToggleButton} when clicked with\n * the panelId as payload.\n *\n * It has a default slot to customize its contents.\n *\n * @public\n */\n@Component({\n  components: { BaseEventButton }\n})\nexport default class BaseIdTogglePanelButton extends Vue {\n  /**\n   * The panel state to pass through the slot.\n   */\n  protected isPanelOpen = false;\n\n  /** The panelId to use for the toggle event listeners. */\n  @Prop({ required: true })\n  protected panelId!: string;\n\n  /**\n   * List of events to emit by the BaseEventButton.\n   *\n   * @returns An object with the event and payload.\n   *\n   * @internal\n   */\n  protected get events(): Partial<XEventsTypes> {\n    return { UserClickedPanelToggleButton: this.panelId };\n  }\n\n  /**\n   * The subscription to the {@link XEventsTypes.TogglePanelStateChanged} event\n   * to update the `isPanelOpen` property.\n   *\n   * @param newState - The new isOpen state of the panel.\n   * @param id - The `panelId`.\n   */\n  @XOn('TogglePanelStateChanged')\n  updatePanelState(newState: boolean, { id }: WireMetadata): void {\n    if (this.panelId === id) {\n      this.isPanelOpen = newState;\n    }\n  }\n}\n"],"names":["BaseEventButton"],"mappings":";;;;;;AAqBA;;;;;;;;;AAYA,IAAqB,uBAAuB,GAA5C,MAAqB,uBAAwB,SAAQ,GAAG;IAAxD;;;;;QAIY,gBAAW,GAAG,KAAK,CAAC;KA8B/B;;;;;;;;IAjBC,IAAc,MAAM;QAClB,OAAO,EAAE,4BAA4B,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC;KACvD;;;;;;;;IAUD,gBAAgB,CAAC,QAAiB,EAAE,EAAE,EAAE,EAAgB;QACtD,IAAI,IAAI,CAAC,OAAO,KAAK,EAAE,EAAE;YACvB,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC;SAC7B;KACF;CACF,CAAA;AA1BC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;wDACE;AAqB3B;IADC,GAAG,CAAC,yBAAyB,CAAC;+DAK9B;AAjCkB,uBAAuB;IAH3C,SAAS,CAAC;QACT,UAAU,EAAE,mBAAEA,iBAAe,EAAE;KAChC,CAAC;GACmB,uBAAuB,CAkC3C;aAlCoB,uBAAuB;;;;"}

package/js/x-modules/facets/components/filters/all-filter.vue.js

@@ -17,7 +17,7 @@ var __vue_render__ = function () {
       attrs: {
         "data-test": "all-filter",
         role: "checkbox",
-        "aria-checked": _vm.facet.label.toString(),
+        "aria-checked": _vm.isSelected,
         events: _vm.clickEvent,
       },
     },

package/js/x-modules/facets/components/filters/all-filter.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"all-filter.vue.js","sources":["../../../../../../src/x-modules/facets/components/filters/all-filter.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    class=\"x-filter x-all-filter\"\n    data-test=\"all-filter\"\n    role=\"checkbox\"\n    :aria-checked=\"facet.label.toString()\"\n    :events=\"clickEvent\"\n    :class=\"cssClasses\"\n  >\n    <!--\n        @slot The content to render inside the button\n            @binding {Facet} Facet - The facet data\n      -->\n    <slot :facet=\"facet\" :isSelected=\"isSelected\">all</slot>\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { Facet } from '@empathyco/x-types';\n  import { Getter, xComponentMixin } from '../../../../components';\n  import BaseEventButton from '../../../../components/base-event-button.vue';\n  import { isArrayEmpty } from '../../../../utils/array';\n  import { VueCSSClasses } from '../../../../utils/types';\n  import { XEventsTypes } from '../../../../wiring/events.types';\n  import { FiltersByFacet } from '../../store';\n  import { facetsXModule } from '../../x-module';\n\n  /**\n   * This component receives a required `facet` with\n   * {@link @empathyco/x-types#BooleanFilter | BooleanFilter} as prop and renders a button, which\n   * on clicked emits the {@link FacetsXEvents.UserClickedAllFilter} event. By default\n   * the rendered button displays a message with the facet label but this content is customizable\n   * through the default slot.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseEventButton },\n    mixins: [xComponentMixin(facetsXModule)]\n  })\n  export default class AllFilter extends Vue {\n    /** The facet data. */\n    @Prop({ required: true })\n    public facet!: Facet;\n\n    /** The getter of the selectedFiltersByFacet. */\n    @Getter('facets', 'selectedFiltersByFacet')\n    public selectedFiltersByFacet!: FiltersByFacet;\n\n    /**\n     * The event that will be emitted when the all filter button is clicked.\n     *\n     * @returns The event to emit on click.\n     * @internal\n     */\n    protected get clickEvent(): Partial<XEventsTypes> {\n      return {\n        UserClickedAllFilter: [this.facet.id]\n      };\n    }\n\n    /**\n     * Computed to retrieve the selected state of this component.\n     *\n     * @returns True if is selected false otherwise.\n     */\n    protected get isSelected(): boolean {\n      return isArrayEmpty(this.selectedFiltersByFacet?.[this.facet.id]);\n    }\n\n    /**\n     * Dynamic CSS classes to apply to the component.\n     *\n     * @remarks This is only valid considering that in the case of HierarchicalFilters, ancestors\n     * of nested selected filters are also selected.\n     *\n     * @returns The dynamic CSS classes to apply to the component.\n     * @internal\n     */\n    protected get cssClasses(): VueCSSClasses {\n      return {\n        'x-filter--is-selected': this.isSelected,\n        'x-all-filter--is-selected': this.isSelected\n      };\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component receives a required `facet` as prop and renders a button, which on clicked emits the\nUserClickedAllFilter event. By default the rendered button displays a message with the facet label\nbut this content is customizable through the default slot.\n\n### Basic usage\n\n```vue\n<AllFilter :facet=\"facet\" />\n```\n\n### Customizing its content\n\n```vue\n<AllFilter v-slot=\"{ facet }\" :facet=\"facet\">\n  Select all {{ facet.label }}\n</AllFilter>\n```\n\n### Basic example within facets\n\n```vue\n<Facets>\n  <template #default=\"{ facet }\">\n    <AllFilter :facet=\"facet\" />\n    <Filters v-slot=\"{ filter }\" :filters=\"facet.filters\">\n      <SimpleFilter :filter=\"filter\" />\n    </Filters>\n  </template>\n</Facets>\n```\n\n### Custom example within facets\n\n```vue\n<Facets>\n  <template #default=\"{ facet }\">\n    <AllFilter v-slot=\"{ facet }\" :facet=\"facet\">\n      Select all {{ facet.label }}\n    </AllFilter>\n    <Filters v-slot=\"{ filter }\" :filters=\"facet.filters\">\n      <SimpleFilter :filter=\"filter\" />\n    </Filters>\n  </template>\n</Facets>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserClickedAllFilter`: the event is emitted after the user clicks the button. The event payload\n  is the id of the facet that this `AllFilter` component corresponds to.\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"all-filter.vue.js","sources":["../../../../../../src/x-modules/facets/components/filters/all-filter.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    class=\"x-filter x-all-filter\"\n    data-test=\"all-filter\"\n    role=\"checkbox\"\n    :aria-checked=\"isSelected\"\n    :events=\"clickEvent\"\n    :class=\"cssClasses\"\n  >\n    <!--\n        @slot The content to render inside the button\n            @binding {Facet} Facet - The facet data\n      -->\n    <slot :facet=\"facet\" :isSelected=\"isSelected\">all</slot>\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { Facet } from '@empathyco/x-types';\n  import { Getter, xComponentMixin } from '../../../../components';\n  import BaseEventButton from '../../../../components/base-event-button.vue';\n  import { isArrayEmpty } from '../../../../utils/array';\n  import { VueCSSClasses } from '../../../../utils/types';\n  import { XEventsTypes } from '../../../../wiring/events.types';\n  import { FiltersByFacet } from '../../store';\n  import { facetsXModule } from '../../x-module';\n\n  /**\n   * This component receives a required `facet` with\n   * {@link @empathyco/x-types#BooleanFilter | BooleanFilter} as prop and renders a button, which\n   * on clicked emits the {@link FacetsXEvents.UserClickedAllFilter} event. By default\n   * the rendered button displays a message with the facet label but this content is customizable\n   * through the default slot.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseEventButton },\n    mixins: [xComponentMixin(facetsXModule)]\n  })\n  export default class AllFilter extends Vue {\n    /** The facet data. */\n    @Prop({ required: true })\n    public facet!: Facet;\n\n    /** The getter of the selectedFiltersByFacet. */\n    @Getter('facets', 'selectedFiltersByFacet')\n    public selectedFiltersByFacet!: FiltersByFacet;\n\n    /**\n     * The event that will be emitted when the all filter button is clicked.\n     *\n     * @returns The event to emit on click.\n     * @internal\n     */\n    protected get clickEvent(): Partial<XEventsTypes> {\n      return {\n        UserClickedAllFilter: [this.facet.id]\n      };\n    }\n\n    /**\n     * Computed to retrieve the selected state of this component.\n     *\n     * @returns True if is selected false otherwise.\n     */\n    protected get isSelected(): boolean {\n      return isArrayEmpty(this.selectedFiltersByFacet?.[this.facet.id]);\n    }\n\n    /**\n     * Dynamic CSS classes to apply to the component.\n     *\n     * @remarks This is only valid considering that in the case of HierarchicalFilters, ancestors\n     * of nested selected filters are also selected.\n     *\n     * @returns The dynamic CSS classes to apply to the component.\n     * @internal\n     */\n    protected get cssClasses(): VueCSSClasses {\n      return {\n        'x-filter--is-selected': this.isSelected,\n        'x-all-filter--is-selected': this.isSelected\n      };\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component receives a required `facet` as prop and renders a button, which on clicked emits the\nUserClickedAllFilter event. By default the rendered button displays a message with the facet label\nbut this content is customizable through the default slot.\n\n### Basic usage\n\n```vue\n<AllFilter :facet=\"facet\" />\n```\n\n### Customizing its content\n\n```vue\n<AllFilter v-slot=\"{ facet }\" :facet=\"facet\">\n  Select all {{ facet.label }}\n</AllFilter>\n```\n\n### Basic example within facets\n\n```vue\n<Facets>\n  <template #default=\"{ facet }\">\n    <AllFilter :facet=\"facet\" />\n    <Filters v-slot=\"{ filter }\" :filters=\"facet.filters\">\n      <SimpleFilter :filter=\"filter\" />\n    </Filters>\n  </template>\n</Facets>\n```\n\n### Custom example within facets\n\n```vue\n<Facets>\n  <template #default=\"{ facet }\">\n    <AllFilter v-slot=\"{ facet }\" :facet=\"facet\">\n      Select all {{ facet.label }}\n    </AllFilter>\n    <Filters v-slot=\"{ filter }\" :filters=\"facet.filters\">\n      <SimpleFilter :filter=\"filter\" />\n    </Filters>\n  </template>\n</Facets>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserClickedAllFilter`: the event is emitted after the user clicks the button. The event payload\n  is the id of the facet that this `AllFilter` component corresponds to.\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/history-queries/components/clear-history-queries.vue.js

@@ -18,6 +18,7 @@ var __vue_render__ = function () {
         disabled: _vm.isHistoryQueriesEmpty,
         events: _vm.clearHistoryQueriesEvents,
         "data-test": "clear-history-queries",
+        "aria-label": "Clear all",
       },
     },
     [

package/js/x-modules/history-queries/components/clear-history-queries.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"clear-history-queries.vue.js","sources":["../../../../../src/x-modules/history-queries/components/clear-history-queries.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    class=\"x-button x-clear-history-queries\"\n    :class=\"dynamicClasses\"\n    :disabled=\"isHistoryQueriesEmpty\"\n    :events=\"clearHistoryQueriesEvents\"\n    data-test=\"clear-history-queries\"\n  >\n    <!-- @slot (Required) Button content with a message, an icon or both -->\n    <slot>✕</slot>\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\n  import { HistoryQuery } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n  import { State } from '../../../components/decorators/store.decorators';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { historyQueriesXModule } from '../x-module';\n\n  /**\n   * A button that when is pressed, emits the\n   * {@link HistoryQueriesXEvents.UserPressedClearHistoryQueries} event, expressing the user\n   * intention to clear the whole history of queries.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseEventButton },\n    mixins: [xComponentMixin(historyQueriesXModule)]\n  })\n  export default class ClearHistoryQueries extends Vue {\n    /**\n     * The whole history queries.\n     *\n     * @internal\n     */\n    @State('historyQueries', 'historyQueries')\n    public historyQueries!: HistoryQuery[];\n\n    /**\n     * Returns if the array of history queries is empty.\n     *\n     * @returns `true` if the {@link historyQueries} array is empty, `false` otherwise.\n     * @internal\n     */\n    protected get isHistoryQueriesEmpty(): boolean {\n      return this.historyQueries.length === 0;\n    }\n\n    /**\n     * Dynamic CSS classes to add to the root element of this component.\n     *\n     * @returns A booleans dictionary where each key is the class name to add, and the boolean value\n     * tells if it should be added or not.\n     * @internal\n     */\n    protected get dynamicClasses(): VueCSSClasses {\n      return {\n        'x-clear-history-queries--is-empty': this.isHistoryQueriesEmpty\n      };\n    }\n\n    /**\n     * The list of events that are going to be emitted when the button is pressed.\n     *\n     * @internal\n     */\n    protected clearHistoryQueriesEvents: Partial<XEventsTypes> = {\n      UserPressedClearHistoryQueries: undefined\n    };\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThe component exposes a single default slot, where you can add icons or text.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <ClearHistoryQueries>Clear history queries</ClearHistoryQueries>\n    <HistoryQueries :animation=\"'FadeAndSlide'\" :maxItemsToRender=\"10\" />\n  </div>\n</template>\n\n<script>\n  import Vue from 'vue';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { HistoryQueries, ClearHistoryQueries } from '@empathyco/x-components/history-queries';\n  import { FadeAndSlide } from '@empathyco/x-components';\n\n  // Registering the animation as a global component\n  Vue.component('FadeAndSlide', FadeAndSlide);\n  export default {\n    name: 'ClearHistoryQueriesDemo',\n    components: {\n      SearchInput,\n      HistoryQueries,\n      ClearHistoryQueries\n    }\n  };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserPressedClearHistoryQueries`: the event is emitted after the user clicks the button.\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"clear-history-queries.vue.js","sources":["../../../../../src/x-modules/history-queries/components/clear-history-queries.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    class=\"x-button x-clear-history-queries\"\n    :class=\"dynamicClasses\"\n    :disabled=\"isHistoryQueriesEmpty\"\n    :events=\"clearHistoryQueriesEvents\"\n    data-test=\"clear-history-queries\"\n    aria-label=\"Clear all\"\n  >\n    <!-- @slot (Required) Button content with a message, an icon or both -->\n    <slot>✕</slot>\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\n  import { HistoryQuery } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n  import { State } from '../../../components/decorators/store.decorators';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { historyQueriesXModule } from '../x-module';\n\n  /**\n   * A button that when is pressed, emits the\n   * {@link HistoryQueriesXEvents.UserPressedClearHistoryQueries} event, expressing the user\n   * intention to clear the whole history of queries.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseEventButton },\n    mixins: [xComponentMixin(historyQueriesXModule)]\n  })\n  export default class ClearHistoryQueries extends Vue {\n    /**\n     * The whole history queries.\n     *\n     * @internal\n     */\n    @State('historyQueries', 'historyQueries')\n    public historyQueries!: HistoryQuery[];\n\n    /**\n     * Returns if the array of history queries is empty.\n     *\n     * @returns `true` if the {@link historyQueries} array is empty, `false` otherwise.\n     * @internal\n     */\n    protected get isHistoryQueriesEmpty(): boolean {\n      return this.historyQueries.length === 0;\n    }\n\n    /**\n     * Dynamic CSS classes to add to the root element of this component.\n     *\n     * @returns A booleans dictionary where each key is the class name to add, and the boolean value\n     * tells if it should be added or not.\n     * @internal\n     */\n    protected get dynamicClasses(): VueCSSClasses {\n      return {\n        'x-clear-history-queries--is-empty': this.isHistoryQueriesEmpty\n      };\n    }\n\n    /**\n     * The list of events that are going to be emitted when the button is pressed.\n     *\n     * @internal\n     */\n    protected clearHistoryQueriesEvents: Partial<XEventsTypes> = {\n      UserPressedClearHistoryQueries: undefined\n    };\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThe component exposes a single default slot, where you can add icons or text.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <ClearHistoryQueries>Clear history queries</ClearHistoryQueries>\n    <HistoryQueries :animation=\"'FadeAndSlide'\" :maxItemsToRender=\"10\" />\n  </div>\n</template>\n\n<script>\n  import Vue from 'vue';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { HistoryQueries, ClearHistoryQueries } from '@empathyco/x-components/history-queries';\n  import { FadeAndSlide } from '@empathyco/x-components';\n\n  // Registering the animation as a global component\n  Vue.component('FadeAndSlide', FadeAndSlide);\n  export default {\n    name: 'ClearHistoryQueriesDemo',\n    components: {\n      SearchInput,\n      HistoryQueries,\n      ClearHistoryQueries\n    }\n  };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserPressedClearHistoryQueries`: the event is emitted after the user clicks the button.\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/history-queries/components/clear-history-queries.vue_rollup-plugin-vue_script.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"clear-history-queries.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/history-queries/components/clear-history-queries.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { HistoryQuery } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component } from 'vue-property-decorator';\nimport { State } from '../../../components/decorators/store.decorators';\nimport BaseEventButton from '../../../components/base-event-button.vue';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { VueCSSClasses } from '../../../utils/types';\nimport { XEventsTypes } from '../../../wiring/events.types';\nimport { historyQueriesXModule } from '../x-module';\n\n/**\n * A button that when is pressed, emits the\n * {@link HistoryQueriesXEvents.UserPressedClearHistoryQueries} event, expressing the user\n * intention to clear the whole history of queries.\n *\n * @public\n */\n@Component({\n  components: { BaseEventButton },\n  mixins: [xComponentMixin(historyQueriesXModule)]\n})\nexport default class ClearHistoryQueries extends Vue {\n  /**\n   * The whole history queries.\n   *\n   * @internal\n   */\n  @State('historyQueries', 'historyQueries')\n  public historyQueries!: HistoryQuery[];\n\n  /**\n   * Returns if the array of history queries is empty.\n   *\n   * @returns `true` if the {@link historyQueries} array is empty, `false` otherwise.\n   * @internal\n   */\n  protected get isHistoryQueriesEmpty(): boolean {\n    return this.historyQueries.length === 0;\n  }\n\n  /**\n   * Dynamic CSS classes to add to the root element of this component.\n   *\n   * @returns A booleans dictionary where each key is the class name to add, and the boolean value\n   * tells if it should be added or not.\n   * @internal\n   */\n  protected get dynamicClasses(): VueCSSClasses {\n    return {\n      'x-clear-history-queries--is-empty': this.isHistoryQueriesEmpty\n    };\n  }\n\n  /**\n   * The list of events that are going to be emitted when the button is pressed.\n   *\n   * @internal\n   */\n  protected clearHistoryQueriesEvents: Partial<XEventsTypes> = {\n    UserPressedClearHistoryQueries: undefined\n  };\n}\n"],"names":["BaseEventButton"],"mappings":";;;;;;;;AAwBA;;;;;;;AAWA,IAAqB,mBAAmB,GAAxC,MAAqB,mBAAoB,SAAQ,GAAG;IAApD;;;;;;;QAqCY,8BAAyB,GAA0B;YAC3D,8BAA8B,EAAE,SAAS;SAC1C,CAAC;KACH;;;;;;;IAzBC,IAAc,qBAAqB;QACjC,OAAO,IAAI,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC,CAAC;KACzC;;;;;;;;IASD,IAAc,cAAc;QAC1B,OAAO;YACL,mCAAmC,EAAE,IAAI,CAAC,qBAAqB;SAChE,CAAC;KACH;CAUF,CAAA;AAjCC;IADC,KAAK,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;2DACH;AAPpB,mBAAmB;IAJvC,SAAS,CAAC;QACT,UAAU,EAAE,mBAAEA,iBAAe,EAAE;QAC/B,MAAM,EAAE,CAAC,eAAe,CAAC,qBAAqB,CAAC,CAAC;KACjD,CAAC;GACmB,mBAAmB,CAwCvC;aAxCoB,mBAAmB;;;;"}
+{"version":3,"file":"clear-history-queries.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/history-queries/components/clear-history-queries.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { HistoryQuery } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component } from 'vue-property-decorator';\nimport { State } from '../../../components/decorators/store.decorators';\nimport BaseEventButton from '../../../components/base-event-button.vue';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { VueCSSClasses } from '../../../utils/types';\nimport { XEventsTypes } from '../../../wiring/events.types';\nimport { historyQueriesXModule } from '../x-module';\n\n/**\n * A button that when is pressed, emits the\n * {@link HistoryQueriesXEvents.UserPressedClearHistoryQueries} event, expressing the user\n * intention to clear the whole history of queries.\n *\n * @public\n */\n@Component({\n  components: { BaseEventButton },\n  mixins: [xComponentMixin(historyQueriesXModule)]\n})\nexport default class ClearHistoryQueries extends Vue {\n  /**\n   * The whole history queries.\n   *\n   * @internal\n   */\n  @State('historyQueries', 'historyQueries')\n  public historyQueries!: HistoryQuery[];\n\n  /**\n   * Returns if the array of history queries is empty.\n   *\n   * @returns `true` if the {@link historyQueries} array is empty, `false` otherwise.\n   * @internal\n   */\n  protected get isHistoryQueriesEmpty(): boolean {\n    return this.historyQueries.length === 0;\n  }\n\n  /**\n   * Dynamic CSS classes to add to the root element of this component.\n   *\n   * @returns A booleans dictionary where each key is the class name to add, and the boolean value\n   * tells if it should be added or not.\n   * @internal\n   */\n  protected get dynamicClasses(): VueCSSClasses {\n    return {\n      'x-clear-history-queries--is-empty': this.isHistoryQueriesEmpty\n    };\n  }\n\n  /**\n   * The list of events that are going to be emitted when the button is pressed.\n   *\n   * @internal\n   */\n  protected clearHistoryQueriesEvents: Partial<XEventsTypes> = {\n    UserPressedClearHistoryQueries: undefined\n  };\n}\n"],"names":["BaseEventButton"],"mappings":";;;;;;;;AAyBA;;;;;;;AAWA,IAAqB,mBAAmB,GAAxC,MAAqB,mBAAoB,SAAQ,GAAG;IAApD;;;;;;;QAqCY,8BAAyB,GAA0B;YAC3D,8BAA8B,EAAE,SAAS;SAC1C,CAAC;KACH;;;;;;;IAzBC,IAAc,qBAAqB;QACjC,OAAO,IAAI,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC,CAAC;KACzC;;;;;;;;IASD,IAAc,cAAc;QAC1B,OAAO;YACL,mCAAmC,EAAE,IAAI,CAAC,qBAAqB;SAChE,CAAC;KACH;CAUF,CAAA;AAjCC;IADC,KAAK,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;2DACH;AAPpB,mBAAmB;IAJvC,SAAS,CAAC;QACT,UAAU,EAAE,mBAAEA,iBAAe,EAAE;QAC/B,MAAM,EAAE,CAAC,eAAe,CAAC,qBAAqB,CAAC,CAAC;KACjD,CAAC;GACmB,mBAAmB,CAwCvC;aAxCoB,mBAAmB;;;;"}

package/js/x-modules/history-queries/components/remove-history-query.vue.js

@@ -13,7 +13,7 @@ var __vue_render__ = function () {
     "BaseEventButton",
     {
       staticClass: "x-button x-remove-history-query",
-      attrs: { events: _vm.removeHistoryQueryEvent },
+      attrs: { events: _vm.removeHistoryQueryEvent, "aria-label": "remove" },
     },
     [_vm._t("default")],
     2

package/js/x-modules/history-queries/components/remove-history-query.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"remove-history-query.vue.js","sources":["../../../../../src/x-modules/history-queries/components/remove-history-query.vue"],"sourcesContent":["<template>\n  <BaseEventButton class=\"x-button x-remove-history-query\" :events=\"removeHistoryQueryEvent\">\n    <!--  @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\n  import { HistoryQuery } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { historyQueriesXModule } from '../x-module';\n\n  /**\n   * Button that when it is pressed emits the\n   * {@link HistoryQueriesXEvents.UserPressedRemoveHistoryQuery} event, expressing the user\n   * intention to remove a query in the history.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseEventButton },\n    mixins: [xComponentMixin(historyQueriesXModule)]\n  })\n  export default class RemoveHistoryQuery extends Vue {\n    /**\n     * The historyQuery that will be removed when clicking the clear button.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected historyQuery!: HistoryQuery;\n\n    /**\n     * The event handler that will be triggered when clicking on the clear history query button.\n     *\n     * @remarks\n     * * {@link HistoryQueriesXEvents.UserPressedRemoveHistoryQuery}: historyQuery\n     *\n     * @returns The {@link XEvent | XEvents} to emit.\n     * @public\n     */\n    protected get removeHistoryQueryEvent(): Partial<XEventsTypes> {\n      return { UserPressedRemoveHistoryQuery: this.historyQuery };\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic Example\n\nYou can customize the content that this component renders. To do so, simply use the default slot.\n\n```vue\n<RemoveHistoryQuery :historyQuery=\"historyQuery\">\n  <img class=\"x-history-query__icon\" src=\"./my-awesome-clear-icon.svg\"/>\n</RemoveHistoryQuery>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserPressedRemoveHistoryQuery`: the event is emitted after the user clicks the button. The event\n  payload is the history query data.\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"remove-history-query.vue.js","sources":["../../../../../src/x-modules/history-queries/components/remove-history-query.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    class=\"x-button x-remove-history-query\"\n    :events=\"removeHistoryQueryEvent\"\n    aria-label=\"remove\"\n  >\n    <!--  @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\n  import { HistoryQuery } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { historyQueriesXModule } from '../x-module';\n\n  /**\n   * Button that when it is pressed emits the\n   * {@link HistoryQueriesXEvents.UserPressedRemoveHistoryQuery} event, expressing the user\n   * intention to remove a query in the history.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseEventButton },\n    mixins: [xComponentMixin(historyQueriesXModule)]\n  })\n  export default class RemoveHistoryQuery extends Vue {\n    /**\n     * The historyQuery that will be removed when clicking the clear button.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected historyQuery!: HistoryQuery;\n\n    /**\n     * The event handler that will be triggered when clicking on the clear history query button.\n     *\n     * @remarks\n     * {@link HistoryQueriesXEvents.UserPressedRemoveHistoryQuery}: historyQuery\n     *\n     * @returns The {@link XEvent | XEvents} to emit.\n     * @public\n     */\n    protected get removeHistoryQueryEvent(): Partial<XEventsTypes> {\n      return { UserPressedRemoveHistoryQuery: this.historyQuery };\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic Example\n\nYou can customize the content that this component renders. To do so, simply use the default slot.\n\n```vue\n<RemoveHistoryQuery :historyQuery=\"historyQuery\">\n  <img class=\"x-history-query__icon\" src=\"./my-awesome-clear-icon.svg\"/>\n</RemoveHistoryQuery>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserPressedRemoveHistoryQuery`: the event is emitted after the user clicks the button. The event\n  payload is the history query data.\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/history-queries/components/remove-history-query.vue_rollup-plugin-vue_script.vue.js

@@ -17,7 +17,7 @@ let RemoveHistoryQuery = class RemoveHistoryQuery extends Vue {
      * The event handler that will be triggered when clicking on the clear history query button.
      *
      * @remarks
-     * * {@link HistoryQueriesXEvents.UserPressedRemoveHistoryQuery}: historyQuery
+     * {@link HistoryQueriesXEvents.UserPressedRemoveHistoryQuery}: historyQuery
      *
      * @returns The {@link XEvent | XEvents} to emit.
      * @public

package/js/x-modules/history-queries/components/remove-history-query.vue_rollup-plugin-vue_script.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"remove-history-query.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/history-queries/components/remove-history-query.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\nimport { HistoryQuery } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport BaseEventButton from '../../../components/base-event-button.vue';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { XEventsTypes } from '../../../wiring/events.types';\nimport { historyQueriesXModule } from '../x-module';\n\n/**\n * Button that when it is pressed emits the\n * {@link HistoryQueriesXEvents.UserPressedRemoveHistoryQuery} event, expressing the user\n * intention to remove a query in the history.\n *\n * @public\n */\n@Component({\n  components: { BaseEventButton },\n  mixins: [xComponentMixin(historyQueriesXModule)]\n})\nexport default class RemoveHistoryQuery extends Vue {\n  /**\n   * The historyQuery that will be removed when clicking the clear button.\n   *\n   * @public\n   */\n  @Prop({ required: true })\n  protected historyQuery!: HistoryQuery;\n\n  /**\n   * The event handler that will be triggered when clicking on the clear history query button.\n   *\n   * @remarks\n   * * {@link HistoryQueriesXEvents.UserPressedRemoveHistoryQuery}: historyQuery\n   *\n   * @returns The {@link XEvent | XEvents} to emit.\n   * @public\n   */\n  protected get removeHistoryQueryEvent(): Partial<XEventsTypes> {\n    return { UserPressedRemoveHistoryQuery: this.historyQuery };\n  }\n}\n"],"names":["BaseEventButton"],"mappings":";;;;;;;AAgBA;;;;;;;AAWA,IAAqB,kBAAkB,GAAvC,MAAqB,kBAAmB,SAAQ,GAAG;;;;;;;;;;IAkBjD,IAAc,uBAAuB;QACnC,OAAO,EAAE,6BAA6B,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC;KAC7D;CACF,CAAA;AAdC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;wDACa;AAPnB,kBAAkB;IAJtC,SAAS,CAAC;QACT,UAAU,EAAE,mBAAEA,iBAAe,EAAE;QAC/B,MAAM,EAAE,CAAC,eAAe,CAAC,qBAAqB,CAAC,CAAC;KACjD,CAAC;GACmB,kBAAkB,CAqBtC;aArBoB,kBAAkB;;;;"}
+{"version":3,"file":"remove-history-query.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/history-queries/components/remove-history-query.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\nimport { HistoryQuery } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport BaseEventButton from '../../../components/base-event-button.vue';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { XEventsTypes } from '../../../wiring/events.types';\nimport { historyQueriesXModule } from '../x-module';\n\n/**\n * Button that when it is pressed emits the\n * {@link HistoryQueriesXEvents.UserPressedRemoveHistoryQuery} event, expressing the user\n * intention to remove a query in the history.\n *\n * @public\n */\n@Component({\n  components: { BaseEventButton },\n  mixins: [xComponentMixin(historyQueriesXModule)]\n})\nexport default class RemoveHistoryQuery extends Vue {\n  /**\n   * The historyQuery that will be removed when clicking the clear button.\n   *\n   * @public\n   */\n  @Prop({ required: true })\n  protected historyQuery!: HistoryQuery;\n\n  /**\n   * The event handler that will be triggered when clicking on the clear history query button.\n   *\n   * @remarks\n   * {@link HistoryQueriesXEvents.UserPressedRemoveHistoryQuery}: historyQuery\n   *\n   * @returns The {@link XEvent | XEvents} to emit.\n   * @public\n   */\n  protected get removeHistoryQueryEvent(): Partial<XEventsTypes> {\n    return { UserPressedRemoveHistoryQuery: this.historyQuery };\n  }\n}\n"],"names":["BaseEventButton"],"mappings":";;;;;;;AAoBA;;;;;;;AAWA,IAAqB,kBAAkB,GAAvC,MAAqB,kBAAmB,SAAQ,GAAG;;;;;;;;;;IAkBjD,IAAc,uBAAuB;QACnC,OAAO,EAAE,6BAA6B,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC;KAC7D;CACF,CAAA;AAdC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;wDACa;AAPnB,kBAAkB;IAJtC,SAAS,CAAC;QACT,UAAU,EAAE,mBAAEA,iBAAe,EAAE;QAC/B,MAAM,EAAE,CAAC,eAAe,CAAC,qBAAqB,CAAC,CAAC;KACjD,CAAC;GACmB,kBAAkB,CAqBtC;aArBoB,kBAAkB;;;;"}

package/js/x-modules/scroll/components/scroll-to-top.vue.js

@@ -19,7 +19,11 @@ var __vue_render__ = function () {
             _vm._g(
               {
                 staticClass: "x-button x-scroll-to-top",
-                attrs: { "data-test": "scroll-to-top", events: _vm.events },
+                attrs: {
+                  "data-test": "scroll-to-top",
+                  "aria-label": "Scroll to top",
+                  events: _vm.events,
+                },
               },
               _vm.$listeners
             ),

package/js/x-modules/scroll/components/scroll-to-top.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-to-top.vue.js","sources":["../../../../../src/x-modules/scroll/components/scroll-to-top.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\">\n    <BaseEventButton\n      v-if=\"isVisible\"\n      v-on=\"$listeners\"\n      class=\"x-button x-scroll-to-top\"\n      data-test=\"scroll-to-top\"\n      :events=\"events\"\n    >\n      <!-- @slot (Required) Button content with a text, an icon or both -->\n      <slot />\n    </BaseEventButton>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { Dictionary } from '@empathyco/x-utils';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { State, xComponentMixin } from '../../../components';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { NoElement } from '../../../components/no-element';\n  import { XEventsTypes } from '../../../wiring';\n  import { ScrollComponentState } from '../store';\n  import { scrollXModule } from '../x-module';\n  import { MainScrollId } from './scroll.const';\n\n  /**\n   * The `ScrollToTop` component is a button that the user can click to make a container scroll\n   * up to its initial position.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(scrollXModule)],\n    components: { BaseEventButton }\n  })\n  export default class ScrollToTop extends Vue {\n    /**\n     * Animation to use for showing/hiding the button.\n     *\n     * @public\n     */\n    @Prop({ default: () => NoElement })\n    public animation!: Vue | string;\n\n    /**\n     * Threshold in pixels from the top to show the button.\n     *\n     * @public\n     */\n    @Prop()\n    public thresholdPx?: number;\n\n    /**\n     * Id of the target scroll component.\n     *\n     * @public\n     */\n    @Prop({ default: MainScrollId })\n    public scrollId!: string;\n\n    /**\n     * State of all the scroll components in this module.\n     *\n     * @internal\n     */\n    // TODO: Directly retrieve the needed data in this computed property\n    @State('scroll', 'data')\n    public scrollPositionsMap!: Dictionary<ScrollComponentState>;\n\n    /**\n     * The scroll data retrieved for this component.\n     *\n     * @returns The scroll data for this component if a valid {@link ScrollToTop.scrollId} has been\n     * passed. Otherwise it returns `null`.\n     * @internal\n     */\n    protected get scrollData(): ScrollComponentState {\n      return this.scrollId && this.scrollPositionsMap[this.scrollId]\n        ? this.scrollPositionsMap[this.scrollId]\n        : {\n            position: 0,\n            direction: 'UP',\n            hasReachedStart: false,\n            hasAlmostReachedEnd: false,\n            hasReachedEnd: false\n          };\n    }\n\n    /**\n     * Event that will be emitted when the scroll to top is clicked.\n     *\n     * @returns The event to be emitted when the scroll to top is clicked. The id as a payload.\n     * @internal\n     */\n    protected get events(): Partial<XEventsTypes> {\n      return { UserClickedScrollToTop: this.scrollId };\n    }\n\n    /**\n     * Checks if the thresholdPx prop has been provided and if it is a number.\n     *\n     * @returns If the thresholdPx is a number or not.\n     * @internal\n     */\n    protected get useThresholdStrategy(): boolean {\n      return typeof this.thresholdPx === 'number';\n    }\n\n    /**\n     * Checks if the threshold has been reached in case the threshold strategy is in use.\n     *\n     * @returns If the scrollTop is bigger than the thresholdPx.\n     * @internal\n     */\n    protected get isThresholdReached(): boolean {\n      return this.useThresholdStrategy && this.scrollData.position > this.thresholdPx!;\n    }\n\n    /**\n     * Whether if the button is visible or not depending on the strategy being used.\n     *\n     * @returns If the button should be visible or not.\n     * @internal\n     */\n    protected get isVisible(): boolean {\n      return this.useThresholdStrategy ? this.isThresholdReached : this.hasAlmostReachedScrollEnd;\n    }\n\n    /**\n     * Returns if the scroll has almost reached its end or not.\n     *\n     * @returns True if the scroll has almost reached the end and the user is still scrolling down.\n     * @internal\n     */\n    protected get hasAlmostReachedScrollEnd(): boolean {\n      return this.scrollData.hasAlmostReachedEnd && this.scrollData.direction === 'DOWN';\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThe component renders whatever is passed to it in the default slot and scrolls to top the scroll\nwith an id `scrollId`.\n\nIt also receives an optional threshold in pixels. When the threshold is reached from the top, the\ncomponent will be shown once the user scrolls `UP`.\n\nIf this parameter is not provided the button will be visible when the user almost reaches the end of\nthe scroll.\n\n```vue\n<template>\n  <div>\n    <ScrollToTop scroll-id=\"scrollId\" :threshold-px=\"1000\">\n      <span>Scroll to top</span>\n    </ScrollToTop>\n  </div>\n</template>\n\n<script>\n  import { ScrollToTop } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'ScrollToTopTest',\n    components: {\n      ScrollToTop\n    }\n  };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserClickedScrollToTop`: the event is emitted after the user clicks the button. The event payload\n  is the id of the scroll that it going to be scrolled.\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"scroll-to-top.vue.js","sources":["../../../../../src/x-modules/scroll/components/scroll-to-top.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\">\n    <BaseEventButton\n      v-if=\"isVisible\"\n      v-on=\"$listeners\"\n      class=\"x-button x-scroll-to-top\"\n      data-test=\"scroll-to-top\"\n      aria-label=\"Scroll to top\"\n      :events=\"events\"\n    >\n      <!-- @slot (Required) Button content with a text, an icon or both -->\n      <slot />\n    </BaseEventButton>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { Dictionary } from '@empathyco/x-utils';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { State, xComponentMixin } from '../../../components';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { NoElement } from '../../../components/no-element';\n  import { XEventsTypes } from '../../../wiring';\n  import { ScrollComponentState } from '../store';\n  import { scrollXModule } from '../x-module';\n  import { MainScrollId } from './scroll.const';\n\n  /**\n   * The `ScrollToTop` component is a button that the user can click to make a container scroll\n   * up to its initial position.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(scrollXModule)],\n    components: { BaseEventButton }\n  })\n  export default class ScrollToTop extends Vue {\n    /**\n     * Animation to use for showing/hiding the button.\n     *\n     * @public\n     */\n    @Prop({ default: () => NoElement })\n    public animation!: Vue | string;\n\n    /**\n     * Threshold in pixels from the top to show the button.\n     *\n     * @public\n     */\n    @Prop()\n    public thresholdPx?: number;\n\n    /**\n     * Id of the target scroll component.\n     *\n     * @public\n     */\n    @Prop({ default: MainScrollId })\n    public scrollId!: string;\n\n    /**\n     * State of all the scroll components in this module.\n     *\n     * @internal\n     */\n    // TODO: Directly retrieve the needed data in this computed property\n    @State('scroll', 'data')\n    public scrollPositionsMap!: Dictionary<ScrollComponentState>;\n\n    /**\n     * The scroll data retrieved for this component.\n     *\n     * @returns The scroll data for this component if a valid {@link ScrollToTop.scrollId} has been\n     * passed. Otherwise it returns `null`.\n     * @internal\n     */\n    protected get scrollData(): ScrollComponentState {\n      return this.scrollId && this.scrollPositionsMap[this.scrollId]\n        ? this.scrollPositionsMap[this.scrollId]\n        : {\n            position: 0,\n            direction: 'UP',\n            hasReachedStart: false,\n            hasAlmostReachedEnd: false,\n            hasReachedEnd: false\n          };\n    }\n\n    /**\n     * Event that will be emitted when the scroll to top is clicked.\n     *\n     * @returns The event to be emitted when the scroll to top is clicked. The id as a payload.\n     * @internal\n     */\n    protected get events(): Partial<XEventsTypes> {\n      return { UserClickedScrollToTop: this.scrollId };\n    }\n\n    /**\n     * Checks if the thresholdPx prop has been provided and if it is a number.\n     *\n     * @returns If the thresholdPx is a number or not.\n     * @internal\n     */\n    protected get useThresholdStrategy(): boolean {\n      return typeof this.thresholdPx === 'number';\n    }\n\n    /**\n     * Checks if the threshold has been reached in case the threshold strategy is in use.\n     *\n     * @returns If the scrollTop is bigger than the thresholdPx.\n     * @internal\n     */\n    protected get isThresholdReached(): boolean {\n      return this.useThresholdStrategy && this.scrollData.position > this.thresholdPx!;\n    }\n\n    /**\n     * Whether if the button is visible or not depending on the strategy being used.\n     *\n     * @returns If the button should be visible or not.\n     * @internal\n     */\n    protected get isVisible(): boolean {\n      return this.useThresholdStrategy ? this.isThresholdReached : this.hasAlmostReachedScrollEnd;\n    }\n\n    /**\n     * Returns if the scroll has almost reached its end or not.\n     *\n     * @returns True if the scroll has almost reached the end and the user is still scrolling down.\n     * @internal\n     */\n    protected get hasAlmostReachedScrollEnd(): boolean {\n      return this.scrollData.hasAlmostReachedEnd && this.scrollData.direction === 'DOWN';\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThe component renders whatever is passed to it in the default slot and scrolls to top the scroll\nwith an id `scrollId`.\n\nIt also receives an optional threshold in pixels. When the threshold is reached from the top, the\ncomponent will be shown once the user scrolls `UP`.\n\nIf this parameter is not provided the button will be visible when the user almost reaches the end of\nthe scroll.\n\n```vue\n<template>\n  <div>\n    <ScrollToTop scroll-id=\"scrollId\" :threshold-px=\"1000\">\n      <span>Scroll to top</span>\n    </ScrollToTop>\n  </div>\n</template>\n\n<script>\n  import { ScrollToTop } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'ScrollToTopTest',\n    components: {\n      ScrollToTop\n    }\n  };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserClickedScrollToTop`: the event is emitted after the user clicks the button. The event payload\n  is the id of the scroll that it going to be scrolled.\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/scroll/components/scroll-to-top.vue_rollup-plugin-vue_script.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-to-top.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/scroll/components/scroll-to-top.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { Dictionary } from '@empathyco/x-utils';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { State, xComponentMixin } from '../../../components';\nimport BaseEventButton from '../../../components/base-event-button.vue';\nimport { NoElement } from '../../../components/no-element';\nimport { XEventsTypes } from '../../../wiring';\nimport { ScrollComponentState } from '../store';\nimport { scrollXModule } from '../x-module';\nimport { MainScrollId } from './scroll.const';\n\n/**\n * The `ScrollToTop` component is a button that the user can click to make a container scroll\n * up to its initial position.\n *\n * @public\n */\n@Component({\n  mixins: [xComponentMixin(scrollXModule)],\n  components: { BaseEventButton }\n})\nexport default class ScrollToTop extends Vue {\n  /**\n   * Animation to use for showing/hiding the button.\n   *\n   * @public\n   */\n  @Prop({ default: () => NoElement })\n  public animation!: Vue | string;\n\n  /**\n   * Threshold in pixels from the top to show the button.\n   *\n   * @public\n   */\n  @Prop()\n  public thresholdPx?: number;\n\n  /**\n   * Id of the target scroll component.\n   *\n   * @public\n   */\n  @Prop({ default: MainScrollId })\n  public scrollId!: string;\n\n  /**\n   * State of all the scroll components in this module.\n   *\n   * @internal\n   */\n  // TODO: Directly retrieve the needed data in this computed property\n  @State('scroll', 'data')\n  public scrollPositionsMap!: Dictionary<ScrollComponentState>;\n\n  /**\n   * The scroll data retrieved for this component.\n   *\n   * @returns The scroll data for this component if a valid {@link ScrollToTop.scrollId} has been\n   * passed. Otherwise it returns `null`.\n   * @internal\n   */\n  protected get scrollData(): ScrollComponentState {\n    return this.scrollId && this.scrollPositionsMap[this.scrollId]\n      ? this.scrollPositionsMap[this.scrollId]\n      : {\n          position: 0,\n          direction: 'UP',\n          hasReachedStart: false,\n          hasAlmostReachedEnd: false,\n          hasReachedEnd: false\n        };\n  }\n\n  /**\n   * Event that will be emitted when the scroll to top is clicked.\n   *\n   * @returns The event to be emitted when the scroll to top is clicked. The id as a payload.\n   * @internal\n   */\n  protected get events(): Partial<XEventsTypes> {\n    return { UserClickedScrollToTop: this.scrollId };\n  }\n\n  /**\n   * Checks if the thresholdPx prop has been provided and if it is a number.\n   *\n   * @returns If the thresholdPx is a number or not.\n   * @internal\n   */\n  protected get useThresholdStrategy(): boolean {\n    return typeof this.thresholdPx === 'number';\n  }\n\n  /**\n   * Checks if the threshold has been reached in case the threshold strategy is in use.\n   *\n   * @returns If the scrollTop is bigger than the thresholdPx.\n   * @internal\n   */\n  protected get isThresholdReached(): boolean {\n    return this.useThresholdStrategy && this.scrollData.position > this.thresholdPx!;\n  }\n\n  /**\n   * Whether if the button is visible or not depending on the strategy being used.\n   *\n   * @returns If the button should be visible or not.\n   * @internal\n   */\n  protected get isVisible(): boolean {\n    return this.useThresholdStrategy ? this.isThresholdReached : this.hasAlmostReachedScrollEnd;\n  }\n\n  /**\n   * Returns if the scroll has almost reached its end or not.\n   *\n   * @returns True if the scroll has almost reached the end and the user is still scrolling down.\n   * @internal\n   */\n  protected get hasAlmostReachedScrollEnd(): boolean {\n    return this.scrollData.hasAlmostReachedEnd && this.scrollData.direction === 'DOWN';\n  }\n}\n"],"names":["BaseEventButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA;;;;;;AAUA,IAAqB,WAAW,GAAhC,MAAqB,WAAY,SAAQ,GAAG;;;;;;;;IAyC1C,IAAc,UAAU;QACtB,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CAAC;cAC1D,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CAAC;cACtC;gBACE,QAAQ,EAAE,CAAC;gBACX,SAAS,EAAE,IAAI;gBACf,eAAe,EAAE,KAAK;gBACtB,mBAAmB,EAAE,KAAK;gBAC1B,aAAa,EAAE,KAAK;aACrB,CAAC;KACP;;;;;;;IAQD,IAAc,MAAM;QAClB,OAAO,EAAE,sBAAsB,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;KAClD;;;;;;;IAQD,IAAc,oBAAoB;QAChC,OAAO,OAAO,IAAI,CAAC,WAAW,KAAK,QAAQ,CAAC;KAC7C;;;;;;;IAQD,IAAc,kBAAkB;QAC9B,OAAO,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,UAAU,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAY,CAAC;KAClF;;;;;;;IAQD,IAAc,SAAS;QACrB,OAAO,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,yBAAyB,CAAC;KAC7F;;;;;;;IAQD,IAAc,yBAAyB;QACrC,OAAO,IAAI,CAAC,UAAU,CAAC,mBAAmB,IAAI,IAAI,CAAC,UAAU,CAAC,SAAS,KAAK,MAAM,CAAC;KACpF;CACF,CAAA;AA/FC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,SAAS,EAAE,CAAC;8CACH;AAQhC;IADC,IAAI,EAAE;gDACqB;AAQ5B;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC;6CACP;AASzB;IADC,KAAK,CAAC,QAAQ,EAAE,MAAM,CAAC;uDACqC;AAhC1C,WAAW;IAJ/B,SAAS,CAAC;QACT,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;QACxC,UAAU,EAAE,mBAAEA,iBAAe,EAAE;KAChC,CAAC;GACmB,WAAW,CAsG/B;aAtGoB,WAAW;;;;"}
+{"version":3,"file":"scroll-to-top.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/scroll/components/scroll-to-top.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { Dictionary } from '@empathyco/x-utils';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { State, xComponentMixin } from '../../../components';\nimport BaseEventButton from '../../../components/base-event-button.vue';\nimport { NoElement } from '../../../components/no-element';\nimport { XEventsTypes } from '../../../wiring';\nimport { ScrollComponentState } from '../store';\nimport { scrollXModule } from '../x-module';\nimport { MainScrollId } from './scroll.const';\n\n/**\n * The `ScrollToTop` component is a button that the user can click to make a container scroll\n * up to its initial position.\n *\n * @public\n */\n@Component({\n  mixins: [xComponentMixin(scrollXModule)],\n  components: { BaseEventButton }\n})\nexport default class ScrollToTop extends Vue {\n  /**\n   * Animation to use for showing/hiding the button.\n   *\n   * @public\n   */\n  @Prop({ default: () => NoElement })\n  public animation!: Vue | string;\n\n  /**\n   * Threshold in pixels from the top to show the button.\n   *\n   * @public\n   */\n  @Prop()\n  public thresholdPx?: number;\n\n  /**\n   * Id of the target scroll component.\n   *\n   * @public\n   */\n  @Prop({ default: MainScrollId })\n  public scrollId!: string;\n\n  /**\n   * State of all the scroll components in this module.\n   *\n   * @internal\n   */\n  // TODO: Directly retrieve the needed data in this computed property\n  @State('scroll', 'data')\n  public scrollPositionsMap!: Dictionary<ScrollComponentState>;\n\n  /**\n   * The scroll data retrieved for this component.\n   *\n   * @returns The scroll data for this component if a valid {@link ScrollToTop.scrollId} has been\n   * passed. Otherwise it returns `null`.\n   * @internal\n   */\n  protected get scrollData(): ScrollComponentState {\n    return this.scrollId && this.scrollPositionsMap[this.scrollId]\n      ? this.scrollPositionsMap[this.scrollId]\n      : {\n          position: 0,\n          direction: 'UP',\n          hasReachedStart: false,\n          hasAlmostReachedEnd: false,\n          hasReachedEnd: false\n        };\n  }\n\n  /**\n   * Event that will be emitted when the scroll to top is clicked.\n   *\n   * @returns The event to be emitted when the scroll to top is clicked. The id as a payload.\n   * @internal\n   */\n  protected get events(): Partial<XEventsTypes> {\n    return { UserClickedScrollToTop: this.scrollId };\n  }\n\n  /**\n   * Checks if the thresholdPx prop has been provided and if it is a number.\n   *\n   * @returns If the thresholdPx is a number or not.\n   * @internal\n   */\n  protected get useThresholdStrategy(): boolean {\n    return typeof this.thresholdPx === 'number';\n  }\n\n  /**\n   * Checks if the threshold has been reached in case the threshold strategy is in use.\n   *\n   * @returns If the scrollTop is bigger than the thresholdPx.\n   * @internal\n   */\n  protected get isThresholdReached(): boolean {\n    return this.useThresholdStrategy && this.scrollData.position > this.thresholdPx!;\n  }\n\n  /**\n   * Whether if the button is visible or not depending on the strategy being used.\n   *\n   * @returns If the button should be visible or not.\n   * @internal\n   */\n  protected get isVisible(): boolean {\n    return this.useThresholdStrategy ? this.isThresholdReached : this.hasAlmostReachedScrollEnd;\n  }\n\n  /**\n   * Returns if the scroll has almost reached its end or not.\n   *\n   * @returns True if the scroll has almost reached the end and the user is still scrolling down.\n   * @internal\n   */\n  protected get hasAlmostReachedScrollEnd(): boolean {\n    return this.scrollData.hasAlmostReachedEnd && this.scrollData.direction === 'DOWN';\n  }\n}\n"],"names":["BaseEventButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA;;;;;;AAUA,IAAqB,WAAW,GAAhC,MAAqB,WAAY,SAAQ,GAAG;;;;;;;;IAyC1C,IAAc,UAAU;QACtB,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CAAC;cAC1D,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CAAC;cACtC;gBACE,QAAQ,EAAE,CAAC;gBACX,SAAS,EAAE,IAAI;gBACf,eAAe,EAAE,KAAK;gBACtB,mBAAmB,EAAE,KAAK;gBAC1B,aAAa,EAAE,KAAK;aACrB,CAAC;KACP;;;;;;;IAQD,IAAc,MAAM;QAClB,OAAO,EAAE,sBAAsB,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;KAClD;;;;;;;IAQD,IAAc,oBAAoB;QAChC,OAAO,OAAO,IAAI,CAAC,WAAW,KAAK,QAAQ,CAAC;KAC7C;;;;;;;IAQD,IAAc,kBAAkB;QAC9B,OAAO,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,UAAU,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAY,CAAC;KAClF;;;;;;;IAQD,IAAc,SAAS;QACrB,OAAO,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,yBAAyB,CAAC;KAC7F;;;;;;;IAQD,IAAc,yBAAyB;QACrC,OAAO,IAAI,CAAC,UAAU,CAAC,mBAAmB,IAAI,IAAI,CAAC,UAAU,CAAC,SAAS,KAAK,MAAM,CAAC;KACpF;CACF,CAAA;AA/FC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,SAAS,EAAE,CAAC;8CACH;AAQhC;IADC,IAAI,EAAE;gDACqB;AAQ5B;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC;6CACP;AASzB;IADC,KAAK,CAAC,QAAQ,EAAE,MAAM,CAAC;uDACqC;AAhC1C,WAAW;IAJ/B,SAAS,CAAC;QACT,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;QACxC,UAAU,EAAE,mBAAEA,iBAAe,EAAE;KAChC,CAAC;GACmB,WAAW,CAsG/B;aAtGoB,WAAW;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "3.0.0-alpha.214",
+  "version": "3.0.0-alpha.216",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -85,7 +85,7 @@
     "@cypress/vue": "~2.2.4",
     "@cypress/webpack-dev-server": "~1.8.4",
     "@empathyco/x-adapter-platform": "^1.0.0-alpha.42",
-    "@empathyco/x-tailwindcss": "^0.2.0-alpha.24",
+    "@empathyco/x-tailwindcss": "^0.2.0-alpha.25",
     "@microsoft/api-documenter": "~7.15.3",
     "@microsoft/api-extractor": "~7.19.4",
     "@rollup/plugin-commonjs": "~21.0.1",
@@ -135,5 +135,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "ed3581dc0a33af013f9db896449c8089c65300ac"
+  "gitHead": "4300b0187a96526a20d56ca633d63c7f6e15ab7a"
 }

package/report/x-components.api.json

@@ -36666,7 +36666,7 @@
             {
               "kind": "Property",
               "canonicalReference": "@empathyco/x-components!RemoveHistoryQuery#removeHistoryQueryEvent:member",
-              "docComment": "/**\n * The event handler that will be triggered when clicking on the clear history query button.\n *\n * @remarks\n *\n * * {@link HistoryQueriesXEvents.UserPressedRemoveHistoryQuery}: historyQuery\n *\n * @returns The {@link XEvent | XEvents} to emit.\n *\n * @public\n */\n",
+              "docComment": "/**\n * The event handler that will be triggered when clicking on the clear history query button.\n *\n * @remarks\n *\n * {@link HistoryQueriesXEvents.UserPressedRemoveHistoryQuery}: historyQuery\n *\n * @returns The {@link XEvent | XEvents} to emit.\n *\n * @public\n */\n",
               "excerptTokens": [
                 {
                   "kind": "Content",

package/types/components/column-picker/base-column-picker-list.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-column-picker-list.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../src/components/column-picker/base-column-picker-list.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAiCA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAG5C,OAAO,iBAAiB,MAAM,uBAAuB,CAAC;AAEtD,UAAU,gBAAgB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,aAAa,CAAC;IAC1B,MAAM,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC9B,UAAU,EAAE,OAAO,CAAC;CACrB;;AAED;;;;;;;;;GASG;AAIH,MAAM,CAAC,OAAO,OAAO,oBAAqB,SAAQ,yBAGjD;IACC;;;;;;OAMG;IACH,SAAS,KAAK,qBAAqB,IAAI,gBAAgB,EAAE,CAgBxD;CACF"}
+{"version":3,"file":"base-column-picker-list.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../src/components/column-picker/base-column-picker-list.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAkCA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAG5C,OAAO,iBAAiB,MAAM,uBAAuB,CAAC;AAEtD,UAAU,gBAAgB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,aAAa,CAAC;IAC1B,MAAM,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC9B,UAAU,EAAE,OAAO,CAAC;CACrB;;AAED;;;;;;;;;GASG;AAIH,MAAM,CAAC,OAAO,OAAO,oBAAqB,SAAQ,yBAGjD;IACC;;;;;;OAMG;IACH,SAAS,KAAK,qBAAqB,IAAI,gBAAgB,EAAE,CAgBxD;CACF"}

package/types/components/panels/base-id-toggle-panel-button.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-id-toggle-panel-button.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../src/components/panels/base-id-toggle-panel-button.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAaA,OAAO,GAAG,MAAM,KAAK,CAAC;AAEtB,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAIzD;;;;;;;;GAQG;AAIH,MAAM,CAAC,OAAO,OAAO,uBAAwB,SAAQ,GAAG;IACtD;;OAEG;IACH,SAAS,CAAC,WAAW,UAAS;IAE9B,yDAAyD;IAEzD,SAAS,CAAC,OAAO,EAAG,MAAM,CAAC;IAE3B;;;;;;OAMG;IACH,SAAS,KAAK,MAAM,IAAI,OAAO,CAAC,YAAY,CAAC,CAE5C;IAED;;;;;;OAMG;IAEH,gBAAgB,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,YAAY,GAAG,IAAI;CAKhE"}
+{"version":3,"file":"base-id-toggle-panel-button.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../src/components/panels/base-id-toggle-panel-button.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAcA,OAAO,GAAG,MAAM,KAAK,CAAC;AAEtB,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAIzD;;;;;;;;GAQG;AAIH,MAAM,CAAC,OAAO,OAAO,uBAAwB,SAAQ,GAAG;IACtD;;OAEG;IACH,SAAS,CAAC,WAAW,UAAS;IAE9B,yDAAyD;IAEzD,SAAS,CAAC,OAAO,EAAG,MAAM,CAAC;IAE3B;;;;;;OAMG;IACH,SAAS,KAAK,MAAM,IAAI,OAAO,CAAC,YAAY,CAAC,CAE5C;IAED;;;;;;OAMG;IAEH,gBAAgB,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,YAAY,GAAG,IAAI;CAKhE"}

package/types/router.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../../src/router.ts"],"names":[],"mappings":"AACA,OAAO,SAA0B,MAAM,YAAY,CAAC;AA6EpD,QAAA,MAAM,MAAM,WAGV,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../../src/router.ts"],"names":[],"mappings":"AACA,OAAO,SAA0B,MAAM,YAAY,CAAC;AAkFpD,QAAA,MAAM,MAAM,WAGV,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/types/x-modules/history-queries/components/clear-history-queries.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"clear-history-queries.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/history-queries/components/clear-history-queries.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,GAAG,MAAM,KAAK,CAAC;AAKtB,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAG5D;;;;;;GAMG;AAKH,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,GAAG;IAClD;;;;OAIG;IAEI,cAAc,EAAG,YAAY,EAAE,CAAC;IAEvC;;;;;OAKG;IACH,SAAS,KAAK,qBAAqB,IAAI,OAAO,CAE7C;IAED;;;;;;OAMG;IACH,SAAS,KAAK,cAAc,IAAI,aAAa,CAI5C;IAED;;;;OAIG;IACH,SAAS,CAAC,yBAAyB,EAAE,OAAO,CAAC,YAAY,CAAC,CAExD;CACH"}
+{"version":3,"file":"clear-history-queries.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/history-queries/components/clear-history-queries.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,GAAG,MAAM,KAAK,CAAC;AAKtB,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAG5D;;;;;;GAMG;AAKH,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,GAAG;IAClD;;;;OAIG;IAEI,cAAc,EAAG,YAAY,EAAE,CAAC;IAEvC;;;;;OAKG;IACH,SAAS,KAAK,qBAAqB,IAAI,OAAO,CAE7C;IAED;;;;;;OAMG;IACH,SAAS,KAAK,cAAc,IAAI,aAAa,CAI5C;IAED;;;;OAIG;IACH,SAAS,CAAC,yBAAyB,EAAE,OAAO,CAAC,YAAY,CAAC,CAExD;CACH"}

package/types/x-modules/history-queries/components/remove-history-query.vue.d.ts

@@ -19,7 +19,7 @@ export default class RemoveHistoryQuery extends Vue {
      * The event handler that will be triggered when clicking on the clear history query button.
      *
      * @remarks
-     * * {@link HistoryQueriesXEvents.UserPressedRemoveHistoryQuery}: historyQuery
+     * {@link HistoryQueriesXEvents.UserPressedRemoveHistoryQuery}: historyQuery
      *
      * @returns The {@link XEvent | XEvents} to emit.
      * @public

package/types/x-modules/history-queries/components/remove-history-query.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"remove-history-query.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/history-queries/components/remove-history-query.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,GAAG,MAAM,KAAK,CAAC;AAItB,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAG5D;;;;;;GAMG;AAKH,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,GAAG;IACjD;;;;OAIG;IAEH,SAAS,CAAC,YAAY,EAAG,YAAY,CAAC;IAEtC;;;;;;;;OAQG;IACH,SAAS,KAAK,uBAAuB,IAAI,OAAO,CAAC,YAAY,CAAC,CAE7D;CACF"}
+{"version":3,"file":"remove-history-query.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/history-queries/components/remove-history-query.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,GAAG,MAAM,KAAK,CAAC;AAItB,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAG5D;;;;;;GAMG;AAKH,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,GAAG;IACjD;;;;OAIG;IAEH,SAAS,CAAC,YAAY,EAAG,YAAY,CAAC;IAEtC;;;;;;;;OAQG;IACH,SAAS,KAAK,uBAAuB,IAAI,OAAO,CAAC,YAAY,CAAC,CAE7D;CACF"}

package/types/x-modules/scroll/components/scroll-to-top.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-to-top.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/scroll/components/scroll-to-top.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,GAAG,MAAM,KAAK,CAAC;AAKtB,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAIhD;;;;;GAKG;AAKH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,GAAG;IAC1C;;;;OAIG;IAEI,SAAS,EAAG,GAAG,GAAG,MAAM,CAAC;IAEhC;;;;OAIG;IAEI,WAAW,CAAC,EAAE,MAAM,CAAC;IAE5B;;;;OAIG;IAEI,QAAQ,EAAG,MAAM,CAAC;IAEzB;;;;OAIG;IAGI,kBAAkB,EAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAE7D;;;;;;OAMG;IACH,SAAS,KAAK,UAAU,IAAI,oBAAoB,CAU/C;IAED;;;;;OAKG;IACH,SAAS,KAAK,MAAM,IAAI,OAAO,CAAC,YAAY,CAAC,CAE5C;IAED;;;;;OAKG;IACH,SAAS,KAAK,oBAAoB,IAAI,OAAO,CAE5C;IAED;;;;;OAKG;IACH,SAAS,KAAK,kBAAkB,IAAI,OAAO,CAE1C;IAED;;;;;OAKG;IACH,SAAS,KAAK,SAAS,IAAI,OAAO,CAEjC;IAED;;;;;OAKG;IACH,SAAS,KAAK,yBAAyB,IAAI,OAAO,CAEjD;CACF"}
+{"version":3,"file":"scroll-to-top.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/scroll/components/scroll-to-top.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAiBA,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,GAAG,MAAM,KAAK,CAAC;AAKtB,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAIhD;;;;;GAKG;AAKH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,GAAG;IAC1C;;;;OAIG;IAEI,SAAS,EAAG,GAAG,GAAG,MAAM,CAAC;IAEhC;;;;OAIG;IAEI,WAAW,CAAC,EAAE,MAAM,CAAC;IAE5B;;;;OAIG;IAEI,QAAQ,EAAG,MAAM,CAAC;IAEzB;;;;OAIG;IAGI,kBAAkB,EAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAE7D;;;;;;OAMG;IACH,SAAS,KAAK,UAAU,IAAI,oBAAoB,CAU/C;IAED;;;;;OAKG;IACH,SAAS,KAAK,MAAM,IAAI,OAAO,CAAC,YAAY,CAAC,CAE5C;IAED;;;;;OAKG;IACH,SAAS,KAAK,oBAAoB,IAAI,OAAO,CAE5C;IAED;;;;;OAKG;IACH,SAAS,KAAK,kBAAkB,IAAI,OAAO,CAE1C;IAED;;;;;OAKG;IACH,SAAS,KAAK,SAAS,IAAI,OAAO,CAEjC;IAED;;;;;OAKG;IACH,SAAS,KAAK,yBAAyB,IAAI,OAAO,CAEjD;CACF"}