@empathyco/x-components 3.0.0-alpha.29 → 3.0.0-alpha.32

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

@@ -1,23 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [BaseScrollToTop](./x-components.basescrolltotop.md)
-
-## BaseScrollToTop class
-
-Renders a button with a default slot. This button will emit a UserClickedScrollToTop when clicked. The button will be shown either if it reaches a threshold and then the user scrolls up or just on the UserAlmostReachedScrollEnd event depending on whether the threshold config has been provided or not.
-
-<b>Signature:</b>
-
-```typescript
-export default class BaseScrollToTop extends Vue 
-```
-<b>Extends:</b> Vue
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [animation](./x-components.basescrolltotop.animation.md) |  | Vue \| string | Animation to use for showing/hiding the button. |
-|  [scrollId?](./x-components.basescrolltotop.scrollid.md) |  | string | <i>(Optional)</i> Id of the target scroll component. |
-|  [thresholdPx?](./x-components.basescrolltotop.thresholdpx.md) |  | number | <i>(Optional)</i> Threshold in pixels from the top to show the button. |
-

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

@@ -1,24 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [IdentifierResultsActions](./x-components.identifierresultsactions.md) &gt; [setUrlParams](./x-components.identifierresultsactions.seturlparams.md)
-
-## IdentifierResultsActions.setUrlParams() method
-
-Checks if the url has a query on it and then updates the state with that value.
-
-<b>Signature:</b>
-
-```typescript
-setUrlParams(urlParams: UrlParams): void;
-```
-
-## Parameters
-
-|  Parameter | Type | Description |
-|  --- | --- | --- |
-|  urlParams | [UrlParams](./x-components.urlparams.md) | List of params from the url. |
-
-<b>Returns:</b>
-
-void
-

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

@@ -1,13 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [WireMetadata](./x-components.wiremetadata.md) &gt; [origin](./x-components.wiremetadata.origin.md)
-
-## WireMetadata.origin property
-
-The origin for tagging purposes.
-
-<b>Signature:</b>
-
-```typescript
-origin?: QueryOrigin;
-```

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

@@ -1,13 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [XEventsTypes](./x-components.xeventstypes.md) &gt; [UserAlmostReachedScrollEnd](./x-components.xeventstypes.useralmostreachedscrollend.md)
-
-## XEventsTypes.UserAlmostReachedScrollEnd property
-
-The user has almost reached the scroll end. \* Payload: The distance missing to end position position.
-
-<b>Signature:</b>
-
-```typescript
-UserAlmostReachedScrollEnd: number;
-```

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

@@ -1,13 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [XEventsTypes](./x-components.xeventstypes.md) &gt; [UserReachedScrollEnd](./x-components.xeventstypes.userreachedscrollend.md)
-
-## XEventsTypes.UserReachedScrollEnd property
-
-The user has reached the scroll end. \* Payload: none.
-
-<b>Signature:</b>
-
-```typescript
-UserReachedScrollEnd: void;
-```

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

@@ -1,13 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [XEventsTypes](./x-components.xeventstypes.md) &gt; [UserReachedScrollStart](./x-components.xeventstypes.userreachedscrollstart.md)
-
-## XEventsTypes.UserReachedScrollStart property
-
-The user has reached the scroll start. \* Payload: none.
-
-<b>Signature:</b>
-
-```typescript
-UserReachedScrollStart: void;
-```

package/docs/API-reference/api/x-types.redirection.tagging.md

@@ -1,15 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [@empathyco/x-types](./x-types.md) &gt; [Redirection](./x-types.redirection.md) &gt; [tagging](./x-types.redirection.tagging.md)
-
-## Redirection.tagging property
-
-Redirect tagging.
-
-<b>Signature:</b>
-
-```typescript
-tagging: {
-        click: Tagging;
-    };
-```

package/docs/API-reference/api/x-types.result.tagging.md

@@ -1,13 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [@empathyco/x-types](./x-types.md) &gt; [Result](./x-types.result.md) &gt; [tagging](./x-types.result.tagging.md)
-
-## Result.tagging property
-
-[Result tagging](./x-types.resulttagging.md)<!-- -->.
-
-<b>Signature:</b>
-
-```typescript
-tagging: ResultTagging;
-```

