npm - @empathyco/x-components - Versions diffs - 3.0.0-alpha.154 → 3.0.0-alpha.157 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (255) hide show

package/js/components/result/base-result-image.vue_rollup-plugin-vue_styles.0.vue.js ADDED Viewed

@@ -0,0 +1,7 @@
+import { createInjector } from 'vue-runtime-helpers';
+var css = ".x-result-picture[data-v-66ab7bce] {\n  min-width: 1px;\n  min-height: 1px;\n  position: relative;\n}\n.x-result-picture__image[data-v-66ab7bce] {\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n}";
+const injector=createInjector({});injector('/__w/x/x/packages/x-components/src/components/result/base-result-image.vue?rollup-plugin-vue=styles.0.css',{source:css});
+export { css, css as default };
+//# sourceMappingURL=base-result-image.vue_rollup-plugin-vue_styles.0.vue.js.map

package/js/components/result/base-result-image.vue_rollup-plugin-vue_styles.0.vue.js.map ADDED Viewed

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

package/js/components/result/base-result-link.vue.js CHANGED Viewed

@@ -1,10 +1,9 @@
 import script from './base-result-link.vue_rollup-plugin-vue_script.vue.js';
+import './base-result-link.vue_rollup-plugin-vue_styles.0.vue.js';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
-import __vue_create_injector__ from 'vue-runtime-helpers/dist/inject-style/browser.mjs';
 /* script */
 const __vue_script__ = script;
 /* template */
 var __vue_render__ = function () {
   var _vm = this;
@@ -36,17 +35,15 @@ var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
   /* style */
-  const __vue_inject_styles__ = function (inject) {
-    if (!inject) return
-    inject("data-v-2fa908e2_0", { source: ".x-result-link[data-v-2fa908e2] {\n  text-decoration: none;\n}", map: undefined, media: undefined });
-  };
+  const __vue_inject_styles__ = undefined;
   /* scoped */
   const __vue_scope_id__ = "data-v-2fa908e2";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */
   const __vue_is_functional_template__ = false;
+  /* style inject */
   /* style inject SSR */
   /* style inject shadow dom */
@@ -61,7 +58,7 @@ __vue_render__._withStripped = true;
     __vue_is_functional_template__,
     __vue_module_identifier__,
     false,
-    __vue_create_injector__,
+    undefined,
     undefined,
     undefined
   );

