@empathyco/x-components 3.0.0-alpha.21 → 3.0.0-alpha.210

package/js/components/result/base-result-previous-price.vue.js

@@ -1,11 +1,11 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-import script from './base-result-previous-price.vue_rollup-plugin-vue=script.js';
+import script from './base-result-previous-price.vue_rollup-plugin-vue_script.vue.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
 
 /* script */
-var __vue_script__ = script;
+const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -14,23 +14,23 @@ var __vue_render__ = function() {
         "div",
         {
           staticClass: "x-result-previous-price",
-          attrs: { "data-test": "result-previous-price" }
+          attrs: { "data-test": "result-previous-price" },
         },
         [
           _vm._t(
             "default",
-            function() {
+            function () {
               return [
                 _c("BaseCurrency", {
                   attrs: {
                     value: _vm.result.price.originalValue,
-                    format: _vm.format
-                  }
-                })
+                    format: _vm.format,
+                  },
+                }),
               ]
             },
             { result: _vm.result }
-          )
+          ),
         ],
         2
       )
@@ -40,13 +40,13 @@ var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
 
   /* style */
-  var __vue_inject_styles__ = undefined;
+  const __vue_inject_styles__ = undefined;
   /* scoped */
-  var __vue_scope_id__ = undefined;
+  const __vue_scope_id__ = undefined;
   /* module identifier */
-  var __vue_module_identifier__ = undefined;
+  const __vue_module_identifier__ = undefined;
   /* functional template */
-  var __vue_is_functional_template__ = false;
+  const __vue_is_functional_template__ = false;
   /* style inject */
   
   /* style inject SSR */
@@ -55,7 +55,7 @@ __vue_render__._withStripped = true;
   
 
   
