npm - @empathyco/x-components - Versions diffs - 3.0.0-alpha.36 → 3.0.0-alpha.40 - Mend

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

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

package/js/x-modules/related-tags/wiring.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/related-tags/wiring.ts"],"sourcesContent":["import {\n namespacedWireCommit,\n namespacedWireDispatch,\n namespacedWireDispatchWithoutPayload\n} from '../../wiring/namespaced-wires.factory';\nimport { NamespacedWireCommit, NamespacedWireDispatch } from '../../wiring/namespaced-wiring.types';\nimport { createWiring } from '../../wiring/wiring.utils';\n\n/*\n `relatedTags` {@link XModuleName \| XModule name}.\n \n @internal\n /\nconst moduleName = 'relatedTags';\n/\n WireCommit for {@link RelatedTagsXModule}.\n \n @internal\n /\nconst wireCommit: NamespacedWireCommit<typeof moduleName> = namespacedWireCommit(moduleName);\n/\n WireDispatch for {@link RelatedTagsXModule}.\n \n @internal\n /\nconst wireDispatch: NamespacedWireDispatch<typeof moduleName> = namespacedWireDispatch(moduleName);\n/\n WireDispatchWithoutPayload for {@link RelatedTagsXModule}.\n \n @internal\n /\nconst wireDispatchWithoutPayload = namespacedWireDispatchWithoutPayload(moduleName);\n\n/\n Sets the related tags state `query`.\n \n @public\n /\nexport const setRelatedTagsQuery = wireCommit('setQuery');\n\n/\n Sets the related tags state `params`.\n \n @public\n /\nexport const setRelatedTagsExtraParams = wireCommit('setParams');\n\n/\n Requests and stores the related tags.\n \n @public\n /\nexport const fetchAndSaveRelatedTagsWire = wireDispatch('fetchAndSaveRelatedTags');\n\n/\n Cancels the {@link RelatedTagsActions.fetchAndSaveRelatedTags} request promise.\n \n @public\n /\nexport const cancelFetchAndSaveRelatedTagsWire = wireDispatchWithoutPayload(\n 'cancelFetchAndSaveRelatedTags'\n);\n\n/\n Sets the selected related tags.\n \n @public\n /\nexport const toggleRelatedTagWire = wireDispatch('toggleRelatedTag');\n\n/\n Clear the selected related tags.\n \n @public\n /\nexport const clearSelectedRelatedTags = wireCommit('setSelectedRelatedTags', []);\n\n/\n Clear the related tags query.\n \n @public\n /\nexport const clearRelatedTagsQuery = wireCommit('setQuery', '');\n\n/\n Saves the params from the url.\n \n @public\n /\nexport const setUrlParamsWire = wireDispatch('setUrlParams');\n\n/\n Wiring configuration for the {@link RelatedTagsXModule \| related tags module}.\n \n @internal\n */\nexport const relatedTagsWiring = createWiring({\n UserAcceptedAQuery: {\n setRelatedTagsQuery,\n clearSelectedRelatedTags\n },\n UserPickedARelatedTag: {\n toggleRelatedTagWire\n },\n RelatedTagsRequestChanged: {\n fetchAndSaveRelatedTagsWire\n },\n UserClearedQuery: {\n cancelFetchAndSaveRelatedTagsWire,\n clearRelatedTagsQuery,\n clearSelectedRelatedTags\n },\n ExtraParamsChanged: {\n setRelatedTagsExtraParams\n },\n ParamsLoadedFromUrl: {\n setUrlParamsWire\n }\n});\n"],"names":[],"mappings":";;;AAQA;;;;;AAKA,IAAM,UAAU,GAAG,aAAa,CAAC;AACjC;;;;;AAKA,IAAM,UAAU,GAA4C,oBAAoB,CAAC,UAAU,CAAC,CAAC;AAC7F;;;;;AAKA,IAAM,YAAY,GAA8C,sBAAsB,CAAC,UAAU,CAAC,CAAC;AACnG;;;;;AAKA,IAAM,0BAA0B,GAAG,oCAAoC,CAAC,UAAU,CAAC,CAAC;AAEpF;;;;;IAKa,mBAAmB,GAAG,UAAU,CAAC,UAAU,EAAE;AAE1D;;;;;IAKa,yBAAyB,GAAG,UAAU,CAAC,WAAW,EAAE;AAEjE;;;;;IAKa,2BAA2B,GAAG,YAAY,CAAC,yBAAyB,EAAE;AAEnF;;;;;IAKa,iCAAiC,GAAG,0BAA0B,CACzE,+BAA+B,EAC/B;AAEF;;;;;IAKa,oBAAoB,GAAG,YAAY,CAAC,kBAAkB,EAAE;AAErE;;;;;IAKa,wBAAwB,GAAG,UAAU,CAAC,wBAAwB,EAAE,EAAE,EAAE;AAEjF;;;;;IAKa,qBAAqB,GAAG,UAAU,CAAC,UAAU,EAAE,EAAE,EAAE;AAEhE;;;;;IAKa,gBAAgB,GAAG,YAAY,CAAC,cAAc,EAAE;AAE7D;;;;;IAKa,iBAAiB,GAAG,YAAY,CAAC;IAC5C,kBAAkB,EAAE;QAClB,mBAAmB,qBAAA;QACnB,wBAAwB,0BAAA;KACzB;IACD,qBAAqB,EAAE;QACrB,oBAAoB,sBAAA;KACrB;IACD,yBAAyB,EAAE;QACzB,2BAA2B,6BAAA;KAC5B;IACD,gBAAgB,EAAE;QAChB,iCAAiC,mCAAA;QACjC,qBAAqB,uBAAA;QACrB,wBAAwB,0BAAA;KACzB;IACD,kBAAkB,EAAE;QAClB,yBAAyB,2BAAA;KAC1B;IACD,mBAAmB,EAAE;QACnB,gBAAgB,kBAAA;KACjB;CACF;;;;"}
1	+ {"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/related-tags/wiring.ts"],"sourcesContent":["import {\n namespacedWireCommit,\n namespacedWireDispatch,\n namespacedWireDispatchWithoutPayload\n} from '../../wiring/namespaced-wires.factory';\nimport { NamespacedWireCommit, NamespacedWireDispatch } from '../../wiring/namespaced-wiring.types';\nimport { createWiring } from '../../wiring/wiring.utils';\n\n/*\n `relatedTags` {@link XModuleName \| XModule name}.\n \n @internal\n /\nconst moduleName = 'relatedTags';\n/\n WireCommit for {@link RelatedTagsXModule}.\n \n @internal\n /\nconst wireCommit: NamespacedWireCommit<typeof moduleName> = namespacedWireCommit(moduleName);\n/\n WireDispatch for {@link RelatedTagsXModule}.\n \n @internal\n /\nconst wireDispatch: NamespacedWireDispatch<typeof moduleName> = namespacedWireDispatch(moduleName);\n/\n WireDispatchWithoutPayload for {@link RelatedTagsXModule}.\n \n @internal\n /\nconst wireDispatchWithoutPayload = namespacedWireDispatchWithoutPayload(moduleName);\n\n/\n Sets the related tags state `query`.\n \n @public\n /\nexport const setRelatedTagsQuery = wireCommit('setQuery');\n\n/\n Sets the related tags state `params`.\n \n @public\n /\nexport const setRelatedTagsExtraParams = wireCommit('setParams');\n\n/\n Requests and stores the related tags.\n \n @public\n /\nexport const fetchAndSaveRelatedTagsWire = wireDispatch('fetchAndSaveRelatedTags');\n\n/\n Cancels the {@link RelatedTagsActions.fetchAndSaveRelatedTags} request promise.\n \n @public\n /\nexport const cancelFetchAndSaveRelatedTagsWire = wireDispatchWithoutPayload(\n 'cancelFetchAndSaveRelatedTags'\n);\n\n/\n Sets the selected related tags.\n \n @public\n /\nexport const toggleRelatedTagWire = wireDispatch('toggleRelatedTag');\n\n/\n Clear the selected related tags.\n \n @public\n /\nexport const clearSelectedRelatedTags = wireCommit('setSelectedRelatedTags', []);\n\n/\n Clear the related tags query.\n \n @public\n /\nexport const clearRelatedTagsQuery = wireCommit('setQuery', '');\n\n/\n Saves the params from the url.\n \n @public\n /\nexport const setUrlParamsWire = wireDispatch('setUrlParams');\n\n/\n Wiring configuration for the {@link RelatedTagsXModule \| related tags module}.\n \n @internal\n */\nexport const relatedTagsWiring = createWiring({\n UserAcceptedAQuery: {\n setRelatedTagsQuery,\n clearSelectedRelatedTags\n },\n UserPickedARelatedTag: {\n toggleRelatedTagWire\n },\n UserChangedExtraParams: {\n clearSelectedRelatedTags\n },\n RelatedTagsRequestChanged: {\n fetchAndSaveRelatedTagsWire\n },\n UserClearedQuery: {\n cancelFetchAndSaveRelatedTagsWire,\n clearRelatedTagsQuery,\n clearSelectedRelatedTags\n },\n ExtraParamsChanged: {\n setRelatedTagsExtraParams\n },\n ParamsLoadedFromUrl: {\n setUrlParamsWire\n }\n});\n"],"names":[],"mappings":";;;AAQA;;;;;AAKA,IAAM,UAAU,GAAG,aAAa,CAAC;AACjC;;;;;AAKA,IAAM,UAAU,GAA4C,oBAAoB,CAAC,UAAU,CAAC,CAAC;AAC7F;;;;;AAKA,IAAM,YAAY,GAA8C,sBAAsB,CAAC,UAAU,CAAC,CAAC;AACnG;;;;;AAKA,IAAM,0BAA0B,GAAG,oCAAoC,CAAC,UAAU,CAAC,CAAC;AAEpF;;;;;IAKa,mBAAmB,GAAG,UAAU,CAAC,UAAU,EAAE;AAE1D;;;;;IAKa,yBAAyB,GAAG,UAAU,CAAC,WAAW,EAAE;AAEjE;;;;;IAKa,2BAA2B,GAAG,YAAY,CAAC,yBAAyB,EAAE;AAEnF;;;;;IAKa,iCAAiC,GAAG,0BAA0B,CACzE,+BAA+B,EAC/B;AAEF;;;;;IAKa,oBAAoB,GAAG,YAAY,CAAC,kBAAkB,EAAE;AAErE;;;;;IAKa,wBAAwB,GAAG,UAAU,CAAC,wBAAwB,EAAE,EAAE,EAAE;AAEjF;;;;;IAKa,qBAAqB,GAAG,UAAU,CAAC,UAAU,EAAE,EAAE,EAAE;AAEhE;;;;;IAKa,gBAAgB,GAAG,YAAY,CAAC,cAAc,EAAE;AAE7D;;;;;IAKa,iBAAiB,GAAG,YAAY,CAAC;IAC5C,kBAAkB,EAAE;QAClB,mBAAmB,qBAAA;QACnB,wBAAwB,0BAAA;KACzB;IACD,qBAAqB,EAAE;QACrB,oBAAoB,sBAAA;KACrB;IACD,sBAAsB,EAAE;QACtB,wBAAwB,0BAAA;KACzB;IACD,yBAAyB,EAAE;QACzB,2BAA2B,6BAAA;KAC5B;IACD,gBAAgB,EAAE;QAChB,iCAAiC,mCAAA;QACjC,qBAAqB,uBAAA;QACrB,wBAAwB,0BAAA;KACzB;IACD,kBAAkB,EAAE;QAClB,yBAAyB,2BAAA;KAC1B;IACD,mBAAmB,EAAE;QACnB,gBAAgB,kBAAA;KACjB;CACF;;;;"}

