@empathyco/x-components 5.0.0-alpha.9 → 6.0.0-alpha.2

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

@@ -1,9 +1,7 @@
-import { __decorate } from 'tslib';
-import Vue from 'vue';
-import { Prop, Component } from 'vue-property-decorator';
-import { State } from '../../../components/decorators/store.decorators.js';
-import { xComponentMixin } from '../../../components/x-component.mixin.js';
+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';
 
 /**
  * It renders a list of partial results from {@link SearchState.partialResults} by default.
@@ -11,33 +9,51 @@ import { searchXModule } from '../x-module.js';
  *
  * @public
  */
-let PartialResultsList = class PartialResultsList extends Vue {
-    /**
-     * A limited number of partial results.
-     *
-     * @returns The partial results sliced by the maxItemsToRender.
-     *
-     * @internal
-     */
-    get partialResults() {
-        return this.items.slice(0, this.maxItemsToRender);
+var _sfc_main = defineComponent({
+    name: 'PartialResultsList',
+    xModule: searchXModule.name,
+    props: {
+        /**
+         * Animation component that will be used to animate the partial results.
+         *
+         * @public
+         */
+        animation: {
+            type: AnimationProp,
+            default: 'ul'
+        },
+        /**
+         * Maximum number of partial results to show.
+         *
+         * @public
+         */
+        maxItemsToRender: {
+            type: Number,
+            default: 5
+        }
+    },
+    setup(props) {
+        /**
+         * The partials results from the search state.
+         *
+         * @public
+         */
+        const items = useState('search', [
+            'partialResults'
+        ]).partialResults;
+        /**
+         * A limited number of partial results.
+         *
+         * @returns The partial results sliced by the maxItemsToRender.
+         *
+         * @internal
+         */
+        const partialResults = computed(() => items.value.slice(0, props.maxItemsToRender));
+        return {
+            partialResults
+        };
     }
-};
-__decorate([
-    Prop({ default: 'ul' })
-], PartialResultsList.prototype, "animation", void 0);
-__decorate([
-    State('search', 'partialResults')
-], PartialResultsList.prototype, "items", void 0);
-__decorate([
-    Prop({ default: 5 })
-], PartialResultsList.prototype, "maxItemsToRender", void 0);
-PartialResultsList = __decorate([
-    Component({
-        mixins: [xComponentMixin(searchXModule)]
-    })
-], PartialResultsList);
-var script = PartialResultsList;
+});
 
-export { script as default };
+export { _sfc_main as default };
 //# sourceMappingURL=partial-results-list.vue2.js.map

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?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  import { PartialResult } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { 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   */\n  @Component({\n    mixins: [xComponentMixin(searchXModule)]\n  })\n  export default class PartialResultsList extends Vue {\n    /**\n     * Animation component that will be used to animate the partial results.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue | string;\n    /**\n     * The partials results from the search state.\n     *\n     * @public\n     */\n    @State('search', 'partialResults')\n    public items!: PartialResult[];\n    /**\n     * Maximum number of partial results to show.\n     *\n     * @public\n     */\n    @Prop({ default: 5 })\n    protected maxItemsToRender!: number;\n    /**\n     * A limited number of partial results.\n     *\n     * @returns The partial results sliced by the maxItemsToRender.\n     *\n     * @internal\n     */\n    protected get partialResults(): PartialResult[] {\n      return this.items.slice(0, this.maxItemsToRender);\n    }\n  }\n"],"names":[],"mappings":";;;;;;;AA+BE;;;;;AAKG;AAIY,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,GAAG,CAAA;AAsBjD;;;;;;AAMG;AACH,IAAA,IAAc,cAAc,GAAA;AAC1B,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;KACnD;CACF,CAAA;AAzBC,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACW,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAOnC,UAAA,CAAA;AADC,IAAA,KAAK,CAAC,QAAQ,EAAE,gBAAgB,CAAC;AACH,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAO/B,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;AACe,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AArBjB,kBAAkB,GAAA,UAAA,CAAA;AAHtC,IAAA,SAAS,CAAC;AACT,QAAA,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;KACzC,CAAC;AACmB,CAAA,EAAA,kBAAkB,CAgCtC,CAAA;aAhCoB,kBAAkB;;;;"}
+{"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;;;;"}

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

@@ -1,16 +1,7 @@
-import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
+import injectCss from '../../../../tools/inject-css.js';
 
-var css = ".x-partial-results-list[data-v-dee1f6fa] {\n  display: flex;\n  flex-flow: column nowrap;\n  list-style-type: none;\n  padding: 0;\n}";
-           const isBrowser = /*#__PURE__*/ (function () {
-             return (
-                Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==
-                '[object process]'
-             );
-           })();
-           const useBrowserInjector =
-             (typeof STRIP_SSR_INJECTOR !== 'undefined' && STRIP_SSR_INJECTOR) || isBrowser;
-           const injector = useBrowserInjector ? createInjector({}) : createInjectorSSR({});
-           injector('/home/runner/work/x/x/packages/x-components/src/x-modules/search/components/partial-results-list.vue?rollup-plugin-vue=styles.0.css',{source:css});
+var css = ".x-partial-results-list[data-v-c06ba696]{display:flex;flex-flow:column nowrap;list-style-type:none;padding:0}";
+injectCss(css);
 
 export { css, css as default };
 //# sourceMappingURL=partial-results-list.vue3.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"partial-results-list.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
+{"version":3,"file":"partial-results-list.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

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

@@ -1,69 +1,35 @@
-import script from './promoted.vue2.js';
+import _sfc_main from './promoted.vue2.js';
+import { openBlock, createElementBlock, createElementVNode, normalizeClass, toDisplayString } from 'vue';
 import './promoted.vue3.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
-/* script */
-const __vue_script__ = script;
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c(
-    "a",
-    {
-      staticClass: "x-promoted",
-      attrs: { href: _vm.promoted.url, "data-test": "promoted" },
-      on: { click: _vm.emitClickEvent },
-    },
-    [
-      _c("img", {
-        staticClass: "x-promoted__image",
-        attrs: { src: _vm.promoted.image, alt: _vm.promoted.title },
-      }),
-      _c(
-        "h2",
-        {
-          staticClass: "x-promoted__title",
-          class: _vm.titleClass,
-          attrs: { "data-test": "promoted-title" },
-        },
-        [_vm._v(" " + _vm._s(_vm.promoted.title) + " ")]
-      ),
-    ]
-  )
-};
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
+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"
+  }, [
+    createElementVNode("img", {
+      src: _ctx.promoted.image,
+      class: "x-promoted__image",
+      alt: _ctx.promoted.title
+    }, null, 8, _hoisted_2),
+    createElementVNode(
+      "h2",
+      {
+        class: normalizeClass(["x-promoted__title", _ctx.titleClass]),
+        "data-test": "promoted-title"
+      },
+      toDisplayString(_ctx.promoted.title),
+      3
+      /* TEXT, CLASS */
+    )
+  ], 8, _hoisted_1);
+}
+var promoted = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-4a8fc4b3"]]);
 
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export { __vue_component__ as default };
+export { promoted as default };
 //# sourceMappingURL=promoted.vue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"promoted.vue.js","sources":["../../../../../src/x-modules/search/components/promoted.vue"],"sourcesContent":["<template>\n  <a @click=\"emitClickEvent\" :href=\"promoted.url\" class=\"x-promoted\" data-test=\"promoted\">\n    <img :src=\"promoted.image\" class=\"x-promoted__image\" :alt=\"promoted.title\" />\n    <h2 class=\"x-promoted__title\" :class=\"titleClass\" data-test=\"promoted-title\">\n      {{ promoted.title }}\n    </h2>\n  </a>\n</template>\n\n<script lang=\"ts\">\n  import { Promoted as PromotedModel } from '@empathyco/x-types';\n  import { Component, Prop } from 'vue-property-decorator';\n  import Vue from 'vue';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { searchXModule } from '../x-module';\n  import { dynamicPropsMixin } from '../../../components/dynamic-props.mixin';\n\n  /**\n   * A promoted result is just an item that has been inserted into the search results to advertise\n   * something. Usually it is one of the first items in the grid, and has the same shape as a\n   * result. It just contains a link to the promoted content, an image, and a title.\n   *\n   * Additionally, this component exposes the following props to modify the classes of the\n   * elements: `titleClass`.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(searchXModule), dynamicPropsMixin(['titleClass'])]\n  })\n  export default class Promoted extends Vue {\n    /**\n     * The promoted data.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    public promoted!: PromotedModel;\n\n    /**\n     * Emits the promoted click event.\n     *\n     * @internal\n     */\n    protected emitClickEvent(): void {\n      this.$x.emit('UserClickedAPromoted', this.promoted);\n    }\n  }\n</script>\n\n<style lang=\"scss\">\n  .x-promoted {\n    display: flex;\n    flex-flow: column nowrap;\n    text-decoration: none;\n\n    &__image {\n      width: 100%;\n      object-fit: contain;\n    }\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 promoted data is passed as a prop.\n\n_Here you can see how the `Promoted` component is rendered._\n\n```vue\n<template>\n  <Promoted :promoted=\"promoted\" />\n</template>\n\n<script>\n  import { Promoted } from '@empathyco/x-components/search';\n\n  export default {\n    name: 'PromotedDemo',\n    components: {\n      Promoted\n    },\n    data() {\n      return {\n        promoted: {\n          modelName: 'Promoted',\n          id: 'promoted-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 promoted title.\n\n```vue\n<template>\n  <Promoted :promoted=\"promoted\" titleClass=\"x-bg-neutral-50\" />\n</template>\n\n<script>\n  import { Promoted } from '@empathyco/x-components/search';\n\n  export default {\n    name: 'PromotedDemo',\n    components: {\n      Promoted\n    },\n    data() {\n      return {\n        promoted: {\n          modelName: 'Promoted',\n          id: 'promoted-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":";;;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"promoted.vue.js","sources":["../../../../../src/x-modules/search/components/promoted.vue"],"sourcesContent":["<template>\n  <a @click=\"emitClickEvent\" :href=\"promoted.url\" class=\"x-promoted\" data-test=\"promoted\">\n    <img :src=\"promoted.image\" class=\"x-promoted__image\" :alt=\"promoted.title\" />\n    <h2 class=\"x-promoted__title\" :class=\"titleClass\" data-test=\"promoted-title\">\n      {{ promoted.title }}\n    </h2>\n  </a>\n</template>\n\n<script lang=\"ts\">\n  import { Promoted as PromotedModel } from '@empathyco/x-types';\n  import { defineComponent, PropType } from 'vue';\n  import { searchXModule } from '../x-module';\n  import { useXBus } from '../../../composables/use-x-bus';\n\n  /**\n   * A promoted result is just an item that has been inserted into the search results to advertise\n   * something. Usually it is one of the first items in the grid, and has the same shape as a\n   * result. It just contains a link to the promoted content, an image, and a title.\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: 'Promoted',\n    xModule: searchXModule.name,\n    props: {\n      /**\n       * The promoted data.\n       *\n       * @public\n       */\n      promoted: {\n        type: Object as PropType<PromotedModel>,\n        required: true\n      },\n      titleClass: String\n    },\n    setup(props) {\n      const xBus = useXBus();\n\n      /**\n       * Emits the promoted click event.\n       *\n       * @internal\n       */\n      const emitClickEvent = () => {\n        xBus.emit('UserClickedAPromoted', props.promoted);\n      };\n\n      return {\n        emitClickEvent\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-promoted {\n    display: flex;\n    flex-flow: column nowrap;\n    text-decoration: none;\n  }\n\n  .x-promoted__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 promoted data is passed as a prop.\n\n_Here you can see how the `Promoted` component is rendered._\n\n```vue\n<template>\n  <Promoted :promoted=\"promoted\" />\n</template>\n\n<script>\n  import { Promoted } from '@empathyco/x-components/search';\n\n  export default {\n    name: 'PromotedDemo',\n    components: {\n      Promoted\n    },\n    data() {\n      return {\n        promoted: {\n          modelName: 'Promoted',\n          id: 'promoted-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 promoted title.\n\n```vue\n<template>\n  <Promoted :promoted=\"promoted\" titleClass=\"x-bg-neutral-50\" />\n</template>\n\n<script>\n  import { Promoted } from '@empathyco/x-components/search';\n\n  export default {\n    name: 'PromotedDemo',\n    components: {\n      Promoted\n    },\n    data() {\n      return {\n        promoted: {\n          modelName: 'Promoted',\n          id: 'promoted-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":["promoted","_createElementBlock","_createElementVNode","_normalizeClass"],"mappings":";;;;;;;AACM,SAAA,WAAA,CAAK,IAAE,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AAAuBA,EAAAA,OAAAA,SAAAA,EAAAA,EAASC,kBAAG,CAAA,GAAA,EAAA;AAAA,IAAE,SAAM,MAAY,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,cAAA,IAAA,IAAA,CAAA,cAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IAAC,WAAS,QAAC,CAAA,GAAA;AAAA,IAAA,KAAA,EAAA,YAAA;AAC3E,IAAA,WAAA,EAAA,UAAA;AAAA,GAAA,EAAA;AAAiC,IAAAC,kBAAA,CAAA,KAAA,EAAA;AAAA,MAAqB,KAAKF,IAAS,CAAA,QAAA,CAAA,KAAA;AAAA,MAAA,KAAA,EAAA,mBAAA;MACpE,GAEK,EAAA,IAAA,CAAA,QAAA,CAAA,KAAA;AAAA,KAAA,EAFD,MAHR,CAGc,EAAA,UAAA,CAAA;AAAA,IAAAE,kBAAA;AAAkD,MAAA,IAAA;AAAA,MAAA;AAAA,QAAA,KAAA,EAAAC,cAAA,CACvDH,CAAc,mBAAA,EAAA,IAAA,CAAA,UAAA,CAAA,CAAA;AAAA,QAAA,WAAA,EAAA,gBAAA;;;;;;;;;;;;"}

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