-  var __vue_component__ = /*#__PURE__*/__vue_normalize__(
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
     { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
     __vue_inject_styles__,
     __vue_script__,
@@ -68,5 +68,5 @@ __vue_render__._withStripped = true;
     undefined
   );
 
-export default __vue_component__;
+export { __vue_component__ as default };
 //# sourceMappingURL=base-result-previous-price.vue.js.map

package/js/components/result/base-result-previous-price.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-result-previous-price.vue.js","sources":["../../../../src/components/result/base-result-previous-price.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"result.price.hasDiscount\"\n    class=\"x-result-previous-price\"\n    data-test=\"result-previous-price\"\n  >\n    <!--\n      @slot Base currency item\n         @binding {result} result - Result data\n    -->\n    <slot :result=\"result\">\n      <BaseCurrency :value=\"result.price.originalValue\" :format=\"format\" />\n    </slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { Result } from '@empathyco/x-types';\n  import { Component, Prop } from 'vue-property-decorator';\n  import Vue from 'vue';\n  import BaseCurrency from '../currency/base-currency.vue';\n\n  /**\n   * Component that renders the {@link @empathyco/x-types#Result | result} previous price.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseCurrency }\n  })\n  export default class BaseResultPreviousPrice extends Vue {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result | result} information.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected result!: Result;\n\n    /**\n     * Format or mask to be defined as string.\n     * - Use 'i' to define integer numbers.\n     * - Use 'd' to define decimal numbers. You can define the length of the decimal part. If the\n     * doesn't include decimals, it is filled with zeros until reach the length defined with 'd's.\n     * - Integer separator must be defined between the 3rd and the 4th integer 'i' of a group.\n     * - Decimal separator must be defined between the last 'i' and the first 'd'. It can be more\n     * than one character.\n     * - Set whatever you need around the integers and decimals marks.\n     * - Default mask: 'i.iii,dd' which returns '1.345,67'.\n     *\n     * @remarks The number of 'd', which is the maximum decimal length, MUST match with the length\n     * of decimals provided from the adapter. Otherwise, when the component truncate the decimal\n     * part, delete significant digits.\n     *\n     * @public\n     */\n    @Prop({ default: 'i.iii,dd' })\n    protected format!: string;\n  }\n</script>\n\n<docs>\n  #Examples\n\n  ## Basic example\n\n  This component shows the previous price formatted if it has discount. The component has two\n  optional props. `format` to select the currency format to be applied.\n\n  ```vue\n  <BaseResultPreviousPrice\n    :value=\"result\"\n    :format=\"'i.iii,ddd €'\"\n  />\n  ```\n  ## Overriding default slot\n  ```vue\n  <BaseResultPreviousPrice :result=\"result\">\n    <span class=\"custom-base-result-previous-price\">{{ result.price.originalValue }}</span>\n  </BaseResultPreviousPrice>\n  ```\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-result-previous-price.vue.js","sources":["../../../../src/components/result/base-result-previous-price.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"result.price.hasDiscount\"\n    class=\"x-result-previous-price\"\n    data-test=\"result-previous-price\"\n  >\n    <!--\n      @slot Base currency item\n         @binding {result} result - Result data\n    -->\n    <slot :result=\"result\">\n      <BaseCurrency :value=\"result.price.originalValue\" :format=\"format\" />\n    </slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { Result } from '@empathyco/x-types';\n  import { Component, Prop } from 'vue-property-decorator';\n  import Vue from 'vue';\n  import BaseCurrency from '../currency/base-currency.vue';\n\n  /**\n   * Component that renders the {@link @empathyco/x-types#Result | result} previous price.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseCurrency }\n  })\n  export default class BaseResultPreviousPrice extends Vue {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result | result} information.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected result!: Result;\n\n    /**\n     * Format or mask to be defined as string.\n     * - Use 'i' to define integer numbers.\n     * - Use 'd' to define decimal numbers. You can define the length of the decimal part. If the\n     * doesn't include decimals, it is filled with zeros until reach the length defined with 'd's.\n     * - Integer separator must be defined between the 3rd and the 4th integer 'i' of a group.\n     * - Decimal separator must be defined between the last 'i' and the first 'd'. It can be more\n     * than one character.\n     * - Set whatever you need around the integers and decimals marks.\n     *\n     * @remarks The number of 'd', which is the maximum decimal length, MUST match with the length\n     * of decimals provided from the adapter. Otherwise, when the component truncate the decimal\n     * part, delete significant digits.\n     *\n     * @public\n     */\n    @Prop()\n    protected format?: string;\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThis component shows the previous price formatted if it has discount. The component has two optional\nprops. `format` to select the currency format to be applied.\n\n```vue\n<template>\n  <BaseResultPreviousPrice :result=\"result\" :format=\"'i.iii,ddd €'\" />\n</template>\n\n<script>\n  import { BaseResultPreviousPrice } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseResultPreviousPriceDemo',\n    components: {\n      BaseResultPreviousPrice\n    }\n  };\n</script>\n```\n\n### Overriding default slot\n\n```vue\n<template>\n  <BaseResultPreviousPrice :result=\"result\">\n    <span class=\"custom-base-result-previous-price\">{{ result.price.originalValue }}</span>\n  </BaseResultPreviousPrice>\n</template>\n\n<script>\n  import { BaseResultPreviousPrice } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseResultPreviousPriceDemo',\n    components: {\n      BaseResultPreviousPrice\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/result/base-result-previous-price.vue_rollup-plugin-vue_script.vue.js

@@ -0,0 +1,27 @@
+import { __decorate } from 'tslib';
+import { Prop, Component } from 'vue-property-decorator';
+import Vue from 'vue';
+import __vue_component__ from '../currency/base-currency.vue.js';
+
+/**
+ * Component that renders the {@link @empathyco/x-types#Result | result} previous price.
+ *
+ * @public
+ */
+let BaseResultPreviousPrice = class BaseResultPreviousPrice extends Vue {
+};
+__decorate([
+    Prop({ required: true })
+], BaseResultPreviousPrice.prototype, "result", void 0);
+__decorate([
+    Prop()
+], BaseResultPreviousPrice.prototype, "format", void 0);
+BaseResultPreviousPrice = __decorate([
+    Component({
+        components: { BaseCurrency: __vue_component__ }
+    })
+], BaseResultPreviousPrice);
+var script = BaseResultPreviousPrice;
+
+export { script as default };
+//# sourceMappingURL=base-result-previous-price.vue_rollup-plugin-vue_script.vue.js.map

package/js/components/result/base-result-previous-price.vue_rollup-plugin-vue_script.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-result-previous-price.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/result/base-result-previous-price.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { Result } from '@empathyco/x-types';\nimport { Component, Prop } from 'vue-property-decorator';\nimport Vue from 'vue';\nimport BaseCurrency from '../currency/base-currency.vue';\n\n/**\n * Component that renders the {@link @empathyco/x-types#Result | result} previous price.\n *\n * @public\n */\n@Component({\n  components: { BaseCurrency }\n})\nexport default class BaseResultPreviousPrice extends Vue {\n  /**\n   * (Required) The {@link @empathyco/x-types#Result | result} information.\n   *\n   * @public\n   */\n  @Prop({ required: true })\n  protected result!: Result;\n\n  /**\n   * Format or mask to be defined as string.\n   * - Use 'i' to define integer numbers.\n   * - Use 'd' to define decimal numbers. You can define the length of the decimal part. If the\n   * doesn't include decimals, it is filled with zeros until reach the length defined with 'd's.\n   * - Integer separator must be defined between the 3rd and the 4th integer 'i' of a group.\n   * - Decimal separator must be defined between the last 'i' and the first 'd'. It can be more\n   * than one character.\n   * - Set whatever you need around the integers and decimals marks.\n   *\n   * @remarks The number of 'd', which is the maximum decimal length, MUST match with the length\n   * of decimals provided from the adapter. Otherwise, when the component truncate the decimal\n   * part, delete significant digits.\n   *\n   * @public\n   */\n  @Prop()\n  protected format?: string;\n}\n"],"names":["BaseCurrency"],"mappings":";;;;;AAsBA;;;;;AAQA,IAAqB,uBAAuB,GAA5C,MAAqB,uBAAwB,SAAQ,GAAG;CA2BvD,CAAA;AApBC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;uDACC;AAmB1B;IADC,IAAI,EAAE;uDACmB;AA1BP,uBAAuB;IAH3C,SAAS,CAAC;QACT,UAAU,EAAE,gBAAEA,iBAAY,EAAE;KAC7B,CAAC;GACmB,uBAAuB,CA2B3C;aA3BoB,uBAAuB;;;;"}

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

@@ -0,0 +1,99 @@
+import script from './base-result-rating.vue_rollup-plugin-vue_script.vue.js';
+import './base-result-rating.vue_rollup-plugin-vue_styles.0.vue.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+
+/* script */
+const __vue_script__ = script;
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _vm.result.rating && _vm.result.rating.value
+    ? _c(
+        _vm.link ? "a" : "div",
+        {
+          tag: "component",
+          staticClass: "x-result-rating",
+          attrs: { href: _vm.link, "data-test": "result-rating" },
+          on: { click: _vm.emitClickedEvent },
+        },
+        [
+          _vm._t(
+            "default",
+            function () {
+              return [
+                _c(
+                  "BaseRating",
+                  _vm._b(
+                    {
+                      attrs: { value: _vm.result.rating.value },
+                      scopedSlots: _vm._u(
+                        [
+                          {
+                            key: "empty-icon",
+                            fn: function () {
+                              return [_vm._t("empty-icon")]
+                            },
+                            proxy: true,
+                          },
+                          {
+                            key: "filled-icon",
+                            fn: function () {
+                              return [_vm._t("filled-icon")]
+                            },
+                            proxy: true,
+                          },
+                        ],
+                        null,
+                        true
+                      ),
+                    },
+                    "BaseRating",
+                    _vm.$attrs,
+                    false
+                  )
+                ),
+              ]
+            },
+            { rating: _vm.result.rating.value, result: _vm.result }
+          ),
+        ],
+        2
+      )
+    : _vm._e()
+};
+var __vue_staticRenderFns__ = [];
+__vue_render__._withStripped = true;
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = "data-v-ae12fb70";
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export { __vue_component__ as default };
+//# sourceMappingURL=base-result-rating.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"base-result-rating.vue.js","sources":["../../../../src/components/result/base-result-rating.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"link ? 'a' : 'div'\"\n    v-if=\"result.rating && result.rating.value\"\n    @click=\"emitClickedEvent\"\n    :href=\"link\"\n    class=\"x-result-rating\"\n    data-test=\"result-rating\"\n  >\n    <!--\n      @slot To override the whole content\n    -->\n    <slot :rating=\"result.rating.value\" :result=\"result\">\n      <BaseRating :value=\"result.rating.value\" v-bind=\"$attrs\">\n        <template #empty-icon>\n          <!--\n            @slot The content to render as empty icon\n          -->\n          <slot name=\"empty-icon\" />\n        </template>\n\n        <template #filled-icon>\n          <!--\n            @slot The content to render as filled icon\n          -->\n          <slot name=\"filled-icon\" />\n        </template>\n      </BaseRating>\n    </slot>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { Result } from '@empathyco/x-types';\n  import 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  })\n  export 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</script>\n\n<style scoped lang=\"scss\">\n  .x-result-rating {\n    color: inherit;\n    text-decoration: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedAResultRating`](./../../api/x-components.searchboxxevents.md)\n\n## See it in action\n\nHere you have a basic example of how the result rating is rendered.\n\n```vue\n<template>\n  <BaseResultRating :result=\"result\" />\n</template>\n\n<script>\n  import { BaseResultRating } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultRatingDemo',\n    components: {\n      BaseResultRating\n    },\n    data() {\n      return {\n        result: {\n          id: 1,\n          name: 'Result with rating',\n          rating: { value: 3 }\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the result rating has been configured to 6 as maximum value using the prop `max`.\n\n```vue\n<template>\n  <BaseResultRating :result=\"result\" :max=\"6\" />\n</template>\n\n<script>\n  import { BaseResultRating } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultRatingDemo',\n    components: {\n      BaseResultRating\n    },\n    data() {\n      return {\n        result: {\n          id: 1,\n          name: 'Result with rating',\n          rating: { value: 3 }\n        }\n      };\n    }\n  };\n</script>\n```\n\nIn this example, the result rating has been configured with a link to redirect when is clicked.\n\n```vue\n<template>\n  <BaseResultRating :result=\"result\" link=\"https://empathy.co/\" />\n</template>\n\n<script>\n  import { BaseResultRating } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultRatingDemo',\n    components: {\n      BaseResultRating\n    },\n    data() {\n      return {\n        result: {\n          id: 1,\n          name: 'Result with rating',\n          rating: { value: 3 }\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, a message has been added to be shown when the result rating is clicked.\n\n```vue\n<template>\n  <BaseResultRating :result=\"result\" @UserClickedAResultRating=\"logUserClickedRating\" />\n</template>\n\n<script>\n  import { BaseResultRating } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultRatingDemo',\n    components: {\n      BaseResultRating\n    },\n    data() {\n      return {\n        result: {\n          id: 1,\n          name: 'Result with rating',\n          rating: { value: 3 }\n        }\n      };\n    },\n    methods: {\n      logUserClickedRating(result) {\n        console.log('User clickedRating of this result:', result);\n      }\n    }\n  };\n</script>\n```\n\n## Extending the component\n\nThe rendered icons for rating can be configured through slots. Keep in mind that the icons for both\nstates (filled and empty), must have the same size make component work properly.\n\n```vue\n<template>\n  <BaseResultRating :result=\"result\">\n    <template #filled-icon>❤️</template>\n    <template #empty-icon>🤍</template>\n  </BaseResultRating>\n</template>\n\n<script>\n  import { BaseResultRating } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultRatingDemo',\n    components: {\n      BaseResultRating\n    },\n    data() {\n      return {\n        result: {\n          id: 1,\n          name: 'Result with rating',\n          rating: { value: 3 }\n        }\n      };\n    }\n  };\n</script>\n```\n\nIt is possible to override all the content of the component to show your own rating but keeping the\nlink and event behaviour:\n\n```vue\n<template>\n  <BaseResultRating :result=\"result\" #default=\"{ rating, result }\">\n    <span v-for=\"star in rating\">⭐️</span>\n    <span>{{ result.name }}</span>\n  </BaseResultRating>\n</template>\n\n<script>\n  import { BaseResultRating } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultRatingDemo',\n    components: {\n      BaseResultRating\n    },\n    data() {\n      return {\n        result: {\n          id: 1,\n          name: 'Result with rating',\n          rating: { value: 3 }\n        }\n      };\n    }\n  };\n</script>\n```\n\nEven it is possible to reuse our rating component:\n\n```vue\n<template>\n  <BaseResultRating :result=\"result\" #default=\"{ rating, result }\">\n    <BaseRating :value=\"rating\" />\n    <span>{{ result.name }}</span>\n  </BaseResultRating>\n</template>\n\n<script>\n  import { BaseResultRating, BaseRating } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultRatingDemo',\n    components: {\n      BaseResultRating,\n      BaseRating\n    },\n    data() {\n      return {\n        result: {\n          id: 1,\n          name: 'Result with rating',\n          rating: { value: 3 }\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,38 @@
+import { __decorate } from 'tslib';
+import Vue from 'vue';
+import { Prop, Component } from 'vue-property-decorator';
+import __vue_component__ from '../base-rating.vue.js';
+
+/**
+ * This component renders a {@link BaseRating} for a result passed as prop.
+ *
+ * @public
+ */
+let BaseResultRating = class BaseResultRating extends Vue {
+    /**
+     * Emits the `UserClickedAResultRating` event when user clicks this component, with the
+     * {@link @empathyco/x-types#Result | Result} as payload.
+     *
+     * @internal
+     */
+    emitClickedEvent() {
+        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: __vue_component__
+        }
+    })
+], BaseResultRating);
+var script = BaseResultRating;
+
+export { script as default };
+//# sourceMappingURL=base-result-rating.vue_rollup-plugin-vue_script.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"base-result-rating.vue_rollup-plugin-vue_script.vue.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":["BaseRating"],"mappings":";;;;;AAsCA;;;;;AAUA,IAAqB,gBAAgB,GAArC,MAAqB,gBAAiB,SAAQ,GAAG;;;;;;;IAuBrC,gBAAgB;QACxB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,0BAA0B,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,GAAkB,EAAE,CAAC,CAAC;KAC5F;CACF,CAAA;AAnBC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;gDACC;AAQ1B;IADC,IAAI,EAAE;8CACiB;AAfL,gBAAgB;IALpC,SAAS,CAAC;QACT,UAAU,EAAE;wBACVA,iBAAU;SACX;KACF,CAAC;GACmB,gBAAgB,CA0BpC;aA1BoB,gBAAgB;;;;"}

