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

package/js/x-modules/search/components/banner.vue.js

@@ -5,18 +5,19 @@ import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
 const _hoisted_1 = ["src", "alt"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return !_ctx.imageFailed ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.banner.url ? "a" : "figure"), mergeProps({ key: 0 }, toHandlers(_ctx.banner.url ? _ctx.anchorEvents() : {}), {
+  return !_ctx.imageFailed ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.banner.url ? "a" : "figure"), mergeProps({
+    key: 0,
     href: _ctx.banner.url,
     class: "x-banner",
     "data-test": "banner"
-  }), {
+  }, toHandlers(_ctx.banner.url ? _ctx.anchorEvents() : {})), {
     default: withCtx(() => [
       createElementVNode("img", {
-        onError: _cache[0] || (_cache[0] = ($event) => _ctx.imageFailed = true),
         src: _ctx.banner.image,
         alt: _ctx.banner.title ? _ctx.banner.title : "Banner",
         class: "x-banner__image",
-        "data-test": "banner-image"
+        "data-test": "banner-image",
+        onError: _cache[0] || (_cache[0] = ($event) => _ctx.imageFailed = true)
       }, null, 40, _hoisted_1),
       _ctx.banner.title ? (openBlock(), createElementBlock(
         "h2",

package/js/x-modules/search/components/banner.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner.vue.js","sources":["../../../../../src/x-modules/search/components/banner.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"banner.url ? 'a' : 'figure'\"\n    v-if=\"!imageFailed\"\n    v-on=\"banner.url ? anchorEvents() : {}\"\n    :href=\"banner.url\"\n    class=\"x-banner\"\n    data-test=\"banner\"\n  >\n    <img\n      @error=\"imageFailed = true\"\n      :src=\"banner.image\"\n      :alt=\"banner.title ? banner.title : 'Banner'\"\n      class=\"x-banner__image\"\n      data-test=\"banner-image\"\n    />\n    <h2 v-if=\"banner.title\" class=\"x-banner__title\" :class=\"titleClass\" data-test=\"banner-title\">\n      {{ banner.title }}\n    </h2>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { Banner as BannerModel } from '@empathyco/x-types';\n  import { defineComponent, PropType, ref } from 'vue';\n  import { useXBus } from '../../../composables/use-x-bus';\n  import { searchXModule } from '../x-module';\n\n  /**.\n   * A banner result is just an item that has been inserted into the search results to advertise\n   * something. Usually it is the first item in the grid or it can be placed in the middle of them\n   * and fill the whole row where appears.\n   * The banner may be clickable or non-clickable depending on whether it has an associated URL\n   * or not. It contains an image and, optionally, a title. In case the image does not\n   * load due to an error the banner will not be rendered.\n   *\n   * Additionally, this component exposes the following props to modify the classes of the\n   * elements: `titleClass`.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'Banner',\n    xModule: searchXModule.name,\n    props: {\n      /**\n       * The banner data.\n       *\n       * @public\n       */\n      banner: {\n        type: Object as PropType<BannerModel>,\n        required: true\n      },\n      titleClass: String\n    },\n    setup(props) {\n      const xBus = useXBus();\n\n      /**\n       * Flag to handle banner image errors.\n       *\n       * @public\n       */\n      const imageFailed = ref(false);\n\n      /**\n       * Emits the banner click event.\n       *\n       * @internal\n       */\n      const emitClickEvent = (): void => {\n        xBus.emit('UserClickedABanner', props.banner);\n      };\n\n      /**\n       * Returns the events supported by the anchor.\n       *\n       * @returns Events supported by the anchor.\n       *\n       * @internal\n       */\n      const anchorEvents = (): Partial<{\n        [key in keyof GlobalEventHandlersEventMap]: () => void;\n      }> => ({\n        click: () => emitClickEvent(),\n        auxclick: () => emitClickEvent(),\n        contextmenu: () => emitClickEvent()\n      });\n\n      return {\n        imageFailed,\n        anchorEvents\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-banner {\n    display: flex;\n    flex-flow: column nowrap;\n    text-decoration: none;\n  }\n\n  .x-banner__image {\n    width: 100%;\n    object-fit: contain;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nIn this example banned data is passed as a prop.\n\n_Here you can see how the `Banner` component is rendered._\n\n```vue\n<template>\n  <Banner :banner=\"banner\" />\n</template>\n\n<script>\n  import { Banner } from '@empathyco/x-components/search';\n  export default {\n    name: 'BannerDemo',\n    components: {\n      Banner\n    },\n    data() {\n      return {\n        banner: {\n          modelName: 'Banner',\n          id: 'banner-example',\n          url: 'https://my-website.com/summer-shirts',\n          image: 'https://my-website.com/images/summer-shirts.jpg',\n          title: 'Trendy summer shirts',\n          position: 1\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Customizing the items with classes\n\nThe `titleClass` prop can be used to add classes to the banner title.\n\n```vue\n<template>\n  <Banner :banner=\"banner\" titleClass=\"x-bg-neutral-50\" />\n</template>\n\n<script>\n  import { Banner } from '@empathyco/x-components/search';\n  export default {\n    name: 'BannerDemo',\n    components: {\n      Banner\n    },\n    data() {\n      return {\n        banner: {\n          modelName: 'Banner',\n          id: 'banner-example',\n          url: 'https://my-website.com/summer-shirts',\n          image: 'https://my-website.com/images/summer-shirts.jpg',\n          title: 'Trendy summer shirts',\n          position: 1\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["banner","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_withCtx","_createElementVNode","_openBlock","_createElementBlock","_normalizeClass","_createCommentVNode"],"mappings":";;;;;;AACE,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EADF,MAESA,EAAAA,MAAAA,EAAAA,KAAAA,EAAAA,QAAAA,EAAAA;AAGJ,EAAA,OAAA,CAAA,IAAA,CAAMA,0BACS,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,MAAA,CAAA,GAAA,GAAA,GAAA,GAAA,QAAA,CAAA,EAAAC,UAAA,CAAA,EAAA,GAAA,EAAA,CAAA,EAAA,EAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,CAAA,GAAA,GAAA,IAAA,CAAA,YAAA,EAAA,GAAA,EAAA,CAAA,EAAA;AAAA,IAChB,WAAS,MAAC,CAAA,GAAA;AAAA,IAAA,KAAA,EAAA,UAAA;AAPd,IAAA,WAAA,EAAA,QAAA;AAAA,GASI,CAAA,EAAA;AAAA,IAAA,OAAA,EACGC,OAAK,CAAA,MAAA;AAAA,MAAAC,kBAAA,CACO,KAAK,EAAA;AAAA,QACjB,OAAKN,EAAAA,MAAAA,CAAM,CAAC,CAAA,KAAK,OAAGA,CAAY,CAAA,GAAA,CAAA,MAAA,KAAA,IAAA,CAAA,WAAA,GAAA,IAAA,CAAA;AAAA,QACjC,KAAK,IAAC,CAAA,MAAA,CAAA,KAAA;AAAA,QACN,iBAAU,KAAc,GAAA,IAAA,CAAA,MAAA,CAAA,KAAA,GAAA,QAAA;AAAA,QAAA,KAAA,EAAA,iBAAA;QAEhBA,WAAO,EAAA,cAAA;AAAA,OAEZ,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,CAAA;AAAA,MAlBT,IAAA,CAAA,MAAA,CAAA,KAAA,IAAAO,SAAA,EAAA,EAAAC,kBAAA;AAAA,QAgBkC,IAAA;AAAA,QAAA;AAAA,UAAsC,GAAA,EAAA,CAAA;AAAA,UAAA,KAAA,EAAAC,cAAA,CAC/DT,CAAY,iBAAA,EAAA,IAAA,CAAA,UAAA,CAAA,CAAA;AAAA,UAjBrB,WAAA,EAAA,cAAA;AAAA,SAAA;;;;AAAA,OAAA,IAAAU,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,EAAA,EAAA,EAAA,CAAA,MAAA,CAAA,CAAA,IAAAA,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"banner.vue.js","sources":["../../../../../src/x-modules/search/components/banner.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"banner.url ? 'a' : 'figure'\"\n    v-if=\"!imageFailed\"\n    :href=\"banner.url\"\n    class=\"x-banner\"\n    data-test=\"banner\"\n    v-on=\"banner.url ? anchorEvents() : {}\"\n  >\n    <img\n      :src=\"banner.image\"\n      :alt=\"banner.title ? banner.title : 'Banner'\"\n      class=\"x-banner__image\"\n      data-test=\"banner-image\"\n      @error=\"imageFailed = true\"\n    />\n    <h2 v-if=\"banner.title\" class=\"x-banner__title\" :class=\"titleClass\" data-test=\"banner-title\">\n      {{ banner.title }}\n    </h2>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Banner as BannerModel } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { defineComponent, ref } from 'vue'\nimport { useXBus } from '../../../composables/use-x-bus'\nimport { searchXModule } from '../x-module'\n\n/**.\n * A banner result is just an item that has been inserted into the search results to advertise\n * something. Usually it is the first item in the grid or it can be placed in the middle of them\n * and fill the whole row where appears.\n * The banner may be clickable or non-clickable depending on whether it has an associated URL\n * or not. It contains an image and, optionally, a title. In case the image does not\n * load due to an error the banner will not be rendered.\n *\n * Additionally, this component exposes the following props to modify the classes of the\n * elements: `titleClass`.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Banner',\n  xModule: searchXModule.name,\n  props: {\n    /**\n     * The banner data.\n     *\n     * @public\n     */\n    banner: {\n      type: Object as PropType<BannerModel>,\n      required: true,\n    },\n    titleClass: String,\n  },\n  setup(props) {\n    const xBus = useXBus()\n\n    /**\n     * Flag to handle banner image errors.\n     *\n     * @public\n     */\n    const imageFailed = ref(false)\n\n    /**\n     * Emits the banner click event.\n     *\n     * @internal\n     */\n    const emitClickEvent = (): void => {\n      xBus.emit('UserClickedABanner', props.banner)\n    }\n\n    /**\n     * Returns the events supported by the anchor.\n     *\n     * @returns Events supported by the anchor.\n     *\n     * @internal\n     */\n    const anchorEvents = (): Partial<{\n      [key in keyof GlobalEventHandlersEventMap]: () => void\n    }> => ({\n      click: () => emitClickEvent(),\n      auxclick: () => emitClickEvent(),\n      contextmenu: () => emitClickEvent(),\n    })\n\n    return {\n      imageFailed,\n      anchorEvents,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-banner {\n  display: flex;\n  flex-flow: column nowrap;\n  text-decoration: none;\n}\n\n.x-banner__image {\n  width: 100%;\n  object-fit: contain;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nIn this example banned data is passed as a prop.\n\n_Here you can see how the `Banner` component is rendered._\n\n```vue\n<template>\n  <Banner :banner=\"banner\" />\n</template>\n\n<script>\nimport { Banner } from '@empathyco/x-components/search'\nexport default {\n  name: 'BannerDemo',\n  components: {\n    Banner,\n  },\n  data() {\n    return {\n      banner: {\n        modelName: 'Banner',\n        id: 'banner-example',\n        url: 'https://my-website.com/summer-shirts',\n        image: 'https://my-website.com/images/summer-shirts.jpg',\n        title: 'Trendy summer shirts',\n        position: 1,\n      },\n    }\n  },\n}\n</script>\n```\n\n### Customizing the items with classes\n\nThe `titleClass` prop can be used to add classes to the banner title.\n\n```vue\n<template>\n  <Banner :banner=\"banner\" titleClass=\"x-bg-neutral-50\" />\n</template>\n\n<script>\nimport { Banner } from '@empathyco/x-components/search'\nexport default {\n  name: 'BannerDemo',\n  components: {\n    Banner,\n  },\n  data() {\n    return {\n      banner: {\n        modelName: 'Banner',\n        id: 'banner-example',\n        url: 'https://my-website.com/summer-shirts',\n        image: 'https://my-website.com/images/summer-shirts.jpg',\n        title: 'Trendy summer shirts',\n        position: 1,\n      },\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["banner","_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_createElementVNode","_createElementBlock","_normalizeClass","_createCommentVNode"],"mappings":";;;;;;AACE,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EADF,MAESA,EAAAA,MAAAA,EAAAA,KAAAA,EAAAA,QAAAA,EAAAA;AAFT,EAAA,OAAA,CAAA,IAAA,CAAA,WAAA,IAAAC,SAAA,EAIqB,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,MAAA,CAAA,GAAA,GAAA,GAAA,GAAA,QAAA,CAAA,EAAAC,UAAA,CAAA;AAAA,IACjB,GAAK,EAAA,CAAA;AAAA,IACL,WAAS,MAAC,CAAA,GAAA;AAAA,IACV,KAAA,EAAA,UAAA;AAAA,IAPJ,WAAA,EAAA,QAAA;AAAA,GAAA,EAAAC,UAAA,CASI,IAME,CAAA,MAAA,CAAA,GAAA,GAAA,IAAA,CAAA,YAAA,EAAA,GAAA,EAAA,CAAA,CAAA,EAAA;AAAA,IAAA,OAAA,EALML,OAAO,CAAA,MAAA;AAAA,MAAAM,kBAAA,CACA,KAAQN,EAAAA;AAAAA,QACrB,KAAK,IAAC,CAAA,MAAA,CAAA,KAAA;AAAA,QACN,iBAAU,KAAc,GAAA,IAAA,CAAA,MAAA,CAAA,KAAA,GAAA,QAAA;AAAA,QACvB,KAAK,EAAA,iBAAA;AAAA,QAAA,WAAA,EAAA,cAAA;QAEEA,OAAY,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,MAAA,KAAA,IAAA,CAAA,WAAA,GAAA,IAAA,CAAA;AAAA,OAEjB,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,CAAA;AAAA,MAlBT,IAAA,CAAA,MAAA,CAAA,KAAA,IAAAC,SAAA,EAAA,EAAAM,kBAAA;AAAA,QAgBkC,IAAA;AAAA,QAAA;AAAA,UAAsC,GAAA,EAAA,CAAA;AAAA,UAAA,KAAA,EAAAC,cAAA,CAC/DR,CAAY,iBAAA,EAAA,IAAA,CAAA,UAAA,CAAA,CAAA;AAAA,UAjBrB,WAAA,EAAA,cAAA;AAAA,SAAA;;;;AAAA,OAAA,IAAAS,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,EAAA,EAAA,EAAA,CAAA,MAAA,CAAA,CAAA,IAAAA,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

package/js/x-modules/search/components/banner.vue2.js

@@ -26,9 +26,9 @@ var _sfc_main = defineComponent({
          */
         banner: {
             type: Object,
-            required: true
+            required: true,
         },
-        titleClass: String
+        titleClass: String,
     },
     setup(props) {
         const xBus = useXBus();
@@ -56,13 +56,13 @@ var _sfc_main = defineComponent({
         const anchorEvents = () => ({
             click: () => emitClickEvent(),
             auxclick: () => emitClickEvent(),
-            contextmenu: () => emitClickEvent()
+            contextmenu: () => emitClickEvent(),
         });
         return {
             imageFailed,
-            anchorEvents
+            anchorEvents,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/x-modules/search/components/banner.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner.vue2.js","sources":["../../../../../src/x-modules/search/components/banner.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"banner.url ? 'a' : 'figure'\"\n    v-if=\"!imageFailed\"\n    v-on=\"banner.url ? anchorEvents() : {}\"\n    :href=\"banner.url\"\n    class=\"x-banner\"\n    data-test=\"banner\"\n  >\n    <img\n      @error=\"imageFailed = true\"\n      :src=\"banner.image\"\n      :alt=\"banner.title ? banner.title : 'Banner'\"\n      class=\"x-banner__image\"\n      data-test=\"banner-image\"\n    />\n    <h2 v-if=\"banner.title\" class=\"x-banner__title\" :class=\"titleClass\" data-test=\"banner-title\">\n      {{ banner.title }}\n    </h2>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { Banner as BannerModel } from '@empathyco/x-types';\n  import { defineComponent, PropType, ref } from 'vue';\n  import { useXBus } from '../../../composables/use-x-bus';\n  import { searchXModule } from '../x-module';\n\n  /**.\n   * A banner result is just an item that has been inserted into the search results to advertise\n   * something. Usually it is the first item in the grid or it can be placed in the middle of them\n   * and fill the whole row where appears.\n   * The banner may be clickable or non-clickable depending on whether it has an associated URL\n   * or not. It contains an image and, optionally, a title. In case the image does not\n   * load due to an error the banner will not be rendered.\n   *\n   * Additionally, this component exposes the following props to modify the classes of the\n   * elements: `titleClass`.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'Banner',\n    xModule: searchXModule.name,\n    props: {\n      /**\n       * The banner data.\n       *\n       * @public\n       */\n      banner: {\n        type: Object as PropType<BannerModel>,\n        required: true\n      },\n      titleClass: String\n    },\n    setup(props) {\n      const xBus = useXBus();\n\n      /**\n       * Flag to handle banner image errors.\n       *\n       * @public\n       */\n      const imageFailed = ref(false);\n\n      /**\n       * Emits the banner click event.\n       *\n       * @internal\n       */\n      const emitClickEvent = (): void => {\n        xBus.emit('UserClickedABanner', props.banner);\n      };\n\n      /**\n       * Returns the events supported by the anchor.\n       *\n       * @returns Events supported by the anchor.\n       *\n       * @internal\n       */\n      const anchorEvents = (): Partial<{\n        [key in keyof GlobalEventHandlersEventMap]: () => void;\n      }> => ({\n        click: () => emitClickEvent(),\n        auxclick: () => emitClickEvent(),\n        contextmenu: () => emitClickEvent()\n      });\n\n      return {\n        imageFailed,\n        anchorEvents\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-banner {\n    display: flex;\n    flex-flow: column nowrap;\n    text-decoration: none;\n  }\n\n  .x-banner__image {\n    width: 100%;\n    object-fit: contain;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nIn this example banned data is passed as a prop.\n\n_Here you can see how the `Banner` component is rendered._\n\n```vue\n<template>\n  <Banner :banner=\"banner\" />\n</template>\n\n<script>\n  import { Banner } from '@empathyco/x-components/search';\n  export default {\n    name: 'BannerDemo',\n    components: {\n      Banner\n    },\n    data() {\n      return {\n        banner: {\n          modelName: 'Banner',\n          id: 'banner-example',\n          url: 'https://my-website.com/summer-shirts',\n          image: 'https://my-website.com/images/summer-shirts.jpg',\n          title: 'Trendy summer shirts',\n          position: 1\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Customizing the items with classes\n\nThe `titleClass` prop can be used to add classes to the banner title.\n\n```vue\n<template>\n  <Banner :banner=\"banner\" titleClass=\"x-bg-neutral-50\" />\n</template>\n\n<script>\n  import { Banner } from '@empathyco/x-components/search';\n  export default {\n    name: 'BannerDemo',\n    components: {\n      Banner\n    },\n    data() {\n      return {\n        banner: {\n          modelName: 'Banner',\n          id: 'banner-example',\n          url: 'https://my-website.com/summer-shirts',\n          image: 'https://my-website.com/images/summer-shirts.jpg',\n          title: 'Trendy summer shirts',\n          position: 1\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AA4BE;;;;;;;;;;;;AAYE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,QAAQ;IACd,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAA+B;AACrC,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AACD,QAAA,UAAU,EAAE,MAAK;AAClB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,IAAG,GAAI,OAAO,EAAE,CAAA;AAEtB;;;;AAIE;AACF,QAAA,MAAM,WAAU,GAAI,GAAG,CAAC,KAAK,CAAC,CAAA;AAE9B;;;;AAIE;QACF,MAAM,cAAe,GAAE,MAAY;YACjC,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;AAC/C,SAAC,CAAA;AAED;;;;;;AAME;AACF,QAAA,MAAM,YAAa,GAAE,OAEd;AACL,YAAA,KAAK,EAAE,MAAM,cAAc,EAAE;AAC7B,YAAA,QAAQ,EAAE,MAAM,cAAc,EAAE;AAChC,YAAA,WAAW,EAAE,MAAM,cAAc,EAAC;AACnC,SAAA,CAAC,CAAA;QAEF,OAAO;YACL,WAAW;YACX,YAAW;SACZ,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"banner.vue2.js","sources":["../../../../../src/x-modules/search/components/banner.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"banner.url ? 'a' : 'figure'\"\n    v-if=\"!imageFailed\"\n    :href=\"banner.url\"\n    class=\"x-banner\"\n    data-test=\"banner\"\n    v-on=\"banner.url ? anchorEvents() : {}\"\n  >\n    <img\n      :src=\"banner.image\"\n      :alt=\"banner.title ? banner.title : 'Banner'\"\n      class=\"x-banner__image\"\n      data-test=\"banner-image\"\n      @error=\"imageFailed = true\"\n    />\n    <h2 v-if=\"banner.title\" class=\"x-banner__title\" :class=\"titleClass\" data-test=\"banner-title\">\n      {{ banner.title }}\n    </h2>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Banner as BannerModel } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { defineComponent, ref } from 'vue'\nimport { useXBus } from '../../../composables/use-x-bus'\nimport { searchXModule } from '../x-module'\n\n/**.\n * A banner result is just an item that has been inserted into the search results to advertise\n * something. Usually it is the first item in the grid or it can be placed in the middle of them\n * and fill the whole row where appears.\n * The banner may be clickable or non-clickable depending on whether it has an associated URL\n * or not. It contains an image and, optionally, a title. In case the image does not\n * load due to an error the banner will not be rendered.\n *\n * Additionally, this component exposes the following props to modify the classes of the\n * elements: `titleClass`.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Banner',\n  xModule: searchXModule.name,\n  props: {\n    /**\n     * The banner data.\n     *\n     * @public\n     */\n    banner: {\n      type: Object as PropType<BannerModel>,\n      required: true,\n    },\n    titleClass: String,\n  },\n  setup(props) {\n    const xBus = useXBus()\n\n    /**\n     * Flag to handle banner image errors.\n     *\n     * @public\n     */\n    const imageFailed = ref(false)\n\n    /**\n     * Emits the banner click event.\n     *\n     * @internal\n     */\n    const emitClickEvent = (): void => {\n      xBus.emit('UserClickedABanner', props.banner)\n    }\n\n    /**\n     * Returns the events supported by the anchor.\n     *\n     * @returns Events supported by the anchor.\n     *\n     * @internal\n     */\n    const anchorEvents = (): Partial<{\n      [key in keyof GlobalEventHandlersEventMap]: () => void\n    }> => ({\n      click: () => emitClickEvent(),\n      auxclick: () => emitClickEvent(),\n      contextmenu: () => emitClickEvent(),\n    })\n\n    return {\n      imageFailed,\n      anchorEvents,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-banner {\n  display: flex;\n  flex-flow: column nowrap;\n  text-decoration: none;\n}\n\n.x-banner__image {\n  width: 100%;\n  object-fit: contain;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nIn this example banned data is passed as a prop.\n\n_Here you can see how the `Banner` component is rendered._\n\n```vue\n<template>\n  <Banner :banner=\"banner\" />\n</template>\n\n<script>\nimport { Banner } from '@empathyco/x-components/search'\nexport default {\n  name: 'BannerDemo',\n  components: {\n    Banner,\n  },\n  data() {\n    return {\n      banner: {\n        modelName: 'Banner',\n        id: 'banner-example',\n        url: 'https://my-website.com/summer-shirts',\n        image: 'https://my-website.com/images/summer-shirts.jpg',\n        title: 'Trendy summer shirts',\n        position: 1,\n      },\n    }\n  },\n}\n</script>\n```\n\n### Customizing the items with classes\n\nThe `titleClass` prop can be used to add classes to the banner title.\n\n```vue\n<template>\n  <Banner :banner=\"banner\" titleClass=\"x-bg-neutral-50\" />\n</template>\n\n<script>\nimport { Banner } from '@empathyco/x-components/search'\nexport default {\n  name: 'BannerDemo',\n  components: {\n    Banner,\n  },\n  data() {\n    return {\n      banner: {\n        modelName: 'Banner',\n        id: 'banner-example',\n        url: 'https://my-website.com/summer-shirts',\n        image: 'https://my-website.com/images/summer-shirts.jpg',\n        title: 'Trendy summer shirts',\n        position: 1,\n      },\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AA6BA;;;;;;;;;;;;AAYE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,QAAQ;IACd,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAA+B;AACrC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD,QAAA,UAAU,EAAE,MAAM;AACnB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,IAAG,GAAI,OAAO,EAAC,CAAA;AAErB;;;;AAIE;AACF,QAAA,MAAM,WAAU,GAAI,GAAG,CAAC,KAAK,CAAA,CAAA;AAE7B;;;;AAIE;QACF,MAAM,cAAe,GAAE,MAAY;YACjC,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC,MAAM,CAAA,CAAA;AAC9C,SAAA,CAAA;AAEA;;;;;;AAME;AACF,QAAA,MAAM,YAAa,GAAE,OAEd;AACL,YAAA,KAAK,EAAE,MAAM,cAAc,EAAE;AAC7B,YAAA,QAAQ,EAAE,MAAM,cAAc,EAAE;AAChC,YAAA,WAAW,EAAE,MAAM,cAAc,EAAE;AACpC,SAAA,CAAA,CAAA;QAED,OAAO;YACL,WAAW;YACX,YAAY;SACd,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/search/components/banners-list.vue.js

@@ -1,10 +1,10 @@
 import { defineComponent, inject, isRef, ref, computed, provide, h } from 'vue';
+import { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts.js';
 import ItemsList from '../../../components/items-list.vue.js';
-import { searchXModule } from '../x-module.js';
-import { AnimationProp } from '../../../types/animation-prop.js';
 import { use$x } from '../../../composables/use-_x.js';
 import { useState } from '../../../composables/use-state.js';
-import { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts.js';
+import { AnimationProp } from '../../../types/animation-prop.js';
+import { searchXModule } from '../x-module.js';
 
 /**
  * It renders a {@link ItemsList} list of banners from {@link SearchState.banners}.
@@ -24,18 +24,18 @@ var _sfc_main = defineComponent({
         /** Animation component that will be used to animate the banners. */
         animation: {
             type: AnimationProp,
-            default: 'ul'
-        }
+            default: 'ul',
+        },
     },
     setup(props, { slots }) {
         const $x = use$x();
         /** The banners to render from the state. */
-        const stateItems = useState('search', ['banners']).banners;
+        const stateItems = useState('search').banners;
         /** The provided {@link FeatureLocation} for the component. */
         const injectedLocation = inject('location');
         const location = isRef(injectedLocation) ? injectedLocation.value : injectedLocation;
         /** Number of columns the grid is being divided into. */
-        let columnsNumber = ref(0);
+        const columnsNumber = ref(0);
         /**
          * Handler to update the number of columns when it changes.
          *
@@ -62,7 +62,8 @@ var _sfc_main = defineComponent({
                 return stateItems.value;
             }
             const items = [...injectedListItems.value];
-            let index = 0, previousBannerRow = -1;
+            let index = 0;
+            let previousBannerRow = -1;
             for (const item of stateItems.value) {
                 const position = item.position ?? 1;
                 let row = position - 1;
@@ -97,7 +98,7 @@ var _sfc_main = defineComponent({
             // https://vue-land.github.io/faq/forwarding-slots#passing-all-slots
             return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps, slots);
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/x-modules/search/components/banners-list.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"banners-list.vue.js","sources":["../../../../../src/x-modules/search/components/banners-list.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { Banner } from '@empathyco/x-types';\n  import { computed, ComputedRef, defineComponent, h, inject, isRef, provide, ref, Ref } from 'vue';\n  import ItemsList from '../../../components/items-list.vue';\n  import { FeatureLocation } from '../../../types/origin';\n  import { ListItem } from '../../../utils/types';\n  import { searchXModule } from '../x-module';\n  import { AnimationProp } from '../../../types/animation-prop';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n  import { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts';\n\n  /**\n   * It renders a {@link ItemsList} list of banners from {@link SearchState.banners}.\n   *\n   * The component provides a default slot which wraps the whole component with the `banners`\n   * plus the `injectedListItems` which also contains the injected list items from\n   * the ancestor.\n   *\n   * It also provides the parent slots to customize the items.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'BannersList',\n    xModule: searchXModule.name,\n    props: {\n      /** Animation component that will be used to animate the banners. */\n      animation: {\n        type: AnimationProp,\n        default: 'ul'\n      }\n    },\n    setup(props, { slots }) {\n      const $x = use$x();\n\n      /** The banners to render from the state. */\n      const stateItems: ComputedRef<Banner[]> = useState('search', ['banners']).banners;\n\n      /** The provided {@link FeatureLocation} for the component. */\n      const injectedLocation = inject<Ref<FeatureLocation> | FeatureLocation>('location');\n      const location = isRef(injectedLocation) ? injectedLocation.value : injectedLocation;\n\n      /** Number of columns the grid is being divided into. */\n      let columnsNumber = ref(0);\n\n      /**\n       * Handler to update the number of columns when it changes.\n       *\n       * @param newColumnsNumber - The new columns value.\n       * @param metadata - The {@link @empathyco/x-bus#SubjectPayload.metadata}.\n       */\n      $x.on('RenderedColumnsNumberChanged', true).subscribe(({ eventPayload, metadata }) => {\n        if (metadata.location === location) {\n          columnsNumber.value = eventPayload;\n        }\n      });\n\n      /** It injects {@link ListItem} provided by an ancestor as injectedListItems. */\n      const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string);\n\n      /**\n       * The `stateItems` concatenated with the `injectedListItems` if there are.\n       *\n       * @remarks This computed defines the merging strategy of the `stateItems` and the\n       * `injectedListItems`.\n       *\n       * @returns List of {@link ListItem}.\n       */\n      const items = computed(() => {\n        if (!injectedListItems?.value!.length) {\n          return stateItems.value;\n        }\n        const items = [...injectedListItems.value];\n        let index = 0,\n          previousBannerRow = -1;\n        for (const item of stateItems.value) {\n          const position = item.position ?? 1;\n          let row = position - 1;\n          if (row <= previousBannerRow) {\n            row = previousBannerRow + 1;\n          }\n          const rowsDiff = row - previousBannerRow;\n          if (rowsDiff > 1) {\n            index += (rowsDiff - 1) * columnsNumber.value;\n          }\n          const isIndexInLoadedPages = index <= items.length;\n          const areAllPagesLoaded = $x.results.length === $x.totalResults;\n          if (!isIndexInLoadedPages && !areAllPagesLoaded) {\n            break;\n          }\n          items.splice(index, 0, item);\n          index++;\n          previousBannerRow = row;\n        }\n        return items;\n      });\n\n      /**\n       * The computed list items of the entity that uses the mixin.\n       *\n       * @remarks It should be overridden in the component that uses the mixin and it's intended to be\n       * filled with items from the state. Vue doesn't allow mixins as abstract classes.\n       * @returns An empty array as fallback in case it is not overridden.\n       */\n      provide(LIST_ITEMS_KEY as string, items);\n\n      return () => {\n        const innerProps = { items: items.value, animation: props.animation };\n        // https://vue-land.github.io/faq/forwarding-slots#passing-all-slots\n        return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps, slots);\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\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 BannersList is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <BannersList />\n  </div>\n</template>\n\n<script>\n  import { BannersList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'BannersListDemo',\n    components: {\n      SearchInput,\n      BannersList\n    }\n  };\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <BannersList :animation=\"fadeAndSlide\" />\n  </div>\n</template>\n\n<script>\n  import { BannersList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { FadeAndSlide } from '@empathyco/x-components/animations';\n\n  export default {\n    name: 'BannersListDemo',\n    components: {\n      SearchInput,\n      BannersList\n    },\n    data() {\n      return {\n        fadeAndSlide: FadeAndSlide\n      };\n    }\n  };\n</script>\n```\n\n### Overriding default content\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <BannersList #default=\"{ items, animation }\">\n      <BaseGrid :items=\"items\" :animation=\"animation\">\n        <template #banner=\"{ item }\">\n          <span>Banner: {{ item.title }}</span>\n        </template>\n        <template #default=\"{ item }\">\n          <span>Default: {{ item }}</span>\n        </template>\n      </BaseGrid>\n    </BannersList>\n  </div>\n</template>\n\n<script>\n  import { BannersList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'BannersListDemo',\n    components: {\n      SearchInput,\n      BannersList\n    }\n  };\n</script>\n```\n\n### Overriding banner content\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <BannersList #banner=\"{ item }\">\n      <span class=\"banner\">\n        {{ item.title }}\n      </span>\n    </BannersList>\n  </div>\n</template>\n\n<script>\n  import { BannersList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'BannersListDemo',\n    components: {\n      SearchInput,\n      BannersList\n    }\n  };\n</script>\n```\n\n### Data injection\n\nStarting with the `ResultsList` component as root element, you can concat the list of results and\nbanners in order to be injected by the `BaseGrid` (or components that extend it).\n\n### Data injection\n\nStarting with the `ResultsList` component as root element, you can concat the list of list items\nusing `BannersList`, `PromotedsList`, `BaseGrid` or any component that injects the `listItems`\nvalue.\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <BannersList>\n        <template #banner=\"{ item }\">Banner: {{ item.id }}</template>\n        <template #result=\"{ item }\">Result: {{ item.id }}</template>\n      </BannersList>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { ResultsList, BannersList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'BannersListDemo',\n    components: {\n      SearchInput,\n      ResultsList,\n      BannersList\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"banners-list.vue.js","sources":["../../../../../src/x-modules/search/components/banners-list.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { FeatureLocation } from '../../../types/origin'\nimport type { ListItem } from '../../../utils/types'\nimport { computed, defineComponent, h, inject, isRef, provide, ref } from 'vue'\nimport { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts'\nimport ItemsList from '../../../components/items-list.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types/animation-prop'\nimport { searchXModule } from '../x-module'\n\n/**\n * It renders a {@link ItemsList} list of banners from {@link SearchState.banners}.\n *\n * The component provides a default slot which wraps the whole component with the `banners`\n * plus the `injectedListItems` which also contains the injected list items from\n * the ancestor.\n *\n * It also provides the parent slots to customize the items.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BannersList',\n  xModule: searchXModule.name,\n  props: {\n    /** Animation component that will be used to animate the banners. */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n  },\n  setup(props, { slots }) {\n    const $x = use$x()\n\n    /** The banners to render from the state. */\n    const stateItems = useState('search').banners\n\n    /** The provided {@link FeatureLocation} for the component. */\n    const injectedLocation = inject<Ref<FeatureLocation> | FeatureLocation>('location')\n    const location = isRef(injectedLocation) ? injectedLocation.value : injectedLocation\n\n    /** Number of columns the grid is being divided into. */\n    const columnsNumber = ref(0)\n\n    /**\n     * Handler to update the number of columns when it changes.\n     *\n     * @param newColumnsNumber - The new columns value.\n     * @param metadata - The {@link @empathyco/x-bus#SubjectPayload.metadata}.\n     */\n    $x.on('RenderedColumnsNumberChanged', true).subscribe(({ eventPayload, metadata }) => {\n      if (metadata.location === location) {\n        columnsNumber.value = eventPayload\n      }\n    })\n\n    /** It injects {@link ListItem} provided by an ancestor as injectedListItems. */\n    const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string)\n\n    /**\n     * The `stateItems` concatenated with the `injectedListItems` if there are.\n     *\n     * @remarks This computed defines the merging strategy of the `stateItems` and the\n     * `injectedListItems`.\n     *\n     * @returns List of {@link ListItem}.\n     */\n    const items = computed(() => {\n      if (!injectedListItems?.value!.length) {\n        return stateItems.value\n      }\n      const items = [...injectedListItems.value]\n      let index = 0\n      let previousBannerRow = -1\n      for (const item of stateItems.value) {\n        const position = item.position ?? 1\n        let row = position - 1\n        if (row <= previousBannerRow) {\n          row = previousBannerRow + 1\n        }\n        const rowsDiff = row - previousBannerRow\n        if (rowsDiff > 1) {\n          index += (rowsDiff - 1) * columnsNumber.value\n        }\n        const isIndexInLoadedPages = index <= items.length\n        const areAllPagesLoaded = $x.results.length === $x.totalResults\n        if (!isIndexInLoadedPages && !areAllPagesLoaded) {\n          break\n        }\n        items.splice(index, 0, item)\n        index++\n        previousBannerRow = row\n      }\n      return items\n    })\n\n    /**\n     * The computed list items of the entity that uses the mixin.\n     *\n     * @remarks It should be overridden in the component that uses the mixin and it's intended to be\n     * filled with items from the state. Vue doesn't allow mixins as abstract classes.\n     * @returns An empty array as fallback in case it is not overridden.\n     */\n    provide(LIST_ITEMS_KEY as string, items)\n\n    return () => {\n      const innerProps = { items: items.value, animation: props.animation }\n      // https://vue-land.github.io/faq/forwarding-slots#passing-all-slots\n      return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps, slots)\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\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 BannersList is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <BannersList />\n  </div>\n</template>\n\n<script>\nimport { BannersList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'BannersListDemo',\n  components: {\n    SearchInput,\n    BannersList,\n  },\n}\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <BannersList :animation=\"fadeAndSlide\" />\n  </div>\n</template>\n\n<script>\nimport { BannersList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { FadeAndSlide } from '@empathyco/x-components/animations'\n\nexport default {\n  name: 'BannersListDemo',\n  components: {\n    SearchInput,\n    BannersList,\n  },\n  data() {\n    return {\n      fadeAndSlide: FadeAndSlide,\n    }\n  },\n}\n</script>\n```\n\n### Overriding default content\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <BannersList #default=\"{ items, animation }\">\n      <BaseGrid :items=\"items\" :animation=\"animation\">\n        <template #banner=\"{ item }\">\n          <span>Banner: {{ item.title }}</span>\n        </template>\n        <template #default=\"{ item }\">\n          <span>Default: {{ item }}</span>\n        </template>\n      </BaseGrid>\n    </BannersList>\n  </div>\n</template>\n\n<script>\nimport { BannersList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'BannersListDemo',\n  components: {\n    SearchInput,\n    BannersList,\n  },\n}\n</script>\n```\n\n### Overriding banner content\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <BannersList #banner=\"{ item }\">\n      <span class=\"banner\">\n        {{ item.title }}\n      </span>\n    </BannersList>\n  </div>\n</template>\n\n<script>\nimport { BannersList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'BannersListDemo',\n  components: {\n    SearchInput,\n    BannersList,\n  },\n}\n</script>\n```\n\n### Data injection\n\nStarting with the `ResultsList` component as root element, you can concat the list of results and\nbanners in order to be injected by the `BaseGrid` (or components that extend it).\n\n### Data injection\n\nStarting with the `ResultsList` component as root element, you can concat the list of list items\nusing `BannersList`, `PromotedsList`, `BaseGrid` or any component that injects the `listItems`\nvalue.\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <BannersList>\n        <template #banner=\"{ item }\">Banner: {{ item.id }}</template>\n        <template #result=\"{ item }\">Result: {{ item.id }}</template>\n      </BannersList>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\nimport { ResultsList, BannersList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'BannersListDemo',\n  components: {\n    SearchInput,\n    ResultsList,\n    BannersList,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}

package/js/x-modules/search/components/fallback-disclaimer.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"fallback-disclaimer.vue.js","sources":["../../../../../src/x-modules/search/components/fallback-disclaimer.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"fromNoResultsWithFilters\"\n    class=\"x-fallback-disclaimer\"\n    data-test=\"fallback-disclaimer\"\n  >\n    <slot v-bind=\"{ query: query }\">\n      No results found for {{ query }} with the selected filters. The filters have been unselected.\n    </slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\n  import { searchXModule } from '../x-module';\n  import { useState } from '../../../composables/use-state';\n\n  /**\n   * The `FallbackDisclaimer` component shows a message if the filters have been removed\n   * from the current search because there were no results.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'FallbackDisclaimer',\n    xModule: searchXModule.name,\n    setup() {\n      const { query, fromNoResultsWithFilters } = useState('search', [\n        'query',\n        'fromNoResultsWithFilters'\n      ]);\n\n      return { query, fromNoResultsWithFilters };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis default fallback disclaimer component reads the query from the search state and passes it to\nits default slot. This component will be rendered if there is a no results with filters situation.\n\n### Basic usage\n\n```vue\n<FallbackDisclaimer />\n```\n\n### Customizing its contents\n\n```vue\n<FallbackDisclaimer>\n  <template #default=\"{ query }\">\n    No results found for '{{ query }}' with the selected filters. The filters have been unselected.\n  </template>\n</FallbackDisclaimer>\n\n<script>\n  import { FallbackDisclaimer } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      FallbackDisclaimer\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_openBlock","_renderSlot","_normalizeProps","_guardReactiveProps","_createCommentVNode"],"mappings":";;;;MAGI,UAAM,GAAA;AAAA,EACN,GAAA,EAAA,CAAA;AAAA,EAAA,KAAA,EAAA,uBAAA;;;AAHF,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAQM,QARN,KAQM,EAAA,QAAA,EAAA;AAHJ,EAAA,OAAA,IAAA,CAAA,wBAAA,IAAAA,SAAA,uBAAgC,KACT,EAAA,UAAA,EAAA;AAAA,IAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,KAAA,EAAA,IAAA,CAAA,KAAA,EAAA,CAAA,CAAA,EAAA,MAAA;;;;;;AAP3B,KAAA,CAAA;AAAA,GAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"fallback-disclaimer.vue.js","sources":["../../../../../src/x-modules/search/components/fallback-disclaimer.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"fromNoResultsWithFilters\"\n    class=\"x-fallback-disclaimer\"\n    data-test=\"fallback-disclaimer\"\n  >\n    <slot v-bind=\"{ query }\">\n      No results found for {{ query }} with the selected filters. The filters have been unselected.\n    </slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/**\n * The `FallbackDisclaimer` component shows a message if the filters have been removed\n * from the current search because there were no results.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'FallbackDisclaimer',\n  xModule: searchXModule.name,\n  setup() {\n    const { query, fromNoResultsWithFilters } = useState('search')\n\n    return { query, fromNoResultsWithFilters }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis default fallback disclaimer component reads the query from the search state and passes it to\nits default slot. This component will be rendered if there is a no results with filters situation.\n\n### Basic usage\n\n```vue\n<FallbackDisclaimer />\n```\n\n### Customizing its contents\n\n```vue\n<FallbackDisclaimer>\n  <template #default=\"{ query }\">\n    No results found for '{{ query }}' with the selected filters. The filters have been unselected.\n  </template>\n</FallbackDisclaimer>\n\n<script>\nimport { FallbackDisclaimer } from '@empathyco/x-components/search'\n\nexport default {\n  components: {\n    FallbackDisclaimer,\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_renderSlot","_normalizeProps","_guardReactiveProps","_createCommentVNode"],"mappings":";;;;MAGI,UAAM,GAAA;AAAA,EACN,GAAA,EAAA,CAAA;AAAA,EAAA,KAAA,EAAA,uBAAA;;;AAHF,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAQM,QARN,KAQM,EAAA,QAAA,EAAA;AAHJ,EAAA,OAAA,IAAA,CAAA,wBAAA,IAAAA,SAAA,uBAAyB,KACF,EAAA,UAAA,EAAA;AAAA,IAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,KAAA,EAAA,IAAA,CAAA,KAAA,EAAA,CAAA,CAAA,EAAA,MAAA;;;;;;AAP3B,KAAA,CAAA;AAAA,GAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

package/js/x-modules/search/components/fallback-disclaimer.vue2.js

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
-import { searchXModule } from '../x-module.js';
 import { useState } from '../../../composables/use-state.js';
+import { searchXModule } from '../x-module.js';
 
 /**
  * The `FallbackDisclaimer` component shows a message if the filters have been removed
@@ -12,12 +12,9 @@ var _sfc_main = defineComponent({
     name: 'FallbackDisclaimer',
     xModule: searchXModule.name,
     setup() {
-        const { query, fromNoResultsWithFilters } = useState('search', [
-            'query',
-            'fromNoResultsWithFilters'
-        ]);
+        const { query, fromNoResultsWithFilters } = useState('search');
         return { query, fromNoResultsWithFilters };
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/x-modules/search/components/fallback-disclaimer.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"fallback-disclaimer.vue2.js","sources":["../../../../../src/x-modules/search/components/fallback-disclaimer.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"fromNoResultsWithFilters\"\n    class=\"x-fallback-disclaimer\"\n    data-test=\"fallback-disclaimer\"\n  >\n    <slot v-bind=\"{ query: query }\">\n      No results found for {{ query }} with the selected filters. The filters have been unselected.\n    </slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\n  import { searchXModule } from '../x-module';\n  import { useState } from '../../../composables/use-state';\n\n  /**\n   * The `FallbackDisclaimer` component shows a message if the filters have been removed\n   * from the current search because there were no results.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'FallbackDisclaimer',\n    xModule: searchXModule.name,\n    setup() {\n      const { query, fromNoResultsWithFilters } = useState('search', [\n        'query',\n        'fromNoResultsWithFilters'\n      ]);\n\n      return { query, fromNoResultsWithFilters };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis default fallback disclaimer component reads the query from the search state and passes it to\nits default slot. This component will be rendered if there is a no results with filters situation.\n\n### Basic usage\n\n```vue\n<FallbackDisclaimer />\n```\n\n### Customizing its contents\n\n```vue\n<FallbackDisclaimer>\n  <template #default=\"{ query }\">\n    No results found for '{{ query }}' with the selected filters. The filters have been unselected.\n  </template>\n</FallbackDisclaimer>\n\n<script>\n  import { FallbackDisclaimer } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      FallbackDisclaimer\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAiBE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,oBAAoB;IAC1B,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,KAAK,GAAA;QACH,MAAM,EAAE,KAAK,EAAE,0BAA2B,GAAE,QAAQ,CAAC,QAAQ,EAAE;YAC7D,OAAO;YACP,0BAAyB;AAC1B,SAAA,CAAC,CAAA;AAEF,QAAA,OAAO,EAAE,KAAK,EAAE,0BAA0B,CAAA;KAC5C;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"fallback-disclaimer.vue2.js","sources":["../../../../../src/x-modules/search/components/fallback-disclaimer.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"fromNoResultsWithFilters\"\n    class=\"x-fallback-disclaimer\"\n    data-test=\"fallback-disclaimer\"\n  >\n    <slot v-bind=\"{ query }\">\n      No results found for {{ query }} with the selected filters. The filters have been unselected.\n    </slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/**\n * The `FallbackDisclaimer` component shows a message if the filters have been removed\n * from the current search because there were no results.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'FallbackDisclaimer',\n  xModule: searchXModule.name,\n  setup() {\n    const { query, fromNoResultsWithFilters } = useState('search')\n\n    return { query, fromNoResultsWithFilters }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis default fallback disclaimer component reads the query from the search state and passes it to\nits default slot. This component will be rendered if there is a no results with filters situation.\n\n### Basic usage\n\n```vue\n<FallbackDisclaimer />\n```\n\n### Customizing its contents\n\n```vue\n<FallbackDisclaimer>\n  <template #default=\"{ query }\">\n    No results found for '{{ query }}' with the selected filters. The filters have been unselected.\n  </template>\n</FallbackDisclaimer>\n\n<script>\nimport { FallbackDisclaimer } from '@empathyco/x-components/search'\n\nexport default {\n  components: {\n    FallbackDisclaimer,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAiBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,oBAAoB;IAC1B,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,KAAK,GAAA;QACH,MAAM,EAAE,KAAK,EAAE,wBAAyB,EAAA,GAAI,QAAQ,CAAC,QAAQ,CAAA,CAAA;AAE7D,QAAA,OAAO,EAAE,KAAK,EAAE,wBAAyB,EAAA,CAAA;KAC1C;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/search/components/partial-query-button.vue.js

@@ -7,9 +7,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     "button",
     {
       ref: "partialButtonEl",
-      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.emitEvents && _ctx.emitEvents(...args)),
       class: "x-partial-query-button x-button",
-      "data-test": "partial-query-button"
+      "data-test": "partial-query-button",
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.emitEvents && _ctx.emitEvents(...args))
     },
     [
       renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ query: _ctx.query })), () => [

package/js/x-modules/search/components/partial-query-button.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"partial-query-button.vue.js","sources":["../../../../../src/x-modules/search/components/partial-query-button.vue"],"sourcesContent":["<template>\n  <button\n    ref=\"partialButtonEl\"\n    @click=\"emitEvents\"\n    class=\"x-partial-query-button x-button\"\n    data-test=\"partial-query-button\"\n  >\n    <slot v-bind=\"{ query }\">{{ query }}</slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, ref } from 'vue';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { searchXModule } from '../x-module';\n  import { use$x } from '../../../composables/use-$x';\n\n  /**\n   * A button that when pressed emits the {@link XEventsTypes.UserAcceptedAQuery}\n   * and {@link SearchXEvents.UserClickedPartialQuery} events, expressing the user\n   * intention to set the partial query.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'PartialQueryButton',\n    xModule: searchXModule.name,\n    props: {\n      /**\n       * The query property.\n       *\n       * @public\n       */\n      query: {\n        type: String,\n        required: true\n      }\n    },\n    setup(props) {\n      const $x = use$x();\n\n      const partialButtonEl = ref<HTMLElement>();\n\n      /**\n       * Generates the {@link WireMetadata} object omitting the moduleName.\n       *\n       * @returns The {@link WireMetadata} object omitting the moduleName.\n       * @internal\n       */\n      const createEventMetadata = (): Omit<WireMetadata, 'moduleName'> => ({\n        target: partialButtonEl.value,\n        feature: 'partial_result'\n      });\n\n      /**\n       * Emits events when the button is clicked.\n       *\n       * @public\n       */\n      const emitEvents = () => {\n        $x.emit('UserAcceptedAQuery', props.query, createEventMetadata());\n        $x.emit('UserClickedPartialQuery', props.query, createEventMetadata());\n      };\n\n      return {\n        partialButtonEl,\n        emitEvents\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits 2 different events:\n\n- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the partial query. The event payload is the partial\n  query data.\n- [`UserClickedPartialQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the partial query. The event payload is the partial\n  query data.\n\n## Examples\n\n### Basic example\n\nA button that when pressed emits the `XEventsTypes.UserAcceptedAQuery` and\n`SearchXEvents.UserClickedPartialQuery` events, expressing the user intention to set the partial\nquery.\n\nThe component sets the current query as the new query and emits the `UserAcceptedAQuery` and\n`UserClickedPartialQuery` events when is clicked.\n\n```vue\n<template>\n  <PartialQueryButton :query=\"query\" />\n</template>\n```\n\n### Customizing its contents\n\n```vue\n<template>\n  <PartialQueryButton>\n    <template #default=\"{ query }\">\n      <span class=\"x-partial-query-button__text\">\n        Set the Partial query as the new query: {{ query }}!\n      </span>\n    </template>\n  </PartialQueryButton>\n</template>\n\n<script>\n  import { PartialQueryButton } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      PartialQueryButton\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock"],"mappings":";;;;SAEQ,WAAiB,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SACpBA,SAAK,EAAA,EAAAC,kBAAA;AAAA,IAAA,QAAA;AAAA,IAAE;AAAA,MACR,GAAK,EAAA,iBAAA;AAAA,MACL,gBAAU,CAAsB,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,UAAA,IAAA,IAAA,CAAA,UAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,MAAA,KAAA,EAAA,iCAAA;MAEhC,WAA2C,EAAA,sBAAA;AAAA,KAAA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"partial-query-button.vue.js","sources":["../../../../../src/x-modules/search/components/partial-query-button.vue"],"sourcesContent":["<template>\n  <button\n    ref=\"partialButtonEl\"\n    class=\"x-partial-query-button x-button\"\n    data-test=\"partial-query-button\"\n    @click=\"emitEvents\"\n  >\n    <slot v-bind=\"{ query }\">{{ query }}</slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport type { WireMetadata } from '../../../wiring/wiring.types'\nimport { defineComponent, ref } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { searchXModule } from '../x-module'\n\n/**\n * A button that when pressed emits the {@link XEventsTypes.UserAcceptedAQuery}\n * and {@link SearchXEvents.UserClickedPartialQuery} events, expressing the user\n * intention to set the partial query.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'PartialQueryButton',\n  xModule: searchXModule.name,\n  props: {\n    /**\n     * The query property.\n     *\n     * @public\n     */\n    query: {\n      type: String,\n      required: true,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    const partialButtonEl = ref<HTMLElement>()\n\n    /**\n     * Generates the {@link WireMetadata} object omitting the moduleName.\n     *\n     * @returns The {@link WireMetadata} object omitting the moduleName.\n     * @internal\n     */\n    const createEventMetadata = (): Omit<WireMetadata, 'moduleName'> => ({\n      target: partialButtonEl.value,\n      feature: 'partial_result',\n    })\n\n    /**\n     * Emits events when the button is clicked.\n     *\n     * @public\n     */\n    const emitEvents = () => {\n      $x.emit('UserAcceptedAQuery', props.query, createEventMetadata())\n      $x.emit('UserClickedPartialQuery', props.query, createEventMetadata())\n    }\n\n    return {\n      partialButtonEl,\n      emitEvents,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits 2 different events:\n\n- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the partial query. The event payload is the partial\n  query data.\n- [`UserClickedPartialQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the partial query. The event payload is the partial\n  query data.\n\n## Examples\n\n### Basic example\n\nA button that when pressed emits the `XEventsTypes.UserAcceptedAQuery` and\n`SearchXEvents.UserClickedPartialQuery` events, expressing the user intention to set the partial\nquery.\n\nThe component sets the current query as the new query and emits the `UserAcceptedAQuery` and\n`UserClickedPartialQuery` events when is clicked.\n\n```vue\n<template>\n  <PartialQueryButton :query=\"query\" />\n</template>\n```\n\n### Customizing its contents\n\n```vue\n<template>\n  <PartialQueryButton>\n    <template #default=\"{ query }\">\n      <span class=\"x-partial-query-button__text\">\n        Set the Partial query as the new query: {{ query }}!\n      </span>\n    </template>\n  </PartialQueryButton>\n</template>\n\n<script>\nimport { PartialQueryButton } from '@empathyco/x-components/search'\n\nexport default {\n  components: {\n    PartialQueryButton,\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","query"],"mappings":";;;;SAEQ,WAAiB,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SAChBA,SAAC,EAAA,EAAAC,kBAAA;AAAA,IAAiC,QAAA;AAAA,IAAA;AAAA,MACvC,GAAA,EAAA,iBAAA;AAAA,MACC,KAAK,EAAA,iCAAA;AAAA,MAAA,WAAA,EAAA,sBAAA;MAEN,OAA2C,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAP/C,4CAOoBC,GAAK,IAAA,CAAA,CAAA;AAAA,KAAA;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/search/components/partial-query-button.vue2.js

@@ -1,6 +1,6 @@
 import { defineComponent, ref } from 'vue';
-import { searchXModule } from '../x-module.js';
 import { use$x } from '../../../composables/use-_x.js';
+import { searchXModule } from '../x-module.js';
 
 /**
  * A button that when pressed emits the {@link XEventsTypes.UserAcceptedAQuery}
@@ -20,8 +20,8 @@ var _sfc_main = defineComponent({
          */
         query: {
             type: String,
-            required: true
-        }
+            required: true,
+        },
     },
     setup(props) {
         const $x = use$x();
@@ -34,7 +34,7 @@ var _sfc_main = defineComponent({
          */
         const createEventMetadata = () => ({
             target: partialButtonEl.value,
-            feature: 'partial_result'
+            feature: 'partial_result',
         });
         /**
          * Emits events when the button is clicked.
@@ -47,9 +47,9 @@ var _sfc_main = defineComponent({
         };
         return {
             partialButtonEl,
-            emitEvents
+            emitEvents,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/x-modules/search/components/partial-query-button.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"partial-query-button.vue2.js","sources":["../../../../../src/x-modules/search/components/partial-query-button.vue"],"sourcesContent":["<template>\n  <button\n    ref=\"partialButtonEl\"\n    @click=\"emitEvents\"\n    class=\"x-partial-query-button x-button\"\n    data-test=\"partial-query-button\"\n  >\n    <slot v-bind=\"{ query }\">{{ query }}</slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, ref } from 'vue';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { searchXModule } from '../x-module';\n  import { use$x } from '../../../composables/use-$x';\n\n  /**\n   * A button that when pressed emits the {@link XEventsTypes.UserAcceptedAQuery}\n   * and {@link SearchXEvents.UserClickedPartialQuery} events, expressing the user\n   * intention to set the partial query.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'PartialQueryButton',\n    xModule: searchXModule.name,\n    props: {\n      /**\n       * The query property.\n       *\n       * @public\n       */\n      query: {\n        type: String,\n        required: true\n      }\n    },\n    setup(props) {\n      const $x = use$x();\n\n      const partialButtonEl = ref<HTMLElement>();\n\n      /**\n       * Generates the {@link WireMetadata} object omitting the moduleName.\n       *\n       * @returns The {@link WireMetadata} object omitting the moduleName.\n       * @internal\n       */\n      const createEventMetadata = (): Omit<WireMetadata, 'moduleName'> => ({\n        target: partialButtonEl.value,\n        feature: 'partial_result'\n      });\n\n      /**\n       * Emits events when the button is clicked.\n       *\n       * @public\n       */\n      const emitEvents = () => {\n        $x.emit('UserAcceptedAQuery', props.query, createEventMetadata());\n        $x.emit('UserClickedPartialQuery', props.query, createEventMetadata());\n      };\n\n      return {\n        partialButtonEl,\n        emitEvents\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits 2 different events:\n\n- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the partial query. The event payload is the partial\n  query data.\n- [`UserClickedPartialQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the partial query. The event payload is the partial\n  query data.\n\n## Examples\n\n### Basic example\n\nA button that when pressed emits the `XEventsTypes.UserAcceptedAQuery` and\n`SearchXEvents.UserClickedPartialQuery` events, expressing the user intention to set the partial\nquery.\n\nThe component sets the current query as the new query and emits the `UserAcceptedAQuery` and\n`UserClickedPartialQuery` events when is clicked.\n\n```vue\n<template>\n  <PartialQueryButton :query=\"query\" />\n</template>\n```\n\n### Customizing its contents\n\n```vue\n<template>\n  <PartialQueryButton>\n    <template #default=\"{ query }\">\n      <span class=\"x-partial-query-button__text\">\n        Set the Partial query as the new query: {{ query }}!\n      </span>\n    </template>\n  </PartialQueryButton>\n</template>\n\n<script>\n  import { PartialQueryButton } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      PartialQueryButton\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAiBE;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,oBAAoB;IAC1B,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAG;AACf,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;AAElB,QAAA,MAAM,eAAgB,GAAE,GAAG,EAAe,CAAA;AAE1C;;;;;AAKE;AACF,QAAA,MAAM,mBAAoB,GAAE,OAAyC;YACnE,MAAM,EAAE,eAAe,CAAC,KAAK;AAC7B,YAAA,OAAO,EAAE,gBAAe;AACzB,SAAA,CAAC,CAAA;AAEF;;;;AAIE;QACF,MAAM,UAAS,GAAI,MAAM;AACvB,YAAA,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC,KAAK,EAAE,mBAAmB,EAAE,CAAC,CAAA;AACjE,YAAA,EAAE,CAAC,IAAI,CAAC,yBAAyB,EAAE,KAAK,CAAC,KAAK,EAAE,mBAAmB,EAAE,CAAC,CAAA;AACxE,SAAC,CAAA;QAED,OAAO;YACL,eAAe;YACf,UAAS;SACV,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"partial-query-button.vue2.js","sources":["../../../../../src/x-modules/search/components/partial-query-button.vue"],"sourcesContent":["<template>\n  <button\n    ref=\"partialButtonEl\"\n    class=\"x-partial-query-button x-button\"\n    data-test=\"partial-query-button\"\n    @click=\"emitEvents\"\n  >\n    <slot v-bind=\"{ query }\">{{ query }}</slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport type { WireMetadata } from '../../../wiring/wiring.types'\nimport { defineComponent, ref } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { searchXModule } from '../x-module'\n\n/**\n * A button that when pressed emits the {@link XEventsTypes.UserAcceptedAQuery}\n * and {@link SearchXEvents.UserClickedPartialQuery} events, expressing the user\n * intention to set the partial query.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'PartialQueryButton',\n  xModule: searchXModule.name,\n  props: {\n    /**\n     * The query property.\n     *\n     * @public\n     */\n    query: {\n      type: String,\n      required: true,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    const partialButtonEl = ref<HTMLElement>()\n\n    /**\n     * Generates the {@link WireMetadata} object omitting the moduleName.\n     *\n     * @returns The {@link WireMetadata} object omitting the moduleName.\n     * @internal\n     */\n    const createEventMetadata = (): Omit<WireMetadata, 'moduleName'> => ({\n      target: partialButtonEl.value,\n      feature: 'partial_result',\n    })\n\n    /**\n     * Emits events when the button is clicked.\n     *\n     * @public\n     */\n    const emitEvents = () => {\n      $x.emit('UserAcceptedAQuery', props.query, createEventMetadata())\n      $x.emit('UserClickedPartialQuery', props.query, createEventMetadata())\n    }\n\n    return {\n      partialButtonEl,\n      emitEvents,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits 2 different events:\n\n- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the partial query. The event payload is the partial\n  query data.\n- [`UserClickedPartialQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the partial query. The event payload is the partial\n  query data.\n\n## Examples\n\n### Basic example\n\nA button that when pressed emits the `XEventsTypes.UserAcceptedAQuery` and\n`SearchXEvents.UserClickedPartialQuery` events, expressing the user intention to set the partial\nquery.\n\nThe component sets the current query as the new query and emits the `UserAcceptedAQuery` and\n`UserClickedPartialQuery` events when is clicked.\n\n```vue\n<template>\n  <PartialQueryButton :query=\"query\" />\n</template>\n```\n\n### Customizing its contents\n\n```vue\n<template>\n  <PartialQueryButton>\n    <template #default=\"{ query }\">\n      <span class=\"x-partial-query-button__text\">\n        Set the Partial query as the new query: {{ query }}!\n      </span>\n    </template>\n  </PartialQueryButton>\n</template>\n\n<script>\nimport { PartialQueryButton } from '@empathyco/x-components/search'\n\nexport default {\n  components: {\n    PartialQueryButton,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAiBA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,oBAAoB;IAC1B,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC,CAAA;AAEjB,QAAA,MAAM,eAAgB,GAAE,GAAG,EAAc,CAAA;AAEzC;;;;;AAKE;AACF,QAAA,MAAM,mBAAoB,GAAE,OAAyC;YACnE,MAAM,EAAE,eAAe,CAAC,KAAK;AAC7B,YAAA,OAAO,EAAE,gBAAgB;AAC1B,SAAA,CAAA,CAAA;AAED;;;;AAIE;QACF,MAAM,UAAS,GAAI,MAAM;AACvB,YAAA,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC,KAAK,EAAE,mBAAmB,EAAE,CAAA,CAAA;AAChE,YAAA,EAAE,CAAC,IAAI,CAAC,yBAAyB,EAAE,KAAK,CAAC,KAAK,EAAE,mBAAmB,EAAE,CAAA,CAAA;AACvE,SAAA,CAAA;QAEA,OAAO;YACL,eAAe;YACf,UAAU;SACZ,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/search/components/partial-results-list.vue.js

@@ -1,5 +1,5 @@
 import _sfc_main from './partial-results-list.vue2.js';
-import { openBlock, createBlock, resolveDynamicComponent, withCtx, createElementBlock, Fragment, renderList, createCommentVNode, renderSlot } from 'vue';
+import { openBlock, createBlock, resolveDynamicComponent, withCtx, createElementBlock, Fragment, renderList, renderSlot, createCommentVNode } from 'vue';
 import './partial-results-list.vue3.js';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
@@ -20,7 +20,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             class: "x-partial-result",
             "data-test": "partial-result"
           }, [
-            createCommentVNode("\n       @slot (Required) Partial results item content\n           @binding {Partial} partialResult - Partial Result data\n      "),
             renderSlot(_ctx.$slots, "default", { partialResult }, void 0, true)
           ]);
         }),

package/js/x-modules/search/components/partial-results-list.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"partial-results-list.vue.js","sources":["../../../../../src/x-modules/search/components/partial-results-list.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"partialResults.length\"\n    class=\"x-partial-results-list\"\n    data-test=\"partial-results\"\n    tag=\"ul\"\n  >\n    <li\n      v-for=\"(partialResult, index) in partialResults\"\n      :key=\"`${partialResult.query}-${index}`\"\n      class=\"x-partial-result\"\n      data-test=\"partial-result\"\n    >\n      <!--\n       @slot (Required) Partial results item content\n           @binding {Partial} partialResult - Partial Result data\n      -->\n      <slot :partialResult=\"partialResult\" />\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { PartialResult } from '@empathyco/x-types';\n  import { computed, ComputedRef, defineComponent } from 'vue';\n  import { searchXModule } from '../x-module';\n  import { AnimationProp } from '../../../types/animation-prop';\n  import { useState } from '../../../composables/use-state';\n\n  /**\n   * It renders a list of partial results from {@link SearchState.partialResults} by default.\n   * It also provides the partial result slot to customize the item with the partial result bound.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'PartialResultsList',\n    xModule: searchXModule.name,\n    props: {\n      /**\n       * Animation component that will be used to animate the partial results.\n       *\n       * @public\n       */\n      animation: {\n        type: AnimationProp,\n        default: 'ul'\n      },\n\n      /**\n       * Maximum number of partial results to show.\n       *\n       * @public\n       */\n      maxItemsToRender: {\n        type: Number,\n        default: 5\n      }\n    },\n    setup(props) {\n      /**\n       * The partials results from the search state.\n       *\n       * @public\n       */\n      const items: ComputedRef<PartialResult[]> = useState('search', [\n        'partialResults'\n      ]).partialResults;\n\n      /**\n       * A limited number of partial results.\n       *\n       * @returns The partial results sliced by the maxItemsToRender.\n       *\n       * @internal\n       */\n      const partialResults = computed(() => items.value.slice(0, props.maxItemsToRender));\n\n      return {\n        partialResults\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-partial-results-list {\n    display: flex;\n    flex-flow: column nowrap;\n    list-style-type: none;\n    padding: 0;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component loops through an array of partials an exposed a slot to use customize each partial.\n\n### Basic example\n\nIt renders a list of partial results using the default slot:\n\n```vue\n<template>\n  <PartialResultsList>\n    <template #default=\"{ partialResult }\">\n      <ResultsList :results=\"partialResult.results\" />\n    </template>\n  </PartialResultsList>\n</template>\n```\n\n### Configuring the number of partials\n\nIt sets the maximum partials to show to 3.\n\n```vue\n<template>\n  <PartialResultsList :maxItemsToRender=\"3\">\n    <template #default=\"{ partialResult }\">\n      <ResultsList :results=\"partialResult.results\" />\n    </template>\n  </PartialResultsList>\n</template>\n```\n\n### Rendering usage\n\nIt renders a list of partial results using the default slot. It will show the query, the partial\nresults and a button to update the query with the partial one.\n\n```vue\n<template>\n  <PartialResultsList>\n    <template #default=\"{ partialResult }\">\n      <span>{{ partialResult.query }}</span>\n      <BaseGrid :columns=\"4\" :items=\"partialResult.results\">\n        <template #result=\"{ item }\">\n          <BaseResultLink :result=\"item\">\n            <template #default=\"{ item }\">\n              <BaseResultImage :result=\"item\" />\n              <span class=\"x-result__title\">{{ item.name }}</span>\n            </template>\n          </BaseResultLink>\n        </template>\n      </BaseGrid>\n      <PartialQueryButton :query=\"partialResult.query\">\n        <template #default=\"{ query }\">Ver todos {{ query }}</template>\n      </PartialQueryButton>\n    </template>\n  </PartialResultsList>\n</template>\n```\n</docs>\n"],"names":["animation","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_createCommentVNode"],"mappings":";;;;;AACE,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EADF,MAESA,EAAAA,MAAAA,EAAAA,KAAAA,EAAAA,QAAAA,EAAAA;AAFT,EAAA,OAAA,IAAA,CAAA,cAAA,CAAA,MAAA,IAAAC,SAAA,EAIkC,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IAC9B,GAAA,EAAA,CAAA;AAAA,IACA,KAAI,EAAA,wBAAA;AAAA,IAAA,WAAA,EAAA,iBAAA;AANR,IAAA,GAAA,EAAA,IAAA;AAAA,GAAA,EAAA;;AAUe,OAAAF,SAAA,CAAA,IAAA,CAAA,EAAAG,kBAAA;AAAA,QAAuBC,QAAA;AAAA,QAAK,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,cAAA,EAAA,CAAA,aAAA,EAAA,KAAA,KAAA;AAChC,UAAA,OAAAL,SAAA,EAAmB,EAAAG,kBAAA,CAAA,IAAA,EAAA;AAAA,YACxB,sBAAU,KAAgB,CAAA,CAAA,EAAA,KAAA,CAAA,CAAA;AAAA,YAAA,KAAA,EAAA,kBAAA;AAE1B,YAAA,WAAA,EAAA,gBAAA;AAAA,WAIA,EAAA;AAAA,YAAAG,kBAAA,CAAA,mIAAA,CAAA;;;AAlBN,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAA,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"partial-results-list.vue.js","sources":["../../../../../src/x-modules/search/components/partial-results-list.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"partialResults.length\"\n    class=\"x-partial-results-list\"\n    data-test=\"partial-results\"\n    tag=\"ul\"\n  >\n    <li\n      v-for=\"(partialResult, index) in partialResults\"\n      :key=\"`${partialResult.query}-${index}`\"\n      class=\"x-partial-result\"\n      data-test=\"partial-result\"\n    >\n      <!--\n       @slot (Required) Partial results item content\n           @binding {Partial} partialResult - Partial Result data\n      -->\n      <slot :partial-result=\"partialResult\" />\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types/animation-prop'\nimport { searchXModule } from '../x-module'\n\n/**\n * It renders a list of partial results from {@link SearchState.partialResults} by default.\n * It also provides the partial result slot to customize the item with the partial result bound.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'PartialResultsList',\n  xModule: searchXModule.name,\n  props: {\n    /**\n     * Animation component that will be used to animate the partial results.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n\n    /**\n     * Maximum number of partial results to show.\n     *\n     * @public\n     */\n    maxItemsToRender: {\n      type: Number,\n      default: 5,\n    },\n  },\n  setup(props) {\n    /**\n     * The partials results from the search state.\n     *\n     * @public\n     */\n    const items = useState('search').partialResults\n\n    /**\n     * A limited number of partial results.\n     *\n     * @returns The partial results sliced by the maxItemsToRender.\n     *\n     * @internal\n     */\n    const partialResults = computed(() => items.value.slice(0, props.maxItemsToRender))\n\n    return {\n      partialResults,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-partial-results-list {\n  display: flex;\n  flex-flow: column nowrap;\n  list-style-type: none;\n  padding: 0;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component loops through an array of partials an exposed a slot to use customize each partial.\n\n### Basic example\n\nIt renders a list of partial results using the default slot:\n\n```vue\n<template>\n  <PartialResultsList>\n    <template #default=\"{ partialResult }\">\n      <ResultsList :results=\"partialResult.results\" />\n    </template>\n  </PartialResultsList>\n</template>\n```\n\n### Configuring the number of partials\n\nIt sets the maximum partials to show to 3.\n\n```vue\n<template>\n  <PartialResultsList :maxItemsToRender=\"3\">\n    <template #default=\"{ partialResult }\">\n      <ResultsList :results=\"partialResult.results\" />\n    </template>\n  </PartialResultsList>\n</template>\n```\n\n### Rendering usage\n\nIt renders a list of partial results using the default slot. It will show the query, the partial\nresults and a button to update the query with the partial one.\n\n```vue\n<template>\n  <PartialResultsList>\n    <template #default=\"{ partialResult }\">\n      <span>{{ partialResult.query }}</span>\n      <BaseGrid :columns=\"4\" :items=\"partialResult.results\">\n        <template #result=\"{ item }\">\n          <BaseResultLink :result=\"item\">\n            <template #default=\"{ item }\">\n              <BaseResultImage :result=\"item\" />\n              <span class=\"x-result__title\">{{ item.name }}</span>\n            </template>\n          </BaseResultLink>\n        </template>\n      </BaseGrid>\n      <PartialQueryButton :query=\"partialResult.query\">\n        <template #default=\"{ query }\">Ver todos {{ query }}</template>\n      </PartialQueryButton>\n    </template>\n  </PartialResultsList>\n</template>\n```\n</docs>\n"],"names":["animation","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_createCommentVNode"],"mappings":";;;;;AACE,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EADF,MAESA,EAAAA,MAAAA,EAAAA,KAAAA,EAAAA,QAAAA,EAAAA;AAFT,EAAA,OAAA,IAAA,CAAA,cAAA,CAAA,MAAA,IAAAC,SAAA,EAIkC,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IAC9B,GAAA,EAAA,CAAA;AAAA,IACA,KAAI,EAAA,wBAAA;AAAA,IAAA,WAAA,EAAA,iBAAA;AANR,IAAA,GAAA,EAAA,IAAA;AAAA,GAAA,EAAA;;AAUe,OAAAF,SAAA,CAAA,IAAA,CAAA,EAAAG,kBAAA;AAAA,QAAuBC,QAAA;AAAA,QAAK,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,cAAA,EAAA,CAAA,aAAA,EAAA,KAAA,KAAA;AAChC,UAAA,OAAAL,SAAA,EAAmB,EAAAG,kBAAA,CAAA,IAAA,EAAA;AAAA,YACxB,sBAAU,KAAgB,CAAA,CAAA,EAAA,KAAA,CAAA,CAAA;AAAA,YAAA,KAAA,EAAA,kBAAA;YAM1B,WAAwC,EAAA,gBAAA;AAAA,WAAA,EAAA;;;AAlB9C,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAG,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

package/js/x-modules/search/components/partial-results-list.vue2.js

@@ -1,7 +1,7 @@
 import { defineComponent, computed } from 'vue';
-import { searchXModule } from '../x-module.js';
-import { AnimationProp } from '../../../types/animation-prop.js';
 import { useState } from '../../../composables/use-state.js';
+import { AnimationProp } from '../../../types/animation-prop.js';
+import { searchXModule } from '../x-module.js';
 
 /**
  * It renders a list of partial results from {@link SearchState.partialResults} by default.
@@ -20,7 +20,7 @@ var _sfc_main = defineComponent({
          */
         animation: {
             type: AnimationProp,
-            default: 'ul'
+            default: 'ul',
         },
         /**
          * Maximum number of partial results to show.
@@ -29,8 +29,8 @@ var _sfc_main = defineComponent({
          */
         maxItemsToRender: {
             type: Number,
-            default: 5
-        }
+            default: 5,
+        },
     },
     setup(props) {
         /**
@@ -38,9 +38,7 @@ var _sfc_main = defineComponent({
          *
          * @public
          */
-        const items = useState('search', [
-            'partialResults'
-        ]).partialResults;
+        const items = useState('search').partialResults;
         /**
          * A limited number of partial results.
          *
@@ -50,9 +48,9 @@ var _sfc_main = defineComponent({
          */
         const partialResults = computed(() => items.value.slice(0, props.maxItemsToRender));
         return {
-            partialResults
+            partialResults,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/x-modules/search/components/partial-results-list.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"partial-results-list.vue2.js","sources":["../../../../../src/x-modules/search/components/partial-results-list.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"partialResults.length\"\n    class=\"x-partial-results-list\"\n    data-test=\"partial-results\"\n    tag=\"ul\"\n  >\n    <li\n      v-for=\"(partialResult, index) in partialResults\"\n      :key=\"`${partialResult.query}-${index}`\"\n      class=\"x-partial-result\"\n      data-test=\"partial-result\"\n    >\n      <!--\n       @slot (Required) Partial results item content\n           @binding {Partial} partialResult - Partial Result data\n      -->\n      <slot :partialResult=\"partialResult\" />\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { PartialResult } from '@empathyco/x-types';\n  import { computed, ComputedRef, defineComponent } from 'vue';\n  import { searchXModule } from '../x-module';\n  import { AnimationProp } from '../../../types/animation-prop';\n  import { useState } from '../../../composables/use-state';\n\n  /**\n   * It renders a list of partial results from {@link SearchState.partialResults} by default.\n   * It also provides the partial result slot to customize the item with the partial result bound.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'PartialResultsList',\n    xModule: searchXModule.name,\n    props: {\n      /**\n       * Animation component that will be used to animate the partial results.\n       *\n       * @public\n       */\n      animation: {\n        type: AnimationProp,\n        default: 'ul'\n      },\n\n      /**\n       * Maximum number of partial results to show.\n       *\n       * @public\n       */\n      maxItemsToRender: {\n        type: Number,\n        default: 5\n      }\n    },\n    setup(props) {\n      /**\n       * The partials results from the search state.\n       *\n       * @public\n       */\n      const items: ComputedRef<PartialResult[]> = useState('search', [\n        'partialResults'\n      ]).partialResults;\n\n      /**\n       * A limited number of partial results.\n       *\n       * @returns The partial results sliced by the maxItemsToRender.\n       *\n       * @internal\n       */\n      const partialResults = computed(() => items.value.slice(0, props.maxItemsToRender));\n\n      return {\n        partialResults\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-partial-results-list {\n    display: flex;\n    flex-flow: column nowrap;\n    list-style-type: none;\n    padding: 0;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component loops through an array of partials an exposed a slot to use customize each partial.\n\n### Basic example\n\nIt renders a list of partial results using the default slot:\n\n```vue\n<template>\n  <PartialResultsList>\n    <template #default=\"{ partialResult }\">\n      <ResultsList :results=\"partialResult.results\" />\n    </template>\n  </PartialResultsList>\n</template>\n```\n\n### Configuring the number of partials\n\nIt sets the maximum partials to show to 3.\n\n```vue\n<template>\n  <PartialResultsList :maxItemsToRender=\"3\">\n    <template #default=\"{ partialResult }\">\n      <ResultsList :results=\"partialResult.results\" />\n    </template>\n  </PartialResultsList>\n</template>\n```\n\n### Rendering usage\n\nIt renders a list of partial results using the default slot. It will show the query, the partial\nresults and a button to update the query with the partial one.\n\n```vue\n<template>\n  <PartialResultsList>\n    <template #default=\"{ partialResult }\">\n      <span>{{ partialResult.query }}</span>\n      <BaseGrid :columns=\"4\" :items=\"partialResult.results\">\n        <template #result=\"{ item }\">\n          <BaseResultLink :result=\"item\">\n            <template #default=\"{ item }\">\n              <BaseResultImage :result=\"item\" />\n              <span class=\"x-result__title\">{{ item.name }}</span>\n            </template>\n          </BaseResultLink>\n        </template>\n      </BaseGrid>\n      <PartialQueryButton :query=\"partialResult.query\">\n        <template #default=\"{ query }\">Ver todos {{ query }}</template>\n      </PartialQueryButton>\n    </template>\n  </PartialResultsList>\n</template>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AA8BE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,oBAAoB;IAC1B,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAG;AACb,SAAA;AAED;;;;AAIE;AACF,QAAA,gBAAgB,EAAE;AAChB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAA;AACX,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;AACF,QAAA,MAAM,KAAK,GAAiC,QAAQ,CAAC,QAAQ,EAAE;YAC7D,gBAAe;SAChB,CAAC,CAAC,cAAc,CAAA;AAEjB;;;;;;AAME;QACF,MAAM,cAAe,GAAE,QAAQ,CAAC,MAAM,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAA;QAEnF,OAAO;YACL,cAAa;SACd,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"partial-results-list.vue2.js","sources":["../../../../../src/x-modules/search/components/partial-results-list.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"partialResults.length\"\n    class=\"x-partial-results-list\"\n    data-test=\"partial-results\"\n    tag=\"ul\"\n  >\n    <li\n      v-for=\"(partialResult, index) in partialResults\"\n      :key=\"`${partialResult.query}-${index}`\"\n      class=\"x-partial-result\"\n      data-test=\"partial-result\"\n    >\n      <!--\n       @slot (Required) Partial results item content\n           @binding {Partial} partialResult - Partial Result data\n      -->\n      <slot :partial-result=\"partialResult\" />\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types/animation-prop'\nimport { searchXModule } from '../x-module'\n\n/**\n * It renders a list of partial results from {@link SearchState.partialResults} by default.\n * It also provides the partial result slot to customize the item with the partial result bound.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'PartialResultsList',\n  xModule: searchXModule.name,\n  props: {\n    /**\n     * Animation component that will be used to animate the partial results.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n\n    /**\n     * Maximum number of partial results to show.\n     *\n     * @public\n     */\n    maxItemsToRender: {\n      type: Number,\n      default: 5,\n    },\n  },\n  setup(props) {\n    /**\n     * The partials results from the search state.\n     *\n     * @public\n     */\n    const items = useState('search').partialResults\n\n    /**\n     * A limited number of partial results.\n     *\n     * @returns The partial results sliced by the maxItemsToRender.\n     *\n     * @internal\n     */\n    const partialResults = computed(() => items.value.slice(0, props.maxItemsToRender))\n\n    return {\n      partialResults,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-partial-results-list {\n  display: flex;\n  flex-flow: column nowrap;\n  list-style-type: none;\n  padding: 0;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component loops through an array of partials an exposed a slot to use customize each partial.\n\n### Basic example\n\nIt renders a list of partial results using the default slot:\n\n```vue\n<template>\n  <PartialResultsList>\n    <template #default=\"{ partialResult }\">\n      <ResultsList :results=\"partialResult.results\" />\n    </template>\n  </PartialResultsList>\n</template>\n```\n\n### Configuring the number of partials\n\nIt sets the maximum partials to show to 3.\n\n```vue\n<template>\n  <PartialResultsList :maxItemsToRender=\"3\">\n    <template #default=\"{ partialResult }\">\n      <ResultsList :results=\"partialResult.results\" />\n    </template>\n  </PartialResultsList>\n</template>\n```\n\n### Rendering usage\n\nIt renders a list of partial results using the default slot. It will show the query, the partial\nresults and a button to update the query with the partial one.\n\n```vue\n<template>\n  <PartialResultsList>\n    <template #default=\"{ partialResult }\">\n      <span>{{ partialResult.query }}</span>\n      <BaseGrid :columns=\"4\" :items=\"partialResult.results\">\n        <template #result=\"{ item }\">\n          <BaseResultLink :result=\"item\">\n            <template #default=\"{ item }\">\n              <BaseResultImage :result=\"item\" />\n              <span class=\"x-result__title\">{{ item.name }}</span>\n            </template>\n          </BaseResultLink>\n        </template>\n      </BaseGrid>\n      <PartialQueryButton :query=\"partialResult.query\">\n        <template #default=\"{ query }\">Ver todos {{ query }}</template>\n      </PartialQueryButton>\n    </template>\n  </PartialResultsList>\n</template>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AA6BA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,oBAAoB;IAC1B,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AAED;;;;AAIE;AACF,QAAA,gBAAgB,EAAE;AAChB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAC;AACX,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;QACF,MAAM,KAAI,GAAI,QAAQ,CAAC,QAAQ,CAAC,CAAC,cAAa,CAAA;AAE9C;;;;;;AAME;QACF,MAAM,cAAe,GAAE,QAAQ,CAAC,MAAM,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAA,CAAA;QAElF,OAAO;YACL,cAAc;SAChB,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/search/components/promoted.vue.js

@@ -1,5 +1,5 @@
 import _sfc_main from './promoted.vue2.js';
-import { openBlock, createElementBlock, createElementVNode, normalizeClass, toDisplayString } from 'vue';
+import { openBlock, createElementBlock, withModifiers, createElementVNode, normalizeClass, toDisplayString } from 'vue';
 import './promoted.vue3.js';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
@@ -7,10 +7,12 @@ const _hoisted_1 = ["href"];
 const _hoisted_2 = ["src", "alt"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("a", {
-    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.emitClickEvent && _ctx.emitClickEvent(...args)),
     href: _ctx.promoted.url,
     class: "x-promoted",
-    "data-test": "promoted"
+    "data-test": "promoted",
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.emitUserClickedAPromoted && _ctx.emitUserClickedAPromoted(...args)),
+    onContextmenu: _cache[1] || (_cache[1] = withModifiers((...args) => _ctx.emitUserClickedAPromoted && _ctx.emitUserClickedAPromoted(...args), ["right"])),
+    onMouseup: _cache[2] || (_cache[2] = withModifiers((...args) => _ctx.emitUserClickedAPromoted && _ctx.emitUserClickedAPromoted(...args), ["middle"]))
   }, [
     createElementVNode("img", {
       src: _ctx.promoted.image,
@@ -27,7 +29,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       3
       /* TEXT, CLASS */
     )
-  ], 8, _hoisted_1);
+  ], 40, _hoisted_1);
 }
 var promoted = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-4a8fc4b3"]]);