npm - @empathyco/x-components - Versions diffs - 3.0.0-alpha.34 → 3.0.0-alpha.35 - Mend

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

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 (421) hide show

package/js/x-modules/search/components/promoted.vue_rollup-plugin-vue=script.js CHANGED Viewed

@@ -16,6 +16,14 @@ var Promoted = /** @class */ (function (_super) {
     function Promoted() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
+    /**
+     * Emits the promoted click event.
+     *
+     * @internal
+     */
+    Promoted.prototype.emitClickEvent = function () {
+        this.$x.emit('UserClickedAPromoted', this.promoted);
+    };
     __decorate([
         Prop({ required: true })
     ], Promoted.prototype, "promoted", void 0);

package/js/x-modules/search/components/promoted.vue_rollup-plugin-vue=script.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"promoted.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/search/components/promoted.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\nimport { Promoted as PromotedModel } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { searchXModule } from '../x-module';\n\n/*\n A promoted result is just an item that has been inserted into the search results to advertise\n * something. Usually it is one of the first items in the grid, and has the same shape as a\n * result. It just contains a link to the promoted content, an image, and a title.\n \n @public\n /\n@Component({\n mixins: [xComponentMixin(searchXModule)]\n})\nexport default class Promoted extends Vue {\n /\n The promoted data.\n \n @public\n */\n @Prop({ required: true })\n public promoted!: PromotedModel;\n}\n"],"names":[],"mappings":";;;;;;AAcA;;;;;;;AAUA;IAAsC,4BAAG;IAAzC;;~~KAQC~~;~~IADC~~;QADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;8CACO;IAPb,QAAQ;QAH5B,SAAS,CAAC;YACT,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;SACzC,CAAC;OACmB,QAAQ,~~CAQ5B~~;IAAD,eAAC;CAAA,~~CARqC~~,GAAG;;;;"}
1	+ {"version":3,"file":"promoted.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/search/components/promoted.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\nimport { Promoted as PromotedModel } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { searchXModule } from '../x-module';\n\n/*\n A promoted result is just an item that has been inserted into the search results to advertise\n * something. Usually it is one of the first items in the grid, and has the same shape as a\n * result. It just contains a link to the promoted content, an image, and a title.\n \n @public\n /\n@Component({\n mixins: [xComponentMixin(searchXModule)]\n})\nexport default class Promoted extends Vue {\n /\n The promoted data.\n \n @public\n /\n @Prop({ required: true })\n public promoted!: PromotedModel;\n\n /\n Emits the promoted click event.\n \n @internal\n */\n protected emitClickEvent(): void {\n this.$x.emit('UserClickedAPromoted', this.promoted);\n }\n}\n"],"names":[],"mappings":";;;;;;AAcA;;;;;;;AAUA;IAAsC,4BAAG;IAAzC;;KAiBC;;;;;;IAHW,iCAAc,GAAxB;QACE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;KACrD;IATD;QADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;8CACO;IAPb,QAAQ;QAH5B,SAAS,CAAC;YACT,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;SACzC,CAAC;OACmB,QAAQ,CAiB5B;IAAD,eAAC;CAAA,CAjBqC,GAAG;;;;"}

package/js/x-modules/search/components/promoteds-list.vue_rollup-plugin-vue=script.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { __extends, __spreadArray, __decorate } from 'tslib';
 import { Prop, Component } from 'vue-property-decorator';
 import { NoElement } from '../../../components/no-element.js';
-import ItemsList from '../../../components/items-list.vue.js';
 import { State } from '../../../components/decorators/store.decorators.js';
 import { xComponentMixin } from '../../../components/x-component.mixin.js';
+import ItemsList from '../../../components/items-list.vue.js';
 import { ItemsListInjectionMixin } from '../../../components/items-list-injection.mixin.js';
 import { searchXModule } from '../x-module.js';

