@empathyco/x-components 3.0.0-alpha.41 → 3.0.0-alpha.45

package/js/components/result/base-result-rating.vue_rollup-plugin-vue=script.js

@@ -0,0 +1,42 @@
+import { __extends, __decorate } from 'tslib';
+import Vue from 'vue';
+import { Prop, Component } from 'vue-property-decorator';
+import BaseRating from '../base-rating.vue.js';
+
+/**
+ * This component renders a {@link BaseRating} for a result passed as prop.
+ *
+ * @public
+ */
+var BaseResultRating = /** @class */ (function (_super) {
+    __extends(BaseResultRating, _super);
+    function BaseResultRating() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    /**
+     * Emits the `UserClickedAResultRating` event when user clicks this component, with the
+     * {@link @empathyco/x-types#Result | Result} as payload.
+     *
+     * @internal
+     */
+    BaseResultRating.prototype.emitClickedEvent = function () {
+        this.$x.emit('UserClickedAResultRating', this.result, { target: this.$el });
+    };
+    __decorate([
+        Prop({ required: true })
+    ], BaseResultRating.prototype, "result", void 0);
+    __decorate([
+        Prop()
+    ], BaseResultRating.prototype, "link", void 0);
+    BaseResultRating = __decorate([
+        Component({
+            components: {
+                BaseRating: BaseRating
+            }
+        })
+    ], BaseResultRating);
+    return BaseResultRating;
+}(Vue));
+
+export default BaseResultRating;
+//# sourceMappingURL=base-result-rating.vue_rollup-plugin-vue=script.js.map

package/js/components/result/base-result-rating.vue_rollup-plugin-vue=script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-result-rating.vue_rollup-plugin-vue=script.js","sources":["../../../../src/components/result/base-result-rating.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { Result } from '@empathyco/x-types';\nimport BaseRating from '../base-rating.vue';\n\n/**\n * This component renders a {@link BaseRating} for a result passed as prop.\n *\n * @public\n */\n@Component({\n  components: {\n    BaseRating\n  }\n})\nexport default class BaseResultRating extends Vue {\n  /**\n   * The {@link @empathyco/x-types#Result | Result} to render its rating.\n   *\n   * @public\n   */\n  @Prop({ required: true })\n  protected result!: Result;\n\n  /**\n   * A link to redirect when rating is clicked.\n   *\n   * @public\n   */\n  @Prop()\n  protected link!: string;\n\n  /**\n   * Emits the `UserClickedAResultRating` event when user clicks this component, with the\n   * {@link @empathyco/x-types#Result | Result} as payload.\n   *\n   * @internal\n   */\n  protected emitClickedEvent(): void {\n    this.$x.emit('UserClickedAResultRating', this.result, { target: this.$el as HTMLElement });\n  }\n}\n"],"names":[],"mappings":";;;;;AAsCA;;;;;AAUA;IAA8C,oCAAG;IAAjD;;KA0BC;;;;;;;IAHW,2CAAgB,GAA1B;QACE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,0BAA0B,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,GAAkB,EAAE,CAAC,CAAC;KAC5F;IAlBD;QADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;oDACC;IAQ1B;QADC,IAAI,EAAE;kDACiB;IAfL,gBAAgB;QALpC,SAAS,CAAC;YACT,UAAU,EAAE;gBACV,UAAU,YAAA;aACX;SACF,CAAC;OACmB,gBAAgB,CA0BpC;IAAD,uBAAC;CAAA,CA1B6C,GAAG;;;;"}

package/js/components/sliding-panel.vue.js

