@empathyco/x-components 3.0.0-alpha.31 → 3.0.0-alpha.35

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

@@ -1 +1 @@
-{"version":3,"file":"base-result-link.vue_rollup-plugin-vue=script.js","sources":["../../../../src/components/result/base-result-link.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { Result } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Inject, Prop } from 'vue-property-decorator';\nimport { PropsWithType } from '../../utils/types';\nimport { XEventsTypes } from '../../wiring/events.types';\n\n/**\n * Component to be reused that renders an `<a>` wrapping the result contents.\n *\n * @remarks\n * It has the logic to emit {@link XEventsTypes.UserClickedAResult} and\n * {@link XEventsTypes.UserRightClickedAResult} to the bus on click mouse events.\n * Additionally, this component may be injected other events to be emitted on click event, so,\n * depending where it's used its father component may provide this events.\n *\n * @public\n */\n@Component\nexport default class BaseResultLink extends Vue {\n  /**\n   * The rendered DOM element.\n   *\n   * @internal\n   */\n  public $el!: HTMLElement;\n  /**\n   * The list of additional events to be emitted by the component when user clicks the link.\n   *\n   * @internal\n   */\n  @Inject({ from: 'resultClickExtraEvents', default: [] })\n  protected resultClickExtraEvents!: PropsWithType<XEventsTypes, Result>[];\n\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   * Emits the {@link XEventsTypes.UserClickedAResult} when user clicks on the result, and also\n   * additional events if have been injected in the component.\n   *\n   * @internal\n   */\n  protected emitUserClickedAResult(): void {\n    this.$x.emit('UserClickedAResult', this.result, { target: this.$el });\n    this.resultClickExtraEvents.forEach(event => {\n      this.$x.emit(event, this.result, { target: this.$el });\n    });\n  }\n\n  /**\n   * Emits the {@link XEventsTypes.UserRightClickedAResult} when user right clicks on the result.\n   *\n   * @internal\n   */\n  protected emitUserRightClickedAResult(): void {\n    this.$x.emit('UserRightClickedAResult', this.result, { target: this.$el });\n  }\n}\n"],"names":[],"mappings":";;;;AAwBA;;;;;;;;;;;AAYA;IAA4C,kCAAG;IAA/C;;KA4CC;;;;;;;IAfW,+CAAsB,GAAhC;QAAA,iBAKC;QAJC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;QACtE,IAAI,CAAC,sBAAsB,CAAC,OAAO,CAAC,UAAA,KAAK;YACvC,KAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,KAAI,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,KAAI,CAAC,GAAG,EAAE,CAAC,CAAC;SACxD,CAAC,CAAC;KACJ;;;;;;IAOS,oDAA2B,GAArC;QACE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,yBAAyB,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;KAC5E;IA9BD;QADC,MAAM,CAAC,EAAE,IAAI,EAAE,wBAAwB,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;kEACiB;IAQzE;QADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;kDACC;IArBP,cAAc;QADlC,SAAS;OACW,cAAc,CA4ClC;IAAD,qBAAC;CAAA,CA5C2C,GAAG;;;;"}
+{"version":3,"file":"base-result-link.vue_rollup-plugin-vue=script.js","sources":["../../../../src/components/result/base-result-link.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { Result } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Inject, Prop } from 'vue-property-decorator';\nimport { PropsWithType } from '../../utils/types';\nimport { XEventsTypes } from '../../wiring/events.types';\n\n/**\n * Component to be reused that renders an `<a>` wrapping the result contents.\n *\n * @remarks\n * It has the logic to emit {@link XEventsTypes.UserClickedAResult} to the bus on click mouse\n * events. Additionally, this component may be injected other events to be emitted on click\n * event, so, depending where it's used its father component may provide this events.\n *\n * @public\n */\n@Component\nexport default class BaseResultLink extends Vue {\n  /**\n   * The rendered DOM element.\n   *\n   * @internal\n   */\n  public $el!: HTMLElement;\n  /**\n   * The list of additional events to be emitted by the component when user clicks the link.\n   *\n   * @internal\n   */\n  @Inject({ from: 'resultClickExtraEvents', default: [] })\n  protected resultClickExtraEvents!: PropsWithType<XEventsTypes, Result>[];\n\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   * Emits the {@link XEventsTypes.UserClickedAResult} when user clicks on the result, and also\n   * additional events if have been injected in the component.\n   *\n   * @internal\n   */\n  protected emitUserClickedAResult(): void {\n    this.$x.emit('UserClickedAResult', this.result, { target: this.$el });\n    this.resultClickExtraEvents.forEach(event => {\n      this.$x.emit(event, this.result, { target: this.$el });\n    });\n  }\n}\n"],"names":[],"mappings":";;;;AAwBA;;;;;;;;;;AAWA;IAA4C,kCAAG;IAA/C;;KAmCC;;;;;;;IANW,+CAAsB,GAAhC;QAAA,iBAKC;QAJC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;QACtE,IAAI,CAAC,sBAAsB,CAAC,OAAO,CAAC,UAAA,KAAK;YACvC,KAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,KAAI,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,KAAI,CAAC,GAAG,EAAE,CAAC,CAAC;SACxD,CAAC,CAAC;KACJ;IArBD;QADC,MAAM,CAAC,EAAE,IAAI,EAAE,wBAAwB,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;kEACiB;IAQzE;QADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;kDACC;IArBP,cAAc;QADlC,SAAS;OACW,cAAc,CAmClC;IAAD,qBAAC;CAAA,CAnC2C,GAAG;;;;"}

package/js/components/result/base-result-placeholder-image.vue.js

