@empathyco/x-components 6.0.0-alpha.183 → 6.0.0-alpha.185

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

@@ -9,7 +9,7 @@ Renders a simple filter, emitting the needed events when clicked.
 **Signature:**
 
 ```typescript
-_default: import("vue").DefineComponent<{
+_default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     filter: {
         type: PropType<SimpleFilterModel>;
         required: true;
@@ -19,7 +19,7 @@ _default: import("vue").DefineComponent<{
         type: PropType<(string | Dictionary<boolean>)[]>;
         default: () => never[];
     };
-}, {
+}>, {
     innerClickEvents: import("vue").ComputedRef<{
         ColumnsNumberProvided?: number | undefined;
         RenderedColumnsNumberChanged?: number | undefined;
@@ -198,7 +198,7 @@ _default: import("vue").DefineComponent<{
         AiOverviewMounted?: void | undefined;
     }>;
     innerCssClasses: import("vue").ComputedRef<(string | Dictionary<boolean>)[]>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     filter: {
         type: PropType<SimpleFilterModel>;
         required: true;
@@ -208,7 +208,9 @@ _default: import("vue").DefineComponent<{
         type: PropType<(string | Dictionary<boolean>)[]>;
         default: () => never[];
     };
-}>>, {
+}>> & Readonly<{}>, {
     cssClasses: (string | Dictionary<boolean>)[];
-}, {}>
+}, {}, {
+    RenderlessFilter: import("vue").DefineComponent<{}, {}, any>;
+}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
 ```

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

@@ -14,20 +14,25 @@ Component for use as Layout to be filled with the rest of the Components.
 **Signature:**
 
 ```typescript
-_default: import("vue").DefineComponent<{
+_default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     asideAnimation: {
         type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
         default: () => import("vue").DefineComponent;
     };
     devMode: BooleanConstructor;
-}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     asideAnimation: {
         type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
         default: () => import("vue").DefineComponent;
     };
     devMode: BooleanConstructor;
-}>>, {
-    asideAnimation: string | Function | Record<string, any>;
+}>> & Readonly<{}>, {
     devMode: boolean;
-}, {}>
+    asideAnimation: string | Function | Record<string, any>;
+}, {}, {
+    BaseIdModal: import("vue").DefineComponent<{}, {}, any>;
+    BaseScroll: import("vue").DefineComponent<{}, {}, any>;
+    MainScroll: import("vue").DefineComponent<{}, {}, any>;
+    Scroll: import("vue").DefineComponent<{}, {}, any>;
+}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
 ```

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

@@ -9,7 +9,7 @@ Component that slices a list of filters and returns them using the default scope
 **Signature:**
 
 ```typescript
-_default: import("vue").DefineComponent<{
+_default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     filters: PropType<Filter[]>;
     parentId: {
         type: PropType<Filter["id"]>;
@@ -20,14 +20,14 @@ _default: import("vue").DefineComponent<{
         required: true;
     };
     buttonClass: StringConstructor;
-}, {
+}>, {
     cssClasses: import("vue").ComputedRef<VueCSSClasses>;
     toggleShowMoreFilters: (event: MouseEvent) => void;
     showButton: import("vue").ComputedRef<boolean>;
     difference: import("vue").ComputedRef<number>;
     slicedFilters: import("vue").ComputedRef<Filter[]>;
-    showMoreFilters: import("vue").Ref<boolean>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click:show-less" | "click:show-more")[], "click:show-less" | "click:show-more", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    showMoreFilters: import("vue").Ref<boolean, boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click:show-less" | "click:show-more")[], "click:show-less" | "click:show-more", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     filters: PropType<Filter[]>;
     parentId: {
         type: PropType<Filter["id"]>;
@@ -38,8 +38,8 @@ _default: import("vue").DefineComponent<{
         required: true;
     };
     buttonClass: StringConstructor;
-}>> & {
+}>> & Readonly<{
     "onClick:show-less"?: ((...args: any[]) => any) | undefined;
     "onClick:show-more"?: ((...args: any[]) => any) | undefined;
-}, {}, {}>
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
 ```

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

@@ -11,7 +11,7 @@ Additionally, this component exposes the following props to modify the classes o
 **Signature:**
 
 ```typescript
-_default: import("vue").DefineComponent<{
+_default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     scrollFactor: {
         type: NumberConstructor;
         default: number;
@@ -30,7 +30,7 @@ _default: import("vue").DefineComponent<{
     scrollContainerClass: {
         type: PropType<VueCSSClasses>;
     };
-}, {
+}>, {
     arrivedState: {
         left: boolean;
         right: boolean;
@@ -41,13 +41,13 @@ _default: import("vue").DefineComponent<{
         'x-sliding-panel-at-start': boolean;
         'x-sliding-panel-at-end': boolean;
     }>;
-    scrollContainerRef: import("vue").Ref<HTMLDivElement | undefined>;
-    slotContainerWidth: import("vue").Ref<number>;
-    xScroll: import("vue").WritableComputedRef<number>;
+    scrollContainerRef: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
+    slotContainerWidth: import("vue").ShallowRef<number, number>;
+    xScroll: import("vue").WritableComputedRef<number, number>;
     slots: Readonly<{
         [name: string]: import("vue").Slot<any> | undefined;
     }>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     scrollFactor: {
         type: NumberConstructor;
         default: number;
@@ -66,9 +66,9 @@ _default: import("vue").DefineComponent<{
     scrollContainerClass: {
         type: PropType<VueCSSClasses>;
     };
-}>>, {
+}>> & Readonly<{}>, {
     scrollFactor: number;
     showButtons: boolean;
     resetOnContentChange: boolean;
-}, {}>
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
 ```

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

@@ -187,5 +187,7 @@ _default: import("vue").DefineComponent<{}, {
         UserClickedAnAiOverviewResult: (payload: import("@empathyco/x-types").Result, metadata: WireMetadata) => unknown;
         AiOverviewMounted: (payload: undefined, metadata: WireMetadata) => unknown;
     }>>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {
+    GlobalXBus: import("vue").DefineComponent<{}, {}, any>;
+}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
 ```

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

@@ -7,7 +7,7 @@
 **Signature:**
 
 ```typescript
-_default: import("vue").DefineComponent<{
+_default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     values: {
         type: PropType<Dictionary<unknown>>;
     };
@@ -15,9 +15,9 @@ _default: import("vue").DefineComponent<{
         type: PropType<Array<keyof SnippetConfig>>;
         default: () => Array<keyof SnippetConfig>;
     };
-}, {
-    extraParams: import("vue").Ref<Record<string, any>>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {
+    extraParams: import("vue").Ref<Record<string, any>, Record<string, any>>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     values: {
         type: PropType<Dictionary<unknown>>;
     };
@@ -25,7 +25,9 @@ _default: import("vue").DefineComponent<{
         type: PropType<Array<keyof SnippetConfig>>;
         default: () => Array<keyof SnippetConfig>;
     };
-}>>, {
+}>> & Readonly<{}>, {
     excludedExtraParams: (keyof SnippetConfig)[];
-}, {}>
+}, {}, {
+    ExtraParams: import("vue").DefineComponent<{}, {}, any>;
+}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
 ```

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

@@ -9,23 +9,25 @@ The `SortDropdown` component allows user to select the search results order. Thi
 **Signature:**
 
 ```typescript
