@empathyco/x-components 3.0.0-alpha.32 → 3.0.0-alpha.36

package/js/x-modules/history-queries/components/history-queries.vue_rollup-plugin-vue=script.js

@@ -1,9 +1,9 @@
 import { __extends, __decorate } from 'tslib';
 import Vue from 'vue';
 import { Prop, Component } from 'vue-property-decorator';
-import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue.js';
 import { Getter } from '../../../components/decorators/store.decorators.js';
 import { xComponentMixin } from '../../../components/x-component.mixin.js';
+import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue.js';
 import { historyQueriesXModule } from '../x-module.js';
 import HistoryQuery from './history-query.vue.js';
 

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

@@ -1 +1 @@
-{"version":3,"file":"history-query.vue.js","sources":["../../../../../src/x-modules/history-queries/components/history-query.vue"],"sourcesContent":["<template>\n  <div class=\"x-suggestion-group x-history-query\">\n    <BaseSuggestion\n      class=\"x-history-query__suggestion\"\n      v-bind=\"{ suggestion, suggestionSelectedEvents, query }\"\n      data-test=\"history-query\"\n      feature=\"history_query\"\n    >\n      <template #default=\"{ suggestion, queryHTML }\">\n        <!-- eslint-disable max-len -->\n        <!--\n          @slot History Query content\n              @binding {Suggestion} suggestion - History Query suggestion data\n              @binding {string} queryHTML - Suggestion's query with the matching part inside a span tag\n        -->\n        <!-- eslint-enable max-len -->\n        <slot v-bind=\"{ suggestion, queryHTML }\" />\n      </template>\n    </BaseSuggestion>\n    <RemoveHistoryQuery\n      class=\"x-history-query__remove\"\n      :historyQuery=\"suggestion\"\n      data-test=\"remove-history-query\"\n    >\n      <!--\n          @slot History Query remove button content\n              @binding {Suggestion} suggestion - History Query suggestion data\n        -->\n      <slot name=\"remove-button-content\" v-bind=\"{ suggestion }\">✕</slot>\n    </RemoveHistoryQuery>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { HistoryQuery as HistoryQueryModel } 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 BaseSuggestion from '../../../components/suggestions/base-suggestion.vue';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { historyQueriesXModule } from '../x-module';\n  import RemoveHistoryQuery from './remove-history-query.vue';\n\n  /**\n   * This component renders a history query suggestion combining two buttons: one for selecting this\n   * suggestion as the search query, and another one to remove this query suggestion from the\n   * history queries.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(historyQueriesXModule)],\n    components: { RemoveHistoryQuery, BaseSuggestion }\n  })\n  export default class HistoryQuery extends Vue {\n    /**\n     * The history query suggestion to render.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected suggestion!: HistoryQueryModel;\n\n    /**\n     * The normalized query of the history-queries module.\n     *\n     * @internal\n     */\n    @Getter('historyQueries', 'normalizedQuery')\n    public query!: string;\n\n    /**\n     * The list of events that are going to be emitted when the suggestion button is pressed.\n     *\n     * @internal\n     * @returns The {@link XEvent | XEvents} to emit.\n     */\n    protected get suggestionSelectedEvents(): Partial<XEventsTypes> {\n      return {\n        UserSelectedAHistoryQuery: this.suggestion\n      };\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n# Examples\n\n## Basic usage\n\nThis component only requires a prop called `suggestion`\n\n```vue\n<HistoryQuery :suggestion=\"historyQuery\" />\n```\n\n## Customizing slots content\n\nSuggestion and remove buttons contents can be customized.\n\nThe default slot allows you to replace the content of the suggestion button. It has two properties,\nthe suggestion itself, and a `string` of HTML with the matched query.\n\nThe other slot is called `remove-button-content`, and allows you to set the content of the button\nthat serves to remove this query from the history. This slot only has one property, the suggestion.\n\n````vue\n<HistoryQuery :suggestion=\"historyQuery\">\n  <template #default=\"{ suggestion, queryHTML }\">\n    <img class=\"x-history-query__history-icon\" src=\"./history-icon.svg\"/>\n    <span class=\"x-history-query__matching-part\" v-html=\"queryHTML\"/>\n  </template>\n\n  <template #remove-button-content=\"{ suggestion }\">\n    <img class=\"x-history-query__remove-icon\" src=\"./remove-icon.svg\"/>\n  </template>\n</HistoryQuery>\n``` ## Events A list of events that the component will emit: - `UserSelectedAHistoryQuery`: the\nevent is emitted after the user clicks the button. The event payload is the history query data.\n````\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"history-query.vue.js","sources":["../../../../../src/x-modules/history-queries/components/history-query.vue"],"sourcesContent":["<template>\n  <div class=\"x-suggestion-group x-history-query\">\n    <BaseSuggestion\n      class=\"x-history-query__suggestion\"\n      v-bind=\"{ suggestion, suggestionSelectedEvents, query }\"\n      data-test=\"history-query\"\n      feature=\"history_query\"\n    >\n      <template #default=\"{ suggestion, queryHTML }\">\n        <!-- eslint-disable max-len -->\n        <!--\n          @slot History Query content\n              @binding {Suggestion} suggestion - History Query suggestion data\n              @binding {string} queryHTML - Suggestion's query with the matching part inside a span tag\n        -->\n        <!-- eslint-enable max-len -->\n        <slot v-bind=\"{ suggestion, queryHTML }\" />\n      </template>\n    </BaseSuggestion>\n    <RemoveHistoryQuery\n      class=\"x-history-query__remove\"\n      :historyQuery=\"suggestion\"\n      data-test=\"remove-history-query\"\n    >\n      <!--\n          @slot History Query remove button content\n              @binding {Suggestion} suggestion - History Query suggestion data\n        -->\n      <slot name=\"remove-button-content\" v-bind=\"{ suggestion }\">✕</slot>\n    </RemoveHistoryQuery>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { HistoryQuery as HistoryQueryModel } 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 BaseSuggestion from '../../../components/suggestions/base-suggestion.vue';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { historyQueriesXModule } from '../x-module';\n  import RemoveHistoryQuery from './remove-history-query.vue';\n\n  /**\n   * This component renders a history query suggestion combining two buttons: one for selecting this\n   * suggestion as the search query, and another one to remove this query suggestion from the\n   * history queries.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(historyQueriesXModule)],\n    components: { RemoveHistoryQuery, BaseSuggestion }\n  })\n  export default class HistoryQuery extends Vue {\n    /**\n     * The history query suggestion to render.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected suggestion!: HistoryQueryModel;\n\n    /**\n     * The normalized query of the history-queries module.\n     *\n     * @internal\n     */\n    @Getter('historyQueries', 'normalizedQuery')\n    public query!: string;\n\n    /**\n     * The list of events that are going to be emitted when the suggestion button is pressed.\n     *\n     * @internal\n     * @returns The {@link XEvent | XEvents} to emit.\n     */\n    protected get suggestionSelectedEvents(): Partial<XEventsTypes> {\n      return {\n        UserSelectedAHistoryQuery: this.suggestion\n      };\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic usage\n\nThis component only requires a prop called `suggestion`\n\n```vue\n<HistoryQuery :suggestion=\"historyQuery\" />\n```\n\n### Customizing slots content\n\nSuggestion and remove buttons contents can be customized.\n\nThe default slot allows you to replace the content of the suggestion button. It has two properties,\nthe suggestion itself, and a `string` of HTML with the matched query.\n\nThe other slot is called `remove-button-content`, and allows you to set the content of the button\nthat serves to remove this query from the history. This slot only has one property, the suggestion.\n\n````vue\n<HistoryQuery :suggestion=\"historyQuery\">\n  <template #default=\"{ suggestion, queryHTML }\">\n    <img class=\"x-history-query__history-icon\" src=\"./history-icon.svg\"/>\n    <span class=\"x-history-query__matching-part\" v-html=\"queryHTML\"/>\n  </template>\n\n  <template #remove-button-content=\"{ suggestion }\">\n    <img class=\"x-history-query__remove-icon\" src=\"./remove-icon.svg\"/>\n  </template>\n</HistoryQuery>\n``` ## Events A list of events that the component will emit: - `UserSelectedAHistoryQuery`: the\nevent is emitted after the user clicks the button. The event payload is the history query data.\n````\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,9 +1,9 @@
 import { __extends, __decorate } from 'tslib';
 import Vue from 'vue';
 import { Prop, Component } from 'vue-property-decorator';
-import BaseSuggestion from '../../../components/suggestions/base-suggestion.vue.js';
 import { Getter } from '../../../components/decorators/store.decorators.js';
 import { xComponentMixin } from '../../../components/x-component.mixin.js';
+import BaseSuggestion from '../../../components/suggestions/base-suggestion.vue.js';
 import { historyQueriesXModule } from '../x-module.js';
 import RemoveHistoryQuery from './remove-history-query.vue.js';
 

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

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

package/js/x-modules/history-queries/wiring.js

@@ -103,7 +103,7 @@ var historyQueriesWiring = createWiring({
         setHistoryQueriesQueryDebounce: moduleDebounce(setHistoryQueriesQuery, function (_a) {
             var state = _a.state;
             return state.config.debounceInMs;
-        }, 'UserAcceptedAQuery')
+        }, { cancelOn: 'UserAcceptedAQuery' })
     },
     UserPressedClearHistoryQueries: {
         clearHistoryQueries: clearHistoryQueries

package/js/x-modules/history-queries/wiring.js.map

@@ -1 +1 @@
-{"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/history-queries/wiring.ts"],"sourcesContent":["import {\n  namespacedWireCommit,\n  namespacedWireDispatch,\n  namespacedWireDispatchWithoutPayload\n} from '../../wiring/namespaced-wires.factory';\nimport { namespacedDebounce } from '../../wiring/namespaced-wires.operators';\nimport { NamespacedWireCommit, NamespacedWireDispatch } from '../../wiring/namespaced-wiring.types';\nimport { createWiring } from '../../wiring/wiring.utils';\n\n/**\n * `historyQueries` {@link XModuleName | XModule name}.\n *\n * @internal\n */\nconst moduleName = 'historyQueries';\n/**\n * WireCommit for {@link HistoryQueriesXModule}.\n *\n * @internal\n */\nconst wireCommit: NamespacedWireCommit<typeof moduleName> = namespacedWireCommit(moduleName);\n/**\n * WireDispatch for {@link HistoryQueriesXModule}.\n *\n * @internal\n */\nconst wireDispatch: NamespacedWireDispatch<typeof moduleName> = namespacedWireDispatch(moduleName);\n/**\n * WireDispatchWithoutPayload for {@link HistoryQueriesXModule}.\n *\n * @internal\n */\nconst wireDispatchWithoutPayload = namespacedWireDispatchWithoutPayload(moduleName);\n\n/**\n * Saves a new query into the history queries.\n *\n * @public\n */\nexport const addQueryToHistoryQueries = wireDispatch('addQueryToHistory');\n\n/**\n * Sets the query of the history queries module. Used for searching into the history queries.\n *\n * @public\n */\nexport const setHistoryQueriesQuery = wireCommit('setQuery');\n\n/**\n * Sets the history queries state `query` from url.\n *\n * @public\n */\nconst setUrlParams = wireDispatch('setUrlParams');\n\n/**\n * Sets the query of the history queries module to an empty string.\n *\n * @public\n */\nexport const clearHistoryQueriesQuery = wireCommit('setQuery', '');\n\n/**\n * Triggers a session refresh, extending its validity for the time configured in the\n * {@link HistoryQueriesConfig.sessionTTLInMs}.\n *\n * @public\n */\nexport const refreshHistoryQueriesSession = wireDispatchWithoutPayload('refreshSession');\n\n/**\n * Loads the history queries from the browser storage, saving them to the\n * {@link HistoryQueriesState.historyQueries}.\n *\n * @public\n */\nexport const loadHistoryQueriesFromBrowserStorageWire = wireDispatchWithoutPayload(\n  'loadHistoryQueriesFromBrowserStorage'\n);\n\n/**\n * Clears the history queries.\n *\n * @public\n */\nexport const clearHistoryQueries = wireDispatch('setHistoryQueries', []);\n\n/**\n * Removes a single history query from the history queries.\n *\n * @public\n */\nexport const removeHistoryQuery = wireDispatch('removeFromHistory');\n\n/**\n * Debounce function for the module.\n */\nconst moduleDebounce = namespacedDebounce(moduleName);\n\n/**\n * Default wiring for the {@link HistoryQueries} module.\n *\n * @internal\n */\nexport const historyQueriesWiring = createWiring({\n  HistoryQueriesQueryChanged: {\n    refreshHistoryQueriesSession\n  },\n  HistoryQueriesStorageKeyChanged: {\n    loadHistoryQueriesFromBrowserStorageWire\n  },\n  UserClearedQuery: {\n    clearHistoryQueriesQuery\n  },\n  UserAcceptedAQuery: {\n    setHistoryQueriesQuery,\n    addQueryToHistoryQueries\n  },\n  UserIsTypingAQuery: {\n    setHistoryQueriesQueryDebounce: moduleDebounce(\n      setHistoryQueriesQuery,\n      ({ state }) => state.config.debounceInMs,\n      'UserAcceptedAQuery'\n    )\n  },\n  UserPressedClearHistoryQueries: {\n    clearHistoryQueries\n  },\n  UserPressedRemoveHistoryQuery: {\n    removeHistoryQuery\n  },\n  ParamsLoadedFromUrl: {\n    setUrlParams\n  }\n});\n"],"names":[],"mappings":";;;;AASA;;;;;AAKA,IAAM,UAAU,GAAG,gBAAgB,CAAC;AACpC;;;;;AAKA,IAAM,UAAU,GAA4C,oBAAoB,CAAC,UAAU,CAAC,CAAC;AAC7F;;;;;AAKA,IAAM,YAAY,GAA8C,sBAAsB,CAAC,UAAU,CAAC,CAAC;AACnG;;;;;AAKA,IAAM,0BAA0B,GAAG,oCAAoC,CAAC,UAAU,CAAC,CAAC;AAEpF;;;;;IAKa,wBAAwB,GAAG,YAAY,CAAC,mBAAmB,EAAE;AAE1E;;;;;IAKa,sBAAsB,GAAG,UAAU,CAAC,UAAU,EAAE;AAE7D;;;;;AAKA,IAAM,YAAY,GAAG,YAAY,CAAC,cAAc,CAAC,CAAC;AAElD;;;;;IAKa,wBAAwB,GAAG,UAAU,CAAC,UAAU,EAAE,EAAE,EAAE;AAEnE;;;;;;IAMa,4BAA4B,GAAG,0BAA0B,CAAC,gBAAgB,EAAE;AAEzF;;;;;;IAMa,wCAAwC,GAAG,0BAA0B,CAChF,sCAAsC,EACtC;AAEF;;;;;IAKa,mBAAmB,GAAG,YAAY,CAAC,mBAAmB,EAAE,EAAE,EAAE;AAEzE;;;;;IAKa,kBAAkB,GAAG,YAAY,CAAC,mBAAmB,EAAE;AAEpE;;;AAGA,IAAM,cAAc,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC;AAEtD;;;;;IAKa,oBAAoB,GAAG,YAAY,CAAC;IAC/C,0BAA0B,EAAE;QAC1B,4BAA4B,8BAAA;KAC7B;IACD,+BAA+B,EAAE;QAC/B,wCAAwC,0CAAA;KACzC;IACD,gBAAgB,EAAE;QAChB,wBAAwB,0BAAA;KACzB;IACD,kBAAkB,EAAE;QAClB,sBAAsB,wBAAA;QACtB,wBAAwB,0BAAA;KACzB;IACD,kBAAkB,EAAE;QAClB,8BAA8B,EAAE,cAAc,CAC5C,sBAAsB,EACtB,UAAC,EAAS;gBAAP,KAAK,WAAA;YAAO,OAAA,KAAK,CAAC,MAAM,CAAC,YAAY;SAAA,EACxC,oBAAoB,CACrB;KACF;IACD,8BAA8B,EAAE;QAC9B,mBAAmB,qBAAA;KACpB;IACD,6BAA6B,EAAE;QAC7B,kBAAkB,oBAAA;KACnB;IACD,mBAAmB,EAAE;QACnB,YAAY,cAAA;KACb;CACF;;;;"}
+{"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/history-queries/wiring.ts"],"sourcesContent":["import {\n  namespacedWireCommit,\n  namespacedWireDispatch,\n  namespacedWireDispatchWithoutPayload\n} from '../../wiring/namespaced-wires.factory';\nimport { namespacedDebounce } from '../../wiring/namespaced-wires.operators';\nimport { NamespacedWireCommit, NamespacedWireDispatch } from '../../wiring/namespaced-wiring.types';\nimport { createWiring } from '../../wiring/wiring.utils';\n\n/**\n * `historyQueries` {@link XModuleName | XModule name}.\n *\n * @internal\n */\nconst moduleName = 'historyQueries';\n/**\n * WireCommit for {@link HistoryQueriesXModule}.\n *\n * @internal\n */\nconst wireCommit: NamespacedWireCommit<typeof moduleName> = namespacedWireCommit(moduleName);\n/**\n * WireDispatch for {@link HistoryQueriesXModule}.\n *\n * @internal\n */\nconst wireDispatch: NamespacedWireDispatch<typeof moduleName> = namespacedWireDispatch(moduleName);\n/**\n * WireDispatchWithoutPayload for {@link HistoryQueriesXModule}.\n *\n * @internal\n */\nconst wireDispatchWithoutPayload = namespacedWireDispatchWithoutPayload(moduleName);\n\n/**\n * Saves a new query into the history queries.\n *\n * @public\n */\nexport const addQueryToHistoryQueries = wireDispatch('addQueryToHistory');\n\n/**\n * Sets the query of the history queries module. Used for searching into the history queries.\n *\n * @public\n */\nexport const setHistoryQueriesQuery = wireCommit('setQuery');\n\n/**\n * Sets the history queries state `query` from url.\n *\n * @public\n */\nconst setUrlParams = wireDispatch('setUrlParams');\n\n/**\n * Sets the query of the history queries module to an empty string.\n *\n * @public\n */\nexport const clearHistoryQueriesQuery = wireCommit('setQuery', '');\n\n/**\n * Triggers a session refresh, extending its validity for the time configured in the\n * {@link HistoryQueriesConfig.sessionTTLInMs}.\n *\n * @public\n */\nexport const refreshHistoryQueriesSession = wireDispatchWithoutPayload('refreshSession');\n\n/**\n * Loads the history queries from the browser storage, saving them to the\n * {@link HistoryQueriesState.historyQueries}.\n *\n * @public\n */\nexport const loadHistoryQueriesFromBrowserStorageWire = wireDispatchWithoutPayload(\n  'loadHistoryQueriesFromBrowserStorage'\n);\n\n/**\n * Clears the history queries.\n *\n * @public\n */\nexport const clearHistoryQueries = wireDispatch('setHistoryQueries', []);\n\n/**\n * Removes a single history query from the history queries.\n *\n * @public\n */\nexport const removeHistoryQuery = wireDispatch('removeFromHistory');\n\n/**\n * Debounce function for the module.\n */\nconst moduleDebounce = namespacedDebounce(moduleName);\n\n/**\n * Default wiring for the {@link HistoryQueries} module.\n *\n * @internal\n */\nexport const historyQueriesWiring = createWiring({\n  HistoryQueriesQueryChanged: {\n    refreshHistoryQueriesSession\n  },\n  HistoryQueriesStorageKeyChanged: {\n    loadHistoryQueriesFromBrowserStorageWire\n  },\n  UserClearedQuery: {\n    clearHistoryQueriesQuery\n  },\n  UserAcceptedAQuery: {\n    setHistoryQueriesQuery,\n    addQueryToHistoryQueries\n  },\n  UserIsTypingAQuery: {\n    setHistoryQueriesQueryDebounce: moduleDebounce(\n      setHistoryQueriesQuery,\n      ({ state }) => state.config.debounceInMs,\n      { cancelOn: 'UserAcceptedAQuery' }\n    )\n  },\n  UserPressedClearHistoryQueries: {\n    clearHistoryQueries\n  },\n  UserPressedRemoveHistoryQuery: {\n    removeHistoryQuery\n  },\n  ParamsLoadedFromUrl: {\n    setUrlParams\n  }\n});\n"],"names":[],"mappings":";;;;AASA;;;;;AAKA,IAAM,UAAU,GAAG,gBAAgB,CAAC;AACpC;;;;;AAKA,IAAM,UAAU,GAA4C,oBAAoB,CAAC,UAAU,CAAC,CAAC;AAC7F;;;;;AAKA,IAAM,YAAY,GAA8C,sBAAsB,CAAC,UAAU,CAAC,CAAC;AACnG;;;;;AAKA,IAAM,0BAA0B,GAAG,oCAAoC,CAAC,UAAU,CAAC,CAAC;AAEpF;;;;;IAKa,wBAAwB,GAAG,YAAY,CAAC,mBAAmB,EAAE;AAE1E;;;;;IAKa,sBAAsB,GAAG,UAAU,CAAC,UAAU,EAAE;AAE7D;;;;;AAKA,IAAM,YAAY,GAAG,YAAY,CAAC,cAAc,CAAC,CAAC;AAElD;;;;;IAKa,wBAAwB,GAAG,UAAU,CAAC,UAAU,EAAE,EAAE,EAAE;AAEnE;;;;;;IAMa,4BAA4B,GAAG,0BAA0B,CAAC,gBAAgB,EAAE;AAEzF;;;;;;IAMa,wCAAwC,GAAG,0BAA0B,CAChF,sCAAsC,EACtC;AAEF;;;;;IAKa,mBAAmB,GAAG,YAAY,CAAC,mBAAmB,EAAE,EAAE,EAAE;AAEzE;;;;;IAKa,kBAAkB,GAAG,YAAY,CAAC,mBAAmB,EAAE;AAEpE;;;AAGA,IAAM,cAAc,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC;AAEtD;;;;;IAKa,oBAAoB,GAAG,YAAY,CAAC;IAC/C,0BAA0B,EAAE;QAC1B,4BAA4B,8BAAA;KAC7B;IACD,+BAA+B,EAAE;QAC/B,wCAAwC,0CAAA;KACzC;IACD,gBAAgB,EAAE;QAChB,wBAAwB,0BAAA;KACzB;IACD,kBAAkB,EAAE;QAClB,sBAAsB,wBAAA;QACtB,wBAAwB,0BAAA;KACzB;IACD,kBAAkB,EAAE;QAClB,8BAA8B,EAAE,cAAc,CAC5C,sBAAsB,EACtB,UAAC,EAAS;gBAAP,KAAK,WAAA;YAAO,OAAA,KAAK,CAAC,MAAM,CAAC,YAAY;SAAA,EACxC,EAAE,QAAQ,EAAE,oBAAoB,EAAE,CACnC;KACF;IACD,8BAA8B,EAAE;QAC9B,mBAAmB,qBAAA;KACpB;IACD,6BAA6B,EAAE;QAC7B,kBAAkB,oBAAA;KACnB;IACD,mBAAmB,EAAE;QACnB,YAAY,cAAA;KACb;CACF;;;;"}