package/js/x-modules/search/components/redirection.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"redirection.vue.js","sources":["../../../../../src/x-modules/search/components/redirection.vue"],"sourcesContent":["<template>\n <div\n v-if=\"redirection && $scopedSlots.default\"\n class=\"x-redirection x-message\"\n data-test=\"redirection\"\n >\n <slot v-bind=\"{ redirection, redirect, abortRedirect, isRedirecting, delayInSeconds }\" />\n </div>\n</template>\n\n<script lang=\"ts\">\n import { Redirection as RedirectionModel } from '@empathyco/x-types';\n import Vue from 'vue';\n import { Component, Prop, Watch } from 'vue-property-decorator';\n import { XOn } from '../../../components/decorators/bus.decorators';\n import { State } from '../../../components/decorators/store.decorators';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { searchXModule } from '../x-module';\n\n /*\n A redirection is a component that sends the user to a link in the website. It is helpful when\n * there are queries like `help`, `shipping costs`, `my account`, where a link to a section in the\n * website will be more helpful than the set of results returned.\n \n @public\n /\n @Component({\n mixins: [xComponentMixin(searchXModule)]\n })\n export default class Redirection extends Vue {\n @State('search', 'redirections')\n public redirections!: RedirectionModel[];\n\n /\n The redirection mode. Auto for auto redirection and manual for an user interaction.\n \n @public\n /\n @Prop({ default: 'auto' })\n public mode!: 'auto' \| 'manual';\n\n /\n The waiting time in seconds until the redirection is made.\n \n @remarks this delay only works in auto mode.\n \n @public\n /\n @Prop({ default: 0 })\n public delayInSeconds!: number;\n\n /\n The timeout id, used to cancel the redirection.\n \n @internal\n /\n protected timeoutId!: number;\n\n /\n Boolean flag which indicates if the redirection is running.\n \n @public\n /\n protected isRedirecting = true;\n\n /\n Computed property which returns the first recommendation of the state, if any returns null.\n \n @returns The first redirection of the state.\n \n @internal\n /\n protected get redirection(): RedirectionModel \| null {\n return this.redirections?.[0] ?? null;\n }\n\n /\n Watcher function which adds a setTimeout to the redirect method is the component\n * is in auto mode and there are redirections.\n \n @internal\n /\n @Watch('redirections', { immediate: true })\n protected redirectWithDelay(): void {\n this.isRedirecting = true;\n if (this.mode === 'auto' && this.redirection) {\n // eslint-disable-next-line @typescript-eslint/unbound-method\n this.timeoutId = setTimeout(this.redirect, this.delayInSeconds 1000);\n }\n }\n\n /*\n Dispatches the redirection, updating the url.\n \n @public\n /\n protected redirect(): void {\n clearTimeout(this.timeoutId);\n this.$x.emit('UserClickedARedirection', this.redirection!);\n window.location.replace(this.redirection!.url);\n }\n\n /\n Stops the redirection, emitting `UserClickedAbortARedirection` event.\n \n @public\n /\n protected abortRedirect(): void {\n this.cancelRedirect();\n this.$x.emit('UserClickedAbortARedirection');\n }\n\n /\n Stops the animation if the user search another query.\n \n @internal\n */\n @XOn(['UserAcceptedAQuery', 'UserClearedQuery'])\n cancelRedirect(): void {\n clearTimeout(this.timeoutId);\n this.isRedirecting = false;\n }\n }\n</script>\n\n<style lang=\"scss\"></style>\n\n<docs lang=\"mdx\">\n~~###~~ Play with the component\n\nIn this example, a query has been searched in the search input resulting in a case where the\nresponse has a redirection.\n\nA text box appears bellow the search box indicating that you're going to be redirected to another\nweb page.\n\nThis component has two modes:\n\n- Auto mode means that the redirection will occur after a certain number of seconds passed as a\n property.\n- If the value is 0 the redirection will be instantly.\n- Manual mode means that the user have to click the redirect button or nothing will happen.\n\n_Type any term in the input field to try it out!_\n\n```vue\n<template>\n <Redirection #default=\"{ redirection, redirect, abortRedirect }\">\n <span>In a few seconds you're going to be redirected!</span>\n <span>{{ redirection.url }}</span>\n <button @click=\"redirection\">Redirect now!</button>\n <button @click=\"abortRedirect\">Abort redirection!</button>\n </Redirection>\n</template>\n\n<script>\n import { Redirection } from '@empathyco/x-components/search';\n export default {\n name: 'RedirectionDemo',\n components: {\n Redirection\n }\n };\n</script>\n```\n\n## Extending the component\n\nComponents behaviour can be changed, in this example the mode of the component will be manual\nforcing the user to accept the redirection\n\n```vue\n<template>\n <Redirection #default=\"{ redirection, redirect }\">\n <span>{{ redirection.url }}</span>\n <button @click=\"redirect\">Redirect now!</button>\n </Redirection>\n</template>\n\n<script>\n import { Redirection } from '@empathyco/x-components/search';\n export default {\n name: 'RedirectionDemo',\n components: {\n Redirection\n },\n data() {\n return {\n mode: 'manual'\n };\n }\n };\n</script>\n```\n\n## Events\n\nThis component emits the following events:\n\n- `UserClickedARedirection` after the user clicks the redirection button.\n- `UserClickedAbortARedirection` after the user clicks the abort redirection button.\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"redirection.vue.js","sources":["../../../../../src/x-modules/search/components/redirection.vue"],"sourcesContent":["<template>\n <div\n v-if=\"redirection && $scopedSlots.default\"\n class=\"x-redirection x-message\"\n data-test=\"redirection\"\n >\n <slot v-bind=\"{ redirection, redirect, abortRedirect, isRedirecting, delayInSeconds }\" />\n </div>\n</template>\n\n<script lang=\"ts\">\n import { Redirection as RedirectionModel } from '@empathyco/x-types';\n import Vue from 'vue';\n import { Component, Prop, Watch } from 'vue-property-decorator';\n import { XOn } from '../../../components/decorators/bus.decorators';\n import { State } from '../../../components/decorators/store.decorators';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { searchXModule } from '../x-module';\n\n /*\n A redirection is a component that sends the user to a link in the website. It is helpful when\n * there are queries like `help`, `shipping costs`, `my account`, where a link to a section in the\n * website will be more helpful than the set of results returned.\n \n @public\n /\n @Component({\n mixins: [xComponentMixin(searchXModule)]\n })\n export default class Redirection extends Vue {\n @State('search', 'redirections')\n public redirections!: RedirectionModel[];\n\n /\n The redirection mode. Auto for auto redirection and manual for an user interaction.\n \n @public\n /\n @Prop({ default: 'auto' })\n public mode!: 'auto' \| 'manual';\n\n /\n The waiting time in seconds until the redirection is made.\n \n @remarks this delay only works in auto mode.\n \n @public\n /\n @Prop({ default: 0 })\n public delayInSeconds!: number;\n\n /\n The timeout id, used to cancel the redirection.\n \n @internal\n /\n protected timeoutId?: number;\n\n /\n Boolean flag which indicates if the redirection is running.\n \n @public\n /\n protected isRedirecting = true;\n\n /\n Computed property which returns the first recommendation of the state, if any returns null.\n \n @returns The first redirection of the state.\n \n @internal\n /\n protected get redirection(): RedirectionModel \| null {\n return this.redirections?.[0] ?? null;\n }\n\n /\n Watcher function which adds a setTimeout to the redirect method is the component\n * is in auto mode and there are redirections.\n \n @internal\n /\n @Watch('redirections', { immediate: true })\n protected redirectWithDelay(): void {\n this.isRedirecting = true;\n if (this.mode === 'auto' && this.redirection) {\n // eslint-disable-next-line @typescript-eslint/unbound-method\n this.timeoutId = setTimeout(this.redirect, this.delayInSeconds 1000);\n }\n }\n\n /*\n Dispatches the redirection, updating the url.\n \n @public\n /\n protected redirect(): void {\n clearTimeout(this.timeoutId);\n this.$x.emit('UserClickedARedirection', this.redirection!);\n window.location.replace(this.redirection!.url);\n }\n\n /\n Stops the redirection, emitting `UserClickedAbortARedirection` event.\n \n @public\n /\n protected abortRedirect(): void {\n this.cancelRedirect();\n this.$x.emit('UserClickedAbortARedirection');\n }\n\n /\n Stops the animation if the user search another query.\n \n @internal\n */\n @XOn(['UserAcceptedAQuery', 'UserClearedQuery'])\n cancelRedirect(): void {\n clearTimeout(this.timeoutId);\n this.isRedirecting = false;\n }\n }\n</script>\n\n<style lang=\"scss\"></style>\n\n<docs lang=\"mdx\">\n## Play with the component\n\nIn this example, a query has been searched in the search input resulting in a case where the\nresponse has a redirection.\n\nA text box appears bellow the search box indicating that you're going to be redirected to another\nweb page.\n\nThis component has two modes:\n\n- Auto mode means that the redirection will occur after a certain number of seconds passed as a\n property.\n- If the value is 0 the redirection will be instantly.\n- Manual mode means that the user have to click the redirect button or nothing will happen.\n\n_Type any term in the input field to try it out!_\n\n```vue\n<template>\n <Redirection #default=\"{ redirection, redirect, abortRedirect }\">\n <span>In a few seconds you're going to be redirected!</span>\n <span>{{ redirection.url }}</span>\n <button @click=\"redirection\">Redirect now!</button>\n <button @click=\"abortRedirect\">Abort redirection!</button>\n </Redirection>\n</template>\n\n<script>\n import { Redirection } from '@empathyco/x-components/search';\n export default {\n name: 'RedirectionDemo',\n components: {\n Redirection\n }\n };\n</script>\n```\n\n## Extending the component\n\nComponents behaviour can be changed, in this example the mode of the component will be manual\nforcing the user to accept the redirection\n\n```vue\n<template>\n <Redirection #default=\"{ redirection, redirect }\">\n <span>{{ redirection.url }}</span>\n <button @click=\"redirect\">Redirect now!</button>\n </Redirection>\n</template>\n\n<script>\n import { Redirection } from '@empathyco/x-components/search';\n export default {\n name: 'RedirectionDemo',\n components: {\n Redirection\n },\n data() {\n return {\n mode: 'manual'\n };\n }\n };\n</script>\n```\n\n## Events\n\nThis component emits the following events:\n\n- `UserClickedARedirection` after the user clicks the redirection button.\n- `UserClickedAbortARedirection` after the user clicks the abort redirection button.\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/search/components/redirection.vue_rollup-plugin-vue=script.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"redirection.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/search/components/redirection.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\nimport { Redirection as RedirectionModel } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop, Watch } from 'vue-property-decorator';\nimport { XOn } from '../../../components/decorators/bus.decorators';\nimport { State } from '../../../components/decorators/store.decorators';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { searchXModule } from '../x-module';\n\n/*\n A redirection is a component that sends the user to a link in the website. It is helpful when\n * there are queries like `help`, `shipping costs`, `my account`, where a link to a section in the\n * website will be more helpful than the set of results returned.\n \n @public\n /\n@Component({\n mixins: [xComponentMixin(searchXModule)]\n})\nexport default class Redirection extends Vue {\n @State('search', 'redirections')\n public redirections!: RedirectionModel[];\n\n /\n The redirection mode. Auto for auto redirection and manual for an user interaction.\n \n @public\n /\n @Prop({ default: 'auto' })\n public mode!: 'auto' \| 'manual';\n\n /\n The waiting time in seconds until the redirection is made.\n \n @remarks this delay only works in auto mode.\n \n @public\n /\n @Prop({ default: 0 })\n public delayInSeconds!: number;\n\n /\n The timeout id, used to cancel the redirection.\n \n @internal\n /\n protected timeoutId!: number;\n\n /\n Boolean flag which indicates if the redirection is running.\n \n @public\n /\n protected isRedirecting = true;\n\n /\n Computed property which returns the first recommendation of the state, if any returns null.\n \n @returns The first redirection of the state.\n \n @internal\n /\n protected get redirection(): RedirectionModel \| null {\n return this.redirections?.[0] ?? null;\n }\n\n /\n Watcher function which adds a setTimeout to the redirect method is the component\n * is in auto mode and there are redirections.\n \n @internal\n /\n @Watch('redirections', { immediate: true })\n protected redirectWithDelay(): void {\n this.isRedirecting = true;\n if (this.mode === 'auto' && this.redirection) {\n // eslint-disable-next-line @typescript-eslint/unbound-method\n this.timeoutId = setTimeout(this.redirect, this.delayInSeconds 1000);\n }\n }\n\n /*\n Dispatches the redirection, updating the url.\n \n @public\n /\n protected redirect(): void {\n clearTimeout(this.timeoutId);\n this.$x.emit('UserClickedARedirection', this.redirection!);\n window.location.replace(this.redirection!.url);\n }\n\n /\n Stops the redirection, emitting `UserClickedAbortARedirection` event.\n \n @public\n /\n protected abortRedirect(): void {\n this.cancelRedirect();\n this.$x.emit('UserClickedAbortARedirection');\n }\n\n /\n Stops the animation if the user search another query.\n \n @internal\n */\n @XOn(['UserAcceptedAQuery', 'UserClearedQuery'])\n cancelRedirect(): void {\n clearTimeout(this.timeoutId);\n this.isRedirecting = false;\n }\n}\n"],"names":[],"mappings":";;;;;;;;AAmBA;;;;;;;AAUA;IAAyC,+BAAG;IAA5C;QAAA,qEA6FC;;;;;;QA3DW,mBAAa,GAAG,IAAI,CAAC;;KA2DhC;IAlDC,sBAAc,oCAAW;;;;;;;;aAAzB;;YACE,OAAO,MAAA,MAAA,IAAI,CAAC,YAAY,0CAAG,CAAC,CAAC,mCAAI,IAAI,CAAC;SACvC;;;OAAA;;;;;;;IASS,uCAAiB,GAA3B;QACE,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC1B,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,WAAW,EAAE;;YAE5C,IAAI,CAAC,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;SACxE;KACF;;;;;;IAOS,8BAAQ,GAAlB;QACE,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC7B,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,yBAAyB,EAAE,IAAI,CAAC,WAAY,CAAC,CAAC;QAC3D,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAY,CAAC,GAAG,CAAC,CAAC;KAChD;;;;;;IAOS,mCAAa,GAAvB;QACE,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,8BAA8B,CAAC,CAAC;KAC9C;;;;;;IAQD,oCAAc,GAAd;QACE,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC7B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;KAC5B;IA1FD;QADC,KAAK,CAAC,QAAQ,EAAE,cAAc,CAAC;qDACS;IAQzC;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC;6CACM;IAUhC;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;uDACU;IAkC/B;QADC,KAAK,CAAC,cAAc,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;wDAO1C;IA6BD;QADC,GAAG,CAAC,CAAC,oBAAoB,EAAE,kBAAkB,CAAC,CAAC;qDAI/C;IA5FkB,WAAW;QAH/B,SAAS,CAAC;YACT,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;SACzC,CAAC;OACmB,WAAW,CA6F/B;IAAD,kBAAC;CAAA,CA7FwC,GAAG;;;;"}
1	+ {"version":3,"file":"redirection.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/search/components/redirection.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\nimport { Redirection as RedirectionModel } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop, Watch } from 'vue-property-decorator';\nimport { XOn } from '../../../components/decorators/bus.decorators';\nimport { State } from '../../../components/decorators/store.decorators';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { searchXModule } from '../x-module';\n\n/*\n A redirection is a component that sends the user to a link in the website. It is helpful when\n * there are queries like `help`, `shipping costs`, `my account`, where a link to a section in the\n * website will be more helpful than the set of results returned.\n \n @public\n /\n@Component({\n mixins: [xComponentMixin(searchXModule)]\n})\nexport default class Redirection extends Vue {\n @State('search', 'redirections')\n public redirections!: RedirectionModel[];\n\n /\n The redirection mode. Auto for auto redirection and manual for an user interaction.\n \n @public\n /\n @Prop({ default: 'auto' })\n public mode!: 'auto' \| 'manual';\n\n /\n The waiting time in seconds until the redirection is made.\n \n @remarks this delay only works in auto mode.\n \n @public\n /\n @Prop({ default: 0 })\n public delayInSeconds!: number;\n\n /\n The timeout id, used to cancel the redirection.\n \n @internal\n /\n protected timeoutId?: number;\n\n /\n Boolean flag which indicates if the redirection is running.\n \n @public\n /\n protected isRedirecting = true;\n\n /\n Computed property which returns the first recommendation of the state, if any returns null.\n \n @returns The first redirection of the state.\n \n @internal\n /\n protected get redirection(): RedirectionModel \| null {\n return this.redirections?.[0] ?? null;\n }\n\n /\n Watcher function which adds a setTimeout to the redirect method is the component\n * is in auto mode and there are redirections.\n \n @internal\n /\n @Watch('redirections', { immediate: true })\n protected redirectWithDelay(): void {\n this.isRedirecting = true;\n if (this.mode === 'auto' && this.redirection) {\n // eslint-disable-next-line @typescript-eslint/unbound-method\n this.timeoutId = setTimeout(this.redirect, this.delayInSeconds 1000);\n }\n }\n\n /*\n Dispatches the redirection, updating the url.\n \n @public\n /\n protected redirect(): void {\n clearTimeout(this.timeoutId);\n this.$x.emit('UserClickedARedirection', this.redirection!);\n window.location.replace(this.redirection!.url);\n }\n\n /\n Stops the redirection, emitting `UserClickedAbortARedirection` event.\n \n @public\n /\n protected abortRedirect(): void {\n this.cancelRedirect();\n this.$x.emit('UserClickedAbortARedirection');\n }\n\n /\n Stops the animation if the user search another query.\n \n @internal\n */\n @XOn(['UserAcceptedAQuery', 'UserClearedQuery'])\n cancelRedirect(): void {\n clearTimeout(this.timeoutId);\n this.isRedirecting = false;\n }\n}\n"],"names":[],"mappings":";;;;;;;;AAmBA;;;;;;;AAUA;IAAyC,+BAAG;IAA5C;QAAA,qEA6FC;;;;;;QA3DW,mBAAa,GAAG,IAAI,CAAC;;KA2DhC;IAlDC,sBAAc,oCAAW;;;;;;;;aAAzB;;YACE,OAAO,MAAA,MAAA,IAAI,CAAC,YAAY,0CAAG,CAAC,CAAC,mCAAI,IAAI,CAAC;SACvC;;;OAAA;;;;;;;IASS,uCAAiB,GAA3B;QACE,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC1B,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,WAAW,EAAE;;YAE5C,IAAI,CAAC,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;SACxE;KACF;;;;;;IAOS,8BAAQ,GAAlB;QACE,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC7B,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,yBAAyB,EAAE,IAAI,CAAC,WAAY,CAAC,CAAC;QAC3D,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAY,CAAC,GAAG,CAAC,CAAC;KAChD;;;;;;IAOS,mCAAa,GAAvB;QACE,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,8BAA8B,CAAC,CAAC;KAC9C;;;;;;IAQD,oCAAc,GAAd;QACE,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC7B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;KAC5B;IA1FD;QADC,KAAK,CAAC,QAAQ,EAAE,cAAc,CAAC;qDACS;IAQzC;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC;6CACM;IAUhC;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;uDACU;IAkC/B;QADC,KAAK,CAAC,cAAc,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;wDAO1C;IA6BD;QADC,GAAG,CAAC,CAAC,oBAAoB,EAAE,kBAAkB,CAAC,CAAC;qDAI/C;IA5FkB,WAAW;QAH/B,SAAS,CAAC;YACT,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;SACzC,CAAC;OACmB,WAAW,CA6F/B;IAAD,kBAAC;CAAA,CA7FwC,GAAG;;;;"}

package/js/x-modules/search/components/results-list.vue_rollup-plugin-vue=script.js CHANGED Viewed