package/js/components/result/base-result-link.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"base-result-link.vue.js","sources":["../../../../src/components/result/base-result-link.vue"],"sourcesContent":["<template>\n <a\n @click=\"emitUserClickedAResult\"\n @click.right=\"emitUserClickedAResult\"\n @click.middle=\"emitUserClickedAResult\"\n :href=\"result.url\"\n class=\"x-result-link\"\n data-test=\"result-link\"\n >\n <!--\n @slot (Required) Link content with a text, an image, another component or both\n @binding {Result} result - Result data\n -->\n <slot :result=\"result\" />\n </a>\n</template>\n\n<script lang=\"ts\">\n import { Result } from '@empathyco/x-types';\n import Vue from 'vue';\n import { Component, Inject, Prop } from 'vue-property-decorator';\n import { PropsWithType } from '../../utils/types';\n import { 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\n export 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</script>\n\n<style lang=\"scss\" scoped>\n .x-result-link {\n text-decoration: none;\n }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following event:\n\n- [`UserClickedAResult`](x-components.xeventstypes.userclickedaresult.md)\n\nThe component can emit more events on click using the `resultClickExtraEvents` prop.\n\n## See it in action\n\nThis component is a wrapper for the result contents (images, name, price...) It may be part of the\nsearch result page, recommendations or other section which needs to include results.\n\nAdditionally, this component may be injected other events to be emitted on click event, so,\ndepending where it's used its father component may provide this events.\n\nThe result prop is required. It will render a `<a></a>` with the href to the result URL:\n\n```vue\n<BaseResultLink :result=\"result\">\n <template #default=\"{ result }\">\n <img :src=\"result.images[0]\"/>\n <span>{{ result.name }}</span>\n </template>\n</BaseResultLink>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"base-result-link.vue.js","sources":["../../../../src/components/result/base-result-link.vue"],"sourcesContent":["<template>\n <a\n @click=\"emitUserClickedAResult\"\n @click.right=\"emitUserClickedAResult\"\n @click.middle=\"emitUserClickedAResult\"\n :href=\"result.url\"\n class=\"x-result-link\"\n data-test=\"result-link\"\n >\n <!--\n @slot (Required) Link content with a text, an image, another component or both\n @binding {Result} result - Result data\n -->\n <slot :result=\"result\" />\n </a>\n</template>\n\n<script lang=\"ts\">\n import { Result } from '@empathyco/x-types';\n import Vue from 'vue';\n import { Component, Inject, Prop } from 'vue-property-decorator';\n import { PropsWithType } from '../../utils/types';\n import { 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\n export 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</script>\n\n<style lang=\"scss\" scoped>\n .x-result-link {\n text-decoration: none;\n }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following event:\n\n- [`UserClickedAResult`](x-components.xeventstypes.userclickedaresult.md)\n\nThe component can emit more events on click using the `resultClickExtraEvents` prop.\n\n## See it in action\n\nThis component is a wrapper for the result contents (images, name, price...) It may be part of the\nsearch result page, recommendations or other section which needs to include results.\n\nAdditionally, this component may be injected other events to be emitted on click event, so,\ndepending where it's used its father component may provide this events.\n\nThe result prop is required. It will render a `<a></a>` with the href to the result URL:\n\n```vue\n<BaseResultLink :result=\"result\">\n <template #default=\"{ result }\">\n <img :src=\"result.images[0]\"/>\n <span>{{ result.name }}</span>\n </template>\n</BaseResultLink>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/result/base-result-link.vue_rollup-plugin-vue_styles.0.vue.js ADDED Viewed

@@ -0,0 +1,7 @@
+import { createInjector } from 'vue-runtime-helpers';
+var css = ".x-result-link[data-v-2fa908e2] {\n  text-decoration: none;\n}";
+const injector=createInjector({});injector('/__w/x/x/packages/x-components/src/components/result/base-result-link.vue?rollup-plugin-vue=styles.0.css',{source:css});
+export { css, css as default };
+//# sourceMappingURL=base-result-link.vue_rollup-plugin-vue_styles.0.vue.js.map

package/js/components/result/base-result-link.vue_rollup-plugin-vue_styles.0.vue.js.map ADDED Viewed

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

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

@@ -1,10 +1,9 @@
 import script from './base-result-rating.vue_rollup-plugin-vue_script.vue.js';
+import './base-result-rating.vue_rollup-plugin-vue_styles.0.vue.js';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
-import __vue_create_injector__ from 'vue-runtime-helpers/dist/inject-style/browser.mjs';
 /* script */
 const __vue_script__ = script;
 /* template */
 var __vue_render__ = function () {
   var _vm = this;
@@ -68,17 +67,15 @@ var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
   /* style */
-  const __vue_inject_styles__ = function (inject) {
-    if (!inject) return
-    inject("data-v-ae12fb70_0", { source: ".x-result-rating[data-v-ae12fb70] {\n  color: inherit;\n  text-decoration: none;\n}", map: undefined, media: undefined });
-  };
+  const __vue_inject_styles__ = undefined;
   /* scoped */
   const __vue_scope_id__ = "data-v-ae12fb70";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */
   const __vue_is_functional_template__ = false;
+  /* style inject */
   /* style inject SSR */
   /* style inject shadow dom */
@@ -93,7 +90,7 @@ __vue_render__._withStripped = true;
     __vue_is_functional_template__,
     __vue_module_identifier__,
     false,
-    __vue_create_injector__,
+    undefined,
     undefined,
     undefined
   );

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

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

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

@@ -0,0 +1,7 @@
+import { createInjector } from 'vue-runtime-helpers';
+var css = ".x-result-rating[data-v-ae12fb70] {\n  color: inherit;\n  text-decoration: none;\n}";
+const injector=createInjector({});injector('/__w/x/x/packages/x-components/src/components/result/base-result-rating.vue?rollup-plugin-vue=styles.0.css',{source:css});
+export { css, css as default };
+//# sourceMappingURL=base-result-rating.vue_rollup-plugin-vue_styles.0.vue.js.map

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

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

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

@@ -1,10 +1,9 @@
 import script from './base-scroll.vue_rollup-plugin-vue_script.vue.js';
+import './base-scroll.vue_rollup-plugin-vue_styles.0.vue.js';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
-import __vue_create_injector__ from 'vue-runtime-helpers/dist/inject-style/browser.mjs';
 /* script */
 const __vue_script__ = script;
 /* template */
 var __vue_render__ = function () {
   var _vm = this;
@@ -25,17 +24,15 @@ var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
   /* style */
-  const __vue_inject_styles__ = function (inject) {
-    if (!inject) return
-    inject("data-v-437d066c_0", { source: ".x-base-scroll[data-v-437d066c] {\n  overflow-y: var(--x-string-overflow-scroll, auto);\n}", map: undefined, media: undefined });
-  };
+  const __vue_inject_styles__ = undefined;
   /* scoped */
   const __vue_scope_id__ = "data-v-437d066c";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */
   const __vue_is_functional_template__ = false;
+  /* style inject */
   /* style inject SSR */
   /* style inject shadow dom */
@@ -50,7 +47,7 @@ __vue_render__._withStripped = true;
     __vue_is_functional_template__,
     __vue_module_identifier__,
     false,
-    __vue_create_injector__,
+    undefined,
     undefined,
     undefined
   );

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

	@@ -1 +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 manages the state of scroll of a specified element. The\ncomponent does the necessary calculations for knowing the direction of scroll, if the scroll has\nreached to start or to end, and is about to reaching to end. The components emits the next events\ndepending of movement 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 @scroll=\"scroll\" :resetOnChange=\"false\">\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 }\n };\n</script>\n```\n\n### Reset scroll\n\nYou can configure which events reset the scroll position using the `resetOn` prop.\n\n```vue\n<template>\n <BaseScroll @scroll=\"scroll\" :resetOn=\"resetScrollEvents\">\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 data() {\n return {\n resetScrollEvents: ['UserAcceptedAQuery']\n };\n },\n methods: {\n scroll(position) {\n console.log('scroll', position);\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":[],"mappings":";;;;;AAEA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~"}
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 manages the state of scroll of a specified element. The\ncomponent does the necessary calculations for knowing the direction of scroll, if the scroll has\nreached to start or to end, and is about to reaching to end. The components emits the next events\ndepending of movement 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 @scroll=\"scroll\" :resetOnChange=\"false\">\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 }\n };\n</script>\n```\n\n### Reset scroll\n\nYou can configure which events reset the scroll position using the `resetOn` prop.\n\n```vue\n<template>\n <BaseScroll @scroll=\"scroll\" :resetOn=\"resetScrollEvents\">\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 data() {\n return {\n resetScrollEvents: ['UserAcceptedAQuery']\n };\n },\n methods: {\n scroll(position) {\n console.log('scroll', position);\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":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/scroll/base-scroll.vue_rollup-plugin-vue_styles.0.vue.js ADDED Viewed

