@empathyco/x-components 6.0.0-alpha.9 → 6.0.0-alpha.91

package/js/x-modules/query-suggestions/store/getters/query-suggestions.getter.js.map

@@ -1 +1 @@
-{"version":3,"file":"query-suggestions.getter.js","sources":["../../../../../../src/x-modules/query-suggestions/store/getters/query-suggestions.getter.ts"],"sourcesContent":["import { HistoryQuery, Suggestion } from '@empathyco/x-types';\nimport { GettersClass } from '../../../../store/getters.types';\nimport { normalizeString } from '../../../../utils/normalize';\nimport { QuerySuggestionsState, QuerySuggestionsXStoreModule } from '../types';\n\n/**\n * Class implementation for the {@link QuerySuggestionsGetter.querySuggestions} getter.\n *\n * @public\n */\nexport class QuerySuggestionsGetter implements GettersClass<QuerySuggestionsXStoreModule> {\n  /**\n   * Default implementation for the {@link QuerySuggestionsGetter.querySuggestions} getter.\n   *\n   * @param state - Current {@link https://vuex.vuejs.org/guide/state.html | state} of the query\n   * suggestions module.\n   * @returns The filtered subset of queries, matching with the current query.\n   */\n  querySuggestions({\n    query,\n    suggestions,\n    config,\n    searchedQueries\n  }: QuerySuggestionsState): Suggestion[] {\n    const queriesToFilter = searchedQueries.map((historyQuery: HistoryQuery) => historyQuery.query);\n    if (!query || !config.hideIfEqualsQuery) {\n      return config.hideSessionQueries\n        ? suggestions.filter(({ query }) => !queriesToFilter.includes(query))\n        : suggestions;\n    }\n    const filteredSuggestions = suggestions.filter(\n      this.isInQuerySuggestions(normalizeString(query))\n    );\n    return config.hideSessionQueries\n      ? filteredSuggestions.filter(({ query }) => !queriesToFilter.includes(query))\n      : filteredSuggestions;\n  }\n\n  /**\n   * Creates a function to check in the suggestion queries array the items that match\n   * the current query.\n   *\n   * @param normalizedQuery - The normalized query for search into the array.\n   * @returns A filter function for searching into the array of suggestion queries with the provided\n   * params.\n   * @internal\n   */\n  protected isInQuerySuggestions(normalizedQuery: string): (suggestion: Suggestion) => boolean {\n    return (suggestion: Suggestion) => {\n      const normalizedSuggestionQuery = normalizeString(suggestion.query);\n      // TODO Hide the suggestion if it's equals to the query and it does NOT have facets. (EX-3184)\n      // The logic is here https://bitbucket.org/colbenson/x-components/pull-requests/432\n      // normalizedSuggestionQuery !== normalizedQuery || !isArrayEmpty(suggestion.facets)\n      return normalizedSuggestionQuery !== normalizedQuery;\n    };\n  }\n}\n\nconst querySuggestionsGetter = new QuerySuggestionsGetter();\n\n/**\n * Query Suggestions getter.\n *\n * @public\n */\nexport const querySuggestions =\n  querySuggestionsGetter.querySuggestions.bind(querySuggestionsGetter);\n"],"names":[],"mappings":";;AAKA;;;;AAIG;MACU,sBAAsB,CAAA;AACjC;;;;;;AAMG;IACH,gBAAgB,CAAC,EACf,KAAK,EACL,WAAW,EACX,MAAM,EACN,eAAe,EACO,EAAA;AACtB,QAAA,MAAM,eAAe,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC,YAA0B,KAAK,YAAY,CAAC,KAAK,CAAC,CAAC;AAChG,QAAA,IAAI,CAAC,KAAK,IAAI,CAAC,MAAM,CAAC,iBAAiB,EAAE;YACvC,OAAO,MAAM,CAAC,kBAAkB;AAC9B,kBAAE,WAAW,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;kBACnE,WAAW,CAAC;AACjB,SAAA;AACD,QAAA,MAAM,mBAAmB,GAAG,WAAW,CAAC,MAAM,CAC5C,IAAI,CAAC,oBAAoB,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAClD,CAAC;QACF,OAAO,MAAM,CAAC,kBAAkB;AAC9B,cAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;cAC3E,mBAAmB,CAAC;KACzB;AAED;;;;;;;;AAQG;AACO,IAAA,oBAAoB,CAAC,eAAuB,EAAA;QACpD,OAAO,CAAC,UAAsB,KAAI;YAChC,MAAM,yBAAyB,GAAG,eAAe,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;;;;YAIpE,OAAO,yBAAyB,KAAK,eAAe,CAAC;AACvD,SAAC,CAAC;KACH;AACF,CAAA;AAED,MAAM,sBAAsB,GAAG,IAAI,sBAAsB,EAAE,CAAC;AAE5D;;;;AAIG;AACI,MAAM,gBAAgB,GAC3B,sBAAsB,CAAC,gBAAgB,CAAC,IAAI,CAAC,sBAAsB;;;;"}
+{"version":3,"file":"query-suggestions.getter.js","sources":["../../../../../../src/x-modules/query-suggestions/store/getters/query-suggestions.getter.ts"],"sourcesContent":["import type { HistoryQuery, Suggestion } from '@empathyco/x-types'\nimport type { GettersClass } from '../../../../store/getters.types'\nimport type { QuerySuggestionsState, QuerySuggestionsXStoreModule } from '../types'\nimport { normalizeString } from '../../../../utils/normalize'\n\n/**\n * Class implementation for the {@link QuerySuggestionsGetter.querySuggestions} getter.\n *\n * @public\n */\nexport class QuerySuggestionsGetter implements GettersClass<QuerySuggestionsXStoreModule> {\n  /**\n   * Default implementation for the {@link QuerySuggestionsGetter.querySuggestions} getter.\n   *\n   * @param state - Current {@link https://vuex.vuejs.org/guide/state.html | state} of the query\n   * suggestions module.\n   * @returns The filtered subset of queries, matching with the current query.\n   */\n  querySuggestions({\n    query,\n    suggestions,\n    config,\n    searchedQueries,\n  }: QuerySuggestionsState): Suggestion[] {\n    const queriesToFilter = searchedQueries.map((historyQuery: HistoryQuery) => historyQuery.query)\n    if (!query || !config.hideIfEqualsQuery) {\n      return config.hideSessionQueries\n        ? suggestions.filter(({ query }) => !queriesToFilter.includes(query))\n        : suggestions\n    }\n    const filteredSuggestions = suggestions.filter(\n      this.isInQuerySuggestions(normalizeString(query)),\n    )\n    return config.hideSessionQueries\n      ? filteredSuggestions.filter(({ query }) => !queriesToFilter.includes(query))\n      : filteredSuggestions\n  }\n\n  /**\n   * Creates a function to check in the suggestion queries array the items that match\n   * the current query.\n   *\n   * @param normalizedQuery - The normalized query for search into the array.\n   * @returns A filter function for searching into the array of suggestion queries with the provided\n   * params.\n   * @internal\n   */\n  protected isInQuerySuggestions(normalizedQuery: string): (suggestion: Suggestion) => boolean {\n    return (suggestion: Suggestion) => {\n      const normalizedSuggestionQuery = normalizeString(suggestion.query)\n      // TODO Hide the suggestion if it's equals to the query and it does NOT have facets. (EX-3184)\n      // The logic is here https://bitbucket.org/colbenson/x-components/pull-requests/432\n      // normalizedSuggestionQuery !== normalizedQuery || !isArrayEmpty(suggestion.facets)\n      return normalizedSuggestionQuery !== normalizedQuery\n    }\n  }\n}\n\nconst querySuggestionsGetter = new QuerySuggestionsGetter()\n\n/**\n * Query Suggestions getter.\n *\n * @public\n */\nexport const querySuggestions = querySuggestionsGetter.querySuggestions.bind(querySuggestionsGetter)\n"],"names":[],"mappings":";;AAKA;;;;AAIG;MACU,sBAAsB,CAAA;AACjC;;;;;;AAMG;IACH,gBAAgB,CAAC,EACf,KAAK,EACL,WAAW,EACX,MAAM,EACN,eAAe,GACO,EAAA;AACtB,QAAA,MAAM,eAAe,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC,YAA0B,KAAK,YAAY,CAAC,KAAK,CAAC,CAAA;AAC/F,QAAA,IAAI,CAAC,KAAK,IAAI,CAAC,MAAM,CAAC,iBAAiB,EAAE;YACvC,OAAO,MAAM,CAAC,kBAAkB;AAC9B,kBAAE,WAAW,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;kBACnE,WAAW,CAAA;AAChB,SAAA;AACD,QAAA,MAAM,mBAAmB,GAAG,WAAW,CAAC,MAAM,CAC5C,IAAI,CAAC,oBAAoB,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAClD,CAAA;QACD,OAAO,MAAM,CAAC,kBAAkB;AAC9B,cAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;cAC3E,mBAAmB,CAAA;KACxB;AAED;;;;;;;;AAQG;AACO,IAAA,oBAAoB,CAAC,eAAuB,EAAA;QACpD,OAAO,CAAC,UAAsB,KAAI;YAChC,MAAM,yBAAyB,GAAG,eAAe,CAAC,UAAU,CAAC,KAAK,CAAC,CAAA;;;;YAInE,OAAO,yBAAyB,KAAK,eAAe,CAAA;AACtD,SAAC,CAAA;KACF;AACF,CAAA;AAED,MAAM,sBAAsB,GAAG,IAAI,sBAAsB,EAAE,CAAA;AAE3D;;;;AAIG;AACI,MAAM,gBAAgB,GAAG,sBAAsB,CAAC,gBAAgB,CAAC,IAAI,CAAC,sBAAsB;;;;"}

package/js/x-modules/query-suggestions/store/getters/request.getter.js