package/js/x-modules/scroll/components/main-scroll.vue.js CHANGED Viewed

@@ -1,21 +1,32 @@
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+import __vue_create_injector__ from 'vue-runtime-helpers/dist/inject-style/browser.js';
 import script from './main-scroll.vue_rollup-plugin-vue=script.js';
 /* script */
 var __vue_script__ = script;
 /* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("NoElement", { class: _vm.dynamicClasses }, [_vm._t("default")], 2)
+};
+var __vue_staticRenderFns__ = [];
+__vue_render__._withStripped = true;
   /* style */
-  var __vue_inject_styles__ = undefined;
+  var __vue_inject_styles__ = function (inject) {
+    if (!inject) { return }
+    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 });
+  };
   /* scoped */
   var __vue_scope_id__ = undefined;
   /* module identifier */
   var __vue_module_identifier__ = undefined;
   /* functional template */
-  var __vue_is_functional_template__ = undefined;
-  /* style inject */
+  var __vue_is_functional_template__ = false;
   /* style inject SSR */
   /* style inject shadow dom */
@@ -23,14 +34,14 @@ var __vue_script__ = script;
   var __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    {},
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
     __vue_inject_styles__,
     __vue_script__,
     __vue_scope_id__,
     __vue_is_functional_template__,
     __vue_module_identifier__,
     false,
-    undefined,
+    __vue_create_injector__,
     undefined,
     undefined
   );

package/js/x-modules/scroll/components/main-scroll.vue.js.map CHANGED Viewed

	@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/scroll/components/main-scroll.vue_rollup-plugin-vue=script.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import { __extends, __decorate } from 'tslib';
+import Vue from 'vue';
 import { Prop, Watch, Component } from 'vue-property-decorator';
 import { NoElement } from '../../../components/no-element.js';
 import { XEmit } from '../../../components/decorators/bus.decorators.js';
@@ -164,6 +165,22 @@ var MainScroll = /** @class */ (function (_super) {
             }
         });
     };
+    Object.defineProperty(MainScroll.prototype, "dynamicClasses", {
+        /**
+         * Adds the dynamic css classes to the component.
+         *
+         * @returns The class to be added to the component.
+         *
+         * @internal
+         */
+        get: function () {
+            return {
+                'x-main-scroll--no-transition': !!this.pendingScrollTo
+            };
+        },
+        enumerable: false,
+        configurable: true
+    });
     __decorate([
         Prop({ default: false, type: Boolean })
     ], MainScroll.prototype, "useWindow", void 0);
@@ -174,7 +191,7 @@ var MainScroll = /** @class */ (function (_super) {
         Prop({ default: 0.3 })
     ], MainScroll.prototype, "threshold", void 0);
     __decorate([
-        Prop({ default: '' })
+        Prop({ default: '0px' })
     ], MainScroll.prototype, "margin", void 0);
     __decorate([
         State('scroll', 'pendingScrollTo')
@@ -193,12 +210,13 @@ var MainScroll = /** @class */ (function (_super) {
     ], MainScroll.prototype, "failRestoringScroll", null);
     MainScroll = __decorate([
         Component({
+            components: { NoElement: NoElement },
             mixins: [xComponentMixin(scrollXModule)]
         })
         /* eslint-disable @typescript-eslint/unbound-method */
     ], MainScroll);
     return MainScroll;
-}(NoElement));
+}(Vue));
 export default MainScroll;
 //# sourceMappingURL=main-scroll.vue_rollup-plugin-vue=script.js.map

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

	@@ -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":"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"}
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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"}

package/js/x-modules/scroll/components/scroll.vue.js CHANGED Viewed

