@empathyco/x-components 3.0.0-alpha.30 → 3.0.0-alpha.34

package/js/x-modules/next-queries/components/next-queries.vue.js

@@ -5,7 +5,7 @@ import script from './next-queries.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -15,19 +15,19 @@ var __vue_render__ = function() {
       suggestions: _vm.nextQueries,
       "data-test": "next-queries",
       animation: _vm.animation,
-      maxItemsToRender: _vm.maxItemsToRender
+      maxItemsToRender: _vm.maxItemsToRender,
     },
     scopedSlots: _vm._u(
       [
         {
           key: "default",
-          fn: function(ref) {
+          fn: function (ref) {
             var suggestion = ref.suggestion;
             var index = ref.index;
             return [
               _vm._t(
                 "suggestion",
-                function() {
+                function () {
                   return [
                     _c("NextQuery", {
                       staticClass: "x-next-queries__suggestion",
@@ -36,33 +36,28 @@ var __vue_render__ = function() {
                         [
                           {
                             key: "default",
-                            fn: function() {
+                            fn: function () {
                               return [
                                 _vm._t("suggestion-content", null, null, {
                                   suggestion: suggestion,
-                                  index: index
-                                })
-                              ]
+                                  index: index,
+                                }) ]
                             },
-                            proxy: true
-                          }
-                        ],
+                            proxy: true,
+                          } ],
                         null,
                         true
-                      )
-                    })
-                  ]
+                      ),
+                    }) ]
                 },
                 null,
                 { suggestion: suggestion, index: index }
-              )
-            ]
-          }
-        }
-      ],
+              ) ]
+          },
+        } ],
       null,
       true
-    )
+    ),
   })
 };
 var __vue_staticRenderFns__ = [];

package/js/x-modules/next-queries/components/next-queries.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"next-queries.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-queries.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    :suggestions=\"nextQueries\"\n    data-test=\"next-queries\"\n    class=\"x-next-queries\"\n    :animation=\"animation\"\n    :maxItemsToRender=\"maxItemsToRender\"\n  >\n    <template #default=\"{ suggestion, index }\">\n      <!--\n        @slot Next Query item\n            @binding {Suggestion} suggestion - Next Query suggestion data\n            @binding {number} index - Next Query suggestion index\n      -->\n      <slot name=\"suggestion\" v-bind=\"{ suggestion, index }\">\n        <NextQuery :suggestion=\"suggestion\" class=\"x-next-queries__suggestion\">\n          <template #default>\n            <!--\n              @slot Next Query content\n                  @binding {Suggestion} suggestion - Next Query suggestion data\n                  @binding {number} index - Next Query suggestion index\n            -->\n            <slot name=\"suggestion-content\" v-bind=\"{ suggestion, index }\" />\n          </template>\n        </NextQuery>\n      </slot>\n    </template>\n  </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\n  import { NextQuery as NextQueryModel } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';\n  import { Getter } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { nextQueriesXModule } from '../x-module';\n  import NextQuery from './next-query.vue';\n\n  /**\n   * Simple next-queries component that renders a list of suggestions, allowing the user to\n   * select one of them, and emitting the needed events.\n   * A next query is a suggestion for a new search, related to your previous query. I.e. If\n   * people normally search for `shirts`, and then `trousers`, `trousers` would be a next query\n   * of `shirts`.\n   *\n   * @public\n   */\n  @Component({\n    components: { NextQuery, BaseSuggestions },\n    mixins: [xComponentMixin(nextQueriesXModule)]\n  })\n  export default class NextQueries extends Vue {\n    /**\n     * Animation component that will be used to animate the suggestions.\n     *\n     * @public\n     */\n    @Prop()\n    protected animation!: Vue;\n\n    /**\n     * Number of next queries to be rendered.\n     *\n     * @public\n     */\n    @Prop()\n    protected maxItemsToRender?: number;\n\n    /**\n     * The list of next queries.\n     *\n     * @internal\n     */\n    @Getter('nextQueries', 'nextQueries')\n    public nextQueries!: NextQueryModel[];\n  }\n</script>\n\n<docs lang=\"mdx\">\n# Examples\n\n## Basic example\n\nYou don't need to pass any props, or slots. Simply add the component, and when it has any next\nqueries it will show them\n\n```vue\n<NextQueries />\n```\n\nThe component has two optional props. `animation` to render the component with an animation and\n`maxItemToRender` to limit the number of next queries will be rendered (by default it is 5).\n\n```vue\n<NextQueries :animation=\"FadeAndSlide\" :maxItemsToRender=\"10\" />\n```\n\n## Overriding Next Queries' Content\n\nYou can use your custom implementation of the Next Query's content. In the example below, instead of\nusing the default Next Query's content, an icon is added, as well as a span with the query of the\nNext Query suggestion.\n\n```vue\n<NextQueries>\n  <template #suggestion-content=\"{suggestion}\">\n    <img src=\"./next-query-icon.svg\" class=\"x-next-query__icon\"/>\n    <span class=\"x-next-query__query\">{{ suggestion.query }}</span>\n  </template>\n</NextQueries>\n```\n\n## Adding a custom next query component\n\nYou can use your custom implementation of a next query component. To work correctly, it should use\nthe `emitNextQuerySelected` function when the next query is selected. In the example below, instead\nof using the default `button` tag for a next query, an icon is added, and the text of the next query\nis wrapped in a `span`\n\n```vue\n<NextQueries>\n  <template #suggestion=\"{suggestion}\">\n    <NextQuery :suggestion=\"suggestion\" class=\"x-next-queries__suggestion\">\n      <template #default=\"{suggestion}\">\n        <img src=\"./next-query-icon.svg\" class=\"x-next-query__icon\"/>\n        <span class=\"x-next-query__query\">{{ suggestion.query }}</span>\n      </template>\n    </NextQuery>\n    <button>Custom Behaviour</button>\n  </template>\n</NextQueries>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"next-queries.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-queries.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    :suggestions=\"nextQueries\"\n    data-test=\"next-queries\"\n    class=\"x-next-queries\"\n    :animation=\"animation\"\n    :maxItemsToRender=\"maxItemsToRender\"\n  >\n    <template #default=\"{ suggestion, index }\">\n      <!--\n        @slot Next Query item\n            @binding {Suggestion} suggestion - Next Query suggestion data\n            @binding {number} index - Next Query suggestion index\n      -->\n      <slot name=\"suggestion\" v-bind=\"{ suggestion, index }\">\n        <NextQuery :suggestion=\"suggestion\" class=\"x-next-queries__suggestion\">\n          <template #default>\n            <!--\n              @slot Next Query content\n                  @binding {Suggestion} suggestion - Next Query suggestion data\n                  @binding {number} index - Next Query suggestion index\n            -->\n            <slot name=\"suggestion-content\" v-bind=\"{ suggestion, index }\" />\n          </template>\n        </NextQuery>\n      </slot>\n    </template>\n  </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\n  import { NextQuery as NextQueryModel } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';\n  import { Getter } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { nextQueriesXModule } from '../x-module';\n  import NextQuery from './next-query.vue';\n\n  /**\n   * Simple next-queries component that renders a list of suggestions, allowing the user to\n   * select one of them, and emitting the needed events.\n   * A next query is a suggestion for a new search, related to your previous query. I.e. If\n   * people normally search for `shirts`, and then `trousers`, `trousers` would be a next query\n   * of `shirts`.\n   *\n   * @public\n   */\n  @Component({\n    components: { NextQuery, BaseSuggestions },\n    mixins: [xComponentMixin(nextQueriesXModule)]\n  })\n  export default class NextQueries extends Vue {\n    /**\n     * Animation component that will be used to animate the suggestions.\n     *\n     * @public\n     */\n    @Prop()\n    protected animation!: Vue;\n\n    /**\n     * Number of next queries to be rendered.\n     *\n     * @public\n     */\n    @Prop()\n    protected maxItemsToRender?: number;\n\n    /**\n     * The list of next queries.\n     *\n     * @internal\n     */\n    @Getter('nextQueries', 'nextQueries')\n    public nextQueries!: NextQueryModel[];\n  }\n</script>\n\n<docs lang=\"mdx\">\n# Examples\n\n## Basic example\n\nYou don't need to pass any props, or slots. Simply add the component, and when it has any next\nqueries it will show them\n\n```vue\n<NextQueries />\n```\n\nThe component has two optional props. `animation` to render the component with an animation and\n`maxItemToRender` to limit the number of next queries will be rendered (by default it is 5).\n\n```vue\n<NextQueries :animation=\"FadeAndSlide\" :maxItemsToRender=\"10\" />\n```\n\n## Overriding Next Queries' Content\n\nYou can use your custom implementation of the Next Query's content. In the example below, instead of\nusing the default Next Query's content, an icon is added, as well as a span with the query of the\nNext Query suggestion.\n\n```vue\n<NextQueries>\n  <template #suggestion-content=\"{suggestion}\">\n    <img src=\"./next-query-icon.svg\" class=\"x-next-query__icon\"/>\n    <span class=\"x-next-query__query\">{{ suggestion.query }}</span>\n  </template>\n</NextQueries>\n```\n\n## Adding a custom next query component\n\nYou can use your custom implementation of a next query component. To work correctly, it should use\nthe `emitNextQuerySelected` function when the next query is selected. In the example below, instead\nof using the default `button` tag for a next query, an icon is added, and the text of the next query\nis wrapped in a `span`\n\n```vue\n<NextQueries>\n  <template #suggestion=\"{suggestion}\">\n    <NextQuery :suggestion=\"suggestion\" class=\"x-next-queries__suggestion\">\n      <template #default=\"{suggestion}\">\n        <img src=\"./next-query-icon.svg\" class=\"x-next-query__icon\"/>\n        <span class=\"x-next-query__query\">{{ suggestion.query }}</span>\n      </template>\n    </NextQuery>\n    <button>Custom Behaviour</button>\n  </template>\n</NextQueries>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/next-queries/components/next-query.vue.js

