@empathyco/x-components 3.0.0-alpha.150 → 3.0.0-alpha.153

package/CHANGELOG.md

@@ -3,6 +3,49 @@
 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.153](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.152...@empathyco/x-components@3.0.0-alpha.153) (2022-08-10)
+
+### Features
+
+- **next-queries:** add `maxItemsToRender` prop to `NextQueryPreview` component (#646)
+  ([848427c](https://github.com/empathyco/x/commit/848427cb9dae85c72549ab026b3785194ec4adbd)),
+  closes [EX-6820](https://searchbroker.atlassian.net/browse/EX-6820)
+
+# 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.152](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.151...@empathyco/x-components@3.0.0-alpha.152) (2022-08-10)
+
+### ⚠ BREAKING CHANGES
+
+- **result:** `Result` model properties are optional, except `id`, `modelName` and `tagging`.
+
+### Features
+
+- **result:** add `variants` support (#644)
+  ([d5db09e](https://github.com/empathyco/x/commit/d5db09e9be92d0df65329680ee286959030ccecc)),
+  closes [EX-6760](https://searchbroker.atlassian.net/browse/EX-6760)
+
+# 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.151](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.150...@empathyco/x-components@3.0.0-alpha.151) (2022-08-09)
+
+### Documentation
+
+- clarify how to subscribe to any `XEvent` (#645)
+  ([d57941a](https://github.com/empathyco/x/commit/d57941a52d23f56cb7c04ed49b816a252473243f)),
+  closes [EX-6816](https://searchbroker.atlassian.net/browse/EX-6816)
+
+# 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.150](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.149...@empathyco/x-components@3.0.0-alpha.150) (2022-08-08)
 
 ### Features

package/design-system/full-theme.css

@@ -114,6 +114,13 @@
     --x-size-border-radius-bottom-left-button-card
   );
 }
+:root {
+  --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
+  --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
+  --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
+  --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
+}
 [dir="ltr"] .x-button {
   padding-right: var(--x-size-padding-right-button-default);
 }
@@ -7586,11 +7593,3 @@
 .x-normal-case {
   text-transform: none;
 }
-
-:root {
-  --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
-  --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
-  --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
-  --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
-}

package/docs/API-reference/api/x-components.nextquerypreview.maxitemstorender.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; [NextQueryPreview](./x-components.nextquerypreview.md) &gt; [maxItemsToRender](./x-components.nextquerypreview.maxitemstorender.md)
+
+## NextQueryPreview.maxItemsToRender property
+
+Number of suggestion results to be rendered.
+
+<b>Signature:</b>
+
+```typescript
+protected maxItemsToRender?: number;
+```

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

@@ -17,9 +17,10 @@ export default class NextQueryPreview extends Vue
 
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
+|  [maxItemsToRender?](./x-components.nextquerypreview.maxitemstorender.md) |  | number | <i>(Optional)</i> Number of suggestion results to be rendered. |
 |  [previewResults](./x-components.nextquerypreview.previewresults.md) |  | Dictionary&lt;PreviewResults&gt; | The results preview of the next queries mounted. It is a dictionary, indexed by the next query query. |
 |  [suggestion](./x-components.nextquerypreview.suggestion.md) |  | NextQuery | The next query to retrieve the results preview. |
-|  [suggestionResults](./x-components.nextquerypreview.suggestionresults.md) |  | PreviewResults | Gets from the state the results preview of the next query. |
+|  [suggestionResults](./x-components.nextquerypreview.suggestionresults.md) |  | PreviewResults \| undefined | Gets from the state the results preview of the next query. |
 
 ## Methods
 

package/docs/API-reference/api/x-components.nextquerypreview.suggestionresults.md

@@ -9,5 +9,5 @@ Gets from the state the results preview of the next query.
 <b>Signature:</b>
 
 ```typescript
-get suggestionResults(): PreviewResults;
+get suggestionResults(): PreviewResults | undefined;
 ```

package/docs/API-reference/api/x-types.md

@@ -74,6 +74,7 @@ Entry point to export search-type models and testing schemas in a unified api-ex
 |  [ResultIdentifier](./x-types.resultidentifier.md) | The client result identifier (SKU, MOCACO, a simple ID...). |
 |  [ResultPrice](./x-types.resultprice.md) | The result price. |
 |  [ResultRating](./x-types.resultrating.md) | The result rating. |
+|  [ResultVariant](./x-types.resultvariant.md) | A result variant. |
 |  [SearchRequest](./x-types.searchrequest.md) | The Request for the Search endpoint. |
 |  [SearchResponse](./x-types.searchresponse.md) | Response for the search endpoint. |
 |  [SimpleFacet](./x-types.simplefacet.md) | Simple facet is a trait for filtering results. It extends from [Facet](./x-types.facet.md)<!-- -->, changes the modelName and uses [SimpleFilter](./x-types.simplefilter.md) as filters. |

package/docs/API-reference/api/x-types.result.identifier.md

@@ -9,5 +9,5 @@
 <b>Signature:</b>
 
 ```typescript
-identifier: ResultIdentifier;
+identifier?: ResultIdentifier;
 ```

package/docs/API-reference/api/x-types.result.images.md

@@ -9,5 +9,5 @@ Images of the result. It should be the URLs.
 <b>Signature:</b>
 
 ```typescript
-images: string[];
+images?: string[];
 ```

package/docs/API-reference/api/x-types.result.iswishlisted.md

@@ -9,5 +9,5 @@ Flag if the results has been added to the wishlist or not.
 <b>Signature:</b>
 
 ```typescript
-isWishlisted: boolean;
+isWishlisted?: boolean;
 ```

package/docs/API-reference/api/x-types.result.md

@@ -17,12 +17,13 @@ export interface Result extends NamedModel<'Result'>, Identifiable, Taggable
 
 |  Property | Type | Description |
 |  --- | --- | --- |
-|  [identifier](./x-types.result.identifier.md) | [ResultIdentifier](./x-types.resultidentifier.md) | [Result identifier](./x-types.resultidentifier.md)<!-- -->. |
-|  [images](./x-types.result.images.md) | string\[\] | Images of the result. It should be the URLs. |
-|  [isWishlisted](./x-types.result.iswishlisted.md) | boolean | Flag if the results has been added to the wishlist or not. |
-|  [name](./x-types.result.name.md) | string | Result name. |
-|  [price](./x-types.result.price.md) | [ResultPrice](./x-types.resultprice.md) | [Result price](./x-types.resultprice.md)<!-- -->. |
-|  [rating](./x-types.result.rating.md) | [ResultRating](./x-types.resultrating.md) | [Result rating](./x-types.resultrating.md)<!-- -->. |
-|  [type](./x-types.result.type.md) | string | The type of the result: product, article, pack, etc... |
-|  [url](./x-types.result.url.md) | string | Result URL to redirect to PDP. |
+|  [identifier?](./x-types.result.identifier.md) | [ResultIdentifier](./x-types.resultidentifier.md) | <i>(Optional)</i> [Result identifier](./x-types.resultidentifier.md)<!-- -->. |
+|  [images?](./x-types.result.images.md) | string\[\] | <i>(Optional)</i> Images of the result. It should be the URLs. |
+|  [isWishlisted?](./x-types.result.iswishlisted.md) | boolean | <i>(Optional)</i> Flag if the results has been added to the wishlist or not. |
+|  [name?](./x-types.result.name.md) | string | <i>(Optional)</i> Result name. |
+|  [price?](./x-types.result.price.md) | [ResultPrice](./x-types.resultprice.md) | <i>(Optional)</i> [Result price](./x-types.resultprice.md)<!-- -->. |
+|  [rating?](./x-types.result.rating.md) | [ResultRating](./x-types.resultrating.md) | <i>(Optional)</i> [Result rating](./x-types.resultrating.md)<!-- -->. |
+|  [type?](./x-types.result.type.md) | string | <i>(Optional)</i> The type of the result: product, article, pack, etc... |
+|  [url?](./x-types.result.url.md) | string | <i>(Optional)</i> Result URL to redirect to PDP. |
+|  [variants?](./x-types.result.variants.md) | [ResultVariant](./x-types.resultvariant.md)<!-- -->\[\] | <i>(Optional)</i> [Variants of the result](./x-types.resultvariant.md)<!-- -->. |
 

package/docs/API-reference/api/x-types.result.name.md

@@ -9,5 +9,5 @@ Result name.
 <b>Signature:</b>
 
 ```typescript
-name: string;
+name?: string;
 ```

package/docs/API-reference/api/x-types.result.price.md

@@ -9,5 +9,5 @@
 <b>Signature:</b>
 
 ```typescript
-price: ResultPrice;
+price?: ResultPrice;
 ```

package/docs/API-reference/api/x-types.result.rating.md

@@ -9,5 +9,5 @@
 <b>Signature:</b>
 
 ```typescript
-rating: ResultRating;
+rating?: ResultRating;
 ```

package/docs/API-reference/api/x-types.result.type.md

@@ -9,5 +9,5 @@ The type of the result: product, article, pack, etc...
 <b>Signature:</b>
 
 ```typescript
-type: string;
+type?: string;
 ```

package/docs/API-reference/api/x-types.result.url.md

@@ -9,5 +9,5 @@ Result URL to redirect to PDP.
 <b>Signature:</b>
 
 ```typescript
-url: string;
+url?: string;
 ```

package/docs/API-reference/api/x-types.result.variants.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-types](./x-types.md) &gt; [Result](./x-types.result.md) &gt; [variants](./x-types.result.variants.md)
+
+## Result.variants property
+
+[Variants of the result](./x-types.resultvariant.md)<!-- -->.
+
+<b>Signature:</b>
+
+```typescript
+variants?: ResultVariant[];
+```

package/docs/API-reference/api/x-types.resultvariant.md

@@ -0,0 +1,15 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-types](./x-types.md) &gt; [ResultVariant](./x-types.resultvariant.md)
+
+## ResultVariant interface
+
+A result variant.
+
+<b>Signature:</b>
+
+```typescript
+export interface ResultVariant extends Omit<Result, 'id' | 'modelName' | 'tagging'> 
+```
+<b>Extends:</b> Omit&lt;[Result](./x-types.result.md)<!-- -->, 'id' \| 'modelName' \| 'tagging'&gt;
+

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

@@ -12,9 +12,10 @@ By default, it renders the names of the results.
 
 ## Props
 
-| Name                    | Description                                     | Type                   | Default       |
-| ----------------------- | ----------------------------------------------- | ---------------------- | ------------- |
-| <code>suggestion</code> | The next query to retrieve the results preview. | <code>NextQuery</code> | <code></code> |
+| Name                          | Description                                     | Type                   | Default       |
+| ----------------------------- | ----------------------------------------------- | ---------------------- | ------------- |
+| <code>suggestion</code>       | The next query to retrieve the results preview. | <code>NextQuery</code> | <code></code> |
+| <code>maxItemsToRender</code> | Number of suggestion results to be rendered.    | <code>number</code>    | <code></code> |
 
 ## Slots
 
@@ -153,3 +154,52 @@ export default {
 };
 </script>
 ```
+
+### Play with props
+
+In this example, the suggestions has been limited to render a maximum of 4 items.
+
+```vue
+<template>
+  <NextQueryPreview
+    :maxItemsToRender="maxItemsToRender"
+    :suggestion="suggestion"
+    #default="{ results }"
+  >
+    <BaseGrid #default="{ item }" :items="results">
+      <BaseResultLink :result="item">
+        <BaseResultImage :result="item" />
+      </BaseResultLink>
+    </BaseGrid>
+  </NextQueryPreview>
+</template>
+
+<script>
+import {
+  BaseGrid,
+  BaseResultImage,
+  BaseResultLink
+} from "@empathyco/x-components";
+import { NextQueryPreview } from "@empathyco/x-components/next-queries";
+
+export default {
+  name: "NextQueryPreviewDemo",
+  components: {
+    BaseGrid,
+    BaseResultImage,
+    BaseResultLink,
+    NextQueryPreview
+  },
+  data() {
+    return {
+      maxItemsToRender: 4,
+      suggestion: {
+        modelName: "NextQuery",
+        query: "tshirt",
+        facets: []
+      }
+    };
+  }
+};
+</script>
+```

package/docs/API-reference/components/search-box/x-components.search-input.md

@@ -98,6 +98,16 @@ For example, if you select the search input box, the message “focus” appears
 enter a search term, the message “typing” appears. If you press Enter after typing a search term,
 the message “enter” appears.
 
+<!-- prettier-ignore-start -->
+:::warning X Events are only emitted from the root X Component.
+At the moment, X Events are only emitted from the root X Component. This means that if you wrap
+the `SearchInput` with another component of another module like the `MainScroll`, you should add
+the listeners to the `MainScroll` instead of the `SearchInput`. If you need to subscribe to these
+events, it is recommended to use the [`GlobalXBus`](../common/x-components.global-x-bus.md)
+component instead.
+:::
+<!-- prettier-ignore-end -->
+
 _Type any term in the input field to try it out!_
 
 ```vue live

package/docs/build-search-ui/web-how-to-use-x-components-guide.md

@@ -162,3 +162,40 @@ Next, you want to configure the behavior of the `SearchInput` component. Here yo
   :autocompleteSuggestionsEvent="'NextQueriesChanged'"
 />
 ```
+
+**3. Listening to X Events**
+
+For advanced use cases you might need to subscribe to certain `XEvent`. The recommended way to do so
+is by using the `GlobalXBus` component.
+
+In this example you are subscribing to the `UserAcceptedAQuery` event. This event is emitted both by
+the `SearchInput` component and by the `QuerySuggestions` one.
+
+```vue live
+<template>
+  <div>
+    <GlobalXBus @UserAcceptedAQuery="logUserAcceptedAQuery" />
+    <SearchInput />
+    <QuerySuggestions />
+  </div>
+</template>
+<script>
+  import { GlobalXBus } from '@empathyco/x-components';
+  import { SearchInput } from '@empathyco/x-components/search-box';
+  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';
+
+  export default {
+    name: 'Demo',
+    components: {
+      GlobalXBus,
+      SearchInput,
+      QuerySuggestions
+    },
+    methods: {
+      logUserAcceptedAQuery(query, metadata) {
+        console.log('UserAcceptedAQuery', query, metadata);
+      }
+    }
+  };
+</script>
+```

package/js/components/result/base-result-current-price.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-result-current-price.vue.js","sources":["../../../../src/components/result/base-result-current-price.vue"],"sourcesContent":["<template>\n  <div :class=\"dynamicClasses\" class=\"x-result-current-price\" data-test=\"result-current-price\">\n    <!--\n      @slot Base currency item\n          @binding {result} result - Result data\n    -->\n    <slot :result=\"result\">\n      <BaseCurrency :value=\"result.price.value\" :format=\"format\" />\n    </slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { Result } from '@empathyco/x-types';\n  import { Component, Prop } from 'vue-property-decorator';\n  import Vue from 'vue';\n  import { VueCSSClasses } from '../../utils/types';\n  import BaseCurrency from '../currency/base-currency.vue';\n\n  /**\n   * Component that renders the {@link @empathyco/x-types#Result | result} current price\n   * that may or may not be on sale.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseCurrency }\n  })\n  export default class BaseResultCurrentPrice extends Vue {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result | result} information.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected result!: Result;\n\n    /**\n     * Format or mask to be defined as string.\n     * - Use 'i' to define integer numbers.\n     * - Use 'd' to define decimal numbers. You can define the length of the decimal part. If the\n     * doesn't include decimals, it is filled with zeros until reach the length defined with 'd's.\n     * - Integer separator must be defined between the 3rd and the 4th integer 'i' of a group.\n     * - Decimal separator must be defined between the last 'i' and the first 'd'. It can be more\n     * than one character.\n     * - Set whatever you need around the integers and decimals marks.\n     * - Default mask: 'i.iii,dd' which returns '1.345,67'.\n     *\n     * @remarks The number of 'd', which is the maximum decimal length, MUST match with the length\n     * of decimals provided from the adapter. Otherwise, when the component truncate the decimal\n     * part, delete significant digits.\n     *\n     * @public\n     */\n    @Prop()\n    protected format?: string;\n\n    /**\n     * Dynamic CSS classes to add to the root element of this component.\n     *\n     * @returns A booleans dictionary where each key is the class name to add, and the boolean value\n     * tells if it should be added or not.\n     * @internal\n     */\n    protected get dynamicClasses(): VueCSSClasses {\n      return {\n        'x-result-current-price--on-sale': this.result.price.hasDiscount\n      };\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThis component shows the current price formatted. You can provide the `format` by property or let\nthe `BaseCurrency` component use an injected one.\n\n```vue\n<BaseResultCurrentPrice :value=\"result\" :format=\"'i.iii,ddd €'\" />\n```\n\n### Overriding default slot\n\n```vue\n<BaseResultCurrentPrice :result=\"result\">\n  <span class=\"custom-base-result-current-price\">{{ result.price.value }}</span>\n</BaseResultCurrentPrice>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-result-current-price.vue.js","sources":["../../../../src/components/result/base-result-current-price.vue"],"sourcesContent":["<template>\n  <div :class=\"dynamicClasses\" class=\"x-result-current-price\" data-test=\"result-current-price\">\n    <!--\n      @slot Base currency item\n          @binding {result} result - Result data\n    -->\n    <slot :result=\"result\">\n      <BaseCurrency :value=\"result.price.value\" :format=\"format\" />\n    </slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { Result } from '@empathyco/x-types';\n  import { Component, Prop } from 'vue-property-decorator';\n  import Vue from 'vue';\n  import { VueCSSClasses } from '../../utils/types';\n  import BaseCurrency from '../currency/base-currency.vue';\n\n  /**\n   * Component that renders the {@link @empathyco/x-types#Result | result} current price\n   * that may or may not be on sale.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseCurrency }\n  })\n  export default class BaseResultCurrentPrice extends Vue {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result | result} information.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected result!: Result;\n\n    /**\n     * Format or mask to be defined as string.\n     * - Use 'i' to define integer numbers.\n     * - Use 'd' to define decimal numbers. You can define the length of the decimal part. If the\n     * doesn't include decimals, it is filled with zeros until reach the length defined with 'd's.\n     * - Integer separator must be defined between the 3rd and the 4th integer 'i' of a group.\n     * - Decimal separator must be defined between the last 'i' and the first 'd'. It can be more\n     * than one character.\n     * - Set whatever you need around the integers and decimals marks.\n     * - Default mask: 'i.iii,dd' which returns '1.345,67'.\n     *\n     * @remarks The number of 'd', which is the maximum decimal length, MUST match with the length\n     * of decimals provided from the adapter. Otherwise, when the component truncate the decimal\n     * part, delete significant digits.\n     *\n     * @public\n     */\n    @Prop()\n    protected format?: string;\n\n    /**\n     * Dynamic CSS classes to add to the root element of this component.\n     *\n     * @returns A booleans dictionary where each key is the class name to add, and the boolean value\n     * tells if it should be added or not.\n     * @internal\n     */\n    protected get dynamicClasses(): VueCSSClasses {\n      return {\n        'x-result-current-price--on-sale': this.result.price?.hasDiscount ?? false\n      };\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThis component shows the current price formatted. You can provide the `format` by property or let\nthe `BaseCurrency` component use an injected one.\n\n```vue\n<BaseResultCurrentPrice :value=\"result\" :format=\"'i.iii,ddd €'\" />\n```\n\n### Overriding default slot\n\n```vue\n<BaseResultCurrentPrice :result=\"result\">\n  <span class=\"custom-base-result-current-price\">{{ result.price.value }}</span>\n</BaseResultCurrentPrice>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/result/base-result-current-price.vue_rollup-plugin-vue_script.vue.js

@@ -19,7 +19,7 @@ let BaseResultCurrentPrice = class BaseResultCurrentPrice extends Vue {
      */
     get dynamicClasses() {
         return {
-            'x-result-current-price--on-sale': this.result.price.hasDiscount
+            'x-result-current-price--on-sale': this.result.price?.hasDiscount ?? false
         };
     }
 };

package/js/components/result/base-result-current-price.vue_rollup-plugin-vue_script.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-result-current-price.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/result/base-result-current-price.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\nimport { Result } from '@empathyco/x-types';\nimport { Component, Prop } from 'vue-property-decorator';\nimport Vue from 'vue';\nimport { VueCSSClasses } from '../../utils/types';\nimport BaseCurrency from '../currency/base-currency.vue';\n\n/**\n * Component that renders the {@link @empathyco/x-types#Result | result} current price\n * that may or may not be on sale.\n *\n * @public\n */\n@Component({\n  components: { BaseCurrency }\n})\nexport default class BaseResultCurrentPrice extends Vue {\n  /**\n   * (Required) The {@link @empathyco/x-types#Result | result} information.\n   *\n   * @public\n   */\n  @Prop({ required: true })\n  protected result!: Result;\n\n  /**\n   * Format or mask to be defined as string.\n   * - Use 'i' to define integer numbers.\n   * - Use 'd' to define decimal numbers. You can define the length of the decimal part. If the\n   * doesn't include decimals, it is filled with zeros until reach the length defined with 'd's.\n   * - Integer separator must be defined between the 3rd and the 4th integer 'i' of a group.\n   * - Decimal separator must be defined between the last 'i' and the first 'd'. It can be more\n   * than one character.\n   * - Set whatever you need around the integers and decimals marks.\n   * - Default mask: 'i.iii,dd' which returns '1.345,67'.\n   *\n   * @remarks The number of 'd', which is the maximum decimal length, MUST match with the length\n   * of decimals provided from the adapter. Otherwise, when the component truncate the decimal\n   * part, delete significant digits.\n   *\n   * @public\n   */\n  @Prop()\n  protected format?: string;\n\n  /**\n   * Dynamic CSS classes to add to the root element of this component.\n   *\n   * @returns A booleans dictionary where each key is the class name to add, and the boolean value\n   * tells if it should be added or not.\n   * @internal\n   */\n  protected get dynamicClasses(): VueCSSClasses {\n    return {\n      'x-result-current-price--on-sale': this.result.price.hasDiscount\n    };\n  }\n}\n"],"names":["BaseCurrency"],"mappings":";;;;;AAmBA;;;;;;AASA,IAAqB,sBAAsB,GAA3C,MAAqB,sBAAuB,SAAQ,GAAG;;;;;;;;IAoCrD,IAAc,cAAc;QAC1B,OAAO;YACL,iCAAiC,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW;SACjE,CAAC;KACH;CACF,CAAA;AAlCC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;sDACC;AAoB1B;IADC,IAAI,EAAE;sDACmB;AA3BP,sBAAsB;IAH1C,SAAS,CAAC;QACT,UAAU,EAAE,gBAAEA,iBAAY,EAAE;KAC7B,CAAC;GACmB,sBAAsB,CAyC1C;aAzCoB,sBAAsB;;;;"}
+{"version":3,"file":"base-result-current-price.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/result/base-result-current-price.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\nimport { Result } from '@empathyco/x-types';\nimport { Component, Prop } from 'vue-property-decorator';\nimport Vue from 'vue';\nimport { VueCSSClasses } from '../../utils/types';\nimport BaseCurrency from '../currency/base-currency.vue';\n\n/**\n * Component that renders the {@link @empathyco/x-types#Result | result} current price\n * that may or may not be on sale.\n *\n * @public\n */\n@Component({\n  components: { BaseCurrency }\n})\nexport default class BaseResultCurrentPrice extends Vue {\n  /**\n   * (Required) The {@link @empathyco/x-types#Result | result} information.\n   *\n   * @public\n   */\n  @Prop({ required: true })\n  protected result!: Result;\n\n  /**\n   * Format or mask to be defined as string.\n   * - Use 'i' to define integer numbers.\n   * - Use 'd' to define decimal numbers. You can define the length of the decimal part. If the\n   * doesn't include decimals, it is filled with zeros until reach the length defined with 'd's.\n   * - Integer separator must be defined between the 3rd and the 4th integer 'i' of a group.\n   * - Decimal separator must be defined between the last 'i' and the first 'd'. It can be more\n   * than one character.\n   * - Set whatever you need around the integers and decimals marks.\n   * - Default mask: 'i.iii,dd' which returns '1.345,67'.\n   *\n   * @remarks The number of 'd', which is the maximum decimal length, MUST match with the length\n   * of decimals provided from the adapter. Otherwise, when the component truncate the decimal\n   * part, delete significant digits.\n   *\n   * @public\n   */\n  @Prop()\n  protected format?: string;\n\n  /**\n   * Dynamic CSS classes to add to the root element of this component.\n   *\n   * @returns A booleans dictionary where each key is the class name to add, and the boolean value\n   * tells if it should be added or not.\n   * @internal\n   */\n  protected get dynamicClasses(): VueCSSClasses {\n    return {\n      'x-result-current-price--on-sale': this.result.price?.hasDiscount ?? false\n    };\n  }\n}\n"],"names":["BaseCurrency"],"mappings":";;;;;AAmBA;;;;;;AASA,IAAqB,sBAAsB,GAA3C,MAAqB,sBAAuB,SAAQ,GAAG;;;;;;;;IAoCrD,IAAc,cAAc;QAC1B,OAAO;YACL,iCAAiC,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,WAAW,IAAI,KAAK;SAC3E,CAAC;KACH;CACF,CAAA;AAlCC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;sDACC;AAoB1B;IADC,IAAI,EAAE;sDACmB;AA3BP,sBAAsB;IAH1C,SAAS,CAAC;QACT,UAAU,EAAE,gBAAEA,iBAAY,EAAE;KAC7B,CAAC;GACmB,sBAAsB,CAyC1C;aAzCoB,sBAAsB;;;;"}

package/js/components/result/base-result-image.vue.js

@@ -74,11 +74,11 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = function (inject) {
     if (!inject) return
-    inject("data-v-0b620073_0", { source: ".x-result-picture[data-v-0b620073] {\n  min-width: 1px;\n  min-height: 1px;\n  position: relative;\n}\n.x-result-picture__image[data-v-0b620073] {\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n}", map: undefined, media: undefined });
+    inject("data-v-66ab7bce_0", { source: ".x-result-picture[data-v-66ab7bce] {\n  min-width: 1px;\n  min-height: 1px;\n  position: relative;\n}\n.x-result-picture__image[data-v-66ab7bce] {\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__ = "data-v-0b620073";
+  const __vue_scope_id__ = "data-v-66ab7bce";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */

package/js/components/result/base-result-image.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-result-image.vue.js","sources":["../../../../src/components/result/base-result-image.vue"],"sourcesContent":["<template>\n  <picture ref=\"image\" class=\"x-picture x-result-picture\" data-test=\"result-picture\">\n    <component\n      :is=\"animation\"\n      v-if=\"!hasImageLoaded && !hasAllImagesFailed\"\n      class=\"x-picture__image x-picture__image--placeholder\"\n      data-test=\"result-picture-placeholder\"\n    >\n      <!-- eslint-disable-next-line max-len -->\n      <!-- @slot (Required) Loading image content. It will be rendered while the real image is not loaded -->\n      <slot name=\"placeholder\" />\n    </component>\n    <component :is=\"animation\">\n      <img\n        v-if=\"imageSrc\"\n        v-show=\"hasImageLoaded\"\n        @error=\"flagImageAsFailed\"\n        @load=\"flagImageLoaded\"\n        :alt=\"result.name\"\n        :src=\"imageSrc\"\n        class=\"x-picture__image x-result-picture-image\"\n        data-test=\"result-picture-image\"\n      />\n      <NoElement v-else-if=\"hasAllImagesFailed\" class=\"x-picture__image x-picture__image--fallback\">\n        <!--\n        Vue styleguidist doesn't generate slot docs for v-else and v-else-if conditions\n        due to a bug https://github.com/vuejs/vue/pull/10286.\n        TODO - Bump styleguidist version when the fix branch is merged and a new version released.\n        -->\n        <!-- eslint-disable-next-line max-len -->\n        <!-- @slot (Required) Fallback image content. It will be rendered when all the images failed -->\n        <slot name=\"fallback\" />\n      </NoElement>\n    </component>\n  </picture>\n</template>\n\n<script lang=\"ts\">\n  import { Result } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { NoElement } from '../no-element';\n\n  /**\n   * Component to be reused that renders an `<img>`.\n   *\n   * @public\n   */\n  @Component({\n    components: {\n      NoElement\n    }\n  })\n  export default class BaseResultImage extends Vue {\n    /**\n     * Animation to use when switching between the placeholder, the loaded image, or the failed\n     * image fallback.\n     *\n     * @public\n     */\n    @Prop({ default: () => NoElement })\n    public animation!: string | typeof Vue;\n    /**\n     * The image has entered in the port view.\n     *\n     * @public\n     */\n    protected hasEnteredView = false;\n    /**\n     * An array of images that failed to load.\n     *\n     * @public\n     */\n    protected failedImages: string[] = [];\n    /**\n     * HTMLElement that references the picture element.\n     *\n     * @public\n     */\n    public $refs!: { image: HTMLElement };\n    /**\n     * Indicates if the result image is loaded.\n     *\n     * @public\n     */\n    protected hasImageLoaded = false;\n\n    /**\n     * (Required) The {@link @empathyco/x-types#Result | result} information.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected result!: Result;\n\n    /**\n     * Checks if intersection observer is available in window object.\n     *\n     * @returns Boolean.\n     *\n     * @internal\n     */\n    protected get isIntersectionObserverAvailable(): boolean {\n      return 'IntersectionObserver' in window;\n    }\n\n    mounted(): void {\n      this.hasEnteredView = !this.isIntersectionObserverAvailable;\n      if (this.isIntersectionObserverAvailable) {\n        this.createObserver();\n      }\n    }\n\n    /**\n     * Gets the src from the result image.\n     *\n     * @returns The result image src.\n     *\n     * @internal\n     */\n    protected get imageSrc(): string {\n      if (this.hasEnteredView && this.result.images.length > 0) {\n        const image = this.result.images.find(image => !this.failedImages.includes(image));\n        return image ?? '';\n      }\n      return '';\n    }\n\n    /**\n     * Creates an intersection observer in the image element.\n     *\n     * @internal\n     */\n    protected createObserver(): void {\n      const image = this.$refs.image as Element;\n      const observer = new IntersectionObserver(this.observerHandler.bind(this));\n      observer.observe(image);\n    }\n\n    /**\n     * Observe all the observables items and detects when a element is intersected.\n     *\n     * @param entries - The observed items.\n     * @param observer - The intersection observer object.\n     *\n     * @internal\n     */\n    protected observerHandler(\n      entries: IntersectionObserverEntry[],\n      observer: IntersectionObserver\n    ): void {\n      entries.forEach(entry => {\n        if (entry.isIntersecting) {\n          this.hasEnteredView = true;\n          observer.disconnect();\n        }\n      });\n    }\n\n    /**\n     * Sets an image as failed.\n     *\n     * @internal\n     */\n    protected flagImageAsFailed(): void {\n      this.failedImages.push(this.imageSrc);\n    }\n\n    /**\n     * Checks if all the images failed.\n     *\n     * @returns Boolean.\n     *\n     * @internal\n     */\n    protected get hasAllImagesFailed(): boolean {\n      return this.failedImages.length === this.result.images.length;\n    }\n\n    /**\n     * Marks an image as loaded.\n     *\n     * @internal\n     */\n    protected flagImageLoaded(): void {\n      this.hasImageLoaded = true;\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-result-picture {\n    min-width: 1px;\n    min-height: 1px;\n    position: relative;\n\n    &__image {\n      max-width: 100%;\n      max-height: 100%;\n      object-fit: contain;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThis component is for the result image. It may be part of the search result page, recommendations or\nother section which needs to include results.\n\nThe result prop is required. It will render a `<img/>` with the result image:\n\n```vue\n<BaseResultImage :result=\"result\" />\n```\n\n### Customizing slots content\n\nFallback and placeholder contents can be customized.\n\nThe fallback slot allows you to replace the content of the fallback image.\n\nThe other slot is called `placeholder`, and allows you to set the image that its going to be\ndisplayed while the real one is loaded.\n\n```vue\n<BaseResultImage :result=\"result\">\n  <template #placeholder>\n    <img class=\"x-result-picture-placeholder\" src=\"./placeholder-image.svg\"/>\n  </template>\n  <template #fallback>\n    <img class=\"x-result-picture-fallback\" src=\"./fallback-image.svg\"/>\n  </template>\n</BaseResultImage>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-result-image.vue.js","sources":["../../../../src/components/result/base-result-image.vue"],"sourcesContent":["<template>\n  <picture ref=\"image\" class=\"x-picture x-result-picture\" data-test=\"result-picture\">\n    <component\n      :is=\"animation\"\n      v-if=\"!hasImageLoaded && !hasAllImagesFailed\"\n      class=\"x-picture__image x-picture__image--placeholder\"\n      data-test=\"result-picture-placeholder\"\n    >\n      <!-- eslint-disable-next-line max-len -->\n      <!-- @slot (Required) Loading image content. It will be rendered while the real image is not loaded -->\n      <slot name=\"placeholder\" />\n    </component>\n    <component :is=\"animation\">\n      <img\n        v-if=\"imageSrc\"\n        v-show=\"hasImageLoaded\"\n        @error=\"flagImageAsFailed\"\n        @load=\"flagImageLoaded\"\n        :alt=\"result.name\"\n        :src=\"imageSrc\"\n        class=\"x-picture__image x-result-picture-image\"\n        data-test=\"result-picture-image\"\n      />\n      <NoElement v-else-if=\"hasAllImagesFailed\" class=\"x-picture__image x-picture__image--fallback\">\n        <!--\n        Vue styleguidist doesn't generate slot docs for v-else and v-else-if conditions\n        due to a bug https://github.com/vuejs/vue/pull/10286.\n        TODO - Bump styleguidist version when the fix branch is merged and a new version released.\n        -->\n        <!-- eslint-disable-next-line max-len -->\n        <!-- @slot (Required) Fallback image content. It will be rendered when all the images failed -->\n        <slot name=\"fallback\" />\n      </NoElement>\n    </component>\n  </picture>\n</template>\n\n<script lang=\"ts\">\n  import { Result } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { NoElement } from '../no-element';\n\n  /**\n   * Component to be reused that renders an `<img>`.\n   *\n   * @public\n   */\n  @Component({\n    components: {\n      NoElement\n    }\n  })\n  export default class BaseResultImage extends Vue {\n    /**\n     * Animation to use when switching between the placeholder, the loaded image, or the failed\n     * image fallback.\n     *\n     * @public\n     */\n    @Prop({ default: () => NoElement })\n    public animation!: string | typeof Vue;\n    /**\n     * The image has entered in the port view.\n     *\n     * @public\n     */\n    protected hasEnteredView = false;\n    /**\n     * An array of images that failed to load.\n     *\n     * @public\n     */\n    protected failedImages: string[] = [];\n    /**\n     * HTMLElement that references the picture element.\n     *\n     * @public\n     */\n    public $refs!: { image: HTMLElement };\n    /**\n     * Indicates if the result image is loaded.\n     *\n     * @public\n     */\n    protected hasImageLoaded = false;\n\n    /**\n     * (Required) The {@link @empathyco/x-types#Result | result} information.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected result!: Result;\n\n    /**\n     * Checks if intersection observer is available in window object.\n     *\n     * @returns Boolean.\n     *\n     * @internal\n     */\n    protected get isIntersectionObserverAvailable(): boolean {\n      return 'IntersectionObserver' in window;\n    }\n\n    mounted(): void {\n      this.hasEnteredView = !this.isIntersectionObserverAvailable;\n      if (this.isIntersectionObserverAvailable) {\n        this.createObserver();\n      }\n    }\n\n    /**\n     * Gets the src from the result image.\n     *\n     * @returns The result image src.\n     *\n     * @internal\n     */\n    protected get imageSrc(): string {\n      if (this.hasEnteredView && this.result.images?.length) {\n        const image = this.result.images.find(image => !this.failedImages.includes(image));\n        return image ?? '';\n      }\n      return '';\n    }\n\n    /**\n     * Creates an intersection observer in the image element.\n     *\n     * @internal\n     */\n    protected createObserver(): void {\n      const image = this.$refs.image as Element;\n      const observer = new IntersectionObserver(this.observerHandler.bind(this));\n      observer.observe(image);\n    }\n\n    /**\n     * Observe all the observables items and detects when a element is intersected.\n     *\n     * @param entries - The observed items.\n     * @param observer - The intersection observer object.\n     *\n     * @internal\n     */\n    protected observerHandler(\n      entries: IntersectionObserverEntry[],\n      observer: IntersectionObserver\n    ): void {\n      entries.forEach(entry => {\n        if (entry.isIntersecting) {\n          this.hasEnteredView = true;\n          observer.disconnect();\n        }\n      });\n    }\n\n    /**\n     * Sets an image as failed.\n     *\n     * @internal\n     */\n    protected flagImageAsFailed(): void {\n      this.failedImages.push(this.imageSrc);\n    }\n\n    /**\n     * Checks if all the images failed.\n     *\n     * @returns Boolean.\n     *\n     * @internal\n     */\n    protected get hasAllImagesFailed(): boolean {\n      return this.failedImages.length === this.result.images?.length;\n    }\n\n    /**\n     * Marks an image as loaded.\n     *\n     * @internal\n     */\n    protected flagImageLoaded(): void {\n      this.hasImageLoaded = true;\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-result-picture {\n    min-width: 1px;\n    min-height: 1px;\n    position: relative;\n\n    &__image {\n      max-width: 100%;\n      max-height: 100%;\n      object-fit: contain;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThis component is for the result image. It may be part of the search result page, recommendations or\nother section which needs to include results.\n\nThe result prop is required. It will render a `<img/>` with the result image:\n\n```vue\n<BaseResultImage :result=\"result\" />\n```\n\n### Customizing slots content\n\nFallback and placeholder contents can be customized.\n\nThe fallback slot allows you to replace the content of the fallback image.\n\nThe other slot is called `placeholder`, and allows you to set the image that its going to be\ndisplayed while the real one is loaded.\n\n```vue\n<BaseResultImage :result=\"result\">\n  <template #placeholder>\n    <img class=\"x-result-picture-placeholder\" src=\"./placeholder-image.svg\"/>\n  </template>\n  <template #fallback>\n    <img class=\"x-result-picture-fallback\" src=\"./fallback-image.svg\"/>\n  </template>\n</BaseResultImage>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/result/base-result-image.vue_rollup-plugin-vue_script.vue.js

@@ -54,7 +54,7 @@ let BaseResultImage = class BaseResultImage extends Vue {
      * @internal
      */
     get imageSrc() {
-        if (this.hasEnteredView && this.result.images.length > 0) {
+        if (this.hasEnteredView && this.result.images?.length) {
             const image = this.result.images.find(image => !this.failedImages.includes(image));
             return image ?? '';
         }
@@ -102,7 +102,7 @@ let BaseResultImage = class BaseResultImage extends Vue {
      * @internal
      */
     get hasAllImagesFailed() {
-        return this.failedImages.length === this.result.images.length;
+        return this.failedImages.length === this.result.images?.length;
     }
     /**
      * Marks an image as loaded.

package/js/components/result/base-result-image.vue_rollup-plugin-vue_script.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-result-image.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/result/base-result-image.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\n\n\n\n\nimport { Result } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { NoElement } from '../no-element';\n\n/**\n * Component to be reused that renders an `<img>`.\n *\n * @public\n */\n@Component({\n  components: {\n    NoElement\n  }\n})\nexport default class BaseResultImage extends Vue {\n  /**\n   * Animation to use when switching between the placeholder, the loaded image, or the failed\n   * image fallback.\n   *\n   * @public\n   */\n  @Prop({ default: () => NoElement })\n  public animation!: string | typeof Vue;\n  /**\n   * The image has entered in the port view.\n   *\n   * @public\n   */\n  protected hasEnteredView = false;\n  /**\n   * An array of images that failed to load.\n   *\n   * @public\n   */\n  protected failedImages: string[] = [];\n  /**\n   * HTMLElement that references the picture element.\n   *\n   * @public\n   */\n  public $refs!: { image: HTMLElement };\n  /**\n   * Indicates if the result image is loaded.\n   *\n   * @public\n   */\n  protected hasImageLoaded = false;\n\n  /**\n   * (Required) The {@link @empathyco/x-types#Result | result} information.\n   *\n   * @public\n   */\n  @Prop({ required: true })\n  protected result!: Result;\n\n  /**\n   * Checks if intersection observer is available in window object.\n   *\n   * @returns Boolean.\n   *\n   * @internal\n   */\n  protected get isIntersectionObserverAvailable(): boolean {\n    return 'IntersectionObserver' in window;\n  }\n\n  mounted(): void {\n    this.hasEnteredView = !this.isIntersectionObserverAvailable;\n    if (this.isIntersectionObserverAvailable) {\n      this.createObserver();\n    }\n  }\n\n  /**\n   * Gets the src from the result image.\n   *\n   * @returns The result image src.\n   *\n   * @internal\n   */\n  protected get imageSrc(): string {\n    if (this.hasEnteredView && this.result.images.length > 0) {\n      const image = this.result.images.find(image => !this.failedImages.includes(image));\n      return image ?? '';\n    }\n    return '';\n  }\n\n  /**\n   * Creates an intersection observer in the image element.\n   *\n   * @internal\n   */\n  protected createObserver(): void {\n    const image = this.$refs.image as Element;\n    const observer = new IntersectionObserver(this.observerHandler.bind(this));\n    observer.observe(image);\n  }\n\n  /**\n   * Observe all the observables items and detects when a element is intersected.\n   *\n   * @param entries - The observed items.\n   * @param observer - The intersection observer object.\n   *\n   * @internal\n   */\n  protected observerHandler(\n    entries: IntersectionObserverEntry[],\n    observer: IntersectionObserver\n  ): void {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        this.hasEnteredView = true;\n        observer.disconnect();\n      }\n    });\n  }\n\n  /**\n   * Sets an image as failed.\n   *\n   * @internal\n   */\n  protected flagImageAsFailed(): void {\n    this.failedImages.push(this.imageSrc);\n  }\n\n  /**\n   * Checks if all the images failed.\n   *\n   * @returns Boolean.\n   *\n   * @internal\n   */\n  protected get hasAllImagesFailed(): boolean {\n    return this.failedImages.length === this.result.images.length;\n  }\n\n  /**\n   * Marks an image as loaded.\n   *\n   * @internal\n   */\n  protected flagImageLoaded(): void {\n    this.hasImageLoaded = true;\n  }\n}\n"],"names":[],"mappings":";;;;;AA2CA;;;;;AAUA,IAAqB,eAAe,GAApC,MAAqB,eAAgB,SAAQ,GAAG;IAAhD;;;;;;;QAcY,mBAAc,GAAG,KAAK,CAAC;;;;;;QAMvB,iBAAY,GAAa,EAAE,CAAC;;;;;;QAY5B,mBAAc,GAAG,KAAK,CAAC;KAsGlC;;;;;;;;IArFC,IAAc,+BAA+B;QAC3C,OAAO,sBAAsB,IAAI,MAAM,CAAC;KACzC;IAED,OAAO;QACL,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,+BAA+B,CAAC;QAC5D,IAAI,IAAI,CAAC,+BAA+B,EAAE;YACxC,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB;KACF;;;;;;;;IASD,IAAc,QAAQ;QACpB,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;YACxD,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;YACnF,OAAO,KAAK,IAAI,EAAE,CAAC;SACpB;QACD,OAAO,EAAE,CAAC;KACX;;;;;;IAOS,cAAc;QACtB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAgB,CAAC;QAC1C,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC3E,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;KACzB;;;;;;;;;IAUS,eAAe,CACvB,OAAoC,EACpC,QAA8B;QAE9B,OAAO,CAAC,OAAO,CAAC,KAAK;YACnB,IAAI,KAAK,CAAC,cAAc,EAAE;gBACxB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;gBAC3B,QAAQ,CAAC,UAAU,EAAE,CAAC;aACvB;SACF,CAAC,CAAC;KACJ;;;;;;IAOS,iBAAiB;QACzB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACvC;;;;;;;;IASD,IAAc,kBAAkB;QAC9B,OAAO,IAAI,CAAC,YAAY,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC;KAC/D;;;;;;IAOS,eAAe;QACvB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC5B;CACF,CAAA;AA9HC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,SAAS,EAAE,CAAC;kDACI;AAgCvC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;+CACC;AAxCP,eAAe;IALnC,SAAS,CAAC;QACT,UAAU,EAAE;YACV,SAAS;SACV;KACF,CAAC;GACmB,eAAe,CAsInC;aAtIoB,eAAe;;;;"}
+{"version":3,"file":"base-result-image.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/result/base-result-image.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\n\n\n\n\nimport { Result } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { NoElement } from '../no-element';\n\n/**\n * Component to be reused that renders an `<img>`.\n *\n * @public\n */\n@Component({\n  components: {\n    NoElement\n  }\n})\nexport default class BaseResultImage extends Vue {\n  /**\n   * Animation to use when switching between the placeholder, the loaded image, or the failed\n   * image fallback.\n   *\n   * @public\n   */\n  @Prop({ default: () => NoElement })\n  public animation!: string | typeof Vue;\n  /**\n   * The image has entered in the port view.\n   *\n   * @public\n   */\n  protected hasEnteredView = false;\n  /**\n   * An array of images that failed to load.\n   *\n   * @public\n   */\n  protected failedImages: string[] = [];\n  /**\n   * HTMLElement that references the picture element.\n   *\n   * @public\n   */\n  public $refs!: { image: HTMLElement };\n  /**\n   * Indicates if the result image is loaded.\n   *\n   * @public\n   */\n  protected hasImageLoaded = false;\n\n  /**\n   * (Required) The {@link @empathyco/x-types#Result | result} information.\n   *\n   * @public\n   */\n  @Prop({ required: true })\n  protected result!: Result;\n\n  /**\n   * Checks if intersection observer is available in window object.\n   *\n   * @returns Boolean.\n   *\n   * @internal\n   */\n  protected get isIntersectionObserverAvailable(): boolean {\n    return 'IntersectionObserver' in window;\n  }\n\n  mounted(): void {\n    this.hasEnteredView = !this.isIntersectionObserverAvailable;\n    if (this.isIntersectionObserverAvailable) {\n      this.createObserver();\n    }\n  }\n\n  /**\n   * Gets the src from the result image.\n   *\n   * @returns The result image src.\n   *\n   * @internal\n   */\n  protected get imageSrc(): string {\n    if (this.hasEnteredView && this.result.images?.length) {\n      const image = this.result.images.find(image => !this.failedImages.includes(image));\n      return image ?? '';\n    }\n    return '';\n  }\n\n  /**\n   * Creates an intersection observer in the image element.\n   *\n   * @internal\n   */\n  protected createObserver(): void {\n    const image = this.$refs.image as Element;\n    const observer = new IntersectionObserver(this.observerHandler.bind(this));\n    observer.observe(image);\n  }\n\n  /**\n   * Observe all the observables items and detects when a element is intersected.\n   *\n   * @param entries - The observed items.\n   * @param observer - The intersection observer object.\n   *\n   * @internal\n   */\n  protected observerHandler(\n    entries: IntersectionObserverEntry[],\n    observer: IntersectionObserver\n  ): void {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        this.hasEnteredView = true;\n        observer.disconnect();\n      }\n    });\n  }\n\n  /**\n   * Sets an image as failed.\n   *\n   * @internal\n   */\n  protected flagImageAsFailed(): void {\n    this.failedImages.push(this.imageSrc);\n  }\n\n  /**\n   * Checks if all the images failed.\n   *\n   * @returns Boolean.\n   *\n   * @internal\n   */\n  protected get hasAllImagesFailed(): boolean {\n    return this.failedImages.length === this.result.images?.length;\n  }\n\n  /**\n   * Marks an image as loaded.\n   *\n   * @internal\n   */\n  protected flagImageLoaded(): void {\n    this.hasImageLoaded = true;\n  }\n}\n"],"names":[],"mappings":";;;;;AA2CA;;;;;AAUA,IAAqB,eAAe,GAApC,MAAqB,eAAgB,SAAQ,GAAG;IAAhD;;;;;;;QAcY,mBAAc,GAAG,KAAK,CAAC;;;;;;QAMvB,iBAAY,GAAa,EAAE,CAAC;;;;;;QAY5B,mBAAc,GAAG,KAAK,CAAC;KAsGlC;;;;;;;;IArFC,IAAc,+BAA+B;QAC3C,OAAO,sBAAsB,IAAI,MAAM,CAAC;KACzC;IAED,OAAO;QACL,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,+BAA+B,CAAC;QAC5D,IAAI,IAAI,CAAC,+BAA+B,EAAE;YACxC,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB;KACF;;;;;;;;IASD,IAAc,QAAQ;QACpB,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE;YACrD,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;YACnF,OAAO,KAAK,IAAI,EAAE,CAAC;SACpB;QACD,OAAO,EAAE,CAAC;KACX;;;;;;IAOS,cAAc;QACtB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAgB,CAAC;QAC1C,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC3E,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;KACzB;;;;;;;;;IAUS,eAAe,CACvB,OAAoC,EACpC,QAA8B;QAE9B,OAAO,CAAC,OAAO,CAAC,KAAK;YACnB,IAAI,KAAK,CAAC,cAAc,EAAE;gBACxB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;gBAC3B,QAAQ,CAAC,UAAU,EAAE,CAAC;aACvB;SACF,CAAC,CAAC;KACJ;;;;;;IAOS,iBAAiB;QACzB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACvC;;;;;;;;IASD,IAAc,kBAAkB;QAC9B,OAAO,IAAI,CAAC,YAAY,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;KAChE;;;;;;IAOS,eAAe;QACvB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC5B;CACF,CAAA;AA9HC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,SAAS,EAAE,CAAC;kDACI;AAgCvC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;+CACC;AAxCP,eAAe;IALnC,SAAS,CAAC;QACT,UAAU,EAAE;YACV,SAAS;SACV;KACF,CAAC;GACmB,eAAe,CAsInC;aAtIoB,eAAe;;;;"}

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

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

package/js/x-modules/identifier-results/components/identifier-result.vue_rollup-plugin-vue_script.vue.js

@@ -19,7 +19,7 @@ let IdentifierResult = class IdentifierResult extends Vue {
      * @public
      */
     get highlightedQueryHTML() {
-        const identifierValue = this.result.identifier.value;
+        const identifierValue = this.result.identifier?.value ?? '';
         if (identifierValue && this.identifierHighlightRegexp) {
             return identifierValue.replace(this.identifierHighlightRegexp, '<span class="x-identifier-result__matching-part">$1</span>');
         }

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

@@ -1 +1 @@
-{"version":3,"file":"identifier-result.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/identifier-results/components/identifier-result.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\nimport { Result } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { Getter, State } from '../../../components/decorators/store.decorators';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { identifierResultsXModule } from '../x-module';\n\n/**\n * This component renders an identifier result value and highlights its matching part with the\n * query from the state. Receives as prop the {@link @empathyco/x-types#Result | result data}.\n *\n * @public\n */\n@Component({\n  mixins: [xComponentMixin(identifierResultsXModule)]\n})\nexport default class IdentifierResult extends Vue {\n  /**\n   * (Required) The {@link @empathyco/x-types#Result | result} information.\n   *\n   * @public\n   */\n  @Prop({ required: true })\n  protected result!: Result;\n\n  /**\n   * Query from the module state.\n   *\n   * @public\n   */\n  @State('identifierResults', 'query')\n  public query!: string;\n\n  /**\n   * The RegExp with the current query from the state adding the separatorChars after each\n   * matching character.\n   *\n   * @public\n   */\n  @Getter('identifierResults', 'identifierHighlightRegexp')\n  public identifierHighlightRegexp!: RegExp;\n\n  /**\n   * Highlights the matching part of the identifier result with the query from the state.\n   *\n   * @returns String - The identifier result s query with the matching part inside a `<span>` tag.\n   * @public\n   */\n  protected get highlightedQueryHTML(): string {\n    const identifierValue = this.result.identifier.value;\n    if (identifierValue && this.identifierHighlightRegexp) {\n      return identifierValue.replace(\n        this.identifierHighlightRegexp,\n        '<span class=\"x-identifier-result__matching-part\">$1</span>'\n      );\n    }\n    return identifierValue;\n  }\n}\n"],"names":[],"mappings":";;;;;;;AAiBA;;;;;;AASA,IAAqB,gBAAgB,GAArC,MAAqB,gBAAiB,SAAQ,GAAG;;;;;;;IAgC/C,IAAc,oBAAoB;QAChC,MAAM,eAAe,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC;QACrD,IAAI,eAAe,IAAI,IAAI,CAAC,yBAAyB,EAAE;YACrD,OAAO,eAAe,CAAC,OAAO,CAC5B,IAAI,CAAC,yBAAyB,EAC9B,4DAA4D,CAC7D,CAAC;SACH;QACD,OAAO,eAAe,CAAC;KACxB;CACF,CAAA;AAnCC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;gDACC;AAQ1B;IADC,KAAK,CAAC,mBAAmB,EAAE,OAAO,CAAC;+CACd;AAStB;IADC,MAAM,CAAC,mBAAmB,EAAE,2BAA2B,CAAC;mEACf;AAxBvB,gBAAgB;IAHpC,SAAS,CAAC;QACT,MAAM,EAAE,CAAC,eAAe,CAAC,wBAAwB,CAAC,CAAC;KACpD,CAAC;GACmB,gBAAgB,CA0CpC;aA1CoB,gBAAgB;;;;"}
+{"version":3,"file":"identifier-result.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/identifier-results/components/identifier-result.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\nimport { Result } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { Getter, State } from '../../../components/decorators/store.decorators';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { identifierResultsXModule } from '../x-module';\n\n/**\n * This component renders an identifier result value and highlights its matching part with the\n * query from the state. Receives as prop the {@link @empathyco/x-types#Result | result data}.\n *\n * @public\n */\n@Component({\n  mixins: [xComponentMixin(identifierResultsXModule)]\n})\nexport default class IdentifierResult extends Vue {\n  /**\n   * (Required) The {@link @empathyco/x-types#Result | result} information.\n   *\n   * @public\n   */\n  @Prop({ required: true })\n  protected result!: Result;\n\n  /**\n   * Query from the module state.\n   *\n   * @public\n   */\n  @State('identifierResults', 'query')\n  public query!: string;\n\n  /**\n   * The RegExp with the current query from the state adding the separatorChars after each\n   * matching character.\n   *\n   * @public\n   */\n  @Getter('identifierResults', 'identifierHighlightRegexp')\n  public identifierHighlightRegexp!: RegExp;\n\n  /**\n   * Highlights the matching part of the identifier result with the query from the state.\n   *\n   * @returns String - The identifier result s query with the matching part inside a `<span>` tag.\n   * @public\n   */\n  protected get highlightedQueryHTML(): string {\n    const identifierValue = this.result.identifier?.value ?? '';\n    if (identifierValue && this.identifierHighlightRegexp) {\n      return identifierValue.replace(\n        this.identifierHighlightRegexp,\n        '<span class=\"x-identifier-result__matching-part\">$1</span>'\n      );\n    }\n    return identifierValue;\n  }\n}\n"],"names":[],"mappings":";;;;;;;AAiBA;;;;;;AASA,IAAqB,gBAAgB,GAArC,MAAqB,gBAAiB,SAAQ,GAAG;;;;;;;IAgC/C,IAAc,oBAAoB;QAChC,MAAM,eAAe,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,KAAK,IAAI,EAAE,CAAC;QAC5D,IAAI,eAAe,IAAI,IAAI,CAAC,yBAAyB,EAAE;YACrD,OAAO,eAAe,CAAC,OAAO,CAC5B,IAAI,CAAC,yBAAyB,EAC9B,4DAA4D,CAC7D,CAAC;SACH;QACD,OAAO,eAAe,CAAC;KACxB;CACF,CAAA;AAnCC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;gDACC;AAQ1B;IADC,KAAK,CAAC,mBAAmB,EAAE,OAAO,CAAC;+CACd;AAStB;IADC,MAAM,CAAC,mBAAmB,EAAE,2BAA2B,CAAC;mEACf;AAxBvB,gBAAgB;IAHpC,SAAS,CAAC;QACT,MAAM,EAAE,CAAC,eAAe,CAAC,wBAAwB,CAAC,CAAC;KACpD,CAAC;GACmB,gBAAgB,CA0CpC;aA1CoB,gBAAgB;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"next-query-preview.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-query-preview.vue"],"sourcesContent":["<template>\n  <ul v-if=\"suggestionResults\" data-test=\"next-query-preview\" class=\"x-next-query-preview\">\n    <!--\n      @slot Next Query Preview default slot.\n          @binding {NextQuery} suggestion - Next Query suggestion data\n          @binding {Result[]} results - The results preview of the next query\n          @binding {number} totalResults - The total results of the search request\n    -->\n    <slot\n      :suggestion=\"suggestion\"\n      :results=\"suggestionResults.items\"\n      :totalResults=\"suggestionResults.totalResults\"\n    >\n      <li\n        v-for=\"result in suggestionResults.items\"\n        :key=\"result.id\"\n        class=\"x-next-query-preview__item\"\n        data-test=\"next-query-preview-item\"\n      >\n        <!--\n          @slot Next Query Preview result slot.\n              @binding {Result} result - A Next Query Preview result\n        -->\n        <slot name=\"result\" :result=\"result\">\n          <span data-test=\"result-name\">{{ result.name }}</span>\n        </slot>\n      </li>\n    </slot>\n  </ul>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { NextQuery, PreviewResults } from '@empathyco/x-types';\n  import { Dictionary } from '@empathyco/x-utils';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { nextQueriesXModule } from '../x-module';\n  import { State } from '../../../components/decorators/store.decorators';\n\n  /**\n   * Retrieves a preview of the results of a next query and exposes them in the default slot,\n   * along with the next query and the totalResults of the search request.\n   * By default, it renders the names of the results.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(nextQueriesXModule)]\n  })\n  export default class NextQueryPreview extends Vue {\n    /**\n     * The next query to retrieve the results preview.\n     *\n     * @public\n     */\n    @Prop({\n      required: true\n    })\n    protected suggestion!: NextQuery;\n\n    /**\n     * The results preview of the next queries mounted.\n     * It is a dictionary, indexed by the next query query.\n     */\n    @State('nextQueries', 'resultsPreview')\n    public previewResults!: Dictionary<PreviewResults>;\n\n    /**\n     * The component emits the NextQueryPreviewMounted event to retrieve the results preview\n     * of the next query.\n     */\n    mounted(): void {\n      this.$x.emit('NextQueryPreviewMounted', this.suggestion.query);\n    }\n\n    /**\n     * Gets from the state the results preview of the next query.\n     *\n     * @returns The results preview of the actual next query.\n     */\n    public get suggestionResults(): PreviewResults {\n      return this.previewResults[this.suggestion.query];\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the `NextQueryPreviewMounted` when it is mounted.\n\n## See it in action\n\nHere you have a basic example of how the NextQueryPreview is rendered. Keep in mind that this\ncomponent is intended to be used overriding its default slot. By default it will only render the\nnames of the results.\n\n```vue live\n<template>\n  <NextQueryPreview :suggestion=\"suggestion\" />\n</template>\n\n<script>\n  import { NextQueryPreview } from '@empathyco/x-components/next-queries';\n\n  export default {\n    name: 'NextQueryPreviewDemo',\n    components: {\n      NextQueryPreview\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'NextQuery',\n          query: 'tshirt',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with the default slot\n\nIn this example, the results will be rendered inside a sliding panel.\n\n```vue live\n<template>\n  <NextQueryPreview :suggestion=\"suggestion\" #default=\"{ totalResults, results }\">\n    <p>Total results: {{ totalResults }}</p>\n    <SlidingPanel :resetOnContentChange=\"false\">\n      <article\n        v-for=\"result in results\"\n        :key=\"result.id\"\n        class=\"x-result\"\n        style=\"max-width: 300px; overflow: hidden\"\n      >\n        <BaseResultLink :result=\"result\">\n          <BaseResultImage :result=\"result\" class=\"x-result__picture\" />\n        </BaseResultLink>\n        <div class=\"x-result__description\">\n          <BaseResultLink :result=\"result\">\n            <h1 class=\"x-title3\">{{ result.name }}</h1>\n          </BaseResultLink>\n        </div>\n      </article>\n    </SlidingPanel>\n  </NextQueryPreview>\n</template>\n\n<script>\n  import { NextQueryPreview } from '@empathyco/x-components/next-queries';\n  import { SlidingPanel, BaseResultLink, BaseResultImage } from '@empathyco/x-components';\n\n  export default {\n    name: 'NextQueryPreviewDemoOverridingSlot',\n    components: {\n      NextQueryPreview,\n      SlidingPanel,\n      BaseResultLink,\n      BaseResultImage\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'NextQuery',\n          query: 'tshirt',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with the result slot\n\nThe component exposes a slot to override the result content, without modifying the list.\n\nIn this example, the ID of the results will be rendered along with the name.\n\n```vue\n<template>\n  <NextQueryPreview :suggestion=\"suggestion\" #result=\"{ result }\">\n    <span>{{ result.id }}</span>\n    <span>{{ result.name }}</span>\n  </NextQueryPreview>\n</template>\n\n<script>\n  import { NextQueryPreview } from '@empathyco/x-components/next-queries';\n\n  export default {\n    name: 'NextQueryPreviewDemoOverridingResultSlot',\n    components: {\n      NextQueryPreview\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'NextQuery',\n          query: 'tshirt',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"next-query-preview.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-query-preview.vue"],"sourcesContent":["<template>\n  <ul v-if=\"suggestionResults\" data-test=\"next-query-preview\" class=\"x-next-query-preview\">\n    <!--\n      @slot Next Query Preview default slot.\n          @binding {NextQuery} suggestion - Next Query suggestion data\n          @binding {Result[]} results - The results preview of the next query\n          @binding {number} totalResults - The total results of the search request\n    -->\n    <slot\n      :suggestion=\"suggestion\"\n      :results=\"suggestionResults.items\"\n      :totalResults=\"suggestionResults.totalResults\"\n    >\n      <li\n        v-for=\"result in suggestionResults.items\"\n        :key=\"result.id\"\n        class=\"x-next-query-preview__item\"\n        data-test=\"next-query-preview-item\"\n      >\n        <!--\n          @slot Next Query Preview result slot.\n              @binding {Result} result - A Next Query Preview result\n        -->\n        <slot name=\"result\" :result=\"result\">\n          <span data-test=\"result-name\">{{ result.name }}</span>\n        </slot>\n      </li>\n    </slot>\n  </ul>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { NextQuery, PreviewResults } from '@empathyco/x-types';\n  import { Dictionary } from '@empathyco/x-utils';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { nextQueriesXModule } from '../x-module';\n  import { State } from '../../../components/decorators/store.decorators';\n\n  /**\n   * Retrieves a preview of the results of a next query and exposes them in the default slot,\n   * along with the next query and the totalResults of the search request.\n   * By default, it renders the names of the results.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(nextQueriesXModule)]\n  })\n  export default class NextQueryPreview extends Vue {\n    /**\n     * The next query to retrieve the results preview.\n     *\n     * @public\n     */\n    @Prop({\n      required: true\n    })\n    protected suggestion!: NextQuery;\n\n    /**\n     * Number of suggestion results to be rendered.\n     *\n     * @public\n     */\n    @Prop()\n    protected maxItemsToRender?: number;\n\n    /**\n     * The results preview of the next queries mounted.\n     * It is a dictionary, indexed by the next query query.\n     */\n    @State('nextQueries', 'resultsPreview')\n    public previewResults!: Dictionary<PreviewResults>;\n\n    /**\n     * The component emits the NextQueryPreviewMounted event to retrieve the results preview\n     * of the next query.\n     */\n    mounted(): void {\n      this.$x.emit('NextQueryPreviewMounted', this.suggestion.query);\n    }\n\n    /**\n     * Gets from the state the results preview of the next query.\n     *\n     * @returns The results preview of the actual next query.\n     */\n    public get suggestionResults(): PreviewResults | undefined {\n      const previewResults = this.previewResults[this.suggestion.query];\n\n      return previewResults\n        ? {\n            ...previewResults,\n            items: previewResults.items.slice(0, this.maxItemsToRender)\n          }\n        : undefined;\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the `NextQueryPreviewMounted` when it is mounted.\n\n## See it in action\n\nHere you have a basic example of how the NextQueryPreview is rendered. Keep in mind that this\ncomponent is intended to be used overriding its default slot. By default it will only render the\nnames of the results.\n\n```vue live\n<template>\n  <NextQueryPreview :suggestion=\"suggestion\" />\n</template>\n\n<script>\n  import { NextQueryPreview } from '@empathyco/x-components/next-queries';\n\n  export default {\n    name: 'NextQueryPreviewDemo',\n    components: {\n      NextQueryPreview\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'NextQuery',\n          query: 'tshirt',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with the default slot\n\nIn this example, the results will be rendered inside a sliding panel.\n\n```vue live\n<template>\n  <NextQueryPreview :suggestion=\"suggestion\" #default=\"{ totalResults, results }\">\n    <p>Total results: {{ totalResults }}</p>\n    <SlidingPanel :resetOnContentChange=\"false\">\n      <article\n        v-for=\"result in results\"\n        :key=\"result.id\"\n        class=\"x-result\"\n        style=\"max-width: 300px; overflow: hidden\"\n      >\n        <BaseResultLink :result=\"result\">\n          <BaseResultImage :result=\"result\" class=\"x-result__picture\" />\n        </BaseResultLink>\n        <div class=\"x-result__description\">\n          <BaseResultLink :result=\"result\">\n            <h1 class=\"x-title3\">{{ result.name }}</h1>\n          </BaseResultLink>\n        </div>\n      </article>\n    </SlidingPanel>\n  </NextQueryPreview>\n</template>\n\n<script>\n  import { NextQueryPreview } from '@empathyco/x-components/next-queries';\n  import { SlidingPanel, BaseResultLink, BaseResultImage } from '@empathyco/x-components';\n\n  export default {\n    name: 'NextQueryPreviewDemoOverridingSlot',\n    components: {\n      NextQueryPreview,\n      SlidingPanel,\n      BaseResultLink,\n      BaseResultImage\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'NextQuery',\n          query: 'tshirt',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with the result slot\n\nThe component exposes a slot to override the result content, without modifying the list.\n\nIn this example, the ID of the results will be rendered along with the name.\n\n```vue\n<template>\n  <NextQueryPreview :suggestion=\"suggestion\" #result=\"{ result }\">\n    <span>{{ result.id }}</span>\n    <span>{{ result.name }}</span>\n  </NextQueryPreview>\n</template>\n\n<script>\n  import { NextQueryPreview } from '@empathyco/x-components/next-queries';\n\n  export default {\n    name: 'NextQueryPreviewDemoOverridingResultSlot',\n    components: {\n      NextQueryPreview\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'NextQuery',\n          query: 'tshirt',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the suggestions has been limited to render a maximum of 4 items.\n\n```vue\n<template>\n  <NextQueryPreview\n    :maxItemsToRender=\"maxItemsToRender\"\n    :suggestion=\"suggestion\"\n    #default=\"{ results }\"\n  >\n    <BaseGrid #default=\"{ item }\" :items=\"results\">\n      <BaseResultLink :result=\"item\">\n        <BaseResultImage :result=\"item\" />\n      </BaseResultLink>\n    </BaseGrid>\n  </NextQueryPreview>\n</template>\n\n<script>\n  import { BaseGrid, BaseResultImage, BaseResultLink } from '@empathyco/x-components';\n  import { NextQueryPreview } from '@empathyco/x-components/next-queries';\n\n  export default {\n    name: 'NextQueryPreviewDemo',\n    components: {\n      BaseGrid,\n      BaseResultImage,\n      BaseResultLink,\n      NextQueryPreview\n    },\n    data() {\n      return {\n        maxItemsToRender: 4,\n        suggestion: {\n          modelName: 'NextQuery',\n          query: 'tshirt',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -26,7 +26,13 @@ let NextQueryPreview = class NextQueryPreview extends Vue {
      * @returns The results preview of the actual next query.
      */
     get suggestionResults() {
-        return this.previewResults[this.suggestion.query];
+        const previewResults = this.previewResults[this.suggestion.query];
+        return previewResults
+            ? {
+                ...previewResults,
+                items: previewResults.items.slice(0, this.maxItemsToRender)
+            }
+            : undefined;
     }
 };
 __decorate([
@@ -34,6 +40,9 @@ __decorate([
         required: true
     })
 ], NextQueryPreview.prototype, "suggestion", void 0);
+__decorate([
+    Prop()
+], NextQueryPreview.prototype, "maxItemsToRender", void 0);
 __decorate([
     State('nextQueries', 'resultsPreview')
 ], NextQueryPreview.prototype, "previewResults", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"next-query-preview.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-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\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { NextQuery, PreviewResults } from '@empathyco/x-types';\nimport { Dictionary } from '@empathyco/x-utils';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { nextQueriesXModule } from '../x-module';\nimport { State } from '../../../components/decorators/store.decorators';\n\n/**\n * Retrieves a preview of the results of a next query and exposes them in the default slot,\n * along with the next query and the totalResults of the search request.\n * By default, it renders the names of the results.\n *\n * @public\n */\n@Component({\n  mixins: [xComponentMixin(nextQueriesXModule)]\n})\nexport default class NextQueryPreview extends Vue {\n  /**\n   * The next query to retrieve the results preview.\n   *\n   * @public\n   */\n  @Prop({\n    required: true\n  })\n  protected suggestion!: NextQuery;\n\n  /**\n   * The results preview of the next queries mounted.\n   * It is a dictionary, indexed by the next query query.\n   */\n  @State('nextQueries', 'resultsPreview')\n  public previewResults!: Dictionary<PreviewResults>;\n\n  /**\n   * The component emits the NextQueryPreviewMounted event to retrieve the results preview\n   * of the next query.\n   */\n  mounted(): void {\n    this.$x.emit('NextQueryPreviewMounted', this.suggestion.query);\n  }\n\n  /**\n   * Gets from the state the results preview of the next query.\n   *\n   * @returns The results preview of the actual next query.\n   */\n  public get suggestionResults(): PreviewResults {\n    return this.previewResults[this.suggestion.query];\n  }\n}\n"],"names":[],"mappings":";;;;;;;AAwCA;;;;;;;AAUA,IAAqB,gBAAgB,GAArC,MAAqB,gBAAiB,SAAQ,GAAG;;;;;IAsB/C,OAAO;QACL,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,yBAAyB,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;KAChE;;;;;;IAOD,IAAW,iBAAiB;QAC1B,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;KACnD;CACF,CAAA;AAzBC;IAHC,IAAI,CAAC;QACJ,QAAQ,EAAE,IAAI;KACf,CAAC;oDAC+B;AAOjC;IADC,KAAK,CAAC,aAAa,EAAE,gBAAgB,CAAC;wDACY;AAhBhC,gBAAgB;IAHpC,SAAS,CAAC;QACT,MAAM,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;KAC9C,CAAC;GACmB,gBAAgB,CAkCpC;aAlCoB,gBAAgB;;;;"}
+{"version":3,"file":"next-query-preview.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-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\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { NextQuery, PreviewResults } from '@empathyco/x-types';\nimport { Dictionary } from '@empathyco/x-utils';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { nextQueriesXModule } from '../x-module';\nimport { State } from '../../../components/decorators/store.decorators';\n\n/**\n * Retrieves a preview of the results of a next query and exposes them in the default slot,\n * along with the next query and the totalResults of the search request.\n * By default, it renders the names of the results.\n *\n * @public\n */\n@Component({\n  mixins: [xComponentMixin(nextQueriesXModule)]\n})\nexport default class NextQueryPreview extends Vue {\n  /**\n   * The next query to retrieve the results preview.\n   *\n   * @public\n   */\n  @Prop({\n    required: true\n  })\n  protected suggestion!: NextQuery;\n\n  /**\n   * Number of suggestion results to be rendered.\n   *\n   * @public\n   */\n  @Prop()\n  protected maxItemsToRender?: number;\n\n  /**\n   * The results preview of the next queries mounted.\n   * It is a dictionary, indexed by the next query query.\n   */\n  @State('nextQueries', 'resultsPreview')\n  public previewResults!: Dictionary<PreviewResults>;\n\n  /**\n   * The component emits the NextQueryPreviewMounted event to retrieve the results preview\n   * of the next query.\n   */\n  mounted(): void {\n    this.$x.emit('NextQueryPreviewMounted', this.suggestion.query);\n  }\n\n  /**\n   * Gets from the state the results preview of the next query.\n   *\n   * @returns The results preview of the actual next query.\n   */\n  public get suggestionResults(): PreviewResults | undefined {\n    const previewResults = this.previewResults[this.suggestion.query];\n\n    return previewResults\n      ? {\n          ...previewResults,\n          items: previewResults.items.slice(0, this.maxItemsToRender)\n        }\n      : undefined;\n  }\n}\n"],"names":[],"mappings":";;;;;;;AAwCA;;;;;;;AAUA,IAAqB,gBAAgB,GAArC,MAAqB,gBAAiB,SAAQ,GAAG;;;;;IA8B/C,OAAO;QACL,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,yBAAyB,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;KAChE;;;;;;IAOD,IAAW,iBAAiB;QAC1B,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QAElE,OAAO,cAAc;cACjB;gBACE,GAAG,cAAc;gBACjB,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,gBAAgB,CAAC;aAC5D;cACD,SAAS,CAAC;KACf;CACF,CAAA;AAxCC;IAHC,IAAI,CAAC;QACJ,QAAQ,EAAE,IAAI;KACf,CAAC;oDAC+B;AAQjC;IADC,IAAI,EAAE;0DAC6B;AAOpC;IADC,KAAK,CAAC,aAAa,EAAE,gBAAgB,CAAC;wDACY;AAxBhC,gBAAgB;IAHpC,SAAS,CAAC;QACT,MAAM,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;KAC9C,CAAC;GACmB,gBAAgB,CAiDpC;aAjDoB,gBAAgB;;;;"}

package/js/x-modules/search-box/components/search-input.vue.js

@@ -71,11 +71,11 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = function (inject) {
     if (!inject) return
-    inject("data-v-38b09624_0", { source: ".x-search-input[data-v-38b09624]::-webkit-search-decoration,\n.x-search-input[data-v-38b09624]::-webkit-search-cancel-button,\n.x-search-input[data-v-38b09624]::-webkit-search-results-button,\n.x-search-input[data-v-38b09624]::-webkit-search-results-decoration {\n  -webkit-appearance: none;\n}", map: undefined, media: undefined });
+    inject("data-v-5d3fc332_0", { source: ".x-search-input[data-v-5d3fc332]::-webkit-search-decoration,\n.x-search-input[data-v-5d3fc332]::-webkit-search-cancel-button,\n.x-search-input[data-v-5d3fc332]::-webkit-search-results-button,\n.x-search-input[data-v-5d3fc332]::-webkit-search-results-decoration {\n  -webkit-appearance: none;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__ = "data-v-38b09624";
+  const __vue_scope_id__ = "data-v-5d3fc332";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */

package/js/x-modules/search-box/components/search-input.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"search-input.vue.js","sources":["../../../../../src/x-modules/search-box/components/search-input.vue"],"sourcesContent":["<template>\n  <input\n    ref=\"input\"\n    @blur=\"emitUserBlurredSearchBox\"\n    @click=\"emitUserClickedSearchBox\"\n    @focus=\"emitUserFocusedSearchBox\"\n    @input=\"emitUserIsTypingAQueryEvents\"\n    @keydown.enter=\"emitUserPressedEnterKey\"\n    @keydown.up.down.prevent=\"emitUserPressedArrowKey\"\n    v-on=\"$listeners\"\n    :maxlength=\"maxLength\"\n    :value=\"query\"\n    autocomplete=\"off\"\n    class=\"x-input x-search-input\"\n    enterkeyhint=\"search\"\n    inputmode=\"search\"\n    type=\"search\"\n    data-test=\"search-input\"\n    :aria-label=\"searchInputMessage\"\n  />\n</template>\n\n<script lang=\"ts\">\n  import { Suggestion } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { XOn } from '../../../components/decorators/bus.decorators';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { ArrowKey, PropsWithType } from '../../../utils';\n  import { debounce } from '../../../utils/debounce';\n  import { DebouncedFunction } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { searchBoxXModule } from '../x-module';\n\n  /**\n   * This component renders an input field that allows the user to type a query. It also reacts to\n   * query changes through event listening.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(searchBoxXModule)]\n  })\n  export default class SearchInput extends Vue {\n    public $refs!: { input: HTMLInputElement };\n\n    protected searchInputMessage = 'type your query here';\n\n    /**\n     * Maximum characters allowed in the input search.\n     */\n    @Prop({ default: 64 })\n    protected maxLength!: number;\n\n    /**\n     * Allows input autofocus when the search field is rendered.\n     */\n    @Prop({ default: true })\n    protected autofocus!: boolean;\n\n    /**\n     * Enables the auto-accept query after debounce.\n     */\n    @Prop({ default: true })\n    protected instant!: boolean;\n\n    /**\n     * Debounce time for the instant.\n     */\n    @Prop({ default: 500 })\n    protected instantDebounceInMs!: number;\n\n    /**\n     * Keyboard keys to accept the autocomplete suggestion.\n     */\n    @Prop({ default: () => ['ArrowRight'] })\n    protected autocompleteKeyboardKeys!: string[]; // https://keycode.info/\n\n    /**\n     * Event that retrieves the autocomplete suggestion.\n     */\n    @Prop({ default: 'QuerySuggestionsChanged' })\n    protected autocompleteSuggestionsEvent!: PropsWithType<XEventsTypes, Suggestion[]>;\n\n    @State('searchBox', 'query')\n    public query!: string;\n\n    /**\n     * When event {@link XEventsTypes.UserReachedEmpathizeTop} or\n     * {@link SearchBoxXEvents.UserPressedClearSearchBoxButton}\n     * are emitted the search in put is focused.\n     *\n     * @internal\n     */\n    @XOn(['UserReachedEmpathizeTop', 'UserPressedClearSearchBoxButton'])\n    focusInput(): void {\n      this.$refs.input?.focus();\n    }\n\n    protected debouncedUserAcceptedAQuery!: DebouncedFunction<[string]>;\n\n    /**\n     * When event {@link XEventsTypes.UserAcceptedAQuery} or\n     * {@link SearchBoxXEvents.UserClearedQuery} are emitted the pending debounced emit\n     * {@link XEvent} `UserAcceptedAQuery` is canceled.\n     *\n     * @internal\n     */\n    @XOn(['UserAcceptedAQuery', 'UserClearedQuery'])\n    cancelDebouncedUserAcceptedAQuery(): void {\n      this.debouncedUserAcceptedAQuery?.cancel();\n    }\n\n    mounted(): void {\n      if (this.autofocus) {\n        this.focusInput();\n      }\n    }\n\n    /**\n     * Emits {@link XEventsTypes.UserAcceptedAQuery} event with a debounce configured in\n     * `instantDebounceInMs` prop.\n     *\n     * @internal\n     * @param query - The query that will be emitted.\n     */\n    emitDebouncedUserAcceptedAQuery(query: string): void {\n      if (this.instant) {\n        if (!this.debouncedUserAcceptedAQuery) {\n          this.debouncedUserAcceptedAQuery = debounce(\n            this.emitUserAcceptedAQuery.bind(this),\n            this.instantDebounceInMs\n          );\n        }\n        this.debouncedUserAcceptedAQuery(query);\n      }\n    }\n\n    /**\n     * Generates the {@link WireMetadata | event metadata} object omitting the moduleName.\n     *\n     * @returns The {@link WireMetadata} object omitting the moduleName.\n     * @internal\n     */\n    protected createEventMetadata(): Omit<WireMetadata, 'moduleName'> {\n      return {\n        target: this.$refs.input,\n        feature: 'search_box'\n      };\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserBlurredSearchBox} when search box loses focus.\n     *\n     * @internal\n     */\n    protected emitUserBlurredSearchBox(): void {\n      this.$x.emit('UserBlurredSearchBox', undefined, { target: this.$refs.input });\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserClickedSearchBox} when user clicks  the search input.\n     *\n     * @internal\n     */\n    protected emitUserClickedSearchBox(): void {\n      this.$x.emit('UserClickedSearchBox', undefined, { target: this.$refs.input });\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserFocusedSearchBox} when search box gains focus.\n     *\n     * @internal\n     */\n    protected emitUserFocusedSearchBox(): void {\n      this.$x.emit('UserFocusedSearchBox', undefined, { target: this.$refs.input });\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserIsTypingAQuery} when the user typed/pasted something\n     * into the search-box. Also emits event {@link SearchBoxXEvents.UserClearedQuery} when the user\n     * removes all characters in the search-box.\n     *\n     * @internal\n     */\n    protected emitUserIsTypingAQueryEvents(): void {\n      const query = this.$refs.input.value;\n      this.$x.emit('UserIsTypingAQuery', query, { target: this.$refs.input });\n      if (query.trim()) {\n        this.emitDebouncedUserAcceptedAQuery(query);\n      } else {\n        this.cancelDebouncedUserAcceptedAQuery();\n      }\n    }\n\n    /**\n     * Emits event {@link XEventsTypes.UserPressedArrowKey} when the user pressed an arrow key.\n     *\n     * @param event - The keyboard event with the arrow key pressed.\n     * @internal\n     */\n    protected emitUserPressedArrowKey(event: KeyboardEvent): void {\n      this.$x.emit('UserPressedArrowKey', event.key as ArrowKey, this.createEventMetadata());\n    }\n\n    /**\n     * Emits multiple events when the user pressed the enter key.\n     *\n     * @remarks\n     * Emitted events are:\n     * {@link SearchBoxXEvents.UserPressedEnterKey}\n     * {@link XEventsTypes.UserAcceptedAQuery}\n     *\n     * @internal\n     */\n    protected emitUserPressedEnterKey(): void {\n      const query = this.$refs.input.value.trim();\n      if (query.length > 0) {\n        this.$x.emit('UserPressedEnterKey', query, this.createEventMetadata());\n        this.emitUserAcceptedAQuery(query);\n      }\n      this.$refs.input?.blur();\n    }\n\n    /**\n     * Emits {@link XEventsTypes.UserAcceptedAQuery} event.\n     *\n     * @remarks It is necessary in a separated method to use it as the parameter of debounce in\n     * emitDebouncedUserAcceptedAQuery method.\n     * @internal\n     * @param query - The query that will be emitted.\n     */\n    protected emitUserAcceptedAQuery(query: string): void {\n      this.$x.emit('UserAcceptedAQuery', query, this.createEventMetadata());\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-search-input::-webkit-search-decoration,\n  .x-search-input::-webkit-search-cancel-button,\n  .x-search-input::-webkit-search-results-button,\n  .x-search-input::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedSearchBox`](./../../api/x-components.searchboxxevents.md)\n- [`UserBlurredSearchBox`](./../../api/x-components.searchboxxevents.md)\n- [`UserFocusedSearchBox`](./../../api/x-components.searchboxxevents.md)\n- [`UserIsTypingAQuery`](./../../api/x-components.searchboxxevents.md)\n- [`UserPressedEnterKey`](./../../api/x-components.searchboxxevents.md)\n- [`UserPressedArrowKey`](./../../api/x-components.xeventstypes.md)\n- [`UserAcceptedAQuery`](./../../api/x-components.xeventstypes.md)\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Search service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example of how the search input is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n  <SearchInput />\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchInputDemo',\n    components: {\n      SearchInput\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the search input has been limited to accept a maximum of 5 characters, including\nspaces, it won't take the focus when it is rendered, and it will emit the `UserAcceptedAQuery` event\nafter 1000 milliseconds without typing.\n\n_Type a term with more than 5 characters to try it out!_\n\n```vue live\n<template>\n  <SearchInput :maxLength=\"5\" :autofocus=\"false\" :instant=\"true\" :instantDebounceInMs=\"1000\" />\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchInputDemo',\n    components: {\n      SearchInput\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, a message has been added below the search input to illustrate the action performed.\nFor example, if you select the search input box, the message “focus” appears. When you start to\nenter a search term, the message “typing” appears. If you press Enter after typing a search term,\nthe message “enter” appears.\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput\n      @UserPressedEnterKey=\"value = 'enter'\"\n      @UserFocusedSearchBox=\"hasFocus = true\"\n      @UserBlurredSearchBox=\"hasFocus = false\"\n      @UserIsTypingAQuery=\"value = 'typing'\"\n    />\n    <strong>{{ value }}</strong>\n    <span>{{ hasFocus ? 'focused' : 'unfocused' }}</span>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchInputDemo',\n    components: {\n      SearchInput\n    },\n    data() {\n      return {\n        value: '',\n        hasFocus: false\n      };\n    }\n  };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `SearchInput` component\ncommunicates with the [`SearchButton`](x-components.search-button.md) and the\n[`ClearSearchInput`](x-components.clear-search-input.md) to offer a full query entry experience.\nFurthermore, you can use it together with the [`QuerySuggestions`](query-suggestions.md) component\nto autocomplete the typed search term.\n\n_Type “trousers” or another fashion term in the input field and then click the clear icon to try it\nout!_\n\n```vue live\n<template>\n  <div>\n    <div style=\"display: flex; flex-flow: row nowrap;\">\n      <SearchInput />\n      <ClearSearchInput>\n        <img src=\"/assets/icons/cross.svg\" />\n      </ClearSearchInput>\n      <SearchButton>Search</SearchButton>\n    </div>\n    <QuerySuggestions />\n  </div>\n</template>\n\n<script>\n  import { SearchInput, ClearSearchInput, SearchButton } from '@empathyco/x-components/search-box';\n  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n\n  export default {\n    name: 'SearchInputDemo',\n    components: {\n      SearchInput,\n      ClearSearchInput,\n      SearchButton,\n      QuerySuggestions\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"search-input.vue.js","sources":["../../../../../src/x-modules/search-box/components/search-input.vue"],"sourcesContent":["<template>\n  <input\n    ref=\"input\"\n    @blur=\"emitUserBlurredSearchBox\"\n    @click=\"emitUserClickedSearchBox\"\n    @focus=\"emitUserFocusedSearchBox\"\n    @input=\"emitUserIsTypingAQueryEvents\"\n    @keydown.enter=\"emitUserPressedEnterKey\"\n    @keydown.up.down.prevent=\"emitUserPressedArrowKey\"\n    v-on=\"$listeners\"\n    :maxlength=\"maxLength\"\n    :value=\"query\"\n    autocomplete=\"off\"\n    class=\"x-input x-search-input\"\n    enterkeyhint=\"search\"\n    inputmode=\"search\"\n    type=\"search\"\n    data-test=\"search-input\"\n    :aria-label=\"searchInputMessage\"\n  />\n</template>\n\n<script lang=\"ts\">\n  import { Suggestion } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { XOn } from '../../../components/decorators/bus.decorators';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { ArrowKey, PropsWithType } from '../../../utils';\n  import { debounce } from '../../../utils/debounce';\n  import { DebouncedFunction } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { searchBoxXModule } from '../x-module';\n\n  /**\n   * This component renders an input field that allows the user to type a query. It also reacts to\n   * query changes through event listening.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(searchBoxXModule)]\n  })\n  export default class SearchInput extends Vue {\n    public $refs!: { input: HTMLInputElement };\n\n    protected searchInputMessage = 'type your query here';\n\n    /**\n     * Maximum characters allowed in the input search.\n     */\n    @Prop({ default: 64 })\n    protected maxLength!: number;\n\n    /**\n     * Allows input autofocus when the search field is rendered.\n     */\n    @Prop({ default: true })\n    protected autofocus!: boolean;\n\n    /**\n     * Enables the auto-accept query after debounce.\n     */\n    @Prop({ default: true })\n    protected instant!: boolean;\n\n    /**\n     * Debounce time for the instant.\n     */\n    @Prop({ default: 500 })\n    protected instantDebounceInMs!: number;\n\n    /**\n     * Keyboard keys to accept the autocomplete suggestion.\n     */\n    @Prop({ default: () => ['ArrowRight'] })\n    protected autocompleteKeyboardKeys!: string[]; // https://keycode.info/\n\n    /**\n     * Event that retrieves the autocomplete suggestion.\n     */\n    @Prop({ default: 'QuerySuggestionsChanged' })\n    protected autocompleteSuggestionsEvent!: PropsWithType<XEventsTypes, Suggestion[]>;\n\n    @State('searchBox', 'query')\n    public query!: string;\n\n    /**\n     * When event {@link XEventsTypes.UserReachedEmpathizeTop} or\n     * {@link SearchBoxXEvents.UserPressedClearSearchBoxButton}\n     * are emitted the search in put is focused.\n     *\n     * @internal\n     */\n    @XOn(['UserReachedEmpathizeTop', 'UserPressedClearSearchBoxButton'])\n    focusInput(): void {\n      this.$refs.input?.focus();\n    }\n\n    protected debouncedUserAcceptedAQuery!: DebouncedFunction<[string]>;\n\n    /**\n     * When event {@link XEventsTypes.UserAcceptedAQuery} or\n     * {@link SearchBoxXEvents.UserClearedQuery} are emitted the pending debounced emit\n     * {@link XEvent} `UserAcceptedAQuery` is canceled.\n     *\n     * @internal\n     */\n    @XOn(['UserAcceptedAQuery', 'UserClearedQuery'])\n    cancelDebouncedUserAcceptedAQuery(): void {\n      this.debouncedUserAcceptedAQuery?.cancel();\n    }\n\n    mounted(): void {\n      if (this.autofocus) {\n        this.focusInput();\n      }\n    }\n\n    /**\n     * Emits {@link XEventsTypes.UserAcceptedAQuery} event with a debounce configured in\n     * `instantDebounceInMs` prop.\n     *\n     * @internal\n     * @param query - The query that will be emitted.\n     */\n    emitDebouncedUserAcceptedAQuery(query: string): void {\n      if (this.instant) {\n        if (!this.debouncedUserAcceptedAQuery) {\n          this.debouncedUserAcceptedAQuery = debounce(\n            this.emitUserAcceptedAQuery.bind(this),\n            this.instantDebounceInMs\n          );\n        }\n        this.debouncedUserAcceptedAQuery(query);\n      }\n    }\n\n    /**\n     * Generates the {@link WireMetadata | event metadata} object omitting the moduleName.\n     *\n     * @returns The {@link WireMetadata} object omitting the moduleName.\n     * @internal\n     */\n    protected createEventMetadata(): Omit<WireMetadata, 'moduleName'> {\n      return {\n        target: this.$refs.input,\n        feature: 'search_box'\n      };\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserBlurredSearchBox} when search box loses focus.\n     *\n     * @internal\n     */\n    protected emitUserBlurredSearchBox(): void {\n      this.$x.emit('UserBlurredSearchBox', undefined, { target: this.$refs.input });\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserClickedSearchBox} when user clicks  the search input.\n     *\n     * @internal\n     */\n    protected emitUserClickedSearchBox(): void {\n      this.$x.emit('UserClickedSearchBox', undefined, { target: this.$refs.input });\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserFocusedSearchBox} when search box gains focus.\n     *\n     * @internal\n     */\n    protected emitUserFocusedSearchBox(): void {\n      this.$x.emit('UserFocusedSearchBox', undefined, { target: this.$refs.input });\n    }\n\n    /**\n     * Emits event {@link SearchBoxXEvents.UserIsTypingAQuery} when the user typed/pasted something\n     * into the search-box. Also emits event {@link SearchBoxXEvents.UserClearedQuery} when the user\n     * removes all characters in the search-box.\n     *\n     * @internal\n     */\n    protected emitUserIsTypingAQueryEvents(): void {\n      const query = this.$refs.input.value;\n      this.$x.emit('UserIsTypingAQuery', query, { target: this.$refs.input });\n      if (query.trim()) {\n        this.emitDebouncedUserAcceptedAQuery(query);\n      } else {\n        this.cancelDebouncedUserAcceptedAQuery();\n      }\n    }\n\n    /**\n     * Emits event {@link XEventsTypes.UserPressedArrowKey} when the user pressed an arrow key.\n     *\n     * @param event - The keyboard event with the arrow key pressed.\n     * @internal\n     */\n    protected emitUserPressedArrowKey(event: KeyboardEvent): void {\n      this.$x.emit('UserPressedArrowKey', event.key as ArrowKey, this.createEventMetadata());\n    }\n\n    /**\n     * Emits multiple events when the user pressed the enter key.\n     *\n     * @remarks\n     * Emitted events are:\n     * {@link SearchBoxXEvents.UserPressedEnterKey}\n     * {@link XEventsTypes.UserAcceptedAQuery}\n     *\n     * @internal\n     */\n    protected emitUserPressedEnterKey(): void {\n      const query = this.$refs.input.value.trim();\n      if (query.length > 0) {\n        this.$x.emit('UserPressedEnterKey', query, this.createEventMetadata());\n        this.emitUserAcceptedAQuery(query);\n      }\n      this.$refs.input?.blur();\n    }\n\n    /**\n     * Emits {@link XEventsTypes.UserAcceptedAQuery} event.\n     *\n     * @remarks It is necessary in a separated method to use it as the parameter of debounce in\n     * emitDebouncedUserAcceptedAQuery method.\n     * @internal\n     * @param query - The query that will be emitted.\n     */\n    protected emitUserAcceptedAQuery(query: string): void {\n      this.$x.emit('UserAcceptedAQuery', query, this.createEventMetadata());\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-search-input::-webkit-search-decoration,\n  .x-search-input::-webkit-search-cancel-button,\n  .x-search-input::-webkit-search-results-button,\n  .x-search-input::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedSearchBox`](./../../api/x-components.searchboxxevents.md)\n- [`UserBlurredSearchBox`](./../../api/x-components.searchboxxevents.md)\n- [`UserFocusedSearchBox`](./../../api/x-components.searchboxxevents.md)\n- [`UserIsTypingAQuery`](./../../api/x-components.searchboxxevents.md)\n- [`UserPressedEnterKey`](./../../api/x-components.searchboxxevents.md)\n- [`UserPressedArrowKey`](./../../api/x-components.xeventstypes.md)\n- [`UserAcceptedAQuery`](./../../api/x-components.xeventstypes.md)\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Search service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example of how the search input is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n  <SearchInput />\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchInputDemo',\n    components: {\n      SearchInput\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the search input has been limited to accept a maximum of 5 characters, including\nspaces, it won't take the focus when it is rendered, and it will emit the `UserAcceptedAQuery` event\nafter 1000 milliseconds without typing.\n\n_Type a term with more than 5 characters to try it out!_\n\n```vue live\n<template>\n  <SearchInput :maxLength=\"5\" :autofocus=\"false\" :instant=\"true\" :instantDebounceInMs=\"1000\" />\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchInputDemo',\n    components: {\n      SearchInput\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, a message has been added below the search input to illustrate the action performed.\nFor example, if you select the search input box, the message “focus” appears. When you start to\nenter a search term, the message “typing” appears. If you press Enter after typing a search term,\nthe message “enter” appears.\n\n<!-- prettier-ignore-start -->\n:::warning X Events are only emitted from the root X Component.\nAt the moment, X Events are only emitted from the root X Component. This means that if you wrap\nthe `SearchInput` with another component of another module like the `MainScroll`, you should add\nthe listeners to the `MainScroll` instead of the `SearchInput`. If you need to subscribe to these\nevents, it is recommended to use the [`GlobalXBus`](../common/x-components.global-x-bus.md)\ncomponent instead.\n:::\n<!-- prettier-ignore-end -->\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput\n      @UserPressedEnterKey=\"value = 'enter'\"\n      @UserFocusedSearchBox=\"hasFocus = true\"\n      @UserBlurredSearchBox=\"hasFocus = false\"\n      @UserIsTypingAQuery=\"value = 'typing'\"\n    />\n    <strong>{{ value }}</strong>\n    <span>{{ hasFocus ? 'focused' : 'unfocused' }}</span>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchInputDemo',\n    components: {\n      SearchInput\n    },\n    data() {\n      return {\n        value: '',\n        hasFocus: false\n      };\n    }\n  };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `SearchInput` component\ncommunicates with the [`SearchButton`](x-components.search-button.md) and the\n[`ClearSearchInput`](x-components.clear-search-input.md) to offer a full query entry experience.\nFurthermore, you can use it together with the [`QuerySuggestions`](query-suggestions.md) component\nto autocomplete the typed search term.\n\n_Type “trousers” or another fashion term in the input field and then click the clear icon to try it\nout!_\n\n```vue live\n<template>\n  <div>\n    <div style=\"display: flex; flex-flow: row nowrap;\">\n      <SearchInput />\n      <ClearSearchInput>\n        <img src=\"/assets/icons/cross.svg\" />\n      </ClearSearchInput>\n      <SearchButton>Search</SearchButton>\n    </div>\n    <QuerySuggestions />\n  </div>\n</template>\n\n<script>\n  import { SearchInput, ClearSearchInput, SearchButton } from '@empathyco/x-components/search-box';\n  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n\n  export default {\n    name: 'SearchInputDemo',\n    components: {\n      SearchInput,\n      ClearSearchInput,\n      SearchButton,\n      QuerySuggestions\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "3.0.0-alpha.150",
+  "version": "3.0.0-alpha.153",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -63,7 +63,7 @@
     "@empathyco/x-deep-merge": "^1.3.0-alpha.19",
     "@empathyco/x-logger": "^1.2.0-alpha.3",
     "@empathyco/x-storage-service": "^2.0.0-alpha.2",
-    "@empathyco/x-types": "^10.0.0-alpha.30",
+    "@empathyco/x-types": "^10.0.0-alpha.31",
     "@empathyco/x-utils": "^1.0.0-alpha.5",
     "@types/resize-observer-browser": "~0.1.5",
     "rxjs": "~7.4.0",
@@ -78,7 +78,7 @@
   "devDependencies": {
     "@cypress/vue": "~2.2.4",
     "@cypress/webpack-dev-server": "~1.8.4",
-    "@empathyco/x-adapter-platform": "^1.0.0-alpha.29",
+    "@empathyco/x-adapter-platform": "^1.0.0-alpha.30",
     "@microsoft/api-documenter": "~7.15.3",
     "@microsoft/api-extractor": "~7.19.4",
     "@rollup/plugin-commonjs": "~21.0.1",
@@ -125,5 +125,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "1fc14893fef9ae25e2711f30513144055ebe13af"
+  "gitHead": "bd382b4a1cbf85f43f1a9091f63caa328edcf719"
 }

package/report/x-components.api.json

@@ -27845,6 +27845,33 @@
           "releaseTag": "Public",
           "name": "NextQueryPreview",
           "members": [
+            {
+              "kind": "Property",
+              "canonicalReference": "@empathyco/x-components!NextQueryPreview#maxItemsToRender:member",
+              "docComment": "/**\n * Number of suggestion results to be rendered.\n *\n * @public\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "protected maxItemsToRender?: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "number"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isOptional": true,
+              "releaseTag": "Public",
+              "name": "maxItemsToRender",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "isStatic": false
+            },
             {
               "kind": "Method",
               "canonicalReference": "@empathyco/x-components!NextQueryPreview#mounted:member(1)",
@@ -27957,6 +27984,10 @@
                   "text": "PreviewResults",
                   "canonicalReference": "@empathyco/x-components!PreviewResults:interface"
                 },
+                {
+                  "kind": "Content",
+                  "text": " | undefined"
+                },
                 {
                   "kind": "Content",
                   "text": ";"
@@ -27967,7 +27998,7 @@
               "name": "suggestionResults",
               "propertyTypeTokenRange": {
                 "startIndex": 1,
-                "endIndex": 2
+                "endIndex": 3
               },
               "isStatic": false
             }

package/report/x-components.api.md

@@ -2600,10 +2600,11 @@ export class NextQuery extends Vue_2 {
 
 // @public
 export class NextQueryPreview extends Vue_2 {
+    protected maxItemsToRender?: number;
     mounted(): void;
     previewResults: Dictionary<PreviewResults>;
     protected suggestion: NextQuery_2;
-    get suggestionResults(): PreviewResults;
+    get suggestionResults(): PreviewResults | undefined;
 }
 
 // @public

package/report/x-types.api.json

@@ -4455,7 +4455,7 @@
               "excerptTokens": [
                 {
                   "kind": "Content",
-                  "text": "identifier: "
+                  "text": "identifier?: "
                 },
                 {
                   "kind": "Reference",
@@ -4467,7 +4467,7 @@
                   "text": ";"
                 }
               ],
-              "isOptional": false,
+              "isOptional": true,
               "releaseTag": "Public",
               "name": "identifier",
               "propertyTypeTokenRange": {
@@ -4482,7 +4482,7 @@
               "excerptTokens": [
                 {
                   "kind": "Content",
-                  "text": "images: "
+                  "text": "images?: "
                 },
                 {
                   "kind": "Content",
@@ -4493,7 +4493,7 @@
                   "text": ";"
                 }
               ],
-              "isOptional": false,
+              "isOptional": true,
               "releaseTag": "Public",
               "name": "images",
               "propertyTypeTokenRange": {
@@ -4508,7 +4508,7 @@
               "excerptTokens": [
                 {
                   "kind": "Content",
-                  "text": "isWishlisted: "
+                  "text": "isWishlisted?: "
                 },
                 {
                   "kind": "Content",
@@ -4519,7 +4519,7 @@
                   "text": ";"
                 }
               ],
-              "isOptional": false,
+              "isOptional": true,
               "releaseTag": "Public",
               "name": "isWishlisted",
               "propertyTypeTokenRange": {
@@ -4534,7 +4534,7 @@
               "excerptTokens": [
                 {
                   "kind": "Content",
-                  "text": "name: "
+                  "text": "name?: "
                 },
                 {
                   "kind": "Content",
@@ -4545,7 +4545,7 @@
                   "text": ";"
                 }
               ],
-              "isOptional": false,
+              "isOptional": true,
               "releaseTag": "Public",
               "name": "name",
               "propertyTypeTokenRange": {
@@ -4560,7 +4560,7 @@
               "excerptTokens": [
                 {
                   "kind": "Content",
-                  "text": "price: "
+                  "text": "price?: "
                 },
                 {
                   "kind": "Reference",
@@ -4572,7 +4572,7 @@
                   "text": ";"
                 }
               ],
-              "isOptional": false,
+              "isOptional": true,
               "releaseTag": "Public",
               "name": "price",
               "propertyTypeTokenRange": {
@@ -4587,7 +4587,7 @@
               "excerptTokens": [
                 {
                   "kind": "Content",
-                  "text": "rating: "
+                  "text": "rating?: "
                 },
                 {
                   "kind": "Reference",
@@ -4599,7 +4599,7 @@
                   "text": ";"
                 }
               ],
-              "isOptional": false,
+              "isOptional": true,
               "releaseTag": "Public",
               "name": "rating",
               "propertyTypeTokenRange": {
@@ -4614,7 +4614,7 @@
               "excerptTokens": [
                 {
                   "kind": "Content",
-                  "text": "type: "
+                  "text": "type?: "
                 },
                 {
                   "kind": "Content",
@@ -4625,7 +4625,7 @@
                   "text": ";"
                 }
               ],
-              "isOptional": false,
+              "isOptional": true,
               "releaseTag": "Public",
               "name": "type",
               "propertyTypeTokenRange": {
@@ -4640,7 +4640,7 @@
               "excerptTokens": [
                 {
                   "kind": "Content",
-                  "text": "url: "
+                  "text": "url?: "
                 },
                 {
                   "kind": "Content",
@@ -4651,13 +4651,44 @@
                   "text": ";"
                 }
               ],
-              "isOptional": false,
+              "isOptional": true,
               "releaseTag": "Public",
               "name": "url",
               "propertyTypeTokenRange": {
                 "startIndex": 1,
                 "endIndex": 2
               }
+            },
+            {
+              "kind": "PropertySignature",
+              "canonicalReference": "@empathyco/x-types!Result#variants:member",
+              "docComment": "/**\n * {@link ResultVariant | Variants of the result}.\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "variants?: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "ResultVariant",
+                  "canonicalReference": "@empathyco/x-types!ResultVariant:interface"
+                },
+                {
+                  "kind": "Content",
+                  "text": "[]"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isOptional": true,
+              "releaseTag": "Public",
+              "name": "variants",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 3
+              }
             }
           ],
           "extendsTokenRanges": [
@@ -4875,6 +4906,44 @@
             "endIndex": 2
           }
         },
+        {
+          "kind": "Interface",
+          "canonicalReference": "@empathyco/x-types!ResultVariant:interface",
+          "docComment": "/**\n * A result variant.\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export interface ResultVariant extends "
+            },
+            {
+              "kind": "Reference",
+              "text": "Omit",
+              "canonicalReference": "!Omit:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<"
+            },
+            {
+              "kind": "Reference",
+              "text": "Result",
+              "canonicalReference": "@empathyco/x-types!Result:interface"
+            },
+            {
+              "kind": "Content",
+              "text": ", 'id' | 'modelName' | 'tagging'> "
+            }
+          ],
+          "releaseTag": "Public",
+          "name": "ResultVariant",
+          "members": [],
+          "extendsTokenRanges": [
+            {
+              "startIndex": 1,
+              "endIndex": 5
+            }
+          ]
+        },
         {
           "kind": "Interface",
           "canonicalReference": "@empathyco/x-types!SearchRequest:interface",

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

@@ -15,6 +15,12 @@ export default class NextQueryPreview extends Vue {
      * @public
      */
     protected suggestion: NextQuery;
+    /**
+     * Number of suggestion results to be rendered.
+     *
+     * @public
+     */
+    protected maxItemsToRender?: number;
     /**
      * The results preview of the next queries mounted.
      * It is a dictionary, indexed by the next query query.
@@ -30,6 +36,6 @@ export default class NextQueryPreview extends Vue {
      *
      * @returns The results preview of the actual next query.
      */
-    get suggestionResults(): PreviewResults;
+    get suggestionResults(): PreviewResults | undefined;
 }
 //# sourceMappingURL=next-query-preview.vue?rollup-plugin-vue=script.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"next-query-preview.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/next-queries/components/next-query-preview.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAgCA,OAAO,GAAG,MAAM,KAAK,CAAC;AAEtB,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAKhD;;;;;;GAMG;AAIH,MAAM,CAAC,OAAO,OAAO,gBAAiB,SAAQ,GAAG;IAC/C;;;;OAIG;IAIH,SAAS,CAAC,UAAU,EAAG,SAAS,CAAC;IAEjC;;;OAGG;IAEI,cAAc,EAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAEnD;;;OAGG;IACH,OAAO,IAAI,IAAI;IAIf;;;;OAIG;IACH,IAAW,iBAAiB,IAAI,cAAc,CAE7C;CACF"}
+{"version":3,"file":"next-query-preview.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/next-queries/components/next-query-preview.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAgCA,OAAO,GAAG,MAAM,KAAK,CAAC;AAEtB,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAKhD;;;;;;GAMG;AAIH,MAAM,CAAC,OAAO,OAAO,gBAAiB,SAAQ,GAAG;IAC/C;;;;OAIG;IAIH,SAAS,CAAC,UAAU,EAAG,SAAS,CAAC;IAEjC;;;;OAIG;IAEH,SAAS,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAEpC;;;OAGG;IAEI,cAAc,EAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAEnD;;;OAGG;IACH,OAAO,IAAI,IAAI;IAIf;;;;OAIG;IACH,IAAW,iBAAiB,IAAI,cAAc,GAAG,SAAS,CASzD;CACF"}