@@ -3,10 +3,10 @@ import Vue from 'vue';
 import { Prop, Component } from 'vue-property-decorator';
 import { NoElement } from '../../../components/no-element.js';
 import { XProvide } from '../../../components/decorators/injection.decorators.js';
-import { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts.js';
-import ItemsList from '../../../components/items-list.vue.js';
 import { State } from '../../../components/decorators/store.decorators.js';
 import { xComponentMixin } from '../../../components/x-component.mixin.js';
+import { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts.js';
+import ItemsList from '../../../components/items-list.vue.js';
 import { searchXModule } from '../x-module.js';
 /**

package/js/x-modules/search/components/sort-dropdown.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sort-dropdown.vue.js","sources":["../../../../../src/x-modules/search/components/sort-dropdown.vue"],"sourcesContent":["<template>\n <BaseDropdown\n @change=\"emitUserClickedASort\"\n :animation=\"animation\"\n :items=\"items\"\n :value=\"selectedSort\"\n class=\"x-sort-dropdown\"\n data-test=\"sort-dropdown\"\n >\n <template #toggle=\"{ isOpen, item }\">\n <!--\n @slot Used to render the contents of the dropdown toggle button. If not provided, it uses\n the item slot as fallback.\n @binding {Sort} item - The sort data to render.\n @binding {boolean} isOpen - True if the dropdown is opened, and false if it is closed.\n -->\n <slot v-bind=\"{ isOpen, item }\" name=\"toggle\">{{ item }}</slot>\n </template>\n <template #item=\"{ item, isHighlighted, isSelected }\">\n <!--\n @slot (required) Used to render each one of the items content, and as fallback\n for the toggle button content slot if it is not provided.\n @binding {Sort} item - Sort to render\n @binding {boolean} isHighlighted - True when the item has the focus.\n @binding {boolean} isSelected - True when the item is selected.\n -->\n <slot v-bind=\"{ item, isHighlighted, isSelected }\" name=\"item\">{{ item }}</slot>\n </template>\n </BaseDropdown>\n</template>\n\n<script lang=\"ts\">\n import { Sort } from '@empathyco/x-types';\n import Vue from 'vue';\n import { mixins } from 'vue-class-component';\n import { Component, Prop } from 'vue-property-decorator';\n import BaseDropdown from '../../../components/base-dropdown.vue';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { searchXModule } from '../x-module';\n import SortMixin from './sort.mixin';\n\n /*\n The `SortDropdown` component allows user to select the search results order. This component\n * also allows to change the selected sort programmatically.\n \n @remarks It extends {@link SortMixin}.\n \n @public\n /\n @Component({\n mixins: [xComponentMixin(searchXModule)],\n components: { BaseDropdown },\n model: {\n event: 'change'\n }\n })\n export default class SortDropdown extends mixins(SortMixin) {\n /\n The transition to use for opening and closing the dropdown.\n \n @public\n /\n @Prop()\n public animation?: string \| typeof Vue;\n /\n Emits the events related to the selection of a sort value.\n \n @param sort - The selected sort.\n * @internal\n */\n protected emitUserClickedASort(sort: Sort): void {\n this.$x.emit('UserClickedASort', sort, { target: this.$el as HTMLElement });\n this.$emit('change', sort);\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n# Sort Dropdown\n\nThe `SortDropdown` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can be received then in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `value` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing both the toggle button and each one of the possible sort\nvalues. This can be done with the`toggle` and `item` slots.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n <SortDropdown :items=\"sortValues\">\n <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>\n <template #item=\"{ item, isHighlighted, isSelected }\">\n <span v-if=\"isSelected\">✅</span>\n <span v-if=\"isHighlighted\">🟢</span>\n {{ item }}\n </template>\n </SortDropdown>\n</template>\n\n<script>\n import { SortDropdown } from '@empathyco/x-components/search';\n\n export default {\n components: {\n SortDropdown\n },\n data() {\n return { sortValues: ['Relevance', 'Price asc', 'Price desc'] };\n }\n };\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n <SortDropdown v-model=\"selectedSort\" :items=\"sortValues\">\n <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>\n <template #item=\"{ item, isHighlighted, isSelected }\">\n <span v-if=\"isSelected\">✅</span>\n <span v-if=\"isHighlighted\">🟢</span>\n {{ item }}\n </template>\n </SortDropdown>\n</template>\n\n<script>\n import { SortDropdown } from '@empathyco/x-components/search';\n\n export default {\n components: {\n SortDropdown\n },\n data() {\n return {\n selectedSort: 'Price asc',\n sortValues: ['Relevance', 'Price asc', 'Price desc']\n };\n }\n };\n</script>\n```\n\n## Events\n\nThis component emits 2 different events:\n\n- SelectedSortProvided: To sync the selected sort with the store state value. This event is emitted\n as soon as the list of items is received, whenever this list changes if there is no provided\n value, and when the provided value changes.\n- UserClickedASort: As its name suggest, the event is emitted after the user clicks one of the sort\n options. This does not mean that the sort has changed, only that the user has clicked it.\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"sort-dropdown.vue.js","sources":["../../../../../src/x-modules/search/components/sort-dropdown.vue"],"sourcesContent":["<template>\n <BaseDropdown\n @change=\"emitUserClickedASort\"\n :animation=\"animation\"\n :items=\"items\"\n :value=\"selectedSort\"\n class=\"x-sort-dropdown\"\n data-test=\"sort-dropdown\"\n >\n <template #toggle=\"{ isOpen, item }\">\n <!--\n @slot Used to render the contents of the dropdown toggle button. If not provided, it uses\n the item slot as fallback.\n @binding {Sort} item - The sort data to render.\n @binding {boolean} isOpen - True if the dropdown is opened, and false if it is closed.\n -->\n <slot v-bind=\"{ isOpen, item }\" name=\"toggle\">{{ item }}</slot>\n </template>\n <template #item=\"{ item, isHighlighted, isSelected }\">\n <!--\n @slot (required) Used to render each one of the items content, and as fallback\n for the toggle button content slot if it is not provided.\n @binding {Sort} item - Sort to render\n @binding {boolean} isHighlighted - True when the item has the focus.\n @binding {boolean} isSelected - True when the item is selected.\n -->\n <slot v-bind=\"{ item, isHighlighted, isSelected }\" name=\"item\">{{ item }}</slot>\n </template>\n </BaseDropdown>\n</template>\n\n<script lang=\"ts\">\n import { Sort } from '@empathyco/x-types';\n import Vue from 'vue';\n import { mixins } from 'vue-class-component';\n import { Component, Prop } from 'vue-property-decorator';\n import BaseDropdown from '../../../components/base-dropdown.vue';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { searchXModule } from '../x-module';\n import SortMixin from './sort.mixin';\n\n /*\n The `SortDropdown` component allows user to select the search results order. This component\n * also allows to change the selected sort programmatically.\n \n @remarks It extends {@link SortMixin}.\n \n @public\n /\n @Component({\n mixins: [xComponentMixin(searchXModule)],\n components: { BaseDropdown },\n model: {\n event: 'change'\n }\n })\n export default class SortDropdown extends mixins(SortMixin) {\n /\n The transition to use for opening and closing the dropdown.\n \n @public\n /\n @Prop()\n public animation?: string \| typeof Vue;\n /\n Emits the events related to the selection of a sort value.\n \n @param sort - The selected sort.\n * @internal\n */\n protected emitUserClickedASort(sort: Sort): void {\n this.$x.emit('UserClickedASort', sort, { target: this.$el as HTMLElement });\n this.$emit('change', sort);\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Sort Dropdown\n\nThe `SortDropdown` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can be received then in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `value` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing both the toggle button and each one of the possible sort\nvalues. This can be done with the`toggle` and `item` slots.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n <SortDropdown :items=\"sortValues\">\n <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>\n <template #item=\"{ item, isHighlighted, isSelected }\">\n <span v-if=\"isSelected\">✅</span>\n <span v-if=\"isHighlighted\">🟢</span>\n {{ item }}\n </template>\n </SortDropdown>\n</template>\n\n<script>\n import { SortDropdown } from '@empathyco/x-components/search';\n\n export default {\n components: {\n SortDropdown\n },\n data() {\n return { sortValues: ['Relevance', 'Price asc', 'Price desc'] };\n }\n };\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n <SortDropdown v-model=\"selectedSort\" :items=\"sortValues\">\n <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>\n <template #item=\"{ item, isHighlighted, isSelected }\">\n <span v-if=\"isSelected\">✅</span>\n <span v-if=\"isHighlighted\">🟢</span>\n {{ item }}\n </template>\n </SortDropdown>\n</template>\n\n<script>\n import { SortDropdown } from '@empathyco/x-components/search';\n\n export default {\n components: {\n SortDropdown\n },\n data() {\n return {\n selectedSort: 'Price asc',\n sortValues: ['Relevance', 'Price asc', 'Price desc']\n };\n }\n };\n</script>\n```\n\n## Events\n\nThis component emits 2 different events:\n\n- SelectedSortProvided: To sync the selected sort with the store state value. This event is emitted\n as soon as the list of items is received, whenever this list changes if there is no provided\n value, and when the provided value changes.\n- UserClickedASort: As its name suggest, the event is emitted after the user clicks one of the sort\n options. This does not mean that the sort has changed, only that the user has clicked it.\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/search/components/sort-list.vue.js CHANGED Viewed

@@ -58,11 +58,11 @@ __vue_render__._withStripped = true;
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-28be7717_0", { source: ".x-sort-list[data-v-28be7717] {\n  list-style-type: none;\n}", map: undefined, media: undefined });
+    inject("data-v-50022f3c_0", { source: ".x-sort-list[data-v-50022f3c] {\n  list-style-type: none;\n}", map: undefined, media: undefined });
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-28be7717";
+  var __vue_scope_id__ = "data-v-50022f3c";
   /* module identifier */
   var __vue_module_identifier__ = undefined;
   /* functional template */

package/js/x-modules/search/components/sort-list.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sort-list.vue.js","sources":["../../../../../src/x-modules/search/components/sort-list.vue"],"sourcesContent":["<template>\n <component :is=\"animation\" tag=\"ul\" class=\"x-option-list x-sort-list\" data-test=\"sort-list\">\n <li\n v-for=\"{ item, cssClasses, event } in listItems\"\n :key=\"item\"\n :class=\"cssClasses\"\n class=\"x-option-list__item x-sort-list__item\"\n >\n <BaseEventButton\n class=\"x-button x-sort-list__button\"\n data-test=\"x-sort-button\"\n :events=\"event\"\n >\n <slot v-bind=\"{ item, isSelected: item === selectedSort }\">\n {{ item }}\n </slot>\n </BaseEventButton>\n </li>\n </component>\n</template>\n\n<style lang=\"scss\" scoped>\n .x-sort-list {\n list-style-type: none;\n }\n</style>\n\n<script lang=\"ts\">\n import { Sort } from '@empathyco/x-types';\n import Vue from 'vue';\n import { mixins } from 'vue-class-component';\n import { Component, Prop } from 'vue-property-decorator';\n import { BaseEventButton } from '../../../components';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { VueCSSClasses } from '../../../utils';\n import { XEventsTypes } from '../../../wiring';\n import { searchXModule } from '../x-module';\n import SortMixin from './sort.mixin';\n\n /*\n Sort list item options.\n \n @public\n /\n interface SortListItem {\n item: Sort;\n cssClasses: VueCSSClasses;\n event: Partial<XEventsTypes>;\n }\n /\n The `SortList` component allows user to select the search results order. This component\n * also allows to change the selected sort programmatically.\n \n @remarks It extends {@link SortMixin}.\n \n @public\n /\n @Component({\n mixins: [xComponentMixin(searchXModule)],\n components: {\n BaseEventButton\n }\n })\n export default class SortList extends mixins(SortMixin) {\n /\n The transition to use for rendering the list.\n \n @public\n /\n @Prop({ default: 'ul' })\n public animation?: string \| typeof Vue;\n /\n Sort list items.\n \n @returns A list of items with their css class and the event associate to it.\n \n @internal\n */\n protected get listItems(): SortListItem[] {\n return this.items.map(item => ({\n item,\n cssClasses: [\n {\n 'x-sort-list__item--is-selected': item === this.selectedSort,\n 'x-option-list__item--is-selected': item === this.selectedSort\n }\n ],\n event: { UserClickedASort: item }\n }));\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n# Sort List\n\nThe `SortList` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can then be received in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `value` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing each one of the possible sort values. This can be done with\nthe `default` slot.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n <SortList :items=\"sortValues\">\n <template #item=\"{ item, isSelected }\">Item: {{ item }}</template>\n </SortList>\n</template>\n\n<script>\n import { SortList } from '@empathyco/x-components/search';\n\n export default {\n components: {\n SortList\n },\n data() {\n return { sortValues: ['Relevance', 'Price asc', 'Price desc'] };\n }\n };\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n <SortList v-model=\"selectedSort\" :items=\"sortValues\">\n <template #item=\"{ item, isSelected }\">\n <span v-if=\"isSelected\">✅</span>\n {{ item }}\n </template>\n </SortList>\n</template>\n\n<script>\n import { SortList } from '@empathyco/x-components/search';\n\n export default {\n components: {\n SortList\n },\n data() {\n return {\n selectedSort: 'Price asc',\n sortValues: ['Relevance', 'Price asc', 'Price desc']\n };\n }\n };\n</script>\n```\n\n## Events\n\nThis component emits 2 different events:\n\n- SelectedSortProvided: To sync the selected sort with the store state value. This event is emitted\n as soon as the list of items is received, whenever this list changes if there is no provided\n value, and when the provided value changes.\n- UserClickedASort: As its name suggest, the event is emitted after the user clicks one of the sort\n options. This does not mean that the sort has changed, only that the user has clicked it.\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"sort-list.vue.js","sources":["../../../../../src/x-modules/search/components/sort-list.vue"],"sourcesContent":["<template>\n <component :is=\"animation\" tag=\"ul\" class=\"x-option-list x-sort-list\" data-test=\"sort-list\">\n <li\n v-for=\"{ item, cssClasses, event } in listItems\"\n :key=\"item\"\n :class=\"cssClasses\"\n class=\"x-option-list__item x-sort-list__item\"\n >\n <BaseEventButton\n class=\"x-button x-sort-list__button\"\n data-test=\"x-sort-button\"\n :events=\"event\"\n >\n <slot v-bind=\"{ item, isSelected: item === selectedSort }\">\n {{ item }}\n </slot>\n </BaseEventButton>\n </li>\n </component>\n</template>\n\n<style lang=\"scss\" scoped>\n .x-sort-list {\n list-style-type: none;\n }\n</style>\n\n<script lang=\"ts\">\n import { Sort } from '@empathyco/x-types';\n import Vue from 'vue';\n import { mixins } from 'vue-class-component';\n import { Component, Prop } from 'vue-property-decorator';\n import { BaseEventButton } from '../../../components';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { VueCSSClasses } from '../../../utils';\n import { XEventsTypes } from '../../../wiring';\n import { searchXModule } from '../x-module';\n import SortMixin from './sort.mixin';\n\n /*\n Sort list item options.\n \n @public\n /\n interface SortListItem {\n item: Sort;\n cssClasses: VueCSSClasses;\n event: Partial<XEventsTypes>;\n }\n /\n The `SortList` component allows user to select the search results order. This component\n * also allows to change the selected sort programmatically.\n \n @remarks It extends {@link SortMixin}.\n \n @public\n /\n @Component({\n mixins: [xComponentMixin(searchXModule)],\n components: {\n BaseEventButton\n }\n })\n export default class SortList extends mixins(SortMixin) {\n /\n The transition to use for rendering the list.\n \n @public\n /\n @Prop({ default: 'ul' })\n public animation?: string \| typeof Vue;\n /\n Sort list items.\n \n @returns A list of items with their css class and the event associate to it.\n \n @internal\n */\n protected get listItems(): SortListItem[] {\n return this.items.map(item => ({\n item,\n cssClasses: [\n {\n 'x-sort-list__item--is-selected': item === this.selectedSort,\n 'x-option-list__item--is-selected': item === this.selectedSort\n }\n ],\n event: { UserClickedASort: item }\n }));\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Sort List\n\nThe `SortList` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can then be received in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `value` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing each one of the possible sort values. This can be done with\nthe `default` slot.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n <SortList :items=\"sortValues\">\n <template #item=\"{ item, isSelected }\">Item: {{ item }}</template>\n </SortList>\n</template>\n\n<script>\n import { SortList } from '@empathyco/x-components/search';\n\n export default {\n components: {\n SortList\n },\n data() {\n return { sortValues: ['Relevance', 'Price asc', 'Price desc'] };\n }\n };\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n <SortList v-model=\"selectedSort\" :items=\"sortValues\">\n <template #item=\"{ item, isSelected }\">\n <span v-if=\"isSelected\">✅</span>\n {{ item }}\n </template>\n </SortList>\n</template>\n\n<script>\n import { SortList } from '@empathyco/x-components/search';\n\n export default {\n components: {\n SortList\n },\n data() {\n return {\n selectedSort: 'Price asc',\n sortValues: ['Relevance', 'Price asc', 'Price desc']\n };\n }\n };\n</script>\n```\n\n## Events\n\nThis component emits 2 different events:\n\n- SelectedSortProvided: To sync the selected sort with the store state value. This event is emitted\n as soon as the list of items is received, whenever this list changes if there is no provided\n value, and when the provided value changes.\n- UserClickedASort: As its name suggest, the event is emitted after the user clicks one of the sort\n options. This does not mean that the sort has changed, only that the user has clicked it.\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/search/components/sort-list.vue_rollup-plugin-vue=script.js CHANGED Viewed

@@ -7,7 +7,7 @@ import '../../../components/animations/collapse-height.vue.js';
 import '../../../components/animations/collapse-width.vue.js';
 import '../../../components/animations/cross-fade.vue.js';
 import '../../../components/animations/fade-and-slide.vue.js';
-import '../../../components/staggering-transition-group.vue.js';
+import '../../../components/animations/staggering-transition-group.vue.js';
 import '../../../components/animations/staggered-fade-and-slide.vue.js';
 import '../../../components/animations/translate-from-left.vue.js';
 import '../../../components/animations/translate-from-right.vue.js';
@@ -69,16 +69,24 @@ import '../../../components/icons/trash.vue.js';
 import '../../../components/icons/trending-tiny.vue.js';
 import '../../../components/icons/trending.vue.js';
 import '../../../components/icons/user.vue.js';
-import '../../../components/modals/base-events-modal-close.vue.js';
+import '../../../components/decorators/store.decorators.js';
+import '../../../components/x-component.utils.js';
+import { xComponentMixin } from '../../../components/x-component.mixin.js';
 import '../../../components/modals/base-modal.vue.js';
+import '../../../components/modals/base-id-modal.vue.js';
+import '../../../components/scroll/scroll.mixin.js';
+import '../../../components/scroll/base-scroll.vue.js';
+import '../../../components/layouts/fixed-header-and-asides-layout.vue.js';
+import '../../../components/panels/base-toggle-panel.vue.js';
+import '../../../components/panels/base-id-toggle-panel.vue.js';
+import '../../../components/layouts/multi-column-max-width-layout.vue.js';
+import '../../../components/layouts/single-column-layout.vue.js';
+import '../../../components/modals/base-events-modal-close.vue.js';
 import '../../../components/modals/base-events-modal.vue.js';
 import '../../../components/modals/base-events-modal-open.vue.js';
-import '../../../components/modals/base-id-modal.vue.js';
 import '../../../components/modals/base-id-modal-close.vue.js';
 import '../../../components/modals/base-id-modal-open.vue.js';
-import '../../../components/panels/base-toggle-panel.vue.js';
 import '../../../components/panels/base-header-toggle-panel.vue.js';
-import '../../../components/panels/base-id-toggle-panel.vue.js';
 import '../../../components/panels/base-id-toggle-panel-button.vue.js';
 import '../../../components/result/base-result-add-to-cart.vue.js';
 import '../../../components/result/base-result-current-price.vue.js';
@@ -87,8 +95,6 @@ import '../../../components/result/base-result-link.vue.js';
 import '../../../components/result/base-result-previous-price.vue.js';
 import '../../../components/result/base-result-fallback-image.vue.js';
 import '../../../components/result/base-result-placeholder-image.vue.js';
-import '../../../components/scroll/scroll.mixin.js';
-import '../../../components/scroll/base-scroll.vue.js';
 import '../../../components/suggestions/base-suggestion.vue.js';
 import '../../../components/suggestions/base-suggestions.vue.js';
 import '../../../components/auto-progress-bar.vue.js';
@@ -99,11 +105,6 @@ import '../../../components/base-variable-column-grid.vue.js';
 import '../../../components/decorators/debounce.decorators.js';
 import '../../../components/sliding-panel.vue.js';
 import '../../../components/items-list.vue.js';
-import '../../../components/decorators/store.decorators.js';
-import '../../../components/x-component.utils.js';
-import { xComponentMixin } from '../../../components/x-component.mixin.js';
-import '../../../components/layouts/multi-column-max-width-layout.vue.js';
-import '../../../components/layouts/single-column-layout.vue.js';
 import '../../../components/location-provider.vue.js';
 import '../../../components/global-x-bus.vue.js';
 import '../../../components/snippet-callbacks.vue.js';

package/js/x-modules/search/components/sort-list.vue_rollup-plugin-vue=script.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sort-list.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/search/components/sort-list.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { Sort } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { mixins } from 'vue-class-component';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { BaseEventButton } from '../../../components';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { VueCSSClasses } from '../../../utils';\nimport { XEventsTypes } from '../../../wiring';\nimport { searchXModule } from '../x-module';\nimport SortMixin from './sort.mixin';\n\n/*\n Sort list item options.\n \n @public\n /\ninterface SortListItem {\n item: Sort;\n cssClasses: VueCSSClasses;\n event: Partial<XEventsTypes>;\n}\n/\n The `SortList` component allows user to select the search results order. This component\n * also allows to change the selected sort programmatically.\n \n @remarks It extends {@link SortMixin}.\n \n @public\n /\n@Component({\n mixins: [xComponentMixin(searchXModule)],\n components: {\n BaseEventButton\n }\n})\nexport default class SortList extends mixins(SortMixin) {\n /\n The transition to use for rendering the list.\n \n @public\n /\n @Prop({ default: 'ul' })\n public animation?: string \| typeof Vue;\n /\n Sort list items.\n \n @returns A list of items with their css class and the event associate to it.\n \n @internal\n */\n protected get listItems(): SortListItem[] {\n return this.items.map(item => ({\n item,\n cssClasses: [\n {\n 'x-sort-list__item--is-selected': item === this.selectedSort,\n 'x-option-list__item--is-selected': item === this.selectedSort\n }\n ],\n event: { UserClickedASort: item }\n }));\n }\n}\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAiDA;;;;;;;;AAcA;IAAsC,4BAAiB;IAAvD;;KA2BC;IAZC,sBAAc,+BAAS;;;;;;;;aAAvB;YAAA,iBAWC;YAVC,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,UAAA,IAAI,IAAI,QAAC;gBAC7B,IAAI,MAAA;gBACJ,UAAU,EAAE;oBACV;wBACE,gCAAgC,EAAE,IAAI,KAAK,KAAI,CAAC,YAAY;wBAC5D,kCAAkC,EAAE,IAAI,KAAK,KAAI,CAAC,YAAY;qBAC/D;iBACF;gBACD,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE;aAClC,IAAC,CAAC,CAAC;SACL;;;OAAA;IAnBD;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CACe;IAPpB,QAAQ;QAN5B,SAAS,CAAC;YACT,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;YACxC,UAAU,EAAE;gBACV,eAAe,iBAAA;aAChB;SACF,CAAC;OACmB,QAAQ,CA2B5B;IAAD,eAAC;CA3BD,CAAsC,MAAM,CAAC,SAAS,CAAC;;;;"}
1	+ {"version":3,"file":"sort-list.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/search/components/sort-list.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { Sort } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { mixins } from 'vue-class-component';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { BaseEventButton } from '../../../components';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { VueCSSClasses } from '../../../utils';\nimport { XEventsTypes } from '../../../wiring';\nimport { searchXModule } from '../x-module';\nimport SortMixin from './sort.mixin';\n\n/*\n Sort list item options.\n \n @public\n /\ninterface SortListItem {\n item: Sort;\n cssClasses: VueCSSClasses;\n event: Partial<XEventsTypes>;\n}\n/\n The `SortList` component allows user to select the search results order. This component\n * also allows to change the selected sort programmatically.\n \n @remarks It extends {@link SortMixin}.\n \n @public\n /\n@Component({\n mixins: [xComponentMixin(searchXModule)],\n components: {\n BaseEventButton\n }\n})\nexport default class SortList extends mixins(SortMixin) {\n /\n The transition to use for rendering the list.\n \n @public\n /\n @Prop({ default: 'ul' })\n public animation?: string \| typeof Vue;\n /\n Sort list items.\n \n @returns A list of items with their css class and the event associate to it.\n \n @internal\n */\n protected get listItems(): SortListItem[] {\n return this.items.map(item => ({\n item,\n cssClasses: [\n {\n 'x-sort-list__item--is-selected': item === this.selectedSort,\n 'x-option-list__item--is-selected': item === this.selectedSort\n }\n ],\n event: { UserClickedASort: item }\n }));\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA;;;;;;;;AAcA;IAAsC,4BAAiB;IAAvD;;KA2BC;IAZC,sBAAc,+BAAS;;;;;;;;aAAvB;YAAA,iBAWC;YAVC,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,UAAA,IAAI,IAAI,QAAC;gBAC7B,IAAI,MAAA;gBACJ,UAAU,EAAE;oBACV;wBACE,gCAAgC,EAAE,IAAI,KAAK,KAAI,CAAC,YAAY;wBAC5D,kCAAkC,EAAE,IAAI,KAAK,KAAI,CAAC,YAAY;qBAC/D;iBACF;gBACD,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE;aAClC,IAAC,CAAC,CAAC;SACL;;;OAAA;IAnBD;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CACe;IAPpB,QAAQ;QAN5B,SAAS,CAAC;YACT,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;YACxC,UAAU,EAAE;gBACV,eAAe,iBAAA;aAChB;SACF,CAAC;OACmB,QAAQ,CA2B5B;IAAD,eAAC;CA3BD,CAAsC,MAAM,CAAC,SAAS,CAAC;;;;"}

package/js/x-modules/search/components/sort.mixin.js CHANGED Viewed

@@ -8,7 +8,7 @@ import '../../../components/animations/collapse-height.vue.js';
 import '../../../components/animations/collapse-width.vue.js';
 import '../../../components/animations/cross-fade.vue.js';
 import '../../../components/animations/fade-and-slide.vue.js';
-import '../../../components/staggering-transition-group.vue.js';
+import '../../../components/animations/staggering-transition-group.vue.js';
 import '../../../components/animations/staggered-fade-and-slide.vue.js';
 import '../../../components/animations/translate-from-left.vue.js';
 import '../../../components/animations/translate-from-right.vue.js';
@@ -70,16 +70,24 @@ import '../../../components/icons/trash.vue.js';
 import '../../../components/icons/trending-tiny.vue.js';
 import '../../../components/icons/trending.vue.js';
 import '../../../components/icons/user.vue.js';
-import '../../../components/modals/base-events-modal-close.vue.js';
+import { State } from '../../../components/decorators/store.decorators.js';
+import '../../../components/x-component.utils.js';
+import '../../../components/x-component.mixin.js';
 import '../../../components/modals/base-modal.vue.js';
+import '../../../components/modals/base-id-modal.vue.js';
+import '../../../components/scroll/scroll.mixin.js';
+import '../../../components/scroll/base-scroll.vue.js';
+import '../../../components/layouts/fixed-header-and-asides-layout.vue.js';
+import '../../../components/panels/base-toggle-panel.vue.js';
+import '../../../components/panels/base-id-toggle-panel.vue.js';
+import '../../../components/layouts/multi-column-max-width-layout.vue.js';
+import '../../../components/layouts/single-column-layout.vue.js';
+import '../../../components/modals/base-events-modal-close.vue.js';
 import '../../../components/modals/base-events-modal.vue.js';
 import '../../../components/modals/base-events-modal-open.vue.js';
-import '../../../components/modals/base-id-modal.vue.js';
 import '../../../components/modals/base-id-modal-close.vue.js';
 import '../../../components/modals/base-id-modal-open.vue.js';
-import '../../../components/panels/base-toggle-panel.vue.js';
 import '../../../components/panels/base-header-toggle-panel.vue.js';
-import '../../../components/panels/base-id-toggle-panel.vue.js';
 import '../../../components/panels/base-id-toggle-panel-button.vue.js';
 import '../../../components/result/base-result-add-to-cart.vue.js';
 import '../../../components/result/base-result-current-price.vue.js';
@@ -88,8 +96,6 @@ import '../../../components/result/base-result-link.vue.js';
 import '../../../components/result/base-result-previous-price.vue.js';
 import '../../../components/result/base-result-fallback-image.vue.js';
 import '../../../components/result/base-result-placeholder-image.vue.js';
-import '../../../components/scroll/scroll.mixin.js';
-import '../../../components/scroll/base-scroll.vue.js';
 import '../../../components/suggestions/base-suggestion.vue.js';
 import '../../../components/suggestions/base-suggestions.vue.js';
 import '../../../components/auto-progress-bar.vue.js';
@@ -100,11 +106,6 @@ import '../../../components/base-variable-column-grid.vue.js';
 import '../../../components/decorators/debounce.decorators.js';
 import '../../../components/sliding-panel.vue.js';
 import '../../../components/items-list.vue.js';
-import { State } from '../../../components/decorators/store.decorators.js';
-import '../../../components/x-component.utils.js';
-import '../../../components/x-component.mixin.js';
-import '../../../components/layouts/multi-column-max-width-layout.vue.js';
-import '../../../components/layouts/single-column-layout.vue.js';
 import '../../../components/location-provider.vue.js';
 import '../../../components/global-x-bus.vue.js';
 import '../../../components/snippet-callbacks.vue.js';

package/js/x-modules/search/components/sort.mixin.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sort.mixin.js","sources":["../../../../../src/x-modules/search/components/sort.mixin.ts"],"sourcesContent":["import { Sort } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport Component from 'vue-class-component';\nimport { Prop } from 'vue-property-decorator';\nimport { State, XEmit } from '../../../components';\n\n/*\n Mixin to share Sort logic.\n \n @public\n /\n@Component\nexport default class SortMixin extends Vue {\n /\n The list of possible sort values. If there are no values selected, the first item of\n * this list will be selected.\n \n @public\n /\n @Prop({ required: true })\n public items!: Sort[];\n\n /\n The search module selected sort. This is the source of truth when checking which\n * sort is selected.\n \n @internal\n /\n @State('search', 'sort')\n public selectedSort!: Sort;\n\n /\n Emits the {@link SearchXEvents.SelectedSortProvided \| SelectedSortProvided} event whenever the\n * provided {@link SortMixin.selectedSort} changes. If no value is provided, the first item of the\n * {@link SortMixin.items} will be used as fallback.\n \n @returns The sorting value.\n \n @public\n */\n @XEmit('SelectedSortProvided')\n public get providedSelectedSort(): Sort {\n return this.selectedSort;\n }\n}\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAMA;;;;;AAMA;IAAuC,6BAAG;IAA1C;;KAgCC;IAHC,sBAAW,2CAAoB;;;;;;;;;;aAA/B;YACE,OAAO,IAAI,CAAC,YAAY,CAAC;SAC1B;;;OAAA;IAvBD;QADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;4CACH;IAStB;QADC,KAAK,CAAC,QAAQ,EAAE,MAAM,CAAC;mDACG;IAY3B;QADC,KAAK,CAAC,sBAAsB,CAAC;yDAG7B;IA/BkB,SAAS;QAD7B,SAAS;OACW,SAAS,CAgC7B;IAAD,gBAAC;CAAA,CAhCsC,GAAG;;;;"}
1	+ {"version":3,"file":"sort.mixin.js","sources":["../../../../../src/x-modules/search/components/sort.mixin.ts"],"sourcesContent":["import { Sort } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport Component from 'vue-class-component';\nimport { Prop } from 'vue-property-decorator';\nimport { State, XEmit } from '../../../components';\n\n/*\n Mixin to share Sort logic.\n \n @public\n /\n@Component\nexport default class SortMixin extends Vue {\n /\n The list of possible sort values. If there are no values selected, the first item of\n * this list will be selected.\n \n @public\n /\n @Prop({ required: true })\n public items!: Sort[];\n\n /\n The search module selected sort. This is the source of truth when checking which\n * sort is selected.\n \n @internal\n /\n @State('search', 'sort')\n public selectedSort!: Sort;\n\n /\n Emits the {@link SearchXEvents.SelectedSortProvided \| SelectedSortProvided} event whenever the\n * provided {@link SortMixin.selectedSort} changes. If no value is provided, the first item of the\n * {@link SortMixin.items} will be used as fallback.\n \n @returns The sorting value.\n \n @public\n */\n @XEmit('SelectedSortProvided')\n public get providedSelectedSort(): Sort {\n return this.selectedSort;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;;;;;AAMA;IAAuC,6BAAG;IAA1C;;KAgCC;IAHC,sBAAW,2CAAoB;;;;;;;;;;aAA/B;YACE,OAAO,IAAI,CAAC,YAAY,CAAC;SAC1B;;;OAAA;IAvBD;QADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;4CACH;IAStB;QADC,KAAK,CAAC,QAAQ,EAAE,MAAM,CAAC;mDACG;IAY3B;QADC,KAAK,CAAC,sBAAsB,CAAC;yDAG7B;IA/BkB,SAAS;QAD7B,SAAS;OACW,SAAS,CAgC7B;IAAD,gBAAC;CAAA,CAhCsC,GAAG;;;;"}

package/js/x-modules/search/components/spellcheck-button.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spellcheck-button.vue.js","sources":["../../../../../src/x-modules/search/components/spellcheck-button.vue"],"sourcesContent":["<template>\n <button\n v-if=\"spellcheckedQuery\"\n @click=\"emitEvents\"\n class=\"x-spellcheck-button\"\n data-test=\"set-spellcheck\"\n >\n <slot v-bind=\"{ spellcheckedQuery }\">{{ spellcheckedQuery }}</slot>\n </button>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { Component } from 'vue-property-decorator';\n import { State } from '../../../components/decorators/store.decorators';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { WireMetadata } from '../../../wiring/wiring.types';\n import { searchXModule } from '../x-module';\n /*\n A button that when pressed emits the {@link XEventsTypes.UserAcceptedAQuery}\n * and {@link XEventsTypes.UserAcceptedSpellcheckQuery} events, expressing the user\n * intention to set the spellchecked query.\n \n @public\n /\n @Component({\n mixins: [xComponentMixin(searchXModule)]\n })\n export default class SpellcheckButton extends Vue {\n /\n The spellcheckedQuery from the search state.\n \n @public\n /\n @State('search', 'spellcheckedQuery')\n public spellcheckedQuery!: string;\n\n /\n Generates the {@link WireMetadata \| event metadata} object omitting the moduleName.\n \n @returns The {@link WireMetadata} object omitting the moduleName.\n * @internal\n /\n protected createEventMetadata(): Omit<WireMetadata, 'moduleName'> {\n return {\n target: this.$el as HTMLElement,\n feature: 'spellcheck'\n };\n }\n\n /\n Emits events when the button is clicked.\n \n @public\n */\n protected emitEvents(): void {\n this.$x.emit('UserAcceptedAQuery', this.spellcheckedQuery, this.createEventMetadata());\n this.$x.emit(\n 'UserAcceptedSpellcheckQuery',\n this.spellcheckedQuery,\n this.createEventMetadata()\n );\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n# Examples\n\n## Basic example\n\nThe component sets the current spellcheckedQuery as the new query and emits the `UserAcceptedAQuery`\nand `UserAcceptedSpellcheckQuery` events.\n\n```vue\n<SpellcheckButton />\n```\n\n## Customizing its contents\n\n```vue\n<SpellcheckButton>\n <template #default=\"{ spellcheckedQuery }\">\n <span class=\"x-spellcheck__text\">\n Set the Spellcheck as the new query: {{ spellcheckedQuery}}!\n </span>\n </template>\n</SpellcheckButton>\n```\n\n## Events\n\nThis component emits 2 different events:\n\n- UserAcceptedAQuery: the event is emitted after the user clicks the button. The event payload is\n the spellchecked query data.\n- UserAcceptedSpellcheckQuery: the event is emitted after the user clicks the button. The event\n payload is the spellchecked query data.\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"spellcheck-button.vue.js","sources":["../../../../../src/x-modules/search/components/spellcheck-button.vue"],"sourcesContent":["<template>\n <button\n v-if=\"spellcheckedQuery\"\n @click=\"emitEvents\"\n class=\"x-spellcheck-button\"\n data-test=\"set-spellcheck\"\n >\n <slot v-bind=\"{ spellcheckedQuery }\">{{ spellcheckedQuery }}</slot>\n </button>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { Component } from 'vue-property-decorator';\n import { State } from '../../../components/decorators/store.decorators';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { WireMetadata } from '../../../wiring/wiring.types';\n import { searchXModule } from '../x-module';\n /*\n A button that when pressed emits the {@link XEventsTypes.UserAcceptedAQuery}\n * and {@link XEventsTypes.UserAcceptedSpellcheckQuery} events, expressing the user\n * intention to set the spellchecked query.\n \n @public\n /\n @Component({\n mixins: [xComponentMixin(searchXModule)]\n })\n export default class SpellcheckButton extends Vue {\n /\n The spellcheckedQuery from the search state.\n \n @public\n /\n @State('search', 'spellcheckedQuery')\n public spellcheckedQuery!: string;\n\n /\n Generates the {@link WireMetadata \| event metadata} object omitting the moduleName.\n \n @returns The {@link WireMetadata} object omitting the moduleName.\n * @internal\n /\n protected createEventMetadata(): Omit<WireMetadata, 'moduleName'> {\n return {\n target: this.$el as HTMLElement,\n feature: 'spellcheck'\n };\n }\n\n /\n Emits events when the button is clicked.\n \n @public\n */\n protected emitEvents(): void {\n this.$x.emit('UserAcceptedAQuery', this.spellcheckedQuery, this.createEventMetadata());\n this.$x.emit(\n 'UserAcceptedSpellcheckQuery',\n this.spellcheckedQuery,\n this.createEventMetadata()\n );\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThe component sets the current spellcheckedQuery as the new query and emits the `UserAcceptedAQuery`\nand `UserAcceptedSpellcheckQuery` events.\n\n```vue\n<SpellcheckButton />\n```\n\n### Customizing its contents\n\n```vue\n<SpellcheckButton>\n <template #default=\"{ spellcheckedQuery }\">\n <span class=\"x-spellcheck__text\">\n Set the Spellcheck as the new query: {{ spellcheckedQuery}}!\n </span>\n </template>\n</SpellcheckButton>\n```\n\n## Events\n\nThis component emits 2 different events:\n\n- UserAcceptedAQuery: the event is emitted after the user clicks the button. The event payload is\n the spellchecked query data.\n- UserAcceptedSpellcheckQuery: the event is emitted after the user clicks the button. The event\n payload is the spellchecked query data.\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/search/components/spellcheck.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spellcheck.vue.js","sources":["../../../../../src/x-modules/search/components/spellcheck.vue"],"sourcesContent":["<template>\n <div v-if=\"spellcheckedQuery\" class=\"x-spellcheck\" data-test=\"spellcheck\">\n <slot v-bind=\"{ query, spellcheckedQuery }\">{{ query }} - {{ spellcheckedQuery }}</slot>\n </div>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { Component } from 'vue-property-decorator';\n import { State, xComponentMixin } from '../../../components';\n import { searchXModule } from '../x-module';\n\n /*\n The `Spellcheck` component allows to inform the user with a friendly message that he\n * might have misspelled the search query. This message can be set using the default slot\n * of the component, which gives access to the searched query using the `query` scope property,\n * and the spellchecked query proposal, using the `spellcheckedQuery` scope property.\n \n The component will only render itself if the `spellcheckedQuery` property has value.\n \n @public\n /\n @Component({\n mixins: [xComponentMixin(searchXModule)]\n })\n export default class Spellcheck extends Vue {\n /\n The query from the search state.\n \n @public\n /\n @State('search', 'query')\n public query!: string;\n\n /\n The spellcheckedQuery from the search state.\n \n @public\n */\n @State('search', 'spellcheckedQuery')\n public spellcheckedQuery!: string;\n }\n</script>\n\n<docs lang=\"mdx\">\n# Examples\n\nThis default spellcheck component expects a query and a spellcheckedQuery to render and pass to its\ndefault slot.\n\nThis two props should be show like a message comparing them.\n\n## Basic usage\n\n```vue\n<Spellcheck />\n```\n\n## Customizing its contents\n\n```vue\n<Spellcheck>\n <template #default=\"{ query, spellcheckedQuery }\">\n No results found for '{{ query }}'. We show you results for '{{ spellcheckedQuery }}'\n </template>\n</Spellcheck>\n\n<script>\n import { Spellcheck } from '@empathyco/x-components/search';\n\n export default {\n components: {\n Spellcheck\n }\n };\n</script>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"spellcheck.vue.js","sources":["../../../../../src/x-modules/search/components/spellcheck.vue"],"sourcesContent":["<template>\n <div v-if=\"spellcheckedQuery\" class=\"x-spellcheck\" data-test=\"spellcheck\">\n <slot v-bind=\"{ query, spellcheckedQuery }\">{{ query }} - {{ spellcheckedQuery }}</slot>\n </div>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { Component } from 'vue-property-decorator';\n import { State, xComponentMixin } from '../../../components';\n import { searchXModule } from '../x-module';\n\n /*\n The `Spellcheck` component allows to inform the user with a friendly message that he\n * might have misspelled the search query. This message can be set using the default slot\n * of the component, which gives access to the searched query using the `query` scope property,\n * and the spellchecked query proposal, using the `spellcheckedQuery` scope property.\n \n The component will only render itself if the `spellcheckedQuery` property has value.\n \n @public\n /\n @Component({\n mixins: [xComponentMixin(searchXModule)]\n })\n export default class Spellcheck extends Vue {\n /\n The query from the search state.\n \n @public\n /\n @State('search', 'query')\n public query!: string;\n\n /\n The spellcheckedQuery from the search state.\n \n @public\n */\n @State('search', 'spellcheckedQuery')\n public spellcheckedQuery!: string;\n }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis default spellcheck component expects a query and a spellcheckedQuery to render and pass to its\ndefault slot.\n\nThis two props should be show like a message comparing them.\n\n### Basic usage\n\n```vue\n<Spellcheck />\n```\n\n### Customizing its contents\n\n```vue\n<Spellcheck>\n <template #default=\"{ query, spellcheckedQuery }\">\n No results found for '{{ query }}'. We show you results for '{{ spellcheckedQuery }}'\n </template>\n</Spellcheck>\n\n<script>\n import { Spellcheck } from '@empathyco/x-components/search';\n\n export default {\n components: {\n Spellcheck\n }\n };\n</script>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/search/components/spellcheck.vue_rollup-plugin-vue=script.js CHANGED Viewed

@@ -8,7 +8,7 @@ import '../../../components/animations/collapse-height.vue.js';
 import '../../../components/animations/collapse-width.vue.js';
 import '../../../components/animations/cross-fade.vue.js';
 import '../../../components/animations/fade-and-slide.vue.js';
-import '../../../components/staggering-transition-group.vue.js';
+import '../../../components/animations/staggering-transition-group.vue.js';
 import '../../../components/animations/staggered-fade-and-slide.vue.js';
 import '../../../components/animations/translate-from-left.vue.js';
 import '../../../components/animations/translate-from-right.vue.js';
@@ -69,16 +69,24 @@ import '../../../components/icons/trash.vue.js';
 import '../../../components/icons/trending-tiny.vue.js';
 import '../../../components/icons/trending.vue.js';
 import '../../../components/icons/user.vue.js';
-import '../../../components/modals/base-events-modal-close.vue.js';
+import { State } from '../../../components/decorators/store.decorators.js';
+import '../../../components/x-component.utils.js';
+import { xComponentMixin } from '../../../components/x-component.mixin.js';
 import '../../../components/modals/base-modal.vue.js';
+import '../../../components/modals/base-id-modal.vue.js';
+import '../../../components/scroll/scroll.mixin.js';
+import '../../../components/scroll/base-scroll.vue.js';
+import '../../../components/layouts/fixed-header-and-asides-layout.vue.js';
+import '../../../components/panels/base-toggle-panel.vue.js';
+import '../../../components/panels/base-id-toggle-panel.vue.js';
+import '../../../components/layouts/multi-column-max-width-layout.vue.js';
+import '../../../components/layouts/single-column-layout.vue.js';
+import '../../../components/modals/base-events-modal-close.vue.js';
 import '../../../components/modals/base-events-modal.vue.js';
 import '../../../components/modals/base-events-modal-open.vue.js';
-import '../../../components/modals/base-id-modal.vue.js';
 import '../../../components/modals/base-id-modal-close.vue.js';
 import '../../../components/modals/base-id-modal-open.vue.js';
-import '../../../components/panels/base-toggle-panel.vue.js';
 import '../../../components/panels/base-header-toggle-panel.vue.js';
-import '../../../components/panels/base-id-toggle-panel.vue.js';
 import '../../../components/panels/base-id-toggle-panel-button.vue.js';
 import '../../../components/result/base-result-add-to-cart.vue.js';
 import '../../../components/result/base-result-current-price.vue.js';
@@ -87,8 +95,6 @@ import '../../../components/result/base-result-link.vue.js';
 import '../../../components/result/base-result-previous-price.vue.js';
 import '../../../components/result/base-result-fallback-image.vue.js';
 import '../../../components/result/base-result-placeholder-image.vue.js';
-import '../../../components/scroll/scroll.mixin.js';
-import '../../../components/scroll/base-scroll.vue.js';
 import '../../../components/suggestions/base-suggestion.vue.js';
 import '../../../components/suggestions/base-suggestions.vue.js';
 import '../../../components/auto-progress-bar.vue.js';
@@ -99,11 +105,6 @@ import '../../../components/base-variable-column-grid.vue.js';
 import '../../../components/decorators/debounce.decorators.js';
 import '../../../components/sliding-panel.vue.js';
 import '../../../components/items-list.vue.js';
-import { State } from '../../../components/decorators/store.decorators.js';
-import '../../../components/x-component.utils.js';
-import { xComponentMixin } from '../../../components/x-component.mixin.js';
-import '../../../components/layouts/multi-column-max-width-layout.vue.js';
-import '../../../components/layouts/single-column-layout.vue.js';
 import '../../../components/location-provider.vue.js';
 import '../../../components/global-x-bus.vue.js';
 import '../../../components/snippet-callbacks.vue.js';

package/js/x-modules/search/components/spellcheck.vue_rollup-plugin-vue=script.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spellcheck.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/search/components/spellcheck.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component } from 'vue-property-decorator';\nimport { State, xComponentMixin } from '../../../components';\nimport { searchXModule } from '../x-module';\n\n/*\n The `Spellcheck` component allows to inform the user with a friendly message that he\n * might have misspelled the search query. This message can be set using the default slot\n * of the component, which gives access to the searched query using the `query` scope property,\n * and the spellchecked query proposal, using the `spellcheckedQuery` scope property.\n \n The component will only render itself if the `spellcheckedQuery` property has value.\n \n @public\n /\n@Component({\n mixins: [xComponentMixin(searchXModule)]\n})\nexport default class Spellcheck extends Vue {\n /\n The query from the search state.\n \n @public\n /\n @State('search', 'query')\n public query!: string;\n\n /\n The spellcheckedQuery from the search state.\n \n @public\n */\n @State('search', 'spellcheckedQuery')\n public spellcheckedQuery!: string;\n}\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAYA;;;;;;;;;;AAaA;IAAwC,8BAAG;IAA3C;;KAgBC;IATC;QADC,KAAK,CAAC,QAAQ,EAAE,OAAO,CAAC;6CACH;IAQtB;QADC,KAAK,CAAC,QAAQ,EAAE,mBAAmB,CAAC;yDACH;IAff,UAAU;QAH9B,SAAS,CAAC;YACT,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;SACzC,CAAC;OACmB,UAAU,CAgB9B;IAAD,iBAAC;CAAA,CAhBuC,GAAG;;;;"}
1	+ {"version":3,"file":"spellcheck.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/search/components/spellcheck.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component } from 'vue-property-decorator';\nimport { State, xComponentMixin } from '../../../components';\nimport { searchXModule } from '../x-module';\n\n/*\n The `Spellcheck` component allows to inform the user with a friendly message that he\n * might have misspelled the search query. This message can be set using the default slot\n * of the component, which gives access to the searched query using the `query` scope property,\n * and the spellchecked query proposal, using the `spellcheckedQuery` scope property.\n \n The component will only render itself if the `spellcheckedQuery` property has value.\n \n @public\n /\n@Component({\n mixins: [xComponentMixin(searchXModule)]\n})\nexport default class Spellcheck extends Vue {\n /\n The query from the search state.\n \n @public\n /\n @State('search', 'query')\n public query!: string;\n\n /\n The spellcheckedQuery from the search state.\n \n @public\n */\n @State('search', 'spellcheckedQuery')\n public spellcheckedQuery!: string;\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA;;;;;;;;;;AAaA;IAAwC,8BAAG;IAA3C;;KAgBC;IATC;QADC,KAAK,CAAC,QAAQ,EAAE,OAAO,CAAC;6CACH;IAQtB;QADC,KAAK,CAAC,QAAQ,EAAE,mBAAmB,CAAC;yDACH;IAff,UAAU;QAH9B,SAAS,CAAC;YACT,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;SACzC,CAAC;OACmB,UAAU,CAgB9B;IAAD,iBAAC;CAAA,CAhBuC,GAAG;;;;"}

package/js/x-modules/tagging/store/actions/track.action.js CHANGED Viewed

@@ -14,11 +14,11 @@ import { DefaultSessionService } from '../../service/session.service.js';
 var track = function (_a, taggingInfo) {
     var state = _a.state;
     var consent = state.consent;
-    var tagging = Array.isArray(taggingInfo) ? taggingInfo : [taggingInfo];
+    var taggingInfos = Array.isArray(taggingInfo) ? taggingInfo : [taggingInfo];
     var sessionId = getSessionId(consent);
     // TODO EX-5061 - Remove this validation when the adapter ignores undefined values.
     var session = sessionId && { session: sessionId };
-    tagging.forEach(function (_a) {
+    taggingInfos.forEach(function (_a) {
         var url = _a.url, params = _a.params;
         XPlugin.adapter.track({
             url: url,

package/js/x-modules/tagging/store/actions/track.action.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"track.action.js","sources":["../../../../../../src/x-modules/tagging/store/actions/track.action.ts"],"sourcesContent":["import { TaggingInfo } from '@empathyco/x-types';\nimport { XPlugin } from '../../../../plugins/x-plugin';\nimport { DefaultSessionService } from '../../service';\nimport { TaggingXStoreModule } from '../types';\n\n/*\n Default implementation for the {@link TaggingActions.track}.\n \n @param context - The {@link https://vuex.vuejs.org/guide/actions.html \| context} of the actions,\n * provided by Vuex.\n * @param taggingInfo - The information of the event to track.\n \n @public\n /\nexport const track: TaggingXStoreModule['actions']['track'] = ({ state }, taggingInfo) => {\n const { consent } = state;\n const ~~tagging~~ = Array.isArray(taggingInfo) ? taggingInfo : [taggingInfo];\n const sessionId = getSessionId(consent);\n // TODO EX-5061 - Remove this validation when the adapter ignores undefined values.\n const session = sessionId && { session: sessionId };\n\n ~~tagging~~.forEach(({ url, params }: TaggingInfo) => {\n XPlugin.adapter.track({\n url,\n params: {\n ...params,\n ...session\n }\n });\n });\n};\n\n/\n Returns the session id if the consent is true.\n \n @param consent - User consent to retrieve the session id.\n \n @returns The user session id or undefined.\n \n @internal\n */\nfunction getSessionId(consent: boolean \| null): string \| undefined {\n return consent ? DefaultSessionService.instance.getSessionId() : undefined;\n}\n"],"names":[],"mappings":";;;;AAKA;;;;;;;;;IASa,KAAK,GAA4C,UAAC,EAAS,EAAE,WAAW;QAApB,KAAK,WAAA;IAC5D,IAAA,OAAO,GAAK,KAAK,QAAV,CAAW;IAC1B,IAAM,~~OAAO~~,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,GAAG,WAAW,GAAG,CAAC,WAAW,CAAC,CAAC;~~IACzE~~,IAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC;;IAExC,IAAM,OAAO,GAAG,SAAS,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC;IAEpD,~~OAAO~~,CAAC,OAAO,CAAC,UAAC,EAA4B;YAA1B,GAAG,SAAA,EAAE,MAAM,YAAA;~~QAC5B~~,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC;YACpB,GAAG,KAAA;YACH,MAAM,wBACD,MAAM,GACN,OAAO,CACX;SACF,CAAC,CAAC;KACJ,CAAC,CAAC;AACL,EAAE;AAEF;;;;;;;;;AASA,SAAS,YAAY,CAAC,OAAuB;IAC3C,OAAO,OAAO,GAAG,qBAAqB,CAAC,QAAQ,CAAC,YAAY,EAAE,GAAG,SAAS,CAAC;AAC7E;;;;"}
1	+ {"version":3,"file":"track.action.js","sources":["../../../../../../src/x-modules/tagging/store/actions/track.action.ts"],"sourcesContent":["import { TaggingInfo } from '@empathyco/x-types';\nimport { XPlugin } from '../../../../plugins/x-plugin';\nimport { DefaultSessionService } from '../../service';\nimport { TaggingXStoreModule } from '../types';\n\n/*\n Default implementation for the {@link TaggingActions.track}.\n \n @param context - The {@link https://vuex.vuejs.org/guide/actions.html \| context} of the actions,\n * provided by Vuex.\n * @param taggingInfo - The information of the event to track.\n \n @public\n /\nexport const track: TaggingXStoreModule['actions']['track'] = ({ state }, taggingInfo) => {\n const { consent } = state;\n const taggingInfos = Array.isArray(taggingInfo) ? taggingInfo : [taggingInfo];\n const sessionId = getSessionId(consent);\n // TODO EX-5061 - Remove this validation when the adapter ignores undefined values.\n const session = sessionId && { session: sessionId };\n\n taggingInfos.forEach(({ url, params }: TaggingInfo) => {\n XPlugin.adapter.track({\n url,\n params: {\n ...params,\n ...session\n }\n });\n });\n};\n\n/\n Returns the session id if the consent is true.\n \n @param consent - User consent to retrieve the session id.\n \n @returns The user session id or undefined.\n \n @internal\n */\nfunction getSessionId(consent: boolean \| null): string \| undefined {\n return consent ? DefaultSessionService.instance.getSessionId() : undefined;\n}\n"],"names":[],"mappings":";;;;AAKA;;;;;;;;;IASa,KAAK,GAA4C,UAAC,EAAS,EAAE,WAAW;QAApB,KAAK,WAAA;IAC5D,IAAA,OAAO,GAAK,KAAK,QAAV,CAAW;IAC1B,IAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,GAAG,WAAW,GAAG,CAAC,WAAW,CAAC,CAAC;IAC9E,IAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC;;IAExC,IAAM,OAAO,GAAG,SAAS,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC;IAEpD,YAAY,CAAC,OAAO,CAAC,UAAC,EAA4B;YAA1B,GAAG,SAAA,EAAE,MAAM,YAAA;QACjC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC;YACpB,GAAG,KAAA;YACH,MAAM,wBACD,MAAM,GACN,OAAO,CACX;SACF,CAAC,CAAC;KACJ,CAAC,CAAC;AACL,EAAE;AAEF;;;;;;;;;AASA,SAAS,YAAY,CAAC,OAAuB;IAC3C,OAAO,OAAO,GAAG,qBAAqB,CAAC,QAAQ,CAAC,YAAY,EAAE,GAAG,SAAS,CAAC;AAC7E;;;;"}

package/js/x-modules/tagging/wiring.js CHANGED Viewed

@@ -64,10 +64,48 @@ var setSessionDuration = wireCommit('setSessionDuration');
  *
  * @public
  */
-var trackWire = moduleDebounce(wireDispatch('track'), function (_a) {
+var trackQueryWire = moduleDebounce(wireDispatch('track'), function (_a) {
     var state = _a.state;
     return state.config.queryTaggingDebounceMs;
-}, 'UserClearedQuery');
+}, {
+    cancelOn: 'UserClearedQuery',
+    forceOn: [
+        'UserClickedAResult',
+        'UserClickedAPromoted',
+        'UserClickedABanner',
+        'UserClickedARedirection',
+        'UserReachedResultsListEnd'
+    ]
+});
+/**
+ * Tracks the tagging of the result.
+ *
+ * @public
+ */
+var trackResultClickedWire = createTrackResultWire('click');
+/**
+ * Performs a track of a result added to the cart.
+ *
+ * @public
+ */
+var trackAddToCartWire = createTrackResultWire('add2cart');
+/**
+ * Factory helper to create a wire for the track of a result.
+ *
+ * @param property - Key of the tagging object to track.
+ * @returns A new wire for the given property of the result tagging.
+ *
+ * @internal
+ */
+function createTrackResultWire(property) {
+    return filter(wireDispatch('track', function (_a) {
+        var tagging = _a.eventPayload.tagging;
+        return tagging[property];
+    }), function (_a) {
+        var tagging = _a.eventPayload.tagging;
+        return !!(tagging === null || tagging === void 0 ? void 0 : tagging[property]);
+    });
+}
 /**
  * Wiring configuration for the {@link TaggingXModule | tagging module}.
  *
@@ -87,9 +125,15 @@ var taggingWiring = createWiring({
         setQueryTaggingDebounce: setQueryTaggingDebounce
     },
     SearchTaggingChanged: {
-        trackWire: trackWire
+        trackQueryWire: trackQueryWire
+    },
+    UserClickedAResult: {
+        trackResultClickedWire: trackResultClickedWire
+    },
+    UserClickedResultAddToCart: {
+        trackAddToCartWire: trackAddToCartWire
     }
 });
-export { setConsent, setQueryTaggingDebounce, setSessionDuration, taggingWiring, trackWire };
+export { setConsent, setQueryTaggingDebounce, setSessionDuration, taggingWiring, trackAddToCartWire, trackQueryWire, trackResultClickedWire };
 //# sourceMappingURL=wiring.js.map

package/js/x-modules/tagging/wiring.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/tagging/wiring.ts"],"sourcesContent":["import { ~~namespacedDebounce~~ } from '~~../../wiring~~';\nimport {\n namespacedWireCommit,\n namespacedWireDispatch\n} from '../../wiring/namespaced-wires.factory';\nimport { wireServiceWithoutPayload } from '../../wiring/wires.factory';\nimport { filter } from '../../wiring/wires.operators';\nimport { createWiring } from '../../wiring/wiring.utils';\nimport { DefaultSessionService } from './service/session.service';\n\n/*\n `tagging` {@link XModuleName \| XModule name}.\n \n @internal\n /\nconst moduleName = 'tagging';\n\n/\n Debounce function for the module.\n /\nconst moduleDebounce = namespacedDebounce(moduleName);\n\n/\n WireCommit for {@link TaggingXModule}.\n \n @internal\n /\nconst wireCommit = namespacedWireCommit(moduleName);\n\n/\n WireDispatch for {@link TaggingXModule}.\n \n @internal\n /\nconst wireDispatch = namespacedWireDispatch(moduleName);\n\n/\n Wires without payload factory for {@link DefaultSessionService}.\n /\nconst wireSessionServiceWithoutPayload = wireServiceWithoutPayload(DefaultSessionService.instance);\n\n/\n Clears the session id.\n \n @public\n /\nconst clearSessionWire = filter(\n wireSessionServiceWithoutPayload('clearSessionId'),\n ({ eventPayload: consent }) => !consent\n);\n\n/\n Sets the tagging state `consent`.\n \n @public\n /\nexport const setConsent = wireCommit('setConsent');\n\n/\n Sets the tagging state config `queryTaggingDebounceMs`.\n \n @public\n /\nexport const setQueryTaggingDebounce = wireCommit('setQueryTaggingDebounce');\n\n/\n Sets the tagging state `sessionTTLMs`.\n \n @public\n /\nexport const setSessionDuration = wireCommit('setSessionDuration');\n\n/\n Tracks the tagging of the query using a debounce which ends if the user\n * accepts a query.\n \n @public\n /\nexport const ~~trackWire~~ = moduleDebounce(\n wireDispatch('track'),\n ({ state }) => state.config.queryTaggingDebounceMs,\n 'UserClearedQuery'\n);\n\n/\n Wiring configuration for the {@link TaggingXModule \| tagging module}.\n \n @internal\n */\nexport const taggingWiring = createWiring({\n ConsentProvided: {\n setConsent\n },\n ConsentChanged: {\n clearSessionWire\n },\n SessionDurationProvided: {\n setSessionDuration\n },\n QueryTaggingDebounceProvided: {\n setQueryTaggingDebounce\n },\n SearchTaggingChanged: {\n ~~trackWire~~\n }\n});\n"],"names":[],"mappings":";;;;;;;~~AAUA~~;;;;;AAKA,IAAM,UAAU,GAAG,SAAS,CAAC;AAE7B;;;AAGA,IAAM,cAAc,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC;AAEtD;;;;;AAKA,IAAM,UAAU,GAAG,oBAAoB,CAAC,UAAU,CAAC,CAAC;AAEpD;;;;;AAKA,IAAM,YAAY,GAAG,sBAAsB,CAAC,UAAU,CAAC,CAAC;AAExD;;;AAGA,IAAM,gCAAgC,GAAG,yBAAyB,CAAC,qBAAqB,CAAC,QAAQ,CAAC,CAAC;AAEnG;;;;;AAKA,IAAM,gBAAgB,GAAG,MAAM,CAC7B,gCAAgC,CAAC,gBAAgB,CAAC,EAClD,UAAC,EAAyB;QAAT,OAAO,kBAAA;IAAO,OAAA,CAAC,OAAO;AAAR,CAAQ,CACxC,CAAC;AAEF;;;;;IAKa,UAAU,GAAG,UAAU,CAAC,YAAY,EAAE;AAEnD;;;;;IAKa,uBAAuB,GAAG,UAAU,CAAC,yBAAyB,EAAE;AAE7E;;;;;IAKa,kBAAkB,GAAG,UAAU,CAAC,oBAAoB,EAAE;AAEnE;;;;;;IAMa,~~SAAS~~,GAAG,cAAc,~~CACrC~~,YAAY,CAAC,OAAO,CAAC,EACrB,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,sBAAsB;AAAnC,CAAmC,EAClD,kBAAkB,~~EAClB~~;AAEF;;;;;IAKa,aAAa,GAAG,YAAY,CAAC;IACxC,eAAe,EAAE;QACf,UAAU,YAAA;KACX;IACD,cAAc,EAAE;QACd,gBAAgB,kBAAA;KACjB;IACD,uBAAuB,EAAE;QACvB,kBAAkB,oBAAA;KACnB;IACD,4BAA4B,EAAE;QAC5B,uBAAuB,yBAAA;KACxB;IACD,oBAAoB,EAAE;QACpB,~~SAAS~~,~~WAAA~~;~~KACV~~;CACF;;;;"}
1	+ {"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/tagging/wiring.ts"],"sourcesContent":["import { Result } from '@empathyco/x-types';\nimport {\n namespacedWireCommit,\n namespacedWireDispatch\n} from '../../wiring/namespaced-wires.factory';\nimport { namespacedDebounce } from '../../wiring/namespaced-wires.operators';\nimport { wireServiceWithoutPayload } from '../../wiring/wires.factory';\nimport { filter } from '../../wiring/wires.operators';\nimport { Wire } from '../../wiring/wiring.types';\nimport { createWiring } from '../../wiring/wiring.utils';\nimport { DefaultSessionService } from './service/session.service';\n\n/*\n `tagging` {@link XModuleName \| XModule name}.\n \n @internal\n /\nconst moduleName = 'tagging';\n\n/\n Debounce function for the module.\n /\nconst moduleDebounce = namespacedDebounce(moduleName);\n\n/\n WireCommit for {@link TaggingXModule}.\n \n @internal\n /\nconst wireCommit = namespacedWireCommit(moduleName);\n\n/\n WireDispatch for {@link TaggingXModule}.\n \n @internal\n /\nconst wireDispatch = namespacedWireDispatch(moduleName);\n\n/\n Wires without payload factory for {@link DefaultSessionService}.\n /\nconst wireSessionServiceWithoutPayload = wireServiceWithoutPayload(DefaultSessionService.instance);\n\n/\n Clears the session id.\n \n @public\n /\nconst clearSessionWire = filter(\n wireSessionServiceWithoutPayload('clearSessionId'),\n ({ eventPayload: consent }) => !consent\n);\n\n/\n Sets the tagging state `consent`.\n \n @public\n /\nexport const setConsent = wireCommit('setConsent');\n\n/\n Sets the tagging state config `queryTaggingDebounceMs`.\n \n @public\n /\nexport const setQueryTaggingDebounce = wireCommit('setQueryTaggingDebounce');\n\n/\n Sets the tagging state `sessionTTLMs`.\n \n @public\n /\nexport const setSessionDuration = wireCommit('setSessionDuration');\n\n/\n Tracks the tagging of the query using a debounce which ends if the user\n * accepts a query.\n \n @public\n /\nexport const trackQueryWire = moduleDebounce(\n wireDispatch('track'),\n ({ state }) => state.config.queryTaggingDebounceMs,\n {\n cancelOn: 'UserClearedQuery',\n forceOn: [\n 'UserClickedAResult',\n 'UserClickedAPromoted',\n 'UserClickedABanner',\n 'UserClickedARedirection',\n 'UserReachedResultsListEnd'\n ]\n }\n);\n\n/\n Tracks the tagging of the result.\n \n @public\n /\nexport const trackResultClickedWire = createTrackResultWire('click');\n\n/\n Performs a track of a result added to the cart.\n \n @public\n /\nexport const trackAddToCartWire = createTrackResultWire('add2cart');\n\n/\n Factory helper to create a wire for the track of a result.\n \n @param property - Key of the tagging object to track.\n * @returns A new wire for the given property of the result tagging.\n \n @internal\n /\nfunction createTrackResultWire(property: keyof Result['tagging']): Wire<Result> {\n return filter(\n wireDispatch('track', ({ eventPayload: { tagging } }) => tagging[property]!),\n ({ eventPayload: { tagging } }) => !!tagging?.[property]\n );\n}\n\n/\n Wiring configuration for the {@link TaggingXModule \| tagging module}.\n \n @internal\n */\nexport const taggingWiring = createWiring({\n ConsentProvided: {\n setConsent\n },\n ConsentChanged: {\n clearSessionWire\n },\n SessionDurationProvided: {\n setSessionDuration\n },\n QueryTaggingDebounceProvided: {\n setQueryTaggingDebounce\n },\n SearchTaggingChanged: {\n trackQueryWire\n },\n UserClickedAResult: {\n trackResultClickedWire\n },\n UserClickedResultAddToCart: {\n trackAddToCartWire\n }\n});\n"],"names":[],"mappings":";;;;;;;AAYA;;;;;AAKA,IAAM,UAAU,GAAG,SAAS,CAAC;AAE7B;;;AAGA,IAAM,cAAc,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC;AAEtD;;;;;AAKA,IAAM,UAAU,GAAG,oBAAoB,CAAC,UAAU,CAAC,CAAC;AAEpD;;;;;AAKA,IAAM,YAAY,GAAG,sBAAsB,CAAC,UAAU,CAAC,CAAC;AAExD;;;AAGA,IAAM,gCAAgC,GAAG,yBAAyB,CAAC,qBAAqB,CAAC,QAAQ,CAAC,CAAC;AAEnG;;;;;AAKA,IAAM,gBAAgB,GAAG,MAAM,CAC7B,gCAAgC,CAAC,gBAAgB,CAAC,EAClD,UAAC,EAAyB;QAAT,OAAO,kBAAA;IAAO,OAAA,CAAC,OAAO;AAAR,CAAQ,CACxC,CAAC;AAEF;;;;;IAKa,UAAU,GAAG,UAAU,CAAC,YAAY,EAAE;AAEnD;;;;;IAKa,uBAAuB,GAAG,UAAU,CAAC,yBAAyB,EAAE;AAE7E;;;;;IAKa,kBAAkB,GAAG,UAAU,CAAC,oBAAoB,EAAE;AAEnE;;;;;;IAMa,cAAc,GAAG,cAAc,CAC1C,YAAY,CAAC,OAAO,CAAC,EACrB,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,sBAAsB;AAAnC,CAAmC,EAClD;IACE,QAAQ,EAAE,kBAAkB;IAC5B,OAAO,EAAE;QACP,oBAAoB;QACpB,sBAAsB;QACtB,oBAAoB;QACpB,yBAAyB;QACzB,2BAA2B;KAC5B;CACF,EACD;AAEF;;;;;IAKa,sBAAsB,GAAG,qBAAqB,CAAC,OAAO,EAAE;AAErE;;;;;IAKa,kBAAkB,GAAG,qBAAqB,CAAC,UAAU,EAAE;AAEpE;;;;;;;;AAQA,SAAS,qBAAqB,CAAC,QAAiC;IAC9D,OAAO,MAAM,CACX,YAAY,CAAC,OAAO,EAAE,UAAC,EAA6B;YAAX,OAAO,0BAAA;QAAS,OAAA,OAAO,CAAC,QAAQ,CAAE;KAAA,CAAC,EAC5E,UAAC,EAA6B;YAAX,OAAO,0BAAA;QAAS,OAAA,CAAC,EAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,QAAQ,CAAC,CAAA;KAAA,CACzD,CAAC;AACJ,CAAC;AAED;;;;;IAKa,aAAa,GAAG,YAAY,CAAC;IACxC,eAAe,EAAE;QACf,UAAU,YAAA;KACX;IACD,cAAc,EAAE;QACd,gBAAgB,kBAAA;KACjB;IACD,uBAAuB,EAAE;QACvB,kBAAkB,oBAAA;KACnB;IACD,4BAA4B,EAAE;QAC5B,uBAAuB,yBAAA;KACxB;IACD,oBAAoB,EAAE;QACpB,cAAc,gBAAA;KACf;IACD,kBAAkB,EAAE;QAClB,sBAAsB,wBAAA;KACvB;IACD,0BAA0B,EAAE;QAC1B,kBAAkB,oBAAA;KACnB;CACF;;;;"}