@@ -5,7 +5,7 @@ import script from './next-query.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -14,29 +14,28 @@ var __vue_render__ = function() {
     attrs: {
       suggestion: _vm.suggestion,
       suggestionSelectedEvents: _vm.events,
-      "data-test": "next-query"
+      "data-test": "next-query",
+      feature: "next_query",
     },
     scopedSlots: _vm._u(
       [
         {
           key: "default",
-          fn: function(ref) {
+          fn: function (ref) {
             var suggestion = ref.suggestion;
             return [
               _vm._t(
                 "default",
-                function() {
+                function () {
                   return [_vm._v(_vm._s(suggestion.query))]
                 },
                 { suggestion: suggestion }
-              )
-            ]
-          }
-        }
-      ],
+              ) ]
+          },
+        } ],
       null,
       true
-    )
+    ),
   })
 };
 var __vue_staticRenderFns__ = [];

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

@@ -1 +1 @@
-{"version":3,"file":"next-query.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-query.vue"],"sourcesContent":["<template>\n  <BaseSuggestion\n    class=\"x-next-query\"\n    :suggestion=\"suggestion\"\n    :suggestionSelectedEvents=\"events\"\n    data-test=\"next-query\"\n  >\n    <template #default=\"{ suggestion }\">\n      <!--\n        @slot Next Query content\n            @binding {Suggestion} suggestion - Next Query suggestion data\n      -->\n      <slot :suggestion=\"suggestion\">{{ suggestion.query }}</slot>\n    </template>\n  </BaseSuggestion>\n</template>\n\n<script lang=\"ts\">\n  import { NextQuery as NextQueryModel } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import BaseSuggestion from '../../../components/suggestions/base-suggestion.vue';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { nextQueriesXModule } from '../x-module';\n\n  /**\n   * Renders a next query item which receives the suggestion that will be rendered as a prop. It\n   * exposes a default slot to change the next query content. If the slot is not overridden,\n   * it will render the suggestion query by default.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseSuggestion },\n    mixins: [xComponentMixin(nextQueriesXModule)]\n  })\n  export default class NextQuery extends Vue {\n    /**\n     * The suggestion to render and use in the default slot.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected suggestion!: NextQueryModel;\n\n    /**\n     * Events list which are going to be emitted when a next query is selected.\n     *\n     * @returns The {@link XEvent | XEvents} to emit.\n     * @public\n     */\n    protected get events(): Partial<XEventsTypes> {\n      return {\n        UserSelectedANextQuery: this.suggestion\n      };\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n# Examples\n\nThis components expects just a suggestion as a prop to be rendered. It has a slot to override the\ncontent. By default, it renders the suggestion query of the next query.\n\n## Basic Usage\n\nUsing default slot:\n\n```vue\n<NextQuery :suggestion=\"suggestion\" />\n```\n\n## Overriding default slot.\n\nThe default slot allows you to replace the content of the suggestion button.\n\n```vue\n<NextQuery :suggestion=\"suggestion\">\n  <template #default=\"{ suggestion }\">\n    <img class=\"x-next-query__icon\" src=\"./next-query.svg\" />\n    <span class=\"x-next-query__query\" :aria-label=\"suggestion.query\">{{ suggestion.query }}</span>\n  </template>\n</NextQuery>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserSelectedANextQuery`: the event is emitted after the user clicks the button. The event payload\n  is the next query data.\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"next-query.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-query.vue"],"sourcesContent":["<template>\n  <BaseSuggestion\n    class=\"x-next-query\"\n    :suggestion=\"suggestion\"\n    :suggestionSelectedEvents=\"events\"\n    data-test=\"next-query\"\n    feature=\"next_query\"\n  >\n    <template #default=\"{ suggestion }\">\n      <!--\n        @slot Next Query content\n            @binding {Suggestion} suggestion - Next Query suggestion data\n      -->\n      <slot :suggestion=\"suggestion\">{{ suggestion.query }}</slot>\n    </template>\n  </BaseSuggestion>\n</template>\n\n<script lang=\"ts\">\n  import { NextQuery as NextQueryModel } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import BaseSuggestion from '../../../components/suggestions/base-suggestion.vue';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { nextQueriesXModule } from '../x-module';\n\n  /**\n   * Renders a next query item which receives the suggestion that will be rendered as a prop. It\n   * exposes a default slot to change the next query content. If the slot is not overridden,\n   * it will render the suggestion query by default.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseSuggestion },\n    mixins: [xComponentMixin(nextQueriesXModule)]\n  })\n  export default class NextQuery extends Vue {\n    /**\n     * The suggestion to render and use in the default slot.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected suggestion!: NextQueryModel;\n\n    /**\n     * Events list which are going to be emitted when a next query is selected.\n     *\n     * @returns The {@link XEvent | XEvents} to emit.\n     * @public\n     */\n    protected get events(): Partial<XEventsTypes> {\n      return {\n        UserSelectedANextQuery: this.suggestion\n      };\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n# Examples\n\nThis components expects just a suggestion as a prop to be rendered. It has a slot to override the\ncontent. By default, it renders the suggestion query of the next query.\n\n## Basic Usage\n\nUsing default slot:\n\n```vue\n<NextQuery :suggestion=\"suggestion\" />\n```\n\n## Overriding default slot.\n\nThe default slot allows you to replace the content of the suggestion button.\n\n```vue\n<NextQuery :suggestion=\"suggestion\">\n  <template #default=\"{ suggestion }\">\n    <img class=\"x-next-query__icon\" src=\"./next-query.svg\" />\n    <span class=\"x-next-query__query\" :aria-label=\"suggestion.query\">{{ suggestion.query }}</span>\n  </template>\n</NextQuery>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserSelectedANextQuery`: the event is emitted after the user clicks the button. The event payload\n  is the next query data.\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/next-queries/components/next-query.vue_rollup-plugin-vue=script.js.map

@@ -1 +1 @@
-{"version":3,"file":"next-query.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/next-queries/components/next-query.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { NextQuery as NextQueryModel } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport BaseSuggestion from '../../../components/suggestions/base-suggestion.vue';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { XEventsTypes } from '../../../wiring/events.types';\nimport { nextQueriesXModule } from '../x-module';\n\n/**\n * Renders a next query item which receives the suggestion that will be rendered as a prop. It\n * exposes a default slot to change the next query content. If the slot is not overridden,\n * it will render the suggestion query by default.\n *\n * @public\n */\n@Component({\n  components: { BaseSuggestion },\n  mixins: [xComponentMixin(nextQueriesXModule)]\n})\nexport default class NextQuery extends Vue {\n  /**\n   * The suggestion to render and use in the default slot.\n   *\n   * @public\n   */\n  @Prop({ required: true })\n  protected suggestion!: NextQueryModel;\n\n  /**\n   * Events list which are going to be emitted when a next query is selected.\n   *\n   * @returns The {@link XEvent | XEvents} to emit.\n   * @public\n   */\n  protected get events(): Partial<XEventsTypes> {\n    return {\n      UserSelectedANextQuery: this.suggestion\n    };\n  }\n}\n"],"names":[],"mappings":";;;;;;;AA0BA;;;;;;;AAWA;IAAuC,6BAAG;IAA1C;;KAoBC;IALC,sBAAc,6BAAM;;;;;;;aAApB;YACE,OAAO;gBACL,sBAAsB,EAAE,IAAI,CAAC,UAAU;aACxC,CAAC;SACH;;;OAAA;IAZD;QADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;iDACa;IAPnB,SAAS;QAJ7B,SAAS,CAAC;YACT,UAAU,EAAE,EAAE,cAAc,gBAAA,EAAE;YAC9B,MAAM,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;SAC9C,CAAC;OACmB,SAAS,CAoB7B;IAAD,gBAAC;CAAA,CApBsC,GAAG;;;;"}
+{"version":3,"file":"next-query.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/next-queries/components/next-query.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\nimport { NextQuery as NextQueryModel } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport BaseSuggestion from '../../../components/suggestions/base-suggestion.vue';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { XEventsTypes } from '../../../wiring/events.types';\nimport { nextQueriesXModule } from '../x-module';\n\n/**\n * Renders a next query item which receives the suggestion that will be rendered as a prop. It\n * exposes a default slot to change the next query content. If the slot is not overridden,\n * it will render the suggestion query by default.\n *\n * @public\n */\n@Component({\n  components: { BaseSuggestion },\n  mixins: [xComponentMixin(nextQueriesXModule)]\n})\nexport default class NextQuery extends Vue {\n  /**\n   * The suggestion to render and use in the default slot.\n   *\n   * @public\n   */\n  @Prop({ required: true })\n  protected suggestion!: NextQueryModel;\n\n  /**\n   * Events list which are going to be emitted when a next query is selected.\n   *\n   * @returns The {@link XEvent | XEvents} to emit.\n   * @public\n   */\n  protected get events(): Partial<XEventsTypes> {\n    return {\n      UserSelectedANextQuery: this.suggestion\n    };\n  }\n}\n"],"names":[],"mappings":";;;;;;;AA2BA;;;;;;;AAWA;IAAuC,6BAAG;IAA1C;;KAoBC;IALC,sBAAc,6BAAM;;;;;;;aAApB;YACE,OAAO;gBACL,sBAAsB,EAAE,IAAI,CAAC,UAAU;aACxC,CAAC;SACH;;;OAAA;IAZD;QADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;iDACa;IAPnB,SAAS;QAJ7B,SAAS,CAAC;YACT,UAAU,EAAE,EAAE,cAAc,gBAAA,EAAE;YAC9B,MAAM,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;SAC9C,CAAC;OACmB,SAAS,CAoB7B;IAAD,gBAAC;CAAA,CApBsC,GAAG;;;;"}

