@empathyco/x-components 3.0.0-alpha.52 → 3.0.0-alpha.53

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

@@ -0,0 +1 @@
+{"version":3,"file":"banner.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/search/components/banner.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\nimport { Banner as BannerModel } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { searchXModule } from '../x-module';\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. It just contains a link to the banner content, an image\n * and a title.\n *\n * @public\n */\n@Component({\n  mixins: [xComponentMixin(searchXModule)]\n})\nexport default class Banner extends Vue {\n  /**\n   * The banner data.\n   *\n   * @public\n   */\n  @Prop({ required: true })\n  public banner!: BannerModel;\n\n  /**\n   * Emits the banner click event.\n   *\n   * @internal\n   */\n  protected emitClickEvent(): void {\n    this.$x.emit('UserClickedABanner', this.banner);\n  }\n}\n"],"names":[],"mappings":";;;;;;AAaA;;;;;;;;AAWA,IAAqB,MAAM,GAA3B,MAAqB,MAAO,SAAQ,GAAG;;;;;;IAc3B,cAAc;QACtB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;KACjD;CACF,CAAA;AAVC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;sCACG;AAPT,MAAM;IAH1B,SAAS,CAAC;QACT,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;KACzC,CAAC;GACmB,MAAM,CAiB1B;aAjBoB,MAAM;;;;"}

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

@@ -1,8 +1,8 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-import script from './banners-list.vue_rollup-plugin-vue=script.js';
+import script from './banners-list.vue_rollup-plugin-vue_script.vue.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
 
 /* script */
-var __vue_script__ = script;
+const __vue_script__ = script;
 
 /* template */
 var __vue_render__ = function () {
@@ -28,15 +28,18 @@ var __vue_render__ = function () {
                         return [_vm._t(slotName, null, { item: item })]
                       },
                     }
-                  }) ],
+                  }),
+                ],
                 null,
                 true
               ),
-            }) ]
+            }),
+          ]
         },
         null,
         { items: _vm.items, animation: _vm.animation }
-      ) ],
+      ),
+    ],
     2
   )
 };
@@ -44,13 +47,13 @@ var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
 
   /* style */
-  var __vue_inject_styles__ = undefined;
+  const __vue_inject_styles__ = undefined;
   /* scoped */
-  var __vue_scope_id__ = undefined;
+  const __vue_scope_id__ = undefined;
   /* module identifier */
-  var __vue_module_identifier__ = undefined;
+  const __vue_module_identifier__ = undefined;
   /* functional template */
-  var __vue_is_functional_template__ = false;
+  const __vue_is_functional_template__ = false;
   /* style inject */
   
   /* style inject SSR */
@@ -59,7 +62,7 @@ __vue_render__._withStripped = true;
   
 
   