package/docs/API-reference/api/x-types.resulttagging.add2cart.md

@@ -1,13 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [@empathyco/x-types](./x-types.md) &gt; [ResultTagging](./x-types.resulttagging.md) &gt; [add2cart](./x-types.resulttagging.add2cart.md)
-
-## ResultTagging.add2cart property
-
-[add to cart tagging](./x-types.tagging.md)<!-- -->.
-
-<b>Signature:</b>
-
-```typescript
-add2cart: Tagging;
-```

package/docs/API-reference/api/x-types.resulttagging.checkout.md

@@ -1,13 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [@empathyco/x-types](./x-types.md) &gt; [ResultTagging](./x-types.resulttagging.md) &gt; [checkout](./x-types.resulttagging.checkout.md)
-
-## ResultTagging.checkout property
-
-[checkout tagging](./x-types.tagging.md)<!-- -->.
-
-<b>Signature:</b>
-
-```typescript
-checkout: Tagging;
-```

package/docs/API-reference/api/x-types.resulttagging.click.md

@@ -1,13 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [@empathyco/x-types](./x-types.md) &gt; [ResultTagging](./x-types.resulttagging.md) &gt; [click](./x-types.resulttagging.click.md)
-
-## ResultTagging.click property
-
-[click tagging](./x-types.tagging.md)<!-- -->.
-
-<b>Signature:</b>
-
-```typescript
-click: Tagging;
-```

package/docs/API-reference/api/x-types.resulttagging.md

@@ -1,22 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [@empathyco/x-types](./x-types.md) &gt; [ResultTagging](./x-types.resulttagging.md)
-
-## ResultTagging interface
-
-The result tagging events.
-
-<b>Signature:</b>
-
-```typescript
-export interface ResultTagging 
-```
-
-## Properties
-
-|  Property | Type | Description |
-|  --- | --- | --- |
-|  [add2cart](./x-types.resulttagging.add2cart.md) | [Tagging](./x-types.tagging.md) | [add to cart tagging](./x-types.tagging.md)<!-- -->. |
-|  [checkout](./x-types.resulttagging.checkout.md) | [Tagging](./x-types.tagging.md) | [checkout tagging](./x-types.tagging.md)<!-- -->. |
-|  [click](./x-types.resulttagging.click.md) | [Tagging](./x-types.tagging.md) | [click tagging](./x-types.tagging.md)<!-- -->. |
-

package/docs/API-reference/components/common/scroll/x-components.base-id-scroll.md