package/js/x-modules/popular-searches/components/popular-search.vue.js

@@ -5,7 +5,7 @@ import script from './popular-search.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -14,29 +14,28 @@ var __vue_render__ = function() {
     attrs: {
       suggestion: _vm.suggestion,
       suggestionSelectedEvents: _vm.events,
-      "data-test": "popular-search"
+      "data-test": "popular-search",
+      feature: "popular_search",
     },
     scopedSlots: _vm._u(
       [
         {
           key: "default",
-          fn: function(ref) {
+          fn: function (ref) {
             var suggestion = ref.suggestion;
             return [
               _vm._t(
                 "default",
-                function() {
+                function () {
                   return [_vm._v(_vm._s(suggestion.query))]
                 },
                 { suggestion: suggestion }
-              )
-            ]
-          }
-        }
-      ],
+              ) ]
+          },
+        } ],
       null,
       true
-    )
+    ),
   })
 };
 var __vue_staticRenderFns__ = [];

package/js/x-modules/popular-searches/components/popular-search.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"popular-search.vue.js","sources":["../../../../../src/x-modules/popular-searches/components/popular-search.vue"],"sourcesContent":["<template>\n  <BaseSuggestion\n    class=\"x-popular-search\"\n    :suggestion=\"suggestion\"\n    :suggestionSelectedEvents=\"events\"\n    data-test=\"popular-search\"\n  >\n    <template #default=\"{ suggestion }\">\n      <!--\n        @slot Popular Search's content\n            @binding {Suggestion} suggestion - Popular Search suggestion data\n      -->\n      <slot :suggestion=\"suggestion\">{{ suggestion.query }}</slot>\n    </template>\n  </BaseSuggestion>\n</template>\n\n<script lang=\"ts\">\n  import { Suggestion } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import BaseSuggestion from '../../../components/suggestions/base-suggestion.vue';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { popularSearchesXModule } from '../x-module';\n\n  /**\n   * Renders a popular search item which receives the suggestion that will be rendered as a prop. It\n   * exposes a default slot to change the popular search content. If the slot is not overridden,\n   * it will render the suggestion query by default.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseSuggestion },\n    mixins: [xComponentMixin(popularSearchesXModule)]\n  })\n  export default class PopularSearch extends Vue {\n    /**\n     * The suggestion to render and use in the default slot.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected suggestion!: Suggestion;\n\n    /**\n     * Events list which are going to be emitted when a popular search is selected.\n     *\n     * @returns The {@link XEvent | XEvents} to emit.\n     * @public\n     */\n    protected get events(): Partial<XEventsTypes> {\n      return {\n        UserSelectedAPopularSearch: this.suggestion\n      };\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n# Examples\n\nThis components expects just a suggestion as a prop to be rendered. It has a slot to override the\ncontent. By default, it renders the suggestion query of the popular search.\n\n## Basic Usage\n\n```vue\n<PopularSearch :suggestion=\"suggestion\" />\n```\n\n## Custom Usage\n\n```vue\n<PopularSearch :suggestion=\"suggestion\">\n  <template #default=\"{ suggestion }\">\n    <svg height=\"10\" width=\"10\">\n      <circle cx=\"5\" cy=\"5\" r=\"4\" stroke=\"black\" />\n    </svg>\n    <span :aria-label=\"suggestion.query\">{{ suggestion.query }}</span>\n  </template>\n</PopularSearch>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserSelectedAPopularSearch`: the event is emitted after the user clicks the button. The event\n  payload is the popular search data.\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"popular-search.vue.js","sources":["../../../../../src/x-modules/popular-searches/components/popular-search.vue"],"sourcesContent":["<template>\n  <BaseSuggestion\n    class=\"x-popular-search\"\n    :suggestion=\"suggestion\"\n    :suggestionSelectedEvents=\"events\"\n    data-test=\"popular-search\"\n    feature=\"popular_search\"\n  >\n    <template #default=\"{ suggestion }\">\n      <!--\n        @slot Popular Search's content\n            @binding {Suggestion} suggestion - Popular Search suggestion data\n      -->\n      <slot :suggestion=\"suggestion\">{{ suggestion.query }}</slot>\n    </template>\n  </BaseSuggestion>\n</template>\n\n<script lang=\"ts\">\n  import { Suggestion } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import BaseSuggestion from '../../../components/suggestions/base-suggestion.vue';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { popularSearchesXModule } from '../x-module';\n\n  /**\n   * Renders a popular search item which receives the suggestion that will be rendered as a prop. It\n   * exposes a default slot to change the popular search content. If the slot is not overridden,\n   * it will render the suggestion query by default.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseSuggestion },\n    mixins: [xComponentMixin(popularSearchesXModule)]\n  })\n  export default class PopularSearch extends Vue {\n    /**\n     * The suggestion to render and use in the default slot.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected suggestion!: Suggestion;\n\n    /**\n     * Events list which are going to be emitted when a popular search is selected.\n     *\n     * @returns The {@link XEvent | XEvents} to emit.\n     * @public\n     */\n    protected get events(): Partial<XEventsTypes> {\n      return {\n        UserSelectedAPopularSearch: this.suggestion\n      };\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n# Examples\n\nThis components expects just a suggestion as a prop to be rendered. It has a slot to override the\ncontent. By default, it renders the suggestion query of the popular search.\n\n## Basic Usage\n\n```vue\n<PopularSearch :suggestion=\"suggestion\" />\n```\n\n## Custom Usage\n\n```vue\n<PopularSearch :suggestion=\"suggestion\">\n  <template #default=\"{ suggestion }\">\n    <svg height=\"10\" width=\"10\">\n      <circle cx=\"5\" cy=\"5\" r=\"4\" stroke=\"black\" />\n    </svg>\n    <span :aria-label=\"suggestion.query\">{{ suggestion.query }}</span>\n  </template>\n</PopularSearch>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserSelectedAPopularSearch`: the event is emitted after the user clicks the button. The event\n  payload is the popular search data.\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/popular-searches/components/popular-search.vue_rollup-plugin-vue=script.js.map

@@ -1 +1 @@
-{"version":3,"file":"popular-search.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/popular-searches/components/popular-search.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { Suggestion } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport BaseSuggestion from '../../../components/suggestions/base-suggestion.vue';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { XEventsTypes } from '../../../wiring/events.types';\nimport { popularSearchesXModule } from '../x-module';\n\n/**\n * Renders a popular search item which receives the suggestion that will be rendered as a prop. It\n * exposes a default slot to change the popular search content. If the slot is not overridden,\n * it will render the suggestion query by default.\n *\n * @public\n */\n@Component({\n  components: { BaseSuggestion },\n  mixins: [xComponentMixin(popularSearchesXModule)]\n})\nexport default class PopularSearch extends Vue {\n  /**\n   * The suggestion to render and use in the default slot.\n   *\n   * @public\n   */\n  @Prop({ required: true })\n  protected suggestion!: Suggestion;\n\n  /**\n   * Events list which are going to be emitted when a popular search is selected.\n   *\n   * @returns The {@link XEvent | XEvents} to emit.\n   * @public\n   */\n  protected get events(): Partial<XEventsTypes> {\n    return {\n      UserSelectedAPopularSearch: this.suggestion\n    };\n  }\n}\n"],"names":[],"mappings":";;;;;;;AA0BA;;;;;;;AAWA;IAA2C,iCAAG;IAA9C;;KAoBC;IALC,sBAAc,iCAAM;;;;;;;aAApB;YACE,OAAO;gBACL,0BAA0B,EAAE,IAAI,CAAC,UAAU;aAC5C,CAAC;SACH;;;OAAA;IAZD;QADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;qDACS;IAPf,aAAa;QAJjC,SAAS,CAAC;YACT,UAAU,EAAE,EAAE,cAAc,gBAAA,EAAE;YAC9B,MAAM,EAAE,CAAC,eAAe,CAAC,sBAAsB,CAAC,CAAC;SAClD,CAAC;OACmB,aAAa,CAoBjC;IAAD,oBAAC;CAAA,CApB0C,GAAG;;;;"}
+{"version":3,"file":"popular-search.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/popular-searches/components/popular-search.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\nimport { Suggestion } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport BaseSuggestion from '../../../components/suggestions/base-suggestion.vue';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { XEventsTypes } from '../../../wiring/events.types';\nimport { popularSearchesXModule } from '../x-module';\n\n/**\n * Renders a popular search item which receives the suggestion that will be rendered as a prop. It\n * exposes a default slot to change the popular search content. If the slot is not overridden,\n * it will render the suggestion query by default.\n *\n * @public\n */\n@Component({\n  components: { BaseSuggestion },\n  mixins: [xComponentMixin(popularSearchesXModule)]\n})\nexport default class PopularSearch extends Vue {\n  /**\n   * The suggestion to render and use in the default slot.\n   *\n   * @public\n   */\n  @Prop({ required: true })\n  protected suggestion!: Suggestion;\n\n  /**\n   * Events list which are going to be emitted when a popular search is selected.\n   *\n   * @returns The {@link XEvent | XEvents} to emit.\n   * @public\n   */\n  protected get events(): Partial<XEventsTypes> {\n    return {\n      UserSelectedAPopularSearch: this.suggestion\n    };\n  }\n}\n"],"names":[],"mappings":";;;;;;;AA2BA;;;;;;;AAWA;IAA2C,iCAAG;IAA9C;;KAoBC;IALC,sBAAc,iCAAM;;;;;;;aAApB;YACE,OAAO;gBACL,0BAA0B,EAAE,IAAI,CAAC,UAAU;aAC5C,CAAC;SACH;;;OAAA;IAZD;QADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;qDACS;IAPf,aAAa;QAJjC,SAAS,CAAC;YACT,UAAU,EAAE,EAAE,cAAc,gBAAA,EAAE;YAC9B,MAAM,EAAE,CAAC,eAAe,CAAC,sBAAsB,CAAC,CAAC;SAClD,CAAC;OACmB,aAAa,CAoBjC;IAAD,oBAAC;CAAA,CApB0C,GAAG;;;;"}

