@empathyco/x-components 6.0.0-alpha.17 → 6.0.0-alpha.171

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

@@ -1,103 +1,103 @@
 import { defineComponent, onUpdated, useCssVars } from 'vue';
 import { useDisableAnimation } from './use-disable-animation.js';
 
-/**
- * Renders a transition group wrapping the elements passed in the default slot and animating
- * them with a staggered fade and slide animation.
- *
- * @public
- */
-const __default__ = defineComponent({
-    name: 'StaggeredFadeAndSlide',
-    props: {
-        /** Indicates if the transition must be applied on the initial render of the node. */
-        appear: {
-            type: Boolean,
-            default: true
-        },
-        /** The tag of the node to render to the DOM. */
-        tag: {
-            type: String,
-            default: 'div'
-        },
-        /** The time in ms to stagger each item. */
-        stagger: {
-            type: Number,
-            default: 25
-        }
-    },
-    setup(props) {
-        /** The duration of the transition in ms. */
-        const transitionDuration = 250;
-        /** Indicates if there are new elements to animate. */
-        let isNewSet = true;
-        /** The new elements to animate. */
-        let elementsToAnimate = [];
-        /** The name of the animation. */
-        const { name } = useDisableAnimation('x-staggered-fade-and-slide');
-        /**
-         * When the component is updated, we are considering that
-         * a new set of elements is being inserted, so we need
-         * to refresh the elements to animate.
-         */
-        onUpdated(() => {
-            isNewSet = true;
-        });
-        /**
-         * Listener called when one frame the element is inserted.
-         * This calculates the stagger delay to be used as `transitionDelay` and finally resolve
-         * the transition end after the CSS transition duration plus stagger delay.
-         *
-         * @param el - Element inserted.
-         * @param done - Callback to indicate the transition end.
-         */
-        function onEnter(el, done) {
-            if (isNewSet) {
-                refreshElementsToAnimate(el);
-            }
-            const elIndex = elementsToAnimate.indexOf(el);
-            const staggerDelay = elIndex > 0 ? elIndex * props.stagger : 0;
-            el.style.transitionDelay = `${staggerDelay}ms`;
-            setTimeout(done, transitionDuration + staggerDelay);
-        }
-        /**
-         * Finds he parent's children subset of new elements entering the DOM.
-         * This is achieved by filtering out the elements that are already animated.
-         * Those with 'transition-delay' equal to '0ms' are considered already animated.
-         *
-         * Also marks isNewSet as false as the elements are already updated.
-         *
-         * @param el - Current element.
-         */
-        function refreshElementsToAnimate(el) {
-            elementsToAnimate = [...el.parentElement.children].filter(c => c.style.transitionDelay !== '0ms');
-            isNewSet = false;
-        }
-        /**
-         * Listener called when the enter transition has finished.
-         * This resets the `transitionDelay`.
-         *
-         * @param el - Element inserted.
-         */
-        function onAfterEnter(el) {
-            el.style.transitionDelay = '0ms';
-        }
-        return {
-            name,
-            onEnter,
-            onAfterEnter,
-            transitionDurationInMs: `${transitionDuration}ms`
-        };
-    }
-});
-const __injectCSSVars__ = () => {
-    useCssVars(_ctx => ({
-        "29c214c5-transitionDurationInMs": (_ctx.transitionDurationInMs)
-    }));
-};
-const __setup__ = __default__.setup;
-__default__.setup = __setup__
-    ? (props, ctx) => { __injectCSSVars__(); return __setup__(props, ctx); }
+/**
+ * Renders a transition group wrapping the elements passed in the default slot and animating
+ * them with a staggered fade and slide animation.
+ *
+ * @public
+ */
+const __default__ = defineComponent({
+    name: 'StaggeredFadeAndSlide',
+    props: {
+        /** Indicates if the transition must be applied on the initial render of the node. */
+        appear: {
+            type: Boolean,
+            default: true,
+        },
+        /** The tag of the node to render to the DOM. */
+        tag: {
+            type: String,
+            default: 'div',
+        },
+        /** The time in ms to stagger each item. */
+        stagger: {
+            type: Number,
+            default: 25,
+        },
+    },
+    setup(props) {
+        /** The duration of the transition in ms. */
+        const transitionDuration = 250;
+        /** Indicates if there are new elements to animate. */
+        let isNewSet = true;
+        /** The new elements to animate. */
+        let elementsToAnimate = [];
+        /** The name of the animation. */
+        const { name } = useDisableAnimation('x-staggered-fade-and-slide');
+        /**
+         * When the component is updated, we are considering that
+         * a new set of elements is being inserted, so we need
+         * to refresh the elements to animate.
+         */
+        onUpdated(() => {
+            isNewSet = true;
+        });
+        /**
+         * Listener called when one frame the element is inserted.
+         * This calculates the stagger delay to be used as `transitionDelay` and finally resolve
+         * the transition end after the CSS transition duration plus stagger delay.
+         *
+         * @param el - Element inserted.
+         * @param done - Callback to indicate the transition end.
+         */
+        function onEnter(el, done) {
+            if (isNewSet) {
+                refreshElementsToAnimate(el);
+            }
+            const elIndex = elementsToAnimate.indexOf(el);
+            const staggerDelay = elIndex > 0 ? elIndex * props.stagger : 0;
+            el.style.transitionDelay = `${staggerDelay}ms`;
+            setTimeout(done, transitionDuration + staggerDelay);
+        }
+        /**
+         * Finds he parent's children subset of new elements entering the DOM.
+         * This is achieved by filtering out the elements that are already animated.
+         * Those with 'transition-delay' equal to '0ms' are considered already animated.
+         *
+         * Also marks isNewSet as false as the elements are already updated.
+         *
+         * @param el - Current element.
+         */
+        function refreshElementsToAnimate(el) {
+            elementsToAnimate = [...el.parentElement.children].filter(c => c.style.transitionDelay !== '0ms');
+            isNewSet = false;
+        }
+        /**
+         * Listener called when the enter transition has finished.
+         * This resets the `transitionDelay`.
+         *
+         * @param el - Element inserted.
+         */
+        function onAfterEnter(el) {
+            el.style.transitionDelay = '0ms';
+        }
+        return {
+            name,
+            onEnter,
+            onAfterEnter,
+            transitionDurationInMs: `${transitionDuration}ms`,
+        };
+    },
+});
+const __injectCSSVars__ = () => {
+    useCssVars(_ctx => ({
+        "29c214c5-transitionDurationInMs": (_ctx.transitionDurationInMs)
+    }));
+};
+const __setup__ = __default__.setup;
+__default__.setup = __setup__
+    ? (props, ctx) => { __injectCSSVars__(); return __setup__(props, ctx); }
     : __injectCSSVars__;
 
 export { __default__ as default };

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;YAC5C,IAAI,QAAQ,EAAE;gBACZ,wBAAwB,CAAC,EAAE,CAAA,CAAA;aAC7B;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