@@ -3,18 +3,16 @@
  *
  * @param state - Current {@link https://vuex.vuejs.org/guide/state.html | state} of the query
  * suggestions module.
- *
  * @returns The query suggestions request to fetch data from the API.
- *
  * @public
  */
-const request = ({ query, config, params }) => {
+const request = ({ query, config, params, }) => {
     return query.trim()
         ? {
             query,
             rows: config.maxItemsToRequest,
             start: 0,
-            extraParams: params
+            extraParams: params,
         }
         : null;
 };

package/js/x-modules/query-suggestions/store/getters/request.getter.js.map

@@ -1 +1 @@
-{"version":3,"file":"request.getter.js","sources":["../../../../../../src/x-modules/query-suggestions/store/getters/request.getter.ts"],"sourcesContent":["import { QuerySuggestionsXStoreModule } from '../types';\n\n/**\n * Default implementation for the {@link QuerySuggestionsGetters.request} getter.\n *\n * @param state - Current {@link https://vuex.vuejs.org/guide/state.html | state} of the query\n * suggestions module.\n *\n * @returns The query suggestions request to fetch data from the API.\n *\n * @public\n */\nexport const request: QuerySuggestionsXStoreModule['getters']['request'] = ({\n  query,\n  config,\n  params\n}) => {\n  return query.trim()\n    ? {\n        query,\n        rows: config.maxItemsToRequest,\n        start: 0,\n        extraParams: params\n      }\n    : null;\n};\n"],"names":[],"mappings":"AAEA;;;;;;;;;AASG;AACI,MAAM,OAAO,GAAuD,CAAC,EAC1E,KAAK,EACL,MAAM,EACN,MAAM,EACP,KAAI;IACH,OAAO,KAAK,CAAC,IAAI,EAAE;AACjB,UAAE;YACE,KAAK;YACL,IAAI,EAAE,MAAM,CAAC,iBAAiB;AAC9B,YAAA,KAAK,EAAE,CAAC;AACR,YAAA,WAAW,EAAE,MAAM;AACpB,SAAA;UACD,IAAI,CAAC;AACX;;;;"}
+{"version":3,"file":"request.getter.js","sources":["../../../../../../src/x-modules/query-suggestions/store/getters/request.getter.ts"],"sourcesContent":["import type { QuerySuggestionsXStoreModule } from '../types'\n\n/**\n * Default implementation for the {@link QuerySuggestionsGetters.request} getter.\n *\n * @param state - Current {@link https://vuex.vuejs.org/guide/state.html | state} of the query\n * suggestions module.\n * @returns The query suggestions request to fetch data from the API.\n * @public\n */\nexport const request: QuerySuggestionsXStoreModule['getters']['request'] = ({\n  query,\n  config,\n  params,\n}) => {\n  return query.trim()\n    ? {\n        query,\n        rows: config.maxItemsToRequest,\n        start: 0,\n        extraParams: params,\n      }\n    : null\n}\n"],"names":[],"mappings":"AAEA;;;;;;;AAOG;AACI,MAAM,OAAO,GAAuD,CAAC,EAC1E,KAAK,EACL,MAAM,EACN,MAAM,GACP,KAAI;IACH,OAAO,KAAK,CAAC,IAAI,EAAE;AACjB,UAAE;YACE,KAAK;YACL,IAAI,EAAE,MAAM,CAAC,iBAAiB;AAC9B,YAAA,KAAK,EAAE,CAAC;AACR,YAAA,WAAW,EAAE,MAAM;AACpB,SAAA;UACD,IAAI,CAAA;AACV;;;;"}

package/js/x-modules/query-suggestions/store/module.js

@@ -1,6 +1,6 @@
+import { setConfig, mergeConfig } from '../../../store/utils/config-store.utils.js';
 import { setQuery } from '../../../store/utils/query.utils.js';
 import { setStatus } from '../../../store/utils/status-store.utils.js';
-import { setConfig, mergeConfig } from '../../../store/utils/config-store.utils.js';
 import { cancelFetchAndSaveSuggestions, fetchAndSaveSuggestions } from './actions/fetch-and-save-suggestions.action.js';
 import { fetchSuggestions } from './actions/fetch-suggestions.action.js';
 import { setUrlParams } from './actions/set-url-params.action.js';
@@ -23,14 +23,14 @@ const querySuggestionsXStoreModule = {
             debounceInMs: 200,
             maxItemsToRequest: 10,
             hideIfEqualsQuery: true,
-            hideSessionQueries: true
+            hideSessionQueries: true,
         },
-        params: {}
+        params: {},
     }),
     getters: {
         request,
         normalizedQuery,
-        querySuggestions
+        querySuggestions,
     },
     mutations: {
         setQuery,
@@ -45,14 +45,14 @@ const querySuggestionsXStoreModule = {
             state.params = params;
         },
         setConfig,
-        mergeConfig
+        mergeConfig,
     },
     actions: {
         cancelFetchAndSaveSuggestions,
         fetchSuggestions,
         fetchAndSaveSuggestions,
-        setUrlParams
-    }
+        setUrlParams,
+    },
 };
 
 export { querySuggestionsXStoreModule };

