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

package/docs/build-search-ui/web-archetype-integration-guide.md

@@ -1,10 +1,5 @@
 ---
-id: x-components.web-archetype-integration-guide
-title: Web Archetype Integration Guide
-sidebar_label: Web Archetype Integration Guide
----
----
-title: Integrate Interface X Archetype
+title: Integrate Interface X Archetype into an existing website
 tags:
   - integration
   - archetype
@@ -15,169 +10,177 @@ tags:
   - archetype integration
 ---
 
-# Integrate Interface X Archetype
-
-In this tutorial, you’ll learn how to integrate the Interface X Archetype project in your
-store in a matter of minutes so you can develop a search interface layer based on predefined
-features and components.
-
-For this tutorial, the Empathy Search API is used, but you can use any search API. This guide
-requires knowledge of JavaScript and Vue.js.
+# Integrate Interface X Archetype into an existing website
 
-::: note Before you begin
+Once you have finished developing or extending your search interface using the
+Interface X Archetype project you will probably want to integrate it into your current
+store.
 
-To integrate Interface X Archetype as a search UI layer, you need:
+The integration is a 2-steps process:
 
-- **Empathy Search API** (or any search API that you use to retrieve search data).
-- **Empathy Search Adapter** to communicate with the Empathy Search API (or any search adapter to
-  connect with the search API you are using).
+- Load Interface X script.
+- Initialise the Interface X.
 
-:::
+Depending on your business needs, there are 2 different ways of making this integration process:
+auto initialising, or initialising on demand.
 
-##### Steps to integrate X Archetype project:
+## Auto initialisation
 
-1. **Clone** the X Archetype project and **initialize** your repository.
-2. Install the **project dependencies** and execute the project.
-3. Configure the **search adapter**.
-4. Configure the **xPlugin**.
+This is the easiest way to integrate the Interface X project in a website. The way to do so is
+by first defining an initialisation object or function, and then loading the Interface X
+script.
 
-## 1. Clone the project and initialize your repository
+### 1. Add a snippet configuration
 