@@ -1,57 +1,57 @@
-/**
- * Returns parametrized methods to use in a component to allow the collapsing of the provided
- * property.
- *
- * @param property - The property that will be animated.
- * @returns Composable for the module.
- * @public
- */
-function useCollapseAnimation(property) {
-    const scrollProperty = property === 'width' ? 'scrollWidth' : 'scrollHeight';
-    /**
-     * Changes the element's animated property from 0 to the element's content size.
-     *
-     * @remarks `content-visibility` CSS property boosts the rendering performance waiting to be
-     * needed until rendering the content. This behaviour collides with this animation method.
-     * When the `scrollProperty` is evaluated, the content has not been rendered yet and the value
-     * is 0 so nothing is animated. To avoid this behaviour, we change the `content-visibility` to
-     * default value, force a layer repaint and then, evaluate the `scrollProperty` value which
-     * now has value. Then we restore the `content-visibility` value to its previous state.
-     *
-     * @param element - The DOM element that is going to be animated.
-     */
-    function expand(element) {
-        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;
-    }
-    /**
-     * Removes the animated property from the element.
-     *
-     * @param element - The DOM element that is going to be animated.
-     */
-    function cleanUpAnimationStyles(element) {
-        element.style.removeProperty(property);
-    }
-    /**
-     * Changes the element's animated property from the element's content size to 0.
-     *
-     * @param element - The DOM element that is going to be animated.
-     */
-    function collapse(element) {
-        element.style[property] = `${element[scrollProperty]}px`;
-        // This is intended. We want to provoke a layer repaint to apply this style.
-        element.getBoundingClientRect();
-        element.style[property] = '0';
-    }
-    return {
-        expand,
-        cleanUpAnimationStyles,
-        collapse
-    };
+/**
+ * Returns parametrized methods to use in a component to allow the collapsing of the provided
+ * property.
+ *
+ * @param property - The property that will be animated.
+ * @returns Composable for the module.
+ * @public
+ */
+function useCollapseAnimation(property) {
+    const scrollProperty = property === 'width' ? 'scrollWidth' : 'scrollHeight';
+    /**
+     * Changes the element's animated property from 0 to the element's content size.
+     *
+     * @remarks `content-visibility` CSS property boosts the rendering performance waiting to be
+     * needed until rendering the content. This behaviour collides with this animation method.
+     * When the `scrollProperty` is evaluated, the content has not been rendered yet and the value
+     * is 0 so nothing is animated. To avoid this behaviour, we change the `content-visibility` to
+     * default value, force a layer repaint and then, evaluate the `scrollProperty` value which
+     * now has value. Then we restore the `content-visibility` value to its previous state.
+     *
+     * @param element - The DOM element that is going to be animated.
+     */
+    function expand(element) {
+        element.style[property] = '0';
+        const originalValue = element.style.contentVisibility;
+        element.style.contentVisibility = 'visible';
+        element.getBoundingClientRect();
+        element.style[property] = `${element[scrollProperty]}px`;
+        element.style.contentVisibility = originalValue;
+    }
+    /**
+     * Removes the animated property from the element.
+     *
+     * @param element - The DOM element that is going to be animated.
+     */
+    function cleanUpAnimationStyles(element) {
+        element.style.removeProperty(property);
+    }
+    /**
+     * Changes the element's animated property from the element's content size to 0.
+     *
+     * @param element - The DOM element that is going to be animated.
+     */
+    function collapse(element) {
+        element.style[property] = `${element[scrollProperty]}px`;
+        // This is intended. We want to provoke a layer repaint to apply this style.
+        element.getBoundingClientRect();
+        element.style[property] = '0';
+    }
+    return {
+        expand,
+        cleanUpAnimationStyles,
+        collapse,
+    };
 }
 
 export { useCollapseAnimation };

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    element.style[property] = '0'\n    const originalValue = element.style.contentVisibility\n    element.style.contentVisibility = 'visible'\n    element.getBoundingClientRect()\n    element.style[property] = `${element[scrollProperty]}px`\n    element.style.contentVisibility = 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,CAAA;AAE5E;;;;;;;;;;;AAWG;IACH,SAAS,MAAM,CAAC,OAAoB,EAAA;AAClC,QAAA,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAA;AAC7B,QAAA,MAAM,aAAa,GAAG,OAAO,CAAC,KAAK,CAAC,iBAAiB,CAAA;AACrD,QAAA,OAAO,CAAC,KAAK,CAAC,iBAAiB,GAAG,SAAS,CAAA;QAC3C,OAAO,CAAC,qBAAqB,EAAE,CAAA;AAC/B,QAAA,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAG,EAAA,OAAO,CAAC,cAAc,CAAC,CAAA,EAAA,CAAI,CAAA;AACxD,QAAA,OAAO,CAAC,KAAK,CAAC,iBAAiB,GAAG,aAAa,CAAA;KAChD;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

@@ -1,26 +1,26 @@
 import { inject, ref, computed } from 'vue';
 import { DISABLE_ANIMATIONS_KEY } from '../decorators/injection.consts.js';
 
-/**
- * Composable to ease disabling animations.
- *
- * @param animationName - The name of the animation.
- * @returns Composable with the computed name of the animation.
- *
- * @public
- */
-function useDisableAnimation(animationName) {
-    /**
-     * Flag to disable the animation.
-     */
-    const disableAnimation = inject(DISABLE_ANIMATIONS_KEY, ref(false));
-    /**
-     * The animation's name based on the DISABLE_ANIMATIONS_KEY flag.
-     *
-     * @returns The animation name.
-     */
-    const name = computed(() => (disableAnimation.value ? '__no-animation__' : animationName));
-    return { name };
+/**
+ * Composable to ease disabling animations.
+ *
+ * @param animationName - The name of the animation.
+ * @returns Composable with the computed name of the animation.
+ *
+ * @public
+ */
+function useDisableAnimation(animationName) {
+    /**
+     * Flag to disable the animation.
+     */
+    const disableAnimation = inject(DISABLE_ANIMATIONS_KEY, ref(false));
+    /**
+     * The animation's name based on the DISABLE_ANIMATIONS_KEY flag.
+     *
+     * @returns The animation name.
+     */
+    const name = computed(() => (disableAnimation.value ? '__no-animation__' : animationName));
+    return { name };
 }
 
 export { useDisableAnimation };

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","_normalizeStyle","_createCommentVNode"],"mappings":";;;;;;AAAA,EAAA,GAAA,EAAA,CAAA;AAAA,EACwB,KAAM,EAAA,gBAAA;AAAA,EAAiB,WAAU,EAAA,cAAA;AAAA,EAAe,IAAK,EAAA,aAAA;;;SAAhE,IAAX,CAAA,SAAA,IAAAA,SAAA,EAAA,EAAAC,kBAAA,CAEM,OAFN,UAEM,EAAA;AAAA,IADJC,kBAAA;AAAA,MAAoF,KAAA;AAAA,MAAA;AAAA,QAA/E,KAAM,EAAA,qBAAA;AAAA,QAAuB,KAAA,EAFtCC,eAE6C,IAAS,CAAA,SAAA,CAAA;AAAA,QAAE,WAAU,EAAA,mBAAA;AAAA,OAAA;;;;;AAFlE,GAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

package/js/components/auto-progress-bar.vue2.js

@@ -1,48 +1,48 @@
 import { defineComponent, computed } from 'vue';
 
-/**
- * The auto progress bar component is useful for displaying a visual indicator of numerical data
- * in a bar shape.
- *
- * @public
- */
-var _sfc_main = defineComponent({
-    name: 'AutoProgressBar',
-    props: {
-        /**
-         * A boolean flag indicating if the bar is loading.
-         *
-         * @public
-         */
-        isLoading: {
-            type: Boolean,
-            default: true
-        },
-        /**
-         * The duration in seconds of the progress bar.
-         *
-         * @public
-         */
-        durationInSeconds: {
-            type: Number,
-            default: 5
-        }
-    },
-    setup(props) {
-        /**
-         * Computed property to calculate the animation's duration.
-         *
-         * @returns The CSS styles of the animation.
-         *
-         * @internal
-         */
-        const cssStyles = computed(() => ({
-            animationDuration: `${props.durationInSeconds}s`
-        }));
-        return {
-            cssStyles
-        };
-    }
+/**
+ * The auto progress bar component is useful for displaying a visual indicator of numerical data
+ * in a bar shape.
+ *
+ * @public
+ */
+var _sfc_main = defineComponent({
+    name: 'AutoProgressBar',
+    props: {
+        /**
+         * A boolean flag indicating if the bar is loading.
+         *
+         * @public
+         */
+        isLoading: {
+            type: Boolean,
+            default: true,
+        },
+        /**
+         * The duration in seconds of the progress bar.
+         *
+         * @public
+         */
+        durationInSeconds: {
+            type: Number,
+            default: 5,
+        },
+    },
+    setup(props) {
+        /**
+         * Computed property to calculate the animation's duration.
+         *
+         * @returns The CSS styles of the animation.
+         *
+         * @internal
+         */
+        const cssStyles = computed(() => ({
+            animationDuration: `${props.durationInSeconds}s`,
+        }));
+        return {
+            cssStyles,
+        };
+    },
 });
 
 export { _sfc_main as default };

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

@@ -1 +1 @@
-{"version":3,"file":"auto-progress-bar.vue2.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":[],"mappings":";;AASE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,iBAAiB;AACvB,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAG;AACb,SAAA;AACD;;;;AAIE;AACF,QAAA,iBAAiB,EAAE;AACjB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAA;AACX,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;;;AAME;AACF,QAAA,MAAM,SAAQ,GAAI,QAAQ,CAAa,OAAO;AAC5C,YAAA,iBAAiB,EAAE,CAAA,EAAG,KAAK,CAAC,iBAAiB,CAAE,CAAA,CAAA;AAChD,SAAA,CAAC,CAAC,CAAA;QAEH,OAAO;YACL,SAAQ;SACT,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"auto-progress-bar.vue2.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":[],"mappings":";;AAUA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,iBAAiB;AACvB,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,iBAAiB,EAAE;AACjB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAC;AACX,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;;;AAME;AACF,QAAA,MAAM,SAAQ,GAAI,QAAQ,CAAa,OAAO;AAC5C,YAAA,iBAAiB,EAAE,CAAA,EAAG,KAAK,CAAC,iBAAiB,CAAG,CAAA,CAAA;AACjD,SAAA,CAAC,CAAA,CAAA;QAEF,OAAO;YACL,SAAS;SACX,CAAA;KACD;AACF,CAAA,CAAA;;;;"}