package/js/x-modules/popular-searches/components/popular-searches.vue.js

@@ -5,7 +5,7 @@ import script from './popular-searches.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -15,19 +15,19 @@ var __vue_render__ = function() {
       suggestions: _vm.popularSearches,
       maxItemsToRender: _vm.maxItemsToRender,
       "data-test": "popular-searches",
-      animation: _vm.animation
+      animation: _vm.animation,
     },
     scopedSlots: _vm._u(
       [
         {
           key: "default",
-          fn: function(ref) {
+          fn: function (ref) {
             var suggestion = ref.suggestion;
             var index = ref.index;
             return [
               _vm._t(
                 "suggestion",
-                function() {
+                function () {
                   return [
                     _c("PopularSearch", {
                       staticClass: "x-popular-searches__suggestion",
@@ -36,33 +36,28 @@ var __vue_render__ = function() {
                         [
                           {
                             key: "default",
-                            fn: function() {
+                            fn: function () {
                               return [
                                 _vm._t("suggestion-content", null, null, {
                                   suggestion: suggestion,
-                                  index: index
-                                })
-                              ]
+                                  index: index,
+                                }) ]
                             },
-                            proxy: true
-                          }
-                        ],
+                            proxy: true,
+                          } ],
                         null,
                         true
-                      )
-                    })
-                  ]
+                      ),
+                    }) ]
                 },
                 null,
                 { suggestion: suggestion, index: index }
-              )
-            ]
-          }
-        }
-      ],
+              ) ]
+          },
+        } ],
       null,
       true
-    )
+    ),
   })
 };
 var __vue_staticRenderFns__ = [];