package/js/components/result/base-result-rating.vue_rollup-plugin-vue_styles.0.vue.js

@@ -0,0 +1,16 @@
+import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
+
+var css = ".x-result-rating[data-v-ae12fb70] {\n  color: inherit;\n  text-decoration: none;\n}";
+           const isBrowser = /*#__PURE__*/ (function () {
+             return (
+                Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==
+                '[object process]'
+             );
+           })();
+           const useBrowserInjector =
+             (typeof STRIP_SSR_INJECTOR !== 'undefined' && STRIP_SSR_INJECTOR) || isBrowser;
+           const injector = useBrowserInjector ? createInjector({}) : createInjectorSSR({});
+           injector('/__w/x/x/packages/x-components/src/components/result/base-result-rating.vue?rollup-plugin-vue=styles.0.css',{source:css});
+
+export { css, css as default };
+//# sourceMappingURL=base-result-rating.vue_rollup-plugin-vue_styles.0.vue.js.map

package/js/components/result/base-result-rating.vue_rollup-plugin-vue_styles.0.vue.js.map

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

package/js/components/result/result-variant-selector.vue.js

@@ -0,0 +1,137 @@
+import script from './result-variant-selector.vue_rollup-plugin-vue_script.vue.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _vm.result && _vm.variants
+    ? _c(
+        "NoElement",
+        [
+          _vm._t(
+            "default",
+            function () {
+              return [
+                _c(
+                  "ul",
+                  {
+                    staticClass: "x-list x-result-variant-selector__list",
+                    attrs: { "data-test": "variants-list" },
+                  },
+                  _vm._l(_vm.variants, function (variant, index) {
+                    return _c(
+                      "li",
+                      {
+                        key: index,
+                        staticClass: "x-result-variant-selector__item",
+                        class: {
+                          "x-result-variant-selector__item--is-selected":
+                            _vm.variantIsSelected(variant),
+                        },
+                        attrs: { "data-test": "variant-item" },
+                      },
+                      [
+                        _vm._t(
+                          "variant",
+                          function () {
+                            return [
+                              _c(
+                                "button",
+                                {
+                                  staticClass: "x-button",
+                                  attrs: { "data-test": "variant-button" },
+                                  on: {
+                                    click: function ($event) {
+                                      return _vm.selectVariant(variant)
+                                    },
+                                  },
+                                },
+                                [
+                                  _vm._t(
+                                    "variant-content",
+                                    function () {
+                                      return [
+                                        _vm._v(
+                                          "\n              " +
+                                            _vm._s(variant) +
+                                            "\n            "
+                                        ),
+                                      ]
+                                    },
+                                    {
+                                      variant: variant,
+                                      isSelected:
+                                        _vm.variantIsSelected(variant),
+                                    }
+                                  ),
+                                ],
+                                2
+                              ),
+                            ]
+                          },
+                          {
+                            variant: variant,
+                            isSelected: _vm.variantIsSelected(variant),
+                            selectVariant: function () {
+                              return _vm.selectVariant(variant)
+                            },
+                          }
+                        ),
+                      ],
+                      2
+                    )
+                  }),
+                  0
+                ),
+              ]
+            },
+            {
+              variants: _vm.variants,
+              selectedVariant: _vm.selectedVariant,
+              selectVariant: _vm.selectVariant,
+            }
+          ),
+        ],
+        2
+      )
+    : _vm._e()
+};
+var __vue_staticRenderFns__ = [];
+__vue_render__._withStripped = true;
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export { __vue_component__ as default };
+//# sourceMappingURL=result-variant-selector.vue.js.map