@@ -12,20 +12,21 @@ var __vue_render__ = function () {
   return _c(
     "BaseScroll",
     _vm._g(
-      {
-        attrs: {
-          id: _vm.id,
-          throttleMs: _vm.throttleMs,
-          distanceToBottom: _vm.distanceToBottom,
+      _vm._b(
+        {
+          attrs: { id: _vm.id },
+          on: {
+            scroll: _vm.emitScroll,
+            "scroll:direction-change": _vm.emitScrollDirectionChange,
+            "scroll:at-start": _vm.emitScrollAtStart,
+            "scroll:almost-at-end": _vm.emitScrollAlmostAtEnd,
+            "scroll:at-end": _vm.emitScrollAtEnd,
+          },
         },
-        on: {
-          scroll: _vm.emitScroll,
-          "scroll:direction-change": _vm.emitScrollDirectionChange,
-          "scroll:at-start": _vm.emitScrollAtStart,
-          "scroll:almost-at-end": _vm.emitScrollAlmostAtEnd,
-          "scroll:at-end": _vm.emitScrollAtEnd,
-        },
-      },
+        "BaseScroll",
+        _vm.$attrs,
+        false
+      ),
       _vm.$listeners
     ),
     [_vm._t("default")],

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

	@@ -1 +1 @@
1	- {"version":3,"file":"scroll.vue.js","sources":["../../../../../src/x-modules/scroll/components/scroll.vue"],"sourcesContent":["<template>\n <BaseScroll\n @scroll=\"emitScroll\"\n @scroll:direction-change=\"emitScrollDirectionChange\"\n @scroll:at-start=\"emitScrollAtStart\"\n @scroll:almost-at-end=\"emitScrollAlmostAtEnd\"\n @scroll:at-end=\"emitScrollAtEnd\"\n v-on=\"$listeners\"\n :id=\"id\"\n ~~:throttleMs~~=\"~~throttleMs~~\"\n ~~:distanceToBottom=\"distanceToBottom\"\n~~ >\n <slot />\n </BaseScroll>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { WireMetadata } from '../../../wiring/wiring.types';\n import { XOn } from '../../../components/decorators/bus.decorators';\n import BaseScroll from '../../../components/scroll/base-scroll.vue';\n import { ScrollDirection } from '../../../components/scroll/scroll.types';\n import { scrollXModule } from '../x-module';\n import { MainScrollId } from './scroll.const';\n\n /*\n ~~Base~~ ~~scroll~~ ~~component~~ that ~~depending~~ on ~~base~~ ~~scroll~~ ~~component~~ ~~and~~ ~~the~~ ~~user~~ ~~interaction~~ ~~emits~~\n * ~~different x events for knowing when the user scrolls, the direction of scroll~~ and if user\n * ~~reaches~~ the ~~start~~ or ~~end~~.\n \n @public\n /\n @Component({\n mixins: [xComponentMixin(scrollXModule)],\n components: { BaseScroll }\n })\n export default class Scroll extends Vue {\n /\n Time duration to ignore the subsequent scroll events after an emission.\n * Higher values will decrease events precision but can prevent performance issues.\n \n @public\n /\n @Prop()\n public throttleMs!: number;\n\n /\n Distance to the end of the scroll that when reached will emit the\n * `scroll:about-to-end` event.\n \n @public\n /\n @Prop()\n public distanceToBottom!: number;\n\n /\n Id to identify the component.\n \n @public\n /\n @Prop({ default: MainScrollId })\n public id!: string;\n\n /\n Emits the `UserScrolled` event.\n \n @param position - The new position of scroll.\n * @internal\n /\n protected emitScroll(position: number): void {\n this.$x.emit('UserScrolled', position, this.createEventMetadata());\n }\n\n /\n Emits the `UserChangedScrollDirection` event when the scrolling direction has changed.\n \n @param direction - The new direction of scroll.\n * @internal\n /\n protected emitScrollDirectionChange(direction: ScrollDirection): void {\n this.$x.emit('UserChangedScrollDirection', direction, this.createEventMetadata());\n }\n\n /\n Emits the 'UserReachedScrollStart' event when the user reaches the start.\n \n @param isAtStart - A boolean indicating if the scroll is at the ending position.\n * @internal\n /\n protected emitScrollAtStart(isAtStart: boolean): void {\n this.$x.emit('UserReachedScrollStart', isAtStart, this.createEventMetadata());\n }\n\n /\n Emits the 'UserAlmostReachedScrollEnd' event when the user is about to reach to end.\n \n @param isAlmostAtEnd - A boolean indicating if the scroll is almost at its ending position.\n * @internal\n /\n protected emitScrollAlmostAtEnd(isAlmostAtEnd: boolean): void {\n this.$x.emit('UserAlmostReachedScrollEnd', isAlmostAtEnd, this.createEventMetadata());\n }\n\n /\n Emits the 'UserReachedScrollEnd' event when the user is about to reach to end.\n \n @param isAtEnd - A boolean indicating if the scroll is at the ending position.\n * @internal\n /\n protected emitScrollAtEnd(isAtEnd: boolean): void {\n this.$x.emit('UserReachedScrollEnd', isAtEnd, this.createEventMetadata());\n }\n\n /\n Creates a {@link WireMetadata} metadata object for all the emitted events.\n \n @internal\n * @returns A new {@link WireMetadata} object.\n /\n protected createEventMetadata(): Partial<WireMetadata> {\n return { target: this.$el as HTMLElement, id: this.id };\n }\n\n /\n Scrolls to initial position when the user has clicked the scroll to top button.\n \n @param scrollId - {@link XEventsTypes.UserClickedScrollToTop}.\n * @internal\n */\n @XOn('UserClickedScrollToTop')\n scrollToTop(scrollId: string): void {\n if (scrollId === this.id && this.$el) {\n this.$el?.scrollTo({ top: 0, behavior: 'smooth' });\n }\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nThe Scroll is a component that wraps the BaseScroll and provides it for a unique id.\n\n### Customized usage\n\n#### Overriding the properties\n\nIt renders an element with scroll, with the content passed in the `default slot`.\n\n```vue\n<template>\n <Scroll id=\"exampleScrollId\" throttleMs=\"50\" distanceToBottom=\"300\">\n <div class=\"content-scroll\">\n <span>content1</span>\n <span>content1</span>\n </div>\n </Scroll>\n</template>\n\n<script>\n import { Scroll } from '@empathyco/x-components/scroll';\n\n export default {\n name: 'ScrollIdTest',\n components: {\n Scroll\n }\n };\n</script>\n```\n\n#### Using scroll events.\n\n```vue\n<template>\n <Scroll\n @scroll=\"scroll\"\n @scroll:direction-change=\"scrollDirectionChange\"\n @scroll:at-start=\"scrollAtStart\"\n @scroll:almost-at-end=\"scrollAlmostAtEnd\"\n @scroll:at-end=\"scrollAtEnd\"\n id=\"exampleScrollId\"\n throttleMs=\"50\"\n distanceToBottom=\"300\"\n >\n <div class=\"content-scroll\">\n <span>content1</span>\n <span>content1</span>\n </div>\n </Scroll>\n</template>\n\n<script>\n import { Scroll } from '@empathyco/x-components/scroll';\n\n export default {\n name: 'ScrollIdTest',\n components: {\n Scroll\n },\n methods: {\n scroll(position) {\n console.log('scroll', position);\n },\n scrollDirectionChange(direction) {\n console.log('scroll:direction-change', direction);\n },\n scrollAtStart(isAtStart) {\n console.log('scroll:at-start', isAtStart);\n },\n scrollAlmostAtEnd(isAlmostAtEnd) {\n console.log('scroll:almost-at-end', isAlmostAtEnd);\n },\n scrollAtEnd(isAtEnd) {\n console.log('scroll:at-end', isAtEnd);\n }\n }\n };\n</script>\n```\n\n#### Using XEvents.\n\nYou can use the XEvents subscribing to them.\n\n```vue\n<template>\n <Scroll throttleMs=\"50\" distanceToBottom=\"300\">\n <div class=\"content-scroll\">\n <span>content1</span>\n <span>content1</span>\n </div>\n </Scroll>\n</template>\n\n<script>\n import { Scroll } from '@empathyco/x-components/scroll';\n\n export default {\n name: 'ScrollIdTest',\n components: {\n Scroll\n },\n mounted() {\n this.$x.on('UserScrolled').subscribe(distance => {\n console.log(distance);\n });\n this.$x.on('UserChangedScrollDirection').subscribe(direction => {\n console.log(direction);\n });\n this.$x.on('UserReachedScrollStart').subscribe(isAtStart => {\n console.log(isAtStart);\n });\n this.$x.on('UserAlmostReachedScrollEnd').subscribe(isAlmostAtEnd => {\n console.log(isAlmostAtEnd);\n });\n this.$x.on('UserReachedScrollEnd').subscribe(isAtEnd => {\n console.log(isAtEnd);\n });\n }\n };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserScrolled`: emitted after the user scrolls in this container. The payload is the scroll top\n distance in pixels.\n- `UserChangedScrollDirection`: emitted when the user changes the scroll direction. The payload is\n the new scrolling direction.\n- `UserReachedScrollStart`: emitted when the user scrolls up to the initial position of the scroll.\n- `UserAlmostReachedScrollEnd`: emitted when the user is about to reach the bottom part of the\n scroll.\n- `UserReachedScrollEnd`: emitted when the user has reached the bottom part of the scroll.\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"scroll.vue.js","sources":["../../../../../src/x-modules/scroll/components/scroll.vue"],"sourcesContent":["<template>\n <BaseScroll\n @scroll=\"emitScroll\"\n @scroll:direction-change=\"emitScrollDirectionChange\"\n @scroll:at-start=\"emitScrollAtStart\"\n @scroll:almost-at-end=\"emitScrollAlmostAtEnd\"\n @scroll:at-end=\"emitScrollAtEnd\"\n v-on=\"$listeners\"\n :id=\"id\"\n v-bind=\"$attrs\"\n >\n <slot />\n </BaseScroll>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { WireMetadata } from '../../../wiring/wiring.types';\n import { XOn } from '../../../components/decorators/bus.decorators';\n import BaseScroll from '../../../components/scroll/base-scroll.vue';\n import { ScrollDirection } from '../../../components/scroll/scroll.types';\n import { scrollXModule } from '../x-module';\n import { MainScrollId } from './scroll.const';\n\n /*\n Scrollable container that emits scroll related X Events. It exposes all the listeners\n * and props from the {@link BaseScroll} component.\n \n @public\n /\n @Component({\n mixins: [xComponentMixin(scrollXModule)],\n components: { BaseScroll }\n })\n export default class Scroll extends Vue {\n /\n Id to identify the component.\n \n @public\n /\n @Prop({ default: MainScrollId })\n public id!: string;\n\n /\n Emits the `UserScrolled` event.\n \n @param position - The new position of scroll.\n * @internal\n /\n protected emitScroll(position: number): void {\n this.$x.emit('UserScrolled', position, this.createEventMetadata());\n }\n\n /\n Emits the `UserChangedScrollDirection` event when the scrolling direction has changed.\n \n @param direction - The new direction of scroll.\n * @internal\n /\n protected emitScrollDirectionChange(direction: ScrollDirection): void {\n this.$x.emit('UserChangedScrollDirection', direction, this.createEventMetadata());\n }\n\n /\n Emits the 'UserReachedScrollStart' event when the user reaches the start.\n \n @param isAtStart - A boolean indicating if the scroll is at the ending position.\n * @internal\n /\n protected emitScrollAtStart(isAtStart: boolean): void {\n this.$x.emit('UserReachedScrollStart', isAtStart, this.createEventMetadata());\n }\n\n /\n Emits the 'UserAlmostReachedScrollEnd' event when the user is about to reach to end.\n \n @param isAlmostAtEnd - A boolean indicating if the scroll is almost at its ending position.\n * @internal\n /\n protected emitScrollAlmostAtEnd(isAlmostAtEnd: boolean): void {\n this.$x.emit('UserAlmostReachedScrollEnd', isAlmostAtEnd, this.createEventMetadata());\n }\n\n /\n Emits the 'UserReachedScrollEnd' event when the user is about to reach to end.\n \n @param isAtEnd - A boolean indicating if the scroll is at the ending position.\n * @internal\n /\n protected emitScrollAtEnd(isAtEnd: boolean): void {\n this.$x.emit('UserReachedScrollEnd', isAtEnd, this.createEventMetadata());\n }\n\n /\n Creates a {@link WireMetadata} metadata object for all the emitted events.\n \n @internal\n * @returns A new {@link WireMetadata} object.\n /\n protected createEventMetadata(): Partial<WireMetadata> {\n return { target: this.$el as HTMLElement, id: this.id };\n }\n\n /\n Scrolls to initial position when the user has clicked the scroll to top button.\n \n @param scrollId - {@link XEventsTypes.UserClickedScrollToTop}.\n * @internal\n */\n @XOn('UserClickedScrollToTop')\n scrollToTop(scrollId: string): void {\n if (scrollId === this.id && this.$el) {\n this.$el?.scrollTo({ top: 0, behavior: 'smooth' });\n }\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nThe Scroll is a component that wraps the BaseScroll and provides it for a unique id.\n\n### Customized usage\n\n#### Overriding the properties\n\nIt renders an element with scroll, with the content passed in the `default slot`.\n\n```vue\n<template>\n <Scroll id=\"exampleScrollId\" throttleMs=\"50\" distanceToBottom=\"300\">\n <div class=\"content-scroll\">\n <span>content1</span>\n <span>content1</span>\n </div>\n </Scroll>\n</template>\n\n<script>\n import { Scroll } from '@empathyco/x-components/scroll';\n\n export default {\n name: 'ScrollIdTest',\n components: {\n Scroll\n }\n };\n</script>\n```\n\n#### Using scroll events.\n\n```vue\n<template>\n <Scroll\n @scroll=\"scroll\"\n @scroll:direction-change=\"scrollDirectionChange\"\n @scroll:at-start=\"scrollAtStart\"\n @scroll:almost-at-end=\"scrollAlmostAtEnd\"\n @scroll:at-end=\"scrollAtEnd\"\n id=\"exampleScrollId\"\n throttleMs=\"50\"\n distanceToBottom=\"300\"\n >\n <div class=\"content-scroll\">\n <span>content1</span>\n <span>content1</span>\n </div>\n </Scroll>\n</template>\n\n<script>\n import { Scroll } from '@empathyco/x-components/scroll';\n\n export default {\n name: 'ScrollIdTest',\n components: {\n Scroll\n },\n methods: {\n scroll(position) {\n console.log('scroll', position);\n },\n scrollDirectionChange(direction) {\n console.log('scroll:direction-change', direction);\n },\n scrollAtStart(isAtStart) {\n console.log('scroll:at-start', isAtStart);\n },\n scrollAlmostAtEnd(isAlmostAtEnd) {\n console.log('scroll:almost-at-end', isAlmostAtEnd);\n },\n scrollAtEnd(isAtEnd) {\n console.log('scroll:at-end', isAtEnd);\n }\n }\n };\n</script>\n```\n\n#### Using XEvents.\n\nYou can use the XEvents subscribing to them.\n\n```vue\n<template>\n <Scroll throttleMs=\"50\" distanceToBottom=\"300\">\n <div class=\"content-scroll\">\n <span>content1</span>\n <span>content1</span>\n </div>\n </Scroll>\n</template>\n\n<script>\n import { Scroll } from '@empathyco/x-components/scroll';\n\n export default {\n name: 'ScrollIdTest',\n components: {\n Scroll\n },\n mounted() {\n this.$x.on('UserScrolled').subscribe(distance => {\n console.log(distance);\n });\n this.$x.on('UserChangedScrollDirection').subscribe(direction => {\n console.log(direction);\n });\n this.$x.on('UserReachedScrollStart').subscribe(isAtStart => {\n console.log(isAtStart);\n });\n this.$x.on('UserAlmostReachedScrollEnd').subscribe(isAlmostAtEnd => {\n console.log(isAlmostAtEnd);\n });\n this.$x.on('UserReachedScrollEnd').subscribe(isAtEnd => {\n console.log(isAtEnd);\n });\n }\n };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserScrolled`: emitted after the user scrolls in this container. The payload is the scroll top\n distance in pixels.\n- `UserChangedScrollDirection`: emitted when the user changes the scroll direction. The payload is\n the new scrolling direction.\n- `UserReachedScrollStart`: emitted when the user scrolls up to the initial position of the scroll.\n- `UserAlmostReachedScrollEnd`: emitted when the user is about to reach the bottom part of the\n scroll.\n- `UserReachedScrollEnd`: emitted when the user has reached the bottom part of the scroll.\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -8,9 +8,8 @@ import { MainScrollId } from './scroll.const.js';
 import BaseScroll from '../../../components/scroll/base-scroll.vue.js';
 /**
- * Base scroll component that depending on base scroll component and the user interaction emits
- * different x events for knowing when the user scrolls, the direction of scroll and if user
- * reaches the start or end.
+ * Scrollable container that emits scroll related X Events. It exposes all the listeners
+ * and props from the {@link BaseScroll} component.
  *
  * @public
  */
@@ -85,12 +84,6 @@ var Scroll = /** @class */ (function (_super) {
             (_a = this.$el) === null || _a === void 0 ? void 0 : _a.scrollTo({ top: 0, behavior: 'smooth' });
         }
     };
-    __decorate([
-        Prop()
-    ], Scroll.prototype, "throttleMs", void 0);
-    __decorate([
-        Prop()
-    ], Scroll.prototype, "distanceToBottom", void 0);
     __decorate([
         Prop({ default: MainScrollId })
     ], Scroll.prototype, "id", void 0);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"scroll.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/scroll/components/scroll.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { WireMetadata } from '../../../wiring/wiring.types';\nimport { XOn } from '../../../components/decorators/bus.decorators';\nimport BaseScroll from '../../../components/scroll/base-scroll.vue';\nimport { ScrollDirection } from '../../../components/scroll/scroll.types';\nimport { scrollXModule } from '../x-module';\nimport { MainScrollId } from './scroll.const';\n\n/*\n ~~Base~~ ~~scroll~~ ~~component~~ that ~~depending~~ on ~~base~~ ~~scroll~~ ~~component~~ ~~and~~ ~~the~~ ~~user~~ ~~interaction~~ ~~emits~~\n * ~~different x events for knowing when the user scrolls, the direction of scroll~~ and if ~~user\n~~ * reaches the ~~start~~ or ~~end~~.\n \n @public\n /\n@Component({\n mixins: [xComponentMixin(scrollXModule)],\n components: { BaseScroll }\n})\nexport default class Scroll extends Vue {\n /\n Time duration to ignore the subsequent scroll events after an emission.\n * Higher values will decrease events precision but can prevent performance issues.\n \n @public\n /\n @Prop()\n public throttleMs!: number;\n\n /\n Distance to the end of the scroll that when reached will emit the\n * `scroll:about-to-end` event.\n \n @public\n /\n @Prop()\n public distanceToBottom!: number;\n\n /\n Id to identify the component.\n \n @public\n /\n @Prop({ default: MainScrollId })\n public id!: string;\n\n /\n Emits the `UserScrolled` event.\n \n @param position - The new position of scroll.\n * @internal\n /\n protected emitScroll(position: number): void {\n this.$x.emit('UserScrolled', position, this.createEventMetadata());\n }\n\n /\n Emits the `UserChangedScrollDirection` event when the scrolling direction has changed.\n \n @param direction - The new direction of scroll.\n * @internal\n /\n protected emitScrollDirectionChange(direction: ScrollDirection): void {\n this.$x.emit('UserChangedScrollDirection', direction, this.createEventMetadata());\n }\n\n /\n Emits the 'UserReachedScrollStart' event when the user reaches the start.\n \n @param isAtStart - A boolean indicating if the scroll is at the ending position.\n * @internal\n /\n protected emitScrollAtStart(isAtStart: boolean): void {\n this.$x.emit('UserReachedScrollStart', isAtStart, this.createEventMetadata());\n }\n\n /\n Emits the 'UserAlmostReachedScrollEnd' event when the user is about to reach to end.\n \n @param isAlmostAtEnd - A boolean indicating if the scroll is almost at its ending position.\n * @internal\n /\n protected emitScrollAlmostAtEnd(isAlmostAtEnd: boolean): void {\n this.$x.emit('UserAlmostReachedScrollEnd', isAlmostAtEnd, this.createEventMetadata());\n }\n\n /\n Emits the 'UserReachedScrollEnd' event when the user is about to reach to end.\n \n @param isAtEnd - A boolean indicating if the scroll is at the ending position.\n * @internal\n /\n protected emitScrollAtEnd(isAtEnd: boolean): void {\n this.$x.emit('UserReachedScrollEnd', isAtEnd, this.createEventMetadata());\n }\n\n /\n Creates a {@link WireMetadata} metadata object for all the emitted events.\n \n @internal\n * @returns A new {@link WireMetadata} object.\n /\n protected createEventMetadata(): Partial<WireMetadata> {\n return { target: this.$el as HTMLElement, id: this.id };\n }\n\n /\n Scrolls to initial position when the user has clicked the scroll to top button.\n \n @param scrollId - {@link XEventsTypes.UserClickedScrollToTop}.\n * @internal\n */\n @XOn('UserClickedScrollToTop')\n scrollToTop(scrollId: string): void {\n if (scrollId === this.id && this.$el) {\n this.$el?.scrollTo({ top: 0, behavior: 'smooth' });\n }\n }\n}\n"],"names":[],"mappings":";;;;;;;;;~~AA2BA;;;;;;;AAWA~~;IAAoC,0BAAG;IAAvC;;~~KAmGC~~;;;;;;;IAlEW,2BAAU,GAApB,UAAqB,QAAgB;QACnC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,QAAQ,EAAE,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC;KACpE;;;;;;;IAQS,0CAAyB,GAAnC,UAAoC,SAA0B;QAC5D,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,4BAA4B,EAAE,SAAS,EAAE,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC;KACnF;;;;;;;IAQS,kCAAiB,GAA3B,UAA4B,SAAkB;QAC5C,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,wBAAwB,EAAE,SAAS,EAAE,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC;KAC/E;;;;;;;IAQS,sCAAqB,GAA/B,UAAgC,aAAsB;QACpD,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,4BAA4B,EAAE,aAAa,EAAE,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC;KACvF;;;;;;;IAQS,gCAAe,GAAzB,UAA0B,OAAgB;QACxC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,OAAO,EAAE,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC;KAC3E;;;;;;;IAQS,oCAAmB,GAA7B;QACE,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,GAAkB,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC;KACzD;;;;;;;IASD,4BAAW,GAAX,UAAY,QAAgB;;QAC1B,IAAI,QAAQ,KAAK,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,GAAG,EAAE;YACpC,MAAA,IAAI,CAAC,GAAG,0CAAE,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;SACpD;KACF;~~IA1FD~~;QADC,IAAI,~~EAAE;8CACoB;IAS3B;QADC,IAAI,EAAE;oDAC0B;IAQjC;QADC,IAAI,~~CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC;sCACb;IAqEnB;QADC,GAAG,CAAC,wBAAwB,CAAC;6CAK7B;~~IAlGkB~~,MAAM;QAJ1B,SAAS,CAAC;YACT,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;YACxC,UAAU,EAAE,EAAE,UAAU,YAAA,EAAE;SAC3B,CAAC;OACmB,MAAM,~~CAmG1B~~;IAAD,aAAC;CAAA,~~CAnGmC~~,GAAG;;;;"}
1	+ {"version":3,"file":"scroll.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/scroll/components/scroll.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { WireMetadata } from '../../../wiring/wiring.types';\nimport { XOn } from '../../../components/decorators/bus.decorators';\nimport BaseScroll from '../../../components/scroll/base-scroll.vue';\nimport { ScrollDirection } from '../../../components/scroll/scroll.types';\nimport { scrollXModule } from '../x-module';\nimport { MainScrollId } from './scroll.const';\n\n/*\n Scrollable container that emits scroll related X Events. It exposes all the listeners\n * and props from the {@link BaseScroll} component.\n \n @public\n /\n@Component({\n mixins: [xComponentMixin(scrollXModule)],\n components: { BaseScroll }\n})\nexport default class Scroll extends Vue {\n /\n Id to identify the component.\n \n @public\n /\n @Prop({ default: MainScrollId })\n public id!: string;\n\n /\n Emits the `UserScrolled` event.\n \n @param position - The new position of scroll.\n * @internal\n /\n protected emitScroll(position: number): void {\n this.$x.emit('UserScrolled', position, this.createEventMetadata());\n }\n\n /\n Emits the `UserChangedScrollDirection` event when the scrolling direction has changed.\n \n @param direction - The new direction of scroll.\n * @internal\n /\n protected emitScrollDirectionChange(direction: ScrollDirection): void {\n this.$x.emit('UserChangedScrollDirection', direction, this.createEventMetadata());\n }\n\n /\n Emits the 'UserReachedScrollStart' event when the user reaches the start.\n \n @param isAtStart - A boolean indicating if the scroll is at the ending position.\n * @internal\n /\n protected emitScrollAtStart(isAtStart: boolean): void {\n this.$x.emit('UserReachedScrollStart', isAtStart, this.createEventMetadata());\n }\n\n /\n Emits the 'UserAlmostReachedScrollEnd' event when the user is about to reach to end.\n \n @param isAlmostAtEnd - A boolean indicating if the scroll is almost at its ending position.\n * @internal\n /\n protected emitScrollAlmostAtEnd(isAlmostAtEnd: boolean): void {\n this.$x.emit('UserAlmostReachedScrollEnd', isAlmostAtEnd, this.createEventMetadata());\n }\n\n /\n Emits the 'UserReachedScrollEnd' event when the user is about to reach to end.\n \n @param isAtEnd - A boolean indicating if the scroll is at the ending position.\n * @internal\n /\n protected emitScrollAtEnd(isAtEnd: boolean): void {\n this.$x.emit('UserReachedScrollEnd', isAtEnd, this.createEventMetadata());\n }\n\n /\n Creates a {@link WireMetadata} metadata object for all the emitted events.\n \n @internal\n * @returns A new {@link WireMetadata} object.\n /\n protected createEventMetadata(): Partial<WireMetadata> {\n return { target: this.$el as HTMLElement, id: this.id };\n }\n\n /\n Scrolls to initial position when the user has clicked the scroll to top button.\n \n @param scrollId - {@link XEventsTypes.UserClickedScrollToTop}.\n * @internal\n */\n @XOn('UserClickedScrollToTop')\n scrollToTop(scrollId: string): void {\n if (scrollId === this.id && this.$el) {\n this.$el?.scrollTo({ top: 0, behavior: 'smooth' });\n }\n }\n}\n"],"names":[],"mappings":";;;;;;;;;AA0BA;;;;;;AAUA;IAAoC,0BAAG;IAAvC;;KAiFC;;;;;;;IAlEW,2BAAU,GAApB,UAAqB,QAAgB;QACnC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,QAAQ,EAAE,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC;KACpE;;;;;;;IAQS,0CAAyB,GAAnC,UAAoC,SAA0B;QAC5D,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,4BAA4B,EAAE,SAAS,EAAE,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC;KACnF;;;;;;;IAQS,kCAAiB,GAA3B,UAA4B,SAAkB;QAC5C,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,wBAAwB,EAAE,SAAS,EAAE,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC;KAC/E;;;;;;;IAQS,sCAAqB,GAA/B,UAAgC,aAAsB;QACpD,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,4BAA4B,EAAE,aAAa,EAAE,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC;KACvF;;;;;;;IAQS,gCAAe,GAAzB,UAA0B,OAAgB;QACxC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,OAAO,EAAE,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC;KAC3E;;;;;;;IAQS,oCAAmB,GAA7B;QACE,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,GAAkB,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC;KACzD;;;;;;;IASD,4BAAW,GAAX,UAAY,QAAgB;;QAC1B,IAAI,QAAQ,KAAK,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,GAAG,EAAE;YACpC,MAAA,IAAI,CAAC,GAAG,0CAAE,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;SACpD;KACF;IAzED;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC;sCACb;IAqEnB;QADC,GAAG,CAAC,wBAAwB,CAAC;6CAK7B;IAhFkB,MAAM;QAJ1B,SAAS,CAAC;YACT,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;YACxC,UAAU,EAAE,EAAE,UAAU,YAAA,EAAE;SAC3B,CAAC;OACmB,MAAM,CAiF1B;IAAD,aAAC;CAAA,CAjFmC,GAAG;;;;"}

package/js/x-modules/search/store/actions/fetch-and-save-search-response.action.js CHANGED Viewed

@@ -1,12 +1,10 @@
+import { __assign, __rest } from 'tslib';
 import { createFetchAndSaveActions } from '../../../../store/utils/fetch-and-save-action.utils.js';
 var _a = createFetchAndSaveActions({
     fetch: function (_a, request) {
-        var dispatch = _a.dispatch, origin = _a.state.origin;
-        if (request && origin) {
-            request.origin = origin;
-        }
-        return dispatch('fetchSearchResponse', request);
+        var dispatch = _a.dispatch, state = _a.state;
+        return dispatch('fetchSearchResponse', request ? enrichRequest(request, state) : null);
     },
     onSuccess: function (_a, _b) {
         var commit = _a.commit, state = _a.state;
@@ -31,6 +29,22 @@ var _a = createFetchAndSaveActions({
         commit('setSpellcheck', spellcheck !== null && spellcheck !== void 0 ? spellcheck : '');
     }
 }), fetchAndSave = _a.fetchAndSave, cancelPrevious = _a.cancelPrevious;
+/**
+ * Enriches the {@link SearchRequest} object with the origin and page properties taken from the
+ * {@link SearchState | search state}.
+ *
+ * @param request - The {@link InternalSearchRequest}.
+ * @param state - {@link SearchState}.
+ *
+ * @returns The search request.
+ * @internal
+ */
+function enrichRequest(request, state) {
+    var page = request.page, restRequest = __rest(request, ["page"]);
+    var pageSize = state.config.pageSize, origin = state.origin, results = state.results;
+    var start = page === 1 ? 0 : results.length;
+    return __assign(__assign(__assign({}, restRequest), (origin && { origin: origin })), { start: start, rows: pageSize * page - start });
+}
 /**
  * Default implementation for {@link SearchActions.fetchAndSaveSearchResponse} action.
  *

package/js/x-modules/search/store/actions/fetch-and-save-search-response.action.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fetch-and-save-search-response.action.js","sources":["../../../../../../src/x-modules/search/store/actions/fetch-and-save-search-response.action.ts"],"sourcesContent":["import { SearchResponse, SearchRequest } from '@empathyco/x-adapter';\nimport { createFetchAndSaveActions } from '../../../../store/utils/fetch-and-save-action.utils';\nimport { SearchActionContext } from '../types';\n\nconst { fetchAndSave, cancelPrevious } = createFetchAndSaveActions<\n SearchActionContext,\n ~~SearchRequest~~ \| null,\n SearchResponse\n>({\n fetch({ dispatch, state: ~~{ origin~~ } }, request) {\n ~~if (request && origin) {\n request.origin = origin;\n }\n\n~~ return dispatch('fetchSearchResponse', request);\n },\n onSuccess(\n { commit, state },\n {\n results,\n partialResults,\n facets,\n banners,\n promoteds,\n totalResults,\n spellcheck,\n redirections,\n queryTagging\n }\n ) {\n if (state.isAppendResults) {\n commit('appendResults', results);\n } else {\n commit('setResults', results);\n commit('setBanners', banners);\n commit('setPromoteds', promoteds);\n commit('setRedirections', redirections);\n }\n\n commit('setPartialResults', partialResults ?? []);\n\n if (facets) {\n commit('setFacets', facets);\n }\n\n if (queryTagging) {\n commit('setQueryTagging', queryTagging);\n }\n commit('setTotalResults', totalResults);\n commit('setSpellcheck', spellcheck ?? '');\n }\n});\n\n/*\n Default implementation for {@link SearchActions.fetchAndSaveSearchResponse} action.\n \n @public\n /\nexport const fetchAndSaveSearchResponse = fetchAndSave;\n\n/\n Default implementation for {@link SearchActions.cancelFetchAndSaveSearchResponse} action.\n \n @public\n */\nexport const cancelFetchAndSaveSearchResponse = cancelPrevious;\n"],"names":[],"mappings":"~~;;AAIM~~,IAAA,KAAmC,yBAAyB,CAIhE;IACA,KAAK,YAAC,~~EAA+B~~,EAAE,OAAO;~~YAAtC~~,QAAQ,cAAA,~~EAAW~~,~~MAAM~~,~~kBAAA~~;~~QAC/B~~,~~IAAI,~~OAAO,~~IAAI~~,~~MAAM~~,EAAE~~;YACrB~~,OAAO,~~CAAC,MAAM,~~GAAG,~~MAAM~~,CAAC~~;SACzB;QAED~~,OAAO,~~QAAQ~~,CAAC,~~qBAAqB~~,~~EAAE~~,~~OAAO,~~CAAC,CAAC;~~KACjD~~;IACD,SAAS,YACP,EAAiB,EACjB,EAUC;YAXC,MAAM,YAAA,EAAE,KAAK,WAAA;YAEb,OAAO,aAAA,EACP,cAAc,oBAAA,EACd,MAAM,YAAA,EACN,OAAO,aAAA,EACP,SAAS,eAAA,EACT,YAAY,kBAAA,EACZ,UAAU,gBAAA,EACV,YAAY,kBAAA,EACZ,YAAY,kBAAA;QAGd,IAAI,KAAK,CAAC,eAAe,EAAE;YACzB,MAAM,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;SAClC;aAAM;YACL,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;YAC9B,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;YAC9B,MAAM,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC;YAClC,MAAM,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAAC;SACzC;QAED,MAAM,CAAC,mBAAmB,EAAE,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,EAAE,CAAC,CAAC;QAElD,IAAI,MAAM,EAAE;YACV,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;SAC7B;QAED,IAAI,YAAY,EAAE;YAChB,MAAM,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAAC;SACzC;QACD,MAAM,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAAC;QACxC,MAAM,CAAC,eAAe,EAAE,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,EAAE,CAAC,CAAC;KAC3C;CACF,CAAC,~~EA/CM~~,YAAY,kBAAA,EAAE,cAAc,~~oBA+ClC~~,CAAC;AAEH;;;;;IAKa,0BAA0B,GAAG,aAAa;AAEvD;;;;;IAKa,gCAAgC,GAAG;;;;"}
1	+ {"version":3,"file":"fetch-and-save-search-response.action.js","sources":["../../../../../../src/x-modules/search/store/actions/fetch-and-save-search-response.action.ts"],"sourcesContent":["import { SearchResponse, SearchRequest } from '@empathyco/x-adapter';\nimport { createFetchAndSaveActions } from '../../../../store/utils/fetch-and-save-action.utils';\nimport { InternalSearchRequest } from '../../types';\nimport { SearchActionContext, SearchState } from '../types';\n\nconst { fetchAndSave, cancelPrevious } = createFetchAndSaveActions<\n SearchActionContext,\n InternalSearchRequest \| null,\n SearchResponse\n>({\n fetch({ dispatch, state }, request) {\n return dispatch('fetchSearchResponse', request ? enrichRequest(request, state) : null);\n },\n onSuccess(\n { commit, state },\n {\n results,\n partialResults,\n facets,\n banners,\n promoteds,\n totalResults,\n spellcheck,\n redirections,\n queryTagging\n }\n ) {\n if (state.isAppendResults) {\n commit('appendResults', results);\n } else {\n commit('setResults', results);\n commit('setBanners', banners);\n commit('setPromoteds', promoteds);\n commit('setRedirections', redirections);\n }\n\n commit('setPartialResults', partialResults ?? []);\n\n if (facets) {\n commit('setFacets', facets);\n }\n\n if (queryTagging) {\n commit('setQueryTagging', queryTagging);\n }\n commit('setTotalResults', totalResults);\n commit('setSpellcheck', spellcheck ?? '');\n }\n});\n\n/*\n Enriches the {@link SearchRequest} object with the origin and page properties taken from the\n * {@link SearchState \| search state}.\n \n @param request - The {@link InternalSearchRequest}.\n * @param state - {@link SearchState}.\n \n @returns The search request.\n * @internal\n /\nfunction enrichRequest(request: InternalSearchRequest, state: SearchState): SearchRequest {\n const { page, ...restRequest } = request;\n const {\n config: { pageSize },\n origin,\n results\n } = state;\n const start = page === 1 ? 0 : results.length;\n\n return {\n ...restRequest,\n // eslint-disable-next-line @typescript-eslint/no-extra-parens\n ...(origin && { origin }),\n start,\n rows: pageSize page - start\n };\n}\n\n/*\n Default implementation for {@link SearchActions.fetchAndSaveSearchResponse} action.\n \n @public\n /\nexport const fetchAndSaveSearchResponse = fetchAndSave;\n\n/\n Default implementation for {@link SearchActions.cancelFetchAndSaveSearchResponse} action.\n \n @public\n */\nexport const cancelFetchAndSaveSearchResponse = cancelPrevious;\n"],"names":[],"mappings":";;;AAKM,IAAA,KAAmC,yBAAyB,CAIhE;IACA,KAAK,YAAC,EAAmB,EAAE,OAAO;YAA1B,QAAQ,cAAA,EAAE,KAAK,WAAA;QACrB,OAAO,QAAQ,CAAC,qBAAqB,EAAE,OAAO,GAAG,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;KACxF;IACD,SAAS,YACP,EAAiB,EACjB,EAUC;YAXC,MAAM,YAAA,EAAE,KAAK,WAAA;YAEb,OAAO,aAAA,EACP,cAAc,oBAAA,EACd,MAAM,YAAA,EACN,OAAO,aAAA,EACP,SAAS,eAAA,EACT,YAAY,kBAAA,EACZ,UAAU,gBAAA,EACV,YAAY,kBAAA,EACZ,YAAY,kBAAA;QAGd,IAAI,KAAK,CAAC,eAAe,EAAE;YACzB,MAAM,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;SAClC;aAAM;YACL,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;YAC9B,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;YAC9B,MAAM,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC;YAClC,MAAM,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAAC;SACzC;QAED,MAAM,CAAC,mBAAmB,EAAE,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,EAAE,CAAC,CAAC;QAElD,IAAI,MAAM,EAAE;YACV,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;SAC7B;QAED,IAAI,YAAY,EAAE;YAChB,MAAM,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAAC;SACzC;QACD,MAAM,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAAC;QACxC,MAAM,CAAC,eAAe,EAAE,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,EAAE,CAAC,CAAC;KAC3C;CACF,CAAC,EA3CM,YAAY,kBAAA,EAAE,cAAc,oBA2ClC,CAAC;AAEH;;;;;;;;;;AAUA,SAAS,aAAa,CAAC,OAA8B,EAAE,KAAkB;IAC/D,IAAA,IAAI,GAAqB,OAAO,KAA5B,EAAK,WAAW,UAAK,OAAO,EAAlC,QAAwB,CAAF,CAAa;IAE7B,IAAA,QAAQ,GAGhB,KAAK,gBAHW,EAClB,MAAM,GAEJ,KAAK,OAFD,EACN,OAAO,GACL,KAAK,QADA,CACC;IACV,IAAM,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC;IAE9C,sCACK,WAAW,IAEV,MAAM,IAAI,EAAE,MAAM,QAAA,EAAE,MACxB,KAAK,OAAA,EACL,IAAI,EAAE,QAAQ,GAAG,IAAI,GAAG,KAAK,IAC7B;AACJ,CAAC;AAED;;;;;IAKa,0BAA0B,GAAG,aAAa;AAEvD;;;;;IAKa,gCAAgC,GAAG;;;;"}

package/js/x-modules/search/store/actions/increase-page-apending-results.action.js CHANGED Viewed

@@ -10,7 +10,7 @@
 var increasePageAppendingResults = function (_a) {
     var commit = _a.commit, state = _a.state;
     var newPage = state.page + 1;
-    if (newPage >= 1 && newPage * state.config.pageSize <= state.totalResults) {
+    if (newPage >= 1 && state.page * state.config.pageSize < state.totalResults) {
         commit('setPage', newPage);
         commit('setIsAppendResults', true);
     }

package/js/x-modules/search/store/actions/increase-page-apending-results.action.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"increase-page-apending-results.action.js","sources":["../../../../../../src/x-modules/search/store/actions/increase-page-apending-results.action.ts"],"sourcesContent":["import { SearchXStoreModule } from '../types';\n\n/*\n Default implementation for the {@link SearchActions.increasePageAppendingResults}.\n \n @param context - The {@link https://vuex.vuejs.org/guide/actions.html \| context} of the actions,\n * provided by Vuex.\n \n @public\n /\n// eslint-disable-next-line max-len\nexport const increasePageAppendingResults: SearchXStoreModule['actions']['increasePageAppendingResults'] =\n ({ commit, state }) => {\n const newPage = state.page + 1;\n if (newPage >= 1 && ~~newPage~~ state.config.pageSize <= state.totalResults) {\n commit('setPage', newPage);\n commit('setIsAppendResults', true);\n }\n };\n"],"names":[],"mappings":"AAEA;;;;;;;;AAQA;IACa,4BAA4B,GACvC,UAAC,EAAiB;QAAf,MAAM,YAAA,EAAE,KAAK,WAAA;IACd,IAAM,OAAO,GAAG,KAAK,CAAC,IAAI,GAAG,CAAC,CAAC;IAC/B,IAAI,OAAO,IAAI,CAAC,IAAI,~~OAAO~~,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ,~~IAAI~~,KAAK,CAAC,YAAY,EAAE;~~QACzE~~,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;QAC3B,MAAM,CAAC,oBAAoB,EAAE,IAAI,CAAC,CAAC;KACpC;AACH;;;;"}
1	+ {"version":3,"file":"increase-page-apending-results.action.js","sources":["../../../../../../src/x-modules/search/store/actions/increase-page-apending-results.action.ts"],"sourcesContent":["import { SearchXStoreModule } from '../types';\n\n/*\n Default implementation for the {@link SearchActions.increasePageAppendingResults}.\n \n @param context - The {@link https://vuex.vuejs.org/guide/actions.html \| context} of the actions,\n * provided by Vuex.\n \n @public\n /\n// eslint-disable-next-line max-len\nexport const increasePageAppendingResults: SearchXStoreModule['actions']['increasePageAppendingResults'] =\n ({ commit, state }) => {\n const newPage = state.page + 1;\n if (newPage >= 1 && state.page state.config.pageSize < state.totalResults) {\n commit('setPage', newPage);\n commit('setIsAppendResults', true);\n }\n };\n"],"names":[],"mappings":"AAEA;;;;;;;;AAQA;IACa,4BAA4B,GACvC,UAAC,EAAiB;QAAf,MAAM,YAAA,EAAE,KAAK,WAAA;IACd,IAAM,OAAO,GAAG,KAAK,CAAC,IAAI,GAAG,CAAC,CAAC;IAC/B,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ,GAAG,KAAK,CAAC,YAAY,EAAE;QAC3E,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;QAC3B,MAAM,CAAC,oBAAoB,EAAE,IAAI,CAAC,CAAC;KACpC;AACH;;;;"}

package/js/x-modules/search/store/actions/reset-state.action.js ADDED Viewed

@@ -0,0 +1,32 @@
+import { isArrayEmpty } from '../../../../utils/array.js';
+import { getNewAndUpdatedKeys } from '../../../../utils/object.js';
+/**
+ * Default implementation for the {@link SearchActions.resetState}.
+ *
+ * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the actions,
+ * provided by Vuex.
+ *
+ * @public
+ */
+var resetState = function (_a, _b) {
+    var commit = _a.commit, state = _a.state;
+    var newRequest = _b.newRequest, oldRequest = _b.oldRequest;
+    var changedKeys = getNewAndUpdatedKeys(newRequest, oldRequest);
+    if (!isArrayEmpty(changedKeys)) {
+        if (!changedKeys.includes('page')) {
+            commit('setPage', 1);
+        }
+        if (changedKeys.includes('query')) {
+            commit('setSort', '');
+        }
+        var haveExtraParamsChanged = changedKeys.some(function (key) { return key in state.params; });
+        if (haveExtraParamsChanged) {
+            commit('setPage', 1);
+            commit('setSort', '');
+        }
+    }
+};
+export { resetState };
+//# sourceMappingURL=reset-state.action.js.map

package/js/x-modules/search/store/actions/reset-state.action.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"reset-state.action.js","sources":["../../../../../../src/x-modules/search/store/actions/reset-state.action.ts"],"sourcesContent":["import { isArrayEmpty } from '../../../../utils/array';\nimport { getNewAndUpdatedKeys } from '../../../../utils/object';\nimport { SearchXStoreModule } from '../types';\n\n/**\n * Default implementation for the {@link SearchActions.resetState}.\n *\n * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the actions,\n * provided by Vuex.\n *\n * @public\n */\nexport const resetState: SearchXStoreModule['actions']['resetState'] = (\n { commit, state },\n { newRequest, oldRequest }\n) => {\n const changedKeys = getNewAndUpdatedKeys(newRequest, oldRequest);\n\n if (!isArrayEmpty(changedKeys)) {\n if (!changedKeys.includes('page')) {\n commit('setPage', 1);\n }\n if (changedKeys.includes('query')) {\n commit('setSort', '');\n }\n\n const haveExtraParamsChanged = changedKeys.some(key => key in state.params);\n if (haveExtraParamsChanged) {\n commit('setPage', 1);\n commit('setSort', '');\n }\n }\n};\n"],"names":[],"mappings":";;;AAIA;;;;;;;;IAQa,UAAU,GAAgD,UACrE,EAAiB,EACjB,EAA0B;QADxB,MAAM,YAAA,EAAE,KAAK,WAAA;QACb,UAAU,gBAAA,EAAE,UAAU,gBAAA;IAExB,IAAM,WAAW,GAAG,oBAAoB,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;IAEjE,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE;QAC9B,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;YACjC,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;SACtB;QACD,IAAI,WAAW,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE;YACjC,MAAM,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;SACvB;QAED,IAAM,sBAAsB,GAAG,WAAW,CAAC,IAAI,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,IAAI,KAAK,CAAC,MAAM,GAAA,CAAC,CAAC;QAC5E,IAAI,sBAAsB,EAAE;YAC1B,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;YACrB,MAAM,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;SACvB;KACF;AACH;;;;"}

package/js/x-modules/search/store/emitters.js CHANGED Viewed

@@ -20,6 +20,12 @@ var searchEmitters = createStoreEmitters(searchXStoreModule, {
     PageChanged: function (state) { return state.page; },
     ResultsChanged: function (state) { return state.results; },
     SearchRequestChanged: function (_, getters) { return getters.request; },
+    SearchRequestUpdated: {
+        selector: function (_, getters) { return getters.request; },
+        filter: function (newValue, oldValue) {
+            return !!newValue && !!oldValue;
+        }
+    },
     SearchTaggingChanged: {
         selector: function (state) { return state.queryTagging; },
         filter: function (_a) {

package/js/x-modules/search/store/emitters.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/search/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store';\nimport { isStringEmpty } from '../../../utils/string';\nimport { searchXStoreModule } from './module';\n\n/*\n {@link StoreEmitters} For the search module.\n \n @internal\n */\nexport const searchEmitters = createStoreEmitters(searchXStoreModule, {\n FacetsChanged: {\n selector: state => state.facets,\n filter(newValue, oldValue): boolean {\n return newValue.length !== 0 \|\| oldValue.length !== 0;\n }\n },\n PageChanged: state => state.page,\n ResultsChanged: state => state.results,\n SearchRequestChanged: (_, getters) => getters.request,\n SearchTaggingChanged: {\n selector: state => state.queryTagging,\n filter: ({ url }) => !isStringEmpty(url)\n },\n SpellcheckChanged: state => state.spellcheckedQuery,\n SortChanged: state => state.sort\n});\n"],"names":[],"mappings":";;;;;;;AAIA;;;;;IAKa,cAAc,GAAG,mBAAmB,CAAC,kBAAkB,EAAE;IACpE,aAAa,EAAE;QACb,QAAQ,EAAE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,MAAM,GAAA;QAC/B,MAAM,EAAN,UAAO,QAAQ,EAAE,QAAQ;YACvB,OAAO,QAAQ,CAAC,MAAM,KAAK,CAAC,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC;SACvD;KACF;IACD,WAAW,EAAE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,IAAI,GAAA;IAChC,cAAc,EAAE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,OAAO,GAAA;IACtC,oBAAoB,EAAE,UAAC,CAAC,EAAE,OAAO,IAAK,OAAA,OAAO,CAAC,OAAO,GAAA;IACrD,oBAAoB,EAAE;QACpB,QAAQ,EAAE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,YAAY,GAAA;QACrC,MAAM,EAAE,UAAC,EAAO;gBAAL,GAAG,SAAA;YAAO,OAAA,CAAC,aAAa,CAAC,GAAG,CAAC;SAAA;KACzC;IACD,iBAAiB,EAAE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,iBAAiB,GAAA;IACnD,WAAW,EAAE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,IAAI,GAAA;CACjC;;;;"}
1	+ {"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/search/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store';\nimport { isStringEmpty } from '../../../utils/string';\nimport { searchXStoreModule } from './module';\n\n/*\n {@link StoreEmitters} For the search module.\n \n @internal\n */\nexport const searchEmitters = createStoreEmitters(searchXStoreModule, {\n FacetsChanged: {\n selector: state => state.facets,\n filter(newValue, oldValue): boolean {\n return newValue.length !== 0 \|\| oldValue.length !== 0;\n }\n },\n PageChanged: state => state.page,\n ResultsChanged: state => state.results,\n SearchRequestChanged: (_, getters) => getters.request,\n SearchRequestUpdated: {\n selector: (_, getters) => getters.request!,\n filter(newValue, oldValue): boolean {\n return !!newValue && !!oldValue;\n }\n },\n SearchTaggingChanged: {\n selector: state => state.queryTagging,\n filter: ({ url }) => !isStringEmpty(url)\n },\n SpellcheckChanged: state => state.spellcheckedQuery,\n SortChanged: state => state.sort\n});\n"],"names":[],"mappings":";;;;;;;AAIA;;;;;IAKa,cAAc,GAAG,mBAAmB,CAAC,kBAAkB,EAAE;IACpE,aAAa,EAAE;QACb,QAAQ,EAAE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,MAAM,GAAA;QAC/B,MAAM,EAAN,UAAO,QAAQ,EAAE,QAAQ;YACvB,OAAO,QAAQ,CAAC,MAAM,KAAK,CAAC,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC;SACvD;KACF;IACD,WAAW,EAAE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,IAAI,GAAA;IAChC,cAAc,EAAE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,OAAO,GAAA;IACtC,oBAAoB,EAAE,UAAC,CAAC,EAAE,OAAO,IAAK,OAAA,OAAO,CAAC,OAAO,GAAA;IACrD,oBAAoB,EAAE;QACpB,QAAQ,EAAE,UAAC,CAAC,EAAE,OAAO,IAAK,OAAA,OAAO,CAAC,OAAQ,GAAA;QAC1C,MAAM,EAAN,UAAO,QAAQ,EAAE,QAAQ;YACvB,OAAO,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,QAAQ,CAAC;SACjC;KACF;IACD,oBAAoB,EAAE;QACpB,QAAQ,EAAE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,YAAY,GAAA;QACrC,MAAM,EAAE,UAAC,EAAO;gBAAL,GAAG,SAAA;YAAO,OAAA,CAAC,aAAa,CAAC,GAAG,CAAC;SAAA;KACzC;IACD,iBAAiB,EAAE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,iBAAiB,GAAA;IACnD,WAAW,EAAE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,IAAI,GAAA;CACjC;;;;"}

package/js/x-modules/search/store/getters/request.getter.js CHANGED Viewed

@@ -10,9 +10,9 @@ import { __assign } from 'tslib';
  * @public
  */
 var request = function (_a) {
-    var query = _a.query, params = _a.params, config = _a.config, relatedTags = _a.relatedTags, selectedFilters = _a.selectedFilters, sort = _a.sort, page = _a.page, isAppendResults = _a.isAppendResults;
+    var page = _a.page, params = _a.params, query = _a.query, relatedTags = _a.relatedTags, selectedFilters = _a.selectedFilters, sort = _a.sort;
     return query.trim()
-        ? __assign({ query: query, relatedTags: relatedTags, sort: sort, rows: isAppendResults ? config.pageSize : config.pageSize * page, start: isAppendResults ? config.pageSize * (page - 1) : 0, filters: selectedFilters }, params) : null;
+        ? __assign({ query: query, relatedTags: relatedTags, sort: sort, page: page, filters: selectedFilters }, params) : null;
 };
 export { request };

package/js/x-modules/search/store/getters/request.getter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"request.getter.js","sources":["../../../../../../src/x-modules/search/store/getters/request.getter.ts"],"sourcesContent":["import { SearchXStoreModule } from '../types';\n\n/*\n Default implementation for the {@link SearchGetters.request} getter.\n \n @param state - Current {@link https://vuex.vuejs.org/guide/state.html \| state} of the search\n * module.\n * @returns The search request to fetch data from the API.\n \n @public\n /\nexport const request: SearchXStoreModule['getters']['request'] = ({\n ~~query~~,\n params,\n ~~config~~,\n relatedTags,\n selectedFilters,\n sort~~,\n page,\n isAppendResults~~\n}) => {\n return query.trim()\n ? {\n query,\n relatedTags,\n sort,\n rows: isAppendResults ? config.pageSize : config.pageSize page,\n ~~start: isAppendResults ? config.pageSize * (page - 1) : 0,\n~~ filters: selectedFilters,\n ...params\n }\n : null;\n};\n"],"names":[],"mappings":";;AAEA;;;;;;;;;IASa,OAAO,GAA6C,UAAC,~~EASjE~~;~~QARC~~,~~KAAK~~,~~WAAA~~,~~EACL~~,MAAM,YAAA,EACN,~~MAAM~~,~~YAAA~~,~~EACN~~,WAAW,iBAAA,EACX,eAAe,qBAAA,EACf,IAAI,UAAA~~,EACJ,IAAI,UAAA,EACJ,eAAe,qBAAA~~;~~IAEf~~,OAAO,KAAK,CAAC,IAAI,EAAE;qBAEb,KAAK,OAAA,EACL,WAAW,aAAA,EACX,IAAI,MAAA,EACJ,IAAI,~~EAAE~~,~~eAAe~~,~~GAAG,MAAM,CAAC,QAAQ,GAAG,MAAM,CAAC,QAAQ,GAAG,IAAI,EAChE,KAAK,EAAE,eAAe,GAAG,MAAM,CAAC,QAAQ,IAAI,IAAI,GAAG,CAAC,CAAC,GAAG,CAAC,EACzD,~~OAAO,EAAE,eAAe,IACrB,MAAM,IAEX,IAAI,CAAC;AACX;;;;"}
1	+ {"version":3,"file":"request.getter.js","sources":["../../../../../../src/x-modules/search/store/getters/request.getter.ts"],"sourcesContent":["import { SearchXStoreModule } from '../types';\n\n/*\n Default implementation for the {@link SearchGetters.request} getter.\n \n @param state - Current {@link https://vuex.vuejs.org/guide/state.html \| state} of the search\n * module.\n * @returns The search request to fetch data from the API.\n \n @public\n */\nexport const request: SearchXStoreModule['getters']['request'] = ({\n page,\n params,\n query,\n relatedTags,\n selectedFilters,\n sort\n}) => {\n return query.trim()\n ? {\n query,\n relatedTags,\n sort,\n page,\n filters: selectedFilters,\n ...params\n }\n : null;\n};\n"],"names":[],"mappings":";;AAEA;;;;;;;;;IASa,OAAO,GAA6C,UAAC,EAOjE;QANC,IAAI,UAAA,EACJ,MAAM,YAAA,EACN,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,eAAe,qBAAA,EACf,IAAI,UAAA;IAEJ,OAAO,KAAK,CAAC,IAAI,EAAE;qBAEb,KAAK,OAAA,EACL,WAAW,aAAA,EACX,IAAI,MAAA,EACJ,IAAI,MAAA,EACJ,OAAO,EAAE,eAAe,IACrB,MAAM,IAEX,IAAI,CAAC;AACX;;;;"}

package/js/x-modules/search/store/module.js CHANGED Viewed

@@ -4,6 +4,7 @@ import { isFacetFilter } from '@empathyco/x-types';
 import { cancelFetchAndSaveSearchResponse, fetchAndSaveSearchResponse } from './actions/fetch-and-save-search-response.action.js';
 import { fetchSearchResponse } from './actions/fetch-search-response.action.js';
 import { increasePageAppendingResults } from './actions/increase-page-apending-results.action.js';
+import { resetState } from './actions/reset-state.action.js';
 import { saveOrigin } from './actions/save-origin.action.js';
 import { setUrlParams } from './actions/set-url-params.action.js';
 import { request } from './getters/request.getter.js';
@@ -85,9 +86,6 @@ var searchXStoreModule = {
         },
         setPage: function (state, page) {
             state.page = page;
-            if (page === 1) {
-                state.isAppendResults = false;
-            }
         },
         setPageSize: function (state, pageSize) {
             state.config.pageSize = pageSize;
@@ -115,6 +113,7 @@ var searchXStoreModule = {
         fetchSearchResponse: fetchSearchResponse,
         fetchAndSaveSearchResponse: fetchAndSaveSearchResponse,
         increasePageAppendingResults: increasePageAppendingResults,
+        resetState: resetState,
         setUrlParams: setUrlParams,
         saveOrigin: saveOrigin
     }