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

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

@@ -1 +1 @@
-{"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/identifier-results/wiring.ts"],"sourcesContent":["import {\n  namespacedWireCommit,\n  namespacedWireDispatch,\n  namespacedWireDispatchWithoutPayload\n} from '../../wiring/namespaced-wires.factory';\nimport { namespacedDebounce } from '../../wiring/namespaced-wires.operators';\nimport { NamespacedWireCommit, NamespacedWireDispatch } from '../../wiring/namespaced-wiring.types';\nimport { createWiring } from '../../wiring/wiring.utils';\n\n/**\n * `identifierResults` {@link XModuleName | XModule name}.\n *\n * @internal\n */\nconst moduleName = 'identifierResults';\n/**\n * WireCommit for {@link IdentifierResultsXModule}.\n *\n * @internal\n */\nconst wireCommit: NamespacedWireCommit<typeof moduleName> = namespacedWireCommit(moduleName);\n/**\n * WireDispatch for {@link IdentifierResultsXModule}.\n *\n * @internal\n */\nconst wireDispatch: NamespacedWireDispatch<typeof moduleName> = namespacedWireDispatch(moduleName);\n/**\n * WireDispatchWithoutPayload for {@link IdentifierResultsXModule}.\n *\n * @internal\n */\nconst wireDispatchWithoutPayload = namespacedWireDispatchWithoutPayload(moduleName);\n\n/**\n * Sets the identifier-results module query.\n *\n * @public\n */\nexport const setIdentifierResultsQuery = wireDispatch('saveQuery');\n\n/**\n * Sets the identifier-results module query from a selectedQueryPreview's query.\n *\n * @public\n */\nexport const setIdentifierResultsQueryFromPreview = wireDispatch(\n  'saveQuery',\n  ({ eventPayload: { query } }) => query\n);\n\n/**\n * Clears the identifier-results module query.\n *\n * @public\n */\nexport const clearIdentifierResultsQuery = wireCommit('setQuery', '');\n\n/**\n * Sets the identifier results state `query` from url.\n *\n * @public\n */\nconst setUrlParams = wireDispatch('saveQuery', ({ eventPayload: { query } }) => query);\n\n/**\n * Requests and stores a new set of identifier results for the query.\n *\n * @public\n */\nexport const fetchAndSaveIdentifierResultsWire = wireDispatch('fetchAndSaveIdentifierResults');\n\n/**\n * Cancels the {@link IdentifierResultsActions.fetchAndSaveIdentifierResults} request promise.\n *\n * @public\n */\nexport const cancelFetchAndSaveIdentifierResultsWire = wireDispatchWithoutPayload(\n  'cancelFetchAndSaveIdentifierResults'\n);\n\n/**\n * Sets the identifier results state `origin`.\n *\n * @public\n */\nexport const saveIdentifierResultsOriginWire = wireDispatch(\n  'saveOrigin',\n  ({ metadata }) => metadata\n);\n\n/**\n * Sets the identifier result state `params`.\n *\n * @public\n */\nexport const setIdentifierResultsExtraParams = wireCommit('setParams');\n\n/**\n * Debounce function for the module.\n */\nconst moduleDebounce = namespacedDebounce(moduleName);\n\n/**\n * Default wiring for the {@link IdentifierResultsXModule} module.\n *\n * @internal\n */\nexport const identifierResultsWiring = createWiring({\n  ParamsLoadedFromUrl: {\n    setUrlParams,\n    saveIdentifierResultsOriginWire\n  },\n  UserIsTypingAQuery: {\n    setIdentifierResultsQueryDebounce: moduleDebounce(\n      setIdentifierResultsQuery,\n      ({ state }) => state.config.debounceInMs,\n      { cancelOn: 'UserAcceptedAQuery' }\n    )\n  },\n  UserAcceptedAQuery: {\n    setIdentifierResultsQuery,\n    saveIdentifierResultsOriginWire\n  },\n  UserClearedQuery: {\n    clearIdentifierResultsQuery,\n    cancelFetchAndSaveIdentifierResultsWire\n  },\n  IdentifierResultsRequestUpdated: {\n    fetchAndSaveIdentifierResultsWire\n  },\n  ExtraParamsChanged: {\n    setIdentifierResultsExtraParams\n  },\n  UserClickedCloseX: {\n    clearIdentifierResultsQuery\n  },\n  UserClickedOutOfMainModal: {\n    clearIdentifierResultsQuery\n  },\n  UserAcceptedAQueryPreview: {\n    setIdentifierResultsQueryFromPreview,\n    saveIdentifierResultsOriginWire\n  }\n});\n"],"names":[],"mappings":";;;;AASA;;;;AAIG;AACH,MAAM,UAAU,GAAG,mBAAmB,CAAC;AACvC;;;;AAIG;AACH,MAAM,UAAU,GAA4C,oBAAoB,CAAC,UAAU,CAAC,CAAC;AAC7F;;;;AAIG;AACH,MAAM,YAAY,GAA8C,sBAAsB,CAAC,UAAU,CAAC,CAAC;AACnG;;;;AAIG;AACH,MAAM,0BAA0B,GAAG,oCAAoC,CAAC,UAAU,CAAC,CAAC;AAEpF;;;;AAIG;MACU,yBAAyB,GAAG,YAAY,CAAC,WAAW,EAAE;AAEnE;;;;AAIG;MACU,oCAAoC,GAAG,YAAY,CAC9D,WAAW,EACX,CAAC,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,KAAK,EACtC;AAEF;;;;AAIG;AACU,MAAA,2BAA2B,GAAG,UAAU,CAAC,UAAU,EAAE,EAAE,EAAE;AAEtE;;;;AAIG;AACH,MAAM,YAAY,GAAG,YAAY,CAAC,WAAW,EAAE,CAAC,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,KAAK,CAAC,CAAC;AAEvF;;;;AAIG;MACU,iCAAiC,GAAG,YAAY,CAAC,+BAA+B,EAAE;AAE/F;;;;AAIG;MACU,uCAAuC,GAAG,0BAA0B,CAC/E,qCAAqC,EACrC;AAEF;;;;AAIG;AACU,MAAA,+BAA+B,GAAG,YAAY,CACzD,YAAY,EACZ,CAAC,EAAE,QAAQ,EAAE,KAAK,QAAQ,EAC1B;AAEF;;;;AAIG;MACU,+BAA+B,GAAG,UAAU,CAAC,WAAW,EAAE;AAEvE;;AAEG;AACH,MAAM,cAAc,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC;AAEtD;;;;AAIG;AACI,MAAM,uBAAuB,GAAG,YAAY,CAAC;AAClD,IAAA,mBAAmB,EAAE;QACnB,YAAY;QACZ,+BAA+B;AAChC,KAAA;AACD,IAAA,kBAAkB,EAAE;QAClB,iCAAiC,EAAE,cAAc,CAC/C,yBAAyB,EACzB,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,YAAY,EACxC,EAAE,QAAQ,EAAE,oBAAoB,EAAE,CACnC;AACF,KAAA;AACD,IAAA,kBAAkB,EAAE;QAClB,yBAAyB;QACzB,+BAA+B;AAChC,KAAA;AACD,IAAA,gBAAgB,EAAE;QAChB,2BAA2B;QAC3B,uCAAuC;AACxC,KAAA;AACD,IAAA,+BAA+B,EAAE;QAC/B,iCAAiC;AAClC,KAAA;AACD,IAAA,kBAAkB,EAAE;QAClB,+BAA+B;AAChC,KAAA;AACD,IAAA,iBAAiB,EAAE;QACjB,2BAA2B;AAC5B,KAAA;AACD,IAAA,yBAAyB,EAAE;QACzB,2BAA2B;AAC5B,KAAA;AACD,IAAA,yBAAyB,EAAE;QACzB,oCAAoC;QACpC,+BAA+B;AAChC,KAAA;AACF,CAAA;;;;"}
+{"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/identifier-results/wiring.ts"],"sourcesContent":["import type {\n  NamespacedWireCommit,\n  NamespacedWireDispatch,\n} 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 * `identifierResults` {@link XModuleName | XModule name}.\n *\n * @internal\n */\nconst moduleName = 'identifierResults'\n/**\n * WireCommit for {@link IdentifierResultsXModule}.\n *\n * @internal\n */\nconst wireCommit: NamespacedWireCommit<typeof moduleName> = namespacedWireCommit(moduleName)\n/**\n * WireDispatch for {@link IdentifierResultsXModule}.\n *\n * @internal\n */\nconst wireDispatch: NamespacedWireDispatch<typeof moduleName> = namespacedWireDispatch(moduleName)\n/**\n * WireDispatchWithoutPayload for {@link IdentifierResultsXModule}.\n *\n * @internal\n */\nconst wireDispatchWithoutPayload = namespacedWireDispatchWithoutPayload(moduleName)\n\n/**\n * Sets the identifier-results module query.\n *\n * @public\n */\nexport const setIdentifierResultsQuery = wireDispatch('saveQuery')\n\n/**\n * Sets the identifier-results module query from a selectedQueryPreview's query.\n *\n * @public\n */\nexport const setIdentifierResultsQueryFromPreview = wireDispatch(\n  'saveQuery',\n  ({ eventPayload: { query } }) => query,\n)\n\n/**\n * Clears the identifier-results module query.\n *\n * @public\n */\nexport const clearIdentifierResultsQuery = wireCommit('setQuery', '')\n\n/**\n * Sets the identifier results state `query` from url.\n *\n * @public\n */\nconst setUrlParams = wireDispatch('saveQuery', ({ eventPayload: { query } }) => query)\n\n/**\n * Requests and stores a new set of identifier results for the query.\n *\n * @public\n */\nexport const fetchAndSaveIdentifierResultsWire = wireDispatch('fetchAndSaveIdentifierResults')\n\n/**\n * Cancels the {@link IdentifierResultsActions.fetchAndSaveIdentifierResults} request promise.\n *\n * @public\n */\nexport const cancelFetchAndSaveIdentifierResultsWire = wireDispatchWithoutPayload(\n  'cancelFetchAndSaveIdentifierResults',\n)\n\n/**\n * Sets the identifier results state `origin`.\n *\n * @public\n */\nexport const saveIdentifierResultsOriginWire = wireDispatch(\n  'saveOrigin',\n  ({ metadata }) => metadata,\n)\n\n/**\n * Sets the identifier result state `params`.\n *\n * @public\n */\nexport const setIdentifierResultsExtraParams = wireCommit('setParams')\n\n/**\n * Debounce function for the module.\n */\nconst moduleDebounce = namespacedDebounce(moduleName)\n\n/**\n * Default wiring for the {@link IdentifierResultsXModule} module.\n *\n * @internal\n */\nexport const identifierResultsWiring = createWiring({\n  ParamsLoadedFromUrl: {\n    setUrlParams,\n    saveIdentifierResultsOriginWire,\n  },\n  UserIsTypingAQuery: {\n    setIdentifierResultsQueryDebounce: moduleDebounce(\n      setIdentifierResultsQuery,\n      ({ state }) => state.config.debounceInMs,\n      { cancelOn: 'UserAcceptedAQuery' },\n    ),\n  },\n  UserAcceptedAQuery: {\n    setIdentifierResultsQuery,\n    saveIdentifierResultsOriginWire,\n  },\n  UserClearedQuery: {\n    clearIdentifierResultsQuery,\n    cancelFetchAndSaveIdentifierResultsWire,\n  },\n  IdentifierResultsRequestUpdated: {\n    fetchAndSaveIdentifierResultsWire,\n  },\n  ExtraParamsChanged: {\n    setIdentifierResultsExtraParams,\n  },\n  UserClickedCloseX: {\n    clearIdentifierResultsQuery,\n  },\n  UserClickedOutOfMainModal: {\n    clearIdentifierResultsQuery,\n  },\n  UserAcceptedAQueryPreview: {\n    setIdentifierResultsQueryFromPreview,\n    saveIdentifierResultsOriginWire,\n  },\n})\n"],"names":[],"mappings":";;;;AAYA;;;;AAIG;AACH,MAAM,UAAU,GAAG,mBAAmB,CAAA;AACtC;;;;AAIG;AACH,MAAM,UAAU,GAA4C,oBAAoB,CAAC,UAAU,CAAC,CAAA;AAC5F;;;;AAIG;AACH,MAAM,YAAY,GAA8C,sBAAsB,CAAC,UAAU,CAAC,CAAA;AAClG;;;;AAIG;AACH,MAAM,0BAA0B,GAAG,oCAAoC,CAAC,UAAU,CAAC,CAAA;AAEnF;;;;AAIG;MACU,yBAAyB,GAAG,YAAY,CAAC,WAAW,EAAC;AAElE;;;;AAIG;MACU,oCAAoC,GAAG,YAAY,CAC9D,WAAW,EACX,CAAC,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,KAAK,EACvC;AAED;;;;AAIG;AACU,MAAA,2BAA2B,GAAG,UAAU,CAAC,UAAU,EAAE,EAAE,EAAC;AAErE;;;;AAIG;AACH,MAAM,YAAY,GAAG,YAAY,CAAC,WAAW,EAAE,CAAC,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,KAAK,CAAC,CAAA;AAEtF;;;;AAIG;MACU,iCAAiC,GAAG,YAAY,CAAC,+BAA+B,EAAC;AAE9F;;;;AAIG;MACU,uCAAuC,GAAG,0BAA0B,CAC/E,qCAAqC,EACtC;AAED;;;;AAIG;AACU,MAAA,+BAA+B,GAAG,YAAY,CACzD,YAAY,EACZ,CAAC,EAAE,QAAQ,EAAE,KAAK,QAAQ,EAC3B;AAED;;;;AAIG;MACU,+BAA+B,GAAG,UAAU,CAAC,WAAW,EAAC;AAEtE;;AAEG;AACH,MAAM,cAAc,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAA;AAErD;;;;AAIG;AACI,MAAM,uBAAuB,GAAG,YAAY,CAAC;AAClD,IAAA,mBAAmB,EAAE;QACnB,YAAY;QACZ,+BAA+B;AAChC,KAAA;AACD,IAAA,kBAAkB,EAAE;QAClB,iCAAiC,EAAE,cAAc,CAC/C,yBAAyB,EACzB,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,YAAY,EACxC,EAAE,QAAQ,EAAE,oBAAoB,EAAE,CACnC;AACF,KAAA;AACD,IAAA,kBAAkB,EAAE;QAClB,yBAAyB;QACzB,+BAA+B;AAChC,KAAA;AACD,IAAA,gBAAgB,EAAE;QAChB,2BAA2B;QAC3B,uCAAuC;AACxC,KAAA;AACD,IAAA,+BAA+B,EAAE;QAC/B,iCAAiC;AAClC,KAAA;AACD,IAAA,kBAAkB,EAAE;QAClB,+BAA+B;AAChC,KAAA;AACD,IAAA,iBAAiB,EAAE;QACjB,2BAA2B;AAC5B,KAAA;AACD,IAAA,yBAAyB,EAAE;QACzB,2BAA2B;AAC5B,KAAA;AACD,IAAA,yBAAyB,EAAE;QACzB,oCAAoC;QACpC,+BAA+B;AAChC,KAAA;AACF,CAAA;;;;"}

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

