@empathyco/x-components 6.0.0-alpha.9 → 6.0.0-alpha.90

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    @enter=\"expand\"\n    @after-enter=\"cleanUpAnimationStyles\"\n    @leave=\"collapse\"\n    name=\"x-collapse-height-\"\n    :appear=\"appear\"\n  >\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\n  import { 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   */\n  export 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: function () {\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 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":["expand","_openBlock","_createBlock","_Transition","collapse","appear","_renderSlot"],"mappings":";;;;;AAEK,SAAA,WAAA,CAAOA,IAAM,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AACb,EAAA,OAAAC,SAAA,EAAmC,EAAAC,WAAA,CAAAC,UAAA,EAAA;AAAA,IACnC,OAAOC,EAAAA,IAAAA,CAAAA,MAAAA;AAAAA,IACR,YAAK,EAAA,IAAA,CAAA,sBAAA;AAAA,IACJ,OAAQC,EAAAA,IAAAA,CAAAA,QAAAA;AAAAA,IAAAA,IAAAA,EAAAA,oBAAAA;AANb,IAAA,MAAA,EAAA,IAAA,CAAA,MAAA;AAAA,GAAA,EAAA;;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,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 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":["_openBlock","_createBlock","_Transition","collapse","_renderSlot"],"mappings":";;;;;AAEQ,SAAA,WAAA,CAAC,IAAoB,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AAClB,EAAA,OAAAA,SAAA,EAAQ,EAAAC,WAAA,CAAAC,UAAA,EAAA;AAAA,IACd,IAAA,EAAA,oBAAA;AAAA,IACA,MAAW,EAAA,IAAA,CAAA,MAAA;AAAA,IACX,OAAOC,EAAAA,IAAAA,CAAAA,MAAAA;AAAAA,IAAAA,YAAAA,EAAAA,IAAAA,CAAAA,sBAAAA;AANZ,IAAA,OAAA,EAAA,IAAA,CAAA,QAAA;AAAA,GAAA,EAAA;;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

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

@@ -15,12 +15,12 @@ var _sfc_main = defineComponent({
          */
         appear: {
             type: Boolean,
-            default: true
-        }
+            default: true,
+        },
     },
-    setup: function () {
+    setup() {
         return useCollapseAnimation('height');
-    }
+    },
     // TODO Add support for extending enter, after-enter and leave transitions
 });
 

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

@@ -1 +1 @@
-{"version":3,"file":"collapse-height.vue2.js","sources":["../../../../src/components/animations/collapse-height.vue"],"sourcesContent":["<template>\n  <transition\n    @enter=\"expand\"\n    @after-enter=\"cleanUpAnimationStyles\"\n    @leave=\"collapse\"\n    name=\"x-collapse-height-\"\n    :appear=\"appear\"\n  >\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\n  import { 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   */\n  export 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: function () {\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 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":[],"mappings":";;;AAiBE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,gBAAgB;AACtB,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAG;AACd,SAAA;AACD,KAAA;AACD,IAAA,KAAK,EAAE,YAAA;AACL,QAAA,OAAO,oBAAoB,CAAC,QAAQ,CAAC,CAAA;KACvC;;AAED,CAAA,CAAC;;;;"}
+{"version":3,"file":"collapse-height.vue2.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 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":[],"mappings":";;;AAiBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,gBAAgB;AACtB,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACF,KAAA;IACD,KAAK,GAAA;AACH,QAAA,OAAO,oBAAoB,CAAC,QAAQ,CAAA,CAAA;KACrC;;AAEF,CAAA,CAAA;;;;"}

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

@@ -5,18 +5,18 @@ import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(Transition, {
+    name: "x-collapse-width-",
+    appear: _ctx.appear,
     onEnter: _ctx.expand,
     onAfterEnter: _ctx.cleanUpAnimationStyles,
-    onLeave: _ctx.collapse,
-    name: "x-collapse-width-",
-    appear: _ctx.appear
+    onLeave: _ctx.collapse
   }, {
     default: withCtx(() => [
       renderSlot(_ctx.$slots, "default")
     ]),
     _: 3
     /* FORWARDED */
-  }, 8, ["onEnter", "onAfterEnter", "onLeave", "appear"]);
+  }, 8, ["appear", "onEnter", "onAfterEnter", "onLeave"]);
 }
 var collapseWidth = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 

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    @enter=\"expand\"\n    @after-enter=\"cleanUpAnimationStyles\"\n    @leave=\"collapse\"\n    name=\"x-collapse-width-\"\n    :appear=\"appear\"\n  >\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\n  import { 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   */\n  export 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: function () {\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":["expand","_openBlock","_createBlock","_Transition","collapse","appear","_renderSlot"],"mappings":";;;;;AAEK,SAAA,WAAA,CAAOA,IAAM,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AACb,EAAA,OAAAC,SAAA,EAAmC,EAAAC,WAAA,CAAAC,UAAA,EAAA;AAAA,IACnC,OAAOC,EAAAA,IAAAA,CAAAA,MAAAA;AAAAA,IACR,YAAK,EAAA,IAAA,CAAA,sBAAA;AAAA,IACJ,OAAQC,EAAAA,IAAAA,CAAAA,QAAAA;AAAAA,IAAAA,IAAAA,EAAAA,mBAAAA;AANb,IAAA,MAAA,EAAA,IAAA,CAAA,MAAA;AAAA,GAAA,EAAA;;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,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":["_openBlock","_createBlock","_Transition","collapse","_renderSlot"],"mappings":";;;;;AAEQ,SAAA,WAAA,CAAC,IAAmB,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AACjB,EAAA,OAAAA,SAAA,EAAQ,EAAAC,WAAA,CAAAC,UAAA,EAAA;AAAA,IACd,IAAA,EAAA,mBAAA;AAAA,IACA,MAAW,EAAA,IAAA,CAAA,MAAA;AAAA,IACX,OAAOC,EAAAA,IAAAA,CAAAA,MAAAA;AAAAA,IAAAA,YAAAA,EAAAA,IAAAA,CAAAA,sBAAAA;AANZ,IAAA,OAAA,EAAA,IAAA,CAAA,QAAA;AAAA,GAAA,EAAA;;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

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