@@ -5,7 +5,7 @@ import script from './base-result-placeholder-image.vue_rollup-plugin-vue=script
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function(_h, _vm) {
+var __vue_render__ = function (_h, _vm) {
   var _c = _vm._c;
   return _c(
     "svg",
@@ -18,20 +18,18 @@ var __vue_render__ = function(_h, _vm) {
         version: "1.1",
         viewBox: "0 0 256 371",
         xmlns: "http://www.w3.org/2000/svg",
-        "xmlns:xlink": "http://www.w3.org/1999/xlink"
-      }
+        "xmlns:xlink": "http://www.w3.org/1999/xlink",
+      },
     },
     [
       _c("rect", { attrs: { height: "371", width: "256", x: "0", y: "0" } }),
       _vm._v(" "),
       _c("path", {
         attrs: {
-          d:
-            "M162.40625,77 L162.40625,90.5625 L40.34375,90.5625 C36.5983809,90.5625 33.5625,93.5983809\n    33.5625,97.34375 L33.5625,97.34375 L33.5625,236.969687 L96.628125,173.971875\n    C99.2732363,171.342445 103.544576,171.342445 106.189687,173.971875 L106.189687,173.971875\n    L148.84375,216.625937 L184.784375,180.753125 C187.429486,178.123695 191.700826,178.123695\n    194.345938,180.753125 L194.345938,180.753125 L223.4375,209.844687 L223.4375,158.375\n    L237,158.375 L237,273.65625 C237,284.891934 227.891934,294 216.65625,294 L216.65625,294\n    L40.34375,294 C29.1080664,294 20,284.891934 20,273.65625 L20,273.65625 L20,97.34375\n    C20,86.1080664 29.1080664,77 40.34375,77 L40.34375,77 L162.40625,77 Z M82,114\n    C93.045625,114 102,122.954375 102,134 C102,145.045625 93.045625,154 82,154 C70.954375,154\n    62,145.045625 62,134 C62,122.954375 70.954375,114 82,114 Z M175.444623,100.396089\n    L183.687219,108.661381 C184.620423,109.602859 184.620423,111.123422 183.680918,112.077314\n    C182.737148,113.018189 181.212972,113.018189 180.26465,112.073775 L180.26465,112.073775\n    L177.727,109.527 L177.745354,109.644062 C179.677469,121.418749 189.812727,130.462066\n    202.047328,130.661575 L202.047328,130.661575 L202.460517,130.664942 C209.153157,130.664942\n    215.436777,128.056193 220.174617,123.31173 C221.12269,122.361456 222.670209,122.361776\n    223.58594,123.311542 C224.527282,124.25405 224.527282,125.78338 223.586285,126.726562\n    C217.94114,132.382374 210.431948,135.5 202.451652,135.5 C187.460762,135.5 174.984785,124.35392\n     172.907406,109.825508 L172.907406,109.825508 L172.902,109.787 L170.627234,112.068625\n     C170.216136,112.485215 169.674234,112.730073 169.104127,112.774878 L169.104127,112.774878\n     L168.913187,112.782365 C168.276718,112.782365 167.658303,112.532522 167.207809,112.075026\n     C166.263587,111.129629 166.263587,109.597657 167.206898,108.658263 L167.206898,108.658263\n     L175.444623,100.396089 Z M202.54801,75.5 C217.536718,75.5 230.012345,86.6439604\n     232.093604,101.171817 L232.093604,101.171817 L232.098,101.21 L234.379146,98.9226859\n     C235.281116,98.0234824 236.717815,97.9826095 237.660635,98.8020572 L237.660635,98.8020572\n     L237.791853,98.9249739 C238.734405,99.8686992 238.736601,101.398026 237.795291,102.341522\n     L237.795291,102.341522 L229.557794,110.600807 L221.31437,102.338232 C220.381166,101.396755\n     220.381166,99.876192 221.320671,98.9222996 C222.265013,97.9808537 223.794144,97.9808537\n     224.736486,98.9253846 L224.736486,98.9253846 L227.277,101.473 L227.259636,101.355612\n     C225.324141,89.5799272 215.187742,80.5375269 202.954224,80.3380384 L202.954224,80.3380384\n     L202.541072,80.3346719 C195.847619,80.3346719 189.562063,82.9439869 184.830962,87.683869\n     C183.887384,88.6368031 182.34531,88.6368031 181.414841,87.6918832 C180.466611,86.7485972\n     180.466611,85.2139736 181.411064,84.2734376 C187.057027,78.6168059 194.564245,75.5\n     202.54801,75.5 Z",
-          "fill-rule": "nonzero"
-        }
-      })
-    ]
+          d: "M162.40625,77 L162.40625,90.5625 L40.34375,90.5625 C36.5983809,90.5625 33.5625,93.5983809\n    33.5625,97.34375 L33.5625,97.34375 L33.5625,236.969687 L96.628125,173.971875\n    C99.2732363,171.342445 103.544576,171.342445 106.189687,173.971875 L106.189687,173.971875\n    L148.84375,216.625937 L184.784375,180.753125 C187.429486,178.123695 191.700826,178.123695\n    194.345938,180.753125 L194.345938,180.753125 L223.4375,209.844687 L223.4375,158.375\n    L237,158.375 L237,273.65625 C237,284.891934 227.891934,294 216.65625,294 L216.65625,294\n    L40.34375,294 C29.1080664,294 20,284.891934 20,273.65625 L20,273.65625 L20,97.34375\n    C20,86.1080664 29.1080664,77 40.34375,77 L40.34375,77 L162.40625,77 Z M82,114\n    C93.045625,114 102,122.954375 102,134 C102,145.045625 93.045625,154 82,154 C70.954375,154\n    62,145.045625 62,134 C62,122.954375 70.954375,114 82,114 Z M175.444623,100.396089\n    L183.687219,108.661381 C184.620423,109.602859 184.620423,111.123422 183.680918,112.077314\n    C182.737148,113.018189 181.212972,113.018189 180.26465,112.073775 L180.26465,112.073775\n    L177.727,109.527 L177.745354,109.644062 C179.677469,121.418749 189.812727,130.462066\n    202.047328,130.661575 L202.047328,130.661575 L202.460517,130.664942 C209.153157,130.664942\n    215.436777,128.056193 220.174617,123.31173 C221.12269,122.361456 222.670209,122.361776\n    223.58594,123.311542 C224.527282,124.25405 224.527282,125.78338 223.586285,126.726562\n    C217.94114,132.382374 210.431948,135.5 202.451652,135.5 C187.460762,135.5 174.984785,124.35392\n     172.907406,109.825508 L172.907406,109.825508 L172.902,109.787 L170.627234,112.068625\n     C170.216136,112.485215 169.674234,112.730073 169.104127,112.774878 L169.104127,112.774878\n     L168.913187,112.782365 C168.276718,112.782365 167.658303,112.532522 167.207809,112.075026\n     C166.263587,111.129629 166.263587,109.597657 167.206898,108.658263 L167.206898,108.658263\n     L175.444623,100.396089 Z M202.54801,75.5 C217.536718,75.5 230.012345,86.6439604\n     232.093604,101.171817 L232.093604,101.171817 L232.098,101.21 L234.379146,98.9226859\n     C235.281116,98.0234824 236.717815,97.9826095 237.660635,98.8020572 L237.660635,98.8020572\n     L237.791853,98.9249739 C238.734405,99.8686992 238.736601,101.398026 237.795291,102.341522\n     L237.795291,102.341522 L229.557794,110.600807 L221.31437,102.338232 C220.381166,101.396755\n     220.381166,99.876192 221.320671,98.9222996 C222.265013,97.9808537 223.794144,97.9808537\n     224.736486,98.9253846 L224.736486,98.9253846 L227.277,101.473 L227.259636,101.355612\n     C225.324141,89.5799272 215.187742,80.5375269 202.954224,80.3380384 L202.954224,80.3380384\n     L202.541072,80.3346719 C195.847619,80.3346719 189.562063,82.9439869 184.830962,87.683869\n     C183.887384,88.6368031 182.34531,88.6368031 181.414841,87.6918832 C180.466611,86.7485972\n     180.466611,85.2139736 181.411064,84.2734376 C187.057027,78.6168059 194.564245,75.5\n     202.54801,75.5 Z",
+          "fill-rule": "nonzero",
+        },
+      }) ]
   )
 };
 var __vue_staticRenderFns__ = [];

package/js/components/result/base-result-placeholder-image.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-result-placeholder-image.vue.js","sources":["../../../../src/components/result/base-result-placeholder-image.vue"],"sourcesContent":["<template functional>\n  <svg\n    :class=\"['x-picture__image x-picture__image--placeholder'].concat(data.staticClass, data.class)\"\n    version=\"1.1\"\n    viewBox=\"0 0 256 371\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n  >\n    <rect height=\"371\" width=\"256\" x=\"0\" y=\"0\"></rect>\n    <path\n      d=\"M162.40625,77 L162.40625,90.5625 L40.34375,90.5625 C36.5983809,90.5625 33.5625,93.5983809\n      33.5625,97.34375 L33.5625,97.34375 L33.5625,236.969687 L96.628125,173.971875\n      C99.2732363,171.342445 103.544576,171.342445 106.189687,173.971875 L106.189687,173.971875\n      L148.84375,216.625937 L184.784375,180.753125 C187.429486,178.123695 191.700826,178.123695\n      194.345938,180.753125 L194.345938,180.753125 L223.4375,209.844687 L223.4375,158.375\n      L237,158.375 L237,273.65625 C237,284.891934 227.891934,294 216.65625,294 L216.65625,294\n      L40.34375,294 C29.1080664,294 20,284.891934 20,273.65625 L20,273.65625 L20,97.34375\n      C20,86.1080664 29.1080664,77 40.34375,77 L40.34375,77 L162.40625,77 Z M82,114\n      C93.045625,114 102,122.954375 102,134 C102,145.045625 93.045625,154 82,154 C70.954375,154\n      62,145.045625 62,134 C62,122.954375 70.954375,114 82,114 Z M175.444623,100.396089\n      L183.687219,108.661381 C184.620423,109.602859 184.620423,111.123422 183.680918,112.077314\n      C182.737148,113.018189 181.212972,113.018189 180.26465,112.073775 L180.26465,112.073775\n      L177.727,109.527 L177.745354,109.644062 C179.677469,121.418749 189.812727,130.462066\n      202.047328,130.661575 L202.047328,130.661575 L202.460517,130.664942 C209.153157,130.664942\n      215.436777,128.056193 220.174617,123.31173 C221.12269,122.361456 222.670209,122.361776\n      223.58594,123.311542 C224.527282,124.25405 224.527282,125.78338 223.586285,126.726562\n      C217.94114,132.382374 210.431948,135.5 202.451652,135.5 C187.460762,135.5 174.984785,124.35392\n       172.907406,109.825508 L172.907406,109.825508 L172.902,109.787 L170.627234,112.068625\n       C170.216136,112.485215 169.674234,112.730073 169.104127,112.774878 L169.104127,112.774878\n       L168.913187,112.782365 C168.276718,112.782365 167.658303,112.532522 167.207809,112.075026\n       C166.263587,111.129629 166.263587,109.597657 167.206898,108.658263 L167.206898,108.658263\n       L175.444623,100.396089 Z M202.54801,75.5 C217.536718,75.5 230.012345,86.6439604\n       232.093604,101.171817 L232.093604,101.171817 L232.098,101.21 L234.379146,98.9226859\n       C235.281116,98.0234824 236.717815,97.9826095 237.660635,98.8020572 L237.660635,98.8020572\n       L237.791853,98.9249739 C238.734405,99.8686992 238.736601,101.398026 237.795291,102.341522\n       L237.795291,102.341522 L229.557794,110.600807 L221.31437,102.338232 C220.381166,101.396755\n       220.381166,99.876192 221.320671,98.9222996 C222.265013,97.9808537 223.794144,97.9808537\n       224.736486,98.9253846 L224.736486,98.9253846 L227.277,101.473 L227.259636,101.355612\n       C225.324141,89.5799272 215.187742,80.5375269 202.954224,80.3380384 L202.954224,80.3380384\n       L202.541072,80.3346719 C195.847619,80.3346719 189.562063,82.9439869 184.830962,87.683869\n       C183.887384,88.6368031 182.34531,88.6368031 181.414841,87.6918832 C180.466611,86.7485972\n       180.466611,85.2139736 181.411064,84.2734376 C187.057027,78.6168059 194.564245,75.5\n       202.54801,75.5 Z\"\n      fill-rule=\"nonzero\"\n    ></path>\n  </svg>\n</template>\n\n<script lang=\"ts\">\n  export default {};\n</script>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-result-placeholder-image.vue.js","sources":["../../../../src/components/result/base-result-placeholder-image.vue"],"sourcesContent":["<template functional>\n  <svg\n    :class=\"['x-picture__image x-picture__image--placeholder'].concat(data.staticClass, data.class)\"\n    version=\"1.1\"\n    viewBox=\"0 0 256 371\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n  >\n    <rect height=\"371\" width=\"256\" x=\"0\" y=\"0\"></rect>\n    <path\n      d=\"M162.40625,77 L162.40625,90.5625 L40.34375,90.5625 C36.5983809,90.5625 33.5625,93.5983809\n      33.5625,97.34375 L33.5625,97.34375 L33.5625,236.969687 L96.628125,173.971875\n      C99.2732363,171.342445 103.544576,171.342445 106.189687,173.971875 L106.189687,173.971875\n      L148.84375,216.625937 L184.784375,180.753125 C187.429486,178.123695 191.700826,178.123695\n      194.345938,180.753125 L194.345938,180.753125 L223.4375,209.844687 L223.4375,158.375\n      L237,158.375 L237,273.65625 C237,284.891934 227.891934,294 216.65625,294 L216.65625,294\n      L40.34375,294 C29.1080664,294 20,284.891934 20,273.65625 L20,273.65625 L20,97.34375\n      C20,86.1080664 29.1080664,77 40.34375,77 L40.34375,77 L162.40625,77 Z M82,114\n      C93.045625,114 102,122.954375 102,134 C102,145.045625 93.045625,154 82,154 C70.954375,154\n      62,145.045625 62,134 C62,122.954375 70.954375,114 82,114 Z M175.444623,100.396089\n      L183.687219,108.661381 C184.620423,109.602859 184.620423,111.123422 183.680918,112.077314\n      C182.737148,113.018189 181.212972,113.018189 180.26465,112.073775 L180.26465,112.073775\n      L177.727,109.527 L177.745354,109.644062 C179.677469,121.418749 189.812727,130.462066\n      202.047328,130.661575 L202.047328,130.661575 L202.460517,130.664942 C209.153157,130.664942\n      215.436777,128.056193 220.174617,123.31173 C221.12269,122.361456 222.670209,122.361776\n      223.58594,123.311542 C224.527282,124.25405 224.527282,125.78338 223.586285,126.726562\n      C217.94114,132.382374 210.431948,135.5 202.451652,135.5 C187.460762,135.5 174.984785,124.35392\n       172.907406,109.825508 L172.907406,109.825508 L172.902,109.787 L170.627234,112.068625\n       C170.216136,112.485215 169.674234,112.730073 169.104127,112.774878 L169.104127,112.774878\n       L168.913187,112.782365 C168.276718,112.782365 167.658303,112.532522 167.207809,112.075026\n       C166.263587,111.129629 166.263587,109.597657 167.206898,108.658263 L167.206898,108.658263\n       L175.444623,100.396089 Z M202.54801,75.5 C217.536718,75.5 230.012345,86.6439604\n       232.093604,101.171817 L232.093604,101.171817 L232.098,101.21 L234.379146,98.9226859\n       C235.281116,98.0234824 236.717815,97.9826095 237.660635,98.8020572 L237.660635,98.8020572\n       L237.791853,98.9249739 C238.734405,99.8686992 238.736601,101.398026 237.795291,102.341522\n       L237.795291,102.341522 L229.557794,110.600807 L221.31437,102.338232 C220.381166,101.396755\n       220.381166,99.876192 221.320671,98.9222996 C222.265013,97.9808537 223.794144,97.9808537\n       224.736486,98.9253846 L224.736486,98.9253846 L227.277,101.473 L227.259636,101.355612\n       C225.324141,89.5799272 215.187742,80.5375269 202.954224,80.3380384 L202.954224,80.3380384\n       L202.541072,80.3346719 C195.847619,80.3346719 189.562063,82.9439869 184.830962,87.683869\n       C183.887384,88.6368031 182.34531,88.6368031 181.414841,87.6918832 C180.466611,86.7485972\n       180.466611,85.2139736 181.411064,84.2734376 C187.057027,78.6168059 194.564245,75.5\n       202.54801,75.5 Z\"\n      fill-rule=\"nonzero\"\n    ></path>\n  </svg>\n</template>\n\n<script lang=\"ts\">\n  export default {};\n</script>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -5,7 +5,7 @@ import script from './base-result-previous-price.vue_rollup-plugin-vue=script.js
 var __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,24 +14,22 @@ 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
       )
     : _vm._e()

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 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<BaseResultPreviousPrice :value=\"result\" :format=\"'i.iii,ddd €'\" />\n```\n\n## Overriding default slot\n\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     * - 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 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<BaseResultPreviousPrice :value=\"result\" :format=\"'i.iii,ddd €'\" />\n```\n\n### Overriding default slot\n\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -6,7 +6,7 @@ import script from './base-scroll.vue_rollup-plugin-vue=script.js';
 var __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;