package/js/x-modules/popular-searches/components/popular-searches.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"popular-searches.vue.js","sources":["../../../../../src/x-modules/popular-searches/components/popular-searches.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    :suggestions=\"popularSearches\"\n    :maxItemsToRender=\"maxItemsToRender\"\n    class=\"x-popular-searches\"\n    data-test=\"popular-searches\"\n    :animation=\"animation\"\n  >\n    <template #default=\"{ suggestion, index }\">\n      <!--\n        @slot Popular Search item\n            @binding {Suggestion} suggestion - Popular Search suggestion data\n            @binding {number} index - Popular Search suggestion index\n      -->\n      <slot name=\"suggestion\" v-bind=\"{ suggestion, index }\">\n        <PopularSearch :suggestion=\"suggestion\" class=\"x-popular-searches__suggestion\">\n          <template #default>\n            <!--\n              @slot Popular Search content\n                  @binding {Suggestion} suggestion - Popular Search suggestion data\n                  @binding {number} index - Popular Search suggestion index\n            -->\n            <slot name=\"suggestion-content\" v-bind=\"{ suggestion, index }\" />\n          </template>\n        </PopularSearch>\n      </slot>\n    </template>\n  </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\n  import { Suggestion } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';\n  import { Getter } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { popularSearchesXModule } from '../x-module';\n  import PopularSearch from './popular-search.vue';\n\n  /**\n   * Simple popular-searches component that renders a list of suggestions, allowing the user to\n   * select one of them, and emitting the needed events.\n   * A popular search is just a query that has been searched a lot in a certain period and may\n   * optionally have associated a set of filters.\n   *\n   * @public\n   */\n  @Component({\n    components: { PopularSearch, BaseSuggestions },\n    mixins: [xComponentMixin(popularSearchesXModule)]\n  })\n  export default class PopularSearches extends Vue {\n    /**\n     * Animation component that will be used to animate the suggestions.\n     *\n     * @public\n     */\n    @Prop()\n    protected animation!: Vue;\n\n    /**\n     * Number of popular searches to be rendered.\n     *\n     * @public\n     */\n    @Prop()\n    protected maxItemsToRender?: number;\n\n    /**\n     * The list of popular searches.\n     *\n     * @internal\n     */\n    @Getter('popularSearches', 'popularSearches')\n    public popularSearches!: Suggestion[];\n  }\n</script>\n\n<docs lang=\"mdx\">\n# Examples\n\n## Default Usage\n\nYou don't need to pass any props, or slots. Simply add the component, and when it has any popular\nsearches it will show them.\n\n```vue\n<PopularSearches />\n```\n\nThe component has two optional props. `animation` to render the component with an animation and\n`maxItemToRender` to limit the number of popular searches will be rendered (by default it is 5).\n\n```vue\n<PopularSearches :animation=\"FadeAndSlide\" :maxItemsToRender=\"10\" />\n```\n\n## Overriding Popular Search's Content\n\nYou can use your custom implementation of the Popular Search's content. In the example below,\ninstead of using the default Popular Search's content, an icon is added, as well as a span with the\nquery of the Popular Search's suggestion.\n\n```vue\n<PopularSearches>\n  <template #suggestion-content=\"{ suggestion }\">\n    <img class=\"x-popular-search__icon\" src=\"./popular-search-icon.svg\" />\n    <span class=\"x-popular-search__query\">{{ suggestion.query }}</span>\n  </template>\n</PopularSearches>\n```\n\n## Adding a Custom Popular Search Item\n\nYou can use your custom implementation for the whole Popular Search item. In the example below, we\nchange the default implementation of the Popular Search in Popular Searches. A custom Popular Search\nimplementation is added, it has an image and a span as content (as in the previous example). Also, a\nbutton with a user customized behaviour is added at the same hierarchical level as the Popular\nSearch component.\n\n```vue\n<PopularSearches>\n  <template #suggestion=\"{suggestion}\">\n    <PopularSearch :suggestion=\"suggestion\">\n      <template #default=\"{suggestion}\">\n        <img class=\"x-popular-search__icon\" src=\"./popular-search-icon.svg\" />\n        <span class=\"x-popular-search__query\">{{ suggestion.query }}</span>\n      </template>\n    </PopularSearch>\n    <button>Custom Behaviour</button>\n  </template>\n</PopularSearches>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"popular-searches.vue.js","sources":["../../../../../src/x-modules/popular-searches/components/popular-searches.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    :suggestions=\"popularSearches\"\n    :maxItemsToRender=\"maxItemsToRender\"\n    class=\"x-popular-searches\"\n    data-test=\"popular-searches\"\n    :animation=\"animation\"\n  >\n    <template #default=\"{ suggestion, index }\">\n      <!--\n        @slot Popular Search item\n            @binding {Suggestion} suggestion - Popular Search suggestion data\n            @binding {number} index - Popular Search suggestion index\n      -->\n      <slot name=\"suggestion\" v-bind=\"{ suggestion, index }\">\n        <PopularSearch :suggestion=\"suggestion\" class=\"x-popular-searches__suggestion\">\n          <template #default>\n            <!--\n              @slot Popular Search content\n                  @binding {Suggestion} suggestion - Popular Search suggestion data\n                  @binding {number} index - Popular Search suggestion index\n            -->\n            <slot name=\"suggestion-content\" v-bind=\"{ suggestion, index }\" />\n          </template>\n        </PopularSearch>\n      </slot>\n    </template>\n  </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\n  import { Suggestion } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';\n  import { Getter } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { popularSearchesXModule } from '../x-module';\n  import PopularSearch from './popular-search.vue';\n\n  /**\n   * Simple popular-searches component that renders a list of suggestions, allowing the user to\n   * select one of them, and emitting the needed events.\n   * A popular search is just a query that has been searched a lot in a certain period and may\n   * optionally have associated a set of filters.\n   *\n   * @public\n   */\n  @Component({\n    components: { PopularSearch, BaseSuggestions },\n    mixins: [xComponentMixin(popularSearchesXModule)]\n  })\n  export default class PopularSearches extends Vue {\n    /**\n     * Animation component that will be used to animate the suggestions.\n     *\n     * @public\n     */\n    @Prop()\n    protected animation!: Vue;\n\n    /**\n     * Number of popular searches to be rendered.\n     *\n     * @public\n     */\n    @Prop()\n    protected maxItemsToRender?: number;\n\n    /**\n     * The list of popular searches.\n     *\n     * @internal\n     */\n    @Getter('popularSearches', 'popularSearches')\n    public popularSearches!: Suggestion[];\n  }\n</script>\n\n<docs lang=\"mdx\">\n# Examples\n\n## Default Usage\n\nYou don't need to pass any props, or slots. Simply add the component, and when it has any popular\nsearches it will show them.\n\n```vue\n<PopularSearches />\n```\n\nThe component has two optional props. `animation` to render the component with an animation and\n`maxItemToRender` to limit the number of popular searches will be rendered (by default it is 5).\n\n```vue\n<PopularSearches :animation=\"FadeAndSlide\" :maxItemsToRender=\"10\" />\n```\n\n## Overriding Popular Search's Content\n\nYou can use your custom implementation of the Popular Search's content. In the example below,\ninstead of using the default Popular Search's content, an icon is added, as well as a span with the\nquery of the Popular Search's suggestion.\n\n```vue\n<PopularSearches>\n  <template #suggestion-content=\"{ suggestion }\">\n    <img class=\"x-popular-search__icon\" src=\"./popular-search-icon.svg\" />\n    <span class=\"x-popular-search__query\">{{ suggestion.query }}</span>\n  </template>\n</PopularSearches>\n```\n\n## Adding a Custom Popular Search Item\n\nYou can use your custom implementation for the whole Popular Search item. In the example below, we\nchange the default implementation of the Popular Search in Popular Searches. A custom Popular Search\nimplementation is added, it has an image and a span as content (as in the previous example). Also, a\nbutton with a user customized behaviour is added at the same hierarchical level as the Popular\nSearch component.\n\n```vue\n<PopularSearches>\n  <template #suggestion=\"{suggestion}\">\n    <PopularSearch :suggestion=\"suggestion\">\n      <template #default=\"{suggestion}\">\n        <img class=\"x-popular-search__icon\" src=\"./popular-search-icon.svg\" />\n        <span class=\"x-popular-search__query\">{{ suggestion.query }}</span>\n      </template>\n    </PopularSearch>\n    <button>Custom Behaviour</button>\n  </template>\n</PopularSearches>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/query-suggestions/components/query-suggestion.vue.js

@@ -5,7 +5,7 @@ import script from './query-suggestion.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -16,33 +16,32 @@ var __vue_render__ = function() {
         staticClass: "x-query-suggestion",
         attrs: {
           "aria-label": _vm.suggestion.query,
-          "data-test": "query-suggestion"
+          "data-test": "query-suggestion",
+          feature: "query_suggestion",
         },
         scopedSlots: _vm._u(
           [
             {
               key: "default",
-              fn: function(ref) {
+              fn: function (ref) {
                 var suggestion = ref.suggestion;
                 var queryHTML = ref.queryHTML;
                 return [
                   _vm._t("default", null, null, {
                     suggestion: suggestion,
-                    queryHTML: queryHTML
-                  })
-                ]
-              }
-            }
-          ],
+                    queryHTML: queryHTML,
+                  }) ]
+              },
+            } ],
           null,
           true
-        )
+        ),
       },
       "BaseSuggestion",
       {
         query: _vm.query,
         suggestion: _vm.suggestion,
-        suggestionSelectedEvents: _vm.event
+        suggestionSelectedEvents: _vm.event,
       },
       false
     )