@@ -13,7 +13,7 @@ const identifierResultsXModule = {
     name: 'identifierResults',
     storeModule: identifierResultsXStoreModule,
     storeEmitters: identifierResultsEmitters,
-    wiring: identifierResultsWiring
+    wiring: identifierResultsWiring,
 };
 XPlugin.registerXModule(identifierResultsXModule);
 

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

@@ -1 +1 @@
-{"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/identifier-results/x-module.ts"],"sourcesContent":["import { XModule } from '../x-modules.types';\nimport { XPlugin } from '../../plugins/x-plugin';\nimport { identifierResultsEmitters } from './store/emitters';\nimport { identifierResultsXStoreModule } from './store/module';\nimport { IdentifierResultsXStoreModule } from './store/types';\nimport { identifierResultsWiring } from './wiring';\n\n/**\n * IdentifierResults {@link XModule} alias.\n *\n * @public\n */\nexport type IdentifierResultsXModule = XModule<IdentifierResultsXStoreModule>;\n\n/**\n * IdentifierResults {@link XModule} implementation. This module is auto-registered as soon as you\n * import any component from the `identifier-results` entry point.\n *\n * @public\n */\nexport const identifierResultsXModule: IdentifierResultsXModule = {\n  name: 'identifierResults',\n  storeModule: identifierResultsXStoreModule,\n  storeEmitters: identifierResultsEmitters,\n  wiring: identifierResultsWiring\n};\n\nXPlugin.registerXModule(identifierResultsXModule);\n"],"names":[],"mappings":";;;;;AAcA;;;;;AAKG;AACU,MAAA,wBAAwB,GAA6B;AAChE,IAAA,IAAI,EAAE,mBAAmB;AACzB,IAAA,WAAW,EAAE,6BAA6B;AAC1C,IAAA,aAAa,EAAE,yBAAyB;AACxC,IAAA,MAAM,EAAE,uBAAuB;EAC/B;AAEF,OAAO,CAAC,eAAe,CAAC,wBAAwB,CAAC;;;;"}
+{"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/identifier-results/x-module.ts"],"sourcesContent":["import type { XModule } from '../x-modules.types'\nimport type { IdentifierResultsXStoreModule } from './store/types'\nimport { XPlugin } from '../../plugins/x-plugin'\nimport { identifierResultsEmitters } from './store/emitters'\nimport { identifierResultsXStoreModule } from './store/module'\nimport { identifierResultsWiring } from './wiring'\n\n/**\n * IdentifierResults {@link XModule} alias.\n *\n * @public\n */\nexport type IdentifierResultsXModule = XModule<IdentifierResultsXStoreModule>\n\n/**\n * IdentifierResults {@link XModule} implementation. This module is auto-registered as soon as you\n * import any component from the `identifier-results` entry point.\n *\n * @public\n */\nexport const identifierResultsXModule: IdentifierResultsXModule = {\n  name: 'identifierResults',\n  storeModule: identifierResultsXStoreModule,\n  storeEmitters: identifierResultsEmitters,\n  wiring: identifierResultsWiring,\n}\n\nXPlugin.registerXModule(identifierResultsXModule)\n"],"names":[],"mappings":";;;;;AAcA;;;;;AAKG;AACU,MAAA,wBAAwB,GAA6B;AAChE,IAAA,IAAI,EAAE,mBAAmB;AACzB,IAAA,WAAW,EAAE,6BAA6B;AAC1C,IAAA,aAAa,EAAE,yBAAyB;AACxC,IAAA,MAAM,EAAE,uBAAuB;EAChC;AAED,OAAO,CAAC,eAAe,CAAC,wBAAwB,CAAC;;;;"}

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

@@ -1,11 +1,11 @@
 import { defineComponent, inject, computed, provide, h } from 'vue';