@@ -15,7 +15,7 @@ var __vue_render__ = function() {
     {
       staticClass: "x-scroll x-base-scroll",
       attrs: { "data-test": "base-scroll" },
-      on: { scroll: _vm.throttledStoreScrollData }
+      on: { scroll: _vm.throttledStoreScrollData },
     },
     [_vm._t("default")],
     2
@@ -27,11 +27,11 @@ __vue_render__._withStripped = true;
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-3fdd429c_0", { source: ".x-base-scroll[data-v-3fdd429c] {\n  overflow-y: var(--x-string-overflow-scroll, auto);\n}", map: undefined, media: undefined });
+    inject("data-v-3b6a5d44_0", { source: ".x-base-scroll[data-v-3b6a5d44] {\n  overflow-y: var(--x-string-overflow-scroll, auto);\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-3fdd429c";
+  var __vue_scope_id__ = "data-v-3b6a5d44";
   /* module identifier */
   var __vue_module_identifier__ = undefined;
   /* functional template */

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

@@ -1 +1 @@
-{"version":3,"file":"base-scroll.vue.js","sources":["../../../../src/components/scroll/base-scroll.vue"],"sourcesContent":["<template>\n  <div @scroll=\"throttledStoreScrollData\" class=\"x-scroll x-base-scroll\" data-test=\"base-scroll\">\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { mixins } from 'vue-class-component';\n  import { Component } from 'vue-property-decorator';\n  import ScrollMixin from './scroll.mixin';\n\n  /**\n   * Base scroll component that depending on the user interactivity emits different events for\n   * knowing when the user scrolls, the direction of scroll and if user reaches the start or end.\n   *\n   * @public\n   */\n  @Component\n  export default class BaseScroll extends mixins(ScrollMixin) {}\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-base-scroll {\n    overflow-y: var(--x-string-overflow-scroll, auto);\n  }\n</style>\n\n<docs lang=\"mdx\">\n# Example\n\nThe BaseScroll is a component that manage the states of scroll of a specified element. The component\ndoes the necessary calculations for knowing the direction of scroll, if the scroll has reached to\nstart or to end, and is about to reaching to end. The components emits the next events depending of\nmovement that realize the user:\n\n```vue\n<template>\n  <BaseScroll\n    @scroll=\"scroll\"\n    @scroll:direction-change=\"scrollDirectionChange\"\n    @scroll:at-start=\"scrollAtStart\"\n    @scroll:almost-at-end=\"scrollAlmostAtEnd\"\n    @scroll:at-end=\"scrollAtEnd\"\n    throttleMs=\"1000\"\n    distanceToBottom=\"200\"\n  >\n    <template>\n      <div class=\"content-scroll\">\n        <span>content1</span>\n        <span>content1</span>\n      </div>\n    </template>\n  </BaseScroll>\n</template>\n\n<script>\n  import { BaseScroll } from '@empathyco/x-components';\n\n  export default {\n    name: 'ScrollTest',\n    components: {\n      BaseScroll\n    },\n    methods: {\n      scroll(position) {\n        console.log('scroll', position);\n      },\n      scrollDirectionChange(direction) {\n        console.log('scroll:direction-change', direction);\n      },\n      scrollAtStart() {\n        console.log('scroll:at-start');\n      },\n      scrollAlmostAtEnd(distance) {\n        console.log('scroll:almost-at-end', distance);\n      },\n      scrollAtEnd() {\n        console.log('scroll:at-end');\n      }\n    }\n  };\n</script>\n```\n\n## Avoid reset scroll on query change\n\nSet to false the reset scroll on query change feature which is true by default.\n\n```vue\n<template>\n  <BaseScroll\n    @scroll=\"scroll\"\n    @scroll:direction-change=\"scrollDirectionChange\"\n    @scroll:at-start=\"scrollAtStart\"\n    @scroll:almost-at-end=\"scrollAlmostAtEnd\"\n    @scroll:at-end=\"scrollAtEnd\"\n    throttleMs=\"1000\"\n    distanceToBottom=\"200\"\n  >\n    <template>\n      <div class=\"content-scroll\">\n        <span>content1</span>\n        <span>content1</span>\n      </div>\n    </template>\n  </BaseScroll>\n</template>\n\n<script>\n  import { BaseScroll } from '@empathyco/x-components';\n\n  export default {\n    name: 'ScrollTest',\n    components: {\n      BaseScroll\n    },\n    methods: {\n      scroll(position) {\n        console.log('scroll', position);\n      },\n      scrollDirectionChange(direction) {\n        console.log('scroll:direction-change', direction);\n      },\n      scrollAtStart() {\n        console.log('scroll:at-start');\n      },\n      scrollAlmostAtEnd(distance) {\n        console.log('scroll:almost-at-end', distance);\n      },\n      scrollAtEnd() {\n        console.log('scroll:at-end');\n      }\n    }\n  };\n</script>\n```\n\n## Vue Events:\n\n- `scroll`: the event is emitted after the user scrolls in this container. The payload is the scroll\n  top distance in pixels.\n- `scroll:direction-change`: the event is emitted when the user changes the scroll direction. The\n  payload is the new scrolling direction.\n- `scroll:at-start`: the event is emitted when the user scrolls up to the initial position of the\n  scroll.\n- `scroll:almost-at-end`: the event is emitted when the user is about to reach the bottom part of\n  the scroll.\n- `scroll:at-end`: the event is emitted when the user has reached the bottom part of the scroll.\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-scroll.vue.js","sources":["../../../../src/components/scroll/base-scroll.vue"],"sourcesContent":["<template>\n  <div @scroll=\"throttledStoreScrollData\" class=\"x-scroll x-base-scroll\" data-test=\"base-scroll\">\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { mixins } from 'vue-class-component';\n  import { Component } from 'vue-property-decorator';\n  import ScrollMixin from './scroll.mixin';\n\n  /**\n   * Base scroll component that depending on the user interactivity emits different events for\n   * knowing when the user scrolls, the direction of scroll and if user reaches the start or end.\n   *\n   * @public\n   */\n  @Component\n  export default class BaseScroll extends mixins(ScrollMixin) {}\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-base-scroll {\n    overflow-y: var(--x-string-overflow-scroll, auto);\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Example\n\nThe BaseScroll is a component that manage the states of scroll of a specified element. The component\ndoes the necessary calculations for knowing the direction of scroll, if the scroll has reached to\nstart or to end, and is about to reaching to end. The components emits the next events depending of\nmovement that realize the user:\n\n```vue\n<template>\n  <BaseScroll\n    @scroll=\"scroll\"\n    @scroll:direction-change=\"scrollDirectionChange\"\n    @scroll:at-start=\"scrollAtStart\"\n    @scroll:almost-at-end=\"scrollAlmostAtEnd\"\n    @scroll:at-end=\"scrollAtEnd\"\n    throttleMs=\"1000\"\n    distanceToBottom=\"200\"\n  >\n    <template>\n      <div class=\"content-scroll\">\n        <span>content1</span>\n        <span>content1</span>\n      </div>\n    </template>\n  </BaseScroll>\n</template>\n\n<script>\n  import { BaseScroll } from '@empathyco/x-components';\n\n  export default {\n    name: 'ScrollTest',\n    components: {\n      BaseScroll\n    },\n    methods: {\n      scroll(position) {\n        console.log('scroll', position);\n      },\n      scrollDirectionChange(direction) {\n        console.log('scroll:direction-change', direction);\n      },\n      scrollAtStart() {\n        console.log('scroll:at-start');\n      },\n      scrollAlmostAtEnd(distance) {\n        console.log('scroll:almost-at-end', distance);\n      },\n      scrollAtEnd() {\n        console.log('scroll:at-end');\n      }\n    }\n  };\n</script>\n```\n\n### Avoid reset scroll on query change\n\nSet to false the reset scroll on query change feature which is true by default.\n\n```vue\n<template>\n  <BaseScroll\n    @scroll=\"scroll\"\n    @scroll:direction-change=\"scrollDirectionChange\"\n    @scroll:at-start=\"scrollAtStart\"\n    @scroll:almost-at-end=\"scrollAlmostAtEnd\"\n    @scroll:at-end=\"scrollAtEnd\"\n    throttleMs=\"1000\"\n    distanceToBottom=\"200\"\n  >\n    <template>\n      <div class=\"content-scroll\">\n        <span>content1</span>\n        <span>content1</span>\n      </div>\n    </template>\n  </BaseScroll>\n</template>\n\n<script>\n  import { BaseScroll } from '@empathyco/x-components';\n\n  export default {\n    name: 'ScrollTest',\n    components: {\n      BaseScroll\n    },\n    methods: {\n      scroll(position) {\n        console.log('scroll', position);\n      },\n      scrollDirectionChange(direction) {\n        console.log('scroll:direction-change', direction);\n      },\n      scrollAtStart() {\n        console.log('scroll:at-start');\n      },\n      scrollAlmostAtEnd(distance) {\n        console.log('scroll:almost-at-end', distance);\n      },\n      scrollAtEnd() {\n        console.log('scroll:at-end');\n      }\n    }\n  };\n</script>\n```\n\n## Vue Events:\n\n- `scroll`: the event is emitted after the user scrolls in this container. The payload is the scroll\n  top distance in pixels.\n- `scroll:direction-change`: the event is emitted when the user changes the scroll direction. The\n  payload is the new scrolling direction.\n- `scroll:at-start`: the event is emitted when the user scrolls up to the initial position of the\n  scroll.\n- `scroll:almost-at-end`: the event is emitted when the user is about to reach the bottom part of\n  the scroll.\n- `scroll:at-end`: the event is emitted when the user has reached the bottom part of the scroll.\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -6,7 +6,7 @@ import script from './sliding-panel.vue_rollup-plugin-vue=script.js';
 var __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;
@@ -16,7 +16,7 @@ var __vue_render__ = function() {
         {
           staticClass: "x-sliding-panel",
           class: _vm.cssClasses,
-          attrs: { "data-test": "sliding-panel" }
+          attrs: { "data-test": "sliding-panel" },
         },
         [
           _vm.showButtons
@@ -26,13 +26,12 @@ var __vue_render__ = function() {
                   staticClass:
                     "x-sliding-panel__button x-sliding-panel__button-left x-button x-button--round",
                   attrs: { "data-test": "sliding-panel-left-button" },
-                  on: { click: _vm.scrollLeft }
+                  on: { click: _vm.scrollLeft },
                 },
                 [
-                  _vm._t("sliding-panel-left-button", function() {
+                  _vm._t("sliding-panel-left-button", function () {
                     return [_vm._v("ᐸ")]
-                  })
-                ],
+                  }) ],
                 2
               )
             : _vm._e(),
@@ -46,8 +45,8 @@ var __vue_render__ = function() {
               on: {
                 scroll: _vm.debouncedUpdateScrollPosition,
                 transitionend: _vm.debouncedUpdateScrollPosition,
-                animationend: _vm.debouncedUpdateScrollPosition
-              }
+                animationend: _vm.debouncedUpdateScrollPosition,
+              },
             },
             [_vm._t("default")],
             2
@@ -60,17 +59,15 @@ var __vue_render__ = function() {
                   staticClass:
                     "x-sliding-panel__button x-sliding-panel__button-right x-button x-button--round",
                   attrs: { "data-test": "sliding-panel-right-button" },
-                  on: { click: _vm.scrollRight }
+                  on: { click: _vm.scrollRight },
                 },
                 [
-                  _vm._t("sliding-panel-right-button", function() {
+                  _vm._t("sliding-panel-right-button", function () {
                     return [_vm._v("ᐳ")]
-                  })
-                ],
+                  }) ],
                 2
               )
-            : _vm._e()
-        ]
+            : _vm._e() ]
       )
     : _vm._e()
 };