@@ -15,12 +15,12 @@ var _sfc_main = defineComponent({
          */
         appear: {
             type: Boolean,
-            default: true
-        }
+            default: true,
+        },
     },
-    setup: function () {
+    setup() {
         return useCollapseAnimation('width');
-    }
+    },
     // TODO Add support for extending enter, after-enter and leave transitions
 });
 

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

@@ -1 +1 @@
-{"version":3,"file":"collapse-width.vue2.js","sources":["../../../../src/components/animations/collapse-width.vue"],"sourcesContent":["<template>\n  <transition\n    @enter=\"expand\"\n    @after-enter=\"cleanUpAnimationStyles\"\n    @leave=\"collapse\"\n    name=\"x-collapse-width-\"\n    :appear=\"appear\"\n  >\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\n  import { 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   */\n  export 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: function () {\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":[],"mappings":";;;AAiBE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,eAAe;AACrB,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAG;AACd,SAAA;AACD,KAAA;AACD,IAAA,KAAK,EAAE,YAAA;AACL,QAAA,OAAO,oBAAoB,CAAC,OAAO,CAAC,CAAA;KACtC;;AAED,CAAA,CAAC;;;;"}
+{"version":3,"file":"collapse-width.vue2.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":[],"mappings":";;;AAiBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,eAAe;AACrB,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACF,KAAA;IACD,KAAK,GAAA;AACH,QAAA,OAAO,oBAAoB,CAAC,OAAO,CAAA,CAAA;KACpC;;AAEF,CAAA,CAAA;;;;"}

package/js/components/animations/create-directional-animation-factory.js

@@ -14,11 +14,11 @@ function createDirectionalAnimationFactory(animationName) {
         name: `transition-${animationName}-${animationOrigin}`,
         setup(_, { slots }) {
             return () => h(Transition, {
-                name: `x-${animationName}--${animationOrigin} x-${animationName}-`
+                name: `x-${animationName}--${animationOrigin} x-${animationName}-`,
             }, 
             // Vue recommends using function for better performance.
             () => slots.default?.() ?? '');
-        }
+        },
     });
 }
 

