@empathyco/x-components 3.0.0-alpha.186 → 3.0.0-alpha.188

package/CHANGELOG.md

@@ -3,6 +3,32 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-alpha.188](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.187...@empathyco/x-components@3.0.0-alpha.188) (2022-10-05)
+
+### Bug Fixes
+
+- wait for the extra params to make the initial requests (#754)
+  ([468a61b](https://github.com/empathyco/x/commit/468a61b69e11b3917a33d44bd415a5ea14c5c409)),
+  closes [EX-6977](https://searchbroker.atlassian.net/browse/EX-6977)
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [3.0.0-alpha.187](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.186...@empathyco/x-components@3.0.0-alpha.187) (2022-10-05)
+
+### Features
+
+- **query-preview:** Add `debounceTimeMs` to `QueryPreview` component. (#752)
+  ([ddca375](https://github.com/empathyco/x/commit/ddca375201056d374515b7426df1fac3a1ecf6c1)),
+  closes [EX-7049](https://searchbroker.atlassian.net/browse/EX-7049)
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 ## [3.0.0-alpha.186](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.185...@empathyco/x-components@3.0.0-alpha.186) (2022-10-03)
 
 ### Features

package/docs/API-reference/api/x-components.querypreview.debouncetimems.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [QueryPreview](./x-components.querypreview.md) &gt; [debounceTimeMs](./x-components.querypreview.debouncetimems.md)
+
+## QueryPreview.debounceTimeMs property
+
+Debounce time in milliseconds for triggering the search requests. It will default to 0 to fit the most common use case (pre-search), and it would work properly with a 250 value inside empathize.
+
+<b>Signature:</b>
+
+```typescript
+debounceTimeMs: number;
+```

package/docs/API-reference/api/x-components.querypreview.md

@@ -18,18 +18,12 @@ export default class QueryPreview extends Vue
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
 |  [config](./x-components.querypreview.config.md) |  | [QueriesPreviewConfig](./x-components.queriespreviewconfig.md) | As the request is handled in this component, we need the config that will be used in the request. |
+|  [debounceTimeMs](./x-components.querypreview.debouncetimems.md) |  | number | Debounce time in milliseconds for triggering the search requests. It will default to 0 to fit the most common use case (pre-search), and it would work properly with a 250 value inside empathize. |
 |  [maxItemsToRender?](./x-components.querypreview.maxitemstorender.md) |  | number | <i>(Optional)</i> Number of query preview results to be rendered. |
 |  [params](./x-components.querypreview.params.md) |  | Dictionary&lt;unknown&gt; | As the request is handled in this component, we need the extra params that will be used in the request. |
 |  [previewResults](./x-components.querypreview.previewresults.md) |  | Dictionary&lt;[QueryPreviewItem](./x-components.querypreviewitem.md)<!-- -->&gt; | The results preview of the queries preview mounted. It is a dictionary, indexed by the query preview query. |
 |  [query](./x-components.querypreview.query.md) |  | string | The query to retrieve the results preview. |
-|  [queryFeature?](./x-components.querypreview.queryfeature.md) |  | [QueryFeature](./x-components.queryfeature.md) | <i>(Optional)</i> . The origin property for the request |
-|  [queryPreviewRequest](./x-components.querypreview.querypreviewrequest.md) |  | SearchRequest | The computed request object to be used to retrieve the query preview results. |
+|  [queryFeature?](./x-components.querypreview.queryfeature.md) |  | [QueryFeature](./x-components.queryfeature.md) | <i>(Optional)</i> The origin property for the request. |
 |  [queryPreviewResults](./x-components.querypreview.querypreviewresults.md) |  | Partial&lt;[QueryPreviewItem](./x-components.querypreviewitem.md)<!-- -->&gt; \| undefined | Gets from the state the results preview of the query preview. |
 |  [results](./x-components.querypreview.results.md) |  | Result\[\] \| undefined | The results to render from the state. |
 
-## Methods
-
-|  Method | Modifiers | Description |
-|  --- | --- | --- |
-|  [mounted()](./x-components.querypreview.mounted.md) |  |  |
-

package/docs/API-reference/api/x-components.querypreview.queryfeature.md

@@ -4,7 +4,7 @@
 
 ## QueryPreview.queryFeature property
 
-. The origin property for the request
+The origin property for the request.
 
 <b>Signature:</b>
 

package/docs/API-reference/components/queries-preview/x-components.query-preview.md

@@ -12,11 +12,12 @@ By default, it renders the names of the results.
 
 ## Props
 
-| Name                          | Description                                     | Type                      | Default       |
-| ----------------------------- | ----------------------------------------------- | ------------------------- | ------------- |
-| <code>query</code>            | The query to retrieve the results preview.      | <code>string</code>       | <code></code> |
-| <code>queryFeature</code>     |                                                 | <code>QueryFeature</code> | <code></code> |
-| <code>maxItemsToRender</code> | Number of query preview results to be rendered. | <code>number</code>       | <code></code> |
+| Name                          | Description                                                                                                                                                                                                  | Type                      | Default        |
+| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------- | -------------- |
+| <code>query</code>            | The query to retrieve the results preview.                                                                                                                                                                   | <code>string</code>       | <code></code>  |
+| <code>queryFeature</code>     | The origin property for the request.                                                                                                                                                                         | <code>QueryFeature</code> | <code></code>  |
+| <code>maxItemsToRender</code> | Number of query preview results to be rendered.                                                                                                                                                              | <code>number</code>       | <code></code>  |
+| <code>debounceTimeMs</code>   | Debounce time in milliseconds for triggering the search requests.<br />It will default to 0 to fit the most common use case (pre-search),<br />and it would work properly with a 250 value inside empathize. | <code>number</code>       | <code>0</code> |
 
 ## Slots
 

package/js/plugins/x-emitters.js

@@ -16,20 +16,15 @@ function registerStoreEmitters({ name, storeEmitters, storeModule }, bus, store)
     const safeGettersProxy = getGettersProxyFromModule(store.getters, name, storeModule);
     forEach(storeEmitters, (event, stateSelector) => {
         const { selector, immediate, filter, ...options } = normalizeStateSelector(stateSelector, event);
-        const emit = (value, oldValue) => {
-            bus.emit(event, value, { moduleName: name, oldValue });
-        };
         const watcherSelector = () => selector(store.state.x[name], safeGettersProxy);
-        const debouncedEffect = debounceWatcherEffect(event, (newValue, oldValue) => {
+        const emit = debounceWatcherEffect(event, (newValue, oldValue) => {
             if (filter(newValue, oldValue)) {
-                emit(newValue, oldValue);
+                bus.emit(event, newValue, { moduleName: name, oldValue });
             }
         });
-        store.watch(watcherSelector, debouncedEffect, options);
+        store.watch(watcherSelector, emit, options);
         if (immediate) {
-            Promise.resolve().then(() => {
-                emit(watcherSelector());
-            });
+            emit(watcherSelector());
         }
     });
 }

package/js/plugins/x-emitters.js.map

@@ -1 +1 @@
-{"version":3,"file":"x-emitters.js","sources":["../../../src/plugins/x-emitters.ts"],"sourcesContent":["import { forEach, Dictionary } from '@empathyco/x-utils';\nimport { Store } from 'vuex';\nimport { getGettersProxyFromModule } from '../store/utils/getters-proxy.utils';\nimport { AnySimpleStateSelector, AnyStateSelector } from '../store/utils/store-emitters.utils';\nimport { debounce } from '../utils/debounce';\nimport { DebouncedFunction } from '../utils/types';\nimport { XEvent, XEventPayload } from '../wiring/events.types';\nimport { AnyXModule } from '../x-modules/x-modules.types';\nimport { XBus } from './x-bus.types';\n\n/**\n * Registers the store emitters, making them emit the event when the part of the state selected\n * changes.\n *\n * @param xModule - The {@link XModule} to register its Store Emitters.\n * @param bus - The {@Link XBus} to emit the events by the Emitters.\n * @param store - The Vuex store to access to state and getters to watch them.\n *\n * @internal\n */\nexport function registerStoreEmitters(\n  { name, storeEmitters, storeModule }: AnyXModule,\n  bus: XBus,\n  store: Store<any>\n): void {\n  const safeGettersProxy = getGettersProxyFromModule(store.getters, name, storeModule);\n  forEach(storeEmitters, (event, stateSelector: AnySimpleStateSelector | AnyStateSelector) => {\n    const { selector, immediate, filter, ...options } = normalizeStateSelector(\n      stateSelector,\n      event\n    );\n\n    const emit = (\n      value: XEventPayload<typeof event>,\n      oldValue?: XEventPayload<typeof event>\n    ): void => {\n      bus.emit(event, value, { moduleName: name, oldValue });\n    };\n    const watcherSelector = (): XEventPayload<typeof event> =>\n      selector(store.state.x[name], safeGettersProxy);\n    const debouncedEffect = debounceWatcherEffect(event, (newValue, oldValue) => {\n      if (filter(newValue, oldValue)) {\n        emit(newValue, oldValue);\n      }\n    });\n\n    store.watch(watcherSelector, debouncedEffect, options);\n\n    if (immediate) {\n      Promise.resolve().then(() => {\n        emit(watcherSelector());\n      });\n    }\n  });\n}\n\n/**\n * This function \"wraps\" the watcher effect (the callback of the watcher) with debounce to avoid\n * repeating events and request. Right now this function wraps every effect in a debounce and adds\n * an extra debounce to the \"SecondLevelEvent\" events, to try to delay this events after the state\n * change events.\n *\n * @param event - The {@link XEvent} to emit.\n * @param watcherEffect - The callback to execute.\n * @returns A new function with the `watcherEffect` callback wrapped in debounce.\n */\nfunction debounceWatcherEffect<Event extends XEvent = XEvent>(\n  event: Event,\n  watcherEffect: (newValue: XEventPayload<Event>, oldValue: XEventPayload<Event>) => void\n): (newValue: XEventPayload<Event>, oldValue: XEventPayload<Event>) => void {\n  /*\n   * Due the debounce added to the watch callback, the `oldValue` would be the one from the last\n   * watcher execution instead of the last callback execution. This would cause problems receiving\n   * unstable oldValues, used in the Emitter filter.\n   * To solve this, we store the `oldValue` of the watcher in the `previousValue` variable, and we\n   * keep there until the watcher callback is finally executed (after the debounce). Then this\n   * `previousValue` is cleared to store the next `oldValue`.\n   */\n  let previousValue: XEventPayload<Event> | undefined = undefined;\n\n  let watcherCallback = debounce(\n    (newValue: XEventPayload<Event>, oldValue: XEventPayload<Event>): void => {\n      watcherEffect(newValue, oldValue);\n      previousValue = undefined;\n    },\n    0\n  );\n  /* Only applying the extra debounce to the \"SecondLevelEvent\" events to avoid repeating outer\n   * effects (requests, URL changes). If we only apply the debounce to all the events we still have\n   * the problem of outer effects. */\n  if (isSecondLevelEventEmitter(event)) {\n    const previousCallback = watcherCallback;\n    const debouncedPreviousCallback = debounce(previousCallback, 0);\n    watcherCallback = ((n, o) => {\n      previousCallback.cancel();\n      debouncedPreviousCallback(n, o);\n    }) as DebouncedFunction<any>;\n  }\n\n  return (newValue, oldValue) => {\n    previousValue = previousValue !== undefined ? previousValue : oldValue;\n    watcherCallback(newValue, previousValue);\n  };\n}\n\n/**\n * Transforms a {@link AnySimpleStateSelector} into a {@link AnyStateSelector}, and sets\n * default values for its properties.\n *\n * @param stateSelector - The state selector to normalize.\n * @param event - The event name of the emitter.\n * @returns A {@link AnyStateSelector} with all the properties set.\n *\n * @internal\n */\nfunction normalizeStateSelector(\n  stateSelector: AnySimpleStateSelector | AnyStateSelector,\n  event: XEvent\n): Required<AnyStateSelector> {\n  const normalizedSelector = isSimpleSelector(stateSelector)\n    ? { selector: stateSelector }\n    : stateSelector;\n  return {\n    deep: false,\n    immediate: false,\n    filter: isSecondLevelEventEmitter(event)\n      ? (newValue, oldValue) => !hasPayloadChanged(newValue, oldValue)\n      : () => true,\n    ...normalizedSelector\n  };\n}\n\n/**\n * Checks if a the type of the store emitter selector is simple or complex. This selector can be\n * a function if it is simple or an object with the selector and other options if it is complex.\n *\n * @param stateSelector - The store emitter selector.\n * @returns A boolean which flags if the stateSelector is simple (function) or complex (object).\n *\n * @internal\n */\nexport function isSimpleSelector(\n  stateSelector: AnySimpleStateSelector | AnyStateSelector\n): stateSelector is AnySimpleStateSelector {\n  return typeof stateSelector === 'function';\n}\n\n// TODO: Generalize the Naming of the Events to take this into account\nconst secondLevelEvents: RegExp[] = [/RequestChanged$/, /UrlStateChanged$/];\n\n/**\n * Function to detect if an {@link XEvent} is a \"SecondLevelEvent\", to treat it differently.\n *\n * @param event - The name of the {@link XEvent} to check.\n * @returns True if is an `SecondLevelEvent`, False otherwise.\n *\n * @internal\n */\nfunction isSecondLevelEventEmitter(event: XEvent): boolean {\n  return secondLevelEvents.some(regex => regex.test(event));\n}\n/**\n * Function to filter if a payload of an {@link XEvent} has really changed or not. It only\n * compares the first level of fields and not deeply, to avoid CPU consuming task here.\n *\n * @param request1 - First request to compare.\n * @param request2 - Second request to compare.\n * @returns True if the two objects are different, false otherwise.\n *\n * @internal\n */\nfunction hasPayloadChanged<T extends Dictionary>(request1?: T, request2?: T): boolean {\n  if (request1 === request2) {\n    return true;\n  }\n  if (!request1 || !request2) {\n    return false;\n  }\n  const keys1 = Object.keys(request1);\n  const keys2 = Object.keys(request2);\n  if (keys1.length !== keys2.length) {\n    return false;\n  }\n  return !keys1.some(key => request1[key] !== request2[key]);\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"x-emitters.js","sources":["../../../src/plugins/x-emitters.ts"],"sourcesContent":["import { forEach, Dictionary } from '@empathyco/x-utils';\nimport { Store } from 'vuex';\nimport { getGettersProxyFromModule } from '../store/utils/getters-proxy.utils';\nimport { AnySimpleStateSelector, AnyStateSelector } from '../store/utils/store-emitters.utils';\nimport { debounce } from '../utils/debounce';\nimport { DebouncedFunction } from '../utils/types';\nimport { XEvent, XEventPayload } from '../wiring/events.types';\nimport { AnyXModule } from '../x-modules/x-modules.types';\nimport { XBus } from './x-bus.types';\n\n/**\n * Registers the store emitters, making them emit the event when the part of the state selected\n * changes.\n *\n * @param xModule - The {@link XModule} to register its Store Emitters.\n * @param bus - The {@Link XBus} to emit the events by the Emitters.\n * @param store - The Vuex store to access to state and getters to watch them.\n *\n * @internal\n */\nexport function registerStoreEmitters(\n  { name, storeEmitters, storeModule }: AnyXModule,\n  bus: XBus,\n  store: Store<any>\n): void {\n  const safeGettersProxy = getGettersProxyFromModule(store.getters, name, storeModule);\n  forEach(storeEmitters, (event, stateSelector: AnySimpleStateSelector | AnyStateSelector) => {\n    const { selector, immediate, filter, ...options } = normalizeStateSelector(\n      stateSelector,\n      event\n    );\n\n    const watcherSelector = (): XEventPayload<typeof event> =>\n      selector(store.state.x[name], safeGettersProxy);\n    const emit = debounceWatcherEffect(event, (newValue, oldValue) => {\n      if (filter(newValue, oldValue)) {\n        bus.emit(event, newValue, { moduleName: name, oldValue });\n      }\n    });\n\n    store.watch(watcherSelector, emit, options);\n\n    if (immediate) {\n      emit(watcherSelector());\n    }\n  });\n}\n\n/**\n * This function \"wraps\" the watcher effect (the callback of the watcher) with debounce to avoid\n * repeating events and request. Right now this function wraps every effect in a debounce and adds\n * an extra debounce to the \"SecondLevelEvent\" events, to try to delay this events after the state\n * change events.\n *\n * @param event - The {@link XEvent} to emit.\n * @param watcherEffect - The callback to execute.\n * @returns A new function with the `watcherEffect` callback wrapped in debounce.\n */\nfunction debounceWatcherEffect<Event extends XEvent = XEvent>(\n  event: Event,\n  watcherEffect: (newValue: XEventPayload<Event>, oldValue: XEventPayload<Event>) => void\n): (newValue: XEventPayload<Event>, oldValue: XEventPayload<Event>) => void {\n  /*\n   * Due the debounce added to the watch callback, the `oldValue` would be the one from the last\n   * watcher execution instead of the last callback execution. This would cause problems receiving\n   * unstable oldValues, used in the Emitter filter.\n   * To solve this, we store the `oldValue` of the watcher in the `previousValue` variable, and we\n   * keep there until the watcher callback is finally executed (after the debounce). Then this\n   * `previousValue` is cleared to store the next `oldValue`.\n   */\n  let previousValue: XEventPayload<Event> | undefined = undefined;\n\n  let watcherCallback = debounce(\n    (newValue: XEventPayload<Event>, oldValue: XEventPayload<Event>): void => {\n      watcherEffect(newValue, oldValue);\n      previousValue = undefined;\n    },\n    0\n  );\n  /* Only applying the extra debounce to the \"SecondLevelEvent\" events to avoid repeating outer\n   * effects (requests, URL changes). If we only apply the debounce to all the events we still have\n   * the problem of outer effects. */\n  if (isSecondLevelEventEmitter(event)) {\n    const previousCallback = watcherCallback;\n    const debouncedPreviousCallback = debounce(previousCallback, 0);\n    watcherCallback = ((n, o) => {\n      previousCallback.cancel();\n      debouncedPreviousCallback(n, o);\n    }) as DebouncedFunction<any>;\n  }\n\n  return (newValue, oldValue) => {\n    previousValue = previousValue !== undefined ? previousValue : oldValue;\n    watcherCallback(newValue, previousValue);\n  };\n}\n\n/**\n * Transforms a {@link AnySimpleStateSelector} into a {@link AnyStateSelector}, and sets\n * default values for its properties.\n *\n * @param stateSelector - The state selector to normalize.\n * @param event - The event name of the emitter.\n * @returns A {@link AnyStateSelector} with all the properties set.\n *\n * @internal\n */\nfunction normalizeStateSelector(\n  stateSelector: AnySimpleStateSelector | AnyStateSelector,\n  event: XEvent\n): Required<AnyStateSelector> {\n  const normalizedSelector = isSimpleSelector(stateSelector)\n    ? { selector: stateSelector }\n    : stateSelector;\n  return {\n    deep: false,\n    immediate: false,\n    filter: isSecondLevelEventEmitter(event)\n      ? (newValue, oldValue) => !hasPayloadChanged(newValue, oldValue)\n      : () => true,\n    ...normalizedSelector\n  };\n}\n\n/**\n * Checks if a the type of the store emitter selector is simple or complex. This selector can be\n * a function if it is simple or an object with the selector and other options if it is complex.\n *\n * @param stateSelector - The store emitter selector.\n * @returns A boolean which flags if the stateSelector is simple (function) or complex (object).\n *\n * @internal\n */\nexport function isSimpleSelector(\n  stateSelector: AnySimpleStateSelector | AnyStateSelector\n): stateSelector is AnySimpleStateSelector {\n  return typeof stateSelector === 'function';\n}\n\n// TODO: Generalize the Naming of the Events to take this into account\nconst secondLevelEvents: RegExp[] = [/RequestChanged$/, /UrlStateChanged$/];\n\n/**\n * Function to detect if an {@link XEvent} is a \"SecondLevelEvent\", to treat it differently.\n *\n * @param event - The name of the {@link XEvent} to check.\n * @returns True if is an `SecondLevelEvent`, False otherwise.\n *\n * @internal\n */\nfunction isSecondLevelEventEmitter(event: XEvent): boolean {\n  return secondLevelEvents.some(regex => regex.test(event));\n}\n/**\n * Function to filter if a payload of an {@link XEvent} has really changed or not. It only\n * compares the first level of fields and not deeply, to avoid CPU consuming task here.\n *\n * @param request1 - First request to compare.\n * @param request2 - Second request to compare.\n * @returns True if the two objects are different, false otherwise.\n *\n * @internal\n */\nfunction hasPayloadChanged<T extends Dictionary>(request1?: T, request2?: T): boolean {\n  if (request1 === request2) {\n    return true;\n  }\n  if (!request1 || !request2) {\n    return false;\n  }\n  const keys1 = Object.keys(request1);\n  const keys2 = Object.keys(request2);\n  if (keys1.length !== keys2.length) {\n    return false;\n  }\n  return !keys1.some(key => request1[key] !== request2[key]);\n}\n"],"names":[],"mappings":";;;;AAUA;;;;;;;;;;SAUgB,qBAAqB,CACnC,EAAE,IAAI,EAAE,aAAa,EAAE,WAAW,EAAc,EAChD,GAAS,EACT,KAAiB;IAEjB,MAAM,gBAAgB,GAAG,yBAAyB,CAAC,KAAK,CAAC,OAAO,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC;IACrF,OAAO,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,aAAwD;QACrF,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,OAAO,EAAE,GAAG,sBAAsB,CACxE,aAAa,EACb,KAAK,CACN,CAAC;QAEF,MAAM,eAAe,GAAG,MACtB,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,gBAAgB,CAAC,CAAC;QAClD,MAAM,IAAI,GAAG,qBAAqB,CAAC,KAAK,EAAE,CAAC,QAAQ,EAAE,QAAQ;YAC3D,IAAI,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAAE;gBAC9B,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;aAC3D;SACF,CAAC,CAAC;QAEH,KAAK,CAAC,KAAK,CAAC,eAAe,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC;QAE5C,IAAI,SAAS,EAAE;YACb,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC;SACzB;KACF,CAAC,CAAC;AACL,CAAC;AAED;;;;;;;;;;AAUA,SAAS,qBAAqB,CAC5B,KAAY,EACZ,aAAuF;;;;;;;;;IAUvF,IAAI,aAAa,GAAqC,SAAS,CAAC;IAEhE,IAAI,eAAe,GAAG,QAAQ,CAC5B,CAAC,QAA8B,EAAE,QAA8B;QAC7D,aAAa,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAClC,aAAa,GAAG,SAAS,CAAC;KAC3B,EACD,CAAC,CACF,CAAC;;;;IAIF,IAAI,yBAAyB,CAAC,KAAK,CAAC,EAAE;QACpC,MAAM,gBAAgB,GAAG,eAAe,CAAC;QACzC,MAAM,yBAAyB,GAAG,QAAQ,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC;QAChE,eAAe,IAAI,CAAC,CAAC,EAAE,CAAC;YACtB,gBAAgB,CAAC,MAAM,EAAE,CAAC;YAC1B,yBAAyB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;SACjC,CAA2B,CAAC;KAC9B;IAED,OAAO,CAAC,QAAQ,EAAE,QAAQ;QACxB,aAAa,GAAG,aAAa,KAAK,SAAS,GAAG,aAAa,GAAG,QAAQ,CAAC;QACvE,eAAe,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;KAC1C,CAAC;AACJ,CAAC;AAED;;;;;;;;;;AAUA,SAAS,sBAAsB,CAC7B,aAAwD,EACxD,KAAa;IAEb,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,aAAa,CAAC;UACtD,EAAE,QAAQ,EAAE,aAAa,EAAE;UAC3B,aAAa,CAAC;IAClB,OAAO;QACL,IAAI,EAAE,KAAK;QACX,SAAS,EAAE,KAAK;QAChB,MAAM,EAAE,yBAAyB,CAAC,KAAK,CAAC;cACpC,CAAC,QAAQ,EAAE,QAAQ,KAAK,CAAC,iBAAiB,CAAC,QAAQ,EAAE,QAAQ,CAAC;cAC9D,MAAM,IAAI;QACd,GAAG,kBAAkB;KACtB,CAAC;AACJ,CAAC;AAED;;;;;;;;;SASgB,gBAAgB,CAC9B,aAAwD;IAExD,OAAO,OAAO,aAAa,KAAK,UAAU,CAAC;AAC7C,CAAC;AAED;AACA,MAAM,iBAAiB,GAAa,CAAC,iBAAiB,EAAE,kBAAkB,CAAC,CAAC;AAE5E;;;;;;;;AAQA,SAAS,yBAAyB,CAAC,KAAa;IAC9C,OAAO,iBAAiB,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;AAC5D,CAAC;AACD;;;;;;;;;;AAUA,SAAS,iBAAiB,CAAuB,QAAY,EAAE,QAAY;IACzE,IAAI,QAAQ,KAAK,QAAQ,EAAE;QACzB,OAAO,IAAI,CAAC;KACb;IACD,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,EAAE;QAC1B,OAAO,KAAK,CAAC;KACd;IACD,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACpC,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACpC,IAAI,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,MAAM,EAAE;QACjC,OAAO,KAAK,CAAC;KACd;IACD,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,IAAI,QAAQ,CAAC,GAAG,CAAC,KAAK,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;AAC7D;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"query-preview.vue.js","sources":["../../../../../src/x-modules/queries-preview/components/query-preview.vue"],"sourcesContent":["<template>\n  <NoElement v-if=\"queryPreviewResults && queryPreviewResults.totalResults\">\n    <!--\n      @slot Query Preview default slot.\n          @binding {string} query - query\n          @binding {Result[]} results - The results preview of the query preview\n          @binding {number} totalResults - The total results of the search request\n    -->\n    <slot\n      :query=\"query\"\n      :results=\"queryPreviewResults.results\"\n      :totalResults=\"queryPreviewResults.totalResults\"\n    >\n      <ul data-test=\"query-preview\" class=\"x-query-preview\">\n        <li\n          v-for=\"result in queryPreviewResults.results\"\n          :key=\"result.id\"\n          class=\"x-query-preview__item\"\n          data-test=\"query-preview-item\"\n        >\n          <!--\n          @slot Query Preview result slot.\n              @binding {Result} result - A Query Preview result\n        -->\n          <slot name=\"result\" :result=\"result\">\n            <span data-test=\"result-name\">{{ result.name }}</span>\n          </slot>\n        </li>\n      </ul>\n    </slot>\n  </NoElement>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop, Inject } from 'vue-property-decorator';\n  import { Dictionary } from '@empathyco/x-utils';\n  import { SearchRequest, Result } from '@empathyco/x-types';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts';\n  import { XProvide } from '../../../components/decorators/injection.decorators';\n  import { XEmit } from '../../../components/decorators/bus.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { NoElement } from '../../../components/no-element';\n  import { QueryFeature, FeatureLocation } from '../../../types/origin';\n  import { QueryPreviewItem } from '../store/types';\n  import { QueriesPreviewConfig } from '../config.types';\n  import { queriesPreviewXModule } from '../x-module';\n  import { createOrigin } from '../../../utils/origin';\n\n  /**\n   * Retrieves a preview of the results of a query and exposes them in the default slot,\n   * along with the query preview and the totalResults of the search request.\n   * By default, it renders the names of the results.\n   *\n   * @public\n   */\n  @Component({\n    components: {\n      NoElement\n    },\n    mixins: [xComponentMixin(queriesPreviewXModule)]\n  })\n  export default class QueryPreview extends Vue {\n    /**\n     * The query to retrieve the results preview.\n     *\n     * @public\n     */\n    @Prop({\n      required: true\n    })\n    protected query!: string;\n\n    /**.\n     *  The origin property for the request\n     *\n     * @public\n     */\n    @Prop()\n    protected queryFeature?: QueryFeature;\n\n    /**\n     * Number of query preview results to be rendered.\n     *\n     * @public\n     */\n    @Prop()\n    protected maxItemsToRender?: number;\n\n    /**\n     * The results preview of the queries preview mounted.\n     * It is a dictionary, indexed by the query preview query.\n     */\n    @State('queriesPreview', 'queriesPreview')\n    public previewResults!: Dictionary<QueryPreviewItem>;\n\n    /**\n     * As the request is handled in this component, we need\n     * the extra params that will be used in the request.\n     */\n    @State('queriesPreview', 'params')\n    public params!: Dictionary<unknown>;\n\n    /**\n     * As the request is handled in this component, we need\n     * the config that will be used in the request.\n     */\n    @State('queriesPreview', 'config')\n    public config!: QueriesPreviewConfig;\n\n    /**\n     * The results to render from the state.\n     *\n     * @remarks The results list are provided with `items` key. It can be\n     * concatenated with list items from components such as `BannersList`, `PromotedsList`,\n     * `BaseGrid` or any component that injects the list.\n     *\n     * @returns A list of results.\n     * @public\n     */\n    @XProvide(LIST_ITEMS_KEY)\n    public get results(): Result[] | undefined {\n      return this.queryPreviewResults?.results;\n    }\n\n    /**\n     * It injects the provided {@link FeatureLocation} of the selected query in the search request.\n     *\n     * @internal\n     */\n    @Inject()\n    public location?: FeatureLocation;\n\n    /**\n     * The computed request object to be used to retrieve the query preview results.\n     *\n     * @returns The search request object.\n     * @public\n     */\n    @XEmit('QueryPreviewRequestChanged', { immediate: false })\n    public get queryPreviewRequest(): SearchRequest {\n      const origin = createOrigin({\n        feature: this.queryFeature,\n        location: this.location\n      });\n\n      return {\n        query: this.query,\n        rows: this.config.maxItemsToRequest,\n        extraParams: this.params,\n        ...(origin && { origin })\n      };\n    }\n\n    protected mounted(): void {\n      this.$x.emit('QueryPreviewRequestChanged', this.queryPreviewRequest);\n    }\n\n    /**\n     * Gets from the state the results preview of the query preview.\n     *\n     * @returns The results preview of the actual query preview.\n     */\n    public get queryPreviewResults(): Partial<QueryPreviewItem> | undefined {\n      const previewResults = this.previewResults[this.query];\n      return previewResults?.results\n        ? {\n            totalResults: previewResults.totalResults,\n            results: previewResults.results.slice(0, this.maxItemsToRender)\n          }\n        : undefined;\n    }\n  }\n</script>\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- `QueryPreviewRequestChanged`: the event is emitted when the component is mounted and when the\n  properties of the request object changes. The event payload is the `queryPreviewRequest` object.\n\n## See it in action\n\nHere you have a basic example of how the QueryPreview is rendered. Keep in mind that this component\nis intended to be used overriding its default slot. By default it will only render the names of the\nresults.\n\n```vue live\n<template>\n  <QueryPreview :query=\"query\" />\n</template>\n\n<script>\n  import { QueryPreview } from '@empathyco/x-components/queries-preview';\n\n  export default {\n    name: 'QueryPreviewDemo',\n    components: {\n      QueryPreview\n    },\n    data() {\n      return {\n        query: 'sandals'\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  <QueryPreview :query=\"query\" #default=\"{ totalResults, results }\">\n    <section>\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    </section>\n  </QueryPreview>\n</template>\n\n<script>\n  import { QueryPreview } from '@empathyco/x-components/queries-preview';\n  import { BaseResultImage, BaseResultLink, SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'QueryPreviewDemoOverridingSlot',\n    components: {\n      BaseResultImage,\n      BaseResultLink,\n      QueryPreview,\n      SlidingPanel\n    },\n    data() {\n      return {\n        query: 'flip-flops'\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  <QueryPreview :query=\"query\" #result=\"{ result }\">\n    <span>{{ result.id }}</span>\n    <span>{{ result.name }}</span>\n  </QueryPreview>\n</template>\n\n<script>\n  import { QueryPreview } from '@empathyco/x-components/queries-preview';\n\n  export default {\n    name: 'QueryPreviewDemoOverridingResultSlot',\n    components: {\n      QueryPreview\n    },\n    data() {\n      return {\n        query: 'flips-flops'\n      };\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the query preview has been limited to render a maximum of 4 results.\n\n```vue\n<template>\n  <QueryPreview :maxItemsToRender=\"maxItemsToRender\" :query=\"query\" #default=\"{ results }\">\n    <BaseGrid #default=\"{ item }\" :items=\"results\">\n      <BaseResultLink :result=\"item\">\n        <BaseResultImage :result=\"item\" />\n      </BaseResultLink>\n    </BaseGrid>\n  </QueryPreview>\n</template>\n\n<script>\n  import { BaseGrid, BaseResultImage, BaseResultLink } from '@empathyco/x-components';\n  import { QueryPreview } from '@empathyco/x-components/queries-preview';\n\n  export default {\n    name: 'QueryPreviewDemo',\n    components: {\n      BaseGrid,\n      BaseResultImage,\n      BaseResultLink,\n      QueryPreview\n    },\n    data() {\n      return {\n        maxItemsToRender: 4,\n        query: 'flips-flops'\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"query-preview.vue.js","sources":["../../../../../src/x-modules/queries-preview/components/query-preview.vue"],"sourcesContent":["<template>\n  <NoElement v-if=\"queryPreviewResults && queryPreviewResults.totalResults\">\n    <!--\n      @slot Query Preview default slot.\n          @binding {string} query - query\n          @binding {Result[]} results - The results preview of the query preview\n          @binding {number} totalResults - The total results of the search request\n    -->\n    <slot\n      :query=\"query\"\n      :results=\"queryPreviewResults.results\"\n      :totalResults=\"queryPreviewResults.totalResults\"\n    >\n      <ul data-test=\"query-preview\" class=\"x-query-preview\">\n        <li\n          v-for=\"result in queryPreviewResults.results\"\n          :key=\"result.id\"\n          class=\"x-query-preview__item\"\n          data-test=\"query-preview-item\"\n        >\n          <!--\n          @slot Query Preview result slot.\n              @binding {Result} result - A Query Preview result\n        -->\n          <slot name=\"result\" :result=\"result\">\n            <span data-test=\"result-name\">{{ result.name }}</span>\n          </slot>\n        </li>\n      </ul>\n    </slot>\n  </NoElement>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop, Inject, Watch } from 'vue-property-decorator';\n  import { Dictionary } from '@empathyco/x-utils';\n  import { SearchRequest, Result } from '@empathyco/x-types';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts';\n  import { XProvide } from '../../../components/decorators/injection.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { NoElement } from '../../../components/no-element';\n  import { QueryFeature, FeatureLocation } from '../../../types/origin';\n  import { QueryPreviewItem } from '../store/types';\n  import { QueriesPreviewConfig } from '../config.types';\n  import { queriesPreviewXModule } from '../x-module';\n  import { createOrigin } from '../../../utils/origin';\n  import { debounce } from '../../../utils/debounce';\n  import { DebouncedFunction } from '../../../utils';\n\n  /**\n   * Retrieves a preview of the results of a query and exposes them in the default slot,\n   * along with the query preview and the totalResults of the search request.\n   * By default, it renders the names of the results.\n   *\n   * @public\n   */\n  @Component({\n    components: {\n      NoElement\n    },\n    mixins: [xComponentMixin(queriesPreviewXModule)]\n  })\n  export default class QueryPreview extends Vue {\n    /**\n     * The query to retrieve the results preview.\n     *\n     * @public\n     */\n    @Prop({\n      required: true\n    })\n    protected query!: string;\n\n    /**\n     * The origin property for the request.\n     *\n     * @public\n     */\n    @Prop()\n    protected queryFeature?: QueryFeature;\n\n    /**\n     * Number of query preview results to be rendered.\n     *\n     * @public\n     */\n    @Prop()\n    protected maxItemsToRender?: number;\n\n    /**\n     * Debounce time in milliseconds for triggering the search requests.\n     * It will default to 0 to fit the most common use case (pre-search),\n     * and it would work properly with a 250 value inside empathize.\n     */\n    @Prop({ default: 0 })\n    public debounceTimeMs!: number;\n\n    /**\n     * The results preview of the queries preview mounted.\n     * It is a dictionary, indexed by the query preview query.\n     */\n    @State('queriesPreview', 'queriesPreview')\n    public previewResults!: Dictionary<QueryPreviewItem>;\n\n    /**\n     * As the request is handled in this component, we need\n     * the extra params that will be used in the request.\n     */\n    @State('queriesPreview', 'params')\n    public params!: Dictionary<unknown>;\n\n    /**\n     * As the request is handled in this component, we need\n     * the config that will be used in the request.\n     */\n    @State('queriesPreview', 'config')\n    public config!: QueriesPreviewConfig;\n\n    /**\n     * The results to render from the state.\n     *\n     * @remarks The results list are provided with `items` key. It can be\n     * concatenated with list items from components such as `BannersList`, `PromotedsList`,\n     * `BaseGrid` or any component that injects the list.\n     *\n     * @returns A list of results.\n     * @public\n     */\n    @XProvide(LIST_ITEMS_KEY)\n    public get results(): Result[] | undefined {\n      return this.queryPreviewResults?.results;\n    }\n\n    /**\n     * It injects the provided {@link FeatureLocation} of the selected query in the search request.\n     *\n     * @internal\n     */\n    @Inject({ default: undefined })\n    protected location?: FeatureLocation;\n\n    /**\n     * The computed request object to be used to retrieve the query preview results.\n     *\n     * @returns The search request object.\n     * @internal\n     */\n    protected get queryPreviewRequest(): SearchRequest {\n      const origin = createOrigin({\n        feature: this.queryFeature,\n        location: this.location\n      });\n\n      return {\n        query: this.query,\n        rows: this.config.maxItemsToRequest,\n        extraParams: this.params,\n        ...(origin && { origin })\n      };\n    }\n\n    /**\n     * The debounce method to trigger the request after the debounceTimeMs defined.\n     *\n     * @returns The search request object.\n     * @internal\n     */\n    protected get emitQueryPreviewRequestChanged(): DebouncedFunction<[SearchRequest]> {\n      return debounce(request => {\n        this.$x.emit('QueryPreviewRequestChanged', request);\n      }, this.debounceTimeMs);\n    }\n\n    /**\n     * Initialises watcher to emit debounced requests, and first value for the requests.\n     *\n     * @internal\n     */\n    protected created(): void {\n      this.$watch(\n        () => this.queryPreviewRequest,\n        request => this.emitQueryPreviewRequestChanged(request)\n      );\n      this.emitQueryPreviewRequestChanged(this.queryPreviewRequest);\n    }\n\n    /**\n     * Cancels the (remaining) requests when the component is destroyed\n     * via the `debounce.cancel()` method.\n     *\n     * @internal\n     */\n    protected beforeDestroy(): void {\n      this.emitQueryPreviewRequestChanged.cancel();\n    }\n\n    /**\n     * Cancels the previous request when the debounced function changes (e.g: the debounceTimeMs\n     * prop changes or there is a request in progress that cancels it).\n     *\n     * @param _new - The new debounced function.\n     * @param old - The previous debounced function.\n     * @internal\n     */\n    @Watch('emitQueryPreviewRequestChanged')\n    protected cancelEmitPreviewRequestChanged(\n      _new: DebouncedFunction<[SearchRequest]>,\n      old: DebouncedFunction<[SearchRequest]>\n    ): void {\n      old.cancel();\n    }\n\n    /**\n     * Gets from the state the results preview of the query preview.\n     *\n     * @returns The results preview of the actual query preview.\n     */\n    public get queryPreviewResults(): Partial<QueryPreviewItem> | undefined {\n      const previewResults = this.previewResults[this.query];\n      return previewResults?.results\n        ? {\n            totalResults: previewResults.totalResults,\n            results: previewResults.results.slice(0, this.maxItemsToRender)\n          }\n        : undefined;\n    }\n  }\n</script>\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- `QueryPreviewRequestChanged`: the event is emitted when the component is mounted and when the\n  properties of the request object changes. The event payload is the `queryPreviewRequest` object.\n\n## See it in action\n\nHere you have a basic example of how the QueryPreview is rendered. Keep in mind that this component\nis intended to be used overriding its default slot. By default it will only render the names of the\nresults.\n\n```vue live\n<template>\n  <QueryPreview :query=\"query\" />\n</template>\n\n<script>\n  import { QueryPreview } from '@empathyco/x-components/queries-preview';\n\n  export default {\n    name: 'QueryPreviewDemo',\n    components: {\n      QueryPreview\n    },\n    data() {\n      return {\n        query: 'sandals'\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  <QueryPreview :query=\"query\" #default=\"{ totalResults, results }\">\n    <section>\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    </section>\n  </QueryPreview>\n</template>\n\n<script>\n  import { QueryPreview } from '@empathyco/x-components/queries-preview';\n  import { BaseResultImage, BaseResultLink, SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'QueryPreviewDemoOverridingSlot',\n    components: {\n      BaseResultImage,\n      BaseResultLink,\n      QueryPreview,\n      SlidingPanel\n    },\n    data() {\n      return {\n        query: 'flip-flops'\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  <QueryPreview :query=\"query\" #result=\"{ result }\">\n    <span>{{ result.id }}</span>\n    <span>{{ result.name }}</span>\n  </QueryPreview>\n</template>\n\n<script>\n  import { QueryPreview } from '@empathyco/x-components/queries-preview';\n\n  export default {\n    name: 'QueryPreviewDemoOverridingResultSlot',\n    components: {\n      QueryPreview\n    },\n    data() {\n      return {\n        query: 'flips-flops'\n      };\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the query preview has been limited to render a maximum of 4 results.\n\n```vue\n<template>\n  <QueryPreview :maxItemsToRender=\"maxItemsToRender\" :query=\"query\" #default=\"{ results }\">\n    <BaseGrid #default=\"{ item }\" :items=\"results\">\n      <BaseResultLink :result=\"item\">\n        <BaseResultImage :result=\"item\" />\n      </BaseResultLink>\n    </BaseGrid>\n  </QueryPreview>\n</template>\n\n<script>\n  import { BaseGrid, BaseResultImage, BaseResultLink } from '@empathyco/x-components';\n  import { QueryPreview } from '@empathyco/x-components/queries-preview';\n\n  export default {\n    name: 'QueryPreviewDemo',\n    components: {\n      BaseGrid,\n      BaseResultImage,\n      BaseResultLink,\n      QueryPreview\n    },\n    data() {\n      return {\n        maxItemsToRender: 4,\n        query: 'flips-flops'\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/queries-preview/components/query-preview.vue_rollup-plugin-vue_script.vue.js

@@ -1,14 +1,14 @@
 import { __decorate } from 'tslib';
 import Vue from 'vue';
-import { Prop, Inject, Component } from 'vue-property-decorator';
+import { Prop, Inject, Watch, Component } from 'vue-property-decorator';
 import { State } from '../../../components/decorators/store.decorators.js';
 import { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts.js';
 import { XProvide } from '../../../components/decorators/injection.decorators.js';
-import { XEmit } from '../../../components/decorators/bus.decorators.js';
 import { xComponentMixin } from '../../../components/x-component.mixin.js';
 import { NoElement } from '../../../components/no-element.js';
 import { queriesPreviewXModule } from '../x-module.js';
 import { createOrigin } from '../../../utils/origin.js';
+import { debounce } from '../../../utils/debounce.js';
 
 /**
  * Retrieves a preview of the results of a query and exposes them in the default slot,
@@ -35,7 +35,7 @@ let QueryPreview = class QueryPreview extends Vue {
      * The computed request object to be used to retrieve the query preview results.
      *
      * @returns The search request object.
-     * @public
+     * @internal
      */
     get queryPreviewRequest() {
         const origin = createOrigin({
@@ -49,8 +49,45 @@ let QueryPreview = class QueryPreview extends Vue {
             ...(origin && { origin })
         };
     }
-    mounted() {
-        this.$x.emit('QueryPreviewRequestChanged', this.queryPreviewRequest);
+    /**
+     * The debounce method to trigger the request after the debounceTimeMs defined.
+     *
+     * @returns The search request object.
+     * @internal
+     */
+    get emitQueryPreviewRequestChanged() {
+        return debounce(request => {
+            this.$x.emit('QueryPreviewRequestChanged', request);
+        }, this.debounceTimeMs);
+    }
+    /**
+     * Initialises watcher to emit debounced requests, and first value for the requests.
+     *
+     * @internal
+     */
+    created() {
+        this.$watch(() => this.queryPreviewRequest, request => this.emitQueryPreviewRequestChanged(request));
+        this.emitQueryPreviewRequestChanged(this.queryPreviewRequest);
+    }
+    /**
+     * Cancels the (remaining) requests when the component is destroyed
+     * via the `debounce.cancel()` method.
+     *
+     * @internal
+     */
+    beforeDestroy() {
+        this.emitQueryPreviewRequestChanged.cancel();
+    }
+    /**
+     * Cancels the previous request when the debounced function changes (e.g: the debounceTimeMs
+     * prop changes or there is a request in progress that cancels it).
+     *
+     * @param _new - The new debounced function.
+     * @param old - The previous debounced function.
+     * @internal
+     */
+    cancelEmitPreviewRequestChanged(_new, old) {
+        old.cancel();
     }
     /**
      * Gets from the state the results preview of the query preview.
@@ -78,6 +115,9 @@ __decorate([
 __decorate([
     Prop()
 ], QueryPreview.prototype, "maxItemsToRender", void 0);
+__decorate([
+    Prop({ default: 0 })
+], QueryPreview.prototype, "debounceTimeMs", void 0);
 __decorate([
     State('queriesPreview', 'queriesPreview')
 ], QueryPreview.prototype, "previewResults", void 0);
@@ -91,11 +131,11 @@ __decorate([
     XProvide(LIST_ITEMS_KEY)
 ], QueryPreview.prototype, "results", null);
 __decorate([
-    Inject()
+    Inject({ default: undefined })
 ], QueryPreview.prototype, "location", void 0);
 __decorate([
-    XEmit('QueryPreviewRequestChanged', { immediate: false })
-], QueryPreview.prototype, "queryPreviewRequest", null);
+    Watch('emitQueryPreviewRequestChanged')
+], QueryPreview.prototype, "cancelEmitPreviewRequestChanged", null);
 QueryPreview = __decorate([
     Component({
         components: {

package/js/x-modules/queries-preview/components/query-preview.vue_rollup-plugin-vue_script.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"query-preview.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/queries-preview/components/query-preview.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\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop, Inject } from 'vue-property-decorator';\nimport { Dictionary } from '@empathyco/x-utils';\nimport { SearchRequest, Result } from '@empathyco/x-types';\nimport { State } from '../../../components/decorators/store.decorators';\nimport { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts';\nimport { XProvide } from '../../../components/decorators/injection.decorators';\nimport { XEmit } from '../../../components/decorators/bus.decorators';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { NoElement } from '../../../components/no-element';\nimport { QueryFeature, FeatureLocation } from '../../../types/origin';\nimport { QueryPreviewItem } from '../store/types';\nimport { QueriesPreviewConfig } from '../config.types';\nimport { queriesPreviewXModule } from '../x-module';\nimport { createOrigin } from '../../../utils/origin';\n\n/**\n * Retrieves a preview of the results of a query and exposes them in the default slot,\n * along with the query preview and the totalResults of the search request.\n * By default, it renders the names of the results.\n *\n * @public\n */\n@Component({\n  components: {\n    NoElement\n  },\n  mixins: [xComponentMixin(queriesPreviewXModule)]\n})\nexport default class QueryPreview extends Vue {\n  /**\n   * The query to retrieve the results preview.\n   *\n   * @public\n   */\n  @Prop({\n    required: true\n  })\n  protected query!: string;\n\n  /**.\n   *  The origin property for the request\n   *\n   * @public\n   */\n  @Prop()\n  protected queryFeature?: QueryFeature;\n\n  /**\n   * Number of query preview results to be rendered.\n   *\n   * @public\n   */\n  @Prop()\n  protected maxItemsToRender?: number;\n\n  /**\n   * The results preview of the queries preview mounted.\n   * It is a dictionary, indexed by the query preview query.\n   */\n  @State('queriesPreview', 'queriesPreview')\n  public previewResults!: Dictionary<QueryPreviewItem>;\n\n  /**\n   * As the request is handled in this component, we need\n   * the extra params that will be used in the request.\n   */\n  @State('queriesPreview', 'params')\n  public params!: Dictionary<unknown>;\n\n  /**\n   * As the request is handled in this component, we need\n   * the config that will be used in the request.\n   */\n  @State('queriesPreview', 'config')\n  public config!: QueriesPreviewConfig;\n\n  /**\n   * The results to render from the state.\n   *\n   * @remarks The results list are provided with `items` key. It can be\n   * concatenated with list items from components such as `BannersList`, `PromotedsList`,\n   * `BaseGrid` or any component that injects the list.\n   *\n   * @returns A list of results.\n   * @public\n   */\n  @XProvide(LIST_ITEMS_KEY)\n  public get results(): Result[] | undefined {\n    return this.queryPreviewResults?.results;\n  }\n\n  /**\n   * It injects the provided {@link FeatureLocation} of the selected query in the search request.\n   *\n   * @internal\n   */\n  @Inject()\n  public location?: FeatureLocation;\n\n  /**\n   * The computed request object to be used to retrieve the query preview results.\n   *\n   * @returns The search request object.\n   * @public\n   */\n  @XEmit('QueryPreviewRequestChanged', { immediate: false })\n  public get queryPreviewRequest(): SearchRequest {\n    const origin = createOrigin({\n      feature: this.queryFeature,\n      location: this.location\n    });\n\n    return {\n      query: this.query,\n      rows: this.config.maxItemsToRequest,\n      extraParams: this.params,\n      ...(origin && { origin })\n    };\n  }\n\n  protected mounted(): void {\n    this.$x.emit('QueryPreviewRequestChanged', this.queryPreviewRequest);\n  }\n\n  /**\n   * Gets from the state the results preview of the query preview.\n   *\n   * @returns The results preview of the actual query preview.\n   */\n  public get queryPreviewResults(): Partial<QueryPreviewItem> | undefined {\n    const previewResults = this.previewResults[this.query];\n    return previewResults?.results\n      ? {\n          totalResults: previewResults.totalResults,\n          results: previewResults.results.slice(0, this.maxItemsToRender)\n        }\n      : undefined;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAkDA;;;;;;;AAaA,IAAqB,YAAY,GAAjC,MAAqB,YAAa,SAAQ,GAAG;;;;;;;;;;;IA2D3C,IAAW,OAAO;QAChB,OAAO,IAAI,CAAC,mBAAmB,EAAE,OAAO,CAAC;KAC1C;;;;;;;IAiBD,IAAW,mBAAmB;QAC5B,MAAM,MAAM,GAAG,YAAY,CAAC;YAC1B,OAAO,EAAE,IAAI,CAAC,YAAY;YAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;QAEH,OAAO;YACL,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB;YACnC,WAAW,EAAE,IAAI,CAAC,MAAM;YACxB,IAAI,MAAM,IAAI,EAAE,MAAM,EAAE,CAAC;SAC1B,CAAC;KACH;IAES,OAAO;QACf,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,4BAA4B,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;KACtE;;;;;;IAOD,IAAW,mBAAmB;QAC5B,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACvD,OAAO,cAAc,EAAE,OAAO;cAC1B;gBACE,YAAY,EAAE,cAAc,CAAC,YAAY;gBACzC,OAAO,EAAE,cAAc,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,gBAAgB,CAAC;aAChE;cACD,SAAS,CAAC;KACf;CACF,CAAA;AArGC;IAHC,IAAI,CAAC;QACJ,QAAQ,EAAE,IAAI;KACf,CAAC;2CACuB;AAQzB;IADC,IAAI,EAAE;kDAC+B;AAQtC;IADC,IAAI,EAAE;sDAC6B;AAOpC;IADC,KAAK,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;oDACW;AAOrD;IADC,KAAK,CAAC,gBAAgB,EAAE,QAAQ,CAAC;4CACE;AAOpC;IADC,KAAK,CAAC,gBAAgB,EAAE,QAAQ,CAAC;4CACG;AAarC;IADC,QAAQ,CAAC,cAAc,CAAC;2CAGxB;AAQD;IADC,MAAM,EAAE;8CACyB;AASlC;IADC,KAAK,CAAC,4BAA4B,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;uDAazD;AA1FkB,YAAY;IANhC,SAAS,CAAC;QACT,UAAU,EAAE;YACV,SAAS;SACV;QACD,MAAM,EAAE,CAAC,eAAe,CAAC,qBAAqB,CAAC,CAAC;KACjD,CAAC;GACmB,YAAY,CA8GhC;aA9GoB,YAAY;;;;"}
+{"version":3,"file":"query-preview.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/queries-preview/components/query-preview.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\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop, Inject, Watch } from 'vue-property-decorator';\nimport { Dictionary } from '@empathyco/x-utils';\nimport { SearchRequest, Result } from '@empathyco/x-types';\nimport { State } from '../../../components/decorators/store.decorators';\nimport { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts';\nimport { XProvide } from '../../../components/decorators/injection.decorators';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { NoElement } from '../../../components/no-element';\nimport { QueryFeature, FeatureLocation } from '../../../types/origin';\nimport { QueryPreviewItem } from '../store/types';\nimport { QueriesPreviewConfig } from '../config.types';\nimport { queriesPreviewXModule } from '../x-module';\nimport { createOrigin } from '../../../utils/origin';\nimport { debounce } from '../../../utils/debounce';\nimport { DebouncedFunction } from '../../../utils';\n\n/**\n * Retrieves a preview of the results of a query and exposes them in the default slot,\n * along with the query preview and the totalResults of the search request.\n * By default, it renders the names of the results.\n *\n * @public\n */\n@Component({\n  components: {\n    NoElement\n  },\n  mixins: [xComponentMixin(queriesPreviewXModule)]\n})\nexport default class QueryPreview extends Vue {\n  /**\n   * The query to retrieve the results preview.\n   *\n   * @public\n   */\n  @Prop({\n    required: true\n  })\n  protected query!: string;\n\n  /**\n   * The origin property for the request.\n   *\n   * @public\n   */\n  @Prop()\n  protected queryFeature?: QueryFeature;\n\n  /**\n   * Number of query preview results to be rendered.\n   *\n   * @public\n   */\n  @Prop()\n  protected maxItemsToRender?: number;\n\n  /**\n   * Debounce time in milliseconds for triggering the search requests.\n   * It will default to 0 to fit the most common use case (pre-search),\n   * and it would work properly with a 250 value inside empathize.\n   */\n  @Prop({ default: 0 })\n  public debounceTimeMs!: number;\n\n  /**\n   * The results preview of the queries preview mounted.\n   * It is a dictionary, indexed by the query preview query.\n   */\n  @State('queriesPreview', 'queriesPreview')\n  public previewResults!: Dictionary<QueryPreviewItem>;\n\n  /**\n   * As the request is handled in this component, we need\n   * the extra params that will be used in the request.\n   */\n  @State('queriesPreview', 'params')\n  public params!: Dictionary<unknown>;\n\n  /**\n   * As the request is handled in this component, we need\n   * the config that will be used in the request.\n   */\n  @State('queriesPreview', 'config')\n  public config!: QueriesPreviewConfig;\n\n  /**\n   * The results to render from the state.\n   *\n   * @remarks The results list are provided with `items` key. It can be\n   * concatenated with list items from components such as `BannersList`, `PromotedsList`,\n   * `BaseGrid` or any component that injects the list.\n   *\n   * @returns A list of results.\n   * @public\n   */\n  @XProvide(LIST_ITEMS_KEY)\n  public get results(): Result[] | undefined {\n    return this.queryPreviewResults?.results;\n  }\n\n  /**\n   * It injects the provided {@link FeatureLocation} of the selected query in the search request.\n   *\n   * @internal\n   */\n  @Inject({ default: undefined })\n  protected location?: FeatureLocation;\n\n  /**\n   * The computed request object to be used to retrieve the query preview results.\n   *\n   * @returns The search request object.\n   * @internal\n   */\n  protected get queryPreviewRequest(): SearchRequest {\n    const origin = createOrigin({\n      feature: this.queryFeature,\n      location: this.location\n    });\n\n    return {\n      query: this.query,\n      rows: this.config.maxItemsToRequest,\n      extraParams: this.params,\n      ...(origin && { origin })\n    };\n  }\n\n  /**\n   * The debounce method to trigger the request after the debounceTimeMs defined.\n   *\n   * @returns The search request object.\n   * @internal\n   */\n  protected get emitQueryPreviewRequestChanged(): DebouncedFunction<[SearchRequest]> {\n    return debounce(request => {\n      this.$x.emit('QueryPreviewRequestChanged', request);\n    }, this.debounceTimeMs);\n  }\n\n  /**\n   * Initialises watcher to emit debounced requests, and first value for the requests.\n   *\n   * @internal\n   */\n  protected created(): void {\n    this.$watch(\n      () => this.queryPreviewRequest,\n      request => this.emitQueryPreviewRequestChanged(request)\n    );\n    this.emitQueryPreviewRequestChanged(this.queryPreviewRequest);\n  }\n\n  /**\n   * Cancels the (remaining) requests when the component is destroyed\n   * via the `debounce.cancel()` method.\n   *\n   * @internal\n   */\n  protected beforeDestroy(): void {\n    this.emitQueryPreviewRequestChanged.cancel();\n  }\n\n  /**\n   * Cancels the previous request when the debounced function changes (e.g: the debounceTimeMs\n   * prop changes or there is a request in progress that cancels it).\n   *\n   * @param _new - The new debounced function.\n   * @param old - The previous debounced function.\n   * @internal\n   */\n  @Watch('emitQueryPreviewRequestChanged')\n  protected cancelEmitPreviewRequestChanged(\n    _new: DebouncedFunction<[SearchRequest]>,\n    old: DebouncedFunction<[SearchRequest]>\n  ): void {\n    old.cancel();\n  }\n\n  /**\n   * Gets from the state the results preview of the query preview.\n   *\n   * @returns The results preview of the actual query preview.\n   */\n  public get queryPreviewResults(): Partial<QueryPreviewItem> | undefined {\n    const previewResults = this.previewResults[this.query];\n    return previewResults?.results\n      ? {\n          totalResults: previewResults.totalResults,\n          results: previewResults.results.slice(0, this.maxItemsToRender)\n        }\n      : undefined;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAmDA;;;;;;;AAaA,IAAqB,YAAY,GAAjC,MAAqB,YAAa,SAAQ,GAAG;;;;;;;;;;;IAmE3C,IAAW,OAAO;QAChB,OAAO,IAAI,CAAC,mBAAmB,EAAE,OAAO,CAAC;KAC1C;;;;;;;IAgBD,IAAc,mBAAmB;QAC/B,MAAM,MAAM,GAAG,YAAY,CAAC;YAC1B,OAAO,EAAE,IAAI,CAAC,YAAY;YAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;QAEH,OAAO;YACL,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB;YACnC,WAAW,EAAE,IAAI,CAAC,MAAM;YACxB,IAAI,MAAM,IAAI,EAAE,MAAM,EAAE,CAAC;SAC1B,CAAC;KACH;;;;;;;IAQD,IAAc,8BAA8B;QAC1C,OAAO,QAAQ,CAAC,OAAO;YACrB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;SACrD,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;KACzB;;;;;;IAOS,OAAO;QACf,IAAI,CAAC,MAAM,CACT,MAAM,IAAI,CAAC,mBAAmB,EAC9B,OAAO,IAAI,IAAI,CAAC,8BAA8B,CAAC,OAAO,CAAC,CACxD,CAAC;QACF,IAAI,CAAC,8BAA8B,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;KAC/D;;;;;;;IAQS,aAAa;QACrB,IAAI,CAAC,8BAA8B,CAAC,MAAM,EAAE,CAAC;KAC9C;;;;;;;;;IAWS,+BAA+B,CACvC,IAAwC,EACxC,GAAuC;QAEvC,GAAG,CAAC,MAAM,EAAE,CAAC;KACd;;;;;;IAOD,IAAW,mBAAmB;QAC5B,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACvD,OAAO,cAAc,EAAE,OAAO;cAC1B;gBACE,YAAY,EAAE,cAAc,CAAC,YAAY;gBACzC,OAAO,EAAE,cAAc,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,gBAAgB,CAAC;aAChE;cACD,SAAS,CAAC;KACf;CACF,CAAA;AA3JC;IAHC,IAAI,CAAC;QACJ,QAAQ,EAAE,IAAI;KACf,CAAC;2CACuB;AAQzB;IADC,IAAI,EAAE;kDAC+B;AAQtC;IADC,IAAI,EAAE;sDAC6B;AAQpC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;oDACU;AAO/B;IADC,KAAK,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;oDACW;AAOrD;IADC,KAAK,CAAC,gBAAgB,EAAE,QAAQ,CAAC;4CACE;AAOpC;IADC,KAAK,CAAC,gBAAgB,EAAE,QAAQ,CAAC;4CACG;AAarC;IADC,QAAQ,CAAC,cAAc,CAAC;2CAGxB;AAQD;IADC,MAAM,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC;8CACM;AAkErC;IADC,KAAK,CAAC,gCAAgC,CAAC;mEAMvC;AApJkB,YAAY;IANhC,SAAS,CAAC;QACT,UAAU,EAAE;YACV,SAAS;SACV;QACD,MAAM,EAAE,CAAC,eAAe,CAAC,qBAAqB,CAAC,CAAC;KACjD,CAAC;GACmB,YAAY,CAoKhC;aApKoB,YAAY;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "3.0.0-alpha.186",
+  "version": "3.0.0-alpha.188",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -133,5 +133,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "a0509afc7015a6bcac399f61948e4aa33eadb9f0"
+  "gitHead": "6e6617e57e111d7a1e1af843007d3d69fb3df8f6"
 }

package/report/x-components.api.json

@@ -31777,12 +31777,12 @@
             },
             {
               "kind": "Property",
-              "canonicalReference": "@empathyco/x-components!QueryPreview#maxItemsToRender:member",
-              "docComment": "/**\n * Number of query preview results to be rendered.\n *\n * @public\n */\n",
+              "canonicalReference": "@empathyco/x-components!QueryPreview#debounceTimeMs:member",
+              "docComment": "/**\n * Debounce time in milliseconds for triggering the search requests. It will default to 0 to fit the most common use case (pre-search), and it would work properly with a 250 value inside empathize.\n */\n",
               "excerptTokens": [
                 {
                   "kind": "Content",
-                  "text": "protected maxItemsToRender?: "
+                  "text": "debounceTimeMs: "
                 },
                 {
                   "kind": "Content",
@@ -31793,9 +31793,9 @@
                   "text": ";"
                 }
               ],
-              "isOptional": true,
+              "isOptional": false,
               "releaseTag": "Public",
-              "name": "maxItemsToRender",
+              "name": "debounceTimeMs",
               "propertyTypeTokenRange": {
                 "startIndex": 1,
                 "endIndex": 2
@@ -31803,33 +31803,31 @@
               "isStatic": false
             },
             {
-              "kind": "Method",
-              "canonicalReference": "@empathyco/x-components!QueryPreview#mounted:member(1)",
-              "docComment": "",
+              "kind": "Property",
+              "canonicalReference": "@empathyco/x-components!QueryPreview#maxItemsToRender:member",
+              "docComment": "/**\n * Number of query preview results to be rendered.\n *\n * @public\n */\n",
               "excerptTokens": [
                 {
                   "kind": "Content",
-                  "text": "protected mounted(): "
+                  "text": "protected maxItemsToRender?: "
                 },
                 {
                   "kind": "Content",
-                  "text": "void"
+                  "text": "number"
                 },
                 {
                   "kind": "Content",
                   "text": ";"
                 }
               ],
-              "isOptional": false,
-              "isStatic": false,
-              "returnTypeTokenRange": {
+              "isOptional": true,
+              "releaseTag": "Public",
+              "name": "maxItemsToRender",
+              "propertyTypeTokenRange": {
                 "startIndex": 1,
                 "endIndex": 2
               },
-              "releaseTag": "Public",
-              "overloadIndex": 1,
-              "parameters": [],
-              "name": "mounted"
+              "isStatic": false
             },
             {
               "kind": "Property",
@@ -31934,7 +31932,7 @@
             {
               "kind": "Property",
               "canonicalReference": "@empathyco/x-components!QueryPreview#queryFeature:member",
-              "docComment": "/**\n * . The origin property for the request\n *\n * @public\n */\n",
+              "docComment": "/**\n * The origin property for the request.\n *\n * @public\n */\n",
               "excerptTokens": [
                 {
                   "kind": "Content",
@@ -31959,34 +31957,6 @@
               },
               "isStatic": false
             },
-            {
-              "kind": "Property",
-              "canonicalReference": "@empathyco/x-components!QueryPreview#queryPreviewRequest:member",
-              "docComment": "/**\n * The computed request object to be used to retrieve the query preview results.\n *\n * @returns The search request object.\n *\n * @public\n */\n",
-              "excerptTokens": [
-                {
-                  "kind": "Content",
-                  "text": "get queryPreviewRequest(): "
-                },
-                {
-                  "kind": "Reference",
-                  "text": "SearchRequest",
-                  "canonicalReference": "@empathyco/x-components!SearchRequest:interface"
-                },
-                {
-                  "kind": "Content",
-                  "text": ";"
-                }
-              ],
-              "isOptional": false,
-              "releaseTag": "Public",
-              "name": "queryPreviewRequest",
-              "propertyTypeTokenRange": {
-                "startIndex": 1,
-                "endIndex": 2
-              },
-              "isStatic": false
-            },
             {
               "kind": "Property",
               "canonicalReference": "@empathyco/x-components!QueryPreview#queryPreviewResults:member",

package/report/x-components.api.md

@@ -2999,17 +2999,25 @@ export type QueryOriginInit = Partial<Pick<WireMetadata, 'feature' | 'location'>
 
 // @public
 export class QueryPreview extends Vue_2 {
+    // @internal
+    protected beforeDestroy(): void;
+    // @internal
+    protected cancelEmitPreviewRequestChanged(_new: DebouncedFunction<[SearchRequest]>, old: DebouncedFunction<[SearchRequest]>): void;
     config: QueriesPreviewConfig;
     // @internal
-    location?: FeatureLocation;
+    protected created(): void;
+    debounceTimeMs: number;
+    // @internal
+    protected get emitQueryPreviewRequestChanged(): DebouncedFunction<[SearchRequest]>;
+    // @internal
+    protected location?: FeatureLocation;
     protected maxItemsToRender?: number;
-    // (undocumented)
-    protected mounted(): void;
     params: Dictionary<unknown>;
     previewResults: Dictionary<QueryPreviewItem>;
     protected query: string;
     protected queryFeature?: QueryFeature;
-    get queryPreviewRequest(): SearchRequest;
+    // @internal
+    protected get queryPreviewRequest(): SearchRequest;
     get queryPreviewResults(): Partial<QueryPreviewItem> | undefined;
     get results(): Result[] | undefined;
 }

package/types/plugins/x-emitters.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"x-emitters.d.ts","sourceRoot":"","sources":["../../../src/plugins/x-emitters.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,MAAM,CAAC;AAE7B,OAAO,EAAE,sBAAsB,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAI/F,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAErC;;;;;;;;;GASG;AACH,wBAAgB,qBAAqB,CACnC,EAAE,IAAI,EAAE,aAAa,EAAE,WAAW,EAAE,EAAE,UAAU,EAChD,GAAG,EAAE,IAAI,EACT,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,GAChB,IAAI,CA8BN;AA8ED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAC9B,aAAa,EAAE,sBAAsB,GAAG,gBAAgB,GACvD,aAAa,IAAI,sBAAsB,CAEzC"}
+{"version":3,"file":"x-emitters.d.ts","sourceRoot":"","sources":["../../../src/plugins/x-emitters.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,MAAM,CAAC;AAE7B,OAAO,EAAE,sBAAsB,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAI/F,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAErC;;;;;;;;;GASG;AACH,wBAAgB,qBAAqB,CACnC,EAAE,IAAI,EAAE,aAAa,EAAE,WAAW,EAAE,EAAE,UAAU,EAChD,GAAG,EAAE,IAAI,EACT,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,GAChB,IAAI,CAsBN;AA8ED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAC9B,aAAa,EAAE,sBAAsB,GAAG,gBAAgB,GACvD,aAAa,IAAI,sBAAsB,CAEzC"}

package/types/x-modules/queries-preview/components/query-preview.vue.d.ts

@@ -4,6 +4,7 @@ import { SearchRequest, Result } from '@empathyco/x-types';
 import { QueryFeature, FeatureLocation } from '../../../types/origin';
 import { QueryPreviewItem } from '../store/types';
 import { QueriesPreviewConfig } from '../config.types';
+import { DebouncedFunction } from '../../../utils';
 /**
  * Retrieves a preview of the results of a query and exposes them in the default slot,
  * along with the query preview and the totalResults of the search request.
@@ -18,8 +19,8 @@ export default class QueryPreview extends Vue {
      * @public
      */
     protected query: string;
-    /**.
-     *  The origin property for the request
+    /**
+     * The origin property for the request.
      *
      * @public
      */
@@ -30,6 +31,12 @@ export default class QueryPreview extends Vue {
      * @public
      */
     protected maxItemsToRender?: number;
+    /**
+     * Debounce time in milliseconds for triggering the search requests.
+     * It will default to 0 to fit the most common use case (pre-search),
+     * and it would work properly with a 250 value inside empathize.
+     */
+    debounceTimeMs: number;
     /**
      * The results preview of the queries preview mounted.
      * It is a dictionary, indexed by the query preview query.
@@ -61,15 +68,43 @@ export default class QueryPreview extends Vue {
      *
      * @internal
      */
-    location?: FeatureLocation;
+    protected location?: FeatureLocation;
     /**
      * The computed request object to be used to retrieve the query preview results.
      *
      * @returns The search request object.
-     * @public
+     * @internal
+     */
+    protected get queryPreviewRequest(): SearchRequest;
+    /**
+     * The debounce method to trigger the request after the debounceTimeMs defined.
+     *
+     * @returns The search request object.
+     * @internal
+     */
+    protected get emitQueryPreviewRequestChanged(): DebouncedFunction<[SearchRequest]>;
+    /**
+     * Initialises watcher to emit debounced requests, and first value for the requests.
+     *
+     * @internal
+     */
+    protected created(): void;
+    /**
+     * Cancels the (remaining) requests when the component is destroyed
+     * via the `debounce.cancel()` method.
+     *
+     * @internal
+     */
+    protected beforeDestroy(): void;
+    /**
+     * Cancels the previous request when the debounced function changes (e.g: the debounceTimeMs
+     * prop changes or there is a request in progress that cancels it).
+     *
+     * @param _new - The new debounced function.
+     * @param old - The previous debounced function.
+     * @internal
      */
-    get queryPreviewRequest(): SearchRequest;
-    protected mounted(): void;
+    protected cancelEmitPreviewRequestChanged(_new: DebouncedFunction<[SearchRequest]>, old: DebouncedFunction<[SearchRequest]>): void;
     /**
      * Gets from the state the results preview of the query preview.
      *

package/types/x-modules/queries-preview/components/query-preview.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"query-preview.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/queries-preview/components/query-preview.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAkCA,OAAO,GAAG,MAAM,KAAK,CAAC;AAEtB,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAO3D,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAIvD;;;;;;GAMG;AAOH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,GAAG;IAC3C;;;;OAIG;IAIH,SAAS,CAAC,KAAK,EAAG,MAAM,CAAC;IAEzB;;;;OAIG;IAEH,SAAS,CAAC,YAAY,CAAC,EAAE,YAAY,CAAC;IAEtC;;;;OAIG;IAEH,SAAS,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAEpC;;;OAGG;IAEI,cAAc,EAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAErD;;;OAGG;IAEI,MAAM,EAAG,UAAU,CAAC,OAAO,CAAC,CAAC;IAEpC;;;OAGG;IAEI,MAAM,EAAG,oBAAoB,CAAC;IAErC;;;;;;;;;OASG;IACH,IACW,OAAO,IAAI,MAAM,EAAE,GAAG,SAAS,CAEzC;IAED;;;;OAIG;IAEI,QAAQ,CAAC,EAAE,eAAe,CAAC;IAElC;;;;;OAKG;IACH,IACW,mBAAmB,IAAI,aAAa,CAY9C;IAED,SAAS,CAAC,OAAO,IAAI,IAAI;IAIzB;;;;OAIG;IACH,IAAW,mBAAmB,IAAI,OAAO,CAAC,gBAAgB,CAAC,GAAG,SAAS,CAQtE;CACF"}
+{"version":3,"file":"query-preview.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/queries-preview/components/query-preview.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAkCA,OAAO,GAAG,MAAM,KAAK,CAAC;AAEtB,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAM3D,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAIvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEnD;;;;;;GAMG;AAOH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,GAAG;IAC3C;;;;OAIG;IAIH,SAAS,CAAC,KAAK,EAAG,MAAM,CAAC;IAEzB;;;;OAIG;IAEH,SAAS,CAAC,YAAY,CAAC,EAAE,YAAY,CAAC;IAEtC;;;;OAIG;IAEH,SAAS,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAEpC;;;;OAIG;IAEI,cAAc,EAAG,MAAM,CAAC;IAE/B;;;OAGG;IAEI,cAAc,EAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAErD;;;OAGG;IAEI,MAAM,EAAG,UAAU,CAAC,OAAO,CAAC,CAAC;IAEpC;;;OAGG;IAEI,MAAM,EAAG,oBAAoB,CAAC;IAErC;;;;;;;;;OASG;IACH,IACW,OAAO,IAAI,MAAM,EAAE,GAAG,SAAS,CAEzC;IAED;;;;OAIG;IAEH,SAAS,CAAC,QAAQ,CAAC,EAAE,eAAe,CAAC;IAErC;;;;;OAKG;IACH,SAAS,KAAK,mBAAmB,IAAI,aAAa,CAYjD;IAED;;;;;OAKG;IACH,SAAS,KAAK,8BAA8B,IAAI,iBAAiB,CAAC,CAAC,aAAa,CAAC,CAAC,CAIjF;IAED;;;;OAIG;IACH,SAAS,CAAC,OAAO,IAAI,IAAI;IAQzB;;;;;OAKG;IACH,SAAS,CAAC,aAAa,IAAI,IAAI;IAI/B;;;;;;;OAOG;IAEH,SAAS,CAAC,+BAA+B,CACvC,IAAI,EAAE,iBAAiB,CAAC,CAAC,aAAa,CAAC,CAAC,EACxC,GAAG,EAAE,iBAAiB,CAAC,CAAC,aAAa,CAAC,CAAC,GACtC,IAAI;IAIP;;;;OAIG;IACH,IAAW,mBAAmB,IAAI,OAAO,CAAC,gBAAgB,CAAC,GAAG,SAAS,CAQtE;CACF"}

package/docs/API-reference/api/x-components.querypreview.mounted.md

@@ -1,15 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [QueryPreview](./x-components.querypreview.md) &gt; [mounted](./x-components.querypreview.mounted.md)
-
-## QueryPreview.mounted() method
-
-<b>Signature:</b>
-
-```typescript
-protected mounted(): void;
-```
-<b>Returns:</b>
-
-void
-

package/docs/API-reference/api/x-components.querypreview.querypreviewrequest.md

@@ -1,13 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [QueryPreview](./x-components.querypreview.md) &gt; [queryPreviewRequest](./x-components.querypreview.querypreviewrequest.md)
-
-## QueryPreview.queryPreviewRequest property
-
-The computed request object to be used to retrieve the query preview results.
-
-<b>Signature:</b>
-
-```typescript
-get queryPreviewRequest(): SearchRequest;
-```