package/js/x-modules/query-suggestions/store/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/query-suggestions/store/module.ts"],"sourcesContent":["import { setQuery } from '../../../store/utils/query.utils';\nimport { setStatus } from '../../../store/utils/status-store.utils';\nimport { mergeConfig, setConfig } from '../../../store/utils/config-store.utils';\nimport {\n  cancelFetchAndSaveSuggestions,\n  fetchAndSaveSuggestions\n} from './actions/fetch-and-save-suggestions.action';\nimport { fetchSuggestions } from './actions/fetch-suggestions.action';\nimport { setUrlParams } from './actions/set-url-params.action';\nimport { normalizedQuery } from './getters/normalized-query.getter';\nimport { querySuggestions } from './getters/query-suggestions.getter';\nimport { request } from './getters/request.getter';\nimport { QuerySuggestionsXStoreModule } from './types';\n\n/**\n * {@link XStoreModule} For the query-suggestions module.\n *\n * @internal\n */\nexport const querySuggestionsXStoreModule: QuerySuggestionsXStoreModule = {\n  state: () => ({\n    query: '',\n    suggestions: [],\n    searchedQueries: [],\n    status: 'initial',\n    config: {\n      debounceInMs: 200,\n      maxItemsToRequest: 10,\n      hideIfEqualsQuery: true,\n      hideSessionQueries: true\n    },\n    params: {}\n  }),\n  getters: {\n    request,\n    normalizedQuery,\n    querySuggestions\n  },\n  mutations: {\n    setQuery,\n    setSuggestions(state, suggestions) {\n      state.suggestions = suggestions;\n    },\n    setSearchedQueries(state, searchedQueries) {\n      state.searchedQueries = searchedQueries;\n    },\n    setStatus,\n    setParams(state, params) {\n      state.params = params;\n    },\n    setConfig,\n    mergeConfig\n  },\n  actions: {\n    cancelFetchAndSaveSuggestions,\n    fetchSuggestions,\n    fetchAndSaveSuggestions,\n    setUrlParams\n  }\n};\n"],"names":[],"mappings":";;;;;;;;;;AAcA;;;;AAIG;AACU,MAAA,4BAA4B,GAAiC;AACxE,IAAA,KAAK,EAAE,OAAO;AACZ,QAAA,KAAK,EAAE,EAAE;AACT,QAAA,WAAW,EAAE,EAAE;AACf,QAAA,eAAe,EAAE,EAAE;AACnB,QAAA,MAAM,EAAE,SAAS;AACjB,QAAA,MAAM,EAAE;AACN,YAAA,YAAY,EAAE,GAAG;AACjB,YAAA,iBAAiB,EAAE,EAAE;AACrB,YAAA,iBAAiB,EAAE,IAAI;AACvB,YAAA,kBAAkB,EAAE,IAAI;AACzB,SAAA;AACD,QAAA,MAAM,EAAE,EAAE;KACX,CAAC;AACF,IAAA,OAAO,EAAE;QACP,OAAO;QACP,eAAe;QACf,gBAAgB;AACjB,KAAA;AACD,IAAA,SAAS,EAAE;QACT,QAAQ;QACR,cAAc,CAAC,KAAK,EAAE,WAAW,EAAA;AAC/B,YAAA,KAAK,CAAC,WAAW,GAAG,WAAW,CAAC;SACjC;QACD,kBAAkB,CAAC,KAAK,EAAE,eAAe,EAAA;AACvC,YAAA,KAAK,CAAC,eAAe,GAAG,eAAe,CAAC;SACzC;QACD,SAAS;QACT,SAAS,CAAC,KAAK,EAAE,MAAM,EAAA;AACrB,YAAA,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;SACvB;QACD,SAAS;QACT,WAAW;AACZ,KAAA;AACD,IAAA,OAAO,EAAE;QACP,6BAA6B;QAC7B,gBAAgB;QAChB,uBAAuB;QACvB,YAAY;AACb,KAAA;;;;;"}
+{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/query-suggestions/store/module.ts"],"sourcesContent":["import type { QuerySuggestionsXStoreModule } from './types'\nimport { mergeConfig, setConfig } from '../../../store/utils/config-store.utils'\nimport { setQuery } from '../../../store/utils/query.utils'\nimport { setStatus } from '../../../store/utils/status-store.utils'\nimport {\n  cancelFetchAndSaveSuggestions,\n  fetchAndSaveSuggestions,\n} from './actions/fetch-and-save-suggestions.action'\nimport { fetchSuggestions } from './actions/fetch-suggestions.action'\nimport { setUrlParams } from './actions/set-url-params.action'\nimport { normalizedQuery } from './getters/normalized-query.getter'\nimport { querySuggestions } from './getters/query-suggestions.getter'\nimport { request } from './getters/request.getter'\n\n/**\n * {@link XStoreModule} For the query-suggestions module.\n *\n * @internal\n */\nexport const querySuggestionsXStoreModule: QuerySuggestionsXStoreModule = {\n  state: () => ({\n    query: '',\n    suggestions: [],\n    searchedQueries: [],\n    status: 'initial',\n    config: {\n      debounceInMs: 200,\n      maxItemsToRequest: 10,\n      hideIfEqualsQuery: true,\n      hideSessionQueries: true,\n    },\n    params: {},\n  }),\n  getters: {\n    request,\n    normalizedQuery,\n    querySuggestions,\n  },\n  mutations: {\n    setQuery,\n    setSuggestions(state, suggestions) {\n      state.suggestions = suggestions\n    },\n    setSearchedQueries(state, searchedQueries) {\n      state.searchedQueries = searchedQueries\n    },\n    setStatus,\n    setParams(state, params) {\n      state.params = params\n    },\n    setConfig,\n    mergeConfig,\n  },\n  actions: {\n    cancelFetchAndSaveSuggestions,\n    fetchSuggestions,\n    fetchAndSaveSuggestions,\n    setUrlParams,\n  },\n}\n"],"names":[],"mappings":";;;;;;;;;;AAcA;;;;AAIG;AACU,MAAA,4BAA4B,GAAiC;AACxE,IAAA,KAAK,EAAE,OAAO;AACZ,QAAA,KAAK,EAAE,EAAE;AACT,QAAA,WAAW,EAAE,EAAE;AACf,QAAA,eAAe,EAAE,EAAE;AACnB,QAAA,MAAM,EAAE,SAAS;AACjB,QAAA,MAAM,EAAE;AACN,YAAA,YAAY,EAAE,GAAG;AACjB,YAAA,iBAAiB,EAAE,EAAE;AACrB,YAAA,iBAAiB,EAAE,IAAI;AACvB,YAAA,kBAAkB,EAAE,IAAI;AACzB,SAAA;AACD,QAAA,MAAM,EAAE,EAAE;KACX,CAAC;AACF,IAAA,OAAO,EAAE;QACP,OAAO;QACP,eAAe;QACf,gBAAgB;AACjB,KAAA;AACD,IAAA,SAAS,EAAE;QACT,QAAQ;QACR,cAAc,CAAC,KAAK,EAAE,WAAW,EAAA;AAC/B,YAAA,KAAK,CAAC,WAAW,GAAG,WAAW,CAAA;SAChC;QACD,kBAAkB,CAAC,KAAK,EAAE,eAAe,EAAA;AACvC,YAAA,KAAK,CAAC,eAAe,GAAG,eAAe,CAAA;SACxC;QACD,SAAS;QACT,SAAS,CAAC,KAAK,EAAE,MAAM,EAAA;AACrB,YAAA,KAAK,CAAC,MAAM,GAAG,MAAM,CAAA;SACtB;QACD,SAAS;QACT,WAAW;AACZ,KAAA;AACD,IAAA,OAAO,EAAE;QACP,6BAA6B;QAC7B,gBAAgB;QAChB,uBAAuB;QACvB,YAAY;AACb,KAAA;;;;;"}

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

@@ -91,40 +91,40 @@ const moduleDebounce = namespacedDebounce(moduleName);
  */
 const querySuggestionsWiring = createWiring({
     ParamsLoadedFromUrl: {
-        setUrlParams
+        setUrlParams,
     },
     UserIsTypingAQuery: {
-        setQuerySuggestionsQueryDebounce: moduleDebounce(setQuerySuggestionsQuery, ({ state }) => state.config.debounceInMs, { cancelOn: 'UserAcceptedAQuery' })
+        setQuerySuggestionsQueryDebounce: moduleDebounce(setQuerySuggestionsQuery, ({ state }) => state.config.debounceInMs, { cancelOn: 'UserAcceptedAQuery' }),
     },
     UserAcceptedAQuery: {
-        setQuerySuggestionsQuery
+        setQuerySuggestionsQuery,
     },
     UserClearedQuery: {
         clearQuerySuggestionsQuery,
-        cancelFetchAndSaveSuggestionsWire
+        cancelFetchAndSaveSuggestionsWire,
     },
     QuerySuggestionsRequestUpdated: {
-        fetchAndSaveSuggestionsWire
+        fetchAndSaveSuggestionsWire,
     },
     ExtraParamsChanged: {
-        setQuerySuggestionsExtraParams
+        setQuerySuggestionsExtraParams,
     },
     UserClickedCloseX: {
-        clearQuerySuggestionsQuery
+        clearQuerySuggestionsQuery,
     },
     UserClickedOutOfMainModal: {
-        clearQuerySuggestionsQuery
+        clearQuerySuggestionsQuery,
     },
     UserAcceptedAQueryPreview: {
         setQuerySuggestionsQueryFromPreview,
-        setQuerySuggestionsExtraParamsFromPreview
+        setQuerySuggestionsExtraParamsFromPreview,
     },
     QueryPreviewUnselected: {
-        setQuerySuggestionsExtraParams
+        setQuerySuggestionsExtraParams,
     },
     SessionHistoryQueriesChanged: {
-        setSearchedQueriesInSuggestions
-    }
+        setSearchedQueriesInSuggestions,
+    },
 });
 
 export { cancelFetchAndSaveSuggestionsWire, clearQuerySuggestionsQuery, fetchAndSaveSuggestionsWire, querySuggestionsWiring, setQuerySuggestionsExtraParams, setQuerySuggestionsExtraParamsFromPreview, setQuerySuggestionsQuery, setQuerySuggestionsQueryFromPreview, setSearchedQueriesInSuggestions };

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 module query from a selectedQueryPreview's query.\n *\n * @public\n */\nexport const setQuerySuggestionsQueryFromPreview = wireCommit(\n  'setQuery',\n  ({ eventPayload: { query } }) => query\n);\n\n/**\n * Sets the query-suggestions module params from a selectedQueryPreview's extraParams.\n *\n * @public\n */\nexport const setQuerySuggestionsExtraParamsFromPreview = wireCommit(\n  'setParams',\n  ({ eventPayload: { extraParams } }) => extraParams\n);\n\n/**\n * Sets the query suggestions state `params`.\n *\n * @public\n */\nexport const setQuerySuggestionsExtraParams = wireCommit('setParams');\n\n/**\n * Sets the query suggestions state `searchedQueries` with the list of history queries.\n *\n * @public\n */\nexport const setSearchedQueriesInSuggestions = wireCommit('setSearchedQueries');\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 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  ParamsLoadedFromUrl: {\n    setUrlParams\n  },\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  QuerySuggestionsRequestUpdated: {\n    fetchAndSaveSuggestionsWire\n  },\n  ExtraParamsChanged: {\n    setQuerySuggestionsExtraParams\n  },\n  UserClickedCloseX: {\n    clearQuerySuggestionsQuery\n  },\n  UserClickedOutOfMainModal: {\n    clearQuerySuggestionsQuery\n  },\n  UserAcceptedAQueryPreview: {\n    setQuerySuggestionsQueryFromPreview,\n    setQuerySuggestionsExtraParamsFromPreview\n  },\n  QueryPreviewUnselected: {\n    setQuerySuggestionsExtraParams\n  },\n  SessionHistoryQueriesChanged: {\n    setSearchedQueriesInSuggestions\n  }\n});\n"],"names":[],"mappings":";;;;AASA;;;;AAIG;AACH,MAAM,UAAU,GAAG,kBAAkB,CAAC;AAEtC;;;;AAIG;AACH,MAAM,UAAU,GAA4C,oBAAoB,CAAC,UAAU,CAAC,CAAC;AAE7F;;;;AAIG;AACH,MAAM,0BAA0B,GAAG,oCAAoC,CAAC,UAAU,CAAC,CAAC;AAEpF;;;;AAIG;AACH,MAAM,YAAY,GAAG,sBAAsB,CAAC,UAAU,CAAC,CAAC;AAExD;;;;AAIG;MACU,wBAAwB,GAAG,UAAU,CAAC,UAAU,EAAE;AAE/D;;;;AAIG;MACU,mCAAmC,GAAG,UAAU,CAC3D,UAAU,EACV,CAAC,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,KAAK,EACtC;AAEF;;;;AAIG;MACU,yCAAyC,GAAG,UAAU,CACjE,WAAW,EACX,CAAC,EAAE,YAAY,EAAE,EAAE,WAAW,EAAE,EAAE,KAAK,WAAW,EAClD;AAEF;;;;AAIG;MACU,8BAA8B,GAAG,UAAU,CAAC,WAAW,EAAE;AAEtE;;;;AAIG;MACU,+BAA+B,GAAG,UAAU,CAAC,oBAAoB,EAAE;AAEhF;;;;AAIG;AACU,MAAA,0BAA0B,GAAG,UAAU,CAAC,UAAU,EAAE,EAAE,EAAE;AAErE;;;;AAIG;AACH,MAAM,YAAY,GAAG,YAAY,CAAC,cAAc,CAAC,CAAC;AAElD;;;;AAIG;MACU,2BAA2B,GAAG,YAAY,CAAC,yBAAyB,EAAE;AAEnF;;;;AAIG;MACU,iCAAiC,GAAG,0BAA0B,CACzE,+BAA+B,EAC/B;AAEF;;AAEG;AACH,MAAM,cAAc,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC;AAEtD;;;;AAIG;AACI,MAAM,sBAAsB,GAAG,YAAY,CAAC;AACjD,IAAA,mBAAmB,EAAE;QACnB,YAAY;AACb,KAAA;AACD,IAAA,kBAAkB,EAAE;QAClB,gCAAgC,EAAE,cAAc,CAC9C,wBAAwB,EACxB,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,YAAY,EACxC,EAAE,QAAQ,EAAE,oBAAoB,EAAE,CACnC;AACF,KAAA;AACD,IAAA,kBAAkB,EAAE;QAClB,wBAAwB;AACzB,KAAA;AACD,IAAA,gBAAgB,EAAE;QAChB,0BAA0B;QAC1B,iCAAiC;AAClC,KAAA;AACD,IAAA,8BAA8B,EAAE;QAC9B,2BAA2B;AAC5B,KAAA;AACD,IAAA,kBAAkB,EAAE;QAClB,8BAA8B;AAC/B,KAAA;AACD,IAAA,iBAAiB,EAAE;QACjB,0BAA0B;AAC3B,KAAA;AACD,IAAA,yBAAyB,EAAE;QACzB,0BAA0B;AAC3B,KAAA;AACD,IAAA,yBAAyB,EAAE;QACzB,mCAAmC;QACnC,yCAAyC;AAC1C,KAAA;AACD,IAAA,sBAAsB,EAAE;QACtB,8BAA8B;AAC/B,KAAA;AACD,IAAA,4BAA4B,EAAE;QAC5B,+BAA+B;AAChC,KAAA;AACF,CAAA;;;;"}
+{"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/query-suggestions/wiring.ts"],"sourcesContent":["import type { NamespacedWireCommit } from '../../wiring/namespaced-wiring.types'\nimport {\n  namespacedWireCommit,\n  namespacedWireDispatch,\n  namespacedWireDispatchWithoutPayload,\n} from '../../wiring/namespaced-wires.factory'\nimport { namespacedDebounce } from '../../wiring/namespaced-wires.operators'\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 module query from a selectedQueryPreview's query.\n *\n * @public\n */\nexport const setQuerySuggestionsQueryFromPreview = wireCommit(\n  'setQuery',\n  ({ eventPayload: { query } }) => query,\n)\n\n/**\n * Sets the query-suggestions module params from a selectedQueryPreview's extraParams.\n *\n * @public\n */\nexport const setQuerySuggestionsExtraParamsFromPreview = wireCommit(\n  'setParams',\n  ({ eventPayload: { extraParams } }) => extraParams,\n)\n\n/**\n * Sets the query suggestions state `params`.\n *\n * @public\n */\nexport const setQuerySuggestionsExtraParams = wireCommit('setParams')\n\n/**\n * Sets the query suggestions state `searchedQueries` with the list of history queries.\n *\n * @public\n */\nexport const setSearchedQueriesInSuggestions = wireCommit('setSearchedQueries')\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 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  ParamsLoadedFromUrl: {\n    setUrlParams,\n  },\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  QuerySuggestionsRequestUpdated: {\n    fetchAndSaveSuggestionsWire,\n  },\n  ExtraParamsChanged: {\n    setQuerySuggestionsExtraParams,\n  },\n  UserClickedCloseX: {\n    clearQuerySuggestionsQuery,\n  },\n  UserClickedOutOfMainModal: {\n    clearQuerySuggestionsQuery,\n  },\n  UserAcceptedAQueryPreview: {\n    setQuerySuggestionsQueryFromPreview,\n    setQuerySuggestionsExtraParamsFromPreview,\n  },\n  QueryPreviewUnselected: {\n    setQuerySuggestionsExtraParams,\n  },\n  SessionHistoryQueriesChanged: {\n    setSearchedQueriesInSuggestions,\n  },\n})\n"],"names":[],"mappings":";;;;AASA;;;;AAIG;AACH,MAAM,UAAU,GAAG,kBAAkB,CAAA;AAErC;;;;AAIG;AACH,MAAM,UAAU,GAA4C,oBAAoB,CAAC,UAAU,CAAC,CAAA;AAE5F;;;;AAIG;AACH,MAAM,0BAA0B,GAAG,oCAAoC,CAAC,UAAU,CAAC,CAAA;AAEnF;;;;AAIG;AACH,MAAM,YAAY,GAAG,sBAAsB,CAAC,UAAU,CAAC,CAAA;AAEvD;;;;AAIG;MACU,wBAAwB,GAAG,UAAU,CAAC,UAAU,EAAC;AAE9D;;;;AAIG;MACU,mCAAmC,GAAG,UAAU,CAC3D,UAAU,EACV,CAAC,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,KAAK,EACvC;AAED;;;;AAIG;MACU,yCAAyC,GAAG,UAAU,CACjE,WAAW,EACX,CAAC,EAAE,YAAY,EAAE,EAAE,WAAW,EAAE,EAAE,KAAK,WAAW,EACnD;AAED;;;;AAIG;MACU,8BAA8B,GAAG,UAAU,CAAC,WAAW,EAAC;AAErE;;;;AAIG;MACU,+BAA+B,GAAG,UAAU,CAAC,oBAAoB,EAAC;AAE/E;;;;AAIG;AACU,MAAA,0BAA0B,GAAG,UAAU,CAAC,UAAU,EAAE,EAAE,EAAC;AAEpE;;;;AAIG;AACH,MAAM,YAAY,GAAG,YAAY,CAAC,cAAc,CAAC,CAAA;AAEjD;;;;AAIG;MACU,2BAA2B,GAAG,YAAY,CAAC,yBAAyB,EAAC;AAElF;;;;AAIG;MACU,iCAAiC,GAAG,0BAA0B,CACzE,+BAA+B,EAChC;AAED;;AAEG;AACH,MAAM,cAAc,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAA;AAErD;;;;AAIG;AACI,MAAM,sBAAsB,GAAG,YAAY,CAAC;AACjD,IAAA,mBAAmB,EAAE;QACnB,YAAY;AACb,KAAA;AACD,IAAA,kBAAkB,EAAE;QAClB,gCAAgC,EAAE,cAAc,CAC9C,wBAAwB,EACxB,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,YAAY,EACxC,EAAE,QAAQ,EAAE,oBAAoB,EAAE,CACnC;AACF,KAAA;AACD,IAAA,kBAAkB,EAAE;QAClB,wBAAwB;AACzB,KAAA;AACD,IAAA,gBAAgB,EAAE;QAChB,0BAA0B;QAC1B,iCAAiC;AAClC,KAAA;AACD,IAAA,8BAA8B,EAAE;QAC9B,2BAA2B;AAC5B,KAAA;AACD,IAAA,kBAAkB,EAAE;QAClB,8BAA8B;AAC/B,KAAA;AACD,IAAA,iBAAiB,EAAE;QACjB,0BAA0B;AAC3B,KAAA;AACD,IAAA,yBAAyB,EAAE;QACzB,0BAA0B;AAC3B,KAAA;AACD,IAAA,yBAAyB,EAAE;QACzB,mCAAmC;QACnC,yCAAyC;AAC1C,KAAA;AACD,IAAA,sBAAsB,EAAE;QACtB,8BAA8B;AAC/B,KAAA;AACD,IAAA,4BAA4B,EAAE;QAC5B,+BAA+B;AAChC,KAAA;AACF,CAAA;;;;"}

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

