@empathyco/x-components 3.0.0-alpha.154 → 3.0.0-alpha.155

package/js/x-modules/related-tags/components/related-tags.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"related-tags.vue.js","sources":["../../../../../src/x-modules/related-tags/components/related-tags.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"relatedTags.length\"\n    tag=\"ul\"\n    class=\"x-list x-related-tags\"\n    data-test=\"related-tags\"\n  >\n    <li\n      v-for=\"relatedTag in relatedTags\"\n      :key=\"relatedTag.tag\"\n      class=\"x-related-tags__item\"\n      data-test=\"related-tag-item\"\n    >\n      <!--\n        @slot Custom content that replaces the RelatedTag component.\n        @binding {RelatedTag} relatedTag - Related tag data.\n        @binding {boolean} highlightCurated - True if the curated RTs should be displayed.\n       -->\n      <slot name=\"related-tag\" v-bind=\"{ relatedTag, highlightCurated }\">\n        <RelatedTag :highlightCurated=\"highlightCurated\" :relatedTag=\"relatedTag\">\n          <template #default=\"{ relatedTag, isSelected, shouldHighlightCurated }\">\n            <!-- eslint-disable max-len -->\n            <!--\n              @slot Custom content that replaces the RelatedTag default content.\n              @binding {RelatedTag} relatedTag - Related tag data.\n              @binding {boolean} isSelected - Related tag status.\n              @binding {boolean} shouldHighlightCurated - True if the curated RTs should be displayed.\n            -->\n            <slot\n              name=\"related-tag-content\"\n              v-bind=\"{ relatedTag, isSelected, shouldHighlightCurated }\"\n            />\n          </template>\n        </RelatedTag>\n      </slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { RelatedTag as RelatedTagModel } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { Getter } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { relatedTagsXModule } from '../x-module';\n  import RelatedTag from './related-tag.vue';\n\n  /**\n   * This component renders a set of [`RelatedTag`](./x-components.related-tag) components by\n   * default to select from after a query is performed to fine-tune search.\n   * For example, if you are searching for *lego*, different related tags could be *city*,\n   * *friends*, or *harry potter*, refining the search with *lego city*, *lego friends*,\n   * or *lego harry potter*.\n   *\n   * @public\n   */\n  @Component({\n    components: { RelatedTag },\n    mixins: [xComponentMixin(relatedTagsXModule)]\n  })\n  export default class RelatedTags extends Vue {\n    /**\n     * Animation component that will be used to animate the suggestion.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue;\n\n    /**\n     * Number of related tags to be rendered.\n     *\n     * @public\n     */\n    @Prop()\n    protected maxItemsToRender?: number;\n\n    /**\n     * Flag to indicate if the curated tags should be displayed different.\n     *\n     * @public\n     */\n    @Prop({ default: false, type: Boolean })\n    protected highlightCurated!: boolean;\n\n    @Getter('relatedTags', 'relatedTags')\n    public storedRelatedTags!: RelatedTagModel[];\n\n    protected get relatedTags(): RelatedTagModel[] {\n      return this.storedRelatedTags.slice(0, this.maxItemsToRender);\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-related-tags {\n    display: flex;\n    list-style: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the QuerySignals microservice must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nThis example shows how related tags can be rendered without any additional effects.\n\n_Search for a fashion term like \"sandal\" or \"lipstick\"._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags />\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the number of related tags rendered has been limited to 3. A fade and slide effect\nhas been added so that the related tags appear with a delay, then slide upwards and fade.\n\n_Search for a fashion term and see the related tags with the animation effect._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags :animation=\"'StaggeredFadeAndSlide'\" :maxItemsToRender=\"3\" />\n  </div>\n</template>\n\n<script>\n  import Vue from 'vue';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n  import { StaggeredFadeAndSlide } from '@empathyco/x-components';\n\n  // Registering the animation as a global component\n  Vue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide);\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags\n    }\n  };\n</script>\n```\n\n### Play with related-tag slot\n\nIn this example, the [`RelatedTag`](./x-components.related-tag.md) component is passed in the\n`related-tag` slot (although any other component could potentially be passed).\n\n_Search for a fashion term and see how the related tags can be rendered._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags #related-tag=\"{ relatedTag }\">\n      <RelatedTag :relatedTag=\"relatedTag\" />\n    </RelatedTags>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags, RelatedTag } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags,\n      RelatedTag\n    }\n  };\n</script>\n```\n\n### Play with related-tag-content slot\n\nTo continue the previous example, the [`RelatedTag`](./x-components.related-tag.md) component is\npassed in the `related-tag-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n_Search for a fashion term and see how the related tags are rendered._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags #related-tag-content=\"{ relatedTag }\">\n      <span>{{ relatedTag.tag }}</span>\n    </RelatedTags>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags\n    }\n  };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. The `RelatedTags` component can\ncommunicate with the [`SearchInput`](../search-box/x-components.search-input.md) as follows:\n\n_Search for a fashion term and see how the related tags can be rendered._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags />\n    <ResultsList #result=\"{ item }\">\n      <span class=\"result\">\n        {{ item.name }}\n      </span>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n  import { ResultsList } from '@empathyco/x-components/search';\n\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags,\n      ResultsList\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"related-tags.vue.js","sources":["../../../../../src/x-modules/related-tags/components/related-tags.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"relatedTags.length\"\n    tag=\"ul\"\n    class=\"x-list x-related-tags\"\n    data-test=\"related-tags\"\n  >\n    <li\n      v-for=\"relatedTag in relatedTags\"\n      :key=\"relatedTag.tag\"\n      class=\"x-related-tags__item\"\n      data-test=\"related-tag-item\"\n    >\n      <!--\n        @slot Custom content that replaces the RelatedTag component.\n        @binding {RelatedTag} relatedTag - Related tag data.\n        @binding {boolean} highlightCurated - True if the curated RTs should be displayed.\n       -->\n      <slot name=\"related-tag\" v-bind=\"{ relatedTag, highlightCurated }\">\n        <RelatedTag :highlightCurated=\"highlightCurated\" :relatedTag=\"relatedTag\">\n          <template #default=\"{ relatedTag, isSelected, shouldHighlightCurated }\">\n            <!-- eslint-disable max-len -->\n            <!--\n              @slot Custom content that replaces the RelatedTag default content.\n              @binding {RelatedTag} relatedTag - Related tag data.\n              @binding {boolean} isSelected - Related tag status.\n              @binding {boolean} shouldHighlightCurated - True if the curated RTs should be displayed.\n            -->\n            <slot\n              name=\"related-tag-content\"\n              v-bind=\"{ relatedTag, isSelected, shouldHighlightCurated }\"\n            />\n          </template>\n        </RelatedTag>\n      </slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { RelatedTag as RelatedTagModel } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { Getter } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { relatedTagsXModule } from '../x-module';\n  import RelatedTag from './related-tag.vue';\n\n  /**\n   * This component renders a set of [`RelatedTag`](./x-components.related-tag) components by\n   * default to select from after a query is performed to fine-tune search.\n   * For example, if you are searching for *lego*, different related tags could be *city*,\n   * *friends*, or *harry potter*, refining the search with *lego city*, *lego friends*,\n   * or *lego harry potter*.\n   *\n   * @public\n   */\n  @Component({\n    components: { RelatedTag },\n    mixins: [xComponentMixin(relatedTagsXModule)]\n  })\n  export default class RelatedTags extends Vue {\n    /**\n     * Animation component that will be used to animate the suggestion.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue;\n\n    /**\n     * Number of related tags to be rendered.\n     *\n     * @public\n     */\n    @Prop()\n    protected maxItemsToRender?: number;\n\n    /**\n     * Flag to indicate if the curated tags should be displayed different.\n     *\n     * @public\n     */\n    @Prop({ default: false, type: Boolean })\n    protected highlightCurated!: boolean;\n\n    @Getter('relatedTags', 'relatedTags')\n    public storedRelatedTags!: RelatedTagModel[];\n\n    protected get relatedTags(): RelatedTagModel[] {\n      return this.storedRelatedTags.slice(0, this.maxItemsToRender);\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-related-tags {\n    display: flex;\n    list-style: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the QuerySignals microservice must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nThis example shows how related tags can be rendered without any additional effects.\n\n_Search for a fashion term like \"sandal\" or \"lipstick\"._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags />\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the number of related tags rendered has been limited to 3. A fade and slide effect\nhas been added so that the related tags appear with a delay, then slide upwards and fade.\n\n_Search for a fashion term and see the related tags with the animation effect._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags :animation=\"'StaggeredFadeAndSlide'\" :maxItemsToRender=\"3\" />\n  </div>\n</template>\n\n<script>\n  import Vue from 'vue';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n  import { StaggeredFadeAndSlide } from '@empathyco/x-components';\n\n  // Registering the animation as a global component\n  Vue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide);\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags\n    }\n  };\n</script>\n```\n\n### Play with related-tag slot\n\nIn this example, the [`RelatedTag`](./x-components.related-tag.md) component is passed in the\n`related-tag` slot (although any other component could potentially be passed).\n\n_Search for a fashion term and see how the related tags can be rendered._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags #related-tag=\"{ relatedTag }\">\n      <RelatedTag :relatedTag=\"relatedTag\" />\n    </RelatedTags>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags, RelatedTag } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags,\n      RelatedTag\n    }\n  };\n</script>\n```\n\n### Play with related-tag-content slot\n\nTo continue the previous example, the [`RelatedTag`](./x-components.related-tag.md) component is\npassed in the `related-tag-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n_Search for a fashion term and see how the related tags are rendered._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags #related-tag-content=\"{ relatedTag }\">\n      <span>{{ relatedTag.tag }}</span>\n    </RelatedTags>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags\n    }\n  };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. The `RelatedTags` component can\ncommunicate with the [`SearchInput`](../search-box/x-components.search-input.md) as follows:\n\n_Search for a fashion term and see how the related tags can be rendered._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags />\n    <ResultsList #result=\"{ item }\">\n      <span class=\"result\">\n        {{ item.name }}\n      </span>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n  import { ResultsList } from '@empathyco/x-components/search';\n\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags,\n      ResultsList\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/related-tags/components/related-tags.vue_rollup-plugin-vue_styles.0.vue.js

@@ -0,0 +1,7 @@
+import { createInjector } from 'vue-runtime-helpers';
+
+var css = ".x-related-tags[data-v-5759b0b8] {\n  display: flex;\n  list-style: none;\n}";
+const injector=createInjector({});injector('/__w/x/x/packages/x-components/src/x-modules/related-tags/components/related-tags.vue?rollup-plugin-vue=styles.0.css',{source:css});
+
+export { css, css as default };
+//# sourceMappingURL=related-tags.vue_rollup-plugin-vue_styles.0.vue.js.map

package/js/x-modules/related-tags/components/related-tags.vue_rollup-plugin-vue_styles.0.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"related-tags.vue_rollup-plugin-vue_styles.0.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/js/x-modules/scroll/components/main-scroll-item.vue_rollup-plugin-vue_script.vue.js

@@ -9,8 +9,8 @@ import '../../../components/animations/fade.vue.js';
 import '../../../components/animations/fade-and-slide.vue.js';
 import '../../../components/animations/staggered-fade-and-slide.vue.js';
 import '../../../components/animations/staggering-transition-group.vue_rollup-plugin-vue_script.vue.js';
+import '../../../components/animations/staggering-transition-group.vue_rollup-plugin-vue_styles.0.vue.js';
 import 'vue-runtime-helpers/dist/normalize-component.mjs';
-import 'vue-runtime-helpers/dist/inject-style/browser.mjs';
 import '../../../components/animations/animate-clip-path/animate-clip-path.style.scss.js';
 import '../../../components/animations/animate-scale/animate-scale.style.scss.js';
 import '../../../components/animations/animate-translate/animate-translate.style.scss.js';

package/js/x-modules/scroll/components/main-scroll.vue.js

@@ -1,10 +1,9 @@
 import script from './main-scroll.vue_rollup-plugin-vue_script.vue.js';
+import './main-scroll.vue_rollup-plugin-vue_styles.0.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 */
 const __vue_script__ = script;
-
 /* template */
 var __vue_render__ = function () {
   var _vm = this;
@@ -16,17 +15,15 @@ var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__ = function (inject) {
-    if (!inject) return
-    inject("data-v-033a89d3_0", { source: ".x-main-scroll--no-transition * {\n  transition: none !important;\n  transform: none !important;\n  opacity: 1 !important;\n}", map: undefined, media: undefined });
-
-  };
+  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 */
@@ -41,7 +38,7 @@ __vue_render__._withStripped = true;
     __vue_is_functional_template__,
     __vue_module_identifier__,
     false,
-    __vue_create_injector__,
+    undefined,
     undefined,
     undefined
   );

package/js/x-modules/scroll/components/main-scroll.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"main-scroll.vue.js","sources":["../../../../../src/x-modules/scroll/components/main-scroll.vue"],"sourcesContent":["<template>\n  <NoElement :class=\"dynamicClasses\">\n    <slot />\n  </NoElement>\n</template>\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop, Watch } from 'vue-property-decorator';\n  import { XEmit } from '../../../components/decorators/bus.decorators';\n  import { XProvide } from '../../../components/decorators/injection.decorators';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { NoElement } from '../../../components/no-element';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { VueCSSClasses } from '../../../utils/index';\n  import { scrollXModule } from '../x-module';\n  import { ScrollObserverKey } from './scroll.const';\n  import { ScrollVisibilityObserver } from './scroll.types';\n\n  /**\n   * Extends the scroll making it able to sync the first visible element, and allowing\n   * the children position to be restored.\n   *\n   * Each child element that wants to have this support must be wrapped in a {@link MainScrollItem}\n   * component.\n   *\n   * @public\n   */\n  @Component({\n    components: { NoElement },\n    mixins: [xComponentMixin(scrollXModule)]\n  })\n  /* eslint-disable @typescript-eslint/unbound-method */\n  export default class MainScroll extends Vue {\n    /**\n     * If `true`, sets this scroll instance to the main of the application. Being the main\n     * scroll implies that features like restoring the scroll when the query changes, or storing\n     * the scroll position in the URL will be enabled for this container.\n     *\n     * @public\n     */\n    @Prop({ default: false, type: Boolean })\n    public useWindow!: boolean;\n\n    /**\n     * Timeout in milliseconds to abort trying to restore the scroll position to the target\n     * element.\n     *\n     * @public\n     */\n    @Prop({ default: 5000 })\n    public restoreScrollTimeoutMs!: number;\n\n    /**\n     * Intersection percentage to consider an element visible.\n     *\n     * @public\n     */\n    @Prop({ default: 0.3 })\n    public threshold!: number;\n\n    /**\n     * Adjusts the size of the scroll container bounds.\n     *\n     * @public\n     */\n    @Prop({ default: '0px' })\n    public margin!: string;\n\n    /**\n     * The elements that are currently considered visible.\n     *\n     * @internal\n     */\n    protected intersectingElements: HTMLElement[] = [];\n\n    /**\n     * Intersection observer to determine visibility of the elements.\n     *\n     * @returns An intersection observer to detect elements visibility.\n     * @internal\n     */\n    protected intersectionObserver: IntersectionObserver | null = null;\n\n    /**\n     * Stores the identifier of the timeout that will consider the scroll failed to restore.\n     *\n     * @internal\n     */\n    protected restoreScrollFailTimeoutId?: number;\n\n    /**\n     * Pending identifier scroll position to restore. If it matches the {@link MainScrollItem.item}\n     * `id` property, this component should be scrolled into view.\n     *\n     * @internal\n     */\n    @State('scroll', 'pendingScrollTo')\n    public pendingScrollTo!: string;\n\n    /**\n     * Creates an `IntersectionObserver` to detect the first visible elements. Children of this\n     * component should register themselves if they want to be observed.\n     *\n     * @returns The intersection observer.\n     * @public\n     */\n    @XProvide(ScrollObserverKey)\n    public get visibleElementsObserver(): ScrollVisibilityObserver | null {\n      const observer = this.intersectionObserver;\n      return observer\n        ? {\n            observe: observer.observe.bind(observer),\n            unobserve: element => {\n              this.removeVisibleElement(element);\n              observer.unobserve(element);\n            }\n          }\n        : null;\n    }\n\n    /**\n     * The first visible element contained in this component.\n     *\n     * @returns The first visible element in this component.\n     * @internal\n     */\n    @XEmit('UserScrolledToElement')\n    public get firstVisibleElement(): string | '' {\n      if (this.intersectingElements.length === 0) {\n        return '';\n      }\n      const firstVisibleElement = this.intersectingElements.reduce(\n        (firstVisibleElement, anotherElement) => {\n          // FIXME: This algorithm only takes into account LTR layouts\n          const firstVisibleElementBounds = firstVisibleElement.getBoundingClientRect();\n          const anotherElementBounds = anotherElement.getBoundingClientRect();\n          return anotherElementBounds.left <= firstVisibleElementBounds.left &&\n            anotherElementBounds.top <= firstVisibleElementBounds.top\n            ? anotherElement\n            : firstVisibleElement;\n        }\n      );\n\n      return firstVisibleElement === this.$el.querySelector('[data-scroll]')\n        ? ''\n        : firstVisibleElement.dataset.scroll!;\n    }\n\n    /**\n     * Initialise the observer after mounting the component.\n     */\n    mounted(): void {\n      this.intersectionObserver = new IntersectionObserver(this.updateVisibleElements, {\n        root: this.useWindow ? document : this.$el,\n        threshold: this.threshold,\n        rootMargin: this.margin\n      });\n    }\n\n    /**\n     * Disconnects the intersection observer.\n     *\n     * @internal\n     */\n    beforeDestroy(): void {\n      this.intersectionObserver?.disconnect();\n      this.$x.emit('UserScrolledToElement', '');\n    }\n\n    /**\n     * Disconnects the previous observer.\n     *\n     * @param _new - The new `IntersectionObserver`.\n     * @param old - The new `IntersectionObserver`.\n     * @internal\n     */\n    @Watch('intersectionObserver')\n    protected disconnectPreviousObserver(\n      _new: IntersectionObserver | null,\n      old: IntersectionObserver | null\n    ): void {\n      old?.disconnect();\n    }\n\n    /**\n     * If there is a pending scroll, starts a countdown to stop trying to restore the scroll.\n     *\n     * @param pendingScrollTo - The position the scroll should be restored to.\n     * @internal\n     */\n    @Watch('pendingScrollTo')\n    protected failRestoringScroll(pendingScrollTo: string | null): void {\n      // TODO Move this logic to the wiring. A cancelable delay operator is needed\n      clearTimeout(this.restoreScrollFailTimeoutId);\n      if (pendingScrollTo) {\n        this.restoreScrollFailTimeoutId = setTimeout(() => {\n          this.$x.emit('ScrollRestoreFailed');\n        }, this.restoreScrollTimeoutMs);\n      }\n    }\n\n    /**\n     * Removes an element from the {@link MainScroll.intersectingElements} list.\n     *\n     * @param element - The element to remove from the visible elements.\n     * @internal\n     */\n    protected removeVisibleElement(element: HTMLElement): void {\n      const index = this.intersectingElements.indexOf(element);\n      if (index !== -1) {\n        this.intersectingElements.splice(index, 1);\n      }\n    }\n\n    /**\n     * Updates the visible elements given a list of intersection observer entries.\n     *\n     * @param entries - The entries from whom update the visibility.\n     * @internal\n     */\n    protected updateVisibleElements(entries: IntersectionObserverEntry[]): void {\n      entries.forEach(entry => {\n        const target = entry.target as HTMLElement;\n        if (entry.isIntersecting) {\n          this.intersectingElements.push(target);\n        } else {\n          this.removeVisibleElement(target);\n        }\n      });\n    }\n\n    /**\n     * Adds the dynamic css classes to the component.\n     *\n     * @returns The class to be added to the component.\n     *\n     * @internal\n     */\n    protected get dynamicClasses(): VueCSSClasses {\n      return {\n        'x-main-scroll--no-transition': !!this.pendingScrollTo\n      };\n    }\n  }\n</script>\n<style lang=\"scss\">\n  .x-main-scroll--no-transition {\n    * {\n      transition: none !important;\n      transform: none !important;\n      opacity: 1 !important;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n[`UserScrolledToElement`](./../../api/x-components.scrollxevents.md)\n[`ScrollRestoreFailed`](./../../api/x-components.scrollxevents.md)\n\n## See it in action\n\nThe `MainScroll` component must be an ancestor of the `MainScrollItem` components. This is because\nit injects the needed utilities to determine the first visible item.\n\n```vue\n<template>\n  <MainScroll>\n    <ul>\n      <MainScrollItem v-for=\"item in 24\" tag=\"li\">Item {{ item }}</MainScrollItem>\n    </ul>\n  </MainScroll>\n</template>\n\n<script>\n  import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'MainScrollDemo',\n    components: {\n      MainScroll,\n      MainScrollItem\n    }\n  };\n</script>\n\n<style scoped>\n  ul {\n    overflow: auto;\n    max-height: 200px;\n  }\n\n  li {\n    height: 50px;\n    line-height: 50px;\n  }\n</style>\n```\n\n### Play with props\n\n#### Window scroll\n\nIn case you aren't using a custom scrolling element like the `Scroll` panel, and want to use the\ndefault browser scroll, you can do so by using the `useWindow` prop:\n\n```vue\n<template>\n  <MainScroll useWindow>\n    <ul>\n      <MainScrollItem v-for=\"item in 24\" tag=\"li\">Item {{ item }}</MainScrollItem>\n    </ul>\n  </MainScroll>\n</template>\n\n<script>\n  import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'MainScrollDemo',\n    components: {\n      MainScroll,\n      MainScrollItem\n    }\n  };\n</script>\n```\n\n#### Timeout for restoring scroll\n\nWhen your application is loaded, this component, together with the `MainScrollItem` will try to\nrestore the scroll to the provided position (if available). Because of the dynamic nature of\nJavaScript applications, the element that it tries to restore the scroll to might not be available\nanymore. For this reason after a defined time, the scroll restoration will be considered failed.\n\nThis time can be configured through the `restore-scroll-timeout-ms` prop. This is specially useful\nwhen combined with the URL X Module.\n\n```vue\n<template>\n  <MainScroll :restoreScrollTimeoutMs=\"1000\">\n    <ul>\n      <MainScrollItem v-for=\"item in 24\" tag=\"li\">Item {{ item }}</MainScrollItem>\n    </ul>\n  </MainScroll>\n</template>\n\n<script>\n  import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'MainScrollDemo',\n    components: {\n      MainScroll,\n      MainScrollItem\n    }\n  };\n</script>\n```\n\n#### Adjust first visible item\n\nBy default this component will consider the first visible item, the first element that is at least\nintersecting a 50% with its container. However this arbitrary number might not always be the best.\n\nTo configure this, you can use the `margin` and `threshold` props, which work exactly like in the\n`IntersectionObserver` API. In this example we are reducing the bounds of the intersection by 50px,\nand adjusting the element to be at least 75% intersecting.\n\n```vue\n<template>\n  <MainScroll :threshold=\"0.75\" margin=\"-50px\">\n    <ul>\n      <MainScrollItem v-for=\"item in 24\" tag=\"li\">Item {{ item }}</MainScrollItem>\n    </ul>\n  </MainScroll>\n</template>\n\n<script>\n  import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'MainScrollDemo',\n    components: {\n      MainScroll,\n      MainScrollItem\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"main-scroll.vue.js","sources":["../../../../../src/x-modules/scroll/components/main-scroll.vue"],"sourcesContent":["<template>\n  <NoElement :class=\"dynamicClasses\">\n    <slot />\n  </NoElement>\n</template>\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop, Watch } from 'vue-property-decorator';\n  import { XEmit } from '../../../components/decorators/bus.decorators';\n  import { XProvide } from '../../../components/decorators/injection.decorators';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { NoElement } from '../../../components/no-element';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { VueCSSClasses } from '../../../utils/index';\n  import { scrollXModule } from '../x-module';\n  import { ScrollObserverKey } from './scroll.const';\n  import { ScrollVisibilityObserver } from './scroll.types';\n\n  /**\n   * Extends the scroll making it able to sync the first visible element, and allowing\n   * the children position to be restored.\n   *\n   * Each child element that wants to have this support must be wrapped in a {@link MainScrollItem}\n   * component.\n   *\n   * @public\n   */\n  @Component({\n    components: { NoElement },\n    mixins: [xComponentMixin(scrollXModule)]\n  })\n  /* eslint-disable @typescript-eslint/unbound-method */\n  export default class MainScroll extends Vue {\n    /**\n     * If `true`, sets this scroll instance to the main of the application. Being the main\n     * scroll implies that features like restoring the scroll when the query changes, or storing\n     * the scroll position in the URL will be enabled for this container.\n     *\n     * @public\n     */\n    @Prop({ default: false, type: Boolean })\n    public useWindow!: boolean;\n\n    /**\n     * Timeout in milliseconds to abort trying to restore the scroll position to the target\n     * element.\n     *\n     * @public\n     */\n    @Prop({ default: 5000 })\n    public restoreScrollTimeoutMs!: number;\n\n    /**\n     * Intersection percentage to consider an element visible.\n     *\n     * @public\n     */\n    @Prop({ default: 0.3 })\n    public threshold!: number;\n\n    /**\n     * Adjusts the size of the scroll container bounds.\n     *\n     * @public\n     */\n    @Prop({ default: '0px' })\n    public margin!: string;\n\n    /**\n     * The elements that are currently considered visible.\n     *\n     * @internal\n     */\n    protected intersectingElements: HTMLElement[] = [];\n\n    /**\n     * Intersection observer to determine visibility of the elements.\n     *\n     * @returns An intersection observer to detect elements visibility.\n     * @internal\n     */\n    protected intersectionObserver: IntersectionObserver | null = null;\n\n    /**\n     * Stores the identifier of the timeout that will consider the scroll failed to restore.\n     *\n     * @internal\n     */\n    protected restoreScrollFailTimeoutId?: number;\n\n    /**\n     * Pending identifier scroll position to restore. If it matches the {@link MainScrollItem.item}\n     * `id` property, this component should be scrolled into view.\n     *\n     * @internal\n     */\n    @State('scroll', 'pendingScrollTo')\n    public pendingScrollTo!: string;\n\n    /**\n     * Creates an `IntersectionObserver` to detect the first visible elements. Children of this\n     * component should register themselves if they want to be observed.\n     *\n     * @returns The intersection observer.\n     * @public\n     */\n    @XProvide(ScrollObserverKey)\n    public get visibleElementsObserver(): ScrollVisibilityObserver | null {\n      const observer = this.intersectionObserver;\n      return observer\n        ? {\n            observe: observer.observe.bind(observer),\n            unobserve: element => {\n              this.removeVisibleElement(element);\n              observer.unobserve(element);\n            }\n          }\n        : null;\n    }\n\n    /**\n     * The first visible element contained in this component.\n     *\n     * @returns The first visible element in this component.\n     * @internal\n     */\n    @XEmit('UserScrolledToElement')\n    public get firstVisibleElement(): string | '' {\n      if (this.intersectingElements.length === 0) {\n        return '';\n      }\n      const firstVisibleElement = this.intersectingElements.reduce(\n        (firstVisibleElement, anotherElement) => {\n          // FIXME: This algorithm only takes into account LTR layouts\n          const firstVisibleElementBounds = firstVisibleElement.getBoundingClientRect();\n          const anotherElementBounds = anotherElement.getBoundingClientRect();\n          return anotherElementBounds.left <= firstVisibleElementBounds.left &&\n            anotherElementBounds.top <= firstVisibleElementBounds.top\n            ? anotherElement\n            : firstVisibleElement;\n        }\n      );\n\n      return firstVisibleElement === this.$el.querySelector('[data-scroll]')\n        ? ''\n        : firstVisibleElement.dataset.scroll!;\n    }\n\n    /**\n     * Initialise the observer after mounting the component.\n     */\n    mounted(): void {\n      this.intersectionObserver = new IntersectionObserver(this.updateVisibleElements, {\n        root: this.useWindow ? document : this.$el,\n        threshold: this.threshold,\n        rootMargin: this.margin\n      });\n    }\n\n    /**\n     * Disconnects the intersection observer.\n     *\n     * @internal\n     */\n    beforeDestroy(): void {\n      this.intersectionObserver?.disconnect();\n      this.$x.emit('UserScrolledToElement', '');\n    }\n\n    /**\n     * Disconnects the previous observer.\n     *\n     * @param _new - The new `IntersectionObserver`.\n     * @param old - The new `IntersectionObserver`.\n     * @internal\n     */\n    @Watch('intersectionObserver')\n    protected disconnectPreviousObserver(\n      _new: IntersectionObserver | null,\n      old: IntersectionObserver | null\n    ): void {\n      old?.disconnect();\n    }\n\n    /**\n     * If there is a pending scroll, starts a countdown to stop trying to restore the scroll.\n     *\n     * @param pendingScrollTo - The position the scroll should be restored to.\n     * @internal\n     */\n    @Watch('pendingScrollTo')\n    protected failRestoringScroll(pendingScrollTo: string | null): void {\n      // TODO Move this logic to the wiring. A cancelable delay operator is needed\n      clearTimeout(this.restoreScrollFailTimeoutId);\n      if (pendingScrollTo) {\n        this.restoreScrollFailTimeoutId = setTimeout(() => {\n          this.$x.emit('ScrollRestoreFailed');\n        }, this.restoreScrollTimeoutMs);\n      }\n    }\n\n    /**\n     * Removes an element from the {@link MainScroll.intersectingElements} list.\n     *\n     * @param element - The element to remove from the visible elements.\n     * @internal\n     */\n    protected removeVisibleElement(element: HTMLElement): void {\n      const index = this.intersectingElements.indexOf(element);\n      if (index !== -1) {\n        this.intersectingElements.splice(index, 1);\n      }\n    }\n\n    /**\n     * Updates the visible elements given a list of intersection observer entries.\n     *\n     * @param entries - The entries from whom update the visibility.\n     * @internal\n     */\n    protected updateVisibleElements(entries: IntersectionObserverEntry[]): void {\n      entries.forEach(entry => {\n        const target = entry.target as HTMLElement;\n        if (entry.isIntersecting) {\n          this.intersectingElements.push(target);\n        } else {\n          this.removeVisibleElement(target);\n        }\n      });\n    }\n\n    /**\n     * Adds the dynamic css classes to the component.\n     *\n     * @returns The class to be added to the component.\n     *\n     * @internal\n     */\n    protected get dynamicClasses(): VueCSSClasses {\n      return {\n        'x-main-scroll--no-transition': !!this.pendingScrollTo\n      };\n    }\n  }\n</script>\n<style lang=\"scss\">\n  .x-main-scroll--no-transition {\n    * {\n      transition: none !important;\n      transform: none !important;\n      opacity: 1 !important;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n[`UserScrolledToElement`](./../../api/x-components.scrollxevents.md)\n[`ScrollRestoreFailed`](./../../api/x-components.scrollxevents.md)\n\n## See it in action\n\nThe `MainScroll` component must be an ancestor of the `MainScrollItem` components. This is because\nit injects the needed utilities to determine the first visible item.\n\n```vue\n<template>\n  <MainScroll>\n    <ul>\n      <MainScrollItem v-for=\"item in 24\" tag=\"li\">Item {{ item }}</MainScrollItem>\n    </ul>\n  </MainScroll>\n</template>\n\n<script>\n  import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'MainScrollDemo',\n    components: {\n      MainScroll,\n      MainScrollItem\n    }\n  };\n</script>\n\n<style scoped>\n  ul {\n    overflow: auto;\n    max-height: 200px;\n  }\n\n  li {\n    height: 50px;\n    line-height: 50px;\n  }\n</style>\n```\n\n### Play with props\n\n#### Window scroll\n\nIn case you aren't using a custom scrolling element like the `Scroll` panel, and want to use the\ndefault browser scroll, you can do so by using the `useWindow` prop:\n\n```vue\n<template>\n  <MainScroll useWindow>\n    <ul>\n      <MainScrollItem v-for=\"item in 24\" tag=\"li\">Item {{ item }}</MainScrollItem>\n    </ul>\n  </MainScroll>\n</template>\n\n<script>\n  import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'MainScrollDemo',\n    components: {\n      MainScroll,\n      MainScrollItem\n    }\n  };\n</script>\n```\n\n#### Timeout for restoring scroll\n\nWhen your application is loaded, this component, together with the `MainScrollItem` will try to\nrestore the scroll to the provided position (if available). Because of the dynamic nature of\nJavaScript applications, the element that it tries to restore the scroll to might not be available\nanymore. For this reason after a defined time, the scroll restoration will be considered failed.\n\nThis time can be configured through the `restore-scroll-timeout-ms` prop. This is specially useful\nwhen combined with the URL X Module.\n\n```vue\n<template>\n  <MainScroll :restoreScrollTimeoutMs=\"1000\">\n    <ul>\n      <MainScrollItem v-for=\"item in 24\" tag=\"li\">Item {{ item }}</MainScrollItem>\n    </ul>\n  </MainScroll>\n</template>\n\n<script>\n  import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'MainScrollDemo',\n    components: {\n      MainScroll,\n      MainScrollItem\n    }\n  };\n</script>\n```\n\n#### Adjust first visible item\n\nBy default this component will consider the first visible item, the first element that is at least\nintersecting a 50% with its container. However this arbitrary number might not always be the best.\n\nTo configure this, you can use the `margin` and `threshold` props, which work exactly like in the\n`IntersectionObserver` API. In this example we are reducing the bounds of the intersection by 50px,\nand adjusting the element to be at least 75% intersecting.\n\n```vue\n<template>\n  <MainScroll :threshold=\"0.75\" margin=\"-50px\">\n    <ul>\n      <MainScrollItem v-for=\"item in 24\" tag=\"li\">Item {{ item }}</MainScrollItem>\n    </ul>\n  </MainScroll>\n</template>\n\n<script>\n  import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'MainScrollDemo',\n    components: {\n      MainScroll,\n      MainScrollItem\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/scroll/components/main-scroll.vue_rollup-plugin-vue_styles.0.vue.js

@@ -0,0 +1,7 @@
+import { createInjector } from 'vue-runtime-helpers';
+
+var css = ".x-main-scroll--no-transition * {\n  transition: none !important;\n  transform: none !important;\n  opacity: 1 !important;\n}";
+const injector=createInjector({});injector('/__w/x/x/packages/x-components/src/x-modules/scroll/components/main-scroll.vue?rollup-plugin-vue=styles.0.css',{source:css});
+
+export { css, css as default };
+//# sourceMappingURL=main-scroll.vue_rollup-plugin-vue_styles.0.vue.js.map

package/js/x-modules/scroll/components/main-scroll.vue_rollup-plugin-vue_styles.0.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main-scroll.vue_rollup-plugin-vue_styles.0.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/js/x-modules/scroll/components/scroll-to-top.vue_rollup-plugin-vue_script.vue.js

@@ -9,8 +9,8 @@ import '../../../components/animations/fade.vue.js';
 import '../../../components/animations/fade-and-slide.vue.js';
 import '../../../components/animations/staggered-fade-and-slide.vue.js';
 import '../../../components/animations/staggering-transition-group.vue_rollup-plugin-vue_script.vue.js';
+import '../../../components/animations/staggering-transition-group.vue_rollup-plugin-vue_styles.0.vue.js';
 import 'vue-runtime-helpers/dist/normalize-component.mjs';
-import 'vue-runtime-helpers/dist/inject-style/browser.mjs';
 import '../../../components/animations/animate-clip-path/animate-clip-path.style.scss.js';
 import '../../../components/animations/animate-scale/animate-scale.style.scss.js';
 import '../../../components/animations/animate-translate/animate-translate.style.scss.js';

package/js/x-modules/scroll/components/window-scroll.vue_rollup-plugin-vue_script.vue.js

@@ -9,8 +9,8 @@ import '../../../components/animations/fade.vue.js';
 import '../../../components/animations/fade-and-slide.vue.js';
 import '../../../components/animations/staggered-fade-and-slide.vue.js';
 import '../../../components/animations/staggering-transition-group.vue_rollup-plugin-vue_script.vue.js';
+import '../../../components/animations/staggering-transition-group.vue_rollup-plugin-vue_styles.0.vue.js';
 import 'vue-runtime-helpers/dist/normalize-component.mjs';
-import 'vue-runtime-helpers/dist/inject-style/browser.mjs';
 import 'vue';
 import '../../../components/animations/animate-clip-path/animate-clip-path.style.scss.js';
 import '../../../components/animations/animate-scale/animate-scale.style.scss.js';

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

@@ -1,10 +1,9 @@
 import script from './banner.vue_rollup-plugin-vue_script.vue.js';
+import './banner.vue_rollup-plugin-vue_styles.0.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 */
 const __vue_script__ = script;
-
 /* template */
 var __vue_render__ = function () {
   var _vm = this;
@@ -33,17 +32,15 @@ var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__ = function (inject) {
-    if (!inject) return
-    inject("data-v-3a9082b6_0", { source: ".x-banner {\n  display: flex;\n  flex-flow: column nowrap;\n  text-decoration: none;\n}\n.x-banner__image {\n  width: 100%;\n  object-fit: contain;\n}", map: undefined, media: undefined });
-
-  };
+  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 */
@@ -58,7 +55,7 @@ __vue_render__._withStripped = true;
     __vue_is_functional_template__,
     __vue_module_identifier__,
     false,
-    __vue_create_injector__,
+    undefined,
     undefined,
     undefined
   );

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

@@ -1 +1 @@
-{"version":3,"file":"banner.vue.js","sources":["../../../../../src/x-modules/search/components/banner.vue"],"sourcesContent":["<template>\n  <a @click=\"emitClickEvent\" :href=\"banner.url\" class=\"x-banner\" data-test=\"banner\">\n    <img :src=\"banner.image\" class=\"x-banner__image\" :alt=\"banner.title\" />\n    <h2 class=\"x-banner__title\">{{ banner.title }}</h2>\n  </a>\n</template>\n\n<script lang=\"ts\">\n  import { Banner as BannerModel } 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   * 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  })\n  export 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</script>\n\n<style lang=\"scss\">\n  .x-banner {\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 banned data is passed as a prop.\n\n_Here you can see how the `Banner` component is rendered._\n\n```vue\n<template>\n  <Banner :banner=\"banner\" />\n</template>\n\n<script>\n  import { Banner } from '@empathyco/x-components/search';\n  export default {\n    name: 'BannerDemo',\n    components: {\n      Banner\n    },\n    data() {\n      return {\n        banner: {\n          modelName: 'Banner',\n          id: 'banner-example',\n          url: 'https://my-website.com/summer-shirts',\n          image: 'https://my-website.com/images/summer-shirts.jpg',\n          title: 'Trendy summer shirts'\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"banner.vue.js","sources":["../../../../../src/x-modules/search/components/banner.vue"],"sourcesContent":["<template>\n  <a @click=\"emitClickEvent\" :href=\"banner.url\" class=\"x-banner\" data-test=\"banner\">\n    <img :src=\"banner.image\" class=\"x-banner__image\" :alt=\"banner.title\" />\n    <h2 class=\"x-banner__title\">{{ banner.title }}</h2>\n  </a>\n</template>\n\n<script lang=\"ts\">\n  import { Banner as BannerModel } 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   * 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  })\n  export 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</script>\n\n<style lang=\"scss\">\n  .x-banner {\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 banned data is passed as a prop.\n\n_Here you can see how the `Banner` component is rendered._\n\n```vue\n<template>\n  <Banner :banner=\"banner\" />\n</template>\n\n<script>\n  import { Banner } from '@empathyco/x-components/search';\n  export default {\n    name: 'BannerDemo',\n    components: {\n      Banner\n    },\n    data() {\n      return {\n        banner: {\n          modelName: 'Banner',\n          id: 'banner-example',\n          url: 'https://my-website.com/summer-shirts',\n          image: 'https://my-website.com/images/summer-shirts.jpg',\n          title: 'Trendy summer shirts'\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/search/components/banner.vue_rollup-plugin-vue_styles.0.vue.js

@@ -0,0 +1,7 @@
+import { createInjector } from 'vue-runtime-helpers';
+
+var css = ".x-banner {\n  display: flex;\n  flex-flow: column nowrap;\n  text-decoration: none;\n}\n.x-banner__image {\n  width: 100%;\n  object-fit: contain;\n}";
+const injector=createInjector({});injector('/__w/x/x/packages/x-components/src/x-modules/search/components/banner.vue?rollup-plugin-vue=styles.0.css',{source:css});
+
+export { css, css as default };
+//# sourceMappingURL=banner.vue_rollup-plugin-vue_styles.0.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"banner.vue_rollup-plugin-vue_styles.0.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

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

@@ -1,10 +1,9 @@
 import script from './partial-results-list.vue_rollup-plugin-vue_script.vue.js';
+import './partial-results-list.vue_rollup-plugin-vue_styles.0.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 */
 const __vue_script__ = script;
-
 /* template */
 var __vue_render__ = function () {
   var _vm = this;
@@ -38,17 +37,15 @@ var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
 
   /* style */
-  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 });
-
-  };
+  const __vue_inject_styles__ = undefined;
   /* scoped */
   const __vue_scope_id__ = "data-v-91d70c6c";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */
   const __vue_is_functional_template__ = false;
+  /* style inject */
+  
   /* style inject SSR */
   
   /* style inject shadow dom */
@@ -63,7 +60,7 @@ __vue_render__._withStripped = true;
     __vue_is_functional_template__,
     __vue_module_identifier__,
     false,
-    __vue_create_injector__,
+    undefined,
     undefined,
     undefined
   );

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":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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_styles.0.vue.js

@@ -0,0 +1,7 @@
+import { createInjector } from 'vue-runtime-helpers';
+
+var css = ".x-partial-results[data-v-91d70c6c] {\n  list-style-type: none;\n  padding: 0;\n}";
+const injector=createInjector({});injector('/__w/x/x/packages/x-components/src/x-modules/search/components/partial-results-list.vue?rollup-plugin-vue=styles.0.css',{source:css});
+
+export { css, css as default };
+//# sourceMappingURL=partial-results-list.vue_rollup-plugin-vue_styles.0.vue.js.map

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

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

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

@@ -1,10 +1,9 @@
 import script from './promoted.vue_rollup-plugin-vue_script.vue.js';
+import './promoted.vue_rollup-plugin-vue_styles.0.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 */
 const __vue_script__ = script;
-
 /* template */
 var __vue_render__ = function () {
   var _vm = this;
@@ -33,17 +32,15 @@ var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__ = function (inject) {
-    if (!inject) return
-    inject("data-v-6786add5_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 });
-
-  };
+  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 */
@@ -58,7 +55,7 @@ __vue_render__._withStripped = true;
     __vue_is_functional_template__,
     __vue_module_identifier__,
     false,
-    __vue_create_injector__,
+    undefined,
     undefined,
     undefined
   );

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\">{{ 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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\">{{ 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_styles.0.vue.js

@@ -0,0 +1,7 @@
+import { createInjector } from 'vue-runtime-helpers';
+
+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 injector=createInjector({});injector('/__w/x/x/packages/x-components/src/x-modules/search/components/promoted.vue?rollup-plugin-vue=styles.0.css',{source:css});
+
+export { css, css as default };
+//# sourceMappingURL=promoted.vue_rollup-plugin-vue_styles.0.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"promoted.vue_rollup-plugin-vue_styles.0.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

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

@@ -3,7 +3,6 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs'
 
 /* script */
 const __vue_script__ = script;
-
 /* template */
 var __vue_render__ = function () {
   var _vm = this;

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

@@ -1 +1 @@
-{"version":3,"file":"redirection.vue.js","sources":["../../../../../src/x-modules/search/components/redirection.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"redirection && $scopedSlots.default\"\n    class=\"x-redirection x-message\"\n    data-test=\"redirection\"\n  >\n    <slot v-bind=\"{ redirection, redirect, abortRedirect, isRedirecting, delayInSeconds }\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { Redirection as RedirectionModel } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop, Watch } from 'vue-property-decorator';\n  import { XOn } from '../../../components/decorators/bus.decorators';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { searchXModule } from '../x-module';\n\n  /**\n   * A redirection is a component that sends the user to a link in the website. It is helpful when\n   * there are queries like `help`, `shipping costs`, `my account`, where a link to a section in the\n   * website will be more helpful than the set of results returned.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(searchXModule)]\n  })\n  export default class Redirection extends Vue {\n    @State('search', 'redirections')\n    public redirections!: RedirectionModel[];\n\n    /**\n     * The redirection mode. Auto for auto redirection and manual for an user interaction.\n     *\n     * @public\n     */\n    @Prop({ default: 'auto' })\n    public mode!: 'auto' | 'manual';\n\n    /**\n     * The waiting time in seconds until the redirection is made.\n     *\n     * @remarks this delay only works in auto mode.\n     *\n     * @public\n     */\n    @Prop({ default: 0 })\n    public delayInSeconds!: number;\n\n    /**\n     * The timeout id, used to cancel the redirection.\n     *\n     * @internal\n     */\n    protected timeoutId?: number;\n\n    /**\n     * Boolean flag which indicates if the redirection is running.\n     *\n     * @public\n     */\n    protected isRedirecting = true;\n\n    /**\n     * Computed property which returns the first recommendation of the state, if any returns null.\n     *\n     * @returns The first redirection of the state.\n     *\n     * @internal\n     */\n    protected get redirection(): RedirectionModel | null {\n      return this.redirections?.[0] ?? null;\n    }\n\n    /**\n     * Watcher function which adds a setTimeout to the redirect method is the component\n     * is in auto mode and there are redirections.\n     *\n     * @internal\n     */\n    @Watch('redirections', { immediate: true })\n    protected redirectWithDelay(): void {\n      this.isRedirecting = true;\n      if (this.mode === 'auto' && this.redirection) {\n        // eslint-disable-next-line @typescript-eslint/unbound-method\n        this.timeoutId = setTimeout(this.redirect, this.delayInSeconds * 1000);\n      }\n    }\n\n    /**\n     * Dispatches the redirection, updating the url.\n     *\n     * @public\n     */\n    protected redirect(): void {\n      clearTimeout(this.timeoutId);\n      this.$x.emit('UserClickedARedirection', this.redirection!);\n      window.location.replace(this.redirection!.url);\n    }\n\n    /**\n     * Stops the redirection, emitting `UserClickedAbortARedirection` event.\n     *\n     * @public\n     */\n    protected abortRedirect(): void {\n      this.cancelRedirect();\n      this.$x.emit('UserClickedAbortARedirection');\n    }\n\n    /**\n     * Stops the animation if the user search another query.\n     *\n     * @internal\n     */\n    @XOn(['UserAcceptedAQuery', 'UserClearedQuery'])\n    cancelRedirect(): void {\n      clearTimeout(this.timeoutId);\n      this.isRedirecting = false;\n    }\n  }\n</script>\n\n<style lang=\"scss\"></style>\n\n<docs lang=\"mdx\">\n## Play with the component\n\nIn this example, a query has been searched in the search input resulting in a case where the\nresponse has a redirection.\n\nA text box appears bellow the search box indicating that you're going to be redirected to another\nweb page.\n\nThis component has two modes:\n\n- Auto mode means that the redirection will occur after a certain number of seconds passed as a\n  property.\n- If the value is 0 the redirection will be instantly.\n- Manual mode means that the user have to click the redirect button or nothing will happen.\n\n_Type any term in the input field to try it out!_\n\n```vue\n<template>\n  <Redirection #default=\"{ redirection, redirect, abortRedirect }\">\n    <span>In a few seconds you're going to be redirected!</span>\n    <span>{{ redirection.url }}</span>\n    <button @click=\"redirection\">Redirect now!</button>\n    <button @click=\"abortRedirect\">Abort redirection!</button>\n  </Redirection>\n</template>\n\n<script>\n  import { Redirection } from '@empathyco/x-components/search';\n  export default {\n    name: 'RedirectionDemo',\n    components: {\n      Redirection\n    }\n  };\n</script>\n```\n\n## Extending the component\n\nComponents behaviour can be changed, in this example the mode of the component will be manual\nforcing the user to accept the redirection\n\n```vue\n<template>\n  <Redirection #default=\"{ redirection, redirect }\">\n    <span>{{ redirection.url }}</span>\n    <button @click=\"redirect\">Redirect now!</button>\n  </Redirection>\n</template>\n\n<script>\n  import { Redirection } from '@empathyco/x-components/search';\n  export default {\n    name: 'RedirectionDemo',\n    components: {\n      Redirection\n    },\n    data() {\n      return {\n        mode: 'manual'\n      };\n    }\n  };\n</script>\n```\n\n## Events\n\nThis component emits the following events:\n\n- `UserClickedARedirection` after the user clicks the redirection button.\n- `UserClickedAbortARedirection` after the user clicks the abort redirection button.\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"redirection.vue.js","sources":["../../../../../src/x-modules/search/components/redirection.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"redirection && $scopedSlots.default\"\n    class=\"x-redirection x-message\"\n    data-test=\"redirection\"\n  >\n    <slot v-bind=\"{ redirection, redirect, abortRedirect, isRedirecting, delayInSeconds }\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { Redirection as RedirectionModel } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop, Watch } from 'vue-property-decorator';\n  import { XOn } from '../../../components/decorators/bus.decorators';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { searchXModule } from '../x-module';\n\n  /**\n   * A redirection is a component that sends the user to a link in the website. It is helpful when\n   * there are queries like `help`, `shipping costs`, `my account`, where a link to a section in the\n   * website will be more helpful than the set of results returned.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(searchXModule)]\n  })\n  export default class Redirection extends Vue {\n    @State('search', 'redirections')\n    public redirections!: RedirectionModel[];\n\n    /**\n     * The redirection mode. Auto for auto redirection and manual for an user interaction.\n     *\n     * @public\n     */\n    @Prop({ default: 'auto' })\n    public mode!: 'auto' | 'manual';\n\n    /**\n     * The waiting time in seconds until the redirection is made.\n     *\n     * @remarks this delay only works in auto mode.\n     *\n     * @public\n     */\n    @Prop({ default: 0 })\n    public delayInSeconds!: number;\n\n    /**\n     * The timeout id, used to cancel the redirection.\n     *\n     * @internal\n     */\n    protected timeoutId?: number;\n\n    /**\n     * Boolean flag which indicates if the redirection is running.\n     *\n     * @public\n     */\n    protected isRedirecting = true;\n\n    /**\n     * Computed property which returns the first recommendation of the state, if any returns null.\n     *\n     * @returns The first redirection of the state.\n     *\n     * @internal\n     */\n    protected get redirection(): RedirectionModel | null {\n      return this.redirections?.[0] ?? null;\n    }\n\n    /**\n     * Watcher function which adds a setTimeout to the redirect method is the component\n     * is in auto mode and there are redirections.\n     *\n     * @internal\n     */\n    @Watch('redirections', { immediate: true })\n    protected redirectWithDelay(): void {\n      this.isRedirecting = true;\n      if (this.mode === 'auto' && this.redirection) {\n        // eslint-disable-next-line @typescript-eslint/unbound-method\n        this.timeoutId = setTimeout(this.redirect, this.delayInSeconds * 1000);\n      }\n    }\n\n    /**\n     * Dispatches the redirection, updating the url.\n     *\n     * @public\n     */\n    protected redirect(): void {\n      clearTimeout(this.timeoutId);\n      this.$x.emit('UserClickedARedirection', this.redirection!);\n      window.location.replace(this.redirection!.url);\n    }\n\n    /**\n     * Stops the redirection, emitting `UserClickedAbortARedirection` event.\n     *\n     * @public\n     */\n    protected abortRedirect(): void {\n      this.cancelRedirect();\n      this.$x.emit('UserClickedAbortARedirection');\n    }\n\n    /**\n     * Stops the animation if the user search another query.\n     *\n     * @internal\n     */\n    @XOn(['UserAcceptedAQuery', 'UserClearedQuery'])\n    cancelRedirect(): void {\n      clearTimeout(this.timeoutId);\n      this.isRedirecting = false;\n    }\n  }\n</script>\n\n<style lang=\"scss\"></style>\n\n<docs lang=\"mdx\">\n## Play with the component\n\nIn this example, a query has been searched in the search input resulting in a case where the\nresponse has a redirection.\n\nA text box appears bellow the search box indicating that you're going to be redirected to another\nweb page.\n\nThis component has two modes:\n\n- Auto mode means that the redirection will occur after a certain number of seconds passed as a\n  property.\n- If the value is 0 the redirection will be instantly.\n- Manual mode means that the user have to click the redirect button or nothing will happen.\n\n_Type any term in the input field to try it out!_\n\n```vue\n<template>\n  <Redirection #default=\"{ redirection, redirect, abortRedirect }\">\n    <span>In a few seconds you're going to be redirected!</span>\n    <span>{{ redirection.url }}</span>\n    <button @click=\"redirection\">Redirect now!</button>\n    <button @click=\"abortRedirect\">Abort redirection!</button>\n  </Redirection>\n</template>\n\n<script>\n  import { Redirection } from '@empathyco/x-components/search';\n  export default {\n    name: 'RedirectionDemo',\n    components: {\n      Redirection\n    }\n  };\n</script>\n```\n\n## Extending the component\n\nComponents behaviour can be changed, in this example the mode of the component will be manual\nforcing the user to accept the redirection\n\n```vue\n<template>\n  <Redirection #default=\"{ redirection, redirect }\">\n    <span>{{ redirection.url }}</span>\n    <button @click=\"redirect\">Redirect now!</button>\n  </Redirection>\n</template>\n\n<script>\n  import { Redirection } from '@empathyco/x-components/search';\n  export default {\n    name: 'RedirectionDemo',\n    components: {\n      Redirection\n    },\n    data() {\n      return {\n        mode: 'manual'\n      };\n    }\n  };\n</script>\n```\n\n## Events\n\nThis component emits the following events:\n\n- `UserClickedARedirection` after the user clicks the redirection button.\n- `UserClickedAbortARedirection` after the user clicks the abort redirection button.\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,10 +1,9 @@
 import script from './sort-list.vue_rollup-plugin-vue_script.vue.js';
+import './sort-list.vue_rollup-plugin-vue_styles.0.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 */
 const __vue_script__ = script;
-
 /* template */
 var __vue_render__ = function () {
   var _vm = this;
@@ -58,17 +57,15 @@ var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__ = function (inject) {
-    if (!inject) return
-    inject("data-v-50022f3c_0", { source: ".x-sort-list[data-v-50022f3c] {\n  list-style-type: none;\n}", map: undefined, media: undefined });
-
-  };
+  const __vue_inject_styles__ = undefined;
   /* scoped */
   const __vue_scope_id__ = "data-v-50022f3c";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */
   const __vue_is_functional_template__ = false;
+  /* style inject */
+  
   /* style inject SSR */
   
   /* style inject shadow dom */
@@ -83,7 +80,7 @@ __vue_render__._withStripped = true;
     __vue_is_functional_template__,
     __vue_module_identifier__,
     false,
-    __vue_create_injector__,
+    undefined,
     undefined,
     undefined
   );

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

@@ -1 +1 @@
-{"version":3,"file":"sort-list.vue.js","sources":["../../../../../src/x-modules/search/components/sort-list.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" tag=\"ul\" class=\"x-option-list x-sort-list\" data-test=\"sort-list\">\n    <li\n      v-for=\"{ item, cssClasses, event } in listItems\"\n      :key=\"item\"\n      :class=\"cssClasses\"\n      class=\"x-option-list__item x-sort-list__item\"\n    >\n      <BaseEventButton\n        class=\"x-button x-sort-list__button\"\n        data-test=\"x-sort-button\"\n        :events=\"event\"\n      >\n        <slot v-bind=\"{ item, isSelected: item === selectedSort }\">\n          {{ item }}\n        </slot>\n      </BaseEventButton>\n    </li>\n  </component>\n</template>\n\n<style lang=\"scss\" scoped>\n  .x-sort-list {\n    list-style-type: none;\n  }\n</style>\n\n<script lang=\"ts\">\n  import { Sort } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { mixins } from 'vue-class-component';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { BaseEventButton } from '../../../components';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { VueCSSClasses } from '../../../utils';\n  import { XEventsTypes } from '../../../wiring';\n  import { searchXModule } from '../x-module';\n  import SortMixin from './sort.mixin';\n\n  /**\n   * Sort list item options.\n   *\n   * @public\n   */\n  interface SortListItem {\n    item: Sort;\n    cssClasses: VueCSSClasses;\n    event: Partial<XEventsTypes>;\n  }\n  /**\n   * The `SortList` component allows user to select the search results order. This component\n   * also allows to change the selected sort programmatically.\n   *\n   * @remarks It extends {@link SortMixin}.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(searchXModule)],\n    components: {\n      BaseEventButton\n    }\n  })\n  export default class SortList extends mixins(SortMixin) {\n    /**\n     * The transition to use for rendering the list.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    public animation?: string | typeof Vue;\n    /**\n     * Sort list items.\n     *\n     * @returns A list of items with their css class and the event associate to it.\n     *\n     * @internal\n     */\n    protected get listItems(): SortListItem[] {\n      return this.items.map(item => ({\n        item,\n        cssClasses: [\n          {\n            'x-sort-list__item--is-selected': item === this.selectedSort,\n            'x-option-list__item--is-selected': item === this.selectedSort\n          }\n        ],\n        event: { UserClickedASort: item }\n      }));\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Sort List\n\nThe `SortList` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can then be received in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `value` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing each one of the possible sort values. This can be done with\nthe `default` slot.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n  <SortList :items=\"sortValues\">\n    <template #item=\"{ item, isSelected }\">Item: {{ item }}</template>\n  </SortList>\n</template>\n\n<script>\n  import { SortList } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      SortList\n    },\n    data() {\n      return { sortValues: ['Relevance', 'Price asc', 'Price desc'] };\n    }\n  };\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n  <SortList v-model=\"selectedSort\" :items=\"sortValues\">\n    <template #item=\"{ item, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      {{ item }}\n    </template>\n  </SortList>\n</template>\n\n<script>\n  import { SortList } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      SortList\n    },\n    data() {\n      return {\n        selectedSort: 'Price asc',\n        sortValues: ['Relevance', 'Price asc', 'Price desc']\n      };\n    }\n  };\n</script>\n```\n\n## Events\n\nThis component emits 2 different events:\n\n- SelectedSortProvided: To sync the selected sort with the store state value. This event is emitted\n  as soon as the list of items is received, whenever this list changes if there is no provided\n  value, and when the provided value changes.\n- UserClickedASort: As its name suggest, the event is emitted after the user clicks one of the sort\n  options. This does not mean that the sort has changed, only that the user has clicked it.\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"sort-list.vue.js","sources":["../../../../../src/x-modules/search/components/sort-list.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" tag=\"ul\" class=\"x-option-list x-sort-list\" data-test=\"sort-list\">\n    <li\n      v-for=\"{ item, cssClasses, event } in listItems\"\n      :key=\"item\"\n      :class=\"cssClasses\"\n      class=\"x-option-list__item x-sort-list__item\"\n    >\n      <BaseEventButton\n        class=\"x-button x-sort-list__button\"\n        data-test=\"x-sort-button\"\n        :events=\"event\"\n      >\n        <slot v-bind=\"{ item, isSelected: item === selectedSort }\">\n          {{ item }}\n        </slot>\n      </BaseEventButton>\n    </li>\n  </component>\n</template>\n\n<style lang=\"scss\" scoped>\n  .x-sort-list {\n    list-style-type: none;\n  }\n</style>\n\n<script lang=\"ts\">\n  import { Sort } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { mixins } from 'vue-class-component';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { BaseEventButton } from '../../../components';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { VueCSSClasses } from '../../../utils';\n  import { XEventsTypes } from '../../../wiring';\n  import { searchXModule } from '../x-module';\n  import SortMixin from './sort.mixin';\n\n  /**\n   * Sort list item options.\n   *\n   * @public\n   */\n  interface SortListItem {\n    item: Sort;\n    cssClasses: VueCSSClasses;\n    event: Partial<XEventsTypes>;\n  }\n  /**\n   * The `SortList` component allows user to select the search results order. This component\n   * also allows to change the selected sort programmatically.\n   *\n   * @remarks It extends {@link SortMixin}.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(searchXModule)],\n    components: {\n      BaseEventButton\n    }\n  })\n  export default class SortList extends mixins(SortMixin) {\n    /**\n     * The transition to use for rendering the list.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    public animation?: string | typeof Vue;\n    /**\n     * Sort list items.\n     *\n     * @returns A list of items with their css class and the event associate to it.\n     *\n     * @internal\n     */\n    protected get listItems(): SortListItem[] {\n      return this.items.map(item => ({\n        item,\n        cssClasses: [\n          {\n            'x-sort-list__item--is-selected': item === this.selectedSort,\n            'x-option-list__item--is-selected': item === this.selectedSort\n          }\n        ],\n        event: { UserClickedASort: item }\n      }));\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Sort List\n\nThe `SortList` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can then be received in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `value` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing each one of the possible sort values. This can be done with\nthe `default` slot.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n  <SortList :items=\"sortValues\">\n    <template #item=\"{ item, isSelected }\">Item: {{ item }}</template>\n  </SortList>\n</template>\n\n<script>\n  import { SortList } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      SortList\n    },\n    data() {\n      return { sortValues: ['Relevance', 'Price asc', 'Price desc'] };\n    }\n  };\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n  <SortList v-model=\"selectedSort\" :items=\"sortValues\">\n    <template #item=\"{ item, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      {{ item }}\n    </template>\n  </SortList>\n</template>\n\n<script>\n  import { SortList } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      SortList\n    },\n    data() {\n      return {\n        selectedSort: 'Price asc',\n        sortValues: ['Relevance', 'Price asc', 'Price desc']\n      };\n    }\n  };\n</script>\n```\n\n## Events\n\nThis component emits 2 different events:\n\n- SelectedSortProvided: To sync the selected sort with the store state value. This event is emitted\n  as soon as the list of items is received, whenever this list changes if there is no provided\n  value, and when the provided value changes.\n- UserClickedASort: As its name suggest, the event is emitted after the user clicks one of the sort\n  options. This does not mean that the sort has changed, only that the user has clicked it.\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -9,8 +9,8 @@ import '../../../components/animations/fade.vue.js';
 import '../../../components/animations/fade-and-slide.vue.js';
 import '../../../components/animations/staggered-fade-and-slide.vue.js';
 import '../../../components/animations/staggering-transition-group.vue_rollup-plugin-vue_script.vue.js';
+import '../../../components/animations/staggering-transition-group.vue_rollup-plugin-vue_styles.0.vue.js';
 import 'vue-runtime-helpers/dist/normalize-component.mjs';
-import 'vue-runtime-helpers/dist/inject-style/browser.mjs';
 import 'vue';
 import '../../../components/animations/animate-clip-path/animate-clip-path.style.scss.js';
 import '../../../components/animations/animate-scale/animate-scale.style.scss.js';

package/js/x-modules/search/components/sort-list.vue_rollup-plugin-vue_styles.0.vue.js

@@ -0,0 +1,7 @@
+import { createInjector } from 'vue-runtime-helpers';
+
+var css = ".x-sort-list[data-v-50022f3c] {\n  list-style-type: none;\n}";
+const injector=createInjector({});injector('/__w/x/x/packages/x-components/src/x-modules/search/components/sort-list.vue?rollup-plugin-vue=styles.0.css',{source:css});
+
+export { css, css as default };
+//# sourceMappingURL=sort-list.vue_rollup-plugin-vue_styles.0.vue.js.map

package/js/x-modules/search/components/sort-list.vue_rollup-plugin-vue_styles.0.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sort-list.vue_rollup-plugin-vue_styles.0.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/js/x-modules/search/components/sort.mixin.js

@@ -10,8 +10,8 @@ import '../../../components/animations/fade.vue.js';
 import '../../../components/animations/fade-and-slide.vue.js';
 import '../../../components/animations/staggered-fade-and-slide.vue.js';
 import '../../../components/animations/staggering-transition-group.vue_rollup-plugin-vue_script.vue.js';
+import '../../../components/animations/staggering-transition-group.vue_rollup-plugin-vue_styles.0.vue.js';
 import 'vue-runtime-helpers/dist/normalize-component.mjs';
-import 'vue-runtime-helpers/dist/inject-style/browser.mjs';
 import '../../../components/animations/animate-clip-path/animate-clip-path.style.scss.js';
 import '../../../components/animations/animate-scale/animate-scale.style.scss.js';
 import '../../../components/animations/animate-translate/animate-translate.style.scss.js';

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

@@ -9,8 +9,8 @@ import '../../../components/animations/fade.vue.js';
 import '../../../components/animations/fade-and-slide.vue.js';
 import '../../../components/animations/staggered-fade-and-slide.vue.js';
 import '../../../components/animations/staggering-transition-group.vue_rollup-plugin-vue_script.vue.js';
+import '../../../components/animations/staggering-transition-group.vue_rollup-plugin-vue_styles.0.vue.js';
 import 'vue-runtime-helpers/dist/normalize-component.mjs';
-import 'vue-runtime-helpers/dist/inject-style/browser.mjs';
 import '../../../components/animations/animate-clip-path/animate-clip-path.style.scss.js';
 import '../../../components/animations/animate-scale/animate-scale.style.scss.js';
 import '../../../components/animations/animate-translate/animate-translate.style.scss.js';