-  var __vue_component__ = /*#__PURE__*/__vue_normalize__(
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
     { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
     __vue_inject_styles__,
     __vue_script__,
@@ -72,5 +75,5 @@ __vue_render__._withStripped = true;
     undefined
   );
 
-export default __vue_component__;
+export { __vue_component__ as default };
 //# sourceMappingURL=banners-list.vue.js.map

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":["<template>\n  <NoElement>\n    <!--\n      @slot Customized BannersList layout.\n        @binding {Banner[]} items - Banners 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 $scopedSlots\" v-slot:[slotName]=\"{ item }\">\n          <slot :name=\"slotName\" :item=\"item\" />\n        </template>\n      </ItemsList>\n    </slot>\n  </NoElement>\n</template>\n\n<script lang=\"ts\">\n  import { Banner } 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 { NoElement } from '../../../components/no-element';\n  import { ItemsListInjectionMixin } from '../../../components/items-list-injection.mixin';\n  import ItemsList from '../../../components/items-list.vue';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { ListItem } from '../../../utils/types';\n  import { searchXModule } from '../x-module';\n\n  /**\n   * It renders a {@link ItemsList} list of banners from {@link SearchState.banners} by\n   * default using the `ItemsInjectionMixin`.\n   *\n   * The component provides a default slot which wraps the whole component with the `banners`\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  @Component({\n    components: {\n      ItemsList,\n      NoElement\n    },\n    mixins: [xComponentMixin(searchXModule)]\n  })\n  export default class BannersList extends ItemsListInjectionMixin {\n    /**\n     * The banners to render from the state.\n     *\n     * @public\n     */\n    @State('search', 'banners')\n    public stateItems!: Banner[];\n\n    /**\n     * Animation component that will be used to animate the banners.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue | 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    public override get items(): ListItem[] {\n      return this.injectedListItems\n        ? [...this.stateItems, ...this.injectedListItems]\n        : this.stateItems;\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":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"banners-list.vue.js","sources":["../../../../../src/x-modules/search/components/banners-list.vue"],"sourcesContent":["<template>\n  <NoElement>\n    <!--\n      @slot Customized BannersList layout.\n        @binding {Banner[]} items - Banners 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 $scopedSlots\" v-slot:[slotName]=\"{ item }\">\n          <slot :name=\"slotName\" :item=\"item\" />\n        </template>\n      </ItemsList>\n    </slot>\n  </NoElement>\n</template>\n\n<script lang=\"ts\">\n  import { Banner } 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 { NoElement } from '../../../components/no-element';\n  import { ItemsListInjectionMixin } from '../../../components/items-list-injection.mixin';\n  import ItemsList from '../../../components/items-list.vue';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { ListItem } from '../../../utils/types';\n  import { searchXModule } from '../x-module';\n\n  /**\n   * It renders a {@link ItemsList} list of banners from {@link SearchState.banners} by\n   * default using the `ItemsInjectionMixin`.\n   *\n   * The component provides a default slot which wraps the whole component with the `banners`\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  @Component({\n    components: {\n      ItemsList,\n      NoElement\n    },\n    mixins: [xComponentMixin(searchXModule)]\n  })\n  export default class BannersList extends ItemsListInjectionMixin {\n    /**\n     * The banners to render from the state.\n     *\n     * @public\n     */\n    @State('search', 'banners')\n    public stateItems!: Banner[];\n\n    /**\n     * Animation component that will be used to animate the banners.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue | 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    public override get items(): ListItem[] {\n      return this.injectedListItems\n        ? [...this.stateItems, ...this.injectedListItems]\n        : this.stateItems;\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":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,57 @@
+import { __decorate } from 'tslib';
+import { Prop, Component } from 'vue-property-decorator';
+import { State } from '../../../components/decorators/store.decorators.js';
+import { NoElement } from '../../../components/no-element.js';
+import { ItemsListInjectionMixin } from '../../../components/items-list-injection.mixin.js';
+import __vue_component__ from '../../../components/items-list.vue.js';
+import { xComponentMixin } from '../../../components/x-component.mixin.js';
+import { searchXModule } from '../x-module.js';
+
+/**
+ * It renders a {@link ItemsList} list of banners from {@link SearchState.banners} by
+ * default using the `ItemsInjectionMixin`.
+ *
+ * The component provides a default slot which wraps the whole component with the `banners`
+ * plus the `searchInjectedItems` which also contains the injected list items from
+ * the ancestor.
+ *
+ * It also provides the parent slots to customize the items.
+ *
+ * @public
+ */
+let BannersList = class BannersList extends ItemsListInjectionMixin {
+    /**
+     * 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}.
+     *
+     * @internal
+     */
+    get items() {
+        return this.injectedListItems
+            ? [...this.stateItems, ...this.injectedListItems]
+            : this.stateItems;
+    }
+};
+__decorate([
+    State('search', 'banners')
+], BannersList.prototype, "stateItems", void 0);
+__decorate([
+    Prop({ default: 'ul' })
+], BannersList.prototype, "animation", void 0);
+BannersList = __decorate([
+    Component({
+        components: {
+            ItemsList: __vue_component__,
+            NoElement
+        },
+        mixins: [xComponentMixin(searchXModule)]
+    })
+], BannersList);
+var script = BannersList;
+
+export { script as default };
+//# sourceMappingURL=banners-list.vue_rollup-plugin-vue_script.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"banners-list.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/search/components/banners-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\nimport { Banner } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { State } from '../../../components/decorators/store.decorators';\nimport { NoElement } from '../../../components/no-element';\nimport { ItemsListInjectionMixin } from '../../../components/items-list-injection.mixin';\nimport ItemsList from '../../../components/items-list.vue';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { ListItem } from '../../../utils/types';\nimport { searchXModule } from '../x-module';\n\n/**\n * It renders a {@link ItemsList} list of banners from {@link SearchState.banners} by\n * default using the `ItemsInjectionMixin`.\n *\n * The component provides a default slot which wraps the whole component with the `banners`\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@Component({\n  components: {\n    ItemsList,\n    NoElement\n  },\n  mixins: [xComponentMixin(searchXModule)]\n})\nexport default class BannersList extends ItemsListInjectionMixin {\n  /**\n   * The banners to render from the state.\n   *\n   * @public\n   */\n  @State('search', 'banners')\n  public stateItems!: Banner[];\n\n  /**\n   * Animation component that will be used to animate the banners.\n   *\n   * @public\n   */\n  @Prop({ default: 'ul' })\n  protected animation!: Vue | 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  public override get items(): ListItem[] {\n    return this.injectedListItems\n      ? [...this.stateItems, ...this.injectedListItems]\n      : this.stateItems;\n  }\n}\n"],"names":["ItemsList"],"mappings":";;;;;;;;;AA6BA;;;;;;;;;;;;AAmBA,IAAqB,WAAW,GAAhC,MAAqB,WAAY,SAAQ,uBAAuB;;;;;;;;;;;IA2B9D,IAAoB,KAAK;QACvB,OAAO,IAAI,CAAC,iBAAiB;cACzB,CAAC,GAAG,IAAI,CAAC,UAAU,EAAE,GAAG,IAAI,CAAC,iBAAiB,CAAC;cAC/C,IAAI,CAAC,UAAU,CAAC;KACrB;CACF,CAAA;AAzBC;IADC,KAAK,CAAC,QAAQ,EAAE,SAAS,CAAC;+CACE;AAQ7B;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACW;AAfhB,WAAW;IAP/B,SAAS,CAAC;QACT,UAAU,EAAE;uBACVA,iBAAS;YACT,SAAS;SACV;QACD,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;KACzC,CAAC;GACmB,WAAW,CAgC/B;aAhCoB,WAAW;;;;"}

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

@@ -1,8 +1,8 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-import script from './partial-query-button.vue_rollup-plugin-vue=script.js';
+import script from './partial-query-button.vue_rollup-plugin-vue_script.vue.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
 
 /* script */
-var __vue_script__ = script;
+const __vue_script__ = script;
 
 /* template */
 var __vue_render__ = function () {
@@ -24,7 +24,8 @@ var __vue_render__ = function () {
         },
         null,
         { query: _vm.query }
-      ) ],
+      ),
+    ],
     2
   )
 };