@@ -0,0 +1,7 @@
+import { createInjector } from 'vue-runtime-helpers';
+var css = ".x-base-scroll[data-v-437d066c] {\n  overflow-y: var(--x-string-overflow-scroll, auto);\n}";
+const injector=createInjector({});injector('/__w/x/x/packages/x-components/src/components/scroll/base-scroll.vue?rollup-plugin-vue=styles.0.css',{source:css});
+export { css, css as default };
+//# sourceMappingURL=base-scroll.vue_rollup-plugin-vue_styles.0.vue.js.map

package/js/components/scroll/base-scroll.vue_rollup-plugin-vue_styles.0.vue.js.map ADDED Viewed

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

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

@@ -1,10 +1,9 @@
 import script from './sliding-panel.vue_rollup-plugin-vue_script.vue.js';
+import './sliding-panel.vue_rollup-plugin-vue_styles.0.vue.js';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
-import __vue_create_injector__ from 'vue-runtime-helpers/dist/inject-style/browser.mjs';
 /* script */
 const __vue_script__ = script;
 /* template */
 var __vue_render__ = function () {
   var _vm = this;
@@ -80,17 +79,15 @@ var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
   /* style */
-  const __vue_inject_styles__ = function (inject) {
-    if (!inject) return
-    inject("data-v-1c771718_0", { source: ".x-sliding-panel[data-v-1c771718] {\n  align-items: center;\n  display: flex;\n  flex-flow: row nowrap;\n  height: 100%;\n  position: relative;\n}\n.x-sliding-panel__button[data-v-1c771718] {\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  transition: all ease-out 0.2s;\n  z-index: 2;\n  /* To overlay the design system gradient with z-index:1 */\n}\n.x-sliding-panel__button-left[data-v-1c771718] {\n  left: 0;\n}\n.x-sliding-panel__button-right[data-v-1c771718] {\n  right: 0;\n}\n.x-sliding-panel__scroll[data-v-1c771718] {\n  display: flex;\n  flex: 100%;\n  flex-flow: row nowrap;\n  overflow: auto;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n.x-sliding-panel__scroll[data-v-1c771718]::-webkit-scrollbar {\n  display: none;\n}\n.x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-start) .x-sliding-panel__button-left[data-v-1c771718] {\n  opacity: 1;\n  pointer-events: all;\n}\n.x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-end) .x-sliding-panel__button-right[data-v-1c771718] {\n  opacity: 1;\n  pointer-events: all;\n}", map: undefined, media: undefined });
-  };
+  const __vue_inject_styles__ = undefined;
   /* scoped */
   const __vue_scope_id__ = "data-v-1c771718";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */
   const __vue_is_functional_template__ = false;
+  /* style inject */
   /* style inject SSR */
   /* style inject shadow dom */
@@ -105,7 +102,7 @@ __vue_render__._withStripped = true;
     __vue_is_functional_template__,
     __vue_module_identifier__,
     false,
-    __vue_create_injector__,
+    undefined,
     undefined,
     undefined
   );

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

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

