@empathyco/x-components 3.0.0-alpha.80 → 3.0.0-alpha.83

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            @binding {boolean} highlightCurated - True if the curated NQs should be highlighted\n      -->\n      <slot name=\"suggestion\" v-bind=\"{ suggestion, highlightCurated, index }\">\n        <NextQuery\n          #default=\"{ suggestion, shouldHighlightCurated }\"\n          :suggestion=\"suggestion\"\n          :highlightCurated=\"highlightCurated\"\n          class=\"x-next-queries__suggestion\"\n        >\n          <!--\n              @slot Next Query content\n                  @binding {Suggestion} suggestion - Next Query suggestion data\n                  @binding {boolean} shouldHighlightCurated - True if the curated NQ should\n                  be highlighted\n                  @binding {number} index - Next Query suggestion index\n            -->\n          <slot name=\"suggestion-content\" v-bind=\"{ suggestion, shouldHighlightCurated, index }\" />\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    /**\n     * Flag to indicate if the curated next queries should be displayed different.\n     *\n     * @public\n     */\n    @Prop({ default: false, type: Boolean })\n    protected highlightCurated!: boolean;\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 three optional props. `animation` to render the component with an animation,\n`maxItemToRender` to limit the number of next queries will be rendered (by default it is 5) and\n`highlightCurated` to indicate if the curated Next Queries inside the list should be highlighted.\n\n```vue\n<NextQueries :animation=\"FadeAndSlide\" :maxItemsToRender=\"10\" :highlightCurated=\"true\" />\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":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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            @binding {boolean} highlightCurated - True if the curated NQs should be highlighted\n      -->\n      <slot name=\"suggestion\" v-bind=\"{ suggestion, highlightCurated, index }\">\n        <NextQuery\n          #default=\"{ suggestion, shouldHighlightCurated }\"\n          :suggestion=\"suggestion\"\n          :highlightCurated=\"highlightCurated\"\n          class=\"x-next-queries__suggestion\"\n        >\n          <!--\n              @slot Next Query content\n                  @binding {Suggestion} suggestion - Next Query suggestion data\n                  @binding {boolean} shouldHighlightCurated - True if the curated NQ should\n                  be highlighted\n                  @binding {number} index - Next Query suggestion index\n            -->\n          <slot name=\"suggestion-content\" v-bind=\"{ suggestion, shouldHighlightCurated, index }\" />\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    /**\n     * Flag to indicate if the curated next queries should be displayed different.\n     *\n     * @public\n     */\n    @Prop({ default: false, type: Boolean })\n    protected highlightCurated!: boolean;\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 live\n<template>\n  <div>\n    <SearchInput />\n    <NextQueries />\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { NextQueries } from '@empathyco/x-components/next-queries';\n\n  export default {\n    name: 'NextQueriesDemo',\n    components: {\n      SearchInput,\n      NextQueries\n    }\n  };\n</script>\n```\n\nThe component has three optional props. `animation` to render the component with an animation,\n`maxItemToRender` to limit the number of next queries will be rendered (by default it is 5) and\n`highlightCurated` to indicate if the curated Next Queries inside the list should be highlighted.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <NextQueries :animation=\"'FadeAndSlide'\" :maxItemsToRender=\"10\" :highlightCurated=\"true\" />\n  </div>\n</template>\n\n<script>\n  import Vue from 'vue';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { NextQueries } from '@empathyco/x-components/next-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: 'NextQueriesDemo',\n    components: {\n      SearchInput,\n      NextQueries\n    }\n  };\n</script>\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 live\n<template>\n  <div>\n    <SearchInput />\n    <NextQueries>\n      <template #suggestion-content=\"{ suggestion }\">\n        <Nq1Icon />\n        <span class=\"x-next-query__query\">{{ suggestion.query }}</span>\n      </template>\n    </NextQueries>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { NextQueries } from '@empathyco/x-components/next-queries';\n  import { Nq1Icon } from '@empathyco/x-components';\n\n  export default {\n    name: 'NextQueriesDemo',\n    components: {\n      SearchInput,\n      NextQueries,\n      Nq1Icon\n    }\n  };\n</script>\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 live\n<template>\n  <div>\n    <SearchInput />\n    <NextQueries>\n      <template #suggestion=\"{ suggestion }\">\n        <NextQuery :suggestion=\"suggestion\" class=\"x-next-queries__suggestion\">\n          <template #default=\"{ suggestion }\">\n            <Nq1Icon />\n            <span class=\"x-next-query__query\">{{ suggestion.query }}</span>\n          </template>\n        </NextQuery>\n        <button>Custom Behaviour</button>\n      </template>\n    </NextQueries>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { NextQueries, NextQuery } from '@empathyco/x-components/next-queries';\n  import { Nq1Icon } from '@empathyco/x-components';\n\n  export default {\n    name: 'NextQueriesDemo',\n    components: {\n      SearchInput,\n      NextQueries,\n      NextQuery,\n      Nq1Icon\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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    feature=\"next_query\"\n    :class=\"{ 'x-next-query--is-curated': shouldHighlightCurated }\"\n  >\n    <template #default=\"{ suggestion }\">\n      <!--\n        @slot Next Query content\n            @binding {Suggestion} suggestion - Next Query suggestion data\n            @binding {boolean} shouldHighlightCurated - True if the curated NQ should be highlighted\n      -->\n      <slot v-bind=\"{ suggestion, shouldHighlightCurated }\">{{ 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     * Indicates if the curated next query should be highlighted.\n     *\n     * @public\n     */\n    @Prop({ default: false, type: Boolean })\n    protected highlightCurated!: boolean;\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    /**\n     * Checks if the next query is curated and if it should be highlighted.\n     *\n     * @returns True if the next query is curated and should be highlighted.\n     *\n     * @internal\n     */\n    protected get shouldHighlightCurated(): boolean {\n      return this.highlightCurated && (this.suggestion.isCurated ?? false);\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. It also has an optional\nprop, `highlightCurated`, to indicate if the curated Next Queries should be differentiated with a\nCSS class.\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## Dynamic Classes\n\n`NextQuery` uses the following dynamic CSS classes so you can style it when is:\n\n- Curated: `x-next-query--is-curated`.\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":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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    :class=\"{ 'x-next-query--is-curated': shouldHighlightCurated }\"\n  >\n    <template #default=\"{ suggestion }\">\n      <!--\n        @slot Next Query content\n            @binding {Suggestion} suggestion - Next Query suggestion data\n            @binding {boolean} shouldHighlightCurated - True if the curated NQ should be highlighted\n      -->\n      <slot v-bind=\"{ suggestion, shouldHighlightCurated }\">{{ 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     * Indicates if the curated next query should be highlighted.\n     *\n     * @public\n     */\n    @Prop({ default: false, type: Boolean })\n    protected highlightCurated!: boolean;\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    /**\n     * Checks if the next query is curated and if it should be highlighted.\n     *\n     * @returns True if the next query is curated and should be highlighted.\n     *\n     * @internal\n     */\n    protected get shouldHighlightCurated(): boolean {\n      return this.highlightCurated && (this.suggestion.isCurated ?? false);\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. It also has an optional\nprop, `highlightCurated`, to indicate if the curated Next Queries should be differentiated with a\nCSS class.\n\n### Basic Usage\n\nUsing default slot:\n\n```vue live\n<template>\n  <NextQuery :suggestion=\"suggestion\" />\n</template>\n\n<script>\n  import { NextQuery } from '@empathyco/x-components/next-queries';\n\n  export default {\n    name: 'NextQueryDemo',\n    components: {\n      NextQuery\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'NextQuery',\n          query: 'tshirt',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Overriding default slot.\n\nThe default slot allows you to replace the content of the suggestion button.\n\n```vue live\n<template>\n  <NextQuery :suggestion=\"suggestion\">\n    <template #default=\"{ suggestion }\">\n      <Nq1Icon />\n      <span class=\"x-next-query__query\" :aria-label=\"suggestion.query\">{{ suggestion.query }}</span>\n    </template>\n  </NextQuery>\n</template>\n\n<script>\n  import { NextQuery } from '@empathyco/x-components/next-queries';\n  import { Nq1Icon } from '@empathyco/x-components';\n\n  export default {\n    name: 'NextQueryDemo',\n    components: {\n      NextQuery,\n      Nq1Icon\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'NextQuery',\n          query: 'tshirt',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n\n## Dynamic Classes\n\n`NextQuery` uses the following dynamic CSS classes so you can style it when is:\n\n- Curated: `x-next-query--is-curated`.\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":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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    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":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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 live\n<template>\n  <PopularSearch :suggestion=\"suggestion\" />\n</template>\n\n<script>\n  import { PopularSearch } from '@empathyco/x-components/popular-searches';\n  export default {\n    name: 'PopularSearchDemo',\n    components: {\n      PopularSearch\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'PopularSearch',\n          query: 'tshirt',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Custom Usage\n\n```vue live\n<template>\n  <PopularSearch :suggestion=\"suggestion\">\n    <template #default=\"{ suggestion }\">\n      <TrendingIcon />\n      <span :aria-label=\"suggestion.query\">{{ suggestion.query }}</span>\n    </template>\n  </PopularSearch>\n</template>\n\n<script>\n  import { PopularSearch } from '@empathyco/x-components/popular-searches';\n  import { TrendingIcon } from '@empathyco/x-components';\n\n  export default {\n    name: 'PopularSearchDemo',\n    components: {\n      PopularSearch,\n      TrendingIcon\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'PopularSearch',\n          query: 'tshirt',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\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":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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 live\n<template>\n  <PopularSearches />\n</template>\n\n<script>\n  import { PopularSearches } from '@empathyco/x-components/popular-searches';\n  export default {\n    name: 'PopularSearchesDemo',\n    components: {\n      PopularSearches\n    }\n  };\n</script>\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 live\n<template>\n  <PopularSearches :animation=\"'FadeAndSlide'\" :maxItemsToRender=\"10\" />\n</template>\n\n<script>\n  import Vue from 'vue';\n  import { PopularSearches } from '@empathyco/x-components/popular-searches';\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: 'PopularSearchesDemo',\n    components: {\n      PopularSearches,\n      FadeAndSlide\n    }\n  };\n</script>\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 live\n<template>\n  <PopularSearches>\n    <template #suggestion-content=\"{ suggestion }\">\n      <TrendingIcon />\n      <span class=\"x-popular-search__query\">{{ suggestion.query }}</span>\n    </template>\n  </PopularSearches>\n</template>\n\n<script>\n  import { PopularSearches } from '@empathyco/x-components/popular-searches';\n  import { TrendingIcon } from '@empathyco/x-components';\n\n  export default {\n    name: 'PopularSearchesDemo',\n    components: {\n      PopularSearches,\n      TrendingIcon\n    }\n  };\n</script>\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 live\n<template>\n  <PopularSearches>\n    <template #suggestion=\"{ suggestion }\">\n      <PopularSearch :suggestion=\"suggestion\">\n        <template #default=\"{ suggestion }\">\n          <TrendingIcon />\n          <span class=\"x-popular-search__query\">{{ suggestion.query }}</span>\n        </template>\n      </PopularSearch>\n      <button>Custom Behaviour</button>\n    </template>\n  </PopularSearches>\n</template>\n\n<script>\n  import { PopularSearches, PopularSearch } from '@empathyco/x-components/popular-searches';\n  import { TrendingIcon } from '@empathyco/x-components';\n\n  export default {\n    name: 'PopularSearchesDemo',\n    components: {\n      PopularSearches,\n      PopularSearch,\n      TrendingIcon\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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    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":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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 live\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: 'tshirt',\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 live\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: 'tshirt',\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 live\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: 'tshirt',\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":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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 “sandal”. 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 “sandal” or another fashion term in the input field to try it out!_\n\n```vue live\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 “lipstick” or another fashion term in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions :animation=\"'StaggeredFadeAndSlide'\" />\n  </div>\n</template>\n\n<script>\n  import Vue from 'vue';\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  // Registering 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 “bag” or another fashion term in the input field to try it out!_\n\n```vue live\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 live\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 “trousers” or another toy in the input field to try it out!_\n\n```vue live\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 “pants” or another toy in the input field to try it out!_\n\n```vue live\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":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/related-tags/components/related-tag.vue.js

