@empathyco/x-components 3.0.0-alpha.64 → 3.0.0-alpha.65

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-alpha.65](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.64...@empathyco/x-components@3.0.0-alpha.65) (2022-03-08)
+
+### Features
+
+- update typescript
+  ([73edca6](https://github.com/empathyco/x/commit/73edca61c1cea39d82a7ab94bc18c8bff94c138c)),
+  closes [EX-5367](https://searchbroker.atlassian.net/browse/EX-5367)
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 ## [3.0.0-alpha.64](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.63...@empathyco/x-components@3.0.0-alpha.64) (2022-03-03)
 
 ### Features

package/design-system/default-theme.css

@@ -47,6 +47,16 @@
 .x-badge-container {
   position: relative;
 }
+:root {
+  --x-color-background-badge-default: var(--x-color-base-neutral-10);
+  --x-color-text-badge-default: var(--x-color-base-neutral-100);
+  --x-color-border-badge-default: var(--x-color-base-neutral-10);
+  --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
+  --x-size-border-width-badge-default: 0;
+  --x-size-width-badge-default: 1.5em;
+  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
+  --x-size-font-badge-default: var(--x-size-font-base-xs);
+}
 :root {
   --x-color-background-button-default: var(--x-color-base-lead);
   --x-color-border-button-default: var(--x-color-background-button-default);
@@ -2217,16 +2227,6 @@
   --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
   --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
 }
-:root {
-  --x-color-background-badge-default: var(--x-color-base-neutral-10);
-  --x-color-text-badge-default: var(--x-color-base-neutral-100);
-  --x-color-border-badge-default: var(--x-color-base-neutral-10);
-  --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
-  --x-size-border-width-badge-default: 0;
-  --x-size-width-badge-default: 1.5em;
-  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
-  --x-size-font-badge-default: var(--x-size-font-base-xs);
-}
 :root {
   --x-string-align-items-suggestion-default: center;
   --x-color-text-suggestion-default: var(--x-color-text-default);
@@ -2854,6 +2854,19 @@
   --x-size-border-radius-base-pill: 99999px;
   --x-size-border-width-base: 1px;
 }
+:root {
+  --x-color-base-lead: #36515b;
+  --x-color-base-auxiliary: #667981;
+  --x-color-base-neutral-10: #1a1a1a;
+  --x-color-base-neutral-35: #595959;
+  --x-color-base-neutral-70: #b3b3b3;
+  --x-color-base-neutral-95: #f2f2f2;
+  --x-color-base-neutral-100: #ffffff;
+  --x-color-base-accent: #b90276;
+  --x-color-base-enable: #00705c;
+  --x-color-base-disable: #e11f26;
+  --x-color-base-transparent: transparent;
+}
 :root {
   --x-size-base-01: 2px;
   --x-size-base-02: 4px;
@@ -2889,17 +2902,4 @@
   --x-size-line-height-base-s: 16px;
   --x-size-line-height-base-m: 24px;
   --x-size-line-height-base-l: 32px;
-}
-:root {
-  --x-color-base-lead: #36515b;
-  --x-color-base-auxiliary: #667981;
-  --x-color-base-neutral-10: #1a1a1a;
-  --x-color-base-neutral-35: #595959;
-  --x-color-base-neutral-70: #b3b3b3;
-  --x-color-base-neutral-95: #f2f2f2;
-  --x-color-base-neutral-100: #ffffff;
-  --x-color-base-accent: #b90276;
-  --x-color-base-enable: #00705c;
-  --x-color-base-disable: #e11f26;
-  --x-color-base-transparent: transparent;
 }

package/design-system/full-theme.css

@@ -747,6 +747,18 @@
   --x-size-padding-bottom-facet-header-default: var(--x-size-padding-bottom-facet-header-card);
   --x-size-padding-left-facet-header-default: var(--x-size-padding-left-facet-header-card);
 }
+:root {
+  --x-size-border-radius-facet-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-facet-card: var(--x-size-border-radius-facet-card);
+  --x-size-border-radius-top-right-facet-card: var(--x-size-border-radius-facet-card);
+  --x-size-border-radius-bottom-right-facet-card: var(--x-size-border-radius-facet-card);
+  --x-size-border-radius-bottom-left-facet-card: var(--x-size-border-radius-facet-card);
+  --x-size-padding-facet-header-card: var(--x-size-base-03);
+  --x-size-padding-top-facet-header-card: var(--x-size-padding-facet-header-card);
+  --x-size-padding-right-facet-header-card: var(--x-size-padding-facet-header-card);
+  --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
+  --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
+}
 [dir="ltr"] .x-facet {
   border-right-width: var(--x-size-border-width-right-facet-default);
 }
@@ -836,18 +848,6 @@
 .x-facet > *:first-child .x-icon:last-child:not(:first-child), .x-facet__header .x-icon:last-child:not(:first-child) {
   margin-left: auto;
 }
-:root {
-  --x-size-border-radius-facet-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-left-facet-card: var(--x-size-border-radius-facet-card);
-  --x-size-border-radius-top-right-facet-card: var(--x-size-border-radius-facet-card);
-  --x-size-border-radius-bottom-right-facet-card: var(--x-size-border-radius-facet-card);
-  --x-size-border-radius-bottom-left-facet-card: var(--x-size-border-radius-facet-card);
-  --x-size-padding-facet-header-card: var(--x-size-base-03);
-  --x-size-padding-top-facet-header-card: var(--x-size-padding-facet-header-card);
-  --x-size-padding-right-facet-header-card: var(--x-size-padding-facet-header-card);
-  --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
-  --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
-}
 :root {
   --x-color-background-facet-default: transparent;
   --x-color-border-facet-default: var(--x-color-background-facet-default);

package/docs/API-reference/api/x-components.arraytoobject_1.md

@@ -9,7 +9,7 @@ Reduce an array of objects to an object which properties names are the value of
 <b>Signature:</b>
 
 ```typescript
-export declare function arrayToObject<ArrayType, KeyType extends string | number>(array: ArrayType[], key: PropsWithType<ArrayType, KeyType>): Record<string, ArrayType>;
+export declare function arrayToObject<ArrayType>(array: ArrayType[], key: PropsWithType<ArrayType, string | number>): Record<string, ArrayType>;
 ```
 
 ## Parameters
@@ -17,7 +17,7 @@ export declare function arrayToObject<ArrayType, KeyType extends string | number
 |  Parameter | Type | Description |
 |  --- | --- | --- |
 |  array | ArrayType\[\] | Array of objects that contains objects which have object\[key\] string as a property value. |
-|  key | [PropsWithType](./x-components.propswithtype.md)<!-- -->&lt;ArrayType, KeyType&gt; | Key used to access to each object\[key\] value, used for each property name in the new object. |
+|  key | [PropsWithType](./x-components.propswithtype.md)<!-- -->&lt;ArrayType, string \| number&gt; | Key used to access to each object\[key\] value, used for each property name in the new object. |
 
 <b>Returns:</b>
 

package/docs/API-reference/api/x-components.deepfilter.md

@@ -4,27 +4,29 @@
 
 ## deepFilter() function
 
-Filters an array with all elements that pass the test implemented by the provided filter function. It also does it recursively if the property accessed, whose name is the parameter childrenKey, to the current iteration in an array.
+Filters an array with all elements that pass the test implemented by the given filter function. If an item has another list of items in the `childrenKey` property it recursively filters that new list, adding it to the returned one.
 
 <b>Signature:</b>
 
 ```typescript
-export declare function deepFilter<ArrayType, Key extends PropsWithType<ArrayType, ArrayType[]>>(array: ArrayType[], filter: (item: ArrayType) => boolean, childrenKey: Key): ArrayType[];
+export declare function deepFilter<Item extends {
+    [key in Key]?: Item[];
+}, Key extends keyof Item>(array: Item[], condition: (item: Item) => boolean, childrenKey: Key): Item[];
 ```
 
 ## Parameters
 
 |  Parameter | Type | Description |
 |  --- | --- | --- |
-|  array | ArrayType\[\] | Array to be filtered. |
-|  filter | (item: ArrayType) =&gt; boolean | Predicate function to test each element of the array. It should return true to keep the element; or false otherwise. |
+|  array | Item\[\] | Array to be filtered. |
+|  condition | (item: Item) =&gt; boolean | Predicate function to test each element of the array. It should return <code>true</code> to keep the element; or <code>false</code> otherwise. |
 |  childrenKey | Key | Property name within the array used to perform a recursive call. |
 
 <b>Returns:</b>
 
-ArrayType\[\]
+Item\[\]
 
-A new array with the elements that pass the test, or an empty array if no one pass the test.
+A new array with the elements that pass the condition, or an empty array if no one pass the test.
 
 ## Example
 

package/docs/API-reference/api/x-components.deepflat.md

@@ -4,24 +4,26 @@
 
 ## deepFlat() function
 
-Flat an ArrayType\[\] recursively using the childrenKey passed as parameter to access to his nested child which is also ArrayType\[\].
+Flat an `Item[]` deeply using the given `childrenKey` to access to his children.
 
 <b>Signature:</b>
 
 ```typescript
-export declare function deepFlat<ArrayType, Key extends PropsWithType<ArrayType, ArrayType[] | undefined>>(array: ArrayType[], childrenKey: Key): ArrayType[];
+export declare function deepFlat<Item extends {
+    [key in Key]?: Item[];
+}, Key extends keyof Item>(array: Item[], childrenKey: Key): Item[];
 ```
 
 ## Parameters
 
 |  Parameter | Type | Description |
 |  --- | --- | --- |
-|  array | ArrayType\[\] | ArrayType\[\] which each ArrayType has a property childrenKey which value is also an ArrayType\[\]. |
-|  childrenKey | Key | Key used to access to each ArrayType\[childrenKey\] value which is also an ArrayType\[\]. |
+|  array | Item\[\] | The list of items to flat. Each item may have another list of items of the same type to flat. |
+|  childrenKey | Key | Property name where each of the items of the given array may have another list of items to be flattened. |
 
 <b>Returns:</b>
 
-ArrayType\[\]
+Item\[\]
 
-ArrayType\[\] with all the nested ArrayType, including the nested ones, at the same depth level.
+A flat list with all the found items.
 

package/docs/API-reference/api/x-components.md

@@ -154,8 +154,8 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [currencyFormatter(value, format)](./x-components.currencyformatter.md) | Format a value with a given format. |
 |  [debounce(wire, timeInMs, options)](./x-components.debounce.md) | Creates a debounced [Wire](./x-components.wire.md)<!-- -->. Being debounced means that it will only be executed after the time given by <code>timeInMs</code> has passed without invoking it. |
 |  [Debounce(debounceTimeInMs, debounceOptions)](./x-components.debounce.md) | Adds debounce to the method that the decorator is applied to. |
-|  [deepFilter(array, filter, childrenKey)](./x-components.deepfilter.md) | Filters an array with all elements that pass the test implemented by the provided filter function. It also does it recursively if the property accessed, whose name is the parameter childrenKey, to the current iteration in an array. |
-|  [deepFlat(array, childrenKey)](./x-components.deepflat.md) | Flat an ArrayType\[\] recursively using the childrenKey passed as parameter to access to his nested child which is also ArrayType\[\]. |
+|  [deepFilter(array, condition, childrenKey)](./x-components.deepfilter.md) | Filters an array with all elements that pass the test implemented by the given filter function. If an item has another list of items in the <code>childrenKey</code> property it recursively filters that new list, adding it to the returned one. |
+|  [deepFlat(array, childrenKey)](./x-components.deepflat.md) | Flat an <code>Item[]</code> deeply using the given <code>childrenKey</code> to access to his children. |
 |  [every(object, condition)](./x-components.every.md) | Ensures that the given condition is met in all the non-undefined entries of the object. |
 |  [filter(wire, filterFn)](./x-components.filter.md) | Creates a [Wire](./x-components.wire.md) that is only executed whenever the condition in the filterFn is true. |
 |  [filterBlacklistedModules(wire, blacklist)](./x-components.filterblacklistedmodules.md) | Creates a [Wire](./x-components.wire.md) that is only executed if the event is emitted from a [XModule](./x-components.xmodule.md) that is NOT included in the <code>blacklist</code> array passed as parameter. |
@@ -667,6 +667,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [SimpleStateSelector](./x-components.simplestateselector.md) | Selects a part of the store state or getters (AKA "getter" inside [Vuex](https://vuex.vuejs.org/) watchers). |
 |  [StoreEmitters](./x-components.storeemitters.md) | Dictionary where the key is a [XEvent](./x-components.xevent.md)<!-- -->, and the value is [SimpleStateSelector](./x-components.simplestateselector.md) or [StateSelector](./x-components.stateselector.md)<!-- -->. This [SimpleStateSelector](./x-components.simplestateselector.md) or [StateSelector](./x-components.stateselector.md) can only access the state and getters from the [XStoreModule](./x-components.xstoremodule.md) passed as param type. This dictionary is used to emits a [XEvent](./x-components.xevent.md) when the part of the store selected by [SimpleStateSelector](./x-components.simplestateselector.md) changes. |
 |  [StoreModuleStateAndGetters](./x-components.storemodulestateandgetters.md) | Type safe which allows the access to the State and the Getters of a [XStoreModule](./x-components.xstoremodule.md)<!-- -->. |
+|  [SubObject](./x-components.subobject.md) | Extracts a sub-type with the properties of <code>SomeObject</code> that have the <code>TargetPropertyType</code> type. |
 |  [TaggingXModule](./x-components.taggingxmodule.md) | Tagging [XModule](./x-components.xmodule.md) alias. |
 |  [TaggingXStoreModule](./x-components.taggingxstoremodule.md) | Tagging type safe store module. |
 |  [TakeNavigationControl](./x-components.takenavigationcontrol.md) | Represents when to take control of the navigation. |

package/docs/API-reference/api/x-components.propswithtype.md

@@ -9,20 +9,19 @@ Extracts the name of the properties of an object that match a type.
 <b>Signature:</b>
 
 ```typescript
-export declare type PropsWithType<Type, PropType> = {
-    [Key in keyof Type]: Type[Key] extends PropType ? Key : never;
-}[keyof Type];
+export declare type PropsWithType<SomeObject, TargetItem> = keyof SomeObject & keyof SubObject<SomeObject, TargetItem>;
 ```
+<b>References:</b> [SubObject](./x-components.subobject.md)
 
 ## Example
 
 
 ```typescript
   interface Person {
-  name: string,
-  surname: string,
-  age: number
-}
+    name: string,
+    surname: string,
+    age: number
+  }
 
  type StringPersonProperties = PropsWithType<Person, string>; // "name" | "surname";
 ```

package/docs/API-reference/api/x-components.subobject.md

@@ -0,0 +1,29 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [SubObject](./x-components.subobject.md)
+
+## SubObject type
+
+Extracts a sub-type with the properties of `SomeObject` that have the `TargetPropertyType` type.
+
+<b>Signature:</b>
+
+```typescript
+export declare type SubObject<SomeObject, TargetPropertyType> = {
+    [Key in keyof SomeObject as SomeObject[Key] extends TargetPropertyType ? Key : never]: TargetPropertyType & SomeObject[Key];
+};
+```
+
+## Example
+
+
+```typescript
+  interface Person {
+    name: string,
+    surname: string,
+    age: number
+  }
+
+ type StringPersonProperties = SubObject<Person, string>; // { name: string; surname: string; };
+```
+

package/docs/API-reference/api/x-components.wireservice.md

@@ -9,5 +9,5 @@ Wires factory to invoke methods from a given service.
 <b>Signature:</b>
 
 ```typescript
-export interface WireService<SomeService> 
+export interface WireService<SomeService extends Record<string, MonadicFunction>> 
 ```

package/docs/API-reference/api/x-components.wireservicewithoutpayload.md

@@ -9,5 +9,5 @@ Wires factory to invoke methods from a given service.
 <b>Signature:</b>
 
 ```typescript
-export interface WireServiceWithoutPayload<SomeService> 
+export interface WireServiceWithoutPayload<SomeService extends Record<string, NiladicFunction>> 
 ```

package/docs/API-reference/api/x-components.wiring.md

@@ -10,7 +10,7 @@ The Wiring is a record where each key is an EmpathyX event, and the value is a d
 
 ```typescript
 export declare type Wiring = {
-    [E in XEvent]: Dictionary<WireForEvent<E>>;
+    [Event in XEvent]: Dictionary<WireForEvent<Event>>;
 };
 ```
 <b>References:</b> [XEvent](./x-components.xevent.md)<!-- -->, [Dictionary](./x-components.dictionary.md)<!-- -->, [WireForEvent](./x-components.wireforevent.md)

package/js/utils/array.js

@@ -56,13 +56,13 @@ function groupItemsBy(array, groupBy) {
     }, {});
 }
 /**
- * Filters an array with all elements that pass the test implemented by the provided filter
- * function. It also does it recursively if the property accessed, whose name is the parameter
- * childrenKey, to the current iteration in an array.
+ * Filters an array with all elements that pass the test implemented by the given filter
+ * function. If an item has another list of items in the `childrenKey` property it recursively
+ * filters that new list, adding it to the returned one.
  *
  * @param array - Array to be filtered.
- * @param filter - Predicate function to test each element of the array. It should return true
- * to keep the element; or false otherwise.
+ * @param condition - Predicate function to test each element of the array. It should return `true`
+ * to keep the element; or `false` otherwise.
  * @param childrenKey - Property name within the array used to perform a recursive call.
  *
  * @example
@@ -130,68 +130,38 @@ function groupItemsBy(array, groupBy) {
  *    ]
  * ```
  *
- * @returns A new array with the elements that pass the test, or an empty array if no one
+ * @returns A new array with the elements that pass the condition, or an empty array if no one
  * pass the test.
  *
  * @public
  */
-function deepFilter(array, filter, childrenKey) {
-    const filterArray = function (currentArray, initialArray = []) {
-        return currentArray.reduce((result, currentItem) => {
-            if (filter(currentItem)) {
-                result.push(currentItem);
-                filterArray(currentItem[childrenKey], result);
-            }
-            return result;
-        }, initialArray);
-    };
-    return filterArray(array);
+function deepFilter(array, condition, childrenKey) {
+    return array.reduce(function filter(filteredArray, item) {
+        if (condition(item)) {
+            filteredArray.push(item);
+            item[childrenKey]?.reduce(filter, filteredArray);
+        }
+        return filteredArray;
+    }, []);
 }
 /**
- * Flat an ArrayType[] recursively using the childrenKey passed as parameter to access to his nested
- * child which is also ArrayType[].
+ * Flat an `Item[]` deeply using the given `childrenKey` to access to his children.
  *
- * @param array - ArrayType[] which each ArrayType has a property childrenKey which value is also
- * an ArrayType[].
- * @param childrenKey - Key used to access to each ArrayType[childrenKey] value which is also
- * an ArrayType[].
+ * @param array - The list of items to flat. Each item may have another list of items of
+ * the same type to flat.
+ * @param childrenKey - Property name where each of the items of the given array may have another
+ * list of items to be flattened.
  *
- * @returns ArrayType[] with all the nested ArrayType, including the nested ones, at the same depth
- * level.
+ * @returns A flat list with all the found items.
  *
  * @public
  */
 function deepFlat(array, childrenKey) {
-    /**
-     * Flats an array recursively. In each iteration:
-     * - If the currentItem is an array, flatArray is used to reduce it. So, the order of the
-     * flatArray arguments defined is important. This happens when the function is called passing an
-     * array as the second parameter.
-     * - If not, the item is pushed to the resultantArray.
-     * - Finally, flatArray function is called again with the currentItem children and the process
-     * starts again.
-     *
-     * It's the main function of the parent. See the description above
-     * for further information.
-     *
-     * @param resultantArray - Flattened array.
-     * @param currentItem - ArrayType object.
-     *
-     * @returns Flattened ArrayType[].
-     *
-     * @internal
-     */
-    function flatArray(resultantArray, currentItem) {
-        if (!currentItem) {
-            return resultantArray;
-        }
-        if (Array.isArray(currentItem)) {
-            return currentItem.reduce(flatArray, resultantArray);
-        }
-        resultantArray.push(currentItem);
-        return flatArray(resultantArray, currentItem[childrenKey]);
-    }
-    return flatArray([], array);
+    return array.reduce(function flat(flattenedArray, item) {
+        flattenedArray.push(item);
+        item[childrenKey]?.reduce(flat, flattenedArray);
+        return flattenedArray;
+    }, []);
 }
 /**
  * Creates an Emitter filter function to compare two arrays and filter those that are equal.

package/js/utils/array.js.map

@@ -1 +1 @@
-{"version":3,"file":"array.js","sources":["../../../src/utils/array.ts"],"sourcesContent":["import { PropsWithType } from './types';\n\n/**\n * Returns if the given array is `null`, `undefined`, or has no elements.\n *\n * @param array - The array to check if it is empty.\n * @returns `true` if the array is `null`, `undefined`, or has no elements. `false` otherwise.\n * @public\n */\nexport function isArrayEmpty(array: unknown[] | undefined | null): array is undefined | null | [] {\n  return array == null || array.length === 0;\n}\n\n/**\n * Reduce an array of strings to an object which properties names are the value of each string,\n * and the value under that property are also the string.\n *\n * @param array - Array of strings that will be used to create the object.\n *\n * @returns New object which properties object[key] contains object of each iteration in the\n * array.\n *\n * @example Converting an array to an object:\n *         arrayToObject(['a', 'b', 'c']) === \\{a: 'a', b: 'b', c: 'c'\\}\n *\n * @public\n */\nexport function arrayToObject(array: string[]): Record<string, string>;\n/**\n * Reduce an array of objects to an object which properties names are the value of each object[key],\n * and the value under that property are each object. 'key' is the the parameter passed to this\n * function.\n *\n * @param array - Array of objects that contains objects which have object[key] string as a property\n * value.\n * @param key - Key used to access to each object[key] value, used for each property name in the new\n * object.\n *\n * @returns New object which properties object[key] contains object of each iteration in the array.\n *\n * @public\n */\nexport function arrayToObject<ArrayType, KeyType extends string | number>(\n  array: ArrayType[],\n  key: PropsWithType<ArrayType, KeyType>\n): Record<string, ArrayType>;\n/**\n * Reduce an array to an object. The type of the object returned depends on the type of the params.\n * If the 'key' is passed then the function returns an object which properties names are the value\n * of each object[key] and the value under that property are each object.\n * If the 'key' is not passed then the function returns an object which properties names are each\n * array item, and the value is also the array item.\n *\n * @param array - Array from which to create an object.\n * @param key - Key used to access to each object[key] value, used for each property name in the\n * new object.\n *\n * @returns New object which properties object[key] contains each item in the array and the key is\n * either the item of the array or a property of each item designated by 'key' param.\n *\n * @public\n */\nexport function arrayToObject<ArrayType, KeyType extends string | number>(\n  array: ArrayType[],\n  key?: PropsWithType<ArrayType, KeyType>\n): Record<string, ArrayType> {\n  return array.reduce<Record<string, ArrayType>>((accumulator, current) => {\n    if (key) {\n      accumulator[current[key] as unknown as string] = current;\n    } else if (typeof current === 'string') {\n      accumulator[current] = current;\n    }\n    return accumulator;\n  }, {});\n}\n\n/**\n * Groups the array items based on the provided `groupBy` function.\n *\n * @param array - The array to iterate, grouping its items in different arrays based on the\n * `groupBy` function.\n * @param groupBy - A function to determine the group name of a single item.\n * @returns The items grouped in a dictionary.\n *\n * @public\n */\nexport function groupItemsBy<ArrayType, ReturnType extends string | number>(\n  array: ArrayType[],\n  groupBy: (item: ArrayType, index: number) => ReturnType\n): Record<ReturnType, ArrayType[]> {\n  return array.reduce<Record<ReturnType, ArrayType[]>>((accumulator, current, index) => {\n    const keyValue = groupBy(current, index);\n    if (!accumulator[keyValue]) {\n      accumulator[keyValue] = [];\n    }\n    accumulator[keyValue].push(current);\n    return accumulator;\n  }, {} as Record<ReturnType, ArrayType[]>);\n}\n\n/**\n * Filters an array with all elements that pass the test implemented by the provided filter\n * function. It also does it recursively if the property accessed, whose name is the parameter\n * childrenKey, to the current iteration in an array.\n *\n * @param array - Array to be filtered.\n * @param filter - Predicate function to test each element of the array. It should return true\n * to keep the element; or false otherwise.\n * @param childrenKey - Property name within the array used to perform a recursive call.\n *\n * @example\n * Input - Output example\n *\n * ```\n * const hierarchicalFilters: Filter[] = [\n *   {\n *     id: 'filter1'\n *     selected: true,\n *     children: [\n *       {\n *         id: 'filter1-1'\n *         selected: true,\n *         children: []\n *       },\n *       {\n *         id: 'filter1-2'\n *         selected: false,\n *         children: []\n *       }\n *     ]\n *   },\n *   {\n *     id: 'filter2',\n *     selected: false,\n *     children: [\n *      {\n *        id: 'filter2-1',\n *        selected: true // not should happen\n *      }\n *     ]\n *   }\n * ]\n *\n *  const filteredArray: Filter[] = deepFilterArray(\n *    hierarchicalFilters,\n *    filter => filter.selected,\n *    'children'\n *  )\n *\n *  /*\n *    filteredArray = [\n *      {\n *        id: 'filter1'\n *        selected: true,\n *        children: [\n *          {\n *            id: 'filter1-1'\n *            selected: true,\n *            children: []\n *          },\n *          {\n *            id: 'filter1-2'\n *            selected: false,\n *            children: []\n *          }\n *        ]\n *      },\n *      {\n *        id: 'filter1-1'\n *        selected: true,\n *        children: []\n *      }\n *    ]\n * ```\n *\n * @returns A new array with the elements that pass the test, or an empty array if no one\n * pass the test.\n *\n * @public\n */\nexport function deepFilter<ArrayType, Key extends PropsWithType<ArrayType, ArrayType[]>>(\n  array: ArrayType[],\n  filter: (item: ArrayType) => boolean,\n  childrenKey: Key\n): ArrayType[] {\n  const filterArray = function (\n    currentArray: ArrayType[],\n    initialArray: ArrayType[] = []\n  ): ArrayType[] {\n    return currentArray.reduce((result, currentItem) => {\n      if (filter(currentItem)) {\n        result.push(currentItem);\n        filterArray(currentItem[childrenKey], result);\n      }\n\n      return result;\n    }, initialArray);\n  };\n\n  return filterArray(array);\n}\n\n/**\n * Flat an ArrayType[] recursively using the childrenKey passed as parameter to access to his nested\n * child which is also ArrayType[].\n *\n * @param array - ArrayType[] which each ArrayType has a property childrenKey which value is also\n * an ArrayType[].\n * @param childrenKey - Key used to access to each ArrayType[childrenKey] value which is also\n * an ArrayType[].\n *\n * @returns ArrayType[] with all the nested ArrayType, including the nested ones, at the same depth\n * level.\n *\n * @public\n */\nexport function deepFlat<ArrayType, Key extends PropsWithType<ArrayType, ArrayType[] | undefined>>(\n  array: ArrayType[],\n  childrenKey: Key\n): ArrayType[] {\n  /**\n   * Flats an array recursively. In each iteration:\n   * - If the currentItem is an array, flatArray is used to reduce it. So, the order of the\n   * flatArray arguments defined is important. This happens when the function is called passing an\n   * array as the second parameter.\n   * - If not, the item is pushed to the resultantArray.\n   * - Finally, flatArray function is called again with the currentItem children and the process\n   * starts again.\n   *\n   * It's the main function of the parent. See the description above\n   * for further information.\n   *\n   * @param resultantArray - Flattened array.\n   * @param currentItem - ArrayType object.\n   *\n   * @returns Flattened ArrayType[].\n   *\n   * @internal\n   */\n  function flatArray(\n    resultantArray: ArrayType[],\n    currentItem: ArrayType | ArrayType[]\n  ): ArrayType[] {\n    if (!currentItem) {\n      return resultantArray;\n    }\n\n    if (Array.isArray(currentItem)) {\n      return currentItem.reduce(flatArray, resultantArray);\n    }\n    resultantArray.push(currentItem);\n    return flatArray(resultantArray, currentItem[childrenKey]);\n  }\n\n  return flatArray([], array);\n}\n\n/**\n * Creates an Emitter filter function to compare two arrays and filter those that are equal.\n *\n * @param comparator - String with the name of the field of the arrays items to compare, or function\n * to compare items directly.\n * @returns The comparator function that receives two arrays to compare them.\n *\n * @internal\n */\nexport function createEmitterArrayFilter<T>(\n  comparator: keyof T | ((item1: T, item2: T) => boolean)\n): (newCollection: Array<T>, oldCollection: Array<T>) => boolean {\n  const comparatorFn =\n    typeof comparator === 'function'\n      ? comparator\n      : (newItem: T, oldItem: T) => newItem[comparator] === oldItem[comparator];\n  return function (newCollection: Array<T>, oldCollection: Array<T>): boolean {\n    return (\n      newCollection.length !== oldCollection.length ||\n      newCollection.some(newItem => !oldCollection.find(oldItem => comparatorFn(newItem, oldItem)))\n    );\n  };\n}\n"],"names":[],"mappings":"AAEA;;;;;;;SAOgB,YAAY,CAAC,KAAmC;IAC9D,OAAO,KAAK,IAAI,IAAI,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC;AAC7C,CAAC;AAmCD;;;;;;;;;;;;;;;;SAgBgB,aAAa,CAC3B,KAAkB,EAClB,GAAuC;IAEvC,OAAO,KAAK,CAAC,MAAM,CAA4B,CAAC,WAAW,EAAE,OAAO;QAClE,IAAI,GAAG,EAAE;YACP,WAAW,CAAC,OAAO,CAAC,GAAG,CAAsB,CAAC,GAAG,OAAO,CAAC;SAC1D;aAAM,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;YACtC,WAAW,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;SAChC;QACD,OAAO,WAAW,CAAC;KACpB,EAAE,EAAE,CAAC,CAAC;AACT,CAAC;AAED;;;;;;;;;;SAUgB,YAAY,CAC1B,KAAkB,EAClB,OAAuD;IAEvD,OAAO,KAAK,CAAC,MAAM,CAAkC,CAAC,WAAW,EAAE,OAAO,EAAE,KAAK;QAC/E,MAAM,QAAQ,GAAG,OAAO,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QACzC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE;YAC1B,WAAW,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC;SAC5B;QACD,WAAW,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACpC,OAAO,WAAW,CAAC;KACpB,EAAE,EAAqC,CAAC,CAAC;AAC5C,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAgFgB,UAAU,CACxB,KAAkB,EAClB,MAAoC,EACpC,WAAgB;IAEhB,MAAM,WAAW,GAAG,UAClB,YAAyB,EACzB,eAA4B,EAAE;QAE9B,OAAO,YAAY,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,WAAW;YAC7C,IAAI,MAAM,CAAC,WAAW,CAAC,EAAE;gBACvB,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;gBACzB,WAAW,CAAC,WAAW,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,CAAC;aAC/C;YAED,OAAO,MAAM,CAAC;SACf,EAAE,YAAY,CAAC,CAAC;KAClB,CAAC;IAEF,OAAO,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,CAAC;AAED;;;;;;;;;;;;;;SAcgB,QAAQ,CACtB,KAAkB,EAClB,WAAgB;;;;;;;;;;;;;;;;;;;;IAqBhB,SAAS,SAAS,CAChB,cAA2B,EAC3B,WAAoC;QAEpC,IAAI,CAAC,WAAW,EAAE;YAChB,OAAO,cAAc,CAAC;SACvB;QAED,IAAI,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE;YAC9B,OAAO,WAAW,CAAC,MAAM,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;SACtD;QACD,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACjC,OAAO,SAAS,CAAC,cAAc,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC,CAAC;KAC5D;IAED,OAAO,SAAS,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;AAC9B,CAAC;AAED;;;;;;;;;SASgB,wBAAwB,CACtC,UAAuD;IAEvD,MAAM,YAAY,GAChB,OAAO,UAAU,KAAK,UAAU;UAC5B,UAAU;UACV,CAAC,OAAU,EAAE,OAAU,KAAK,OAAO,CAAC,UAAU,CAAC,KAAK,OAAO,CAAC,UAAU,CAAC,CAAC;IAC9E,OAAO,UAAU,aAAuB,EAAE,aAAuB;QAC/D,QACE,aAAa,CAAC,MAAM,KAAK,aAAa,CAAC,MAAM;YAC7C,aAAa,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,IAAI,YAAY,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EAC7F;KACH,CAAC;AACJ;;;;"}
+{"version":3,"file":"array.js","sources":["../../../src/utils/array.ts"],"sourcesContent":["import { PropsWithType } from './types';\n\n/**\n * Returns if the given array is `null`, `undefined`, or has no elements.\n *\n * @param array - The array to check if it is empty.\n * @returns `true` if the array is `null`, `undefined`, or has no elements. `false` otherwise.\n * @public\n */\nexport function isArrayEmpty(array: unknown[] | undefined | null): array is undefined | null | [] {\n  return array == null || array.length === 0;\n}\n\n/**\n * Reduce an array of strings to an object which properties names are the value of each string,\n * and the value under that property are also the string.\n *\n * @param array - Array of strings that will be used to create the object.\n *\n * @returns New object which properties object[key] contains object of each iteration in the\n * array.\n *\n * @example Converting an array to an object:\n *         arrayToObject(['a', 'b', 'c']) === \\{a: 'a', b: 'b', c: 'c'\\}\n *\n * @public\n */\nexport function arrayToObject(array: string[]): Record<string, string>;\n/**\n * Reduce an array of objects to an object which properties names are the value of each object[key],\n * and the value under that property are each object. 'key' is the the parameter passed to this\n * function.\n *\n * @param array - Array of objects that contains objects which have object[key] string as a property\n * value.\n * @param key - Key used to access to each object[key] value, used for each property name in the new\n * object.\n *\n * @returns New object which properties object[key] contains object of each iteration in the array.\n *\n * @public\n */\nexport function arrayToObject<ArrayType>(\n  array: ArrayType[],\n  key: PropsWithType<ArrayType, string | number>\n): Record<string, ArrayType>;\n/**\n * Reduce an array to an object. The type of the object returned depends on the type of the params.\n * If the 'key' is passed then the function returns an object which properties names are the value\n * of each object[key] and the value under that property are each object.\n * If the 'key' is not passed then the function returns an object which properties names are each\n * array item, and the value is also the array item.\n *\n * @param array - Array from which to create an object.\n * @param key - Key used to access to each object[key] value, used for each property name in the\n * new object.\n *\n * @returns New object which properties object[key] contains each item in the array and the key is\n * either the item of the array or a property of each item designated by 'key' param.\n *\n * @public\n */\nexport function arrayToObject<ArrayType>(\n  array: ArrayType[],\n  key?: PropsWithType<ArrayType, string | number>\n): Record<string, ArrayType> {\n  return array.reduce<Record<string, ArrayType>>((accumulator, current) => {\n    if (key) {\n      accumulator[current[key] as any] = current;\n    } else if (typeof current === 'string') {\n      accumulator[current] = current;\n    }\n    return accumulator;\n  }, {});\n}\n\n/**\n * Groups the array items based on the provided `groupBy` function.\n *\n * @param array - The array to iterate, grouping its items in different arrays based on the\n * `groupBy` function.\n * @param groupBy - A function to determine the group name of a single item.\n * @returns The items grouped in a dictionary.\n *\n * @public\n */\nexport function groupItemsBy<ArrayType, ReturnType extends string | number>(\n  array: ArrayType[],\n  groupBy: (item: ArrayType, index: number) => ReturnType\n): Record<ReturnType, ArrayType[]> {\n  return array.reduce<Record<ReturnType, ArrayType[]>>((accumulator, current, index) => {\n    const keyValue = groupBy(current, index);\n    if (!accumulator[keyValue]) {\n      accumulator[keyValue] = [];\n    }\n    accumulator[keyValue].push(current);\n    return accumulator;\n  }, {} as Record<ReturnType, ArrayType[]>);\n}\n\n/**\n * Filters an array with all elements that pass the test implemented by the given filter\n * function. If an item has another list of items in the `childrenKey` property it recursively\n * filters that new list, adding it to the returned one.\n *\n * @param array - Array to be filtered.\n * @param condition - Predicate function to test each element of the array. It should return `true`\n * to keep the element; or `false` otherwise.\n * @param childrenKey - Property name within the array used to perform a recursive call.\n *\n * @example\n * Input - Output example\n *\n * ```\n * const hierarchicalFilters: Filter[] = [\n *   {\n *     id: 'filter1'\n *     selected: true,\n *     children: [\n *       {\n *         id: 'filter1-1'\n *         selected: true,\n *         children: []\n *       },\n *       {\n *         id: 'filter1-2'\n *         selected: false,\n *         children: []\n *       }\n *     ]\n *   },\n *   {\n *     id: 'filter2',\n *     selected: false,\n *     children: [\n *      {\n *        id: 'filter2-1',\n *        selected: true // not should happen\n *      }\n *     ]\n *   }\n * ]\n *\n *  const filteredArray: Filter[] = deepFilterArray(\n *    hierarchicalFilters,\n *    filter => filter.selected,\n *    'children'\n *  )\n *\n *  /*\n *    filteredArray = [\n *      {\n *        id: 'filter1'\n *        selected: true,\n *        children: [\n *          {\n *            id: 'filter1-1'\n *            selected: true,\n *            children: []\n *          },\n *          {\n *            id: 'filter1-2'\n *            selected: false,\n *            children: []\n *          }\n *        ]\n *      },\n *      {\n *        id: 'filter1-1'\n *        selected: true,\n *        children: []\n *      }\n *    ]\n * ```\n *\n * @returns A new array with the elements that pass the condition, or an empty array if no one\n * pass the test.\n *\n * @public\n */\nexport function deepFilter<Item extends { [key in Key]?: Item[] }, Key extends keyof Item>(\n  array: Item[],\n  condition: (item: Item) => boolean,\n  childrenKey: Key\n): Item[] {\n  return array.reduce<Item[]>(function filter(filteredArray, item) {\n    if (condition(item)) {\n      filteredArray.push(item);\n      item[childrenKey]?.reduce(filter, filteredArray);\n    }\n    return filteredArray;\n  }, []);\n}\n\n/**\n * Flat an `Item[]` deeply using the given `childrenKey` to access to his children.\n *\n * @param array - The list of items to flat. Each item may have another list of items of\n * the same type to flat.\n * @param childrenKey - Property name where each of the items of the given array may have another\n * list of items to be flattened.\n *\n * @returns A flat list with all the found items.\n *\n * @public\n */\nexport function deepFlat<Item extends { [key in Key]?: Item[] }, Key extends keyof Item>(\n  array: Item[],\n  childrenKey: Key\n): Item[] {\n  return array.reduce<Item[]>(function flat(flattenedArray, item) {\n    flattenedArray.push(item);\n    item[childrenKey]?.reduce(flat, flattenedArray);\n    return flattenedArray;\n  }, []);\n}\n\n/**\n * Creates an Emitter filter function to compare two arrays and filter those that are equal.\n *\n * @param comparator - String with the name of the field of the arrays items to compare, or function\n * to compare items directly.\n * @returns The comparator function that receives two arrays to compare them.\n *\n * @internal\n */\nexport function createEmitterArrayFilter<T>(\n  comparator: keyof T | ((item1: T, item2: T) => boolean)\n): (newCollection: Array<T>, oldCollection: Array<T>) => boolean {\n  const comparatorFn =\n    typeof comparator === 'function'\n      ? comparator\n      : (newItem: T, oldItem: T) => newItem[comparator] === oldItem[comparator];\n  return function (newCollection: Array<T>, oldCollection: Array<T>): boolean {\n    return (\n      newCollection.length !== oldCollection.length ||\n      newCollection.some(newItem => !oldCollection.find(oldItem => comparatorFn(newItem, oldItem)))\n    );\n  };\n}\n"],"names":[],"mappings":"AAEA;;;;;;;SAOgB,YAAY,CAAC,KAAmC;IAC9D,OAAO,KAAK,IAAI,IAAI,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC;AAC7C,CAAC;AAmCD;;;;;;;;;;;;;;;;SAgBgB,aAAa,CAC3B,KAAkB,EAClB,GAA+C;IAE/C,OAAO,KAAK,CAAC,MAAM,CAA4B,CAAC,WAAW,EAAE,OAAO;QAClE,IAAI,GAAG,EAAE;YACP,WAAW,CAAC,OAAO,CAAC,GAAG,CAAQ,CAAC,GAAG,OAAO,CAAC;SAC5C;aAAM,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;YACtC,WAAW,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;SAChC;QACD,OAAO,WAAW,CAAC;KACpB,EAAE,EAAE,CAAC,CAAC;AACT,CAAC;AAED;;;;;;;;;;SAUgB,YAAY,CAC1B,KAAkB,EAClB,OAAuD;IAEvD,OAAO,KAAK,CAAC,MAAM,CAAkC,CAAC,WAAW,EAAE,OAAO,EAAE,KAAK;QAC/E,MAAM,QAAQ,GAAG,OAAO,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QACzC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE;YAC1B,WAAW,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC;SAC5B;QACD,WAAW,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACpC,OAAO,WAAW,CAAC;KACpB,EAAE,EAAqC,CAAC,CAAC;AAC5C,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAgFgB,UAAU,CACxB,KAAa,EACb,SAAkC,EAClC,WAAgB;IAEhB,OAAO,KAAK,CAAC,MAAM,CAAS,SAAS,MAAM,CAAC,aAAa,EAAE,IAAI;QAC7D,IAAI,SAAS,CAAC,IAAI,CAAC,EAAE;YACnB,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACzB,IAAI,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;SAClD;QACD,OAAO,aAAa,CAAC;KACtB,EAAE,EAAE,CAAC,CAAC;AACT,CAAC;AAED;;;;;;;;;;;;SAYgB,QAAQ,CACtB,KAAa,EACb,WAAgB;IAEhB,OAAO,KAAK,CAAC,MAAM,CAAS,SAAS,IAAI,CAAC,cAAc,EAAE,IAAI;QAC5D,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC1B,IAAI,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC;QAChD,OAAO,cAAc,CAAC;KACvB,EAAE,EAAE,CAAC,CAAC;AACT,CAAC;AAED;;;;;;;;;SASgB,wBAAwB,CACtC,UAAuD;IAEvD,MAAM,YAAY,GAChB,OAAO,UAAU,KAAK,UAAU;UAC5B,UAAU;UACV,CAAC,OAAU,EAAE,OAAU,KAAK,OAAO,CAAC,UAAU,CAAC,KAAK,OAAO,CAAC,UAAU,CAAC,CAAC;IAC9E,OAAO,UAAU,aAAuB,EAAE,aAAuB;QAC/D,QACE,aAAa,CAAC,MAAM,KAAK,aAAa,CAAC,MAAM;YAC7C,aAAa,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,IAAI,YAAY,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EAC7F;KACH,CAAC;AACJ;;;;"}

package/js/wiring/wires.factory.js.map

@@ -1 +1 @@
-{"version":3,"file":"wires.factory.js","sources":["../../../src/wiring/wires.factory.ts"],"sourcesContent":["import { Store } from 'vuex';\nimport { RootXStoreState } from '../store/store.types';\nimport {\n  AnyWire,\n  PayloadFactoryData,\n  Wire,\n  WireParams,\n  WirePayload,\n  WireService,\n  WireServiceWithoutPayload\n} from './wiring.types';\n\n/**\n * Creates a wire that executes the function passed. This function will receive a\n * {@link WireParams} object.\n *\n * @param fn - The function to execute whenever a new value is emitted to the observable.\n * @returns The Wire function.\n * @public\n */\nexport function createWireFromFunction<Payload>(\n  fn: (parameters: WireParams<Payload>) => void\n): Wire<Payload> {\n  return (observable, store) =>\n    observable.subscribe(({ metadata, eventPayload }) => {\n      fn({ eventPayload, store, metadata });\n    });\n}\n\n/**\n * Creates a wire that commits a mutation to the store. This wire receives a function. This function\n * is used to get the actual payload value passed to mutation.\n * This wire can be used in every event, as it does not have a payload type associated.\n *\n * @param mutation - The full mutation path to commit. I.e. `x/searchBox/setQuery`.\n * @param payloadFactory - A function that receives a {@link PayloadFactoryData | object}\n * with the Store state, getters, payload and metadata as parameter.\n * @returns A {@link AnyWire} wire that commits the mutation with the payload returned by the\n * payloadFactory.\n * @public\n */\nexport function wireCommit<Payload>(\n  mutation: string,\n  payloadFactory: (params: PayloadFactoryData<Payload>) => any\n): AnyWire;\n/**\n * Creates a wire that commits a mutation to the store. This wire can receive any value as payload.\n * This wire can be used in every event, as it does not have a payload type associated.\n *\n * @param mutation - The full mutation path to commit. I.e. `x/searchBox/setQuery`.\n * @param staticPayload - A static payload to pass to the mutation.\n * @returns {@link AnyWire} A wire that commits the mutation with the staticPayload payload.\n * @public\n */\nexport function wireCommit(mutation: string, staticPayload: any): AnyWire;\n/**\n * Creates a wire that commits a mutation to the store. This wire will commit to the store the\n * payload that it receives in the observable.\n *\n * @param mutation - The full mutation path to commit. I.e. `x/searchBox/setQuery`.\n * @typeParam Payload - The type of the payload that this wire will receive\n * @returns {@link Wire} A wire that commits the mutation with the payload that it receives\n * in the observable.\n * @public\n */\nexport function wireCommit<Payload>(mutation: string): Wire<Payload>;\n// eslint-disable-next-line jsdoc/require-jsdoc\nexport function wireCommit<Payload>(mutation: string, payload?: Payload): Wire<Payload> {\n  return (observable, store) =>\n    observable.subscribe(createSubscriptionCallback(store, 'commit', mutation, payload));\n}\n\n/**\n * Creates a wire that commits a mutation to the store, but without any payload. This wire can\n * be used in every event, as it does not have a payload type associated.\n *\n * @param mutation - The full mutation path to commit. I.e. `x/searchBox/setQuery`.\n * @returns {@link AnyWire} A wire that commits the mutation without any payload.\n * @public\n */\nexport function wireCommitWithoutPayload(mutation: string): AnyWire {\n  return (observable, store) => observable.subscribe(() => store.commit(mutation));\n}\n\n/**\n * Creates a wire that dispatch an action to the store. This wire receives a function. This function\n * is used to get the actual payload value passed to action.\n * This wire can be used in every event, as it does not have a payload type associated.\n *\n * @param action - The full action path to dispatch. I.e. `x/querySuggestions/fetchSuggestions`.\n * @param payloadFactory - A function that receives a {@link PayloadFactoryData | object}\n * with the Store state, getters, payload and metadata as parameter.\n * @returns A {@link AnyWire} wire that dispatches the action with the payload returned by the\n * payloadFactory.\n * @public\n */\nexport function wireDispatch<Payload>(\n  action: string,\n  payloadFactory: (params: PayloadFactoryData<Payload>) => any\n): AnyWire;\n/**\n * Creates a wire that dispatches an action to the store. This wire can be used in every event,\n * as it does not have a payload type associated.\n *\n * @param action - The full action path to dispatch. I.e. `x/querySuggestions/fetchSuggestions`.\n * @param staticPayload - A static payload to pass to the action which will be dispatched.\n * @returns {@link AnyWire} A wire that dispatches the action with the staticPayload payload.\n * @public\n */\nexport function wireDispatch(action: string, staticPayload: any): AnyWire;\n/**\n * Creates a wire that dispatches an action to the store. This wire will pass the payload\n * received in the observable to the action.\n *\n * @param action - The full action path to dispatch. I.e. `x/querySuggestions/fetchSuggestions`.\n * @typeParam Payload - The type of the payload that this wire will receive\n * @returns {@link Wire} A wire that dispatches the action with the payload that it receives\n * in the observable.\n * @public\n */\nexport function wireDispatch<Payload>(action: string): Wire<Payload>;\n// eslint-disable-next-line jsdoc/require-jsdoc\nexport function wireDispatch<Payload>(action: string, payload?: Payload): Wire<Payload> {\n  return (observable, store) =>\n    observable.subscribe(createSubscriptionCallback(store, 'dispatch', action, payload));\n}\n\n/**\n * Creates a wire that dispatches an action to the store, but without any payload. This wire can\n * be used in every event, as it does not have a payload type associated.\n *\n * @param action - The full action path to dispatch. I.e. `x/querySuggestions/fetchSuggestions`.\n * @returns {@link AnyWire} A wire that dispatches the action without any payload.\n * @public\n */\nexport function wireDispatchWithoutPayload(action: string): AnyWire {\n  return (observable, store) => observable.subscribe(() => store.dispatch(action));\n}\n\n/**\n * Creates a wires factory that can create wires that will invoke the service methods.\n *\n * @param service - The service to invoke its methods.\n * @returns A factory to create wires that invoke the service methods.\n * @public\n */\nexport function wireService<SomeService>(service: SomeService): WireService<SomeService> {\n  return (method, payload?) => {\n    return observable =>\n      observable.subscribe(\n        payload !== undefined\n          ? () => service[method](payload)\n          : observablePayload => service[method](observablePayload.eventPayload)\n      );\n  };\n}\n\n/**\n * Creates a wires factory that can create wires that will invoke the service methods but\n * without payload.\n *\n * @param service - The service to invoke its methods.\n * @returns A factory to create wires that invoke the service methods without payload.\n * @public\n */\nexport function wireServiceWithoutPayload<SomeService>(\n  service: SomeService\n): WireServiceWithoutPayload<SomeService> {\n  return method => {\n    return observable => observable.subscribe(() => service[method]());\n  };\n}\n\n/**\n * Creates the callback function for the {@link wireCommit} and {@link wireDispatch}\n * subscriptions. It can be based on the payload as function which retrieves the observable\n * payload from the store, a static payload or the event value from the observable.\n *\n * @param store - The {@link RootXStoreState} store.\n * @param commitOrDispatch - The executor over store. It can be `commit` or `dispatch`.\n * @param mutationOrAction - The mutation or action to commit or dispatch respectively.\n * @param payload - The payload for the store executor. It can be a function which retrieves the\n * payload from the store, a static payload or the event value from the observable.\n * @typeParam Payload - The type of the payload to get the observable event value type.\n * @returns A function to commit or dispatch a payload value over store.\n * @internal\n */\nfunction createSubscriptionCallback<Payload>(\n  store: Store<RootXStoreState>,\n  commitOrDispatch: 'commit' | 'dispatch',\n  mutationOrAction: string,\n  payload?: Payload\n): (observableValue: WirePayload<Payload>) => void {\n  const storeExecutor = store[commitOrDispatch];\n  return typeof payload === 'function'\n    ? wirePayload => {\n        return storeExecutor(\n          mutationOrAction,\n          payload({\n            state: store.state,\n            getters: store.getters,\n            ...wirePayload\n          })\n        );\n      }\n    : payload !== undefined\n    ? () => {\n        storeExecutor(mutationOrAction, payload);\n      }\n    : observableValue => {\n        storeExecutor(mutationOrAction, observableValue.eventPayload);\n      };\n}\n"],"names":[],"mappings":"AAYA;;;;;;;;SAQgB,sBAAsB,CACpC,EAA6C;IAE7C,OAAO,CAAC,UAAU,EAAE,KAAK,KACvB,UAAU,CAAC,SAAS,CAAC,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE;QAC9C,EAAE,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC;KACvC,CAAC,CAAC;AACP,CAAC;AAuCD;SACgB,UAAU,CAAU,QAAgB,EAAE,OAAiB;IACrE,OAAO,CAAC,UAAU,EAAE,KAAK,KACvB,UAAU,CAAC,SAAS,CAAC,0BAA0B,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;AACzF,CAAC;AAED;;;;;;;;SAQgB,wBAAwB,CAAC,QAAgB;IACvD,OAAO,CAAC,UAAU,EAAE,KAAK,KAAK,UAAU,CAAC,SAAS,CAAC,MAAM,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;AACnF,CAAC;AAuCD;SACgB,YAAY,CAAU,MAAc,EAAE,OAAiB;IACrE,OAAO,CAAC,UAAU,EAAE,KAAK,KACvB,UAAU,CAAC,SAAS,CAAC,0BAA0B,CAAC,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;AACzF,CAAC;AAED;;;;;;;;SAQgB,0BAA0B,CAAC,MAAc;IACvD,OAAO,CAAC,UAAU,EAAE,KAAK,KAAK,UAAU,CAAC,SAAS,CAAC,MAAM,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;AACnF,CAAC;AAED;;;;;;;SAOgB,WAAW,CAAc,OAAoB;IAC3D,OAAO,CAAC,MAAM,EAAE,OAAQ;QACtB,OAAO,UAAU,IACf,UAAU,CAAC,SAAS,CAClB,OAAO,KAAK,SAAS;cACjB,MAAM,OAAO,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC;cAC9B,iBAAiB,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,iBAAiB,CAAC,YAAY,CAAC,CACzE,CAAC;KACL,CAAC;AACJ,CAAC;AAED;;;;;;;;SAQgB,yBAAyB,CACvC,OAAoB;IAEpB,OAAO,MAAM;QACX,OAAO,UAAU,IAAI,UAAU,CAAC,SAAS,CAAC,MAAM,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;KACpE,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;;AAcA,SAAS,0BAA0B,CACjC,KAA6B,EAC7B,gBAAuC,EACvC,gBAAwB,EACxB,OAAiB;IAEjB,MAAM,aAAa,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC;IAC9C,OAAO,OAAO,OAAO,KAAK,UAAU;UAChC,WAAW;YACT,OAAO,aAAa,CAClB,gBAAgB,EAChB,OAAO,CAAC;gBACN,KAAK,EAAE,KAAK,CAAC,KAAK;gBAClB,OAAO,EAAE,KAAK,CAAC,OAAO;gBACtB,GAAG,WAAW;aACf,CAAC,CACH,CAAC;SACH;UACD,OAAO,KAAK,SAAS;cACrB;gBACE,aAAa,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC;aAC1C;cACD,eAAe;gBACb,aAAa,CAAC,gBAAgB,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;aAC/D,CAAC;AACR;;;;"}
+{"version":3,"file":"wires.factory.js","sources":["../../../src/wiring/wires.factory.ts"],"sourcesContent":["import { Store } from 'vuex';\nimport { RootXStoreState } from '../store/store.types';\nimport { MonadicFunction, NiladicFunction, SubObject } from '../utils/index';\nimport {\n  AnyWire,\n  PayloadFactoryData,\n  Wire,\n  WireParams,\n  WirePayload,\n  WireService,\n  WireServiceWithoutPayload\n} from './wiring.types';\n\n/**\n * Creates a wire that executes the function passed. This function will receive a\n * {@link WireParams} object.\n *\n * @param fn - The function to execute whenever a new value is emitted to the observable.\n * @returns The Wire function.\n * @public\n */\nexport function createWireFromFunction<Payload>(\n  fn: (parameters: WireParams<Payload>) => void\n): Wire<Payload> {\n  return (observable, store) =>\n    observable.subscribe(({ metadata, eventPayload }) => {\n      fn({ eventPayload, store, metadata });\n    });\n}\n\n/**\n * Creates a wire that commits a mutation to the store. This wire receives a function. This function\n * is used to get the actual payload value passed to mutation.\n * This wire can be used in every event, as it does not have a payload type associated.\n *\n * @param mutation - The full mutation path to commit. I.e. `x/searchBox/setQuery`.\n * @param payloadFactory - A function that receives a {@link PayloadFactoryData | object}\n * with the Store state, getters, payload and metadata as parameter.\n * @returns A {@link AnyWire} wire that commits the mutation with the payload returned by the\n * payloadFactory.\n * @public\n */\nexport function wireCommit<Payload>(\n  mutation: string,\n  payloadFactory: (params: PayloadFactoryData<Payload>) => any\n): AnyWire;\n/**\n * Creates a wire that commits a mutation to the store. This wire can receive any value as payload.\n * This wire can be used in every event, as it does not have a payload type associated.\n *\n * @param mutation - The full mutation path to commit. I.e. `x/searchBox/setQuery`.\n * @param staticPayload - A static payload to pass to the mutation.\n * @returns {@link AnyWire} A wire that commits the mutation with the staticPayload payload.\n * @public\n */\nexport function wireCommit(mutation: string, staticPayload: any): AnyWire;\n/**\n * Creates a wire that commits a mutation to the store. This wire will commit to the store the\n * payload that it receives in the observable.\n *\n * @param mutation - The full mutation path to commit. I.e. `x/searchBox/setQuery`.\n * @typeParam Payload - The type of the payload that this wire will receive\n * @returns {@link Wire} A wire that commits the mutation with the payload that it receives\n * in the observable.\n * @public\n */\nexport function wireCommit<Payload>(mutation: string): Wire<Payload>;\n// eslint-disable-next-line jsdoc/require-jsdoc\nexport function wireCommit<Payload>(mutation: string, payload?: Payload): Wire<Payload> {\n  return (observable, store) =>\n    observable.subscribe(createSubscriptionCallback(store, 'commit', mutation, payload));\n}\n\n/**\n * Creates a wire that commits a mutation to the store, but without any payload. This wire can\n * be used in every event, as it does not have a payload type associated.\n *\n * @param mutation - The full mutation path to commit. I.e. `x/searchBox/setQuery`.\n * @returns {@link AnyWire} A wire that commits the mutation without any payload.\n * @public\n */\nexport function wireCommitWithoutPayload(mutation: string): AnyWire {\n  return (observable, store) => observable.subscribe(() => store.commit(mutation));\n}\n\n/**\n * Creates a wire that dispatch an action to the store. This wire receives a function. This function\n * is used to get the actual payload value passed to action.\n * This wire can be used in every event, as it does not have a payload type associated.\n *\n * @param action - The full action path to dispatch. I.e. `x/querySuggestions/fetchSuggestions`.\n * @param payloadFactory - A function that receives a {@link PayloadFactoryData | object}\n * with the Store state, getters, payload and metadata as parameter.\n * @returns A {@link AnyWire} wire that dispatches the action with the payload returned by the\n * payloadFactory.\n * @public\n */\nexport function wireDispatch<Payload>(\n  action: string,\n  payloadFactory: (params: PayloadFactoryData<Payload>) => any\n): AnyWire;\n/**\n * Creates a wire that dispatches an action to the store. This wire can be used in every event,\n * as it does not have a payload type associated.\n *\n * @param action - The full action path to dispatch. I.e. `x/querySuggestions/fetchSuggestions`.\n * @param staticPayload - A static payload to pass to the action which will be dispatched.\n * @returns {@link AnyWire} A wire that dispatches the action with the staticPayload payload.\n * @public\n */\nexport function wireDispatch(action: string, staticPayload: any): AnyWire;\n/**\n * Creates a wire that dispatches an action to the store. This wire will pass the payload\n * received in the observable to the action.\n *\n * @param action - The full action path to dispatch. I.e. `x/querySuggestions/fetchSuggestions`.\n * @typeParam Payload - The type of the payload that this wire will receive\n * @returns {@link Wire} A wire that dispatches the action with the payload that it receives\n * in the observable.\n * @public\n */\nexport function wireDispatch<Payload>(action: string): Wire<Payload>;\n// eslint-disable-next-line jsdoc/require-jsdoc\nexport function wireDispatch<Payload>(action: string, payload?: Payload): Wire<Payload> {\n  return (observable, store) =>\n    observable.subscribe(createSubscriptionCallback(store, 'dispatch', action, payload));\n}\n\n/**\n * Creates a wire that dispatches an action to the store, but without any payload. This wire can\n * be used in every event, as it does not have a payload type associated.\n *\n * @param action - The full action path to dispatch. I.e. `x/querySuggestions/fetchSuggestions`.\n * @returns {@link AnyWire} A wire that dispatches the action without any payload.\n * @public\n */\nexport function wireDispatchWithoutPayload(action: string): AnyWire {\n  return (observable, store) => observable.subscribe(() => store.dispatch(action));\n}\n\n/**\n * Creates a wires factory that can create wires that will invoke the service methods.\n *\n * @param service - The service to invoke its methods.\n * @returns A factory to create wires that invoke the service methods.\n * @public\n */\nexport function wireService<SomeService>(\n  service: SomeService & SubObject<SomeService, MonadicFunction>\n): WireService<SubObject<SomeService, MonadicFunction>> {\n  return (method, payload?) => {\n    return observable =>\n      observable.subscribe(\n        payload !== undefined\n          ? () => service[method](payload)\n          : observablePayload => service[method](observablePayload.eventPayload)\n      );\n  };\n}\n\n/**\n * Creates a wires factory that can create wires that will invoke the service methods but\n * without payload.\n *\n * @param service - The service to invoke its methods.\n * @returns A factory to create wires that invoke the service methods without payload.\n * @public\n */\nexport function wireServiceWithoutPayload<SomeService>(\n  service: SomeService & SubObject<SomeService, NiladicFunction>\n): WireServiceWithoutPayload<SubObject<SomeService, NiladicFunction>> {\n  return method => {\n    return observable => observable.subscribe(() => service[method]());\n  };\n}\n\n/**\n * Creates the callback function for the {@link wireCommit} and {@link wireDispatch}\n * subscriptions. It can be based on the payload as function which retrieves the observable\n * payload from the store, a static payload or the event value from the observable.\n *\n * @param store - The {@link RootXStoreState} store.\n * @param commitOrDispatch - The executor over store. It can be `commit` or `dispatch`.\n * @param mutationOrAction - The mutation or action to commit or dispatch respectively.\n * @param payload - The payload for the store executor. It can be a function which retrieves the\n * payload from the store, a static payload or the event value from the observable.\n * @typeParam Payload - The type of the payload to get the observable event value type.\n * @returns A function to commit or dispatch a payload value over store.\n * @internal\n */\nfunction createSubscriptionCallback<Payload>(\n  store: Store<RootXStoreState>,\n  commitOrDispatch: 'commit' | 'dispatch',\n  mutationOrAction: string,\n  payload?: Payload\n): (observableValue: WirePayload<Payload>) => void {\n  const storeExecutor = store[commitOrDispatch];\n  return typeof payload === 'function'\n    ? wirePayload => {\n        return storeExecutor(\n          mutationOrAction,\n          payload({\n            state: store.state,\n            getters: store.getters,\n            ...wirePayload\n          })\n        );\n      }\n    : payload !== undefined\n    ? () => {\n        storeExecutor(mutationOrAction, payload);\n      }\n    : observableValue => {\n        storeExecutor(mutationOrAction, observableValue.eventPayload);\n      };\n}\n"],"names":[],"mappings":"AAaA;;;;;;;;SAQgB,sBAAsB,CACpC,EAA6C;IAE7C,OAAO,CAAC,UAAU,EAAE,KAAK,KACvB,UAAU,CAAC,SAAS,CAAC,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE;QAC9C,EAAE,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC;KACvC,CAAC,CAAC;AACP,CAAC;AAuCD;SACgB,UAAU,CAAU,QAAgB,EAAE,OAAiB;IACrE,OAAO,CAAC,UAAU,EAAE,KAAK,KACvB,UAAU,CAAC,SAAS,CAAC,0BAA0B,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;AACzF,CAAC;AAED;;;;;;;;SAQgB,wBAAwB,CAAC,QAAgB;IACvD,OAAO,CAAC,UAAU,EAAE,KAAK,KAAK,UAAU,CAAC,SAAS,CAAC,MAAM,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;AACnF,CAAC;AAuCD;SACgB,YAAY,CAAU,MAAc,EAAE,OAAiB;IACrE,OAAO,CAAC,UAAU,EAAE,KAAK,KACvB,UAAU,CAAC,SAAS,CAAC,0BAA0B,CAAC,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;AACzF,CAAC;AAED;;;;;;;;SAQgB,0BAA0B,CAAC,MAAc;IACvD,OAAO,CAAC,UAAU,EAAE,KAAK,KAAK,UAAU,CAAC,SAAS,CAAC,MAAM,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;AACnF,CAAC;AAED;;;;;;;SAOgB,WAAW,CACzB,OAA8D;IAE9D,OAAO,CAAC,MAAM,EAAE,OAAQ;QACtB,OAAO,UAAU,IACf,UAAU,CAAC,SAAS,CAClB,OAAO,KAAK,SAAS;cACjB,MAAM,OAAO,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC;cAC9B,iBAAiB,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,iBAAiB,CAAC,YAAY,CAAC,CACzE,CAAC;KACL,CAAC;AACJ,CAAC;AAED;;;;;;;;SAQgB,yBAAyB,CACvC,OAA8D;IAE9D,OAAO,MAAM;QACX,OAAO,UAAU,IAAI,UAAU,CAAC,SAAS,CAAC,MAAM,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;KACpE,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;;AAcA,SAAS,0BAA0B,CACjC,KAA6B,EAC7B,gBAAuC,EACvC,gBAAwB,EACxB,OAAiB;IAEjB,MAAM,aAAa,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC;IAC9C,OAAO,OAAO,OAAO,KAAK,UAAU;UAChC,WAAW;YACT,OAAO,aAAa,CAClB,gBAAgB,EAChB,OAAO,CAAC;gBACN,KAAK,EAAE,KAAK,CAAC,KAAK;gBAClB,OAAO,EAAE,KAAK,CAAC,OAAO;gBACtB,GAAG,WAAW;aACf,CAAC,CACH,CAAC;SACH;UACD,OAAO,KAAK,SAAS;cACrB;gBACE,aAAa,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC;aAC1C;cACD,eAAe;gBACb,aAAa,CAAC,gBAAgB,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;aAC/D,CAAC;AACR;;;;"}

package/js/x-modules/scroll/components/window-scroll.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"window-scroll.vue.js","sources":["../../../../../src/x-modules/scroll/components/window-scroll.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { mixins } from 'vue-class-component';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { ScrollDirection, ScrollMixin, xComponentMixin } from '../../../components';\n  import { WireMetadata } from '../../../wiring';\n  import { scrollXModule } from '../x-module';\n  import { MainScrollId } from './scroll.const';\n\n  type ScrollableElement = 'html' | 'body';\n\n  /**\n   * The `WindowScroll` component listens to either the `html` or `body` DOM scroll events, and\n   * re-emits them as X Events. Additionally it also emits events related to the direction or\n   * current position of these elements scroll.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(scrollXModule)]\n  })\n  export default class WindowScroll extends mixins(ScrollMixin) {\n    /**\n     * Tag to identify the main scrollable element.\n     *\n     * @public\n     */\n    @Prop({ default: 'html' })\n    protected scrollableElement!: ScrollableElement;\n    /**\n     * Id to identify the component.\n     *\n     * @public\n     */\n    @Prop({ default: MainScrollId })\n    protected id!: string;\n\n    mounted(): void {\n      this.initAndListenElement();\n      this.$on('scroll', (position: number) => {\n        this.$x.emit('UserScrolled', position, this.createXEventMetadata());\n      });\n      this.$on('scroll:direction-change', (direction: ScrollDirection) => {\n        this.$x.emit('UserChangedScrollDirection', direction, this.createXEventMetadata());\n      });\n      this.$on('scroll:at-start', (hasReachedStart: boolean) => {\n        this.$x.emit('UserReachedScrollStart', hasReachedStart, this.createXEventMetadata());\n      });\n      this.$on('scroll:almost-at-end', (hasAlmostReachedEnd: boolean) => {\n        this.$x.emit(\n          'UserAlmostReachedScrollEnd',\n          hasAlmostReachedEnd,\n          this.createXEventMetadata()\n        );\n      });\n      this.$on('scroll:at-end', (hasReachedEnd: boolean) => {\n        this.$x.emit('UserReachedScrollEnd', hasReachedEnd, this.createXEventMetadata());\n      });\n    }\n\n    /**\n     * Sets the HTML element depending on {@link WindowScroll.scrollableElement}, and initialises\n     * its events.\n     *\n     * @internal\n     */\n    protected initAndListenElement(): void {\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-expect-error\n      this.$el = this.scrollableElement === 'body' ? document.body : document.documentElement;\n      this.$el.addEventListener('scroll', this.throttledStoreScrollData);\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    render(): void {}\n\n    /**\n     * Cleanup listeners.\n     */\n    beforeDestroy(): void {\n      this.$el.removeEventListener('scroll', this.throttledStoreScrollData);\n    }\n\n    /**\n     * Creates the metadata for the events of this component.\n     *\n     * @returns A {@link WireMetadata} for the events emitted by this component.\n     * @internal\n     */\n    protected createXEventMetadata(): Partial<WireMetadata> {\n      return { target: this.$el, id: this.id };\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nThe `WindowScroll` component manages the scroll state of the `body` or `html` elements. It does the\nnecessary calculations for knowing the direction of scroll, if the scroll has reached its starting\nposition, if it is about to reach its ending position or if it has already reached it end. Whenever\nthis state changes, it emits the appropiate X Event to the rest of the application\n\n### Custom usage\n\n#### Overriding the properties and using document scroll events.\n\n```vue\n<template>\n  <WindowScroll\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=\"example-main-scroll\"\n    throttleMs=\"100\"\n    distanceToBottom=\"300\"\n    scrollableElement=\"body\"\n  />\n</template>\n\n<script>\n  import { WindowScroll } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'ScrollIdTest',\n    components: {\n      WindowScroll\n    },\n    methods: {\n      scroll(position) {\n        console.log('scroll', position);\n      },\n      scrollDirectionChange(direction) {\n        console.log('scroll:direction-change', direction);\n      },\n      scrollAtStart() {\n        console.log('scroll:at-start', 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 body and XEvents.\n\nIf we want to listen scroll body we should do some changes in css for body. This is an example, so\ntherefore the height of body can be get any value that you want. The template style should have a\nsimilar styles the corresponding style for tag body like in the next example.\n\n```vue\n<template>\n  <WindowScroll\n    id=\"example-main-scroll\"\n    throttleMs=\"100\"\n    distanceToBottom=\"300\"\n    scrollableElement=\"body\"\n  />\n</template>\n\n<script>\n  import { WindowScroll } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'MainComponent',\n    components: {\n      WindowScroll\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<style lang=\"scss\">\n  html {\n    overflow: hidden;\n  }\n\n  body {\n    overflow-y: auto;\n    height: 100vh;\n  }\n</style>\n```\n\n## Vue Events\n\n- `scroll`: the event is emitted after the user scrolls in this container. The payload is the scroll\n  top distance in pixels.\n- `scroll:direction-change`: the event is emitted when the user changes the scroll direction. The\n  payload is the new scrolling direction.\n- `scroll:at-start`: the event is emitted when the user scrolls up to the initial position of the\n  scroll.\n- `scroll:almost-at-end`: the event is emitted when the user is about to reach the bottom part of\n  the scroll.\n- `scroll:at-end`: the event is emitted when the user has reached the bottom part of the scroll.\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserScrolled`: the event is emitted after the user scrolls in this container. The payload is the\n  scroll top distance in pixels.\n- `UserChangedScrollDirection`: the event is emitted when the user changes the scroll direction. The\n  payload is the new scrolling direction.\n- `UserReachedScrollStart`: the event is emitted when the user scrolls up to the initial position of\n  the scroll.\n- `UserAlmostReachedScrollEnd`: the event is emitted when the user is about to reach the bottom part\n  of the scroll.\n- `UserReachedScrollEnd`: the event is emitted when the user has reached the bottom part of the\n  scroll.\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"window-scroll.vue.js","sources":["../../../../../src/x-modules/scroll/components/window-scroll.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { mixins } from 'vue-class-component';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { ScrollDirection, ScrollMixin, xComponentMixin } from '../../../components';\n  import { WireMetadata } from '../../../wiring';\n  import { scrollXModule } from '../x-module';\n  import { MainScrollId } from './scroll.const';\n\n  type ScrollableElement = 'html' | 'body';\n\n  /**\n   * The `WindowScroll` component listens to either the `html` or `body` DOM scroll events, and\n   * re-emits them as X Events. Additionally it also emits events related to the direction or\n   * current position of these elements scroll.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(scrollXModule)]\n  })\n  export default class WindowScroll extends mixins(ScrollMixin) {\n    /**\n     * Tag to identify the main scrollable element.\n     *\n     * @public\n     */\n    @Prop({ default: 'html' })\n    protected scrollableElement!: ScrollableElement;\n    /**\n     * Id to identify the component.\n     *\n     * @public\n     */\n    @Prop({ default: MainScrollId })\n    protected id!: string;\n\n    mounted(): void {\n      this.initAndListenElement();\n      this.$on('scroll', (position: number) => {\n        this.$x.emit('UserScrolled', position, this.createXEventMetadata());\n      });\n      this.$on('scroll:direction-change', (direction: ScrollDirection) => {\n        this.$x.emit('UserChangedScrollDirection', direction, this.createXEventMetadata());\n      });\n      this.$on('scroll:at-start', (hasReachedStart: boolean) => {\n        this.$x.emit('UserReachedScrollStart', hasReachedStart, this.createXEventMetadata());\n      });\n      this.$on('scroll:almost-at-end', (hasAlmostReachedEnd: boolean) => {\n        this.$x.emit(\n          'UserAlmostReachedScrollEnd',\n          hasAlmostReachedEnd,\n          this.createXEventMetadata()\n        );\n      });\n      this.$on('scroll:at-end', (hasReachedEnd: boolean) => {\n        this.$x.emit('UserReachedScrollEnd', hasReachedEnd, this.createXEventMetadata());\n      });\n    }\n\n    /**\n     * Sets the HTML element depending on {@link WindowScroll.scrollableElement}, and initialises\n     * its events.\n     *\n     * @internal\n     */\n    protected initAndListenElement(): void {\n      this.$el = this.scrollableElement === 'body' ? document.body : document.documentElement;\n      this.$el.addEventListener('scroll', this.throttledStoreScrollData);\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    render(): void {}\n\n    /**\n     * Cleanup listeners.\n     */\n    beforeDestroy(): void {\n      this.$el.removeEventListener('scroll', this.throttledStoreScrollData);\n    }\n\n    /**\n     * Creates the metadata for the events of this component.\n     *\n     * @returns A {@link WireMetadata} for the events emitted by this component.\n     * @internal\n     */\n    protected createXEventMetadata(): Partial<WireMetadata> {\n      return { target: this.$el, id: this.id };\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nThe `WindowScroll` component manages the scroll state of the `body` or `html` elements. It does the\nnecessary calculations for knowing the direction of scroll, if the scroll has reached its starting\nposition, if it is about to reach its ending position or if it has already reached it end. Whenever\nthis state changes, it emits the appropiate X Event to the rest of the application\n\n### Custom usage\n\n#### Overriding the properties and using document scroll events.\n\n```vue\n<template>\n  <WindowScroll\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=\"example-main-scroll\"\n    throttleMs=\"100\"\n    distanceToBottom=\"300\"\n    scrollableElement=\"body\"\n  />\n</template>\n\n<script>\n  import { WindowScroll } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'ScrollIdTest',\n    components: {\n      WindowScroll\n    },\n    methods: {\n      scroll(position) {\n        console.log('scroll', position);\n      },\n      scrollDirectionChange(direction) {\n        console.log('scroll:direction-change', direction);\n      },\n      scrollAtStart() {\n        console.log('scroll:at-start', 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 body and XEvents.\n\nIf we want to listen scroll body we should do some changes in css for body. This is an example, so\ntherefore the height of body can be get any value that you want. The template style should have a\nsimilar styles the corresponding style for tag body like in the next example.\n\n```vue\n<template>\n  <WindowScroll\n    id=\"example-main-scroll\"\n    throttleMs=\"100\"\n    distanceToBottom=\"300\"\n    scrollableElement=\"body\"\n  />\n</template>\n\n<script>\n  import { WindowScroll } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'MainComponent',\n    components: {\n      WindowScroll\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<style lang=\"scss\">\n  html {\n    overflow: hidden;\n  }\n\n  body {\n    overflow-y: auto;\n    height: 100vh;\n  }\n</style>\n```\n\n## Vue Events\n\n- `scroll`: the event is emitted after the user scrolls in this container. The payload is the scroll\n  top distance in pixels.\n- `scroll:direction-change`: the event is emitted when the user changes the scroll direction. The\n  payload is the new scrolling direction.\n- `scroll:at-start`: the event is emitted when the user scrolls up to the initial position of the\n  scroll.\n- `scroll:almost-at-end`: the event is emitted when the user is about to reach the bottom part of\n  the scroll.\n- `scroll:at-end`: the event is emitted when the user has reached the bottom part of the scroll.\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserScrolled`: the event is emitted after the user scrolls in this container. The payload is the\n  scroll top distance in pixels.\n- `UserChangedScrollDirection`: the event is emitted when the user changes the scroll direction. The\n  payload is the new scrolling direction.\n- `UserReachedScrollStart`: the event is emitted when the user scrolls up to the initial position of\n  the scroll.\n- `UserAlmostReachedScrollEnd`: the event is emitted when the user is about to reach the bottom part\n  of the scroll.\n- `UserReachedScrollEnd`: the event is emitted when the user has reached the bottom part of the\n  scroll.\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/scroll/components/window-scroll.vue_rollup-plugin-vue_script.vue.js

@@ -151,8 +151,6 @@ let WindowScroll = class WindowScroll extends mixins(ScrollMixin) {
      * @internal
      */
     initAndListenElement() {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-expect-error
         this.$el = this.scrollableElement === 'body' ? document.body : document.documentElement;
         this.$el.addEventListener('scroll', this.throttledStoreScrollData);
     }