@empathyco/x-components 3.0.0-alpha.20 → 3.0.0-alpha.200

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

@@ -1,82 +1,111 @@
-import { createWiring } from '../../wiring/wiring.utils.js';
 import { namespacedWireCommit, namespacedWireDispatch, namespacedWireDispatchWithoutPayload } from '../../wiring/namespaced-wires.factory.js';
 import { namespacedDebounce } from '../../wiring/namespaced-wires.operators.js';
+import { createWiring } from '../../wiring/wiring.utils.js';
 
 /**
  * `identifierResults` {@link XModuleName | XModule name}.
  *
  * @internal
  */
-var moduleName = 'identifierResults';
+const moduleName = 'identifierResults';
 /**
  * WireCommit for {@link IdentifierResultsXModule}.
  *
  * @internal
  */
-var wireCommit = namespacedWireCommit(moduleName);
+const wireCommit = namespacedWireCommit(moduleName);
 /**
  * WireDispatch for {@link IdentifierResultsXModule}.
  *
  * @internal
  */
-var wireDispatch = namespacedWireDispatch(moduleName);
+const wireDispatch = namespacedWireDispatch(moduleName);
 /**
  * WireDispatchWithoutPayload for {@link IdentifierResultsXModule}.
  *
  * @internal
  */
-var wireDispatchWithoutPayload = namespacedWireDispatchWithoutPayload(moduleName);
+const wireDispatchWithoutPayload = namespacedWireDispatchWithoutPayload(moduleName);
 /**
  * Sets the identifier-results module query.
  *
  * @public
  */
-var setIdentifierResultsQuery = wireDispatch('saveQuery');
+const setIdentifierResultsQuery = wireDispatch('saveQuery');
 /**
  * Clears the identifier-results module query.
  *
  * @public
  */
-var clearIdentifierResultsQuery = wireCommit('setQuery', '');
+const clearIdentifierResultsQuery = wireCommit('setQuery', '');
+/**
+ * Sets the identifier results state `query` from url.
+ *
+ * @public
+ */
+const setUrlParams = wireDispatch('saveQuery', ({ eventPayload: { query } }) => query);
 /**
  * Requests and stores a new set of identifier results for the {@link IdentifierResultsState.query}.
  *
  * @public
  */
-var fetchAndSaveIdentifierResultsWire = wireDispatchWithoutPayload('fetchAndSaveIdentifierResults');
+const fetchAndSaveIdentifierResultsWire = wireDispatch('fetchAndSaveIdentifierResults');
 /**
  * Cancels the {@link IdentifierResultsActions.fetchAndSaveIdentifierResults} request promise.
  *
  * @public
  */
-var cancelFetchAndSaveIdentifierResultsWire = wireDispatchWithoutPayload('cancelFetchAndSaveIdentifierResults');
+const cancelFetchAndSaveIdentifierResultsWire = wireDispatchWithoutPayload('cancelFetchAndSaveIdentifierResults');
+/**
+ * Sets the identifier results state `origin`.
+ *
+ * @public
+ */
+const saveIdentifierResultsOriginWire = wireDispatch('saveOrigin', ({ metadata }) => metadata);
+/**
+ * Sets the identifier result state `params`.
+ *
+ * @public
+ */
+const setIdentifierResultsExtraParams = wireCommit('setParams');
 /**
  * Debounce function for the module.
  */
-var moduleDebounce = namespacedDebounce(moduleName);
+const moduleDebounce = namespacedDebounce(moduleName);
 /**
  * Default wiring for the {@link IdentifierResultsXModule} module.
  *
  * @internal
  */