@@ -80,11 +77,11 @@ __vue_render__._withStripped = true;
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-ad3924d4_0", { source: ".x-sliding-panel[data-v-ad3924d4] {\n  align-items: center;\n  display: flex;\n  flex-flow: row nowrap;\n  height: 100%;\n  position: relative;\n}\n.x-sliding-panel__button[data-v-ad3924d4] {\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  transition: all ease-out 0.2s;\n  z-index: 2;\n  /* To overlay the design system gradient with z-index:1 */\n}\n.x-sliding-panel__button-left[data-v-ad3924d4] {\n  left: 0;\n}\n.x-sliding-panel__button-right[data-v-ad3924d4] {\n  right: 0;\n}\n.x-sliding-panel__scroll[data-v-ad3924d4] {\n  display: flex;\n  flex: 100%;\n  flex-flow: row nowrap;\n  overflow: auto;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n.x-sliding-panel__scroll[data-v-ad3924d4]::-webkit-scrollbar {\n  display: none;\n}\n.x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-start) .x-sliding-panel__button-left[data-v-ad3924d4] {\n  opacity: 1;\n  pointer-events: all;\n}\n.x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-end) .x-sliding-panel__button-right[data-v-ad3924d4] {\n  opacity: 1;\n  pointer-events: all;\n}", map: undefined, media: undefined });
+    inject("data-v-6800b566_0", { source: ".x-sliding-panel[data-v-6800b566] {\n  align-items: center;\n  display: flex;\n  flex-flow: row nowrap;\n  height: 100%;\n  position: relative;\n}\n.x-sliding-panel__button[data-v-6800b566] {\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  transition: all ease-out 0.2s;\n  z-index: 2;\n  /* To overlay the design system gradient with z-index:1 */\n}\n.x-sliding-panel__button-left[data-v-6800b566] {\n  left: 0;\n}\n.x-sliding-panel__button-right[data-v-6800b566] {\n  right: 0;\n}\n.x-sliding-panel__scroll[data-v-6800b566] {\n  display: flex;\n  flex: 100%;\n  flex-flow: row nowrap;\n  overflow: auto;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n.x-sliding-panel__scroll[data-v-6800b566]::-webkit-scrollbar {\n  display: none;\n}\n.x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-start) .x-sliding-panel__button-left[data-v-6800b566] {\n  opacity: 1;\n  pointer-events: all;\n}\n.x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-end) .x-sliding-panel__button-right[data-v-6800b566] {\n  opacity: 1;\n  pointer-events: all;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-ad3924d4";
+  var __vue_scope_id__ = "data-v-6800b566";
   /* module identifier */
   var __vue_module_identifier__ = undefined;
   /* functional template */

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

@@ -1 +1 @@
-{"version":3,"file":"sliding-panel.vue.js","sources":["../../../src/components/sliding-panel.vue"],"sourcesContent":["<template>\n  <div v-if=\"$slots.default\" class=\"x-sliding-panel\" :class=\"cssClasses\" data-test=\"sliding-panel\">\n    <button\n      v-if=\"showButtons\"\n      @click=\"scrollLeft\"\n      class=\"x-sliding-panel__button x-sliding-panel__button-left x-button x-button--round\"\n      data-test=\"sliding-panel-left-button\"\n    >\n      <!-- @slot Left button content -->\n      <slot name=\"sliding-panel-left-button\">ᐸ</slot>\n    </button>\n    <div\n      ref=\"scrollContainer\"\n      @scroll=\"debouncedUpdateScrollPosition\"\n      @transitionend=\"debouncedUpdateScrollPosition\"\n      @animationend=\"debouncedUpdateScrollPosition\"\n      class=\"x-list x-list--horizontal x-sliding-panel__scroll\"\n      data-test=\"sliding-panel-scroll\"\n    >\n      <!-- @slot (Required) Sliding panel content -->\n      <slot />\n    </div>\n    <button\n      v-if=\"showButtons\"\n      @click=\"scrollRight\"\n      class=\"x-sliding-panel__button x-sliding-panel__button-right x-button x-button--round\"\n      data-test=\"sliding-panel-right-button\"\n    >\n      <!-- @slot Right button content -->\n      <slot name=\"sliding-panel-right-button\">ᐳ</slot>\n    </button>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { VueCSSClasses } from '../utils/types';\n  import { Debounce } from './decorators/debounce.decorators';\n\n  /**\n   * Horizontal slide panel component. The content that is provided to this component would be\n   * navigable horizontally using two navigational buttons.\n   *\n   * @public\n   */\n  @Component\n  export default class SlidingPanel extends Vue {\n    /**\n     * Scroll factor that will dictate how much the scroll moves when pressing a navigation button.\n     */\n    @Prop({ default: 0.7 })\n    protected scrollFactor!: number;\n\n    /**\n     * Would make the navigation buttons visible when they're needed or always hide them.\n     */\n    @Prop({ default: true })\n    protected showButtons!: boolean;\n\n    /**\n     * MutationObserver that watches for changes inside the wrapping div to update\n     * the scroll position.\n     */\n    protected scrollObserver = new MutationObserver(\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      this.restoreAndUpdateScroll\n    );\n\n    /**\n     * Indicates if the scroll is at the start of the sliding panel.\n     */\n    protected isScrollAtStart = true;\n\n    /**\n     * Indicates if the scroll is at the end of the sliding panel.\n     */\n    protected isScrollAtEnd = true;\n\n    /**\n     * HTMLElement referencing the scroll of the component.\n     */\n    public $refs!: {\n      scrollContainer: HTMLElement;\n    };\n\n    mounted(): void {\n      this.scrollObserver.observe(this.$refs.scrollContainer, {\n        attributes: false,\n        childList: true,\n        subtree: true,\n        characterData: false\n      });\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      window?.addEventListener('resize', this.debouncedUpdateScrollPosition);\n\n      this.updateScrollPosition();\n    }\n\n    beforeDestroy(): void {\n      this.scrollObserver.disconnect();\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      window?.removeEventListener('resize', this.debouncedUpdateScrollPosition);\n    }\n\n    /**\n     * Resets the scroll and updates the values of the scroll for the buttons to react.\n     *\n     * @internal\n     */\n    @Debounce(100, { leading: true })\n    restoreAndUpdateScroll(): void {\n      this.$refs.scrollContainer.scroll({ left: 0, behavior: 'smooth' });\n      this.updateScrollPosition();\n    }\n\n    /**\n     * Updates the values of the scroll positions to show or hide the buttons depending on it.\n     *\n     * @internal\n     */\n    protected updateScrollPosition(): void {\n      const { scrollLeft, clientWidth, scrollWidth } = this.$refs.scrollContainer;\n      this.isScrollAtStart = !scrollLeft;\n      /* The 2 px extra is to fix some cases in some resolutions where the scroll + client size is\n       *  less than the scroll width even when the scroll is at the end */\n      this.isScrollAtEnd = scrollLeft + clientWidth + 2 >= scrollWidth;\n    }\n\n    /**\n     * Debounced version of the {@link SlidingPanel.updateScrollPosition | updateScrollPosition}\n     * method.\n     *\n     * @internal\n     */\n    @Debounce(100, { leading: true })\n    debouncedUpdateScrollPosition(): void {\n      this.updateScrollPosition();\n    }\n\n    /**\n     * Scrolls the wrapper element to the left.\n     *\n     * @internal\n     */\n    protected scrollLeft(): void {\n      this.scrollTo(-this.$refs.scrollContainer.clientWidth);\n    }\n\n    /**\n     * Scrolls the wrapper element to the right.\n     *\n     * @internal\n     */\n    protected scrollRight(): void {\n      this.scrollTo(this.$refs.scrollContainer.clientWidth);\n    }\n\n    /**\n     * Scrolls the wrapper element towards the provided scroll value.\n     *\n     * @param scrollValue - The value the scroll will go towards.\n     *\n     * @remarks this function uses the scrollBy from Element and it's not available in all browsers.\n     *\n     * @internal\n     */\n    protected scrollTo(scrollValue: number): void {\n      this.$refs.scrollContainer.scrollBy({\n        left: scrollValue * this.scrollFactor,\n        behavior: 'smooth'\n      });\n    }\n\n    /**\n     * CSS classes to apply based on the scroll position.\n     *\n     * @returns The CSS classes to apply.\n     *\n     * @internal\n     */\n    protected get cssClasses(): VueCSSClasses {\n      return {\n        'x-sliding-panel--at-start': this.isScrollAtStart,\n        'x-sliding-panel--at-end': this.isScrollAtEnd\n      };\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-sliding-panel {\n    align-items: center;\n    display: flex;\n    flex-flow: row nowrap;\n    height: 100%;\n    position: relative;\n\n    &__button {\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      transition: all ease-out 0.2s;\n      z-index: 2; /* To overlay the design system gradient with z-index:1 */\n\n      &-left {\n        left: 0;\n      }\n\n      &-right {\n        right: 0;\n      }\n    }\n\n    &__scroll {\n      display: flex;\n      flex: 100%;\n      flex-flow: row nowrap;\n      overflow: auto;\n      scrollbar-width: none; // Firefox\n      -ms-overflow-style: none; // IE\n\n      // Chrome, Edge & Safari\n      &::-webkit-scrollbar {\n        display: none;\n      }\n    }\n\n    &:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-start) {\n      .x-sliding-panel__button-left {\n        opacity: 1;\n        pointer-events: all;\n      }\n    }\n    &:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-end) {\n      .x-sliding-panel__button-right {\n        opacity: 1;\n        pointer-events: all;\n      }\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n# Examples\n\nThis component allows for any other component or element inside it to be horizontally navigable. It\nalso implements customizable buttons as well as other minor customizations to its general behavior.\nThe component uses the method `scrollBy` from `Element` to function, and it doesn't work properly in\nall browsers. A polyfill for the `scrollBy` would be needed for the component to behave as expected\nin those browsers.\n\n## Default usage\n\nSimplest implementation of the component, just a list-based component inside its slot.\n\n```vue\n<SlidingPanel>\n  <RelatedTags />\n</SlidingPanel>\n```\n\n## Behavior customization\n\nEdit how much the scroll travels when navigating with the buttons by changing the `scrollFactor`.\n\n```vue\n<SlidingPanel :scrollFactor=\"1.2\">\n  <RelatedTags />\n</SlidingPanel>\n```\n\nHide the navigational buttons completely by setting the `showButtons` prop to `false`. This is\nintended to be used when other scrolling options are available, like in mobile, where you can scroll\njust by swiping.\n\n```vue\n<SlidingPanel :showButtons=\"isMobile\">\n  <RelatedTags />\n</SlidingPanel>\n```\n\n## Overriding Button content\n\nBy default the buttons show an arrow depicting the direction the scroll would go to when clicked,\nbut this content can be customized with anything, from characters to SVG and images.\n\n```vue\n<SlidingPanel>\n  <template #sliding-panel-left-button>\n    Left\n  </template>\n  <RelatedTags />\n  <template #sliding-panel-right-button>\n    Right\n  </template>\n</SlidingPanel>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"sliding-panel.vue.js","sources":["../../../src/components/sliding-panel.vue"],"sourcesContent":["<template>\n  <div v-if=\"$slots.default\" class=\"x-sliding-panel\" :class=\"cssClasses\" data-test=\"sliding-panel\">\n    <button\n      v-if=\"showButtons\"\n      @click=\"scrollLeft\"\n      class=\"x-sliding-panel__button x-sliding-panel__button-left x-button x-button--round\"\n      data-test=\"sliding-panel-left-button\"\n    >\n      <!-- @slot Left button content -->\n      <slot name=\"sliding-panel-left-button\">ᐸ</slot>\n    </button>\n    <div\n      ref=\"scrollContainer\"\n      @scroll=\"debouncedUpdateScrollPosition\"\n      @transitionend=\"debouncedUpdateScrollPosition\"\n      @animationend=\"debouncedUpdateScrollPosition\"\n      class=\"x-list x-list--horizontal x-sliding-panel__scroll\"\n      data-test=\"sliding-panel-scroll\"\n    >\n      <!-- @slot (Required) Sliding panel content -->\n      <slot />\n    </div>\n    <button\n      v-if=\"showButtons\"\n      @click=\"scrollRight\"\n      class=\"x-sliding-panel__button x-sliding-panel__button-right x-button x-button--round\"\n      data-test=\"sliding-panel-right-button\"\n    >\n      <!-- @slot Right button content -->\n      <slot name=\"sliding-panel-right-button\">ᐳ</slot>\n    </button>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { VueCSSClasses } from '../utils/types';\n  import { Debounce } from './decorators/debounce.decorators';\n\n  /**\n   * Horizontal slide panel component. The content that is provided to this component would be\n   * navigable horizontally using two navigational buttons.\n   *\n   * @public\n   */\n  @Component\n  export default class SlidingPanel extends Vue {\n    /**\n     * Scroll factor that will dictate how much the scroll moves when pressing a navigation button.\n     */\n    @Prop({ default: 0.7 })\n    protected scrollFactor!: number;\n\n    /**\n     * Would make the navigation buttons visible when they're needed or always hide them.\n     */\n    @Prop({ default: true })\n    protected showButtons!: boolean;\n\n    /**\n     * MutationObserver that watches for changes inside the wrapping div to update\n     * the scroll position.\n     */\n    protected scrollObserver = new MutationObserver(\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      this.restoreAndUpdateScroll\n    );\n\n    /**\n     * Indicates if the scroll is at the start of the sliding panel.\n     */\n    protected isScrollAtStart = true;\n\n    /**\n     * Indicates if the scroll is at the end of the sliding panel.\n     */\n    protected isScrollAtEnd = true;\n\n    /**\n     * HTMLElement referencing the scroll of the component.\n     */\n    public $refs!: {\n      scrollContainer: HTMLElement;\n    };\n\n    mounted(): void {\n      this.scrollObserver.observe(this.$refs.scrollContainer, {\n        attributes: false,\n        childList: true,\n        subtree: true,\n        characterData: false\n      });\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      window?.addEventListener('resize', this.debouncedUpdateScrollPosition);\n\n      this.updateScrollPosition();\n    }\n\n    beforeDestroy(): void {\n      this.scrollObserver.disconnect();\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      window?.removeEventListener('resize', this.debouncedUpdateScrollPosition);\n    }\n\n    /**\n     * Resets the scroll and updates the values of the scroll for the buttons to react.\n     *\n     * @internal\n     */\n    @Debounce(100, { leading: true })\n    restoreAndUpdateScroll(): void {\n      this.$refs.scrollContainer.scroll({ left: 0, behavior: 'smooth' });\n      this.updateScrollPosition();\n    }\n\n    /**\n     * Updates the values of the scroll positions to show or hide the buttons depending on it.\n     *\n     * @internal\n     */\n    protected updateScrollPosition(): void {\n      const { scrollLeft, clientWidth, scrollWidth } = this.$refs.scrollContainer;\n      this.isScrollAtStart = !scrollLeft;\n      /* The 2 px extra is to fix some cases in some resolutions where the scroll + client size is\n       *  less than the scroll width even when the scroll is at the end */\n      this.isScrollAtEnd = scrollLeft + clientWidth + 2 >= scrollWidth;\n    }\n\n    /**\n     * Debounced version of the {@link SlidingPanel.updateScrollPosition | updateScrollPosition}\n     * method.\n     *\n     * @internal\n     */\n    @Debounce(100, { leading: true })\n    debouncedUpdateScrollPosition(): void {\n      this.updateScrollPosition();\n    }\n\n    /**\n     * Scrolls the wrapper element to the left.\n     *\n     * @internal\n     */\n    protected scrollLeft(): void {\n      this.scrollTo(-this.$refs.scrollContainer.clientWidth);\n    }\n\n    /**\n     * Scrolls the wrapper element to the right.\n     *\n     * @internal\n     */\n    protected scrollRight(): void {\n      this.scrollTo(this.$refs.scrollContainer.clientWidth);\n    }\n\n    /**\n     * Scrolls the wrapper element towards the provided scroll value.\n     *\n     * @param scrollValue - The value the scroll will go towards.\n     *\n     * @remarks this function uses the scrollBy from Element and it's not available in all browsers.\n     *\n     * @internal\n     */\n    protected scrollTo(scrollValue: number): void {\n      this.$refs.scrollContainer.scrollBy({\n        left: scrollValue * this.scrollFactor,\n        behavior: 'smooth'\n      });\n    }\n\n    /**\n     * CSS classes to apply based on the scroll position.\n     *\n     * @returns The CSS classes to apply.\n     *\n     * @internal\n     */\n    protected get cssClasses(): VueCSSClasses {\n      return {\n        'x-sliding-panel--at-start': this.isScrollAtStart,\n        'x-sliding-panel--at-end': this.isScrollAtEnd\n      };\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-sliding-panel {\n    align-items: center;\n    display: flex;\n    flex-flow: row nowrap;\n    height: 100%;\n    position: relative;\n\n    &__button {\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      transition: all ease-out 0.2s;\n      z-index: 2; /* To overlay the design system gradient with z-index:1 */\n\n      &-left {\n        left: 0;\n      }\n\n      &-right {\n        right: 0;\n      }\n    }\n\n    &__scroll {\n      display: flex;\n      flex: 100%;\n      flex-flow: row nowrap;\n      overflow: auto;\n      scrollbar-width: none; // Firefox\n      -ms-overflow-style: none; // IE\n\n      // Chrome, Edge & Safari\n      &::-webkit-scrollbar {\n        display: none;\n      }\n    }\n\n    &:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-start) {\n      .x-sliding-panel__button-left {\n        opacity: 1;\n        pointer-events: all;\n      }\n    }\n    &:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-end) {\n      .x-sliding-panel__button-right {\n        opacity: 1;\n        pointer-events: all;\n      }\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component allows for any other component or element inside it to be horizontally navigable. It\nalso implements customizable buttons as well as other minor customizations to its general behavior.\nThe component uses the method `scrollBy` from `Element` to function, and it doesn't work properly in\nall browsers. A polyfill for the `scrollBy` would be needed for the component to behave as expected\nin those browsers.\n\n### Default usage\n\nSimplest implementation of the component, just a list-based component inside its slot.\n\n```vue\n<SlidingPanel>\n  <RelatedTags />\n</SlidingPanel>\n```\n\n### Behavior customization\n\nEdit how much the scroll travels when navigating with the buttons by changing the `scrollFactor`.\n\n```vue\n<SlidingPanel :scrollFactor=\"1.2\">\n  <RelatedTags />\n</SlidingPanel>\n```\n\nHide the navigational buttons completely by setting the `showButtons` prop to `false`. This is\nintended to be used when other scrolling options are available, like in mobile, where you can scroll\njust by swiping.\n\n```vue\n<SlidingPanel :showButtons=\"isMobile\">\n  <RelatedTags />\n</SlidingPanel>\n```\n\n### Overriding Button content\n\nBy default the buttons show an arrow depicting the direction the scroll would go to when clicked,\nbut this content can be customized with anything, from characters to SVG and images.\n\n```vue\n<SlidingPanel>\n  <template #sliding-panel-left-button>\n    Left\n  </template>\n  <RelatedTags />\n  <template #sliding-panel-right-button>\n    Right\n  </template>\n</SlidingPanel>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/snippet-callbacks.vue.js

@@ -0,0 +1,47 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+import script from './snippet-callbacks.vue_rollup-plugin-vue=script.js';
+
+/* script */
+var __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("GlobalXBus", _vm._g({}, _vm.eventListeners))
+};
+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__ = false;
+  /* 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=snippet-callbacks.vue.js.map

package/js/components/snippet-callbacks.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snippet-callbacks.vue.js","sources":["../../../src/components/snippet-callbacks.vue"],"sourcesContent":["<template>\n  <GlobalXBus v-on=\"eventListeners\" />\n</template>\n\n<script lang=\"ts\">\n  import { Component, Inject } from 'vue-property-decorator';\n  import Vue from 'vue';\n  import { map } from '../utils/object';\n  import { WireMetadata } from '../wiring';\n  import { SnippetConfig, XEventListeners } from '../x-installer/api/api.types';\n  import GlobalXBus from './global-x-bus.vue';\n\n  /**\n   * This component subscribes to any {@link XEvent} with a custom callbacks provided by the snippet\n   * configuration.\n   *\n   * @public\n   */\n  @Component({\n    components: { GlobalXBus }\n  })\n  export default class SnippetCallbacks extends Vue {\n    /**\n     * Injects {@link SnippetConfig} provided by an ancestor as snippetConfig.\n     *\n     * @internal\n     */\n    @Inject('snippetConfig')\n    public snippetConfig!: SnippetConfig;\n\n    /**\n     * It maps all the callbacks provided by the snippetConfig and adds an emit to each one.\n     *\n     * @returns The event listeners with the {@link XEventsTypes.SnippetCallbackExecuted} emit in\n     * the callback.\n     *\n     * @internal\n     *\n     */\n    protected get eventListeners(): XEventListeners {\n      const { callbacks } = this.snippetConfig;\n      return callbacks\n        ? map(callbacks, (eventName, callback) => {\n            return (payload: unknown, metadata: WireMetadata) => {\n              const callbackReturn = callback(payload as never, metadata);\n              this.$x.emit('SnippetCallbackExecuted', {\n                event: eventName,\n                callbackReturn\n              });\n            };\n          })\n        : ({} as XEventListeners);\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThe `SnippetCallbacks` will emit the `SnippetCallbackExecuted` each time a callback provided by the\nsnippetConfig is fired.\n\n## See it in action\n\nThis component does not render anything. Its only responsibility is to receive any callback that\nwill be triggered once its listened event is emitted.\n\n```vue\n<template>\n  <SnippetCallbacks />\n</template>\n\n<script>\n  import { SnippetCallbacks } from '@empathyco/x-components';\n  export default {\n    name: 'SnippetCallbacksTest',\n    components: {\n      SnippetCallbacks\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/snippet-callbacks.vue_rollup-plugin-vue=script.js

@@ -0,0 +1,58 @@
+import { __extends, __decorate } from 'tslib';
+import Vue from 'vue';
+import { Inject, Component } from 'vue-property-decorator';
+import { map } from '../utils/object.js';
+import GlobalXBus from './global-x-bus.vue.js';
+
+/**
+ * This component subscribes to any {@link XEvent} with a custom callbacks provided by the snippet
+ * configuration.
+ *
+ * @public
+ */
+var SnippetCallbacks = /** @class */ (function (_super) {
+    __extends(SnippetCallbacks, _super);
+    function SnippetCallbacks() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(SnippetCallbacks.prototype, "eventListeners", {
+        /**
+         * It maps all the callbacks provided by the snippetConfig and adds an emit to each one.
+         *
+         * @returns The event listeners with the {@link XEventsTypes.SnippetCallbackExecuted} emit in
+         * the callback.
+         *
+         * @internal
+         *
+         */
+        get: function () {
+            var _this = this;
+            var callbacks = this.snippetConfig.callbacks;
+            return callbacks
+                ? map(callbacks, function (eventName, callback) {
+                    return function (payload, metadata) {
+                        var callbackReturn = callback(payload, metadata);
+                        _this.$x.emit('SnippetCallbackExecuted', {
+                            event: eventName,
+                            callbackReturn: callbackReturn
+                        });
+                    };
+                })
+                : {};
+        },
+        enumerable: false,
+        configurable: true
+    });
+    __decorate([
+        Inject('snippetConfig')
+    ], SnippetCallbacks.prototype, "snippetConfig", void 0);
+    SnippetCallbacks = __decorate([
+        Component({
+            components: { GlobalXBus: GlobalXBus }
+        })
+    ], SnippetCallbacks);
+    return SnippetCallbacks;
+}(Vue));
+
+export default SnippetCallbacks;
+//# sourceMappingURL=snippet-callbacks.vue_rollup-plugin-vue=script.js.map

package/js/components/snippet-callbacks.vue_rollup-plugin-vue=script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snippet-callbacks.vue_rollup-plugin-vue=script.js","sources":["../../../src/components/snippet-callbacks.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\nimport { Component, Inject } from 'vue-property-decorator';\nimport Vue from 'vue';\nimport { map } from '../utils/object';\nimport { WireMetadata } from '../wiring';\nimport { SnippetConfig, XEventListeners } from '../x-installer/api/api.types';\nimport GlobalXBus from './global-x-bus.vue';\n\n/**\n * This component subscribes to any {@link XEvent} with a custom callbacks provided by the snippet\n * configuration.\n *\n * @public\n */\n@Component({\n  components: { GlobalXBus }\n})\nexport default class SnippetCallbacks extends Vue {\n  /**\n   * Injects {@link SnippetConfig} provided by an ancestor as snippetConfig.\n   *\n   * @internal\n   */\n  @Inject('snippetConfig')\n  public snippetConfig!: SnippetConfig;\n\n  /**\n   * It maps all the callbacks provided by the snippetConfig and adds an emit to each one.\n   *\n   * @returns The event listeners with the {@link XEventsTypes.SnippetCallbackExecuted} emit in\n   * the callback.\n   *\n   * @internal\n   *\n   */\n  protected get eventListeners(): XEventListeners {\n    const { callbacks } = this.snippetConfig;\n    return callbacks\n      ? map(callbacks, (eventName, callback) => {\n          return (payload: unknown, metadata: WireMetadata) => {\n            const callbackReturn = callback(payload as never, metadata);\n            this.$x.emit('SnippetCallbackExecuted', {\n              event: eventName,\n              callbackReturn\n            });\n          };\n        })\n      : ({} as XEventListeners);\n  }\n}\n"],"names":[],"mappings":";;;;;;AAYA;;;;;;AASA;IAA8C,oCAAG;IAAjD;;KAgCC;IAdC,sBAAc,4CAAc;;;;;;;;;;aAA5B;YAAA,iBAaC;YAZS,IAAA,SAAS,GAAK,IAAI,CAAC,aAAa,UAAvB,CAAwB;YACzC,OAAO,SAAS;kBACZ,GAAG,CAAC,SAAS,EAAE,UAAC,SAAS,EAAE,QAAQ;oBACjC,OAAO,UAAC,OAAgB,EAAE,QAAsB;wBAC9C,IAAM,cAAc,GAAG,QAAQ,CAAC,OAAgB,EAAE,QAAQ,CAAC,CAAC;wBAC5D,KAAI,CAAC,EAAE,CAAC,IAAI,CAAC,yBAAyB,EAAE;4BACtC,KAAK,EAAE,SAAS;4BAChB,cAAc,gBAAA;yBACf,CAAC,CAAC;qBACJ,CAAC;iBACH,CAAC;kBACD,EAAsB,CAAC;SAC7B;;;OAAA;IAxBD;QADC,MAAM,CAAC,eAAe,CAAC;2DACa;IAPlB,gBAAgB;QAHpC,SAAS,CAAC;YACT,UAAU,EAAE,EAAE,UAAU,YAAA,EAAE;SAC3B,CAAC;OACmB,gBAAgB,CAgCpC;IAAD,uBAAC;CAAA,CAhC6C,GAAG;;;;"}

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

@@ -5,7 +5,7 @@ import script from './base-suggestion.vue_rollup-plugin-vue=script.js';
 var __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,24 +14,22 @@ var __vue_render__ = function() {
     {
       staticClass: "x-suggestion",
       class: _vm.dynamicCSSClasses,
-      on: { click: _vm.emitEvents }
+      on: { click: _vm.emitEvents },
     },
     [
       _vm._t(
         "default",
-        function() {
+        function () {
           return [
             _c("span", {
               staticClass: "x-suggestion__query",
               attrs: { "aria-label": _vm.suggestion.query },
-              domProps: { innerHTML: _vm._s(_vm.queryHTML) }
-            })
-          ]
+              domProps: { innerHTML: _vm._s(_vm.queryHTML) },
+            }) ]
         },
         null,
         { suggestion: _vm.suggestion, queryHTML: _vm.queryHTML }
-      )
-    ],
+      ) ],
     2
   )
 };

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