package/js/x-modules/query-suggestions/components/query-suggestion.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"query-suggestion.vue.js","sources":["../../../../../src/x-modules/query-suggestions/components/query-suggestion.vue"],"sourcesContent":["<template>\n  <BaseSuggestion\n    v-bind=\"{ query, suggestion, suggestionSelectedEvents: event }\"\n    :aria-label=\"suggestion.query\"\n    class=\"x-query-suggestion\"\n    data-test=\"query-suggestion\"\n  >\n    <template #default=\"{ suggestion, queryHTML }\">\n      <!-- eslint-disable max-len -->\n      <!--\n        @slot Custom content that replaces the `QuerySuggestion` default content\n            @binding {Suggestion} suggestion - Query Suggestion data\n            @binding {string} queryHTML - Suggestion’s query with the matching part wrapped in a HTML span tag\n      -->\n      <!-- eslint-enable max-len -->\n      <slot v-bind=\"{ suggestion, queryHTML }\" />\n    </template>\n  </BaseSuggestion>\n</template>\n\n<script lang=\"ts\">\n  import { Suggestion } from '@empathyco/x-types';\n  import { Component, Prop, Vue } from 'vue-property-decorator';\n  import BaseSuggestion from '../../../components/suggestions/base-suggestion.vue';\n  import { Getter } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { querySuggestionsXModule } from '../x-module';\n\n  /**\n   * This component renders a suggestion for a query. A query suggestion is a recommended query\n   * based on previous search queries. It contains the query itself and a set of filters associated.\n   * For example, if you're searching for _shirt_, a query suggestion could be _long sleeve shirt_.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseSuggestion },\n    mixins: [xComponentMixin(querySuggestionsXModule)]\n  })\n  export default class QuerySuggestion extends Vue {\n    /**\n     * The normalized query of the query-suggestions module.\n     *\n     * @internal\n     */\n    @Getter('querySuggestions', 'normalizedQuery')\n    public query!: string;\n\n    /**\n     * The suggestion to render.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected suggestion!: Suggestion;\n\n    /**\n     * Emits {@link QuerySuggestionsXEvents.UserSelectedAQuerySuggestion} with the suggestion as\n     * payload when selecting the query suggestion.\n     *\n     * @internal\n     */\n    protected event: Partial<XEventsTypes> = {\n      UserSelectedAQuerySuggestion: this.suggestion\n    };\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserSelectedAQuerySuggestion`] (./../../api/x-components.querysuggestionsxevents.md)\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the <b>Empathize</b> microservice must be\nimplemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you can see how a single query suggestion is rendered using the `suggestion` prop.\n\n```vue\n<template>\n  <QuerySuggestion :suggestion=\"suggestion\" />\n</template>\n\n<script>\n  import { QuerySuggestion } from '@empathyco/x-components/query-suggestions';\n  export default {\n    name: 'QuerySuggestionDemo',\n    components: {\n      QuerySuggestion\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'QuerySuggestion',\n          query: 'beer',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with default slot\n\nIn this example, the query suggestion is painted in blue by passing a color style in the HTML span\nelement.\n\n```vue\n<template>\n  <QuerySuggestion :suggestion=\"suggestion\" #default=\"{ queryHTML }\">\n    <span v-html=\"queryHTML\" style=\"color: blue;\" />\n  </QuerySuggestion>\n</template>\n\n<script>\n  import { QuerySuggestion } from '@empathyco/x-components/query-suggestions';\n  export default {\n    name: 'QuerySuggestionDemo',\n    components: {\n      QuerySuggestion\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'QuerySuggestion',\n          query: 'beer',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, when you click on the query suggestion, a message is displayed to illustrate that\nthe `UserSelectedAQuerySuggestion` event has been triggered.\n\n```vue\n<template>\n  <QuerySuggestion :suggestion=\"suggestion\" @UserSelectedAQuerySuggestion=\"alertSuggestion\" />\n</template>\n\n<script>\n  import { QuerySuggestion } from '@empathyco/x-components/query-suggestions';\n  export default {\n    name: 'QuerySuggestionDemo',\n    components: {\n      QuerySuggestion\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'QuerySuggestion',\n          query: 'beer',\n          facets: []\n        }\n      };\n    },\n    methods: {\n      alertSuggestion(querySuggestion) {\n        alert(`You have clicked the query suggestion: ${querySuggestion.query}`);\n      }\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"query-suggestion.vue.js","sources":["../../../../../src/x-modules/query-suggestions/components/query-suggestion.vue"],"sourcesContent":["<template>\n  <BaseSuggestion\n    v-bind=\"{ query, suggestion, suggestionSelectedEvents: event }\"\n    :aria-label=\"suggestion.query\"\n    class=\"x-query-suggestion\"\n    data-test=\"query-suggestion\"\n    feature=\"query_suggestion\"\n  >\n    <template #default=\"{ suggestion, queryHTML }\">\n      <!-- eslint-disable max-len -->\n      <!--\n        @slot Custom content that replaces the `QuerySuggestion` default content\n            @binding {Suggestion} suggestion - Query Suggestion data\n            @binding {string} queryHTML - Suggestion’s query with the matching part wrapped in a HTML span tag\n      -->\n      <!-- eslint-enable max-len -->\n      <slot v-bind=\"{ suggestion, queryHTML }\" />\n    </template>\n  </BaseSuggestion>\n</template>\n\n<script lang=\"ts\">\n  import { Suggestion } from '@empathyco/x-types';\n  import { Component, Prop, Vue } from 'vue-property-decorator';\n  import BaseSuggestion from '../../../components/suggestions/base-suggestion.vue';\n  import { Getter } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { querySuggestionsXModule } from '../x-module';\n\n  /**\n   * This component renders a suggestion for a query. A query suggestion is a recommended query\n   * based on previous search queries. It contains the query itself and a set of filters associated.\n   * For example, if you're searching for _shirt_, a query suggestion could be _long sleeve shirt_.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseSuggestion },\n    mixins: [xComponentMixin(querySuggestionsXModule)]\n  })\n  export default class QuerySuggestion extends Vue {\n    /**\n     * The normalized query of the query-suggestions module.\n     *\n     * @internal\n     */\n    @Getter('querySuggestions', 'normalizedQuery')\n    public query!: string;\n\n    /**\n     * The suggestion to render.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected suggestion!: Suggestion;\n\n    /**\n     * Emits {@link QuerySuggestionsXEvents.UserSelectedAQuerySuggestion} with the suggestion as\n     * payload when selecting the query suggestion.\n     *\n     * @internal\n     */\n    protected event: Partial<XEventsTypes> = {\n      UserSelectedAQuerySuggestion: this.suggestion\n    };\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserSelectedAQuerySuggestion`] (./../../api/x-components.querysuggestionsxevents.md)\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the <b>Empathize</b> microservice must be\nimplemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you can see how a single query suggestion is rendered using the `suggestion` prop.\n\n```vue\n<template>\n  <QuerySuggestion :suggestion=\"suggestion\" />\n</template>\n\n<script>\n  import { QuerySuggestion } from '@empathyco/x-components/query-suggestions';\n  export default {\n    name: 'QuerySuggestionDemo',\n    components: {\n      QuerySuggestion\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'QuerySuggestion',\n          query: 'beer',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with default slot\n\nIn this example, the query suggestion is painted in blue by passing a color style in the HTML span\nelement.\n\n```vue\n<template>\n  <QuerySuggestion :suggestion=\"suggestion\" #default=\"{ queryHTML }\">\n    <span v-html=\"queryHTML\" style=\"color: blue;\" />\n  </QuerySuggestion>\n</template>\n\n<script>\n  import { QuerySuggestion } from '@empathyco/x-components/query-suggestions';\n  export default {\n    name: 'QuerySuggestionDemo',\n    components: {\n      QuerySuggestion\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'QuerySuggestion',\n          query: 'beer',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, when you click on the query suggestion, a message is displayed to illustrate that\nthe `UserSelectedAQuerySuggestion` event has been triggered.\n\n```vue\n<template>\n  <QuerySuggestion :suggestion=\"suggestion\" @UserSelectedAQuerySuggestion=\"alertSuggestion\" />\n</template>\n\n<script>\n  import { QuerySuggestion } from '@empathyco/x-components/query-suggestions';\n  export default {\n    name: 'QuerySuggestionDemo',\n    components: {\n      QuerySuggestion\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'QuerySuggestion',\n          query: 'beer',\n          facets: []\n        }\n      };\n    },\n    methods: {\n      alertSuggestion(querySuggestion) {\n        alert(`You have clicked the query suggestion: ${querySuggestion.query}`);\n      }\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/query-suggestions/components/query-suggestion.vue_rollup-plugin-vue=script.js.map

@@ -1 +1 @@
-{"version":3,"file":"query-suggestion.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/query-suggestions/components/query-suggestion.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\nimport { Suggestion } from '@empathyco/x-types';\nimport { Component, Prop, Vue } from 'vue-property-decorator';\nimport BaseSuggestion from '../../../components/suggestions/base-suggestion.vue';\nimport { Getter } from '../../../components/decorators/store.decorators';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { XEventsTypes } from '../../../wiring/events.types';\nimport { querySuggestionsXModule } from '../x-module';\n\n/**\n * This component renders a suggestion for a query. A query suggestion is a recommended query\n * based on previous search queries. It contains the query itself and a set of filters associated.\n * For example, if you're searching for _shirt_, a query suggestion could be _long sleeve shirt_.\n *\n * @public\n */\n@Component({\n  components: { BaseSuggestion },\n  mixins: [xComponentMixin(querySuggestionsXModule)]\n})\nexport default class QuerySuggestion extends Vue {\n  /**\n   * The normalized query of the query-suggestions module.\n   *\n   * @internal\n   */\n  @Getter('querySuggestions', 'normalizedQuery')\n  public query!: string;\n\n  /**\n   * The suggestion to render.\n   *\n   * @public\n   */\n  @Prop({ required: true })\n  protected suggestion!: Suggestion;\n\n  /**\n   * Emits {@link QuerySuggestionsXEvents.UserSelectedAQuerySuggestion} with the suggestion as\n   * payload when selecting the query suggestion.\n   *\n   * @internal\n   */\n  protected event: Partial<XEventsTypes> = {\n    UserSelectedAQuerySuggestion: this.suggestion\n  };\n}\n"],"names":[],"mappings":";;;;;;;AA6BA;;;;;;;AAWA;IAA6C,mCAAG;IAAhD;QAAA,qEA0BC;;;;;;;QAHW,WAAK,GAA0B;YACvC,4BAA4B,EAAE,KAAI,CAAC,UAAU;SAC9C,CAAC;;KACH;IAnBC;QADC,MAAM,CAAC,kBAAkB,EAAE,iBAAiB,CAAC;kDACxB;IAQtB;QADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;uDACS;IAff,eAAe;QAJnC,SAAS,CAAC;YACT,UAAU,EAAE,EAAE,cAAc,gBAAA,EAAE;YAC9B,MAAM,EAAE,CAAC,eAAe,CAAC,uBAAuB,CAAC,CAAC;SACnD,CAAC;OACmB,eAAe,CA0BnC;IAAD,sBAAC;CAAA,CA1B4C,GAAG;;;;"}
+{"version":3,"file":"query-suggestion.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/query-suggestions/components/query-suggestion.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\nimport { Suggestion } from '@empathyco/x-types';\nimport { Component, Prop, Vue } from 'vue-property-decorator';\nimport BaseSuggestion from '../../../components/suggestions/base-suggestion.vue';\nimport { Getter } from '../../../components/decorators/store.decorators';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { XEventsTypes } from '../../../wiring/events.types';\nimport { querySuggestionsXModule } from '../x-module';\n\n/**\n * This component renders a suggestion for a query. A query suggestion is a recommended query\n * based on previous search queries. It contains the query itself and a set of filters associated.\n * For example, if you're searching for _shirt_, a query suggestion could be _long sleeve shirt_.\n *\n * @public\n */\n@Component({\n  components: { BaseSuggestion },\n  mixins: [xComponentMixin(querySuggestionsXModule)]\n})\nexport default class QuerySuggestion extends Vue {\n  /**\n   * The normalized query of the query-suggestions module.\n   *\n   * @internal\n   */\n  @Getter('querySuggestions', 'normalizedQuery')\n  public query!: string;\n\n  /**\n   * The suggestion to render.\n   *\n   * @public\n   */\n  @Prop({ required: true })\n  protected suggestion!: Suggestion;\n\n  /**\n   * Emits {@link QuerySuggestionsXEvents.UserSelectedAQuerySuggestion} with the suggestion as\n   * payload when selecting the query suggestion.\n   *\n   * @internal\n   */\n  protected event: Partial<XEventsTypes> = {\n    UserSelectedAQuerySuggestion: this.suggestion\n  };\n}\n"],"names":[],"mappings":";;;;;;;AA8BA;;;;;;;AAWA;IAA6C,mCAAG;IAAhD;QAAA,qEA0BC;;;;;;;QAHW,WAAK,GAA0B;YACvC,4BAA4B,EAAE,KAAI,CAAC,UAAU;SAC9C,CAAC;;KACH;IAnBC;QADC,MAAM,CAAC,kBAAkB,EAAE,iBAAiB,CAAC;kDACxB;IAQtB;QADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;uDACS;IAff,eAAe;QAJnC,SAAS,CAAC;YACT,UAAU,EAAE,EAAE,cAAc,gBAAA,EAAE;YAC9B,MAAM,EAAE,CAAC,eAAe,CAAC,uBAAuB,CAAC,CAAC;SACnD,CAAC;OACmB,eAAe,CA0BnC;IAAD,sBAAC;CAAA,CA1B4C,GAAG;;;;"}