-Clone the [X Archetype project](https://github.com/empathyco/x-archetype.git) from the GitHub
-repository to your target folder. You need a non-initialized repository, so make sure you remove the
-git folder from the cloned project.
+The snippet configuration is needed by Interface X to know the API it must use, the language or
+currency it should display the texts in, or tagging parameters to enrich the data and provide better
+insights on how users search.
 
-```batch
-// Clone the X Archetype project from GitHub
-git clone --depth 1 https://github.com/empathyco/x-archetype.git <your-target-folder>
+If your configuration values are easy to retrieve or static, you can simply use an object.
 
-// Remove the git folder
-rm -rf .git
+```js
+window.initX = {
+  instance: 'my-store',
+  env: 'live',
+  scope: 'desktop',
+  lang: 'en',
+  currency: 'EUR',
+  consent: false
+};
 ```
 
-::: develop
-
-You can use [Degit](https://github.com/Rich-Harris/degit) to clone the git repository without
-downloading the entire git history:
-`npx degit https://github.com/empathyco/x-archetype.git <your-target-folder>`.
-
-:::
-
-Once you have cloned the project and removed the git history from the project, initialize the
-repository from the root directory.
-
-```batch
-// Initialize the repository
-git init
-git remote add origin <your-repository-url>
-git add .
-git commit -m "Initial X-Components Setup"
-git push -u origin main
+Otherwise, if you need to retrieve values dynamically, or execute any kind of logic before the
+initialisation you can also use a function:
+
+```js
+window.initX = function () {
+  return {
+    instance: 'my-store',
+    env: location.href.includes('.pre.') ? 'staging' : 'live',
+    scope: 'web',
+    lang: localStorage.get('lang'),
+    currency: localStorage.get('currency'),
+    consent: localStorage.get('consent')
+  };
+};
 ```
 
-Then, replace the current repository name (`@empathyco/x-archetype`) with the name of your
-repository in the `package.json` file.
-
-```json
-// Define your repository
-{
-   "name": "<your-repo>",
-   "author": "Empathy Systems Corporation S.L.",
-   …
- }
-
+You can read more about the [Snippet Configuration](#snippet-configuration) below.
+
+### 2. Load the Interface&nbsp;X script
+
+Once you have defined your snippet configuration either as an object or a function, you can insert
+the Interface&nbsp;X script. This script is hosted in a URL of this shape
+`https://x.<environment?>.empathy.co/<instance>/app.js`.
+
+For example, supposing that `my-store` is the instance, and you want to load the production script,
+you can add to your HTML the following scripts.
+
+```html
+<script>
+  window.initX = {
+    instance: 'my-store',
+    env: 'live',
+    scope: 'desktop',
+    lang: 'en',
+    currency: 'EUR',
+    consent: false
+  };
+</script>
+<script src="https://x.empathy.co/my-store/app.js"></script>
 ```
 
-## 2. Install the dependencies and execute the project
-
-Install the project dependencies via `npm` in the root folder of your cloned repository. Then, you
-can run the project.
-
-```batch
-// Install the dependencies via npm
-npm install
-
-// Execute the project
-npm run serve
+Or if you want to load the staging version, you just have to change the script `src` attribute to
+point to the staging environment:
+
+```html
+<script>
+  window.initX = {
+    instance: 'my-store',
+    env: 'live', // Note that here you are using production API with the staging version of Interface X
+    scope: 'desktop',
+    lang: 'en',
+    currency: 'EUR',
+    consent: false
+  };
+</script>
+<script src="https://x.staging.empathy.co/my-store/app.js"></script>
 ```
 
-::: interact  
-For a full list of the project dependencies, check the
-[`package.json`](https://github.com/empathyco/x-archetype/blob/main/package.json) file in the
-Interface&nbsp;X&nbsp;Archetype repository. :::
-
-## 3. Configure the search adapter
-
-Before using your project, configure the Empathy Search Adapter in the
-`x-archetype/src/adapter/adapter.ts` file, using the Empathy Adapter Builder to make it work with
-the Empathy Search API. The Empathy Search Adapter contains a sample configuration for setup, global
-configurations, or mappers that points to a demo environment. You need to make some adjustments in
-the configuration according to the search features you use in your project.
-
-Export the required search adapter with your configuration as you will need it for the search
-[xPlugin configuration](web-archetype-integration-guide.md#_4-configure-the-plugin).
-
-::: interact For detailed information about other configuration options in the Empathy Search
-Adapter, go to the
-[x-adapter repository](https://github.com/empathyco/x/tree/main/packages/search-adapter). :::
-
-::: note Although you configure the values for the `instance`, `language`, `scope`, and `endpoint`
-options when integrating the project, you can still change these values when the project is
-deployed. Use the `/x-archetype/public/snippet-script.js` file to perform hot changes for `lang`,
-`store`, `device`, and `catalog` parameters.
-
-For example, you may configure the adapter to use EN as `lang` so that when you search, the results
-are displayed in English. However, if you want to deploy the application in Spain, you want the
-`lang` to be ES. You change these values in the `snippet-script.js` file.
+This way, when the Interface&nbsp;X JavaScript file is loaded, it will retrieve the configuration
+from the object or function that you defined before. Nothing else is required.
 
-:::
+## Initialise on demand
 
-## 4. Configure the plugin
+If you want to have more manual control on when the Interface&nbsp;X is loaded, you can still do so.
+Instead of defining an initialisation object or function upfront like in
+[Auto initialisation](#auto-initialisation), you can invoke a function with these options that will
+initialise Interface&nbsp;X.
 
-The `xPlugin` initializes the properties needed by the X&nbsp;Components. It has key options that
-you can configure in the `/x-archetype/src/x-components/plugin.options.ts` file.
+### 1. Load the Interface&nbsp;X script
 
-Since the X&nbsp;Archetype project operates as a layer and is designed to be integrated on top of
-any kind of website regardless the chosen technology, the `XInstaller` utility and its
-`installXOptions` object are designed to install the xPlugin, adding the connection between the
-X&nbsp;Components and the search API and bootstrapping the entire application with powerful APIs
-that are available in the `window.X` object.
+First, load the Interface&nbsp;X script. As you may already know, it is hosted in a URL of this
+shape: `https://x.<environment?>.empathy.co/<instance>/app.js`.
 
-To configure the xPlugin, run this code:
+For example, supposing that `my-store` is the instance, and you want to load the production script,
+you can add to your HTML the following scripts:
 
-```typescript
-import { InstallXOptions, XInstaller } from '@empathyco/x-components';
-import App from './App.vue';
-import store from './store';
-import { adapter } from '../adapter';
-
-export const installXOptions: InstallXOptions = {
-  adapter,
-  store,
-  app: App
-};
-
-new XInstaller(installXOptions).init({
-  instance: '<your-search-api-instance>',
-  lang: '<your-application-language>',
-  scope: '<your-application-scope>'
-});
+```html
+<script src="https://x.empathy.co/my-store/app.js"></script>
 ```
 
----
+For loading the staging version simply change the `src` attribute to the staging environment:
 
-### Next steps
-
-Once you have integrated the Interface&nbsp;X&nbsp;Archetype in your store, you're ready to start
-using the X&nbsp;Archetype as is or extend the search and discovery experience to meet your business
-needs:
+```html
+<script src="https://x.staging.empathy.co/my-store/app.js"></script>
+```
 
-- Change the configuration of [X Components](web-use-x-components-guide.md) or create new ones.
-- Adapt the
-  [design system](https://github.com/empathyco/x/blob/main/packages/x-components/contributing/design-system.md)
-  to your branding.
-- Manage
-  [internationalization options](https://github.com/empathyco/x-archetype/blob/main/docs/i18n.md) to
-  support different languages.
+### 2. Initialise Interface&nbsp;X
+
+Loading the Interface&nbsp;X script and not providing a `initX` configuration will make it create an
+initialisation function in the [X API](#x-api) object that you can invoke whenever you want. In this
+example we are calling it immediately after loading the Interface&nbsp;X script, but it can be
+invoked at any time. Note that you should only call this function **once**.
+
+```html
+<script src="https://x.empathy.co/my-store/app.js"></script>
+<script>
+  window.X.init({
+    instance: 'my-store',
+    env: 'live',
+    scope: 'desktop',
+    lang: 'en',
+    currency: 'EUR',
+    consent: false
+  });
+</script>
+```
 
-<!-- add links to design system and internationalization content pages when ready-->
+## Snippet configuration
+
+The snippet configuration allows you to configure certain parts of the Interface&nbsp;X project like
+language, the currency, inform whether the user has given us his consent to process personal data.
+
+| Name                  | Type                                                                                 | Required | Description                                                                                                                                                                                                                                                                                     |
+| --------------------- | ------------------------------------------------------------------------------------ | :------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| instance              | `string`                                                                             |    ✅    | The identifier of the API client instance. Should be provided by Empathy                                                                                                                                                                                                                        |
+| env                   | `'live'` &#124; `'staging'`                                                          |          | The API environment to use. Note that you can use the production version of your Interface&nbsp;X with the staging API, or viceversa.                                                                                                                                                           |
+| scope                 | `string`                                                                             |          | The context name where the search interface is being executed. I.e. `mobile`, `mobile-app`, `tablet`, `desktop`                                                                                                                                                                                 |
+| lang                  | `string`                                                                             |    ✅    | The language to use. By default this lang is used for both the front-end and the API requests                                                                                                                                                                                                   |
+| searchLang            | `string`                                                                             |          | A language to use only for the API requests                                                                                                                                                                                                                                                     |
+| consent               | `boolean`                                                                            |    ✅    | Whether the user has allowed to process its personal data or not. X-Components do not track or process any personal data. This parameter is used to generate a unique session id                                                                                                                |
+| documentDirection     | `'ltr'` &#124; `'rtl'`                                                               |          | The writing direction that the X Components should use                                                                                                                                                                                                                                          |
+| currency              | `string`                                                                             |    ✅    | The currency identifier. Used to configure how prices are shown                                                                                                                                                                                                                                 |
+| callbacks             | `Record<XEventName, (payload: XEventPayload<Event>, metadata: WireMetadata) => void` |          | A record of callbacks where the key is the event to listen, and the value is the callback to be executed whenever the event is emitted. For example, to listen to the `UserAcceptedAQuery` event: `{ UserAcceptedAQuery({ eventPayload }) { console.log('UserAcceptedAQuery', eventPayload); }` |
+| isSpa                 | `boolean`                                                                            |          | True when the X Components archetype is being run on top of an SPA.                                                                                                                                                                                                                             |
+| &lt;extra parameters> | `any`                                                                                |          | Any other parameter to be sent directly to the API calls. For example, some times is needed to filter the search catalog with a warehouse parameter. In that case you can just add `warehouse: <your-warehouse-identifier>` to the snippet config.                                              |
+
+## X API
+
+The X API allows your website to communicate with Interface&X. It is a set of utilities that helps
+to integrate Interface&X into your website.
+
+| Function | Parameters                                                                     | Description                                                 |
+| -------- | ------------------------------------------------------------------------------ | ----------------------------------------------------------- |
+| init     | - [Snippet Configuration](#snippet-configuration) - The initialisation options | [Initialises Interface X on demand](#initialise-on-demand). |
+| search   | - query (Optional) - The query to open Interface&nbsp;X with                   | Opens Interface&nbsp;X with the given search query.         |

package/docs/build-search-ui/web-use-x-components-guide.md

@@ -1,9 +1,4 @@
 ---
-id: x-components.web-use-x-components-guide
-title: Web Use X Components Guide
-sidebar_label: Web Use X Components Guide
----
----
 title: Use & configure Interface X Components in your project
 tags:
   - configuration

package/docs/build-search-ui/web-x-components-integration-guide.md

@@ -1,9 +1,4 @@
 ---
-id: x-components.web-x-components-integration-guide
-title: Web X Components Integration Guide
-sidebar_label: Web X Components Integration Guide
----
----
 title: Integrate Interface X Components in your Vue application
 tags:
   - integration
@@ -20,7 +15,7 @@ in your own project to craft enticing Vue search experiences for your shop in a
 
 ::: interact If you are looking to use the ready-to-go project Interface X Archetype as
 your starting point, see
-**[Integrate Interface X Archetype project](/develop-empathy-platform/build-search-ui/web-archetype-integration-guide.md)**.
+**[Interface X Archetype Development](/develop-empathy-platform/build-search-ui/web-archetypedevelopment-guide.md)**.
 :::
 
 For this tutorial, the Empathy Search API is used, but you can use any search API. This step-by-step
@@ -169,9 +164,9 @@ Vue.use(xPlugin, { adapter, store });
 Watch how our frontend Team Lead, [Iván Tajes](https://github.com/tajespasarela), integrates the
 Interface X Components in a project from scratch.
 
-<VideoContent 
+<VideoContent
 title="Want to learn more?"
-source="/assets/media/videos/How-to-use-X-components-in-a-real-project.mp4" 
+source="/assets/media/videos/How-to-use-X-components-in-a-real-project.mp4"
 poster="/assets/media/videos/How-to-use-X-components-in-a-real-project.jpeg"
 :links="[
   {

package/docs/build-search-ui/x-architecture/README.md

@@ -1,9 +1,4 @@
 ---
-id: x-components.README
-title: README
-sidebar_label: README
----
----
 title: How Interface X works
 tags:
   - x components

package/js/components/animations/animate-width.vue.js

@@ -23,11 +23,11 @@ __vue_render__._withStripped = true;
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-0b0a53bb_0", { source: ".x-animate-width--enter-active[data-v-0b0a53bb], .x-animate-width--leave-active[data-v-0b0a53bb] {\n  transition: width 0.3s ease-out;\n  overflow-x: hidden;\n}\n.x-animate-width--enter[data-v-0b0a53bb], .x-animate-width--leave-to[data-v-0b0a53bb] {\n  width: 0 !important;\n}", map: undefined, media: undefined });
+    inject("data-v-0d2c1ed8_0", { source: ".x-animate-width--enter-active[data-v-0d2c1ed8], .x-animate-width--leave-active[data-v-0d2c1ed8] {\n  transition: width 0.3s ease-out;\n  overflow-x: hidden;\n}\n.x-animate-width--enter[data-v-0d2c1ed8], .x-animate-width--leave-to[data-v-0d2c1ed8] {\n  width: 0 !important;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-0b0a53bb";
+  var __vue_scope_id__ = "data-v-0d2c1ed8";
   /* module identifier */
   var __vue_module_identifier__ = undefined;
   /* functional template */

package/js/components/animations/animate-width.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"animate-width.vue.js","sources":["../../../../src/components/animations/animate-width.vue"],"sourcesContent":["<template>\n  <transition v-on=\"$listeners\" name=\"x-animate-width-\">\n    <!-- @slot (Required) Transition content -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n\n  /**\n   * Renders a transition wrapping an element passed in the default slot and animating its width.\n   *\n   * @public\n   */\n  @Component\n  export default class AnimateWidth extends Vue {}\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-animate-width {\n    &--enter-active,\n    &--leave-active {\n      transition: width 0.3s ease-out;\n      overflow-x: hidden;\n    }\n\n    &--enter,\n    &--leave-to {\n      width: 0 !important;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n# Examples\n\nThe AnimateWidth component is intended to be used as a prop in animatable components but also works\nas a transition to animate the width of an element.\n\nUsed as a prop in an animatable component:\n\n```vue\n<template>\n  <AnimatableComponent :animation=\"AnimateWidth\" />\n</template>\n\n<script>\n  import AnimateWidth from '@empathyco/x-components/js/components/animations/animate-width.vue';\n\n  export default {\n    data() {\n      return {\n        AnimateWidth\n      };\n    }\n  };\n</script>\n```\n\nUsed as a regular Transition:\n\n```vue\n<template>\n  <div>\n    <button @click=\"visible = !visible\">Toggle</button>\n    <AnimateWidth>\n      <div v-if=\"visible\" style=\"width: 300px\">Element to animate</div>\n    </AnimateWidth>\n  </div>\n</template>\n\n<script>\n  import AnimateWidth from '@empathyco/x-components/js/components/animations/animate-width.vue';\n\n  export default {\n    data() {\n      return {\n        visible: true\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"animate-width.vue.js","sources":["../../../../src/components/animations/animate-width.vue"],"sourcesContent":["<template>\n  <transition v-on=\"$listeners\" name=\"x-animate-width-\">\n    <!-- @slot (Required) Transition content -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n\n  /**\n   * Renders a transition wrapping an element passed in the default slot and animating its width.\n   *\n   * @public\n   */\n  @Component\n  export default class AnimateWidth extends Vue {}\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-animate-width {\n    &--enter-active,\n    &--leave-active {\n      transition: width 0.3s ease-out;\n      overflow-x: hidden;\n    }\n\n    &--enter,\n    &--leave-to {\n      width: 0 !important;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe AnimateWidth component is intended to be used as a prop in animatable components but also works\nas a transition to animate the width of an element.\n\nUsed as a prop in an animatable component:\n\n```vue\n<template>\n  <AnimatableComponent :animation=\"AnimateWidth\" />\n</template>\n\n<script>\n  import AnimateWidth from '@empathyco/x-components/js/components/animations/animate-width.vue';\n\n  export default {\n    data() {\n      return {\n        AnimateWidth\n      };\n    }\n  };\n</script>\n```\n\nUsed as a regular Transition:\n\n```vue\n<template>\n  <div>\n    <button @click=\"visible = !visible\">Toggle</button>\n    <AnimateWidth>\n      <div v-if=\"visible\" style=\"width: 300px\">Element to animate</div>\n    </AnimateWidth>\n  </div>\n</template>\n\n<script>\n  import AnimateWidth from '@empathyco/x-components/js/components/animations/animate-width.vue';\n\n  export default {\n    data() {\n      return {\n        visible: true\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/animations/collapse-from-top.vue.js

@@ -26,11 +26,11 @@ __vue_render__._withStripped = true;
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-6a8ae46a_0", { source: ".x-collapse-from-top--enter-active[data-v-6a8ae46a], .x-collapse-from-top--leave-active[data-v-6a8ae46a], .x-collapse-from-top--enter-active[data-v-6a8ae46a]  > *, .x-collapse-from-top--leave-active[data-v-6a8ae46a]  > * {\n  transform-origin: top center;\n  animation-duration: 0.4s;\n  animation-timing-function: linear;\n}\n.x-collapse-from-top--enter-active[data-v-6a8ae46a], .x-collapse-from-top--leave-active[data-v-6a8ae46a] {\n  animation-name: containerAnimation-data-v-6a8ae46a;\n  overflow: hidden;\n}\n.x-collapse-from-top--enter-active[data-v-6a8ae46a]  > *, .x-collapse-from-top--leave-active[data-v-6a8ae46a]  > * {\n  animation-name: contentAnimation-data-v-6a8ae46a;\n}\n.x-collapse-from-top--leave-active[data-v-6a8ae46a], .x-collapse-from-top--leave-active[data-v-6a8ae46a] >  * {\n  animation-direction: reverse;\n}\n@keyframes containerAnimation-data-v-6a8ae46a {\n0% {\n    transform: scaleY(0);\n}\n1% {\n    transform: scaleY(8.);\n}\n2% {\n    transform: scaleY(0.00000128);\n}\n3% {\n    transform: scaleY(0.00000648);\n}\n4% {\n    transform: scaleY(0.00002048);\n}\n5% {\n    transform: scaleY(0.00005);\n}\n6% {\n    transform: scaleY(0.00010368);\n}\n7% {\n    transform: scaleY(0.00019208);\n}\n8% {\n    transform: scaleY(0.00032768);\n}\n9% {\n    transform: scaleY(0.00052488);\n}\n10% {\n    transform: scaleY(0.0008);\n}\n11% {\n    transform: scaleY(0.00117128);\n}\n12% {\n    transform: scaleY(0.00165888);\n}\n13% {\n    transform: scaleY(0.00228488);\n}\n14% {\n    transform: scaleY(0.00307328);\n}\n15% {\n    transform: scaleY(0.00405);\n}\n16% {\n    transform: scaleY(0.00524288);\n}\n17% {\n    transform: scaleY(0.00668168);\n}\n18% {\n    transform: scaleY(0.00839808);\n}\n19% {\n    transform: scaleY(0.01042568);\n}\n20% {\n    transform: scaleY(0.0128);\n}\n21% {\n    transform: scaleY(0.01555848);\n}\n22% {\n    transform: scaleY(0.01874048);\n}\n23% {\n    transform: scaleY(0.02238728);\n}\n24% {\n    transform: scaleY(0.02654208);\n}\n25% {\n    transform: scaleY(0.03125);\n}\n26% {\n    transform: scaleY(0.03655808);\n}\n27% {\n    transform: scaleY(0.04251528);\n}\n28% {\n    transform: scaleY(0.04917248);\n}\n29% {\n    transform: scaleY(0.05658248);\n}\n30% {\n    transform: scaleY(0.0648);\n}\n31% {\n    transform: scaleY(0.07388168);\n}\n32% {\n    transform: scaleY(0.08388608);\n}\n33% {\n    transform: scaleY(0.09487368);\n}\n34% {\n    transform: scaleY(0.10690688);\n}\n35% {\n    transform: scaleY(0.12005);\n}\n36% {\n    transform: scaleY(0.13436928);\n}\n37% {\n    transform: scaleY(0.14993288);\n}\n38% {\n    transform: scaleY(0.16681088);\n}\n39% {\n    transform: scaleY(0.18507528);\n}\n40% {\n    transform: scaleY(0.2048);\n}\n41% {\n    transform: scaleY(0.22606088);\n}\n42% {\n    transform: scaleY(0.24893568);\n}\n43% {\n    transform: scaleY(0.27350408);\n}\n44% {\n    transform: scaleY(0.29984768);\n}\n45% {\n    transform: scaleY(0.32805);\n}\n46% {\n    transform: scaleY(0.35819648);\n}\n47% {\n    transform: scaleY(0.39037448);\n}\n48% {\n    transform: scaleY(0.42467328);\n}\n49% {\n    transform: scaleY(0.46118408);\n}\n50% {\n    transform: scaleY(0.5);\n}\n51% {\n    transform: scaleY(0.53881592);\n}\n52% {\n    transform: scaleY(0.57532672);\n}\n53% {\n    transform: scaleY(0.60962552);\n}\n54% {\n    transform: scaleY(0.64180352);\n}\n55% {\n    transform: scaleY(0.67195);\n}\n56% {\n    transform: scaleY(0.70015232);\n}\n57% {\n    transform: scaleY(0.72649592);\n}\n58% {\n    transform: scaleY(0.75106432);\n}\n59% {\n    transform: scaleY(0.77393912);\n}\n60% {\n    transform: scaleY(0.7952);\n}\n61% {\n    transform: scaleY(0.81492472);\n}\n62% {\n    transform: scaleY(0.83318912);\n}\n63% {\n    transform: scaleY(0.85006712);\n}\n64% {\n    transform: scaleY(0.86563072);\n}\n65% {\n    transform: scaleY(0.87995);\n}\n66% {\n    transform: scaleY(0.89309312);\n}\n67% {\n    transform: scaleY(0.90512632);\n}\n68% {\n    transform: scaleY(0.91611392);\n}\n69% {\n    transform: scaleY(0.92611832);\n}\n70% {\n    transform: scaleY(0.9352);\n}\n71% {\n    transform: scaleY(0.94341752);\n}\n72% {\n    transform: scaleY(0.95082752);\n}\n73% {\n    transform: scaleY(0.95748472);\n}\n74% {\n    transform: scaleY(0.96344192);\n}\n75% {\n    transform: scaleY(0.96875);\n}\n76% {\n    transform: scaleY(0.97345792);\n}\n77% {\n    transform: scaleY(0.97761272);\n}\n78% {\n    transform: scaleY(0.98125952);\n}\n79% {\n    transform: scaleY(0.98444152);\n}\n80% {\n    transform: scaleY(0.9872);\n}\n81% {\n    transform: scaleY(0.98957432);\n}\n82% {\n    transform: scaleY(0.99160192);\n}\n83% {\n    transform: scaleY(0.99331832);\n}\n84% {\n    transform: scaleY(0.99475712);\n}\n85% {\n    transform: scaleY(0.99595);\n}\n86% {\n    transform: scaleY(0.99692672);\n}\n87% {\n    transform: scaleY(0.99771512);\n}\n88% {\n    transform: scaleY(0.99834112);\n}\n89% {\n    transform: scaleY(0.99882872);\n}\n90% {\n    transform: scaleY(0.9992);\n}\n91% {\n    transform: scaleY(0.99947512);\n}\n92% {\n    transform: scaleY(0.99967232);\n}\n93% {\n    transform: scaleY(0.99980792);\n}\n94% {\n    transform: scaleY(0.99989632);\n}\n95% {\n    transform: scaleY(0.99995);\n}\n96% {\n    transform: scaleY(0.99997952);\n}\n97% {\n    transform: scaleY(0.99999352);\n}\n98% {\n    transform: scaleY(0.99999872);\n}\n99% {\n    transform: scaleY(0.99999992);\n}\n100% {\n    transform: scaleY(1);\n}\n}\n@keyframes contentAnimation-data-v-6a8ae46a {\n0% {\n    transform: scaleY(99999999);\n}\n1% {\n    transform: scaleY(12499999.999999998);\n}\n2% {\n    transform: scaleY(781249.9999999999);\n}\n3% {\n    transform: scaleY(154320.987654321);\n}\n4% {\n    transform: scaleY(48828.125);\n}\n5% {\n    transform: scaleY(20000);\n}\n6% {\n    transform: scaleY(9645.0617283951);\n}\n7% {\n    transform: scaleY(5206.1640982924);\n}\n8% {\n    transform: scaleY(3051.7578125);\n}\n9% {\n    transform: scaleY(1905.1973784484);\n}\n10% {\n    transform: scaleY(1250);\n}\n11% {\n    transform: scaleY(853.7668192063);\n}\n12% {\n    transform: scaleY(602.8163580247);\n}\n13% {\n    transform: scaleY(437.6597458072);\n}\n14% {\n    transform: scaleY(325.3852561433);\n}\n15% {\n    transform: scaleY(246.9135802469);\n}\n16% {\n    transform: scaleY(190.7348632812);\n}\n17% {\n    transform: scaleY(149.6629590163);\n}\n18% {\n    transform: scaleY(119.074836153);\n}\n19% {\n    transform: scaleY(95.917004934);\n}\n20% {\n    transform: scaleY(78.125);\n}\n21% {\n    transform: scaleY(64.2736308431);\n}\n22% {\n    transform: scaleY(53.3604262004);\n}\n23% {\n    transform: scaleY(44.668222312);\n}\n24% {\n    transform: scaleY(37.6760223765);\n}\n25% {\n    transform: scaleY(32);\n}\n26% {\n    transform: scaleY(27.353734113);\n}\n27% {\n    transform: scaleY(23.5209552895);\n}\n28% {\n    transform: scaleY(20.336578509);\n}\n29% {\n    transform: scaleY(17.6733151322);\n}\n30% {\n    transform: scaleY(15.4320987654);\n}\n31% {\n    transform: scaleY(13.5351551291);\n}\n32% {\n    transform: scaleY(11.9209289551);\n}\n33% {\n    transform: scaleY(10.5403311013);\n}\n34% {\n    transform: scaleY(9.3539349385);\n}\n35% {\n    transform: scaleY(8.3298625573);\n}\n36% {\n    transform: scaleY(7.4421772596);\n}\n37% {\n    transform: scaleY(6.6696511132);\n}\n38% {\n    transform: scaleY(5.9948128084);\n}\n39% {\n    transform: scaleY(5.4032067384);\n}\n40% {\n    transform: scaleY(4.8828125);\n}\n41% {\n    transform: scaleY(4.4235871328);\n}\n42% {\n    transform: scaleY(4.0171019277);\n}\n43% {\n    transform: scaleY(3.6562525868);\n}\n44% {\n    transform: scaleY(3.3350266375);\n}\n45% {\n    transform: scaleY(3.0483158055);\n}\n46% {\n    transform: scaleY(2.7917638945);\n}\n47% {\n    transform: scaleY(2.5616428615);\n}\n48% {\n    transform: scaleY(2.3547513985);\n}\n49% {\n    transform: scaleY(2.1683315695);\n}\n50% {\n    transform: scaleY(2);\n}\n51% {\n    transform: scaleY(1.8559214063);\n}\n52% {\n    transform: scaleY(1.7381428069);\n}\n53% {\n    transform: scaleY(1.6403512766);\n}\n54% {\n    transform: scaleY(1.5581092481);\n}\n55% {\n    transform: scaleY(1.4882059677);\n}\n56% {\n    transform: scaleY(1.4282606391);\n}\n57% {\n    transform: scaleY(1.3764702216);\n}\n58% {\n    transform: scaleY(1.3314438902);\n}\n59% {\n    transform: scaleY(1.2920912952);\n}\n60% {\n    transform: scaleY(1.2575452716);\n}\n61% {\n    transform: scaleY(1.2271072106);\n}\n62% {\n    transform: scaleY(1.2002077031);\n}\n63% {\n    transform: scaleY(1.1763776959);\n}\n64% {\n    transform: scaleY(1.1552270234);\n}\n65% {\n    transform: scaleY(1.1364282061);\n}\n66% {\n    transform: scaleY(1.1197040685);\n}\n67% {\n    transform: scaleY(1.104818165);\n}\n68% {\n    transform: scaleY(1.091567302);\n}\n69% {\n    transform: scaleY(1.0797756382);\n}\n70% {\n    transform: scaleY(1.0692899914);\n}\n71% {\n    transform: scaleY(1.0599760751);\n}\n72% {\n    transform: scaleY(1.0517154573);\n}\n73% {\n    transform: scaleY(1.0444030898);\n}\n74% {\n    transform: scaleY(1.0379452868);\n}\n75% {\n    transform: scaleY(1.0322580645);\n}\n76% {\n    transform: scaleY(1.0272657703);\n}\n77% {\n    transform: scaleY(1.0228999475);\n}\n78% {\n    transform: scaleY(1.0190983931);\n}\n79% {\n    transform: scaleY(1.015804372);\n}\n80% {\n    transform: scaleY(1.0129659643);\n}\n81% {\n    transform: scaleY(1.01053552);\n}\n82% {\n    transform: scaleY(1.0084692051);\n}\n83% {\n    transform: scaleY(1.0067266252);\n}\n84% {\n    transform: scaleY(1.0052705127);\n}\n85% {\n    transform: scaleY(1.0040664692);\n}\n86% {\n    transform: scaleY(1.0030827542);\n}\n87% {\n    transform: scaleY(1.0022901126);\n}\n88% {\n    transform: scaleY(1.0016616365);\n}\n89% {\n    transform: scaleY(1.0011726535);\n}\n90% {\n    transform: scaleY(1.0008006405);\n}\n91% {\n    transform: scaleY(1.0005251556);\n}\n92% {\n    transform: scaleY(1.0003277874);\n}\n93% {\n    transform: scaleY(1.0001921169);\n}\n94% {\n    transform: scaleY(1.0001036908);\n}\n95% {\n    transform: scaleY(1.0000500025);\n}\n96% {\n    transform: scaleY(1.0000204804);\n}\n97% {\n    transform: scaleY(1.00000648);\n}\n98% {\n    transform: scaleY(1.00000128);\n}\n99% {\n    transform: scaleY(1.00000008);\n}\n100% {\n    transform: scaleY(1);\n}\n}", map: undefined, media: undefined });
+    inject("data-v-1b667608_0", { source: ".x-collapse-from-top--enter-active[data-v-1b667608], .x-collapse-from-top--leave-active[data-v-1b667608], .x-collapse-from-top--enter-active[data-v-1b667608]  > *, .x-collapse-from-top--leave-active[data-v-1b667608]  > * {\n  transform-origin: top center;\n  animation-duration: 0.4s;\n  animation-timing-function: linear;\n}\n.x-collapse-from-top--enter-active[data-v-1b667608], .x-collapse-from-top--leave-active[data-v-1b667608] {\n  animation-name: containerAnimation-data-v-1b667608;\n  overflow: hidden;\n}\n.x-collapse-from-top--enter-active[data-v-1b667608]  > *, .x-collapse-from-top--leave-active[data-v-1b667608]  > * {\n  animation-name: contentAnimation-data-v-1b667608;\n}\n.x-collapse-from-top--leave-active[data-v-1b667608], .x-collapse-from-top--leave-active[data-v-1b667608] >  * {\n  animation-direction: reverse;\n}\n@keyframes containerAnimation-data-v-1b667608 {\n0% {\n    transform: scaleY(0);\n}\n1% {\n    transform: scaleY(8.);\n}\n2% {\n    transform: scaleY(0.00000128);\n}\n3% {\n    transform: scaleY(0.00000648);\n}\n4% {\n    transform: scaleY(0.00002048);\n}\n5% {\n    transform: scaleY(0.00005);\n}\n6% {\n    transform: scaleY(0.00010368);\n}\n7% {\n    transform: scaleY(0.00019208);\n}\n8% {\n    transform: scaleY(0.00032768);\n}\n9% {\n    transform: scaleY(0.00052488);\n}\n10% {\n    transform: scaleY(0.0008);\n}\n11% {\n    transform: scaleY(0.00117128);\n}\n12% {\n    transform: scaleY(0.00165888);\n}\n13% {\n    transform: scaleY(0.00228488);\n}\n14% {\n    transform: scaleY(0.00307328);\n}\n15% {\n    transform: scaleY(0.00405);\n}\n16% {\n    transform: scaleY(0.00524288);\n}\n17% {\n    transform: scaleY(0.00668168);\n}\n18% {\n    transform: scaleY(0.00839808);\n}\n19% {\n    transform: scaleY(0.01042568);\n}\n20% {\n    transform: scaleY(0.0128);\n}\n21% {\n    transform: scaleY(0.01555848);\n}\n22% {\n    transform: scaleY(0.01874048);\n}\n23% {\n    transform: scaleY(0.02238728);\n}\n24% {\n    transform: scaleY(0.02654208);\n}\n25% {\n    transform: scaleY(0.03125);\n}\n26% {\n    transform: scaleY(0.03655808);\n}\n27% {\n    transform: scaleY(0.04251528);\n}\n28% {\n    transform: scaleY(0.04917248);\n}\n29% {\n    transform: scaleY(0.05658248);\n}\n30% {\n    transform: scaleY(0.0648);\n}\n31% {\n    transform: scaleY(0.07388168);\n}\n32% {\n    transform: scaleY(0.08388608);\n}\n33% {\n    transform: scaleY(0.09487368);\n}\n34% {\n    transform: scaleY(0.10690688);\n}\n35% {\n    transform: scaleY(0.12005);\n}\n36% {\n    transform: scaleY(0.13436928);\n}\n37% {\n    transform: scaleY(0.14993288);\n}\n38% {\n    transform: scaleY(0.16681088);\n}\n39% {\n    transform: scaleY(0.18507528);\n}\n40% {\n    transform: scaleY(0.2048);\n}\n41% {\n    transform: scaleY(0.22606088);\n}\n42% {\n    transform: scaleY(0.24893568);\n}\n43% {\n    transform: scaleY(0.27350408);\n}\n44% {\n    transform: scaleY(0.29984768);\n}\n45% {\n    transform: scaleY(0.32805);\n}\n46% {\n    transform: scaleY(0.35819648);\n}\n47% {\n    transform: scaleY(0.39037448);\n}\n48% {\n    transform: scaleY(0.42467328);\n}\n49% {\n    transform: scaleY(0.46118408);\n}\n50% {\n    transform: scaleY(0.5);\n}\n51% {\n    transform: scaleY(0.53881592);\n}\n52% {\n    transform: scaleY(0.57532672);\n}\n53% {\n    transform: scaleY(0.60962552);\n}\n54% {\n    transform: scaleY(0.64180352);\n}\n55% {\n    transform: scaleY(0.67195);\n}\n56% {\n    transform: scaleY(0.70015232);\n}\n57% {\n    transform: scaleY(0.72649592);\n}\n58% {\n    transform: scaleY(0.75106432);\n}\n59% {\n    transform: scaleY(0.77393912);\n}\n60% {\n    transform: scaleY(0.7952);\n}\n61% {\n    transform: scaleY(0.81492472);\n}\n62% {\n    transform: scaleY(0.83318912);\n}\n63% {\n    transform: scaleY(0.85006712);\n}\n64% {\n    transform: scaleY(0.86563072);\n}\n65% {\n    transform: scaleY(0.87995);\n}\n66% {\n    transform: scaleY(0.89309312);\n}\n67% {\n    transform: scaleY(0.90512632);\n}\n68% {\n    transform: scaleY(0.91611392);\n}\n69% {\n    transform: scaleY(0.92611832);\n}\n70% {\n    transform: scaleY(0.9352);\n}\n71% {\n    transform: scaleY(0.94341752);\n}\n72% {\n    transform: scaleY(0.95082752);\n}\n73% {\n    transform: scaleY(0.95748472);\n}\n74% {\n    transform: scaleY(0.96344192);\n}\n75% {\n    transform: scaleY(0.96875);\n}\n76% {\n    transform: scaleY(0.97345792);\n}\n77% {\n    transform: scaleY(0.97761272);\n}\n78% {\n    transform: scaleY(0.98125952);\n}\n79% {\n    transform: scaleY(0.98444152);\n}\n80% {\n    transform: scaleY(0.9872);\n}\n81% {\n    transform: scaleY(0.98957432);\n}\n82% {\n    transform: scaleY(0.99160192);\n}\n83% {\n    transform: scaleY(0.99331832);\n}\n84% {\n    transform: scaleY(0.99475712);\n}\n85% {\n    transform: scaleY(0.99595);\n}\n86% {\n    transform: scaleY(0.99692672);\n}\n87% {\n    transform: scaleY(0.99771512);\n}\n88% {\n    transform: scaleY(0.99834112);\n}\n89% {\n    transform: scaleY(0.99882872);\n}\n90% {\n    transform: scaleY(0.9992);\n}\n91% {\n    transform: scaleY(0.99947512);\n}\n92% {\n    transform: scaleY(0.99967232);\n}\n93% {\n    transform: scaleY(0.99980792);\n}\n94% {\n    transform: scaleY(0.99989632);\n}\n95% {\n    transform: scaleY(0.99995);\n}\n96% {\n    transform: scaleY(0.99997952);\n}\n97% {\n    transform: scaleY(0.99999352);\n}\n98% {\n    transform: scaleY(0.99999872);\n}\n99% {\n    transform: scaleY(0.99999992);\n}\n100% {\n    transform: scaleY(1);\n}\n}\n@keyframes contentAnimation-data-v-1b667608 {\n0% {\n    transform: scaleY(99999999);\n}\n1% {\n    transform: scaleY(12499999.999999998);\n}\n2% {\n    transform: scaleY(781249.9999999999);\n}\n3% {\n    transform: scaleY(154320.987654321);\n}\n4% {\n    transform: scaleY(48828.125);\n}\n5% {\n    transform: scaleY(20000);\n}\n6% {\n    transform: scaleY(9645.0617283951);\n}\n7% {\n    transform: scaleY(5206.1640982924);\n}\n8% {\n    transform: scaleY(3051.7578125);\n}\n9% {\n    transform: scaleY(1905.1973784484);\n}\n10% {\n    transform: scaleY(1250);\n}\n11% {\n    transform: scaleY(853.7668192063);\n}\n12% {\n    transform: scaleY(602.8163580247);\n}\n13% {\n    transform: scaleY(437.6597458072);\n}\n14% {\n    transform: scaleY(325.3852561433);\n}\n15% {\n    transform: scaleY(246.9135802469);\n}\n16% {\n    transform: scaleY(190.7348632812);\n}\n17% {\n    transform: scaleY(149.6629590163);\n}\n18% {\n    transform: scaleY(119.074836153);\n}\n19% {\n    transform: scaleY(95.917004934);\n}\n20% {\n    transform: scaleY(78.125);\n}\n21% {\n    transform: scaleY(64.2736308431);\n}\n22% {\n    transform: scaleY(53.3604262004);\n}\n23% {\n    transform: scaleY(44.668222312);\n}\n24% {\n    transform: scaleY(37.6760223765);\n}\n25% {\n    transform: scaleY(32);\n}\n26% {\n    transform: scaleY(27.353734113);\n}\n27% {\n    transform: scaleY(23.5209552895);\n}\n28% {\n    transform: scaleY(20.336578509);\n}\n29% {\n    transform: scaleY(17.6733151322);\n}\n30% {\n    transform: scaleY(15.4320987654);\n}\n31% {\n    transform: scaleY(13.5351551291);\n}\n32% {\n    transform: scaleY(11.9209289551);\n}\n33% {\n    transform: scaleY(10.5403311013);\n}\n34% {\n    transform: scaleY(9.3539349385);\n}\n35% {\n    transform: scaleY(8.3298625573);\n}\n36% {\n    transform: scaleY(7.4421772596);\n}\n37% {\n    transform: scaleY(6.6696511132);\n}\n38% {\n    transform: scaleY(5.9948128084);\n}\n39% {\n    transform: scaleY(5.4032067384);\n}\n40% {\n    transform: scaleY(4.8828125);\n}\n41% {\n    transform: scaleY(4.4235871328);\n}\n42% {\n    transform: scaleY(4.0171019277);\n}\n43% {\n    transform: scaleY(3.6562525868);\n}\n44% {\n    transform: scaleY(3.3350266375);\n}\n45% {\n    transform: scaleY(3.0483158055);\n}\n46% {\n    transform: scaleY(2.7917638945);\n}\n47% {\n    transform: scaleY(2.5616428615);\n}\n48% {\n    transform: scaleY(2.3547513985);\n}\n49% {\n    transform: scaleY(2.1683315695);\n}\n50% {\n    transform: scaleY(2);\n}\n51% {\n    transform: scaleY(1.8559214063);\n}\n52% {\n    transform: scaleY(1.7381428069);\n}\n53% {\n    transform: scaleY(1.6403512766);\n}\n54% {\n    transform: scaleY(1.5581092481);\n}\n55% {\n    transform: scaleY(1.4882059677);\n}\n56% {\n    transform: scaleY(1.4282606391);\n}\n57% {\n    transform: scaleY(1.3764702216);\n}\n58% {\n    transform: scaleY(1.3314438902);\n}\n59% {\n    transform: scaleY(1.2920912952);\n}\n60% {\n    transform: scaleY(1.2575452716);\n}\n61% {\n    transform: scaleY(1.2271072106);\n}\n62% {\n    transform: scaleY(1.2002077031);\n}\n63% {\n    transform: scaleY(1.1763776959);\n}\n64% {\n    transform: scaleY(1.1552270234);\n}\n65% {\n    transform: scaleY(1.1364282061);\n}\n66% {\n    transform: scaleY(1.1197040685);\n}\n67% {\n    transform: scaleY(1.104818165);\n}\n68% {\n    transform: scaleY(1.091567302);\n}\n69% {\n    transform: scaleY(1.0797756382);\n}\n70% {\n    transform: scaleY(1.0692899914);\n}\n71% {\n    transform: scaleY(1.0599760751);\n}\n72% {\n    transform: scaleY(1.0517154573);\n}\n73% {\n    transform: scaleY(1.0444030898);\n}\n74% {\n    transform: scaleY(1.0379452868);\n}\n75% {\n    transform: scaleY(1.0322580645);\n}\n76% {\n    transform: scaleY(1.0272657703);\n}\n77% {\n    transform: scaleY(1.0228999475);\n}\n78% {\n    transform: scaleY(1.0190983931);\n}\n79% {\n    transform: scaleY(1.015804372);\n}\n80% {\n    transform: scaleY(1.0129659643);\n}\n81% {\n    transform: scaleY(1.01053552);\n}\n82% {\n    transform: scaleY(1.0084692051);\n}\n83% {\n    transform: scaleY(1.0067266252);\n}\n84% {\n    transform: scaleY(1.0052705127);\n}\n85% {\n    transform: scaleY(1.0040664692);\n}\n86% {\n    transform: scaleY(1.0030827542);\n}\n87% {\n    transform: scaleY(1.0022901126);\n}\n88% {\n    transform: scaleY(1.0016616365);\n}\n89% {\n    transform: scaleY(1.0011726535);\n}\n90% {\n    transform: scaleY(1.0008006405);\n}\n91% {\n    transform: scaleY(1.0005251556);\n}\n92% {\n    transform: scaleY(1.0003277874);\n}\n93% {\n    transform: scaleY(1.0001921169);\n}\n94% {\n    transform: scaleY(1.0001036908);\n}\n95% {\n    transform: scaleY(1.0000500025);\n}\n96% {\n    transform: scaleY(1.0000204804);\n}\n97% {\n    transform: scaleY(1.00000648);\n}\n98% {\n    transform: scaleY(1.00000128);\n}\n99% {\n    transform: scaleY(1.00000008);\n}\n100% {\n    transform: scaleY(1);\n}\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-6a8ae46a";
+  var __vue_scope_id__ = "data-v-1b667608";
   /* module identifier */
   var __vue_module_identifier__ = undefined;
   /* functional template */

package/js/components/animations/collapse-from-top.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapse-from-top.vue.js","sources":["../../../../src/components/animations/collapse-from-top.vue"],"sourcesContent":["<template>\n  <transition v-on=\"$listeners\" appear name=\"x-collapse-from-top-\">\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n\n  /**\n   * Renders a transition group wrapping the element passed in the default slot and animating\n   * it with a scale.\n   *\n   * @public\n   */\n  @Component\n  export default class CollapseFromTop extends Vue {}\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-collapse-from-top {\n    &--enter-active,\n    &--leave-active,\n    &--enter-active ::v-deep > *,\n    &--leave-active ::v-deep > * {\n      transform-origin: top center;\n      animation-duration: 0.4s;\n      animation-timing-function: linear;\n    }\n\n    &--enter-active,\n    &--leave-active {\n      animation-name: containerAnimation;\n      overflow: hidden;\n    }\n\n    &--enter-active ::v-deep > *,\n    &--leave-active ::v-deep > * {\n      animation-name: contentAnimation;\n    }\n\n    &--leave-active,\n    &--leave-active > ::v-deep * {\n      animation-direction: reverse;\n    }\n  }\n\n  @function easeInOut($x) {\n    @if $x < 0.5 {\n      @return 8 * $x * $x * $x * $x;\n    } @else {\n      $x: $x - 1;\n      @return 1 - (8 * $x * $x * $x * $x);\n    }\n  }\n\n  @keyframes containerAnimation {\n    @for $step from 0 through 100 {\n      $scale: easeInOut($step / 100);\n      #{$step}% {\n        transform: scaleY(#{$scale});\n      }\n    }\n  }\n\n  @keyframes contentAnimation {\n    @for $step from 0 through 100 {\n      $scale: easeInOut($step / 100);\n      $invScale: if($scale > 0, 1 / $scale, 99999999);\n      #{$step}% {\n        transform: scaleY(#{$invScale});\n      }\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n# Examples\n\nThe CollapseTop component is intended to be used as animation to wrap an element with v-if or v-show\nand animate it. The animation consists on scale its vertical size from 0 to 1, and after this show\nthe content with an opacity transition\n\nUsed wrapping a component:\n\n```vue\n<CollapseFromTop>\n  <ComponentOrElement v-if=\"open\"/>\n</CollapseFromTop>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"collapse-from-top.vue.js","sources":["../../../../src/components/animations/collapse-from-top.vue"],"sourcesContent":["<template>\n  <transition v-on=\"$listeners\" appear name=\"x-collapse-from-top-\">\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n\n  /**\n   * Renders a transition group wrapping the element passed in the default slot and animating\n   * it with a scale.\n   *\n   * @public\n   */\n  @Component\n  export default class CollapseFromTop extends Vue {}\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-collapse-from-top {\n    &--enter-active,\n    &--leave-active,\n    &--enter-active ::v-deep > *,\n    &--leave-active ::v-deep > * {\n      transform-origin: top center;\n      animation-duration: 0.4s;\n      animation-timing-function: linear;\n    }\n\n    &--enter-active,\n    &--leave-active {\n      animation-name: containerAnimation;\n      overflow: hidden;\n    }\n\n    &--enter-active ::v-deep > *,\n    &--leave-active ::v-deep > * {\n      animation-name: contentAnimation;\n    }\n\n    &--leave-active,\n    &--leave-active > ::v-deep * {\n      animation-direction: reverse;\n    }\n  }\n\n  @function easeInOut($x) {\n    @if $x < 0.5 {\n      @return 8 * $x * $x * $x * $x;\n    } @else {\n      $x: $x - 1;\n      @return 1 - (8 * $x * $x * $x * $x);\n    }\n  }\n\n  @keyframes containerAnimation {\n    @for $step from 0 through 100 {\n      $scale: easeInOut($step / 100);\n      #{$step}% {\n        transform: scaleY(#{$scale});\n      }\n    }\n  }\n\n  @keyframes contentAnimation {\n    @for $step from 0 through 100 {\n      $scale: easeInOut($step / 100);\n      $invScale: if($scale > 0, 1 / $scale, 99999999);\n      #{$step}% {\n        transform: scaleY(#{$invScale});\n      }\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe CollapseTop component is intended to be used as animation to wrap an element with v-if or v-show\nand animate it. The animation consists on scale its vertical size from 0 to 1, and after this show\nthe content with an opacity transition\n\nUsed wrapping a component:\n\n```vue\n<CollapseFromTop>\n  <ComponentOrElement v-if=\"open\"/>\n</CollapseFromTop>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/animations/collapse-height.vue.js

@@ -33,11 +33,11 @@ __vue_render__._withStripped = true;
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-07481a99_0", { source: ".x-collapse-height--enter-active[data-v-07481a99], .x-collapse-height--leave-active[data-v-07481a99] {\n  transition: height 0.3s ease-out;\n  overflow: hidden;\n}", map: undefined, media: undefined });
+    inject("data-v-d46da02c_0", { source: ".x-collapse-height--enter-active[data-v-d46da02c], .x-collapse-height--leave-active[data-v-d46da02c] {\n  transition: height 0.3s ease-out;\n  overflow: hidden;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-07481a99";
+  var __vue_scope_id__ = "data-v-d46da02c";
   /* module identifier */
   var __vue_module_identifier__ = undefined;
   /* functional template */

package/js/components/animations/collapse-height.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapse-height.vue.js","sources":["../../../../src/components/animations/collapse-height.vue"],"sourcesContent":["<template>\n  <transition\n    v-on=\"$listeners\"\n    @enter=\"expand\"\n    @after-enter=\"cleanUpAnimationStyles\"\n    @leave=\"collapse\"\n    appear\n    name=\"x-collapse-height-\"\n  >\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n  import { createCollapseAnimationMixin } from './animations.mixin';\n\n  /**\n   * Renders a transition wrapping the element passed in the default slot and animating\n   * it with a height animation.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [createCollapseAnimationMixin('height')]\n  })\n  export default class CollapseHeight extends Vue {}\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-collapse-height {\n    &--enter-active,\n    &--leave-active {\n      transition: height 0.3s ease-out;\n      overflow: hidden;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n# Examples\n\nThe CollapseHeight component is intended to be used as animation to wrap an element with v-if or\nv-show and animate it. The animation consists on scale its height size from 0 to auto. This\ntransition does not work with components that have vertical margin, padding or border.\n\nUsed wrapping a component:\n\n```vue\n<CollapseHeight>\n  <ComponentOrElement v-if=\"open\"/>\n</CollapseHeight>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"collapse-height.vue.js","sources":["../../../../src/components/animations/collapse-height.vue"],"sourcesContent":["<template>\n  <transition\n    v-on=\"$listeners\"\n    @enter=\"expand\"\n    @after-enter=\"cleanUpAnimationStyles\"\n    @leave=\"collapse\"\n    appear\n    name=\"x-collapse-height-\"\n  >\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n  import { createCollapseAnimationMixin } from './animations.mixin';\n\n  /**\n   * Renders a transition wrapping the element passed in the default slot and animating\n   * it with a height animation.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [createCollapseAnimationMixin('height')]\n  })\n  export default class CollapseHeight extends Vue {}\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-collapse-height {\n    &--enter-active,\n    &--leave-active {\n      transition: height 0.3s ease-out;\n      overflow: hidden;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe CollapseHeight component is intended to be used as animation to wrap an element with v-if or\nv-show and animate it. The animation consists on scale its height size from 0 to auto. This\ntransition does not work with components that have vertical margin, padding or border.\n\nUsed wrapping a component:\n\n```vue\n<CollapseHeight>\n  <ComponentOrElement v-if=\"open\"/>\n</CollapseHeight>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/animations/collapse-width.vue.js

@@ -33,11 +33,11 @@ __vue_render__._withStripped = true;
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-2d4c0007_0", { source: ".x-collapse-width--enter-active[data-v-2d4c0007], .x-collapse-width--leave-active[data-v-2d4c0007] {\n  transition: width 0.3s ease-out;\n  overflow: hidden;\n}", map: undefined, media: undefined });
+    inject("data-v-dcf934a4_0", { source: ".x-collapse-width--enter-active[data-v-dcf934a4], .x-collapse-width--leave-active[data-v-dcf934a4] {\n  transition: width 0.3s ease-out;\n  overflow: hidden;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-2d4c0007";
+  var __vue_scope_id__ = "data-v-dcf934a4";
   /* module identifier */
   var __vue_module_identifier__ = undefined;
   /* functional template */

package/js/components/animations/collapse-width.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapse-width.vue.js","sources":["../../../../src/components/animations/collapse-width.vue"],"sourcesContent":["<template>\n  <transition\n    v-on=\"$listeners\"\n    @enter=\"expand\"\n    @after-enter=\"cleanUpAnimationStyles\"\n    @leave=\"collapse\"\n    appear\n    name=\"x-collapse-width-\"\n  >\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n  import { createCollapseAnimationMixin } from './animations.mixin';\n\n  /**\n   * Renders a transition wrapping the element passed in the default slot and animating\n   * it with a width animation.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [createCollapseAnimationMixin('width')]\n  })\n  export default class CollapseWidth extends Vue {}\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-collapse-width {\n    &--enter-active,\n    &--leave-active {\n      transition: width 0.3s ease-out;\n      overflow: hidden;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n# Examples\n\nThe CollapseWidth component is intended to be used as animation to wrap an element with v-if or\nv-show and animate it. The animation consists on scale its width size from 0 to auto. This\ntransition does not work with components that have horizontal margin, padding or border. It also is\ndependant of the width of the child elements and not the root element.\n\nUsed wrapping a component:\n\n```vue\n<CollapseWidth>\n  <ComponentOrElement v-if=\"open\"/>\n</CollapseWidth>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"collapse-width.vue.js","sources":["../../../../src/components/animations/collapse-width.vue"],"sourcesContent":["<template>\n  <transition\n    v-on=\"$listeners\"\n    @enter=\"expand\"\n    @after-enter=\"cleanUpAnimationStyles\"\n    @leave=\"collapse\"\n    appear\n    name=\"x-collapse-width-\"\n  >\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n  import { createCollapseAnimationMixin } from './animations.mixin';\n\n  /**\n   * Renders a transition wrapping the element passed in the default slot and animating\n   * it with a width animation.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [createCollapseAnimationMixin('width')]\n  })\n  export default class CollapseWidth extends Vue {}\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-collapse-width {\n    &--enter-active,\n    &--leave-active {\n      transition: width 0.3s ease-out;\n      overflow: hidden;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe CollapseWidth component is intended to be used as animation to wrap an element with v-if or\nv-show and animate it. The animation consists on scale its width size from 0 to auto. This\ntransition does not work with components that have horizontal margin, padding or border. It also is\ndependant of the width of the child elements and not the root element.\n\nUsed wrapping a component:\n\n```vue\n<CollapseWidth>\n  <ComponentOrElement v-if=\"open\"/>\n</CollapseWidth>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/animations/cross-fade.vue.js

@@ -26,11 +26,11 @@ __vue_render__._withStripped = true;
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-4cb27fe4_0", { source: ".x-cross-fade--enter-active[data-v-4cb27fe4], .x-cross-fade--leave-active[data-v-4cb27fe4] {\n  transition: opacity 0.25s ease-in-out;\n}\n.x-cross-fade--leave-active[data-v-4cb27fe4] {\n  position: absolute;\n}\n.x-cross-fade--leave-to[data-v-4cb27fe4], .x-cross-fade--enter[data-v-4cb27fe4] {\n  opacity: 0;\n}", map: undefined, media: undefined });
+    inject("data-v-4754a6e6_0", { source: ".x-cross-fade--enter-active[data-v-4754a6e6], .x-cross-fade--leave-active[data-v-4754a6e6] {\n  transition: opacity 0.25s ease-in-out;\n}\n.x-cross-fade--leave-active[data-v-4754a6e6] {\n  position: absolute;\n}\n.x-cross-fade--leave-to[data-v-4754a6e6], .x-cross-fade--enter[data-v-4754a6e6] {\n  opacity: 0;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-4cb27fe4";
+  var __vue_scope_id__ = "data-v-4754a6e6";
   /* module identifier */
   var __vue_module_identifier__ = undefined;
   /* functional template */

package/js/components/animations/cross-fade.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"cross-fade.vue.js","sources":["../../../../src/components/animations/cross-fade.vue"],"sourcesContent":["<template>\n  <transition v-on=\"$listeners\" appear name=\"x-cross-fade-\" mode=\"in-out\">\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n\n  /**\n   * Renders a transition wrapping the element passed in the default slo. The transition\n   * fades between the two toggled elements at the same time.\n   *\n   * @public\n   */\n  @Component\n  export default class CrossFade extends Vue {}\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-cross-fade {\n    &--enter-active,\n    &--leave-active {\n      transition: opacity 0.25s ease-in-out;\n    }\n\n    &--leave-active {\n      position: absolute;\n    }\n\n    &--leave-to,\n    &--enter {\n      opacity: 0;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n# Example\n\nThe `CrossFade` component is intended to be used as animation to wrap an element with v-if or v-show\nand animate it. The animation fades the new element into the previous one.\n\nWrapping a component:\n\n```vue\n<CrossFade>\n  <ComponentOrElement v-if=\"open\"/>\n</CrossFade>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"cross-fade.vue.js","sources":["../../../../src/components/animations/cross-fade.vue"],"sourcesContent":["<template>\n  <transition v-on=\"$listeners\" appear name=\"x-cross-fade-\" mode=\"in-out\">\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n\n  /**\n   * Renders a transition wrapping the element passed in the default slo. The transition\n   * fades between the two toggled elements at the same time.\n   *\n   * @public\n   */\n  @Component\n  export default class CrossFade extends Vue {}\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-cross-fade {\n    &--enter-active,\n    &--leave-active {\n      transition: opacity 0.25s ease-in-out;\n    }\n\n    &--leave-active {\n      position: absolute;\n    }\n\n    &--leave-to,\n    &--enter {\n      opacity: 0;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Example\n\nThe `CrossFade` component is intended to be used as animation to wrap an element with v-if or v-show\nand animate it. The animation fades the new element into the previous one.\n\nWrapping a component:\n\n```vue\n<CrossFade>\n  <ComponentOrElement v-if=\"open\"/>\n</CrossFade>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/animations/fade-and-slide.vue.js

@@ -29,11 +29,11 @@ __vue_render__._withStripped = true;
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-31a98fc3_0", { source: ".x-fade-and-slide[data-v-31a98fc3] .x-fade-and-slide--move, .x-fade-and-slide[data-v-31a98fc3] .x-fade-and-slide--enter-active, .x-fade-and-slide[data-v-31a98fc3] .x-fade-and-slide--leave-active {\n  transition: opacity 0.2s ease-out, transform 0.3s ease-out;\n}\n.x-fade-and-slide[data-v-31a98fc3] .x-fade-and-slide--enter, .x-fade-and-slide[data-v-31a98fc3] .x-fade-and-slide--leave-to {\n  transform: translate(-20%, 0);\n  opacity: 0;\n}\n.x-fade-and-slide[data-v-31a98fc3] .x-fade-and-slide--leave-active {\n  position: absolute;\n}", map: undefined, media: undefined });
+    inject("data-v-fed3a744_0", { source: ".x-fade-and-slide[data-v-fed3a744] .x-fade-and-slide--move, .x-fade-and-slide[data-v-fed3a744] .x-fade-and-slide--enter-active, .x-fade-and-slide[data-v-fed3a744] .x-fade-and-slide--leave-active {\n  transition: opacity 0.2s ease-out, transform 0.3s ease-out;\n}\n.x-fade-and-slide[data-v-fed3a744] .x-fade-and-slide--enter, .x-fade-and-slide[data-v-fed3a744] .x-fade-and-slide--leave-to {\n  transform: translate(-20%, 0);\n  opacity: 0;\n}\n.x-fade-and-slide[data-v-fed3a744] .x-fade-and-slide--leave-active {\n  position: absolute;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-31a98fc3";
+  var __vue_scope_id__ = "data-v-fed3a744";
   /* module identifier */
   var __vue_module_identifier__ = undefined;
   /* functional template */

package/js/components/animations/fade-and-slide.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"fade-and-slide.vue.js","sources":["../../../../src/components/animations/fade-and-slide.vue"],"sourcesContent":["<template>\n  <transition-group\n    v-on=\"$listeners\"\n    class=\"x-fade-and-slide\"\n    appear\n    name=\"x-fade-and-slide-\"\n    :tag=\"tag\"\n  >\n    <!-- @slot (Required) Transition-group content -->\n    <slot />\n  </transition-group>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Prop, Component } from 'vue-property-decorator';\n\n  /**\n   * Renders a transition group wrapping the elements passed in the default slot and animating\n   * them with a fade and slide animation.\n   *\n   * @public\n   */\n  @Component\n  export default class FadeAndSlide extends Vue {\n    /**\n     * HTML Element that the transition-group children will be wrapped in.\n     *\n     * @public\n     */\n    @Prop()\n    protected tag!: string;\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  $transition-opacity-duration: 0.2s;\n  $transition-transform-duration: 0.3s;\n\n  .x-fade-and-slide::v-deep .x-fade-and-slide {\n    &--move,\n    &--enter-active,\n    &--leave-active {\n      transition: opacity $transition-opacity-duration ease-out,\n        transform $transition-transform-duration ease-out;\n    }\n\n    &--enter,\n    &--leave-to {\n      transform: translate(-20%, 0);\n      opacity: 0;\n    }\n\n    &--leave-active {\n      position: absolute;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n# Examples\n\nThe FadeAndSlide component is intended to be used as a prop in animatable components but also works\nas a wrapper of a transition group that can receive the tag it will render to as a prop.\n\nUsed as a prop in an animatable component:\n\n```vue\n<AnimatableComponent :animation=\"FadeAndSlide\" />\n```\n\nUsed as a regular component passing a the tag as prop:\n\n```vue\n<FadeAndSlide tag=\"ul\">\n  <li>Element to animate</li>\n  <li>Element to animate</li>\n  <li>Element to animate</li>\n</FadeAndSlide>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"fade-and-slide.vue.js","sources":["../../../../src/components/animations/fade-and-slide.vue"],"sourcesContent":["<template>\n  <transition-group\n    v-on=\"$listeners\"\n    class=\"x-fade-and-slide\"\n    appear\n    name=\"x-fade-and-slide-\"\n    :tag=\"tag\"\n  >\n    <!-- @slot (Required) Transition-group content -->\n    <slot />\n  </transition-group>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Prop, Component } from 'vue-property-decorator';\n\n  /**\n   * Renders a transition group wrapping the elements passed in the default slot and animating\n   * them with a fade and slide animation.\n   *\n   * @public\n   */\n  @Component\n  export default class FadeAndSlide extends Vue {\n    /**\n     * HTML Element that the transition-group children will be wrapped in.\n     *\n     * @public\n     */\n    @Prop()\n    protected tag!: string;\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  $transition-opacity-duration: 0.2s;\n  $transition-transform-duration: 0.3s;\n\n  .x-fade-and-slide::v-deep .x-fade-and-slide {\n    &--move,\n    &--enter-active,\n    &--leave-active {\n      transition: opacity $transition-opacity-duration ease-out,\n        transform $transition-transform-duration ease-out;\n    }\n\n    &--enter,\n    &--leave-to {\n      transform: translate(-20%, 0);\n      opacity: 0;\n    }\n\n    &--leave-active {\n      position: absolute;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe FadeAndSlide component is intended to be used as a prop in animatable components but also works\nas a wrapper of a transition group that can receive the tag it will render to as a prop.\n\nUsed as a prop in an animatable component:\n\n```vue\n<AnimatableComponent :animation=\"FadeAndSlide\" />\n```\n\nUsed as a regular component passing a the tag as prop:\n\n```vue\n<FadeAndSlide tag=\"ul\">\n  <li>Element to animate</li>\n  <li>Element to animate</li>\n  <li>Element to animate</li>\n</FadeAndSlide>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}