+import { QUERY_KEY, HAS_MORE_ITEMS_KEY, LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts.js';
 import ItemsList from '../../../components/items-list.vue.js';
+import { useGetter } from '../../../composables/use-getter.js';
 import { useState } from '../../../composables/use-state.js';
+import { AnimationProp } from '../../../types/animation-prop.js';
 import { groupItemsBy } from '../../../utils/array.js';
 import { nextQueriesXModule } from '../x-module.js';
-import { QUERY_KEY, HAS_MORE_ITEMS_KEY, LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts.js';
-import { AnimationProp } from '../../../types/animation-prop.js';
-import { useGetter } from '../../../composables/use-getter.js';
 
 /**
  * Component that inserts groups of next queries in different positions of the injected search
@@ -20,22 +20,22 @@ var _sfc_main = defineComponent({
         /** Animation component that will be used to animate the next queries groups. */
         animation: {
             type: AnimationProp,
-            default: 'ul'
+            default: 'ul',
         },
         /** The first index to insert a group of next queries at. */
         offset: {
             type: Number,
-            default: 24
+            default: 24,
         },
         /** The items cycle size to keep inserting next queries groups at. */
         frequency: {
             type: Number,
-            default: 24
+            default: 24,
         },
         /** The maximum amount of next queries to add in a single group. */
         maxNextQueriesPerGroup: {
             type: Number,
-            default: 4
+            default: 4,
         },
         /** The maximum number of groups to insert into the injected list items list. */
         maxGroups: Number,
@@ -45,15 +45,13 @@ var _sfc_main = defineComponent({
          */
         showOnlyAfterOffset: {
             type: Boolean,
-            default: false
-        }
+            default: false,
+        },
     },
     setup(props, { slots }) {
-        const { query, status } = useState('nextQueries', ['query', 'status']);
+        const { query, status } = useState('nextQueries');
         /** The state next queries. */
-        const nextQueries = useGetter('nextQueries', [
-            'nextQueries'
-        ]).nextQueries;
+        const nextQueries = useGetter('nextQueries').nextQueries;
         /** Injected query, updated when the related request(s) have succeeded. */
         const injectedQuery = inject(QUERY_KEY);
         /** Indicates if there are more available results than the injected. */
@@ -68,7 +66,7 @@ var _sfc_main = defineComponent({
             .map(nextQueries => ({
             modelName: 'NextQueriesGroup',
             id: nextQueries.map(nextQuery => nextQuery.query).join(','),
-            nextQueries
+            nextQueries,
         })));
         /** It injects {@link ListItem} provided by an ancestor as injectedListItems. */
         const injectedListItems = inject(LIST_ITEMS_KEY);
@@ -126,7 +124,7 @@ var _sfc_main = defineComponent({
             // https://vue-land.github.io/faq/forwarding-slots#passing-all-slots
             return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps, slots);
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

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

@@ -1 +1 @@
-{"version":3,"file":"next-queries-list.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-queries-list.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { computed, ComputedRef, defineComponent, h, inject, provide, Ref } from 'vue';\n  import { NextQuery } from '@empathyco/x-types';\n  import ItemsList from '../../../components/items-list.vue';\n  import { useState } from '../../../composables/use-state';\n  import { groupItemsBy } from '../../../utils/array';\n  import { ListItem } from '../../../utils/types';\n  import { NextQueriesGroup } from '../types';\n  import { nextQueriesXModule } from '../x-module';\n  import {\n    HAS_MORE_ITEMS_KEY,\n    LIST_ITEMS_KEY,\n    QUERY_KEY\n  } from '../../../components/decorators/injection.consts';\n  import { AnimationProp } from '../../../types/animation-prop';\n  import { useGetter } from '../../../composables/use-getter';\n\n  /**\n   * Component that inserts groups of next queries in different positions of the injected search\n   * items list, based on the provided configuration.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'NextQueriesList',\n    xModule: nextQueriesXModule.name,\n    props: {\n      /** Animation component that will be used to animate the next queries groups. */\n      animation: {\n        type: AnimationProp,\n        default: 'ul'\n      },\n      /** The first index to insert a group of next queries at. */\n      offset: {\n        type: Number,\n        default: 24\n      },\n      /** The items cycle size to keep inserting next queries groups at. */\n      frequency: {\n        type: Number,\n        default: 24\n      },\n      /** The maximum amount of next queries to add in a single group. */\n      maxNextQueriesPerGroup: {\n        type: Number,\n        default: 4\n      },\n      /** The maximum number of groups to insert into the injected list items list. */\n      maxGroups: Number,\n      /**\n       * Determines if a group is added to the injected items list in case the number\n       * of items is smaller than the offset.\n       */\n      showOnlyAfterOffset: {\n        type: Boolean,\n        default: false\n      }\n    },\n    setup(props, { slots }) {\n      const { query, status } = useState('nextQueries', ['query', 'status']);\n\n      /** The state next queries. */\n      const nextQueries: ComputedRef<NextQuery[]> = useGetter('nextQueries', [\n        'nextQueries'\n      ]).nextQueries;\n\n      /** Injected query, updated when the related request(s) have succeeded. */\n      const injectedQuery = inject<Ref<string>>(QUERY_KEY as string);\n\n      /** Indicates if there are more available results than the injected. */\n      const hasMoreItems = inject<Ref<boolean>>(HAS_MORE_ITEMS_KEY as string);\n\n      /**\n       * The grouped next queries based on the given config.\n       *\n       * @returns A list of next queries groups.\n       */\n      const nextQueriesGroups = computed<NextQueriesGroup[]>(() =>\n        Object.values(\n          groupItemsBy(nextQueries?.value, (_, index) =>\n            Math.floor(index / props.maxNextQueriesPerGroup)\n          )\n        )\n          .slice(0, props.maxGroups)\n          .map(nextQueries => ({\n            modelName: 'NextQueriesGroup' as const,\n            id: nextQueries.map(nextQuery => nextQuery.query).join(','),\n            nextQueries\n          }))\n      );\n\n      /** It injects {@link ListItem} provided by an ancestor as injectedListItems. */\n      const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string);\n\n      /**\n       * Checks if the next queries are outdated taking into account the injected query.\n       *\n       * @returns True if the next queries are outdated, false if not.\n       */\n      const nextQueriesAreOutdated = computed(\n        () =>\n          !!injectedQuery?.value &&\n          (query.value !== injectedQuery.value || status.value !== 'success')\n      );\n\n      /**\n       * Checks if the number of items is smaller than the offset so a group\n       * should be added to the injected items list.\n       *\n       * @returns True if a group should be added, false if not.\n       */\n      const hasNotEnoughListItems = computed(\n        () =>\n          !props.showOnlyAfterOffset &&\n          !hasMoreItems?.value &&\n          injectedListItems !== undefined &&\n          injectedListItems.value.length > 0 &&\n          props.offset > injectedListItems.value.length\n      );\n\n      /**\n       * New list of {@link ListItem}s to render.\n       *\n       * @returns The new list of {@link ListItem}s with the next queries groups inserted.\n       */\n      const items = computed(() => {\n        if (!injectedListItems?.value) {\n          return nextQueriesGroups.value;\n        }\n        if (nextQueriesAreOutdated.value) {\n          return injectedListItems.value;\n        }\n        if (hasNotEnoughListItems.value) {\n          return injectedListItems.value.concat(nextQueriesGroups.value[0] ?? []);\n        }\n        return nextQueriesGroups?.value.reduce(\n          (items, nextQueriesGroup, index) => {\n            const targetIndex = props.offset + props.frequency * index;\n            if (targetIndex <= items.length) {\n              items.splice(targetIndex, 0, nextQueriesGroup);\n            }\n            return items;\n          },\n          [...injectedListItems.value]\n        );\n      });\n\n      /**\n       * The computed list items of the entity that uses the mixin.\n       *\n       * @remarks It should be overridden in the component that uses the mixin and it's intended to be\n       * filled with items from the state. Vue doesn't allow mixins as abstract classes.\n       * @returns An empty array as fallback in case it is not overridden.\n       */\n      provide(LIST_ITEMS_KEY as string, items);\n\n      return () => {\n        const innerProps = { items: items.value, animation: props.animation };\n        // https://vue-land.github.io/faq/forwarding-slots#passing-all-slots\n        return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps, slots);\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the <b>QuerySignals</b> microservice must be\nimplemented.\n:::\n<!-- prettier-ignore-end -->\n\nUsually, this component is going to be used together with the `ResultsList` one. Next queries groups\nwill be inserted between the results, guiding users to discover new searches directly from the\nresults list.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <NextQueriesList />\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { NextQueriesList } from '@empathyco/x-components/next-queries';\n  import { ResultsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'NextQueriesListDemo',\n    components: {\n      NextQueriesList,\n      ResultsList,\n      SearchInput\n    }\n  };\n</script>\n```\n\n### Play with the index that next queries groups are inserted at\n\nThe component allows to customise where are the next queries groups inserted. In the following\nexample, the first group of next queries will be inserted at the index `48` (`offset`), and then a\nsecond group will be inserted at index `120` because of the `frequency` prop configured to `72`.\nFinally, a third group will be inserted at index `192`. Because `maxGroups` is configured to `3`, no\nmore groups will be inserted. Each one of this groups will have up to `6` next queries\n(`maxNextQueriesPerGroup`).\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <NextQueriesList :offset=\"48\" :frequency=\"72\" :maxNextQueriesPerGroup=\"6\" :maxGroups=\"3\" />\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { NextQueriesList } from '@empathyco/x-components/next-queries';\n  import { ResultsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'NextQueriesListDemo',\n    components: {\n      NextQueriesList,\n      ResultsList,\n      SearchInput\n    }\n  };\n</script>\n```\n\n### Showing/hiding first next queries group when no more items\n\nBy default, the first next query group will be inserted when the total number of results is smaller\nthan the offset, but this behavior can be deactivated by setting the `showOnlyAfterOffset` to\n`true`.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <NextQueriesList\n        :offset=\"48\"\n        :frequency=\"72\"\n        :maxNextQueriesPerGroup=\"1\"\n        :showOnlyAfterOffset=\"true\"\n      />\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { NextQueriesList } from '@empathyco/x-components/next-queries';\n  import { ResultsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'NextQueriesListDemo',\n    components: {\n      NextQueriesList,\n      ResultsList,\n      SearchInput\n    }\n  };\n</script>\n```\n\n### Customise the layout of the component\n\nThis component will render by default the `id` of each search item, both the injected, and for the\ngroups of next queries generated, but the common case is to integrate it with another layout\ncomponent, for example the `BaseGrid`. To do so, you can use the `default` slot\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <NextQueriesList\n        :offset=\"48\"\n        :frequency=\"72\"\n        :maxNextQueriesPerGroup=\"6\"\n        :maxGroups=\"3\"\n        #default=\"{ items }\"\n      >\n        <BaseGrid :items=\"items\" :animation=\"animation\">\n          <template #next-queries-group=\"{ item }\">\n            <span>NextQueriesGroup: {{ item.queries.join(', ') }}</span>\n          </template>\n          <template #result=\"{ item }\">\n            <span>Result: {{ item.name }}</span>\n          </template>\n          <template #default=\"{ item }\">\n            <span>Default: {{ item }}</span>\n          </template>\n        </BaseGrid>\n      </NextQueriesList>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { NextQueriesList } from '@empathyco/x-components/next-queries';\n  import { ResultsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { BaseGrid } from '@empathyco/x-components';\n\n  export default {\n    name: 'NextQueriesListDemo',\n    components: {\n      NextQueriesList,\n      ResultsList,\n      BaseGrid,\n      SearchInput\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"next-queries-list.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-queries-list.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { ListItem } from '../../../utils/types'\nimport type { NextQueriesGroup } from '../types'\nimport { computed, defineComponent, h, inject, provide } from 'vue'\nimport {\n  HAS_MORE_ITEMS_KEY,\n  LIST_ITEMS_KEY,\n  QUERY_KEY,\n} from '../../../components/decorators/injection.consts'\nimport ItemsList from '../../../components/items-list.vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types/animation-prop'\nimport { groupItemsBy } from '../../../utils/array'\nimport { nextQueriesXModule } from '../x-module'\n\n/**\n * Component that inserts groups of next queries in different positions of the injected search\n * items list, based on the provided configuration.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'NextQueriesList',\n  xModule: nextQueriesXModule.name,\n  props: {\n    /** Animation component that will be used to animate the next queries groups. */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /** The first index to insert a group of next queries at. */\n    offset: {\n      type: Number,\n      default: 24,\n    },\n    /** The items cycle size to keep inserting next queries groups at. */\n    frequency: {\n      type: Number,\n      default: 24,\n    },\n    /** The maximum amount of next queries to add in a single group. */\n    maxNextQueriesPerGroup: {\n      type: Number,\n      default: 4,\n    },\n    /** The maximum number of groups to insert into the injected list items list. */\n    maxGroups: Number,\n    /**\n     * Determines if a group is added to the injected items list in case the number\n     * of items is smaller than the offset.\n     */\n    showOnlyAfterOffset: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  setup(props, { slots }) {\n    const { query, status } = useState('nextQueries')\n\n    /** The state next queries. */\n    const nextQueries = useGetter('nextQueries').nextQueries\n\n    /** Injected query, updated when the related request(s) have succeeded. */\n    const injectedQuery = inject<Ref<string>>(QUERY_KEY as string)\n\n    /** Indicates if there are more available results than the injected. */\n    const hasMoreItems = inject<Ref<boolean>>(HAS_MORE_ITEMS_KEY as string)\n\n    /**\n     * The grouped next queries based on the given config.\n     *\n     * @returns A list of next queries groups.\n     */\n    const nextQueriesGroups = computed<NextQueriesGroup[]>(() =>\n      Object.values(\n        groupItemsBy(nextQueries?.value, (_, index) =>\n          Math.floor(index / props.maxNextQueriesPerGroup),\n        ),\n      )\n        .slice(0, props.maxGroups)\n        .map(nextQueries => ({\n          modelName: 'NextQueriesGroup' as const,\n          id: nextQueries.map(nextQuery => nextQuery.query).join(','),\n          nextQueries,\n        })),\n    )\n\n    /** It injects {@link ListItem} provided by an ancestor as injectedListItems. */\n    const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string)\n\n    /**\n     * Checks if the next queries are outdated taking into account the injected query.\n     *\n     * @returns True if the next queries are outdated, false if not.\n     */\n    const nextQueriesAreOutdated = computed(\n      () =>\n        !!injectedQuery?.value &&\n        (query.value !== injectedQuery.value || status.value !== 'success'),\n    )\n\n    /**\n     * Checks if the number of items is smaller than the offset so a group\n     * should be added to the injected items list.\n     *\n     * @returns True if a group should be added, false if not.\n     */\n    const hasNotEnoughListItems = computed(\n      () =>\n        !props.showOnlyAfterOffset &&\n        !hasMoreItems?.value &&\n        injectedListItems !== undefined &&\n        injectedListItems.value.length > 0 &&\n        props.offset > injectedListItems.value.length,\n    )\n\n    /**\n     * New list of {@link ListItem}s to render.\n     *\n     * @returns The new list of {@link ListItem}s with the next queries groups inserted.\n     */\n    const items = computed(() => {\n      if (!injectedListItems?.value) {\n        return nextQueriesGroups.value\n      }\n      if (nextQueriesAreOutdated.value) {\n        return injectedListItems.value\n      }\n      if (hasNotEnoughListItems.value) {\n        return injectedListItems.value.concat(nextQueriesGroups.value[0] ?? [])\n      }\n      return nextQueriesGroups?.value.reduce(\n        (items, nextQueriesGroup, index) => {\n          const targetIndex = props.offset + props.frequency * index\n          if (targetIndex <= items.length) {\n            items.splice(targetIndex, 0, nextQueriesGroup)\n          }\n          return items\n        },\n        [...injectedListItems.value],\n      )\n    })\n\n    /**\n     * The computed list items of the entity that uses the mixin.\n     *\n     * @remarks It should be overridden in the component that uses the mixin and it's intended to be\n     * filled with items from the state. Vue doesn't allow mixins as abstract classes.\n     * @returns An empty array as fallback in case it is not overridden.\n     */\n    provide(LIST_ITEMS_KEY as string, items)\n\n    return () => {\n      const innerProps = { items: items.value, animation: props.animation }\n      // https://vue-land.github.io/faq/forwarding-slots#passing-all-slots\n      return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps, slots)\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the <b>QuerySignals</b> microservice must be\nimplemented.\n:::\n<!-- prettier-ignore-end -->\n\nUsually, this component is going to be used together with the `ResultsList` one. Next queries groups\nwill be inserted between the results, guiding users to discover new searches directly from the\nresults list.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <NextQueriesList />\n    </ResultsList>\n  </div>\n</template>\n\n<script>\nimport { NextQueriesList } from '@empathyco/x-components/next-queries'\nimport { ResultsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'NextQueriesListDemo',\n  components: {\n    NextQueriesList,\n    ResultsList,\n    SearchInput,\n  },\n}\n</script>\n```\n\n### Play with the index that next queries groups are inserted at\n\nThe component allows to customise where are the next queries groups inserted. In the following\nexample, the first group of next queries will be inserted at the index `48` (`offset`), and then a\nsecond group will be inserted at index `120` because of the `frequency` prop configured to `72`.\nFinally, a third group will be inserted at index `192`. Because `maxGroups` is configured to `3`, no\nmore groups will be inserted. Each one of this groups will have up to `6` next queries\n(`maxNextQueriesPerGroup`).\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <NextQueriesList :offset=\"48\" :frequency=\"72\" :maxNextQueriesPerGroup=\"6\" :maxGroups=\"3\" />\n    </ResultsList>\n  </div>\n</template>\n\n<script>\nimport { NextQueriesList } from '@empathyco/x-components/next-queries'\nimport { ResultsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'NextQueriesListDemo',\n  components: {\n    NextQueriesList,\n    ResultsList,\n    SearchInput,\n  },\n}\n</script>\n```\n\n### Showing/hiding first next queries group when no more items\n\nBy default, the first next query group will be inserted when the total number of results is smaller\nthan the offset, but this behavior can be deactivated by setting the `showOnlyAfterOffset` to\n`true`.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <NextQueriesList\n        :offset=\"48\"\n        :frequency=\"72\"\n        :maxNextQueriesPerGroup=\"1\"\n        :showOnlyAfterOffset=\"true\"\n      />\n    </ResultsList>\n  </div>\n</template>\n\n<script>\nimport { NextQueriesList } from '@empathyco/x-components/next-queries'\nimport { ResultsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'NextQueriesListDemo',\n  components: {\n    NextQueriesList,\n    ResultsList,\n    SearchInput,\n  },\n}\n</script>\n```\n\n### Customise the layout of the component\n\nThis component will render by default the `id` of each search item, both the injected, and for the\ngroups of next queries generated, but the common case is to integrate it with another layout\ncomponent, for example the `BaseGrid`. To do so, you can use the `default` slot\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <NextQueriesList\n        :offset=\"48\"\n        :frequency=\"72\"\n        :maxNextQueriesPerGroup=\"6\"\n        :maxGroups=\"3\"\n        #default=\"{ items }\"\n      >\n        <BaseGrid :items=\"items\" :animation=\"animation\">\n          <template #next-queries-group=\"{ item }\">\n            <span>NextQueriesGroup: {{ item.queries.join(', ') }}</span>\n          </template>\n          <template #result=\"{ item }\">\n            <span>Result: {{ item.name }}</span>\n          </template>\n          <template #default=\"{ item }\">\n            <span>Default: {{ item }}</span>\n          </template>\n        </BaseGrid>\n      </NextQueriesList>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\nimport { NextQueriesList } from '@empathyco/x-components/next-queries'\nimport { ResultsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { BaseGrid } from '@empathyco/x-components'\n\nexport default {\n  name: 'NextQueriesListDemo',\n  components: {\n    NextQueriesList,\n    ResultsList,\n    BaseGrid,\n    SearchInput,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;AAiBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,iBAAiB;IACvB,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;;AAED,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,EAAE;AACZ,SAAA;;AAED,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,EAAE;AACZ,SAAA;;AAED,QAAA,sBAAsB,EAAE;AACtB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAC;AACX,SAAA;;AAED,QAAA,SAAS,EAAE,MAAM;AACjB;;;AAGE;AACF,QAAA,mBAAmB,EAAE;AACnB,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;QACpB,MAAM,EAAE,KAAK,EAAE,MAAK,KAAM,QAAQ,CAAC,aAAa,CAAA,CAAA;;QAGhD,MAAM,WAAY,GAAE,SAAS,CAAC,aAAa,CAAC,CAAC,WAAU,CAAA;;AAGvD,QAAA,MAAM,aAAY,GAAI,MAAM,CAAc,SAAmB,CAAA,CAAA;;AAG7D,QAAA,MAAM,YAAW,GAAI,MAAM,CAAe,kBAA4B,CAAA,CAAA;AAEtE;;;;AAIE;AACF,QAAA,MAAM,iBAAkB,GAAE,QAAQ,CAAqB,MACrD,MAAM,CAAC,MAAM,CACX,YAAY,CAAC,WAAW,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,KAAK,KACxC,IAAI,CAAC,KAAK,CAAC,KAAM,GAAE,KAAK,CAAC,sBAAsB,CAAC,CACjD,CACH;AACG,aAAA,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;AACxB,aAAA,GAAG,CAAC,WAAY,KAAI;AACnB,YAAA,SAAS,EAAE,kBAA2B;AACtC,YAAA,EAAE,EAAE,WAAW,CAAC,GAAG,CAAC,SAAQ,IAAK,SAAS,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;YAC3D,WAAW;SACZ,CAAC,CAAC,CACP,CAAA;;AAGA,QAAA,MAAM,iBAAgB,GAAI,MAAM,CAAkB,cAAwB,CAAA,CAAA;AAE1E;;;;AAIE;QACF,MAAM,sBAAqB,GAAI,QAAQ,CACrC,MACE,CAAC,CAAC,aAAa,EAAE,KAAI;AACrB,aAAC,KAAK,CAAC,KAAI,KAAM,aAAa,CAAC,KAAI,IAAK,MAAM,CAAC,KAAI,KAAM,SAAS,CAAC,CACvE,CAAA;AAEA;;;;;AAKE;QACF,MAAM,qBAAoB,GAAI,QAAQ,CACpC,MACE,CAAC,KAAK,CAAC,mBAAkB;YACzB,CAAC,YAAY,EAAE;AACf,YAAA,iBAAgB,KAAM,SAAQ;AAC9B,YAAA,iBAAiB,CAAC,KAAK,CAAC,MAAO,GAAE;YACjC,KAAK,CAAC,MAAK,GAAI,iBAAiB,CAAC,KAAK,CAAC,MAAM,CACjD,CAAA;AAEA;;;;AAIE;AACF,QAAA,MAAM,KAAI,GAAI,QAAQ,CAAC,MAAM;AAC3B,YAAA,IAAI,CAAC,iBAAiB,EAAE,KAAK,EAAE;gBAC7B,OAAO,iBAAiB,CAAC,KAAI,CAAA;AAC/B,aAAA;YACA,IAAI,sBAAsB,CAAC,KAAK,EAAE;gBAChC,OAAO,iBAAiB,CAAC,KAAI,CAAA;AAC/B,aAAA;YACA,IAAI,qBAAqB,CAAC,KAAK,EAAE;AAC/B,gBAAA,OAAO,iBAAiB,CAAC,KAAK,CAAC,MAAM,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAA,IAAK,EAAE,CAAA,CAAA;AACxE,aAAA;AACA,YAAA,OAAO,iBAAiB,EAAE,KAAK,CAAC,MAAM,CACpC,CAAC,KAAK,EAAE,gBAAgB,EAAE,KAAK,KAAK;gBAClC,MAAM,cAAc,KAAK,CAAC,SAAS,KAAK,CAAC,YAAY,KAAI,CAAA;AACzD,gBAAA,IAAI,WAAU,IAAK,KAAK,CAAC,MAAM,EAAE;oBAC/B,KAAK,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,EAAE,gBAAgB,CAAA,CAAA;AAC/C,iBAAA;AACA,gBAAA,OAAO,KAAI,CAAA;aACZ,EACD,CAAC,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAC9B,CAAA;AACF,SAAC,CAAA,CAAA;AAED;;;;;;AAME;AACF,QAAA,OAAO,CAAC,cAAwB,EAAE,KAAK,CAAA,CAAA;AAEvC,QAAA,OAAO,MAAM;AACX,YAAA,MAAM,UAAW,GAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAU,EAAA,CAAA;;AAEpE,YAAA,OAAO,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,CAAE,IAAG,CAAC,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,CAAA,CAAA;AACzE,SAAA,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

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

@@ -1,5 +1,5 @@
 import _sfc_main from './next-queries.vue2.js';
-import { resolveComponent, openBlock, createBlock, withCtx, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps, createVNode } from 'vue';
+import { resolveComponent, openBlock, createBlock, withCtx, renderSlot, normalizeProps, guardReactiveProps, createVNode } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -11,24 +11,18 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     class: "x-next-queries"
   }, {
     default: withCtx((baseScope) => [
-      createCommentVNode(" eslint-disable max-len "),
-      createCommentVNode("\n        @slot Next Query item\n            @binding {Object} v-bind - Next Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - Next Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - Next Query suggestion index\n            @binding {boolean} highlightCurated - True if the curated NQs should be highlighted\n      "),
-      createCommentVNode(" eslint-enable max-len "),
       renderSlot(_ctx.$slots, "suggestion", normalizeProps(guardReactiveProps({ ...baseScope, highlightCurated: _ctx.highlightCurated })), () => [
         createVNode(_component_NextQuery, {
           suggestion: baseScope.suggestion,
-          highlightCurated: _ctx.highlightCurated,
+          "highlight-curated": _ctx.highlightCurated,
           class: "x-next-queries__suggestion x-suggestion"
         }, {
           default: withCtx((nextQueryScope) => [
-            createCommentVNode(" eslint-disable max-len "),
-            createCommentVNode("\n              @slot Next Query content\n                  @binding {Object} v-bind - Next Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - Next Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - Next Query suggestion index\n                  @binding {boolean} shouldHighlightCurated - True if the curated NQ should be highlighted\n          "),
-            createCommentVNode(" eslint-enable max-len "),
             renderSlot(_ctx.$slots, "suggestion-content", normalizeProps(guardReactiveProps({ ...baseScope, ...nextQueryScope })))
           ]),
           _: 2
           /* DYNAMIC */
-        }, 1032, ["suggestion", "highlightCurated"])
+        }, 1032, ["suggestion", "highlight-curated"])
       ])
     ]),
     _: 3

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

@@ -1 +1 @@
-{"version":3,"file":"next-queries.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-queries.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    :suggestions=\"renderedNextQueries\"\n    data-test=\"next-queries\"\n    class=\"x-next-queries\"\n  >\n    <template #default=\"baseScope\">\n      <!-- eslint-disable max-len -->\n      <!--\n        @slot Next Query item\n            @binding {Object} v-bind - Next Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - Next Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - Next Query suggestion index\n            @binding {boolean} highlightCurated - True if the curated NQs should be highlighted\n      -->\n      <!-- eslint-enable max-len -->\n      <slot name=\"suggestion\" v-bind=\"{ ...baseScope, highlightCurated }\">\n        <NextQuery\n          #default=\"nextQueryScope\"\n          :suggestion=\"baseScope.suggestion\"\n          :highlightCurated=\"highlightCurated\"\n          class=\"x-next-queries__suggestion x-suggestion\"\n        >\n          <!-- eslint-disable max-len -->\n          <!--\n              @slot Next Query content\n                  @binding {Object} v-bind - Next Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - Next Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - Next Query suggestion index\n                  @binding {boolean} shouldHighlightCurated - True if the curated NQ should be highlighted\n          -->\n          <!-- eslint-enable max-len -->\n          <slot name=\"suggestion-content\" v-bind=\"{ ...baseScope, ...nextQueryScope }\" />\n        </NextQuery>\n      </slot>\n    </template>\n  </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\n  import { NextQuery as NextQueryModel } from '@empathyco/x-types';\n  import { computed, defineComponent, PropType } from 'vue';\n  import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';\n  import { nextQueriesXModule } from '../x-module';\n  import { useGetter } from '../../../composables/use-getter';\n  import NextQuery from './next-query.vue';\n\n  /**\n   * Simple next-queries component that renders a list of\n   * [`BaseSuggestions`](./x-components.base-suggestions.md),\n   * allowing the user to select one of them, and emitting the needed events. A next query is a\n   * suggestion for a new search, related to your previous query. I.e. If people normally search\n   * for `shirts`, and then `trousers`, `trousers` would be a next query of `shirts`.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'NextQueries',\n    xModule: nextQueriesXModule.name,\n    components: {\n      NextQuery,\n      BaseSuggestions\n    },\n    props: {\n      /**\n       * Flag to indicate if the curated next queries should be displayed different.\n       *\n       * @public\n       */\n      highlightCurated: {\n        type: Boolean,\n        default: false\n      },\n      /**\n       * NextQueries list to be used instead of state NextQueries.\n       *\n       * @public\n       */\n      suggestions: Array as PropType<NextQueryModel[]>\n    },\n    setup(props) {\n      /**\n       * The list of next queries from the state.\n       *\n       * @internal\n       */\n      const stateNextQueries = useGetter('nextQueries', ['nextQueries']).nextQueries;\n\n      /**.\n       * The list of next queries finally rendered\n       *\n       * @internal\n       */\n      const renderedNextQueries = computed(() => props.suggestions ?? stateNextQueries.value);\n\n      return { renderedNextQueries };\n    }\n  });\n</script>\n\n<!--eslint-disable max-len -->\n<docs lang=\"mdx\">\n## Inherited props\n\nThis component inherits the [`BaseSuggestions`](../base-components/x-components.base-suggestions.md)\nprops.\n\n| Name               | Description                                                       | Type     | Default |\n| ------------------ | ----------------------------------------------------------------- | -------- | ------- |\n| `animation`        | Animation component that will be used to animate the suggestions. | `Vue`    | `\"ul\"`  |\n| `maxItemsToRender` | Number of popular searches to be rendered.                        | `number` |         |\n\n## Examples\n\n### Basic example\n\nYou don't need to pass any props, or slots. Simply add the component, and when it has any next\nqueries it will show them\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <NextQueries />\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { NextQueries } from '@empathyco/x-components/next-queries';\n\n  export default {\n    name: 'NextQueriesDemo',\n    components: {\n      SearchInput,\n      NextQueries\n    }\n  };\n</script>\n```\n\nThe component has three optional props. `animation` to render the component with an animation,\n`maxItemsToRender` to limit the number of next queries will be rendered (by default it is 5) and\n`highlightCurated` to indicate if the curated Next Queries inside the list should be highlighted.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <NextQueries :animation=\"'FadeAndSlide'\" :maxItemsToRender=\"10\" :highlightCurated=\"true\" />\n  </div>\n</template>\n\n<script>\n  import Vue from 'vue';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { NextQueries } from '@empathyco/x-components/next-queries';\n  import { FadeAndSlide } from '@empathyco/x-components';\n\n  // Registering the animation as a global component\n  Vue.component('FadeAndSlide', FadeAndSlide);\n  export default {\n    name: 'NextQueriesDemo',\n    components: {\n      SearchInput,\n      NextQueries\n    }\n  };\n</script>\n```\n\n### Overriding Next Queries' Content\n\nYou can use your custom implementation of the Next Query's content. In the example below, instead of\nusing the default Next Query's content, an icon is added, as well as a span with the query of the\nNext Query suggestion.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <NextQueries>\n      <template #suggestion-content=\"{ suggestion }\">\n        <TrendingIcon />\n        <span class=\"x-next-query__query\">{{ suggestion.query }}</span>\n      </template>\n    </NextQueries>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { NextQueries } from '@empathyco/x-components/next-queries';\n  import { TrendingIcon } from '@empathyco/x-components';\n\n  export default {\n    name: 'NextQueriesDemo',\n    components: {\n      SearchInput,\n      NextQueries,\n      TrendingIcon\n    }\n  };\n</script>\n```\n\n### Adding a custom next query component\n\nYou can use your custom implementation of a next query component. To work correctly, it should use\nthe `emitNextQuerySelected` function when the next query is selected. In the example below, instead\nof using the default `button` tag for a next query, an icon is added, and the text of the next query\nis wrapped in a `span`\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <NextQueries>\n      <template #suggestion=\"{ suggestion }\">\n        <NextQuery :suggestion=\"suggestion\" class=\"x-next-queries__suggestion\">\n          <template #default=\"{ suggestion }\">\n            <TrendingIcon />\n            <span class=\"x-next-query__query\">{{ suggestion.query }}</span>\n          </template>\n        </NextQuery>\n        <button>Custom Behaviour</button>\n      </template>\n    </NextQueries>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { NextQueries, NextQuery } from '@empathyco/x-components/next-queries';\n  import { TrendingIcon } from '@empathyco/x-components';\n\n  export default {\n    name: 'NextQueriesDemo',\n    components: {\n      SearchInput,\n      NextQueries,\n      NextQuery,\n      TrendingIcon\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_withCtx","_createCommentVNode","_renderSlot","_normalizeProps","_guardReactiveProps","_createVNode","highlightCurated"],"mappings":";;;;;;AAgCoB,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AA7BhB,EAAA,OAAAC,SAAA,EAAwB,EAAAC,WAAA,CAAA,0BAAA,EAAA;AAAA,IACxB,WAAM,EAAA,IAAA,CAAA,mBAAA;AAAA,IAAA,WAAA,EAAA,cAAA;IAEK,KAAO,EAAA,gBAAA;AAAA,GAAA,EAAA;AAEhB,IAAA,OAAA,EAAAC,OAAA,CAAA,CAAA,SAAA,KAAA;AAAA,MAKAC,kBAA8B,CAAA,0BAAA,CAAA;AAAA,MAC9BA,kBAgBO,CAAA,0XAAA,CAAA;AAAA,MADOA,kBAAA,CAAA,yBAAA,CAAA;AAAA,MAZTC,UAAA,CAAA,IAAA,CAAY,QAAS,YAAW,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,GAAA,SAAA,EAAA,gBAAA,EAAA,IAAA,CAAA,gBAAA,EAAA,CAAA,CAAA,EAAA,MAAA;AAAA,QAAAC,WAAA,CAChC,oBAAkBC,EAAAA;AAAAA,UACnB,UAAM,EAAA,SAAA,CAAA,UAAA;AAAA,UAAA,gBAAA,EAAA,IAAA,CAAA,gBAAA;UAHL,KAAO,EAAA,yCAAA;AAAA,SAAA,EAAA;AAMR,UAAA,OAAA,EAAAN,OAAA,CAAA,CAAA,cAAA,KAAA;AAAA,YAKAC,kBAA8B,CAAA,0BAAA,CAAA;AAAA,YAC9BA,mBAA+E,wZAAN,CAAA;AAAA,YAAAA,kBAAA,CAAA,yBAAA,CAAA;AA5BnF,YAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,oBAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,GAAA,SAAA,EAAA,GAAA,cAAA,EAAA,CAAA,CAAA,CAAA;AAAA,WAAA,CAAA;;;;AAAA,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"next-queries.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-queries.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    :suggestions=\"renderedNextQueries\"\n    data-test=\"next-queries\"\n    class=\"x-next-queries\"\n  >\n    <template #default=\"baseScope\">\n      <!-- eslint-disable max-len -->\n      <!--\n        @slot Next Query item\n            @binding {Object} v-bind - Next Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - Next Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - Next Query suggestion index\n            @binding {boolean} highlightCurated - True if the curated NQs should be highlighted\n      -->\n      <!-- eslint-enable max-len -->\n      <slot name=\"suggestion\" v-bind=\"{ ...baseScope, highlightCurated }\">\n        <NextQuery\n          v-slot=\"nextQueryScope\"\n          :suggestion=\"baseScope.suggestion\"\n          :highlight-curated=\"highlightCurated\"\n          class=\"x-next-queries__suggestion x-suggestion\"\n        >\n          <!-- eslint-disable max-len -->\n          <!--\n              @slot Next Query content\n                  @binding {Object} v-bind - Next Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - Next Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - Next Query suggestion index\n                  @binding {boolean} shouldHighlightCurated - True if the curated NQ should be highlighted\n          -->\n          <!-- eslint-enable max-len -->\n          <slot name=\"suggestion-content\" v-bind=\"{ ...baseScope, ...nextQueryScope }\" />\n        </NextQuery>\n      </slot>\n    </template>\n  </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\nimport type { NextQuery as NextQueryModel } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent } from 'vue'\nimport BaseSuggestions from '../../../components/suggestions/base-suggestions.vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { nextQueriesXModule } from '../x-module'\nimport NextQuery from './next-query.vue'\n\n/**\n * Simple next-queries component that renders a list of\n * [`BaseSuggestions`](./x-components.base-suggestions.md),\n * allowing the user to select one of them, and emitting the needed events. A next query is a\n * suggestion for a new search, related to your previous query. I.e. If people normally search\n * for `shirts`, and then `trousers`, `trousers` would be a next query of `shirts`.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'NextQueries',\n  xModule: nextQueriesXModule.name,\n  components: {\n    NextQuery,\n    BaseSuggestions,\n  },\n  props: {\n    /**\n     * Flag to indicate if the curated next queries should be displayed different.\n     *\n     * @public\n     */\n    highlightCurated: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * NextQueries list to be used instead of state NextQueries.\n     *\n     * @public\n     */\n    suggestions: Array as PropType<NextQueryModel[]>,\n  },\n  setup(props) {\n    /**\n     * The list of next queries from the state.\n     *\n     * @internal\n     */\n    const stateNextQueries = useGetter('nextQueries').nextQueries\n\n    /**.\n     * The list of next queries finally rendered\n     *\n     * @internal\n     */\n    const renderedNextQueries = computed(() => props.suggestions ?? stateNextQueries.value)\n\n    return { renderedNextQueries }\n  },\n})\n</script>\n\n<!--eslint-disable max-len -->\n<docs lang=\"mdx\">\n## Inherited props\n\nThis component inherits the [`BaseSuggestions`](../base-components/x-components.base-suggestions.md)\nprops.\n\n| Name               | Description                                                       | Type     | Default |\n| ------------------ | ----------------------------------------------------------------- | -------- | ------- |\n| `animation`        | Animation component that will be used to animate the suggestions. | `Vue`    | `\"ul\"`  |\n| `maxItemsToRender` | Number of popular searches to be rendered.                        | `number` |         |\n\n## Examples\n\n### Basic example\n\nYou don't need to pass any props, or slots. Simply add the component, and when it has any next\nqueries it will show them\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <NextQueries />\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { NextQueries } from '@empathyco/x-components/next-queries'\n\nexport default {\n  name: 'NextQueriesDemo',\n  components: {\n    SearchInput,\n    NextQueries,\n  },\n}\n</script>\n```\n\nThe component has three optional props. `animation` to render the component with an animation,\n`maxItemsToRender` to limit the number of next queries will be rendered (by default it is 5) and\n`highlightCurated` to indicate if the curated Next Queries inside the list should be highlighted.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <NextQueries :animation=\"'FadeAndSlide'\" :maxItemsToRender=\"10\" :highlightCurated=\"true\" />\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { NextQueries } from '@empathyco/x-components/next-queries'\nimport { FadeAndSlide } from '@empathyco/x-components'\n\n// Registering the animation as a global component\nVue.component('FadeAndSlide', FadeAndSlide)\nexport default {\n  name: 'NextQueriesDemo',\n  components: {\n    SearchInput,\n    NextQueries,\n  },\n}\n</script>\n```\n\n### Overriding Next Queries' Content\n\nYou can use your custom implementation of the Next Query's content. In the example below, instead of\nusing the default Next Query's content, an icon is added, as well as a span with the query of the\nNext Query suggestion.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <NextQueries>\n      <template #suggestion-content=\"{ suggestion }\">\n        <TrendingIcon />\n        <span class=\"x-next-query__query\">{{ suggestion.query }}</span>\n      </template>\n    </NextQueries>\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { NextQueries } from '@empathyco/x-components/next-queries'\nimport { TrendingIcon } from '@empathyco/x-components'\n\nexport default {\n  name: 'NextQueriesDemo',\n  components: {\n    SearchInput,\n    NextQueries,\n    TrendingIcon,\n  },\n}\n</script>\n```\n\n### Adding a custom next query component\n\nYou can use your custom implementation of a next query component. To work correctly, it should use\nthe `emitNextQuerySelected` function when the next query is selected. In the example below, instead\nof using the default `button` tag for a next query, an icon is added, and the text of the next query\nis wrapped in a `span`\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <NextQueries>\n      <template #suggestion=\"{ suggestion }\">\n        <NextQuery :suggestion=\"suggestion\" class=\"x-next-queries__suggestion\">\n          <template #default=\"{ suggestion }\">\n            <TrendingIcon />\n            <span class=\"x-next-query__query\">{{ suggestion.query }}</span>\n          </template>\n        </NextQuery>\n        <button>Custom Behaviour</button>\n      </template>\n    </NextQueries>\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { NextQueries, NextQuery } from '@empathyco/x-components/next-queries'\nimport { TrendingIcon } from '@empathyco/x-components'\n\nexport default {\n  name: 'NextQueriesDemo',\n  components: {\n    SearchInput,\n    NextQueries,\n    NextQuery,\n    TrendingIcon,\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps","_createVNode","highlightCurated"],"mappings":";;;;;;AAgCoB,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AA7BhB,EAAA,OAAAC,SAAA,EAAwB,EAAAC,WAAA,CAAA,0BAAA,EAAA;AAAA,IACxB,WAAM,EAAA,IAAA,CAAA,mBAAA;AAAA,IAAA,WAAA,EAAA,cAAA;IAEK,KAAO,EAAA,gBAAA;AAAA,GAAA,EAAA;aASdC,OAcY,CAAA,CAAA,SAAA,KAAA;AAAA,MAZTC,UAAA,CAAA,IAAA,CAAY,QAAS,YAAW,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,GAAA,SAAA,EAAA,gBAAA,EAAA,IAAA,CAAA,gBAAA,EAAA,CAAA,CAAA,EAAA,MAAA;AAAA,QAAAC,WAAA,CAChC,oBAAmBC,EAAAA;AAAAA,UACpB,UAAM,EAAA,SAAA,CAAA,UAAA;AAAA,UAAA,mBAAA,EAAA,IAAA,CAAA,gBAAA;AAnBhB,UAAA,KAAA,EAAA,yCAAA;AAAA,SAAA,EAAA;;AAAA,YAAAJ,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,oBAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,GAAA,SAAA,EAAA,GAAA,cAAA,EAAA,CAAA,CAAA,CAAA;AAAA,WAAA,CAAA;;;;AAAA,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

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

@@ -1,7 +1,7 @@
 import { defineComponent, computed } from 'vue';
 import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue.js';
-import { nextQueriesXModule } from '../x-module.js';
 import { useGetter } from '../../../composables/use-getter.js';
+import { nextQueriesXModule } from '../x-module.js';
 import NextQuery from './next-query.vue.js';
 
 /**
@@ -18,7 +18,7 @@ var _sfc_main = defineComponent({
     xModule: nextQueriesXModule.name,
     components: {
         NextQuery,
-        BaseSuggestions
+        BaseSuggestions,
     },
     props: {
         /**
@@ -28,14 +28,14 @@ var _sfc_main = defineComponent({
          */
         highlightCurated: {
             type: Boolean,
-            default: false
+            default: false,
         },
         /**
          * NextQueries list to be used instead of state NextQueries.
          *
          * @public
          */
-        suggestions: Array
+        suggestions: Array,
     },
     setup(props) {
         /**
@@ -43,7 +43,7 @@ var _sfc_main = defineComponent({
          *
          * @internal
          */
-        const stateNextQueries = useGetter('nextQueries', ['nextQueries']).nextQueries;
+        const stateNextQueries = useGetter('nextQueries').nextQueries;
         /**.
          * The list of next queries finally rendered
          *
@@ -51,7 +51,7 @@ var _sfc_main = defineComponent({
          */
         const renderedNextQueries = computed(() => props.suggestions ?? stateNextQueries.value);
         return { renderedNextQueries };
-    }
+    },
 });
 
 export { _sfc_main as default };

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