package/js/components/animations/create-directional-animation-factory.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-directional-animation-factory.js","sources":["../../../../src/components/animations/create-directional-animation-factory.ts"],"sourcesContent":["import { DefineComponent, defineComponent, h, Transition } from 'vue';\n\nexport type AnimationOrigin =\n  | 'top'\n  | 'bottom'\n  | 'top-to-bottom'\n  | 'bottom-to-top'\n  | 'left'\n  | 'right'\n  | 'left-to-right'\n  | 'right-to-left';\n\n/**\n * Abstract Factory to create animations Factory. The returned animation factory uses the\n * `animationName` parameter to create a Transition Component with that name.\n *\n * @param animationName - The name to use in the Transition Component of animation.\n * @returns The animation factory configured.\n *\n * @internal\n */\nexport function createDirectionalAnimationFactory(\n  animationName: string\n): (animationOrigin?: AnimationOrigin) => DefineComponent {\n  return (animationOrigin = 'top') =>\n    defineComponent({\n      name: `transition-${animationName}-${animationOrigin}`,\n      setup(_, { slots }) {\n        return () =>\n          h(\n            Transition,\n            {\n              name: `x-${animationName}--${animationOrigin} x-${animationName}-`\n            },\n            // Vue recommends using function for better performance.\n            () => slots.default?.() ?? ''\n          );\n      }\n    });\n}\n"],"names":[],"mappings":";;AAYA;;;;;;;;AAQG;AACG,SAAU,iCAAiC,CAC/C,aAAqB,EAAA;IAErB,OAAO,CAAC,eAAe,GAAG,KAAK,KAC7B,eAAe,CAAC;AACd,QAAA,IAAI,EAAE,CAAA,WAAA,EAAc,aAAa,CAAA,CAAA,EAAI,eAAe,CAAE,CAAA;AACtD,QAAA,KAAK,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,EAAA;AAChB,YAAA,OAAO,MACL,CAAC,CACC,UAAU,EACV;AACE,gBAAA,IAAI,EAAE,CAAK,EAAA,EAAA,aAAa,KAAK,eAAe,CAAA,GAAA,EAAM,aAAa,CAAG,CAAA,CAAA;AACnE,aAAA;;YAED,MAAM,KAAK,CAAC,OAAO,IAAI,IAAI,EAAE,CAC9B,CAAC;SACL;AACF,KAAA,CAAC,CAAC;AACP;;;;"}
+{"version":3,"file":"create-directional-animation-factory.js","sources":["../../../../src/components/animations/create-directional-animation-factory.ts"],"sourcesContent":["import type { DefineComponent } from 'vue'\nimport { defineComponent, h, Transition } from 'vue'\n\nexport type AnimationOrigin =\n  | 'top'\n  | 'bottom'\n  | 'top-to-bottom'\n  | 'bottom-to-top'\n  | 'left'\n  | 'right'\n  | 'left-to-right'\n  | 'right-to-left'\n\n/**\n * Abstract Factory to create animations Factory. The returned animation factory uses the\n * `animationName` parameter to create a Transition Component with that name.\n *\n * @param animationName - The name to use in the Transition Component of animation.\n * @returns The animation factory configured.\n *\n * @internal\n */\nexport function createDirectionalAnimationFactory(\n  animationName: string,\n): (animationOrigin?: AnimationOrigin) => DefineComponent {\n  return (animationOrigin = 'top') =>\n    defineComponent({\n      name: `transition-${animationName}-${animationOrigin}`,\n      setup(_, { slots }) {\n        return () =>\n          h(\n            Transition,\n            {\n              name: `x-${animationName}--${animationOrigin} x-${animationName}-`,\n            },\n            // Vue recommends using function for better performance.\n            () => slots.default?.() ?? '',\n          )\n      },\n    })\n}\n"],"names":[],"mappings":";;AAaA;;;;;;;;AAQG;AACG,SAAU,iCAAiC,CAC/C,aAAqB,EAAA;IAErB,OAAO,CAAC,eAAe,GAAG,KAAK,KAC7B,eAAe,CAAC;AACd,QAAA,IAAI,EAAE,CAAA,WAAA,EAAc,aAAa,CAAA,CAAA,EAAI,eAAe,CAAE,CAAA;AACtD,QAAA,KAAK,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,EAAA;AAChB,YAAA,OAAO,MACL,CAAC,CACC,UAAU,EACV;AACE,gBAAA,IAAI,EAAE,CAAK,EAAA,EAAA,aAAa,KAAK,eAAe,CAAA,GAAA,EAAM,aAAa,CAAG,CAAA,CAAA;AACnE,aAAA;;YAED,MAAM,KAAK,CAAC,OAAO,IAAI,IAAI,EAAE,CAC9B,CAAA;SACJ;AACF,KAAA,CAAC,CAAA;AACN;;;;"}

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\">\n  import { 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   */\n  export 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":["_openBlock","_createBlock","_Transition","_renderSlot"],"mappings":";;;;;AACkB,SAAA,WAAA,CAAC,IAAe,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AAAQ,EAAA,OAAAA,SAAA,EAAQ,EAAAC,WAAA,CAAAC,UAAA,EAAA;AAAA,IAAA,IAAA,EAAA,eAAA;AADlD,IAAA,MAAA,EAAA,IAAA,CAAA,MAAA;AAAA,GAAA,EAAA;;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,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":["_openBlock","_createBlock","_Transition","_renderSlot"],"mappings":";;;;;AACkB,SAAA,WAAA,CAAC,IAAe,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AAAQ,EAAA,OAAAA,SAAA,EAAQ,EAAAC,WAAA,CAAAC,UAAA,EAAA;AAAA,IAAA,IAAA,EAAA,eAAA;AADlD,IAAA,MAAA,EAAA,IAAA,CAAA,MAAA;AAAA,GAAA,EAAA;;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

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

@@ -14,9 +14,9 @@ var _sfc_main = defineComponent({
          */
         appear: {
             type: Boolean,
-            default: true
-        }
-    }
+            default: true,
+        },
+    },
 });
 
 export { _sfc_main as default };

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

@@ -1 +1 @@
-{"version":3,"file":"cross-fade.vue2.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\">\n  import { 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   */\n  export 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":[],"mappings":";;AAUE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAG;AACd,SAAA;AACF,KAAA;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"cross-fade.vue2.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":[],"mappings":";;AAUA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACF,KAAA;AACF,CAAA,CAAA;;;;"}

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

@@ -1,5 +1,5 @@
 import _sfc_main from './fade-and-slide.vue2.js';
-import { openBlock, createBlock, TransitionGroup, withCtx, createCommentVNode, renderSlot } from 'vue';
+import { openBlock, createBlock, TransitionGroup, withCtx, renderSlot } from 'vue';
 import './fade-and-slide.vue3.js';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
@@ -11,7 +11,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     appear: _ctx.appear
   }, {
     default: withCtx(() => [
-      createCommentVNode(" @slot (Required) Transition-group content "),
       renderSlot(_ctx.$slots, "default")
     ]),
     _: 3

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\">\n  import { defineComponent } from 'vue';\n  import { 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   */\n  export 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: function () {\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: opacity 0.2s ease-out, 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":["name","_createBlock","_TransitionGroup","tag","appear","_withCtx","_createCommentVNode","_renderSlot"],"mappings":";;;;;AACyB,SAAA,WAAA,CAAC,IAAkB,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SAAQA,SAAI,EAAA,EAAAC,WAAA,CAAAC,eAAA,EAAA;AAAA,IAAG,KAAKC,EAAAA,kBAAAA;AAAAA,IAAM,MAAM,IAAEC,CAAAA,IAAAA;AAAAA,IAAAA,GAAAA,EAAAA,IAAAA,CAAAA,GAAAA;AAD9E,IAAA,MAAA,EAAA,IAAA,CAAA,MAAA;AAAA,GAAA,EAAA;aAGIC,OAAQ,CAAA,MAAA;AAAA,MAAAC,kBAAA,CAAA,6CAAA,CAAA;AAHZ,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,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":["name","_createBlock","_TransitionGroup","tag","appear","_renderSlot"],"mappings":";;;;;AACyB,SAAA,WAAA,CAAC,IAAkB,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SAAQA,SAAI,EAAA,EAAAC,WAAA,CAAAC,eAAA,EAAA;AAAA,IAAG,KAAKC,EAAAA,kBAAAA;AAAAA,IAAM,MAAM,IAAEC,CAAAA,IAAAA;AAAAA,IAAAA,GAAAA,EAAAA,IAAAA,CAAAA,GAAAA;AAD9E,IAAA,MAAA,EAAA,IAAA,CAAA,MAAA;AAAA,GAAA,EAAA;;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

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

@@ -19,17 +19,17 @@ var _sfc_main = defineComponent({
          */
         appear: {
             type: Boolean,
-            default: true
-        }
+            default: true,
+        },
     },
-    setup: function () {
+    setup() {
         /**
          * The name of the animation.
          */
         const animationName = 'x-fade-and-slide-';
         const { name } = useDisableAnimation(animationName);
         return { name };
-    }
+    },
 });
 
 export { _sfc_main as default };

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

@@ -1 +1 @@
-{"version":3,"file":"fade-and-slide.vue2.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\">\n  import { defineComponent } from 'vue';\n  import { 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   */\n  export 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: function () {\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: opacity 0.2s ease-out, 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":[],"mappings":";;;AAWE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,GAAG,EAAE,MAAM;AACX;;AAEE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAG;AACd,SAAA;AACD,KAAA;AACD,IAAA,KAAK,EAAE,YAAA;AACL;;AAEE;QACF,MAAM,aAAc,GAAE,mBAAmB,CAAA;QAEzC,MAAM,EAAE,IAAK,EAAA,GAAI,mBAAmB,CAAC,aAAa,CAAC,CAAA;QAEnD,OAAO,EAAE,IAAG,EAAG,CAAA;KACjB;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"fade-and-slide.vue2.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":[],"mappings":";;;AAWA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,GAAG,EAAE,MAAM;AACX;;AAEE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACF,KAAA;IACD,KAAK,GAAA;AACH;;AAEE;QACF,MAAM,aAAY,GAAI,mBAAkB,CAAA;QAExC,MAAM,EAAE,IAAG,KAAM,mBAAmB,CAAC,aAAa,CAAA,CAAA;QAElD,OAAO,EAAE,IAAK,EAAA,CAAA;KACf;AACF,CAAA,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\">\n  import { 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   */\n  export 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>\n  import { Fade } from '@empathyco/x-components';\n  export 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":["_openBlock","_createBlock","_Transition","_renderSlot"],"mappings":";;;;;SACkB,WAAU,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AAAQ,EAAA,OAAAA,SAAA,EAAQ,EAAAC,WAAA,CAAAC,UAAA,EAAA;AAAA,IAAA,IAAA,EAAA,SAAA;AAD5C,IAAA,MAAA,EAAA,IAAA,CAAA,MAAA;AAAA,GAAA,EAAA;;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,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":["_openBlock","_createBlock","_Transition","_renderSlot"],"mappings":";;;;;SACkB,WAAU,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AAAQ,EAAA,OAAAA,SAAA,EAAQ,EAAAC,WAAA,CAAAC,UAAA,EAAA;AAAA,IAAA,IAAA,EAAA,SAAA;AAD5C,IAAA,MAAA,EAAA,IAAA,CAAA,MAAA;AAAA,GAAA,EAAA;;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/components/animations/fade.vue2.js

@@ -12,9 +12,9 @@ var _sfc_main = defineComponent({
         /** Indicates if the transition must be applied on the initial render of the node. */
         appear: {
             type: Boolean,
-            default: true
-        }
-    }
+            default: true,
+        },
+    },
 });
 
 export { _sfc_main as default };

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