package/js/components/sliding-panel.vue_rollup-plugin-vue_styles.0.vue.js ADDED Viewed

@@ -0,0 +1,7 @@
+import { createInjector } from 'vue-runtime-helpers';
+var css = ".x-sliding-panel[data-v-1c771718] {\n  align-items: center;\n  display: flex;\n  flex-flow: row nowrap;\n  height: 100%;\n  position: relative;\n}\n.x-sliding-panel__button[data-v-1c771718] {\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  transition: all ease-out 0.2s;\n  z-index: 2;\n  /* To overlay the design system gradient with z-index:1 */\n}\n.x-sliding-panel__button-left[data-v-1c771718] {\n  left: 0;\n}\n.x-sliding-panel__button-right[data-v-1c771718] {\n  right: 0;\n}\n.x-sliding-panel__scroll[data-v-1c771718] {\n  display: flex;\n  flex: 100%;\n  flex-flow: row nowrap;\n  overflow: auto;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n.x-sliding-panel__scroll[data-v-1c771718]::-webkit-scrollbar {\n  display: none;\n}\n.x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-start) .x-sliding-panel__button-left[data-v-1c771718] {\n  opacity: 1;\n  pointer-events: all;\n}\n.x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-end) .x-sliding-panel__button-right[data-v-1c771718] {\n  opacity: 1;\n  pointer-events: all;\n}";
+const injector=createInjector({});injector('/__w/x/x/packages/x-components/src/components/sliding-panel.vue?rollup-plugin-vue=styles.0.css',{source:css});
+export { css, css as default };
+//# sourceMappingURL=sliding-panel.vue_rollup-plugin-vue_styles.0.vue.js.map