@@ -13,7 +13,7 @@ const querySuggestionsXModule = {
     name: 'querySuggestions',
     storeModule: querySuggestionsXStoreModule,
     storeEmitters: querySuggestionsEmitters,
-    wiring: querySuggestionsWiring
+    wiring: querySuggestionsWiring,
 };
 XPlugin.registerXModule(querySuggestionsXModule);
 

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

@@ -1 +1 @@
-{"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/query-suggestions/x-module.ts"],"sourcesContent":["import { XPlugin } from '../../plugins/x-plugin';\nimport { XModule } from '../x-modules.types';\nimport { querySuggestionsEmitters } from './store/emitters';\nimport { querySuggestionsXStoreModule } from './store/module';\nimport { QuerySuggestionsXStoreModule } from './store/types';\nimport { querySuggestionsWiring } from './wiring';\n\n/**\n * QuerySuggestions {@link XModule} alias.\n *\n * @public\n */\nexport type QuerySuggestionsXModule = XModule<QuerySuggestionsXStoreModule>;\n\n/**\n * QuerySuggestions {@link XModule} implementation. This module is auto-registered as soon as you\n * import any component from the `query-suggestions` entry point.\n *\n * @public\n */\nexport const querySuggestionsXModule: QuerySuggestionsXModule = {\n  name: 'querySuggestions',\n  storeModule: querySuggestionsXStoreModule,\n  storeEmitters: querySuggestionsEmitters,\n  wiring: querySuggestionsWiring\n};\n\nXPlugin.registerXModule(querySuggestionsXModule);\n"],"names":[],"mappings":";;;;;AAcA;;;;;AAKG;AACU,MAAA,uBAAuB,GAA4B;AAC9D,IAAA,IAAI,EAAE,kBAAkB;AACxB,IAAA,WAAW,EAAE,4BAA4B;AACzC,IAAA,aAAa,EAAE,wBAAwB;AACvC,IAAA,MAAM,EAAE,sBAAsB;EAC9B;AAEF,OAAO,CAAC,eAAe,CAAC,uBAAuB,CAAC;;;;"}
+{"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/query-suggestions/x-module.ts"],"sourcesContent":["import type { XModule } from '../x-modules.types'\nimport type { QuerySuggestionsXStoreModule } from './store/types'\nimport { XPlugin } from '../../plugins/x-plugin'\nimport { querySuggestionsEmitters } from './store/emitters'\nimport { querySuggestionsXStoreModule } from './store/module'\nimport { querySuggestionsWiring } from './wiring'\n\n/**\n * QuerySuggestions {@link XModule} alias.\n *\n * @public\n */\nexport type QuerySuggestionsXModule = XModule<QuerySuggestionsXStoreModule>\n\n/**\n * QuerySuggestions {@link XModule} implementation. This module is auto-registered as soon as you\n * import any component from the `query-suggestions` entry point.\n *\n * @public\n */\nexport const querySuggestionsXModule: QuerySuggestionsXModule = {\n  name: 'querySuggestions',\n  storeModule: querySuggestionsXStoreModule,\n  storeEmitters: querySuggestionsEmitters,\n  wiring: querySuggestionsWiring,\n}\n\nXPlugin.registerXModule(querySuggestionsXModule)\n"],"names":[],"mappings":";;;;;AAcA;;;;;AAKG;AACU,MAAA,uBAAuB,GAA4B;AAC9D,IAAA,IAAI,EAAE,kBAAkB;AACxB,IAAA,WAAW,EAAE,4BAA4B;AACzC,IAAA,aAAa,EAAE,wBAAwB;AACvC,IAAA,MAAM,EAAE,sBAAsB;EAC/B;AAED,OAAO,CAAC,eAAe,CAAC,uBAAuB,CAAC;;;;"}

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

@@ -1,5 +1,5 @@
 import _sfc_main from './recommendations.vue2.js';
-import { openBlock, createBlock, resolveDynamicComponent, withCtx, createElementBlock, Fragment, renderList, createCommentVNode, renderSlot } from 'vue';
+import { openBlock, createBlock, resolveDynamicComponent, withCtx, createElementBlock, Fragment, renderList, renderSlot, createCommentVNode } from 'vue';
 import './recommendations.vue3.js';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