@@ -1 +1 @@
-{"version":3,"file":"fade.vue2.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\">\n  import { 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   */\n  export 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>\n  import { Fade } from '@empathyco/x-components';\n  export 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":[],"mappings":";;AAUE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,KAAK,EAAE;;AAEL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAG;AACd,SAAA;AACF,KAAA;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"fade.vue2.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":[],"mappings":";;AAUA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,KAAK,EAAE;;AAEL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACF,KAAA;AACF,CAAA,CAAA;;;;"}

package/js/components/animations/no-animation.vue.js

@@ -8,7 +8,7 @@ var _sfc_main = defineComponent({
     name: 'NoAnimation',
     setup(_, { slots }) {
         return () => slots.default?.()[0] ?? '';
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/components/animations/no-animation.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"no-animation.vue.js","sources":["../../../../src/components/animations/no-animation.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { defineComponent } from 'vue';\n\n  /**\n   * Component to be used as `default` for animation props together with dynamic components\n   * `<component :is=\"animation\">` in the template.\n   */\n  export default defineComponent({\n    name: 'NoAnimation',\n    setup(_, { slots }) {\n      return () => slots.default?.()[0] ?? '';\n    }\n  });\n</script>\n"],"names":[],"mappings":";;AAGE;;;AAGE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;AACnB,IAAA,KAAK,CAAC,CAAC,EAAE,EAAE,KAAI,EAAG,EAAA;AAChB,QAAA,OAAO,MAAM,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,CAAA,IAAK,EAAE,CAAA;KACzC;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"no-animation.vue.js","sources":["../../../../src/components/animations/no-animation.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent } from 'vue'\n\n/**\n * Component to be used as `default` for animation props together with dynamic components\n * `<component :is=\"animation\">` in the template.\n */\nexport default defineComponent({\n  name: 'NoAnimation',\n  setup(_, { slots }) {\n    return () => slots.default?.()[0] ?? ''\n  },\n})\n</script>\n"],"names":[],"mappings":";;AAGA;;;AAGE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;AACnB,IAAA,KAAK,CAAC,CAAC,EAAE,EAAE,KAAI,EAAG,EAAA;AAChB,QAAA,OAAO,MAAM,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,CAAE,IAAG,EAAC,CAAA;KACvC;AACF,CAAA,CAAA;;;;"}

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

@@ -5,18 +5,18 @@ import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(TransitionGroup, {
-    onEnter: _ctx.onEnter,
-    onAfterEnter: _ctx.onAfterEnter,
     appear: _ctx.appear,
     name: _ctx.name,
-    tag: _ctx.tag
+    tag: _ctx.tag,
+    onEnter: _ctx.onEnter,
+    onAfterEnter: _ctx.onAfterEnter
   }, {
     default: withCtx(() => [
       renderSlot(_ctx.$slots, "default")
     ]),
     _: 3
     /* FORWARDED */
-  }, 8, ["onEnter", "onAfterEnter", "appear", "name", "tag"]);
+  }, 8, ["appear", "name", "tag", "onEnter", "onAfterEnter"]);
 }
 var staggeredFadeAndSlide = /* @__PURE__ */ _export_sfc(__default__, [["render", _sfc_render]]);
 

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    @enter=\"onEnter\"\n    @afterEnter=\"onAfterEnter\"\n    :appear=\"appear\"\n    :name=\"name\"\n    :tag=\"tag\"\n  >\n    <slot />\n  </TransitionGroup>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, onUpdated } from 'vue';\n  import { 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   */\n  export 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":["onEnter","_openBlock","_createBlock","_TransitionGroup","appear","name","tag","_renderSlot"],"mappings":";;;;;AAEK,SAAA,WAAA,CAAOA,IAAO,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AACd,EAAA,OAAAC,SAAA,EAAwB,EAAAC,WAAA,CAAAC,eAAA,EAAA;AAAA,IACxB,OAAQC,EAAAA,IAAAA,CAAAA,OAAAA;AAAAA,IACR,cAAMC,IAAI,CAAA,YAAA;AAAA,IACV,QAAKC,IAAG,CAAA,MAAA;AAAA,IAAA,IAAA,EAAA,IAAA,CAAA,IAAA;AANb,IAAA,GAAA,EAAA,IAAA,CAAA,GAAA;AAAA,GAAA,EAAA;;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,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":["appear","name","_createBlock","_TransitionGroup","tag","onEnter","_renderSlot"],"mappings":";;;;;AAEK,SAAA,WAAA,CAAQA,IAAM,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SACRC,SAAI,EAAA,EAAAC,WAAA,CAAAC,eAAA,EAAA;AAAA,IACV,QAAKC,IAAG,CAAA,MAAA;AAAA,IACR,IAAOC,EAAAA,IAAAA,CAAAA,IAAAA;AAAAA,IACP,GAAA,EAAA,IAAA,CAAA,GAAA;AAAA,IAAA,OAAA,EAAA,IAAA,CAAA,OAAA;IANL,YAQY,EAAA,IAAA,CAAA,YAAA;AAAA,GAAA,EAAA;;AARZ,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/components/animations/staggered-fade-and-slide.vue2.js