package/js/components/result/result-variant-selector.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"result-variant-selector.vue.js","sources":["../../../../src/components/result/result-variant-selector.vue"],"sourcesContent":["<template>\n  <NoElement v-if=\"result && variants\">\n    <!--\n      @slot Variants list\n        @binding {ResultVariant[]} variants - Array containing the available variants\n        @binding {ResultVariant | undefined} selectedVariant - The selected variant\n        @binding {(variant: ResultVariant) => void} selectVariant - Callback to select a variant\n    -->\n    <slot :variants=\"variants\" :selectedVariant=\"selectedVariant\" :selectVariant=\"selectVariant\">\n      <ul class=\"x-list x-result-variant-selector__list\" data-test=\"variants-list\">\n        <li\n          v-for=\"(variant, index) in variants\"\n          :key=\"index\"\n          class=\"x-result-variant-selector__item\"\n          :class=\"{ 'x-result-variant-selector__item--is-selected': variantIsSelected(variant) }\"\n          data-test=\"variant-item\"\n        >\n          <!--\n            @slot Variant item\n              @binding {ResultVariant} variant - The variant item\n              @binding {boolean} isSelected - Indicates if the variant is selected\n              @binding {() => void} selectVariant - Callback to select the variant\n          -->\n          <slot\n            name=\"variant\"\n            :variant=\"variant\"\n            :isSelected=\"variantIsSelected(variant)\"\n            :selectVariant=\"() => selectVariant(variant)\"\n          >\n            <button @click=\"selectVariant(variant)\" data-test=\"variant-button\" class=\"x-button\">\n              <!--\n                @slot Variant content\n                  @binding {ResultVariant} variant - The variant item\n                  @binding {boolean} isSelected - Indicates if the variant is selected\n              -->\n              <slot\n                name=\"variant-content\"\n                :variant=\"variant\"\n                :isSelected=\"variantIsSelected(variant)\"\n              >\n                {{ variant }}\n              </slot>\n            </button>\n          </slot>\n        </li>\n      </ul>\n    </slot>\n  </NoElement>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { Result, ResultVariant } from '@empathyco/x-types';\n  import { NoElement } from '../no-element';\n  import { XInject } from '../decorators/injection.decorators';\n  import {\n    RESULT_WITH_VARIANTS_KEY,\n    SELECTED_VARIANTS_KEY,\n    SELECT_RESULT_VARIANT_KEY\n  } from '../decorators/injection.consts';\n\n  /**\n   * Component to show and select the available variants of a product for a given nest level.\n   * TODO: Add logger warning on mount when result is not injected.\n   *\n   * @public\n   */\n  @Component({\n    components: {\n      NoElement\n    }\n  })\n  export default class ResultVariantSelector extends Vue {\n    /**\n     * Callback to be called when a variant is selected.\n     *\n     * @public\n     */\n    @XInject(SELECT_RESULT_VARIANT_KEY)\n    public selectResultVariant!: (variant: ResultVariant, level?: number) => void;\n\n    /**\n     * The original result, used to retrieve the available variants for the level.\n     *\n     * @public\n     */\n    @XInject(RESULT_WITH_VARIANTS_KEY)\n    public result!: Result;\n\n    /**\n     * Array containing the selected variants.\n     *\n     * @public\n     */\n    @XInject(SELECTED_VARIANTS_KEY)\n    public selectedVariants!: ResultVariant[];\n\n    /**\n     * The nest level of the variants to be rendered.\n     *\n     * @public\n     */\n    @Prop({\n      default: 0\n    })\n    public level!: number;\n\n    /**\n     * It retrieves the available variants from the result.\n     *\n     * @returns - The variants of the result for the current level.\n     * @internal\n     */\n    protected get variants(): ResultVariant[] | undefined {\n      if (this.level === 0) {\n        return this.result.variants;\n      }\n      return this.selectedVariants[this.level - 1]?.variants;\n    }\n\n    /**\n     * Gets the selected variant of the current level.\n     *\n     * @returns - The selected variant.\n     * @internal\n     */\n    protected get selectedVariant(): ResultVariant | undefined {\n      return this.variants?.find(variant => variant === this.selectedVariants[this.level]);\n    }\n\n    /**\n     * Calls the provided method to select a variant.\n     *\n     * @param variant - Variant to select.\n     * @internal\n     */\n    protected selectVariant(variant: ResultVariant): void {\n      this.selectResultVariant(variant, this.level);\n    }\n\n    /**\n     * Checks if a variant is selected.\n     *\n     * @param variant - Variant to check.\n     * @returns True if the variant is selected, false if not.\n     * @internal\n     */\n    protected variantIsSelected(variant: ResultVariant): boolean {\n      return this.selectedVariant === variant;\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nHere you have a basic example of how the `ResultVariantSelector` component is rendered.\n\nTake into account that this component **must** be a child of a `ResultVariantsProvider` component.\n\nAlso, the component is intended to be used overwriting the content with the slots.\n\nBy default it will render a list of buttons containing the available variants.\n\nThis component only has a required `level` prop, that indicates the level of the variants to be\nrendered.\n\n```vue\n<template>\n  <ResultVariantsProvider :result=\"result\" #default=\"{ result }\">\n    <p>Result name: {{ result.name }}</p>\n\n    <h1>Select color</h1>\n    <ResultVariantSelector :level=\"0\" #variant=\"{ variant, selectVariant }\" />\n\n    <h1>Select size</h1>\n    <ResultVariantSelector :level=\"1\" #variant=\"{ variant, selectVariant }\" />\n  </ResultVariantsProvider>\n</template>\n\n<script>\n  import { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultVariantSelectorDemo',\n    components: {\n      ResultVariantsProvider,\n      ResultVariantSelector\n    },\n    data() {\n      return {\n        result: {\n          id: 'jacket',\n          modelName: 'Result',\n          type: 'Product',\n          isWishlisted: false,\n          identifier: { value: 'jacket' },\n          images: [],\n          name: 'jacket',\n          price: { hasDiscount: false, originalValue: 10, value: 10 },\n          url: '/products/jacket',\n          variants: [\n            {\n              name: 'red',\n              variants: [\n                {\n                  name: 'red XL'\n                },\n                {\n                  name: 'red L'\n                }\n              ]\n            },\n            {\n              name: 'blue',\n              variants: [\n                {\n                  name: 'blue S'\n                },\n                {\n                  name: 'blue M'\n                },\n                {\n                  name: 'blue L'\n                }\n              ]\n            }\n          ]\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with the default slot\n\nIn this example the default slot is used to customize the list.\n\n```vue\n<template>\n  <ResultVariantsProvider :result=\"result\" #default=\"{ result }\">\n    <p>Result name: {{ result.name }}</p>\n\n    <ResultVariantSelector :level=\"0\" #default=\"{ variants, selectedVariant, selectVariant }\">\n      <div>\n        <p v-if=\"selectedVariant\">Selected variant: {{ selectedVariant.name }}</p>\n        <ul class=\"x-list x-list--horizontal\">\n          <li v-for=\"(variant, index) in variants\" :key=\"index\">\n            <button @click=\"selectVariant(variant)\">{{ variant.name }}</button>\n          </li>\n        </ul>\n      </div>\n    </ResultVariantSelector>\n  </ResultVariantsProvider>\n</template>\n\n<script>\n  import { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultVariantSelectorDemo',\n    components: {\n      ResultVariantsProvider,\n      ResultVariantSelector\n    },\n    data() {\n      return {\n        result: {\n          id: 'jacket',\n          modelName: 'Result',\n          type: 'Product',\n          isWishlisted: false,\n          identifier: { value: 'jacket' },\n          images: [],\n          name: 'jacket',\n          price: { hasDiscount: false, originalValue: 10, value: 10 },\n          url: '/products/jacket',\n          variants: [\n            {\n              name: 'red'\n            },\n            {\n              name: 'blue'\n            }\n          ]\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with variant-slot\n\nIn this example the variant-slot is used to customize the variant item.\n\nThe variant will be rendered inside a list.\n\n```vue\n<template>\n  <ResultVariantsProvider :result=\"result\" #default=\"{ result }\">\n    <p>Result name: {{ result.name }}</p>\n\n    <ResultVariantSelector :level=\"0\" #variant=\"{ variant, isSelected, selectVariant }\">\n      <div>\n        <button @click=\"selectVariant\">\n          {{ variant.name }}\n          <span v-if=\"isSelected\">SELECTED!</span>\n        </button>\n      </div>\n    </ResultVariantSelector>\n  </ResultVariantsProvider>\n</template>\n\n<script>\n  import { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultVariantSelectorDemo',\n    components: {\n      ResultVariantsProvider,\n      ResultVariantSelector\n    },\n    data() {\n      return {\n        result: {\n          id: 'jacket',\n          modelName: 'Result',\n          type: 'Product',\n          isWishlisted: false,\n          identifier: { value: 'jacket' },\n          images: [],\n          name: 'jacket',\n          price: { hasDiscount: false, originalValue: 10, value: 10 },\n          url: '/products/jacket',\n          variants: [\n            {\n              name: 'red'\n            },\n            {\n              name: 'blue'\n            }\n          ]\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with variant-content slot\n\nIn this example the variant-content slot is used to customize the content of the default variant\nbutton.\n\n```vue\n<template>\n  <ResultVariantsProvider :result=\"result\" #default=\"{ result }\">\n    <p>Result name: {{ result.name }}</p>\n\n    <ResultVariantSelector #variant-content=\"{ variant, isSelected }\">\n      <div>\n        {{ variant.name }}\n        <span v-if=\"isSelected\">SELECTED!</span>\n      </div>\n    </ResultVariantSelector>\n  </ResultVariantsProvider>\n</template>\n\n<script>\n  import { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultVariantSelectorDemo',\n    components: {\n      ResultVariantsProvider,\n      ResultVariantSelector\n    },\n    data() {\n      return {\n        result: {\n          id: 'jacket',\n          modelName: 'Result',\n          type: 'Product',\n          isWishlisted: false,\n          identifier: { value: 'jacket' },\n          images: [],\n          name: 'jacket',\n          price: { hasDiscount: false, originalValue: 10, value: 10 },\n          url: '/products/jacket',\n          variants: [\n            {\n              name: 'red'\n            },\n            {\n              name: 'blue'\n            }\n          ]\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/result/result-variant-selector.vue_rollup-plugin-vue_script.vue.js

@@ -0,0 +1,80 @@
+import { __decorate } from 'tslib';
+import Vue from 'vue';
+import { Prop, Component } from 'vue-property-decorator';
+import { NoElement } from '../no-element.js';
+import { XInject } from '../decorators/injection.decorators.js';
+import { SELECT_RESULT_VARIANT_KEY, RESULT_WITH_VARIANTS_KEY, SELECTED_VARIANTS_KEY } from '../decorators/injection.consts.js';
+
+/**
+ * Component to show and select the available variants of a product for a given nest level.
+ * TODO: Add logger warning on mount when result is not injected.
+ *
+ * @public
+ */
+let ResultVariantSelector = class ResultVariantSelector extends Vue {
+    /**
+     * It retrieves the available variants from the result.
+     *
+     * @returns - The variants of the result for the current level.
+     * @internal
+     */
+    get variants() {
+        if (this.level === 0) {
+            return this.result.variants;
+        }
+        return this.selectedVariants[this.level - 1]?.variants;
+    }
+    /**
+     * Gets the selected variant of the current level.
+     *
+     * @returns - The selected variant.
+     * @internal
+     */
+    get selectedVariant() {
+        return this.variants?.find(variant => variant === this.selectedVariants[this.level]);
+    }
+    /**
+     * Calls the provided method to select a variant.
+     *
+     * @param variant - Variant to select.
+     * @internal
+     */
+    selectVariant(variant) {
+        this.selectResultVariant(variant, this.level);
+    }
+    /**
+     * Checks if a variant is selected.
+     *
+     * @param variant - Variant to check.
+     * @returns True if the variant is selected, false if not.
+     * @internal
+     */
+    variantIsSelected(variant) {
+        return this.selectedVariant === variant;
+    }
+};
+__decorate([
+    XInject(SELECT_RESULT_VARIANT_KEY)
+], ResultVariantSelector.prototype, "selectResultVariant", void 0);
+__decorate([
+    XInject(RESULT_WITH_VARIANTS_KEY)
+], ResultVariantSelector.prototype, "result", void 0);
+__decorate([
+    XInject(SELECTED_VARIANTS_KEY)
+], ResultVariantSelector.prototype, "selectedVariants", void 0);
+__decorate([
+    Prop({
+        default: 0
+    })
+], ResultVariantSelector.prototype, "level", void 0);
+ResultVariantSelector = __decorate([
+    Component({
+        components: {
+            NoElement
+        }
+    })
+], ResultVariantSelector);
+var script = ResultVariantSelector;
+
+export { script as default };
+//# sourceMappingURL=result-variant-selector.vue_rollup-plugin-vue_script.vue.js.map

package/js/components/result/result-variant-selector.vue_rollup-plugin-vue_script.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"result-variant-selector.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/result/result-variant-selector.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\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, ResultVariant } from '@empathyco/x-types';\nimport { NoElement } from '../no-element';\nimport { XInject } from '../decorators/injection.decorators';\nimport {\n  RESULT_WITH_VARIANTS_KEY,\n  SELECTED_VARIANTS_KEY,\n  SELECT_RESULT_VARIANT_KEY\n} from '../decorators/injection.consts';\n\n/**\n * Component to show and select the available variants of a product for a given nest level.\n * TODO: Add logger warning on mount when result is not injected.\n *\n * @public\n */\n@Component({\n  components: {\n    NoElement\n  }\n})\nexport default class ResultVariantSelector extends Vue {\n  /**\n   * Callback to be called when a variant is selected.\n   *\n   * @public\n   */\n  @XInject(SELECT_RESULT_VARIANT_KEY)\n  public selectResultVariant!: (variant: ResultVariant, level?: number) => void;\n\n  /**\n   * The original result, used to retrieve the available variants for the level.\n   *\n   * @public\n   */\n  @XInject(RESULT_WITH_VARIANTS_KEY)\n  public result!: Result;\n\n  /**\n   * Array containing the selected variants.\n   *\n   * @public\n   */\n  @XInject(SELECTED_VARIANTS_KEY)\n  public selectedVariants!: ResultVariant[];\n\n  /**\n   * The nest level of the variants to be rendered.\n   *\n   * @public\n   */\n  @Prop({\n    default: 0\n  })\n  public level!: number;\n\n  /**\n   * It retrieves the available variants from the result.\n   *\n   * @returns - The variants of the result for the current level.\n   * @internal\n   */\n  protected get variants(): ResultVariant[] | undefined {\n    if (this.level === 0) {\n      return this.result.variants;\n    }\n    return this.selectedVariants[this.level - 1]?.variants;\n  }\n\n  /**\n   * Gets the selected variant of the current level.\n   *\n   * @returns - The selected variant.\n   * @internal\n   */\n  protected get selectedVariant(): ResultVariant | undefined {\n    return this.variants?.find(variant => variant === this.selectedVariants[this.level]);\n  }\n\n  /**\n   * Calls the provided method to select a variant.\n   *\n   * @param variant - Variant to select.\n   * @internal\n   */\n  protected selectVariant(variant: ResultVariant): void {\n    this.selectResultVariant(variant, this.level);\n  }\n\n  /**\n   * Checks if a variant is selected.\n   *\n   * @param variant - Variant to check.\n   * @returns True if the variant is selected, false if not.\n   * @internal\n   */\n  protected variantIsSelected(variant: ResultVariant): boolean {\n    return this.selectedVariant === variant;\n  }\n}\n"],"names":[],"mappings":";;;;;;;AA8DA;;;;;;AAWA,IAAqB,qBAAqB,GAA1C,MAAqB,qBAAsB,SAAQ,GAAG;;;;;;;IAyCpD,IAAc,QAAQ;QACpB,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE;YACpB,OAAO,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC;SAC7B;QACD,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC;KACxD;;;;;;;IAQD,IAAc,eAAe;QAC3B,OAAO,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,IAAI,OAAO,KAAK,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;KACtF;;;;;;;IAQS,aAAa,CAAC,OAAsB;QAC5C,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;KAC/C;;;;;;;;IASS,iBAAiB,CAAC,OAAsB;QAChD,OAAO,IAAI,CAAC,eAAe,KAAK,OAAO,CAAC;KACzC;CACF,CAAA;AAvEC;IADC,OAAO,CAAC,yBAAyB,CAAC;kEAC2C;AAQ9E;IADC,OAAO,CAAC,wBAAwB,CAAC;qDACX;AAQvB;IADC,OAAO,CAAC,qBAAqB,CAAC;+DACW;AAU1C;IAHC,IAAI,CAAC;QACJ,OAAO,EAAE,CAAC;KACX,CAAC;oDACoB;AAjCH,qBAAqB;IALzC,SAAS,CAAC;QACT,UAAU,EAAE;YACV,SAAS;SACV;KACF,CAAC;GACmB,qBAAqB,CA8EzC;aA9EoB,qBAAqB;;;;"}