@@ -20,7 +20,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             class: "x-recommendations__item",
             "data-test": "recommendation-item"
           }, [
-            createCommentVNode("\n        @slot (Required) Recommendation content.\n        @binding {recommendation} recommendation - Recommendation data.\n      "),
             renderSlot(_ctx.$slots, "default", { recommendation }, void 0, true)
           ]);
         }),

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  <component\n    :is=\"animation\"\n    v-if=\"recommendations.length\"\n    tag=\"ul\"\n    data-test=\"recommendations\"\n    class=\"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</template>\n\n<script lang=\"ts\">\n  import { Result } from '@empathyco/x-types';\n  import { computed, defineComponent, provide, ComputedRef } from 'vue';\n  import { useState } from '../../../composables';\n  import { PropsWithType } from '../../../utils';\n  import { XEventsTypes } from '../../../wiring';\n  import { recommendationsXModule } from '../x-module';\n  import { AnimationProp } from '../../../types';\n\n  /**\n   * It renders a list of recommendations from the\n   * {@link RecommendationsState.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} component besides any other component.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'Recommendations',\n    xModule: recommendationsXModule.name,\n    props: {\n      /** Animation component that will be used to animate the recommendations. */\n      animation: {\n        type: AnimationProp,\n        default: 'ul'\n      },\n      /** Number of recommendations to be rendered. */\n      maxItemsToRender: Number\n    },\n    setup(props, { slots }) {\n      /** The module's list of recommendations. */\n      const storedRecommendations: ComputedRef<Result[]> = useState('recommendations', [\n        'recommendations'\n      ]).recommendations;\n\n      /** The additional events to be emitted by the mandatory {@link BaseResultLink} component. */\n      provide<PropsWithType<XEventsTypes, Result>[]>('resultClickExtraEvents', [\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      const recommendations = computed<Result[]>(() =>\n        storedRecommendations.value.slice(0, props.maxItemsToRender)\n      );\n\n      /**\n       * Render function to execute the `layout` slot, binding `slotsProps` and getting only the\n       * first `vNode` to avoid Fragments and Text root nodes.\n       * If there are no recommendations, nothing is rendered.\n       *\n       * @remarks `slotProps` must be values without Vue reactivity and located inside the\n       * render-function to update the binding data properly.\n       *\n       * @returns The root `vNode` of the `layout` slot or empty string if there are\n       * no recommendations.\n       */\n      function renderLayoutSlot() {\n        const slotProps = {\n          animation: props.animation,\n          recommendations: recommendations.value\n        };\n        return recommendations.value.length ? slots.layout?.(slotProps)[0] : '';\n      }\n\n      /* Hack to render through a render-function, the `layout` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n      const componentProps = { recommendations };\n      return (slots.layout ? renderLayoutSlot : componentProps) as typeof componentProps;\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-recommendations {\n    display: flex;\n    list-style-type: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events, but it makes components such as `BaseResultLink` emit additional\nevents:\n\n- [`UserClickedARecommendation`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the link of a recommendation.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Topclicked service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example on how the recommendations are rendered. You can customize how each\nresult is rendered by using the `default` slot. It is highly recommended to use base components such\nas the `BaseResultLink` or the `BaseResultAddToCart`, as they provides integration with other\nmodules such like the `tagging` one.\n\n```vue live\n<template>\n  <Recommendations #default=\"{ recommendation }\">\n    <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n      <img :src=\"recommendation.images[0]\" class=\"x-recommendations__image\" />\n      <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n    </BaseResultLink>\n    <BaseResultAddToCart>Add to cart</BaseResultAddToCart>\n  </Recommendations>\n</template>\n<script>\n  import { Recommendations } from '@empathyco/x-components/recommendations';\n  import { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components';\n\n  export default {\n    name: 'RecommendationsDemo',\n    components: {\n      Recommendations,\n      BaseResultLink,\n      BaseResultAddToCart\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the component will render a maximum of 4 result recommendations, and will use the\n`StaggeredFadeAndSlide` animation for the results, smoothing the entrance.\n\n```vue live\n<template>\n  <Recommendations\n    #default=\"{ recommendation }\"\n    :maxItemsToRender=\"4\"\n    animation=\"StaggeredFadeAndSlide\"\n  >\n    <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n      <img :src=\"recommendation.images[0]\" class=\"x-recommendations__image\" />\n      <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n    </BaseResultLink>\n    <BaseResultAddToCart>Add to cart</BaseResultAddToCart>\n  </Recommendations>\n</template>\n<script>\n  import Vue from 'vue';\n  import { Recommendations } from '@empathyco/x-components/recommendations';\n  import { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components';\n\n  Vue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide);\n  export default {\n    name: 'RecommendationsDemo',\n    components: {\n      Recommendations,\n      BaseResultLink,\n      BaseResultAddToCart\n    }\n  };\n</script>\n```\n\n### Play with the layout\n\nIn this example you can build your own layout, and the `Recommendations` component will just act as\na provider of the result recommendations data. Using the component this way, and due to Vue 2\nlimitations you will only be allowed to render a single element inside the `layout` slot.\n\n```vue live\n<template>\n  <Recommendations #layout=\"{ recommendations }\">\n    <div class=\"x-recommendations\">\n      <article\n        class=\"x-recommendations-list\"\n        v-for=\"recommendation in recommendations\"\n        :key=\"recommendation.id\"\n      >\n        <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n          <img :src=\"recommendation.images[0]\" class=\"x-recommendations__image\" />\n          <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n        </BaseResultLink>\n        <BaseResultAddToCart>Add to cart</BaseResultAddToCart>\n      </article>\n    </div>\n  </Recommendations>\n</template>\n<script>\n  import { Recommendations } from '@empathyco/x-components/recommendations';\n  import { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components';\n\n  export default {\n    name: 'RecommendationsDemo',\n    components: {\n      Recommendations,\n      BaseResultLink,\n      BaseResultAddToCart\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["animation","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_createCommentVNode"],"mappings":";;;;;AACE,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EADF,MAESA,EAAAA,MAAAA,EAAAA,KAAAA,EAAAA,QAAAA,EAAAA;SAFT,IAIY,CAAA,eAAA,CAAA,MAAA,IAAAC,SAAA,EAAA,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IACR,GAAA,EAAA,CAAA;AAAA,IACA,GAAK,EAAA,IAAA;AAAA,IAAA,WAAA,EAAA,iBAAA;AANT,IAAA,KAAA,EAAA,mBAAA;AAAA,GAAA,EAAA;;AAUY,OAAAF,SAAA,CAAA,IAAA,CAAA,EAAAG,kBAAA;AAAA,QAAiBC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,eAAA,EAAA,CAAA,cAAA,KAAA;AAClB,UAAA,OAAAL,SAAA,EAA0B,EAAAG,kBAAA,CAAA,IAAA,EAAA;AAAA,YAC/B,GAAU,EAAA,cAAA,CAAA,EAAA;AAAA,YAAA,KAAA,EAAA,yBAAA;AAEV,YAAA,WAAA,EAAA,qBAAA;AAAA,WAIA,EAAA;AAAA,YAAAG,kBAAA,CAAA,qIAAA,CAAA;;;AAlBN,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAA,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"recommendations.vue.js","sources":["../../../../../src/x-modules/recommendations/components/recommendations.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"recommendations.length\"\n    tag=\"ul\"\n    data-test=\"recommendations\"\n    class=\"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</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropsWithType } from '../../../utils'\nimport type { XEventsTypes } from '../../../wiring'\nimport { computed, defineComponent, provide } from 'vue'\nimport { useState } from '../../../composables'\nimport { AnimationProp } from '../../../types'\nimport { recommendationsXModule } from '../x-module'\n\n/**\n * It renders a list of recommendations from the\n * {@link RecommendationsState.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} component besides any other component.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Recommendations',\n  xModule: recommendationsXModule.name,\n  props: {\n    /** Animation component that will be used to animate the recommendations. */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /** Number of recommendations to be rendered. */\n    maxItemsToRender: Number,\n  },\n  setup(props, { slots }) {\n    /** The module's list of recommendations. */\n    const storedRecommendations = useState('recommendations').recommendations\n\n    /** The additional events to be emitted by the mandatory {@link BaseResultLink} component. */\n    provide<PropsWithType<XEventsTypes, Result>[]>('resultClickExtraEvents', [\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    const recommendations = computed<Result[]>(() =>\n      storedRecommendations.value.slice(0, props.maxItemsToRender),\n    )\n\n    /**\n     * Render function to execute the `layout` slot, binding `slotsProps` and getting only the\n     * first `vNode` to avoid Fragments and Text root nodes.\n     * If there are no recommendations, nothing is rendered.\n     *\n     * @remarks `slotProps` must be values without Vue reactivity and located inside the\n     * render-function to update the binding data properly.\n     *\n     * @returns The root `vNode` of the `layout` slot or empty string if there are\n     * no recommendations.\n     */\n    function renderLayoutSlot() {\n      const slotProps = {\n        animation: props.animation,\n        recommendations: recommendations.value,\n      }\n      return recommendations.value.length ? slots.layout?.(slotProps)[0] : ''\n    }\n\n    /* Hack to render through a render-function, the `layout` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n    const componentProps = { recommendations }\n    return (slots.layout ? renderLayoutSlot : componentProps) as typeof componentProps\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-recommendations {\n  display: flex;\n  list-style-type: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events, but it makes components such as `BaseResultLink` emit additional\nevents:\n\n- [`UserClickedARecommendation`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the link of a recommendation.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Topclicked service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example on how the recommendations are rendered. You can customize how each\nresult is rendered by using the `default` slot. It is highly recommended to use base components such\nas the `BaseResultLink` or the `BaseResultAddToCart`, as they provides integration with other\nmodules such like the `tagging` one.\n\n```vue live\n<template>\n  <Recommendations #default=\"{ recommendation }\">\n    <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n      <img :src=\"recommendation.images[0]\" class=\"x-recommendations__image\" />\n      <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n    </BaseResultLink>\n    <BaseResultAddToCart>Add to cart</BaseResultAddToCart>\n  </Recommendations>\n</template>\n<script>\nimport { Recommendations } from '@empathyco/x-components/recommendations'\nimport { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components'\n\nexport default {\n  name: 'RecommendationsDemo',\n  components: {\n    Recommendations,\n    BaseResultLink,\n    BaseResultAddToCart,\n  },\n}\n</script>\n```\n\n### Play with props\n\nIn this example, the component will render a maximum of 4 result recommendations, and will use the\n`StaggeredFadeAndSlide` animation for the results, smoothing the entrance.\n\n```vue live\n<template>\n  <Recommendations\n    #default=\"{ recommendation }\"\n    :maxItemsToRender=\"4\"\n    animation=\"StaggeredFadeAndSlide\"\n  >\n    <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n      <img :src=\"recommendation.images[0]\" class=\"x-recommendations__image\" />\n      <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n    </BaseResultLink>\n    <BaseResultAddToCart>Add to cart</BaseResultAddToCart>\n  </Recommendations>\n</template>\n<script>\nimport Vue from 'vue'\nimport { Recommendations } from '@empathyco/x-components/recommendations'\nimport { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components'\n\nVue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide)\nexport default {\n  name: 'RecommendationsDemo',\n  components: {\n    Recommendations,\n    BaseResultLink,\n    BaseResultAddToCart,\n  },\n}\n</script>\n```\n\n### Play with the layout\n\nIn this example you can build your own layout, and the `Recommendations` component will just act as\na provider of the result recommendations data. Using the component this way, and due to Vue 2\nlimitations you will only be allowed to render a single element inside the `layout` slot.\n\n```vue live\n<template>\n  <Recommendations #layout=\"{ recommendations }\">\n    <div class=\"x-recommendations\">\n      <article\n        class=\"x-recommendations-list\"\n        v-for=\"recommendation in recommendations\"\n        :key=\"recommendation.id\"\n      >\n        <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n          <img :src=\"recommendation.images[0]\" class=\"x-recommendations__image\" />\n          <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n        </BaseResultLink>\n        <BaseResultAddToCart>Add to cart</BaseResultAddToCart>\n      </article>\n    </div>\n  </Recommendations>\n</template>\n<script>\nimport { Recommendations } from '@empathyco/x-components/recommendations'\nimport { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components'\n\nexport default {\n  name: 'RecommendationsDemo',\n  components: {\n    Recommendations,\n    BaseResultLink,\n    BaseResultAddToCart,\n  },\n}\n</script>\n```\n</docs>\n"],"names":["animation","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_createCommentVNode"],"mappings":";;;;;AACE,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EADF,MAESA,EAAAA,MAAAA,EAAAA,KAAAA,EAAAA,QAAAA,EAAAA;SAFT,IAIY,CAAA,eAAA,CAAA,MAAA,IAAAC,SAAA,EAAA,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IACR,GAAA,EAAA,CAAA;AAAA,IACA,GAAK,EAAA,IAAA;AAAA,IAAA,WAAA,EAAA,iBAAA;AANT,IAAA,KAAA,EAAA,mBAAA;AAAA,GAAA,EAAA;;AAUY,OAAAF,SAAA,CAAA,IAAA,CAAA,EAAAG,kBAAA;AAAA,QAAiBC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,eAAA,EAAA,CAAA,cAAA,KAAA;AAClB,UAAA,OAAAL,SAAA,EAA0B,EAAAG,kBAAA,CAAA,IAAA,EAAA;AAAA,YAC/B,GAAU,EAAA,cAAA,CAAA,EAAA;AAAA,YAAA,KAAA,EAAA,yBAAA;YAMV,WAAyC,EAAA,qBAAA;AAAA,WAAA,EAAA;;;AAlB/C,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAG,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

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

@@ -11,8 +11,8 @@ import '../../../plugins/x-plugin.js';
 import 'vuex';
 import '@vueuse/core';
 import { useState } from '../../../composables/use-state.js';
-import { recommendationsXModule } from '../x-module.js';
 import { AnimationProp } from '../../../types/animation-prop.js';
+import { recommendationsXModule } from '../x-module.js';
 
 /**
  * It renders a list of recommendations from the
@@ -31,19 +31,17 @@ var _sfc_main = defineComponent({
         /** Animation component that will be used to animate the recommendations. */
         animation: {
             type: AnimationProp,
-            default: 'ul'
+            default: 'ul',
         },
         /** Number of recommendations to be rendered. */
-        maxItemsToRender: Number
+        maxItemsToRender: Number,
     },
     setup(props, { slots }) {
         /** The module's list of recommendations. */
-        const storedRecommendations = useState('recommendations', [
-            'recommendations'
-        ]).recommendations;
+        const storedRecommendations = useState('recommendations').recommendations;
         /** The additional events to be emitted by the mandatory {@link BaseResultLink} component. */
         provide('resultClickExtraEvents', [
-            'UserClickedARecommendation'
+            'UserClickedARecommendation',
         ]);
         /**
          * Slices the recommendations from the state.
@@ -65,15 +63,15 @@ var _sfc_main = defineComponent({
         function renderLayoutSlot() {
             const slotProps = {
                 animation: props.animation,
-                recommendations: recommendations.value
+                recommendations: recommendations.value,
             };
             return recommendations.value.length ? slots.layout?.(slotProps)[0] : '';
         }
         /* Hack to render through a render-function, the `layout` slot or, in its absence,
-         the component itself. It is the alternative for the NoElement antipattern. */
+           the component itself. It is the alternative for the NoElement antipattern. */
         const componentProps = { recommendations };
         return (slots.layout ? renderLayoutSlot : componentProps);
-    }
+    },
 });
 
 export { _sfc_main as default };

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