@@ -1,216 +0,0 @@
----
-id: x-components.x-components.base-id-scroll
-title: Base Id Scroll
-sidebar_label: Base Id Scroll
----
-# base-id-scroll
-
-> Base scroll component that depending on base scroll component and the user interaction emits
-> different x events for knowing when the user scrolls, the direction of scroll and if user
-> reaches the start or end.
-
-## Props
-
-| Name                            | Description                                                                                                                                                   | Type                 | Default                 |
-| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ----------------------- |
-| <code>throttleMs</code>         | Time duration to ignore the subsequent scroll events after an emission.<br />Higher values will decrease events precision but can prevent performance issues. | <code>number</code>  | <code></code>           |
-| <code>distanceToBottom</code>   | Distance to the end of the scroll that when reached will emit the<br />`scroll:about-to-end` event.                                                           | <code>number</code>  | <code></code>           |
-| <code>id</code>                 | Id to identify the component.                                                                                                                                 | <code>string</code>  | <code>'scrollId'</code> |
-| <code>resetOnQueryChange</code> | If true (default), sets the scroll position of the {@link BaseScroll} component to top when<br />an {@link XEventsTypes.UserAcceptedAQuery} event is emitted. | <code>boolean</code> | <code>true</code>       |
-
-## Slots
-
-| Name                 | Description | Bindings<br />(name - type - description) |
-| -------------------- | ----------- | ----------------------------------------- |
-| <code>default</code> |             | None                                      |
-
----
-
-# Example
-
-The BaseIdScroll is a component that wraps the BaseScroll and provides it for a unique id.
-
-## Events
-
-A list of events that the component will emit:
-
-- `UserScrolled`: emitted after the user scrolls in this container. The payload is the scroll top
-  distance in pixels.
-- `UserChangedScrollDirection`: emitted when the user changes the scroll direction. The payload is
-  the new scrolling direction.
-- `UserReachedScrollStart`: emitted when the user scrolls up to the initial position of the scroll.
-- `UserAlmostReachedScrollEnd`: emitted when the user is about to reach the bottom part of the
-  scroll.
-- `UserReachedScrollEnd`: emitted when the user has reached the bottom part of the scroll.
-
-## Customized usage
-
-### Overriding the properties
-
-It renders an element with scroll, with the content passed in the `default slot`.
-
-```vue
-<template>
-  <BaseIdScroll id="exampleScrollId" throttleMs="50" distanceToBottom="300">
-    <div class="content-scroll">
-      <span>content1</span>
-      <span>content1</span>
-    </div>
-  </BaseIdScroll>
-</template>
-
-<script>
-import { BaseIdScroll } from "@empathyco/x-components";
-
-export default {
-  name: "ScrollIdTest",
-  components: {
-    BaseIdScroll
-  }
-};
-</script>
-```
-
-## Customized usage
-
-### Using scroll events.
-
-```vue
-<template>
-  <BaseIdScroll
-    @scroll="scroll"
-    @scroll:direction-change="scrollDirectionChange"
-    @scroll:at-start="scrollAtStart"
-    @scroll:almost-at-end="scrollAlmostAtEnd"
-    @scroll:at-end="scrollAtEnd"
-    id="exampleScrollId"
-    throttleMs="50"
-    distanceToBottom="300"
-  >
-    <div class="content-scroll">
-      <span>content1</span>
-      <span>content1</span>
-    </div>
-  </BaseIdScroll>
-</template>
-
-<script>
-import { BaseIdScroll } from "@empathyco/x-components";
-
-export default {
-  name: "ScrollIdTest",
-  components: {
-    BaseIdScroll
-  },
-  methods: {
-    scroll(position) {
-      console.log("scroll", position);
-    },
-    scrollDirectionChange(direction) {
-      console.log("scroll:direction-change", direction);
-    },
-    scrollAtStart() {
-      console.log("scroll:at-start");
-    },
-    scrollAlmostAtEnd(distance) {
-      console.log("scroll:almost-at-end", distance);
-    },
-    scrollAtEnd() {
-      console.log("scroll:at-end");
-    }
-  }
-};
-</script>
-```
-
-## Customized usage
-
-### Using XEvents.
-
-You can use the XEvents subscribing to them.
-
-```vue
-<template>
-  <BaseIdScroll throttleMs="50" distanceToBottom="300">
-    <div class="content-scroll">
-      <span>content1</span>
-      <span>content1</span>
-    </div>
-  </BaseIdScroll>
-</template>
-
-<script>
-import { BaseIdScroll } from "@empathyco/x-components";
-
-export default {
-  name: "ScrollIdTest",
-  components: {
-    BaseIdScroll
-  },
-  mounted() {
-    this.$x.on("UserScrolled").subscribe(event => {
-      console.log(event);
-    });
-    this.$x.on("UserChangedScrollDirection").subscribe(event => {
-      console.log(event);
-    });
-    this.$x.on("UserReachedScrollStart").subscribe(event => {
-      console.log(event);
-    });
-    this.$x.on("UserAlmostReachedScrollEnd").subscribe(event => {
-      console.log(event);
-    });
-    this.$x.on("UserReachedScrollEnd").subscribe(event => {
-      console.log(event);
-    });
-  }
-};
-</script>
-```
-
-## Avoid reset scroll on query change
-
-Set to false the reset scroll on query change feature which is true by default.
-
-```vue
-<template>
-  <BaseIdScroll
-    throttleMs="50"
-    distanceToBottom="300"
-    :resetOnQueryChange="false"
-  >
-    <div class="content-scroll">
-      <span>content1</span>
-      <span>content1</span>
-    </div>
-  </BaseIdScroll>
-</template>
-
-<script>
-import { BaseIdScroll } from "@empathyco/x-components";
-
-export default {
-  name: "ScrollIdTest",
-  components: {
-    BaseIdScroll
-  },
-  mounted() {
-    this.$x.on("UserScrolled").subscribe(event => {
-      console.log(event);
-    });
-    this.$x.on("UserChangedScrollDirection").subscribe(event => {
-      console.log(event);
-    });
-    this.$x.on("UserReachedScrollStart").subscribe(event => {
-      console.log(event);
-    });
-    this.$x.on("UserAlmostReachedScrollEnd").subscribe(event => {
-      console.log(event);
-    });
-    this.$x.on("UserReachedScrollEnd").subscribe(event => {
-      console.log(event);
-    });
-  }
-};
-</script>
-```