package/js/components/result/result-variants-provider.vue.js

@@ -0,0 +1,39 @@
+import script from './result-variants-provider.vue_rollup-plugin-vue_script.vue.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = undefined;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
+    {},
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export { __vue_component__ as default };
+//# sourceMappingURL=result-variants-provider.vue.js.map

package/js/components/result/result-variants-provider.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"result-variants-provider.vue.js","sources":["../../../../src/components/result/result-variants-provider.vue"],"sourcesContent":["<script lang=\"ts\">\n  import Vue, { VNode, CreateElement } from 'vue';\n  import { Component, Prop, Watch } from 'vue-property-decorator';\n  import { Result, ResultVariant } from '@empathyco/x-types';\n  import { XProvide } from '../decorators/injection.decorators';\n  import {\n    RESULT_WITH_VARIANTS_KEY,\n    SELECTED_VARIANTS_KEY,\n    SELECT_RESULT_VARIANT_KEY\n  } from '../decorators/injection.consts';\n\n  /**\n   * Component that exposes the result merged with its selected variant in the default slot.\n   *\n   * It receives the original result and keeps track of the selected variant.\n   *\n   * It provides the original result, the array containing the selected variants and a callback to\n   * set the selected variant to be used from a child.\n   *\n   * @public\n   */\n  @Component\n  export default class ResultVariantsProvider extends Vue {\n    /**\n     * The original result containing the variants.\n     *\n     * @public\n     */\n    @Prop({\n      required: true\n    })\n    @XProvide(RESULT_WITH_VARIANTS_KEY)\n    public result!: Result;\n\n    /**\n     * The provider by default will auto select the first variants of all levels.\n     * This prop allows to limit the number of variants auto selected when the provider is created.\n     * Take into account that the depth will be the variants level + 1, so, setting autoSelectDepth\n     * to 0 will not select any variant, setting it to 1 will select only the first variant of the\n     * first level, and so on.\n     */\n    @Prop({\n      default: Number.POSITIVE_INFINITY\n    })\n    public autoSelectDepth!: number;\n\n    /**\n     * Array to keep track of the selected variants of the result.\n     * Each position of the array is a nest level in the variants' hierarchy, so,\n     * the second position will contain a variant that is present inside the variant of the first\n     * position, and so on.\n     *\n     * @public\n     */\n    @XProvide(SELECTED_VARIANTS_KEY)\n    public selectedVariants: ResultVariant[] = [];\n\n    /**\n     * Selects a variant of the result.\n     * When called, it slices the array of selected variants to remove the selected child variants.\n     * Emits the {@link XEventsTypes.UserSelectedAResultVariant} when called.\n     *\n     * @param variant - The variant to set.\n     * @param level - The nest level where the variant is placed inside the result.\n     * @public\n     */\n    @XProvide(SELECT_RESULT_VARIANT_KEY)\n    selectResultVariant(variant: ResultVariant, level = 0): void {\n      if (this.selectedVariants[level] === variant) {\n        return;\n      }\n      this.selectedVariants.splice(level, Number.POSITIVE_INFINITY, variant);\n      this.$x.emit('UserSelectedAResultVariant', {\n        variant,\n        level,\n        result: this.result\n      });\n    }\n\n    /**\n     * Render function of the provider.\n     * It exposes the result with the selected variant merged.\n     *\n     * @param createElement - Vue createElement method.\n     * @returns - The VNode of the first element passed in the slot.\n     * @public\n     */\n    render(createElement: CreateElement): VNode {\n      return (\n        this.$scopedSlots.default?.({\n          result: this.resultToProvide\n        })?.[0] ?? createElement()\n      );\n    }\n\n    /**\n     * Resets the selected variants when the result changes.\n     * That includes doing the auto selection of the variants when the component is created\n     * and when the result is changed.\n     */\n    @Watch('result', { immediate: true })\n    resetSelectedVariants(): void {\n      this.selectedVariants = [];\n      this.selectFirstVariants(this.result?.variants?.[0]);\n    }\n\n    /**\n     * Merges the original result with the selected variant.\n     * The merge is done with all the selected variants of the array.\n     *\n     * @returns - The result with the selected variant merged.\n     * @public\n     */\n    public get resultToProvide(): Result {\n      if (!this.selectedVariants.length) {\n        return this.result;\n      }\n      const mergedResult = this.selectedVariants.reduce<Result>((result, variant) => {\n        return {\n          ...result,\n          ...variant\n        };\n      }, this.result);\n      mergedResult.variants = this.result.variants;\n      return mergedResult;\n    }\n\n    /**\n     * Adds to the selectedVariants array the variants up to the autoSelectDepth level.\n     *\n     * @param variant - Variant to add to the array.\n     */\n    selectFirstVariants(variant?: ResultVariant): void {\n      if (!!variant && this.selectedVariants.length <= this.autoSelectDepth - 1) {\n        this.selectedVariants.push(variant);\n        this.selectFirstVariants(variant.variants?.[0]);\n      }\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n[`UserSelectedAResultVariant`](./../../api/x-components.userselectedaresultvariant.md).\n\n## See it in action\n\nThis component is intended to be used in conjunction with the `ResultVariantSelector` component.\n\nThe result exposed in the default slot will contain the data of the selected variant.\n\nBy default, the first variants of all the levels will be selected when the component is rendered.\n\n```vue\n<template>\n  <ResultVariantsProvider :result=\"result\" #default=\"{ result }\">\n    <p>Result name: {{ result.name }}</p>\n\n    <h1>Select color</h1>\n    <ResultVariantSelector :level=\"0\" #variant=\"{ variant, selectVariant }\">\n      <button @click=\"selectVariant\">{{ variant.name }}</button>\n    </ResultVariantSelector>\n\n    <h1>Select size</h1>\n    <ResultVariantSelector :level=\"1\" #variant=\"{ variant, selectVariant }\">\n      <button @click=\"selectVariant\">{{ variant.name }}</button>\n    </ResultVariantSelector>\n  </ResultVariantsProvider>\n</template>\n\n<script>\n  import { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultVariantsProviderDemo',\n    components: {\n      ResultVariantsProvider,\n      ResultVariantSelector\n    },\n    data() {\n      return {\n        result: {\n          id: 'jacket',\n          modelName: 'Result',\n          type: 'Product',\n          isWishlisted: false,\n          identifier: { value: 'jacket' },\n          images: [],\n          name: 'jacket',\n          price: { hasDiscount: false, originalValue: 10, value: 10 },\n          url: '/products/jacket',\n          variants: [\n            {\n              name: 'red',\n              variants: [\n                {\n                  name: 'red XL'\n                },\n                {\n                  name: 'red L'\n                }\n              ]\n            },\n            {\n              name: 'blue',\n              variants: [\n                {\n                  name: 'blue S'\n                },\n                {\n                  name: 'blue M'\n                },\n                {\n                  name: 'blue L'\n                }\n              ]\n            }\n          ]\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the provider has been configured to not auto select any variant. Changing the\n`autoSelectDepth` prop sets the number of variant levels to auto select, being 0 no variants, 1 the\nfirst variant of the first level, and so on.\n\n```vue\n<template>\n  <ResultVariantsProvider :result=\"result\" :autoSelectDepth=\"0\" #default=\"{ result }\">\n    <p>Result name: {{ result.name }}</p>\n\n    <h1>Select color</h1>\n    <ResultVariantSelector :level=\"0\" #variant=\"{ variant, selectVariant }\">\n      <button @click=\"selectVariant\">{{ variant.name }}</button>\n    </ResultVariantSelector>\n\n    <h1>Select size</h1>\n    <ResultVariantSelector :level=\"1\" #variant=\"{ variant, selectVariant }\">\n      <button @click=\"selectVariant\">{{ variant.name }}</button>\n    </ResultVariantSelector>\n  </ResultVariantsProvider>\n</template>\n\n<script>\n  import { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultVariantsProviderDemo',\n    components: {\n      ResultVariantsProvider,\n      ResultVariantSelector\n    },\n    data() {\n      return {\n        result: {\n          id: 'jacket',\n          modelName: 'Result',\n          type: 'Product',\n          isWishlisted: false,\n          identifier: { value: 'jacket' },\n          images: [],\n          name: 'jacket',\n          price: { hasDiscount: false, originalValue: 10, value: 10 },\n          url: '/products/jacket',\n          variants: [\n            {\n              name: 'red',\n              variants: [\n                {\n                  name: 'red XL'\n                },\n                {\n                  name: 'red L'\n                }\n              ]\n            },\n            {\n              name: 'blue',\n              variants: [\n                {\n                  name: 'blue S'\n                },\n                {\n                  name: 'blue M'\n                },\n                {\n                  name: 'blue L'\n                }\n              ]\n            }\n          ]\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}