@@ -1 +1 @@
-{"version":3,"file":"recommendations.vue2.js","sources":["../../../../../src/x-modules/recommendations/components/recommendations.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"recommendations.length\"\n    tag=\"ul\"\n    data-test=\"recommendations\"\n    class=\"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</template>\n\n<script lang=\"ts\">\n  import { Result } from '@empathyco/x-types';\n  import { computed, defineComponent, provide, ComputedRef } from 'vue';\n  import { useState } from '../../../composables';\n  import { PropsWithType } from '../../../utils';\n  import { XEventsTypes } from '../../../wiring';\n  import { recommendationsXModule } from '../x-module';\n  import { AnimationProp } from '../../../types';\n\n  /**\n   * It renders a list of recommendations from the\n   * {@link RecommendationsState.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} component besides any other component.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'Recommendations',\n    xModule: recommendationsXModule.name,\n    props: {\n      /** Animation component that will be used to animate the recommendations. */\n      animation: {\n        type: AnimationProp,\n        default: 'ul'\n      },\n      /** Number of recommendations to be rendered. */\n      maxItemsToRender: Number\n    },\n    setup(props, { slots }) {\n      /** The module's list of recommendations. */\n      const storedRecommendations: ComputedRef<Result[]> = useState('recommendations', [\n        'recommendations'\n      ]).recommendations;\n\n      /** The additional events to be emitted by the mandatory {@link BaseResultLink} component. */\n      provide<PropsWithType<XEventsTypes, Result>[]>('resultClickExtraEvents', [\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      const recommendations = computed<Result[]>(() =>\n        storedRecommendations.value.slice(0, props.maxItemsToRender)\n      );\n\n      /**\n       * Render function to execute the `layout` slot, binding `slotsProps` and getting only the\n       * first `vNode` to avoid Fragments and Text root nodes.\n       * If there are no recommendations, nothing is rendered.\n       *\n       * @remarks `slotProps` must be values without Vue reactivity and located inside the\n       * render-function to update the binding data properly.\n       *\n       * @returns The root `vNode` of the `layout` slot or empty string if there are\n       * no recommendations.\n       */\n      function renderLayoutSlot() {\n        const slotProps = {\n          animation: props.animation,\n          recommendations: recommendations.value\n        };\n        return recommendations.value.length ? slots.layout?.(slotProps)[0] : '';\n      }\n\n      /* Hack to render through a render-function, the `layout` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n      const componentProps = { recommendations };\n      return (slots.layout ? renderLayoutSlot : componentProps) as typeof componentProps;\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-recommendations {\n    display: flex;\n    list-style-type: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events, but it makes components such as `BaseResultLink` emit additional\nevents:\n\n- [`UserClickedARecommendation`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the link of a recommendation.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Topclicked service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example on how the recommendations are rendered. You can customize how each\nresult is rendered by using the `default` slot. It is highly recommended to use base components such\nas the `BaseResultLink` or the `BaseResultAddToCart`, as they provides integration with other\nmodules such like the `tagging` one.\n\n```vue live\n<template>\n  <Recommendations #default=\"{ recommendation }\">\n    <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n      <img :src=\"recommendation.images[0]\" class=\"x-recommendations__image\" />\n      <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n    </BaseResultLink>\n    <BaseResultAddToCart>Add to cart</BaseResultAddToCart>\n  </Recommendations>\n</template>\n<script>\n  import { Recommendations } from '@empathyco/x-components/recommendations';\n  import { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components';\n\n  export default {\n    name: 'RecommendationsDemo',\n    components: {\n      Recommendations,\n      BaseResultLink,\n      BaseResultAddToCart\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the component will render a maximum of 4 result recommendations, and will use the\n`StaggeredFadeAndSlide` animation for the results, smoothing the entrance.\n\n```vue live\n<template>\n  <Recommendations\n    #default=\"{ recommendation }\"\n    :maxItemsToRender=\"4\"\n    animation=\"StaggeredFadeAndSlide\"\n  >\n    <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n      <img :src=\"recommendation.images[0]\" class=\"x-recommendations__image\" />\n      <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n    </BaseResultLink>\n    <BaseResultAddToCart>Add to cart</BaseResultAddToCart>\n  </Recommendations>\n</template>\n<script>\n  import Vue from 'vue';\n  import { Recommendations } from '@empathyco/x-components/recommendations';\n  import { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components';\n\n  Vue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide);\n  export default {\n    name: 'RecommendationsDemo',\n    components: {\n      Recommendations,\n      BaseResultLink,\n      BaseResultAddToCart\n    }\n  };\n</script>\n```\n\n### Play with the layout\n\nIn this example you can build your own layout, and the `Recommendations` component will just act as\na provider of the result recommendations data. Using the component this way, and due to Vue 2\nlimitations you will only be allowed to render a single element inside the `layout` slot.\n\n```vue live\n<template>\n  <Recommendations #layout=\"{ recommendations }\">\n    <div class=\"x-recommendations\">\n      <article\n        class=\"x-recommendations-list\"\n        v-for=\"recommendation in recommendations\"\n        :key=\"recommendation.id\"\n      >\n        <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n          <img :src=\"recommendation.images[0]\" class=\"x-recommendations__image\" />\n          <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n        </BaseResultLink>\n        <BaseResultAddToCart>Add to cart</BaseResultAddToCart>\n      </article>\n    </div>\n  </Recommendations>\n</template>\n<script>\n  import { Recommendations } from '@empathyco/x-components/recommendations';\n  import { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components';\n\n  export default {\n    name: 'RecommendationsDemo',\n    components: {\n      Recommendations,\n      BaseResultLink,\n      BaseResultAddToCart\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAgCE;;;;;;;;;AASE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,iBAAiB;IACvB,OAAO,EAAE,sBAAsB,CAAC,IAAI;AACpC,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAG;AACb,SAAA;;AAED,QAAA,gBAAgB,EAAE,MAAK;AACxB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;;AAEpB,QAAA,MAAM,qBAAqB,GAA0B,QAAQ,CAAC,iBAAiB,EAAE;YAC/E,iBAAgB;SACjB,CAAC,CAAC,eAAe,CAAA;;QAGlB,OAAO,CAAwC,wBAAwB,EAAE;YACvE,4BAA2B;AAC5B,SAAA,CAAC,CAAA;AAEF;;;;AAIE;QACF,MAAM,eAAgB,GAAE,QAAQ,CAAW,MACzC,qBAAqB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAA,CAC5D,CAAA;AAED;;;;;;;;;;AAUE;AACF,QAAA,SAAS,gBAAgB,GAAA;AACvB,YAAA,MAAM,YAAY;gBAChB,SAAS,EAAE,KAAK,CAAC,SAAS;gBAC1B,eAAe,EAAE,eAAe,CAAC,KAAI;aACtC,CAAA;YACD,OAAO,eAAe,CAAC,KAAK,CAAC,MAAO,GAAE,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC,CAAE,GAAE,EAAE,CAAA;SACzE;AAEA;AAC6E;AAC7E,QAAA,MAAM,cAAe,GAAE,EAAE,iBAAiB,CAAA;AAC1C,QAAA,QAAQ,KAAK,CAAC,MAAO,GAAE,gBAAiB,GAAE,cAAc,EAA0B;KACpF;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"recommendations.vue2.js","sources":["../../../../../src/x-modules/recommendations/components/recommendations.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"recommendations.length\"\n    tag=\"ul\"\n    data-test=\"recommendations\"\n    class=\"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</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropsWithType } from '../../../utils'\nimport type { XEventsTypes } from '../../../wiring'\nimport { computed, defineComponent, provide } from 'vue'\nimport { useState } from '../../../composables'\nimport { AnimationProp } from '../../../types'\nimport { recommendationsXModule } from '../x-module'\n\n/**\n * It renders a list of recommendations from the\n * {@link RecommendationsState.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} component besides any other component.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Recommendations',\n  xModule: recommendationsXModule.name,\n  props: {\n    /** Animation component that will be used to animate the recommendations. */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /** Number of recommendations to be rendered. */\n    maxItemsToRender: Number,\n  },\n  setup(props, { slots }) {\n    /** The module's list of recommendations. */\n    const storedRecommendations = useState('recommendations').recommendations\n\n    /** The additional events to be emitted by the mandatory {@link BaseResultLink} component. */\n    provide<PropsWithType<XEventsTypes, Result>[]>('resultClickExtraEvents', [\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    const recommendations = computed<Result[]>(() =>\n      storedRecommendations.value.slice(0, props.maxItemsToRender),\n    )\n\n    /**\n     * Render function to execute the `layout` slot, binding `slotsProps` and getting only the\n     * first `vNode` to avoid Fragments and Text root nodes.\n     * If there are no recommendations, nothing is rendered.\n     *\n     * @remarks `slotProps` must be values without Vue reactivity and located inside the\n     * render-function to update the binding data properly.\n     *\n     * @returns The root `vNode` of the `layout` slot or empty string if there are\n     * no recommendations.\n     */\n    function renderLayoutSlot() {\n      const slotProps = {\n        animation: props.animation,\n        recommendations: recommendations.value,\n      }\n      return recommendations.value.length ? slots.layout?.(slotProps)[0] : ''\n    }\n\n    /* Hack to render through a render-function, the `layout` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n    const componentProps = { recommendations }\n    return (slots.layout ? renderLayoutSlot : componentProps) as typeof componentProps\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-recommendations {\n  display: flex;\n  list-style-type: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events, but it makes components such as `BaseResultLink` emit additional\nevents:\n\n- [`UserClickedARecommendation`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the link of a recommendation.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Topclicked service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example on how the recommendations are rendered. You can customize how each\nresult is rendered by using the `default` slot. It is highly recommended to use base components such\nas the `BaseResultLink` or the `BaseResultAddToCart`, as they provides integration with other\nmodules such like the `tagging` one.\n\n```vue live\n<template>\n  <Recommendations #default=\"{ recommendation }\">\n    <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n      <img :src=\"recommendation.images[0]\" class=\"x-recommendations__image\" />\n      <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n    </BaseResultLink>\n    <BaseResultAddToCart>Add to cart</BaseResultAddToCart>\n  </Recommendations>\n</template>\n<script>\nimport { Recommendations } from '@empathyco/x-components/recommendations'\nimport { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components'\n\nexport default {\n  name: 'RecommendationsDemo',\n  components: {\n    Recommendations,\n    BaseResultLink,\n    BaseResultAddToCart,\n  },\n}\n</script>\n```\n\n### Play with props\n\nIn this example, the component will render a maximum of 4 result recommendations, and will use the\n`StaggeredFadeAndSlide` animation for the results, smoothing the entrance.\n\n```vue live\n<template>\n  <Recommendations\n    #default=\"{ recommendation }\"\n    :maxItemsToRender=\"4\"\n    animation=\"StaggeredFadeAndSlide\"\n  >\n    <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n      <img :src=\"recommendation.images[0]\" class=\"x-recommendations__image\" />\n      <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n    </BaseResultLink>\n    <BaseResultAddToCart>Add to cart</BaseResultAddToCart>\n  </Recommendations>\n</template>\n<script>\nimport Vue from 'vue'\nimport { Recommendations } from '@empathyco/x-components/recommendations'\nimport { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components'\n\nVue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide)\nexport default {\n  name: 'RecommendationsDemo',\n  components: {\n    Recommendations,\n    BaseResultLink,\n    BaseResultAddToCart,\n  },\n}\n</script>\n```\n\n### Play with the layout\n\nIn this example you can build your own layout, and the `Recommendations` component will just act as\na provider of the result recommendations data. Using the component this way, and due to Vue 2\nlimitations you will only be allowed to render a single element inside the `layout` slot.\n\n```vue live\n<template>\n  <Recommendations #layout=\"{ recommendations }\">\n    <div class=\"x-recommendations\">\n      <article\n        class=\"x-recommendations-list\"\n        v-for=\"recommendation in recommendations\"\n        :key=\"recommendation.id\"\n      >\n        <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n          <img :src=\"recommendation.images[0]\" class=\"x-recommendations__image\" />\n          <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n        </BaseResultLink>\n        <BaseResultAddToCart>Add to cart</BaseResultAddToCart>\n      </article>\n    </div>\n  </Recommendations>\n</template>\n<script>\nimport { Recommendations } from '@empathyco/x-components/recommendations'\nimport { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components'\n\nexport default {\n  name: 'RecommendationsDemo',\n  components: {\n    Recommendations,\n    BaseResultLink,\n    BaseResultAddToCart,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAgCA;;;;;;;;;AASE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,iBAAiB;IACvB,OAAO,EAAE,sBAAsB,CAAC,IAAI;AACpC,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;;AAED,QAAA,gBAAgB,EAAE,MAAM;AACzB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;;QAEpB,MAAM,qBAAsB,GAAE,QAAQ,CAAC,iBAAiB,CAAC,CAAC,eAAc,CAAA;;QAGxE,OAAO,CAAwC,wBAAwB,EAAE;YACvE,4BAA4B;AAC7B,SAAA,CAAA,CAAA;AAED;;;;AAIE;QACF,MAAM,eAAgB,GAAE,QAAQ,CAAW,MACzC,qBAAqB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAC9D,CAAA;AAEA;;;;;;;;;;AAUE;AACF,QAAA,SAAS,gBAAgB,GAAA;AACvB,YAAA,MAAM,YAAY;gBAChB,SAAS,EAAE,KAAK,CAAC,SAAS;gBAC1B,eAAe,EAAE,eAAe,CAAC,KAAK;aACxC,CAAA;YACA,OAAO,eAAe,CAAC,KAAK,CAAC,MAAK,GAAI,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC,CAAA,GAAI,EAAC,CAAA;SACxE;AAEA;AAC+E;AAC/E,QAAA,MAAM,cAAe,GAAE,EAAE,eAAgB,EAAA,CAAA;AACzC,QAAA,QAAQ,KAAK,CAAC,MAAK,GAAI,gBAAe,GAAI,cAAc,EAAyB;KAClF;AACF,CAAA,CAAA;;;;"}

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

@@ -1,13 +1,12 @@
 import { createFetchAndSaveActions } from '../../../../store/utils/fetch-and-save-action.utils.js';
 
-// eslint-disable-next-line max-len
 const { fetchAndSave, cancelPrevious } = createFetchAndSaveActions({
-    fetch({ dispatch }, request) {
+    async fetch({ dispatch }, request) {
         return dispatch('fetchRecommendations', request);
     },
     onSuccess({ commit }, recommendations) {
         commit('setRecommendations', recommendations);
-    }
+    },
 });
 /**
  * Default implementation for {@link RecommendationsActions.fetchAndSaveRecommendations}

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

@@ -1 +1 @@
-{"version":3,"file":"fetch-and-save-recommendations.action.js","sources":["../../../../../../src/x-modules/recommendations/store/actions/fetch-and-save-recommendations.action.ts"],"sourcesContent":["import { Result, RecommendationsRequest } from '@empathyco/x-types';\n// eslint-disable-next-line max-len\nimport { createFetchAndSaveActions } from '../../../../store/utils/fetch-and-save-action.utils';\nimport { RecommendationsActionContext } from '../types';\n\nconst { fetchAndSave, cancelPrevious } = createFetchAndSaveActions<\n  RecommendationsActionContext,\n  RecommendationsRequest | null,\n  Result[]\n>({\n  fetch({ dispatch }, request) {\n    return dispatch('fetchRecommendations', request);\n  },\n  onSuccess({ commit }, recommendations) {\n    commit('setRecommendations', recommendations);\n  }\n});\n\n/**\n * Default implementation for {@link RecommendationsActions.fetchAndSaveRecommendations}\n * action.\n *\n * @public\n */\nexport const fetchAndSaveRecommendations = fetchAndSave;\n\n/**\n * Default implementation for {@link RecommendationsActions.cancelFetchAndSaveRecommendations}\n * action.\n *\n * @public\n */\nexport const cancelFetchAndSaveRecommendations = cancelPrevious;\n"],"names":[],"mappings":";;AACA;AAIA,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,GAAG,yBAAyB,CAIhE;AACA,IAAA,KAAK,CAAC,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAA;AACzB,QAAA,OAAO,QAAQ,CAAC,sBAAsB,EAAE,OAAO,CAAC,CAAC;KAClD;AACD,IAAA,SAAS,CAAC,EAAE,MAAM,EAAE,EAAE,eAAe,EAAA;AACnC,QAAA,MAAM,CAAC,oBAAoB,EAAE,eAAe,CAAC,CAAC;KAC/C;AACF,CAAA,CAAC,CAAC;AAEH;;;;;AAKG;AACI,MAAM,2BAA2B,GAAG,aAAa;AAExD;;;;;AAKG;AACI,MAAM,iCAAiC,GAAG;;;;"}
+{"version":3,"file":"fetch-and-save-recommendations.action.js","sources":["../../../../../../src/x-modules/recommendations/store/actions/fetch-and-save-recommendations.action.ts"],"sourcesContent":["import type { RecommendationsRequest, Result } from '@empathyco/x-types'\n\nimport type { RecommendationsActionContext } from '../types'\nimport { createFetchAndSaveActions } from '../../../../store/utils/fetch-and-save-action.utils'\n\nconst { fetchAndSave, cancelPrevious } = createFetchAndSaveActions<\n  RecommendationsActionContext,\n  RecommendationsRequest | null,\n  Result[]\n>({\n  async fetch({ dispatch }, request) {\n    return dispatch('fetchRecommendations', request)\n  },\n  onSuccess({ commit }, recommendations) {\n    commit('setRecommendations', recommendations)\n  },\n})\n\n/**\n * Default implementation for {@link RecommendationsActions.fetchAndSaveRecommendations}\n * action.\n *\n * @public\n */\nexport const fetchAndSaveRecommendations = fetchAndSave\n\n/**\n * Default implementation for {@link RecommendationsActions.cancelFetchAndSaveRecommendations}\n * action.\n *\n * @public\n */\nexport const cancelFetchAndSaveRecommendations = cancelPrevious\n"],"names":[],"mappings":";;AAKA,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,GAAG,yBAAyB,CAIhE;AACA,IAAA,MAAM,KAAK,CAAC,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAA;AAC/B,QAAA,OAAO,QAAQ,CAAC,sBAAsB,EAAE,OAAO,CAAC,CAAA;KACjD;AACD,IAAA,SAAS,CAAC,EAAE,MAAM,EAAE,EAAE,eAAe,EAAA;AACnC,QAAA,MAAM,CAAC,oBAAoB,EAAE,eAAe,CAAC,CAAA;KAC9C;AACF,CAAA,CAAC,CAAA;AAEF;;;;;AAKG;AACI,MAAM,2BAA2B,GAAG,aAAY;AAEvD;;;;;AAKG;AACI,MAAM,iCAAiC,GAAG;;;;"}

package/js/x-modules/recommendations/store/actions/fetch-recommendations.action.js

@@ -17,7 +17,7 @@ import { XPlugin } from '../../../../plugins/x-plugin.js';
  *
  * @public
  */
-const fetchRecommendations = (_context, request) => {
+const fetchRecommendations = async (_context, request) => {
     return request ? XPlugin.adapter.recommendations(request).then(({ results }) => results) : [];
 };
 

package/js/x-modules/recommendations/store/actions/fetch-recommendations.action.js.map

@@ -1 +1 @@
-{"version":3,"file":"fetch-recommendations.action.js","sources":["../../../../../../src/x-modules/recommendations/store/actions/fetch-recommendations.action.ts"],"sourcesContent":["import { XPlugin } from '../../../../plugins';\nimport { RecommendationsXStoreModule } from '../types';\n\n/**\n * Default implementation for the {@link RecommendationsActions.fetchRecommendations}.\n *\n * @param _context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the actions,\n * provided by Vuex.\n * @param request - The recommendations request to make.\n * @returns A `void` promise that resolves when it fetches recommendations.\n *\n * @public\n */\nexport const fetchRecommendations: RecommendationsXStoreModule['actions']['fetchRecommendations'] =\n  (_context, request) => {\n    return request ? XPlugin.adapter.recommendations(request).then(({ results }) => results) : [];\n  };\n"],"names":[],"mappings":";;;;;;;;;AAGA;;;;;;;;;AASG;MACU,oBAAoB,GAC/B,CAAC,QAAQ,EAAE,OAAO,KAAI;AACpB,IAAA,OAAO,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,OAAO,CAAC,GAAG,EAAE,CAAC;AAChG;;;;"}
+{"version":3,"file":"fetch-recommendations.action.js","sources":["../../../../../../src/x-modules/recommendations/store/actions/fetch-recommendations.action.ts"],"sourcesContent":["import type { RecommendationsXStoreModule } from '../types'\nimport { XPlugin } from '../../../../plugins'\n\n/**\n * Default implementation for the {@link RecommendationsActions.fetchRecommendations}.\n *\n * @param _context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the actions,\n * provided by Vuex.\n * @param request - The recommendations request to make.\n * @returns A `void` promise that resolves when it fetches recommendations.\n *\n * @public\n */\nexport const fetchRecommendations: RecommendationsXStoreModule['actions']['fetchRecommendations'] =\n  async (_context, request) => {\n    return request ? XPlugin.adapter.recommendations(request).then(({ results }) => results) : []\n  }\n"],"names":[],"mappings":";;;;;;;;;AAGA;;;;;;;;;AASG;AACU,MAAA,oBAAoB,GAC/B,OAAO,QAAQ,EAAE,OAAO,KAAI;AAC1B,IAAA,OAAO,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,OAAO,CAAC,GAAG,EAAE,CAAA;AAC/F;;;;"}

package/js/x-modules/recommendations/store/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../../../src/x-modules/recommendations/store/constants.ts"],"sourcesContent":["/**\n * Constant for the recommendations request.\n *\n * @public\n */\nexport const RECOMMENDATIONS_ORIGIN = 'default';\n"],"names":[],"mappings":"AAAA;;;;AAIG;AACI,MAAM,sBAAsB,GAAG;;;;"}
+{"version":3,"file":"constants.js","sources":["../../../../../src/x-modules/recommendations/store/constants.ts"],"sourcesContent":["/**\n * Constant for the recommendations request.\n *\n * @public\n */\nexport const RECOMMENDATIONS_ORIGIN = 'default'\n"],"names":[],"mappings":"AAAA;;;;AAIG;AACI,MAAM,sBAAsB,GAAG;;;;"}

package/js/x-modules/recommendations/store/emitters.js

@@ -1,3 +1,4 @@
+import '@empathyco/x-utils';
 import { createStoreEmitters } from '../../../store/utils/store-emitters.utils.js';
 import { recommendationsXStoreModule } from './module.js';
 
@@ -9,8 +10,8 @@ import { recommendationsXStoreModule } from './module.js';
 const recommendationsEmitters = createStoreEmitters(recommendationsXStoreModule, {
     RecommendationsChanged: state => state.recommendations,
     RecommendationsRequestUpdated: {
-        selector: (_, getters) => getters.request
-    }
+        selector: (_, getters) => getters.request,
+    },
 });
 
 export { recommendationsEmitters };

package/js/x-modules/recommendations/store/emitters.js.map

@@ -1 +1 @@
-{"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/recommendations/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store';\nimport { recommendationsXStoreModule } from './module';\n/**\n * {@link StoreEmitters} For the recommendations module.\n *\n * @internal\n */\nexport const recommendationsEmitters = createStoreEmitters(recommendationsXStoreModule, {\n  RecommendationsChanged: state => state.recommendations,\n  RecommendationsRequestUpdated: {\n    selector: (_, getters) => getters.request\n  }\n});\n"],"names":[],"mappings":";;;AAEA;;;;AAIG;AACU,MAAA,uBAAuB,GAAG,mBAAmB,CAAC,2BAA2B,EAAE;AACtF,IAAA,sBAAsB,EAAE,KAAK,IAAI,KAAK,CAAC,eAAe;AACtD,IAAA,6BAA6B,EAAE;QAC7B,QAAQ,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,OAAO;AAC1C,KAAA;AACF,CAAA;;;;"}
+{"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/recommendations/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store'\nimport { recommendationsXStoreModule } from './module'\n/**\n * {@link StoreEmitters} For the recommendations module.\n *\n * @internal\n */\nexport const recommendationsEmitters = createStoreEmitters(recommendationsXStoreModule, {\n  RecommendationsChanged: state => state.recommendations,\n  RecommendationsRequestUpdated: {\n    selector: (_, getters) => getters.request,\n  },\n})\n"],"names":[],"mappings":";;;;AAEA;;;;AAIG;AACU,MAAA,uBAAuB,GAAG,mBAAmB,CAAC,2BAA2B,EAAE;AACtF,IAAA,sBAAsB,EAAE,KAAK,IAAI,KAAK,CAAC,eAAe;AACtD,IAAA,6BAA6B,EAAE;QAC7B,QAAQ,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,OAAO;AAC1C,KAAA;AACF,CAAA;;;;"}

