@empathyco/x-components 5.0.0-alpha.9 → 6.0.0-alpha.2

package/js/composables/create-use-device.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-use-device.js","sources":["../../../src/composables/create-use-device.ts"],"sourcesContent":["import { reduce } from '@empathyco/x-utils';\nimport { useWindowSize, useScreenOrientation, useEventListener, useMemoize } from '@vueuse/core';\nimport { computed, effectScope, ref, Ref } from 'vue';\nimport { capitalize } from '../utils';\n\n/**\n * The Return type of the composable returned by `createUseDevice`.\n *\n * @public\n */\nexport type UseDeviceReturn<Device extends string = string> = {\n  orientation: Ref<'landscape' | 'portrait' | undefined>;\n  isTouchable: Ref<boolean>;\n  deviceName: Ref<string>;\n} & UseDeviceFlags<Device>;\n\n/**\n * The device flags type of the Return type of the composable returned by `createUseDevice`.\n *\n * @public\n */\nexport type UseDeviceFlags<Device extends string> = Record<\n  `is${Capitalize<Device>}`,\n  Ref<boolean>\n> &\n  Record<`is${Capitalize<Device>}OrGreater`, Ref<boolean>> &\n  Record<`is${Capitalize<Device>}OrLess`, Ref<boolean>>;\n\n/**\n * Factory function that creates a composable for device detection using the devices parameter\n * to configure breakpoints.\n *\n * @param devices - An object containing the breakpoints, where the key is the name of the device\n * and the value is the screen width.\n * @returns A composable which provides multiple reactive flags and values for detecting the\n * current device. The flags names depends on the names passed in the `devices` parameter.\n * @remarks The `orientation` only works for orientation-sensor devices (mobile, tablet, etc). If\n * in a desktop, the height of the window is larger than the width, the orientation will be\n * `landscape`.\n *\n * @example\n * ´´´typescript\n * const useDevice = createUseDevice(\\{ mobile: 0, tablet: 744, desktop: 1024 \\});\n * const \\{\n *   isMobile,\n *   isMobileOrLess,\n *   isMobileOrGreater,\n *   isTablet,\n *   isTabletOrLess,\n *   isTabletOrGreater,\n *   isDesktop,\n *   isDesktopOrLess,\n *   isDesktopOrGreater,\n *   deviceName,\n *   orientation,\n *   istTouchable\n * \\} = useDevice();\n *\n * @public\n */\nexport function createUseDevice<Device extends string>(\n  devices: Record<Device, number>\n): () => UseDeviceReturn<Device> {\n  let devicesFlags: UseDeviceFlags<Device>;\n  let orientation: UseDeviceReturn['orientation'];\n  let isTouchable: UseDeviceReturn['isTouchable'];\n  let deviceName: UseDeviceReturn['deviceName'];\n  // The `effectScope` group all the changes in one to avoid multiple re-renderings.\n  const scope = effectScope();\n  scope.run(() => {\n    devicesFlags = getDeviceFlags(devices);\n    orientation = getOrientation();\n    isTouchable = getIsTouchable();\n    deviceName = getDeviceName(devices, devicesFlags);\n  });\n  return () => ({\n    ...devicesFlags,\n    orientation,\n    isTouchable,\n    deviceName\n  });\n}\n\n/**\n * A function that returns reactive flags to detect the current device based on provided\n * breakpoints.\n *\n * @param devices - An object containing the breakpoints, where the key is the name of the device\n * and the value is the screen width.\n * @returns A object containing the multiple reactive flags.\n *\n * @internal\n */\nfunction getDeviceFlags<Device extends string>(\n  devices: Record<Device, number>\n): UseDeviceFlags<Device> {\n  const { width: windowSize } = useWindowSize();\n  return reduce(\n    devices,\n    (accumulator, device, deviceWidth) => {\n      const isDevice = computed(() => isCurrentDevice(device, devices, windowSize.value));\n      accumulator[`is${capitalize(device)}`] = isDevice;\n      accumulator[`is${capitalize(device)}OrLess`] = computed(\n        () => deviceWidth >= windowSize.value || isDevice.value\n      );\n      accumulator[`is${capitalize(device)}OrGreater`] = computed(\n        () => deviceWidth <= windowSize.value\n      );\n      return accumulator;\n    },\n    {} as Record<string, Ref<boolean>>\n  );\n}\n\n/**\n * To get the devices sorted by size and not run this calculation on every check.\n */\nconst getSortedByWidthDevices = useMemoize((devices: Record<string, number>) =>\n  Object.entries(devices).sort(([, aWidth], [, bWidth]) => bWidth - aWidth)\n);\n\n/**\n * Checks if the current device satisfies the criteria of being a valid device.\n *\n * @param device - The name of the current device.\n * @param devices - An object containing device names and their\n * respective widths.\n * @param windowSize - The width of the window.\n * @returns A boolean value indicating whether the current device satisfies the\n * criteria of being a valid device.\n *\n * @internal\n */\nfunction isCurrentDevice(\n  device: string,\n  devices: Record<string, number>,\n  windowSize: number\n): boolean {\n  const deviceWidth = devices[device];\n  return (\n    deviceWidth <= windowSize &&\n    !getSortedByWidthDevices(devices).some(\n      ([, otherDeviceWidth]) => otherDeviceWidth <= windowSize && otherDeviceWidth > deviceWidth\n    )\n  );\n}\n\n/**\n * A function that returns the current device orientation as a reactive value.\n *\n * @returns A reactive value indicating the current device\n * orientation.\n *\n * @internal\n */\nfunction getOrientation(): UseDeviceReturn['orientation'] {\n  const { orientation } = useScreenOrientation();\n  return computed(() =>\n    orientation.value?.includes('landscape')\n      ? 'landscape'\n      : orientation.value?.includes('portrait')\n      ? 'portrait'\n      : undefined\n  );\n}\n\n/**\n * A function that returns a reactive boolean indicating whether the current device is\n * touch-enabled.\n *\n * @returns A reactive boolean indicating whether the current device is touch-enabled.\n *\n * @internal\n */\nfunction getIsTouchable(): Ref<boolean> {\n  const isTouchableRef = ref(detectTouchable());\n  if (window) {\n    useEventListener(window, 'resize', () => (isTouchableRef.value = detectTouchable()), {\n      passive: true\n    });\n  }\n  return isTouchableRef;\n}\n\n/**\n * A function that returns a reactive string indicating the name of the currently detected device\n * based on the provided devices and device flags.\n *\n * @param  devices - An object containing the breakpoints, where the key is the name of the device\n * and the value is the screen width.\n * @param devicesFlags - An object containing multiple reactive flags and values for detecting\n * the current device.\n * @returns A reactive string indicating the name of the currently detected device.\n *\n * @internal\n */\nfunction getDeviceName(\n  devices: Record<string, number>,\n  devicesFlags: UseDeviceFlags<string>\n): Ref<string> {\n  return computed(\n    () => Object.keys(devices).find(device => devicesFlags[`is${capitalize(device)}`]?.value) ?? ''\n  );\n}\n\n/**\n * A utility function that detects whether the current device is touch-enabled.\n *\n * @returns A boolean indicating whether the current device is touch-enabled.\n *\n * @internal\n */\nfunction detectTouchable(): boolean {\n  return 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n}\n"],"names":[],"mappings":";;;;;;AA4BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BG;AACG,SAAU,eAAe,CAC7B,OAA+B,EAAA;AAE/B,IAAA,IAAI,YAAoC,CAAC;AACzC,IAAA,IAAI,WAA2C,CAAC;AAChD,IAAA,IAAI,WAA2C,CAAC;AAChD,IAAA,IAAI,UAAyC,CAAC;;AAE9C,IAAA,MAAM,KAAK,GAAG,WAAW,EAAE,CAAC;AAC5B,IAAA,KAAK,CAAC,GAAG,CAAC,MAAK;AACb,QAAA,YAAY,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC;QACvC,WAAW,GAAG,cAAc,EAAE,CAAC;QAC/B,WAAW,GAAG,cAAc,EAAE,CAAC;AAC/B,QAAA,UAAU,GAAG,aAAa,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;AACpD,KAAC,CAAC,CAAC;IACH,OAAO,OAAO;AACZ,QAAA,GAAG,YAAY;QACf,WAAW;QACX,WAAW;QACX,UAAU;AACX,KAAA,CAAC,CAAC;AACL,CAAC;AAED;;;;;;;;;AASG;AACH,SAAS,cAAc,CACrB,OAA+B,EAAA;IAE/B,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,aAAa,EAAE,CAAC;IAC9C,OAAO,MAAM,CACX,OAAO,EACP,CAAC,WAAW,EAAE,MAAM,EAAE,WAAW,KAAI;AACnC,QAAA,MAAM,QAAQ,GAAG,QAAQ,CAAC,MAAM,eAAe,CAAC,MAAM,EAAE,OAAO,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC;QACpF,WAAW,CAAC,CAAK,EAAA,EAAA,UAAU,CAAC,MAAM,CAAC,CAAE,CAAA,CAAC,GAAG,QAAQ,CAAC;QAClD,WAAW,CAAC,CAAK,EAAA,EAAA,UAAU,CAAC,MAAM,CAAC,CAAQ,MAAA,CAAA,CAAC,GAAG,QAAQ,CACrD,MAAM,WAAW,IAAI,UAAU,CAAC,KAAK,IAAI,QAAQ,CAAC,KAAK,CACxD,CAAC;QACF,WAAW,CAAC,KAAK,UAAU,CAAC,MAAM,CAAC,CAAA,SAAA,CAAW,CAAC,GAAG,QAAQ,CACxD,MAAM,WAAW,IAAI,UAAU,CAAC,KAAK,CACtC,CAAC;AACF,QAAA,OAAO,WAAW,CAAC;KACpB,EACD,EAAkC,CACnC,CAAC;AACJ,CAAC;AAED;;AAEG;AACH,MAAM,uBAAuB,GAAG,UAAU,CAAC,CAAC,OAA+B,KACzE,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,EAAE,GAAG,MAAM,CAAC,KAAK,MAAM,GAAG,MAAM,CAAC,CAC1E,CAAC;AAEF;;;;;;;;;;;AAWG;AACH,SAAS,eAAe,CACtB,MAAc,EACd,OAA+B,EAC/B,UAAkB,EAAA;AAElB,IAAA,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;IACpC,QACE,WAAW,IAAI,UAAU;QACzB,CAAC,uBAAuB,CAAC,OAAO,CAAC,CAAC,IAAI,CACpC,CAAC,GAAG,gBAAgB,CAAC,KAAK,gBAAgB,IAAI,UAAU,IAAI,gBAAgB,GAAG,WAAW,CAC3F,EACD;AACJ,CAAC;AAED;;;;;;;AAOG;AACH,SAAS,cAAc,GAAA;AACrB,IAAA,MAAM,EAAE,WAAW,EAAE,GAAG,oBAAoB,EAAE,CAAC;AAC/C,IAAA,OAAO,QAAQ,CAAC,MACd,WAAW,CAAC,KAAK,EAAE,QAAQ,CAAC,WAAW,CAAC;AACtC,UAAE,WAAW;UACX,WAAW,CAAC,KAAK,EAAE,QAAQ,CAAC,UAAU,CAAC;AACzC,cAAE,UAAU;cACV,SAAS,CACd,CAAC;AACJ,CAAC;AAED;;;;;;;AAOG;AACH,SAAS,cAAc,GAAA;AACrB,IAAA,MAAM,cAAc,GAAG,GAAG,CAAC,eAAe,EAAE,CAAC,CAAC;AAC9C,IAAA,IAAI,MAAM,EAAE;AACV,QAAA,gBAAgB,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,cAAc,CAAC,KAAK,GAAG,eAAe,EAAE,CAAC,EAAE;AACnF,YAAA,OAAO,EAAE,IAAI;AACd,SAAA,CAAC,CAAC;AACJ,KAAA;AACD,IAAA,OAAO,cAAc,CAAC;AACxB,CAAC;AAED;;;;;;;;;;;AAWG;AACH,SAAS,aAAa,CACpB,OAA+B,EAC/B,YAAoC,EAAA;AAEpC,IAAA,OAAO,QAAQ,CACb,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,YAAY,CAAC,CAAK,EAAA,EAAA,UAAU,CAAC,MAAM,CAAC,CAAE,CAAA,CAAC,EAAE,KAAK,CAAC,IAAI,EAAE,CAChG,CAAC;AACJ,CAAC;AAED;;;;;;AAMG;AACH,SAAS,eAAe,GAAA;IACtB,OAAO,cAAc,IAAI,MAAM,IAAI,SAAS,CAAC,cAAc,GAAG,CAAC,CAAC;AAClE;;;;"}

package/js/composables/use-_x.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-_x.js","sources":["../../../src/composables/use-$x.ts"],"sourcesContent":["import { UseAliasAPI, useAliasApi } from './use-alias-api';\nimport { useXBus, UseXBusAPI } from './use-x-bus';\n\n/**\n * Function which returns the `$x` object from the current component instance.\n *\n * @returns The `$x` object from the current component instance.\n *\n * @public\n */\nexport function use$x(): UseXComponentAPI {\n  const xAliasAPI = useAliasApi();\n  const xBusAPI = useXBus();\n  return Object.assign(xAliasAPI, xBusAPI);\n}\n\n/**\n * The XComponentAPI exposes access to the {@link @empathyco/x-bus#XBus}, and store aliases to the\n * components.\n *\n * @public\n */\nexport interface UseXComponentAPI extends UseXBusAPI, UseAliasAPI {}\n"],"names":[],"mappings":";;;AAGA;;;;;;AAMG;SACa,KAAK,GAAA;AACnB,IAAA,MAAM,SAAS,GAAG,WAAW,EAAE,CAAC;AAChC,IAAA,MAAM,OAAO,GAAG,OAAO,EAAE,CAAC;IAC1B,OAAO,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;AAC3C;;;;"}
+{"version":3,"file":"use-_x.js","sources":["../../../src/composables/use-$x.ts"],"sourcesContent":["import { useAliasApi } from './use-alias-api';\nimport { useXBus } from './use-x-bus';\n\n/**\n * Function which returns the `$x` object from the current component instance.\n *\n * @returns The `$x` object from the current component instance.\n *\n * @public\n */\nexport function use$x() {\n  const xAliasAPI = useAliasApi();\n  const xBusAPI = useXBus();\n  return Object.assign(xAliasAPI, xBusAPI);\n}\n"],"names":[],"mappings":";;;AAGA;;;;;;AAMG;SACa,KAAK,GAAA;AACnB,IAAA,MAAM,SAAS,GAAG,WAAW,EAAE,CAAC;AAChC,IAAA,MAAM,OAAO,GAAG,OAAO,EAAE,CAAC;IAC1B,OAAO,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;AAC3C;;;;"}

package/js/composables/use-alias-api.js

@@ -5,8 +5,8 @@ import 'rxjs/operators';
 import 'rxjs';
 import '../plugins/devtools/colors.utils.js';
 import '../plugins/x-bus.js';
-import { getGetterPath } from '../plugins/x-plugin.utils.js';
 import '../plugins/x-plugin.js';
+import { getGetterPath } from '../plugins/x-plugin.utils.js';
 import { useStore } from './use-store.js';
 
 /**

package/js/composables/use-debounce.js

@@ -0,0 +1,23 @@
+import { onBeforeUnmount } from 'vue';
+import { debounce } from '../utils/debounce.js';
+
+/**
+ * Composable which wraps the function passed as parameter into a debounced function and returns it.
+ * It also cancels the debounced function when component is unmounted.
+ *
+ * @param fn - Function to be debounced.
+ * @param debounceTimeInMs - Time of debounce in ms.
+ * @param debounceOptions - The options for the debounce strategy.
+ * @returns Debounced function obtained from `fn` parameter.
+ * @public
+ */
+function useDebounce(fn, debounceTimeInMs, debounceOptions = {}) {
+    const debouncedFn = debounce(fn, debounceTimeInMs, debounceOptions);
+    onBeforeUnmount(() => {
+        debouncedFn.cancel();
+    });
+    return debouncedFn;
+}
+
+export { useDebounce };
+//# sourceMappingURL=use-debounce.js.map

package/js/composables/use-debounce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-debounce.js","sources":["../../../src/composables/use-debounce.ts"],"sourcesContent":["import { onBeforeUnmount } from 'vue';\nimport { debounce } from '../utils/debounce';\nimport { DebounceOptions } from '../utils/types';\n\n/**\n * Composable which wraps the function passed as parameter into a debounced function and returns it.\n * It also cancels the debounced function when component is unmounted.\n *\n * @param fn - Function to be debounced.\n * @param debounceTimeInMs - Time of debounce in ms.\n * @param debounceOptions - The options for the debounce strategy.\n * @returns Debounced function obtained from `fn` parameter.\n * @public\n */\nexport function useDebounce<Params extends any[]>(\n  fn: (...args: Params) => void,\n  debounceTimeInMs: number,\n  debounceOptions: DebounceOptions = {}\n) {\n  const debouncedFn = debounce(fn, debounceTimeInMs, debounceOptions);\n\n  onBeforeUnmount(() => {\n    debouncedFn.cancel();\n  });\n\n  return debouncedFn;\n}\n"],"names":[],"mappings":";;;AAIA;;;;;;;;;AASG;AACG,SAAU,WAAW,CACzB,EAA6B,EAC7B,gBAAwB,EACxB,kBAAmC,EAAE,EAAA;IAErC,MAAM,WAAW,GAAG,QAAQ,CAAC,EAAE,EAAE,gBAAgB,EAAE,eAAe,CAAC,CAAC;IAEpE,eAAe,CAAC,MAAK;QACnB,WAAW,CAAC,MAAM,EAAE,CAAC;AACvB,KAAC,CAAC,CAAC;AAEH,IAAA,OAAO,WAAW,CAAC;AACrB;;;;"}

package/js/composables/use-getter.js

@@ -6,8 +6,8 @@ import 'rxjs/operators';
 import 'rxjs';
 import '../plugins/devtools/colors.utils.js';
 import '../plugins/x-bus.js';
-import { getGetterPath } from '../plugins/x-plugin.utils.js';
 import '../plugins/x-plugin.js';
+import { getGetterPath } from '../plugins/x-plugin.utils.js';
 import { useStore } from './use-store.js';
 
 /**
@@ -16,7 +16,6 @@ import { useStore } from './use-store.js';
  * @param module - The {@link XModuleName} of the getter.
  * @param getters - List of getters names.
  * @returns The requested getters from the module.
- *
  * @public
  */
 function useGetter(module, getters) {

package/js/composables/use-getter.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-getter.js","sources":["../../../src/composables/use-getter.ts"],"sourcesContent":["import { Dictionary } from '@empathyco/x-utils';\nimport { computed, ComputedRef } from 'vue';\nimport { ExtractGetters, XModuleName } from '../x-modules/x-modules.types';\nimport { getGetterPath } from '../plugins/index';\nimport { useStore } from './use-store';\n\n/**\n * Function which returns the requested getters as a dictionary of getters.\n *\n * @param module - The {@link XModuleName} of the getter.\n * @param getters - List of getters names.\n * @returns The requested getters from the module.\n *\n * @public\n */\nexport function useGetter<\n  Module extends XModuleName,\n  GetterName extends keyof ExtractGetters<Module> & string\n>(module: Module, getters: GetterName[]): Dictionary<ComputedRef> {\n  const store = useStore();\n\n  return getters.reduce<Dictionary<ComputedRef>>((getterDictionary, getterName) => {\n    const getterPath = getGetterPath(module, getterName);\n    getterDictionary[getterName] = computed(() => store.getters[getterPath]);\n    return getterDictionary;\n  }, {});\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAMA;;;;;;;;AAQG;AACa,SAAA,SAAS,CAGvB,MAAc,EAAE,OAAqB,EAAA;AACrC,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,OAAO,OAAO,CAAC,MAAM,CAA0B,CAAC,gBAAgB,EAAE,UAAU,KAAI;QAC9E,MAAM,UAAU,GAAG,aAAa,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;AACrD,QAAA,gBAAgB,CAAC,UAAU,CAAC,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC;AACzE,QAAA,OAAO,gBAAgB,CAAC;KACzB,EAAE,EAAE,CAAC,CAAC;AACT;;;;"}
+{"version":3,"file":"use-getter.js","sources":["../../../src/composables/use-getter.ts"],"sourcesContent":["import { Dictionary } from '@empathyco/x-utils';\nimport { computed, ComputedRef } from 'vue';\nimport { ExtractGetters, XModuleName } from '../x-modules/x-modules.types';\nimport { getGetterPath } from '../plugins/index';\nimport { useStore } from './use-store';\n\n/**\n * Function which returns the requested getters as a dictionary of getters.\n *\n * @param module - The {@link XModuleName} of the getter.\n * @param getters - List of getters names.\n * @returns The requested getters from the module.\n * @public\n */\nexport function useGetter<\n  Module extends XModuleName,\n  GetterName extends keyof ExtractGetters<Module> & string\n>(module: Module, getters: GetterName[]): Dictionary<ComputedRef> {\n  const store = useStore();\n\n  return getters.reduce<Dictionary<ComputedRef>>((getterDictionary, getterName) => {\n    const getterPath = getGetterPath(module, getterName);\n    getterDictionary[getterName] = computed(() => store.getters[getterPath]);\n    return getterDictionary;\n  }, {});\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAMA;;;;;;;AAOG;AACa,SAAA,SAAS,CAGvB,MAAc,EAAE,OAAqB,EAAA;AACrC,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,OAAO,OAAO,CAAC,MAAM,CAA0B,CAAC,gBAAgB,EAAE,UAAU,KAAI;QAC9E,MAAM,UAAU,GAAG,aAAa,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;AACrD,QAAA,gBAAgB,CAAC,UAAU,CAAC,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC;AACzE,QAAA,OAAO,gBAAgB,CAAC;KACzB,EAAE,EAAE,CAAC,CAAC;AACT;;;;"}

package/js/composables/use-store.js

@@ -1,4 +1,4 @@
-import { getCurrentInstance } from 'vue';
+import { useStore as useStore$1 } from 'vuex';
 
 /**
  * Function which returns the `$store` object from the current component instance.
@@ -8,7 +8,7 @@ import { getCurrentInstance } from 'vue';
  * @public
  */
 function useStore() {
-    return (getCurrentInstance()?.proxy).$store;
+    return useStore$1();
 }
 
 export { useStore };

package/js/composables/use-store.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-store.js","sources":["../../../src/composables/use-store.ts"],"sourcesContent":["import { getCurrentInstance } from 'vue';\nimport { Store } from 'vuex';\n\n/**\n * Function which returns the `$store` object from the current component instance.\n *\n * @returns The `$store` object from the current component instance.\n *\n * @public\n */\nexport function useStore(): Store<any> {\n  return (getCurrentInstance()?.proxy as { $store: Store<any> }).$store;\n}\n"],"names":[],"mappings":";;AAGA;;;;;;AAMG;SACa,QAAQ,GAAA;IACtB,OAAO,CAAC,kBAAkB,EAAE,EAAE,KAAgC,EAAC,MAAM,CAAC;AACxE;;;;"}
+{"version":3,"file":"use-store.js","sources":["../../../src/composables/use-store.ts"],"sourcesContent":["import { useStore as useStoreVuex, Store } from 'vuex';\n/**\n * Function which returns the `$store` object from the current component instance.\n *\n * @returns The `$store` object from the current component instance.\n *\n * @public\n */\nexport function useStore(): Store<any> {\n  return useStoreVuex();\n}\n"],"names":["useStoreVuex"],"mappings":";;AACA;;;;;;AAMG;SACa,QAAQ,GAAA;IACtB,OAAOA,UAAY,EAAE,CAAC;AACxB;;;;"}

package/js/composables/use-x-bus.js

@@ -1,24 +1,26 @@
-import { inject, getCurrentInstance } from 'vue';
+import { Subscription } from 'rxjs';
+import { inject, getCurrentInstance, onBeforeUnmount, isRef } from 'vue';
 import { getRootXComponent, getXComponentXModuleName } from '../components/x-component.utils.js';
 import { XPlugin } from '../plugins/x-plugin.js';
 import { bus } from '../plugins/x-bus.js';
 
 /**
- * Composable which injects the current location,
- * returns the `on` and `emit` functions from the `XBus`, applying location
- * and component metadata.
+ * Composable which injects the current location, returns the `on` and `emit` functions
+ * using the bus and applying component metadata. Also unsubscribe from events when components is
+ * unmounted.
  *
  * @remarks This composable tries to use the `XPlugin` bus and catches the exception thrown
  * by the `XPlugin` if it was not instantiated and uses the default `xBus` as fallback.
  *
  * @returns An object with the `on` and `emit` functions.
+ * @public
  */
 function useXBus() {
     const injectedLocation = inject('location', 'none');
-    const currentComponent = getCurrentInstance()?.proxy;
-    const currentXComponent = getRootXComponent(currentComponent ?? null);
-    if (currentComponent && currentXComponent) {
-        currentComponent.xComponent = currentXComponent;
+    const component = getCurrentInstance()?.proxy;
+    const xComponent = getRootXComponent(component ?? null);
+    if (component && xComponent) {
+        component.xComponent = xComponent;
     }
     let bus$1;
     try {
@@ -27,14 +29,24 @@ function useXBus() {
     catch (error) {
         bus$1 = bus;
     }
+    const subscription = new Subscription();
+    onBeforeUnmount(() => {
+        subscription.unsubscribe();
+    });
     return {
-        on: bus$1.on.bind(bus$1),
+        on: (event, withMetadata) => {
+            const observable = bus$1.on(event, withMetadata);
+            return {
+                subscribe: (callback
+                // Cast to any because bus.on doesn't infer conditional type referencing `withMetadata`
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+                ) => subscription.add(observable.subscribe(callback))
+            };
+        },
         emit: (event, payload, metadata = {}) => {
-            const location = typeof injectedLocation === 'object' && 'value' in injectedLocation
-                ? injectedLocation.value
-                : injectedLocation;
-            bus$1.emit(event, payload, createWireMetadata(metadata, currentComponent, location));
-            currentXComponent?.$emit(event, payload);
+            const location = isRef(injectedLocation) ? injectedLocation.value : injectedLocation;
+            xComponent?.$emit(event, payload); // TODO - Pending to deprecate
+            return bus$1.emit(event, payload, createWireMetadata(metadata, component, location));
         }
     };
 }

package/js/composables/use-x-bus.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-x-bus.js","sources":["../../../src/composables/use-x-bus.ts"],"sourcesContent":["import Vue, { getCurrentInstance, inject, Ref } from 'vue';\nimport { XBus } from '@empathyco/x-bus';\nimport { XEvent, XEventPayload, XEventsTypes } from '../wiring/events.types';\nimport { WireMetadata } from '../wiring/wiring.types';\nimport { getRootXComponent, getXComponentXModuleName } from '../components/x-component.utils';\nimport { FeatureLocation } from '../types/origin';\nimport { PropsWithType } from '../utils/types';\nimport { XPlugin } from '../plugins/x-plugin';\nimport { bus as xBus } from '../plugins/x-bus';\n\n/**\n * Composable which injects the current location,\n * returns the `on` and `emit` functions from the `XBus`, applying location\n * and component metadata.\n *\n * @remarks This composable tries to use the `XPlugin` bus and catches the exception thrown\n * by the `XPlugin` if it was not instantiated and uses the default `xBus` as fallback.\n *\n * @returns An object with the `on` and `emit` functions.\n */\nexport function useXBus(): UseXBusAPI {\n  const injectedLocation = inject<Ref<FeatureLocation> | FeatureLocation>('location', 'none');\n\n  const currentComponent: PrivateExtendedVueComponent | undefined | null =\n    getCurrentInstance()?.proxy;\n  const currentXComponent = getRootXComponent(currentComponent ?? null);\n  if (currentComponent && currentXComponent) {\n    currentComponent.xComponent = currentXComponent;\n  }\n  let bus: XBus<XEventsTypes, WireMetadata>;\n  try {\n    bus = XPlugin.bus;\n  } catch (error) {\n    bus = xBus;\n  }\n  return {\n    on: bus.on.bind(bus),\n    emit: <Event extends XEvent>(\n      event: Event,\n      payload?: XEventPayload<Event>,\n      metadata: Omit<WireMetadata, 'moduleName'> = {}\n    ) => {\n      const location =\n        typeof injectedLocation === 'object' && 'value' in injectedLocation\n          ? injectedLocation.value\n          : injectedLocation;\n\n      bus.emit(event, payload!, createWireMetadata(metadata, currentComponent, location));\n      currentXComponent?.$emit(event, payload);\n    }\n  };\n}\n\n/**\n * Creates a wire metadata object based on the component and the provided metadata.\n *\n * @param metadata - Additional metadata emitted by the component.\n * @param component - The component this metadata belongs to.\n * @param location - The location of the component.\n *\n * @returns A {@link WireMetadata} object.\n */\nfunction createWireMetadata(\n  metadata: Partial<WireMetadata>,\n  component?: PrivateExtendedVueComponent,\n  location?: FeatureLocation\n): WireMetadata {\n  return Object.defineProperties(\n    {\n      replaceable: true,\n      moduleName: component ? getXComponentXModuleName(component.xComponent) : null,\n      location,\n      ...metadata\n    },\n    {\n      component: {\n        value: component,\n        /* TODO: defining component as a non-enumerable property to ease tests changes due to\n         * cyclic dependencies in Vue component instances. */\n        enumerable: false\n      }\n    }\n  );\n}\n\ninterface PrivateExtendedVueComponent extends Vue {\n  xComponent?: Vue | undefined;\n}\n\nexport interface UseXBusAPI {\n  /* eslint-disable jsdoc/require-description-complete-sentence */\n  /** {@inheritDoc XBus.(on:1)} */\n  on: XBus<XEventsTypes, WireMetadata>['on'];\n  /** {@inheritDoc XBus.(emit:1)} */\n  emit(event: PropsWithType<XEventsTypes, void>): void;\n  /** {@inheritDoc XBus.(emit:2)} */\n  emit<Event extends XEvent>(\n    event: Event,\n    payload: XEventPayload<Event>,\n    metadata?: Omit<WireMetadata, 'moduleName' | 'origin' | 'location'>\n  ): void;\n  /* eslint-enable jsdoc/require-description-complete-sentence */\n}\n"],"names":["bus","xBus"],"mappings":";;;;;AAUA;;;;;;;;;AASG;SACa,OAAO,GAAA;IACrB,MAAM,gBAAgB,GAAG,MAAM,CAAyC,UAAU,EAAE,MAAM,CAAC,CAAC;AAE5F,IAAA,MAAM,gBAAgB,GACpB,kBAAkB,EAAE,EAAE,KAAK,CAAC;IAC9B,MAAM,iBAAiB,GAAG,iBAAiB,CAAC,gBAAgB,IAAI,IAAI,CAAC,CAAC;IACtE,IAAI,gBAAgB,IAAI,iBAAiB,EAAE;AACzC,QAAA,gBAAgB,CAAC,UAAU,GAAG,iBAAiB,CAAC;AACjD,KAAA;AACD,IAAA,IAAIA,KAAqC,CAAC;IAC1C,IAAI;AACF,QAAAA,KAAG,GAAG,OAAO,CAAC,GAAG,CAAC;AACnB,KAAA;AAAC,IAAA,OAAO,KAAK,EAAE;QACdA,KAAG,GAAGC,GAAI,CAAC;AACZ,KAAA;IACD,OAAO;QACL,EAAE,EAAED,KAAG,CAAC,EAAE,CAAC,IAAI,CAACA,KAAG,CAAC;QACpB,IAAI,EAAE,CACJ,KAAY,EACZ,OAA8B,EAC9B,QAAA,GAA6C,EAAE,KAC7C;YACF,MAAM,QAAQ,GACZ,OAAO,gBAAgB,KAAK,QAAQ,IAAI,OAAO,IAAI,gBAAgB;kBAC/D,gBAAgB,CAAC,KAAK;kBACtB,gBAAgB,CAAC;AAEvB,YAAAA,KAAG,CAAC,IAAI,CAAC,KAAK,EAAE,OAAQ,EAAE,kBAAkB,CAAC,QAAQ,EAAE,gBAAgB,EAAE,QAAQ,CAAC,CAAC,CAAC;AACpF,YAAA,iBAAiB,EAAE,KAAK,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;SAC1C;KACF,CAAC;AACJ,CAAC;AAED;;;;;;;;AAQG;AACH,SAAS,kBAAkB,CACzB,QAA+B,EAC/B,SAAuC,EACvC,QAA0B,EAAA;IAE1B,OAAO,MAAM,CAAC,gBAAgB,CAC5B;AACE,QAAA,WAAW,EAAE,IAAI;AACjB,QAAA,UAAU,EAAE,SAAS,GAAG,wBAAwB,CAAC,SAAS,CAAC,UAAU,CAAC,GAAG,IAAI;QAC7E,QAAQ;AACR,QAAA,GAAG,QAAQ;KACZ,EACD;AACE,QAAA,SAAS,EAAE;AACT,YAAA,KAAK,EAAE,SAAS;AAChB;AACqD;AACrD,YAAA,UAAU,EAAE,KAAK;AAClB,SAAA;AACF,KAAA,CACF,CAAC;AACJ;;;;"}
+{"version":3,"file":"use-x-bus.js","sources":["../../../src/composables/use-x-bus.ts"],"sourcesContent":["import { Subscription } from 'rxjs';\nimport {\n  ComponentPublicInstance,\n  getCurrentInstance,\n  inject,\n  isRef,\n  onBeforeUnmount,\n  Ref\n} from 'vue';\nimport { EventPayload, SubjectPayload, XBus } from '@empathyco/x-bus';\nimport { XEvent, XEventPayload, XEventsTypes } from '../wiring/events.types';\nimport { WireMetadata } from '../wiring/wiring.types';\nimport { getRootXComponent, getXComponentXModuleName } from '../components/x-component.utils';\nimport { FeatureLocation } from '../types/origin';\nimport { XPlugin } from '../plugins/x-plugin';\nimport { bus as xBus } from '../plugins/x-bus';\n\ninterface PrivateExtendedVueComponent extends ComponentPublicInstance {\n  xComponent?: ComponentPublicInstance;\n}\n\n/**\n * Composable which injects the current location, returns the `on` and `emit` functions\n * using the bus and applying component metadata. Also unsubscribe from events when components is\n * unmounted.\n *\n * @remarks This composable tries to use the `XPlugin` bus and catches the exception thrown\n * by the `XPlugin` if it was not instantiated and uses the default `xBus` as fallback.\n *\n * @returns An object with the `on` and `emit` functions.\n * @public\n */\nexport function useXBus() {\n  const injectedLocation = inject<Ref<FeatureLocation> | FeatureLocation>('location', 'none');\n\n  const component = getCurrentInstance()?.proxy as PrivateExtendedVueComponent;\n  const xComponent = getRootXComponent(component ?? null);\n  if (component && xComponent) {\n    component.xComponent = xComponent;\n  }\n\n  let bus: XBus<XEventsTypes, WireMetadata>;\n  try {\n    bus = XPlugin.bus;\n  } catch (error) {\n    bus = xBus;\n  }\n\n  const subscription = new Subscription();\n  onBeforeUnmount(() => {\n    subscription.unsubscribe();\n  });\n\n  return {\n    on: <Event extends XEvent, Metadata extends boolean>(event: Event, withMetadata: Metadata) => {\n      type Payload = EventPayload<XEventsTypes, Event>;\n      const observable = bus.on(event, withMetadata);\n\n      return {\n        subscribe: (\n          callback: (\n            payload: Metadata extends true ? SubjectPayload<Payload, WireMetadata> : Payload\n          ) => void\n          // Cast to any because bus.on doesn't infer conditional type referencing `withMetadata`\n          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n        ) => subscription.add(observable.subscribe(callback as any))\n      };\n    },\n    emit: <Event extends XEvent>(\n      event: Event,\n      payload?: XEventPayload<Event>,\n      metadata: Omit<WireMetadata, 'moduleName'> = {}\n    ) => {\n      const location = isRef(injectedLocation) ? injectedLocation.value : injectedLocation;\n\n      xComponent?.$emit(event, payload); // TODO - Pending to deprecate\n      return bus.emit(event, payload!, createWireMetadata(metadata, component, location));\n    }\n  };\n}\n\n/**\n * Creates a wire metadata object based on the component and the provided metadata.\n *\n * @param metadata - Additional metadata emitted by the component.\n * @param component - The component this metadata belongs to.\n * @param location - The location of the component.\n *\n * @returns A {@link WireMetadata} object.\n */\nfunction createWireMetadata(\n  metadata: Partial<WireMetadata>,\n  component?: PrivateExtendedVueComponent,\n  location?: FeatureLocation\n): WireMetadata {\n  return Object.defineProperties(\n    {\n      replaceable: true,\n      moduleName: component ? getXComponentXModuleName(component.xComponent) : null,\n      location,\n      ...metadata\n    },\n    {\n      component: {\n        value: component,\n        /* TODO: defining component as a non-enumerable property to ease tests changes due to\n         * cyclic dependencies in Vue component instances. */\n        enumerable: false\n      }\n    }\n  );\n}\n"],"names":["bus","xBus"],"mappings":";;;;;;AAqBA;;;;;;;;;;AAUG;SACa,OAAO,GAAA;IACrB,MAAM,gBAAgB,GAAG,MAAM,CAAyC,UAAU,EAAE,MAAM,CAAC,CAAC;AAE5F,IAAA,MAAM,SAAS,GAAG,kBAAkB,EAAE,EAAE,KAAoC,CAAC;IAC7E,MAAM,UAAU,GAAG,iBAAiB,CAAC,SAAS,IAAI,IAAI,CAAC,CAAC;IACxD,IAAI,SAAS,IAAI,UAAU,EAAE;AAC3B,QAAA,SAAS,CAAC,UAAU,GAAG,UAAU,CAAC;AACnC,KAAA;AAED,IAAA,IAAIA,KAAqC,CAAC;IAC1C,IAAI;AACF,QAAAA,KAAG,GAAG,OAAO,CAAC,GAAG,CAAC;AACnB,KAAA;AAAC,IAAA,OAAO,KAAK,EAAE;QACdA,KAAG,GAAGC,GAAI,CAAC;AACZ,KAAA;AAED,IAAA,MAAM,YAAY,GAAG,IAAI,YAAY,EAAE,CAAC;IACxC,eAAe,CAAC,MAAK;QACnB,YAAY,CAAC,WAAW,EAAE,CAAC;AAC7B,KAAC,CAAC,CAAC;IAEH,OAAO;AACL,QAAA,EAAE,EAAE,CAAiD,KAAY,EAAE,YAAsB,KAAI;YAE3F,MAAM,UAAU,GAAGD,KAAG,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;YAE/C,OAAO;gBACL,SAAS,EAAE,CACT,QAES;;;qBAGN,YAAY,CAAC,GAAG,CAAC,UAAU,CAAC,SAAS,CAAC,QAAe,CAAC,CAAC;aAC7D,CAAC;SACH;QACD,IAAI,EAAE,CACJ,KAAY,EACZ,OAA8B,EAC9B,QAAA,GAA6C,EAAE,KAC7C;AACF,YAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,gBAAgB,CAAC,GAAG,gBAAgB,CAAC,KAAK,GAAG,gBAAgB,CAAC;YAErF,UAAU,EAAE,KAAK,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AAClC,YAAA,OAAOA,KAAG,CAAC,IAAI,CAAC,KAAK,EAAE,OAAQ,EAAE,kBAAkB,CAAC,QAAQ,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;SACrF;KACF,CAAC;AACJ,CAAC;AAED;;;;;;;;AAQG;AACH,SAAS,kBAAkB,CACzB,QAA+B,EAC/B,SAAuC,EACvC,QAA0B,EAAA;IAE1B,OAAO,MAAM,CAAC,gBAAgB,CAC5B;AACE,QAAA,WAAW,EAAE,IAAI;AACjB,QAAA,UAAU,EAAE,SAAS,GAAG,wBAAwB,CAAC,SAAS,CAAC,UAAU,CAAC,GAAG,IAAI;QAC7E,QAAQ;AACR,QAAA,GAAG,QAAQ;KACZ,EACD;AACE,QAAA,SAAS,EAAE;AACT,YAAA,KAAK,EAAE,SAAS;AAChB;AACqD;AACrD,YAAA,UAAU,EAAE,KAAK;AAClB,SAAA;AACF,KAAA,CACF,CAAC;AACJ;;;;"}

package/js/directives/{infinite-scroll/infinite-scroll.js → infinite-scroll.js}

@@ -1,9 +1,37 @@
+import '@vue/devtools-api';
+import '../plugins/devtools/timeline.devtools.js';
+import '@empathyco/x-utils';
+import 'rxjs/operators';
+import 'rxjs';
+import '../plugins/devtools/colors.utils.js';
+import '../plugins/x-bus.js';
+import { XPlugin } from '../plugins/x-plugin.js';
+
 const VIEWPORT_ID = 'viewport';
 /**
- * A record which contains {@link IntersectionObserver} objects indexed by the id of the scrollable
+ * A record which contains {@link IntersectionObserver} objects indexed by the ID of the scrollable
  * container.
  */
 const state = {};
+/**
+ * Retrieves the root element for the provided ID.
+ *
+ * @param element - Target element where directive is set.
+ * @param id - String identifier.
+ * @returns HTMLElement or null.
+ */
+function getRoot(element, id) {
+    switch (id) {
+        case 'html':
+            return null;
+        case 'body':
+            return document.body;
+        case VIEWPORT_ID:
+            return null;
+        default:
+            return element.closest(`#${id}`);
+    }
+}
 /**
  * Custom Vue directive for infinite scroll.
  *
@@ -13,10 +41,9 @@ const state = {};
  *
  * How it works.
  *
- * As a summary, if the scroll reaches the end, the `vNode.context.onInfiniteScrollEnd` function
- * implemented by the component which imports the directive, is executed. If you provide a margin in
- * the directive options, this function is triggered when the scroll reaches the end minus that
- * amount of pixels. A default margin of 200px is set.
+ * As a summary, if the scroll reaches the end, `UserReachedResultsListEnd` event is emitted to the
+ * xBus. If you provide a margin in the directive options, this function is triggered when the
+ * scroll reaches the end minus that amount of pixels. A default margin of 200px is set.
  *
  * Usage.
  *
@@ -51,64 +78,32 @@ const state = {};
  * @public
  */
 const infiniteScroll = {
-    inserted(element, { arg: id = VIEWPORT_ID, value: { margin = 200 } = {} }, vNode) {
+    mounted(element, { arg: id = VIEWPORT_ID, value: { margin = 200 } = {} }) {
+        /*
+         * This hack allows the root element to always contain the observed element.
+         * Not overpass the top margin more than 1700000 because it doesn't work in Android chrome
+         */
+        const rootMargin = `1000000% 0px ${margin}px 0px`;
         const root = getRoot(element, id);
-        state[id] = createIntersectionObserver({
-            root,
-            margin,
-            vNode
+        const xBus = XPlugin.bus;
+        state[id] = new IntersectionObserver(([entry]) => {
+            if (entry.isIntersecting) {
+                xBus.emit('UserReachedResultsListEnd');
+            }
+        }, {
+            threshold: 0.99,
+            rootMargin,
+            root
         });
         state[id].observe(element);
     },
-    unbind(_element, { arg: id = VIEWPORT_ID }) {
+    unmounted(_, { arg: id = VIEWPORT_ID }) {
         if (state[id]) {
             state[id].disconnect();
             delete state[id];
         }
     }
-};
-/**
- * Retrieves the root element for the provided id.
- *
- * @param element - Target element where directive is set.
- * @param id - String identifier.
- * @returns HTMLElement or null.
- */
-function getRoot(element, id) {
-    switch (id) {
-        case 'html':
-            return null;
-        case 'body':
-            return document.body;
-        case VIEWPORT_ID:
-            return null;
-        default:
-            return element.closest(`#${id}`);
-    }
-}
-/**
- * Creates an IntersectionObserver.
- *
- * When the observer is fired, it will execute the {@link InfiniteScroll.onInfiniteScrollEnd}
- * function implemented in the provided vNode component instance.
- *
- * @param options - ObserverOptions.
- * @returns IntersectionObserver.
- */
-function createIntersectionObserver({ root, margin, vNode }) {
-    // This hack allows the root element to always contain the observed element.
-    // Not overpass the top margin more than 1700000 because it doesn't work in Android chrome
-    const rootMargin = `1000000% 0px ${margin}px 0px`;
-    return new IntersectionObserver(([entry]) => {
-        if (entry.isIntersecting) {
-            vNode.componentInstance?.onInfiniteScrollEnd();
-        }
-    }, {
-        threshold: 0.99,
-        rootMargin,
-        root
-    });
-}
+};
 
 export { infiniteScroll };
 //# sourceMappingURL=infinite-scroll.js.map

package/js/directives/infinite-scroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"infinite-scroll.js","sources":["../../../src/directives/infinite-scroll.ts"],"sourcesContent":["import { Directive } from 'vue';\nimport { XPlugin } from '../plugins';\n\nconst VIEWPORT_ID = 'viewport';\n\n/**\n * A record which contains {@link IntersectionObserver} objects indexed by the ID of the scrollable\n * container.\n */\nconst state: Record<string, IntersectionObserver> = {};\n\n/**\n * Retrieves the root element for the provided ID.\n *\n * @param element - Target element where directive is set.\n * @param id - String identifier.\n * @returns HTMLElement or null.\n */\nfunction getRoot(element: HTMLElement, id: string): HTMLElement | null {\n  switch (id) {\n    case 'html':\n      return null;\n    case 'body':\n      return document.body;\n    case VIEWPORT_ID:\n      return null;\n    default:\n      return element.closest(`#${id}`)!;\n  }\n}\n\n/**\n * Custom Vue directive for infinite scroll.\n *\n * This directive uses the IntersectionObserver API to handle the intersection between the\n * children and the scrollable container. The content of the children moves up on scroll and when it\n * reaches the end, the IntersectionObserver triggers that both elements are intersecting.\n *\n * How it works.\n *\n * As a summary, if the scroll reaches the end, `UserReachedResultsListEnd` event is emitted to the\n * xBus. If you provide a margin in the directive options, this function is triggered when the\n * scroll reaches the end minus that amount of pixels. A default margin of 200px is set.\n *\n * Usage.\n *\n * The directive has to be set in the target element. It can receive an argument which will be used\n * to determine the scrollable container. Possible values:\n * `html`: will set the <html> as the scrollable container.\n * `body`: will set the <body> as the scrollable container.\n * ID: will set the DOM element with the provided id as the scrollable container.\n *\n * If no argument is provided the scrollable container fallbacks to the viewport.\n *\n * @example How to use it.\n *\n * ```html\n *  <ResultsList v-infinite-scroll:html>\n * ```\n *\n * ```html\n *  <ResultsList v-infinite-scroll:body>\n * ```\n *\n * ```html\n *  <BaseScroll id='scroll-test'>\n *    <ResultsList v-infinite-scroll:scroll-test>\n *  </BaseScroll>\n * ```\n *\n * ```html\n *  <ResultsList v-infinite-scroll=\"{ margin: 40 }\">\n * ```\n *\n * @public\n */\nexport const infiniteScroll: Directive<HTMLElement, { margin: number }> = {\n  mounted(element, { arg: id = VIEWPORT_ID, value: { margin = 200 } = {} }) {\n    /*\n     * This hack allows the root element to always contain the observed element.\n     * Not overpass the top margin more than 1700000 because it doesn't work in Android chrome\n     */\n    const rootMargin = `1000000% 0px ${margin}px 0px`;\n    const root = getRoot(element, id);\n    const xBus = XPlugin.bus;\n\n    state[id] = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting) {\n          xBus.emit('UserReachedResultsListEnd');\n        }\n      },\n      {\n        threshold: 0.99,\n        rootMargin,\n        root\n      }\n    );\n\n    state[id].observe(element);\n  },\n  unmounted(_, { arg: id = VIEWPORT_ID }) {\n    if (state[id]) {\n      state[id].disconnect();\n      delete state[id];\n    }\n  }\n};\n"],"names":[],"mappings":";;;;;;;;;AAGA,MAAM,WAAW,GAAG,UAAU,CAAC;AAE/B;;;AAGG;AACH,MAAM,KAAK,GAAyC,EAAE,CAAC;AAEvD;;;;;;AAMG;AACH,SAAS,OAAO,CAAC,OAAoB,EAAE,EAAU,EAAA;AAC/C,IAAA,QAAQ,EAAE;AACR,QAAA,KAAK,MAAM;AACT,YAAA,OAAO,IAAI,CAAC;AACd,QAAA,KAAK,MAAM;YACT,OAAO,QAAQ,CAAC,IAAI,CAAC;AACvB,QAAA,KAAK,WAAW;AACd,YAAA,OAAO,IAAI,CAAC;AACd,QAAA;YACE,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,CAAA,CAAE,CAAE,CAAC;AACrC,KAAA;AACH,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CG;AACU,MAAA,cAAc,GAA+C;AACxE,IAAA,OAAO,CAAC,OAAO,EAAE,EAAE,GAAG,EAAE,EAAE,GAAG,WAAW,EAAE,KAAK,EAAE,EAAE,MAAM,GAAG,GAAG,EAAE,GAAG,EAAE,EAAE,EAAA;AACtE;;;AAGG;AACH,QAAA,MAAM,UAAU,GAAG,CAAgB,aAAA,EAAA,MAAM,QAAQ,CAAC;QAClD,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;AAClC,QAAA,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC;AAEzB,QAAA,KAAK,CAAC,EAAE,CAAC,GAAG,IAAI,oBAAoB,CAClC,CAAC,CAAC,KAAK,CAAC,KAAI;YACV,IAAI,KAAK,CAAC,cAAc,EAAE;AACxB,gBAAA,IAAI,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC;AACxC,aAAA;AACH,SAAC,EACD;AACE,YAAA,SAAS,EAAE,IAAI;YACf,UAAU;YACV,IAAI;AACL,SAAA,CACF,CAAC;QAEF,KAAK,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;KAC5B;IACD,SAAS,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,GAAG,WAAW,EAAE,EAAA;AACpC,QAAA,IAAI,KAAK,CAAC,EAAE,CAAC,EAAE;AACb,YAAA,KAAK,CAAC,EAAE,CAAC,CAAC,UAAU,EAAE,CAAC;AACvB,YAAA,OAAO,KAAK,CAAC,EAAE,CAAC,CAAC;AAClB,SAAA;KACF;;;;;"}

package/js/index.js

@@ -4,14 +4,14 @@ export { default as CollapseWidth } from './components/animations/collapse-width
 export { default as CrossFade } from './components/animations/cross-fade.vue.js';
 export { default as Fade } from './components/animations/fade.vue.js';
 export { default as FadeAndSlide } from './components/animations/fade-and-slide.vue.js';
+export { default as NoAnimation } from './components/animations/no-animation.vue.js';
 export { default as StaggeredFadeAndSlide } from './components/animations/staggered-fade-and-slide.vue.js';
-export { default as StaggeringTransitionGroup } from './components/animations/staggering-transition-group.vue.js';
-export { createCollapseAnimationMixin } from './components/animations/animations.mixin.js';
-export { default as DisableAnimationMixin } from './components/animations/disable-animation.mixin.js';
 export { createDirectionalAnimationFactory } from './components/animations/create-directional-animation-factory.js';
 export { animateClipPath } from './components/animations/animate-clip-path/animate-clip-path.factory.js';
 export { animateScale } from './components/animations/animate-scale/animate-scale.factory.js';
 export { animateTranslate } from './components/animations/animate-translate/animate-translate.factory.js';
+export { useCollapseAnimation } from './components/animations/use-collapse-animation.js';
+export { useDisableAnimation } from './components/animations/use-disable-animation.js';
 export { default as BaseColumnPickerDropdown } from './components/column-picker/base-column-picker-dropdown.vue.js';
 export { default as BaseColumnPickerList } from './components/column-picker/base-column-picker-list.vue.js';
 export { default as BaseCurrency } from './components/currency/base-currency.vue.js';
@@ -119,7 +119,7 @@ export { default as BaseResultRating } from './components/result/base-result-rat
 export { default as ResultVariantsProvider } from './components/result/result-variants-provider.vue.js';
 export { default as ResultVariantSelector } from './components/result/result-variant-selector.vue.js';
 export { default as BaseScroll } from './components/scroll/base-scroll.vue.js';
-export { default as ScrollMixin } from './components/scroll/scroll.mixin.js';
+export { useScroll } from './components/scroll/use-scroll.js';
 export { default as BaseSuggestion } from './components/suggestions/base-suggestion.vue.js';
 export { default as BaseSuggestions } from './components/suggestions/base-suggestions.vue.js';
 export { default as AutoProgressBar } from './components/auto-progress-bar.vue.js';
@@ -135,32 +135,24 @@ export { default as GlobalXBus } from './components/global-x-bus.vue.js';
 export { default as Highlight } from './components/highlight.vue.js';
 export { default as ItemsList } from './components/items-list.vue.js';
 export { default as LocationProvider } from './components/location-provider.vue.js';
-export { NoElement } from './components/no-element.js';
 export { default as SlidingPanel } from './components/sliding-panel.vue.js';
 export { default as SnippetCallbacks } from './components/snippet-callbacks.vue.js';
 export { default as PageLoaderButton } from './components/page-loader-button.vue.js';
-export { XEmit, XOn } from './components/decorators/bus.decorators.js';
-export { Debounce } from './components/decorators/debounce.decorators.js';
 export { DISABLE_ANIMATIONS_KEY, HAS_MORE_ITEMS_KEY, LIST_ITEMS_KEY, QUERY_KEY, RESULT_WITH_VARIANTS_KEY, SELECTED_VARIANTS_KEY, SELECT_RESULT_VARIANT_KEY } from './components/decorators/injection.consts.js';
-export { XInject, XProvide } from './components/decorators/injection.decorators.js';
-export { Getter, State } from './components/decorators/store.decorators.js';
-export { xComponentMixin } from './components/x-component.mixin.js';
 export { getRootXComponent, getXComponentXModuleName, isXComponent } from './components/x-component.utils.js';
-export { createUseDevice } from './composables/create-use-device.composable.js';
-export { useNoElementRender } from './composables/use-no-element-render.js';
+export { createUseDevice } from './composables/create-use-device.js';
 export { use$x } from './composables/use-_x.js';
-export { useRegisterXModule } from './composables/use-register-x-module.js';
+export { useAliasApi } from './composables/use-alias-api.js';
+export { useDebounce } from './composables/use-debounce.js';
+export { useGetter } from './composables/use-getter.js';
 export { useEmitDisplayEvent, useOnDisplay } from './composables/use-on-display.js';
-export { useStore } from './composables/use-store.js';
 export { useState } from './composables/use-state.js';
-export { useGetter } from './composables/use-getter.js';
-export { useAliasApi } from './composables/use-alias-api.js';
-export { infiniteScroll } from './directives/infinite-scroll/infinite-scroll.js';
+export { useStore } from './composables/use-store.js';
+export { useXBus } from './composables/use-x-bus.js';
+export { infiniteScroll } from './directives/infinite-scroll.js';
 export { setupDevtools } from './plugins/devtools/devtools.plugin.js';
 export { bus } from './plugins/x-bus.js';
 export { isSimpleSelector, registerStoreEmitters } from './plugins/x-emitters.js';
-export { getAliasAPI } from './plugins/x-plugin.alias.js';
-export { createXComponentAPIMixin, getBusAPI } from './plugins/x-plugin.mixin.js';
 export { XPlugin, xPlugin } from './plugins/x-plugin.js';
 export { assertXPluginOptionsAreValid, getGetterPath } from './plugins/x-plugin.utils.js';
 export { DirectionalFocusNavigationService } from './services/directional-focus-navigation.service.js';
@@ -178,7 +170,7 @@ export { areFiltersDifferent, createRawFilters } from './utils/filters.js';
 export { FOCUSABLE_SELECTORS } from './utils/focus.js';
 export { noOp } from './utils/function.js';
 export { getURLParameter } from './utils/get-url-parameters.js';
-export { getTargetElement, isElementEqualOrContained } from './utils/html.js';
+export { getActiveElement, getTargetElement, isElementEqualOrContained } from './utils/html.js';
 export { SPLIT_WORDS_REGEX, isNewQuery } from './utils/is-new-query.js';
 export { normalizeString } from './utils/normalize.js';
 export { isInRange } from './utils/number.js';
@@ -238,7 +230,6 @@ export { default as RenderlessFilter } from './x-modules/facets/components/filte
 export { default as SimpleFilter } from './x-modules/facets/components/filters/simple-filter.vue.js';
 export { default as PreselectedFilters } from './x-modules/facets/components/preselected-filters.vue.js';
 export { default as ExcludeFiltersWithNoResults } from './x-modules/facets/components/lists/exclude-filters-with-no-results.vue.js';
-export { default as FiltersInjectionMixin } from './x-modules/facets/components/lists/filters-injection.mixin.js';
 export { default as FiltersList } from './x-modules/facets/components/lists/filters-list.vue.js';
 export { default as FiltersSearch } from './x-modules/facets/components/lists/filters-search.vue.js';
 export { default as SelectedFilters } from './x-modules/facets/components/lists/selected-filters.vue.js';
@@ -246,8 +237,9 @@ export { default as SelectedFiltersList } from './x-modules/facets/components/li
 export { default as SlicedFilters } from './x-modules/facets/components/lists/sliced-filters.vue.js';
 export { default as SortedFilters } from './x-modules/facets/components/lists/sorted-filters.vue.js';
 export { default as ClearFilters } from './x-modules/facets/components/clear-filters.vue.js';
+export { useFacets } from './x-modules/facets/composables/use-facets.js';
+export { useFiltersInjection } from './x-modules/facets/composables/use-filters-injection.js';
 export { flatHierarchicalFilters } from './x-modules/facets/utils.js';
-export { default as FacetsMixin } from './x-modules/facets/components/facets.mixin.js';
 export { default as ClearHistoryQueries } from './x-modules/history-queries/components/clear-history-queries.vue.js';
 export { default as HistoryQueries } from './x-modules/history-queries/components/history-queries.vue.js';
 export { default as HistoryQueriesSwitch } from './x-modules/history-queries/components/history-queries-switch.vue.js';
@@ -322,7 +314,7 @@ export { request as querySuggestionsRequest } from './x-modules/query-suggestion
 export { normalizedQuery } from './x-modules/query-suggestions/store/getters/normalized-query.getter.js';
 export { QuerySuggestionsGetter, querySuggestions } from './x-modules/query-suggestions/store/getters/query-suggestions.getter.js';
 export { querySuggestionsXStoreModule } from './x-modules/query-suggestions/store/module.js';
-export { cancelFetchAndSaveSuggestionsWire, clearQuerySuggestionsQuery, fetchAndSaveSuggestionsWire, querySuggestionsWiring, setQuerySuggestionsExtraParams, setQuerySuggestionsExtraParamsFromPreview, setQuerySuggestionsQuery, setQuerySuggestionsQueryFromPreview } from './x-modules/query-suggestions/wiring.js';
+export { cancelFetchAndSaveSuggestionsWire, clearQuerySuggestionsQuery, fetchAndSaveSuggestionsWire, querySuggestionsWiring, setQuerySuggestionsExtraParams, setQuerySuggestionsExtraParamsFromPreview, setQuerySuggestionsQuery, setQuerySuggestionsQueryFromPreview, setSearchedQueriesInSuggestions } from './x-modules/query-suggestions/wiring.js';
 export { querySuggestionsXModule } from './x-modules/query-suggestions/x-module.js';
 export { default as Recommendations } from './x-modules/recommendations/components/recommendations.vue.js';
 export { cancelFetchAndSaveRecommendations, fetchAndSaveRecommendations } from './x-modules/recommendations/store/actions/fetch-and-save-recommendations.action.js';
@@ -347,7 +339,6 @@ export { cancelFetchAndSaveRelatedTagsWire, clearRelatedTagsQuery, clearSelected
 export { relatedTagsXModule } from './x-modules/related-tags/x-module.js';
 export { default as Scroll } from './x-modules/scroll/components/scroll.vue.js';
 export { default as ScrollToTop } from './x-modules/scroll/components/scroll-to-top.vue.js';
-export { default as WindowScroll } from './x-modules/scroll/components/window-scroll.vue.js';
 export { default as MainScrollItem } from './x-modules/scroll/components/main-scroll-item.vue.js';
 export { default as MainScroll } from './x-modules/scroll/components/main-scroll.vue.js';
 export { MainScrollId, ScrollObserverKey } from './x-modules/scroll/components/scroll.const.js';
@@ -380,7 +371,7 @@ export { searchEmitters } from './x-modules/search/store/emitters.js';
 export { request as searchRequest } from './x-modules/search/store/getters/request.getter.js';
 export { query as searchQuery } from './x-modules/search/store/getters/query.getter.js';
 export { resettableState, searchXStoreModule } from './x-modules/search/store/module.js';
-export { cancelFetchAndSaveSearchResponseWire, clearSearchQuery, fetchAndSaveSearchResponseWire, increasePageAppendingResultsWire, resetAppending, resetFromNoResultsWithFilters, resetIsNoResults, resetRequestOnRefinementWire, resetSpellcheckQuery, resetStateIfNoRequestWire, saveOriginWire, searchWiring, setRelatedTags, setSearchExtraParams, setSearchExtraParamsFromPreview, setSearchPage, setSearchQuery, setSearchQueryFromPreview, setSearchSelectedFiltersFromHistoryQuery, setSearchSelectedFiltersFromPreview, setSelectedFilters, setSort, setUrlParams } from './x-modules/search/wiring.js';
+export { cancelFetchAndSaveSearchResponseWire, clearSearchQuery, fetchAndSaveSearchResponseWire, increasePageAppendingResultsWire, resetAppending, resetFromNoResultsWithFilters, resetIsNoResults, resetRequestOnRefinementWire, resetSpellcheckQuery, resetStateForReloadWire, resetStateIfNoRequestWire, saveOriginWire, searchWiring, setRelatedTags, setSearchExtraParams, setSearchExtraParamsFromPreview, setSearchPage, setSearchQuery, setSearchQueryFromPreview, setSearchSelectedFiltersFromHistoryQuery, setSearchSelectedFiltersFromPreview, setSelectedFilters, setSort, setUrlParams } from './x-modules/search/wiring.js';
 export { searchXModule } from './x-modules/search/x-module.js';
 export { default as ClearSearchInput } from './x-modules/search-box/components/clear-search-input.vue.js';
 export { default as SearchButton } from './x-modules/search-box/components/search-button.vue.js';

package/js/index.js.map

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

package/js/plugins/devtools/devtools.plugin.js

@@ -8,7 +8,7 @@ import { setupWiringDevtools } from './wiring.devtools.js';
  * inspected.
  * - Wiring inspector. Events and its wires can be viewed and disabled.
  *
- * @param app - The Vue application the devtools should track.
+ * @param app - The Vue application instance the devtools should track.
  * @beta
  */
 function setupDevtools(app) {
@@ -18,7 +18,7 @@ function setupDevtools(app) {
         packageName: '@empathyco/x-components',
         homepage: 'https://empathy.co',
         enableEarlyProxy: true,
-        app: app // FIXME: Infinite loop with types when inferred as a Vue2 app.
+        app
     }, api => {
         if (api) {
             setupTimelinePlugin(api);

package/js/plugins/devtools/devtools.plugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"devtools.plugin.js","sources":["../../../../src/plugins/devtools/devtools.plugin.ts"],"sourcesContent":["import { setupDevtoolsPlugin, App } from '@vue/devtools-api';\nimport Vue from 'vue';\nimport { setupTimelinePlugin } from './timeline.devtools';\nimport { setupWiringDevtools } from './wiring.devtools';\n\n/**\n * Setups a plugin for the Vue's devtools adding:\n * - {@link XEvent}s timeline. Every event is recorded in time, and its payload and metadata can be\n * inspected.\n * - Wiring inspector. Events and its wires can be viewed and disabled.\n *\n * @param app - The Vue application the devtools should track.\n * @beta\n */\nexport function setupDevtools(app: Vue): void {\n  setupDevtoolsPlugin(\n    {\n      id: 'x-components-devtools-plugin',\n      label: 'X Components',\n      packageName: '@empathyco/x-components',\n      homepage: 'https://empathy.co',\n      enableEarlyProxy: true,\n      app: app as App // FIXME: Infinite loop with types when inferred as a Vue2 app.\n    },\n    api => {\n      if (api) {\n        setupTimelinePlugin(api);\n        setupWiringDevtools(api);\n      }\n    }\n  );\n}\n"],"names":[],"mappings":";;;;AAKA;;;;;;;;AAQG;AACG,SAAU,aAAa,CAAC,GAAQ,EAAA;AACpC,IAAA,mBAAmB,CACjB;AACE,QAAA,EAAE,EAAE,8BAA8B;AAClC,QAAA,KAAK,EAAE,cAAc;AACrB,QAAA,WAAW,EAAE,yBAAyB;AACtC,QAAA,QAAQ,EAAE,oBAAoB;AAC9B,QAAA,gBAAgB,EAAE,IAAI;QACtB,GAAG,EAAE,GAAU;KAChB,EACD,GAAG,IAAG;AACJ,QAAA,IAAI,GAAG,EAAE;YACP,mBAAmB,CAAC,GAAG,CAAC,CAAC;YACzB,mBAAmB,CAAC,GAAG,CAAC,CAAC;AAC1B,SAAA;AACH,KAAC,CACF,CAAC;AACJ;;;;"}
+{"version":3,"file":"devtools.plugin.js","sources":["../../../../src/plugins/devtools/devtools.plugin.ts"],"sourcesContent":["import { setupDevtoolsPlugin, App } from '@vue/devtools-api';\nimport { setupTimelinePlugin } from './timeline.devtools';\nimport { setupWiringDevtools } from './wiring.devtools';\n\n/**\n * Setups a plugin for the Vue's devtools adding:\n * - {@link XEvent}s timeline. Every event is recorded in time, and its payload and metadata can be\n * inspected.\n * - Wiring inspector. Events and its wires can be viewed and disabled.\n *\n * @param app - The Vue application instance the devtools should track.\n * @beta\n */\nexport function setupDevtools(app: App): void {\n  setupDevtoolsPlugin(\n    {\n      id: 'x-components-devtools-plugin',\n      label: 'X Components',\n      packageName: '@empathyco/x-components',\n      homepage: 'https://empathy.co',\n      enableEarlyProxy: true,\n      app\n    },\n    api => {\n      if (api) {\n        setupTimelinePlugin(api);\n        setupWiringDevtools(api);\n      }\n    }\n  );\n}\n"],"names":[],"mappings":";;;;AAIA;;;;;;;;AAQG;AACG,SAAU,aAAa,CAAC,GAAQ,EAAA;AACpC,IAAA,mBAAmB,CACjB;AACE,QAAA,EAAE,EAAE,8BAA8B;AAClC,QAAA,KAAK,EAAE,cAAc;AACrB,QAAA,WAAW,EAAE,yBAAyB;AACtC,QAAA,QAAQ,EAAE,oBAAoB;AAC9B,QAAA,gBAAgB,EAAE,IAAI;QACtB,GAAG;KACJ,EACD,GAAG,IAAG;AACJ,QAAA,IAAI,GAAG,EAAE;YACP,mBAAmB,CAAC,GAAG,CAAC,CAAC;YACzB,mBAAmB,CAAC,GAAG,CAAC,CAAC;AAC1B,SAAA;AACH,KAAC,CACF,CAAC;AACJ;;;;"}

package/js/plugins/x-emitters.js.map

@@ -1 +1 @@
-{"version":3,"file":"x-emitters.js","sources":["../../../src/plugins/x-emitters.ts"],"sourcesContent":["import { XBus } from '@empathyco/x-bus';\nimport { forEach } from '@empathyco/x-utils';\nimport { Store } from 'vuex';\nimport { getGettersProxyFromModule } from '../store/utils/getters-proxy.utils';\nimport { AnySimpleStateSelector, AnyStateSelector } from '../store/utils/store-emitters.utils';\nimport { XEventPayload, XEventsTypes } from '../wiring/events.types';\nimport { WireMetadata } from '../wiring/wiring.types';\nimport { AnyXModule } from '../x-modules/x-modules.types';\n\n/**\n * Registers the store emitters, making them emit the event when the part of the state selected\n * changes.\n *\n * @param xModule - The {@link XModule} to register its Store Emitters.\n * @param bus - The {@link @empathyco/x-bus#XBus} to emit the events by the Emitters.\n * @param store - The Vuex store to access to state and getters to watch them.\n *\n * @internal\n */\nexport function registerStoreEmitters(\n  { name, storeEmitters, storeModule }: AnyXModule,\n  bus: XBus<XEventsTypes, WireMetadata>,\n  store: Store<any>\n): void {\n  const safeGettersProxy = getGettersProxyFromModule(store.getters, name, storeModule);\n  forEach(storeEmitters, (event, stateSelector: AnySimpleStateSelector | AnyStateSelector) => {\n    const { selector, immediate, filter, metadata, ...options } =\n      normalizeStateSelector(stateSelector);\n\n    const watcherSelector = (): XEventPayload<typeof event> =>\n      selector(store.state.x[name], safeGettersProxy);\n    const emit: (\n      newValue: XEventPayload<typeof event>,\n      oldValue?: XEventPayload<typeof event>\n    ) => void = (newValue, oldValue) => {\n      if (filter(newValue, oldValue, store.state.x[name])) {\n        bus.emit(event, newValue, { ...metadata, moduleName: name, oldValue });\n      }\n    };\n\n    store.watch(watcherSelector, emit, options);\n\n    if (immediate) {\n      emit(watcherSelector());\n    }\n  });\n}\n\n/**\n * Transforms a {@link AnySimpleStateSelector} into a {@link AnyStateSelector}, and sets\n * default values for its properties.\n *\n * @param stateSelector - The state selector to normalize.\n * @returns A {@link AnyStateSelector} with all the properties set.\n *\n * @internal\n */\nfunction normalizeStateSelector(\n  stateSelector: AnySimpleStateSelector | AnyStateSelector\n): Required<AnyStateSelector> {\n  const selectorOptions = isSimpleSelector(stateSelector)\n    ? { selector: stateSelector }\n    : stateSelector;\n\n  return {\n    deep: false,\n    immediate: false,\n    filter: () => true,\n    metadata: {\n      replaceable: true\n    },\n    ...selectorOptions\n  };\n}\n\n/**\n * Checks if the type of the store emitter selector is simple or complex. This selector can be\n * a function if it is simple or an object with the selector and other options if it is complex.\n *\n * @param stateSelector - The store emitter selector.\n * @returns A boolean which flags if the stateSelector is simple (function) or complex (object).\n *\n * @internal\n */\nexport function isSimpleSelector(\n  stateSelector: AnySimpleStateSelector | AnyStateSelector\n): stateSelector is AnySimpleStateSelector {\n  return typeof stateSelector === 'function';\n}\n"],"names":[],"mappings":";;;AASA;;;;;;;;;AASG;AACa,SAAA,qBAAqB,CACnC,EAAE,IAAI,EAAE,aAAa,EAAE,WAAW,EAAc,EAChD,GAAqC,EACrC,KAAiB,EAAA;AAEjB,IAAA,MAAM,gBAAgB,GAAG,yBAAyB,CAAC,KAAK,CAAC,OAAO,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC;IACrF,OAAO,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,aAAwD,KAAI;AACzF,QAAA,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,EAAE,GACzD,sBAAsB,CAAC,aAAa,CAAC,CAAC;AAExC,QAAA,MAAM,eAAe,GAAG,MACtB,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,gBAAgB,CAAC,CAAC;AAClD,QAAA,MAAM,IAAI,GAGE,CAAC,QAAQ,EAAE,QAAQ,KAAI;AACjC,YAAA,IAAI,MAAM,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE;AACnD,gBAAA,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,EAAE,GAAG,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;AACxE,aAAA;AACH,SAAC,CAAC;QAEF,KAAK,CAAC,KAAK,CAAC,eAAe,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC;AAE5C,QAAA,IAAI,SAAS,EAAE;AACb,YAAA,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC;AACzB,SAAA;AACH,KAAC,CAAC,CAAC;AACL,CAAC;AAED;;;;;;;;AAQG;AACH,SAAS,sBAAsB,CAC7B,aAAwD,EAAA;AAExD,IAAA,MAAM,eAAe,GAAG,gBAAgB,CAAC,aAAa,CAAC;AACrD,UAAE,EAAE,QAAQ,EAAE,aAAa,EAAE;UAC3B,aAAa,CAAC;IAElB,OAAO;AACL,QAAA,IAAI,EAAE,KAAK;AACX,QAAA,SAAS,EAAE,KAAK;AAChB,QAAA,MAAM,EAAE,MAAM,IAAI;AAClB,QAAA,QAAQ,EAAE;AACR,YAAA,WAAW,EAAE,IAAI;AAClB,SAAA;AACD,QAAA,GAAG,eAAe;KACnB,CAAC;AACJ,CAAC;AAED;;;;;;;;AAQG;AACG,SAAU,gBAAgB,CAC9B,aAAwD,EAAA;AAExD,IAAA,OAAO,OAAO,aAAa,KAAK,UAAU,CAAC;AAC7C;;;;"}
+{"version":3,"file":"x-emitters.js","sources":["../../../src/plugins/x-emitters.ts"],"sourcesContent":["import { XBus } from '@empathyco/x-bus';\nimport { Dictionary, forEach } from '@empathyco/x-utils';\nimport { Store } from 'vuex';\nimport { getGettersProxyFromModule } from '../store/utils/getters-proxy.utils';\nimport { AnySimpleStateSelector, AnyStateSelector } from '../store/utils/store-emitters.utils';\nimport { XEventPayload, XEventsTypes } from '../wiring/events.types';\nimport { WireMetadata } from '../wiring/wiring.types';\nimport { AnyXModule } from '../x-modules/x-modules.types';\n\n/**\n * Registers the store emitters, making them emit the event when the part of the state selected\n * changes.\n *\n * @param xModule - The {@link XModule} to register its Store Emitters.\n * @param bus - The {@link @empathyco/x-bus#XBus} to emit the events by the Emitters.\n * @param store - The Vuex store to access to state and getters to watch them.\n *\n * @internal\n */\nexport function registerStoreEmitters(\n  { name, storeEmitters, storeModule }: AnyXModule,\n  bus: XBus<XEventsTypes, WireMetadata>,\n  store: Store<any>\n): void {\n  const safeGettersProxy = getGettersProxyFromModule(\n    store.getters as Dictionary,\n    name,\n    storeModule\n  );\n  forEach(storeEmitters, (event, stateSelector: AnySimpleStateSelector | AnyStateSelector) => {\n    const { selector, immediate, filter, metadata, ...options } =\n      normalizeStateSelector(stateSelector);\n\n    const watcherSelector = (): XEventPayload<typeof event> =>\n      selector(store.state.x[name], safeGettersProxy);\n    const emit: (\n      newValue: XEventPayload<typeof event>,\n      oldValue?: XEventPayload<typeof event>\n    ) => void = (newValue, oldValue) => {\n      if (filter(newValue, oldValue, store.state.x[name])) {\n        bus.emit(event, newValue, { ...metadata, moduleName: name, oldValue });\n      }\n    };\n\n    store.watch(watcherSelector, emit, options);\n\n    if (immediate) {\n      emit(watcherSelector());\n    }\n  });\n}\n\n/**\n * Transforms a {@link AnySimpleStateSelector} into a {@link AnyStateSelector}, and sets\n * default values for its properties.\n *\n * @param stateSelector - The state selector to normalize.\n * @returns A {@link AnyStateSelector} with all the properties set.\n *\n * @internal\n */\nfunction normalizeStateSelector(stateSelector: AnySimpleStateSelector | AnyStateSelector) {\n  const selectorOptions = isSimpleSelector(stateSelector)\n    ? { selector: stateSelector }\n    : stateSelector;\n\n  return {\n    deep: false,\n    immediate: false,\n    filter: () => true,\n    metadata: {\n      replaceable: true\n    },\n    ...selectorOptions\n  };\n}\n\n/**\n * Checks if the type of the store emitter selector is simple or complex. This selector can be\n * a function if it is simple or an object with the selector and other options if it is complex.\n *\n * @param stateSelector - The store emitter selector.\n * @returns A boolean which flags if the stateSelector is simple (function) or complex (object).\n *\n * @internal\n */\nexport function isSimpleSelector(\n  stateSelector: AnySimpleStateSelector | AnyStateSelector\n): stateSelector is AnySimpleStateSelector {\n  return typeof stateSelector === 'function';\n}\n"],"names":[],"mappings":";;;AASA;;;;;;;;;AASG;AACa,SAAA,qBAAqB,CACnC,EAAE,IAAI,EAAE,aAAa,EAAE,WAAW,EAAc,EAChD,GAAqC,EACrC,KAAiB,EAAA;AAEjB,IAAA,MAAM,gBAAgB,GAAG,yBAAyB,CAChD,KAAK,CAAC,OAAqB,EAC3B,IAAI,EACJ,WAAW,CACZ,CAAC;IACF,OAAO,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,aAAwD,KAAI;AACzF,QAAA,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,EAAE,GACzD,sBAAsB,CAAC,aAAa,CAAC,CAAC;AAExC,QAAA,MAAM,eAAe,GAAG,MACtB,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,gBAAgB,CAAC,CAAC;AAClD,QAAA,MAAM,IAAI,GAGE,CAAC,QAAQ,EAAE,QAAQ,KAAI;AACjC,YAAA,IAAI,MAAM,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE;AACnD,gBAAA,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,EAAE,GAAG,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;AACxE,aAAA;AACH,SAAC,CAAC;QAEF,KAAK,CAAC,KAAK,CAAC,eAAe,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC;AAE5C,QAAA,IAAI,SAAS,EAAE;AACb,YAAA,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC;AACzB,SAAA;AACH,KAAC,CAAC,CAAC;AACL,CAAC;AAED;;;;;;;;AAQG;AACH,SAAS,sBAAsB,CAAC,aAAwD,EAAA;AACtF,IAAA,MAAM,eAAe,GAAG,gBAAgB,CAAC,aAAa,CAAC;AACrD,UAAE,EAAE,QAAQ,EAAE,aAAa,EAAE;UAC3B,aAAa,CAAC;IAElB,OAAO;AACL,QAAA,IAAI,EAAE,KAAK;AACX,QAAA,SAAS,EAAE,KAAK;AAChB,QAAA,MAAM,EAAE,MAAM,IAAI;AAClB,QAAA,QAAQ,EAAE;AACR,YAAA,WAAW,EAAE,IAAI;AAClB,SAAA;AACD,QAAA,GAAG,eAAe;KACnB,CAAC;AACJ,CAAC;AAED;;;;;;;;AAQG;AACG,SAAU,gBAAgB,CAC9B,aAAwD,EAAA;AAExD,IAAA,OAAO,OAAO,aAAa,KAAK,UAAU,CAAC;AAC7C;;;;"}