package/docs/API-reference/components/common/scroll/x-components.base-main-scroll.md

@@ -1,170 +0,0 @@
----
-id: x-components.x-components.base-main-scroll
-title: Base Main Scroll
-sidebar_label: Base Main Scroll
----
-# BaseMainScroll
-
-> Main scroll component that depending on the user interactivity emits different events for
-> knowing when the user scrolls, the direction of scroll and if user reaches the start or end.
-> All this about main scroll.
-
-## Props
-
-| Name                          | Description                                                                                                                                                   | Type                       | Default                    |
-| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- | -------------------------- |
-| <code>throttleMs</code>       | Time duration to ignore the subsequent scroll events after an emission.<br />Higher values will decrease events precision but can prevent performance issues. | <code>number</code>        | <code>100</code>           |
-| <code>distanceToBottom</code> | Distance to the end of the scroll that when reached will emit the<br />`scroll:about-to-end` event.                                                           | <code>number</code>        | <code>100</code>           |
-| <code>tag</code>              | Tag to identify the main scrollable element.                                                                                                                  | <code>ScrollableTag</code> | <code>'html'</code>        |
-| <code>id</code>               | Id to identify the component.                                                                                                                                 | <code>string</code>        | <code>'main-scroll'</code> |
-
-## Events
-
-| Event name              | Type      | Description |
-| ----------------------- | --------- | ----------- |
-| scroll                  | undefined |
-| scroll:direction-change | undefined |
-| scroll:at-start         |           |
-| scroll:almost-at-end    | undefined |
-| scroll:at-end           |           |
-
----
-
-# Example
-
-The BaseMainScroll is a component that manage the states of main scroll that can be document or
-body. The component does the necessary calculations for knowing the direction of scroll, if the
-scroll has reached to start or to end, and is about to reaching to end. The components emits the
-next events and XEvents depending of movement that realize the user:
-
-## Customized usage
-
-### Overriding the properties and using document scroll events.
-
-```vue
-<template>
-  <BaseMainScroll
-    @scroll="scroll"
-    @scroll:direction-change="scrollDirectionChange"
-    @scroll:at-start="scrollAtStart"
-    @scroll:almost-at-end="scrollAlmostAtEnd"
-    @scroll:at-end="scrollAtEnd"
-    id="example-main-scroll"
-    throttleMs="100"
-    distanceToBottom="300"
-    tag="document"
-  />
-</template>
-
-<script>
-import { BaseMainScroll } from "@empathyco/x-components";
-
-export default {
-  name: "ScrollIdTest",
-  components: {
-    BaseMainScroll
-  },
-  methods: {
-    scroll(position) {
-      console.log("scroll", position);
-    },
-    scrollDirectionChange(direction) {
-      console.log("scroll:direction-change", direction);
-    },
-    scrollAtStart() {
-      console.log("scroll:at-start");
-    },
-    scrollAlmostAtEnd(distance) {
-      console.log("scroll:almost-at-end", distance);
-    },
-    scrollAtEnd() {
-      console.log("scroll:at-end");
-    }
-  }
-};
-</script>
-```
-
-## Customized usage
-
-### Using body and XEvents.
-
-If we want to listen scroll body we should do some changes in css for body. This is an example, so
-therefore the height of body can be get any value that you want. The template style should have a
-similar styles the corresponding style for tag body like in the next example.
-
-```vue
-<template>
-  <BaseMainScroll
-    id="example-main-scroll"
-    throttleMs="100"
-    distanceToBottom="300"
-    tag="body"
-  />
-</template>
-
-<script>
-import { BaseMainScroll } from "@empathyco/x-components";
-
-export default {
-  name: "MainComponent",
-  components: {
-    BaseMainScroll
-  },
-  mounted() {
-    this.$x.on("UserScrolled").subscribe(event => {
-      console.log(event);
-    });
-    this.$x.on("UserChangedScrollDirection").subscribe(event => {
-      console.log(event);
-    });
-    this.$x.on("UserReachedScrollStart").subscribe(event => {
-      console.log(event);
-    });
-    this.$x.on("UserAlmostReachedScrollEnd").subscribe(event => {
-      console.log(event);
-    });
-    this.$x.on("UserReachedScrollEnd").subscribe(event => {
-      console.log(event);
-    });
-  }
-};
-</script>
-<style lang="scss">
-html {
-  overflow: hidden;
-}
-
-body {
-  overflow-y: auto;
-  height: 100vh;
-}
-</style>
-```
-
-## Vue Events:
-
-- `scroll`: the event is emitted after the user scrolls in this container. The payload is the scroll
-  top distance in pixels.
-- `scroll:direction-change`: the event is emitted when the user changes the scroll direction. The
-  payload is the new scrolling direction.
-- `scroll:at-start`: the event is emitted when the user scrolls up to the initial position of the
-  scroll.
-- `scroll:almost-at-end`: the event is emitted when the user is about to reach the bottom part of
-  the scroll.
-- `scroll:at-end`: the event is emitted when the user has reached the bottom part of the scroll.
-
-## Events
-
-A list of events that the component will emit:
-
-- `UserScrolled`: the event is emitted after the user scrolls in this container. The payload is the
-  scroll top distance in pixels.
-- `UserChangedScrollDirection`: the event is emitted when the user changes the scroll direction. The
-  payload is the new scrolling direction.
-- `UserReachedScrollStart`: the event is emitted when the user scrolls up to the initial position of
-  the scroll.
-- `UserAlmostReachedScrollEnd`: the event is emitted when the user is about to reach the bottom part
-  of the scroll.
-- `UserReachedScrollEnd`: the event is emitted when the user has reached the bottom part of the
-  scroll.