-_default: Vue.DefineComponent<{
+_default: Vue.DefineComponent<Vue.ExtractPropTypes<{
     items: {
         type: PropType<Sort[]>;
         required: true;
     };
     animation: PropType<string | typeof Vue>;
-}, {
+}>, {
     emitUserClickedASort: (sort: Sort) => void;
-    rootRef: Vue.Ref<Vue.DefineComponent<{}, {}, any> | undefined>;
+    rootRef: Vue.Ref<Vue.DefineComponent<{}, {}, any> | undefined, Vue.DefineComponent<{}, {}, any> | undefined>;
     selectedSort: Vue.ComputedRef<string>;
-}, unknown, {}, {}, Vue.ComponentOptionsMixin, Vue.ComponentOptionsMixin, "change"[], "change", Vue.PublicProps, Readonly<Vue.ExtractPropTypes<{
+}, {}, {}, {}, Vue.ComponentOptionsMixin, Vue.ComponentOptionsMixin, "change"[], "change", Vue.PublicProps, Readonly<Vue.ExtractPropTypes<{
     items: {
         type: PropType<Sort[]>;
         required: true;
     };
     animation: PropType<string | typeof Vue>;
-}>> & {
+}>> & Readonly<{
     onChange?: ((...args: any[]) => any) | undefined;
-}, {}, {}>
+}>, {}, {}, {
+    BaseDropdown: Vue.DefineComponent<{}, {}, any>;
+}, {}, string, Vue.ComponentProvideOptions, true, {}, any>
 ```

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

@@ -9,19 +9,19 @@ Component that sorts a list of filters and returns them using the default scoped
 **Signature:**
 
 ```typescript
-_default: import("vue").DefineComponent<{
+_default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     filters: PropType<Filter[]>;
     parentId: {
         type: PropType<Filter["id"]>;
         required: false;
     };
-}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+}>, () => "" | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
-}> | "", unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     filters: PropType<Filter[]>;
     parentId: {
         type: PropType<Filter["id"]>;
         required: false;
     };
-}>>, {}, {}>
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
 ```

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

@@ -9,7 +9,7 @@ The `SortList` component allows user to select the search results order. This co
 **Signature:**
 
 ```typescript