@@ -32,13 +33,13 @@ var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
 
   /* style */
-  var __vue_inject_styles__ = undefined;
+  const __vue_inject_styles__ = undefined;
   /* scoped */
-  var __vue_scope_id__ = undefined;
+  const __vue_scope_id__ = undefined;
   /* module identifier */
-  var __vue_module_identifier__ = undefined;
+  const __vue_module_identifier__ = undefined;
   /* functional template */
-  var __vue_is_functional_template__ = false;
+  const __vue_is_functional_template__ = false;
   /* style inject */
   
   /* style inject SSR */
@@ -47,7 +48,7 @@ __vue_render__._withStripped = true;
   
 
   
-  var __vue_component__ = /*#__PURE__*/__vue_normalize__(
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
     { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
     __vue_inject_styles__,
     __vue_script__,
@@ -60,5 +61,5 @@ __vue_render__._withStripped = true;
     undefined
   );
 
-export default __vue_component__;
+export { __vue_component__ as default };
 //# sourceMappingURL=partial-query-button.vue.js.map

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    @click=\"emitEvents\"\n    class=\"x-button x-partial-query-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 Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { 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   */\n  @Component({\n    mixins: [xComponentMixin(searchXModule)]\n  })\n  export default class PartialQueryButton extends Vue {\n    /**\n     * The query property.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    public query!: string;\n\n    /**\n     * Generates the {@link WireMetadata | event metadata} object omitting the moduleName.\n     *\n     * @returns The {@link WireMetadata} object omitting the moduleName.\n     * @internal\n     */\n    protected createEventMetadata(): Omit<WireMetadata, 'moduleName'> {\n      return {\n        target: this.$el as HTMLElement,\n        feature: 'partial_result'\n      };\n    }\n\n    /**\n     * Emits events when the button is clicked.\n     *\n     * @public\n     */\n    protected emitEvents(): void {\n      this.$x.emit('UserAcceptedAQuery', this.query, this.createEventMetadata());\n      this.$x.emit('UserClickedPartialQuery', this.query, this.createEventMetadata());\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nA button that when pressed emits the {@link XEventsTypes.UserAcceptedAQuery} and {@link\nSearchXEvents.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\n## Events\n\nThis component emits 2 different events:\n\n- UserAcceptedAQuery: the event is emitted after the user clicks the partial query. The event\n  payload is the partial query data.\n- UserClickedPartialQuery: the event is emitted after the user clicks the partial query. The event\n  payload is the partial query data.\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"partial-query-button.vue.js","sources":["../../../../../src/x-modules/search/components/partial-query-button.vue"],"sourcesContent":["<template>\n  <button\n    @click=\"emitEvents\"\n    class=\"x-button x-partial-query-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 Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { 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   */\n  @Component({\n    mixins: [xComponentMixin(searchXModule)]\n  })\n  export default class PartialQueryButton extends Vue {\n    /**\n     * The query property.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    public query!: string;\n\n    /**\n     * Generates the {@link WireMetadata | event metadata} object omitting the moduleName.\n     *\n     * @returns The {@link WireMetadata} object omitting the moduleName.\n     * @internal\n     */\n    protected createEventMetadata(): Omit<WireMetadata, 'moduleName'> {\n      return {\n        target: this.$el as HTMLElement,\n        feature: 'partial_result'\n      };\n    }\n\n    /**\n     * Emits events when the button is clicked.\n     *\n     * @public\n     */\n    protected emitEvents(): void {\n      this.$x.emit('UserAcceptedAQuery', this.query, this.createEventMetadata());\n      this.$x.emit('UserClickedPartialQuery', this.query, this.createEventMetadata());\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nA button that when pressed emits the {@link XEventsTypes.UserAcceptedAQuery} and {@link\nSearchXEvents.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\n## Events\n\nThis component emits 2 different events:\n\n- UserAcceptedAQuery: the event is emitted after the user clicks the partial query. The event\n  payload is the partial query data.\n- UserClickedPartialQuery: the event is emitted after the user clicks the partial query. The event\n  payload is the partial query data.\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/search/components/{partial-query-button.vue_rollup-plugin-vue=script.js → partial-query-button.vue_rollup-plugin-vue_script.vue.js}

@@ -1,4 +1,4 @@
-import { __extends, __decorate } from 'tslib';
+import { __decorate } from 'tslib';
 import Vue from 'vue';
 import { Prop, Component } from 'vue-property-decorator';
 import { xComponentMixin } from '../../../components/x-component.mixin.js';
@@ -11,42 +11,38 @@ import { searchXModule } from '../x-module.js';
  *
  * @public
  */
-var PartialQueryButton = /** @class */ (function (_super) {
-    __extends(PartialQueryButton, _super);
-    function PartialQueryButton() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
+let PartialQueryButton = class PartialQueryButton extends Vue {
     /**
      * Generates the {@link WireMetadata | event metadata} object omitting the moduleName.
      *
      * @returns The {@link WireMetadata} object omitting the moduleName.
      * @internal
      */
-    PartialQueryButton.prototype.createEventMetadata = function () {
+    createEventMetadata() {
         return {
             target: this.$el,
             feature: 'partial_result'
         };
-    };
+    }
     /**
      * Emits events when the button is clicked.
      *
      * @public
      */
-    PartialQueryButton.prototype.emitEvents = function () {
+    emitEvents() {
         this.$x.emit('UserAcceptedAQuery', this.query, this.createEventMetadata());
         this.$x.emit('UserClickedPartialQuery', this.query, this.createEventMetadata());
-    };
-    __decorate([
-        Prop({ required: true })
-    ], PartialQueryButton.prototype, "query", void 0);
-    PartialQueryButton = __decorate([
-        Component({
-            mixins: [xComponentMixin(searchXModule)]
-        })
-    ], PartialQueryButton);
-    return PartialQueryButton;
-}(Vue));
+    }
+};
+__decorate([
+    Prop({ required: true })
+], PartialQueryButton.prototype, "query", void 0);
+PartialQueryButton = __decorate([
+    Component({
+        mixins: [xComponentMixin(searchXModule)]
+    })
+], PartialQueryButton);
+var script = PartialQueryButton;
 
-export default PartialQueryButton;
-//# sourceMappingURL=partial-query-button.vue_rollup-plugin-vue=script.js.map
+export { script as default };
+//# sourceMappingURL=partial-query-button.vue_rollup-plugin-vue_script.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"partial-query-button.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/search/components/partial-query-button.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { WireMetadata } from '../../../wiring/wiring.types';\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 */\n@Component({\n  mixins: [xComponentMixin(searchXModule)]\n})\nexport default class PartialQueryButton extends Vue {\n  /**\n   * The query property.\n   *\n   * @public\n   */\n  @Prop({ required: true })\n  public query!: string;\n\n  /**\n   * Generates the {@link WireMetadata | event metadata} object omitting the moduleName.\n   *\n   * @returns The {@link WireMetadata} object omitting the moduleName.\n   * @internal\n   */\n  protected createEventMetadata(): Omit<WireMetadata, 'moduleName'> {\n    return {\n      target: this.$el as HTMLElement,\n      feature: 'partial_result'\n    };\n  }\n\n  /**\n   * Emits events when the button is clicked.\n   *\n   * @public\n   */\n  protected emitEvents(): void {\n    this.$x.emit('UserAcceptedAQuery', this.query, this.createEventMetadata());\n    this.$x.emit('UserClickedPartialQuery', this.query, this.createEventMetadata());\n  }\n}\n"],"names":[],"mappings":";;;;;;AAiBA;;;;;;;AAUA,IAAqB,kBAAkB,GAAvC,MAAqB,kBAAmB,SAAQ,GAAG;;;;;;;IAevC,mBAAmB;QAC3B,OAAO;YACL,MAAM,EAAE,IAAI,CAAC,GAAkB;YAC/B,OAAO,EAAE,gBAAgB;SAC1B,CAAC;KACH;;;;;;IAOS,UAAU;QAClB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC;QAC3E,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,yBAAyB,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC;KACjF;CACF,CAAA;AAxBC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;iDACH;AAPH,kBAAkB;IAHtC,SAAS,CAAC;QACT,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;KACzC,CAAC;GACmB,kBAAkB,CA+BtC;aA/BoB,kBAAkB;;;;"}

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

@@ -1,9 +1,9 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-import __vue_create_injector__ from 'vue-runtime-helpers/dist/inject-style/browser.js';
-import script from './partial-results-list.vue_rollup-plugin-vue=script.js';
+import script from './partial-results-list.vue_rollup-plugin-vue_script.vue.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import __vue_create_injector__ from 'vue-runtime-helpers/dist/inject-style/browser.mjs';
 
 /* script */
-var __vue_script__ = script;
+const __vue_script__ = script;
 
 /* template */
 var __vue_render__ = function () {
@@ -38,24 +38,24 @@ var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
 
   /* style */
-  var __vue_inject_styles__ = function (inject) {
-    if (!inject) { return }
+  const __vue_inject_styles__ = function (inject) {
+    if (!inject) return
     inject("data-v-91d70c6c_0", { source: ".x-partial-results[data-v-91d70c6c] {\n  list-style-type: none;\n  padding: 0;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-91d70c6c";
+  const __vue_scope_id__ = "data-v-91d70c6c";
   /* module identifier */
-  var __vue_module_identifier__ = undefined;
+  const __vue_module_identifier__ = undefined;
   /* functional template */
-  var __vue_is_functional_template__ = false;
+  const __vue_is_functional_template__ = false;
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  var __vue_component__ = /*#__PURE__*/__vue_normalize__(
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
     { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
     __vue_inject_styles__,
     __vue_script__,
@@ -68,5 +68,5 @@ __vue_render__._withStripped = true;
     undefined
   );
 
-export default __vue_component__;
+export { __vue_component__ as default };
 //# sourceMappingURL=partial-results-list.vue.js.map

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-list 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 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</script>\n\n<style lang=\"scss\" scoped>\n  .x-partial-results {\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":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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-list 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 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</script>\n\n<style lang=\"scss\" scoped>\n  .x-partial-results {\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":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,43 @@
+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 { searchXModule } from '../x-module.js';
+
+/**
+ * It renders a list of partial results from {@link SearchState.partialResults} by default.
+ * It also provides the partial result slot to customize the item with the partial result bound.
+ *
+ * @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);
+    }
+};
+__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 };
+//# sourceMappingURL=partial-results-list.vue_rollup-plugin-vue_script.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"partial-results-list.vue_rollup-plugin-vue_script.vue.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\nimport { PartialResult } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { State } from '../../../components/decorators/store.decorators';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\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 */\n@Component({\n  mixins: [xComponentMixin(searchXModule)]\n})\nexport 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+BA;;;;;;AASA,IAAqB,kBAAkB,GAAvC,MAAqB,kBAAmB,SAAQ,GAAG;;;;;;;;IA6BjD,IAAc,cAAc;QAC1B,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;KACnD;CACF,CAAA;AAzBC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qDACW;AAOnC;IADC,KAAK,CAAC,QAAQ,EAAE,gBAAgB,CAAC;iDACH;AAO/B;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;4DACe;AArBjB,kBAAkB;IAHtC,SAAS,CAAC;QACT,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;KACzC,CAAC;GACmB,kBAAkB,CAgCtC;aAhCoB,kBAAkB;;;;"}

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

@@ -1,9 +1,9 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-import __vue_create_injector__ from 'vue-runtime-helpers/dist/inject-style/browser.js';
-import script from './promoted.vue_rollup-plugin-vue=script.js';
+import script from './promoted.vue_rollup-plugin-vue_script.vue.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import __vue_create_injector__ from 'vue-runtime-helpers/dist/inject-style/browser.mjs';
 
 /* script */
-var __vue_script__ = script;
+const __vue_script__ = script;
 
 /* template */
 var __vue_render__ = function () {
@@ -24,31 +24,33 @@ var __vue_render__ = function () {
       }),
       _vm._v(" "),
       _c("h2", { staticClass: "x-promoted__title" }, [
-        _vm._v(_vm._s(_vm.promoted.title)) ]) ]
+        _vm._v(_vm._s(_vm.promoted.title)),
+      ]),
+    ]
   )
 };
 var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
 
   /* style */
-  var __vue_inject_styles__ = function (inject) {
-    if (!inject) { return }
+  const __vue_inject_styles__ = function (inject) {
+    if (!inject) return
     inject("data-v-344a5de2_0", { source: ".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}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = undefined;
+  const __vue_scope_id__ = undefined;
   /* module identifier */
-  var __vue_module_identifier__ = undefined;
+  const __vue_module_identifier__ = undefined;
   /* functional template */
-  var __vue_is_functional_template__ = false;
+  const __vue_is_functional_template__ = false;
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  var __vue_component__ = /*#__PURE__*/__vue_normalize__(
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
     { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
     __vue_inject_styles__,
     __vue_script__,
@@ -61,5 +63,5 @@ __vue_render__._withStripped = true;
     undefined
   );
 
-export default __vue_component__;
+export { __vue_component__ 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=\"\" />\n    <h2 class=\"x-promoted__title\">{{ promoted.title }}</h2>\n  </a>\n</template>\n\n<script lang=\"ts\">\n  import { Promoted as PromotedModel } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { searchXModule } from '../x-module';\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   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(searchXModule)]\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        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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=\"\" />\n    <h2 class=\"x-promoted__title\">{{ promoted.title }}</h2>\n  </a>\n</template>\n\n<script lang=\"ts\">\n  import { Promoted as PromotedModel } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { searchXModule } from '../x-module';\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   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(searchXModule)]\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        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/search/components/promoted.vue_rollup-plugin-vue_script.vue.js

@@ -0,0 +1,35 @@
+import { __decorate } from 'tslib';
+import Vue from 'vue';
+import { Prop, Component } from 'vue-property-decorator';
+import { xComponentMixin } from '../../../components/x-component.mixin.js';
+import { searchXModule } from '../x-module.js';
+
+/**
+ * A promoted result is just an item that has been inserted into the search results to advertise
+ * something. Usually it is one of the first items in the grid, and has the same shape as a
+ * result. It just contains a link to the promoted content, an image, and a title.
+ *
+ * @public
+ */
+let Promoted = class Promoted extends Vue {
+    /**
+     * Emits the promoted click event.
+     *
+     * @internal
+     */
+    emitClickEvent() {
+        this.$x.emit('UserClickedAPromoted', this.promoted);
+    }
+};
+__decorate([
+    Prop({ required: true })
+], Promoted.prototype, "promoted", void 0);
+Promoted = __decorate([
+    Component({
+        mixins: [xComponentMixin(searchXModule)]
+    })
+], Promoted);
+var script = Promoted;
+
+export { script as default };
+//# sourceMappingURL=promoted.vue_rollup-plugin-vue_script.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"promoted.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/search/components/promoted.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\nimport { Promoted as PromotedModel } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { searchXModule } from '../x-module';\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 * @public\n */\n@Component({\n  mixins: [xComponentMixin(searchXModule)]\n})\nexport 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":";;;;;;AAcA;;;;;;;AAUA,IAAqB,QAAQ,GAA7B,MAAqB,QAAS,SAAQ,GAAG;;;;;;IAc7B,cAAc;QACtB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;KACrD;CACF,CAAA;AAVC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;0CACO;AAPb,QAAQ;IAH5B,SAAS,CAAC;QACT,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;KACzC,CAAC;GACmB,QAAQ,CAiB5B;aAjBoB,QAAQ;;;;"}