package/js/x-modules/recommendations/store/getters/request.getter.js

@@ -7,12 +7,12 @@
  *
  * @public
  */
-const request = ({ origin, config, params }) => {
+const request = ({ origin, config, params, }) => {
     return {
         rows: config.maxItemsToRequest,
         start: 0,
         origin,
-        extraParams: params
+        extraParams: params,
     };
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"request.getter.js","sources":["../../../../../../src/x-modules/recommendations/store/getters/request.getter.ts"],"sourcesContent":["import { RecommendationsXStoreModule } from '../types';\n\n/**\n * Default implementation for the {@link RecommendationsGetters.request} getter.\n *\n * @param state - Current {@link https://vuex.vuejs.org/guide/state.html | state} of the query\n * suggestions module.\n * @returns The recommendations request to fetch data from the API.\n *\n * @public\n */\nexport const request: RecommendationsXStoreModule['getters']['request'] = ({\n  origin,\n  config,\n  params\n}) => {\n  return {\n    rows: config.maxItemsToRequest,\n    start: 0,\n    origin,\n    extraParams: params\n  };\n};\n"],"names":[],"mappings":"AAEA;;;;;;;;AAQG;AACI,MAAM,OAAO,GAAsD,CAAC,EACzE,MAAM,EACN,MAAM,EACN,MAAM,EACP,KAAI;IACH,OAAO;QACL,IAAI,EAAE,MAAM,CAAC,iBAAiB;AAC9B,QAAA,KAAK,EAAE,CAAC;QACR,MAAM;AACN,QAAA,WAAW,EAAE,MAAM;KACpB,CAAC;AACJ;;;;"}
+{"version":3,"file":"request.getter.js","sources":["../../../../../../src/x-modules/recommendations/store/getters/request.getter.ts"],"sourcesContent":["import type { RecommendationsXStoreModule } from '../types'\n\n/**\n * Default implementation for the {@link RecommendationsGetters.request} getter.\n *\n * @param state - Current {@link https://vuex.vuejs.org/guide/state.html | state} of the query\n * suggestions module.\n * @returns The recommendations request to fetch data from the API.\n *\n * @public\n */\nexport const request: RecommendationsXStoreModule['getters']['request'] = ({\n  origin,\n  config,\n  params,\n}) => {\n  return {\n    rows: config.maxItemsToRequest,\n    start: 0,\n    origin,\n    extraParams: params,\n  }\n}\n"],"names":[],"mappings":"AAEA;;;;;;;;AAQG;AACI,MAAM,OAAO,GAAsD,CAAC,EACzE,MAAM,EACN,MAAM,EACN,MAAM,GACP,KAAI;IACH,OAAO;QACL,IAAI,EAAE,MAAM,CAAC,iBAAiB;AAC9B,QAAA,KAAK,EAAE,CAAC;QACR,MAAM;AACN,QAAA,WAAW,EAAE,MAAM;KACpB,CAAA;AACH;;;;"}

package/js/x-modules/recommendations/store/module.js

@@ -1,5 +1,5 @@
-import { setStatus } from '../../../store/utils/status-store.utils.js';
 import { setConfig, mergeConfig } from '../../../store/utils/config-store.utils.js';
+import { setStatus } from '../../../store/utils/status-store.utils.js';
 import { cancelFetchAndSaveRecommendations, fetchAndSaveRecommendations } from './actions/fetch-and-save-recommendations.action.js';
 import { fetchRecommendations } from './actions/fetch-recommendations.action.js';
 import { RECOMMENDATIONS_ORIGIN } from './constants.js';
@@ -13,15 +13,15 @@ import { request } from './getters/request.getter.js';
 const recommendationsXStoreModule = {
     state: () => ({
         config: {
-            maxItemsToRequest: 24
+            maxItemsToRequest: 24,
         },
         origin: RECOMMENDATIONS_ORIGIN,
         status: 'initial',
         recommendations: [],
-        params: {}
+        params: {},
     }),
     getters: {
-        request
+        request,
     },
     mutations: {
         setRecommendations(state, recommendations) {
@@ -38,13 +38,13 @@ const recommendationsXStoreModule = {
             }
         },
         setConfig,
-        mergeConfig
+        mergeConfig,
     },
     actions: {
         cancelFetchAndSaveRecommendations,
         fetchRecommendations,
-        fetchAndSaveRecommendations
-    }
+        fetchAndSaveRecommendations,
+    },
 };
 
 export { recommendationsXStoreModule };