package/js/x-modules/query-suggestions/components/query-suggestions.vue.js

@@ -5,7 +5,7 @@ import script from './query-suggestions.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -15,19 +15,19 @@ var __vue_render__ = function() {
       suggestions: _vm.suggestions,
       "data-test": "query-suggestions",
       animation: _vm.animation,
-      maxItemsToRender: _vm.maxItemsToRender
+      maxItemsToRender: _vm.maxItemsToRender,
     },
     scopedSlots: _vm._u(
       [
         {
           key: "default",
-          fn: function(ref) {
+          fn: function (ref) {
             var suggestion = ref.suggestion;
             var index = ref.index;
             return [
               _vm._t(
                 "suggestion",
-                function() {
+                function () {
                   return [
                     _c("QuerySuggestion", {
                       staticClass: "x-query-suggestions__suggestion",
@@ -36,34 +36,29 @@ var __vue_render__ = function() {
                         [
                           {
                             key: "default",
-                            fn: function(ref) {
+                            fn: function (ref) {
                               var queryHTML = ref.queryHTML;
                               return [
                                 _vm._t("suggestion-content", null, null, {
                                   suggestion: suggestion,
                                   index: index,
-                                  queryHTML: queryHTML
-                                })
-                              ]
-                            }
-                          }
-                        ],
+                                  queryHTML: queryHTML,
+                                }) ]
+                            },
+                          } ],
                         null,
                         true
-                      )
-                    })
-                  ]
+                      ),
+                    }) ]
                 },
                 null,
                 { suggestion: suggestion, index: index }
-              )
-            ]
-          }
-        }
-      ],
+              ) ]
+          },
+        } ],
       null,
       true
-    )
+    ),
   })
 };
 var __vue_staticRenderFns__ = [];

