@empathyco/x-components 3.0.0-alpha.36 → 3.0.0-alpha.37

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.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,23 @@
3
3
  All notable changes to this project will be documented in this file. See
4
4
  [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [3.0.0-alpha.37](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.36...@empathyco/x-components@3.0.0-alpha.37) (2021-12-15)
7
+
8
+ ### Features
9
+
10
+ - **scroll:** remove animations on pending element to scroll
11
+ ([7a33653](https://github.com/empathyco/x/commit/7a336531c4fedb2c38133a5464f9b7e9736cef68)),
12
+ closes [EX-5025](https://searchbroker.atlassian.net/browse/EX-5025)
13
+ - **tagging:** Include 'location' parameter to track result events. (#273)
14
+ ([69bab4b](https://github.com/empathyco/x/commit/69bab4b81f85725f3fc0a9bdc3177db09dd46a40)),
15
+ closes [EX-5163](https://searchbroker.atlassian.net/browse/EX-5163)
16
+ [EX-5163](https://searchbroker.atlassian.net/browse/EX-5163)
17
+
18
+ # Change Log
19
+
20
+ All notable changes to this project will be documented in this file. See
21
+ [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
22
+
6
23
  ## [3.0.0-alpha.36](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.35...@empathyco/x-components@3.0.0-alpha.36) (2021-12-15)
7
24
 
8
25
  ### Build System
@@ -11,9 +11,9 @@ Each child element that wants to have this support must be wrapped in a [MainScr
11
11
  <b>Signature:</b>
12
12
 
13
13
  ```typescript
14
- export default class MainScroll extends NoElement
14
+ export default class MainScroll extends Vue
15
15
  ```
16
- <b>Extends:</b> NoElement
16
+ <b>Extends:</b> Vue
17
17
 
18
18
  ## Properties
19
19
 
@@ -9,5 +9,5 @@ Tracks the tagging of the query using a debounce which ends if the user accepts
9
9
  <b>Signature:</b>
10
10
 
11
11
  ```typescript
12
- trackQueryWire: Wire<import("@empathyco/x-types").TaggingInfo | import("@empathyco/x-types").TaggingInfo[]>
12
+ trackQueryWire: Wire<TaggingInfo | TaggingInfo[]>
13
13
  ```
@@ -19,7 +19,7 @@ component.
19
19
  | <code>useWindow</code> | If `true`, sets this scroll instance to the main of the application. Being the main<br />scroll implies that features like restoring the scroll when the query changes, or storing<br />the scroll position in the URL will be enabled for this container. | <code>boolean</code> | <code>false</code> |
20
20
  | <code>restoreScrollTimeoutMs</code> | Timeout in milliseconds to abort trying to restore the scroll position to the target<br />element. | <code>number</code> | <code>5000</code> |
21
21
  | <code>threshold</code> | Intersection percentage to consider an element visible. | <code>number</code> | <code>0.3</code> |
22
- | <code>margin</code> | Adjusts the size of the scroll container bounds. | <code>string</code> | <code>''</code> |
22
+ | <code>margin</code> | Adjusts the size of the scroll container bounds. | <code>string</code> | <code>'0px'</code> |
23
23
 
24
24
  ## Slots
25
25
 
@@ -1,21 +1,32 @@
1
1
  import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
2
+ import __vue_create_injector__ from 'vue-runtime-helpers/dist/inject-style/browser.js';
2
3
  import script from './main-scroll.vue_rollup-plugin-vue=script.js';
3
4
 
4
5
  /* script */
5
6
  var __vue_script__ = script;
6
7
 
7
8
  /* template */
9
+ var __vue_render__ = function () {
10
+ var _vm = this;
11
+ var _h = _vm.$createElement;
12
+ var _c = _vm._self._c || _h;
13
+ return _c("NoElement", { class: _vm.dynamicClasses }, [_vm._t("default")], 2)
14
+ };
15
+ var __vue_staticRenderFns__ = [];
16
+ __vue_render__._withStripped = true;
8
17
 
9
18
  /* style */
10
- var __vue_inject_styles__ = undefined;
19
+ var __vue_inject_styles__ = function (inject) {
20
+ if (!inject) { return }
21
+ inject("data-v-033a89d3_0", { source: ".x-main-scroll--no-transition * {\n transition: none !important;\n transform: none !important;\n opacity: 1 !important;\n}", map: undefined, media: undefined });
22
+
23
+ };
11
24
  /* scoped */
12
25
  var __vue_scope_id__ = undefined;
13
26
  /* module identifier */
14
27
  var __vue_module_identifier__ = undefined;
15
28
  /* functional template */
16
- var __vue_is_functional_template__ = undefined;
17
- /* style inject */
18
-
29
+ var __vue_is_functional_template__ = false;
19
30
  /* style inject SSR */
20
31
 
21
32
  /* style inject shadow dom */
@@ -23,14 +34,14 @@ var __vue_script__ = script;
23
34
 
24
35
 
25
36
  var __vue_component__ = /*#__PURE__*/__vue_normalize__(
26
- {},
37
+ { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
27
38
  __vue_inject_styles__,
28
39
  __vue_script__,
29
40
  __vue_scope_id__,
30
41
  __vue_is_functional_template__,
31
42
  __vue_module_identifier__,
32
43
  false,
33
- undefined,
44
+ __vue_create_injector__,
34
45
  undefined,
35
46
  undefined
36
47
  );
@@ -1 +1 @@
1
- {"version":3,"file":"main-scroll.vue.js","sources":["../../../../../src/x-modules/scroll/components/main-scroll.vue"],"sourcesContent":["<script lang=\"ts\">\n import { Component, Prop, Watch } from 'vue-property-decorator';\n import { XEmit } from '../../../components/decorators/bus.decorators';\n import { XProvide } from '../../../components/decorators/injection.decorators';\n import { State } from '../../../components/decorators/store.decorators';\n import { NoElement } from '../../../components/no-element';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { scrollXModule } from '../x-module';\n import { ScrollObserverKey } from './scroll.const';\n import { ScrollVisibilityObserver } from './scroll.types';\n\n /**\n * Extends the scroll making it able to sync the first visible element, and allowing\n * the children position to be restored.\n *\n * Each child element that wants to have this support must be wrapped in a {@link MainScrollItem}\n * component.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(scrollXModule)]\n })\n /* eslint-disable @typescript-eslint/unbound-method */\n export default class MainScroll extends NoElement {\n /**\n * If `true`, sets this scroll instance to the main of the application. Being the main\n * scroll implies that features like restoring the scroll when the query changes, or storing\n * the scroll position in the URL will be enabled for this container.\n *\n * @public\n */\n @Prop({ default: false, type: Boolean })\n public useWindow!: boolean;\n\n /**\n * Timeout in milliseconds to abort trying to restore the scroll position to the target\n * element.\n *\n * @public\n */\n @Prop({ default: 5000 })\n public restoreScrollTimeoutMs!: number;\n\n /**\n * Intersection percentage to consider an element visible.\n *\n * @public\n */\n @Prop({ default: 0.3 })\n public threshold!: number;\n\n /**\n * Adjusts the size of the scroll container bounds.\n *\n * @public\n */\n @Prop({ default: '' })\n public margin!: string;\n\n /**\n * The elements that are currently considered visible.\n *\n * @internal\n */\n protected intersectingElements: HTMLElement[] = [];\n\n /**\n * Intersection observer to determine visibility of the elements.\n *\n * @returns An intersection observer to detect elements visibility.\n * @internal\n */\n protected intersectionObserver: IntersectionObserver | null = null;\n\n /**\n * Stores the identifier of the timeout that will consider the scroll failed to restore.\n *\n * @internal\n */\n protected restoreScrollFailTimeoutId?: number;\n\n /**\n * Pending identifier scroll position to restore. If it matches the {@link MainScrollItem.item}\n * `id` property, this component should be scrolled into view.\n *\n * @internal\n */\n @State('scroll', 'pendingScrollTo')\n public pendingScrollTo!: string;\n\n /**\n * Creates an `IntersectionObserver` to detect the first visible elements. Children of this\n * component should register themselves if they want to be observed.\n *\n * @returns The intersection observer.\n * @public\n */\n @XProvide(ScrollObserverKey)\n public get visibleElementsObserver(): ScrollVisibilityObserver | null {\n const observer = this.intersectionObserver;\n return observer\n ? {\n observe: observer.observe.bind(observer),\n unobserve: element => {\n this.removeVisibleElement(element);\n observer.unobserve(element);\n }\n }\n : null;\n }\n\n /**\n * The first visible element contained in this component.\n *\n * @returns The first visible element in this component.\n * @internal\n */\n @XEmit('UserScrolledToElement')\n public get firstVisibleElement(): string | '' {\n if (this.intersectingElements.length === 0) {\n return '';\n }\n const firstVisibleElement = this.intersectingElements.reduce(\n (firstVisibleElement, anotherElement) => {\n // FIXME: This algorithm only takes into account LTR layouts\n const firstVisibleElementBounds = firstVisibleElement.getBoundingClientRect();\n const anotherElementBounds = anotherElement.getBoundingClientRect();\n return anotherElementBounds.left <= firstVisibleElementBounds.left &&\n anotherElementBounds.top <= firstVisibleElementBounds.top\n ? anotherElement\n : firstVisibleElement;\n }\n );\n\n return firstVisibleElement === this.$el.querySelector('[data-scroll]')\n ? ''\n : firstVisibleElement.dataset.scroll!;\n }\n\n /**\n * Initialise the observer after mounting the component.\n */\n mounted(): void {\n this.intersectionObserver = new IntersectionObserver(this.updateVisibleElements, {\n root: this.useWindow ? document : this.$el,\n threshold: this.threshold,\n rootMargin: this.margin\n });\n }\n\n /**\n * Disconnects the intersection observer.\n *\n * @internal\n */\n beforeDestroy(): void {\n this.intersectionObserver?.disconnect();\n this.$x.emit('UserScrolledToElement', '');\n }\n\n /**\n * Disconnects the previous observer.\n *\n * @param _new - The new `IntersectionObserver`.\n * @param old - The new `IntersectionObserver`.\n * @internal\n */\n @Watch('intersectionObserver')\n protected disconnectPreviousObserver(\n _new: IntersectionObserver | null,\n old: IntersectionObserver | null\n ): void {\n old?.disconnect();\n }\n\n /**\n * If there is a pending scroll, starts a countdown to stop trying to restore the scroll.\n *\n * @param pendingScrollTo - The position the scroll should be restored to.\n * @internal\n */\n @Watch('pendingScrollTo')\n protected failRestoringScroll(pendingScrollTo: string | null): void {\n // TODO Move this logic to the wiring. A cancelable delay operator is needed\n clearTimeout(this.restoreScrollFailTimeoutId);\n if (pendingScrollTo) {\n this.restoreScrollFailTimeoutId = setTimeout(() => {\n this.$x.emit('ScrollRestoreFailed');\n }, this.restoreScrollTimeoutMs);\n }\n }\n\n /**\n * Removes an element from the {@link MainScroll.intersectingElements} list.\n *\n * @param element - The element to remove from the visible elements.\n * @internal\n */\n protected removeVisibleElement(element: HTMLElement): void {\n const index = this.intersectingElements.indexOf(element);\n if (index !== -1) {\n this.intersectingElements.splice(index, 1);\n }\n }\n\n /**\n * Updates the visible elements given a list of intersection observer entries.\n *\n * @param entries - The entries from whom update the visibility.\n * @internal\n */\n protected updateVisibleElements(entries: IntersectionObserverEntry[]): void {\n entries.forEach(entry => {\n const target = entry.target as HTMLElement;\n if (entry.isIntersecting) {\n this.intersectingElements.push(target);\n } else {\n this.removeVisibleElement(target);\n }\n });\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n[`UserScrolledToElement`](./../../api/x-components.scrollxevents.md)\n[`ScrollRestoreFailed`](./../../api/x-components.scrollxevents.md)\n\n## See it in action\n\nThe `MainScroll` component must be an ancestor of the `MainScrollItem` components. This is because\nit injects the needed utilities to determine the first visible item.\n\n```vue\n<template>\n <MainScroll>\n <ul>\n <MainScrollItem v-for=\"item in 24\" tag=\"li\">Item {{ item }}</MainScrollItem>\n </ul>\n </MainScroll>\n</template>\n\n<script>\n import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll';\n\n export default {\n name: 'MainScrollDemo',\n components: {\n MainScroll,\n MainScrollItem\n }\n };\n</script>\n\n<style scoped>\n ul {\n overflow: auto;\n max-height: 200px;\n }\n\n li {\n height: 50px;\n line-height: 50px;\n }\n</style>\n```\n\n### Play with props\n\n#### Window scroll\n\nIn case you aren't using a custom scrolling element like the `Scroll` panel, and want to use the\ndefault browser scroll, you can do so by using the `useWindow` prop:\n\n```vue\n<template>\n <MainScroll useWindow>\n <ul>\n <MainScrollItem v-for=\"item in 24\" tag=\"li\">Item {{ item }}</MainScrollItem>\n </ul>\n </MainScroll>\n</template>\n\n<script>\n import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll';\n\n export default {\n name: 'MainScrollDemo',\n components: {\n MainScroll,\n MainScrollItem\n }\n };\n</script>\n```\n\n#### Timeout for restoring scroll\n\nWhen your application is loaded, this component, together with the `MainScrollItem` will try to\nrestore the scroll to the provided position (if available). Because of the dynamic nature of\nJavaScript applications, the element that it tries to restore the scroll to might not be available\nanymore. For this reason after a defined time, the scroll restoration will be considered failed.\n\nThis time can be configured through the `restore-scroll-timeout-ms` prop. This is specially useful\nwhen combined with the URL X Module.\n\n```vue\n<template>\n <MainScroll :restoreScrollTimeoutMs=\"1000\">\n <ul>\n <MainScrollItem v-for=\"item in 24\" tag=\"li\">Item {{ item }}</MainScrollItem>\n </ul>\n </MainScroll>\n</template>\n\n<script>\n import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll';\n\n export default {\n name: 'MainScrollDemo',\n components: {\n MainScroll,\n MainScrollItem\n }\n };\n</script>\n```\n\n#### Adjust first visible item\n\nBy default this component will consider the first visible item, the first element that is at least\nintersecting a 50% with its container. However this arbitrary number might not always be the best.\n\nTo configure this, you can use the `margin` and `threshold` props, which work exactly like in the\n`IntersectionObserver` API. In this example we are reducing the bounds of the intersection by 50px,\nand adjusting the element to be at least 75% intersecting.\n\n```vue\n<template>\n <MainScroll :threshold=\"0.75\" margin=\"-50px\">\n <ul>\n <MainScrollItem v-for=\"item in 24\" tag=\"li\">Item {{ item }}</MainScrollItem>\n </ul>\n </MainScroll>\n</template>\n\n<script>\n import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll';\n\n export default {\n name: 'MainScrollDemo',\n components: {\n MainScroll,\n MainScrollItem\n }\n };\n</script>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"main-scroll.vue.js","sources":["../../../../../src/x-modules/scroll/components/main-scroll.vue"],"sourcesContent":["<template>\n <NoElement :class=\"dynamicClasses\">\n <slot />\n </NoElement>\n</template>\n<script lang=\"ts\">\n import Vue from 'vue';\n import { Component, Prop, Watch } from 'vue-property-decorator';\n import { XEmit } from '../../../components/decorators/bus.decorators';\n import { XProvide } from '../../../components/decorators/injection.decorators';\n import { State } from '../../../components/decorators/store.decorators';\n import { NoElement } from '../../../components/no-element';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { VueCSSClasses } from '../../../utils/index';\n import { scrollXModule } from '../x-module';\n import { ScrollObserverKey } from './scroll.const';\n import { ScrollVisibilityObserver } from './scroll.types';\n\n /**\n * Extends the scroll making it able to sync the first visible element, and allowing\n * the children position to be restored.\n *\n * Each child element that wants to have this support must be wrapped in a {@link MainScrollItem}\n * component.\n *\n * @public\n */\n @Component({\n components: { NoElement },\n mixins: [xComponentMixin(scrollXModule)]\n })\n /* eslint-disable @typescript-eslint/unbound-method */\n export default class MainScroll extends Vue {\n /**\n * If `true`, sets this scroll instance to the main of the application. Being the main\n * scroll implies that features like restoring the scroll when the query changes, or storing\n * the scroll position in the URL will be enabled for this container.\n *\n * @public\n */\n @Prop({ default: false, type: Boolean })\n public useWindow!: boolean;\n\n /**\n * Timeout in milliseconds to abort trying to restore the scroll position to the target\n * element.\n *\n * @public\n */\n @Prop({ default: 5000 })\n public restoreScrollTimeoutMs!: number;\n\n /**\n * Intersection percentage to consider an element visible.\n *\n * @public\n */\n @Prop({ default: 0.3 })\n public threshold!: number;\n\n /**\n * Adjusts the size of the scroll container bounds.\n *\n * @public\n */\n @Prop({ default: '0px' })\n public margin!: string;\n\n /**\n * The elements that are currently considered visible.\n *\n * @internal\n */\n protected intersectingElements: HTMLElement[] = [];\n\n /**\n * Intersection observer to determine visibility of the elements.\n *\n * @returns An intersection observer to detect elements visibility.\n * @internal\n */\n protected intersectionObserver: IntersectionObserver | null = null;\n\n /**\n * Stores the identifier of the timeout that will consider the scroll failed to restore.\n *\n * @internal\n */\n protected restoreScrollFailTimeoutId?: number;\n\n /**\n * Pending identifier scroll position to restore. If it matches the {@link MainScrollItem.item}\n * `id` property, this component should be scrolled into view.\n *\n * @internal\n */\n @State('scroll', 'pendingScrollTo')\n public pendingScrollTo!: string;\n\n /**\n * Creates an `IntersectionObserver` to detect the first visible elements. Children of this\n * component should register themselves if they want to be observed.\n *\n * @returns The intersection observer.\n * @public\n */\n @XProvide(ScrollObserverKey)\n public get visibleElementsObserver(): ScrollVisibilityObserver | null {\n const observer = this.intersectionObserver;\n return observer\n ? {\n observe: observer.observe.bind(observer),\n unobserve: element => {\n this.removeVisibleElement(element);\n observer.unobserve(element);\n }\n }\n : null;\n }\n\n /**\n * The first visible element contained in this component.\n *\n * @returns The first visible element in this component.\n * @internal\n */\n @XEmit('UserScrolledToElement')\n public get firstVisibleElement(): string | '' {\n if (this.intersectingElements.length === 0) {\n return '';\n }\n const firstVisibleElement = this.intersectingElements.reduce(\n (firstVisibleElement, anotherElement) => {\n // FIXME: This algorithm only takes into account LTR layouts\n const firstVisibleElementBounds = firstVisibleElement.getBoundingClientRect();\n const anotherElementBounds = anotherElement.getBoundingClientRect();\n return anotherElementBounds.left <= firstVisibleElementBounds.left &&\n anotherElementBounds.top <= firstVisibleElementBounds.top\n ? anotherElement\n : firstVisibleElement;\n }\n );\n\n return firstVisibleElement === this.$el.querySelector('[data-scroll]')\n ? ''\n : firstVisibleElement.dataset.scroll!;\n }\n\n /**\n * Initialise the observer after mounting the component.\n */\n mounted(): void {\n this.intersectionObserver = new IntersectionObserver(this.updateVisibleElements, {\n root: this.useWindow ? document : this.$el,\n threshold: this.threshold,\n rootMargin: this.margin\n });\n }\n\n /**\n * Disconnects the intersection observer.\n *\n * @internal\n */\n beforeDestroy(): void {\n this.intersectionObserver?.disconnect();\n this.$x.emit('UserScrolledToElement', '');\n }\n\n /**\n * Disconnects the previous observer.\n *\n * @param _new - The new `IntersectionObserver`.\n * @param old - The new `IntersectionObserver`.\n * @internal\n */\n @Watch('intersectionObserver')\n protected disconnectPreviousObserver(\n _new: IntersectionObserver | null,\n old: IntersectionObserver | null\n ): void {\n old?.disconnect();\n }\n\n /**\n * If there is a pending scroll, starts a countdown to stop trying to restore the scroll.\n *\n * @param pendingScrollTo - The position the scroll should be restored to.\n * @internal\n */\n @Watch('pendingScrollTo')\n protected failRestoringScroll(pendingScrollTo: string | null): void {\n // TODO Move this logic to the wiring. A cancelable delay operator is needed\n clearTimeout(this.restoreScrollFailTimeoutId);\n if (pendingScrollTo) {\n this.restoreScrollFailTimeoutId = setTimeout(() => {\n this.$x.emit('ScrollRestoreFailed');\n }, this.restoreScrollTimeoutMs);\n }\n }\n\n /**\n * Removes an element from the {@link MainScroll.intersectingElements} list.\n *\n * @param element - The element to remove from the visible elements.\n * @internal\n */\n protected removeVisibleElement(element: HTMLElement): void {\n const index = this.intersectingElements.indexOf(element);\n if (index !== -1) {\n this.intersectingElements.splice(index, 1);\n }\n }\n\n /**\n * Updates the visible elements given a list of intersection observer entries.\n *\n * @param entries - The entries from whom update the visibility.\n * @internal\n */\n protected updateVisibleElements(entries: IntersectionObserverEntry[]): void {\n entries.forEach(entry => {\n const target = entry.target as HTMLElement;\n if (entry.isIntersecting) {\n this.intersectingElements.push(target);\n } else {\n this.removeVisibleElement(target);\n }\n });\n }\n\n /**\n * Adds the dynamic css classes to the component.\n *\n * @returns The class to be added to the component.\n *\n * @internal\n */\n protected get dynamicClasses(): VueCSSClasses {\n return {\n 'x-main-scroll--no-transition': !!this.pendingScrollTo\n };\n }\n }\n</script>\n<style lang=\"scss\">\n .x-main-scroll--no-transition {\n * {\n transition: none !important;\n transform: none !important;\n opacity: 1 !important;\n }\n }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n[`UserScrolledToElement`](./../../api/x-components.scrollxevents.md)\n[`ScrollRestoreFailed`](./../../api/x-components.scrollxevents.md)\n\n## See it in action\n\nThe `MainScroll` component must be an ancestor of the `MainScrollItem` components. This is because\nit injects the needed utilities to determine the first visible item.\n\n```vue\n<template>\n <MainScroll>\n <ul>\n <MainScrollItem v-for=\"item in 24\" tag=\"li\">Item {{ item }}</MainScrollItem>\n </ul>\n </MainScroll>\n</template>\n\n<script>\n import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll';\n\n export default {\n name: 'MainScrollDemo',\n components: {\n MainScroll,\n MainScrollItem\n }\n };\n</script>\n\n<style scoped>\n ul {\n overflow: auto;\n max-height: 200px;\n }\n\n li {\n height: 50px;\n line-height: 50px;\n }\n</style>\n```\n\n### Play with props\n\n#### Window scroll\n\nIn case you aren't using a custom scrolling element like the `Scroll` panel, and want to use the\ndefault browser scroll, you can do so by using the `useWindow` prop:\n\n```vue\n<template>\n <MainScroll useWindow>\n <ul>\n <MainScrollItem v-for=\"item in 24\" tag=\"li\">Item {{ item }}</MainScrollItem>\n </ul>\n </MainScroll>\n</template>\n\n<script>\n import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll';\n\n export default {\n name: 'MainScrollDemo',\n components: {\n MainScroll,\n MainScrollItem\n }\n };\n</script>\n```\n\n#### Timeout for restoring scroll\n\nWhen your application is loaded, this component, together with the `MainScrollItem` will try to\nrestore the scroll to the provided position (if available). Because of the dynamic nature of\nJavaScript applications, the element that it tries to restore the scroll to might not be available\nanymore. For this reason after a defined time, the scroll restoration will be considered failed.\n\nThis time can be configured through the `restore-scroll-timeout-ms` prop. This is specially useful\nwhen combined with the URL X Module.\n\n```vue\n<template>\n <MainScroll :restoreScrollTimeoutMs=\"1000\">\n <ul>\n <MainScrollItem v-for=\"item in 24\" tag=\"li\">Item {{ item }}</MainScrollItem>\n </ul>\n </MainScroll>\n</template>\n\n<script>\n import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll';\n\n export default {\n name: 'MainScrollDemo',\n components: {\n MainScroll,\n MainScrollItem\n }\n };\n</script>\n```\n\n#### Adjust first visible item\n\nBy default this component will consider the first visible item, the first element that is at least\nintersecting a 50% with its container. However this arbitrary number might not always be the best.\n\nTo configure this, you can use the `margin` and `threshold` props, which work exactly like in the\n`IntersectionObserver` API. In this example we are reducing the bounds of the intersection by 50px,\nand adjusting the element to be at least 75% intersecting.\n\n```vue\n<template>\n <MainScroll :threshold=\"0.75\" margin=\"-50px\">\n <ul>\n <MainScrollItem v-for=\"item in 24\" tag=\"li\">Item {{ item }}</MainScrollItem>\n </ul>\n </MainScroll>\n</template>\n\n<script>\n import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll';\n\n export default {\n name: 'MainScrollDemo',\n components: {\n MainScroll,\n MainScrollItem\n }\n };\n</script>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,4 +1,5 @@
1
1
  import { __extends, __decorate } from 'tslib';
2
+ import Vue from 'vue';
2
3
  import { Prop, Watch, Component } from 'vue-property-decorator';
3
4
  import { NoElement } from '../../../components/no-element.js';
4
5
  import { XEmit } from '../../../components/decorators/bus.decorators.js';
@@ -164,6 +165,22 @@ var MainScroll = /** @class */ (function (_super) {
164
165
  }
165
166
  });
166
167
  };
168
+ Object.defineProperty(MainScroll.prototype, "dynamicClasses", {
169
+ /**
170
+ * Adds the dynamic css classes to the component.
171
+ *
172
+ * @returns The class to be added to the component.
173
+ *
174
+ * @internal
175
+ */
176
+ get: function () {
177
+ return {
178
+ 'x-main-scroll--no-transition': !!this.pendingScrollTo
179
+ };
180
+ },
181
+ enumerable: false,
182
+ configurable: true
183
+ });
167
184
  __decorate([
168
185
  Prop({ default: false, type: Boolean })
169
186
  ], MainScroll.prototype, "useWindow", void 0);
@@ -174,7 +191,7 @@ var MainScroll = /** @class */ (function (_super) {
174
191
  Prop({ default: 0.3 })
175
192
  ], MainScroll.prototype, "threshold", void 0);
176
193
  __decorate([
177
- Prop({ default: '' })
194
+ Prop({ default: '0px' })
178
195
  ], MainScroll.prototype, "margin", void 0);
179
196
  __decorate([
180
197
  State('scroll', 'pendingScrollTo')
@@ -193,12 +210,13 @@ var MainScroll = /** @class */ (function (_super) {
193
210
  ], MainScroll.prototype, "failRestoringScroll", null);
194
211
  MainScroll = __decorate([
195
212
  Component({
213
+ components: { NoElement: NoElement },
196
214
  mixins: [xComponentMixin(scrollXModule)]
197
215
  })
198
216
  /* eslint-disable @typescript-eslint/unbound-method */
199
217
  ], MainScroll);
200
218
  return MainScroll;
201
- }(NoElement));
219
+ }(Vue));
202
220
 
203
221
  export default MainScroll;
204
222
  //# sourceMappingURL=main-scroll.vue_rollup-plugin-vue=script.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"main-scroll.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/scroll/components/main-scroll.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\nimport { Component, Prop, Watch } from 'vue-property-decorator';\nimport { XEmit } from '../../../components/decorators/bus.decorators';\nimport { XProvide } from '../../../components/decorators/injection.decorators';\nimport { State } from '../../../components/decorators/store.decorators';\nimport { NoElement } from '../../../components/no-element';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { scrollXModule } from '../x-module';\nimport { ScrollObserverKey } from './scroll.const';\nimport { ScrollVisibilityObserver } from './scroll.types';\n\n/**\n * Extends the scroll making it able to sync the first visible element, and allowing\n * the children position to be restored.\n *\n * Each child element that wants to have this support must be wrapped in a {@link MainScrollItem}\n * component.\n *\n * @public\n */\n@Component({\n mixins: [xComponentMixin(scrollXModule)]\n})\n/* eslint-disable @typescript-eslint/unbound-method */\nexport default class MainScroll extends NoElement {\n /**\n * If `true`, sets this scroll instance to the main of the application. Being the main\n * scroll implies that features like restoring the scroll when the query changes, or storing\n * the scroll position in the URL will be enabled for this container.\n *\n * @public\n */\n @Prop({ default: false, type: Boolean })\n public useWindow!: boolean;\n\n /**\n * Timeout in milliseconds to abort trying to restore the scroll position to the target\n * element.\n *\n * @public\n */\n @Prop({ default: 5000 })\n public restoreScrollTimeoutMs!: number;\n\n /**\n * Intersection percentage to consider an element visible.\n *\n * @public\n */\n @Prop({ default: 0.3 })\n public threshold!: number;\n\n /**\n * Adjusts the size of the scroll container bounds.\n *\n * @public\n */\n @Prop({ default: '' })\n public margin!: string;\n\n /**\n * The elements that are currently considered visible.\n *\n * @internal\n */\n protected intersectingElements: HTMLElement[] = [];\n\n /**\n * Intersection observer to determine visibility of the elements.\n *\n * @returns An intersection observer to detect elements visibility.\n * @internal\n */\n protected intersectionObserver: IntersectionObserver | null = null;\n\n /**\n * Stores the identifier of the timeout that will consider the scroll failed to restore.\n *\n * @internal\n */\n protected restoreScrollFailTimeoutId?: number;\n\n /**\n * Pending identifier scroll position to restore. If it matches the {@link MainScrollItem.item}\n * `id` property, this component should be scrolled into view.\n *\n * @internal\n */\n @State('scroll', 'pendingScrollTo')\n public pendingScrollTo!: string;\n\n /**\n * Creates an `IntersectionObserver` to detect the first visible elements. Children of this\n * component should register themselves if they want to be observed.\n *\n * @returns The intersection observer.\n * @public\n */\n @XProvide(ScrollObserverKey)\n public get visibleElementsObserver(): ScrollVisibilityObserver | null {\n const observer = this.intersectionObserver;\n return observer\n ? {\n observe: observer.observe.bind(observer),\n unobserve: element => {\n this.removeVisibleElement(element);\n observer.unobserve(element);\n }\n }\n : null;\n }\n\n /**\n * The first visible element contained in this component.\n *\n * @returns The first visible element in this component.\n * @internal\n */\n @XEmit('UserScrolledToElement')\n public get firstVisibleElement(): string | '' {\n if (this.intersectingElements.length === 0) {\n return '';\n }\n const firstVisibleElement = this.intersectingElements.reduce(\n (firstVisibleElement, anotherElement) => {\n // FIXME: This algorithm only takes into account LTR layouts\n const firstVisibleElementBounds = firstVisibleElement.getBoundingClientRect();\n const anotherElementBounds = anotherElement.getBoundingClientRect();\n return anotherElementBounds.left <= firstVisibleElementBounds.left &&\n anotherElementBounds.top <= firstVisibleElementBounds.top\n ? anotherElement\n : firstVisibleElement;\n }\n );\n\n return firstVisibleElement === this.$el.querySelector('[data-scroll]')\n ? ''\n : firstVisibleElement.dataset.scroll!;\n }\n\n /**\n * Initialise the observer after mounting the component.\n */\n mounted(): void {\n this.intersectionObserver = new IntersectionObserver(this.updateVisibleElements, {\n root: this.useWindow ? document : this.$el,\n threshold: this.threshold,\n rootMargin: this.margin\n });\n }\n\n /**\n * Disconnects the intersection observer.\n *\n * @internal\n */\n beforeDestroy(): void {\n this.intersectionObserver?.disconnect();\n this.$x.emit('UserScrolledToElement', '');\n }\n\n /**\n * Disconnects the previous observer.\n *\n * @param _new - The new `IntersectionObserver`.\n * @param old - The new `IntersectionObserver`.\n * @internal\n */\n @Watch('intersectionObserver')\n protected disconnectPreviousObserver(\n _new: IntersectionObserver | null,\n old: IntersectionObserver | null\n ): void {\n old?.disconnect();\n }\n\n /**\n * If there is a pending scroll, starts a countdown to stop trying to restore the scroll.\n *\n * @param pendingScrollTo - The position the scroll should be restored to.\n * @internal\n */\n @Watch('pendingScrollTo')\n protected failRestoringScroll(pendingScrollTo: string | null): void {\n // TODO Move this logic to the wiring. A cancelable delay operator is needed\n clearTimeout(this.restoreScrollFailTimeoutId);\n if (pendingScrollTo) {\n this.restoreScrollFailTimeoutId = setTimeout(() => {\n this.$x.emit('ScrollRestoreFailed');\n }, this.restoreScrollTimeoutMs);\n }\n }\n\n /**\n * Removes an element from the {@link MainScroll.intersectingElements} list.\n *\n * @param element - The element to remove from the visible elements.\n * @internal\n */\n protected removeVisibleElement(element: HTMLElement): void {\n const index = this.intersectingElements.indexOf(element);\n if (index !== -1) {\n this.intersectingElements.splice(index, 1);\n }\n }\n\n /**\n * Updates the visible elements given a list of intersection observer entries.\n *\n * @param entries - The entries from whom update the visibility.\n * @internal\n */\n protected updateVisibleElements(entries: IntersectionObserverEntry[]): void {\n entries.forEach(entry => {\n const target = entry.target as HTMLElement;\n if (entry.isIntersecting) {\n this.intersectingElements.push(target);\n } else {\n this.removeVisibleElement(target);\n }\n });\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;AAWA;;;;;;;;;AAaA;IAAwC,8BAAS;;IAAjD;QAAA,qEAsMC;;;;;;QA7JW,0BAAoB,GAAkB,EAAE,CAAC;;;;;;;QAQzC,0BAAoB,GAAgC,IAAI,CAAC;;KAqJpE;IA3HC,sBAAW,+CAAuB;;;;;;;;aAAlC;YADA,iBAYC;YAVC,IAAM,QAAQ,GAAG,IAAI,CAAC,oBAAoB,CAAC;YAC3C,OAAO,QAAQ;kBACX;oBACE,OAAO,EAAE,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC;oBACxC,SAAS,EAAE,UAAA,OAAO;wBAChB,KAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC;wBACnC,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;qBAC7B;iBACF;kBACD,IAAI,CAAC;SACV;;;OAAA;IASD,sBAAW,2CAAmB;;;;;;;aAA9B;YACE,IAAI,IAAI,CAAC,oBAAoB,CAAC,MAAM,KAAK,CAAC,EAAE;gBAC1C,OAAO,EAAE,CAAC;aACX;YACD,IAAM,mBAAmB,GAAG,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAC1D,UAAC,mBAAmB,EAAE,cAAc;;gBAElC,IAAM,yBAAyB,GAAG,mBAAmB,CAAC,qBAAqB,EAAE,CAAC;gBAC9E,IAAM,oBAAoB,GAAG,cAAc,CAAC,qBAAqB,EAAE,CAAC;gBACpE,OAAO,oBAAoB,CAAC,IAAI,IAAI,yBAAyB,CAAC,IAAI;oBAChE,oBAAoB,CAAC,GAAG,IAAI,yBAAyB,CAAC,GAAG;sBACvD,cAAc;sBACd,mBAAmB,CAAC;aACzB,CACF,CAAC;YAEF,OAAO,mBAAmB,KAAK,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,eAAe,CAAC;kBAClE,EAAE;kBACF,mBAAmB,CAAC,OAAO,CAAC,MAAO,CAAC;SACzC;;;OAAA;;;;IAKD,4BAAO,GAAP;QACE,IAAI,CAAC,oBAAoB,GAAG,IAAI,oBAAoB,CAAC,IAAI,CAAC,qBAAqB,EAAE;YAC/E,IAAI,EAAE,IAAI,CAAC,SAAS,GAAG,QAAQ,GAAG,IAAI,CAAC,GAAG;YAC1C,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,UAAU,EAAE,IAAI,CAAC,MAAM;SACxB,CAAC,CAAC;KACJ;;;;;;IAOD,kCAAa,GAAb;;QACE,MAAA,IAAI,CAAC,oBAAoB,0CAAE,UAAU,EAAE,CAAC;QACxC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,EAAE,CAAC,CAAC;KAC3C;;;;;;;;IAUS,+CAA0B,GAApC,UACE,IAAiC,EACjC,GAAgC;QAEhC,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,UAAU,EAAE,CAAC;KACnB;;;;;;;IASS,wCAAmB,GAA7B,UAA8B,eAA8B;QAD5D,iBASC;;QANC,YAAY,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;QAC9C,IAAI,eAAe,EAAE;YACnB,IAAI,CAAC,0BAA0B,GAAG,UAAU,CAAC;gBAC3C,KAAI,CAAC,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;aACrC,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAAC;SACjC;KACF;;;;;;;IAQS,yCAAoB,GAA9B,UAA+B,OAAoB;QACjD,IAAM,KAAK,GAAG,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACzD,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE;YAChB,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;SAC5C;KACF;;;;;;;IAQS,0CAAqB,GAA/B,UAAgC,OAAoC;QAApE,iBASC;QARC,OAAO,CAAC,OAAO,CAAC,UAAA,KAAK;YACnB,IAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;YAC3C,IAAI,KAAK,CAAC,cAAc,EAAE;gBACxB,KAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;aACxC;iBAAM;gBACL,KAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC;aACnC;SACF,CAAC,CAAC;KACJ;IA5LD;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACb;IAS3B;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8DACe;IAQvC;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC;iDACG;IAQ1B;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;8CACC;IA+BvB;QADC,KAAK,CAAC,QAAQ,EAAE,iBAAiB,CAAC;uDACH;IAUhC;QADC,QAAQ,CAAC,iBAAiB,CAAC;6DAY3B;IASD;QADC,KAAK,CAAC,uBAAuB,CAAC;yDAoB9B;IA+BD;QADC,KAAK,CAAC,sBAAsB,CAAC;gEAM7B;IASD;QADC,KAAK,CAAC,iBAAiB,CAAC;yDASxB;IAvKkB,UAAU;QAJ9B,SAAS,CAAC;YACT,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;SACzC,CAAC;;OAEmB,UAAU,CAsM9B;IAAD,iBAAC;CAAA,CAtMuC,SAAS;;;;"}
1
+ {"version":3,"file":"main-scroll.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/scroll/components/main-scroll.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop, Watch } from 'vue-property-decorator';\nimport { XEmit } from '../../../components/decorators/bus.decorators';\nimport { XProvide } from '../../../components/decorators/injection.decorators';\nimport { State } from '../../../components/decorators/store.decorators';\nimport { NoElement } from '../../../components/no-element';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { VueCSSClasses } from '../../../utils/index';\nimport { scrollXModule } from '../x-module';\nimport { ScrollObserverKey } from './scroll.const';\nimport { ScrollVisibilityObserver } from './scroll.types';\n\n/**\n * Extends the scroll making it able to sync the first visible element, and allowing\n * the children position to be restored.\n *\n * Each child element that wants to have this support must be wrapped in a {@link MainScrollItem}\n * component.\n *\n * @public\n */\n@Component({\n components: { NoElement },\n mixins: [xComponentMixin(scrollXModule)]\n})\n/* eslint-disable @typescript-eslint/unbound-method */\nexport default class MainScroll extends Vue {\n /**\n * If `true`, sets this scroll instance to the main of the application. Being the main\n * scroll implies that features like restoring the scroll when the query changes, or storing\n * the scroll position in the URL will be enabled for this container.\n *\n * @public\n */\n @Prop({ default: false, type: Boolean })\n public useWindow!: boolean;\n\n /**\n * Timeout in milliseconds to abort trying to restore the scroll position to the target\n * element.\n *\n * @public\n */\n @Prop({ default: 5000 })\n public restoreScrollTimeoutMs!: number;\n\n /**\n * Intersection percentage to consider an element visible.\n *\n * @public\n */\n @Prop({ default: 0.3 })\n public threshold!: number;\n\n /**\n * Adjusts the size of the scroll container bounds.\n *\n * @public\n */\n @Prop({ default: '0px' })\n public margin!: string;\n\n /**\n * The elements that are currently considered visible.\n *\n * @internal\n */\n protected intersectingElements: HTMLElement[] = [];\n\n /**\n * Intersection observer to determine visibility of the elements.\n *\n * @returns An intersection observer to detect elements visibility.\n * @internal\n */\n protected intersectionObserver: IntersectionObserver | null = null;\n\n /**\n * Stores the identifier of the timeout that will consider the scroll failed to restore.\n *\n * @internal\n */\n protected restoreScrollFailTimeoutId?: number;\n\n /**\n * Pending identifier scroll position to restore. If it matches the {@link MainScrollItem.item}\n * `id` property, this component should be scrolled into view.\n *\n * @internal\n */\n @State('scroll', 'pendingScrollTo')\n public pendingScrollTo!: string;\n\n /**\n * Creates an `IntersectionObserver` to detect the first visible elements. Children of this\n * component should register themselves if they want to be observed.\n *\n * @returns The intersection observer.\n * @public\n */\n @XProvide(ScrollObserverKey)\n public get visibleElementsObserver(): ScrollVisibilityObserver | null {\n const observer = this.intersectionObserver;\n return observer\n ? {\n observe: observer.observe.bind(observer),\n unobserve: element => {\n this.removeVisibleElement(element);\n observer.unobserve(element);\n }\n }\n : null;\n }\n\n /**\n * The first visible element contained in this component.\n *\n * @returns The first visible element in this component.\n * @internal\n */\n @XEmit('UserScrolledToElement')\n public get firstVisibleElement(): string | '' {\n if (this.intersectingElements.length === 0) {\n return '';\n }\n const firstVisibleElement = this.intersectingElements.reduce(\n (firstVisibleElement, anotherElement) => {\n // FIXME: This algorithm only takes into account LTR layouts\n const firstVisibleElementBounds = firstVisibleElement.getBoundingClientRect();\n const anotherElementBounds = anotherElement.getBoundingClientRect();\n return anotherElementBounds.left <= firstVisibleElementBounds.left &&\n anotherElementBounds.top <= firstVisibleElementBounds.top\n ? anotherElement\n : firstVisibleElement;\n }\n );\n\n return firstVisibleElement === this.$el.querySelector('[data-scroll]')\n ? ''\n : firstVisibleElement.dataset.scroll!;\n }\n\n /**\n * Initialise the observer after mounting the component.\n */\n mounted(): void {\n this.intersectionObserver = new IntersectionObserver(this.updateVisibleElements, {\n root: this.useWindow ? document : this.$el,\n threshold: this.threshold,\n rootMargin: this.margin\n });\n }\n\n /**\n * Disconnects the intersection observer.\n *\n * @internal\n */\n beforeDestroy(): void {\n this.intersectionObserver?.disconnect();\n this.$x.emit('UserScrolledToElement', '');\n }\n\n /**\n * Disconnects the previous observer.\n *\n * @param _new - The new `IntersectionObserver`.\n * @param old - The new `IntersectionObserver`.\n * @internal\n */\n @Watch('intersectionObserver')\n protected disconnectPreviousObserver(\n _new: IntersectionObserver | null,\n old: IntersectionObserver | null\n ): void {\n old?.disconnect();\n }\n\n /**\n * If there is a pending scroll, starts a countdown to stop trying to restore the scroll.\n *\n * @param pendingScrollTo - The position the scroll should be restored to.\n * @internal\n */\n @Watch('pendingScrollTo')\n protected failRestoringScroll(pendingScrollTo: string | null): void {\n // TODO Move this logic to the wiring. A cancelable delay operator is needed\n clearTimeout(this.restoreScrollFailTimeoutId);\n if (pendingScrollTo) {\n this.restoreScrollFailTimeoutId = setTimeout(() => {\n this.$x.emit('ScrollRestoreFailed');\n }, this.restoreScrollTimeoutMs);\n }\n }\n\n /**\n * Removes an element from the {@link MainScroll.intersectingElements} list.\n *\n * @param element - The element to remove from the visible elements.\n * @internal\n */\n protected removeVisibleElement(element: HTMLElement): void {\n const index = this.intersectingElements.indexOf(element);\n if (index !== -1) {\n this.intersectingElements.splice(index, 1);\n }\n }\n\n /**\n * Updates the visible elements given a list of intersection observer entries.\n *\n * @param entries - The entries from whom update the visibility.\n * @internal\n */\n protected updateVisibleElements(entries: IntersectionObserverEntry[]): void {\n entries.forEach(entry => {\n const target = entry.target as HTMLElement;\n if (entry.isIntersecting) {\n this.intersectingElements.push(target);\n } else {\n this.removeVisibleElement(target);\n }\n });\n }\n\n /**\n * Adds the dynamic css classes to the component.\n *\n * @returns The class to be added to the component.\n *\n * @internal\n */\n protected get dynamicClasses(): VueCSSClasses {\n return {\n 'x-main-scroll--no-transition': !!this.pendingScrollTo\n };\n }\n}\n"],"names":[],"mappings":"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"}
@@ -99,8 +99,10 @@ var trackAddToCartWire = createTrackResultWire('add2cart');
99
99
  */
100
100
  function createTrackResultWire(property) {
101
101
  return filter(wireDispatch('track', function (_a) {
102
- var tagging = _a.eventPayload.tagging;
103
- return tagging[property];
102
+ var tagging = _a.eventPayload.tagging, location = _a.metadata.location;
103
+ var taggingInfo = tagging[property];
104
+ taggingInfo.params.location = location;
105
+ return taggingInfo;
104
106
  }), function (_a) {
105
107
  var tagging = _a.eventPayload.tagging;
106
108
  return !!(tagging === null || tagging === void 0 ? void 0 : tagging[property]);
@@ -1 +1 @@
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;;;;"}
1
+ {"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/tagging/wiring.ts"],"sourcesContent":["import { Result, TaggingInfo } 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 }, metadata: { location } }) => {\n const taggingInfo: TaggingInfo = tagging[property];\n taggingInfo.params.location = location as string;\n return taggingInfo;\n }),\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,EAAqD;YAAnC,OAAO,0BAAA,EAAgB,QAAQ,uBAAA;QACtE,IAAM,WAAW,GAAgB,OAAO,CAAC,QAAQ,CAAC,CAAC;QACnD,WAAW,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAkB,CAAC;QACjD,OAAO,WAAW,CAAC;KACpB,CAAC,EACF,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;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@empathyco/x-components",
3
- "version": "3.0.0-alpha.36",
3
+ "version": "3.0.0-alpha.37",
4
4
  "description": "Empathy X Components",
5
5
  "author": "Empathy Systems Corporation S.L.",
6
6
  "license": "Apache-2.0",
@@ -131,5 +131,5 @@
131
131
  "access": "public",
132
132
  "directory": "dist"
133
133
  },
134
- "gitHead": "1dbbb5f00d47cd57405010ef454a3e347d5a9c2b"
134
+ "gitHead": "c526db1d98639ff017d2bc93953700124bd172d4"
135
135
  }
@@ -21932,8 +21932,8 @@
21932
21932
  },
21933
21933
  {
21934
21934
  "kind": "Reference",
21935
- "text": "NoElement",
21936
- "canonicalReference": "@empathyco/x-components!NoElement"
21935
+ "text": "Vue",
21936
+ "canonicalReference": "vue!Vue:interface"
21937
21937
  },
21938
21938
  {
21939
21939
  "kind": "Content",
@@ -43921,7 +43921,7 @@
43921
43921
  },
43922
43922
  {
43923
43923
  "kind": "Content",
43924
- "text": "<import(\"@empathyco/x-types\")."
43924
+ "text": "<"
43925
43925
  },
43926
43926
  {
43927
43927
  "kind": "Reference",
@@ -43930,7 +43930,7 @@
43930
43930
  },
43931
43931
  {
43932
43932
  "kind": "Content",
43933
- "text": " | import(\"@empathyco/x-types\")."
43933
+ "text": " | "
43934
43934
  },
43935
43935
  {
43936
43936
  "kind": "Reference",
@@ -2099,15 +2099,15 @@ export class LocationProvider extends NoElement {
2099
2099
  protected location: FeatureLocation;
2100
2100
  }
2101
2101
 
2102
- // Warning: (ae-incompatible-release-tags) The symbol "MainScroll" is marked as @public, but its signature references "NoElement" which is marked as @internal
2103
- //
2104
2102
  // @public
2105
- export class MainScroll extends NoElement {
2103
+ export class MainScroll extends Vue_2 {
2106
2104
  // @internal
2107
2105
  beforeDestroy(): void;
2108
2106
  // @internal
2109
2107
  protected disconnectPreviousObserver(_new: IntersectionObserver | null, old: IntersectionObserver | null): void;
2110
2108
  // @internal
2109
+ protected get dynamicClasses(): VueCSSClasses;
2110
+ // @internal
2111
2111
  protected failRestoringScroll(pendingScrollTo: string | null): void;
2112
2112
  // @internal
2113
2113
  get firstVisibleElement(): string | '';
@@ -1,4 +1,5 @@
1
- import { NoElement } from '../../../components/no-element';
1
+ import Vue from 'vue';
2
+ import { VueCSSClasses } from '../../../utils/index';
2
3
  import { ScrollVisibilityObserver } from './scroll.types';
3
4
  /**
4
5
  * Extends the scroll making it able to sync the first visible element, and allowing
@@ -9,7 +10,7 @@ import { ScrollVisibilityObserver } from './scroll.types';
9
10
  *
10
11
  * @public
11
12
  */
12
- export default class MainScroll extends NoElement {
13
+ export default class MainScroll extends Vue {
13
14
  /**
14
15
  * If `true`, sets this scroll instance to the main of the application. Being the main
15
16
  * scroll implies that features like restoring the scroll when the query changes, or storing
@@ -117,5 +118,13 @@ export default class MainScroll extends NoElement {
117
118
  * @internal
118
119
  */
119
120
  protected updateVisibleElements(entries: IntersectionObserverEntry[]): void;
121
+ /**
122
+ * Adds the dynamic css classes to the component.
123
+ *
124
+ * @returns The class to be added to the component.
125
+ *
126
+ * @internal
127
+ */
128
+ protected get dynamicClasses(): VueCSSClasses;
120
129
  }
121
130
  //# sourceMappingURL=main-scroll.vue?rollup-plugin-vue=script.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"main-scroll.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/scroll/components/main-scroll.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAI3D,OAAO,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAC;AAE1D;;;;;;;;GAQG;AAKH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,SAAS;IAC/C;;;;;;OAMG;IAEI,SAAS,EAAG,OAAO,CAAC;IAE3B;;;;;OAKG;IAEI,sBAAsB,EAAG,MAAM,CAAC;IAEvC;;;;OAIG;IAEI,SAAS,EAAG,MAAM,CAAC;IAE1B;;;;OAIG;IAEI,MAAM,EAAG,MAAM,CAAC;IAEvB;;;;OAIG;IACH,SAAS,CAAC,oBAAoB,EAAE,WAAW,EAAE,CAAM;IAEnD;;;;;OAKG;IACH,SAAS,CAAC,oBAAoB,EAAE,oBAAoB,GAAG,IAAI,CAAQ;IAEnE;;;;OAIG;IACH,SAAS,CAAC,0BAA0B,CAAC,EAAE,MAAM,CAAC;IAE9C;;;;;OAKG;IAEI,eAAe,EAAG,MAAM,CAAC;IAEhC;;;;;;OAMG;IACH,IACW,uBAAuB,IAAI,wBAAwB,GAAG,IAAI,CAWpE;IAED;;;;;OAKG;IACH,IACW,mBAAmB,IAAI,MAAM,GAAG,EAAE,CAmB5C;IAED;;OAEG;IACH,OAAO,IAAI,IAAI;IAQf;;;;OAIG;IACH,aAAa,IAAI,IAAI;IAKrB;;;;;;OAMG;IAEH,SAAS,CAAC,0BAA0B,CAClC,IAAI,EAAE,oBAAoB,GAAG,IAAI,EACjC,GAAG,EAAE,oBAAoB,GAAG,IAAI,GAC/B,IAAI;IAIP;;;;;OAKG;IAEH,SAAS,CAAC,mBAAmB,CAAC,eAAe,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAUnE;;;;;OAKG;IACH,SAAS,CAAC,oBAAoB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAO1D;;;;;OAKG;IACH,SAAS,CAAC,qBAAqB,CAAC,OAAO,EAAE,yBAAyB,EAAE,GAAG,IAAI;CAU5E"}
1
+ {"version":3,"file":"main-scroll.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/scroll/components/main-scroll.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAMA,OAAO,GAAG,MAAM,KAAK,CAAC;AAOtB,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAGrD,OAAO,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAC;AAE1D;;;;;;;;GAQG;AAMH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,GAAG;IACzC;;;;;;OAMG;IAEI,SAAS,EAAG,OAAO,CAAC;IAE3B;;;;;OAKG;IAEI,sBAAsB,EAAG,MAAM,CAAC;IAEvC;;;;OAIG;IAEI,SAAS,EAAG,MAAM,CAAC;IAE1B;;;;OAIG;IAEI,MAAM,EAAG,MAAM,CAAC;IAEvB;;;;OAIG;IACH,SAAS,CAAC,oBAAoB,EAAE,WAAW,EAAE,CAAM;IAEnD;;;;;OAKG;IACH,SAAS,CAAC,oBAAoB,EAAE,oBAAoB,GAAG,IAAI,CAAQ;IAEnE;;;;OAIG;IACH,SAAS,CAAC,0BAA0B,CAAC,EAAE,MAAM,CAAC;IAE9C;;;;;OAKG;IAEI,eAAe,EAAG,MAAM,CAAC;IAEhC;;;;;;OAMG;IACH,IACW,uBAAuB,IAAI,wBAAwB,GAAG,IAAI,CAWpE;IAED;;;;;OAKG;IACH,IACW,mBAAmB,IAAI,MAAM,GAAG,EAAE,CAmB5C;IAED;;OAEG;IACH,OAAO,IAAI,IAAI;IAQf;;;;OAIG;IACH,aAAa,IAAI,IAAI;IAKrB;;;;;;OAMG;IAEH,SAAS,CAAC,0BAA0B,CAClC,IAAI,EAAE,oBAAoB,GAAG,IAAI,EACjC,GAAG,EAAE,oBAAoB,GAAG,IAAI,GAC/B,IAAI;IAIP;;;;;OAKG;IAEH,SAAS,CAAC,mBAAmB,CAAC,eAAe,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAUnE;;;;;OAKG;IACH,SAAS,CAAC,oBAAoB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAO1D;;;;;OAKG;IACH,SAAS,CAAC,qBAAqB,CAAC,OAAO,EAAE,yBAAyB,EAAE,GAAG,IAAI;IAW3E;;;;;;OAMG;IACH,SAAS,KAAK,cAAc,IAAI,aAAa,CAI5C;CACF"}
@@ -1,4 +1,4 @@
1
- import { Result } from '@empathyco/x-types';
1
+ import { Result, TaggingInfo } from '@empathyco/x-types';
2
2
  import { Wire } from '../../wiring/wiring.types';
3
3
  /**
4
4
  * Sets the tagging state `consent`.
@@ -24,7 +24,7 @@ export declare const setSessionDuration: Wire<number>;
24
24
  *
25
25
  * @public
26
26
  */
27
- export declare const trackQueryWire: Wire<import("@empathyco/x-types").TaggingInfo | import("@empathyco/x-types").TaggingInfo[]>;
27
+ export declare const trackQueryWire: Wire<TaggingInfo | TaggingInfo[]>;
28
28
  /**
29
29
  * Tracks the tagging of the result.
30
30
  *
@@ -56,7 +56,7 @@ export declare const taggingWiring: {
56
56
  setQueryTaggingDebounce: Wire<number>;
57
57
  };
58
58
  SearchTaggingChanged: {
59
- trackQueryWire: Wire<import("@empathyco/x-types").TaggingInfo | import("@empathyco/x-types").TaggingInfo[]>;
59
+ trackQueryWire: Wire<TaggingInfo | TaggingInfo[]>;
60
60
  };
61
61
  UserClickedAResult: {
62
62
  trackResultClickedWire: Wire<Result>;
@@ -1 +1 @@
1
- {"version":3,"file":"wiring.d.ts","sourceRoot":"","sources":["../../../../src/x-modules/tagging/wiring.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAQ5C,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AA6CjD;;;;GAIG;AACH,eAAO,MAAM,UAAU,eAA2B,CAAC;AAEnD;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,cAAwC,CAAC;AAE7E;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,cAAmC,CAAC;AAEnE;;;;;GAKG;AACH,eAAO,MAAM,cAAc,6FAa1B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,cAAiC,CAAC;AAErE;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,cAAoC,CAAC;AAiBpE;;;;GAIG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;CAsBxB,CAAC"}
1
+ {"version":3,"file":"wiring.d.ts","sourceRoot":"","sources":["../../../../src/x-modules/tagging/wiring.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAQzD,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AA6CjD;;;;GAIG;AACH,eAAO,MAAM,UAAU,eAA2B,CAAC;AAEnD;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,cAAwC,CAAC;AAE7E;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,cAAmC,CAAC;AAEnE;;;;;GAKG;AACH,eAAO,MAAM,cAAc,mCAa1B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,cAAiC,CAAC;AAErE;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,cAAoC,CAAC;AAqBpE;;;;GAIG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;CAsBxB,CAAC"}