package/js/x-modules/identifier-results/components/identifier-result.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"identifier-result.vue.js","sources":["../../../../../src/x-modules/identifier-results/components/identifier-result.vue"],"sourcesContent":["<template>\n  <span\n    v-if=\"query\"\n    v-html=\"highlightedQueryHTML\"\n    class=\"x-identifier-result\"\n    data-test=\"identifier-result\"\n  ></span>\n</template>\n\n<script lang=\"ts\">\n  import { Result } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { Getter, State } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { identifierResultsXModule } from '../x-module';\n\n  /**\n   * This component renders an identifier result value and highlights its matching part with the\n   * query from the state. Receives as prop the {@link @empathyco/x-types#Result | result data}.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(identifierResultsXModule)]\n  })\n  export default class IdentifierResult extends Vue {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result | result} information.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected result!: Result;\n\n    /**\n     * Query from the module state.\n     *\n     * @public\n     */\n    @State('identifierResults', 'query')\n    public query!: string;\n\n    /**\n     * The RegExp with the current query from the state adding the separatorChars after each\n     * matching character.\n     *\n     * @public\n     */\n    @Getter('identifierResults', 'identifierHighlightRegexp')\n    public identifierHighlightRegexp!: RegExp;\n\n    /**\n     * Highlights the matching part of the identifier result with the query from the state.\n     *\n     * @returns String - The identifier result s query with the matching part inside a `<span>` tag.\n     * @public\n     */\n    protected get highlightedQueryHTML(): string {\n      const identifierValue = this.result.identifier.value;\n      if (identifierValue && this.identifierHighlightRegexp) {\n        return identifierValue.replace(\n          this.identifierHighlightRegexp,\n          '<span class=\"x-identifier-result__matching-part\">$1</span>'\n        );\n      }\n      return identifierValue;\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n# Examples\n\nThis component renders an identifier result value and highlights its matching part with the query\nfrom the state. Receives as prop the result data\n\n## Basic usage:\n\n```vue\n<IdentifierResult v-bind=\"{ result }\" />\n```\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"identifier-result.vue.js","sources":["../../../../../src/x-modules/identifier-results/components/identifier-result.vue"],"sourcesContent":["<template>\n  <span\n    v-if=\"query\"\n    v-html=\"highlightedQueryHTML\"\n    class=\"x-identifier-result\"\n    data-test=\"identifier-result\"\n  ></span>\n</template>\n\n<script lang=\"ts\">\n  import { Result } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { Getter, State } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { identifierResultsXModule } from '../x-module';\n\n  /**\n   * This component renders an identifier result value and highlights its matching part with the\n   * query from the state. Receives as prop the {@link @empathyco/x-types#Result | result data}.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(identifierResultsXModule)]\n  })\n  export default class IdentifierResult extends Vue {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result | result} information.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected result!: Result;\n\n    /**\n     * Query from the module state.\n     *\n     * @public\n     */\n    @State('identifierResults', 'query')\n    public query!: string;\n\n    /**\n     * The RegExp with the current query from the state adding the separatorChars after each\n     * matching character.\n     *\n     * @public\n     */\n    @Getter('identifierResults', 'identifierHighlightRegexp')\n    public identifierHighlightRegexp!: RegExp;\n\n    /**\n     * Highlights the matching part of the identifier result with the query from the state.\n     *\n     * @returns String - The identifier result s query with the matching part inside a `<span>` tag.\n     * @public\n     */\n    protected get highlightedQueryHTML(): string {\n      const identifierValue = this.result.identifier.value;\n      if (identifierValue && this.identifierHighlightRegexp) {\n        return identifierValue.replace(\n          this.identifierHighlightRegexp,\n          '<span class=\"x-identifier-result__matching-part\">$1</span>'\n        );\n      }\n      return identifierValue;\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders an identifier result value and highlights its matching part with the query\nfrom the state. Receives as prop the result data\n\n### Basic usage:\n\n```vue\n<IdentifierResult v-bind=\"{ result }\" />\n```\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/identifier-results/components/identifier-results.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"identifier-results.vue.js","sources":["../../../../../src/x-modules/identifier-results/components/identifier-results.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"identifierResults.length\"\n    tag=\"ul\"\n    class=\"x-list x-identifier-results\"\n  >\n    <li\n      v-for=\"identifierResult in identifierResults\"\n      :key=\"identifierResult.id\"\n      class=\"x-identifier-results__item\"\n      data-test=\"identifier-results-item\"\n    >\n      <!--\n        @slot (Required) Identifier results item content\n            @binding {Result} identifierResult - Identifier Result data\n      -->\n      <slot :identifierResult=\"identifierResult\" />\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { Result } from '@empathyco/x-types';\n  import { Component, Prop, Provide } from 'vue-property-decorator';\n  import Vue from 'vue';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { PropsWithType } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { identifierResultsXModule } from '../x-module';\n\n  /**\n   * Paints the list of identifier results stored in the state. Each identifier result should be\n   * represented by a {@link IdentifierResult | identifier result component} besides any\n   * other component.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(identifierResultsXModule)]\n  })\n  export default class IdentifierResults extends Vue {\n    /**\n     * Animation component that will be used to animate the identifier results.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue;\n\n    /**\n     * The module's list of identifier results.\n     *\n     * @public\n     */\n    @State('identifierResults', 'identifierResults')\n    public identifierResults!: Result[];\n\n    /**\n     * The additional events to be emitted by the mandatory {@link BaseResultLink} component.\n     *\n     * @public\n     */\n    @Provide()\n    protected resultClickExtraEvents: PropsWithType<XEventsTypes, Result>[] = [\n      'UserClickedAIdentifierResult'\n    ];\n  }\n</script>\n\n<docs lang=\"mdx\">\n# Examples\n\n## Adding a IdentifierResult component within a BaseResultLink\n\nA IdentifierResult **must** be used inside the IdentifierResults component. In the example below the\nBaseResultLink is used as a wrapper and its default slot is filled with the IdentifierResult\ncomponent.\n\n```vue\n<IdentifierResults :animation=\"fadeAndSlide\">\n  <template #default=\"{ identifierResult }\">\n    <BaseResultLink :result=\"identifierResult\">\n      <template #default=\"{ result }\">\n        <IdentifierResult :result=\"result\"/>\n      </template>\n    </BaseResultLink>\n  </template>\n</IdentifierResults>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"identifier-results.vue.js","sources":["../../../../../src/x-modules/identifier-results/components/identifier-results.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"identifierResults.length\"\n    tag=\"ul\"\n    class=\"x-list x-identifier-results\"\n  >\n    <li\n      v-for=\"identifierResult in identifierResults\"\n      :key=\"identifierResult.id\"\n      class=\"x-identifier-results__item\"\n      data-test=\"identifier-results-item\"\n    >\n      <!--\n        @slot (Required) Identifier results item content\n            @binding {Result} identifierResult - Identifier Result data\n      -->\n      <slot :identifierResult=\"identifierResult\" />\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { Result } from '@empathyco/x-types';\n  import { Component, Prop, Provide } from 'vue-property-decorator';\n  import Vue from 'vue';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { PropsWithType } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { identifierResultsXModule } from '../x-module';\n\n  /**\n   * Paints the list of identifier results stored in the state. Each identifier result should be\n   * represented by a {@link IdentifierResult | identifier result component} besides any\n   * other component.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(identifierResultsXModule)]\n  })\n  export default class IdentifierResults extends Vue {\n    /**\n     * Animation component that will be used to animate the identifier results.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue;\n\n    /**\n     * The module's list of identifier results.\n     *\n     * @public\n     */\n    @State('identifierResults', 'identifierResults')\n    public identifierResults!: Result[];\n\n    /**\n     * The additional events to be emitted by the mandatory {@link BaseResultLink} component.\n     *\n     * @public\n     */\n    @Provide()\n    protected resultClickExtraEvents: PropsWithType<XEventsTypes, Result>[] = [\n      'UserClickedAIdentifierResult'\n    ];\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Adding a IdentifierResult component within a BaseResultLink\n\nA IdentifierResult **must** be used inside the IdentifierResults component. In the example below the\nBaseResultLink is used as a wrapper and its default slot is filled with the IdentifierResult\ncomponent.\n\n```vue\n<IdentifierResults :animation=\"fadeAndSlide\">\n  <template #default=\"{ identifierResult }\">\n    <BaseResultLink :result=\"identifierResult\">\n      <template #default=\"{ result }\">\n        <IdentifierResult :result=\"result\"/>\n      </template>\n    </BaseResultLink>\n  </template>\n</IdentifierResults>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/identifier-results/store/actions/fetch-and-save-identifier-results.action.js

@@ -1,9 +1,11 @@
 import { createFetchAndSaveActions } from '../../../../store/utils/fetch-and-save-action.utils.js';
 
-// eslint-disable-next-line max-len
 var _a = createFetchAndSaveActions({
     fetch: function (_a, request) {
-        var dispatch = _a.dispatch;
+        var dispatch = _a.dispatch, origin = _a.state.origin;
+        if (request && origin) {
+            request.origin = origin;
+        }
         return dispatch('fetchIdentifierResults', request);
     },
     onSuccess: function (_a, identifierResults) {

package/js/x-modules/identifier-results/store/actions/fetch-and-save-identifier-results.action.js.map

@@ -1 +1 @@
-{"version":3,"file":"fetch-and-save-identifier-results.action.js","sources":["../../../../../../src/x-modules/identifier-results/store/actions/fetch-and-save-identifier-results.action.ts"],"sourcesContent":["import { Result } from '@empathyco/x-types';\nimport { SearchByIdRequest } from '@empathyco/x-adapter';\n\n// eslint-disable-next-line max-len\nimport { createFetchAndSaveActions } from '../../../../store/utils/fetch-and-save-action.utils';\nimport { IdentifierResultsActionsContext } from '../types';\n\nconst { fetchAndSave, cancelPrevious } = createFetchAndSaveActions<\n  IdentifierResultsActionsContext,\n  SearchByIdRequest | null,\n  Result[]\n>({\n  fetch({ dispatch }, request) {\n    return dispatch('fetchIdentifierResults', request);\n  },\n  onSuccess({ commit }, identifierResults) {\n    commit('setIdentifierResults', identifierResults);\n  }\n});\n\n/**\n * Default implementation for {@link IdentifierResultsActions.fetchAndSaveIdentifierResults} action.\n *\n * @public\n */\nexport const fetchAndSaveIdentifierResults = fetchAndSave;\n\n/**\n * Default implementation for {@link IdentifierResultsActions.cancelFetchAndSaveIdentifierResults}\n * action.\n *\n * @public\n */\nexport const cancelFetchAndSaveIdentifierResults = cancelPrevious;\n"],"names":[],"mappings":";;AAGA;AAIM,IAAA,KAAmC,yBAAyB,CAIhE;IACA,KAAK,YAAC,EAAY,EAAE,OAAO;YAAnB,QAAQ,cAAA;QACd,OAAO,QAAQ,CAAC,wBAAwB,EAAE,OAAO,CAAC,CAAC;KACpD;IACD,SAAS,YAAC,EAAU,EAAE,iBAAiB;YAA3B,MAAM,YAAA;QAChB,MAAM,CAAC,sBAAsB,EAAE,iBAAiB,CAAC,CAAC;KACnD;CACF,CAAC,EAXM,YAAY,kBAAA,EAAE,cAAc,oBAWlC,CAAC;AAEH;;;;;IAKa,6BAA6B,GAAG,aAAa;AAE1D;;;;;;IAMa,mCAAmC,GAAG;;;;"}
+{"version":3,"file":"fetch-and-save-identifier-results.action.js","sources":["../../../../../../src/x-modules/identifier-results/store/actions/fetch-and-save-identifier-results.action.ts"],"sourcesContent":["import { Result } from '@empathyco/x-types';\nimport { SearchByIdRequest } from '@empathyco/x-adapter';\nimport { createFetchAndSaveActions } from '../../../../store/utils/fetch-and-save-action.utils';\nimport { IdentifierResultsActionsContext } from '../types';\n\nconst { fetchAndSave, cancelPrevious } = createFetchAndSaveActions<\n  IdentifierResultsActionsContext,\n  SearchByIdRequest | null,\n  Result[]\n>({\n  fetch({ dispatch, state: { origin } }, request) {\n    if (request && origin) {\n      request.origin = origin;\n    }\n\n    return dispatch('fetchIdentifierResults', request);\n  },\n  onSuccess({ commit }, identifierResults) {\n    commit('setIdentifierResults', identifierResults);\n  }\n});\n\n/**\n * Default implementation for {@link IdentifierResultsActions.fetchAndSaveIdentifierResults} action.\n *\n * @public\n */\nexport const fetchAndSaveIdentifierResults = fetchAndSave;\n\n/**\n * Default implementation for {@link IdentifierResultsActions.cancelFetchAndSaveIdentifierResults}\n * action.\n *\n * @public\n */\nexport const cancelFetchAndSaveIdentifierResults = cancelPrevious;\n"],"names":[],"mappings":";;AAKM,IAAA,KAAmC,yBAAyB,CAIhE;IACA,KAAK,YAAC,EAA+B,EAAE,OAAO;YAAtC,QAAQ,cAAA,EAAW,MAAM,kBAAA;QAC/B,IAAI,OAAO,IAAI,MAAM,EAAE;YACrB,OAAO,CAAC,MAAM,GAAG,MAAM,CAAC;SACzB;QAED,OAAO,QAAQ,CAAC,wBAAwB,EAAE,OAAO,CAAC,CAAC;KACpD;IACD,SAAS,YAAC,EAAU,EAAE,iBAAiB;YAA3B,MAAM,YAAA;QAChB,MAAM,CAAC,sBAAsB,EAAE,iBAAiB,CAAC,CAAC;KACnD;CACF,CAAC,EAfM,YAAY,kBAAA,EAAE,cAAc,oBAelC,CAAC;AAEH;;;;;IAKa,6BAA6B,GAAG,aAAa;AAE1D;;;;;;IAMa,mCAAmC,GAAG;;;;"}

package/js/x-modules/identifier-results/store/getters/identifier-results-request.getter.js

@@ -11,10 +11,9 @@ import { __assign } from 'tslib';
  */
 // eslint-disable-next-line max-len
 var identifierResultsRequest = function (_a) {
-    var config = _a.config, origin = _a.origin, query = _a.query, params = _a.params;
-    var newOrigin = origin === null ? undefined : origin;
+    var config = _a.config, query = _a.query, params = _a.params;
     return query.trim()
-        ? __assign(__assign({ query: query }, params), { rows: config.maxItemsToRequest, start: 0, origin: newOrigin }) : null;
+        ? __assign(__assign({ query: query }, params), { rows: config.maxItemsToRequest, start: 0 }) : null;
 };
 
 export { identifierResultsRequest };

package/js/x-modules/identifier-results/store/getters/identifier-results-request.getter.js.map

@@ -1 +1 @@
-{"version":3,"file":"identifier-results-request.getter.js","sources":["../../../../../../src/x-modules/identifier-results/store/getters/identifier-results-request.getter.ts"],"sourcesContent":["import { IdentifierResultsXStoreModule } from '../types';\n/**\n * Default implementation for the {@link IdentifierResultsGetters.identifierResultsRequest} getter.\n *\n * @param state - Current {@link https://vuex.vuejs.org/guide/state.html | state} of the identifier\n * results module.\n * @returns The identifier results request to fetch data from the API.\n *\n * @public\n */\n// eslint-disable-next-line max-len\nexport const identifierResultsRequest: IdentifierResultsXStoreModule['getters']['identifierResultsRequest'] =\n  ({ config, origin, query, params }) => {\n    const newOrigin = origin === null ? undefined : origin;\n    return query.trim()\n      ? {\n          query,\n          ...params,\n          rows: config.maxItemsToRequest,\n          start: 0,\n          origin: newOrigin\n        }\n      : null;\n  };\n"],"names":[],"mappings":";;AACA;;;;;;;;;AASA;IACa,wBAAwB,GACnC,UAAC,EAAiC;QAA/B,MAAM,YAAA,EAAE,MAAM,YAAA,EAAE,KAAK,WAAA,EAAE,MAAM,YAAA;IAC9B,IAAM,SAAS,GAAG,MAAM,KAAK,IAAI,GAAG,SAAS,GAAG,MAAM,CAAC;IACvD,OAAO,KAAK,CAAC,IAAI,EAAE;8BAEb,KAAK,OAAA,IACF,MAAM,KACT,IAAI,EAAE,MAAM,CAAC,iBAAiB,EAC9B,KAAK,EAAE,CAAC,EACR,MAAM,EAAE,SAAS,MAEnB,IAAI,CAAC;AACX;;;;"}
+{"version":3,"file":"identifier-results-request.getter.js","sources":["../../../../../../src/x-modules/identifier-results/store/getters/identifier-results-request.getter.ts"],"sourcesContent":["import { IdentifierResultsXStoreModule } from '../types';\n/**\n * Default implementation for the {@link IdentifierResultsGetters.identifierResultsRequest} getter.\n *\n * @param state - Current {@link https://vuex.vuejs.org/guide/state.html | state} of the identifier\n * results module.\n * @returns The identifier results request to fetch data from the API.\n *\n * @public\n */\n// eslint-disable-next-line max-len\nexport const identifierResultsRequest: IdentifierResultsXStoreModule['getters']['identifierResultsRequest'] =\n  ({ config, query, params }) => {\n    return query.trim()\n      ? {\n          query,\n          ...params,\n          rows: config.maxItemsToRequest,\n          start: 0\n        }\n      : null;\n  };\n"],"names":[],"mappings":";;AACA;;;;;;;;;AASA;IACa,wBAAwB,GACnC,UAAC,EAAyB;QAAvB,MAAM,YAAA,EAAE,KAAK,WAAA,EAAE,MAAM,YAAA;IACtB,OAAO,KAAK,CAAC,IAAI,EAAE;8BAEb,KAAK,OAAA,IACF,MAAM,KACT,IAAI,EAAE,MAAM,CAAC,iBAAiB,EAC9B,KAAK,EAAE,CAAC,MAEV,IAAI,CAAC;AACX;;;;"}

package/js/x-modules/identifier-results/wiring.js

@@ -88,7 +88,7 @@ var identifierResultsWiring = createWiring({
         setIdentifierResultsQueryDebounce: moduleDebounce(setIdentifierResultsQuery, function (_a) {
             var state = _a.state;
             return state.config.debounceInMs;
-        }, 'UserAcceptedAQuery')
+        }, { cancelOn: 'UserAcceptedAQuery' })
     },
     UserAcceptedAQuery: {
         setIdentifierResultsQuery: setIdentifierResultsQuery,
@@ -102,7 +102,8 @@ var identifierResultsWiring = createWiring({
         fetchAndSaveIdentifierResultsWire: fetchAndSaveIdentifierResultsWire
     },
     ParamsLoadedFromUrl: {
-        setUrlParams: setUrlParams
+        setUrlParams: setUrlParams,
+        saveIdentifierResultsOriginWire: saveIdentifierResultsOriginWire
     },
     ExtraParamsChanged: {
         setIdentifierResultsExtraParams: setIdentifierResultsExtraParams

package/js/x-modules/identifier-results/wiring.js.map

@@ -1 +1 @@
-{"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/identifier-results/wiring.ts"],"sourcesContent":["import {\n  namespacedWireCommit,\n  namespacedWireDispatch,\n  namespacedWireDispatchWithoutPayload\n} from '../../wiring/namespaced-wires.factory';\nimport { namespacedDebounce } from '../../wiring/namespaced-wires.operators';\nimport { NamespacedWireCommit, NamespacedWireDispatch } from '../../wiring/namespaced-wiring.types';\nimport { createWiring } from '../../wiring/wiring.utils';\n\n/**\n * `identifierResults` {@link XModuleName | XModule name}.\n *\n * @internal\n */\nconst moduleName = 'identifierResults';\n/**\n * WireCommit for {@link IdentifierResultsXModule}.\n *\n * @internal\n */\nconst wireCommit: NamespacedWireCommit<typeof moduleName> = namespacedWireCommit(moduleName);\n/**\n * WireDispatch for {@link IdentifierResultsXModule}.\n *\n * @internal\n */\nconst wireDispatch: NamespacedWireDispatch<typeof moduleName> = namespacedWireDispatch(moduleName);\n/**\n * WireDispatchWithoutPayload for {@link IdentifierResultsXModule}.\n *\n * @internal\n */\nconst wireDispatchWithoutPayload = namespacedWireDispatchWithoutPayload(moduleName);\n\n/**\n * Sets the identifier-results module query.\n *\n * @public\n */\nexport const setIdentifierResultsQuery = wireDispatch('saveQuery');\n\n/**\n * Clears the identifier-results module query.\n *\n * @public\n */\nexport const clearIdentifierResultsQuery = wireCommit('setQuery', '');\n\n/**\n * Sets the identifier results state `query` from url.\n *\n * @public\n */\nconst setUrlParams = wireDispatch('saveQuery', ({ eventPayload: { query } }) => query);\n\n/**\n * Requests and stores a new set of identifier results for the {@link IdentifierResultsState.query}.\n *\n * @public\n */\nexport const fetchAndSaveIdentifierResultsWire = wireDispatch('fetchAndSaveIdentifierResults');\n\n/**\n * Cancels the {@link IdentifierResultsActions.fetchAndSaveIdentifierResults} request promise.\n *\n * @public\n */\nexport const cancelFetchAndSaveIdentifierResultsWire = wireDispatchWithoutPayload(\n  'cancelFetchAndSaveIdentifierResults'\n);\n\n/**\n * Sets the identifier results state `origin`.\n *\n * @public\n */\nexport const saveIdentifierResultsOriginWire = wireDispatch(\n  'saveOrigin',\n  ({ metadata }) => metadata\n);\n\n/**\n * Sets the identifier result state `params`.\n *\n * @public\n */\nexport const setIdentifierResultsExtraParams = wireCommit('setParams');\n\n/**\n * Debounce function for the module.\n */\nconst moduleDebounce = namespacedDebounce(moduleName);\n\n/**\n * Default wiring for the {@link IdentifierResultsXModule} module.\n *\n * @internal\n */\nexport const identifierResultsWiring = createWiring({\n  UserIsTypingAQuery: {\n    setIdentifierResultsQueryDebounce: moduleDebounce(\n      setIdentifierResultsQuery,\n      ({ state }) => state.config.debounceInMs,\n      'UserAcceptedAQuery'\n    )\n  },\n  UserAcceptedAQuery: {\n    setIdentifierResultsQuery,\n    saveIdentifierResultsOriginWire\n  },\n  UserClearedQuery: {\n    clearIdentifierResultsQuery,\n    cancelFetchAndSaveIdentifierResultsWire\n  },\n  IdentifierResultsRequestChanged: {\n    fetchAndSaveIdentifierResultsWire\n  },\n  ParamsLoadedFromUrl: {\n    setUrlParams\n  },\n  ExtraParamsChanged: {\n    setIdentifierResultsExtraParams\n  }\n});\n"],"names":[],"mappings":";;;;AASA;;;;;AAKA,IAAM,UAAU,GAAG,mBAAmB,CAAC;AACvC;;;;;AAKA,IAAM,UAAU,GAA4C,oBAAoB,CAAC,UAAU,CAAC,CAAC;AAC7F;;;;;AAKA,IAAM,YAAY,GAA8C,sBAAsB,CAAC,UAAU,CAAC,CAAC;AACnG;;;;;AAKA,IAAM,0BAA0B,GAAG,oCAAoC,CAAC,UAAU,CAAC,CAAC;AAEpF;;;;;IAKa,yBAAyB,GAAG,YAAY,CAAC,WAAW,EAAE;AAEnE;;;;;IAKa,2BAA2B,GAAG,UAAU,CAAC,UAAU,EAAE,EAAE,EAAE;AAEtE;;;;;AAKA,IAAM,YAAY,GAAG,YAAY,CAAC,WAAW,EAAE,UAAC,EAA2B;QAAT,KAAK,wBAAA;IAAS,OAAA,KAAK;AAAL,CAAK,CAAC,CAAC;AAEvF;;;;;IAKa,iCAAiC,GAAG,YAAY,CAAC,+BAA+B,EAAE;AAE/F;;;;;IAKa,uCAAuC,GAAG,0BAA0B,CAC/E,qCAAqC,EACrC;AAEF;;;;;IAKa,+BAA+B,GAAG,YAAY,CACzD,YAAY,EACZ,UAAC,EAAY;QAAV,QAAQ,cAAA;IAAO,OAAA,QAAQ;AAAR,CAAQ,EAC1B;AAEF;;;;;IAKa,+BAA+B,GAAG,UAAU,CAAC,WAAW,EAAE;AAEvE;;;AAGA,IAAM,cAAc,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC;AAEtD;;;;;IAKa,uBAAuB,GAAG,YAAY,CAAC;IAClD,kBAAkB,EAAE;QAClB,iCAAiC,EAAE,cAAc,CAC/C,yBAAyB,EACzB,UAAC,EAAS;gBAAP,KAAK,WAAA;YAAO,OAAA,KAAK,CAAC,MAAM,CAAC,YAAY;SAAA,EACxC,oBAAoB,CACrB;KACF;IACD,kBAAkB,EAAE;QAClB,yBAAyB,2BAAA;QACzB,+BAA+B,iCAAA;KAChC;IACD,gBAAgB,EAAE;QAChB,2BAA2B,6BAAA;QAC3B,uCAAuC,yCAAA;KACxC;IACD,+BAA+B,EAAE;QAC/B,iCAAiC,mCAAA;KAClC;IACD,mBAAmB,EAAE;QACnB,YAAY,cAAA;KACb;IACD,kBAAkB,EAAE;QAClB,+BAA+B,iCAAA;KAChC;CACF;;;;"}
+{"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/identifier-results/wiring.ts"],"sourcesContent":["import {\n  namespacedWireCommit,\n  namespacedWireDispatch,\n  namespacedWireDispatchWithoutPayload\n} from '../../wiring/namespaced-wires.factory';\nimport { namespacedDebounce } from '../../wiring/namespaced-wires.operators';\nimport { NamespacedWireCommit, NamespacedWireDispatch } from '../../wiring/namespaced-wiring.types';\nimport { createWiring } from '../../wiring/wiring.utils';\n\n/**\n * `identifierResults` {@link XModuleName | XModule name}.\n *\n * @internal\n */\nconst moduleName = 'identifierResults';\n/**\n * WireCommit for {@link IdentifierResultsXModule}.\n *\n * @internal\n */\nconst wireCommit: NamespacedWireCommit<typeof moduleName> = namespacedWireCommit(moduleName);\n/**\n * WireDispatch for {@link IdentifierResultsXModule}.\n *\n * @internal\n */\nconst wireDispatch: NamespacedWireDispatch<typeof moduleName> = namespacedWireDispatch(moduleName);\n/**\n * WireDispatchWithoutPayload for {@link IdentifierResultsXModule}.\n *\n * @internal\n */\nconst wireDispatchWithoutPayload = namespacedWireDispatchWithoutPayload(moduleName);\n\n/**\n * Sets the identifier-results module query.\n *\n * @public\n */\nexport const setIdentifierResultsQuery = wireDispatch('saveQuery');\n\n/**\n * Clears the identifier-results module query.\n *\n * @public\n */\nexport const clearIdentifierResultsQuery = wireCommit('setQuery', '');\n\n/**\n * Sets the identifier results state `query` from url.\n *\n * @public\n */\nconst setUrlParams = wireDispatch('saveQuery', ({ eventPayload: { query } }) => query);\n\n/**\n * Requests and stores a new set of identifier results for the {@link IdentifierResultsState.query}.\n *\n * @public\n */\nexport const fetchAndSaveIdentifierResultsWire = wireDispatch('fetchAndSaveIdentifierResults');\n\n/**\n * Cancels the {@link IdentifierResultsActions.fetchAndSaveIdentifierResults} request promise.\n *\n * @public\n */\nexport const cancelFetchAndSaveIdentifierResultsWire = wireDispatchWithoutPayload(\n  'cancelFetchAndSaveIdentifierResults'\n);\n\n/**\n * Sets the identifier results state `origin`.\n *\n * @public\n */\nexport const saveIdentifierResultsOriginWire = wireDispatch(\n  'saveOrigin',\n  ({ metadata }) => metadata\n);\n\n/**\n * Sets the identifier result state `params`.\n *\n * @public\n */\nexport const setIdentifierResultsExtraParams = wireCommit('setParams');\n\n/**\n * Debounce function for the module.\n */\nconst moduleDebounce = namespacedDebounce(moduleName);\n\n/**\n * Default wiring for the {@link IdentifierResultsXModule} module.\n *\n * @internal\n */\nexport const identifierResultsWiring = createWiring({\n  UserIsTypingAQuery: {\n    setIdentifierResultsQueryDebounce: moduleDebounce(\n      setIdentifierResultsQuery,\n      ({ state }) => state.config.debounceInMs,\n      { cancelOn: 'UserAcceptedAQuery' }\n    )\n  },\n  UserAcceptedAQuery: {\n    setIdentifierResultsQuery,\n    saveIdentifierResultsOriginWire\n  },\n  UserClearedQuery: {\n    clearIdentifierResultsQuery,\n    cancelFetchAndSaveIdentifierResultsWire\n  },\n  IdentifierResultsRequestChanged: {\n    fetchAndSaveIdentifierResultsWire\n  },\n  ParamsLoadedFromUrl: {\n    setUrlParams,\n    saveIdentifierResultsOriginWire\n  },\n  ExtraParamsChanged: {\n    setIdentifierResultsExtraParams\n  }\n});\n"],"names":[],"mappings":";;;;AASA;;;;;AAKA,IAAM,UAAU,GAAG,mBAAmB,CAAC;AACvC;;;;;AAKA,IAAM,UAAU,GAA4C,oBAAoB,CAAC,UAAU,CAAC,CAAC;AAC7F;;;;;AAKA,IAAM,YAAY,GAA8C,sBAAsB,CAAC,UAAU,CAAC,CAAC;AACnG;;;;;AAKA,IAAM,0BAA0B,GAAG,oCAAoC,CAAC,UAAU,CAAC,CAAC;AAEpF;;;;;IAKa,yBAAyB,GAAG,YAAY,CAAC,WAAW,EAAE;AAEnE;;;;;IAKa,2BAA2B,GAAG,UAAU,CAAC,UAAU,EAAE,EAAE,EAAE;AAEtE;;;;;AAKA,IAAM,YAAY,GAAG,YAAY,CAAC,WAAW,EAAE,UAAC,EAA2B;QAAT,KAAK,wBAAA;IAAS,OAAA,KAAK;AAAL,CAAK,CAAC,CAAC;AAEvF;;;;;IAKa,iCAAiC,GAAG,YAAY,CAAC,+BAA+B,EAAE;AAE/F;;;;;IAKa,uCAAuC,GAAG,0BAA0B,CAC/E,qCAAqC,EACrC;AAEF;;;;;IAKa,+BAA+B,GAAG,YAAY,CACzD,YAAY,EACZ,UAAC,EAAY;QAAV,QAAQ,cAAA;IAAO,OAAA,QAAQ;AAAR,CAAQ,EAC1B;AAEF;;;;;IAKa,+BAA+B,GAAG,UAAU,CAAC,WAAW,EAAE;AAEvE;;;AAGA,IAAM,cAAc,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC;AAEtD;;;;;IAKa,uBAAuB,GAAG,YAAY,CAAC;IAClD,kBAAkB,EAAE;QAClB,iCAAiC,EAAE,cAAc,CAC/C,yBAAyB,EACzB,UAAC,EAAS;gBAAP,KAAK,WAAA;YAAO,OAAA,KAAK,CAAC,MAAM,CAAC,YAAY;SAAA,EACxC,EAAE,QAAQ,EAAE,oBAAoB,EAAE,CACnC;KACF;IACD,kBAAkB,EAAE;QAClB,yBAAyB,2BAAA;QACzB,+BAA+B,iCAAA;KAChC;IACD,gBAAgB,EAAE;QAChB,2BAA2B,6BAAA;QAC3B,uCAAuC,yCAAA;KACxC;IACD,+BAA+B,EAAE;QAC/B,iCAAiC,mCAAA;KAClC;IACD,mBAAmB,EAAE;QACnB,YAAY,cAAA;QACZ,+BAA+B,iCAAA;KAChC;IACD,kBAAkB,EAAE;QAClB,+BAA+B,iCAAA;KAChC;CACF;;;;"}

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

@@ -3,9 +3,9 @@ import { Prop, Component } from 'vue-property-decorator';
 import { groupItemsBy } from '../../../utils/array.js';
 import { mixins } from 'vue-class-component';
 import { NoElement } from '../../../components/no-element.js';
-import ItemsList from '../../../components/items-list.vue.js';
 import { Getter } from '../../../components/decorators/store.decorators.js';
 import { xComponentMixin } from '../../../components/x-component.mixin.js';
+import ItemsList from '../../../components/items-list.vue.js';
 import { ItemsListInjectionMixin } from '../../../components/items-list-injection.mixin.js';
 import { nextQueriesXModule } from '../x-module.js';
 import ResultsList from '../../search/components/results-list.vue.js';

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

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

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

@@ -1,9 +1,9 @@
 import { __extends, __decorate } from 'tslib';
 import Vue from 'vue';
 import { Prop, Component } from 'vue-property-decorator';
-import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue.js';
 import { Getter } from '../../../components/decorators/store.decorators.js';
 import { xComponentMixin } from '../../../components/x-component.mixin.js';
+import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue.js';
 import { nextQueriesXModule } from '../x-module.js';
 import NextQuery from './next-query.vue.js';
 

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

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

@@ -1,8 +1,8 @@
 import { __extends, __decorate } from 'tslib';
 import Vue from 'vue';
 import { Prop, Component } from 'vue-property-decorator';
-import BaseSuggestion from '../../../components/suggestions/base-suggestion.vue.js';
 import { xComponentMixin } from '../../../components/x-component.mixin.js';
+import BaseSuggestion from '../../../components/suggestions/base-suggestion.vue.js';
 import { nextQueriesXModule } from '../x-module.js';
 
 /**

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

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

@@ -1,8 +1,8 @@
 import { __extends, __decorate } from 'tslib';
 import Vue from 'vue';
 import { Prop, Component } from 'vue-property-decorator';
-import BaseSuggestion from '../../../components/suggestions/base-suggestion.vue.js';
 import { xComponentMixin } from '../../../components/x-component.mixin.js';
+import BaseSuggestion from '../../../components/suggestions/base-suggestion.vue.js';
 import { popularSearchesXModule } from '../x-module.js';
 
 /**

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

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

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

@@ -1,9 +1,9 @@
 import { __extends, __decorate } from 'tslib';
 import Vue from 'vue';
 import { Prop, Component } from 'vue-property-decorator';
-import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue.js';
 import { Getter } from '../../../components/decorators/store.decorators.js';
 import { xComponentMixin } from '../../../components/x-component.mixin.js';
+import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue.js';
 import { popularSearchesXModule } from '../x-module.js';
 import PopularSearch from './popular-search.vue.js';
 

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

@@ -1,8 +1,8 @@
 import { __extends, __decorate } from 'tslib';
 import { Prop, Component, Vue } from 'vue-property-decorator';
-import BaseSuggestion from '../../../components/suggestions/base-suggestion.vue.js';
 import { Getter } from '../../../components/decorators/store.decorators.js';
 import { xComponentMixin } from '../../../components/x-component.mixin.js';
+import BaseSuggestion from '../../../components/suggestions/base-suggestion.vue.js';
 import { querySuggestionsXModule } from '../x-module.js';
 
 /**

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

@@ -1,9 +1,9 @@
 import { __extends, __decorate } from 'tslib';
 import Vue from 'vue';
 import { Prop, Component } from 'vue-property-decorator';
-import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue.js';
 import { Getter } from '../../../components/decorators/store.decorators.js';
 import { xComponentMixin } from '../../../components/x-component.mixin.js';
+import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue.js';
 import { querySuggestionsXModule } from '../x-module.js';
 import QuerySuggestion from './query-suggestion.vue.js';
 

package/js/x-modules/query-suggestions/wiring.js

@@ -76,7 +76,7 @@ var querySuggestionsWiring = createWiring({
         setQuerySuggestionsQueryDebounce: moduleDebounce(setQuerySuggestionsQuery, function (_a) {
             var state = _a.state;
             return state.config.debounceInMs;
-        }, 'UserAcceptedAQuery')
+        }, { cancelOn: 'UserAcceptedAQuery' })
     },
     UserAcceptedAQuery: {
         setQuerySuggestionsQuery: setQuerySuggestionsQuery

package/js/x-modules/query-suggestions/wiring.js.map

@@ -1 +1 @@
-{"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/query-suggestions/wiring.ts"],"sourcesContent":["import {\n  namespacedWireCommit,\n  namespacedWireDispatch,\n  namespacedWireDispatchWithoutPayload\n} from '../../wiring/namespaced-wires.factory';\nimport { namespacedDebounce } from '../../wiring/namespaced-wires.operators';\nimport { NamespacedWireCommit } from '../../wiring/namespaced-wiring.types';\nimport { createWiring } from '../../wiring/wiring.utils';\n\n/**\n * `querySuggestions` {@link XModuleName | XModule name}.\n *\n * @internal\n */\nconst moduleName = 'querySuggestions';\n\n/**\n * WireCommit for {@link QuerySuggestionsXModule}.\n *\n * @internal\n */\nconst wireCommit: NamespacedWireCommit<typeof moduleName> = namespacedWireCommit(moduleName);\n\n/**\n * WireDispatchWithoutPayload for {@link QuerySuggestionsXModule}.\n *\n * @internal\n */\nconst wireDispatchWithoutPayload = namespacedWireDispatchWithoutPayload(moduleName);\n\n/**\n * WireDispatch for {@link QuerySuggestionsXModule}.\n *\n * @internal\n */\nconst wireDispatch = namespacedWireDispatch(moduleName);\n\n/**\n * Sets the query-suggestions module query.\n *\n * @public\n */\nexport const setQuerySuggestionsQuery = wireCommit('setQuery');\n\n/**\n * Sets the query suggestions state `params`.\n *\n * @public\n */\nexport const setQuerySuggestionsExtraParams = wireCommit('setParams');\n\n/**\n * Clears the query-suggestions module query.\n *\n * @public\n */\nexport const clearQuerySuggestionsQuery = wireCommit('setQuery', '');\n\n/**\n * Sets the query-suggestions state `query` from url.\n *\n * @public\n */\nconst setUrlParams = wireDispatch('setUrlParams');\n\n/**\n * Requests and stores a new set of query suggestions for the {@link QuerySuggestionsState.query}.\n *\n * @public\n */\nexport const fetchAndSaveSuggestionsWire = wireDispatch('fetchAndSaveSuggestions');\n\n/**\n * Cancels the {@link QuerySuggestionsActions.fetchAndSaveSuggestions} request promise.\n *\n * @public\n */\nexport const cancelFetchAndSaveSuggestionsWire = wireDispatchWithoutPayload(\n  'cancelFetchAndSaveSuggestions'\n);\n\n/**\n * Debounce function for the module.\n */\nconst moduleDebounce = namespacedDebounce(moduleName);\n\n/**\n * QuerySuggestions wiring.\n *\n * @internal\n */\nexport const querySuggestionsWiring = createWiring({\n  UserIsTypingAQuery: {\n    setQuerySuggestionsQueryDebounce: moduleDebounce(\n      setQuerySuggestionsQuery,\n      ({ state }) => state.config.debounceInMs,\n      'UserAcceptedAQuery'\n    )\n  },\n  UserAcceptedAQuery: {\n    setQuerySuggestionsQuery\n  },\n  UserClearedQuery: {\n    clearQuerySuggestionsQuery,\n    cancelFetchAndSaveSuggestionsWire\n  },\n  QuerySuggestionsRequestChanged: {\n    fetchAndSaveSuggestionsWire\n  },\n  ExtraParamsChanged: {\n    setQuerySuggestionsExtraParams\n  },\n  ParamsLoadedFromUrl: {\n    setUrlParams\n  }\n});\n"],"names":[],"mappings":";;;;AASA;;;;;AAKA,IAAM,UAAU,GAAG,kBAAkB,CAAC;AAEtC;;;;;AAKA,IAAM,UAAU,GAA4C,oBAAoB,CAAC,UAAU,CAAC,CAAC;AAE7F;;;;;AAKA,IAAM,0BAA0B,GAAG,oCAAoC,CAAC,UAAU,CAAC,CAAC;AAEpF;;;;;AAKA,IAAM,YAAY,GAAG,sBAAsB,CAAC,UAAU,CAAC,CAAC;AAExD;;;;;IAKa,wBAAwB,GAAG,UAAU,CAAC,UAAU,EAAE;AAE/D;;;;;IAKa,8BAA8B,GAAG,UAAU,CAAC,WAAW,EAAE;AAEtE;;;;;IAKa,0BAA0B,GAAG,UAAU,CAAC,UAAU,EAAE,EAAE,EAAE;AAErE;;;;;AAKA,IAAM,YAAY,GAAG,YAAY,CAAC,cAAc,CAAC,CAAC;AAElD;;;;;IAKa,2BAA2B,GAAG,YAAY,CAAC,yBAAyB,EAAE;AAEnF;;;;;IAKa,iCAAiC,GAAG,0BAA0B,CACzE,+BAA+B,EAC/B;AAEF;;;AAGA,IAAM,cAAc,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC;AAEtD;;;;;IAKa,sBAAsB,GAAG,YAAY,CAAC;IACjD,kBAAkB,EAAE;QAClB,gCAAgC,EAAE,cAAc,CAC9C,wBAAwB,EACxB,UAAC,EAAS;gBAAP,KAAK,WAAA;YAAO,OAAA,KAAK,CAAC,MAAM,CAAC,YAAY;SAAA,EACxC,oBAAoB,CACrB;KACF;IACD,kBAAkB,EAAE;QAClB,wBAAwB,0BAAA;KACzB;IACD,gBAAgB,EAAE;QAChB,0BAA0B,4BAAA;QAC1B,iCAAiC,mCAAA;KAClC;IACD,8BAA8B,EAAE;QAC9B,2BAA2B,6BAAA;KAC5B;IACD,kBAAkB,EAAE;QAClB,8BAA8B,gCAAA;KAC/B;IACD,mBAAmB,EAAE;QACnB,YAAY,cAAA;KACb;CACF;;;;"}
+{"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/query-suggestions/wiring.ts"],"sourcesContent":["import {\n  namespacedWireCommit,\n  namespacedWireDispatch,\n  namespacedWireDispatchWithoutPayload\n} from '../../wiring/namespaced-wires.factory';\nimport { namespacedDebounce } from '../../wiring/namespaced-wires.operators';\nimport { NamespacedWireCommit } from '../../wiring/namespaced-wiring.types';\nimport { createWiring } from '../../wiring/wiring.utils';\n\n/**\n * `querySuggestions` {@link XModuleName | XModule name}.\n *\n * @internal\n */\nconst moduleName = 'querySuggestions';\n\n/**\n * WireCommit for {@link QuerySuggestionsXModule}.\n *\n * @internal\n */\nconst wireCommit: NamespacedWireCommit<typeof moduleName> = namespacedWireCommit(moduleName);\n\n/**\n * WireDispatchWithoutPayload for {@link QuerySuggestionsXModule}.\n *\n * @internal\n */\nconst wireDispatchWithoutPayload = namespacedWireDispatchWithoutPayload(moduleName);\n\n/**\n * WireDispatch for {@link QuerySuggestionsXModule}.\n *\n * @internal\n */\nconst wireDispatch = namespacedWireDispatch(moduleName);\n\n/**\n * Sets the query-suggestions module query.\n *\n * @public\n */\nexport const setQuerySuggestionsQuery = wireCommit('setQuery');\n\n/**\n * Sets the query suggestions state `params`.\n *\n * @public\n */\nexport const setQuerySuggestionsExtraParams = wireCommit('setParams');\n\n/**\n * Clears the query-suggestions module query.\n *\n * @public\n */\nexport const clearQuerySuggestionsQuery = wireCommit('setQuery', '');\n\n/**\n * Sets the query-suggestions state `query` from url.\n *\n * @public\n */\nconst setUrlParams = wireDispatch('setUrlParams');\n\n/**\n * Requests and stores a new set of query suggestions for the {@link QuerySuggestionsState.query}.\n *\n * @public\n */\nexport const fetchAndSaveSuggestionsWire = wireDispatch('fetchAndSaveSuggestions');\n\n/**\n * Cancels the {@link QuerySuggestionsActions.fetchAndSaveSuggestions} request promise.\n *\n * @public\n */\nexport const cancelFetchAndSaveSuggestionsWire = wireDispatchWithoutPayload(\n  'cancelFetchAndSaveSuggestions'\n);\n\n/**\n * Debounce function for the module.\n */\nconst moduleDebounce = namespacedDebounce(moduleName);\n\n/**\n * QuerySuggestions wiring.\n *\n * @internal\n */\nexport const querySuggestionsWiring = createWiring({\n  UserIsTypingAQuery: {\n    setQuerySuggestionsQueryDebounce: moduleDebounce(\n      setQuerySuggestionsQuery,\n      ({ state }) => state.config.debounceInMs,\n      { cancelOn: 'UserAcceptedAQuery' }\n    )\n  },\n  UserAcceptedAQuery: {\n    setQuerySuggestionsQuery\n  },\n  UserClearedQuery: {\n    clearQuerySuggestionsQuery,\n    cancelFetchAndSaveSuggestionsWire\n  },\n  QuerySuggestionsRequestChanged: {\n    fetchAndSaveSuggestionsWire\n  },\n  ExtraParamsChanged: {\n    setQuerySuggestionsExtraParams\n  },\n  ParamsLoadedFromUrl: {\n    setUrlParams\n  }\n});\n"],"names":[],"mappings":";;;;AASA;;;;;AAKA,IAAM,UAAU,GAAG,kBAAkB,CAAC;AAEtC;;;;;AAKA,IAAM,UAAU,GAA4C,oBAAoB,CAAC,UAAU,CAAC,CAAC;AAE7F;;;;;AAKA,IAAM,0BAA0B,GAAG,oCAAoC,CAAC,UAAU,CAAC,CAAC;AAEpF;;;;;AAKA,IAAM,YAAY,GAAG,sBAAsB,CAAC,UAAU,CAAC,CAAC;AAExD;;;;;IAKa,wBAAwB,GAAG,UAAU,CAAC,UAAU,EAAE;AAE/D;;;;;IAKa,8BAA8B,GAAG,UAAU,CAAC,WAAW,EAAE;AAEtE;;;;;IAKa,0BAA0B,GAAG,UAAU,CAAC,UAAU,EAAE,EAAE,EAAE;AAErE;;;;;AAKA,IAAM,YAAY,GAAG,YAAY,CAAC,cAAc,CAAC,CAAC;AAElD;;;;;IAKa,2BAA2B,GAAG,YAAY,CAAC,yBAAyB,EAAE;AAEnF;;;;;IAKa,iCAAiC,GAAG,0BAA0B,CACzE,+BAA+B,EAC/B;AAEF;;;AAGA,IAAM,cAAc,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC;AAEtD;;;;;IAKa,sBAAsB,GAAG,YAAY,CAAC;IACjD,kBAAkB,EAAE;QAClB,gCAAgC,EAAE,cAAc,CAC9C,wBAAwB,EACxB,UAAC,EAAS;gBAAP,KAAK,WAAA;YAAO,OAAA,KAAK,CAAC,MAAM,CAAC,YAAY;SAAA,EACxC,EAAE,QAAQ,EAAE,oBAAoB,EAAE,CACnC;KACF;IACD,kBAAkB,EAAE;QAClB,wBAAwB,0BAAA;KACzB;IACD,gBAAgB,EAAE;QAChB,0BAA0B,4BAAA;QAC1B,iCAAiC,mCAAA;KAClC;IACD,8BAA8B,EAAE;QAC9B,2BAA2B,6BAAA;KAC5B;IACD,kBAAkB,EAAE;QAClB,8BAA8B,gCAAA;KAC/B;IACD,mBAAmB,EAAE;QACnB,YAAY,cAAA;KACb;CACF;;;;"}

package/js/x-modules/recommendations/components/recommendations.vue.js

@@ -56,11 +56,11 @@ __vue_render__._withStripped = true;
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-033efe6a_0", { source: ".x-recommendations[data-v-033efe6a] {\n  list-style-type: none;\n}", map: undefined, media: undefined });
+    inject("data-v-29f8953e_0", { source: ".x-recommendations[data-v-29f8953e] {\n  list-style-type: none;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-033efe6a";
+  var __vue_scope_id__ = "data-v-29f8953e";
   /* module identifier */
   var __vue_module_identifier__ = undefined;
   /* functional template */

package/js/x-modules/recommendations/components/recommendations.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"recommendations.vue.js","sources":["../../../../../src/x-modules/recommendations/components/recommendations.vue"],"sourcesContent":["<template>\n  <NoElement v-if=\"recommendations.length\">\n    <!--\n      @slot Customized Recommendations layout.\n          @binding {Result[]} recommendations - Recommendations to render.\n          @binding {Vue} animation - Animation to animate the elements.\n    -->\n    <slot name=\"layout\" v-bind=\"{ animation, recommendations }\">\n      <component\n        :is=\"animation\"\n        tag=\"ul\"\n        data-test=\"recommendations\"\n        class=\"x-list x-recommendations\"\n      >\n        <li\n          v-for=\"recommendation in recommendations\"\n          :key=\"recommendation.id\"\n          class=\"x-recommendations__item\"\n          data-test=\"recommendation-item\"\n        >\n          <!--\n            @slot (Required) Recommendation content.\n            @binding {recommendation} recommendation - Recommendation data.\n          -->\n          <slot :recommendation=\"recommendation\" />\n        </li>\n      </component>\n    </slot>\n  </NoElement>\n</template>\n\n<script lang=\"ts\">\n  import { Component, Prop, Provide } from 'vue-property-decorator';\n  import { Result } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { NoElement } from '../../../components/no-element';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { PropsWithType } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { recommendationsXModule } from '../x-module';\n\n  /**\n   * It renders a list of recommendations from the\n   * {@link RecommendationsState.recommendations | Recommendations} state by default.\n   * The component provides the slot layout which wraps the whole component with the\n   * recommendations bounded. It also provides the default slot to customize the item, which is\n   * within the layout slot, with the recommendation bounded. Each recommendation should be\n   * represented by a {@link BaseResultLink | result link component} besides any other component.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(recommendationsXModule)],\n    components: {\n      NoElement\n    }\n  })\n  export default class Recommendations extends Vue {\n    /**\n     * The module's list of recommendations.\n     *\n     * @public\n     */\n    @State('recommendations', 'recommendations')\n    public storedRecommendations!: Result[];\n\n    /**\n     * Animation component that will be used to animate the recommendations.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue;\n\n    /**\n     * Number of recommendations to be rendered.\n     *\n     * @public\n     */\n    @Prop()\n    protected maxItemsToRender?: number;\n\n    /**\n     * The additional events to be emitted by the mandatory {@link BaseResultLink} component.\n     *\n     * @public\n     */\n    @Provide()\n    protected resultClickExtraEvents: PropsWithType<XEventsTypes, Result>[] = [\n      'UserClickedARecommendation'\n    ];\n\n    /**\n     * Slices the recommendations from the state.\n     *\n     * @returns - The list of recommendations slice by the number of items to render.\n     *\n     * @internal\n     */\n    protected get recommendations(): Result[] {\n      return this.storedRecommendations.slice(0, this.maxItemsToRender);\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-recommendations {\n    list-style-type: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n# Examples\n\nIt renders a list of recommendations from recommendations state by default. The component provides\nthe slot layout which wraps the whole component with the recommendations bound. It also provides the\ndefault slot to customize the item, which is within the layout slot, with the recommendation bound.\nEach recommendation should be represented by a BaseResultLink component besides any other component.\n\n## Basic example\n\n## Adding a custom BaseResultLink component\n\nA BaseResultLink **must** be used inside the Recommendations component. In the example below the\nBaseResultLink default slot is filled with an image of the result and a span for the title. Besides\nthat, an additional button has been added.\n\n```vue\n<Recommendations>\n  <template #default=\"{ recommendation }\">\n    <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n      <template #default=\"{ result }\">\n        <img :src=\"result.images[0]\" class=\"x-recommendations__image\"/>\n        <span class=\"x-recommendations__title\">{{ result.name }}</span>\n      </template>\n    </BaseResultLink>\n    <button>Custom Behaviour</button>\n  </template>\n</Recommendations>\n```\n\n## Overriding layout content\n\nIt renders a list of recommendations customizing the layout slot. In the example below, instead of\nusing the default Recommendations content, a BaseGrid component is used to render the\nrecommendations.\n\n```vue\n<Recommendations :animation=\"staggeredFadeAndSlide\">\n  <template #layout=\"{ recommendations, animation }\">\n    <BaseGrid :items=\"recommendations\" :animation=\"animation\">\n      <template #result=\"{ item }\">\n        <BaseResultLink :result=\"item\">\n          <BaseResultImage :result=\"item\" />\n          <span class=\"x-result__title\">{{ item.name }}</span>\n        </BaseResultLink>\n      </template>\n    </BaseGrid>\n  </template>\n</Recommendations>\n```\n\n### Play with props\n\nIn this example, the suggestions has been limited to render a maximum of 3 items.\n\n_Type “puzzle” or another toy in the input field to try it out!_\n\n```vue\n<template>\n  <BaseSuggestions :suggestions=\"suggestions\" :maxItemToRender=\"3\" />\n</template>\n\n<script>\n  import { BaseSuggestions } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSuggestionsDemo',\n    components: {\n      BaseSuggestions\n    },\n    data() {\n      return {\n        suggestions: [\n          {\n            facets: [],\n            key: 'chips',\n            query: 'Chips',\n            totalResults: 10,\n            results: [],\n            modelName: 'PopularSearch'\n          }\n        ]\n      };\n    }\n  };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserClickedARecommendation`: the event is emitted after the user clicks the button.\n- A list of events emitted by the `BaseResultLink`.\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"recommendations.vue.js","sources":["../../../../../src/x-modules/recommendations/components/recommendations.vue"],"sourcesContent":["<template>\n  <NoElement v-if=\"recommendations.length\">\n    <!--\n      @slot Customized Recommendations layout.\n          @binding {Result[]} recommendations - Recommendations to render.\n          @binding {Vue} animation - Animation to animate the elements.\n    -->\n    <slot name=\"layout\" v-bind=\"{ animation, recommendations }\">\n      <component\n        :is=\"animation\"\n        tag=\"ul\"\n        data-test=\"recommendations\"\n        class=\"x-list x-recommendations\"\n      >\n        <li\n          v-for=\"recommendation in recommendations\"\n          :key=\"recommendation.id\"\n          class=\"x-recommendations__item\"\n          data-test=\"recommendation-item\"\n        >\n          <!--\n            @slot (Required) Recommendation content.\n            @binding {recommendation} recommendation - Recommendation data.\n          -->\n          <slot :recommendation=\"recommendation\" />\n        </li>\n      </component>\n    </slot>\n  </NoElement>\n</template>\n\n<script lang=\"ts\">\n  import { Component, Prop, Provide } from 'vue-property-decorator';\n  import { Result } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { NoElement } from '../../../components/no-element';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { PropsWithType } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { recommendationsXModule } from '../x-module';\n\n  /**\n   * It renders a list of recommendations from the\n   * {@link RecommendationsState.recommendations | Recommendations} state by default.\n   * The component provides the slot layout which wraps the whole component with the\n   * recommendations bounded. It also provides the default slot to customize the item, which is\n   * within the layout slot, with the recommendation bounded. Each recommendation should be\n   * represented by a {@link BaseResultLink | result link component} besides any other component.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(recommendationsXModule)],\n    components: {\n      NoElement\n    }\n  })\n  export default class Recommendations extends Vue {\n    /**\n     * The module's list of recommendations.\n     *\n     * @public\n     */\n    @State('recommendations', 'recommendations')\n    public storedRecommendations!: Result[];\n\n    /**\n     * Animation component that will be used to animate the recommendations.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue;\n\n    /**\n     * Number of recommendations to be rendered.\n     *\n     * @public\n     */\n    @Prop()\n    protected maxItemsToRender?: number;\n\n    /**\n     * The additional events to be emitted by the mandatory {@link BaseResultLink} component.\n     *\n     * @public\n     */\n    @Provide()\n    protected resultClickExtraEvents: PropsWithType<XEventsTypes, Result>[] = [\n      'UserClickedARecommendation'\n    ];\n\n    /**\n     * Slices the recommendations from the state.\n     *\n     * @returns - The list of recommendations slice by the number of items to render.\n     *\n     * @internal\n     */\n    protected get recommendations(): Result[] {\n      return this.storedRecommendations.slice(0, this.maxItemsToRender);\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-recommendations {\n    list-style-type: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nIt renders a list of recommendations from recommendations state by default. The component provides\nthe slot layout which wraps the whole component with the recommendations bound. It also provides the\ndefault slot to customize the item, which is within the layout slot, with the recommendation bound.\nEach recommendation should be represented by a BaseResultLink component besides any other component.\n\n### Basic example\n\n### Adding a custom BaseResultLink component\n\nA BaseResultLink **must** be used inside the Recommendations component. In the example below the\nBaseResultLink default slot is filled with an image of the result and a span for the title. Besides\nthat, an additional button has been added.\n\n```vue\n<Recommendations>\n  <template #default=\"{ recommendation }\">\n    <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n      <template #default=\"{ result }\">\n        <img :src=\"result.images[0]\" class=\"x-recommendations__image\"/>\n        <span class=\"x-recommendations__title\">{{ result.name }}</span>\n      </template>\n    </BaseResultLink>\n    <button>Custom Behaviour</button>\n  </template>\n</Recommendations>\n```\n\n### Overriding layout content\n\nIt renders a list of recommendations customizing the layout slot. In the example below, instead of\nusing the default Recommendations content, a BaseGrid component is used to render the\nrecommendations.\n\n```vue\n<Recommendations :animation=\"staggeredFadeAndSlide\">\n  <template #layout=\"{ recommendations, animation }\">\n    <BaseGrid :items=\"recommendations\" :animation=\"animation\">\n      <template #result=\"{ item }\">\n        <BaseResultLink :result=\"item\">\n          <BaseResultImage :result=\"item\" />\n          <span class=\"x-result__title\">{{ item.name }}</span>\n        </BaseResultLink>\n      </template>\n    </BaseGrid>\n  </template>\n</Recommendations>\n```\n\n### Play with props\n\nIn this example, the suggestions has been limited to render a maximum of 3 items.\n\n_Type “puzzle” or another toy in the input field to try it out!_\n\n```vue\n<template>\n  <BaseSuggestions :suggestions=\"suggestions\" :maxItemToRender=\"3\" />\n</template>\n\n<script>\n  import { BaseSuggestions } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSuggestionsDemo',\n    components: {\n      BaseSuggestions\n    },\n    data() {\n      return {\n        suggestions: [\n          {\n            facets: [],\n            key: 'chips',\n            query: 'Chips',\n            totalResults: 10,\n            results: [],\n            modelName: 'PopularSearch'\n          }\n        ]\n      };\n    }\n  };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserClickedARecommendation`: the event is emitted after the user clicks the button.\n- A list of events emitted by the `BaseResultLink`.\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -25,7 +25,11 @@ var __vue_render__ = function () {
           return [_vm._v(_vm._s(_vm.relatedTag.tag))]
         },
         null,
-        { relatedTag: _vm.relatedTag, isSelected: _vm.isSelected }
+        {
+          relatedTag: _vm.relatedTag,
+          isSelected: _vm.isSelected,
+          shouldHighlightCurated: _vm.shouldHighlightCurated,
+        }
       ) ],
     2
   )
@@ -36,11 +40,11 @@ __vue_render__._withStripped = true;
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-0dfb94a8_0", { source: ".x-related-tag[data-v-0dfb94a8] {\n  white-space: nowrap;\n}\n.x-related-tag--is-selected[data-v-0dfb94a8] {\n  background: lightgrey;\n}", map: undefined, media: undefined });
+    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 });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-0dfb94a8";
+  var __vue_scope_id__ = "data-v-6081d22c";
   /* module identifier */
   var __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      -->\n    <slot v-bind=\"{ relatedTag, isSelected }\">{{ 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     * 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     * 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-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 `x-related-tag--is-selected` dynamic CSS class so you can style it when is\nselected.\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":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}