package/docs/css/global.scss

@@ -1 +0,0 @@
-$montserrat-font: Montserrat, sans-serif;

package/docs/css/utils/utils.scss

@@ -1,35 +0,0 @@
-@import '../global';
-
-.next-item {
-  border-radius: 10px;
-  padding: 15px;
-  display: flex;
-  text-decoration: none;
-  align-items: center;
-  width: 33%;
-  &:link {
-    text-decoration: none;
-  }
-  &:hover {
-    background-color: #e25c40 !important;
-  }
-  &__image {
-    height: 50px;
-    width: 50px;
-    margin: 0 10px 0 0 !important;
-    border: 0 !important;
-    filter: brightness(0) invert(1);
-  }
-  & &__text {
-    font-size: 16px;
-    text-align: center;
-    font-weight: 300;
-    font-family: $montserrat-font;
-  }
-  &__arrow {
-    border: 0 !important;
-    height: 20px;
-    margin: 0 0 0 auto !important;
-    filter: brightness(0) invert(1);
-  }
-}

package/docs/css/xcomponents/clear-search-input.scss

@@ -1,9 +0,0 @@
-.x-clear-search-input {
-  transition: opacity 0.3s ease-in-out;
-  border: 1px solid gray;
-  margin-left: 5px;
-  border-radius: 5px;
-  &--has-empty-query {
-    opacity: 0;
-  }
-}

package/docs/css/xcomponents/index.scss

@@ -1,16 +0,0 @@
-@import '../global';
-
-.x-query-suggestions{
-  list-style-type: none;
-  width: 250px;
-  .x-query-suggestion {
-    border: 0;
-    background: none;
-  }
-}
-.x-playground {
-  text-align: center;
-  @import 'clear-search-input';
-  @import 'search-input';
-  @import 'suggestions';
-}

package/docs/css/xcomponents/search-input.scss

@@ -1,10 +0,0 @@
-.x-search-input {
-  border: 1px solid gray;
-  border-radius: 5px;
-  width: 150px;
-  transition: width 0.4s ease-in-out;
-  &:focus {
-    width: 260px;
-    outline: none;
-  }
-}