@@ -24,7 +24,8 @@ var __vue_render__ = function () {
                 "button",
                 {
                   staticClass:
-                    "x-sliding-panel__button x-sliding-panel__button-left x-button x-button--round",
+                    "x-sliding-panel__button x-sliding-panel__button-left x-button",
+                  class: _vm.buttonClass,
                   attrs: { "data-test": "sliding-panel-left-button" },
                   on: { click: _vm.scrollLeft },
                 },
@@ -57,7 +58,8 @@ var __vue_render__ = function () {
                 "button",
                 {
                   staticClass:
-                    "x-sliding-panel__button x-sliding-panel__button-right x-button x-button--round",
+                    "x-sliding-panel__button x-sliding-panel__button-right x-button",
+                  class: _vm.buttonClass,
                   attrs: { "data-test": "sliding-panel-right-button" },
                   on: { click: _vm.scrollRight },
                 },
@@ -77,11 +79,11 @@ __vue_render__._withStripped = true;
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-561f2662_0", { source: ".x-sliding-panel[data-v-561f2662] {\n  align-items: center;\n  display: flex;\n  flex-flow: row nowrap;\n  height: 100%;\n  position: relative;\n}\n.x-sliding-panel__button[data-v-561f2662] {\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  transition: all ease-out 0.2s;\n  z-index: 2;\n  /* To overlay the design system gradient with z-index:1 */\n}\n.x-sliding-panel__button-left[data-v-561f2662] {\n  left: 0;\n}\n.x-sliding-panel__button-right[data-v-561f2662] {\n  right: 0;\n}\n.x-sliding-panel__scroll[data-v-561f2662] {\n  display: flex;\n  flex: 100%;\n  flex-flow: row nowrap;\n  overflow: auto;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n.x-sliding-panel__scroll[data-v-561f2662]::-webkit-scrollbar {\n  display: none;\n}\n.x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-start) .x-sliding-panel__button-left[data-v-561f2662] {\n  opacity: 1;\n  pointer-events: all;\n}\n.x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-end) .x-sliding-panel__button-right[data-v-561f2662] {\n  opacity: 1;\n  pointer-events: all;\n}", map: undefined, media: undefined });
+    inject("data-v-1c771718_0", { source: ".x-sliding-panel[data-v-1c771718] {\n  align-items: center;\n  display: flex;\n  flex-flow: row nowrap;\n  height: 100%;\n  position: relative;\n}\n.x-sliding-panel__button[data-v-1c771718] {\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  transition: all ease-out 0.2s;\n  z-index: 2;\n  /* To overlay the design system gradient with z-index:1 */\n}\n.x-sliding-panel__button-left[data-v-1c771718] {\n  left: 0;\n}\n.x-sliding-panel__button-right[data-v-1c771718] {\n  right: 0;\n}\n.x-sliding-panel__scroll[data-v-1c771718] {\n  display: flex;\n  flex: 100%;\n  flex-flow: row nowrap;\n  overflow: auto;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n.x-sliding-panel__scroll[data-v-1c771718]::-webkit-scrollbar {\n  display: none;\n}\n.x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-start) .x-sliding-panel__button-left[data-v-1c771718] {\n  opacity: 1;\n  pointer-events: all;\n}\n.x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-end) .x-sliding-panel__button-right[data-v-1c771718] {\n  opacity: 1;\n  pointer-events: all;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-561f2662";
+  var __vue_scope_id__ = "data-v-1c771718";
   /* module identifier */
   var __vue_module_identifier__ = undefined;
   /* functional template */

package/js/components/sliding-panel.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"sliding-panel.vue.js","sources":["../../../src/components/sliding-panel.vue"],"sourcesContent":["<template>\n  <div v-if=\"$slots.default\" class=\"x-sliding-panel\" :class=\"cssClasses\" data-test=\"sliding-panel\">\n    <button\n      v-if=\"showButtons\"\n      @click=\"scrollLeft\"\n      class=\"x-sliding-panel__button x-sliding-panel__button-left x-button x-button--round\"\n      data-test=\"sliding-panel-left-button\"\n    >\n      <!-- @slot Left button content -->\n      <slot name=\"sliding-panel-left-button\">ᐸ</slot>\n    </button>\n    <div\n      ref=\"scrollContainer\"\n      @scroll=\"debouncedUpdateScrollPosition\"\n      @transitionend=\"debouncedUpdateScrollPosition\"\n      @animationend=\"debouncedUpdateScrollPosition\"\n      class=\"x-list x-list--horizontal x-sliding-panel__scroll\"\n      data-test=\"sliding-panel-scroll\"\n    >\n      <!-- @slot (Required) Sliding panel content -->\n      <slot />\n    </div>\n    <button\n      v-if=\"showButtons\"\n      @click=\"scrollRight\"\n      class=\"x-sliding-panel__button x-sliding-panel__button-right x-button x-button--round\"\n      data-test=\"sliding-panel-right-button\"\n    >\n      <!-- @slot Right button content -->\n      <slot name=\"sliding-panel-right-button\">ᐳ</slot>\n    </button>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { VueCSSClasses } from '../utils/types';\n  import { Debounce } from './decorators/debounce.decorators';\n\n  /**\n   * This component allows for any other component or element inside it to be horizontally\n   * navigable. It also implements customizable buttons as well as other minor customizations to its\n   * general behavior.\n   *\n   * @public\n   */\n  @Component\n  export default class SlidingPanel extends Vue {\n    /**\n     * Scroll factor that will dictate how much the scroll moves when pressing a navigation button.\n     *\n     * @public\n     */\n    @Prop({ default: 0.7 })\n    public scrollFactor!: number;\n\n    /**\n     * Would make the navigation buttons visible when they're needed or always hide them.\n     *\n     * @public\n     */\n    @Prop({ default: true })\n    public showButtons!: boolean;\n\n    /**\n     * When true, whenever the DOM content in the sliding panel slot changes, it will reset\n     * the scroll position to 0.\n     *\n     * @public\n     */\n    @Prop({ default: true })\n    public resetOnContentChange!: boolean;\n\n    /**\n     * Indicates if the scroll is at the start of the sliding panel.\n     *\n     * @internal\n     */\n    protected isScrollAtStart = true;\n\n    /**\n     * Indicates if the scroll is at the end of the sliding panel.\n     *\n     * @internal\n     */\n    protected isScrollAtEnd = true;\n\n    /**\n     * HTMLElement referencing the scroll of the component.\n     *\n     * @internal\n     */\n    public $refs!: {\n      scrollContainer: HTMLElement;\n    };\n\n    /**\n     * CSS classes to apply based on the scroll position.\n     *\n     * @returns The CSS classes to apply.\n     *\n     * @internal\n     */\n    protected get cssClasses(): VueCSSClasses {\n      return {\n        'x-sliding-panel--at-start': this.isScrollAtStart,\n        'x-sliding-panel--at-end': this.isScrollAtEnd\n      };\n    }\n\n    /**\n     * Initialises browser platform code:\n     * - Creates a mutation observer to detect content changes and reset scroll position.\n     * - Stores initial size and scroll position values.\n     *\n     * @internal\n     */\n    mounted(): void {\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      const resizeObserver = new ResizeObserver(this.debouncedUpdateScrollPosition);\n      resizeObserver.observe(this.$el);\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      const contentChangedObserver = new MutationObserver(this.restoreAndUpdateScroll);\n      this.$watch(\n        () => this.resetOnContentChange,\n        shouldReset => {\n          if (shouldReset) {\n            contentChangedObserver.observe(this.$refs.scrollContainer, {\n              attributes: false,\n              childList: true,\n              subtree: true,\n              characterData: false\n            });\n          } else {\n            contentChangedObserver.disconnect();\n          }\n        },\n        { immediate: true }\n      );\n      this.$on('hook:beforeDestroy', () => {\n        contentChangedObserver.disconnect();\n        resizeObserver.disconnect();\n      });\n\n      this.updateScrollPosition();\n    }\n\n    /**\n     * Resets the scroll and updates the values of the scroll for the buttons to react.\n     *\n     * @internal\n     */\n    @Debounce(100, { leading: true })\n    restoreAndUpdateScroll(): void {\n      this.$refs.scrollContainer.scroll({ left: 0, behavior: 'smooth' });\n      this.updateScrollPosition();\n    }\n\n    /**\n     * Updates the values of the scroll positions to show or hide the buttons depending on it.\n     *\n     * @internal\n     */\n    protected updateScrollPosition(): void {\n      const { scrollLeft, clientWidth, scrollWidth } = this.$refs.scrollContainer;\n      this.isScrollAtStart = !scrollLeft;\n      /* The 2 px extra is to fix some cases in some resolutions where the scroll + client size is\n       *  less than the scroll width even when the scroll is at the end */\n      this.isScrollAtEnd = scrollLeft + clientWidth + 2 >= scrollWidth;\n    }\n\n    /**\n     * Debounced version of the {@link SlidingPanel.updateScrollPosition | updateScrollPosition}\n     * method.\n     *\n     * @internal\n     */\n    @Debounce(100, { leading: true })\n    debouncedUpdateScrollPosition(): void {\n      this.updateScrollPosition();\n    }\n\n    /**\n     * Scrolls the wrapper element to the left.\n     *\n     * @internal\n     */\n    protected scrollLeft(): void {\n      this.scrollTo(-this.$refs.scrollContainer.clientWidth);\n    }\n\n    /**\n     * Scrolls the wrapper element to the right.\n     *\n     * @internal\n     */\n    protected scrollRight(): void {\n      this.scrollTo(this.$refs.scrollContainer.clientWidth);\n    }\n\n    /**\n     * Scrolls the wrapper element towards the provided scroll value.\n     *\n     * @param scrollValue - The value the scroll will go towards.\n     *\n     * @internal\n     */\n    protected scrollTo(scrollValue: number): void {\n      this.$refs.scrollContainer.scrollBy({\n        left: scrollValue * this.scrollFactor,\n        behavior: 'smooth'\n      });\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-sliding-panel {\n    align-items: center;\n    display: flex;\n    flex-flow: row nowrap;\n    height: 100%;\n    position: relative;\n\n    &__button {\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      transition: all ease-out 0.2s;\n      z-index: 2; /* To overlay the design system gradient with z-index:1 */\n\n      &-left {\n        left: 0;\n      }\n\n      &-right {\n        right: 0;\n      }\n    }\n\n    &__scroll {\n      display: flex;\n      flex: 100%;\n      flex-flow: row nowrap;\n      overflow: auto;\n      scrollbar-width: none; // Firefox\n      -ms-overflow-style: none; // IE\n\n      // Chrome, Edge & Safari\n      &::-webkit-scrollbar {\n        display: none;\n      }\n    }\n\n    &:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-start) {\n      .x-sliding-panel__button-left {\n        opacity: 1;\n        pointer-events: all;\n      }\n    }\n\n    &:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-end) {\n      .x-sliding-panel__button-right {\n        opacity: 1;\n        pointer-events: all;\n      }\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nSimplest implementation of the component, just a list-based component inside its slot.\n\n```vue\n<template>\n  <SlidingPanel>\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n### Play with props\n\n#### Modifying scroll buttons travel distance\n\nEdit how much the scroll travels when navigating with the buttons by changing the `scrollFactor`\nprop.\n\n```vue\n<template>\n  <SlidingPanel :scrollFactor=\"1.5\">\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n#### Hiding scroll buttons\n\nHide the navigational buttons completely by setting the `showButtons` prop to `false`. This is\nintended to be used when other scrolling options are available, like in mobile, where you can scroll\njust by swiping.\n\n```vue\n<template>\n  <SlidingPanel :showButtons=\"false\">\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n#### Disabling reset the scroll when content changes\n\nBy default, whenever the content of the sliding panel changes, it auto resets its scroll position.\nYou can disable this behavior setting the `resetOnContentChange` prop to `false`.\n\n```vue\n<template>\n  <div>\n    <button @click=\"items++\">Add item</button>\n    <label>\n      <input type=\"checkbox\" v-model=\"resetOnContentChange\" />\n      Reset content onchange\n    </label>\n    <SlidingPanel :resetOnContentChange=\"resetOnContentChange\">\n      <div class=\"item\" v-for=\"item in items\" :key=\"item\">Item {{ item }}</div>\n    </SlidingPanel>\n  </div>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    },\n    data() {\n      return {\n        items: 4,\n        resetOnContentChange: false\n      };\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n## Extending the component\n\n### Overriding Button content\n\nBy default the buttons show an arrow depicting the direction the scroll would go to when clicked,\nbut this content can be customized with anything, from characters to SVG and images.\n\n```vue\n<template>\n  <SlidingPanel>\n    <template #sliding-panel-left-button>Left</template>\n    <template #default>\n      <div class=\"item\">Item 1</div>\n      <div class=\"item\">Item 2</div>\n      <div class=\"item\">Item 3</div>\n      <div class=\"item\">Item 4</div>\n    </template>\n    <template #sliding-panel-right-button>Right</template>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"sliding-panel.vue.js","sources":["../../../src/components/sliding-panel.vue"],"sourcesContent":["<template>\n  <div v-if=\"$slots.default\" class=\"x-sliding-panel\" :class=\"cssClasses\" data-test=\"sliding-panel\">\n    <button\n      v-if=\"showButtons\"\n      @click=\"scrollLeft\"\n      class=\"x-sliding-panel__button x-sliding-panel__button-left x-button\"\n      :class=\"buttonClass\"\n      data-test=\"sliding-panel-left-button\"\n    >\n      <!-- @slot Left button content -->\n      <slot name=\"sliding-panel-left-button\">ᐸ</slot>\n    </button>\n    <div\n      ref=\"scrollContainer\"\n      @scroll=\"debouncedUpdateScrollPosition\"\n      @transitionend=\"debouncedUpdateScrollPosition\"\n      @animationend=\"debouncedUpdateScrollPosition\"\n      class=\"x-list x-list--horizontal x-sliding-panel__scroll\"\n      data-test=\"sliding-panel-scroll\"\n    >\n      <!-- @slot (Required) Sliding panel content -->\n      <slot />\n    </div>\n    <button\n      v-if=\"showButtons\"\n      @click=\"scrollRight\"\n      class=\"x-sliding-panel__button x-sliding-panel__button-right x-button\"\n      :class=\"buttonClass\"\n      data-test=\"sliding-panel-right-button\"\n    >\n      <!-- @slot Right button content -->\n      <slot name=\"sliding-panel-right-button\">ᐳ</slot>\n    </button>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { VueCSSClasses } from '../utils/types';\n  import { Debounce } from './decorators/debounce.decorators';\n\n  /**\n   * This component allows for any other component or element inside it to be horizontally\n   * navigable. It also implements customizable buttons as well as other minor customizations to its\n   * general behavior.\n   *\n   * @public\n   */\n  @Component\n  export default class SlidingPanel extends Vue {\n    /**\n     * Scroll factor that will dictate how much the scroll moves when pressing a navigation button.\n     *\n     * @public\n     */\n    @Prop({ default: 0.7 })\n    public scrollFactor!: number;\n\n    /**\n     * Would make the navigation buttons visible when they're needed or always hide them.\n     *\n     * @public\n     */\n    @Prop({ default: true })\n    public showButtons!: boolean;\n\n    /**\n     * When true, whenever the DOM content in the sliding panel slot changes, it will reset\n     * the scroll position to 0.\n     *\n     * @public\n     */\n    @Prop({ default: true })\n    public resetOnContentChange!: boolean;\n\n    /**\n     * CSS classes to add to the buttons.\n     *\n     * @public\n     */\n    @Prop()\n    public buttonClass?: string;\n\n    /**\n     * Indicates if the scroll is at the start of the sliding panel.\n     *\n     * @internal\n     */\n    protected isScrollAtStart = true;\n\n    /**\n     * Indicates if the scroll is at the end of the sliding panel.\n     *\n     * @internal\n     */\n    protected isScrollAtEnd = true;\n\n    /**\n     * HTMLElement referencing the scroll of the component.\n     *\n     * @internal\n     */\n    public $refs!: {\n      scrollContainer: HTMLElement;\n    };\n\n    /**\n     * CSS classes to apply based on the scroll position.\n     *\n     * @returns The CSS classes to apply.\n     *\n     * @internal\n     */\n    protected get cssClasses(): VueCSSClasses {\n      return {\n        'x-sliding-panel--at-start': this.isScrollAtStart,\n        'x-sliding-panel--at-end': this.isScrollAtEnd\n      };\n    }\n\n    /**\n     * Initialises browser platform code:\n     * - Creates a mutation observer to detect content changes and reset scroll position.\n     * - Stores initial size and scroll position values.\n     *\n     * @internal\n     */\n    mounted(): void {\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      const resizeObserver = new ResizeObserver(this.debouncedUpdateScrollPosition);\n      resizeObserver.observe(this.$el);\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      const contentChangedObserver = new MutationObserver(this.restoreAndUpdateScroll);\n      this.$watch(\n        () => this.resetOnContentChange,\n        shouldReset => {\n          if (shouldReset) {\n            contentChangedObserver.observe(this.$refs.scrollContainer, {\n              attributes: false,\n              childList: true,\n              subtree: true,\n              characterData: false\n            });\n          } else {\n            contentChangedObserver.disconnect();\n          }\n        },\n        { immediate: true }\n      );\n      this.$on('hook:beforeDestroy', () => {\n        contentChangedObserver.disconnect();\n        resizeObserver.disconnect();\n      });\n\n      this.updateScrollPosition();\n    }\n\n    /**\n     * Resets the scroll and updates the values of the scroll for the buttons to react.\n     *\n     * @internal\n     */\n    @Debounce(100, { leading: true })\n    restoreAndUpdateScroll(): void {\n      this.$refs.scrollContainer.scroll({ left: 0, behavior: 'smooth' });\n      this.updateScrollPosition();\n    }\n\n    /**\n     * Updates the values of the scroll positions to show or hide the buttons depending on it.\n     *\n     * @internal\n     */\n    protected updateScrollPosition(): void {\n      const { scrollLeft, clientWidth, scrollWidth } = this.$refs.scrollContainer;\n      this.isScrollAtStart = !scrollLeft;\n      /* The 2 px extra is to fix some cases in some resolutions where the scroll + client size is\n       *  less than the scroll width even when the scroll is at the end */\n      this.isScrollAtEnd = scrollLeft + clientWidth + 2 >= scrollWidth;\n    }\n\n    /**\n     * Debounced version of the {@link SlidingPanel.updateScrollPosition | updateScrollPosition}\n     * method.\n     *\n     * @internal\n     */\n    @Debounce(100, { leading: true })\n    debouncedUpdateScrollPosition(): void {\n      this.updateScrollPosition();\n    }\n\n    /**\n     * Scrolls the wrapper element to the left.\n     *\n     * @internal\n     */\n    protected scrollLeft(): void {\n      this.scrollTo(-this.$refs.scrollContainer.clientWidth);\n    }\n\n    /**\n     * Scrolls the wrapper element to the right.\n     *\n     * @internal\n     */\n    protected scrollRight(): void {\n      this.scrollTo(this.$refs.scrollContainer.clientWidth);\n    }\n\n    /**\n     * Scrolls the wrapper element towards the provided scroll value.\n     *\n     * @param scrollValue - The value the scroll will go towards.\n     *\n     * @internal\n     */\n    protected scrollTo(scrollValue: number): void {\n      this.$refs.scrollContainer.scrollBy({\n        left: scrollValue * this.scrollFactor,\n        behavior: 'smooth'\n      });\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-sliding-panel {\n    align-items: center;\n    display: flex;\n    flex-flow: row nowrap;\n    height: 100%;\n    position: relative;\n\n    &__button {\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      transition: all ease-out 0.2s;\n      z-index: 2; /* To overlay the design system gradient with z-index:1 */\n\n      &-left {\n        left: 0;\n      }\n\n      &-right {\n        right: 0;\n      }\n    }\n\n    &__scroll {\n      display: flex;\n      flex: 100%;\n      flex-flow: row nowrap;\n      overflow: auto;\n      scrollbar-width: none; // Firefox\n      -ms-overflow-style: none; // IE\n\n      // Chrome, Edge & Safari\n      &::-webkit-scrollbar {\n        display: none;\n      }\n    }\n\n    &:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-start) {\n      .x-sliding-panel__button-left {\n        opacity: 1;\n        pointer-events: all;\n      }\n    }\n\n    &:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-end) {\n      .x-sliding-panel__button-right {\n        opacity: 1;\n        pointer-events: all;\n      }\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nSimplest implementation of the component, just a list-based component inside its slot.\n\n```vue\n<template>\n  <SlidingPanel>\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n### Play with props\n\n#### Modifying scroll buttons travel distance\n\nEdit how much the scroll travels when navigating with the buttons by changing the `scrollFactor`\nprop.\n\n```vue\n<template>\n  <SlidingPanel :scrollFactor=\"1.5\">\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n#### Hiding scroll buttons\n\nHide the navigational buttons completely by setting the `showButtons` prop to `false`. This is\nintended to be used when other scrolling options are available, like in mobile, where you can scroll\njust by swiping.\n\n```vue\n<template>\n  <SlidingPanel :showButtons=\"false\">\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n#### Disabling reset the scroll when content changes\n\nBy default, whenever the content of the sliding panel changes, it auto resets its scroll position.\nYou can disable this behavior setting the `resetOnContentChange` prop to `false`.\n\n```vue\n<template>\n  <div>\n    <button @click=\"items++\">Add item</button>\n    <label>\n      <input type=\"checkbox\" v-model=\"resetOnContentChange\" />\n      Reset content onchange\n    </label>\n    <SlidingPanel :resetOnContentChange=\"resetOnContentChange\">\n      <div class=\"item\" v-for=\"item in items\" :key=\"item\">Item {{ item }}</div>\n    </SlidingPanel>\n  </div>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    },\n    data() {\n      return {\n        items: 4,\n        resetOnContentChange: false\n      };\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n## Extending the component\n\n### Overriding Button content\n\nBy default the buttons show an arrow depicting the direction the scroll would go to when clicked,\nbut this content can be customized with anything, from characters to SVG and images.\n\n```vue\n<template>\n  <SlidingPanel>\n    <template #sliding-panel-left-button>Left</template>\n    <template #default>\n      <div class=\"item\">Item 1</div>\n      <div class=\"item\">Item 2</div>\n      <div class=\"item\">Item 3</div>\n      <div class=\"item\">Item 4</div>\n    </template>\n    <template #sliding-panel-right-button>Right</template>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/sliding-panel.vue_rollup-plugin-vue=script.js

@@ -146,6 +146,9 @@ var SlidingPanel = /** @class */ (function (_super) {
     __decorate([
         Prop({ default: true })
     ], SlidingPanel.prototype, "resetOnContentChange", void 0);
+    __decorate([
+        Prop()
+    ], SlidingPanel.prototype, "buttonClass", void 0);
     __decorate([
         Debounce(100, { leading: true })
     ], SlidingPanel.prototype, "restoreAndUpdateScroll", null);

package/js/components/sliding-panel.vue_rollup-plugin-vue=script.js.map

@@ -1 +1 @@
-{"version":3,"file":"sliding-panel.vue_rollup-plugin-vue=script.js","sources":["../../../src/components/sliding-panel.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { VueCSSClasses } from '../utils/types';\nimport { Debounce } from './decorators/debounce.decorators';\n\n/**\n * This component allows for any other component or element inside it to be horizontally\n * navigable. It also implements customizable buttons as well as other minor customizations to its\n * general behavior.\n *\n * @public\n */\n@Component\nexport default class SlidingPanel extends Vue {\n  /**\n   * Scroll factor that will dictate how much the scroll moves when pressing a navigation button.\n   *\n   * @public\n   */\n  @Prop({ default: 0.7 })\n  public scrollFactor!: number;\n\n  /**\n   * Would make the navigation buttons visible when they're needed or always hide them.\n   *\n   * @public\n   */\n  @Prop({ default: true })\n  public showButtons!: boolean;\n\n  /**\n   * When true, whenever the DOM content in the sliding panel slot changes, it will reset\n   * the scroll position to 0.\n   *\n   * @public\n   */\n  @Prop({ default: true })\n  public resetOnContentChange!: boolean;\n\n  /**\n   * Indicates if the scroll is at the start of the sliding panel.\n   *\n   * @internal\n   */\n  protected isScrollAtStart = true;\n\n  /**\n   * Indicates if the scroll is at the end of the sliding panel.\n   *\n   * @internal\n   */\n  protected isScrollAtEnd = true;\n\n  /**\n   * HTMLElement referencing the scroll of the component.\n   *\n   * @internal\n   */\n  public $refs!: {\n    scrollContainer: HTMLElement;\n  };\n\n  /**\n   * CSS classes to apply based on the scroll position.\n   *\n   * @returns The CSS classes to apply.\n   *\n   * @internal\n   */\n  protected get cssClasses(): VueCSSClasses {\n    return {\n      'x-sliding-panel--at-start': this.isScrollAtStart,\n      'x-sliding-panel--at-end': this.isScrollAtEnd\n    };\n  }\n\n  /**\n   * Initialises browser platform code:\n   * - Creates a mutation observer to detect content changes and reset scroll position.\n   * - Stores initial size and scroll position values.\n   *\n   * @internal\n   */\n  mounted(): void {\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const resizeObserver = new ResizeObserver(this.debouncedUpdateScrollPosition);\n    resizeObserver.observe(this.$el);\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const contentChangedObserver = new MutationObserver(this.restoreAndUpdateScroll);\n    this.$watch(\n      () => this.resetOnContentChange,\n      shouldReset => {\n        if (shouldReset) {\n          contentChangedObserver.observe(this.$refs.scrollContainer, {\n            attributes: false,\n            childList: true,\n            subtree: true,\n            characterData: false\n          });\n        } else {\n          contentChangedObserver.disconnect();\n        }\n      },\n      { immediate: true }\n    );\n    this.$on('hook:beforeDestroy', () => {\n      contentChangedObserver.disconnect();\n      resizeObserver.disconnect();\n    });\n\n    this.updateScrollPosition();\n  }\n\n  /**\n   * Resets the scroll and updates the values of the scroll for the buttons to react.\n   *\n   * @internal\n   */\n  @Debounce(100, { leading: true })\n  restoreAndUpdateScroll(): void {\n    this.$refs.scrollContainer.scroll({ left: 0, behavior: 'smooth' });\n    this.updateScrollPosition();\n  }\n\n  /**\n   * Updates the values of the scroll positions to show or hide the buttons depending on it.\n   *\n   * @internal\n   */\n  protected updateScrollPosition(): void {\n    const { scrollLeft, clientWidth, scrollWidth } = this.$refs.scrollContainer;\n    this.isScrollAtStart = !scrollLeft;\n    /* The 2 px extra is to fix some cases in some resolutions where the scroll + client size is\n     *  less than the scroll width even when the scroll is at the end */\n    this.isScrollAtEnd = scrollLeft + clientWidth + 2 >= scrollWidth;\n  }\n\n  /**\n   * Debounced version of the {@link SlidingPanel.updateScrollPosition | updateScrollPosition}\n   * method.\n   *\n   * @internal\n   */\n  @Debounce(100, { leading: true })\n  debouncedUpdateScrollPosition(): void {\n    this.updateScrollPosition();\n  }\n\n  /**\n   * Scrolls the wrapper element to the left.\n   *\n   * @internal\n   */\n  protected scrollLeft(): void {\n    this.scrollTo(-this.$refs.scrollContainer.clientWidth);\n  }\n\n  /**\n   * Scrolls the wrapper element to the right.\n   *\n   * @internal\n   */\n  protected scrollRight(): void {\n    this.scrollTo(this.$refs.scrollContainer.clientWidth);\n  }\n\n  /**\n   * Scrolls the wrapper element towards the provided scroll value.\n   *\n   * @param scrollValue - The value the scroll will go towards.\n   *\n   * @internal\n   */\n  protected scrollTo(scrollValue: number): void {\n    this.$refs.scrollContainer.scrollBy({\n      left: scrollValue * this.scrollFactor,\n      behavior: 'smooth'\n    });\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"sliding-panel.vue_rollup-plugin-vue=script.js","sources":["../../../src/components/sliding-panel.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { VueCSSClasses } from '../utils/types';\nimport { Debounce } from './decorators/debounce.decorators';\n\n/**\n * This component allows for any other component or element inside it to be horizontally\n * navigable. It also implements customizable buttons as well as other minor customizations to its\n * general behavior.\n *\n * @public\n */\n@Component\nexport default class SlidingPanel extends Vue {\n  /**\n   * Scroll factor that will dictate how much the scroll moves when pressing a navigation button.\n   *\n   * @public\n   */\n  @Prop({ default: 0.7 })\n  public scrollFactor!: number;\n\n  /**\n   * Would make the navigation buttons visible when they're needed or always hide them.\n   *\n   * @public\n   */\n  @Prop({ default: true })\n  public showButtons!: boolean;\n\n  /**\n   * When true, whenever the DOM content in the sliding panel slot changes, it will reset\n   * the scroll position to 0.\n   *\n   * @public\n   */\n  @Prop({ default: true })\n  public resetOnContentChange!: boolean;\n\n  /**\n   * CSS classes to add to the buttons.\n   *\n   * @public\n   */\n  @Prop()\n  public buttonClass?: string;\n\n  /**\n   * Indicates if the scroll is at the start of the sliding panel.\n   *\n   * @internal\n   */\n  protected isScrollAtStart = true;\n\n  /**\n   * Indicates if the scroll is at the end of the sliding panel.\n   *\n   * @internal\n   */\n  protected isScrollAtEnd = true;\n\n  /**\n   * HTMLElement referencing the scroll of the component.\n   *\n   * @internal\n   */\n  public $refs!: {\n    scrollContainer: HTMLElement;\n  };\n\n  /**\n   * CSS classes to apply based on the scroll position.\n   *\n   * @returns The CSS classes to apply.\n   *\n   * @internal\n   */\n  protected get cssClasses(): VueCSSClasses {\n    return {\n      'x-sliding-panel--at-start': this.isScrollAtStart,\n      'x-sliding-panel--at-end': this.isScrollAtEnd\n    };\n  }\n\n  /**\n   * Initialises browser platform code:\n   * - Creates a mutation observer to detect content changes and reset scroll position.\n   * - Stores initial size and scroll position values.\n   *\n   * @internal\n   */\n  mounted(): void {\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const resizeObserver = new ResizeObserver(this.debouncedUpdateScrollPosition);\n    resizeObserver.observe(this.$el);\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const contentChangedObserver = new MutationObserver(this.restoreAndUpdateScroll);\n    this.$watch(\n      () => this.resetOnContentChange,\n      shouldReset => {\n        if (shouldReset) {\n          contentChangedObserver.observe(this.$refs.scrollContainer, {\n            attributes: false,\n            childList: true,\n            subtree: true,\n            characterData: false\n          });\n        } else {\n          contentChangedObserver.disconnect();\n        }\n      },\n      { immediate: true }\n    );\n    this.$on('hook:beforeDestroy', () => {\n      contentChangedObserver.disconnect();\n      resizeObserver.disconnect();\n    });\n\n    this.updateScrollPosition();\n  }\n\n  /**\n   * Resets the scroll and updates the values of the scroll for the buttons to react.\n   *\n   * @internal\n   */\n  @Debounce(100, { leading: true })\n  restoreAndUpdateScroll(): void {\n    this.$refs.scrollContainer.scroll({ left: 0, behavior: 'smooth' });\n    this.updateScrollPosition();\n  }\n\n  /**\n   * Updates the values of the scroll positions to show or hide the buttons depending on it.\n   *\n   * @internal\n   */\n  protected updateScrollPosition(): void {\n    const { scrollLeft, clientWidth, scrollWidth } = this.$refs.scrollContainer;\n    this.isScrollAtStart = !scrollLeft;\n    /* The 2 px extra is to fix some cases in some resolutions where the scroll + client size is\n     *  less than the scroll width even when the scroll is at the end */\n    this.isScrollAtEnd = scrollLeft + clientWidth + 2 >= scrollWidth;\n  }\n\n  /**\n   * Debounced version of the {@link SlidingPanel.updateScrollPosition | updateScrollPosition}\n   * method.\n   *\n   * @internal\n   */\n  @Debounce(100, { leading: true })\n  debouncedUpdateScrollPosition(): void {\n    this.updateScrollPosition();\n  }\n\n  /**\n   * Scrolls the wrapper element to the left.\n   *\n   * @internal\n   */\n  protected scrollLeft(): void {\n    this.scrollTo(-this.$refs.scrollContainer.clientWidth);\n  }\n\n  /**\n   * Scrolls the wrapper element to the right.\n   *\n   * @internal\n   */\n  protected scrollRight(): void {\n    this.scrollTo(this.$refs.scrollContainer.clientWidth);\n  }\n\n  /**\n   * Scrolls the wrapper element towards the provided scroll value.\n   *\n   * @param scrollValue - The value the scroll will go towards.\n   *\n   * @internal\n   */\n  protected scrollTo(scrollValue: number): void {\n    this.$refs.scrollContainer.scrollBy({\n      left: scrollValue * this.scrollFactor,\n      behavior: 'smooth'\n    });\n  }\n}\n"],"names":[],"mappings":"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"}

package/js/components/suggestions/base-suggestions.vue.js

@@ -23,7 +23,7 @@ var __vue_render__ = function () {
             "li",
             {
               key: _vm.suggestionsKeys[index],
-              staticClass: "x-suggestions__item",
+              staticClass: "x-list x-suggestions__item",
               attrs: { "data-test": "suggestion-item" },
             },
             [
@@ -44,11 +44,11 @@ __vue_render__._withStripped = true;
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-162f615e_0", { source: ".x-suggestions[data-v-162f615e] {\n  list-style-type: none;\n}", map: undefined, media: undefined });
+    inject("data-v-bb6a2776_0", { source: ".x-suggestions[data-v-bb6a2776] {\n  list-style-type: none;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-162f615e";
+  var __vue_scope_id__ = "data-v-bb6a2776";
   /* module identifier */
   var __vue_module_identifier__ = undefined;
   /* functional template */

package/js/components/suggestions/base-suggestions.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-suggestions.vue.js","sources":["../../../../src/components/suggestions/base-suggestions.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" v-if=\"suggestions.length\" tag=\"ul\" class=\"x-list x-suggestions\">\n    <li\n      v-for=\"(suggestion, index) in suggestionsToRender\"\n      :key=\"suggestionsKeys[index]\"\n      class=\"x-suggestions__item\"\n      data-test=\"suggestion-item\"\n    >\n      <!--\n        @slot (Required) List item content\n            @binding {Suggestion} suggestion - Suggestion data\n            @binding {number} index - Suggestion index\n       -->\n      <slot v-bind=\"{ suggestion, index }\" />\n    </li>\n  </component>\n</template>\n\n<style lang=\"scss\" scoped>\n  .x-suggestions {\n    list-style-type: none;\n  }\n</style>\n\n<script lang=\"ts\">\n  import { Component, Prop } from 'vue-property-decorator';\n  import { Suggestion, Facet } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { isArrayEmpty } from '../../utils/array';\n\n  /**\n   * Paints a list of suggestions passed in by prop. Requires a component for a single suggestion\n   * in the default slot for working.\n   *\n   * @public\n   */\n  @Component\n  export default class BaseSuggestions extends Vue {\n    /**\n     * The list of suggestions to render.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected suggestions!: Suggestion[];\n\n    /**\n     * Animation component that will be used to animate the suggestion.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue | string;\n\n    /**\n     * Number of suggestions to be rendered.\n     *\n     * @public\n     */\n    @Prop()\n    protected maxItemsToRender?: number;\n\n    /**\n     * An array with the unique keys for each suggestion. Required by the `v-for` loop.\n     *\n     * @returns An array with the unique keys of the suggestions.\n     * @internal\n     */\n    protected get suggestionsKeys(): string[] {\n      return this.suggestions.map(suggestion =>\n        isArrayEmpty(suggestion.facets)\n          ? suggestion.query\n          : `${suggestion.query}-in-${this.getFacetsKey(suggestion.facets)}`\n      );\n    }\n\n    /**\n     * Generates a string from the given facets.\n     *\n     * @param facets - The list of facets to reduce to a string.\n     * @returns - A string representing the list of facets.\n     * @internal\n     */\n    protected getFacetsKey(facets: Facet[]): string {\n      // Component methods are bound by Vue:\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      return facets.map(this.getFacetKey).join('&');\n    }\n\n    /**\n     * Generates a string from the given facet.\n     *\n     * @param facet - The facet to reduce to a string.\n     * @returns - A string representing the facet.\n     * @internal\n     */\n    protected getFacetKey(facet: Facet): string {\n      return facet.filters.map(filter => filter.id).join('&');\n    }\n\n    /**\n     * Slices the suggestions from the state.\n     *\n     * @returns - The list of suggestions slice by the number of items to render.\n     *\n     * @internal\n     */\n    protected get suggestionsToRender(): Suggestion[] {\n      return this.suggestions.slice(0, this.maxItemsToRender);\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nFor this component to work, you will need to set a list of suggestions as prop, and also to\nimplement the component for single suggestion, which handles the click event. In the following\nexample, the suggestions are retrieved from a property called `suggestions`, and the implementation\nof the suggestion component is a simple `button`, that calls the `emitSuggestionSelected` method\nwhen clicked.\n\n```vue\n<BaseSuggestions :suggestions=\"suggestions\">\n  <template #default=\"{ suggestion }\">\n    <button @click=\"emitSuggestionSelected($event, suggestion)\">\n      {{ suggestion.query }}\n    </button>\n  </template>\n</BaseSuggestions>\n```\n\nFollowing the previous example, the component options object could be something like this:\n\n```js\nexport default {\n  computed: {\n    ...mapGetters(['x', 'querySuggestions'], { suggestions: 'suggestions' })\n  },\n  methods: {\n    emitSuggestionSelected(event, suggestion) {\n      this.$x.emit('UserAcceptedAQuery', suggestion.query, { target: event.target });\n      this.$x.emit('UserSelectedAQuerySuggestion', suggestion, { target: event.target });\n    }\n  }\n};\n```\n\n### Play with props\n\nIn this example, the suggestions has been limited to render a maximum of 3 items.\n\n_Type “puzzle” or another toy in the input field to try it out!_\n\n```vue\n<template>\n  <BaseSuggestions :suggestions=\"suggestions\" :maxItemToRender=\"3\" />\n</template>\n\n<script>\n  import { BaseSuggestions } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSuggestionsDemo',\n    components: {\n      BaseSuggestions\n    },\n    data() {\n      return {\n        suggestions: [\n          {\n            facets: [],\n            key: 'chips',\n            query: 'Chips',\n            totalResults: 10,\n            results: [],\n            modelName: 'PopularSearch'\n          }\n        ]\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-suggestions.vue.js","sources":["../../../../src/components/suggestions/base-suggestions.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" v-if=\"suggestions.length\" tag=\"ul\" class=\"x-list x-suggestions\">\n    <li\n      v-for=\"(suggestion, index) in suggestionsToRender\"\n      :key=\"suggestionsKeys[index]\"\n      class=\"x-list x-suggestions__item\"\n      data-test=\"suggestion-item\"\n    >\n      <!--\n        @slot (Required) List item content\n            @binding {Suggestion} suggestion - Suggestion data\n            @binding {number} index - Suggestion index\n       -->\n      <slot v-bind=\"{ suggestion, index }\" />\n    </li>\n  </component>\n</template>\n\n<style lang=\"scss\" scoped>\n  .x-suggestions {\n    list-style-type: none;\n  }\n</style>\n\n<script lang=\"ts\">\n  import { Component, Prop } from 'vue-property-decorator';\n  import { Suggestion, Facet } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { isArrayEmpty } from '../../utils/array';\n\n  /**\n   * Paints a list of suggestions passed in by prop. Requires a component for a single suggestion\n   * in the default slot for working.\n   *\n   * @public\n   */\n  @Component\n  export default class BaseSuggestions extends Vue {\n    /**\n     * The list of suggestions to render.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected suggestions!: Suggestion[];\n\n    /**\n     * Animation component that will be used to animate the suggestion.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue | string;\n\n    /**\n     * Number of suggestions to be rendered.\n     *\n     * @public\n     */\n    @Prop()\n    protected maxItemsToRender?: number;\n\n    /**\n     * An array with the unique keys for each suggestion. Required by the `v-for` loop.\n     *\n     * @returns An array with the unique keys of the suggestions.\n     * @internal\n     */\n    protected get suggestionsKeys(): string[] {\n      return this.suggestions.map(suggestion =>\n        isArrayEmpty(suggestion.facets)\n          ? suggestion.query\n          : `${suggestion.query}-in-${this.getFacetsKey(suggestion.facets)}`\n      );\n    }\n\n    /**\n     * Generates a string from the given facets.\n     *\n     * @param facets - The list of facets to reduce to a string.\n     * @returns - A string representing the list of facets.\n     * @internal\n     */\n    protected getFacetsKey(facets: Facet[]): string {\n      // Component methods are bound by Vue:\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      return facets.map(this.getFacetKey).join('&');\n    }\n\n    /**\n     * Generates a string from the given facet.\n     *\n     * @param facet - The facet to reduce to a string.\n     * @returns - A string representing the facet.\n     * @internal\n     */\n    protected getFacetKey(facet: Facet): string {\n      return facet.filters.map(filter => filter.id).join('&');\n    }\n\n    /**\n     * Slices the suggestions from the state.\n     *\n     * @returns - The list of suggestions slice by the number of items to render.\n     *\n     * @internal\n     */\n    protected get suggestionsToRender(): Suggestion[] {\n      return this.suggestions.slice(0, this.maxItemsToRender);\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nFor this component to work, you will need to set a list of suggestions as prop, and also to\nimplement the component for single suggestion, which handles the click event. In the following\nexample, the suggestions are retrieved from a property called `suggestions`, and the implementation\nof the suggestion component is a simple `button`, that calls the `emitSuggestionSelected` method\nwhen clicked.\n\n```vue\n<BaseSuggestions :suggestions=\"suggestions\">\n  <template #default=\"{ suggestion }\">\n    <button @click=\"emitSuggestionSelected($event, suggestion)\">\n      {{ suggestion.query }}\n    </button>\n  </template>\n</BaseSuggestions>\n```\n\nFollowing the previous example, the component options object could be something like this:\n\n```js\nexport default {\n  computed: {\n    ...mapGetters(['x', 'querySuggestions'], { suggestions: 'suggestions' })\n  },\n  methods: {\n    emitSuggestionSelected(event, suggestion) {\n      this.$x.emit('UserAcceptedAQuery', suggestion.query, { target: event.target });\n      this.$x.emit('UserSelectedAQuerySuggestion', suggestion, { target: event.target });\n    }\n  }\n};\n```\n\n### Play with props\n\nIn this example, the suggestions has been limited to render a maximum of 3 items.\n\n_Type “puzzle” or another toy in the input field to try it out!_\n\n```vue\n<template>\n  <BaseSuggestions :suggestions=\"suggestions\" :maxItemToRender=\"3\" />\n</template>\n\n<script>\n  import { BaseSuggestions } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSuggestionsDemo',\n    components: {\n      BaseSuggestions\n    },\n    data() {\n      return {\n        suggestions: [\n          {\n            facets: [],\n            key: 'chips',\n            query: 'Chips',\n            totalResults: 10,\n            results: [],\n            modelName: 'PopularSearch'\n          }\n        ]\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/index.js

@@ -39,7 +39,10 @@ export { default as BasePriceFilterLabel } from './components/filters/labels/bas
 export { default as StarIcon } from './components/icons/star.vue.js';
 export { default as BaseRating } from './components/base-rating.vue.js';
 export { default as BaseRatingFilterLabel } from './components/filters/labels/base-rating-filter-label.vue.js';
-export { default as ArrowIcon } from './components/icons/arrow.vue.js';
+export { default as ArrowDownIcon } from './components/icons/arrow-down.vue.js';
+export { default as ArrowLeftIcon } from './components/icons/arrow-left.vue.js';
+export { default as ArrowRightIcon } from './components/icons/arrow-right.vue.js';
+export { default as ArrowUpIcon } from './components/icons/arrow-up.vue.js';
 export { default as BagIcon } from './components/icons/bag.vue.js';
 export { default as BarCodeIcon } from './components/icons/bar-code.vue.js';
 export { default as BarcodeTinyIcon } from './components/icons/barcode-tiny.vue.js';
@@ -60,12 +63,16 @@ export { default as ChevronTinyUpIcon } from './components/icons/chevron-tiny-up
 export { default as ChevronUpIcon } from './components/icons/chevron-up.vue.js';
 export { default as CrossTinyIcon } from './components/icons/cross-tiny.vue.js';
 export { default as CrossIcon } from './components/icons/cross.vue.js';
+export { default as CuratedCheckIcon } from './components/icons/curated-check.vue.js';
 export { default as FiltersIcon } from './components/icons/filters.vue.js';
 export { default as Grid1ColIcon } from './components/icons/grid-1-col.vue.js';
 export { default as Grid2ColIcon } from './components/icons/grid-2-col.vue.js';
+export { default as Grid2RowsIcon } from './components/icons/grid-2-rows.vue.js';
 export { default as HideIcon } from './components/icons/hide.vue.js';
 export { default as HistoryTinyIcon } from './components/icons/history-tiny.vue.js';
 export { default as HistoryIcon } from './components/icons/history.vue.js';
+export { default as LightBulbOff } from './components/icons/light-bulb-off.vue.js';
+export { default as LightBulbOn } from './components/icons/light-bulb-on.vue.js';
 export { default as MenuIcon } from './components/icons/menu.vue.js';
 export { default as MinusTinyIcon } from './components/icons/minus-tiny.vue.js';
 export { default as MinusIcon } from './components/icons/minus.vue.js';
@@ -126,6 +133,7 @@ export { default as BaseResultLink } from './components/result/base-result-link.
 export { default as BaseResultPreviousPrice } from './components/result/base-result-previous-price.vue.js';
 export { default as BaseFallbackImage } from './components/result/base-result-fallback-image.vue.js';
 export { default as BasePlaceholderImage } from './components/result/base-result-placeholder-image.vue.js';
+export { default as BaseResultRating } from './components/result/base-result-rating.vue.js';
 export { default as BaseSuggestion } from './components/suggestions/base-suggestion.vue.js';
 export { default as BaseSuggestions } from './components/suggestions/base-suggestions.vue.js';
 export { default as AutoProgressBar } from './components/auto-progress-bar.vue.js';

package/js/index.js.map

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

package/js/x-modules/extra-params/components/extra-params.vue_rollup-plugin-vue=script.js

@@ -25,7 +25,10 @@ import '../../../components/filters/labels/base-price-filter-label.vue.js';
 import '../../../components/icons/star.vue.js';
 import '../../../components/base-rating.vue.js';
 import '../../../components/filters/labels/base-rating-filter-label.vue.js';
-import '../../../components/icons/arrow.vue.js';
+import '../../../components/icons/arrow-down.vue.js';
+import '../../../components/icons/arrow-left.vue.js';
+import '../../../components/icons/arrow-right.vue.js';
+import '../../../components/icons/arrow-up.vue.js';
 import '../../../components/icons/bag.vue.js';
 import '../../../components/icons/bar-code.vue.js';
 import '../../../components/icons/barcode-tiny.vue.js';
@@ -46,12 +49,16 @@ import '../../../components/icons/chevron-tiny-up.vue.js';
 import '../../../components/icons/chevron-up.vue.js';
 import '../../../components/icons/cross-tiny.vue.js';
 import '../../../components/icons/cross.vue.js';
+import '../../../components/icons/curated-check.vue.js';
 import '../../../components/icons/filters.vue.js';
 import '../../../components/icons/grid-1-col.vue.js';
 import '../../../components/icons/grid-2-col.vue.js';
+import '../../../components/icons/grid-2-rows.vue.js';
 import '../../../components/icons/hide.vue.js';
 import '../../../components/icons/history-tiny.vue.js';
 import '../../../components/icons/history.vue.js';
+import '../../../components/icons/light-bulb-off.vue.js';
+import '../../../components/icons/light-bulb-on.vue.js';
 import '../../../components/icons/menu.vue.js';
 import '../../../components/icons/minus-tiny.vue.js';
 import '../../../components/icons/minus.vue.js';
@@ -95,6 +102,7 @@ import '../../../components/result/base-result-link.vue.js';
 import '../../../components/result/base-result-previous-price.vue.js';
 import '../../../components/result/base-result-fallback-image.vue.js';
 import '../../../components/result/base-result-placeholder-image.vue.js';
+import '../../../components/result/base-result-rating.vue.js';
 import '../../../components/suggestions/base-suggestion.vue.js';
 import '../../../components/suggestions/base-suggestions.vue.js';
 import '../../../components/auto-progress-bar.vue.js';

package/js/x-modules/extra-params/components/extra-params.vue_rollup-plugin-vue=script.js.map

@@ -1 +1 @@
-{"version":3,"file":"extra-params.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/extra-params/components/extra-params.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { State, xComponentMixin, XEmit } from '../../../components';\nimport { Dictionary } from '../../../utils';\nimport { extraParamsXModule } from '../x-module';\n\n/**\n * It emits a {@link ExtraParamsXEvents.ExtraParamsProvided} with the values\n * received as a prop.\n *\n * @public\n */\n@Component({\n  mixins: [xComponentMixin(extraParamsXModule)]\n})\nexport default class ExtraParams extends Vue {\n  /**\n   * Emits the initial extra params, overriding with the state extra params, just in case, those\n   * values were already set by XComponents initialization (url, plugin config, etc.).\n   */\n  mounted(): void {\n    this.$x.emit('ExtraParamsInitialized', this.values);\n    this.$x.emit('ExtraParamsProvided', { ...this.values, ...this.storeExtraParams });\n  }\n\n  /**\n   * (Required) A Dictionary where the keys are the extra param names and its values.\n   *\n   * @remarks Emits the {@link ExtraParamsXEvents.ExtraParamsProvided} when the\n   * component is rendered or the values changed.\n   *\n   * @public\n   */\n  @XEmit('ExtraParamsProvided', { deep: true })\n  @Prop({ required: true })\n  public values!: Dictionary<unknown>;\n\n  /**\n   * State extra params. Used to override the initial extra params.\n   */\n  @State('extraParams', 'params')\n  public storeExtraParams!: Dictionary<unknown>;\n\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  render(): void {}\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA;;;;;;AASA;IAAyC,+BAAG;IAA5C;;KA8BC;;;;;IAzBC,6BAAO,GAAP;QACE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,wBAAwB,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QACpD,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,qBAAqB,wBAAO,IAAI,CAAC,MAAM,GAAK,IAAI,CAAC,gBAAgB,EAAG,CAAC;KACnF;;IAqBD,4BAAM,GAAN,eAAiB;IATjB;QAFC,KAAK,CAAC,qBAAqB,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;QAC5C,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;+CACW;IAMpC;QADC,KAAK,CAAC,aAAa,EAAE,QAAQ,CAAC;yDACe;IA1B3B,WAAW;QAH/B,SAAS,CAAC;YACT,MAAM,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;SAC9C,CAAC;OACmB,WAAW,CA8B/B;IAAD,kBAAC;CAAA,CA9BwC,GAAG;;;;"}
+{"version":3,"file":"extra-params.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/extra-params/components/extra-params.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { State, xComponentMixin, XEmit } from '../../../components';\nimport { Dictionary } from '../../../utils';\nimport { extraParamsXModule } from '../x-module';\n\n/**\n * It emits a {@link ExtraParamsXEvents.ExtraParamsProvided} with the values\n * received as a prop.\n *\n * @public\n */\n@Component({\n  mixins: [xComponentMixin(extraParamsXModule)]\n})\nexport default class ExtraParams extends Vue {\n  /**\n   * Emits the initial extra params, overriding with the state extra params, just in case, those\n   * values were already set by XComponents initialization (url, plugin config, etc.).\n   */\n  mounted(): void {\n    this.$x.emit('ExtraParamsInitialized', this.values);\n    this.$x.emit('ExtraParamsProvided', { ...this.values, ...this.storeExtraParams });\n  }\n\n  /**\n   * (Required) A Dictionary where the keys are the extra param names and its values.\n   *\n   * @remarks Emits the {@link ExtraParamsXEvents.ExtraParamsProvided} when the\n   * component is rendered or the values changed.\n   *\n   * @public\n   */\n  @XEmit('ExtraParamsProvided', { deep: true })\n  @Prop({ required: true })\n  public values!: Dictionary<unknown>;\n\n  /**\n   * State extra params. Used to override the initial extra params.\n   */\n  @State('extraParams', 'params')\n  public storeExtraParams!: Dictionary<unknown>;\n\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  render(): void {}\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA;;;;;;AASA;IAAyC,+BAAG;IAA5C;;KA8BC;;;;;IAzBC,6BAAO,GAAP;QACE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,wBAAwB,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QACpD,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,qBAAqB,wBAAO,IAAI,CAAC,MAAM,GAAK,IAAI,CAAC,gBAAgB,EAAG,CAAC;KACnF;;IAqBD,4BAAM,GAAN,eAAiB;IATjB;QAFC,KAAK,CAAC,qBAAqB,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;QAC5C,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;+CACW;IAMpC;QADC,KAAK,CAAC,aAAa,EAAE,QAAQ,CAAC;yDACe;IA1B3B,WAAW;QAH/B,SAAS,CAAC;YACT,MAAM,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;SAC9C,CAAC;OACmB,WAAW,CA8B/B;IAAD,kBAAC;CAAA,CA9BwC,GAAG;;;;"}

package/js/x-modules/extra-params/components/renderless-extra-param.vue_rollup-plugin-vue=script.js

@@ -25,7 +25,10 @@ import '../../../components/filters/labels/base-price-filter-label.vue.js';
 import '../../../components/icons/star.vue.js';
 import '../../../components/base-rating.vue.js';
 import '../../../components/filters/labels/base-rating-filter-label.vue.js';
-import '../../../components/icons/arrow.vue.js';
+import '../../../components/icons/arrow-down.vue.js';
+import '../../../components/icons/arrow-left.vue.js';
+import '../../../components/icons/arrow-right.vue.js';
+import '../../../components/icons/arrow-up.vue.js';
 import '../../../components/icons/bag.vue.js';
 import '../../../components/icons/bar-code.vue.js';
 import '../../../components/icons/barcode-tiny.vue.js';
@@ -46,12 +49,16 @@ import '../../../components/icons/chevron-tiny-up.vue.js';
 import '../../../components/icons/chevron-up.vue.js';
 import '../../../components/icons/cross-tiny.vue.js';
 import '../../../components/icons/cross.vue.js';
+import '../../../components/icons/curated-check.vue.js';
 import '../../../components/icons/filters.vue.js';
 import '../../../components/icons/grid-1-col.vue.js';
 import '../../../components/icons/grid-2-col.vue.js';
+import '../../../components/icons/grid-2-rows.vue.js';
 import '../../../components/icons/hide.vue.js';
 import '../../../components/icons/history-tiny.vue.js';
 import '../../../components/icons/history.vue.js';
+import '../../../components/icons/light-bulb-off.vue.js';
+import '../../../components/icons/light-bulb-on.vue.js';
 import '../../../components/icons/menu.vue.js';
 import '../../../components/icons/minus-tiny.vue.js';
 import '../../../components/icons/minus.vue.js';
@@ -95,6 +102,7 @@ import '../../../components/result/base-result-link.vue.js';
 import '../../../components/result/base-result-previous-price.vue.js';
 import '../../../components/result/base-result-fallback-image.vue.js';
 import '../../../components/result/base-result-placeholder-image.vue.js';
+import '../../../components/result/base-result-rating.vue.js';
 import '../../../components/suggestions/base-suggestion.vue.js';
 import '../../../components/suggestions/base-suggestions.vue.js';
 import '../../../components/auto-progress-bar.vue.js';

package/js/x-modules/extra-params/components/renderless-extra-param.vue_rollup-plugin-vue=script.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderless-extra-param.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/extra-params/components/renderless-extra-param.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { NoElement, State, xComponentMixin } from '../../../components';\nimport { Dictionary } from '../../../utils';\nimport { extraParamsXModule } from '../x-module';\n\n/**\n * It emits a {@link ExtraParamsXEvents.UserChangedExtraParams} when the `updateValue`\n * is called.\n *\n * @public\n */\n@Component({\n  mixins: [xComponentMixin(extraParamsXModule)],\n  components: {\n    NoElement\n  }\n})\nexport default class RenderlessExtraParam extends Vue {\n  /**\n   * The extra param's name.\n   *\n   * @public\n   */\n  @Prop({ required: true })\n  public name!: string;\n\n  /**\n   * A dictionary with the extra params in the store state.\n   *\n   * @public\n   */\n  @State('extraParams', 'params')\n  public stateParams!: Dictionary<unknown>;\n\n  /**\n   * It returns the value of the extra param from the store.\n   *\n   * @returns - The value from the store.\n   *\n   * @internal\n   */\n  protected get value(): unknown {\n    return this.stateParams[this.name];\n  }\n\n  /**\n   * It sets the new value to the store.\n   *\n   * @param newValue - The new value of the extra param.\n   *\n   * @internal\n   */\n  protected updateValue(newValue: unknown): void {\n    this.$x.emit('UserChangedExtraParams', { [this.name]: newValue });\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA;;;;;;AAYA;IAAkD,wCAAG;IAArD;;KAsCC;IAdC,sBAAc,uCAAK;;;;;;;;aAAnB;YACE,OAAO,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACpC;;;OAAA;;;;;;;;IASS,0CAAW,GAArB,UAAsB,QAAiB;;QACrC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,wBAAwB,YAAI,GAAC,IAAI,CAAC,IAAI,IAAG,QAAQ,MAAG,CAAC;KACnE;IA9BD;QADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;sDACJ;IAQrB;QADC,KAAK,CAAC,aAAa,EAAE,QAAQ,CAAC;6DACU;IAftB,oBAAoB;QANxC,SAAS,CAAC;YACT,MAAM,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;YAC7C,UAAU,EAAE;gBACV,SAAS,WAAA;aACV;SACF,CAAC;OACmB,oBAAoB,CAsCxC;IAAD,2BAAC;CAAA,CAtCiD,GAAG;;;;"}
+{"version":3,"file":"renderless-extra-param.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/extra-params/components/renderless-extra-param.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { NoElement, State, xComponentMixin } from '../../../components';\nimport { Dictionary } from '../../../utils';\nimport { extraParamsXModule } from '../x-module';\n\n/**\n * It emits a {@link ExtraParamsXEvents.UserChangedExtraParams} when the `updateValue`\n * is called.\n *\n * @public\n */\n@Component({\n  mixins: [xComponentMixin(extraParamsXModule)],\n  components: {\n    NoElement\n  }\n})\nexport default class RenderlessExtraParam extends Vue {\n  /**\n   * The extra param's name.\n   *\n   * @public\n   */\n  @Prop({ required: true })\n  public name!: string;\n\n  /**\n   * A dictionary with the extra params in the store state.\n   *\n   * @public\n   */\n  @State('extraParams', 'params')\n  public stateParams!: Dictionary<unknown>;\n\n  /**\n   * It returns the value of the extra param from the store.\n   *\n   * @returns - The value from the store.\n   *\n   * @internal\n   */\n  protected get value(): unknown {\n    return this.stateParams[this.name];\n  }\n\n  /**\n   * It sets the new value to the store.\n   *\n   * @param newValue - The new value of the extra param.\n   *\n   * @internal\n   */\n  protected updateValue(newValue: unknown): void {\n    this.$x.emit('UserChangedExtraParams', { [this.name]: newValue });\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA;;;;;;AAYA;IAAkD,wCAAG;IAArD;;KAsCC;IAdC,sBAAc,uCAAK;;;;;;;;aAAnB;YACE,OAAO,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACpC;;;OAAA;;;;;;;;IASS,0CAAW,GAArB,UAAsB,QAAiB;;QACrC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,wBAAwB,YAAI,GAAC,IAAI,CAAC,IAAI,IAAG,QAAQ,MAAG,CAAC;KACnE;IA9BD;QADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;sDACJ;IAQrB;QADC,KAAK,CAAC,aAAa,EAAE,QAAQ,CAAC;6DACU;IAftB,oBAAoB;QANxC,SAAS,CAAC;YACT,MAAM,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;YAC7C,UAAU,EAAE;gBACV,SAAS,WAAA;aACV;SACF,CAAC;OACmB,oBAAoB,CAsCxC;IAAD,2BAAC;CAAA,CAtCiD,GAAG;;;;"}

package/js/x-modules/extra-params/components/snippet-config-extra-params.vue_rollup-plugin-vue=script.js

@@ -42,7 +42,10 @@ import '../../../components/filters/labels/base-price-filter-label.vue.js';
 import '../../../components/icons/star.vue.js';
 import '../../../components/base-rating.vue.js';
 import '../../../components/filters/labels/base-rating-filter-label.vue.js';
-import '../../../components/icons/arrow.vue.js';
+import '../../../components/icons/arrow-down.vue.js';
+import '../../../components/icons/arrow-left.vue.js';
+import '../../../components/icons/arrow-right.vue.js';
+import '../../../components/icons/arrow-up.vue.js';
 import '../../../components/icons/bag.vue.js';
 import '../../../components/icons/bar-code.vue.js';
 import '../../../components/icons/barcode-tiny.vue.js';
@@ -63,12 +66,16 @@ import '../../../components/icons/chevron-tiny-up.vue.js';
 import '../../../components/icons/chevron-up.vue.js';
 import '../../../components/icons/cross-tiny.vue.js';
 import '../../../components/icons/cross.vue.js';
+import '../../../components/icons/curated-check.vue.js';
 import '../../../components/icons/filters.vue.js';
 import '../../../components/icons/grid-1-col.vue.js';
 import '../../../components/icons/grid-2-col.vue.js';
+import '../../../components/icons/grid-2-rows.vue.js';
 import '../../../components/icons/hide.vue.js';
 import '../../../components/icons/history-tiny.vue.js';
 import '../../../components/icons/history.vue.js';
+import '../../../components/icons/light-bulb-off.vue.js';
+import '../../../components/icons/light-bulb-on.vue.js';
 import '../../../components/icons/menu.vue.js';
 import '../../../components/icons/minus-tiny.vue.js';
 import '../../../components/icons/minus.vue.js';
@@ -112,6 +119,7 @@ import '../../../components/result/base-result-link.vue.js';
 import '../../../components/result/base-result-previous-price.vue.js';
 import '../../../components/result/base-result-fallback-image.vue.js';
 import '../../../components/result/base-result-placeholder-image.vue.js';
+import '../../../components/result/base-result-rating.vue.js';
 import '../../../components/suggestions/base-suggestion.vue.js';
 import '../../../components/suggestions/base-suggestions.vue.js';
 import '../../../components/auto-progress-bar.vue.js';

package/js/x-modules/extra-params/components/snippet-config-extra-params.vue_rollup-plugin-vue=script.js.map

@@ -1 +1 @@
-{"version":3,"file":"snippet-config-extra-params.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/extra-params/components/snippet-config-extra-params.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Watch, Inject } from 'vue-property-decorator';\nimport { xComponentMixin } from '../../../components';\nimport { Dictionary, forEach } from '../../../utils';\nimport { SnippetConfig } from '../../../x-installer';\nimport { extraParamsXModule } from '../x-module';\nimport ExtraParams from './extra-params.vue';\n\n/**\n * Extracts the extra parameters from the {@link SnippetConfig} and syncs it with the request\n * objects of every x-module.\n *\n * @public\n */\n@Component({\n  components: { ExtraParams },\n  mixins: [xComponentMixin(extraParamsXModule)]\n})\nexport default class SnippetConfigExtraParams extends Vue {\n  /**\n   * It injects {@link SnippetConfig} provided by an ancestor as snippetConfig.\n   *\n   * @internal\n   */\n  @Inject('snippetConfig')\n  public snippetConfig!: SnippetConfig;\n\n  /**\n   * Custom object containing the extra params from the snippet config.\n   *\n   * @remarks This object keeps manually the desired snippet config properties to avoid\n   * unnecessary re-renders.\n   *\n   * @internal\n   */\n  protected extraParams: Dictionary<unknown> = {};\n\n  /**\n   * Collection of properties from the snippet config not allowed to be sent as extra params.\n   *\n   * @internal\n   */\n  protected notAllowedExtraParams: Array<keyof SnippetConfig> = ['callbacks'];\n\n  /**\n   * Updates the extraParams object when the snippet config changes.\n   *\n   * @param snippetConfig - The new snippet config.\n   *\n   * @internal\n   */\n  @Watch('snippetConfig', { deep: true, immediate: true })\n  syncExtraParams({\n    instance,\n    scope,\n    lang,\n    searchLang,\n    consent,\n    documentDirection,\n    currency,\n    ...snippetExtraParams\n  }: SnippetConfig): void {\n    forEach(snippetExtraParams, (name, value) => {\n      if (this.notAllowedExtraParams.includes(name)) {\n        return;\n      }\n      this.$set(this.extraParams, name, value);\n    });\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA;;;;;;AAUA;IAAsD,4CAAG;IAAzD;QAAA,qEAmDC;;;;;;;;;QAlCW,iBAAW,GAAwB,EAAE,CAAC;;;;;;QAOtC,2BAAqB,GAA+B,CAAC,WAAW,CAAC,CAAC;;KA2B7E;;;;;;;;IAjBC,kDAAe,GAAf,UAAgB,EASA;QAVhB,iBAiBC;QAfC,IAAA,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,UAAU,gBAAA,EACV,OAAO,aAAA,EACP,iBAAiB,uBAAA,EACjB,QAAQ,cAAA,EACL,kBAAkB,cARP,uFASf,CADsB;QAErB,OAAO,CAAC,kBAAkB,EAAE,UAAC,IAAI,EAAE,KAAK;YACtC,IAAI,KAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;gBAC7C,OAAO;aACR;YACD,KAAI,CAAC,IAAI,CAAC,KAAI,CAAC,WAAW,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;SAC1C,CAAC,CAAC;KACJ;IA3CD;QADC,MAAM,CAAC,eAAe,CAAC;mEACa;IA2BrC;QADC,KAAK,CAAC,eAAe,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;mEAiBvD;IAlDkB,wBAAwB;QAJ5C,SAAS,CAAC;YACT,UAAU,EAAE,EAAE,WAAW,aAAA,EAAE;YAC3B,MAAM,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;SAC9C,CAAC;OACmB,wBAAwB,CAmD5C;IAAD,+BAAC;CAAA,CAnDqD,GAAG;;;;"}
+{"version":3,"file":"snippet-config-extra-params.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/extra-params/components/snippet-config-extra-params.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Watch, Inject } from 'vue-property-decorator';\nimport { xComponentMixin } from '../../../components';\nimport { Dictionary, forEach } from '../../../utils';\nimport { SnippetConfig } from '../../../x-installer';\nimport { extraParamsXModule } from '../x-module';\nimport ExtraParams from './extra-params.vue';\n\n/**\n * Extracts the extra parameters from the {@link SnippetConfig} and syncs it with the request\n * objects of every x-module.\n *\n * @public\n */\n@Component({\n  components: { ExtraParams },\n  mixins: [xComponentMixin(extraParamsXModule)]\n})\nexport default class SnippetConfigExtraParams extends Vue {\n  /**\n   * It injects {@link SnippetConfig} provided by an ancestor as snippetConfig.\n   *\n   * @internal\n   */\n  @Inject('snippetConfig')\n  public snippetConfig!: SnippetConfig;\n\n  /**\n   * Custom object containing the extra params from the snippet config.\n   *\n   * @remarks This object keeps manually the desired snippet config properties to avoid\n   * unnecessary re-renders.\n   *\n   * @internal\n   */\n  protected extraParams: Dictionary<unknown> = {};\n\n  /**\n   * Collection of properties from the snippet config not allowed to be sent as extra params.\n   *\n   * @internal\n   */\n  protected notAllowedExtraParams: Array<keyof SnippetConfig> = ['callbacks'];\n\n  /**\n   * Updates the extraParams object when the snippet config changes.\n   *\n   * @param snippetConfig - The new snippet config.\n   *\n   * @internal\n   */\n  @Watch('snippetConfig', { deep: true, immediate: true })\n  syncExtraParams({\n    instance,\n    scope,\n    lang,\n    searchLang,\n    consent,\n    documentDirection,\n    currency,\n    ...snippetExtraParams\n  }: SnippetConfig): void {\n    forEach(snippetExtraParams, (name, value) => {\n      if (this.notAllowedExtraParams.includes(name)) {\n        return;\n      }\n      this.$set(this.extraParams, name, value);\n    });\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA;;;;;;AAUA;IAAsD,4CAAG;IAAzD;QAAA,qEAmDC;;;;;;;;;QAlCW,iBAAW,GAAwB,EAAE,CAAC;;;;;;QAOtC,2BAAqB,GAA+B,CAAC,WAAW,CAAC,CAAC;;KA2B7E;;;;;;;;IAjBC,kDAAe,GAAf,UAAgB,EASA;QAVhB,iBAiBC;QAfC,IAAA,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,UAAU,gBAAA,EACV,OAAO,aAAA,EACP,iBAAiB,uBAAA,EACjB,QAAQ,cAAA,EACL,kBAAkB,cARP,uFASf,CADsB;QAErB,OAAO,CAAC,kBAAkB,EAAE,UAAC,IAAI,EAAE,KAAK;YACtC,IAAI,KAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;gBAC7C,OAAO;aACR;YACD,KAAI,CAAC,IAAI,CAAC,KAAI,CAAC,WAAW,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;SAC1C,CAAC,CAAC;KACJ;IA3CD;QADC,MAAM,CAAC,eAAe,CAAC;mEACa;IA2BrC;QADC,KAAK,CAAC,eAAe,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;mEAiBvD;IAlDkB,wBAAwB;QAJ5C,SAAS,CAAC;YACT,UAAU,EAAE,EAAE,WAAW,aAAA,EAAE;YAC3B,MAAM,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;SAC9C,CAAC;OACmB,wBAAwB,CAmD5C;IAAD,+BAAC;CAAA,CAnDqD,GAAG;;;;"}

package/js/x-modules/facets/components/clear-filters.vue_rollup-plugin-vue=script.js

@@ -25,7 +25,10 @@ import '../../../components/filters/labels/base-price-filter-label.vue.js';
 import '../../../components/icons/star.vue.js';
 import '../../../components/base-rating.vue.js';
 import '../../../components/filters/labels/base-rating-filter-label.vue.js';
-import '../../../components/icons/arrow.vue.js';
+import '../../../components/icons/arrow-down.vue.js';
+import '../../../components/icons/arrow-left.vue.js';
+import '../../../components/icons/arrow-right.vue.js';
+import '../../../components/icons/arrow-up.vue.js';
 import '../../../components/icons/bag.vue.js';
 import '../../../components/icons/bar-code.vue.js';
 import '../../../components/icons/barcode-tiny.vue.js';
@@ -46,12 +49,16 @@ import '../../../components/icons/chevron-tiny-up.vue.js';
 import '../../../components/icons/chevron-up.vue.js';
 import '../../../components/icons/cross-tiny.vue.js';
 import '../../../components/icons/cross.vue.js';
+import '../../../components/icons/curated-check.vue.js';
 import '../../../components/icons/filters.vue.js';
 import '../../../components/icons/grid-1-col.vue.js';
 import '../../../components/icons/grid-2-col.vue.js';
+import '../../../components/icons/grid-2-rows.vue.js';
 import '../../../components/icons/hide.vue.js';
 import '../../../components/icons/history-tiny.vue.js';
 import '../../../components/icons/history.vue.js';
+import '../../../components/icons/light-bulb-off.vue.js';
+import '../../../components/icons/light-bulb-on.vue.js';
 import '../../../components/icons/menu.vue.js';
 import '../../../components/icons/minus-tiny.vue.js';
 import '../../../components/icons/minus.vue.js';
@@ -95,6 +102,7 @@ import '../../../components/result/base-result-link.vue.js';
 import '../../../components/result/base-result-previous-price.vue.js';
 import '../../../components/result/base-result-fallback-image.vue.js';
 import '../../../components/result/base-result-placeholder-image.vue.js';
+import '../../../components/result/base-result-rating.vue.js';
 import '../../../components/suggestions/base-suggestion.vue.js';
 import '../../../components/suggestions/base-suggestions.vue.js';
 import '../../../components/auto-progress-bar.vue.js';

package/js/x-modules/facets/components/clear-filters.vue_rollup-plugin-vue=script.js.map

@@ -1 +1 @@
-{"version":3,"file":"clear-filters.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/facets/components/clear-filters.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { Facet, Filter, isFacetFilter } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { Getter, xComponentMixin } from '../../../components';\nimport BaseEventButton from '../../../components/base-event-button.vue';\nimport { VueCSSClasses } from '../../../utils';\nimport { XEventsTypes } from '../../../wiring';\nimport { facetsXModule } from '../x-module';\n\n/**\n * Renders a simple button, emitting the needed events when clicked.\n *\n * @public\n */\n@Component({\n  components: { BaseEventButton },\n  mixins: [xComponentMixin(facetsXModule)]\n})\nexport default class ClearFilters extends Vue {\n  /**\n   * It handles if the ClearFilters button is always visible no matter if there are not\n   * filters selected. If false, the ClearFilters button is not visible whether\n   * there are no filters selected.\n   *\n   * @public\n   */\n  @Prop({ default: false })\n  public alwaysVisible!: boolean;\n\n  /**\n   * Array of facets ids that will be passed to event like payload.\n   *\n   * @public\n   */\n  @Prop()\n  public facetsIds?: Array<Facet['id']>;\n\n  /**\n   * Get the selected filters from store.\n   *\n   * @internal\n   */\n  @Getter('facets', 'selectedFilters')\n  public allSelectedFilters!: Filter[];\n\n  /**\n   * If alwaysVisible prop is true, ClearAllFilters button is always shown, but disabled\n   * if there are no filters selected.\n   * If alwaysVisible prop is false, ClearAllFilters button is shown whether there\n   * are some filter selected.\n   *\n   * @returns True if alwaysVisible is true or in the opposite case true or false depends\n   * on if there are selected filters or not.\n   *\n   * @internal\n   */\n  protected get show(): boolean {\n    return this.alwaysVisible || this.areThereSelectedFilters;\n  }\n\n  /**\n   * Get selected filters.\n   * If there are facets ids, get selected filters whose facet id match with some of facets ids.\n   * If there aren't facets ids, get selected filters.\n   *\n   * @returns Array of selected filters depends on there are facets ids or not.\n   * @internal\n   */\n  protected get facetsSelectedFilters(): Filter[] {\n    if (this.facetsIds) {\n      return this.allSelectedFilters.filter(\n        filter => isFacetFilter(filter) && this.facetsIds!.includes(filter.facetId)\n      );\n    } else {\n      return this.allSelectedFilters;\n    }\n  }\n\n  /**\n   * Check if there are selected filters.\n   *\n   * @returns True or false depends on if there are facets ids and if there are selected filters.\n   * @internal\n   */\n  protected get areThereSelectedFilters(): boolean {\n    return !!this.facetsSelectedFilters.length;\n  }\n\n  /**\n   * The events that will be emitted when the button clear filters is clicked.\n   *\n   * @returns The events to be emitted when the button clear filters is clicked.\n   * @internal\n   */\n  protected get events(): Partial<XEventsTypes> {\n    return this.facetsIds\n      ? {\n          UserClickedClearAllFilters: this.facetsIds\n        }\n      : {\n          UserClickedClearAllFilters: undefined\n        };\n  }\n\n  /**\n   * Dynamic CSS classes to apply to the component.\n   *\n   * @returns The dynamic CSS classes to apply to the component.\n   * @internal\n   */\n  protected get cssClasses(): VueCSSClasses {\n    return {\n      'x-clear-filters--has-not-selected-filters': !this.areThereSelectedFilters,\n      'x-clear-filters--has-selected-filters': this.areThereSelectedFilters\n    };\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA;;;;;AASA;IAA0C,gCAAG;IAA7C;;KAkGC;IA5DC,sBAAc,8BAAI;;;;;;;;;;;;aAAlB;YACE,OAAO,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,uBAAuB,CAAC;SAC3D;;;OAAA;IAUD,sBAAc,+CAAqB;;;;;;;;;aAAnC;YAAA,iBAQC;YAPC,IAAI,IAAI,CAAC,SAAS,EAAE;gBAClB,OAAO,IAAI,CAAC,kBAAkB,CAAC,MAAM,CACnC,UAAA,MAAM,IAAI,OAAA,aAAa,CAAC,MAAM,CAAC,IAAI,KAAI,CAAC,SAAU,CAAC,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC,GAAA,CAC5E,CAAC;aACH;iBAAM;gBACL,OAAO,IAAI,CAAC,kBAAkB,CAAC;aAChC;SACF;;;OAAA;IAQD,sBAAc,iDAAuB;;;;;;;aAArC;YACE,OAAO,CAAC,CAAC,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC;SAC5C;;;OAAA;IAQD,sBAAc,gCAAM;;;;;;;aAApB;YACE,OAAO,IAAI,CAAC,SAAS;kBACjB;oBACE,0BAA0B,EAAE,IAAI,CAAC,SAAS;iBAC3C;kBACD;oBACE,0BAA0B,EAAE,SAAS;iBACtC,CAAC;SACP;;;OAAA;IAQD,sBAAc,oCAAU;;;;;;;aAAxB;YACE,OAAO;gBACL,2CAA2C,EAAE,CAAC,IAAI,CAAC,uBAAuB;gBAC1E,uCAAuC,EAAE,IAAI,CAAC,uBAAuB;aACtE,CAAC;SACH;;;OAAA;IAxFD;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;uDACM;IAQ/B;QADC,IAAI,EAAE;mDAC+B;IAQtC;QADC,MAAM,CAAC,QAAQ,EAAE,iBAAiB,CAAC;4DACC;IAzBlB,YAAY;QAJhC,SAAS,CAAC;YACT,UAAU,EAAE,EAAE,eAAe,iBAAA,EAAE;YAC/B,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;SACzC,CAAC;OACmB,YAAY,CAkGhC;IAAD,mBAAC;CAAA,CAlGyC,GAAG;;;;"}
+{"version":3,"file":"clear-filters.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/facets/components/clear-filters.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { Facet, Filter, isFacetFilter } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { Getter, xComponentMixin } from '../../../components';\nimport BaseEventButton from '../../../components/base-event-button.vue';\nimport { VueCSSClasses } from '../../../utils';\nimport { XEventsTypes } from '../../../wiring';\nimport { facetsXModule } from '../x-module';\n\n/**\n * Renders a simple button, emitting the needed events when clicked.\n *\n * @public\n */\n@Component({\n  components: { BaseEventButton },\n  mixins: [xComponentMixin(facetsXModule)]\n})\nexport default class ClearFilters extends Vue {\n  /**\n   * It handles if the ClearFilters button is always visible no matter if there are not\n   * filters selected. If false, the ClearFilters button is not visible whether\n   * there are no filters selected.\n   *\n   * @public\n   */\n  @Prop({ default: false })\n  public alwaysVisible!: boolean;\n\n  /**\n   * Array of facets ids that will be passed to event like payload.\n   *\n   * @public\n   */\n  @Prop()\n  public facetsIds?: Array<Facet['id']>;\n\n  /**\n   * Get the selected filters from store.\n   *\n   * @internal\n   */\n  @Getter('facets', 'selectedFilters')\n  public allSelectedFilters!: Filter[];\n\n  /**\n   * If alwaysVisible prop is true, ClearAllFilters button is always shown, but disabled\n   * if there are no filters selected.\n   * If alwaysVisible prop is false, ClearAllFilters button is shown whether there\n   * are some filter selected.\n   *\n   * @returns True if alwaysVisible is true or in the opposite case true or false depends\n   * on if there are selected filters or not.\n   *\n   * @internal\n   */\n  protected get show(): boolean {\n    return this.alwaysVisible || this.areThereSelectedFilters;\n  }\n\n  /**\n   * Get selected filters.\n   * If there are facets ids, get selected filters whose facet id match with some of facets ids.\n   * If there aren't facets ids, get selected filters.\n   *\n   * @returns Array of selected filters depends on there are facets ids or not.\n   * @internal\n   */\n  protected get facetsSelectedFilters(): Filter[] {\n    if (this.facetsIds) {\n      return this.allSelectedFilters.filter(\n        filter => isFacetFilter(filter) && this.facetsIds!.includes(filter.facetId)\n      );\n    } else {\n      return this.allSelectedFilters;\n    }\n  }\n\n  /**\n   * Check if there are selected filters.\n   *\n   * @returns True or false depends on if there are facets ids and if there are selected filters.\n   * @internal\n   */\n  protected get areThereSelectedFilters(): boolean {\n    return !!this.facetsSelectedFilters.length;\n  }\n\n  /**\n   * The events that will be emitted when the button clear filters is clicked.\n   *\n   * @returns The events to be emitted when the button clear filters is clicked.\n   * @internal\n   */\n  protected get events(): Partial<XEventsTypes> {\n    return this.facetsIds\n      ? {\n          UserClickedClearAllFilters: this.facetsIds\n        }\n      : {\n          UserClickedClearAllFilters: undefined\n        };\n  }\n\n  /**\n   * Dynamic CSS classes to apply to the component.\n   *\n   * @returns The dynamic CSS classes to apply to the component.\n   * @internal\n   */\n  protected get cssClasses(): VueCSSClasses {\n    return {\n      'x-clear-filters--has-not-selected-filters': !this.areThereSelectedFilters,\n      'x-clear-filters--has-selected-filters': this.areThereSelectedFilters\n    };\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA;;;;;AASA;IAA0C,gCAAG;IAA7C;;KAkGC;IA5DC,sBAAc,8BAAI;;;;;;;;;;;;aAAlB;YACE,OAAO,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,uBAAuB,CAAC;SAC3D;;;OAAA;IAUD,sBAAc,+CAAqB;;;;;;;;;aAAnC;YAAA,iBAQC;YAPC,IAAI,IAAI,CAAC,SAAS,EAAE;gBAClB,OAAO,IAAI,CAAC,kBAAkB,CAAC,MAAM,CACnC,UAAA,MAAM,IAAI,OAAA,aAAa,CAAC,MAAM,CAAC,IAAI,KAAI,CAAC,SAAU,CAAC,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC,GAAA,CAC5E,CAAC;aACH;iBAAM;gBACL,OAAO,IAAI,CAAC,kBAAkB,CAAC;aAChC;SACF;;;OAAA;IAQD,sBAAc,iDAAuB;;;;;;;aAArC;YACE,OAAO,CAAC,CAAC,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC;SAC5C;;;OAAA;IAQD,sBAAc,gCAAM;;;;;;;aAApB;YACE,OAAO,IAAI,CAAC,SAAS;kBACjB;oBACE,0BAA0B,EAAE,IAAI,CAAC,SAAS;iBAC3C;kBACD;oBACE,0BAA0B,EAAE,SAAS;iBACtC,CAAC;SACP;;;OAAA;IAQD,sBAAc,oCAAU;;;;;;;aAAxB;YACE,OAAO;gBACL,2CAA2C,EAAE,CAAC,IAAI,CAAC,uBAAuB;gBAC1E,uCAAuC,EAAE,IAAI,CAAC,uBAAuB;aACtE,CAAC;SACH;;;OAAA;IAxFD;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;uDACM;IAQ/B;QADC,IAAI,EAAE;mDAC+B;IAQtC;QADC,MAAM,CAAC,QAAQ,EAAE,iBAAiB,CAAC;4DACC;IAzBlB,YAAY;QAJhC,SAAS,CAAC;YACT,UAAU,EAAE,EAAE,eAAe,iBAAA,EAAE;YAC/B,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;SACzC,CAAC;OACmB,YAAY,CAkGhC;IAAD,mBAAC;CAAA,CAlGyC,GAAG;;;;"}

package/js/x-modules/facets/components/facets/facets-provider.vue_rollup-plugin-vue=script.js

@@ -26,7 +26,10 @@ import '../../../../components/filters/labels/base-price-filter-label.vue.js';
 import '../../../../components/icons/star.vue.js';
 import '../../../../components/base-rating.vue.js';
 import '../../../../components/filters/labels/base-rating-filter-label.vue.js';
-import '../../../../components/icons/arrow.vue.js';
+import '../../../../components/icons/arrow-down.vue.js';
+import '../../../../components/icons/arrow-left.vue.js';
+import '../../../../components/icons/arrow-right.vue.js';
+import '../../../../components/icons/arrow-up.vue.js';
 import '../../../../components/icons/bag.vue.js';
 import '../../../../components/icons/bar-code.vue.js';
 import '../../../../components/icons/barcode-tiny.vue.js';
@@ -47,12 +50,16 @@ import '../../../../components/icons/chevron-tiny-up.vue.js';
 import '../../../../components/icons/chevron-up.vue.js';
 import '../../../../components/icons/cross-tiny.vue.js';
 import '../../../../components/icons/cross.vue.js';
+import '../../../../components/icons/curated-check.vue.js';
 import '../../../../components/icons/filters.vue.js';
 import '../../../../components/icons/grid-1-col.vue.js';
 import '../../../../components/icons/grid-2-col.vue.js';
+import '../../../../components/icons/grid-2-rows.vue.js';
 import '../../../../components/icons/hide.vue.js';
 import '../../../../components/icons/history-tiny.vue.js';
 import '../../../../components/icons/history.vue.js';
+import '../../../../components/icons/light-bulb-off.vue.js';
+import '../../../../components/icons/light-bulb-on.vue.js';
 import '../../../../components/icons/menu.vue.js';
 import '../../../../components/icons/minus-tiny.vue.js';
 import '../../../../components/icons/minus.vue.js';
@@ -96,6 +103,7 @@ import '../../../../components/result/base-result-link.vue.js';
 import '../../../../components/result/base-result-previous-price.vue.js';
 import '../../../../components/result/base-result-fallback-image.vue.js';
 import '../../../../components/result/base-result-placeholder-image.vue.js';
+import '../../../../components/result/base-result-rating.vue.js';
 import '../../../../components/suggestions/base-suggestion.vue.js';
 import '../../../../components/suggestions/base-suggestions.vue.js';
 import '../../../../components/auto-progress-bar.vue.js';