@@ -13,18 +13,18 @@ const __default__ = defineComponent({
         /** Indicates if the transition must be applied on the initial render of the node. */
         appear: {
             type: Boolean,
-            default: true
+            default: true,
         },
         /** The tag of the node to render to the DOM. */
         tag: {
             type: String,
-            default: 'div'
+            default: 'div',
         },
         /** The time in ms to stagger each item. */
         stagger: {
             type: Number,
-            default: 25
-        }
+            default: 25,
+        },
     },
     setup(props) {
         /** The duration of the transition in ms. */
@@ -86,9 +86,9 @@ const __default__ = defineComponent({
             name,
             onEnter,
             onAfterEnter,
-            transitionDurationInMs: `${transitionDuration}ms`
+            transitionDurationInMs: `${transitionDuration}ms`,
         };
-    }
+    },
 });
 const __injectCSSVars__ = () => {
     useCssVars(_ctx => ({

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

@@ -1 +1 @@
-{"version":3,"file":"staggered-fade-and-slide.vue2.js","sources":["../../../../src/components/animations/staggered-fade-and-slide.vue"],"sourcesContent":["<template>\n  <TransitionGroup\n    @enter=\"onEnter\"\n    @afterEnter=\"onAfterEnter\"\n    :appear=\"appear\"\n    :name=\"name\"\n    :tag=\"tag\"\n  >\n    <slot />\n  </TransitionGroup>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, onUpdated } from 'vue';\n  import { 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   */\n  export 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":[],"mappings":";;;AAgBE;;;;;AAKE;AACG,MAAA,WAAY,GAAG,eAAW,CAAA;AAC7B,IAAA,IAAI,EAAE,uBAAuB;AAC7B,IAAA,KAAK,EAAE;;AAEL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAG;AACb,SAAA;;AAED,QAAA,GAAG,EAAE;AACH,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,KAAI;AACd,SAAA;;AAED,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,EAAC;AACZ,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;;QAET,MAAM,kBAAmB,GAAE,GAAG,CAAA;;QAE9B,IAAI,QAAS,GAAE,IAAI,CAAA;;QAEnB,IAAI,iBAAiB,GAAc,EAAE,CAAA;;QAErC,MAAM,EAAE,IAAG,EAAI,GAAE,mBAAmB,CAAC,4BAA4B,CAAC,CAAA;AAElE;;;;AAIE;QACF,SAAS,CAAC,MAAM;YACd,QAAO,GAAI,IAAI,CAAA;AACjB,SAAC,CAAC,CAAA;AAEF;;;;;;;AAOE;AACF,QAAA,SAAS,OAAO,CAAC,EAAW,EAAE,IAAgB,EAAA;AAC5C,YAAA,IAAI,QAAQ,EAAE;gBACZ,wBAAwB,CAAC,EAAE,CAAC,CAAA;AAC9B,aAAA;YAEA,MAAM,OAAM,GAAI,iBAAiB,CAAC,OAAO,CAAC,EAAE,CAAC,CAAA;AAC7C,YAAA,MAAM,YAAa,GAAE,OAAM,GAAI,CAAE,GAAE,OAAQ,GAAE,KAAK,CAAC,OAAQ,GAAE,CAAC,CAAA;YAE7D,EAAkB,CAAC,KAAK,CAAC,eAAgB,GAAE,CAAG,EAAA,YAAY,IAAI,CAAA;AAC/D,YAAA,UAAU,CAAC,IAAI,EAAE,qBAAqB,YAAY,CAAC,CAAA;SACrD;AAEA;;;;;;;;AAQE;QACF,SAAS,wBAAwB,CAAC,EAAW,EAAA;YAC3C,iBAAkB,GAAE,CAAC,GAAG,EAAE,CAAC,aAAc,CAAC,QAAQ,CAAC,CAAC,MAAM,CACxD,CAAE,IAAI,CAAiB,CAAC,KAAK,CAAC,eAAgB,KAAI,KAAI,CACvD,CAAA;YACD,QAAS,GAAE,KAAK,CAAA;SAClB;AAEA;;;;;AAKE;QACF,SAAS,YAAY,CAAC,EAAW,EAAA;AAC9B,YAAA,EAAkB,CAAC,KAAK,CAAC,eAAgB,GAAE,KAAK,CAAA;SACnD;QAEA,OAAO;YACL,IAAI;YACJ,OAAO;YACP,YAAY;YACZ,sBAAsB,EAAE,CAAG,EAAA,kBAAkB,CAAG,EAAA,CAAA;SACjD,CAAA;KACH;AACD,CAAA,EAAC;;;;;;;;;;;;;"}
+{"version":3,"file":"staggered-fade-and-slide.vue2.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":[],"mappings":";;;AAgBA;;;;;AAKE;AACG,MAAA,WAAY,GAAG,eAAW,CAAA;AAC7B,IAAA,IAAI,EAAE,uBAAuB;AAC7B,IAAA,KAAK,EAAE;;AAEL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;;AAED,QAAA,GAAG,EAAE;AACH,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;;AAED,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,EAAE;AACZ,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;;QAET,MAAM,kBAAiB,GAAI,GAAE,CAAA;;QAE7B,IAAI,QAAO,GAAI,IAAG,CAAA;;QAElB,IAAI,iBAAiB,GAAc,EAAC,CAAA;;QAEpC,MAAM,EAAE,IAAG,EAAI,GAAE,mBAAmB,CAAC,4BAA4B,CAAA,CAAA;AAEjE;;;;AAIE;QACF,SAAS,CAAC,MAAM;YACd,QAAS,GAAE,IAAG,CAAA;AAChB,SAAC,CAAA,CAAA;AAED;;;;;;;AAOE;AACF,QAAA,SAAS,OAAO,CAAC,EAAW,EAAE,IAAgB,EAAA;AAC5C,YAAA,IAAI,QAAQ,EAAE;gBACZ,wBAAwB,CAAC,EAAE,CAAA,CAAA;AAC7B,aAAA;YAEA,MAAM,UAAU,iBAAiB,CAAC,OAAO,CAAC,EAAE,CAAA,CAAA;AAC5C,YAAA,MAAM,YAAa,GAAE,OAAM,GAAI,CAAE,GAAE,OAAQ,GAAE,KAAK,CAAC,OAAM,GAAI,CAAA,CAE5D;YAAC,EAAkB,CAAC,KAAK,CAAC,eAAc,GAAI,CAAG,EAAA,YAAY,IAAG,CAAA;AAC/D,YAAA,UAAU,CAAC,IAAI,EAAE,kBAAmB,GAAE,YAAY,CAAA,CAAA;SACpD;AAEA;;;;;;;;AAQE;QACF,SAAS,wBAAwB,CAAC,EAAW,EAAA;YAC3C,iBAAkB,GAAE,CAAC,GAAG,EAAE,CAAC,aAAc,CAAC,QAAQ,CAAC,CAAC,MAAM,CACxD,CAAE,IAAI,CAAiB,CAAC,KAAK,CAAC,oBAAoB,KAAK,CACzD,CAAA;YACA,QAAO,GAAI,KAAI,CAAA;SACjB;AAEA;;;;;AAKE;QACF,SAAS,YAAY,CAAC,EAAW,EAAA;AAC7B,YAAA,EAAkB,CAAC,KAAK,CAAC,eAAc,GAAI,KAAI,CAAA;SACnD;QAEA,OAAO;YACL,IAAI;YACJ,OAAO;YACP,YAAY;YACZ,sBAAsB,EAAE,CAAG,EAAA,kBAAkB,CAAI,EAAA,CAAA;SACnD,CAAA;KACD;AACF,CAAA,EAAA;;;;;;;;;;;;;"}

package/js/components/animations/use-collapse-animation.js

@@ -21,12 +21,14 @@ function useCollapseAnimation(property) {
      * @param element - The DOM element that is going to be animated.
      */
     function expand(element) {
+        /* eslint-disable ts/no-unsafe-assignment,ts/no-unsafe-member-access */
         element.style[property] = '0';
         const originalValue = element.style['content-visibility'];
         element.style['content-visibility'] = 'visible';
         element.getBoundingClientRect();
         element.style[property] = `${element[scrollProperty]}px`;
         element.style['content-visibility'] = originalValue;
+        /* eslint-enable ts/no-unsafe-assignment,ts/no-unsafe-member-access */
     }
     /**
      * Removes the animated property from the element.
@@ -50,7 +52,7 @@ function useCollapseAnimation(property) {
     return {
         expand,
         cleanUpAnimationStyles,
-        collapse
+        collapse,
     };
 }
 

package/js/components/animations/use-collapse-animation.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-collapse-animation.js","sources":["../../../../src/components/animations/use-collapse-animation.ts"],"sourcesContent":["/**\n * Type options for the property that will be animated.\n */\ntype AnimatedProperty = 'height' | 'width';\n\n/**\n * Returns parametrized methods to use in a component to allow the collapsing of the provided\n * property.\n *\n * @param property - The property that will be animated.\n * @returns Composable for the module.\n * @public\n */\nexport function useCollapseAnimation(property: AnimatedProperty) {\n  const scrollProperty = property === 'width' ? 'scrollWidth' : 'scrollHeight';\n\n  /**\n   * Changes the element's animated property from 0 to the element's content size.\n   *\n   * @remarks `content-visibility` CSS property boosts the rendering performance waiting to be\n   * needed until rendering the content. This behaviour collides with this animation method.\n   * When the `scrollProperty` is evaluated, the content has not been rendered yet and the value\n   * is 0 so nothing is animated. To avoid this behaviour, we change the `content-visibility` to\n   * default value, force a layer repaint and then, evaluate the `scrollProperty` value which\n   * now has value. Then we restore the `content-visibility` value to its previous state.\n   *\n   * @param element - The DOM element that is going to be animated.\n   */\n  function expand(element: HTMLElement): void {\n    element.style[property] = '0';\n    const originalValue = (element.style as any)['content-visibility'];\n    (element.style as any)['content-visibility'] = 'visible';\n    element.getBoundingClientRect();\n    element.style[property] = `${element[scrollProperty]}px`;\n    (element.style as any)['content-visibility'] = originalValue;\n  }\n\n  /**\n   * Removes the animated property from the element.\n   *\n   * @param element - The DOM element that is going to be animated.\n   */\n  function cleanUpAnimationStyles(element: HTMLElement): void {\n    element.style.removeProperty(property);\n  }\n\n  /**\n   * Changes the element's animated property from the element's content size to 0.\n   *\n   * @param element - The DOM element that is going to be animated.\n   */\n  function collapse(element: HTMLElement): void {\n    element.style[property] = `${element[scrollProperty]}px`;\n    // This is intended. We want to provoke a layer repaint to apply this style.\n    element.getBoundingClientRect();\n    element.style[property] = '0';\n  }\n\n  return {\n    expand,\n    cleanUpAnimationStyles,\n    collapse\n  };\n}\n"],"names":[],"mappings":"AAKA;;;;;;;AAOG;AACG,SAAU,oBAAoB,CAAC,QAA0B,EAAA;AAC7D,IAAA,MAAM,cAAc,GAAG,QAAQ,KAAK,OAAO,GAAG,aAAa,GAAG,cAAc,CAAC;AAE7E;;;;;;;;;;;AAWG;IACH,SAAS,MAAM,CAAC,OAAoB,EAAA;AAClC,QAAA,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAC;QAC9B,MAAM,aAAa,GAAI,OAAO,CAAC,KAAa,CAAC,oBAAoB,CAAC,CAAC;AAClE,QAAA,OAAO,CAAC,KAAa,CAAC,oBAAoB,CAAC,GAAG,SAAS,CAAC;QACzD,OAAO,CAAC,qBAAqB,EAAE,CAAC;AAChC,QAAA,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAG,EAAA,OAAO,CAAC,cAAc,CAAC,CAAA,EAAA,CAAI,CAAC;AACxD,QAAA,OAAO,CAAC,KAAa,CAAC,oBAAoB,CAAC,GAAG,aAAa,CAAC;KAC9D;AAED;;;;AAIG;IACH,SAAS,sBAAsB,CAAC,OAAoB,EAAA;AAClD,QAAA,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;KACxC;AAED;;;;AAIG;IACH,SAAS,QAAQ,CAAC,OAAoB,EAAA;AACpC,QAAA,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAG,EAAA,OAAO,CAAC,cAAc,CAAC,CAAA,EAAA,CAAI,CAAC;;QAEzD,OAAO,CAAC,qBAAqB,EAAE,CAAC;AAChC,QAAA,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAC;KAC/B;IAED,OAAO;QACL,MAAM;QACN,sBAAsB;QACtB,QAAQ;KACT,CAAC;AACJ;;;;"}
+{"version":3,"file":"use-collapse-animation.js","sources":["../../../../src/components/animations/use-collapse-animation.ts"],"sourcesContent":["/**\n * Type options for the property that will be animated.\n */\ntype AnimatedProperty = 'height' | 'width'\n\n/**\n * Returns parametrized methods to use in a component to allow the collapsing of the provided\n * property.\n *\n * @param property - The property that will be animated.\n * @returns Composable for the module.\n * @public\n */\nexport function useCollapseAnimation(property: AnimatedProperty) {\n  const scrollProperty = property === 'width' ? 'scrollWidth' : 'scrollHeight'\n\n  /**\n   * Changes the element's animated property from 0 to the element's content size.\n   *\n   * @remarks `content-visibility` CSS property boosts the rendering performance waiting to be\n   * needed until rendering the content. This behaviour collides with this animation method.\n   * When the `scrollProperty` is evaluated, the content has not been rendered yet and the value\n   * is 0 so nothing is animated. To avoid this behaviour, we change the `content-visibility` to\n   * default value, force a layer repaint and then, evaluate the `scrollProperty` value which\n   * now has value. Then we restore the `content-visibility` value to its previous state.\n   *\n   * @param element - The DOM element that is going to be animated.\n   */\n  function expand(element: HTMLElement): void {\n    /* eslint-disable ts/no-unsafe-assignment,ts/no-unsafe-member-access */\n    element.style[property] = '0'\n    const originalValue = (element.style as any)['content-visibility']\n    ;(element.style as any)['content-visibility'] = 'visible'\n    element.getBoundingClientRect()\n    element.style[property] = `${element[scrollProperty]}px`\n    ;(element.style as any)['content-visibility'] = originalValue\n    /* eslint-enable ts/no-unsafe-assignment,ts/no-unsafe-member-access */\n  }\n\n  /**\n   * Removes the animated property from the element.\n   *\n   * @param element - The DOM element that is going to be animated.\n   */\n  function cleanUpAnimationStyles(element: HTMLElement): void {\n    element.style.removeProperty(property)\n  }\n\n  /**\n   * Changes the element's animated property from the element's content size to 0.\n   *\n   * @param element - The DOM element that is going to be animated.\n   */\n  function collapse(element: HTMLElement): void {\n    element.style[property] = `${element[scrollProperty]}px`\n    // This is intended. We want to provoke a layer repaint to apply this style.\n    element.getBoundingClientRect()\n    element.style[property] = '0'\n  }\n\n  return {\n    expand,\n    cleanUpAnimationStyles,\n    collapse,\n  }\n}\n"],"names":[],"mappings":"AAKA;;;;;;;AAOG;AACG,SAAU,oBAAoB,CAAC,QAA0B,EAAA;AAC7D,IAAA,MAAM,cAAc,GAAG,QAAQ,KAAK,OAAO,GAAG,aAAa,GAAG,cAAc,CAAA;AAE5E;;;;;;;;;;;AAWG;IACH,SAAS,MAAM,CAAC,OAAoB,EAAA;;AAElC,QAAA,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAA;QAC7B,MAAM,aAAa,GAAI,OAAO,CAAC,KAAa,CAAC,oBAAoB,CAAC,CACjE;AAAC,QAAA,OAAO,CAAC,KAAa,CAAC,oBAAoB,CAAC,GAAG,SAAS,CAAA;QACzD,OAAO,CAAC,qBAAqB,EAAE,CAAA;AAC/B,QAAA,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAG,EAAA,OAAO,CAAC,cAAc,CAAC,CAAA,EAAA,CAAI,CACvD;AAAC,QAAA,OAAO,CAAC,KAAa,CAAC,oBAAoB,CAAC,GAAG,aAAa,CAAA;;KAE9D;AAED;;;;AAIG;IACH,SAAS,sBAAsB,CAAC,OAAoB,EAAA;AAClD,QAAA,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAA;KACvC;AAED;;;;AAIG;IACH,SAAS,QAAQ,CAAC,OAAoB,EAAA;AACpC,QAAA,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAG,EAAA,OAAO,CAAC,cAAc,CAAC,CAAA,EAAA,CAAI,CAAA;;QAExD,OAAO,CAAC,qBAAqB,EAAE,CAAA;AAC/B,QAAA,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAA;KAC9B;IAED,OAAO;QACL,MAAM;QACN,sBAAsB;QACtB,QAAQ;KACT,CAAA;AACH;;;;"}

package/js/components/animations/use-disable-animation.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-disable-animation.js","sources":["../../../../src/components/animations/use-disable-animation.ts"],"sourcesContent":["import { computed, inject, ref } from 'vue';\nimport { DISABLE_ANIMATIONS_KEY } from '../decorators/injection.consts';\n\n/**\n * Composable to ease disabling animations.\n *\n * @param animationName - The name of the animation.\n * @returns Composable with the computed name of the animation.\n *\n * @public\n */\nexport function useDisableAnimation(animationName: string) {\n  /**\n   * Flag to disable the animation.\n   */\n  const disableAnimation = inject(DISABLE_ANIMATIONS_KEY as string, ref(false));\n\n  /**\n   * The animation's name based on the DISABLE_ANIMATIONS_KEY flag.\n   *\n   * @returns The animation name.\n   */\n  const name = computed(() => (disableAnimation.value ? '__no-animation__' : animationName));\n\n  return { name };\n}\n"],"names":[],"mappings":";;;AAGA;;;;;;;AAOG;AACG,SAAU,mBAAmB,CAAC,aAAqB,EAAA;AACvD;;AAEG;IACH,MAAM,gBAAgB,GAAG,MAAM,CAAC,sBAAgC,EAAE,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;AAE9E;;;;AAIG;IACH,MAAM,IAAI,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,KAAK,GAAG,kBAAkB,GAAG,aAAa,CAAC,CAAC,CAAC;IAE3F,OAAO,EAAE,IAAI,EAAE,CAAC;AAClB;;;;"}
+{"version":3,"file":"use-disable-animation.js","sources":["../../../../src/components/animations/use-disable-animation.ts"],"sourcesContent":["import { computed, inject, ref } from 'vue'\nimport { DISABLE_ANIMATIONS_KEY } from '../decorators/injection.consts'\n\n/**\n * Composable to ease disabling animations.\n *\n * @param animationName - The name of the animation.\n * @returns Composable with the computed name of the animation.\n *\n * @public\n */\nexport function useDisableAnimation(animationName: string) {\n  /**\n   * Flag to disable the animation.\n   */\n  const disableAnimation = inject(DISABLE_ANIMATIONS_KEY as string, ref(false))\n\n  /**\n   * The animation's name based on the DISABLE_ANIMATIONS_KEY flag.\n   *\n   * @returns The animation name.\n   */\n  const name = computed(() => (disableAnimation.value ? '__no-animation__' : animationName))\n\n  return { name }\n}\n"],"names":[],"mappings":";;;AAGA;;;;;;;AAOG;AACG,SAAU,mBAAmB,CAAC,aAAqB,EAAA;AACvD;;AAEG;IACH,MAAM,gBAAgB,GAAG,MAAM,CAAC,sBAAgC,EAAE,GAAG,CAAC,KAAK,CAAC,CAAC,CAAA;AAE7E;;;;AAIG;IACH,MAAM,IAAI,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,KAAK,GAAG,kBAAkB,GAAG,aAAa,CAAC,CAAC,CAAA;IAE1F,OAAO,EAAE,IAAI,EAAE,CAAA;AACjB;;;;"}

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\">\n  import { computed, defineComponent, StyleValue } 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   */\n  export 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>\n  import { AutoProgressBar } from '@empathyco/x-components';\n  export 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>\n  import { AutoProgressBar } from '@empathyco/x-components';\n  export default {\n    name: 'AutoProgressBarDemo',\n    components: {\n      AutoProgressBar\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode","cssStyles","_normalizeStyle","_createCommentVNode"],"mappings":";;;;;MACwB,UAAM,GAAA;AAAA,EAAiB,GAAA,EAAA,CAAA;AAAA,EAAyB,KAAK,EAAA,gBAAA;AAAA,EAAA,WAAA,EAAA,cAAA;;;AAA3E,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAEM,QAFN,KAEM,EAAA,QAAA,EAAA;AADJ,EAAA,OAAA,IAAA,CAAA,SAAA,IAAAA,SAAA,EAAgC,EAAAC,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;AAAA,IAAAC,kBAAA;AAFpC,MAAA,KAAA;AAAA,MAE6CC;AAAAA,QAAW,KAAA,EAAA,qBAAA;AAAA,QAAA,KAAA,EAAAC,cAAA,CAAA,IAAA,CAAA,SAAA,CAAA;;AAFxD,OAAA;AAAA,MAAA,IAAA;AAAA,MAAA,CAAA;AAAA;AAAA,KAAA;AAAA,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","cssStyles","_normalizeStyle","_createCommentVNode"],"mappings":";;;;;MACwB,UAAM,GAAA;AAAA,EAAiB,GAAA,EAAA,CAAA;AAAA,EAAyB,KAAK,EAAA,gBAAA;AAAA,EAAA,WAAA,EAAA,cAAA;;;AAA3E,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAEM,QAFN,KAEM,EAAA,QAAA,EAAA;AADJ,EAAA,OAAA,IAAA,CAAA,SAAA,IAAAA,SAAA,EAAgC,EAAAC,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;AAAA,IAAAC,kBAAA;AAFpC,MAAA,KAAA;AAAA,MAE6CC;AAAAA,QAAW,KAAA,EAAA,qBAAA;AAAA,QAAA,KAAA,EAAAC,cAAA,CAAA,IAAA,CAAA,SAAA,CAAA;;AAFxD,OAAA;AAAA,MAAA,IAAA;AAAA,MAAA,CAAA;AAAA;AAAA,KAAA;AAAA,GAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}