-var identifierResultsWiring = createWiring({
+const identifierResultsWiring = createWiring({
+    ParamsLoadedFromUrl: {
+        setUrlParams,
+        saveIdentifierResultsOriginWire
+    },
     UserIsTypingAQuery: {
-        setIdentifierResultsQueryDebounce: moduleDebounce(setIdentifierResultsQuery, function (_a) {
-            var state = _a.state;
-            return state.config.debounceInMs;
-        }, 'UserAcceptedAQuery')
+        setIdentifierResultsQueryDebounce: moduleDebounce(setIdentifierResultsQuery, ({ state }) => state.config.debounceInMs, { cancelOn: 'UserAcceptedAQuery' })
     },
     UserAcceptedAQuery: {
-        setIdentifierResultsQuery: setIdentifierResultsQuery
+        setIdentifierResultsQuery,
+        saveIdentifierResultsOriginWire
     },
     UserClearedQuery: {
-        clearIdentifierResultsQuery: clearIdentifierResultsQuery,
-        cancelFetchAndSaveIdentifierResultsWire: cancelFetchAndSaveIdentifierResultsWire
+        clearIdentifierResultsQuery,
+        cancelFetchAndSaveIdentifierResultsWire
     },
     IdentifierResultsRequestChanged: {
-        fetchAndSaveIdentifierResultsWire: fetchAndSaveIdentifierResultsWire
+        fetchAndSaveIdentifierResultsWire
+    },
+    ExtraParamsChanged: {
+        setIdentifierResultsExtraParams
+    },
+    UserClickedCloseX: {
+        clearIdentifierResultsQuery
+    },
+    UserClickedOutOfMainModal: {
+        clearIdentifierResultsQuery
     }
 });
 
-export { cancelFetchAndSaveIdentifierResultsWire, clearIdentifierResultsQuery, fetchAndSaveIdentifierResultsWire, identifierResultsWiring, setIdentifierResultsQuery };
+export { cancelFetchAndSaveIdentifierResultsWire, clearIdentifierResultsQuery, fetchAndSaveIdentifierResultsWire, identifierResultsWiring, saveIdentifierResultsOriginWire, setIdentifierResultsExtraParams, setIdentifierResultsQuery };
 //# sourceMappingURL=wiring.js.map

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

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

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

@@ -1,5 +1,5 @@
-import { identifierResultsXStoreModule } from './store/module.js';
 import { identifierResultsEmitters } from './store/emitters.js';
+import { identifierResultsXStoreModule } from './store/module.js';
 import { identifierResultsWiring } from './wiring.js';
 
 /**
@@ -8,7 +8,7 @@ import { identifierResultsWiring } from './wiring.js';
  *
  * @public
  */
-var identifierResultsXModule = {
+const identifierResultsXModule = {
     name: 'identifierResults',
     storeModule: identifierResultsXStoreModule,
     storeEmitters: identifierResultsEmitters,

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 { 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"],"names":[],"mappings":";;;;AAaA;;;;;;IAMa,wBAAwB,GAA6B;IAChE,IAAI,EAAE,mBAAmB;IACzB,WAAW,EAAE,6BAA6B;IAC1C,aAAa,EAAE,yBAAyB;IACxC,MAAM,EAAE,uBAAuB;;;;;"}
+{"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/identifier-results/x-module.ts"],"sourcesContent":["import { XModule } from '../x-modules.types';\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"],"names":[],"mappings":";;;;AAaA;;;;;;MAMa,wBAAwB,GAA6B;IAChE,IAAI,EAAE,mBAAmB;IACzB,WAAW,EAAE,6BAA6B;IAC1C,aAAa,EAAE,yBAAyB;IACxC,MAAM,EAAE,uBAAuB;;;;;"}

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

@@ -1,11 +1,11 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-import script from './next-queries-list.vue_rollup-plugin-vue=script.js';
+import script from './next-queries-list.vue_rollup-plugin-vue_script.vue.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
 
 /* script */
-var __vue_script__ = script;
+const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -14,31 +14,31 @@ var __vue_render__ = function() {
     [
       _vm._t(
         "default",
-        function() {
+        function () {
           return [
             _c("ItemsList", {
               attrs: { animation: _vm.animation, items: _vm.items },
               scopedSlots: _vm._u(
                 [
-                  _vm._l(_vm.$scopedSlots, function(_, slotName) {
+                  _vm._l(_vm.$scopedSlots, function (_, slotName) {
                     return {
                       key: slotName,
-                      fn: function(ref) {
+                      fn: function (ref) {
                         var item = ref.item;
                         return [_vm._t(slotName, null, { item: item })]
-                      }
+                      },
                     }
-                  })
+                  }),
                 ],
                 null,
                 true
-              )
-            })
+              ),
+            }),
           ]
         },
         null,
         { items: _vm.items, animation: _vm.animation }
-      )
+      ),
     ],
     2
   )
@@ -47,13 +47,13 @@ var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
 
   /* style */
-  var __vue_inject_styles__ = undefined;
+  const __vue_inject_styles__ = undefined;
   /* scoped */
-  var __vue_scope_id__ = undefined;
+  const __vue_scope_id__ = undefined;
   /* module identifier */
-  var __vue_module_identifier__ = undefined;
+  const __vue_module_identifier__ = undefined;
   /* functional template */
-  var __vue_is_functional_template__ = false;
+  const __vue_is_functional_template__ = false;
   /* style inject */
   
   /* style inject SSR */
@@ -62,7 +62,7 @@ __vue_render__._withStripped = true;
   
 
   
-  var __vue_component__ = /*#__PURE__*/__vue_normalize__(
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
     { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
     __vue_inject_styles__,
     __vue_script__,
@@ -75,5 +75,5 @@ __vue_render__._withStripped = true;
     undefined
   );
 
-export default __vue_component__;
+export { __vue_component__ as default };
 //# sourceMappingURL=next-queries-list.vue.js.map

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":["<template>\n  <NoElement>\n    <!--\n      @slot Next queries list layout.\n        @binding {SearchItem[]} items - Next queries groups plus the injected list items to\n        render.\n        @binding {Vue | string} animation - Animation to animate the elements.\n    -->\n    <slot v-bind=\"{ items, animation }\">\n      <ItemsList :animation=\"animation\" :items=\"items\">\n        <template v-for=\"(_, slotName) in $scopedSlots\" v-slot:[slotName]=\"{ item }\">\n          <slot :name=\"slotName\" :item=\"item\" />\n        </template>\n      </ItemsList>\n    </slot>\n  </NoElement>\n</template>\n\n<script lang=\"ts\">\n  import { NextQuery } from '@empathyco/x-types';\n  import { mixins } from 'vue-class-component';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { Getter } from '../../../components/decorators/store.decorators';\n  import { NoElement } from '../../../components/no-element';\n  import { ItemsListInjectionMixin } from '../../../components/items-list-injection.mixin';\n  import ItemsList from '../../../components/items-list.vue';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { groupItemsBy, ListItem } from '../../../utils';\n  import ResultsList from '../../search/components/results-list.vue';\n  import { nextQueriesXModule } from '../x-module';\n\n  /**\n   * A list of next queries.\n   */\n  interface NextQueriesGroup extends ListItem {\n    modelName: 'NextQueriesGroup';\n    nextQueries: NextQuery[];\n  }\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  @Component({\n    components: {\n      ResultsList,\n      NoElement,\n      ItemsList\n    },\n    mixins: [xComponentMixin(nextQueriesXModule)]\n  })\n  export default class NextQueriesList extends mixins(ItemsListInjectionMixin) {\n    /**\n     * Animation component that will be used to animate the next queries groups.\n     *\n     * @public\n     */\n    @Prop()\n    protected animation?: Vue | string;\n\n    /**\n     * The first index to insert a group of next queries at.\n     *\n     * @public\n     */\n    @Prop({ default: 24 })\n    public offset!: number;\n\n    /**\n     * The items cycle size to keep inserting next queries groups at.\n     *\n     * @public\n     */\n    @Prop({ default: 24 })\n    public frequency!: number;\n\n    /**\n     * The maximum amount of next queries to add in a single group.\n     *\n     * @public\n     */\n    @Prop({ default: 4 })\n    public maxNextQueriesPerGroup!: number;\n\n    /**\n     * The maximum number of groups to insert into the injected list items list.\n     *\n     * @public\n     */\n    @Prop()\n    public maxGroups!: number;\n\n    /**\n     * The state next queries.\n     *\n     * @internal\n     */\n    @Getter('nextQueries', 'nextQueries')\n    public nextQueries!: NextQuery[];\n\n    /**\n     * The grouped next queries based on the given config.\n     *\n     * @returns A list of next queries groups.\n     * @internal\n     */\n    protected get nextQueriesGroups(): NextQueriesGroup[] {\n      return Object.values(\n        groupItemsBy(this.nextQueries, (_, index) =>\n          Math.floor(index / this.maxNextQueriesPerGroup)\n        )\n      )\n        .slice(0, this.maxGroups)\n        .map(nextQueries => ({\n          modelName: 'NextQueriesGroup' as const,\n          id: nextQueries.map(nextQuery => nextQuery.query).join(','),\n          nextQueries\n        }));\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     * @internal\n     */\n    public override get items(): ListItem[] {\n      if (!this.injectedListItems) {\n        return this.nextQueriesGroups;\n      }\n\n      return this.nextQueriesGroups.reduce(\n        (items, nextQueriesGroup, index) => {\n          const targetIndex = this.offset + this.frequency * index;\n          if (targetIndex <= items.length) {\n            items.splice(targetIndex, 0, nextQueriesGroup);\n          }\n          return items;\n        },\n        [...this.injectedListItems]\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\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\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### 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 #NextQueriesGroup=\"{ 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":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"next-queries-list.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-queries-list.vue"],"sourcesContent":["<template>\n  <NoElement>\n    <!--\n      @slot Next queries list layout.\n        @binding {SearchItem[]} items - Next queries groups plus the injected list items to\n        render.\n        @binding {Vue | string} animation - Animation to animate the elements.\n    -->\n    <slot v-bind=\"{ items, animation }\">\n      <ItemsList :animation=\"animation\" :items=\"items\">\n        <template v-for=\"(_, slotName) in $scopedSlots\" v-slot:[slotName]=\"{ item }\">\n          <slot :name=\"slotName\" :item=\"item\" />\n        </template>\n      </ItemsList>\n    </slot>\n  </NoElement>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { NextQuery } from '@empathyco/x-types';\n  import { mixins } from 'vue-class-component';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { Getter } from '../../../components/decorators/store.decorators';\n  import { NoElement } from '../../../components/no-element';\n  import { ItemsListInjectionMixin } from '../../../components/items-list-injection.mixin';\n  import ItemsList from '../../../components/items-list.vue';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\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 { XInject } from '../../../components/decorators/injection.decorators';\n  import { HAS_MORE_ITEMS_KEY, QUERY_KEY } from '../../../components/decorators/injection.consts';\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  @Component({\n    components: {\n      NoElement,\n      ItemsList\n    },\n    mixins: [xComponentMixin(nextQueriesXModule)]\n  })\n  export default class NextQueriesList extends mixins(ItemsListInjectionMixin) {\n    /**\n     * Animation component that will be used to animate the next queries groups.\n     *\n     * @public\n     */\n    @Prop()\n    protected animation?: Vue | string;\n\n    /**\n     * The first index to insert a group of next queries at.\n     *\n     * @public\n     */\n    @Prop({ default: 24 })\n    public offset!: number;\n\n    /**\n     * The items cycle size to keep inserting next queries groups at.\n     *\n     * @public\n     */\n    @Prop({ default: 24 })\n    public frequency!: number;\n\n    /**\n     * The maximum amount of next queries to add in a single group.\n     *\n     * @public\n     */\n    @Prop({ default: 4 })\n    public maxNextQueriesPerGroup!: number;\n\n    /**\n     * The maximum number of groups to insert into the injected list items list.\n     *\n     * @public\n     */\n    @Prop()\n    public maxGroups!: number;\n\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     * @public\n     */\n    @Prop({ default: false })\n    public showOnlyAfterOffset!: boolean;\n\n    /**\n     * The state next queries.\n     *\n     * @internal\n     */\n    @Getter('nextQueries', 'nextQueries')\n    public nextQueries!: NextQuery[];\n\n    /**\n     * Injected query, updated when the related request(s) have succeeded.\n     */\n    @XInject(QUERY_KEY)\n    public injectedQuery!: string | undefined;\n\n    /**\n     * Indicates if there are more available results than the injected.\n     */\n    @XInject(HAS_MORE_ITEMS_KEY)\n    public hasMoreItems!: boolean;\n\n    /**\n     * The grouped next queries based on the given config.\n     *\n     * @returns A list of next queries groups.\n     * @internal\n     */\n    protected get nextQueriesGroups(): NextQueriesGroup[] {\n      return Object.values(\n        groupItemsBy(this.nextQueries, (_, index) =>\n          Math.floor(index / this.maxNextQueriesPerGroup)\n        )\n      )\n        .slice(0, this.maxGroups)\n        .map(nextQueries => ({\n          modelName: 'NextQueriesGroup' as const,\n          id: nextQueries.map(nextQuery => nextQuery.query).join(','),\n          nextQueries\n        }));\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     * @internal\n     */\n    public override get items(): ListItem[] {\n      if (!this.injectedListItems) {\n        return this.nextQueriesGroups;\n      }\n      if (this.nextQueriesAreOutdated) {\n        return this.injectedListItems;\n      }\n      if (this.hasNotEnoughListItems) {\n        return this.injectedListItems.concat(this.nextQueriesGroups[0] ?? []);\n      }\n      return this.nextQueriesGroups.reduce(\n        (items, nextQueriesGroup, index) => {\n          const targetIndex = this.offset + this.frequency * index;\n          if (targetIndex <= items.length) {\n            items.splice(targetIndex, 0, nextQueriesGroup);\n          }\n          return items;\n        },\n        [...this.injectedListItems]\n      );\n    }\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     * @internal\n     */\n    protected get nextQueriesAreOutdated(): boolean {\n      return (\n        !!this.injectedQuery &&\n        (this.$x.query.nextQueries !== this.injectedQuery ||\n          this.$x.status.nextQueries !== 'success')\n      );\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     * @internal\n     */\n    protected get hasNotEnoughListItems(): boolean {\n      return (\n        !this.showOnlyAfterOffset &&\n        !this.hasMoreItems &&\n        this.injectedListItems !== undefined &&\n        this.injectedListItems.length > 0 &&\n        this.offset > this.injectedListItems.length\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 disabled setting the `showOnlyAfterOffset` to `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":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,125 @@
+import { __decorate } from 'tslib';
+import { mixins } from 'vue-class-component';
+import { Prop, Component } from 'vue-property-decorator';
+import { Getter } from '../../../components/decorators/store.decorators.js';
+import { NoElement } from '../../../components/no-element.js';
+import { ItemsListInjectionMixin } from '../../../components/items-list-injection.mixin.js';
+import __vue_component__ from '../../../components/items-list.vue.js';
+import { xComponentMixin } from '../../../components/x-component.mixin.js';
+import { groupItemsBy } from '../../../utils/array.js';
+import { nextQueriesXModule } from '../x-module.js';
+import { XInject } from '../../../components/decorators/injection.decorators.js';
+import { QUERY_KEY, HAS_MORE_ITEMS_KEY } from '../../../components/decorators/injection.consts.js';
+
+/**
+ * Component that inserts groups of next queries in different positions of the injected search
+ * items list, based on the provided configuration.
+ *
+ * @public
+ */
+let NextQueriesList = class NextQueriesList extends mixins(ItemsListInjectionMixin) {
+    /**
+     * The grouped next queries based on the given config.
+     *
+     * @returns A list of next queries groups.
+     * @internal
+     */
+    get nextQueriesGroups() {
+        return Object.values(groupItemsBy(this.nextQueries, (_, index) => Math.floor(index / this.maxNextQueriesPerGroup)))
+            .slice(0, this.maxGroups)
+            .map(nextQueries => ({
+            modelName: 'NextQueriesGroup',
+            id: nextQueries.map(nextQuery => nextQuery.query).join(','),
+            nextQueries
+        }));
+    }
+    /**
+     * New list of {@link ListItem}s to render.
+     *
+     * @returns The new list of {@link ListItem}s with the next queries groups inserted.
+     * @internal
+     */
+    get items() {
+        if (!this.injectedListItems) {
+            return this.nextQueriesGroups;
+        }
+        if (this.nextQueriesAreOutdated) {
+            return this.injectedListItems;
+        }
+        if (this.hasNotEnoughListItems) {
+            return this.injectedListItems.concat(this.nextQueriesGroups[0] ?? []);
+        }
+        return this.nextQueriesGroups.reduce((items, nextQueriesGroup, index) => {
+            const targetIndex = this.offset + this.frequency * index;
+            if (targetIndex <= items.length) {
+                items.splice(targetIndex, 0, nextQueriesGroup);
+            }
+            return items;
+        }, [...this.injectedListItems]);
+    }
+    /**
+     * Checks if the next queries are outdated taking into account the injected query.
+     *
+     * @returns True if the next queries are outdated, false if not.
+     * @internal
+     */
+    get nextQueriesAreOutdated() {
+        return (!!this.injectedQuery &&
+            (this.$x.query.nextQueries !== this.injectedQuery ||
+                this.$x.status.nextQueries !== 'success'));
+    }
+    /**
+     * Checks if the number of items is smaller than the offset so a group
+     * should be added to the injected items list.
+     *
+     * @returns True if a group should be added, false if not.
+     * @internal
+     */
+    get hasNotEnoughListItems() {
+        return (!this.showOnlyAfterOffset &&
+            !this.hasMoreItems &&
+            this.injectedListItems !== undefined &&
+            this.injectedListItems.length > 0 &&
+            this.offset > this.injectedListItems.length);
+    }
+};
+__decorate([
+    Prop()
+], NextQueriesList.prototype, "animation", void 0);
+__decorate([
+    Prop({ default: 24 })
+], NextQueriesList.prototype, "offset", void 0);
+__decorate([
+    Prop({ default: 24 })
+], NextQueriesList.prototype, "frequency", void 0);
+__decorate([
+    Prop({ default: 4 })
+], NextQueriesList.prototype, "maxNextQueriesPerGroup", void 0);
+__decorate([
+    Prop()
+], NextQueriesList.prototype, "maxGroups", void 0);
+__decorate([
+    Prop({ default: false })
+], NextQueriesList.prototype, "showOnlyAfterOffset", void 0);
+__decorate([
+    Getter('nextQueries', 'nextQueries')
+], NextQueriesList.prototype, "nextQueries", void 0);
+__decorate([
+    XInject(QUERY_KEY)
+], NextQueriesList.prototype, "injectedQuery", void 0);
+__decorate([
+    XInject(HAS_MORE_ITEMS_KEY)
+], NextQueriesList.prototype, "hasMoreItems", void 0);
+NextQueriesList = __decorate([
+    Component({
+        components: {
+            NoElement,
+            ItemsList: __vue_component__
+        },
+        mixins: [xComponentMixin(nextQueriesXModule)]
+    })
+], NextQueriesList);
+var script = NextQueriesList;
+
+export { script as default };
+//# sourceMappingURL=next-queries-list.vue_rollup-plugin-vue_script.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"next-queries-list.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-queries-list.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { NextQuery } from '@empathyco/x-types';\nimport { mixins } from 'vue-class-component';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { Getter } from '../../../components/decorators/store.decorators';\nimport { NoElement } from '../../../components/no-element';\nimport { ItemsListInjectionMixin } from '../../../components/items-list-injection.mixin';\nimport ItemsList from '../../../components/items-list.vue';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { groupItemsBy } from '../../../utils/array';\nimport { ListItem } from '../../../utils/types';\nimport { NextQueriesGroup } from '../types';\nimport { nextQueriesXModule } from '../x-module';\nimport { XInject } from '../../../components/decorators/injection.decorators';\nimport { HAS_MORE_ITEMS_KEY, QUERY_KEY } from '../../../components/decorators/injection.consts';\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@Component({\n  components: {\n    NoElement,\n    ItemsList\n  },\n  mixins: [xComponentMixin(nextQueriesXModule)]\n})\nexport default class NextQueriesList extends mixins(ItemsListInjectionMixin) {\n  /**\n   * Animation component that will be used to animate the next queries groups.\n   *\n   * @public\n   */\n  @Prop()\n  protected animation?: Vue | string;\n\n  /**\n   * The first index to insert a group of next queries at.\n   *\n   * @public\n   */\n  @Prop({ default: 24 })\n  public offset!: number;\n\n  /**\n   * The items cycle size to keep inserting next queries groups at.\n   *\n   * @public\n   */\n  @Prop({ default: 24 })\n  public frequency!: number;\n\n  /**\n   * The maximum amount of next queries to add in a single group.\n   *\n   * @public\n   */\n  @Prop({ default: 4 })\n  public maxNextQueriesPerGroup!: number;\n\n  /**\n   * The maximum number of groups to insert into the injected list items list.\n   *\n   * @public\n   */\n  @Prop()\n  public maxGroups!: number;\n\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   * @public\n   */\n  @Prop({ default: false })\n  public showOnlyAfterOffset!: boolean;\n\n  /**\n   * The state next queries.\n   *\n   * @internal\n   */\n  @Getter('nextQueries', 'nextQueries')\n  public nextQueries!: NextQuery[];\n\n  /**\n   * Injected query, updated when the related request(s) have succeeded.\n   */\n  @XInject(QUERY_KEY)\n  public injectedQuery!: string | undefined;\n\n  /**\n   * Indicates if there are more available results than the injected.\n   */\n  @XInject(HAS_MORE_ITEMS_KEY)\n  public hasMoreItems!: boolean;\n\n  /**\n   * The grouped next queries based on the given config.\n   *\n   * @returns A list of next queries groups.\n   * @internal\n   */\n  protected get nextQueriesGroups(): NextQueriesGroup[] {\n    return Object.values(\n      groupItemsBy(this.nextQueries, (_, index) =>\n        Math.floor(index / this.maxNextQueriesPerGroup)\n      )\n    )\n      .slice(0, this.maxGroups)\n      .map(nextQueries => ({\n        modelName: 'NextQueriesGroup' as const,\n        id: nextQueries.map(nextQuery => nextQuery.query).join(','),\n        nextQueries\n      }));\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   * @internal\n   */\n  public override get items(): ListItem[] {\n    if (!this.injectedListItems) {\n      return this.nextQueriesGroups;\n    }\n    if (this.nextQueriesAreOutdated) {\n      return this.injectedListItems;\n    }\n    if (this.hasNotEnoughListItems) {\n      return this.injectedListItems.concat(this.nextQueriesGroups[0] ?? []);\n    }\n    return this.nextQueriesGroups.reduce(\n      (items, nextQueriesGroup, index) => {\n        const targetIndex = this.offset + this.frequency * index;\n        if (targetIndex <= items.length) {\n          items.splice(targetIndex, 0, nextQueriesGroup);\n        }\n        return items;\n      },\n      [...this.injectedListItems]\n    );\n  }\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   * @internal\n   */\n  protected get nextQueriesAreOutdated(): boolean {\n    return (\n      !!this.injectedQuery &&\n      (this.$x.query.nextQueries !== this.injectedQuery ||\n        this.$x.status.nextQueries !== 'success')\n    );\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   * @internal\n   */\n  protected get hasNotEnoughListItems(): boolean {\n    return (\n      !this.showOnlyAfterOffset &&\n      !this.hasMoreItems &&\n      this.injectedListItems !== undefined &&\n      this.injectedListItems.length > 0 &&\n      this.offset > this.injectedListItems.length\n    );\n  }\n}\n"],"names":["ItemsList"],"mappings":";;;;;;;;;;;;;AAmCA;;;;;;AAaA,IAAqB,eAAe,GAApC,MAAqB,eAAgB,SAAQ,MAAM,CAAC,uBAAuB,CAAC;;;;;;;IA4E1E,IAAc,iBAAiB;QAC7B,OAAO,MAAM,CAAC,MAAM,CAClB,YAAY,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,KACtC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,sBAAsB,CAAC,CAChD,CACF;aACE,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC;aACxB,GAAG,CAAC,WAAW,KAAK;YACnB,SAAS,EAAE,kBAA2B;YACtC,EAAE,EAAE,WAAW,CAAC,GAAG,CAAC,SAAS,IAAI,SAAS,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;YAC3D,WAAW;SACZ,CAAC,CAAC,CAAC;KACP;;;;;;;IAQD,IAAoB,KAAK;QACvB,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;YAC3B,OAAO,IAAI,CAAC,iBAAiB,CAAC;SAC/B;QACD,IAAI,IAAI,CAAC,sBAAsB,EAAE;YAC/B,OAAO,IAAI,CAAC,iBAAiB,CAAC;SAC/B;QACD,IAAI,IAAI,CAAC,qBAAqB,EAAE;YAC9B,OAAO,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;SACvE;QACD,OAAO,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAClC,CAAC,KAAK,EAAE,gBAAgB,EAAE,KAAK;YAC7B,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACzD,IAAI,WAAW,IAAI,KAAK,CAAC,MAAM,EAAE;gBAC/B,KAAK,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,EAAE,gBAAgB,CAAC,CAAC;aAChD;YACD,OAAO,KAAK,CAAC;SACd,EACD,CAAC,GAAG,IAAI,CAAC,iBAAiB,CAAC,CAC5B,CAAC;KACH;;;;;;;IAQD,IAAc,sBAAsB;QAClC,QACE,CAAC,CAAC,IAAI,CAAC,aAAa;aACnB,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,KAAK,IAAI,CAAC,aAAa;gBAC/C,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,WAAW,KAAK,SAAS,CAAC,EAC3C;KACH;;;;;;;;IASD,IAAc,qBAAqB;QACjC,QACE,CAAC,IAAI,CAAC,mBAAmB;YACzB,CAAC,IAAI,CAAC,YAAY;YAClB,IAAI,CAAC,iBAAiB,KAAK,SAAS;YACpC,IAAI,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC;YACjC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,iBAAiB,CAAC,MAAM,EAC3C;KACH;CACF,CAAA;AA7IC;IADC,IAAI,EAAE;kDAC4B;AAQnC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;+CACC;AAQvB;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;kDACI;AAQ1B;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;+DACkB;AAQvC;IADC,IAAI,EAAE;kDACmB;AAS1B;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;4DACY;AAQrC;IADC,MAAM,CAAC,aAAa,EAAE,aAAa,CAAC;oDACJ;AAMjC;IADC,OAAO,CAAC,SAAS,CAAC;sDACuB;AAM1C;IADC,OAAO,CAAC,kBAAkB,CAAC;qDACE;AApEX,eAAe;IAPnC,SAAS,CAAC;QACT,UAAU,EAAE;YACV,SAAS;uBACTA,iBAAS;SACV;QACD,MAAM,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;KAC9C,CAAC;GACmB,eAAe,CAoJnC;aApJoB,eAAe;;;;"}

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

@@ -1,80 +1,92 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-import script from './next-queries.vue_rollup-plugin-vue=script.js';
+import script from './next-queries.vue_rollup-plugin-vue_script.vue.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
 
 /* script */
-var __vue_script__ = script;
+const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c("BaseSuggestions", {
     staticClass: "x-next-queries",
     attrs: {
-      suggestions: _vm.nextQueries,
+      suggestions: _vm.renderedNextQueries,
       "data-test": "next-queries",
-      animation: _vm.animation
+      animation: _vm.animation,
+      maxItemsToRender: _vm.maxItemsToRender,
     },
     scopedSlots: _vm._u(
       [
         {
           key: "default",
-          fn: function(ref) {
+          fn: function (ref) {
             var suggestion = ref.suggestion;
             var index = ref.index;
             return [
               _vm._t(
                 "suggestion",
-                function() {
+                function () {
                   return [
                     _c("NextQuery", {
                       staticClass: "x-next-queries__suggestion",
-                      attrs: { suggestion: suggestion },
+                      attrs: {
+                        suggestion: suggestion,
+                        highlightCurated: _vm.highlightCurated,
+                      },
                       scopedSlots: _vm._u(
                         [
                           {
                             key: "default",
-                            fn: function() {
+                            fn: function (ref) {
+                              var suggestion = ref.suggestion;
+                              var shouldHighlightCurated =
+                                ref.shouldHighlightCurated;
                               return [
                                 _vm._t("suggestion-content", null, null, {
                                   suggestion: suggestion,
-                                  index: index
-                                })
+                                  shouldHighlightCurated:
+                                    shouldHighlightCurated,
+                                  index: index,
+                                }),
                               ]
                             },
-                            proxy: true
-                          }
+                          },
                         ],
                         null,
                         true
-                      )
-                    })
+                      ),
+                    }),
                   ]
                 },
                 null,
-                { suggestion: suggestion, index: index }
-              )
+                {
+                  suggestion: suggestion,
+                  highlightCurated: _vm.highlightCurated,
+                  index: index,
+                }
+              ),
             ]
-          }
-        }
+          },
+        },
       ],
       null,
       true
-    )
+    ),
   })
 };
 var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
 
   /* style */
-  var __vue_inject_styles__ = undefined;
+  const __vue_inject_styles__ = undefined;
   /* scoped */
-  var __vue_scope_id__ = undefined;
+  const __vue_scope_id__ = undefined;
   /* module identifier */
-  var __vue_module_identifier__ = undefined;
+  const __vue_module_identifier__ = undefined;
   /* functional template */
-  var __vue_is_functional_template__ = false;
+  const __vue_is_functional_template__ = false;
   /* style inject */
   
   /* style inject SSR */
@@ -83,7 +95,7 @@ __vue_render__._withStripped = true;
   
 
   
-  var __vue_component__ = /*#__PURE__*/__vue_normalize__(
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
     { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
     __vue_inject_styles__,
     __vue_script__,
@@ -96,5 +108,5 @@ __vue_render__._withStripped = true;
     undefined
   );
 
-export default __vue_component__;
+export { __vue_component__ as default };
 //# sourceMappingURL=next-queries.vue.js.map

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

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