@empathyco/x-components 3.0.0-alpha.40 → 3.0.0-alpha.44

package/docs/API-reference/components/common/result/x-components.base-result-rating.md

@@ -0,0 +1,254 @@
+---
+
+title: BaseResultRating
+
+---
+
+# BaseResultRating
+
+This component renders a {@link BaseRating} for a result passed as prop.
+
+## Props
+
+| Name                | Description                                                           | Type                | Default       |
+| ------------------- | --------------------------------------------------------------------- | ------------------- | ------------- |
+| <code>result</code> | The {@link @empathyco/x-types#Result \| Result} to render its rating. | <code>Result</code> | <code></code> |
+| <code>link</code>   | A link to redirect when rating is clicked.                            | <code>string</code> | <code></code> |
+
+## Slots
+
+| Name                     | Description                          | Bindings<br />(name - type - description) |
+| ------------------------ | ------------------------------------ | ----------------------------------------- |
+| <code>default</code>     | To override the whole content        | <br />                                    |
+| <code>empty-icon</code>  | The content to render as empty icon  | None                                      |
+| <code>filled-icon</code> | The content to render as filled icon | None                                      |
+
+## Events
+
+This component emits the following events:
+
+- [`UserClickedAResultRating`](./../../api/x-components.searchboxxevents.md)
+
+## See it in action
+
+Here you have a basic example of how the result rating is rendered.
+
+```vue
+<template>
+  <BaseResultRating :result="result" />
+</template>
+
+<script>
+import { BaseResultRating } from "@empathyco/x-components";
+
+export default {
+  name: "ResultRatingDemo",
+  components: {
+    BaseResultRating
+  },
+  data() {
+    return {
+      result: {
+        id: 1,
+        name: "Result with rating",
+        rating: { value: 3 }
+      }
+    };
+  }
+};
+</script>
+```
+
+### Play with props
+
+In this example, the result rating has been configured to 6 as maximum value using the prop `max`.
+
+```vue
+<template>
+  <BaseResultRating :result="result" :max="6" />
+</template>
+
+<script>
+import { BaseResultRating } from "@empathyco/x-components";
+
+export default {
+  name: "ResultRatingDemo",
+  components: {
+    BaseResultRating
+  },
+  data() {
+    return {
+      result: {
+        id: 1,
+        name: "Result with rating",
+        rating: { value: 3 }
+      }
+    };
+  }
+};
+</script>
+```
+
+In this example, the result rating has been configured with a link to redirect when is clicked.
+
+```vue
+<template>
+  <BaseResultRating :result="result" link="https://empathy.co/" />
+</template>
+
+<script>
+import { BaseResultRating } from "@empathyco/x-components";
+
+export default {
+  name: "ResultRatingDemo",
+  components: {
+    BaseResultRating
+  },
+  data() {
+    return {
+      result: {
+        id: 1,
+        name: "Result with rating",
+        rating: { value: 3 }
+      }
+    };
+  }
+};
+</script>
+```
+
+### Play with events
+
+In this example, a message has been added to be shown when the result rating is clicked.
+
+```vue
+<template>
+  <BaseResultRating
+    :result="result"
+    @UserClickedAResultRating="logUserClickedRating"
+  />
+</template>
+
+<script>
+import { BaseResultRating } from "@empathyco/x-components";
+
+export default {
+  name: "ResultRatingDemo",
+  components: {
+    BaseResultRating
+  },
+  data() {
+    return {
+      result: {
+        id: 1,
+        name: "Result with rating",
+        rating: { value: 3 }
+      }
+    };
+  },
+  methods: {
+    logUserClickedRating(result) {
+      console.log("User clickedRating of this result:", result);
+    }
+  }
+};
+</script>
+```
+
+## Extending the component
+
+The rendered icons for rating can be configured through slots. Keep in mind that the icons for both
+states (filled and empty), must have the same size make component work properly.
+
+```vue
+<template>
+  <BaseResultRating :result="result">
+    <template #filled-icon>❤️</template>
+    <template #empty-icon>🤍</template>
+  </BaseResultRating>
+</template>
+
+<script>
+import { BaseResultRating } from "@empathyco/x-components";
+
+export default {
+  name: "ResultRatingDemo",
+  components: {
+    BaseResultRating
+  },
+  data() {
+    return {
+      result: {
+        id: 1,
+        name: "Result with rating",
+        rating: { value: 3 }
+      }
+    };
+  }
+};
+</script>
+```
+
+It is possible to override all the content of the component to show your own rating but keeping the
+link and event behaviour:
+
+```vue
+<template>
+  <BaseResultRating :result="result" #default="{ rating, result }">
+    <span v-for="star in rating">⭐️</span>
+    <span>{{ result.name }}</span>
+  </BaseResultRating>
+</template>
+
+<script>
+import { BaseResultRating } from "@empathyco/x-components";
+
+export default {
+  name: "ResultRatingDemo",
+  components: {
+    BaseResultRating
+  },
+  data() {
+    return {
+      result: {
+        id: 1,
+        name: "Result with rating",
+        rating: { value: 3 }
+      }
+    };
+  }
+};
+</script>
+```
+
+Even it is possible to reuse our rating component:
+
+```vue
+<template>
+  <BaseResultRating :result="result" #default="{ rating, result }">
+    <BaseRating :value="rating" />
+    <span>{{ result.name }}</span>
+  </BaseResultRating>
+</template>
+
+<script>
+import { BaseResultRating, BaseRating } from "@empathyco/x-components";
+
+export default {
+  name: "ResultRatingDemo",
+  components: {
+    BaseResultRating,
+    BaseRating
+  },
+  data() {
+    return {
+      result: {
+        id: 1,
+        name: "Result with rating",
+        rating: { value: 3 }
+      }
+    };
+  }
+};
+</script>
+```

package/docs/API-reference/components/common/x-components.base-rating.md

@@ -18,10 +18,10 @@ prop.
 
 ## Slots
 
-| Name                    | Description                          | Bindings<br />(name - type - description) |
-| ----------------------- | ------------------------------------ | ----------------------------------------- |
-| <code>emptyIcon</code>  | The content to render as empty icon  | None                                      |
-| <code>filledIcon</code> | The content to render as filled icon | None                                      |
+| Name                     | Description                          | Bindings<br />(name - type - description) |
+| ------------------------ | ------------------------------------ | ----------------------------------------- |
+| <code>empty-icon</code>  | The content to render as empty icon  | None                                      |
+| <code>filled-icon</code> | The content to render as filled icon | None                                      |
 
 ## Examples
 
@@ -38,10 +38,10 @@ on this value.
 
 ```vue
 <BaseRating :value="7.15" :max="10">
-  <template #filledIcon>
+  <template #filled-icon>
     <TestIcon/>
   </template>
-  <template #emptyIcon>
+  <template #empty-icon>
     <TestIcon/>
   </template>
 </BaseRating>

package/docs/API-reference/components/common/x-components.sliding-panel.md

@@ -17,6 +17,7 @@ general behavior.
 | <code>scrollFactor</code>         | Scroll factor that will dictate how much the scroll moves when pressing a navigation button.                        | <code>number</code>  | <code>0.7</code>  |
 | <code>showButtons</code>          | Would make the navigation buttons visible when they're needed or always hide them.                                  | <code>boolean</code> | <code>true</code> |
 | <code>resetOnContentChange</code> | When true, whenever the DOM content in the sliding panel slot changes, it will reset<br />the scroll position to 0. | <code>boolean</code> | <code>true</code> |
+| <code>buttonClass</code>          | CSS classes to add to the buttons.                                                                                  | <code>string</code>  | <code></code>     |
 
 ## Slots
 

package/docs/API-reference/components/next-queries/x-components.next-queries.md

@@ -14,17 +14,18 @@ of `shirts`.
 
 ## Props
 
-| Name                          | Description                                                       | Type                | Default       |
-| ----------------------------- | ----------------------------------------------------------------- | ------------------- | ------------- |
-| <code>animation</code>        | Animation component that will be used to animate the suggestions. | <code>Vue</code>    | <code></code> |
-| <code>maxItemsToRender</code> | Number of next queries to be rendered.                            | <code>number</code> | <code></code> |
+| Name                          | Description                                                                 | Type                 | Default            |
+| ----------------------------- | --------------------------------------------------------------------------- | -------------------- | ------------------ |
+| <code>animation</code>        | Animation component that will be used to animate the suggestions.           | <code>Vue</code>     | <code></code>      |
+| <code>maxItemsToRender</code> | Number of next queries to be rendered.                                      | <code>number</code>  | <code></code>      |
+| <code>highlightCurated</code> | Flag to indicate if the curated next queries should be displayed different. | <code>boolean</code> | <code>false</code> |
 
 ## Slots
 
-| Name                            | Description        | Bindings<br />(name - type - description)                                                                                            |
-| ------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------ |
-| <code>suggestion</code>         | Next Query item    | **suggestion** <code>Suggestion</code> - Next Query suggestion data<br />**index** <code>number</code> - Next Query suggestion index |
-| <code>suggestion-content</code> | Next Query content | **suggestion** <code>Suggestion</code> - Next Query suggestion data<br />**index** <code>number</code> - Next Query suggestion index |
+| Name                            | Description        | Bindings<br />(name - type - description)                                                                                                                                                                                                      |
+| ------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <code>suggestion</code>         | Next Query item    | **suggestion** <code>Suggestion</code> - Next Query suggestion data<br />**highlightCurated** <code>boolean</code> - True if the curated NQs should be highlighted<br />**index** <code>number</code> - Next Query suggestion index            |
+| <code>suggestion-content</code> | Next Query content | **suggestion** <code>Suggestion</code> - Next Query suggestion data<br />**shouldHighlightCurated** <code>boolean</code> - True if the curated NQ should<br /> be highlighted<br />**index** <code>number</code> - Next Query suggestion index |
 
 ## Examples
 
@@ -37,11 +38,16 @@ queries it will show them
 <NextQueries />
 ```
 
-The component has two optional props. `animation` to render the component with an animation and
-`maxItemToRender` to limit the number of next queries will be rendered (by default it is 5).
+The component has three optional props. `animation` to render the component with an animation,
+`maxItemToRender` to limit the number of next queries will be rendered (by default it is 5) and
+`highlightCurated` to indicate if the curated Next Queries inside the list should be highlighted.
 
 ```vue
-<NextQueries :animation="FadeAndSlide" :maxItemsToRender="10" />
+<NextQueries
+  :animation="FadeAndSlide"
+  :maxItemsToRender="10"
+  :highlightCurated="true"
+/>
 ```
 
 ### Overriding Next Queries' Content

package/docs/API-reference/components/next-queries/x-components.next-query.md

@@ -12,20 +12,23 @@ it will render the suggestion query by default.
 
 ## Props
 
-| Name                    | Description                                           | Type                        | Default       |
-| ----------------------- | ----------------------------------------------------- | --------------------------- | ------------- |
-| <code>suggestion</code> | The suggestion to render and use in the default slot. | <code>NextQueryModel</code> | <code></code> |
+| Name                          | Description                                                | Type                        | Default            |
+| ----------------------------- | ---------------------------------------------------------- | --------------------------- | ------------------ |
+| <code>suggestion</code>       | The suggestion to render and use in the default slot.      | <code>NextQueryModel</code> | <code></code>      |
+| <code>highlightCurated</code> | Indicates if the curated next query should be highlighted. | <code>boolean</code>        | <code>false</code> |
 
 ## Slots
 
-| Name                 | Description        | Bindings<br />(name - type - description)                           |
-| -------------------- | ------------------ | ------------------------------------------------------------------- |
-| <code>default</code> | Next Query content | **suggestion** <code>Suggestion</code> - Next Query suggestion data |
+| Name                 | Description        | Bindings<br />(name - type - description)                                                                                                                               |
+| -------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <code>default</code> | Next Query content | **suggestion** <code>Suggestion</code> - Next Query suggestion data<br />**shouldHighlightCurated** <code>boolean</code> - True if the curated NQ should be highlighted |
 
 ## Examples
 
 This components expects just a suggestion as a prop to be rendered. It has a slot to override the
-content. By default, it renders the suggestion query of the next query.
+content. By default, it renders the suggestion query of the next query. It also has an optional
+prop, `highlightCurated`, to indicate if the curated Next Queries should be differentiated with a
+CSS class.
 
 ### Basic Usage
 
@@ -48,6 +51,12 @@ The default slot allows you to replace the content of the suggestion button.
 </NextQuery>
 ```
 
+## Dynamic Classes
+
+`NextQuery` uses the following dynamic CSS classes so you can style it when is:
+
+- Curated: `x-next-query--is-curated`.
+
 ## Events
 
 A list of events that the component will emit:

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

@@ -29,7 +29,7 @@ var __vue_render__ = function () {
         },
         [
           _vm._l(_vm.max, function (i) {
-            return _vm._t("emptyIcon", function () {
+            return _vm._t("empty-icon", function () {
               return [
                 _c("DefaultIcon", {
                   key: i,
@@ -50,7 +50,7 @@ var __vue_render__ = function () {
         },
         [
           _vm._l(_vm.max, function (i) {
-            return _vm._t("filledIcon", function () {
+            return _vm._t("filled-icon", function () {
               return [
                 _c("DefaultIcon", {
                   key: i,
@@ -69,11 +69,11 @@ __vue_render__._withStripped = true;
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-572d183e_0", { source: ".x-rating[data-v-572d183e] {\n  position: relative;\n  display: inline-block;\n}\n.x-rating--empty[data-v-572d183e] {\n  overflow: hidden;\n  display: flex;\n}\n.x-rating--filled[data-v-572d183e] {\n  display: flex;\n  position: absolute;\n  overflow: hidden;\n  top: 0;\n  left: 0;\n}\n.x-rating__default-icon[data-v-572d183e] {\n  fill: currentColor;\n  stroke: currentColor;\n}\n.x-rating__default-icon--empty[data-v-572d183e] {\n  fill: none;\n}", map: undefined, media: undefined });
+    inject("data-v-01a5c2e2_0", { source: ".x-rating[data-v-01a5c2e2] {\n  position: relative;\n  display: inline-block;\n}\n.x-rating--empty[data-v-01a5c2e2] {\n  overflow: hidden;\n  display: flex;\n  flex-flow: row nowrap;\n  white-space: nowrap;\n}\n.x-rating--filled[data-v-01a5c2e2] {\n  display: flex;\n  flex-flow: row nowrap;\n  white-space: nowrap;\n  position: absolute;\n  overflow: hidden;\n  top: 0;\n  left: 0;\n  height: 100%;\n}\n.x-rating__default-icon[data-v-01a5c2e2] {\n  fill: currentColor;\n  stroke: currentColor;\n}\n.x-rating__default-icon--empty[data-v-01a5c2e2] {\n  fill: none;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-572d183e";
+  var __vue_scope_id__ = "data-v-01a5c2e2";
   /* module identifier */
   var __vue_module_identifier__ = undefined;
   /* functional template */

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

@@ -1 +1 @@
-{"version":3,"file":"base-rating.vue.js","sources":["../../../src/components/base-rating.vue"],"sourcesContent":["<template>\n  <span class=\"x-rating\" role=\"img\" :aria-label=\"ariaLabel\" data-test=\"rating\">\n    <div class=\"x-rating--empty\" data-test=\"rating-empty\">\n      <!--\n        @slot The content to render as empty icon\n      -->\n      <slot v-for=\"i in max\" name=\"emptyIcon\">\n        <DefaultIcon :key=\"i\" class=\"x-rating__default-icon x-rating__default-icon--empty\" />\n      </slot>\n    </div>\n    <div\n      class=\"x-rating--filled\"\n      :style=\"{ width: calculateFilledWrapperWidth }\"\n      data-test=\"rating-filled\"\n    >\n      <!--\n        @slot The content to render as filled icon\n      -->\n      <slot v-for=\"i in max\" name=\"filledIcon\">\n        <DefaultIcon :key=\"i\" class=\"x-rating__default-icon x-rating__default-icon--filled\" />\n      </slot>\n    </div>\n  </span>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import StarIcon from './icons/star.vue';\n\n  /**\n   * Rating component. This component renders a set of elements filled based on the value passed as\n   * prop.\n   *\n   * @public\n   */\n  @Component({\n    components: {\n      DefaultIcon: StarIcon\n    }\n  })\n  export default class BaseRating extends Vue {\n    /**\n     * Numeric value used to calculates the width of the filled elements.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected value!: number;\n    /**\n     * Maximum number of elements to paint.\n     *\n     * @public\n     */\n    @Prop({ default: 5 })\n    protected max!: number;\n\n    /**\n     * Calculates the width of the filled elements wrapper.\n     *\n     * @returns The % of the wrapper width.\n     *\n     * @internal\n     */\n    protected get calculateFilledWrapperWidth(): string {\n      return this.value < 0 ? '0%' : `${(this.value * 100) / this.max}%`;\n    }\n\n    /**\n     * Creates the aria label for accessibility purpose.\n     *\n     * @returns The aria label.\n     *\n     * @internal\n     */\n    protected get ariaLabel(): string {\n      return `${this.value}/${this.max}`;\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-rating {\n    position: relative;\n    display: inline-block;\n\n    &--empty {\n      overflow: hidden;\n      display: flex;\n    }\n\n    &--filled {\n      display: flex;\n      position: absolute;\n      overflow: hidden;\n      top: 0;\n      left: 0;\n    }\n\n    &__default-icon {\n      fill: currentColor;\n      stroke: currentColor;\n\n      &--empty {\n        fill: none;\n      }\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component receives a `value` as prop and renders a set of elements, which will be filled based\non this value.\n\n### Basic usage\n\n```vue\n<BaseRating :value=\"5.23\" />\n```\n\n### Customizing its contents\n\n```vue\n<BaseRating :value=\"7.15\" :max=\"10\">\n  <template #filledIcon>\n    <TestIcon/>\n  </template>\n  <template #emptyIcon>\n    <TestIcon/>\n  </template>\n</BaseRating>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-rating.vue.js","sources":["../../../src/components/base-rating.vue"],"sourcesContent":["<template>\n  <span class=\"x-rating\" role=\"img\" :aria-label=\"ariaLabel\" data-test=\"rating\">\n    <div class=\"x-rating--empty\" data-test=\"rating-empty\">\n      <!--\n        @slot The content to render as empty icon\n      -->\n      <slot v-for=\"i in max\" name=\"empty-icon\">\n        <DefaultIcon :key=\"i\" class=\"x-rating__default-icon x-rating__default-icon--empty\" />\n      </slot>\n    </div>\n    <div\n      class=\"x-rating--filled\"\n      :style=\"{ width: calculateFilledWrapperWidth }\"\n      data-test=\"rating-filled\"\n    >\n      <!--\n        @slot The content to render as filled icon\n      -->\n      <slot v-for=\"i in max\" name=\"filled-icon\">\n        <DefaultIcon :key=\"i\" class=\"x-rating__default-icon x-rating__default-icon--filled\" />\n      </slot>\n    </div>\n  </span>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import StarIcon from './icons/star.vue';\n\n  /**\n   * Rating component. This component renders a set of elements filled based on the value passed as\n   * prop.\n   *\n   * @public\n   */\n  @Component({\n    components: {\n      DefaultIcon: StarIcon\n    }\n  })\n  export default class BaseRating extends Vue {\n    /**\n     * Numeric value used to calculates the width of the filled elements.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected value!: number;\n    /**\n     * Maximum number of elements to paint.\n     *\n     * @public\n     */\n    @Prop({ default: 5 })\n    protected max!: number;\n\n    /**\n     * Calculates the width of the filled elements wrapper.\n     *\n     * @returns The % of the wrapper width.\n     *\n     * @internal\n     */\n    protected get calculateFilledWrapperWidth(): string {\n      return this.value < 0 ? '0%' : `${(this.value * 100) / this.max}%`;\n    }\n\n    /**\n     * Creates the aria label for accessibility purpose.\n     *\n     * @returns The aria label.\n     *\n     * @internal\n     */\n    protected get ariaLabel(): string {\n      return `${this.value}/${this.max}`;\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-rating {\n    position: relative;\n    display: inline-block;\n\n    &--empty {\n      overflow: hidden;\n      display: flex;\n      flex-flow: row nowrap;\n      white-space: nowrap;\n    }\n\n    &--filled {\n      display: flex;\n      flex-flow: row nowrap;\n      white-space: nowrap;\n      position: absolute;\n      overflow: hidden;\n      top: 0;\n      left: 0;\n      height: 100%;\n    }\n\n    &__default-icon {\n      fill: currentColor;\n      stroke: currentColor;\n\n      &--empty {\n        fill: none;\n      }\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component receives a `value` as prop and renders a set of elements, which will be filled based\non this value.\n\n### Basic usage\n\n```vue\n<BaseRating :value=\"5.23\" />\n```\n\n### Customizing its contents\n\n```vue\n<BaseRating :value=\"7.15\" :max=\"10\">\n  <template #filled-icon>\n    <TestIcon/>\n  </template>\n  <template #empty-icon>\n    <TestIcon/>\n  </template>\n</BaseRating>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/filters/labels/base-rating-filter-label.vue.js

@@ -15,14 +15,14 @@ var __vue_render__ = function () {
     scopedSlots: _vm._u(
       [
         {
-          key: "filledIcon",
+          key: "filled-icon",
           fn: function () {
             return [_vm._t("rating-icon-filled")]
           },
           proxy: true,
         },
         {
-          key: "emptyIcon",
+          key: "empty-icon",
           fn: function () {
             return [_vm._t("rating-icon-empty")]
           },

package/js/components/filters/labels/base-rating-filter-label.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-rating-filter-label.vue.js","sources":["../../../../../src/components/filters/labels/base-rating-filter-label.vue"],"sourcesContent":["<template>\n  <BaseRating class=\"x-rating-filter-label\" data-test=\"rating-label\" :value=\"value\" :max=\"max\">\n    <template #filledIcon>\n      <!--\n       @slot Filled icon content\n     -->\n      <slot name=\"rating-icon-filled\" />\n    </template>\n    <template #emptyIcon>\n      <!--\n       @slot Empty icon content\n     -->\n      <slot name=\"rating-icon-empty\" />\n    </template>\n  </BaseRating>\n</template>\n\n<script lang=\"ts\">\n  import { BooleanFilter } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import BaseRating from '../../base-rating.vue';\n\n  /**\n   * Renders a label for a rating filter, allowing to override the elements used to paint\n   * the rating.\n   *\n   * @public\n   */\n  @Component({\n    components: {\n      BaseRating\n    }\n  })\n  export default class BaseRatingFilterLabel extends Vue {\n    /**\n     * The filter data to render.\n     *\n     * @public\n     * */\n    @Prop({ required: true })\n    public filter!: BooleanFilter;\n\n    /**\n     * Maximum number of elements to paint.\n     *\n     * @public\n     */\n    @Prop({ default: 5 })\n    protected max!: number;\n\n    /**\n     * Converts the label string into a number.\n     *\n     * @returns The label as number or 0 if it is not a valid number.\n     *\n     * @internal\n     * */\n    protected get value(): number {\n      const value = parseFloat(this.filter.label) ?? 0;\n      return Number.isNaN(value) ? 0 : value;\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nRenders a label for a rating filter, allowing to override the elements used to paint the rating. The\nfilter label must be a valid number string. For example: '3', '2.5', '0.25'\n\n### Basic usage\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" />\n```\n\n### Customizing color\n\nIts possible to change the default color directly with color CSS attribute. For more elaborated\nstyles it's possible to style the inner svg icons.\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" style=\"color: gold\" />\n```\n\n### Customizing its contents\n\nThe `max` prop can be used to set the max rating number. It will render as many icons as the this\n`max` value.\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" :max=\"max\" />\n```\n\nThe default icons can be changed using the `rating-icon-filled` and `rating-icon-empty` icons, to\nrepresent the filled empty and empty icon in the rating component.\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" :max=\"max\">\n  <template #rating-icon-filled>♥</template>\n  <template #rating-icon-empty>♡</template>\n</BaseRatingFilterLabel>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-rating-filter-label.vue.js","sources":["../../../../../src/components/filters/labels/base-rating-filter-label.vue"],"sourcesContent":["<template>\n  <BaseRating class=\"x-rating-filter-label\" data-test=\"rating-label\" :value=\"value\" :max=\"max\">\n    <template #filled-icon>\n      <!--\n       @slot Filled icon content\n     -->\n      <slot name=\"rating-icon-filled\" />\n    </template>\n    <template #empty-icon>\n      <!--\n       @slot Empty icon content\n     -->\n      <slot name=\"rating-icon-empty\" />\n    </template>\n  </BaseRating>\n</template>\n\n<script lang=\"ts\">\n  import { BooleanFilter } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import BaseRating from '../../base-rating.vue';\n\n  /**\n   * Renders a label for a rating filter, allowing to override the elements used to paint\n   * the rating.\n   *\n   * @public\n   */\n  @Component({\n    components: {\n      BaseRating\n    }\n  })\n  export default class BaseRatingFilterLabel extends Vue {\n    /**\n     * The filter data to render.\n     *\n     * @public\n     * */\n    @Prop({ required: true })\n    public filter!: BooleanFilter;\n\n    /**\n     * Maximum number of elements to paint.\n     *\n     * @public\n     */\n    @Prop({ default: 5 })\n    protected max!: number;\n\n    /**\n     * Converts the label string into a number.\n     *\n     * @returns The label as number or 0 if it is not a valid number.\n     *\n     * @internal\n     * */\n    protected get value(): number {\n      const value = parseFloat(this.filter.label) ?? 0;\n      return Number.isNaN(value) ? 0 : value;\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nRenders a label for a rating filter, allowing to override the elements used to paint the rating. The\nfilter label must be a valid number string. For example: '3', '2.5', '0.25'\n\n### Basic usage\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" />\n```\n\n### Customizing color\n\nIts possible to change the default color directly with color CSS attribute. For more elaborated\nstyles it's possible to style the inner svg icons.\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" style=\"color: gold\" />\n```\n\n### Customizing its contents\n\nThe `max` prop can be used to set the max rating number. It will render as many icons as the this\n`max` value.\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" :max=\"max\" />\n```\n\nThe default icons can be changed using the `rating-icon-filled` and `rating-icon-empty` icons, to\nrepresent the filled empty and empty icon in the rating component.\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" :max=\"max\">\n  <template #rating-icon-filled>♥</template>\n  <template #rating-icon-empty>♡</template>\n</BaseRatingFilterLabel>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/icons/arrow-down.vue.js

@@ -0,0 +1,61 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+import script from './arrow-down.vue_rollup-plugin-vue=script.js';
+
+/* script */
+var __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function (_h, _vm) {
+  var _c = _vm._c;
+  return _c(
+    "svg",
+    {
+      class: ["x-icon"].concat(_vm.data.staticClass, _vm.data.class),
+      attrs: {
+        viewBox: "0 0 16 16",
+        version: "1.1",
+        xmlns: "http://www.w3.org/2000/svg",
+        "xmlns:xlink": "http://www.w3.org/1999/xlink",
+      },
+    },
+    [
+      _c("g", { attrs: { fill: "none", "fill-rule": "evenodd" } }, [
+        _c("line", { attrs: { x1: "8", y1: "3", x2: "8", y2: "13" } }),
+        _vm._v(" "),
+        _c("polyline", { attrs: { points: "3 8 8 13 13 8" } }) ]) ]
+  )
+};
+var __vue_staticRenderFns__ = [];
+__vue_render__._withStripped = true;
+
+  /* style */
+  var __vue_inject_styles__ = undefined;
+  /* scoped */
+  var __vue_scope_id__ = undefined;
+  /* module identifier */
+  var __vue_module_identifier__ = undefined;
+  /* functional template */
+  var __vue_is_functional_template__ = true;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  var __vue_component__ = /*#__PURE__*/__vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
+//# sourceMappingURL=arrow-down.vue.js.map

package/js/components/icons/arrow-down.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow-down.vue.js","sources":["../../../../src/components/icons/arrow-down.vue"],"sourcesContent":["<template functional>\n  <svg\n    :class=\"['x-icon'].concat(data.staticClass, data.class)\"\n    viewBox=\"0 0 16 16\"\n    version=\"1.1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n  >\n    <g fill=\"none\" fill-rule=\"evenodd\">\n      <line x1=\"8\" y1=\"3\" x2=\"8\" y2=\"13\" />\n      <polyline points=\"3 8 8 13 13 8\" />\n    </g>\n  </svg>\n</template>\n\n<script lang=\"ts\">\n  export default {};\n</script>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/icons/arrow-down.vue_rollup-plugin-vue=script.js

@@ -0,0 +1,4 @@
+var script = {};
+
+export default script;
+//# sourceMappingURL=arrow-down.vue_rollup-plugin-vue=script.js.map

package/js/components/icons/arrow-down.vue_rollup-plugin-vue=script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow-down.vue_rollup-plugin-vue=script.js","sources":["../../../../src/components/icons/arrow-down.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nexport default {};\n"],"names":[],"mappings":"AAgBA,aAAe,EAAE;;;;"}

package/js/components/icons/{arrow.vue.js → arrow-left.vue.js}

@@ -1,5 +1,5 @@
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-import script from './arrow.vue_rollup-plugin-vue=script.js';
+import script from './arrow-left.vue_rollup-plugin-vue=script.js';
 
 /* script */
 var __vue_script__ = script;
@@ -58,4 +58,4 @@ __vue_render__._withStripped = true;
   );
 
 export default __vue_component__;
-//# sourceMappingURL=arrow.vue.js.map
+//# sourceMappingURL=arrow-left.vue.js.map

package/js/components/icons/arrow-left.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow-left.vue.js","sources":["../../../../src/components/icons/arrow-left.vue"],"sourcesContent":["<template functional>\n  <svg\n    :class=\"['x-icon'].concat(data.staticClass, data.class)\"\n    viewBox=\"0 0 16 16\"\n    version=\"1.1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n  >\n    <g fill=\"none\" fill-rule=\"evenodd\">\n      <line x1=\"13\" y1=\"8\" x2=\"3\" y2=\"8\" />\n      <polyline points=\"8 13 3 8 8 3\" />\n    </g>\n  </svg>\n</template>\n\n<script lang=\"ts\">\n  export default {};\n</script>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/icons/arrow-left.vue_rollup-plugin-vue=script.js

@@ -0,0 +1,4 @@
+var script = {};
+
+export default script;
+//# sourceMappingURL=arrow-left.vue_rollup-plugin-vue=script.js.map

package/js/components/icons/arrow-left.vue_rollup-plugin-vue=script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow-left.vue_rollup-plugin-vue=script.js","sources":["../../../../src/components/icons/arrow-left.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nexport default {};\n"],"names":[],"mappings":"AAgBA,aAAe,EAAE;;;;"}

package/js/components/icons/arrow-right.vue.js

@@ -0,0 +1,61 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+import script from './arrow-right.vue_rollup-plugin-vue=script.js';
+
+/* script */
+var __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function (_h, _vm) {
+  var _c = _vm._c;
+  return _c(
+    "svg",
+    {
+      class: ["x-icon"].concat(_vm.data.staticClass, _vm.data.class),
+      attrs: {
+        viewBox: "0 0 16 16",
+        version: "1.1",
+        xmlns: "http://www.w3.org/2000/svg",
+        "xmlns:xlink": "http://www.w3.org/1999/xlink",
+      },
+    },
+    [
+      _c("g", { attrs: { fill: "none", "fill-rule": "evenodd" } }, [
+        _c("line", { attrs: { x1: "13", y1: "8", x2: "3", y2: "8" } }),
+        _vm._v(" "),
+        _c("polyline", { attrs: { points: "8 13 13 8 8 3" } }) ]) ]
+  )
+};
+var __vue_staticRenderFns__ = [];
+__vue_render__._withStripped = true;
+
+  /* style */
+  var __vue_inject_styles__ = undefined;
+  /* scoped */
+  var __vue_scope_id__ = undefined;
+  /* module identifier */
+  var __vue_module_identifier__ = undefined;
+  /* functional template */
+  var __vue_is_functional_template__ = true;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  var __vue_component__ = /*#__PURE__*/__vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
+//# sourceMappingURL=arrow-right.vue.js.map

package/js/components/icons/arrow-right.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow-right.vue.js","sources":["../../../../src/components/icons/arrow-right.vue"],"sourcesContent":["<template functional>\n  <svg\n    :class=\"['x-icon'].concat(data.staticClass, data.class)\"\n    viewBox=\"0 0 16 16\"\n    version=\"1.1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n  >\n    <g fill=\"none\" fill-rule=\"evenodd\">\n      <line x1=\"13\" y1=\"8\" x2=\"3\" y2=\"8\" />\n      <polyline points=\"8 13 13 8 8 3\" />\n    </g>\n  </svg>\n</template>\n\n<script lang=\"ts\">\n  export default {};\n</script>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/icons/arrow-right.vue_rollup-plugin-vue=script.js

@@ -0,0 +1,4 @@
+var script = {};
+
+export default script;
+//# sourceMappingURL=arrow-right.vue_rollup-plugin-vue=script.js.map

package/js/components/icons/arrow-right.vue_rollup-plugin-vue=script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow-right.vue_rollup-plugin-vue=script.js","sources":["../../../../src/components/icons/arrow-right.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nexport default {};\n"],"names":[],"mappings":"AAgBA,aAAe,EAAE;;;;"}