package/js/x-modules/query-suggestions/components/query-suggestions.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"query-suggestions.vue.js","sources":["../../../../../src/x-modules/query-suggestions/components/query-suggestions.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    :suggestions=\"suggestions\"\n    class=\"x-query-suggestions\"\n    data-test=\"query-suggestions\"\n    :animation=\"animation\"\n    :maxItemsToRender=\"maxItemsToRender\"\n  >\n    <template #default=\"{ suggestion, index }\">\n      <!--\n        @slot Custom component that replaces the `QuerySuggestion` component\n            @binding {Suggestion} suggestion - Query Suggestion data\n            @binding {number} index - Query Suggestion index\n      -->\n      <slot name=\"suggestion\" v-bind=\"{ suggestion, index }\">\n        <QuerySuggestion :suggestion=\"suggestion\" class=\"x-query-suggestions__suggestion\">\n          <template #default=\"{ queryHTML }\">\n            <!-- eslint-disable max-len -->\n            <!--\n              @slot Custom content that replaces the `QuerySuggestion` default content\n                  @binding {Suggestion} suggestion - Query Suggestion data\n                  @binding {string} queryHTML - Suggestion’s query with the matching part wrapped in a HTML span tag\n                  @binding {number} index - Query Suggestion index\n            -->\n            <!-- eslint-enable max-len -->\n            <slot name=\"suggestion-content\" v-bind=\"{ suggestion, index, queryHTML }\" />\n          </template>\n        </QuerySuggestion>\n      </slot>\n    </template>\n  </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\n  import { Suggestion } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';\n  import { Getter } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { querySuggestionsXModule } from '../x-module';\n  import QuerySuggestion from './query-suggestion.vue';\n\n  /**\n   * This component renders a list of possible search queries to select from as a query is entered\n   * in the input field. By default, this is a list of\n   * [`QuerySuggestion`](./x-components.query-suggestion.md) components.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseSuggestions, QuerySuggestion },\n    mixins: [xComponentMixin(querySuggestionsXModule)]\n  })\n  export default class QuerySuggestions extends Vue {\n    /**\n     * The module's list of suggestions.\n     *\n     * @internal\n     */\n    @Getter('querySuggestions', 'querySuggestions')\n    public suggestions!: Suggestion[];\n\n    /**\n     * Animation component for `QuerySuggestions`.\n     *\n     * @public\n     */\n    @Prop()\n    protected animation!: Vue;\n\n    /**\n     * Number of query suggestions to be rendered.\n     *\n     * @public\n     */\n    @Prop()\n    protected maxItemsToRender?: number;\n  }\n</script>\n\n<docs lang=\"mdx\">\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the <b>Empathize</b> microservice must be\nimplemented.\n:::\n<!-- prettier-ignore-end -->\n\nIn this example, a list of query suggestions is displayed. See how the suggestions change as you\ntype “puzzle”. If you click on a suggestion, the search term in the search input is updated and the\nquery suggestions are changed to reflect the new search term.\n\n_Type “puzzle” or another toy in the input field to try it out!_\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions />\n  </div>\n</template>\n\n<script>\n  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'QuerySuggestionsDemo',\n    components: {\n      QuerySuggestions,\n      SearchInput\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, an `StaggeredFadeAndSlide` animation component has been passed as prop, so that the\nmatching query suggestions are shuffled with a slight delay as more letters of the term are typed.\n\n_Type “puzzle” or another toy in the input field to try it out!_\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions animation=\"StaggeredFadeAndSlide\" />\n  </div>\n</template>\n\n<script>\n  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { StaggeredFadeAndSlide } from '@empathyco/x-components';\n\n  // Register the animation as a global component\n  Vue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide);\n  export default {\n    name: 'QuerySuggestionsDemo',\n    components: {\n      QuerySuggestions,\n      SearchInput\n    }\n  };\n</script>\n```\n\n### Play with suggestion slot\n\nHere, the `suggestion` binding property passes the suggestion data.\n\n_Type “puzzle” or another toy in the input field to try it out!_\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions #suggestion=\"{ suggestion }\">\n      <QuerySuggestion :suggestion=\"suggestion\" #default=\"{ queryHTML }\">\n        <span v-html=\"queryHTML\" />\n      </QuerySuggestion>\n    </QuerySuggestions>\n  </div>\n</template>\n\n<script>\n  import { QuerySuggestion, QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n\n  export default {\n    name: 'QuerySuggestionsDemo',\n    components: {\n      QuerySuggestion,\n      QuerySuggestions\n    }\n  };\n</script>\n```\n\n<!-- prettier-ignore-start -->\n::: danger\nIf you're not using the [`QuerySuggestion`](./query-suggestion.md) component, then\nyou must implement the `UserAcceptedAQuery` and `UserSelectedAQuerySuggestion` events in\n`QuerySuggestions`.\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions #suggestion=\"{ suggestion }\">\n      <button @click=\"emitSuggestionClickedEvents($event, suggestion)\">\n        {{ suggestion.query }}\n      </button>\n    </QuerySuggestions>\n  </div>\n</template>\n\n<script>\n  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'QuerySuggestionsDemo',\n    components: {\n      SearchInput,\n      QuerySuggestions\n    },\n    methods: {\n      emitSuggestionClickedEvents(event, suggestion) {\n        this.$x.emit('UserAcceptedAQuery', suggestion.query, {\n          target: event.target\n        });\n        this.$x.emit('UserSelectedASuggestion', suggestion, {\n          target: event.target\n        });\n        this.$x.emit('UserSelectedAQuerySuggestion', suggestion, {\n          target: event.target\n        });\n      }\n    }\n  };\n</script>\n```\n\n:::\n<!-- prettier-ignore-end -->\n\n### Play with suggestion-content slot\n\nIn this example, the `suggestion` and `queryHTML` bindings have been passed in the\n`suggestion-content` slot to paint the resulting query suggestions in blue.\n\n_Type “puzzle” or another toy in the input field to try it out!_\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions #suggestion-content=\"{ suggestion, queryHTML }\">\n      <span :aria-label=\"`Select ${suggestion.query}`\" style=\"color: blue;\" v-html=\"queryHTML\" />\n    </QuerySuggestions>\n  </div>\n</template>\n\n<script>\n  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'QuerySuggestionsDemo',\n    components: {\n      SearchInput,\n      QuerySuggestions\n    }\n  };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `QuerySuggestions`\ncomponent communicates with the [`SearchInput`](../search-box/x-components.search-input.md),\nupdating the term in the search input.\n\n_Type “puzzle” or another toy in the input field to try it out!_\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions />\n  </div>\n</template>\n\n<script>\n  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'QuerySuggestionsDemo',\n    components: {\n      SearchInput,\n      QuerySuggestions\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"query-suggestions.vue.js","sources":["../../../../../src/x-modules/query-suggestions/components/query-suggestions.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    :suggestions=\"suggestions\"\n    class=\"x-query-suggestions\"\n    data-test=\"query-suggestions\"\n    :animation=\"animation\"\n    :maxItemsToRender=\"maxItemsToRender\"\n  >\n    <template #default=\"{ suggestion, index }\">\n      <!--\n        @slot Custom component that replaces the `QuerySuggestion` component\n            @binding {Suggestion} suggestion - Query Suggestion data\n            @binding {number} index - Query Suggestion index\n      -->\n      <slot name=\"suggestion\" v-bind=\"{ suggestion, index }\">\n        <QuerySuggestion :suggestion=\"suggestion\" class=\"x-query-suggestions__suggestion\">\n          <template #default=\"{ queryHTML }\">\n            <!-- eslint-disable max-len -->\n            <!--\n              @slot Custom content that replaces the `QuerySuggestion` default content\n                  @binding {Suggestion} suggestion - Query Suggestion data\n                  @binding {string} queryHTML - Suggestion’s query with the matching part wrapped in a HTML span tag\n                  @binding {number} index - Query Suggestion index\n            -->\n            <!-- eslint-enable max-len -->\n            <slot name=\"suggestion-content\" v-bind=\"{ suggestion, index, queryHTML }\" />\n          </template>\n        </QuerySuggestion>\n      </slot>\n    </template>\n  </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\n  import { Suggestion } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';\n  import { Getter } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { querySuggestionsXModule } from '../x-module';\n  import QuerySuggestion from './query-suggestion.vue';\n\n  /**\n   * This component renders a list of possible search queries to select from as a query is entered\n   * in the input field. By default, this is a list of\n   * [`QuerySuggestion`](./x-components.query-suggestion.md) components.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseSuggestions, QuerySuggestion },\n    mixins: [xComponentMixin(querySuggestionsXModule)]\n  })\n  export default class QuerySuggestions extends Vue {\n    /**\n     * The module's list of suggestions.\n     *\n     * @internal\n     */\n    @Getter('querySuggestions', 'querySuggestions')\n    public suggestions!: Suggestion[];\n\n    /**\n     * Animation component for `QuerySuggestions`.\n     *\n     * @public\n     */\n    @Prop()\n    protected animation!: Vue;\n\n    /**\n     * Number of query suggestions to be rendered.\n     *\n     * @public\n     */\n    @Prop()\n    protected maxItemsToRender?: number;\n  }\n</script>\n\n<docs lang=\"mdx\">\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the <b>Empathize</b> microservice must be\nimplemented.\n:::\n<!-- prettier-ignore-end -->\n\nIn this example, a list of query suggestions is displayed. See how the suggestions change as you\ntype “puzzle”. If you click on a suggestion, the search term in the search input is updated and the\nquery suggestions are changed to reflect the new search term.\n\n_Type “puzzle” or another toy in the input field to try it out!_\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions />\n  </div>\n</template>\n\n<script>\n  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'QuerySuggestionsDemo',\n    components: {\n      QuerySuggestions,\n      SearchInput\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, an `StaggeredFadeAndSlide` animation component has been passed as prop, so that the\nmatching query suggestions are shuffled with a slight delay as more letters of the term are typed.\n\n_Type “puzzle” or another toy in the input field to try it out!_\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions animation=\"StaggeredFadeAndSlide\" />\n  </div>\n</template>\n\n<script>\n  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { StaggeredFadeAndSlide } from '@empathyco/x-components';\n\n  // Register the animation as a global component\n  Vue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide);\n  export default {\n    name: 'QuerySuggestionsDemo',\n    components: {\n      QuerySuggestions,\n      SearchInput\n    }\n  };\n</script>\n```\n\n### Play with suggestion slot\n\nHere, the `suggestion` binding property passes the suggestion data.\n\n_Type “puzzle” or another toy in the input field to try it out!_\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions #suggestion=\"{ suggestion }\">\n      <QuerySuggestion :suggestion=\"suggestion\" #default=\"{ queryHTML }\">\n        <span v-html=\"queryHTML\" />\n      </QuerySuggestion>\n    </QuerySuggestions>\n  </div>\n</template>\n\n<script>\n  import { QuerySuggestion, QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n\n  export default {\n    name: 'QuerySuggestionsDemo',\n    components: {\n      QuerySuggestion,\n      QuerySuggestions\n    }\n  };\n</script>\n```\n\n<!-- prettier-ignore-start -->\n::: danger\nIf you're not using the [`QuerySuggestion`](./query-suggestion.md) component, then\nyou must implement the `UserAcceptedAQuery` and `UserSelectedAQuerySuggestion` events in\n`QuerySuggestions`.\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions #suggestion=\"{ suggestion }\">\n      <button @click=\"emitSuggestionClickedEvents($event, suggestion)\">\n        {{ suggestion.query }}\n      </button>\n    </QuerySuggestions>\n  </div>\n</template>\n\n<script>\n  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'QuerySuggestionsDemo',\n    components: {\n      SearchInput,\n      QuerySuggestions\n    },\n    methods: {\n      emitSuggestionClickedEvents(event, suggestion) {\n        this.$x.emit('UserAcceptedAQuery', suggestion.query, {\n          target: event.target\n        });\n        this.$x.emit('UserSelectedASuggestion', suggestion, {\n          target: event.target\n        });\n        this.$x.emit('UserSelectedAQuerySuggestion', suggestion, {\n          target: event.target\n        });\n      }\n    }\n  };\n</script>\n```\n\n:::\n<!-- prettier-ignore-end -->\n\n### Play with suggestion-content slot\n\nIn this example, the `suggestion` and `queryHTML` bindings have been passed in the\n`suggestion-content` slot to paint the resulting query suggestions in blue.\n\n_Type “puzzle” or another toy in the input field to try it out!_\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions #suggestion-content=\"{ suggestion, queryHTML }\">\n      <span :aria-label=\"`Select ${suggestion.query}`\" style=\"color: blue;\" v-html=\"queryHTML\" />\n    </QuerySuggestions>\n  </div>\n</template>\n\n<script>\n  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'QuerySuggestionsDemo',\n    components: {\n      SearchInput,\n      QuerySuggestions\n    }\n  };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `QuerySuggestions`\ncomponent communicates with the [`SearchInput`](../search-box/x-components.search-input.md),\nupdating the term in the search input.\n\n_Type “puzzle” or another toy in the input field to try it out!_\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions />\n  </div>\n</template>\n\n<script>\n  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'QuerySuggestionsDemo',\n    components: {\n      SearchInput,\n      QuerySuggestions\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}