@empathyco/x-components 3.0.0-alpha.230 → 3.0.0-alpha.232

package/CHANGELOG.md

@@ -3,6 +3,37 @@
 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.232](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.231...@empathyco/x-components@3.0.0-alpha.232) (2022-11-28)
+
+### Features
+
+- add `Highlight` component (#872)
+  ([1b5aa57](https://github.com/empathyco/x/commit/1b5aa5793b7916ec0433b4110b7ef355f882f4f6)),
+  closes [EX-7468](https://searchbroker.atlassian.net/browse/EX-7468)
+
+# 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.231](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.230...@empathyco/x-components@3.0.0-alpha.231) (2022-11-28)
+
+### Features
+
+- show next result image on hover (#863)
+  ([8fd02cc](https://github.com/empathyco/x/commit/8fd02cc8f9913dfa0e06af83251db4577656099e)),
+  closes [EX-5970](https://searchbroker.atlassian.net/browse/EX-5970)
+
+### Bug Fixes
+
+- **components:** Fix InfiniteScroll get root element inside Shadow DOM. (#874)
+  ([340293f](https://github.com/empathyco/x/commit/340293ffc1946c69018fcfa67a069f443110763d))
+
+# 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.230](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.229...@empathyco/x-components@3.0.0-alpha.230) (2022-11-24)
 
 ### Features

package/docs/API-reference/api/x-components.baseresultimage.hoveranimation.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; [BaseResultImage](./x-components.baseresultimage.md) &gt; [hoverAnimation](./x-components.baseresultimage.hoveranimation.md)
+
+## BaseResultImage.hoverAnimation property
+
+Animation to use when switching between the loaded image and the hover image.
+
+<b>Signature:</b>
+
+```typescript
+hoverAnimation: string | typeof Vue | undefined;
+```

package/docs/API-reference/api/{x-components.baseresultimage.animation.md → x-components.baseresultimage.loadanimation.md}

@@ -1,13 +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; [BaseResultImage](./x-components.baseresultimage.md) &gt; [animation](./x-components.baseresultimage.animation.md)
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [BaseResultImage](./x-components.baseresultimage.md) &gt; [loadAnimation](./x-components.baseresultimage.loadanimation.md)
 
-## BaseResultImage.animation property
+## BaseResultImage.loadAnimation property
 
 Animation to use when switching between the placeholder, the loaded image, or the failed image fallback.
 
 <b>Signature:</b>
 
 ```typescript
-animation: string | typeof Vue;
+loadAnimation: string | typeof Vue;
 ```

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

@@ -17,6 +17,8 @@ export default class BaseResultImage extends Vue
 
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
-|  [animation](./x-components.baseresultimage.animation.md) |  | string \| typeof Vue | Animation to use when switching between the placeholder, the loaded image, or the failed image fallback. |
+|  [hoverAnimation](./x-components.baseresultimage.hoveranimation.md) |  | string \| typeof Vue \| undefined | Animation to use when switching between the loaded image and the hover image. |
+|  [loadAnimation](./x-components.baseresultimage.loadanimation.md) |  | string \| typeof Vue | Animation to use when switching between the placeholder, the loaded image, or the failed image fallback. |
 |  [result](./x-components.baseresultimage.result.md) |  | Result | (Required) The [result](./x-types.result.md) information. |
+|  [showNextImageOnHover](./x-components.baseresultimage.shownextimageonhover.md) |  | boolean | Indicates if the next valid image should be displayed on hover. |
 

package/docs/API-reference/api/x-components.baseresultimage.shownextimageonhover.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; [BaseResultImage](./x-components.baseresultimage.md) &gt; [showNextImageOnHover](./x-components.baseresultimage.shownextimageonhover.md)
+
+## BaseResultImage.showNextImageOnHover property
+
+Indicates if the next valid image should be displayed on hover.
+
+<b>Signature:</b>
+
+```typescript
+showNextImageOnHover: boolean;
+```

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

@@ -6,7 +6,7 @@
 
 Custom Vue directive for infinite scroll.
 
-This directive uses the IntersectionObserver API to handle the intersection between the children and the scrollable container. The content of the children moves up on scroll and when it reaches the end the IntersectionObserver triggers that both elements are intersecting.
+This directive uses the IntersectionObserver API to handle the intersection between the children and the scrollable container. The content of the children moves up on scroll and when it reaches the end, the IntersectionObserver triggers that both elements are intersecting.
 
 How it works.
 
@@ -14,7 +14,7 @@ As a summary, if the scroll reaches the end, the `vNode.context.onInfiniteScroll
 
 Usage.
 
-The directive has to be set in the target element. It can receive an argument which will be used to determine the scrollable container. Possible values: \* html: will set the <html> as the scrollable container. \* body: will set the <body> as the scrollable container. \* id: will set the DOM element with the provided id as the scrollable container.
+The directive has to be set in the target element. It can receive an argument which will be used to determine the scrollable container. Possible values: `html`<!-- -->: will set the <html> as the scrollable container. `body`<!-- -->: will set the <body> as the scrollable container. ID: will set the DOM element with the provided id as the scrollable container.
 
 If no argument is provided the scrollable container fallbacks to the viewport.
 

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

@@ -471,7 +471,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [identifierResultsXModule](./x-components.identifierresultsxmodule.md) | IdentifierResults [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the <code>identifier-results</code> entry point. |
 |  [increasePageAppendingResults](./x-components.increasepageappendingresults.md) | Default implementation for the [SearchActions.increasePageAppendingResults()](./x-components.searchactions.increasepageappendingresults.md)<!-- -->. |
 |  [increasePageAppendingResultsWire](./x-components.increasepageappendingresultswire.md) | Increases the current search state <code>page</code> by one. |
-|  [infiniteScroll](./x-components.infinitescroll.md) | Custom Vue directive for infinite scroll.<!-- -->This directive uses the IntersectionObserver API to handle the intersection between the children and the scrollable container. The content of the children moves up on scroll and when it reaches the end the IntersectionObserver triggers that both elements are intersecting.<!-- -->How it works.<!-- -->As a summary, if the scroll reaches the end, the <code>vNode.context.onInfiniteScrollEnd</code> function implemented by the component which imports the directive, is executed. If you provide a margin in the directive options, this function is triggered when the scroll reaches the end minus that amount of pixels. A default margin of 200px is set.<!-- -->Usage.<!-- -->The directive has to be set in the target element. It can receive an argument which will be used to determine the scrollable container. Possible values: \* html: will set the <html> as the scrollable container. \* body: will set the <body> as the scrollable container. \* id: will set the DOM element with the provided id as the scrollable container.<!-- -->If no argument is provided the scrollable container fallbacks to the viewport. |
+|  [infiniteScroll](./x-components.infinitescroll.md) | Custom Vue directive for infinite scroll.<!-- -->This directive uses the IntersectionObserver API to handle the intersection between the children and the scrollable container. The content of the children moves up on scroll and when it reaches the end, the IntersectionObserver triggers that both elements are intersecting.<!-- -->How it works.<!-- -->As a summary, if the scroll reaches the end, the <code>vNode.context.onInfiniteScrollEnd</code> function implemented by the component which imports the directive, is executed. If you provide a margin in the directive options, this function is triggered when the scroll reaches the end minus that amount of pixels. A default margin of 200px is set.<!-- -->Usage.<!-- -->The directive has to be set in the target element. It can receive an argument which will be used to determine the scrollable container. Possible values: <code>html</code>: will set the <html> as the scrollable container. <code>body</code>: will set the <body> as the scrollable container. ID: will set the DOM element with the provided id as the scrollable container.<!-- -->If no argument is provided the scrollable container fallbacks to the viewport. |
 |  [LightBulbOff](./x-components.lightbulboff.md) |  |
 |  [LightBulbOn](./x-components.lightbulbon.md) |  |
 |  [loadHistoryQueriesFromBrowserStorage](./x-components.loadhistoryqueriesfrombrowserstorage.md) | Default implementation for the [HistoryQueriesActions.loadHistoryQueriesFromBrowserStorage()](./x-components.historyqueriesactions.loadhistoryqueriesfrombrowserstorage.md) action. |

package/docs/API-reference/components/common/result/x-components.base-result-image.md

@@ -10,10 +10,12 @@ Component to be reused that renders an `<img>`.
 
 ## Props
 
-| Name                   | Description                                                                                                   | Type                | Default                      |
-| ---------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------- | ---------------------------- |
-| <code>result</code>    | (Required) The {@link @empathyco/x-types#Result \| result} information.                                       | <code>Result</code> | <code></code>                |
-| <code>animation</code> | Animation to use when switching between the placeholder, the loaded image, or the failed<br />image fallback. | <code>union</code>  | <code>() => NoElement</code> |
+| Name                              | Description                                                                                                   | Type                 | Default                      |
+| --------------------------------- | ------------------------------------------------------------------------------------------------------------- | -------------------- | ---------------------------- |
+| <code>result</code>               | (Required) The {@link @empathyco/x-types#Result \| result} information.                                       | <code>Result</code>  | <code></code>                |
+| <code>loadAnimation</code>        | Animation to use when switching between the placeholder, the loaded image, or the failed<br />image fallback. | <code>union</code>   | <code>() => NoElement</code> |
+| <code>hoverAnimation</code>       | Animation to use when switching between the loaded image and the hover image.                                 | <code>union</code>   | <code></code>                |
+| <code>showNextImageOnHover</code> | Indicates if the next valid image should be displayed on hover.                                               | <code>boolean</code> | <code>false</code>           |
 
 ## Slots
 
@@ -35,6 +37,14 @@ The result prop is required. It will render a `<img/>` with the result image:
 <BaseResultImage :result="result" />
 ```
 
+### Showing the next image on hover
+
+If a result has multiple images, it can show the next one on hover.
+
+```vue
+<BaseResultImage :result="result" showNextImageOnHover />
+```
+
 ### Customizing slots content
 
 Fallback and placeholder contents can be customized.
@@ -54,3 +64,47 @@ displayed while the real one is loaded.
   </template>
 </BaseResultImage>
 ```
+
+### Customizing the animations
+
+Two animations can be used this component.
+
+The `loadAnimation` is used to transition between the placeholder, the fallback and the image.
+
+The `hoverAnimation` is used to transition between the image and the hover image, if the
+`showNextImageOnHover` prop is `true`.
+
+`hoverAnimation` will default to `loadAnimation` if it is not provided.
+
+```vue
+<template>
+  <BaseResultImage
+    :result="result"
+    :loadAnimation="loadAnimation"
+    :hoverAnimation="hoverAnimation"
+    showNextImageOnHover
+  />
+</template>
+
+<script>
+import { BaseResultImage } from "@empathyco/x-components";
+import { CrossFade, CollapseHeight } from "@empathyco/x-components/animations";
+
+export default {
+  name: "BaseResultImageAnimations",
+  components: {
+    BaseResultImage
+  },
+  data() {
+    return {
+      loadAnimation: CrossFade,
+      hoverAnimation: CollapseHeight,
+      result: {
+        name: "jacket",
+        images: ["https://some-image", "https://some-image-2"]
+      }
+    };
+  }
+};
+</script>
+```

package/docs/API-reference/components/common/x-components.highlight.md

@@ -0,0 +1,100 @@
+---
+
+title: Highlight
+
+---
+
+# Highlight
+
+Highlights the given part of the text. The component is smart enough to do matches
+between special characters like tilde, cedilla, eñe, capital letters...
+
+## Props
+
+| Name                    | Description                                                              | Type                | Default         |
+| ----------------------- | ------------------------------------------------------------------------ | ------------------- | --------------- |
+| <code>text</code>       | The text to highlight some part of it.                                   | <code>string</code> | <code>''</code> |
+| <code>highlight</code>  | The part of the text to be highlighted.                                  | <code>string</code> | <code>''</code> |
+| <code>matchClass</code> | CSS Class to add when the `text` string contains the `highlight` string. | <code>string</code> | <code>''</code> |
+
+## Slots
+
+| Name                 | Description | Bindings<br />(name - type - description) |
+| -------------------- | ----------- | ----------------------------------------- |
+| <code>default</code> |             | <br /><br />                              |
+
+## Events
+
+This component emits no events.
+
+## See it in action
+
+Here you have a basic example of how the highlight component is rendered.
+
+_Type any term in the input field to try it out!_
+
+```vue live
+<template>
+  <div>
+    <input v-model="highlight" />
+    <Highlight :highlight="highlight" text="milanesa" />
+  </div>
+</template>
+
+<script>
+import { Highlight } from "@empathyco/x-components";
+
+export default {
+  name: "HighlightDemo",
+  components: {
+    Highlight
+  },
+  data() {
+    return {
+      highlight: ""
+    };
+  }
+};
+</script>
+```
+
+### Customise the layout
+
+This component allows to customise the whole layout. Be careful as due to Vue 2 limitations you can
+only render a single root element.
+
+```vue live
+<template>
+  <div>
+    <input v-model="highlight" />
+    <Highlight
+      :highlight="highlight"
+      text="Entraña"
+      #default="{ hasMatch, start, match, end, text }"
+    >
+      <span class="custom-layout" v-if="hasMatch">
+        <strong>{{ start }}</strong>
+        {{ match }}
+        <strong>{{ end }}</strong>
+      </span>
+      <span v-else>{{ text }}</span>
+    </Highlight>
+  </div>
+</template>
+
+<script>
+import { Highlight } from "@empathyco/x-components";
+
+export default {
+  name: "HighlightDemo",
+  components: {
+    Highlight
+  },
+  data() {
+    return {
+      highlight: "entran"
+    };
+  }
+};
+</script>
+```

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

@@ -10,36 +10,51 @@ var __vue_render__ = function () {
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c(
-    "picture",
+    "div",
     {
-      ref: "image",
       staticClass: "x-picture x-result-picture",
       attrs: { "data-test": "result-picture" },
+      on: {
+        "~mouseenter": function ($event) {
+          _vm.userHasHoveredImage = true;
+        },
+        mouseenter: function ($event) {
+          _vm.isHovering = true;
+        },
+        mouseleave: function ($event) {
+          _vm.isHovering = false;
+        },
+      },
     },
     [
-      !_vm.hasImageLoaded && _vm.imageSrc
+      _vm.shouldLoadNextImage
         ? _c("img", {
             style: _vm.loaderStyles,
             attrs: {
               loading: "lazy",
-              src: _vm.imageSrc,
+              src: _vm.pendingImages[0],
               "data-test": "result-picture-loader",
               alt: "",
               role: "presentation",
             },
-            on: { error: _vm.flagImageAsFailed, load: _vm.flagImageLoaded },
+            on: { load: _vm.flagImageLoaded, error: _vm.flagImageAsFailed },
           })
         : _vm._e(),
       _vm._v(" "),
       _c(
         _vm.animation,
-        { tag: "component", staticClass: "x-picture__image" },
+        {
+          tag: "component",
+          staticClass: "x-picture__image",
+          attrs: { appear: false },
+        },
         [
-          !_vm.imageSrc
+          !_vm.loadedImages.length && !_vm.pendingImages.length
             ? _vm._t("fallback")
-            : !_vm.hasImageLoaded
+            : !_vm.loadedImages.length
             ? _vm._t("placeholder")
             : _c("img", {
+                key: _vm.imageSrc,
                 staticClass: "x-picture__image x-result-picture__image",
                 attrs: {
                   alt: _vm.result.name,
@@ -60,7 +75,7 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = undefined;
   /* scoped */
-  const __vue_scope_id__ = "data-v-236590f6";
+  const __vue_scope_id__ = "data-v-66a674d2";
   /* 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    <img\n      v-if=\"!hasImageLoaded && imageSrc\"\n      @error=\"flagImageAsFailed\"\n      @load=\"flagImageLoaded\"\n      loading=\"lazy\"\n      :src=\"imageSrc\"\n      :style=\"loaderStyles\"\n      data-test=\"result-picture-loader\"\n      alt=\"\"\n      role=\"presentation\"\n    />\n    <component :is=\"animation\" class=\"x-picture__image\">\n      <!-- @slot Fallback image content. It will be rendered when all the images failed -->\n      <slot v-if=\"!imageSrc\" name=\"fallback\" />\n\n      <!-- @slot Loading image content. It will be rendered while the real image is not loaded -->\n      <slot v-else-if=\"!hasImageLoaded\" name=\"placeholder\" />\n\n      <img\n        v-else\n        :alt=\"result.name\"\n        :src=\"imageSrc\"\n        class=\"x-picture__image x-result-picture__image\"\n        data-test=\"result-picture-image\"\n      />\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     * (Required) The {@link @empathyco/x-types#Result | result} information.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected result!: Result;\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     * An array of images that failed to load.\n     *\n     * @internal\n     */\n    protected failedImages: string[] = [];\n\n    /**\n     * Indicates if the result image is loaded.\n     *\n     * @internal\n     */\n    protected hasImageLoaded = false;\n\n    /**.\n     * Styles to use inline in the image loader, to prevent override from CSS\n     *\n     * @internal\n     */\n    protected loaderStyles: Partial<CSSStyleDeclaration> = {\n      position: 'absolute !important',\n      top: '0 !important',\n      left: '0 !important',\n      width: '100% !important',\n      height: '100% !important',\n      pointerEvents: 'none !important',\n      visibility: 'hidden !important'\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      const image = this.result.images?.find(image => !this.failedImages.includes(image));\n      return image ?? '';\n    }\n\n    /**\n     * Sets an image as failed.\n     *\n     * @internal\n     */\n    protected flagImageAsFailed(): void {\n      if (this.imageSrc !== '') {\n        this.failedImages.push(this.imageSrc);\n      }\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  <!-- This is a div because using a picture causes the onload event of the image to fire twice. -->\n  <!-- eslint-disable-next-line vuejs-accessibility/mouse-events-have-key-events -->\n  <div\n    @mouseenter.once=\"userHasHoveredImage = true\"\n    @mouseenter=\"isHovering = true\"\n    @mouseleave=\"isHovering = false\"\n    class=\"x-picture x-result-picture\"\n    data-test=\"result-picture\"\n  >\n    <img\n      v-if=\"shouldLoadNextImage\"\n      @load=\"flagImageLoaded\"\n      @error=\"flagImageAsFailed\"\n      loading=\"lazy\"\n      :src=\"pendingImages[0]\"\n      :style=\"loaderStyles\"\n      data-test=\"result-picture-loader\"\n      alt=\"\"\n      role=\"presentation\"\n    />\n    <component :is=\"animation\" class=\"x-picture__image\" :appear=\"false\">\n      <!-- @slot Fallback image content. It will be rendered when all the images failed -->\n      <slot v-if=\"!loadedImages.length && !pendingImages.length\" name=\"fallback\" />\n\n      <!-- @slot Loading image content. It will be rendered while the real image is not loaded -->\n      <slot v-else-if=\"!loadedImages.length\" name=\"placeholder\" />\n\n      <img\n        v-else\n        :key=\"imageSrc\"\n        :alt=\"result.name\"\n        :src=\"imageSrc\"\n        class=\"x-picture__image x-result-picture__image\"\n        data-test=\"result-picture-image\"\n      />\n    </component>\n  </div>\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     * (Required) The {@link @empathyco/x-types#Result | result} information.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected result!: Result;\n\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 loadAnimation!: string | typeof Vue;\n\n    /**\n     * Animation to use when switching between the loaded image and the hover image.\n     *\n     * @public\n     */\n    @Prop()\n    public hoverAnimation!: string | typeof Vue | undefined;\n\n    /**\n     * Indicates if the next valid image should be displayed on hover.\n     *\n     * @public\n     */\n    @Prop({ type: Boolean, default: false })\n    public showNextImageOnHover!: boolean;\n\n    /**\n     * Copy of the images of the result.\n     *\n     * It is used as a queue of images to load, once an image loads/fails to load, it is removed\n     * from this array.\n     *\n     * @internal\n     */\n    protected pendingImages: string[] = [...(this.result.images ?? [])];\n\n    /**\n     * Contains the images that have been loaded successfully.\n     *\n     * @internal\n     */\n    protected loadedImages: string[] = [];\n\n    /**\n     * Indicates if the user is hovering the image.\n     *\n     * @internal\n     */\n    protected isHovering = false;\n\n    /**\n     * Indicates if the user has hovered the image.\n     *\n     * @internal\n     */\n    protected userHasHoveredImage = false;\n\n    /**.\n     * Styles to use inline in the image loader, to prevent override from CSS\n     *\n     * @internal\n     */\n    protected loaderStyles: Partial<CSSStyleDeclaration> = {\n      position: 'absolute !important',\n      top: '0 !important',\n      left: '0 !important',\n      width: '100% !important',\n      height: '100% !important',\n      pointerEvents: 'none !important',\n      visibility: 'hidden !important'\n    };\n\n    /**\n     * Animation to be used.\n     *\n     * @returns The animation to be used, taking into account if the user has hovered the image.\n     *\n     * @internal\n     */\n    protected get animation(): string | typeof Vue {\n      return this.userHasHoveredImage\n        ? this.hoverAnimation ?? this.loadAnimation\n        : this.loadAnimation;\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      return this.loadedImages[\n        !this.showNextImageOnHover || !this.isHovering ? 0 : this.loadedImages.length - 1\n      ];\n    }\n\n    /**\n     * Indicates if the loader should try to load the next image.\n     *\n     * @returns True if it should try to load the next image.\n     *\n     * @internal\n     */\n    protected get shouldLoadNextImage(): boolean {\n      const numImagesToLoad = this.showNextImageOnHover && this.userHasHoveredImage ? 2 : 1;\n      return !!this.pendingImages.length && this.loadedImages.length < numImagesToLoad;\n    }\n\n    /**\n     * Sets an image as failed.\n     *\n     * @internal\n     */\n    protected flagImageAsFailed(): void {\n      this.pendingImages.shift();\n    }\n\n    /**\n     * Sets an image as loaded.\n     *\n     * @internal\n     */\n    protected flagImageLoaded(): void {\n      const image = this.pendingImages.shift();\n      if (image) {\n        this.loadedImages.push(image);\n      }\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### Showing the next image on hover\n\nIf a result has multiple images, it can show the next one on hover.\n\n```vue\n<BaseResultImage :result=\"result\" showNextImageOnHover />\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\n### Customizing the animations\n\nTwo animations can be used this component.\n\nThe `loadAnimation` is used to transition between the placeholder, the fallback and the image.\n\nThe `hoverAnimation` is used to transition between the image and the hover image, if the\n`showNextImageOnHover` prop is `true`.\n\n`hoverAnimation` will default to `loadAnimation` if it is not provided.\n\n```vue\n<template>\n  <BaseResultImage\n    :result=\"result\"\n    :loadAnimation=\"loadAnimation\"\n    :hoverAnimation=\"hoverAnimation\"\n    showNextImageOnHover\n  />\n</template>\n\n<script>\n  import { BaseResultImage } from '@empathyco/x-components';\n  import { CrossFade, CollapseHeight } from '@empathyco/x-components/animations';\n\n  export default {\n    name: 'BaseResultImageAnimations',\n    components: {\n      BaseResultImage\n    },\n    data() {\n      return {\n        loadAnimation: CrossFade,\n        hoverAnimation: CollapseHeight,\n        result: {\n          name: 'jacket',\n          images: ['https://some-image', 'https://some-image-2']\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -12,17 +12,32 @@ let BaseResultImage = class BaseResultImage extends Vue {
     constructor() {
         super(...arguments);
         /**
-         * An array of images that failed to load.
+         * Copy of the images of the result.
+         *
+         * It is used as a queue of images to load, once an image loads/fails to load, it is removed
+         * from this array.
          *
          * @internal
          */
-        this.failedImages = [];
+        this.pendingImages = [...(this.result.images ?? [])];
         /**
-         * Indicates if the result image is loaded.
+         * Contains the images that have been loaded successfully.
          *
          * @internal
          */
-        this.hasImageLoaded = false;
+        this.loadedImages = [];
+        /**
+         * Indicates if the user is hovering the image.
+         *
+         * @internal
+         */
+        this.isHovering = false;
+        /**
+         * Indicates if the user has hovered the image.
+         *
+         * @internal
+         */
+        this.userHasHoveredImage = false;
         /**.
          * Styles to use inline in the image loader, to prevent override from CSS
          *
@@ -38,6 +53,18 @@ let BaseResultImage = class BaseResultImage extends Vue {
             visibility: 'hidden !important'
         };
     }
+    /**
+     * Animation to be used.
+     *
+     * @returns The animation to be used, taking into account if the user has hovered the image.
+     *
+     * @internal
+     */
+    get animation() {
+        return this.userHasHoveredImage
+            ? this.hoverAnimation ?? this.loadAnimation
+            : this.loadAnimation;
+    }
     /**
      * Gets the src from the result image.
      *
@@ -46,8 +73,18 @@ let BaseResultImage = class BaseResultImage extends Vue {
      * @internal
      */
     get imageSrc() {
-        const image = this.result.images?.find(image => !this.failedImages.includes(image));
-        return image ?? '';
+        return this.loadedImages[!this.showNextImageOnHover || !this.isHovering ? 0 : this.loadedImages.length - 1];
+    }
+    /**
+     * Indicates if the loader should try to load the next image.
+     *
+     * @returns True if it should try to load the next image.
+     *
+     * @internal
+     */
+    get shouldLoadNextImage() {
+        const numImagesToLoad = this.showNextImageOnHover && this.userHasHoveredImage ? 2 : 1;
+        return !!this.pendingImages.length && this.loadedImages.length < numImagesToLoad;
     }
     /**
      * Sets an image as failed.
@@ -55,17 +92,18 @@ let BaseResultImage = class BaseResultImage extends Vue {
      * @internal
      */
     flagImageAsFailed() {
-        if (this.imageSrc !== '') {
-            this.failedImages.push(this.imageSrc);
-        }
+        this.pendingImages.shift();
     }
     /**
-     * Marks an image as loaded.
+     * Sets an image as loaded.
      *
      * @internal
      */
     flagImageLoaded() {
-        this.hasImageLoaded = true;
+        const image = this.pendingImages.shift();
+        if (image) {
+            this.loadedImages.push(image);
+        }
     }
 };
 __decorate([
@@ -73,7 +111,13 @@ __decorate([
 ], BaseResultImage.prototype, "result", void 0);
 __decorate([
     Prop({ default: () => NoElement })
-], BaseResultImage.prototype, "animation", void 0);
+], BaseResultImage.prototype, "loadAnimation", void 0);
+__decorate([
+    Prop()
+], BaseResultImage.prototype, "hoverAnimation", void 0);
+__decorate([
+    Prop({ type: Boolean, default: false })
+], BaseResultImage.prototype, "showNextImageOnHover", void 0);
 BaseResultImage = __decorate([
     Component({
         components: {

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\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   * (Required) The {@link @empathyco/x-types#Result | result} information.\n   *\n   * @public\n   */\n  @Prop({ required: true })\n  protected result!: Result;\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   * An array of images that failed to load.\n   *\n   * @internal\n   */\n  protected failedImages: string[] = [];\n\n  /**\n   * Indicates if the result image is loaded.\n   *\n   * @internal\n   */\n  protected hasImageLoaded = false;\n\n  /**.\n   * Styles to use inline in the image loader, to prevent override from CSS\n   *\n   * @internal\n   */\n  protected loaderStyles: Partial<CSSStyleDeclaration> = {\n    position: 'absolute !important',\n    top: '0 !important',\n    left: '0 !important',\n    width: '100% !important',\n    height: '100% !important',\n    pointerEvents: 'none !important',\n    visibility: 'hidden !important'\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    const image = this.result.images?.find(image => !this.failedImages.includes(image));\n    return image ?? '';\n  }\n\n  /**\n   * Sets an image as failed.\n   *\n   * @internal\n   */\n  protected flagImageAsFailed(): void {\n    if (this.imageSrc !== '') {\n      this.failedImages.push(this.imageSrc);\n    }\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":";;;;;AAqCA;;;;;AAUA,IAAqB,eAAe,GAApC,MAAqB,eAAgB,SAAQ,GAAG;IAAhD;;;;;;;QAqBY,iBAAY,GAAa,EAAE,CAAC;;;;;;QAO5B,mBAAc,GAAG,KAAK,CAAC;;;;;;QAOvB,iBAAY,GAAiC;YACrD,QAAQ,EAAE,qBAAqB;YAC/B,GAAG,EAAE,cAAc;YACnB,IAAI,EAAE,cAAc;YACpB,KAAK,EAAE,iBAAiB;YACxB,MAAM,EAAE,iBAAiB;YACzB,aAAa,EAAE,iBAAiB;YAChC,UAAU,EAAE,mBAAmB;SAChC,CAAC;KAiCH;;;;;;;;IAxBC,IAAc,QAAQ;QACpB,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;QACpF,OAAO,KAAK,IAAI,EAAE,CAAC;KACpB;;;;;;IAOS,iBAAiB;QACzB,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,EAAE;YACxB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SACvC;KACF;;;;;;IAOS,eAAe;QACvB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC5B;CACF,CAAA;AArEC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;+CACC;AAQ1B;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,SAAS,EAAE,CAAC;kDACI;AAfpB,eAAe;IALnC,SAAS,CAAC;QACT,UAAU,EAAE;YACV,SAAS;SACV;KACF,CAAC;GACmB,eAAe,CA4EnC;aA5EoB,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\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   * (Required) The {@link @empathyco/x-types#Result | result} information.\n   *\n   * @public\n   */\n  @Prop({ required: true })\n  protected result!: Result;\n\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 loadAnimation!: string | typeof Vue;\n\n  /**\n   * Animation to use when switching between the loaded image and the hover image.\n   *\n   * @public\n   */\n  @Prop()\n  public hoverAnimation!: string | typeof Vue | undefined;\n\n  /**\n   * Indicates if the next valid image should be displayed on hover.\n   *\n   * @public\n   */\n  @Prop({ type: Boolean, default: false })\n  public showNextImageOnHover!: boolean;\n\n  /**\n   * Copy of the images of the result.\n   *\n   * It is used as a queue of images to load, once an image loads/fails to load, it is removed\n   * from this array.\n   *\n   * @internal\n   */\n  protected pendingImages: string[] = [...(this.result.images ?? [])];\n\n  /**\n   * Contains the images that have been loaded successfully.\n   *\n   * @internal\n   */\n  protected loadedImages: string[] = [];\n\n  /**\n   * Indicates if the user is hovering the image.\n   *\n   * @internal\n   */\n  protected isHovering = false;\n\n  /**\n   * Indicates if the user has hovered the image.\n   *\n   * @internal\n   */\n  protected userHasHoveredImage = false;\n\n  /**.\n   * Styles to use inline in the image loader, to prevent override from CSS\n   *\n   * @internal\n   */\n  protected loaderStyles: Partial<CSSStyleDeclaration> = {\n    position: 'absolute !important',\n    top: '0 !important',\n    left: '0 !important',\n    width: '100% !important',\n    height: '100% !important',\n    pointerEvents: 'none !important',\n    visibility: 'hidden !important'\n  };\n\n  /**\n   * Animation to be used.\n   *\n   * @returns The animation to be used, taking into account if the user has hovered the image.\n   *\n   * @internal\n   */\n  protected get animation(): string | typeof Vue {\n    return this.userHasHoveredImage\n      ? this.hoverAnimation ?? this.loadAnimation\n      : this.loadAnimation;\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    return this.loadedImages[\n      !this.showNextImageOnHover || !this.isHovering ? 0 : this.loadedImages.length - 1\n    ];\n  }\n\n  /**\n   * Indicates if the loader should try to load the next image.\n   *\n   * @returns True if it should try to load the next image.\n   *\n   * @internal\n   */\n  protected get shouldLoadNextImage(): boolean {\n    const numImagesToLoad = this.showNextImageOnHover && this.userHasHoveredImage ? 2 : 1;\n    return !!this.pendingImages.length && this.loadedImages.length < numImagesToLoad;\n  }\n\n  /**\n   * Sets an image as failed.\n   *\n   * @internal\n   */\n  protected flagImageAsFailed(): void {\n    this.pendingImages.shift();\n  }\n\n  /**\n   * Sets an image as loaded.\n   *\n   * @internal\n   */\n  protected flagImageLoaded(): void {\n    const image = this.pendingImages.shift();\n    if (image) {\n      this.loadedImages.push(image);\n    }\n  }\n}\n"],"names":[],"mappings":";;;;;AA8CA;;;;;AAUA,IAAqB,eAAe,GAApC,MAAqB,eAAgB,SAAQ,GAAG;IAAhD;;;;;;;;;;QA0CY,kBAAa,GAAa,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC,CAAC;;;;;;QAO1D,iBAAY,GAAa,EAAE,CAAC;;;;;;QAO5B,eAAU,GAAG,KAAK,CAAC;;;;;;QAOnB,wBAAmB,GAAG,KAAK,CAAC;;;;;;QAO5B,iBAAY,GAAiC;YACrD,QAAQ,EAAE,qBAAqB;YAC/B,GAAG,EAAE,cAAc;YACnB,IAAI,EAAE,cAAc;YACpB,KAAK,EAAE,iBAAiB;YACxB,MAAM,EAAE,iBAAiB;YACzB,aAAa,EAAE,iBAAiB;YAChC,UAAU,EAAE,mBAAmB;SAChC,CAAC;KA4DH;;;;;;;;IAnDC,IAAc,SAAS;QACrB,OAAO,IAAI,CAAC,mBAAmB;cAC3B,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,aAAa;cACzC,IAAI,CAAC,aAAa,CAAC;KACxB;;;;;;;;IASD,IAAc,QAAQ;QACpB,OAAO,IAAI,CAAC,YAAY,CACtB,CAAC,IAAI,CAAC,oBAAoB,IAAI,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAClF,CAAC;KACH;;;;;;;;IASD,IAAc,mBAAmB;QAC/B,MAAM,eAAe,GAAG,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,mBAAmB,GAAG,CAAC,GAAG,CAAC,CAAC;QACtF,OAAO,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,eAAe,CAAC;KAClF;;;;;;IAOS,iBAAiB;QACzB,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;KAC5B;;;;;;IAOS,eAAe;QACvB,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;QACzC,IAAI,KAAK,EAAE;YACT,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAC/B;KACF;CACF,CAAA;AAnIC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;+CACC;AAS1B;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,SAAS,EAAE,CAAC;sDACQ;AAQ3C;IADC,IAAI,EAAE;uDACiD;AAQxD;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;6DACF;AAhCnB,eAAe;IALnC,SAAS,CAAC;QACT,UAAU,EAAE;YACV,SAAS;SACV;KACF,CAAC;GACmB,eAAe,CA0InC;aA1IoB,eAAe;;;;"}

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

@@ -1,6 +1,6 @@
 import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
 
-var css = ".x-result-picture[data-v-236590f6] {\n  min-width: 1px;\n  min-height: 1px;\n  position: relative;\n}\n.x-result-picture__image[data-v-236590f6] {\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n}";
+var css = ".x-result-picture[data-v-66a674d2] {\n  min-width: 1px;\n  min-height: 1px;\n  position: relative;\n}\n.x-result-picture__image[data-v-66a674d2] {\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n}";
            const isBrowser = /*#__PURE__*/ (function () {
              return (
                 Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==

package/js/directives/infinite-scroll/infinite-scroll.js

@@ -9,7 +9,7 @@ const state = {};
  *
  * This directive uses the IntersectionObserver API to handle the intersection between the
  * children and the scrollable container. The content of the children moves up on scroll and when it
- * reaches the end the IntersectionObserver triggers that both elements are intersecting.
+ * reaches the end, the IntersectionObserver triggers that both elements are intersecting.
  *
  * How it works.
  *
@@ -22,9 +22,9 @@ const state = {};
  *
  * The directive has to be set in the target element. It can receive an argument which will be used
  * to determine the scrollable container. Possible values:
- * * html: will set the <html> as the scrollable container.
- * * body: will set the <body> as the scrollable container.
- * * id: will set the DOM element with the provided id as the scrollable container.
+ * `html`: will set the <html> as the scrollable container.
+ * `body`: will set the <body> as the scrollable container.
+ * ID: will set the DOM element with the provided id as the scrollable container.
  *
  * If no argument is provided the scrollable container fallbacks to the viewport.
  *
@@ -52,7 +52,7 @@ const state = {};
  */
 const infiniteScroll = {
     inserted(element, { arg: id = VIEWPORT_ID, value: { margin = 200 } = {} }, vNode) {
-        const root = getRoot(id);
+        const root = getRoot(element, id);
         state[id] = createIntersectionObserver({
             root,
             margin,
@@ -70,10 +70,11 @@ const infiniteScroll = {
 /**
  * Retrieves the root element for the provided id.
  *
- * @param id - String.
+ * @param element - Target element where directive is set.
+ * @param id - String identifier.
  * @returns HTMLElement or null.
- * */
-function getRoot(id) {
+ */
+function getRoot(element, id) {
     switch (id) {
         case 'html':
             return null;
@@ -82,7 +83,7 @@ function getRoot(id) {
         case VIEWPORT_ID:
             return null;
         default:
-            return document.getElementById(id);
+            return element.closest(`#${id}`);
     }
 }
 /**
@@ -96,7 +97,7 @@ function getRoot(id) {
  */
 function createIntersectionObserver({ root, margin, vNode }) {
     // This hack allows the root element to always contain the observed element.
-    // not overpass the top margin more than 1700000 because it doesn't work in Android chrome
+    // Not overpass the top margin more than 1700000 because it doesn't work in Android chrome
     const rootMargin = `1000000% 0px ${margin}px 0px`;
     return new IntersectionObserver(([entry]) => {
         if (entry.isIntersecting) {

package/js/directives/infinite-scroll/infinite-scroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"infinite-scroll.js","sources":["../../../../src/directives/infinite-scroll/infinite-scroll.ts"],"sourcesContent":["import { DirectiveOptions } from 'vue';\nimport { Vue } from 'vue/types/vue';\nimport { InfiniteScroll, ObserverOptions } from './infinite-scroll.types';\n\nconst VIEWPORT_ID = 'viewport';\n\n/**\n * A record which contains {@link IntersectionObserver} objects indexed by the id of the scrollable\n * container.\n */\nconst state: Record<string, IntersectionObserver> = {};\n\n/**\n * Custom Vue directive for infinite scroll.\n *\n * This directive uses the IntersectionObserver API to handle the intersection between the\n * children and the scrollable container. The content of the children moves up on scroll and when it\n * reaches the end the IntersectionObserver triggers that both elements are intersecting.\n *\n * How it works.\n *\n * As a summary, if the scroll reaches the end, the `vNode.context.onInfiniteScrollEnd` function\n * implemented by the component which imports the directive, is executed. If you provide a margin in\n * the directive options, this function is triggered when the scroll reaches the end minus that\n * amount of pixels. A default margin of 200px is set.\n *\n * Usage.\n *\n * The directive has to be set in the target element. It can receive an argument which will be used\n * to determine the scrollable container. Possible values:\n * * html: will set the <html> as the scrollable container.\n * * body: will set the <body> as the scrollable container.\n * * id: will set the DOM element with the provided id as the scrollable container.\n *\n * If no argument is provided the scrollable container fallbacks to the viewport.\n *\n * @example How to use it.\n *\n * ```html\n *  <ResultsList v-infinite-scroll:html>\n * ```\n *\n * ```html\n *  <ResultsList v-infinite-scroll:body>\n * ```\n *\n * ```html\n *  <BaseScroll id='scroll-test'>\n *    <ResultsList v-infinite-scroll:scroll-test>\n *  </BaseScroll>\n * ```\n *\n * ```html\n *  <ResultsList v-infinite-scroll=\"{ margin: 40 }\">\n * ```\n *\n * @public\n */\nexport const infiniteScroll: DirectiveOptions = {\n  inserted(element, { arg: id = VIEWPORT_ID, value: { margin = 200 } = {} }, vNode) {\n    const root = getRoot(id);\n\n    state[id] = createIntersectionObserver({\n      root,\n      margin,\n      vNode\n    });\n\n    state[id].observe(element);\n  },\n\n  unbind(_element, { arg: id = VIEWPORT_ID }) {\n    if (state[id]) {\n      state[id].disconnect();\n      delete state[id];\n    }\n  }\n};\n\n/**\n * Retrieves the root element for the provided id.\n *\n * @param id - String.\n * @returns HTMLElement or null.\n * */\nfunction getRoot(id: string): HTMLElement | null {\n  switch (id) {\n    case 'html':\n      return null;\n    case 'body':\n      return document.body;\n    case VIEWPORT_ID:\n      return null;\n    default:\n      return document.getElementById(id)!;\n  }\n}\n\n/**\n * Creates an IntersectionObserver.\n *\n * When the observer is fired, it will execute the {@link InfiniteScroll.onInfiniteScrollEnd}\n * function implemented in the provided vNode component instance.\n *\n * @param options - ObserverOptions.\n * @returns IntersectionObserver.\n */\nfunction createIntersectionObserver({\n  root,\n  margin,\n  vNode\n}: ObserverOptions): IntersectionObserver {\n  // This hack allows the root element to always contain the observed element.\n  // not overpass the top margin more than 1700000 because it doesn't work in Android chrome\n  const rootMargin = `1000000% 0px ${margin}px 0px`;\n\n  return new IntersectionObserver(\n    ([entry]) => {\n      if (entry.isIntersecting) {\n        (vNode.componentInstance as Vue & InfiniteScroll)?.onInfiniteScrollEnd();\n      }\n    },\n    {\n      threshold: 0.99,\n      rootMargin,\n      root\n    }\n  );\n}\n"],"names":[],"mappings":"AAIA,MAAM,WAAW,GAAG,UAAU,CAAC;AAE/B;;;;AAIA,MAAM,KAAK,GAAyC,EAAE,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA8Ca,cAAc,GAAqB;IAC9C,QAAQ,CAAC,OAAO,EAAE,EAAE,GAAG,EAAE,EAAE,GAAG,WAAW,EAAE,KAAK,EAAE,EAAE,MAAM,GAAG,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK;QAC9E,MAAM,IAAI,GAAG,OAAO,CAAC,EAAE,CAAC,CAAC;QAEzB,KAAK,CAAC,EAAE,CAAC,GAAG,0BAA0B,CAAC;YACrC,IAAI;YACJ,MAAM;YACN,KAAK;SACN,CAAC,CAAC;QAEH,KAAK,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;KAC5B;IAED,MAAM,CAAC,QAAQ,EAAE,EAAE,GAAG,EAAE,EAAE,GAAG,WAAW,EAAE;QACxC,IAAI,KAAK,CAAC,EAAE,CAAC,EAAE;YACb,KAAK,CAAC,EAAE,CAAC,CAAC,UAAU,EAAE,CAAC;YACvB,OAAO,KAAK,CAAC,EAAE,CAAC,CAAC;SAClB;KACF;EACD;AAEF;;;;;;AAMA,SAAS,OAAO,CAAC,EAAU;IACzB,QAAQ,EAAE;QACR,KAAK,MAAM;YACT,OAAO,IAAI,CAAC;QACd,KAAK,MAAM;YACT,OAAO,QAAQ,CAAC,IAAI,CAAC;QACvB,KAAK,WAAW;YACd,OAAO,IAAI,CAAC;QACd;YACE,OAAO,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAE,CAAC;KACvC;AACH,CAAC;AAED;;;;;;;;;AASA,SAAS,0BAA0B,CAAC,EAClC,IAAI,EACJ,MAAM,EACN,KAAK,EACW;;;IAGhB,MAAM,UAAU,GAAG,gBAAgB,MAAM,QAAQ,CAAC;IAElD,OAAO,IAAI,oBAAoB,CAC7B,CAAC,CAAC,KAAK,CAAC;QACN,IAAI,KAAK,CAAC,cAAc,EAAE;YACvB,KAAK,CAAC,iBAA0C,EAAE,mBAAmB,EAAE,CAAC;SAC1E;KACF,EACD;QACE,SAAS,EAAE,IAAI;QACf,UAAU;QACV,IAAI;KACL,CACF,CAAC;AACJ;;;;"}
+{"version":3,"file":"infinite-scroll.js","sources":["../../../../src/directives/infinite-scroll/infinite-scroll.ts"],"sourcesContent":["import { DirectiveOptions } from 'vue';\nimport { Vue } from 'vue/types/vue';\nimport { InfiniteScroll, ObserverOptions } from './infinite-scroll.types';\n\nconst VIEWPORT_ID = 'viewport';\n\n/**\n * A record which contains {@link IntersectionObserver} objects indexed by the id of the scrollable\n * container.\n */\nconst state: Record<string, IntersectionObserver> = {};\n\n/**\n * Custom Vue directive for infinite scroll.\n *\n * This directive uses the IntersectionObserver API to handle the intersection between the\n * children and the scrollable container. The content of the children moves up on scroll and when it\n * reaches the end, the IntersectionObserver triggers that both elements are intersecting.\n *\n * How it works.\n *\n * As a summary, if the scroll reaches the end, the `vNode.context.onInfiniteScrollEnd` function\n * implemented by the component which imports the directive, is executed. If you provide a margin in\n * the directive options, this function is triggered when the scroll reaches the end minus that\n * amount of pixels. A default margin of 200px is set.\n *\n * Usage.\n *\n * The directive has to be set in the target element. It can receive an argument which will be used\n * to determine the scrollable container. Possible values:\n * `html`: will set the <html> as the scrollable container.\n * `body`: will set the <body> as the scrollable container.\n * ID: will set the DOM element with the provided id as the scrollable container.\n *\n * If no argument is provided the scrollable container fallbacks to the viewport.\n *\n * @example How to use it.\n *\n * ```html\n *  <ResultsList v-infinite-scroll:html>\n * ```\n *\n * ```html\n *  <ResultsList v-infinite-scroll:body>\n * ```\n *\n * ```html\n *  <BaseScroll id='scroll-test'>\n *    <ResultsList v-infinite-scroll:scroll-test>\n *  </BaseScroll>\n * ```\n *\n * ```html\n *  <ResultsList v-infinite-scroll=\"{ margin: 40 }\">\n * ```\n *\n * @public\n */\nexport const infiniteScroll: DirectiveOptions = {\n  inserted(element, { arg: id = VIEWPORT_ID, value: { margin = 200 } = {} }, vNode) {\n    const root = getRoot(element, id);\n\n    state[id] = createIntersectionObserver({\n      root,\n      margin,\n      vNode\n    });\n\n    state[id].observe(element);\n  },\n\n  unbind(_element, { arg: id = VIEWPORT_ID }) {\n    if (state[id]) {\n      state[id].disconnect();\n      delete state[id];\n    }\n  }\n};\n\n/**\n * Retrieves the root element for the provided id.\n *\n * @param element - Target element where directive is set.\n * @param id - String identifier.\n * @returns HTMLElement or null.\n */\nfunction getRoot(element: HTMLElement, id: string): HTMLElement | null {\n  switch (id) {\n    case 'html':\n      return null;\n    case 'body':\n      return document.body;\n    case VIEWPORT_ID:\n      return null;\n    default:\n      return element.closest(`#${id}`)!;\n  }\n}\n\n/**\n * Creates an IntersectionObserver.\n *\n * When the observer is fired, it will execute the {@link InfiniteScroll.onInfiniteScrollEnd}\n * function implemented in the provided vNode component instance.\n *\n * @param options - ObserverOptions.\n * @returns IntersectionObserver.\n */\nfunction createIntersectionObserver({\n  root,\n  margin,\n  vNode\n}: ObserverOptions): IntersectionObserver {\n  // This hack allows the root element to always contain the observed element.\n  // Not overpass the top margin more than 1700000 because it doesn't work in Android chrome\n  const rootMargin = `1000000% 0px ${margin}px 0px`;\n\n  return new IntersectionObserver(\n    ([entry]) => {\n      if (entry.isIntersecting) {\n        (vNode.componentInstance as Vue & InfiniteScroll)?.onInfiniteScrollEnd();\n      }\n    },\n    {\n      threshold: 0.99,\n      rootMargin,\n      root\n    }\n  );\n}\n"],"names":[],"mappings":"AAIA,MAAM,WAAW,GAAG,UAAU,CAAC;AAE/B;;;;AAIA,MAAM,KAAK,GAAyC,EAAE,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA8Ca,cAAc,GAAqB;IAC9C,QAAQ,CAAC,OAAO,EAAE,EAAE,GAAG,EAAE,EAAE,GAAG,WAAW,EAAE,KAAK,EAAE,EAAE,MAAM,GAAG,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK;QAC9E,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;QAElC,KAAK,CAAC,EAAE,CAAC,GAAG,0BAA0B,CAAC;YACrC,IAAI;YACJ,MAAM;YACN,KAAK;SACN,CAAC,CAAC;QAEH,KAAK,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;KAC5B;IAED,MAAM,CAAC,QAAQ,EAAE,EAAE,GAAG,EAAE,EAAE,GAAG,WAAW,EAAE;QACxC,IAAI,KAAK,CAAC,EAAE,CAAC,EAAE;YACb,KAAK,CAAC,EAAE,CAAC,CAAC,UAAU,EAAE,CAAC;YACvB,OAAO,KAAK,CAAC,EAAE,CAAC,CAAC;SAClB;KACF;EACD;AAEF;;;;;;;AAOA,SAAS,OAAO,CAAC,OAAoB,EAAE,EAAU;IAC/C,QAAQ,EAAE;QACR,KAAK,MAAM;YACT,OAAO,IAAI,CAAC;QACd,KAAK,MAAM;YACT,OAAO,QAAQ,CAAC,IAAI,CAAC;QACvB,KAAK,WAAW;YACd,OAAO,IAAI,CAAC;QACd;YACE,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAE,CAAC;KACrC;AACH,CAAC;AAED;;;;;;;;;AASA,SAAS,0BAA0B,CAAC,EAClC,IAAI,EACJ,MAAM,EACN,KAAK,EACW;;;IAGhB,MAAM,UAAU,GAAG,gBAAgB,MAAM,QAAQ,CAAC;IAElD,OAAO,IAAI,oBAAoB,CAC7B,CAAC,CAAC,KAAK,CAAC;QACN,IAAI,KAAK,CAAC,cAAc,EAAE;YACvB,KAAK,CAAC,iBAA0C,EAAE,mBAAmB,EAAE,CAAC;SAC1E;KACF,EACD;QACE,SAAS,EAAE,IAAI;QACf,UAAU;QACV,IAAI;KACL,CACF,CAAC;AACJ;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "3.0.0-alpha.230",
+  "version": "3.0.0-alpha.232",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -85,7 +85,7 @@
     "@cypress/vue": "~2.2.4",
     "@cypress/webpack-dev-server": "~1.8.4",
     "@empathyco/x-adapter-platform": "^1.0.0-alpha.44",
-    "@empathyco/x-tailwindcss": "^0.2.0-alpha.29",
+    "@empathyco/x-tailwindcss": "^0.2.0-alpha.30",
     "@microsoft/api-documenter": "~7.15.3",
     "@microsoft/api-extractor": "~7.19.4",
     "@rollup/plugin-commonjs": "~21.0.1",
@@ -135,5 +135,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "add1c39bff84e5aadd005bfbeb34f3572485e504"
+  "gitHead": "1f8d1974224849377a90117703484ee644b6e2de"
 }

package/report/x-components.api.json

@@ -5516,12 +5516,48 @@
           "members": [
             {
               "kind": "Property",
-              "canonicalReference": "@empathyco/x-components!BaseResultImage#animation:member",
+              "canonicalReference": "@empathyco/x-components!BaseResultImage#hoverAnimation:member",
+              "docComment": "/**\n * Animation to use when switching between the loaded image and the hover image.\n *\n * @public\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "hoverAnimation: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "string | typeof "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "Vue",
+                  "canonicalReference": "vue!Vue:var"
+                },
+                {
+                  "kind": "Content",
+                  "text": " | undefined"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "hoverAnimation",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 4
+              },
+              "isStatic": false
+            },
+            {
+              "kind": "Property",
+              "canonicalReference": "@empathyco/x-components!BaseResultImage#loadAnimation:member",
               "docComment": "/**\n * Animation to use when switching between the placeholder, the loaded image, or the failed image fallback.\n *\n * @public\n */\n",
               "excerptTokens": [
                 {
                   "kind": "Content",
-                  "text": "animation: "
+                  "text": "loadAnimation: "
                 },
                 {
                   "kind": "Content",
@@ -5539,7 +5575,7 @@
               ],
               "isOptional": false,
               "releaseTag": "Public",
-              "name": "animation",
+              "name": "loadAnimation",
               "propertyTypeTokenRange": {
                 "startIndex": 1,
                 "endIndex": 3
@@ -5573,6 +5609,33 @@
                 "endIndex": 2
               },
               "isStatic": false
+            },
+            {
+              "kind": "Property",
+              "canonicalReference": "@empathyco/x-components!BaseResultImage#showNextImageOnHover:member",
+              "docComment": "/**\n * Indicates if the next valid image should be displayed on hover.\n *\n * @public\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "showNextImageOnHover: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "boolean"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "showNextImageOnHover",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "isStatic": false
             }
           ],
           "extendsTokenRange": {
@@ -22919,7 +22982,7 @@
         {
           "kind": "Variable",
           "canonicalReference": "@empathyco/x-components!infiniteScroll:var",
-          "docComment": "/**\n * Custom Vue directive for infinite scroll.\n *\n * This directive uses the IntersectionObserver API to handle the intersection between the children and the scrollable container. The content of the children moves up on scroll and when it reaches the end the IntersectionObserver triggers that both elements are intersecting.\n *\n * How it works.\n *\n * As a summary, if the scroll reaches the end, the `vNode.context.onInfiniteScrollEnd` function implemented by the component which imports the directive, is executed. If you provide a margin in the directive options, this function is triggered when the scroll reaches the end minus that amount of pixels. A default margin of 200px is set.\n *\n * Usage.\n *\n * The directive has to be set in the target element. It can receive an argument which will be used to determine the scrollable container. Possible values: * html: will set the <html> as the scrollable container. * body: will set the <body> as the scrollable container. * id: will set the DOM element with the provided id as the scrollable container.\n *\n * If no argument is provided the scrollable container fallbacks to the viewport.\n *\n * @example\n *\n * How to use it.\n * ```html\n *  <ResultsList v-infinite-scroll:html>\n * ```\n *\n * ```html\n *  <ResultsList v-infinite-scroll:body>\n * ```\n *\n * ```html\n *  <BaseScroll id='scroll-test'>\n *    <ResultsList v-infinite-scroll:scroll-test>\n *  </BaseScroll>\n * ```\n *\n * ```html\n *  <ResultsList v-infinite-scroll=\"{ margin: 40 }\">\n * ```\n *\n * @public\n */\n",
+          "docComment": "/**\n * Custom Vue directive for infinite scroll.\n *\n * This directive uses the IntersectionObserver API to handle the intersection between the children and the scrollable container. The content of the children moves up on scroll and when it reaches the end, the IntersectionObserver triggers that both elements are intersecting.\n *\n * How it works.\n *\n * As a summary, if the scroll reaches the end, the `vNode.context.onInfiniteScrollEnd` function implemented by the component which imports the directive, is executed. If you provide a margin in the directive options, this function is triggered when the scroll reaches the end minus that amount of pixels. A default margin of 200px is set.\n *\n * Usage.\n *\n * The directive has to be set in the target element. It can receive an argument which will be used to determine the scrollable container. Possible values: `html`: will set the <html> as the scrollable container. `body`: will set the <body> as the scrollable container. ID: will set the DOM element with the provided id as the scrollable container.\n *\n * If no argument is provided the scrollable container fallbacks to the viewport.\n *\n * @example\n *\n * How to use it.\n * ```html\n *  <ResultsList v-infinite-scroll:html>\n * ```\n *\n * ```html\n *  <ResultsList v-infinite-scroll:body>\n * ```\n *\n * ```html\n *  <BaseScroll id='scroll-test'>\n *    <ResultsList v-infinite-scroll:scroll-test>\n *  </BaseScroll>\n * ```\n *\n * ```html\n *  <ResultsList v-infinite-scroll=\"{ margin: 40 }\">\n * ```\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",

package/report/x-components.api.md

@@ -530,20 +530,30 @@ export class BaseResultCurrentPrice extends Vue_2 {
 
 // @public
 export class BaseResultImage extends Vue_2 {
-    animation: string | typeof Vue_2;
     // @internal
-    protected failedImages: string[];
+    protected get animation(): string | typeof Vue_2;
     // @internal
     protected flagImageAsFailed(): void;
     // @internal
     protected flagImageLoaded(): void;
-    // @internal
-    protected hasImageLoaded: boolean;
+    hoverAnimation: string | typeof Vue_2 | undefined;
     // @internal
     protected get imageSrc(): string;
     // @internal
+    protected isHovering: boolean;
+    loadAnimation: string | typeof Vue_2;
+    // @internal
+    protected loadedImages: string[];
+    // @internal
     protected loaderStyles: Partial<CSSStyleDeclaration>;
+    // @internal
+    protected pendingImages: string[];
     protected result: Result;
+    // @internal
+    protected get shouldLoadNextImage(): boolean;
+    showNextImageOnHover: boolean;
+    // @internal
+    protected userHasHoveredImage: boolean;
 }
 
 // @public

package/types/components/result/base-result-image.vue.d.ts

@@ -18,25 +18,60 @@ export default class BaseResultImage extends Vue {
      *
      * @public
      */
-    animation: string | typeof Vue;
+    loadAnimation: string | typeof Vue;
     /**
-     * An array of images that failed to load.
+     * Animation to use when switching between the loaded image and the hover image.
+     *
+     * @public
+     */
+    hoverAnimation: string | typeof Vue | undefined;
+    /**
+     * Indicates if the next valid image should be displayed on hover.
+     *
+     * @public
+     */
+    showNextImageOnHover: boolean;
+    /**
+     * Copy of the images of the result.
+     *
+     * It is used as a queue of images to load, once an image loads/fails to load, it is removed
+     * from this array.
      *
      * @internal
      */
-    protected failedImages: string[];
+    protected pendingImages: string[];
     /**
-     * Indicates if the result image is loaded.
+     * Contains the images that have been loaded successfully.
      *
      * @internal
      */
-    protected hasImageLoaded: boolean;
+    protected loadedImages: string[];
+    /**
+     * Indicates if the user is hovering the image.
+     *
+     * @internal
+     */
+    protected isHovering: boolean;
+    /**
+     * Indicates if the user has hovered the image.
+     *
+     * @internal
+     */
+    protected userHasHoveredImage: boolean;
     /**.
      * Styles to use inline in the image loader, to prevent override from CSS
      *
      * @internal
      */
     protected loaderStyles: Partial<CSSStyleDeclaration>;
+    /**
+     * Animation to be used.
+     *
+     * @returns The animation to be used, taking into account if the user has hovered the image.
+     *
+     * @internal
+     */
+    protected get animation(): string | typeof Vue;
     /**
      * Gets the src from the result image.
      *
@@ -45,6 +80,14 @@ export default class BaseResultImage extends Vue {
      * @internal
      */
     protected get imageSrc(): string;
+    /**
+     * Indicates if the loader should try to load the next image.
+     *
+     * @returns True if it should try to load the next image.
+     *
+     * @internal
+     */
+    protected get shouldLoadNextImage(): boolean;
     /**
      * Sets an image as failed.
      *
@@ -52,7 +95,7 @@ export default class BaseResultImage extends Vue {
      */
     protected flagImageAsFailed(): void;
     /**
-     * Marks an image as loaded.
+     * Sets an image as loaded.
      *
      * @internal
      */

package/types/components/result/base-result-image.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-result-image.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../src/components/result/base-result-image.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAgCA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,GAAG,MAAM,KAAK,CAAC;AAItB;;;;GAIG;AAMH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,GAAG;IAC9C;;;;OAIG;IAEH,SAAS,CAAC,MAAM,EAAG,MAAM,CAAC;IAC1B;;;;;OAKG;IAEI,SAAS,EAAG,MAAM,GAAG,OAAO,GAAG,CAAC;IACvC;;;;OAIG;IACH,SAAS,CAAC,YAAY,EAAE,MAAM,EAAE,CAAM;IAEtC;;;;OAIG;IACH,SAAS,CAAC,cAAc,UAAS;IAEjC;;;;OAIG;IACH,SAAS,CAAC,YAAY,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAQlD;IAEF;;;;;;OAMG;IACH,SAAS,KAAK,QAAQ,IAAI,MAAM,CAG/B;IAED;;;;OAIG;IACH,SAAS,CAAC,iBAAiB,IAAI,IAAI;IAMnC;;;;OAIG;IACH,SAAS,CAAC,eAAe,IAAI,IAAI;CAGlC"}
+{"version":3,"file":"base-result-image.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../src/components/result/base-result-image.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAyCA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,GAAG,MAAM,KAAK,CAAC;AAItB;;;;GAIG;AAMH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,GAAG;IAC9C;;;;OAIG;IAEH,SAAS,CAAC,MAAM,EAAG,MAAM,CAAC;IAE1B;;;;;OAKG;IAEI,aAAa,EAAG,MAAM,GAAG,OAAO,GAAG,CAAC;IAE3C;;;;OAIG;IAEI,cAAc,EAAG,MAAM,GAAG,OAAO,GAAG,GAAG,SAAS,CAAC;IAExD;;;;OAIG;IAEI,oBAAoB,EAAG,OAAO,CAAC;IAEtC;;;;;;;OAOG;IACH,SAAS,CAAC,aAAa,EAAE,MAAM,EAAE,CAAmC;IAEpE;;;;OAIG;IACH,SAAS,CAAC,YAAY,EAAE,MAAM,EAAE,CAAM;IAEtC;;;;OAIG;IACH,SAAS,CAAC,UAAU,UAAS;IAE7B;;;;OAIG;IACH,SAAS,CAAC,mBAAmB,UAAS;IAEtC;;;;OAIG;IACH,SAAS,CAAC,YAAY,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAQlD;IAEF;;;;;;OAMG;IACH,SAAS,KAAK,SAAS,IAAI,MAAM,GAAG,OAAO,GAAG,CAI7C;IAED;;;;;;OAMG;IACH,SAAS,KAAK,QAAQ,IAAI,MAAM,CAI/B;IAED;;;;;;OAMG;IACH,SAAS,KAAK,mBAAmB,IAAI,OAAO,CAG3C;IAED;;;;OAIG;IACH,SAAS,CAAC,iBAAiB,IAAI,IAAI;IAInC;;;;OAIG;IACH,SAAS,CAAC,eAAe,IAAI,IAAI;CAMlC"}

package/types/directives/infinite-scroll/infinite-scroll.d.ts

@@ -4,7 +4,7 @@ import { DirectiveOptions } from 'vue';
  *
  * This directive uses the IntersectionObserver API to handle the intersection between the
  * children and the scrollable container. The content of the children moves up on scroll and when it
- * reaches the end the IntersectionObserver triggers that both elements are intersecting.
+ * reaches the end, the IntersectionObserver triggers that both elements are intersecting.
  *
  * How it works.
  *
@@ -17,9 +17,9 @@ import { DirectiveOptions } from 'vue';
  *
  * The directive has to be set in the target element. It can receive an argument which will be used
  * to determine the scrollable container. Possible values:
- * * html: will set the <html> as the scrollable container.
- * * body: will set the <body> as the scrollable container.
- * * id: will set the DOM element with the provided id as the scrollable container.
+ * `html`: will set the <html> as the scrollable container.
+ * `body`: will set the <body> as the scrollable container.
+ * ID: will set the DOM element with the provided id as the scrollable container.
  *
  * If no argument is provided the scrollable container fallbacks to the viewport.
  *