-_default: Vue.DefineComponent<{
+_default: Vue.DefineComponent<Vue.ExtractPropTypes<{
     items: {
         type: PropType<Sort[]>;
         required: true;
@@ -18,10 +18,10 @@ _default: Vue.DefineComponent<{
         type: PropType<string | typeof Vue>;
         default: () => string;
     };
-}, {
+}>, {
     listItems: Vue.ComputedRef<SortListItem[]>;
     selectedSort: Vue.ComputedRef<string>;
-}, unknown, {}, {}, Vue.ComponentOptionsMixin, Vue.ComponentOptionsMixin, {}, string, Vue.PublicProps, Readonly<Vue.ExtractPropTypes<{
+}, {}, {}, {}, Vue.ComponentOptionsMixin, Vue.ComponentOptionsMixin, {}, string, Vue.PublicProps, Readonly<Vue.ExtractPropTypes<{
     items: {
         type: PropType<Sort[]>;
         required: true;
@@ -30,7 +30,9 @@ _default: Vue.DefineComponent<{
         type: PropType<string | typeof Vue>;
         default: () => string;
     };
-}>>, {
+}>> & Readonly<{}>, {
     animation: string | typeof Vue;
-}, {}>
+}, {}, {
+    BaseEventButton: Vue.DefineComponent<{}, {}, any>;
+}, {}, string, Vue.ComponentProvideOptions, true, {}, any>
 ```

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

@@ -9,7 +9,7 @@ The `SortPickerList` component allows user to select the search results order. T
 **Signature:**
 
 ```typescript
-_default: Vue.DefineComponent<{
+_default: Vue.DefineComponent<Vue.ExtractPropTypes<{
     items: {
         type: PropType<Sort[]>;
         required: true;
@@ -19,10 +19,10 @@ _default: Vue.DefineComponent<{
         default: () => string;
     };
     buttonClass: StringConstructor;
-}, {
+}>, {
     listItems: Vue.ComputedRef<SortPickerItem[]>;
     selectedSort: Vue.ComputedRef<string>;
-}, unknown, {}, {}, Vue.ComponentOptionsMixin, Vue.ComponentOptionsMixin, {}, string, Vue.PublicProps, Readonly<Vue.ExtractPropTypes<{
+}, {}, {}, {}, Vue.ComponentOptionsMixin, Vue.ComponentOptionsMixin, {}, string, Vue.PublicProps, Readonly<Vue.ExtractPropTypes<{
     items: {
         type: PropType<Sort[]>;
         required: true;
@@ -32,7 +32,9 @@ _default: Vue.DefineComponent<{
         default: () => string;
     };
     buttonClass: StringConstructor;
-}>>, {
+}>> & Readonly<{}>, {
     animation: string | typeof Vue;
-}, {}>
+}, {}, {
+    BaseEventButton: Vue.DefineComponent<{}, {}, any>;
+}, {}, string, Vue.ComponentProvideOptions, true, {}, any>
 ```

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

@@ -14,5 +14,5 @@ The component will only render itself if the `spellcheckedQuery` property has va
 _default: import("vue").DefineComponent<{}, {
     query: import("vue").ComputedRef<string>;
     spellcheckedQuery: import("vue").ComputedRef<string>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
 ```

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

@@ -10,8 +10,8 @@ A button that when pressed emits the [XEventsTypes.UserAcceptedAQuery](./x-compo
 
 ```typescript
 _default: import("vue").DefineComponent<{}, {
-    el: import("vue").Ref<HTMLElement | undefined>;
+    el: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
     spellcheckedQuery: import("vue").ComputedRef<string>;
     emitEvents: () => void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
 ```

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

@@ -9,7 +9,7 @@ Renders a transition group wrapping the elements passed in the default slot and
 **Signature:**
 
 ```typescript
-__default__: import("vue").DefineComponent<{
+__default__: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     appear: {
         type: BooleanConstructor;
         default: boolean;
@@ -22,12 +22,12 @@ __default__: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
-}, {
+}>, {
     name: import("vue").ComputedRef<string>;
     onEnter: (el: Element, done: () => void) => void;
     onAfterEnter: (el: Element) => void;
     transitionDurationInMs: string;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     appear: {
         type: BooleanConstructor;
         default: boolean;
@@ -40,9 +40,9 @@ __default__: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
-}>>, {
+}>> & Readonly<{}>, {
     appear: boolean;
     tag: string;
     stagger: number;
-}, {}>
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
 ```

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

@@ -9,7 +9,7 @@ This component enables and manages the sending of information to the \[Empathy T
 **Signature:**
 
 ```typescript
-_default: import("vue").DefineComponent<{
+_default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     storageTTLMs: {
         type: NumberConstructor;
         default: number;
@@ -27,7 +27,7 @@ _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: null;
     };
-}, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, () => void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     storageTTLMs: {
         type: NumberConstructor;
         default: number;
@@ -45,10 +45,10 @@ _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: null;
     };
-}>>, {
+}>> & Readonly<{}>, {
     storageTTLMs: number;
     storageKey: string;
     queryTaggingDebounceMs: number;
     consent: boolean;
-}, {}>
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
 ```

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

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [TypingHTMLElement](./x-components.typinghtmlelement.md) &gt; [\_\_timeoutId](./x-components.typinghtmlelement.__timeoutid.md)
+
+## TypingHTMLElement.\_\_timeoutId property
+
+**Signature:**
+
+```typescript
+__timeoutId?: number;
+```

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

@@ -0,0 +1,19 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [TypingHTMLElement](./x-components.typinghtmlelement.md)
+
+## TypingHTMLElement interface
+
+**Signature:**
+
+```typescript
+export interface TypingHTMLElement extends HTMLElement 
+```
+**Extends:** HTMLElement
+
+## Properties
+
+|  Property | Modifiers | Type | Description |
+|  --- | --- | --- | --- |
+|  [\_\_timeoutId?](./x-components.typinghtmlelement.__timeoutid.md) |  | number | _(Optional)_ |
+

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

@@ -12,5 +12,9 @@ This component manages the browser URL parameters to preserve them through reloa
 _default: import("vue").DefineComponent<{}, {
     onPageShow: (event: PageTransitionEvent) => void;
     emitEvents: () => void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {
+    GlobalEvents: new () => {
+        $props: import("vue").VNodeProps & import("vue-global-events").GlobalEventsProps;
+    };
+}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
 ```

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 name=\"x-animate-width-\">\n    <!-- @slot (Required) Transition content -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\n\n/**\n * Renders a transition wrapping an element passed in the default slot and animating its width.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'AnimateWidth',\n})\n</script>\n\n<style lang=\"css\">\n.x-animate-width--enter-active,\n.x-animate-width--leave-active {\n  transition: width 0.3s ease-out;\n  overflow-x: hidden;\n}\n\n.x-animate-width--enter-from,\n.x-animate-width--leave-to {\n  width: 0 !important;\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>\nimport AnimateWidth from '@empathyco/x-components/js/components/animations/animate-width.vue'\n\nexport 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>\nimport AnimateWidth from '@empathyco/x-components/js/components/animations/animate-width.vue'\n\nexport default {\n  data() {\n    return {\n      visible: true,\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_createBlock","_Transition","_renderSlot"],"mappings":";;;;;;sBACEA,WAGa,CAAAC,UAAA,EAAA,EAHD,MAAK,kBAAkB,EAAA,EAAA;AAAA,IADrC,iBAGI,MAAQ;AAAA,MAARC,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;AAHZ,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"animate-width.vue.js","sources":["../../../../src/components/animations/animate-width.vue"],"sourcesContent":["<template>\n  <transition name=\"x-animate-width-\">\n    <!-- @slot (Required) Transition content -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\n\n/**\n * Renders a transition wrapping an element passed in the default slot and animating its width.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'AnimateWidth',\n})\n</script>\n\n<style lang=\"css\">\n.x-animate-width--enter-active,\n.x-animate-width--leave-active {\n  transition: width 0.3s ease-out;\n  overflow-x: hidden;\n}\n\n.x-animate-width--enter-from,\n.x-animate-width--leave-to {\n  width: 0 !important;\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>\nimport AnimateWidth from '@empathyco/x-components/js/components/animations/animate-width.vue'\n\nexport 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>\nimport AnimateWidth from '@empathyco/x-components/js/components/animations/animate-width.vue'\n\nexport default {\n  data() {\n    return {\n      visible: true,\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_createBlock","_Transition","_withCtx","_renderSlot"],"mappings":";;;;;;sBACEA,WAGa,CAAAC,UAAA,EAAA,EAHD,MAAK,kBAAkB,EAAA,EAAA;AAAA,IAAA,OAAA,EAAAC,OAAA,CAEjC,MAAQ;AAAA,MAARC,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

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    name=\"x-collapse-height-\"\n    :appear=\"appear\"\n    @enter=\"expand\"\n    @after-enter=\"cleanUpAnimationStyles\"\n    @leave=\"collapse\"\n  >\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useCollapseAnimation } from './use-collapse-animation'\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 */\nexport default defineComponent({\n  name: 'CollapseHeight',\n  props: {\n    /**\n     * Indicates if the transition must be applied on the initial render of the node.\n     */\n    appear: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  setup() {\n    return useCollapseAnimation('height')\n  },\n  // TODO Add support for extending enter, after-enter and leave transitions\n})\n</script>\n\n<style lang=\"css\">\n.x-collapse-height--enter-active,\n.x-collapse-height--leave-active {\n  transition: height var(--x-collapse-height-transition-duration, 0.3s) ease-out;\n  overflow: hidden;\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":["_createBlock","_Transition","_withCtx","_renderSlot"],"mappings":";;;;;;sBACEA,WASa,CAAAC,UAAA,EAAA;AAAA,IARX,IAAK,EAAA,oBAAA;AAAA,IACJ,MAAQ,EAAA,IAAA,CAAA,MAAA;AAAA,IACR,OAAO,EAAA,IAAA,CAAA,MAAA;AAAA,IACP,YAAa,EAAA,IAAA,CAAA,sBAAA;AAAA,IACb,OAAO,EAAA,IAAA,CAAA,QAAA;AAAA,GAAA,EAAA;AANZ,IAAA,OAAA,EAAAC,OAAA,CASI,MAAQ;AAAA,MAARC,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;AATZ,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,EAAA,CAAA,EAAA,CAAA,QAAA,EAAA,SAAA,EAAA,cAAA,EAAA,SAAA,CAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"collapse-height.vue.js","sources":["../../../../src/components/animations/collapse-height.vue"],"sourcesContent":["<template>\n  <transition\n    name=\"x-collapse-height-\"\n    :appear=\"appear\"\n    @enter=\"expand\"\n    @after-enter=\"cleanUpAnimationStyles\"\n    @leave=\"collapse\"\n  >\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useCollapseAnimation } from './use-collapse-animation'\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 */\nexport default defineComponent({\n  name: 'CollapseHeight',\n  props: {\n    /**\n     * Indicates if the transition must be applied on the initial render of the node.\n     */\n    appear: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  setup() {\n    return useCollapseAnimation('height')\n  },\n  // TODO Add support for extending enter, after-enter and leave transitions\n})\n</script>\n\n<style lang=\"css\">\n.x-collapse-height--enter-active,\n.x-collapse-height--leave-active {\n  transition: height var(--x-collapse-height-transition-duration, 0.3s) ease-out;\n  overflow: hidden;\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":["_createBlock","_Transition","_renderSlot"],"mappings":";;;;;;sBACEA,WASa,CAAAC,UAAA,EAAA;AAAA,IARX,IAAK,EAAA,oBAAA;AAAA,IACJ,MAAQ,EAAA,IAAA,CAAA,MAAA;AAAA,IACR,OAAO,EAAA,IAAA,CAAA,MAAA;AAAA,IACP,YAAa,EAAA,IAAA,CAAA,sBAAA;AAAA,IACb,OAAO,EAAA,IAAA,CAAA,QAAA;AAAA,GAAA,EAAA;qBAGR,MAAQ;AAAA,MAARC,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

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    name=\"x-collapse-width-\"\n    :appear=\"appear\"\n    @enter=\"expand\"\n    @after-enter=\"cleanUpAnimationStyles\"\n    @leave=\"collapse\"\n  >\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useCollapseAnimation } from './use-collapse-animation'\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 */\nexport default defineComponent({\n  name: 'CollapseWidth',\n  props: {\n    /**\n     * Indicates if the transition must be applied on the initial render of the node.\n     */\n    appear: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  setup() {\n    return useCollapseAnimation('width')\n  },\n  // TODO Add support for extending enter, after-enter and leave transitions\n})\n</script>\n\n<style lang=\"css\">\n.x-collapse-width--enter-active,\n.x-collapse-width--leave-active {\n  transition: width 0.3s ease-out;\n  overflow: hidden;\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":["_createBlock","_Transition","_withCtx","_renderSlot"],"mappings":";;;;;;sBACEA,WASa,CAAAC,UAAA,EAAA;AAAA,IARX,IAAK,EAAA,mBAAA;AAAA,IACJ,MAAQ,EAAA,IAAA,CAAA,MAAA;AAAA,IACR,OAAO,EAAA,IAAA,CAAA,MAAA;AAAA,IACP,YAAa,EAAA,IAAA,CAAA,sBAAA;AAAA,IACb,OAAO,EAAA,IAAA,CAAA,QAAA;AAAA,GAAA,EAAA;AANZ,IAAA,OAAA,EAAAC,OAAA,CASI,MAAQ;AAAA,MAARC,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;AATZ,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,EAAA,CAAA,EAAA,CAAA,QAAA,EAAA,SAAA,EAAA,cAAA,EAAA,SAAA,CAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"collapse-width.vue.js","sources":["../../../../src/components/animations/collapse-width.vue"],"sourcesContent":["<template>\n  <transition\n    name=\"x-collapse-width-\"\n    :appear=\"appear\"\n    @enter=\"expand\"\n    @after-enter=\"cleanUpAnimationStyles\"\n    @leave=\"collapse\"\n  >\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useCollapseAnimation } from './use-collapse-animation'\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 */\nexport default defineComponent({\n  name: 'CollapseWidth',\n  props: {\n    /**\n     * Indicates if the transition must be applied on the initial render of the node.\n     */\n    appear: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  setup() {\n    return useCollapseAnimation('width')\n  },\n  // TODO Add support for extending enter, after-enter and leave transitions\n})\n</script>\n\n<style lang=\"css\">\n.x-collapse-width--enter-active,\n.x-collapse-width--leave-active {\n  transition: width 0.3s ease-out;\n  overflow: hidden;\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":["_createBlock","_Transition","_renderSlot"],"mappings":";;;;;;sBACEA,WASa,CAAAC,UAAA,EAAA;AAAA,IARX,IAAK,EAAA,mBAAA;AAAA,IACJ,MAAQ,EAAA,IAAA,CAAA,MAAA;AAAA,IACR,OAAO,EAAA,IAAA,CAAA,MAAA;AAAA,IACP,YAAa,EAAA,IAAA,CAAA,sBAAA;AAAA,IACb,OAAO,EAAA,IAAA,CAAA,QAAA;AAAA,GAAA,EAAA;qBAGR,MAAQ;AAAA,MAARC,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

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 name=\"x-cross-fade-\" :appear=\"appear\">\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\n\n/**\n * Renders a transition wrapping the element passed in the default slot. The transition\n * fades between the two toggled elements at the same time.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'CrossFade',\n  props: {\n    /**\n     * Indicates if the transition must be applied on the initial render of the node.\n     */\n    appear: {\n      type: Boolean,\n      default: true,\n    },\n  },\n})\n</script>\n\n<style lang=\"css\">\n.x-cross-fade--enter-active,\n.x-cross-fade--leave-active {\n  transition: opacity 0.25s ease-in-out;\n  mix-blend-mode: multiply;\n}\n\n.x-cross-fade--leave-active {\n  position: absolute;\n}\n\n.x-cross-fade--leave-to,\n.x-cross-fade--enter-from {\n  opacity: 0 !important;\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":["_createBlock","_Transition","_withCtx","_renderSlot"],"mappings":";;;;;;sBACEA,WAGa,CAAAC,UAAA,EAAA;AAAA,IAHD,IAAK,EAAA,eAAA;AAAA,IAAiB,MAAQ,EAAA,IAAA,CAAA,MAAA;AAAA,GAAA,EAAA;AAD5C,IAAA,OAAA,EAAAC,OAAA,CAGI,MAAQ;AAAA,MAARC,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;AAHZ,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,EAAA,CAAA,EAAA,CAAA,QAAA,CAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"cross-fade.vue.js","sources":["../../../../src/components/animations/cross-fade.vue"],"sourcesContent":["<template>\n  <transition name=\"x-cross-fade-\" :appear=\"appear\">\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\n\n/**\n * Renders a transition wrapping the element passed in the default slot. The transition\n * fades between the two toggled elements at the same time.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'CrossFade',\n  props: {\n    /**\n     * Indicates if the transition must be applied on the initial render of the node.\n     */\n    appear: {\n      type: Boolean,\n      default: true,\n    },\n  },\n})\n</script>\n\n<style lang=\"css\">\n.x-cross-fade--enter-active,\n.x-cross-fade--leave-active {\n  transition: opacity 0.25s ease-in-out;\n  mix-blend-mode: multiply;\n}\n\n.x-cross-fade--leave-active {\n  position: absolute;\n}\n\n.x-cross-fade--leave-to,\n.x-cross-fade--enter-from {\n  opacity: 0 !important;\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":["_createBlock","_Transition","_renderSlot"],"mappings":";;;;;;sBACEA,WAGa,CAAAC,UAAA,EAAA;AAAA,IAHD,IAAK,EAAA,eAAA;AAAA,IAAiB,MAAQ,EAAA,IAAA,CAAA,MAAA;AAAA,GAAA,EAAA;qBAExC,MAAQ;AAAA,MAARC,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

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 class=\"x-fade-and-slide\" :name=\"name\" :tag=\"tag\" :appear=\"appear\">\n    <!-- @slot (Required) Transition-group content -->\n    <slot />\n  </transition-group>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useDisableAnimation } from './use-disable-animation'\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 */\nexport default defineComponent({\n  name: 'FadeAndSlide',\n  props: {\n    /**\n     * HTML Element that the transition-group children will be wrapped in.\n     */\n    tag: String,\n    /**\n     * Indicates if the transition must be applied on the initial render of the node.\n     */\n    appear: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  setup() {\n    /**\n     * The name of the animation.\n     */\n    const animationName = 'x-fade-and-slide-'\n\n    const { name } = useDisableAnimation(animationName)\n\n    return { name }\n  },\n})\n</script>\n\n<style lang=\"css\">\n.x-fade-and-slide--move,\n.x-fade-and-slide--enter-active,\n.x-fade-and-slide--leave-active {\n  transition:\n    opacity 0.2s ease-out,\n    transform 0.3s ease-out;\n}\n\n.x-fade-and-slide--enter-from,\n.x-fade-and-slide--leave-to {\n  transform: translate(-20%, 0);\n  opacity: 0;\n}\n\n.x-fade-and-slide--leave-active {\n  position: absolute;\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":["_createBlock","_TransitionGroup","_withCtx","_renderSlot"],"mappings":";;;;;;sBACEA,WAGmB,CAAAC,eAAA,EAAA;AAAA,IAHD,KAAM,EAAA,kBAAA;AAAA,IAAoB,IAAM,EAAA,IAAA,CAAA,IAAA;AAAA,IAAO,GAAK,EAAA,IAAA,CAAA,GAAA;AAAA,IAAM,MAAQ,EAAA,IAAA,CAAA,MAAA;AAAA,GAAA,EAAA;AAD9E,IAAA,OAAA,EAAAC,OAAA,CAGI,MAAQ;AAAA,MAARC,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;AAHZ,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,EAAA,CAAA,EAAA,CAAA,MAAA,EAAA,KAAA,EAAA,QAAA,CAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"fade-and-slide.vue.js","sources":["../../../../src/components/animations/fade-and-slide.vue"],"sourcesContent":["<template>\n  <transition-group class=\"x-fade-and-slide\" :name=\"name\" :tag=\"tag\" :appear=\"appear\">\n    <!-- @slot (Required) Transition-group content -->\n    <slot />\n  </transition-group>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useDisableAnimation } from './use-disable-animation'\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 */\nexport default defineComponent({\n  name: 'FadeAndSlide',\n  props: {\n    /**\n     * HTML Element that the transition-group children will be wrapped in.\n     */\n    tag: String,\n    /**\n     * Indicates if the transition must be applied on the initial render of the node.\n     */\n    appear: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  setup() {\n    /**\n     * The name of the animation.\n     */\n    const animationName = 'x-fade-and-slide-'\n\n    const { name } = useDisableAnimation(animationName)\n\n    return { name }\n  },\n})\n</script>\n\n<style lang=\"css\">\n.x-fade-and-slide--move,\n.x-fade-and-slide--enter-active,\n.x-fade-and-slide--leave-active {\n  transition:\n    opacity 0.2s ease-out,\n    transform 0.3s ease-out;\n}\n\n.x-fade-and-slide--enter-from,\n.x-fade-and-slide--leave-to {\n  transform: translate(-20%, 0);\n  opacity: 0;\n}\n\n.x-fade-and-slide--leave-active {\n  position: absolute;\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":["_createBlock","_TransitionGroup","_renderSlot"],"mappings":";;;;;;sBACEA,WAGmB,CAAAC,eAAA,EAAA;AAAA,IAHD,KAAM,EAAA,kBAAA;AAAA,IAAoB,IAAM,EAAA,IAAA,CAAA,IAAA;AAAA,IAAO,GAAK,EAAA,IAAA,CAAA,GAAA;AAAA,IAAM,MAAQ,EAAA,IAAA,CAAA,MAAA;AAAA,GAAA,EAAA;qBAE1E,MAAQ;AAAA,MAARC,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"fade.vue.js","sources":["../../../../src/components/animations/fade.vue"],"sourcesContent":["<template>\n  <transition name=\"x-fade-\" :appear=\"appear\">\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\n\n/**\n * Renders a transition wrapping the element passed in the default slot. The animation just fades\n * in/out the element by changing its opacity.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Fade',\n  props: {\n    /** Indicates if the transition must be applied on the initial render of the node. */\n    appear: {\n      type: Boolean,\n      default: true,\n    },\n  },\n})\n</script>\n\n<style lang=\"css\">\n.x-fade--enter-active,\n.x-fade--leave-active {\n  transition: opacity 0.25s ease-in-out;\n}\n\n.x-fade--leave-to,\n.x-fade--enter-from {\n  opacity: 0 !important;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Example\n\nThe `Fade` component is intended to be used as animation to wrap an element with v-if or v-show and\nanimate it. The animation just fades in/out the element by changing its opacity.\n\nWrapping a component:\n\n```vue live\n<template>\n  <div>\n    <button @click=\"shouldRender = !shouldRender\">Toggle</button>\n    <Fade>\n      <p v-if=\"shouldRender\">León is southern Spain</p>\n    </Fade>\n  </div>\n</template>\n<script>\nimport { Fade } from '@empathyco/x-components'\nexport default {\n  name: 'FadeAnimationDemo',\n  components: {\n    Fade,\n  },\n  data() {\n    return {\n      shouldRender: false,\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_createBlock","_Transition","_withCtx","_renderSlot"],"mappings":";;;;;;sBACEA,WAGa,CAAAC,UAAA,EAAA;AAAA,IAHD,IAAK,EAAA,SAAA;AAAA,IAAW,MAAQ,EAAA,IAAA,CAAA,MAAA;AAAA,GAAA,EAAA;AADtC,IAAA,OAAA,EAAAC,OAAA,CAGI,MAAQ;AAAA,MAARC,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;AAHZ,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,EAAA,CAAA,EAAA,CAAA,QAAA,CAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"fade.vue.js","sources":["../../../../src/components/animations/fade.vue"],"sourcesContent":["<template>\n  <transition name=\"x-fade-\" :appear=\"appear\">\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\n\n/**\n * Renders a transition wrapping the element passed in the default slot. The animation just fades\n * in/out the element by changing its opacity.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Fade',\n  props: {\n    /** Indicates if the transition must be applied on the initial render of the node. */\n    appear: {\n      type: Boolean,\n      default: true,\n    },\n  },\n})\n</script>\n\n<style lang=\"css\">\n.x-fade--enter-active,\n.x-fade--leave-active {\n  transition: opacity 0.25s ease-in-out;\n}\n\n.x-fade--leave-to,\n.x-fade--enter-from {\n  opacity: 0 !important;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Example\n\nThe `Fade` component is intended to be used as animation to wrap an element with v-if or v-show and\nanimate it. The animation just fades in/out the element by changing its opacity.\n\nWrapping a component:\n\n```vue live\n<template>\n  <div>\n    <button @click=\"shouldRender = !shouldRender\">Toggle</button>\n    <Fade>\n      <p v-if=\"shouldRender\">León is southern Spain</p>\n    </Fade>\n  </div>\n</template>\n<script>\nimport { Fade } from '@empathyco/x-components'\nexport default {\n  name: 'FadeAnimationDemo',\n  components: {\n    Fade,\n  },\n  data() {\n    return {\n      shouldRender: false,\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_createBlock","_Transition","_renderSlot"],"mappings":";;;;;;sBACEA,WAGa,CAAAC,UAAA,EAAA;AAAA,IAHD,IAAK,EAAA,SAAA;AAAA,IAAW,MAAQ,EAAA,IAAA,CAAA,MAAA;AAAA,GAAA,EAAA;qBAElC,MAAQ;AAAA,MAARC,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"staggered-fade-and-slide.vue.js","sources":["../../../../src/components/animations/staggered-fade-and-slide.vue"],"sourcesContent":["<template>\n  <TransitionGroup\n    :appear=\"appear\"\n    :name=\"name\"\n    :tag=\"tag\"\n    @enter=\"onEnter\"\n    @after-enter=\"onAfterEnter\"\n  >\n    <slot />\n  </TransitionGroup>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, onUpdated } from 'vue'\nimport { useDisableAnimation } from './use-disable-animation'\n\n/**\n * Renders a transition group wrapping the elements passed in the default slot and animating\n * them with a staggered fade and slide animation.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'StaggeredFadeAndSlide',\n  props: {\n    /** Indicates if the transition must be applied on the initial render of the node. */\n    appear: {\n      type: Boolean,\n      default: true,\n    },\n    /** The tag of the node to render to the DOM. */\n    tag: {\n      type: String,\n      default: 'div',\n    },\n    /** The time in ms to stagger each item. */\n    stagger: {\n      type: Number,\n      default: 25,\n    },\n  },\n  setup(props) {\n    /** The duration of the transition in ms. */\n    const transitionDuration = 250\n    /** Indicates if there are new elements to animate. */\n    let isNewSet = true\n    /** The new elements to animate. */\n    let elementsToAnimate: Element[] = []\n    /** The name of the animation. */\n    const { name } = useDisableAnimation('x-staggered-fade-and-slide')\n\n    /**\n     * When the component is updated, we are considering that\n     * a new set of elements is being inserted, so we need\n     * to refresh the elements to animate.\n     */\n    onUpdated(() => {\n      isNewSet = true\n    })\n\n    /**\n     * Listener called when one frame the element is inserted.\n     * This calculates the stagger delay to be used as `transitionDelay` and finally resolve\n     * the transition end after the CSS transition duration plus stagger delay.\n     *\n     * @param el - Element inserted.\n     * @param done - Callback to indicate the transition end.\n     */\n    function onEnter(el: Element, done: () => void) {\n      if (isNewSet) {\n        refreshElementsToAnimate(el)\n      }\n\n      const elIndex = elementsToAnimate.indexOf(el)\n      const staggerDelay = elIndex > 0 ? elIndex * props.stagger : 0\n\n      ;(el as HTMLElement).style.transitionDelay = `${staggerDelay}ms`\n      setTimeout(done, transitionDuration + staggerDelay)\n    }\n\n    /**\n     * Finds he parent's children subset of new elements entering the DOM.\n     * This is achieved by filtering out the elements that are already animated.\n     * Those with 'transition-delay' equal to '0ms' are considered already animated.\n     *\n     * Also marks isNewSet as false as the elements are already updated.\n     *\n     * @param el - Current element.\n     */\n    function refreshElementsToAnimate(el: Element) {\n      elementsToAnimate = [...el.parentElement!.children].filter(\n        c => (c as HTMLElement).style.transitionDelay !== '0ms',\n      )\n      isNewSet = false\n    }\n\n    /**\n     * Listener called when the enter transition has finished.\n     * This resets the `transitionDelay`.\n     *\n     * @param el - Element inserted.\n     */\n    function onAfterEnter(el: Element) {\n      ;(el as HTMLElement).style.transitionDelay = '0ms'\n    }\n\n    return {\n      name,\n      onEnter,\n      onAfterEnter,\n      transitionDurationInMs: `${transitionDuration}ms`,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\">\n/* 1. Declare transitions */\n.x-staggered-fade-and-slide-enter-active,\n.x-staggered-fade-and-slide-leave-active {\n  transition: v-bind(transitionDurationInMs) ease-out;\n  transition-property: opacity, transform;\n}\n\n.x-staggered-fade-and-slide-move {\n  transition: transform v-bind(transitionDurationInMs) ease-out;\n}\n\n/* 2. Declare enter, from and leave to state */\n.x-staggered-fade-and-slide-enter,\n.x-staggered-fade-and-slide-enter-from,\n.x-staggered-fade-and-slide-leave-to {\n  opacity: 0;\n  transform: translate3d(0, 50%, 0);\n}\n\n/* 3. Ensure leaving items are taken out of layout flow so that moving animations can be\n        calculated correctly. */\n.x-staggered-fade-and-slide-leave-active {\n  position: absolute;\n}\n</style>\n\n<docs lang=\"mdx\">\nThe Staggered fade and slide components works as the normal fade and slide components, but it also\nadds a configurable delay to each transition.\n\n## Example\n\n### Used with animatable components\n\n```vue\n<AnimatableComponent :animation=\"StaggeredFadeAndSlide\" />\n```\n\n### Used as a regular component:\n\nThis components exposes all the props and events of the Staggering transition group, like the `tag`\nor the `stagger` props:\n\n```vue\n<StaggeredFadeAndSlide tag=\"ul\" :stagger=\"50\">\n  <li key=\"1\">Element to animate</li>\n  <li key=\"2\">Element to animate</li>\n  <li key=\"3\">Element to animate</li>\n</StaggeredFadeAndSlide>\n```\n</docs>\n"],"names":["_createBlock","_TransitionGroup","_withCtx","_renderSlot"],"mappings":";;;;;;sBACEA,WAQkB,CAAAC,eAAA,EAAA;AAAA,IAPf,MAAQ,EAAA,IAAA,CAAA,MAAA;AAAA,IACR,IAAM,EAAA,IAAA,CAAA,IAAA;AAAA,IACN,GAAK,EAAA,IAAA,CAAA,GAAA;AAAA,IACL,OAAO,EAAA,IAAA,CAAA,OAAA;AAAA,IACP,YAAa,EAAA,IAAA,CAAA,YAAA;AAAA,GAAA,EAAA;AANlB,IAAA,OAAA,EAAAC,OAAA,CAQI,MAAQ;AAAA,MAARC,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;AARZ,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,EAAA,CAAA,EAAA,CAAA,QAAA,EAAA,MAAA,EAAA,KAAA,EAAA,SAAA,EAAA,cAAA,CAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"staggered-fade-and-slide.vue.js","sources":["../../../../src/components/animations/staggered-fade-and-slide.vue"],"sourcesContent":["<template>\n  <TransitionGroup\n    :appear=\"appear\"\n    :name=\"name\"\n    :tag=\"tag\"\n    @enter=\"onEnter\"\n    @after-enter=\"onAfterEnter\"\n  >\n    <slot />\n  </TransitionGroup>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, onUpdated } from 'vue'\nimport { useDisableAnimation } from './use-disable-animation'\n\n/**\n * Renders a transition group wrapping the elements passed in the default slot and animating\n * them with a staggered fade and slide animation.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'StaggeredFadeAndSlide',\n  props: {\n    /** Indicates if the transition must be applied on the initial render of the node. */\n    appear: {\n      type: Boolean,\n      default: true,\n    },\n    /** The tag of the node to render to the DOM. */\n    tag: {\n      type: String,\n      default: 'div',\n    },\n    /** The time in ms to stagger each item. */\n    stagger: {\n      type: Number,\n      default: 25,\n    },\n  },\n  setup(props) {\n    /** The duration of the transition in ms. */\n    const transitionDuration = 250\n    /** Indicates if there are new elements to animate. */\n    let isNewSet = true\n    /** The new elements to animate. */\n    let elementsToAnimate: Element[] = []\n    /** The name of the animation. */\n    const { name } = useDisableAnimation('x-staggered-fade-and-slide')\n\n    /**\n     * When the component is updated, we are considering that\n     * a new set of elements is being inserted, so we need\n     * to refresh the elements to animate.\n     */\n    onUpdated(() => {\n      isNewSet = true\n    })\n\n    /**\n     * Listener called when one frame the element is inserted.\n     * This calculates the stagger delay to be used as `transitionDelay` and finally resolve\n     * the transition end after the CSS transition duration plus stagger delay.\n     *\n     * @param el - Element inserted.\n     * @param done - Callback to indicate the transition end.\n     */\n    function onEnter(el: Element, done: () => void) {\n      if (isNewSet) {\n        refreshElementsToAnimate(el)\n      }\n\n      const elIndex = elementsToAnimate.indexOf(el)\n      const staggerDelay = elIndex > 0 ? elIndex * props.stagger : 0\n\n      ;(el as HTMLElement).style.transitionDelay = `${staggerDelay}ms`\n      setTimeout(done, transitionDuration + staggerDelay)\n    }\n\n    /**\n     * Finds he parent's children subset of new elements entering the DOM.\n     * This is achieved by filtering out the elements that are already animated.\n     * Those with 'transition-delay' equal to '0ms' are considered already animated.\n     *\n     * Also marks isNewSet as false as the elements are already updated.\n     *\n     * @param el - Current element.\n     */\n    function refreshElementsToAnimate(el: Element) {\n      elementsToAnimate = [...el.parentElement!.children].filter(\n        c => (c as HTMLElement).style.transitionDelay !== '0ms',\n      )\n      isNewSet = false\n    }\n\n    /**\n     * Listener called when the enter transition has finished.\n     * This resets the `transitionDelay`.\n     *\n     * @param el - Element inserted.\n     */\n    function onAfterEnter(el: Element) {\n      ;(el as HTMLElement).style.transitionDelay = '0ms'\n    }\n\n    return {\n      name,\n      onEnter,\n      onAfterEnter,\n      transitionDurationInMs: `${transitionDuration}ms`,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\">\n/* 1. Declare transitions */\n.x-staggered-fade-and-slide-enter-active,\n.x-staggered-fade-and-slide-leave-active {\n  transition: v-bind(transitionDurationInMs) ease-out;\n  transition-property: opacity, transform;\n}\n\n.x-staggered-fade-and-slide-move {\n  transition: transform v-bind(transitionDurationInMs) ease-out;\n}\n\n/* 2. Declare enter, from and leave to state */\n.x-staggered-fade-and-slide-enter,\n.x-staggered-fade-and-slide-enter-from,\n.x-staggered-fade-and-slide-leave-to {\n  opacity: 0;\n  transform: translate3d(0, 50%, 0);\n}\n\n/* 3. Ensure leaving items are taken out of layout flow so that moving animations can be\n        calculated correctly. */\n.x-staggered-fade-and-slide-leave-active {\n  position: absolute;\n}\n</style>\n\n<docs lang=\"mdx\">\nThe Staggered fade and slide components works as the normal fade and slide components, but it also\nadds a configurable delay to each transition.\n\n## Example\n\n### Used with animatable components\n\n```vue\n<AnimatableComponent :animation=\"StaggeredFadeAndSlide\" />\n```\n\n### Used as a regular component:\n\nThis components exposes all the props and events of the Staggering transition group, like the `tag`\nor the `stagger` props:\n\n```vue\n<StaggeredFadeAndSlide tag=\"ul\" :stagger=\"50\">\n  <li key=\"1\">Element to animate</li>\n  <li key=\"2\">Element to animate</li>\n  <li key=\"3\">Element to animate</li>\n</StaggeredFadeAndSlide>\n```\n</docs>\n"],"names":["_createBlock","_TransitionGroup","_renderSlot"],"mappings":";;;;;;sBACEA,WAQkB,CAAAC,eAAA,EAAA;AAAA,IAPf,MAAQ,EAAA,IAAA,CAAA,MAAA;AAAA,IACR,IAAM,EAAA,IAAA,CAAA,IAAA;AAAA,IACN,GAAK,EAAA,IAAA,CAAA,GAAA;AAAA,IACL,OAAO,EAAA,IAAA,CAAA,OAAA;AAAA,IACP,YAAa,EAAA,IAAA,CAAA,YAAA;AAAA,GAAA,EAAA;qBAEd,MAAQ;AAAA,MAARC,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/components/auto-progress-bar.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"auto-progress-bar.vue.js","sources":["../../../src/components/auto-progress-bar.vue"],"sourcesContent":["<template>\n  <div v-if=\"isLoading\" class=\"x-progress-bar\" data-test=\"progress-bar\" role=\"progressbar\">\n    <div class=\"x-progress-bar-fill\" :style=\"cssStyles\" data-test=\"progress-bar-line\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { StyleValue } from 'vue'\nimport { computed, defineComponent } from 'vue'\n\n/**\n * The auto progress bar component is useful for displaying a visual indicator of numerical data\n * in a bar shape.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'AutoProgressBar',\n  props: {\n    /**\n     * A boolean flag indicating if the bar is loading.\n     *\n     * @public\n     */\n    isLoading: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * The duration in seconds of the progress bar.\n     *\n     * @public\n     */\n    durationInSeconds: {\n      type: Number,\n      default: 5,\n    },\n  },\n  setup(props) {\n    /**\n     * Computed property to calculate the animation's duration.\n     *\n     * @returns The CSS styles of the animation.\n     *\n     * @internal\n     */\n    const cssStyles = computed<StyleValue>(() => ({\n      animationDuration: `${props.durationInSeconds}s`,\n    }))\n\n    return {\n      cssStyles,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-progress-bar {\n  display: inline-block;\n  overflow: hidden;\n  background-color: #dbe2e5;\n  border-radius: 4px;\n}\n\n.x-progress-bar-fill {\n  height: 4px;\n  background-color: #283034;\n  animation: slide linear;\n  transform-origin: left;\n}\n\n@keyframes slide {\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(0);\n  }\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n  after the user clicks the redirection button.\n- [`UserClickedAbortARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n  after the user clicks the abort redirection button.\n\n## See it in action\n\nHere you have a basic example of how the auto progress bar is rendered.\n\n```vue live\n<template>\n  <AutoProgressBar :isLoading=\"isLoading\" :durationInSeconds=\"durationInSeconds\" />\n</template>\n\n<script>\nimport { AutoProgressBar } from '@empathyco/x-components'\nexport default {\n  name: 'AutoProgressBarDemo',\n  components: {\n    AutoProgressBar,\n  },\n  data() {\n    return {\n      isLoading: true,\n      durationInSeconds: 100,\n    }\n  },\n}\n</script>\n```\n\n### Play with props\n\nIn this example, the auto progress bar has been set to do an animation for 5 seconds. There is a way\nto cancel the animation by sending the isLoading prop to false.\n\n```vue live\n<template>\n  <AutoProgressBar :durationInSeconds=\"5\" :isLoading=\"true\" />\n</template>\n\n<script>\nimport { AutoProgressBar } from '@empathyco/x-components'\nexport default {\n  name: 'AutoProgressBarDemo',\n  components: {\n    AutoProgressBar,\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode","_normalizeStyle","_createCommentVNode"],"mappings":";;;;;;AAAA,EAAA,GAAA,EAAA,CAAA;AAAA,EACwB,KAAM,EAAA,gBAAA;AAAA,EAAiB,WAAU,EAAA,cAAA;AAAA,EAAe,IAAK,EAAA,aAAA;;;SAAhE,IAAX,CAAA,SAAA,IAAAA,SAAA,EAAA,EAAAC,kBAAA,CAEM,OAFN,UAEM,EAAA;AAAA,IADJC,kBAAA;AAAA,MAAoF,KAAA;AAAA,MAAA;AAAA,QAA/E,KAAM,EAAA,qBAAA;AAAA,QAAuB,KAAA,EAFtCC,eAE6C,IAAS,CAAA,SAAA,CAAA;AAAA,QAAE,WAAU,EAAA,mBAAA;AAAA,OAAA;;;;;AAFlE,GAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"auto-progress-bar.vue.js","sources":["../../../src/components/auto-progress-bar.vue"],"sourcesContent":["<template>\n  <div v-if=\"isLoading\" class=\"x-progress-bar\" data-test=\"progress-bar\" role=\"progressbar\">\n    <div class=\"x-progress-bar-fill\" :style=\"cssStyles\" data-test=\"progress-bar-line\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { StyleValue } from 'vue'\nimport { computed, defineComponent } from 'vue'\n\n/**\n * The auto progress bar component is useful for displaying a visual indicator of numerical data\n * in a bar shape.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'AutoProgressBar',\n  props: {\n    /**\n     * A boolean flag indicating if the bar is loading.\n     *\n     * @public\n     */\n    isLoading: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * The duration in seconds of the progress bar.\n     *\n     * @public\n     */\n    durationInSeconds: {\n      type: Number,\n      default: 5,\n    },\n  },\n  setup(props) {\n    /**\n     * Computed property to calculate the animation's duration.\n     *\n     * @returns The CSS styles of the animation.\n     *\n     * @internal\n     */\n    const cssStyles = computed<StyleValue>(() => ({\n      animationDuration: `${props.durationInSeconds}s`,\n    }))\n\n    return {\n      cssStyles,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-progress-bar {\n  display: inline-block;\n  overflow: hidden;\n  background-color: #dbe2e5;\n  border-radius: 4px;\n}\n\n.x-progress-bar-fill {\n  height: 4px;\n  background-color: #283034;\n  animation: slide linear;\n  transform-origin: left;\n}\n\n@keyframes slide {\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(0);\n  }\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n  after the user clicks the redirection button.\n- [`UserClickedAbortARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n  after the user clicks the abort redirection button.\n\n## See it in action\n\nHere you have a basic example of how the auto progress bar is rendered.\n\n```vue live\n<template>\n  <AutoProgressBar :isLoading=\"isLoading\" :durationInSeconds=\"durationInSeconds\" />\n</template>\n\n<script>\nimport { AutoProgressBar } from '@empathyco/x-components'\nexport default {\n  name: 'AutoProgressBarDemo',\n  components: {\n    AutoProgressBar,\n  },\n  data() {\n    return {\n      isLoading: true,\n      durationInSeconds: 100,\n    }\n  },\n}\n</script>\n```\n\n### Play with props\n\nIn this example, the auto progress bar has been set to do an animation for 5 seconds. There is a way\nto cancel the animation by sending the isLoading prop to false.\n\n```vue live\n<template>\n  <AutoProgressBar :durationInSeconds=\"5\" :isLoading=\"true\" />\n</template>\n\n<script>\nimport { AutoProgressBar } from '@empathyco/x-components'\nexport default {\n  name: 'AutoProgressBarDemo',\n  components: {\n    AutoProgressBar,\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode","_normalizeStyle"],"mappings":";;;;;;;EACwB,KAAM,EAAA,gBAAA;AAAA,EAAiB,WAAU,EAAA,cAAA;AAAA,EAAe,IAAK,EAAA,aAAA;;;SAAhE,IAAX,CAAA,SAAA,IAAAA,SAAA,EAAA,EAAAC,kBAAA,CAEM,OAFN,UAEM,EAAA;AAAA,IADJC,kBAAA;AAAA,MAAoF,KAAA;AAAA,MAAA;AAAA,QAA/E,KAAM,EAAA,qBAAA;AAAA,QAAuB,KAAA,EAAKC,eAAE,IAAS,CAAA,SAAA,CAAA;AAAA,QAAE,WAAU,EAAA,mBAAA;AAAA,OAAA;;;;;;;;;;;"}