@@ -1 +1 @@
-{"version":3,"file":"base-suggestion.vue.js","sources":["../../../../src/components/suggestions/base-suggestion.vue"],"sourcesContent":["<template>\n  <button @click=\"emitEvents\" :class=\"dynamicCSSClasses\" class=\"x-suggestion\">\n    <!-- eslint-disable max-len -->\n    <!--\n      @slot Button content\n          @binding {Suggestion} suggestion - Suggestion data\n          @binding {string} queryHTML - Suggestion's query with the matching part inside a `<span>` tag\n    -->\n    <!-- eslint-enable max-len -->\n    <slot v-bind=\"{ suggestion, queryHTML }\">\n      <span v-html=\"queryHTML\" :aria-label=\"suggestion.query\" class=\"x-suggestion__query\" />\n    </slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { Suggestion } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { QueryFeature } from '../../types/origin';\n  import { forEach } from '../../utils/object';\n  import { normalizeString } from '../../utils/normalize';\n  import { sanitize } from '../../utils/sanitize';\n  import { VueCSSClasses } from '../../utils/types';\n  import { XEventsTypes } from '../../wiring/events.types';\n\n  /**\n   * Renders a button with a default slot. It receives a query, which should be the query of the\n   * module using this component, a suggestion, the {@link XEvent | XEvents} that will be emitted\n   * on click with a given feature.\n   *\n   * The default slot receives the suggestion and the matched query has props.\n   *\n   * @public\n   */\n  @Component\n  export default class BaseSuggestion extends Vue {\n    /**\n     * The normalized query of the module using this component.\n     *\n     * @public\n     */\n    @Prop({ default: '' })\n    protected query!: string;\n\n    /**\n     * The suggestion to render and use in the default slot.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected suggestion!: Suggestion;\n\n    /**\n     * The feature from which the events will be emitted.\n     *\n     * @public\n     */\n    @Prop() //TODO: set to true when the suggestions components pass it.\n    protected feature?: QueryFeature;\n\n    /**\n     * The {@link XEvent | XEvents} that will be emitted when selecting a suggestion.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected suggestionSelectedEvents!: Partial<XEventsTypes>;\n\n    /**\n     * The event handler that will be triggered when clicking on a suggestion.\n     *\n     * @remarks\n     * * UserAcceptedAQuery: suggestion.query\n     * * UserSelectedASuggestion: suggestion\n     * * Merges the events defined in the suggestionSelectedEvents prop and also emits them\n     *\n     * @returns The {@link XEvent | XEvents} to emit.\n     * @public\n     */\n    protected get events(): Partial<XEventsTypes> {\n      return {\n        UserAcceptedAQuery: this.suggestion.query,\n        UserSelectedASuggestion: this.suggestion,\n        ...this.suggestionSelectedEvents\n      };\n    }\n\n    /**\n     * Emits the events when the button is clicked.\n     *\n     * @public\n     */\n    protected emitEvents(): void {\n      forEach(this.events, (event, payload) => {\n        this.$x.emit(event, payload, {\n          target: this.$el as HTMLElement,\n          feature: this.feature\n        });\n      });\n    }\n\n    /**\n     * Checks if the normalized suggestion query matches with the module's query so it has a\n     * matching part.\n     *\n     * @returns If the query has a matching part or not.\n     * @internal\n     */\n    protected get hasMatchingQuery(): boolean {\n      return !!this.query && normalizeString(this.suggestion.query).includes(this.query);\n    }\n\n    /**\n     * Generates css classes dynamically.\n     *\n     * @remarks\n     * 'x-suggestion--matching added when the query should be matched.\n     *\n     * @returns The {@link VueCSSClasses} classes.\n     * @public\n     */\n    protected get dynamicCSSClasses(): VueCSSClasses {\n      return {\n        'x-suggestion--matching': this.hasMatchingQuery\n      };\n    }\n\n    /**\n     * Highlights the matching part of the suggestion query with the query passed as prop of the\n     * component putting it inside a `<span>` tag.\n     *\n     * @remarks\n     * The query prop should be normalized.\n     *\n     * @returns The suggestion's query with the matching part inside a `<span>` tag.\n     * @public\n     */\n    protected get queryHTML(): string {\n      if (this.hasMatchingQuery) {\n        const matcherIndex = normalizeString(this.suggestion.query).indexOf(this.query);\n\n        const [beginning, matching, end] = this.splitAt(\n          this.suggestion.query,\n          matcherIndex,\n          this.query.length\n        );\n\n        const attrsMatching = 'data-test=\"matching-part\" class=\"x-suggestion__matching-part\"';\n        return `${beginning}<span ${attrsMatching}>${matching}</span>${end}`;\n      }\n\n      return sanitize(this.suggestion.query);\n    }\n\n    /**\n     * Splits the label in three parts based on two indexes.\n     *\n     * @param label - The string that will be divided in three parts.\n     * @param start - The first index that the label will be divided by.\n     * @param skip - The second index that the label will be divided by.\n     *\n     * @returns The three parts of the divided label.\n     * @internal\n     */\n    protected splitAt(label: string, start: number, skip: number): [string, string, string] {\n      const startPart = label.substr(0, start);\n      const matchingPart = label.substr(start, skip);\n      const endPart = label.substr(start + skip);\n\n      return [sanitize(startPart), sanitize(matchingPart), sanitize(endPart)];\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n# Examples\n\nThis default suggestion component expects a suggestion to render and pass to its default slot, a\nnormalized query to compare with the suggestion's query and highlight its matching parts and events\nto emit when the suggestion is selected.\n\n## Default usage\n\n```vue\n<BaseSuggestion v-bind=\"{ query, suggestion, suggestionSelectedEvents }\" />\n```\n\n## Customized usage\n\n```vue\n<BaseSuggestion v-bind=\"{ query, suggestion, suggestionSelectedEvents }\">\n  <template #default=\"{ suggestion, queryHTML }\">\n    <span\n      class=\"my-suggestion\"\n      v-html=\"queryHTML\"\n      :aria-label=\"suggestion.query\"\n    />\n  </template>\n</BaseSuggestion>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserAcceptedAQuery`: the event is emitted after the user clicks the button. The event payload is\n  the suggestion query data.\n- `UserSelectedASuggestion`: the event is emitted after the user clicks the button. The event\n  payload is the suggestion data.\n- The component can emit more events on click using the `suggestionSelectedEvents` prop.\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-suggestion.vue.js","sources":["../../../../src/components/suggestions/base-suggestion.vue"],"sourcesContent":["<template>\n  <button @click=\"emitEvents\" :class=\"dynamicCSSClasses\" class=\"x-suggestion\">\n    <!-- eslint-disable max-len -->\n    <!--\n      @slot Button content\n          @binding {Suggestion} suggestion - Suggestion data\n          @binding {string} queryHTML - Suggestion's query with the matching part inside a `<span>` tag\n    -->\n    <!-- eslint-enable max-len -->\n    <slot v-bind=\"{ suggestion, queryHTML }\">\n      <span v-html=\"queryHTML\" :aria-label=\"suggestion.query\" class=\"x-suggestion__query\" />\n    </slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { Suggestion } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { QueryFeature } from '../../types/origin';\n  import { forEach } from '../../utils/object';\n  import { normalizeString } from '../../utils/normalize';\n  import { sanitize } from '../../utils/sanitize';\n  import { VueCSSClasses } from '../../utils/types';\n  import { XEventsTypes } from '../../wiring/events.types';\n\n  /**\n   * Renders a button with a default slot. It receives a query, which should be the query of the\n   * module using this component, a suggestion, the {@link XEvent | XEvents} that will be emitted\n   * on click with a given feature.\n   *\n   * The default slot receives the suggestion and the matched query has props.\n   *\n   * @public\n   */\n  @Component\n  export default class BaseSuggestion extends Vue {\n    /**\n     * The normalized query of the module using this component.\n     *\n     * @public\n     */\n    @Prop({ default: '' })\n    protected query!: string;\n\n    /**\n     * The suggestion to render and use in the default slot.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected suggestion!: Suggestion;\n\n    /**\n     * The feature from which the events will be emitted.\n     *\n     * @public\n     */\n    @Prop() //TODO: set to true when the suggestions components pass it.\n    protected feature?: QueryFeature;\n\n    /**\n     * The {@link XEvent | XEvents} that will be emitted when selecting a suggestion.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected suggestionSelectedEvents!: Partial<XEventsTypes>;\n\n    /**\n     * The event handler that will be triggered when clicking on a suggestion.\n     *\n     * @remarks\n     * * UserAcceptedAQuery: suggestion.query\n     * * UserSelectedASuggestion: suggestion\n     * * Merges the events defined in the suggestionSelectedEvents prop and also emits them\n     *\n     * @returns The {@link XEvent | XEvents} to emit.\n     * @public\n     */\n    protected get events(): Partial<XEventsTypes> {\n      return {\n        UserAcceptedAQuery: this.suggestion.query,\n        UserSelectedASuggestion: this.suggestion,\n        ...this.suggestionSelectedEvents\n      };\n    }\n\n    /**\n     * Emits the events when the button is clicked.\n     *\n     * @public\n     */\n    protected emitEvents(): void {\n      forEach(this.events, (event, payload) => {\n        this.$x.emit(event, payload, {\n          target: this.$el as HTMLElement,\n          feature: this.feature\n        });\n      });\n    }\n\n    /**\n     * Checks if the normalized suggestion query matches with the module's query so it has a\n     * matching part.\n     *\n     * @returns If the query has a matching part or not.\n     * @internal\n     */\n    protected get hasMatchingQuery(): boolean {\n      return !!this.query && normalizeString(this.suggestion.query).includes(this.query);\n    }\n\n    /**\n     * Generates css classes dynamically.\n     *\n     * @remarks\n     * 'x-suggestion--matching added when the query should be matched.\n     *\n     * @returns The {@link VueCSSClasses} classes.\n     * @public\n     */\n    protected get dynamicCSSClasses(): VueCSSClasses {\n      return {\n        'x-suggestion--matching': this.hasMatchingQuery\n      };\n    }\n\n    /**\n     * Highlights the matching part of the suggestion query with the query passed as prop of the\n     * component putting it inside a `<span>` tag.\n     *\n     * @remarks\n     * The query prop should be normalized.\n     *\n     * @returns The suggestion's query with the matching part inside a `<span>` tag.\n     * @public\n     */\n    protected get queryHTML(): string {\n      if (this.hasMatchingQuery) {\n        const matcherIndex = normalizeString(this.suggestion.query).indexOf(this.query);\n\n        const [beginning, matching, end] = this.splitAt(\n          this.suggestion.query,\n          matcherIndex,\n          this.query.length\n        );\n\n        const attrsMatching = 'data-test=\"matching-part\" class=\"x-suggestion__matching-part\"';\n        return `${beginning}<span ${attrsMatching}>${matching}</span>${end}`;\n      }\n\n      return sanitize(this.suggestion.query);\n    }\n\n    /**\n     * Splits the label in three parts based on two indexes.\n     *\n     * @param label - The string that will be divided in three parts.\n     * @param start - The first index that the label will be divided by.\n     * @param skip - The second index that the label will be divided by.\n     *\n     * @returns The three parts of the divided label.\n     * @internal\n     */\n    protected splitAt(label: string, start: number, skip: number): [string, string, string] {\n      const startPart = label.substr(0, start);\n      const matchingPart = label.substr(start, skip);\n      const endPart = label.substr(start + skip);\n\n      return [sanitize(startPart), sanitize(matchingPart), sanitize(endPart)];\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis default suggestion component expects a suggestion to render and pass to its default slot, a\nnormalized query to compare with the suggestion's query and highlight its matching parts and events\nto emit when the suggestion is selected.\n\n### Default usage\n\n```vue\n<BaseSuggestion v-bind=\"{ query, suggestion, suggestionSelectedEvents }\" />\n```\n\n### Customized usage\n\n```vue\n<BaseSuggestion v-bind=\"{ query, suggestion, suggestionSelectedEvents }\">\n  <template #default=\"{ suggestion, queryHTML }\">\n    <span\n      class=\"my-suggestion\"\n      v-html=\"queryHTML\"\n      :aria-label=\"suggestion.query\"\n    />\n  </template>\n</BaseSuggestion>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserAcceptedAQuery`: the event is emitted after the user clicks the button. The event payload is\n  the suggestion query data.\n- `UserSelectedASuggestion`: the event is emitted after the user clicks the button. The event\n  payload is the suggestion data.\n- The component can emit more events on click using the `suggestionSelectedEvents` prop.\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -6,7 +6,7 @@ import script from './base-suggestions.vue_rollup-plugin-vue=script.js';
 var __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;
@@ -16,22 +16,21 @@ var __vue_render__ = function() {
         {
           tag: "component",
           staticClass: "x-list x-suggestions",
-          attrs: { tag: "ul" }
+          attrs: { tag: "ul" },
         },
-        _vm._l(_vm.suggestionsToRender, function(suggestion, index) {
+        _vm._l(_vm.suggestionsToRender, function (suggestion, index) {
           return _c(
             "li",
             {
               key: _vm.suggestionsKeys[index],
               staticClass: "x-suggestions__item",
-              attrs: { "data-test": "suggestion-item" }
+              attrs: { "data-test": "suggestion-item" },
             },
             [
               _vm._t("default", null, null, {
                 suggestion: suggestion,
-                index: index
-              })
-            ],
+                index: index,
+              }) ],
             2
           )
         }),
@@ -45,11 +44,11 @@ __vue_render__._withStripped = true;
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-a5b2e246_0", { source: ".x-suggestions[data-v-a5b2e246] {\n  list-style-type: none;\n}", map: undefined, media: undefined });
+    inject("data-v-162f615e_0", { source: ".x-suggestions[data-v-162f615e] {\n  list-style-type: none;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-a5b2e246";
+  var __vue_scope_id__ = "data-v-162f615e";
   /* module identifier */
   var __vue_module_identifier__ = undefined;
   /* functional template */

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

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