@@ -1 +1 @@
-{"version":3,"file":"next-queries.vue2.js","sources":["../../../../../src/x-modules/next-queries/components/next-queries.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    :suggestions=\"renderedNextQueries\"\n    data-test=\"next-queries\"\n    class=\"x-next-queries\"\n  >\n    <template #default=\"baseScope\">\n      <!-- eslint-disable max-len -->\n      <!--\n        @slot Next Query item\n            @binding {Object} v-bind - Next Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - Next Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - Next Query suggestion index\n            @binding {boolean} highlightCurated - True if the curated NQs should be highlighted\n      -->\n      <!-- eslint-enable max-len -->\n      <slot name=\"suggestion\" v-bind=\"{ ...baseScope, highlightCurated }\">\n        <NextQuery\n          #default=\"nextQueryScope\"\n          :suggestion=\"baseScope.suggestion\"\n          :highlightCurated=\"highlightCurated\"\n          class=\"x-next-queries__suggestion x-suggestion\"\n        >\n          <!-- eslint-disable max-len -->\n          <!--\n              @slot Next Query content\n                  @binding {Object} v-bind - Next Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - Next Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - Next Query suggestion index\n                  @binding {boolean} shouldHighlightCurated - True if the curated NQ should be highlighted\n          -->\n          <!-- eslint-enable max-len -->\n          <slot name=\"suggestion-content\" v-bind=\"{ ...baseScope, ...nextQueryScope }\" />\n        </NextQuery>\n      </slot>\n    </template>\n  </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\n  import { NextQuery as NextQueryModel } from '@empathyco/x-types';\n  import { computed, defineComponent, PropType } from 'vue';\n  import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';\n  import { nextQueriesXModule } from '../x-module';\n  import { useGetter } from '../../../composables/use-getter';\n  import NextQuery from './next-query.vue';\n\n  /**\n   * Simple next-queries component that renders a list of\n   * [`BaseSuggestions`](./x-components.base-suggestions.md),\n   * allowing the user to select one of them, and emitting the needed events. A next query is a\n   * suggestion for a new search, related to your previous query. I.e. If people normally search\n   * for `shirts`, and then `trousers`, `trousers` would be a next query of `shirts`.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'NextQueries',\n    xModule: nextQueriesXModule.name,\n    components: {\n      NextQuery,\n      BaseSuggestions\n    },\n    props: {\n      /**\n       * Flag to indicate if the curated next queries should be displayed different.\n       *\n       * @public\n       */\n      highlightCurated: {\n        type: Boolean,\n        default: false\n      },\n      /**\n       * NextQueries list to be used instead of state NextQueries.\n       *\n       * @public\n       */\n      suggestions: Array as PropType<NextQueryModel[]>\n    },\n    setup(props) {\n      /**\n       * The list of next queries from the state.\n       *\n       * @internal\n       */\n      const stateNextQueries = useGetter('nextQueries', ['nextQueries']).nextQueries;\n\n      /**.\n       * The list of next queries finally rendered\n       *\n       * @internal\n       */\n      const renderedNextQueries = computed(() => props.suggestions ?? stateNextQueries.value);\n\n      return { renderedNextQueries };\n    }\n  });\n</script>\n\n<!--eslint-disable max-len -->\n<docs lang=\"mdx\">\n## Inherited props\n\nThis component inherits the [`BaseSuggestions`](../base-components/x-components.base-suggestions.md)\nprops.\n\n| Name               | Description                                                       | Type     | Default |\n| ------------------ | ----------------------------------------------------------------- | -------- | ------- |\n| `animation`        | Animation component that will be used to animate the suggestions. | `Vue`    | `\"ul\"`  |\n| `maxItemsToRender` | Number of popular searches to be rendered.                        | `number` |         |\n\n## Examples\n\n### Basic example\n\nYou don't need to pass any props, or slots. Simply add the component, and when it has any next\nqueries it will show them\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <NextQueries />\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { NextQueries } from '@empathyco/x-components/next-queries';\n\n  export default {\n    name: 'NextQueriesDemo',\n    components: {\n      SearchInput,\n      NextQueries\n    }\n  };\n</script>\n```\n\nThe component has three optional props. `animation` to render the component with an animation,\n`maxItemsToRender` to limit the number of next queries will be rendered (by default it is 5) and\n`highlightCurated` to indicate if the curated Next Queries inside the list should be highlighted.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <NextQueries :animation=\"'FadeAndSlide'\" :maxItemsToRender=\"10\" :highlightCurated=\"true\" />\n  </div>\n</template>\n\n<script>\n  import Vue from 'vue';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { NextQueries } from '@empathyco/x-components/next-queries';\n  import { FadeAndSlide } from '@empathyco/x-components';\n\n  // Registering the animation as a global component\n  Vue.component('FadeAndSlide', FadeAndSlide);\n  export default {\n    name: 'NextQueriesDemo',\n    components: {\n      SearchInput,\n      NextQueries\n    }\n  };\n</script>\n```\n\n### Overriding Next Queries' Content\n\nYou can use your custom implementation of the Next Query's content. In the example below, instead of\nusing the default Next Query's content, an icon is added, as well as a span with the query of the\nNext Query suggestion.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <NextQueries>\n      <template #suggestion-content=\"{ suggestion }\">\n        <TrendingIcon />\n        <span class=\"x-next-query__query\">{{ suggestion.query }}</span>\n      </template>\n    </NextQueries>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { NextQueries } from '@empathyco/x-components/next-queries';\n  import { TrendingIcon } from '@empathyco/x-components';\n\n  export default {\n    name: 'NextQueriesDemo',\n    components: {\n      SearchInput,\n      NextQueries,\n      TrendingIcon\n    }\n  };\n</script>\n```\n\n### Adding a custom next query component\n\nYou can use your custom implementation of a next query component. To work correctly, it should use\nthe `emitNextQuerySelected` function when the next query is selected. In the example below, instead\nof using the default `button` tag for a next query, an icon is added, and the text of the next query\nis wrapped in a `span`\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <NextQueries>\n      <template #suggestion=\"{ suggestion }\">\n        <NextQuery :suggestion=\"suggestion\" class=\"x-next-queries__suggestion\">\n          <template #default=\"{ suggestion }\">\n            <TrendingIcon />\n            <span class=\"x-next-query__query\">{{ suggestion.query }}</span>\n          </template>\n        </NextQuery>\n        <button>Custom Behaviour</button>\n      </template>\n    </NextQueries>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { NextQueries, NextQuery } from '@empathyco/x-components/next-queries';\n  import { TrendingIcon } from '@empathyco/x-components';\n\n  export default {\n    name: 'NextQueriesDemo',\n    components: {\n      SearchInput,\n      NextQueries,\n      NextQuery,\n      TrendingIcon\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AA2CE;;;;;;;;AAQE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,UAAU,EAAE;QACV,SAAS;QACT,eAAc;AACf,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,gBAAgB,EAAE;AAChB,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAI;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,WAAW,EAAE,KAAkC;AAChD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;AACF,QAAA,MAAM,gBAAiB,GAAE,SAAS,CAAC,aAAa,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,CAAA;AAE9E;;;;AAIE;AACF,QAAA,MAAM,mBAAkB,GAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,WAAU,IAAK,gBAAgB,CAAC,KAAK,CAAC,CAAA;QAEvF,OAAO,EAAE,mBAAkB,EAAG,CAAA;KAChC;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"next-queries.vue2.js","sources":["../../../../../src/x-modules/next-queries/components/next-queries.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    :suggestions=\"renderedNextQueries\"\n    data-test=\"next-queries\"\n    class=\"x-next-queries\"\n  >\n    <template #default=\"baseScope\">\n      <!-- eslint-disable max-len -->\n      <!--\n        @slot Next Query item\n            @binding {Object} v-bind - Next Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - Next Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - Next Query suggestion index\n            @binding {boolean} highlightCurated - True if the curated NQs should be highlighted\n      -->\n      <!-- eslint-enable max-len -->\n      <slot name=\"suggestion\" v-bind=\"{ ...baseScope, highlightCurated }\">\n        <NextQuery\n          v-slot=\"nextQueryScope\"\n          :suggestion=\"baseScope.suggestion\"\n          :highlight-curated=\"highlightCurated\"\n          class=\"x-next-queries__suggestion x-suggestion\"\n        >\n          <!-- eslint-disable max-len -->\n          <!--\n              @slot Next Query content\n                  @binding {Object} v-bind - Next Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - Next Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - Next Query suggestion index\n                  @binding {boolean} shouldHighlightCurated - True if the curated NQ should be highlighted\n          -->\n          <!-- eslint-enable max-len -->\n          <slot name=\"suggestion-content\" v-bind=\"{ ...baseScope, ...nextQueryScope }\" />\n        </NextQuery>\n      </slot>\n    </template>\n  </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\nimport type { NextQuery as NextQueryModel } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent } from 'vue'\nimport BaseSuggestions from '../../../components/suggestions/base-suggestions.vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { nextQueriesXModule } from '../x-module'\nimport NextQuery from './next-query.vue'\n\n/**\n * Simple next-queries component that renders a list of\n * [`BaseSuggestions`](./x-components.base-suggestions.md),\n * allowing the user to select one of them, and emitting the needed events. A next query is a\n * suggestion for a new search, related to your previous query. I.e. If people normally search\n * for `shirts`, and then `trousers`, `trousers` would be a next query of `shirts`.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'NextQueries',\n  xModule: nextQueriesXModule.name,\n  components: {\n    NextQuery,\n    BaseSuggestions,\n  },\n  props: {\n    /**\n     * Flag to indicate if the curated next queries should be displayed different.\n     *\n     * @public\n     */\n    highlightCurated: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * NextQueries list to be used instead of state NextQueries.\n     *\n     * @public\n     */\n    suggestions: Array as PropType<NextQueryModel[]>,\n  },\n  setup(props) {\n    /**\n     * The list of next queries from the state.\n     *\n     * @internal\n     */\n    const stateNextQueries = useGetter('nextQueries').nextQueries\n\n    /**.\n     * The list of next queries finally rendered\n     *\n     * @internal\n     */\n    const renderedNextQueries = computed(() => props.suggestions ?? stateNextQueries.value)\n\n    return { renderedNextQueries }\n  },\n})\n</script>\n\n<!--eslint-disable max-len -->\n<docs lang=\"mdx\">\n## Inherited props\n\nThis component inherits the [`BaseSuggestions`](../base-components/x-components.base-suggestions.md)\nprops.\n\n| Name               | Description                                                       | Type     | Default |\n| ------------------ | ----------------------------------------------------------------- | -------- | ------- |\n| `animation`        | Animation component that will be used to animate the suggestions. | `Vue`    | `\"ul\"`  |\n| `maxItemsToRender` | Number of popular searches to be rendered.                        | `number` |         |\n\n## Examples\n\n### Basic example\n\nYou don't need to pass any props, or slots. Simply add the component, and when it has any next\nqueries it will show them\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <NextQueries />\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { NextQueries } from '@empathyco/x-components/next-queries'\n\nexport default {\n  name: 'NextQueriesDemo',\n  components: {\n    SearchInput,\n    NextQueries,\n  },\n}\n</script>\n```\n\nThe component has three optional props. `animation` to render the component with an animation,\n`maxItemsToRender` to limit the number of next queries will be rendered (by default it is 5) and\n`highlightCurated` to indicate if the curated Next Queries inside the list should be highlighted.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <NextQueries :animation=\"'FadeAndSlide'\" :maxItemsToRender=\"10\" :highlightCurated=\"true\" />\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { NextQueries } from '@empathyco/x-components/next-queries'\nimport { FadeAndSlide } from '@empathyco/x-components'\n\n// Registering the animation as a global component\nVue.component('FadeAndSlide', FadeAndSlide)\nexport default {\n  name: 'NextQueriesDemo',\n  components: {\n    SearchInput,\n    NextQueries,\n  },\n}\n</script>\n```\n\n### Overriding Next Queries' Content\n\nYou can use your custom implementation of the Next Query's content. In the example below, instead of\nusing the default Next Query's content, an icon is added, as well as a span with the query of the\nNext Query suggestion.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <NextQueries>\n      <template #suggestion-content=\"{ suggestion }\">\n        <TrendingIcon />\n        <span class=\"x-next-query__query\">{{ suggestion.query }}</span>\n      </template>\n    </NextQueries>\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { NextQueries } from '@empathyco/x-components/next-queries'\nimport { TrendingIcon } from '@empathyco/x-components'\n\nexport default {\n  name: 'NextQueriesDemo',\n  components: {\n    SearchInput,\n    NextQueries,\n    TrendingIcon,\n  },\n}\n</script>\n```\n\n### Adding a custom next query component\n\nYou can use your custom implementation of a next query component. To work correctly, it should use\nthe `emitNextQuerySelected` function when the next query is selected. In the example below, instead\nof using the default `button` tag for a next query, an icon is added, and the text of the next query\nis wrapped in a `span`\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <NextQueries>\n      <template #suggestion=\"{ suggestion }\">\n        <NextQuery :suggestion=\"suggestion\" class=\"x-next-queries__suggestion\">\n          <template #default=\"{ suggestion }\">\n            <TrendingIcon />\n            <span class=\"x-next-query__query\">{{ suggestion.query }}</span>\n          </template>\n        </NextQuery>\n        <button>Custom Behaviour</button>\n      </template>\n    </NextQueries>\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { NextQueries, NextQuery } from '@empathyco/x-components/next-queries'\nimport { TrendingIcon } from '@empathyco/x-components'\n\nexport default {\n  name: 'NextQueriesDemo',\n  components: {\n    SearchInput,\n    NextQueries,\n    NextQuery,\n    TrendingIcon,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AA4CA;;;;;;;;AAQE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,UAAU,EAAE;QACV,SAAS;QACT,eAAe;AAChB,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,gBAAgB,EAAE;AAChB,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;AACD;;;;AAIE;AACF,QAAA,WAAW,EAAE,KAAmC;AACjD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;QACF,MAAM,gBAAiB,GAAE,SAAS,CAAC,aAAa,CAAC,CAAC,WAAU,CAAA;AAE5D;;;;AAIE;AACF,QAAA,MAAM,mBAAkB,GAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,WAAY,IAAG,gBAAgB,CAAC,KAAK,CAAA,CAAA;QAEtF,OAAO,EAAE,mBAAoB,EAAA,CAAA;KAC9B;AACF,CAAA,CAAA;;;;"}

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

@@ -1,5 +1,5 @@
 import _sfc_main from './next-query-preview.vue2.js';
-import { openBlock, createElementBlock, createCommentVNode, renderSlot, Fragment, renderList, createElementVNode, toDisplayString } from 'vue';
+import { openBlock, createElementBlock, renderSlot, Fragment, renderList, createElementVNode, toDisplayString, createCommentVNode } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
 const _hoisted_1 = {
@@ -10,7 +10,6 @@ const _hoisted_1 = {
 const _hoisted_2 = { "data-test": "result-name" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return _ctx.suggestionResults ? (openBlock(), createElementBlock("ul", _hoisted_1, [
-    createCommentVNode("\n      @slot Next Query Preview default slot.\n          @binding {NextQuery} suggestion - Next Query suggestion data\n          @binding {Result[]} results - The results preview of the next query\n          @binding {number} totalResults - The total results of the search request\n    "),
     renderSlot(_ctx.$slots, "default", {
       suggestion: _ctx.suggestion,
       results: _ctx.suggestionResults.items,
@@ -25,7 +24,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             class: "x-next-query-preview__item",
             "data-test": "next-query-preview-item"
           }, [
-            createCommentVNode("\n          @slot Next Query Preview result slot.\n              @binding {Result} result - A Next Query Preview result\n        "),
             renderSlot(_ctx.$slots, "result", { result }, () => [
               createElementVNode(
                 "span",

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

@@ -1 +1 @@
-{"version":3,"file":"next-query-preview.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-query-preview.vue"],"sourcesContent":["<template>\n  <ul v-if=\"suggestionResults\" data-test=\"next-query-preview\" class=\"x-next-query-preview\">\n    <!--\n      @slot Next Query Preview default slot.\n          @binding {NextQuery} suggestion - Next Query suggestion data\n          @binding {Result[]} results - The results preview of the next query\n          @binding {number} totalResults - The total results of the search request\n    -->\n    <slot\n      :suggestion=\"suggestion\"\n      :results=\"suggestionResults.items\"\n      :totalResults=\"suggestionResults.totalResults\"\n    >\n      <li\n        v-for=\"result in suggestionResults.items\"\n        :key=\"result.id\"\n        class=\"x-next-query-preview__item\"\n        data-test=\"next-query-preview-item\"\n      >\n        <!--\n          @slot Next Query Preview result slot.\n              @binding {Result} result - A Next Query Preview result\n        -->\n        <slot name=\"result\" :result=\"result\">\n          <span data-test=\"result-name\">{{ result.name }}</span>\n        </slot>\n      </li>\n    </slot>\n  </ul>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, onMounted, PropType } from 'vue';\n  import { NextQuery, PreviewResults } from '@empathyco/x-types';\n  import { nextQueriesXModule } from '../x-module';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n\n  /**\n   * Retrieves a preview of the results of a next query and exposes them in the default slot,\n   * along with the next query and the totalResults of the search request.\n   * By default, it renders the names of the results.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'NextQueryPreview',\n    xModule: nextQueriesXModule.name,\n    props: {\n      /**\n       * The next query to retrieve the results preview.\n       *\n       * @public\n       */\n      suggestion: {\n        type: Object as PropType<NextQuery>,\n        required: true\n      },\n      /**\n       * Number of suggestion results to be rendered.\n       *\n       * @public\n       */\n      maxItemsToRender: Number\n    },\n    setup(props) {\n      const $x = use$x();\n      /**\n       * The results preview of the next queries mounted.\n       * It is a dictionary, indexed by the next query query.\n       */\n      const { resultsPreview } = useState('nextQueries', ['resultsPreview']);\n\n      /**\n       * The component emits the NextQueryPreviewMountedHook event to retrieve the results preview\n       * of the next query.\n       */\n      onMounted(() => $x.emit('NextQueryPreviewMountedHook', props.suggestion.query));\n\n      /**\n       * Gets from the state the results preview of the next query.\n       *\n       * @returns The results preview of the actual next query.\n       */\n      const suggestionResults = computed((): PreviewResults | undefined => {\n        const previewResults = resultsPreview.value[props.suggestion.query] as PreviewResults;\n\n        return previewResults\n          ? {\n              ...previewResults,\n              items: previewResults.items.slice(0, props.maxItemsToRender)\n            }\n          : undefined;\n      });\n\n      return { suggestionResults };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the\n[`NextQueryPreviewMountedHook`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\nwhen it is mounted.\n\n## See it in action\n\nHere you have a basic example of how the NextQueryPreview is rendered. Keep in mind that this\ncomponent is intended to be used overriding its default slot. By default it will only render the\nnames of the results.\n\n```vue live\n<template>\n  <NextQueryPreview :suggestion=\"suggestion\" />\n</template>\n\n<script>\n  import { NextQueryPreview } from '@empathyco/x-components/next-queries';\n\n  export default {\n    name: 'NextQueryPreviewDemo',\n    components: {\n      NextQueryPreview\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'NextQuery',\n          query: 'tshirt',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with the default slot\n\nIn this example, the results will be rendered inside a sliding panel.\n\n```vue live\n<template>\n  <NextQueryPreview :suggestion=\"suggestion\" #default=\"{ totalResults, results }\">\n    <p>Total results: {{ totalResults }}</p>\n    <SlidingPanel :resetOnContentChange=\"false\">\n      <article\n        v-for=\"result in results\"\n        :key=\"result.id\"\n        class=\"x-result\"\n        style=\"max-width: 300px; overflow: hidden\"\n      >\n        <BaseResultLink :result=\"result\">\n          <BaseResultImage :result=\"result\" class=\"x-result__picture\" />\n        </BaseResultLink>\n        <div class=\"x-result__description\">\n          <BaseResultLink :result=\"result\">\n            <h1 class=\"x-title3\">{{ result.name }}</h1>\n          </BaseResultLink>\n        </div>\n      </article>\n    </SlidingPanel>\n  </NextQueryPreview>\n</template>\n\n<script>\n  import { NextQueryPreview } from '@empathyco/x-components/next-queries';\n  import { SlidingPanel, BaseResultLink, BaseResultImage } from '@empathyco/x-components';\n\n  export default {\n    name: 'NextQueryPreviewDemoOverridingSlot',\n    components: {\n      NextQueryPreview,\n      SlidingPanel,\n      BaseResultLink,\n      BaseResultImage\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'NextQuery',\n          query: 'tshirt',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with the result slot\n\nThe component exposes a slot to override the result content, without modifying the list.\n\nIn this example, the ID of the results will be rendered along with the name.\n\n```vue\n<template>\n  <NextQueryPreview :suggestion=\"suggestion\" #result=\"{ result }\">\n    <span>{{ result.id }}</span>\n    <span>{{ result.name }}</span>\n  </NextQueryPreview>\n</template>\n\n<script>\n  import { NextQueryPreview } from '@empathyco/x-components/next-queries';\n\n  export default {\n    name: 'NextQueryPreviewDemoOverridingResultSlot',\n    components: {\n      NextQueryPreview\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'NextQuery',\n          query: 'tshirt',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the suggestions has been limited to render a maximum of 4 items.\n\n```vue\n<template>\n  <NextQueryPreview\n    :maxItemsToRender=\"maxItemsToRender\"\n    :suggestion=\"suggestion\"\n    #default=\"{ results }\"\n  >\n    <BaseGrid #default=\"{ item }\" :items=\"results\">\n      <BaseResultLink :result=\"item\">\n        <BaseResultImage :result=\"item\" />\n      </BaseResultLink>\n    </BaseGrid>\n  </NextQueryPreview>\n</template>\n\n<script>\n  import { BaseGrid, BaseResultImage, BaseResultLink } from '@empathyco/x-components';\n  import { NextQueryPreview } from '@empathyco/x-components/next-queries';\n\n  export default {\n    name: 'NextQueryPreviewDemo',\n    components: {\n      BaseGrid,\n      BaseResultImage,\n      BaseResultLink,\n      NextQueryPreview\n    },\n    data() {\n      return {\n        maxItemsToRender: 4,\n        suggestion: {\n          modelName: 'NextQuery',\n          query: 'tshirt',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_createCommentVNode","suggestion","_renderSlot","suggestionResults","_Fragment","_renderList"],"mappings":";;;;MAC+B,UAAU,GAAA;AAAA,EAAqB,GAAK,EAAA,CAAA;AAAA,EAAA,WAAA,EAAA,oBAAA;;;;AAAjE,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EA2BK,QA3BL,KA2BK,EAAA,QAAA,EAAA;AA1BH,EAAA,OAAA,IAAA,CAAA,iBAAA,IAAAA,SAAA,EAyBO,EAAAC,kBAAA,CAAA,IAAA,EAAA,UAAA,EAAA;AAAA,IAAAC,kBAAA,CAlBQC,iSAAU,CAAA;AAAA,IAAAC,UAAA,CACbC,IAAkB,CAAA,MAAA,EAAA,SAAA,EAAA;AAAA,MAC3B,YAAY,IAAEA,CAAAA,UAAAA;AAAAA,MAgBV,OAAA,EAAA,IAAA,CAAA,iBAAA,CAAA,KAAA;AAAA,MAdL,YAAA,EAAA,IAAA,CAAA,iBAAA,CAAA,YAAA;AAAA,KAAA,EAAA,MAAA;AAEQ,OAAAL,SAAA,CAAA,IAAO,CAAE,EAAAC,kBAAA;AAAA,QAAAK,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,iBAAA,CAAA,KAAA,EAAA,CAAA,MAAA,KAAA;AACV,UAAA,OAAAP,SAAA,EAA6B,EAAAC,kBAAA,CAAA,IAAA,EAAA;AAAA,YAClC,GAAS,EAAA,MAAA,CAAA,EAAA;AAAA,YAAA,KAAA,EAAA,4BAAA;AAET,YAAA,WAAA,EAAA,yBAAA;AAAA,WAIA,EAAA;AAAA,YAAAC,kBAAA,CACE,mIAA4C,CAAA;AAAA,YAAAE,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,QAAA,EAAA,EAAA,MAAA,EAAA,EAAA,MAAA;;;;;;;;;;;;;;AAxBtD,KAAA,CAAA;AAAA,GAAA,CAAA,IAAAF,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"next-query-preview.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-query-preview.vue"],"sourcesContent":["<template>\n  <ul v-if=\"suggestionResults\" data-test=\"next-query-preview\" class=\"x-next-query-preview\">\n    <!--\n      @slot Next Query Preview default slot.\n          @binding {NextQuery} suggestion - Next Query suggestion data\n          @binding {Result[]} results - The results preview of the next query\n          @binding {number} totalResults - The total results of the search request\n    -->\n    <slot\n      :suggestion=\"suggestion\"\n      :results=\"suggestionResults.items\"\n      :total-results=\"suggestionResults.totalResults\"\n    >\n      <li\n        v-for=\"result in suggestionResults.items\"\n        :key=\"result.id\"\n        class=\"x-next-query-preview__item\"\n        data-test=\"next-query-preview-item\"\n      >\n        <!--\n          @slot Next Query Preview result slot.\n              @binding {Result} result - A Next Query Preview result\n        -->\n        <slot name=\"result\" :result=\"result\">\n          <span data-test=\"result-name\">{{ result.name }}</span>\n        </slot>\n      </li>\n    </slot>\n  </ul>\n</template>\n\n<script lang=\"ts\">\nimport type { NextQuery, PreviewResults } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent, onMounted } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { nextQueriesXModule } from '../x-module'\n\n/**\n * Retrieves a preview of the results of a next query and exposes them in the default slot,\n * along with the next query and the totalResults of the search request.\n * By default, it renders the names of the results.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'NextQueryPreview',\n  xModule: nextQueriesXModule.name,\n  props: {\n    /**\n     * The next query to retrieve the results preview.\n     *\n     * @public\n     */\n    suggestion: {\n      type: Object as PropType<NextQuery>,\n      required: true,\n    },\n    /**\n     * Number of suggestion results to be rendered.\n     *\n     * @public\n     */\n    maxItemsToRender: Number,\n  },\n  setup(props) {\n    const $x = use$x()\n    /**\n     * The results preview of the next queries mounted.\n     * It is a dictionary, indexed by the next query query.\n     */\n    const { resultsPreview } = useState('nextQueries')\n\n    /**\n     * The component emits the NextQueryPreviewMountedHook event to retrieve the results preview\n     * of the next query.\n     */\n    onMounted(() => $x.emit('NextQueryPreviewMountedHook', props.suggestion.query))\n\n    /**\n     * Gets from the state the results preview of the next query.\n     *\n     * @returns The results preview of the actual next query.\n     */\n    const suggestionResults = computed((): PreviewResults | undefined => {\n      const previewResults = resultsPreview.value[props.suggestion.query] as PreviewResults\n\n      return previewResults\n        ? {\n            ...previewResults,\n            items: previewResults.items.slice(0, props.maxItemsToRender),\n          }\n        : undefined\n    })\n\n    return { suggestionResults }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the\n[`NextQueryPreviewMountedHook`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\nwhen it is mounted.\n\n## See it in action\n\nHere you have a basic example of how the NextQueryPreview is rendered. Keep in mind that this\ncomponent is intended to be used overriding its default slot. By default it will only render the\nnames of the results.\n\n```vue live\n<template>\n  <NextQueryPreview :suggestion=\"suggestion\" />\n</template>\n\n<script>\nimport { NextQueryPreview } from '@empathyco/x-components/next-queries'\n\nexport default {\n  name: 'NextQueryPreviewDemo',\n  components: {\n    NextQueryPreview,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'NextQuery',\n        query: 'tshirt',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with the default slot\n\nIn this example, the results will be rendered inside a sliding panel.\n\n```vue live\n<template>\n  <NextQueryPreview :suggestion=\"suggestion\" #default=\"{ totalResults, results }\">\n    <p>Total results: {{ totalResults }}</p>\n    <SlidingPanel :resetOnContentChange=\"false\">\n      <article\n        v-for=\"result in results\"\n        :key=\"result.id\"\n        class=\"x-result\"\n        style=\"max-width: 300px; overflow: hidden\"\n      >\n        <BaseResultLink :result=\"result\">\n          <BaseResultImage :result=\"result\" class=\"x-result__picture\" />\n        </BaseResultLink>\n        <div class=\"x-result__description\">\n          <BaseResultLink :result=\"result\">\n            <h1 class=\"x-title3\">{{ result.name }}</h1>\n          </BaseResultLink>\n        </div>\n      </article>\n    </SlidingPanel>\n  </NextQueryPreview>\n</template>\n\n<script>\nimport { NextQueryPreview } from '@empathyco/x-components/next-queries'\nimport { SlidingPanel, BaseResultLink, BaseResultImage } from '@empathyco/x-components'\n\nexport default {\n  name: 'NextQueryPreviewDemoOverridingSlot',\n  components: {\n    NextQueryPreview,\n    SlidingPanel,\n    BaseResultLink,\n    BaseResultImage,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'NextQuery',\n        query: 'tshirt',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with the result slot\n\nThe component exposes a slot to override the result content, without modifying the list.\n\nIn this example, the ID of the results will be rendered along with the name.\n\n```vue\n<template>\n  <NextQueryPreview :suggestion=\"suggestion\" #result=\"{ result }\">\n    <span>{{ result.id }}</span>\n    <span>{{ result.name }}</span>\n  </NextQueryPreview>\n</template>\n\n<script>\nimport { NextQueryPreview } from '@empathyco/x-components/next-queries'\n\nexport default {\n  name: 'NextQueryPreviewDemoOverridingResultSlot',\n  components: {\n    NextQueryPreview,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'NextQuery',\n        query: 'tshirt',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with props\n\nIn this example, the suggestions has been limited to render a maximum of 4 items.\n\n```vue\n<template>\n  <NextQueryPreview\n    :maxItemsToRender=\"maxItemsToRender\"\n    :suggestion=\"suggestion\"\n    #default=\"{ results }\"\n  >\n    <BaseGrid #default=\"{ item }\" :items=\"results\">\n      <BaseResultLink :result=\"item\">\n        <BaseResultImage :result=\"item\" />\n      </BaseResultLink>\n    </BaseGrid>\n  </NextQueryPreview>\n</template>\n\n<script>\nimport { BaseGrid, BaseResultImage, BaseResultLink } from '@empathyco/x-components'\nimport { NextQueryPreview } from '@empathyco/x-components/next-queries'\n\nexport default {\n  name: 'NextQueryPreviewDemo',\n  components: {\n    BaseGrid,\n    BaseResultImage,\n    BaseResultLink,\n    NextQueryPreview,\n  },\n  data() {\n    return {\n      maxItemsToRender: 4,\n      suggestion: {\n        modelName: 'NextQuery',\n        query: 'tshirt',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_renderSlot","suggestionResults","_Fragment","_renderList","_createCommentVNode"],"mappings":";;;;MAC+B,UAAU,GAAA;AAAA,EAAqB,GAAK,EAAA,CAAA;AAAA,EAAA,WAAA,EAAA,oBAAA;;;;AAAjE,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EA2BK,QA3BL,KA2BK,EAAA,QAAA,EAAA;AApBH,EAAA,OAAA,IAAA,CAAA,iBAAA,IAAAA,SAAA,IACaC,kBAAY,CAAA,IAAA,EAAA,UAAA,EAAA;AAAA,IAAAC,UAAA,CACbC,IAAkB,CAAA,MAAA,EAAA,SAAA,EAAA;AAAA,MAC3B,YAAa,IAAEA,CAAAA,UAAAA;AAAAA,MAgBX,OAAA,EAAA,IAAA,CAAA,iBAAA,CAAA,KAAA;AAAA,MAdL,YAAA,EAAA,IAAA,CAAA,iBAAA,CAAA,YAAA;AAAA,KAAA,EAAA,MAAA;AAEQ,OAAAH,SAAA,CAAA,IAAO,CAAE,EAAAC,kBAAA;AAAA,QAAAG,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,iBAAA,CAAA,KAAA,EAAA,CAAA,MAAA,KAAA;AACV,UAAA,OAAAL,SAAA,EAA6B,EAAAC,kBAAA,CAAA,IAAA,EAAA;AAAA,YAClC,GAAS,EAAA,MAAA,CAAA,EAAA;AAAA,YAAA,KAAA,EAAA,4BAAA;YAMT,WAEO,EAAA,yBAAA;AAAA,WAAA,EAAA;;;;;;;;;;;;;;;AAzBf,KAAA,CAAA;AAAA,GAAA,CAAA,IAAAK,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

package/js/x-modules/next-queries/components/next-query-preview.vue2.js

@@ -1,7 +1,7 @@
 import { defineComponent, onMounted, computed } from 'vue';
-import { nextQueriesXModule } from '../x-module.js';
 import { use$x } from '../../../composables/use-_x.js';
 import { useState } from '../../../composables/use-state.js';
+import { nextQueriesXModule } from '../x-module.js';
 
 /**
  * Retrieves a preview of the results of a next query and exposes them in the default slot,
@@ -21,14 +21,14 @@ var _sfc_main = defineComponent({
          */
         suggestion: {
             type: Object,
-            required: true
+            required: true,
         },
         /**
          * Number of suggestion results to be rendered.
          *
          * @public
          */
-        maxItemsToRender: Number
+        maxItemsToRender: Number,
     },
     setup(props) {
         const $x = use$x();
@@ -36,7 +36,7 @@ var _sfc_main = defineComponent({
          * The results preview of the next queries mounted.
          * It is a dictionary, indexed by the next query query.
          */
-        const { resultsPreview } = useState('nextQueries', ['resultsPreview']);
+        const { resultsPreview } = useState('nextQueries');
         /**
          * The component emits the NextQueryPreviewMountedHook event to retrieve the results preview
          * of the next query.
@@ -52,12 +52,12 @@ var _sfc_main = defineComponent({
             return previewResults
                 ? {
                     ...previewResults,
-                    items: previewResults.items.slice(0, props.maxItemsToRender)
+                    items: previewResults.items.slice(0, props.maxItemsToRender),
                 }
                 : undefined;
         });
         return { suggestionResults };
-    }
+    },
 });
 
 export { _sfc_main as default };

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

@@ -1 +1 @@
-{"version":3,"file":"next-query-preview.vue2.js","sources":["../../../../../src/x-modules/next-queries/components/next-query-preview.vue"],"sourcesContent":["<template>\n  <ul v-if=\"suggestionResults\" data-test=\"next-query-preview\" class=\"x-next-query-preview\">\n    <!--\n      @slot Next Query Preview default slot.\n          @binding {NextQuery} suggestion - Next Query suggestion data\n          @binding {Result[]} results - The results preview of the next query\n          @binding {number} totalResults - The total results of the search request\n    -->\n    <slot\n      :suggestion=\"suggestion\"\n      :results=\"suggestionResults.items\"\n      :totalResults=\"suggestionResults.totalResults\"\n    >\n      <li\n        v-for=\"result in suggestionResults.items\"\n        :key=\"result.id\"\n        class=\"x-next-query-preview__item\"\n        data-test=\"next-query-preview-item\"\n      >\n        <!--\n          @slot Next Query Preview result slot.\n              @binding {Result} result - A Next Query Preview result\n        -->\n        <slot name=\"result\" :result=\"result\">\n          <span data-test=\"result-name\">{{ result.name }}</span>\n        </slot>\n      </li>\n    </slot>\n  </ul>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, onMounted, PropType } from 'vue';\n  import { NextQuery, PreviewResults } from '@empathyco/x-types';\n  import { nextQueriesXModule } from '../x-module';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n\n  /**\n   * Retrieves a preview of the results of a next query and exposes them in the default slot,\n   * along with the next query and the totalResults of the search request.\n   * By default, it renders the names of the results.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'NextQueryPreview',\n    xModule: nextQueriesXModule.name,\n    props: {\n      /**\n       * The next query to retrieve the results preview.\n       *\n       * @public\n       */\n      suggestion: {\n        type: Object as PropType<NextQuery>,\n        required: true\n      },\n      /**\n       * Number of suggestion results to be rendered.\n       *\n       * @public\n       */\n      maxItemsToRender: Number\n    },\n    setup(props) {\n      const $x = use$x();\n      /**\n       * The results preview of the next queries mounted.\n       * It is a dictionary, indexed by the next query query.\n       */\n      const { resultsPreview } = useState('nextQueries', ['resultsPreview']);\n\n      /**\n       * The component emits the NextQueryPreviewMountedHook event to retrieve the results preview\n       * of the next query.\n       */\n      onMounted(() => $x.emit('NextQueryPreviewMountedHook', props.suggestion.query));\n\n      /**\n       * Gets from the state the results preview of the next query.\n       *\n       * @returns The results preview of the actual next query.\n       */\n      const suggestionResults = computed((): PreviewResults | undefined => {\n        const previewResults = resultsPreview.value[props.suggestion.query] as PreviewResults;\n\n        return previewResults\n          ? {\n              ...previewResults,\n              items: previewResults.items.slice(0, props.maxItemsToRender)\n            }\n          : undefined;\n      });\n\n      return { suggestionResults };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the\n[`NextQueryPreviewMountedHook`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\nwhen it is mounted.\n\n## See it in action\n\nHere you have a basic example of how the NextQueryPreview is rendered. Keep in mind that this\ncomponent is intended to be used overriding its default slot. By default it will only render the\nnames of the results.\n\n```vue live\n<template>\n  <NextQueryPreview :suggestion=\"suggestion\" />\n</template>\n\n<script>\n  import { NextQueryPreview } from '@empathyco/x-components/next-queries';\n\n  export default {\n    name: 'NextQueryPreviewDemo',\n    components: {\n      NextQueryPreview\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'NextQuery',\n          query: 'tshirt',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with the default slot\n\nIn this example, the results will be rendered inside a sliding panel.\n\n```vue live\n<template>\n  <NextQueryPreview :suggestion=\"suggestion\" #default=\"{ totalResults, results }\">\n    <p>Total results: {{ totalResults }}</p>\n    <SlidingPanel :resetOnContentChange=\"false\">\n      <article\n        v-for=\"result in results\"\n        :key=\"result.id\"\n        class=\"x-result\"\n        style=\"max-width: 300px; overflow: hidden\"\n      >\n        <BaseResultLink :result=\"result\">\n          <BaseResultImage :result=\"result\" class=\"x-result__picture\" />\n        </BaseResultLink>\n        <div class=\"x-result__description\">\n          <BaseResultLink :result=\"result\">\n            <h1 class=\"x-title3\">{{ result.name }}</h1>\n          </BaseResultLink>\n        </div>\n      </article>\n    </SlidingPanel>\n  </NextQueryPreview>\n</template>\n\n<script>\n  import { NextQueryPreview } from '@empathyco/x-components/next-queries';\n  import { SlidingPanel, BaseResultLink, BaseResultImage } from '@empathyco/x-components';\n\n  export default {\n    name: 'NextQueryPreviewDemoOverridingSlot',\n    components: {\n      NextQueryPreview,\n      SlidingPanel,\n      BaseResultLink,\n      BaseResultImage\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'NextQuery',\n          query: 'tshirt',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with the result slot\n\nThe component exposes a slot to override the result content, without modifying the list.\n\nIn this example, the ID of the results will be rendered along with the name.\n\n```vue\n<template>\n  <NextQueryPreview :suggestion=\"suggestion\" #result=\"{ result }\">\n    <span>{{ result.id }}</span>\n    <span>{{ result.name }}</span>\n  </NextQueryPreview>\n</template>\n\n<script>\n  import { NextQueryPreview } from '@empathyco/x-components/next-queries';\n\n  export default {\n    name: 'NextQueryPreviewDemoOverridingResultSlot',\n    components: {\n      NextQueryPreview\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'NextQuery',\n          query: 'tshirt',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the suggestions has been limited to render a maximum of 4 items.\n\n```vue\n<template>\n  <NextQueryPreview\n    :maxItemsToRender=\"maxItemsToRender\"\n    :suggestion=\"suggestion\"\n    #default=\"{ results }\"\n  >\n    <BaseGrid #default=\"{ item }\" :items=\"results\">\n      <BaseResultLink :result=\"item\">\n        <BaseResultImage :result=\"item\" />\n      </BaseResultLink>\n    </BaseGrid>\n  </NextQueryPreview>\n</template>\n\n<script>\n  import { BaseGrid, BaseResultImage, BaseResultLink } from '@empathyco/x-components';\n  import { NextQueryPreview } from '@empathyco/x-components/next-queries';\n\n  export default {\n    name: 'NextQueryPreviewDemo',\n    components: {\n      BaseGrid,\n      BaseResultImage,\n      BaseResultLink,\n      NextQueryPreview\n    },\n    data() {\n      return {\n        maxItemsToRender: 4,\n        suggestion: {\n          modelName: 'NextQuery',\n          query: 'tshirt',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAsCE;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,kBAAkB;IACxB,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAA6B;AACnC,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,gBAAgB,EAAE,MAAK;AACxB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;AAClB;;;AAGE;AACF,QAAA,MAAM,EAAE,cAAe,EAAA,GAAI,QAAQ,CAAC,aAAa,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAA;AAEtE;;;AAGE;AACF,QAAA,SAAS,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,6BAA6B,EAAE,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAA;AAE/E;;;;AAIE;AACF,QAAA,MAAM,iBAAgB,GAAI,QAAQ,CAAC,MAAkC;AACnE,YAAA,MAAM,cAAa,GAAI,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAmB,CAAA;AAErF,YAAA,OAAO,cAAa;AAClB,kBAAE;AACE,oBAAA,GAAG,cAAc;AACjB,oBAAA,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAA;AAC7D,iBAAA;kBACA,SAAS,CAAA;AACf,SAAC,CAAC,CAAA;QAEF,OAAO,EAAE,iBAAgB,EAAG,CAAA;KAC9B;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"next-query-preview.vue2.js","sources":["../../../../../src/x-modules/next-queries/components/next-query-preview.vue"],"sourcesContent":["<template>\n  <ul v-if=\"suggestionResults\" data-test=\"next-query-preview\" class=\"x-next-query-preview\">\n    <!--\n      @slot Next Query Preview default slot.\n          @binding {NextQuery} suggestion - Next Query suggestion data\n          @binding {Result[]} results - The results preview of the next query\n          @binding {number} totalResults - The total results of the search request\n    -->\n    <slot\n      :suggestion=\"suggestion\"\n      :results=\"suggestionResults.items\"\n      :total-results=\"suggestionResults.totalResults\"\n    >\n      <li\n        v-for=\"result in suggestionResults.items\"\n        :key=\"result.id\"\n        class=\"x-next-query-preview__item\"\n        data-test=\"next-query-preview-item\"\n      >\n        <!--\n          @slot Next Query Preview result slot.\n              @binding {Result} result - A Next Query Preview result\n        -->\n        <slot name=\"result\" :result=\"result\">\n          <span data-test=\"result-name\">{{ result.name }}</span>\n        </slot>\n      </li>\n    </slot>\n  </ul>\n</template>\n\n<script lang=\"ts\">\nimport type { NextQuery, PreviewResults } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent, onMounted } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { nextQueriesXModule } from '../x-module'\n\n/**\n * Retrieves a preview of the results of a next query and exposes them in the default slot,\n * along with the next query and the totalResults of the search request.\n * By default, it renders the names of the results.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'NextQueryPreview',\n  xModule: nextQueriesXModule.name,\n  props: {\n    /**\n     * The next query to retrieve the results preview.\n     *\n     * @public\n     */\n    suggestion: {\n      type: Object as PropType<NextQuery>,\n      required: true,\n    },\n    /**\n     * Number of suggestion results to be rendered.\n     *\n     * @public\n     */\n    maxItemsToRender: Number,\n  },\n  setup(props) {\n    const $x = use$x()\n    /**\n     * The results preview of the next queries mounted.\n     * It is a dictionary, indexed by the next query query.\n     */\n    const { resultsPreview } = useState('nextQueries')\n\n    /**\n     * The component emits the NextQueryPreviewMountedHook event to retrieve the results preview\n     * of the next query.\n     */\n    onMounted(() => $x.emit('NextQueryPreviewMountedHook', props.suggestion.query))\n\n    /**\n     * Gets from the state the results preview of the next query.\n     *\n     * @returns The results preview of the actual next query.\n     */\n    const suggestionResults = computed((): PreviewResults | undefined => {\n      const previewResults = resultsPreview.value[props.suggestion.query] as PreviewResults\n\n      return previewResults\n        ? {\n            ...previewResults,\n            items: previewResults.items.slice(0, props.maxItemsToRender),\n          }\n        : undefined\n    })\n\n    return { suggestionResults }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the\n[`NextQueryPreviewMountedHook`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\nwhen it is mounted.\n\n## See it in action\n\nHere you have a basic example of how the NextQueryPreview is rendered. Keep in mind that this\ncomponent is intended to be used overriding its default slot. By default it will only render the\nnames of the results.\n\n```vue live\n<template>\n  <NextQueryPreview :suggestion=\"suggestion\" />\n</template>\n\n<script>\nimport { NextQueryPreview } from '@empathyco/x-components/next-queries'\n\nexport default {\n  name: 'NextQueryPreviewDemo',\n  components: {\n    NextQueryPreview,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'NextQuery',\n        query: 'tshirt',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with the default slot\n\nIn this example, the results will be rendered inside a sliding panel.\n\n```vue live\n<template>\n  <NextQueryPreview :suggestion=\"suggestion\" #default=\"{ totalResults, results }\">\n    <p>Total results: {{ totalResults }}</p>\n    <SlidingPanel :resetOnContentChange=\"false\">\n      <article\n        v-for=\"result in results\"\n        :key=\"result.id\"\n        class=\"x-result\"\n        style=\"max-width: 300px; overflow: hidden\"\n      >\n        <BaseResultLink :result=\"result\">\n          <BaseResultImage :result=\"result\" class=\"x-result__picture\" />\n        </BaseResultLink>\n        <div class=\"x-result__description\">\n          <BaseResultLink :result=\"result\">\n            <h1 class=\"x-title3\">{{ result.name }}</h1>\n          </BaseResultLink>\n        </div>\n      </article>\n    </SlidingPanel>\n  </NextQueryPreview>\n</template>\n\n<script>\nimport { NextQueryPreview } from '@empathyco/x-components/next-queries'\nimport { SlidingPanel, BaseResultLink, BaseResultImage } from '@empathyco/x-components'\n\nexport default {\n  name: 'NextQueryPreviewDemoOverridingSlot',\n  components: {\n    NextQueryPreview,\n    SlidingPanel,\n    BaseResultLink,\n    BaseResultImage,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'NextQuery',\n        query: 'tshirt',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with the result slot\n\nThe component exposes a slot to override the result content, without modifying the list.\n\nIn this example, the ID of the results will be rendered along with the name.\n\n```vue\n<template>\n  <NextQueryPreview :suggestion=\"suggestion\" #result=\"{ result }\">\n    <span>{{ result.id }}</span>\n    <span>{{ result.name }}</span>\n  </NextQueryPreview>\n</template>\n\n<script>\nimport { NextQueryPreview } from '@empathyco/x-components/next-queries'\n\nexport default {\n  name: 'NextQueryPreviewDemoOverridingResultSlot',\n  components: {\n    NextQueryPreview,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'NextQuery',\n        query: 'tshirt',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with props\n\nIn this example, the suggestions has been limited to render a maximum of 4 items.\n\n```vue\n<template>\n  <NextQueryPreview\n    :maxItemsToRender=\"maxItemsToRender\"\n    :suggestion=\"suggestion\"\n    #default=\"{ results }\"\n  >\n    <BaseGrid #default=\"{ item }\" :items=\"results\">\n      <BaseResultLink :result=\"item\">\n        <BaseResultImage :result=\"item\" />\n      </BaseResultLink>\n    </BaseGrid>\n  </NextQueryPreview>\n</template>\n\n<script>\nimport { BaseGrid, BaseResultImage, BaseResultLink } from '@empathyco/x-components'\nimport { NextQueryPreview } from '@empathyco/x-components/next-queries'\n\nexport default {\n  name: 'NextQueryPreviewDemo',\n  components: {\n    BaseGrid,\n    BaseResultImage,\n    BaseResultLink,\n    NextQueryPreview,\n  },\n  data() {\n    return {\n      maxItemsToRender: 4,\n      suggestion: {\n        modelName: 'NextQuery',\n        query: 'tshirt',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAuCA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,kBAAkB;IACxB,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAA6B;AACnC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD;;;;AAIE;AACF,QAAA,gBAAgB,EAAE,MAAM;AACzB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC,CAAA;AACjB;;;AAGE;QACF,MAAM,EAAE,gBAAiB,GAAE,QAAQ,CAAC,aAAa,CAAA,CAAA;AAEjD;;;AAGE;AACF,QAAA,SAAS,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,6BAA6B,EAAE,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,CAAA,CAAA;AAE9E;;;;AAIE;AACF,QAAA,MAAM,iBAAgB,GAAI,QAAQ,CAAC,MAAkC;AACnE,YAAA,MAAM,cAAa,GAAI,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAkB,CAAA;AAEpF,YAAA,OAAO,cAAa;AAClB,kBAAE;AACE,oBAAA,GAAG,cAAc;AACjB,oBAAA,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC;AAC9D,iBAAA;kBACA,SAAQ,CAAA;AACd,SAAC,CAAA,CAAA;QAED,OAAO,EAAE,iBAAkB,EAAA,CAAA;KAC5B;AACF,CAAA,CAAA;;;;"}