package/js/components/sliding-panel.vue_rollup-plugin-vue_styles.0.vue.js.map ADDED Viewed

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

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

@@ -1,10 +1,9 @@
 import script from './base-suggestions.vue_rollup-plugin-vue_script.vue.js';
+import './base-suggestions.vue_rollup-plugin-vue_styles.0.vue.js';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
-import __vue_create_injector__ from 'vue-runtime-helpers/dist/inject-style/browser.mjs';
 /* script */
 const __vue_script__ = script;
 /* template */
 var __vue_render__ = function () {
   var _vm = this;
@@ -43,17 +42,15 @@ var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
   /* style */
-  const __vue_inject_styles__ = function (inject) {
-    if (!inject) return
-    inject("data-v-bb6a2776_0", { source: ".x-suggestions[data-v-bb6a2776] {\n  list-style-type: none;\n}", map: undefined, media: undefined });
-  };
+  const __vue_inject_styles__ = undefined;
   /* scoped */
   const __vue_scope_id__ = "data-v-bb6a2776";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */
   const __vue_is_functional_template__ = false;
+  /* style inject */
   /* style inject SSR */
   /* style inject shadow dom */
@@ -68,7 +65,7 @@ __vue_render__._withStripped = true;
     __vue_is_functional_template__,
     __vue_module_identifier__,
     false,
-    __vue_create_injector__,
+    undefined,
     undefined,
     undefined
   );

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

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

package/js/components/suggestions/base-suggestions.vue_rollup-plugin-vue_styles.0.vue.js ADDED Viewed

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

package/js/components/suggestions/base-suggestions.vue_rollup-plugin-vue_styles.0.vue.js.map ADDED Viewed

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

package/js/index.js CHANGED Viewed

@@ -263,6 +263,10 @@ export { popularSearches } from './x-modules/popular-searches/store/getters/popu
 export { popularSearchesXStoreModule } from './x-modules/popular-searches/store/module.js';
 export { popularSearchesWiring, setPopularSearchesExtraParams, setSearchedQueriesInPopularSearches } from './x-modules/popular-searches/wiring.js';
 export { popularSearchesXModule } from './x-modules/popular-searches/x-module.js';
+export { queriesPreviewEmitters } from './x-modules/queries-preview/store/emitters.js';
+export { queriesPreviewXStoreModule } from './x-modules/queries-preview/store/module.js';
+export { queriesPreviewXModule } from './x-modules/queries-preview/x-module.js';
+export { queriesPreviewWiring } from './x-modules/queries-preview/wiring.js';
 export { default as QuerySuggestion } from './x-modules/query-suggestions/components/query-suggestion.vue.js';
 export { default as QuerySuggestions } from './x-modules/query-suggestions/components/query-suggestions.vue.js';
 export { cancelFetchAndSaveSuggestions as cancelFetchAndSaveQuerySuggestions, fetchAndSaveSuggestions as fetchAndSaveQuerySuggestions } from './x-modules/query-suggestions/store/actions/fetch-and-save-suggestions.action.js';

package/js/index.js.map CHANGED Viewed

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

package/js/store/x.module.js CHANGED Viewed