@@ -41,11 +41,11 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = function (inject) {
     if (!inject) return
-    inject("data-v-6081d22c_0", { source: ".x-related-tag[data-v-6081d22c] {\n  white-space: nowrap;\n}\n.x-related-tag--is-selected[data-v-6081d22c] {\n  background: lightgrey;\n}", map: undefined, media: undefined });
+    inject("data-v-07b615f0_0", { source: ".x-related-tag[data-v-07b615f0] {\n  white-space: nowrap;\n}\n.x-related-tag--is-selected[data-v-07b615f0] {\n  background: lightgrey;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__ = "data-v-6081d22c";
+  const __vue_scope_id__ = "data-v-07b615f0";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */

package/js/x-modules/related-tags/components/related-tag.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"related-tag.vue.js","sources":["../../../../../src/x-modules/related-tags/components/related-tag.vue"],"sourcesContent":["<template>\n  <button\n    @click=\"emitEvents\"\n    class=\"x-tag x-related-tag\"\n    data-test=\"related-tag\"\n    :class=\"dynamicClasses\"\n  >\n    <!--\n      @slot Custom content that replaces the RelatedTag default content.\n      @binding {RelatedTag} relatedTag - Related tag data.\n      @binding {boolean} isSelected - Related tag status.\n      @binding {boolean} shouldHighlightCurated - True if the curated RTs should be displayed.\n      -->\n    <slot v-bind=\"{ relatedTag, isSelected, shouldHighlightCurated }\">{{ relatedTag.tag }}</slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { RelatedTag as RelatedTagModel } from '@empathyco/x-types';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { relatedTagsXModule } from '../x-module';\n\n  /**\n   * This component renders a related tag for a query. A related tag is a descriptive keyword\n   * related to the current query to fine-tune the search. For example, if you are searching\n   * for *lego*, a related tag could be *city*, refining the search with *lego city*.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(relatedTagsXModule)]\n  })\n  export default class RelatedTag extends Vue {\n    /**\n     * Indicates if the curated related tag should be highlighted.\n     *\n     * @public\n     */\n    @Prop({ default: false, type: Boolean })\n    protected highlightCurated!: boolean;\n    /**\n     * The related tag model data.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected relatedTag!: RelatedTagModel;\n    /**\n     * The selected related tags.\n     *\n     * @internal\n     */\n    @State('relatedTags', 'selectedRelatedTags')\n    public selectedRelatedTags!: RelatedTagModel[];\n\n    /**\n     * Generates the {@link WireMetadata | event metadata} object omitting the moduleName.\n     *\n     * @returns The {@link WireMetadata} object omitting the moduleName.\n     * @internal\n     */\n    protected createEventMetadata(): Omit<WireMetadata, 'moduleName'> {\n      return {\n        target: this.$el as HTMLElement,\n        feature: 'related_tag'\n      };\n    }\n\n    /**\n     * Emits events when the button is clicked.\n     *\n     * @public\n     */\n    protected emitEvents(): void {\n      // We have to emit this events first to avoid the UserPickedARelatedTag wires to change the\n      // isSelected value before emitting this selection events.\n      this.$x.emit(\n        this.isSelected ? 'UserDeselectedARelatedTag' : 'UserSelectedARelatedTag',\n        this.relatedTag,\n        this.createEventMetadata()\n      );\n      this.$x.emit('UserPickedARelatedTag', this.relatedTag, this.createEventMetadata());\n    }\n\n    /**\n     * Check if the related tag is selected or not.\n     *\n     * @returns If the related tag is selected.\n     *\n     * @internal\n     */\n    protected get isSelected(): boolean {\n      return this.selectedRelatedTags.includes(this.relatedTag);\n    }\n\n    /**\n     * Check if the related tag is curated and should be highlighted.\n     *\n     * @returns True if the related tag is curated and should be highlighted.\n     *\n     * @internal\n     */\n    protected get shouldHighlightCurated(): boolean {\n      return this.highlightCurated && (this.relatedTag.isCurated ?? false);\n    }\n\n    /**\n     * Adds the dynamic css classes to the component.\n     *\n     * @returns The class to be added to the component.\n     *\n     * @internal\n     */\n    protected get dynamicClasses(): VueCSSClasses {\n      return {\n        'x-tag--is-curated': this.shouldHighlightCurated,\n        'x-related-tag--is-curated': this.shouldHighlightCurated,\n        'x-tag--is-selected': this.isSelected,\n        'x-related-tag--is-selected': this.isSelected\n      };\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-related-tag {\n    white-space: nowrap;\n\n    &--is-selected {\n      background: lightgrey;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Dynamic classes\n\n`RelatedTag` uses the following dynamic CSS classes so you can style it when is:\n\n- Selected: `x-related-tag--is-selected`.\n- Curated: `x-related-tag--is-curated`.\n\n## Events\n\nThis component emits the following events:\n\n- [`UserDeselectedARelatedTag`](./../../api/x-components.relatedtagsxevents.md)\n- [`UserPickedARelatedTag`](./../../api/x-components.relatedtagsxevents.md)\n- [`UserSelectedARelatedTag`](./../../api/x-components.relatedtagsxevents.md)\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nThe QuerySignals microservice must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nIn this example related tag data is passed as a prop.\n\n_Here you can see how the RelatedTag component is rendered._\n\n```vue\n<template>\n  <RelatedTag :relatedTag=\"tag\"></RelatedTag>\n</template>\n\n<script>\n  import { RelatedTag } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagDemo',\n    components: {\n      RelatedTag\n    },\n    data() {\n      return {\n        tag: {\n          modelName: 'RelatedTag',\n          previous: 'toy',\n          query: 'toy story',\n          selected: false,\n          tag: 'story'\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with default slot\n\nIn this example, an HTML span element is passed in the `default` slot.\n\n_See how the related tag can be rendered._\n\n```vue\n<template>\n  <RelatedTag :relatedTag=\"tag\" #default=\"{ relatedTag }\">\n    <span :aria-label=\"relatedTag.tag\">{{ relatedTag.tag }}</span>\n  </RelatedTag>\n</template>\n\n<script>\n  import { RelatedTag } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagDemo',\n    components: {\n      RelatedTag\n    },\n    data() {\n      return {\n        tag: {\n          modelName: 'RelatedTag',\n          previous: 'toy',\n          query: 'toy story',\n          selected: false,\n          tag: 'story'\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, the [`UserSelectedARelatedTag`](./../../api/x-components.relatedtagsxevents.md)\nevent is implemented, as illustrated by the “Tag” message returned.\n\n_See how the event is triggered when the related tag is clicked._\n\n```vue\n<template>\n  <RelatedTag :relatedTag=\"tag\" @UserSelectedARelatedTag=\"alertRelatedTag\"></RelatedTag>\n</template>\n\n<script>\n  import { RelatedTag } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagDemo',\n    components: {\n      RelatedTag\n    },\n    data() {\n      return {\n        tag: {\n          modelName: 'RelatedTag',\n          previous: 'toy',\n          query: 'toy story',\n          selected: false,\n          tag: 'story'\n        }\n      };\n    },\n    methods: {\n      alertRelatedTag(relatedTag) {\n        alert(`You have clicked the related tag: ${relatedTag.query}`);\n      }\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"related-tag.vue.js","sources":["../../../../../src/x-modules/related-tags/components/related-tag.vue"],"sourcesContent":["<template>\n  <button\n    @click=\"emitEvents\"\n    class=\"x-tag x-related-tag\"\n    data-test=\"related-tag\"\n    :class=\"dynamicClasses\"\n  >\n    <!--\n      @slot Custom content that replaces the RelatedTag default content.\n      @binding {RelatedTag} relatedTag - Related tag data.\n      @binding {boolean} isSelected - Related tag status.\n      @binding {boolean} shouldHighlightCurated - True if the curated RTs should be displayed.\n      -->\n    <slot v-bind=\"{ relatedTag, isSelected, shouldHighlightCurated }\">{{ relatedTag.tag }}</slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { RelatedTag as RelatedTagModel } from '@empathyco/x-types';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { relatedTagsXModule } from '../x-module';\n\n  /**\n   * This component renders a related tag for a query. A related tag is a descriptive keyword\n   * related to the current query to fine-tune the search. For example, if you are searching\n   * for *lego*, a related tag could be *city*, refining the search with *lego city*.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(relatedTagsXModule)]\n  })\n  export default class RelatedTag extends Vue {\n    /**\n     * Indicates if the curated related tag should be highlighted.\n     *\n     * @public\n     */\n    @Prop({ default: false, type: Boolean })\n    protected highlightCurated!: boolean;\n    /**\n     * The related tag model data.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected relatedTag!: RelatedTagModel;\n    /**\n     * The selected related tags.\n     *\n     * @internal\n     */\n    @State('relatedTags', 'selectedRelatedTags')\n    public selectedRelatedTags!: RelatedTagModel[];\n\n    /**\n     * Generates the {@link WireMetadata | event metadata} object omitting the moduleName.\n     *\n     * @returns The {@link WireMetadata} object omitting the moduleName.\n     * @internal\n     */\n    protected createEventMetadata(): Omit<WireMetadata, 'moduleName'> {\n      return {\n        target: this.$el as HTMLElement,\n        feature: 'related_tag'\n      };\n    }\n\n    /**\n     * Emits events when the button is clicked.\n     *\n     * @public\n     */\n    protected emitEvents(): void {\n      // We have to emit this events first to avoid the UserPickedARelatedTag wires to change the\n      // isSelected value before emitting this selection events.\n      this.$x.emit(\n        this.isSelected ? 'UserDeselectedARelatedTag' : 'UserSelectedARelatedTag',\n        this.relatedTag,\n        this.createEventMetadata()\n      );\n      this.$x.emit('UserPickedARelatedTag', this.relatedTag, this.createEventMetadata());\n    }\n\n    /**\n     * Check if the related tag is selected or not.\n     *\n     * @returns If the related tag is selected.\n     *\n     * @internal\n     */\n    protected get isSelected(): boolean {\n      return this.selectedRelatedTags.includes(this.relatedTag);\n    }\n\n    /**\n     * Check if the related tag is curated and should be highlighted.\n     *\n     * @returns True if the related tag is curated and should be highlighted.\n     *\n     * @internal\n     */\n    protected get shouldHighlightCurated(): boolean {\n      return this.highlightCurated && (this.relatedTag.isCurated ?? false);\n    }\n\n    /**\n     * Adds the dynamic css classes to the component.\n     *\n     * @returns The class to be added to the component.\n     *\n     * @internal\n     */\n    protected get dynamicClasses(): VueCSSClasses {\n      return {\n        'x-tag--is-curated': this.shouldHighlightCurated,\n        'x-related-tag--is-curated': this.shouldHighlightCurated,\n        'x-tag--is-selected': this.isSelected,\n        'x-related-tag--is-selected': this.isSelected\n      };\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-related-tag {\n    white-space: nowrap;\n\n    &--is-selected {\n      background: lightgrey;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Dynamic classes\n\n`RelatedTag` uses the following dynamic CSS classes so you can style it when is:\n\n- Selected: `x-related-tag--is-selected`.\n- Curated: `x-related-tag--is-curated`.\n\n## Events\n\nThis component emits the following events:\n\n- [`UserDeselectedARelatedTag`](./../../api/x-components.relatedtagsxevents.md)\n- [`UserPickedARelatedTag`](./../../api/x-components.relatedtagsxevents.md)\n- [`UserSelectedARelatedTag`](./../../api/x-components.relatedtagsxevents.md)\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nThe QuerySignals microservice must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nIn this example related tag data is passed as a prop.\n\n_Here you can see how the RelatedTag component is rendered._\n\n```vue live\n<template>\n  <RelatedTag :relatedTag=\"tag\" />\n</template>\n\n<script>\n  import { RelatedTag } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagDemo',\n    components: {\n      RelatedTag\n    },\n    data() {\n      return {\n        tag: {\n          modelName: 'RelatedTag',\n          query: 'high heel',\n          isCurated: false,\n          tag: 'heel'\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with default slot\n\nIn this example, an HTML span element is passed in the `default` slot.\n\n_See how the related tag can be rendered._\n\n```vue live\n<template>\n  <RelatedTag :relatedTag=\"tag\" #default=\"{ relatedTag }\">\n    <span :aria-label=\"relatedTag.tag\">{{ relatedTag.tag }}</span>\n  </RelatedTag>\n</template>\n\n<script>\n  import { RelatedTag } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagDemo',\n    components: {\n      RelatedTag\n    },\n    data() {\n      return {\n        tag: {\n          modelName: 'RelatedTag',\n          query: 'high heel',\n          isCurated: false,\n          tag: 'heel'\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, the [`UserSelectedARelatedTag`](./../../api/x-components.relatedtagsxevents.md)\nevent is implemented, as illustrated by the “Tag” message returned.\n\n_See how the event is triggered when the related tag is clicked._\n\n```vue live\n<template>\n  <RelatedTag :relatedTag=\"tag\" @UserSelectedARelatedTag=\"alertRelatedTag\" />\n</template>\n\n<script>\n  import { RelatedTag } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagDemo',\n    components: {\n      RelatedTag\n    },\n    data() {\n      return {\n        tag: {\n          modelName: 'RelatedTag',\n          query: 'high heel',\n          isCurated: false,\n          tag: 'heel'\n        }\n      };\n    },\n    methods: {\n      alertRelatedTag(relatedTag) {\n        alert(`You have clicked the related tag: ${relatedTag.query}`);\n      }\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/related-tags/components/related-tags.vue.js

@@ -82,11 +82,11 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = function (inject) {
     if (!inject) return
-    inject("data-v-04493c4b_0", { source: ".x-related-tags[data-v-04493c4b] {\n  display: flex;\n  list-style: none;\n}", map: undefined, media: undefined });
+    inject("data-v-5759b0b8_0", { source: ".x-related-tags[data-v-5759b0b8] {\n  display: flex;\n  list-style: none;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__ = "data-v-04493c4b";
+  const __vue_scope_id__ = "data-v-5759b0b8";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */

package/js/x-modules/related-tags/components/related-tags.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"related-tags.vue.js","sources":["../../../../../src/x-modules/related-tags/components/related-tags.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"relatedTags.length\"\n    tag=\"ul\"\n    class=\"x-list x-related-tags\"\n    data-test=\"related-tags\"\n  >\n    <li\n      v-for=\"relatedTag in relatedTags\"\n      :key=\"relatedTag.tag\"\n      class=\"x-related-tags__item\"\n      data-test=\"related-tag-item\"\n    >\n      <!--\n        @slot Custom content that replaces the RelatedTag component.\n        @binding {RelatedTag} relatedTag - Related tag data.\n        @binding {boolean} highlightCurated - True if the curated RTs should be displayed.\n       -->\n      <slot name=\"related-tag\" v-bind=\"{ relatedTag, highlightCurated }\">\n        <RelatedTag :highlightCurated=\"highlightCurated\" :relatedTag=\"relatedTag\">\n          <template #default=\"{ relatedTag, isSelected, shouldHighlightCurated }\">\n            <!-- eslint-disable max-len -->\n            <!--\n              @slot Custom content that replaces the RelatedTag default content.\n              @binding {RelatedTag} relatedTag - Related tag data.\n              @binding {boolean} isSelected - Related tag status.\n              @binding {boolean} shouldHighlightCurated - True if the curated RTs should be displayed.\n            -->\n            <slot\n              name=\"related-tag-content\"\n              v-bind=\"{ relatedTag, isSelected, shouldHighlightCurated }\"\n            />\n          </template>\n        </RelatedTag>\n      </slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { RelatedTag as RelatedTagModel } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { Getter } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { relatedTagsXModule } from '../x-module';\n  import RelatedTag from './related-tag.vue';\n\n  /**\n   * This component renders a set of [`RelatedTag`](./x-components.related-tag) components by\n   * default to select from after a query is performed to fine-tune search.\n   * For example, if you are searching for *lego*, different related tags could be *city*,\n   * *friends*, or *harry potter*, refining the search with *lego city*, *lego friends*,\n   * or *lego harry potter*.\n   *\n   * @public\n   */\n  @Component({\n    components: { RelatedTag },\n    mixins: [xComponentMixin(relatedTagsXModule)]\n  })\n  export default class RelatedTags extends Vue {\n    /**\n     * Animation component that will be used to animate the suggestion.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue;\n\n    /**\n     * Number of related tags to be rendered.\n     *\n     * @public\n     */\n    @Prop()\n    protected maxItemsToRender?: number;\n\n    /**\n     * Flag to indicate if the curated tags should be displayed different.\n     *\n     * @public\n     */\n    @Prop({ default: false, type: Boolean })\n    protected highlightCurated!: boolean;\n\n    @Getter('relatedTags', 'relatedTags')\n    public storedRelatedTags!: RelatedTagModel[];\n\n    protected get relatedTags(): RelatedTagModel[] {\n      return this.storedRelatedTags.slice(0, this.maxItemsToRender);\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-related-tags {\n    display: flex;\n    list-style: none;\n  }\n</style>\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 QuerySignals microservice must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nThis example shows how related tags can be rendered without any additional effects.\n\n_Search for a toy and press enter._\n\n```vue\n<template>\n  <div>\n    <SearchInput></SearchInput>\n    <RelatedTags></RelatedTags>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the number of related tags rendered has been limited to 3. A fade and slide effect\nhas been added so that the related tags appear with a delay, then slide upwards and fade.\n\n_Search for a toy and press Enter to see the related tags with the animation effect._\n\n```vue\n<template>\n  <div>\n    <SearchInput></SearchInput>\n    <RelatedTags animation=\"StaggeredFadeAndSlide\" :maxItemsToRender=\"3\"></RelatedTags>\n  </div>\n</template>\n\n<script>\n  import Vue from 'vue';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n  import { StaggeredFadeAndSlide } from '@empathyco/x-components';\n\n  Vue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide);\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags\n    }\n  };\n</script>\n```\n\n### Play with related-tag slot\n\nIn this example, the [`RelatedTag`](./x-components.related-tag.md) component is passed in the\n`related-tag` slot (although any other component could potentially be passed).\n\n_Search for a toy and see how the related tags can be rendered._\n\n```vue\n<template>\n  <div>\n    <SearchInput></SearchInput>\n    <RelatedTags #related-tag=\"{ relatedTag }\">\n      <RelatedTag :relatedTag=\"relatedTag\"></RelatedTag>\n    </RelatedTags>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags, RelatedTag } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags,\n      RelatedTag\n    }\n  };\n</script>\n```\n\n### Play with related-tag-content slot\n\nTo continue the previous example, the [`RelatedTag`](./x-components.related-tag.md) component is\npassed in the `related-tag-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n_Search for a toy and see how the related tags are rendered._\n\n```vue\n<template>\n  <div>\n    <SearchInput></SearchInput>\n    <RelatedTags #related-tag-content=\"{ relatedTag }\">\n      <span>{{ relatedTag.tag }}</span>\n    </RelatedTags>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags\n    }\n  };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. The `RelatedTags` component can\ncommunicate with the [`SearchInput`](../search-box/x-components.search-input.md) as follows:\n\n_Search for a toy and see how the related tags can be rendered._\n\n```vue\n<template>\n  <div>\n    <SearchInput></SearchInput>\n    <RelatedTags></RelatedTags>\n    <ResultsList></ResultsList>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n  import { ResultsList } from '@empathyco/x-components/search';\n\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags,\n      ResultsList\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"related-tags.vue.js","sources":["../../../../../src/x-modules/related-tags/components/related-tags.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"relatedTags.length\"\n    tag=\"ul\"\n    class=\"x-list x-related-tags\"\n    data-test=\"related-tags\"\n  >\n    <li\n      v-for=\"relatedTag in relatedTags\"\n      :key=\"relatedTag.tag\"\n      class=\"x-related-tags__item\"\n      data-test=\"related-tag-item\"\n    >\n      <!--\n        @slot Custom content that replaces the RelatedTag component.\n        @binding {RelatedTag} relatedTag - Related tag data.\n        @binding {boolean} highlightCurated - True if the curated RTs should be displayed.\n       -->\n      <slot name=\"related-tag\" v-bind=\"{ relatedTag, highlightCurated }\">\n        <RelatedTag :highlightCurated=\"highlightCurated\" :relatedTag=\"relatedTag\">\n          <template #default=\"{ relatedTag, isSelected, shouldHighlightCurated }\">\n            <!-- eslint-disable max-len -->\n            <!--\n              @slot Custom content that replaces the RelatedTag default content.\n              @binding {RelatedTag} relatedTag - Related tag data.\n              @binding {boolean} isSelected - Related tag status.\n              @binding {boolean} shouldHighlightCurated - True if the curated RTs should be displayed.\n            -->\n            <slot\n              name=\"related-tag-content\"\n              v-bind=\"{ relatedTag, isSelected, shouldHighlightCurated }\"\n            />\n          </template>\n        </RelatedTag>\n      </slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { RelatedTag as RelatedTagModel } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { Getter } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { relatedTagsXModule } from '../x-module';\n  import RelatedTag from './related-tag.vue';\n\n  /**\n   * This component renders a set of [`RelatedTag`](./x-components.related-tag) components by\n   * default to select from after a query is performed to fine-tune search.\n   * For example, if you are searching for *lego*, different related tags could be *city*,\n   * *friends*, or *harry potter*, refining the search with *lego city*, *lego friends*,\n   * or *lego harry potter*.\n   *\n   * @public\n   */\n  @Component({\n    components: { RelatedTag },\n    mixins: [xComponentMixin(relatedTagsXModule)]\n  })\n  export default class RelatedTags extends Vue {\n    /**\n     * Animation component that will be used to animate the suggestion.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue;\n\n    /**\n     * Number of related tags to be rendered.\n     *\n     * @public\n     */\n    @Prop()\n    protected maxItemsToRender?: number;\n\n    /**\n     * Flag to indicate if the curated tags should be displayed different.\n     *\n     * @public\n     */\n    @Prop({ default: false, type: Boolean })\n    protected highlightCurated!: boolean;\n\n    @Getter('relatedTags', 'relatedTags')\n    public storedRelatedTags!: RelatedTagModel[];\n\n    protected get relatedTags(): RelatedTagModel[] {\n      return this.storedRelatedTags.slice(0, this.maxItemsToRender);\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-related-tags {\n    display: flex;\n    list-style: none;\n  }\n</style>\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 QuerySignals microservice must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nThis example shows how related tags can be rendered without any additional effects.\n\n_Search for a fashion term like \"sandal\" or \"lipstick\"._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags />\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the number of related tags rendered has been limited to 3. A fade and slide effect\nhas been added so that the related tags appear with a delay, then slide upwards and fade.\n\n_Search for a fashion term and see the related tags with the animation effect._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags :animation=\"'StaggeredFadeAndSlide'\" :maxItemsToRender=\"3\" />\n  </div>\n</template>\n\n<script>\n  import Vue from 'vue';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n  import { StaggeredFadeAndSlide } from '@empathyco/x-components';\n\n  // Registering the animation as a global component\n  Vue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide);\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags\n    }\n  };\n</script>\n```\n\n### Play with related-tag slot\n\nIn this example, the [`RelatedTag`](./x-components.related-tag.md) component is passed in the\n`related-tag` slot (although any other component could potentially be passed).\n\n_Search for a fashion term and see how the related tags can be rendered._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags #related-tag=\"{ relatedTag }\">\n      <RelatedTag :relatedTag=\"relatedTag\" />\n    </RelatedTags>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags, RelatedTag } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags,\n      RelatedTag\n    }\n  };\n</script>\n```\n\n### Play with related-tag-content slot\n\nTo continue the previous example, the [`RelatedTag`](./x-components.related-tag.md) component is\npassed in the `related-tag-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n_Search for a fashion term and see how the related tags are rendered._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags #related-tag-content=\"{ relatedTag }\">\n      <span>{{ relatedTag.tag }}</span>\n    </RelatedTags>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags\n    }\n  };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. The `RelatedTags` component can\ncommunicate with the [`SearchInput`](../search-box/x-components.search-input.md) as follows:\n\n_Search for a fashion term and see how the related tags can be rendered._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags />\n    <ResultsList #result=\"{ item }\">\n      <span class=\"result\">\n        {{ item.name }}\n      </span>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n  import { ResultsList } from '@empathyco/x-components/search';\n\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags,\n      ResultsList\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/search-box/components/clear-search-input.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"clear-search-input.vue.js","sources":["../../../../../src/x-modules/search-box/components/clear-search-input.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    class=\"x-button x-clear-search-input\"\n    :class=\"dynamicClasses\"\n    :events=\"clearSearchInputEvents\"\n    data-test=\"clear-search-input\"\n  >\n    <!-- @slot _Required_. Button content (text, icon, or both) -->\n    <slot>✕</slot>\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { searchBoxXModule } from '../x-module';\n\n  /**\n   * This component renders a button to delete the current query.\n   *\n   * @remarks\n   * A button that when pressed emits the {@link SearchBoxXEvents.UserPressedClearSearchBoxButton}\n   * and {@link SearchBoxXEvents.UserClearedQuery} events, expressing the user intention to clear\n   * the current query.\n   * It also adds `x-clear-search-input--has-empty-query` as class when there is no query.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseEventButton },\n    mixins: [xComponentMixin(searchBoxXModule)]\n  })\n  export default class ClearSearchInput extends Vue {\n    @State('searchBox', 'query')\n    public query!: string;\n\n    protected get isQueryEmpty(): boolean {\n      return this.query.length === 0;\n    }\n\n    protected get dynamicClasses(): VueCSSClasses {\n      return {\n        'x-clear-search-input--has-empty-query': this.isQueryEmpty\n      };\n    }\n\n    /**\n     * The events dictionary that are going to be emitted when the button is pressed.\n     *\n     * @internal\n     */\n    protected clearSearchInputEvents: Partial<XEventsTypes> = {\n      UserPressedClearSearchBoxButton: undefined\n    };\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserPressedClearSearchBoxButton`](./../../api/x-components.searchboxxevents.md)\n- [`UserClearedQuery`](./../../api/x-components.searchboxxevents.md)\n\n## See it in action\n\nHere a basic example of how the clear button is rendered.\n\n_Type any term in the input field and then click the Clear button to try it out!_\n\n```vue\n<template>\n  <SearchInput />\n  <ClearSearchInput />\n</template>\n\n<script>\n  import { ClearSearchInput, SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'ClearSearchInputDemo',\n    components: {\n      ClearSearchInput,\n      SearchInput\n    }\n  };\n</script>\n```\n\n### Play with default slot\n\nIn this example, a custom text is passed in the default slot instead of the default text to\ncustomize the button content.\n\n_Click the icon button to try it out!_\n\n```vue\n<template>\n  <ClearSearchInput>Clear</ClearSearchInput>\n</template>\n\n<script>\n  import { ClearSearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'ClearSearchInputDemo',\n    components: {\n      ClearSearchInput\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, the `UserPressedClearSearchBoxButton` event is implemented, triggering the message\n“clear” when the clear search input button is clicked.\n\n_Click the Clear button to try it out!_\n\n```vue\n<template>\n  <ClearSearchInput @UserPressedClearSearchBoxButton=\"logUserPressedClearSearchBoxButton\">\n    Clear\n  </ClearSearchInput>\n</template>\n\n<script>\n  import { ClearSearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'ClearSearchInputDemo',\n    components: {\n      ClearSearchInput\n    },\n    methods: {\n      logUserPressedClearSearchBoxButton() {\n        console.log('User pressed clear search box button');\n      }\n    }\n  };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `ClearSearchInput`\ncomponent communicates with the [`SearchInput`](./search-input.md), deleting the search term\nentered.\n\n_Type any term in the input field and then click the icon button to try it out!_\n\n```vue\n<template>\n  <SearchInput />\n  <ClearSearchInput />\n</template>\n\n<script>\n  import { ClearSearchInput, SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'ClearSearchInputDemo',\n    components: {\n      ClearSearchInput,\n      SearchInput\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"clear-search-input.vue.js","sources":["../../../../../src/x-modules/search-box/components/clear-search-input.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    class=\"x-button x-clear-search-input\"\n    :class=\"dynamicClasses\"\n    :events=\"clearSearchInputEvents\"\n    data-test=\"clear-search-input\"\n  >\n    <!-- @slot _Required_. Button content (text, icon, or both) -->\n    <slot>✕</slot>\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { searchBoxXModule } from '../x-module';\n\n  /**\n   * This component renders a button to delete the current query.\n   *\n   * @remarks\n   * A button that when pressed emits the {@link SearchBoxXEvents.UserPressedClearSearchBoxButton}\n   * and {@link SearchBoxXEvents.UserClearedQuery} events, expressing the user intention to clear\n   * the current query.\n   * It also adds `x-clear-search-input--has-empty-query` as class when there is no query.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseEventButton },\n    mixins: [xComponentMixin(searchBoxXModule)]\n  })\n  export default class ClearSearchInput extends Vue {\n    @State('searchBox', 'query')\n    public query!: string;\n\n    protected get isQueryEmpty(): boolean {\n      return this.query.length === 0;\n    }\n\n    protected get dynamicClasses(): VueCSSClasses {\n      return {\n        'x-clear-search-input--has-empty-query': this.isQueryEmpty\n      };\n    }\n\n    /**\n     * The events dictionary that are going to be emitted when the button is pressed.\n     *\n     * @internal\n     */\n    protected clearSearchInputEvents: Partial<XEventsTypes> = {\n      UserPressedClearSearchBoxButton: undefined\n    };\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserPressedClearSearchBoxButton`](./../../api/x-components.searchboxxevents.md)\n- [`UserClearedQuery`](./../../api/x-components.searchboxxevents.md)\n\n## See it in action\n\nHere a basic example of how the clear button is rendered.\n\n_Type any term in the input field and then click the Clear button to try it out!_\n\n```vue live\n<template>\n  <div style=\"display: flex;\">\n    <SearchInput />\n    <ClearSearchInput />\n  </div>\n</template>\n\n<script>\n  import { ClearSearchInput, SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'ClearSearchInputDemo',\n    components: {\n      ClearSearchInput,\n      SearchInput\n    }\n  };\n</script>\n```\n\n### Play with default slot\n\nIn this example, a custom text is passed in the default slot instead of the default text to\ncustomize the button content.\n\n_Click the icon button to try it out!_\n\n```vue live\n<template>\n  <ClearSearchInput>Clear</ClearSearchInput>\n</template>\n\n<script>\n  import { ClearSearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'ClearSearchInputDemo',\n    components: {\n      ClearSearchInput\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, the `UserPressedClearSearchBoxButton` event is implemented, triggering the message\n“clear” when the clear search input button is clicked.\n\n_Click the Clear button to try it out!_\n\n```vue live\n<template>\n  <div>\n    <ClearSearchInput @UserPressedClearSearchBoxButton=\"message = 'clear'\">Clear</ClearSearchInput>\n    {{ message }}\n  </div>\n</template>\n\n<script>\n  import { ClearSearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'ClearSearchInputDemo',\n    components: {\n      ClearSearchInput\n    },\n    data() {\n      return {\n        message: ''\n      };\n    }\n  };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `ClearSearchInput`\ncomponent communicates with the [`SearchInput`](./search-input.md), deleting the search term\nentered.\n\n_Type any term in the input field and then click the icon button to try it out!_\n\n```vue live\n<template>\n  <div style=\"display: flex;\">\n    <SearchInput />\n    <ClearSearchInput />\n  </div>\n</template>\n\n<script>\n  import { SearchInput, ClearSearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'ClearSearchInputDemo',\n    components: {\n      SearchInput,\n      ClearSearchInput\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/search-box/components/search-button.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"search-button.vue.js","sources":["../../../../../src/x-modules/search-box/components/search-button.vue"],"sourcesContent":["<template>\n  <button\n    @click=\"emitEvents\"\n    class=\"x-button x-search-button\"\n    :class=\"dynamicClasses\"\n    data-test=\"search-button\"\n  >\n    <!-- @slot _Required_. Button content (text, icon, or both) -->\n    <slot><span class=\"x-icon\">⌕</span></slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { searchBoxXModule } from '../x-module';\n\n  /**\n   * This component renders a button to submit the query.\n   *\n   * @remarks\n   * If query is not empty, it emits {@link XEventsTypes.UserAcceptedAQuery} and\n   * {@link SearchBoxXEvents.UserPressedSearchButton} events with the query as payload.\n   * It also adds `x-search-button--has-empty-query` as class when there is no query.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(searchBoxXModule)]\n  })\n  export default class SearchButton extends Vue {\n    @State('searchBox', 'query')\n    public query!: string;\n\n    protected get isQueryEmpty(): boolean {\n      return this.query.length === 0;\n    }\n\n    /**\n     * Generates the {@link WireMetadata | event metadata} object omitting the moduleName.\n     *\n     * @returns The {@link WireMetadata} object omitting the moduleName.\n     * @internal\n     */\n    protected createEventMetadata(): Omit<WireMetadata, 'moduleName'> {\n      return {\n        target: this.$el as HTMLElement,\n        feature: 'search_box'\n      };\n    }\n\n    /**\n     * Emits events when the button is clicked.\n     *\n     * @public\n     */\n    protected emitEvents(): void {\n      if (!this.isQueryEmpty) {\n        this.$x.emit('UserAcceptedAQuery', this.query, this.createEventMetadata());\n        this.$x.emit('UserPressedSearchButton', this.query, this.createEventMetadata());\n      }\n    }\n\n    protected get dynamicClasses(): VueCSSClasses {\n      return {\n        'x-search-button--has-empty-query': this.isQueryEmpty\n      };\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserAcceptedAQuery`](./../../api/x-components.xeventstypes.md)\n- [`UserPressedSearchButton`](./../../api/x-components.searchboxxevents.md)\n\n<!-- prettier-ignore-start -->\n:::warning\nNote that no events are emitted if the query is empty.\n:::\n<!-- prettier-ignore-end -->\n\n## Dynamic classes\n\n`SearchButton` uses the `x-search-button--has-empty-query` dynamic CSS class to modify the HTML\nbutton style when the query is empty.\n\n## See it in action\n\nIn this example, a clickable button is rendered.\n\n_Click the Search button to try it out!_\n\n```vue\n<template>\n  <SearchButton />\n</template>\n\n<script>\n  import { SearchButton } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchButtonDemo',\n    components: {\n      SearchButton\n    }\n  };\n</script>\n```\n\n### Play with default slot\n\nHere an icon is passed in the default slot instead of text to customize the button content.\n\n_Click the icon button to try it out!_\n\n```vue\n<template>\n  <SearchButton>Search</SearchButton>\n</template>\n\n<script>\n  import { SearchButton } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchButtonDemo',\n    components: {\n      SearchButton\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, the `UserPressedSearchButton` event has been implemented so that when you enter a\nsearch term and click the Search button, the search term is displayed as a message.\n\n_Type any term in the input field and then click the Search button to try it out!_\n\n```vue\n<template>\n  <SearchButton\n    @UserPressedSearchButton=\"\n      query => {\n        message = query;\n      }\n    \"\n  />\n</template>\n\n<script>\n  import { SearchButton } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchButtonDemo',\n    components: {\n      SearchButton\n    }\n  };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `SearchButton` component\ncommunicates with the [`SearchInput`](./search-input.md) to submit the query. In this example, when\nyou enter a search term and click the Search button, the “Looking for results” message is displayed.\n\n_Type any term in the input field and then click the Search button to try it out!_\n\n```vue\n<template>\n  <SearchInput />\n  <SearchButton @UserAcceptedAQuery=\"message = 'looking for results'\">Search</SearchButton>\n</template>\n\n<script>\n  import { SearchButton, SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchButtonDemo',\n    components: {\n      SearchButton,\n      SearchInput\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"search-button.vue.js","sources":["../../../../../src/x-modules/search-box/components/search-button.vue"],"sourcesContent":["<template>\n  <button\n    @click=\"emitEvents\"\n    class=\"x-button x-search-button\"\n    :class=\"dynamicClasses\"\n    data-test=\"search-button\"\n  >\n    <!-- @slot _Required_. Button content (text, icon, or both) -->\n    <slot><span class=\"x-icon\">⌕</span></slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { searchBoxXModule } from '../x-module';\n\n  /**\n   * This component renders a button to submit the query.\n   *\n   * @remarks\n   * If query is not empty, it emits {@link XEventsTypes.UserAcceptedAQuery} and\n   * {@link SearchBoxXEvents.UserPressedSearchButton} events with the query as payload.\n   * It also adds `x-search-button--has-empty-query` as class when there is no query.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(searchBoxXModule)]\n  })\n  export default class SearchButton extends Vue {\n    @State('searchBox', 'query')\n    public query!: string;\n\n    protected get isQueryEmpty(): boolean {\n      return this.query.length === 0;\n    }\n\n    /**\n     * Generates the {@link WireMetadata | event metadata} object omitting the moduleName.\n     *\n     * @returns The {@link WireMetadata} object omitting the moduleName.\n     * @internal\n     */\n    protected createEventMetadata(): Omit<WireMetadata, 'moduleName'> {\n      return {\n        target: this.$el as HTMLElement,\n        feature: 'search_box'\n      };\n    }\n\n    /**\n     * Emits events when the button is clicked.\n     *\n     * @public\n     */\n    protected emitEvents(): void {\n      if (!this.isQueryEmpty) {\n        this.$x.emit('UserAcceptedAQuery', this.query, this.createEventMetadata());\n        this.$x.emit('UserPressedSearchButton', this.query, this.createEventMetadata());\n      }\n    }\n\n    protected get dynamicClasses(): VueCSSClasses {\n      return {\n        'x-search-button--has-empty-query': this.isQueryEmpty\n      };\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserAcceptedAQuery`](./../../api/x-components.xeventstypes.md)\n- [`UserPressedSearchButton`](./../../api/x-components.searchboxxevents.md)\n\n<!-- prettier-ignore-start -->\n:::warning\nNote that no events are emitted if the query is empty.\n:::\n<!-- prettier-ignore-end -->\n\n## Dynamic classes\n\n`SearchButton` uses the `x-search-button--has-empty-query` dynamic CSS class to modify the HTML\nbutton style when the query is empty.\n\n## See it in action\n\nIn this example, a clickable button is rendered.\n\n_Click the Search button to try it out!_\n\n```vue live\n<template>\n  <SearchButton />\n</template>\n\n<script>\n  import { SearchButton } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchButtonDemo',\n    components: {\n      SearchButton\n    }\n  };\n</script>\n```\n\n### Play with default slot\n\nHere text is passed in the default slot instead of an icon to customize the button content.\n\n_Click the icon button to try it out!_\n\n```vue live\n<template>\n  <SearchButton>Search</SearchButton>\n</template>\n\n<script>\n  import { SearchButton } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchButtonDemo',\n    components: {\n      SearchButton\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, the `UserPressedSearchButton` event has been implemented so that when you enter a\nsearch term and click the Search button, the search term is displayed as a message.\n\n_Type any term in the input field and then click the Search button to try it out!_\n\n```vue live\n<template>\n  <div>\n    <div style=\"display: flex;\">\n      <SearchInput />\n      <SearchButton\n        @UserPressedSearchButton=\"\n          query => {\n            message = query;\n          }\n        \"\n      />\n    </div>\n    {{ message }}\n  </div>\n</template>\n\n<script>\n  import { SearchInput, SearchButton } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchButtonDemo',\n    components: {\n      SearchInput,\n      SearchButton\n    },\n    data() {\n      return {\n        message: ''\n      };\n    }\n  };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `SearchButton` component\ncommunicates with the [`SearchInput`](./search-input.md) to submit the query. In this example, when\nyou enter a search term and click the Search button, the “Looking for results” message is displayed.\n\n_Type any term in the input field and then click the Search button to try it out!_\n\n```vue live\n<template>\n  <div>\n    <div style=\"display: flex;\">\n      <SearchInput />\n      <SearchButton @UserAcceptedAQuery=\"message = 'looking for results'\">Search</SearchButton>\n    </div>\n    {{ message }}\n  </div>\n</template>\n\n<script>\n  import { SearchButton, SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchButtonDemo',\n    components: {\n      SearchButton,\n      SearchInput\n    },\n    data() {\n      return {\n        message: ''\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/search-box/components/search-input.vue.js

@@ -61,11 +61,11 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = function (inject) {
     if (!inject) return
-    inject("data-v-586c14f9_0", { source: ".x-search-input[data-v-586c14f9]::-webkit-search-decoration,\n.x-search-input[data-v-586c14f9]::-webkit-search-cancel-button,\n.x-search-input[data-v-586c14f9]::-webkit-search-results-button,\n.x-search-input[data-v-586c14f9]::-webkit-search-results-decoration {\n  -webkit-appearance: none;\n}", map: undefined, media: undefined });
+    inject("data-v-8cb2a948_0", { source: ".x-search-input[data-v-8cb2a948]::-webkit-search-decoration,\n.x-search-input[data-v-8cb2a948]::-webkit-search-cancel-button,\n.x-search-input[data-v-8cb2a948]::-webkit-search-results-button,\n.x-search-input[data-v-8cb2a948]::-webkit-search-results-decoration {\n  -webkit-appearance: none;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__ = "data-v-586c14f9";
+  const __vue_scope_id__ = "data-v-8cb2a948";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */

package/js/x-modules/search-box/components/search-input.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"search-input.vue.js","sources":["../../../../../src/x-modules/search-box/components/search-input.vue"],"sourcesContent":["<template>\n  <input\n    ref=\"input\"\n    @blur=\"emitUserBlurredSearchBox\"\n    @click=\"emitUserClickedSearchBox\"\n    @focus=\"emitUserFocusedSearchBox\"\n    @input=\"emitUserIsTypingAQueryEvents\"\n    @keydown.enter=\"emitUserPressedEnterKey\"\n    @keydown.up.down.prevent=\"emitUserPressedArrowKey\"\n    :maxlength=\"maxLength\"\n    :value=\"query\"\n    autocomplete=\"off\"\n    class=\"x-input x-search-input\"\n    enterkeyhint=\"search\"\n    inputmode=\"search\"\n    type=\"search\"\n    data-test=\"search-input\"\n  />\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 { XOn } from '../../../components/decorators/bus.decorators';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { ArrowKey, PropsWithType } from '../../../utils';\n  import { debounce } from '../../../utils/debounce';\n  import { DebouncedFunction } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { searchBoxXModule } from '../x-module';\n\n  /**\n   * This component renders an input field that allows the user to type a query. It also reacts to\n   * query changes through event listening.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(searchBoxXModule)]\n  })\n  export default class SearchInput extends Vue {\n    public $refs!: { input: HTMLInputElement };\n\n    /**\n     * Maximum characters allowed in the input search.\n     */\n    @Prop({ default: 64 })\n    protected maxLength!: number;\n\n    /**\n     * Allows input autofocus when the search field is rendered.\n     */\n    @Prop({ default: true })\n    protected autofocus!: boolean;\n\n    /**\n     * Enables the auto-accept query after debounce.\n     */\n    @Prop({ default: true })\n    protected instant!: boolean;\n\n    /**\n     * Debounce time for the instant.\n     */\n    @Prop({ default: 500 })\n    protected instantDebounceInMs!: number;\n\n    /**\n     * Keyboard keys to accept the autocomplete suggestion.\n     */\n    @Prop({ default: () => ['ArrowRight'] })\n    protected autocompleteKeyboardKeys!: string[]; // https://keycode.info/\n\n    /**\n     * Event that retrieves the autocomplete suggestion.\n     */\n    @Prop({ default: 'QuerySuggestionsChanged' })\n    protected autocompleteSuggestionsEvent!: PropsWithType<XEventsTypes, Suggestion[]>;\n\n    @State('searchBox', 'query')\n    public query!: string;\n\n    /**\n     * When event {@link XEventsTypes.UserReachedEmpathizeTop} or\n     * {@link SearchBoxXEvents.UserPressedClearSearchBoxButton}\n     * are emitted the search in put is focused.\n     *\n     * @internal\n     */\n    @XOn(['UserReachedEmpathizeTop', 'UserPressedClearSearchBoxButton'])\n    focusInput(): void {\n      this.$refs.input?.focus();\n    }\n\n    protected debouncedUserAcceptedAQuery!: DebouncedFunction<[string]>;\n\n    /**\n     * When event {@link XEventsTypes.UserAcceptedAQuery} or\n     * {@link SearchBoxXEvents.UserClearedQuery} are emitted the pending debounced emit\n     * {@link XEvent} `UserAcceptedAQuery` is canceled.\n     *\n     * @internal\n     */\n    @XOn(['UserAcceptedAQuery', 'UserClearedQuery'])\n    cancelDebouncedUserAcceptedAQuery(): void {\n      this.debouncedUserAcceptedAQuery?.cancel();\n    }\n\n    mounted(): void {\n      if (this.autofocus) {\n        this.focusInput();\n      }\n    }\n\n    /**\n     * Emits {@link XEventsTypes.UserAcceptedAQuery} event with a debounce configured in\n     * `instantDebounceInMs` prop.\n     *\n     * @internal\n     * @param query - The query that will be emitted.\n     */\n    emitDebouncedUserAcceptedAQuery(query: string): void {\n      if (this.instant) {\n        if (!this.debouncedUserAcceptedAQuery) {\n          this.debouncedUserAcceptedAQuery = debounce(\n            this.emitUserAcceptedAQuery.bind(this),\n            this.instantDebounceInMs\n          );\n        }\n        this.debouncedUserAcceptedAQuery(query);\n      }\n    }\n\n    /**\n     * Generates the {@link WireMetadata | event metadata} object omitting the moduleName.\n     *\n     * @returns The {@link WireMetadata} object omitting the moduleName.\n     * @internal\n     */\n    protected createEventMetadata(): Omit<WireMetadata, 'moduleName'> {\n      return {\n        target: this.$refs.input,\n        feature: 'search_box'\n      };\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserBlurredSearchBox} when search box loses focus.\n     *\n     * @internal\n     */\n    protected emitUserBlurredSearchBox(): void {\n      this.$x.emit('UserBlurredSearchBox', undefined, { target: this.$refs.input });\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserClickedSearchBox} when user clicks  the search input.\n     *\n     * @internal\n     */\n    protected emitUserClickedSearchBox(): void {\n      this.$x.emit('UserClickedSearchBox', undefined, { target: this.$refs.input });\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserFocusedSearchBox} when search box gains focus.\n     *\n     * @internal\n     */\n    protected emitUserFocusedSearchBox(): void {\n      this.$x.emit('UserFocusedSearchBox', undefined, { target: this.$refs.input });\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserIsTypingAQuery} when the user typed/pasted something\n     * into the search-box. Also emits event {@link SearchBoxXEvents.UserClearedQuery} when the user\n     * removes all characters in the search-box.\n     *\n     * @internal\n     */\n    protected emitUserIsTypingAQueryEvents(): void {\n      const query = this.$refs.input.value;\n      this.$x.emit('UserIsTypingAQuery', query, { target: this.$refs.input });\n      if (query.trim()) {\n        this.emitDebouncedUserAcceptedAQuery(query);\n      } else {\n        this.cancelDebouncedUserAcceptedAQuery();\n      }\n    }\n\n    /**\n     * Emits event {@link XEventsTypes.UserPressedArrowKey} when the user pressed an arrow key.\n     *\n     * @param event - The keyboard event with the arrow key pressed.\n     * @internal\n     */\n    protected emitUserPressedArrowKey(event: KeyboardEvent): void {\n      this.$x.emit('UserPressedArrowKey', event.key as ArrowKey, this.createEventMetadata());\n    }\n\n    /**\n     * Emits multiple events when the user pressed the enter key.\n     *\n     * @remarks\n     * Emitted events are:\n     * * {@link SearchBoxXEvents.UserPressedEnterKey}\n     * * {@link XEventsTypes.UserAcceptedAQuery}\n     *\n     * @internal\n     */\n    protected emitUserPressedEnterKey(): void {\n      const query = this.$refs.input.value.trim();\n      if (query.length > 0) {\n        this.$x.emit('UserPressedEnterKey', query, this.createEventMetadata());\n        this.emitUserAcceptedAQuery(query);\n      }\n      this.$refs.input?.blur();\n    }\n\n    /**\n     * Emits {@link XEventsTypes.UserAcceptedAQuery} event.\n     *\n     * @remarks It is necessary in a separated method to use it as the parameter of debounce in\n     * emitDebouncedUserAcceptedAQuery method.\n     * @internal\n     * @param query - The query that will be emitted.\n     */\n    protected emitUserAcceptedAQuery(query: string): void {\n      this.$x.emit('UserAcceptedAQuery', query, this.createEventMetadata());\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-search-input::-webkit-search-decoration,\n  .x-search-input::-webkit-search-cancel-button,\n  .x-search-input::-webkit-search-results-button,\n  .x-search-input::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedSearchBox`](./../../api/x-components.searchboxxevents.md)\n- [`UserBlurredSearchBox`](./../../api/x-components.searchboxxevents.md)\n- [`UserFocusedSearchBox`](./../../api/x-components.searchboxxevents.md)\n- [`UserIsTypingAQuery`](./../../api/x-components.searchboxxevents.md)\n- [`UserPressedEnterKey`](./../../api/x-components.searchboxxevents.md)\n- [`UserPressedArrowKey`](./../../api/x-components.xeventstypes.md)\n- [`UserAcceptedAQuery`](./../../api/x-components.xeventstypes.md)\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Search service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example of how the search input is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue\n<template>\n  <SearchInput />\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchInputDemo',\n    components: {\n      SearchInput\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the search input has been limited to accept a maximum of 5 characters, including\nspaces, it won't take the focus when it is rendered, and it will emit the `UserAcceptedAQuery` event\nafter 1000 milliseconds without typing.\n\n_Type a term with more than 5 characters to try it out!_\n\n```vue\n<template>\n  <SearchInput :maxLength=\"5\" :autofocus=\"false\" :instant=\"true\" :instantDebounceInMs=\"1000\" />\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchInputDemo',\n    components: {\n      SearchInput\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, a message has been added below the search input to illustrate the action performed.\nFor example, if you select the search input box, the message “focus” appears. When you start to\nenter a search term, the message “typing” appears. If you press Enter after typing a search term,\nthe message “enter” appears.\n\n_Type any term in the input field to try it out!_\n\n```vue\n<template>\n  <SearchInput\n    @UserPressedEnterKey=\"logUserPressedEnter\"\n    @UserFocusedSearchBox=\"hasFocus = true\"\n    @UserBlurredSearchBox=\"hasFocus = false\"\n    @UserIsTypingAQuery=\"value = 'focus'\"\n  />\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchInputDemo',\n    components: {\n      SearchInput\n    },\n    data() {\n      return {\n        value: '',\n        hasFocus: false\n      };\n    },\n    methods: {\n      logUserPressedEnter() {\n        console.log('User pressed enter');\n      }\n    }\n  };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `SearchInput` component\ncommunicates with the [`SearchButton`](x-components.search-button.md) and the\n[`ClearSearchInput`](x-components.clear-search-input.md) to offer a full query entry experience.\nFurthermore, you can use it together with the [`QuerySuggestions`](query-suggestions.md) component\nto autocomplete the typed search term.\n\n_Type “puzzle” or another toy in the input field and then click the clear icon to try it out!_\n\n```vue\n<template>\n  <div>\n    <div style=\"display: flex; flex-flow: row nowrap;\">\n      <SearchInput />\n      <ClearSearchInput>\n        <img src=\"/assets/icons/cross.svg\" />\n      </ClearSearchInput>\n      <SearchButton>Search</SearchButton>\n    </div>\n    <QuerySuggestions />\n  </div>\n</template>\n\n<script>\n  import {\n    SearchInput,\n    ClearSearchInput,\n    ClearSearchButton\n  } from '@empathyco/x-components/search-box';\n  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n\n  export default {\n    name: 'SearchInputDemo',\n    components: {\n      SearchInput,\n      ClearSearchInput,\n      ClearSearchButton,\n      QuerySuggestions\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"search-input.vue.js","sources":["../../../../../src/x-modules/search-box/components/search-input.vue"],"sourcesContent":["<template>\n  <input\n    ref=\"input\"\n    @blur=\"emitUserBlurredSearchBox\"\n    @click=\"emitUserClickedSearchBox\"\n    @focus=\"emitUserFocusedSearchBox\"\n    @input=\"emitUserIsTypingAQueryEvents\"\n    @keydown.enter=\"emitUserPressedEnterKey\"\n    @keydown.up.down.prevent=\"emitUserPressedArrowKey\"\n    :maxlength=\"maxLength\"\n    :value=\"query\"\n    autocomplete=\"off\"\n    class=\"x-input x-search-input\"\n    enterkeyhint=\"search\"\n    inputmode=\"search\"\n    type=\"search\"\n    data-test=\"search-input\"\n  />\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 { XOn } from '../../../components/decorators/bus.decorators';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { ArrowKey, PropsWithType } from '../../../utils';\n  import { debounce } from '../../../utils/debounce';\n  import { DebouncedFunction } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { searchBoxXModule } from '../x-module';\n\n  /**\n   * This component renders an input field that allows the user to type a query. It also reacts to\n   * query changes through event listening.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(searchBoxXModule)]\n  })\n  export default class SearchInput extends Vue {\n    public $refs!: { input: HTMLInputElement };\n\n    /**\n     * Maximum characters allowed in the input search.\n     */\n    @Prop({ default: 64 })\n    protected maxLength!: number;\n\n    /**\n     * Allows input autofocus when the search field is rendered.\n     */\n    @Prop({ default: true })\n    protected autofocus!: boolean;\n\n    /**\n     * Enables the auto-accept query after debounce.\n     */\n    @Prop({ default: true })\n    protected instant!: boolean;\n\n    /**\n     * Debounce time for the instant.\n     */\n    @Prop({ default: 500 })\n    protected instantDebounceInMs!: number;\n\n    /**\n     * Keyboard keys to accept the autocomplete suggestion.\n     */\n    @Prop({ default: () => ['ArrowRight'] })\n    protected autocompleteKeyboardKeys!: string[]; // https://keycode.info/\n\n    /**\n     * Event that retrieves the autocomplete suggestion.\n     */\n    @Prop({ default: 'QuerySuggestionsChanged' })\n    protected autocompleteSuggestionsEvent!: PropsWithType<XEventsTypes, Suggestion[]>;\n\n    @State('searchBox', 'query')\n    public query!: string;\n\n    /**\n     * When event {@link XEventsTypes.UserReachedEmpathizeTop} or\n     * {@link SearchBoxXEvents.UserPressedClearSearchBoxButton}\n     * are emitted the search in put is focused.\n     *\n     * @internal\n     */\n    @XOn(['UserReachedEmpathizeTop', 'UserPressedClearSearchBoxButton'])\n    focusInput(): void {\n      this.$refs.input?.focus();\n    }\n\n    protected debouncedUserAcceptedAQuery!: DebouncedFunction<[string]>;\n\n    /**\n     * When event {@link XEventsTypes.UserAcceptedAQuery} or\n     * {@link SearchBoxXEvents.UserClearedQuery} are emitted the pending debounced emit\n     * {@link XEvent} `UserAcceptedAQuery` is canceled.\n     *\n     * @internal\n     */\n    @XOn(['UserAcceptedAQuery', 'UserClearedQuery'])\n    cancelDebouncedUserAcceptedAQuery(): void {\n      this.debouncedUserAcceptedAQuery?.cancel();\n    }\n\n    mounted(): void {\n      if (this.autofocus) {\n        this.focusInput();\n      }\n    }\n\n    /**\n     * Emits {@link XEventsTypes.UserAcceptedAQuery} event with a debounce configured in\n     * `instantDebounceInMs` prop.\n     *\n     * @internal\n     * @param query - The query that will be emitted.\n     */\n    emitDebouncedUserAcceptedAQuery(query: string): void {\n      if (this.instant) {\n        if (!this.debouncedUserAcceptedAQuery) {\n          this.debouncedUserAcceptedAQuery = debounce(\n            this.emitUserAcceptedAQuery.bind(this),\n            this.instantDebounceInMs\n          );\n        }\n        this.debouncedUserAcceptedAQuery(query);\n      }\n    }\n\n    /**\n     * Generates the {@link WireMetadata | event metadata} object omitting the moduleName.\n     *\n     * @returns The {@link WireMetadata} object omitting the moduleName.\n     * @internal\n     */\n    protected createEventMetadata(): Omit<WireMetadata, 'moduleName'> {\n      return {\n        target: this.$refs.input,\n        feature: 'search_box'\n      };\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserBlurredSearchBox} when search box loses focus.\n     *\n     * @internal\n     */\n    protected emitUserBlurredSearchBox(): void {\n      this.$x.emit('UserBlurredSearchBox', undefined, { target: this.$refs.input });\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserClickedSearchBox} when user clicks  the search input.\n     *\n     * @internal\n     */\n    protected emitUserClickedSearchBox(): void {\n      this.$x.emit('UserClickedSearchBox', undefined, { target: this.$refs.input });\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserFocusedSearchBox} when search box gains focus.\n     *\n     * @internal\n     */\n    protected emitUserFocusedSearchBox(): void {\n      this.$x.emit('UserFocusedSearchBox', undefined, { target: this.$refs.input });\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserIsTypingAQuery} when the user typed/pasted something\n     * into the search-box. Also emits event {@link SearchBoxXEvents.UserClearedQuery} when the user\n     * removes all characters in the search-box.\n     *\n     * @internal\n     */\n    protected emitUserIsTypingAQueryEvents(): void {\n      const query = this.$refs.input.value;\n      this.$x.emit('UserIsTypingAQuery', query, { target: this.$refs.input });\n      if (query.trim()) {\n        this.emitDebouncedUserAcceptedAQuery(query);\n      } else {\n        this.cancelDebouncedUserAcceptedAQuery();\n      }\n    }\n\n    /**\n     * Emits event {@link XEventsTypes.UserPressedArrowKey} when the user pressed an arrow key.\n     *\n     * @param event - The keyboard event with the arrow key pressed.\n     * @internal\n     */\n    protected emitUserPressedArrowKey(event: KeyboardEvent): void {\n      this.$x.emit('UserPressedArrowKey', event.key as ArrowKey, this.createEventMetadata());\n    }\n\n    /**\n     * Emits multiple events when the user pressed the enter key.\n     *\n     * @remarks\n     * Emitted events are:\n     * * {@link SearchBoxXEvents.UserPressedEnterKey}\n     * * {@link XEventsTypes.UserAcceptedAQuery}\n     *\n     * @internal\n     */\n    protected emitUserPressedEnterKey(): void {\n      const query = this.$refs.input.value.trim();\n      if (query.length > 0) {\n        this.$x.emit('UserPressedEnterKey', query, this.createEventMetadata());\n        this.emitUserAcceptedAQuery(query);\n      }\n      this.$refs.input?.blur();\n    }\n\n    /**\n     * Emits {@link XEventsTypes.UserAcceptedAQuery} event.\n     *\n     * @remarks It is necessary in a separated method to use it as the parameter of debounce in\n     * emitDebouncedUserAcceptedAQuery method.\n     * @internal\n     * @param query - The query that will be emitted.\n     */\n    protected emitUserAcceptedAQuery(query: string): void {\n      this.$x.emit('UserAcceptedAQuery', query, this.createEventMetadata());\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-search-input::-webkit-search-decoration,\n  .x-search-input::-webkit-search-cancel-button,\n  .x-search-input::-webkit-search-results-button,\n  .x-search-input::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedSearchBox`](./../../api/x-components.searchboxxevents.md)\n- [`UserBlurredSearchBox`](./../../api/x-components.searchboxxevents.md)\n- [`UserFocusedSearchBox`](./../../api/x-components.searchboxxevents.md)\n- [`UserIsTypingAQuery`](./../../api/x-components.searchboxxevents.md)\n- [`UserPressedEnterKey`](./../../api/x-components.searchboxxevents.md)\n- [`UserPressedArrowKey`](./../../api/x-components.xeventstypes.md)\n- [`UserAcceptedAQuery`](./../../api/x-components.xeventstypes.md)\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Search service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example of how the search input is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n  <SearchInput />\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchInputDemo',\n    components: {\n      SearchInput\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the search input has been limited to accept a maximum of 5 characters, including\nspaces, it won't take the focus when it is rendered, and it will emit the `UserAcceptedAQuery` event\nafter 1000 milliseconds without typing.\n\n_Type a term with more than 5 characters to try it out!_\n\n```vue live\n<template>\n  <SearchInput :maxLength=\"5\" :autofocus=\"false\" :instant=\"true\" :instantDebounceInMs=\"1000\" />\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchInputDemo',\n    components: {\n      SearchInput\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, a message has been added below the search input to illustrate the action performed.\nFor example, if you select the search input box, the message “focus” appears. When you start to\nenter a search term, the message “typing” appears. If you press Enter after typing a search term,\nthe message “enter” appears.\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput\n      @UserPressedEnterKey=\"value = 'enter'\"\n      @UserFocusedSearchBox=\"hasFocus = true\"\n      @UserBlurredSearchBox=\"hasFocus = false\"\n      @UserIsTypingAQuery=\"value = 'typing'\"\n    />\n    <strong>{{ value }}</strong>\n    <span>{{ hasFocus ? 'focused' : 'unfocused' }}</span>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchInputDemo',\n    components: {\n      SearchInput\n    },\n    data() {\n      return {\n        value: '',\n        hasFocus: false\n      };\n    }\n  };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `SearchInput` component\ncommunicates with the [`SearchButton`](x-components.search-button.md) and the\n[`ClearSearchInput`](x-components.clear-search-input.md) to offer a full query entry experience.\nFurthermore, you can use it together with the [`QuerySuggestions`](query-suggestions.md) component\nto autocomplete the typed search term.\n\n_Type “trousers” or another fashion term in the input field and then click the clear icon to try it\nout!_\n\n```vue live\n<template>\n  <div>\n    <div style=\"display: flex; flex-flow: row nowrap;\">\n      <SearchInput />\n      <ClearSearchInput>\n        <img src=\"/assets/icons/cross.svg\" />\n      </ClearSearchInput>\n      <SearchButton>Search</SearchButton>\n    </div>\n    <QuerySuggestions />\n  </div>\n</template>\n\n<script>\n  import { SearchInput, ClearSearchInput, SearchButton } from '@empathyco/x-components/search-box';\n  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n\n  export default {\n    name: 'SearchInputDemo',\n    components: {\n      SearchInput,\n      ClearSearchInput,\n      SearchButton,\n      QuerySuggestions\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "3.0.0-alpha.80",
+  "version": "3.0.0-alpha.83",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -59,12 +59,12 @@
     "cypress:open:component": "cypress open-ct"
   },
   "dependencies": {
-    "@empathyco/x-adapter": "^7.0.0-alpha.19",
-    "@empathyco/x-deep-merge": "^1.3.0-alpha.7",
+    "@empathyco/x-adapter": "^7.0.0-alpha.22",
+    "@empathyco/x-deep-merge": "^1.3.0-alpha.10",
     "@empathyco/x-logger": "^1.2.0-alpha.3",
     "@empathyco/x-storage-service": "^2.0.0-alpha.2",
     "@empathyco/x-types": "^10.0.0-alpha.20",
-    "@empathyco/x-utils": "^0.1.0-alpha.6",
+    "@empathyco/x-utils": "^0.1.0-alpha.9",
     "@types/resize-observer-browser": "~0.1.5",
     "nanoid": "~3.1.31",
     "reflect-metadata": "~0.1.13",
@@ -126,5 +126,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "fc9686804a0fd2ca4a154684ef4fcd85f0b5bab6"
+  "gitHead": "ea3188a8ed192359c9f64137a1e8065d8908f46d"
 }