@@ -1,9 +1,6 @@
-import { __decorate } from 'tslib';
-import { Prop, Component } from 'vue-property-decorator';
-import Vue from 'vue';
-import { xComponentMixin } from '../../../components/x-component.mixin.js';
+import { defineComponent } from 'vue';
 import { searchXModule } from '../x-module.js';
-import { dynamicPropsMixin } from '../../../components/dynamic-props.mixin.js';
+import { useXBus } from '../../../composables/use-x-bus.js';
 
 /**
  * A promoted result is just an item that has been inserted into the search results to advertise
@@ -15,25 +12,36 @@ import { dynamicPropsMixin } from '../../../components/dynamic-props.mixin.js';
  *
  * @public
  */
-let Promoted = class Promoted extends Vue {
-    /**
-     * Emits the promoted click event.
-     *
-     * @internal
-     */
-    emitClickEvent() {
-        this.$x.emit('UserClickedAPromoted', this.promoted);
+var _sfc_main = defineComponent({
+    name: 'Promoted',
+    xModule: searchXModule.name,
+    props: {
+        /**
+         * The promoted data.
+         *
+         * @public
+         */
+        promoted: {
+            type: Object,
+            required: true
+        },
+        titleClass: String
+    },
+    setup(props) {
+        const xBus = useXBus();
+        /**
+         * Emits the promoted click event.
+         *
+         * @internal
+         */
+        const emitClickEvent = () => {
+            xBus.emit('UserClickedAPromoted', props.promoted);
+        };
+        return {
+            emitClickEvent
+        };
     }
-};
-__decorate([
-    Prop({ required: true })
-], Promoted.prototype, "promoted", void 0);
-Promoted = __decorate([
-    Component({
-        mixins: [xComponentMixin(searchXModule), dynamicPropsMixin(['titleClass'])]
-    })
-], Promoted);
-var script = Promoted;
+});
 
-export { script as default };
+export { _sfc_main as default };
 //# sourceMappingURL=promoted.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"promoted.vue2.js","sources":["../../../../../src/x-modules/search/components/promoted.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n  import { Promoted as PromotedModel } from '@empathyco/x-types';\n  import { Component, Prop } from 'vue-property-decorator';\n  import Vue from 'vue';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { searchXModule } from '../x-module';\n  import { dynamicPropsMixin } from '../../../components/dynamic-props.mixin';\n\n  /**\n   * A promoted result is just an item that has been inserted into the search results to advertise\n   * something. Usually it is one of the first items in the grid, and has the same shape as a\n   * result. It just contains a link to the promoted content, an image, and a title.\n   *\n   * Additionally, this component exposes the following props to modify the classes of the\n   * elements: `titleClass`.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(searchXModule), dynamicPropsMixin(['titleClass'])]\n  })\n  export default class Promoted extends Vue {\n    /**\n     * The promoted data.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    public promoted!: PromotedModel;\n\n    /**\n     * Emits the promoted click event.\n     *\n     * @internal\n     */\n    protected emitClickEvent(): void {\n      this.$x.emit('UserClickedAPromoted', this.promoted);\n    }\n  }\n"],"names":[],"mappings":";;;;;;;AAiBE;;;;;;;;;AASG;AAIY,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,GAAG,CAAA;AASvC;;;;AAIG;IACO,cAAc,GAAA;QACtB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;KACrD;CACF,CAAA;AAVC,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AACO,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAPb,QAAQ,GAAA,UAAA,CAAA;AAH5B,IAAA,SAAS,CAAC;AACT,QAAA,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,EAAE,iBAAiB,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC;KAC5E,CAAC;AACmB,CAAA,EAAA,QAAQ,CAiB5B,CAAA;aAjBoB,QAAQ;;;;"}
+{"version":3,"file":"promoted.vue2.js","sources":["../../../../../src/x-modules/search/components/promoted.vue"],"sourcesContent":["<template>\n  <a @click=\"emitClickEvent\" :href=\"promoted.url\" class=\"x-promoted\" data-test=\"promoted\">\n    <img :src=\"promoted.image\" class=\"x-promoted__image\" :alt=\"promoted.title\" />\n    <h2 class=\"x-promoted__title\" :class=\"titleClass\" data-test=\"promoted-title\">\n      {{ promoted.title }}\n    </h2>\n  </a>\n</template>\n\n<script lang=\"ts\">\n  import { Promoted as PromotedModel } from '@empathyco/x-types';\n  import { defineComponent, PropType } from 'vue';\n  import { searchXModule } from '../x-module';\n  import { useXBus } from '../../../composables/use-x-bus';\n\n  /**\n   * A promoted result is just an item that has been inserted into the search results to advertise\n   * something. Usually it is one of the first items in the grid, and has the same shape as a\n   * result. It just contains a link to the promoted content, an image, and a title.\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: 'Promoted',\n    xModule: searchXModule.name,\n    props: {\n      /**\n       * The promoted data.\n       *\n       * @public\n       */\n      promoted: {\n        type: Object as PropType<PromotedModel>,\n        required: true\n      },\n      titleClass: String\n    },\n    setup(props) {\n      const xBus = useXBus();\n\n      /**\n       * Emits the promoted click event.\n       *\n       * @internal\n       */\n      const emitClickEvent = () => {\n        xBus.emit('UserClickedAPromoted', props.promoted);\n      };\n\n      return {\n        emitClickEvent\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-promoted {\n    display: flex;\n    flex-flow: column nowrap;\n    text-decoration: none;\n  }\n\n  .x-promoted__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 promoted data is passed as a prop.\n\n_Here you can see how the `Promoted` component is rendered._\n\n```vue\n<template>\n  <Promoted :promoted=\"promoted\" />\n</template>\n\n<script>\n  import { Promoted } from '@empathyco/x-components/search';\n\n  export default {\n    name: 'PromotedDemo',\n    components: {\n      Promoted\n    },\n    data() {\n      return {\n        promoted: {\n          modelName: 'Promoted',\n          id: 'promoted-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 promoted title.\n\n```vue\n<template>\n  <Promoted :promoted=\"promoted\" titleClass=\"x-bg-neutral-50\" />\n</template>\n\n<script>\n  import { Promoted } from '@empathyco/x-components/search';\n\n  export default {\n    name: 'PromotedDemo',\n    components: {\n      Promoted\n    },\n    data() {\n      return {\n        promoted: {\n          modelName: 'Promoted',\n          id: 'promoted-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":";;;;AAeE;;;;;;;;;AASE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,UAAU;IAChB,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAiC;AACvC,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;QACF,MAAM,iBAAiB,MAAM;YAC3B,IAAI,CAAC,IAAI,CAAC,sBAAsB,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAA;AACnD,SAAC,CAAA;QAED,OAAO;YACL,cAAa;SACd,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

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

@@ -1,16 +1,7 @@
-import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
+import injectCss from '../../../../tools/inject-css.js';
 
-var css = ".x-promoted {\n  display: flex;\n  flex-flow: column nowrap;\n  text-decoration: none;\n}\n.x-promoted__image {\n  width: 100%;\n  object-fit: contain;\n}";
-           const isBrowser = /*#__PURE__*/ (function () {
-             return (
-                Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==
-                '[object process]'
-             );
-           })();
-           const useBrowserInjector =
-             (typeof STRIP_SSR_INJECTOR !== 'undefined' && STRIP_SSR_INJECTOR) || isBrowser;
-           const injector = useBrowserInjector ? createInjector({}) : createInjectorSSR({});
-           injector('/home/runner/work/x/x/packages/x-components/src/x-modules/search/components/promoted.vue?rollup-plugin-vue=styles.0.css',{source:css});
+var css = ".x-promoted[data-v-4a8fc4b3]{display:flex;flex-flow:column nowrap;text-decoration:none}.x-promoted__image[data-v-4a8fc4b3]{object-fit:contain;width:100%}";
+injectCss(css);
 
 export { css, css as default };
 //# sourceMappingURL=promoted.vue3.js.map

package/js/x-modules/search/components/promoted.vue3.js.map

@@ -1 +1 @@
-{"version":3,"file":"promoted.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
+{"version":3,"file":"promoted.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

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

@@ -1,81 +1,81 @@
-import script from './promoteds-list.vue2.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import { defineComponent, inject, computed, provide, h } from 'vue';
+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';
 
-/* script */
-const __vue_script__ = script;
+/**
+ * It renders a {@link ItemsList} of promoteds from {@link SearchState.promoteds}.
+ *
+ * The component provides a default slot which wraps the whole component with the `promoteds`
+ * plus the `injectedListItems` which also contains the injected list items from
+ * the ancestor.
+ *
+ * It also provides the parent slots to customize the items.
+ *
+ * @public
+ */
+var _sfc_main = defineComponent({
+    name: 'PromotedsList',
+    xModule: searchXModule.name,
+    props: {
+        /** Animation component that will be used to animate the promoteds. */
+        animation: {
+            type: AnimationProp,
+            default: 'ul'
+        }
+    },
+    setup(props, { slots }) {
+        const $x = use$x();
+        /** The promoteds to render from the state. */
+        const stateItems = useState('search', ['promoteds']).promoteds;
+        /** It injects {@link ListItem} provided by an ancestor as injectedListItems. */
+        const injectedListItems = inject(LIST_ITEMS_KEY);
+        /**
+         * The `stateItems` concatenated with the `injectedListItems` if there are.
+         *
+         * @remarks This computed defines the merging strategy of the `stateItems` and the
+         * `injectedListItems`.
+         *
+         * @returns List of {@link ListItem}.
+         */
+        const items = computed(() => {
+            if (!injectedListItems?.value.length) {
+                return stateItems.value;
+            }
+            const items = [...injectedListItems.value];
+            for (const item of stateItems.value) {
+                const position = item.position ?? 1;
+                let index = position - 1;
+                while (items.at(index)?.modelName === 'Promoted') {
+                    index++;
+                }
+                const isIndexInLoadedPages = index <= items.length;
+                const areAllPagesLoaded = $x.results.length === $x.totalResults;
+                if (!isIndexInLoadedPages && !areAllPagesLoaded) {
+                    break;
+                }
+                items.splice(index, 0, item);
+            }
+            return items;
+        });
+        /**
+         * The computed list items of the entity that uses the mixin.
+         *
+         * @remarks It should be overridden in the component that uses the mixin and it's intended to be
+         * filled with items from the state. Vue doesn't allow mixins as abstract classes.
+         * @returns An empty array as fallback in case it is not overridden.
+         */
+        provide(LIST_ITEMS_KEY, items);
+        return () => {
+            const innerProps = { items: items.value, animation: props.animation };
+            // https://vue-land.github.io/faq/forwarding-slots#passing-all-slots
+            return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps, slots);
+        };
+    }
+});
 
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _vm.items.length > 0
-    ? _c(
-        "div",
-        [
-          _vm._t(
-            "default",
-            function () {
-              return [
-                _c("ItemsList", {
-                  attrs: { animation: _vm.animation, items: _vm.items },
-                  scopedSlots: _vm._u(
-                    [
-                      _vm._l(_vm.slots, function (_, slotName) {
-                        return {
-                          key: slotName,
-                          fn: function (ref) {
-                            var item = ref.item;
-                            return [_vm._t(slotName, null, { item: item })]
-                          },
-                        }
-                      }),
-                    ],
-                    null,
-                    true
-                  ),
-                }),
-              ]
-            },
-            null,
-            { items: _vm.items, animation: _vm.animation }
-          ),
-        ],
-        2
-      )
-    : _vm._e()
-};
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export { __vue_component__ as default };
+export { _sfc_main as default };
 //# sourceMappingURL=promoteds-list.vue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"promoteds-list.vue.js","sources":["../../../../../src/x-modules/search/components/promoteds-list.vue"],"sourcesContent":["<template>\n  <div v-if=\"items.length > 0\">\n    <!--\n      @slot Customized Promoteds List layout.\n        @binding {Promoted[]} items - Promoteds plus the injected list items to render.\n        @binding {Vue | string} animation - Animation to animate the elements.\n    -->\n    <slot v-bind=\"{ items, animation }\">\n      <ItemsList :animation=\"animation\" :items=\"items\">\n        <template v-for=\"(_, slotName) in slots\" v-slot:[slotName]=\"{ item }\">\n          <slot :name=\"slotName\" :item=\"item\" />\n        </template>\n      </ItemsList>\n    </slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { Promoted } from '@empathyco/x-types';\n  import { computed, ComputedRef, defineComponent, inject, provide, Ref } from 'vue';\n  import ItemsList from '../../../components/items-list.vue';\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 { useRegisterXModule } from '../../../composables/use-register-x-module';\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} of promoteds from {@link SearchState.promoteds} by default\n   * using the `ItemsInjectionMixin`.\n   *\n   * The component provides a default slot which wraps the whole component with the `promoteds`\n   * plus the `searchInjectedItems` 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\n  export default defineComponent({\n    name: 'PromotedsList',\n    components: {\n      ItemsList\n    },\n    xModule: searchXModule.name,\n    props: {\n      /**\n       * Animation component that will be used to animate the promoteds.\n       *\n       * @public\n       */\n      animation: {\n        type: AnimationProp,\n        default: 'ul'\n      }\n    },\n    setup(_, { slots }) {\n      useRegisterXModule(searchXModule);\n\n      const $x = use$x();\n\n      /**\n       * The promoteds to render from the state.\n       *\n       * @public\n       */\n      const stateItems: ComputedRef<Promoted[]> = useState('search', ['promoteds']).promoteds;\n\n      /**\n       * It injects {@link ListItem} provided by an ancestor as injectedListItems.\n       *\n       * @internal\n       */\n      const injectedListItems = inject<Ref<ListItem[] | undefined>>(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       * @internal\n       */\n      const items = computed((): ListItem[] => {\n        if (!injectedListItems?.value!.length) {\n          return stateItems.value;\n        }\n        const items = [...injectedListItems.value];\n        for (const item of stateItems.value) {\n          const position = item.position ?? 1;\n          let index = position - 1;\n          while (items.at(index)?.modelName === 'Promoted') {\n            index++;\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        }\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       * @internal\n       */\n      provide(LIST_ITEMS_KEY as string, items);\n\n      return {\n        items,\n        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 PromotedsList 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\n    <PromotedsList />\n  </div>\n</template>\n\n<script>\n  import { PromotedsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'PromotedsListDemo',\n    components: {\n      SearchInput,\n      PromotedsList\n    }\n  };\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <PromotedsList :animation=\"fadeAndSlide\" />\n  </div>\n</template>\n\n<script>\n  import { PromotedsList } from '@empathyco/x-components/search';\n  import { FadeAndSlide } from '@empathyco/x-components/animations';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'PromotedsListDemo',\n    components: {\n      SearchInput,\n      PromotedsList\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    <PromotedsList #default=\"{ items, animation }\">\n      <BaseGrid :items=\"items\" :animation=\"animation\">\n        <template #promoted=\"{ item }\">\n          <span>Promoted: {{ item.title }}</span>\n        </template>\n        <template #default=\"{ item }\">\n          <span>Default: {{ item }}</span>\n        </template>\n      </BaseGrid>\n    </PromotedsList>\n  </div>\n</template>\n\n<script>\n  import { PromotedsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { BaseGrid } from '@empathyco/x-components';\n\n  export default {\n    name: 'PromotedsListDemo',\n    components: {\n      SearchInput,\n      PromotedsList,\n      BaseGrid\n    }\n  };\n</script>\n```\n\n### Overriding promoted content\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <PromotedsList #promoted=\"{ item }\">\n      <span class=\"promoted\">\n        {{ item.title }}\n      </span>\n    </PromotedsList>\n  </div>\n</template>\n\n<script>\n  import { PromotedsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'PromotedsListDemo',\n    components: {\n      SearchInput,\n      PromotedsList\n    }\n  };\n</script>\n```\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      <PromotedsList>\n        <template #promoted=\"{ item }\">Promoted: {{ item.id }}</template>\n        <template #result=\"{ item }\">Result: {{ item.id }}</template>\n      </PromotedsList>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { ResultsList, PromotedsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'PromotedsListDemo',\n    components: {\n      SearchInput,\n      ResultsList,\n      PromotedsList\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"promoteds-list.vue.js","sources":["../../../../../src/x-modules/search/components/promoteds-list.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { Promoted } from '@empathyco/x-types';\n  import { computed, ComputedRef, defineComponent, h, inject, provide, Ref } from 'vue';\n  import ItemsList from '../../../components/items-list.vue';\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} of promoteds from {@link SearchState.promoteds}.\n   *\n   * The component provides a default slot which wraps the whole component with the `promoteds`\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: 'PromotedsList',\n    xModule: searchXModule.name,\n    props: {\n      /** Animation component that will be used to animate the promoteds. */\n      animation: {\n        type: AnimationProp,\n        default: 'ul'\n      }\n    },\n    setup(props, { slots }) {\n      const $x = use$x();\n\n      /** The promoteds to render from the state. */\n      const stateItems: ComputedRef<Promoted[]> = useState('search', ['promoteds']).promoteds;\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        for (const item of stateItems.value) {\n          const position = item.position ?? 1;\n          let index = position - 1;\n          while (items.at(index)?.modelName === 'Promoted') {\n            index++;\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        }\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 PromotedsList 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\n    <PromotedsList />\n  </div>\n</template>\n\n<script>\n  import { PromotedsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'PromotedsListDemo',\n    components: {\n      SearchInput,\n      PromotedsList\n    }\n  };\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <PromotedsList :animation=\"fadeAndSlide\" />\n  </div>\n</template>\n\n<script>\n  import { PromotedsList } from '@empathyco/x-components/search';\n  import { FadeAndSlide } from '@empathyco/x-components/animations';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'PromotedsListDemo',\n    components: {\n      SearchInput,\n      PromotedsList\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    <PromotedsList #default=\"{ items, animation }\">\n      <BaseGrid :items=\"items\" :animation=\"animation\">\n        <template #promoted=\"{ item }\">\n          <span>Promoted: {{ item.title }}</span>\n        </template>\n        <template #default=\"{ item }\">\n          <span>Default: {{ item }}</span>\n        </template>\n      </BaseGrid>\n    </PromotedsList>\n  </div>\n</template>\n\n<script>\n  import { PromotedsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { BaseGrid } from '@empathyco/x-components';\n\n  export default {\n    name: 'PromotedsListDemo',\n    components: {\n      SearchInput,\n      PromotedsList,\n      BaseGrid\n    }\n  };\n</script>\n```\n\n### Overriding promoted content\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <PromotedsList #promoted=\"{ item }\">\n      <span class=\"promoted\">\n        {{ item.title }}\n      </span>\n    </PromotedsList>\n  </div>\n</template>\n\n<script>\n  import { PromotedsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'PromotedsListDemo',\n    components: {\n      SearchInput,\n      PromotedsList\n    }\n  };\n</script>\n```\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      <PromotedsList>\n        <template #promoted=\"{ item }\">Promoted: {{ item.id }}</template>\n        <template #result=\"{ item }\">Result: {{ item.id }}</template>\n      </PromotedsList>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { ResultsList, PromotedsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'PromotedsListDemo',\n    components: {\n      SearchInput,\n      ResultsList,\n      PromotedsList\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;AAWE;;;;;;;;;;AAUE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,eAAe;IACrB,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAG;AACd,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;;AAGlB,QAAA,MAAM,UAAU,GAA4B,QAAQ,CAAC,QAAQ,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAA;;AAGvF,QAAA,MAAM,iBAAkB,GAAE,MAAM,CAAkB,cAAwB,CAAC,CAAA;AAE3E;;;;;;;AAOE;AACF,QAAA,MAAM,KAAI,GAAI,QAAQ,CAAC,MAAM;AAC3B,YAAA,IAAI,CAAC,iBAAiB,EAAE,KAAM,CAAC,MAAM,EAAE;gBACrC,OAAO,UAAU,CAAC,KAAK,CAAA;AACzB,aAAA;YACA,MAAM,KAAM,GAAE,CAAC,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA;AAC1C,YAAA,KAAK,MAAM,IAAG,IAAK,UAAU,CAAC,KAAK,EAAE;AACnC,gBAAA,MAAM,QAAO,GAAI,IAAI,CAAC,QAAO,IAAK,CAAC,CAAA;AACnC,gBAAA,IAAI,KAAM,GAAE,QAAO,GAAI,CAAC,CAAA;gBACxB,OAAO,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,SAAQ,KAAM,UAAU,EAAE;AAChD,oBAAA,KAAK,EAAE,CAAA;AACT,iBAAA;AACA,gBAAA,MAAM,oBAAmB,GAAI,KAAI,IAAK,KAAK,CAAC,MAAM,CAAA;gBAClD,MAAM,iBAAkB,GAAE,EAAE,CAAC,OAAO,CAAC,MAAK,KAAM,EAAE,CAAC,YAAY,CAAA;AAC/D,gBAAA,IAAI,CAAC,oBAAqB,IAAG,CAAC,iBAAiB,EAAE;oBAC/C,MAAK;AACP,iBAAA;gBACA,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI,CAAC,CAAA;AAC9B,aAAA;AACA,YAAA,OAAO,KAAK,CAAA;AACd,SAAC,CAAC,CAAA;AAEF;;;;;;AAME;AACF,QAAA,OAAO,CAAC,cAAwB,EAAE,KAAK,CAAC,CAAA;AAExC,QAAA,OAAO,MAAM;AACX,YAAA,MAAM,UAAW,GAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAQ,EAAG,CAAA;;AAErE,YAAA,OAAO,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,CAAE,IAAG,CAAC,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,CAAC,CAAA;AAC1E,SAAC,CAAA;KACH;AACD,CAAA,CAAC;;;;"}