@@ -14,6 +14,7 @@ const RootXStoreModule = {
         identifierResults: null,
         nextQueries: null,
         popularSearches: null,
+        queriesPreview: null,
         querySuggestions: null,
         recommendations: null,
         relatedTags: null,

package/js/store/x.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"x.module.js","sources":["../../../src/store/x.module.ts"],"sourcesContent":["import { Module } from 'vuex';\nimport { RootXStoreState } from './store.types';\n\n/*\n The type of the x module state has a property for each other sub-module assigned to `null`,\n * so we can avoid re-executing getters every time\n * the `store.registerModule` method is called.\n \n @internal\n /\nexport type XModuleState = { [Key in keyof RootXStoreState['x']]: null };\n\n/\n The main module of the X Store. All of the other {@link XModule \| XModules} will be\n * registered as a sub-module of this one.\n \n @internal\n */\nexport const RootXStoreModule: Module<XModuleState, any> = {\n state: () => ({\n device: null,\n empathize: null,\n extraParams: null,\n facets: null,\n historyQueries: null,\n identifierResults: null,\n nextQueries: null,\n popularSearches: null,\n querySuggestions: null,\n recommendations: null,\n relatedTags: null,\n scroll: null,\n search: null,\n searchBox: null,\n tagging: null,\n url: null\n }),\n namespaced: true\n};\n"],"names":[],"mappings":"AAYA;;;;;;MAMa,gBAAgB,GAA8B;IACzD,KAAK,EAAE,OAAO;QACZ,MAAM,EAAE,IAAI;QACZ,SAAS,EAAE,IAAI;QACf,WAAW,EAAE,IAAI;QACjB,MAAM,EAAE,IAAI;QACZ,cAAc,EAAE,IAAI;QACpB,iBAAiB,EAAE,IAAI;QACvB,WAAW,EAAE,IAAI;QACjB,eAAe,EAAE,IAAI;QACrB,gBAAgB,EAAE,IAAI;QACtB,eAAe,EAAE,IAAI;QACrB,WAAW,EAAE,IAAI;QACjB,MAAM,EAAE,IAAI;QACZ,MAAM,EAAE,IAAI;QACZ,SAAS,EAAE,IAAI;QACf,OAAO,EAAE,IAAI;QACb,GAAG,EAAE,IAAI;KACV,CAAC;IACF,UAAU,EAAE,IAAI;;;;;"}
1	+ {"version":3,"file":"x.module.js","sources":["../../../src/store/x.module.ts"],"sourcesContent":["import { Module } from 'vuex';\nimport { RootXStoreState } from './store.types';\n\n/*\n The type of the x module state has a property for each other sub-module assigned to `null`,\n * so we can avoid re-executing getters every time\n * the `store.registerModule` method is called.\n \n @internal\n /\nexport type XModuleState = { [Key in keyof RootXStoreState['x']]: null };\n\n/\n The main module of the X Store. All of the other {@link XModule \| XModules} will be\n * registered as a sub-module of this one.\n \n @internal\n */\nexport const RootXStoreModule: Module<XModuleState, any> = {\n state: () => ({\n device: null,\n empathize: null,\n extraParams: null,\n facets: null,\n historyQueries: null,\n identifierResults: null,\n nextQueries: null,\n popularSearches: null,\n queriesPreview: null,\n querySuggestions: null,\n recommendations: null,\n relatedTags: null,\n scroll: null,\n search: null,\n searchBox: null,\n tagging: null,\n url: null\n }),\n namespaced: true\n};\n"],"names":[],"mappings":"AAYA;;;;;;MAMa,gBAAgB,GAA8B;IACzD,KAAK,EAAE,OAAO;QACZ,MAAM,EAAE,IAAI;QACZ,SAAS,EAAE,IAAI;QACf,WAAW,EAAE,IAAI;QACjB,MAAM,EAAE,IAAI;QACZ,cAAc,EAAE,IAAI;QACpB,iBAAiB,EAAE,IAAI;QACvB,WAAW,EAAE,IAAI;QACjB,eAAe,EAAE,IAAI;QACrB,cAAc,EAAE,IAAI;QACpB,gBAAgB,EAAE,IAAI;QACtB,eAAe,EAAE,IAAI;QACrB,WAAW,EAAE,IAAI;QACjB,MAAM,EAAE,IAAI;QACZ,MAAM,EAAE,IAAI;QACZ,SAAS,EAAE,IAAI;QACf,OAAO,EAAE,IAAI;QACb,GAAG,EAAE,IAAI;KACV,CAAC;IACF,UAAU,EAAE,IAAI;;;;;"}

package/js/x-modules/extra-params/components/extra-params.vue_rollup-plugin-vue_script.vue.js CHANGED Viewed

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