package/js/x-modules/recommendations/store/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/recommendations/store/module.ts"],"sourcesContent":["import { setStatus } from '../../../store/utils/status-store.utils';\nimport { mergeConfig, setConfig } from '../../../store/utils/config-store.utils';\nimport {\n  cancelFetchAndSaveRecommendations,\n  fetchAndSaveRecommendations\n} from './actions/fetch-and-save-recommendations.action';\nimport { fetchRecommendations } from './actions/fetch-recommendations.action';\nimport { RECOMMENDATIONS_ORIGIN } from './constants';\nimport { request } from './getters/request.getter';\nimport { RecommendationsXStoreModule } from './types';\n\n/**\n * {@link XStoreModule} For the recommendations module.\n *\n * @internal\n */\nexport const recommendationsXStoreModule: RecommendationsXStoreModule = {\n  state: () => ({\n    config: {\n      maxItemsToRequest: 24\n    },\n    origin: RECOMMENDATIONS_ORIGIN,\n    status: 'initial',\n    recommendations: [],\n    params: {}\n  }),\n  getters: {\n    request\n  },\n  mutations: {\n    setRecommendations(state, recommendations) {\n      state.recommendations = recommendations;\n    },\n    setStatus,\n    setParams(state, params) {\n      state.params = params;\n    },\n    updateRecommendation(state, recommendation) {\n      const stateRecommendation = state.recommendations.find(\n        stateRecommendation => recommendation.id === stateRecommendation.id\n      );\n      if (stateRecommendation) {\n        Object.assign(stateRecommendation, recommendation);\n      }\n    },\n    setConfig,\n    mergeConfig\n  },\n  actions: {\n    cancelFetchAndSaveRecommendations,\n    fetchRecommendations,\n    fetchAndSaveRecommendations\n  }\n};\n"],"names":[],"mappings":";;;;;;;AAWA;;;;AAIG;AACU,MAAA,2BAA2B,GAAgC;AACtE,IAAA,KAAK,EAAE,OAAO;AACZ,QAAA,MAAM,EAAE;AACN,YAAA,iBAAiB,EAAE,EAAE;AACtB,SAAA;AACD,QAAA,MAAM,EAAE,sBAAsB;AAC9B,QAAA,MAAM,EAAE,SAAS;AACjB,QAAA,eAAe,EAAE,EAAE;AACnB,QAAA,MAAM,EAAE,EAAE;KACX,CAAC;AACF,IAAA,OAAO,EAAE;QACP,OAAO;AACR,KAAA;AACD,IAAA,SAAS,EAAE;QACT,kBAAkB,CAAC,KAAK,EAAE,eAAe,EAAA;AACvC,YAAA,KAAK,CAAC,eAAe,GAAG,eAAe,CAAC;SACzC;QACD,SAAS;QACT,SAAS,CAAC,KAAK,EAAE,MAAM,EAAA;AACrB,YAAA,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;SACvB;QACD,oBAAoB,CAAC,KAAK,EAAE,cAAc,EAAA;YACxC,MAAM,mBAAmB,GAAG,KAAK,CAAC,eAAe,CAAC,IAAI,CACpD,mBAAmB,IAAI,cAAc,CAAC,EAAE,KAAK,mBAAmB,CAAC,EAAE,CACpE,CAAC;AACF,YAAA,IAAI,mBAAmB,EAAE;AACvB,gBAAA,MAAM,CAAC,MAAM,CAAC,mBAAmB,EAAE,cAAc,CAAC,CAAC;AACpD,aAAA;SACF;QACD,SAAS;QACT,WAAW;AACZ,KAAA;AACD,IAAA,OAAO,EAAE;QACP,iCAAiC;QACjC,oBAAoB;QACpB,2BAA2B;AAC5B,KAAA;;;;;"}
+{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/recommendations/store/module.ts"],"sourcesContent":["import type { RecommendationsXStoreModule } from './types'\nimport { mergeConfig, setConfig } from '../../../store/utils/config-store.utils'\nimport { setStatus } from '../../../store/utils/status-store.utils'\nimport {\n  cancelFetchAndSaveRecommendations,\n  fetchAndSaveRecommendations,\n} from './actions/fetch-and-save-recommendations.action'\nimport { fetchRecommendations } from './actions/fetch-recommendations.action'\nimport { RECOMMENDATIONS_ORIGIN } from './constants'\nimport { request } from './getters/request.getter'\n\n/**\n * {@link XStoreModule} For the recommendations module.\n *\n * @internal\n */\nexport const recommendationsXStoreModule: RecommendationsXStoreModule = {\n  state: () => ({\n    config: {\n      maxItemsToRequest: 24,\n    },\n    origin: RECOMMENDATIONS_ORIGIN,\n    status: 'initial',\n    recommendations: [],\n    params: {},\n  }),\n  getters: {\n    request,\n  },\n  mutations: {\n    setRecommendations(state, recommendations) {\n      state.recommendations = recommendations\n    },\n    setStatus,\n    setParams(state, params) {\n      state.params = params\n    },\n    updateRecommendation(state, recommendation) {\n      const stateRecommendation = state.recommendations.find(\n        stateRecommendation => recommendation.id === stateRecommendation.id,\n      )\n      if (stateRecommendation) {\n        Object.assign(stateRecommendation, recommendation)\n      }\n    },\n    setConfig,\n    mergeConfig,\n  },\n  actions: {\n    cancelFetchAndSaveRecommendations,\n    fetchRecommendations,\n    fetchAndSaveRecommendations,\n  },\n}\n"],"names":[],"mappings":";;;;;;;AAWA;;;;AAIG;AACU,MAAA,2BAA2B,GAAgC;AACtE,IAAA,KAAK,EAAE,OAAO;AACZ,QAAA,MAAM,EAAE;AACN,YAAA,iBAAiB,EAAE,EAAE;AACtB,SAAA;AACD,QAAA,MAAM,EAAE,sBAAsB;AAC9B,QAAA,MAAM,EAAE,SAAS;AACjB,QAAA,eAAe,EAAE,EAAE;AACnB,QAAA,MAAM,EAAE,EAAE;KACX,CAAC;AACF,IAAA,OAAO,EAAE;QACP,OAAO;AACR,KAAA;AACD,IAAA,SAAS,EAAE;QACT,kBAAkB,CAAC,KAAK,EAAE,eAAe,EAAA;AACvC,YAAA,KAAK,CAAC,eAAe,GAAG,eAAe,CAAA;SACxC;QACD,SAAS;QACT,SAAS,CAAC,KAAK,EAAE,MAAM,EAAA;AACrB,YAAA,KAAK,CAAC,MAAM,GAAG,MAAM,CAAA;SACtB;QACD,oBAAoB,CAAC,KAAK,EAAE,cAAc,EAAA;YACxC,MAAM,mBAAmB,GAAG,KAAK,CAAC,eAAe,CAAC,IAAI,CACpD,mBAAmB,IAAI,cAAc,CAAC,EAAE,KAAK,mBAAmB,CAAC,EAAE,CACpE,CAAA;AACD,YAAA,IAAI,mBAAmB,EAAE;AACvB,gBAAA,MAAM,CAAC,MAAM,CAAC,mBAAmB,EAAE,cAAc,CAAC,CAAA;AACnD,aAAA;SACF;QACD,SAAS;QACT,WAAW;AACZ,KAAA;AACD,IAAA,OAAO,EAAE;QACP,iCAAiC;QACjC,oBAAoB;QACpB,2BAA2B;AAC5B,KAAA;;;;;"}

package/js/x-modules/recommendations/wiring.js

@@ -38,12 +38,12 @@ const setRecommendationsExtraParams = wireCommit('setParams');
  */
 const recommendationsWiring = createWiring({
     RecommendationsRequestUpdated: {
-        fetchAndSaveRecommendations
+        fetchAndSaveRecommendations,
     },
     UserClickedColumnPicker: {},
     ExtraParamsChanged: {
-        setRecommendationsExtraParams
-    }
+        setRecommendationsExtraParams,
+    },
 });
 
 export { recommendationsWiring, setRecommendationsExtraParams };