package/js/x-modules/extra-params/components/renderless-extra-param.vue_rollup-plugin-vue_script.vue.js CHANGED Viewed

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

package/js/x-modules/extra-params/x-module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/extra-params/x-module.ts"],"sourcesContent":["import { XModule } from '../x-modules.types';\nimport { extraParamsEmitters, ~~ExtraParamsXStoreModule,~~ extraParamsXStoreModule } from './store';\nimport { extraParamsWiring } from './wiring';\n\n/*\n ExtraParams {@link XModule} alias.\n \n @public\n /\nexport type ExtraParamsXModule = XModule<ExtraParamsXStoreModule>;\n\n/\n ExtraParams {@link XModule} implementation. This module is auto-registered as soon as you\n * import any component from the `extraParams` entry point.\n \n @public\n */\nexport const extraParamsXModule: ExtraParamsXModule = {\n name: 'extraParams',\n storeModule: extraParamsXStoreModule,\n storeEmitters: extraParamsEmitters,\n wiring: extraParamsWiring\n};\n"],"names":[],"mappings":";;;;~~AAWA~~;;;;;;MAMa,kBAAkB,GAAuB;IACpD,IAAI,EAAE,aAAa;IACnB,WAAW,EAAE,uBAAuB;IACpC,aAAa,EAAE,mBAAmB;IAClC,MAAM,EAAE,iBAAiB;;;;;"}
1	+ {"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/extra-params/x-module.ts"],"sourcesContent":["import { XModule } from '../x-modules.types';\nimport { extraParamsEmitters } from './store/emitters';\nimport { extraParamsXStoreModule } from './store/module';\nimport { ExtraParamsXStoreModule } from './store/types';\nimport { extraParamsWiring } from './wiring';\n\n/*\n ExtraParams {@link XModule} alias.\n \n @public\n /\nexport type ExtraParamsXModule = XModule<ExtraParamsXStoreModule>;\n\n/\n ExtraParams {@link XModule} implementation. This module is auto-registered as soon as you\n * import any component from the `extraParams` entry point.\n \n @public\n */\nexport const extraParamsXModule: ExtraParamsXModule = {\n name: 'extraParams',\n storeModule: extraParamsXStoreModule,\n storeEmitters: extraParamsEmitters,\n wiring: extraParamsWiring\n};\n"],"names":[],"mappings":";;;;AAaA;;;;;;MAMa,kBAAkB,GAAuB;IACpD,IAAI,EAAE,aAAa;IACnB,WAAW,EAAE,uBAAuB;IACpC,aAAa,EAAE,mBAAmB;IAClC,MAAM,EAAE,iBAAiB;;;;;"}

package/js/x-modules/facets/components/clear-filters.vue_rollup-plugin-vue_script.vue.js CHANGED Viewed

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

package/js/x-modules/facets/components/facets/facets-provider.vue.js CHANGED Viewed

@@ -1,24 +1,21 @@
 import script from './facets-provider.vue_rollup-plugin-vue_script.vue.js';
+import './facets-provider.vue_rollup-plugin-vue_styles.0.vue.js';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
-import __vue_create_injector__ from 'vue-runtime-helpers/dist/inject-style/browser.mjs';
 /* script */
 const __vue_script__ = script;
 /* template */
   /* style */
-  const __vue_inject_styles__ = function (inject) {
-    if (!inject) return
-    inject("data-v-7e46f769_0", { source: ".x-facets-list[data-v-7e46f769] {\n  list-style-type: none;\n}", map: undefined, media: undefined });
-  };
+  const __vue_inject_styles__ = undefined;
   /* scoped */
   const __vue_scope_id__ = "data-v-7e46f769";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */
   const __vue_is_functional_template__ = undefined;
+  /* style inject */
   /* style inject SSR */
   /* style inject shadow dom */
@@ -33,7 +30,7 @@ const __vue_script__ = script;
     __vue_is_functional_template__,
     __vue_module_identifier__,
     false,
-    __vue_create_injector__,
+    undefined,
     undefined,
     undefined
   );