@empathyco/x-components 5.0.0-alpha.9 → 6.0.0-alpha.2

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  <staggering-transition-group\n    v-on=\"$listeners\"\n    class=\"x-staggered-fade-and-slide\"\n    :name=\"name\"\n    v-bind=\"$attrs\"\n    :appear=\"appear\"\n  >\n    <!-- @slot (Required) Transition-group content -->\n    <slot />\n  </staggering-transition-group>\n</template>\n\n<script lang=\"ts\">\n  import { mixins } from 'vue-class-component';\n  import { Component, Prop } from 'vue-property-decorator';\n  import StaggeringTransitionGroup from '../animations/staggering-transition-group.vue';\n  import DisableAnimationMixin from './disable-animation.mixin';\n\n  /**\n   * Renders a transition group wrapping the elements passed in the default slot and animating\n   * them with an staggered fade and slide animation.\n   *\n   * @public\n   */\n  @Component({\n    components: { StaggeringTransitionGroup },\n    inheritAttrs: false\n  })\n  export default class StaggeredFadeAndSlide extends mixins(DisableAnimationMixin) {\n    /**\n     * Indicates if the transition must be applied on the initial render of the node.\n     */\n    @Prop({\n      type: Boolean,\n      default: true\n    })\n    public appear!: boolean;\n    /**\n     * The name of the animation.\n     *\n     * @public\n     */\n    protected animationName = 'x-staggered-fade-and-slide-';\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  $transition-duration: 0.25s;\n\n  .x-staggered-fade-and-slide {\n    z-index: 0;\n\n    &::v-deep .x-staggered-fade-and-slide {\n      &--enter-active,\n      &--leave-active {\n        transition: $transition-duration ease-out;\n        transition-property: opacity, transform;\n      }\n\n      &--move {\n        transition: transform $transition-duration ease-out;\n      }\n\n      &--enter,\n      &--leave-to {\n        transform: translate3d(0, 50%, 0);\n        opacity: 0;\n        z-index: -1;\n      }\n    }\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>Element to animate</li>\n  <li>Element to animate</li>\n  <li>Element to animate</li>\n</StaggeredFadeAndSlide>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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;;;;;;;;;"}

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

@@ -1,39 +1,104 @@
-import { __decorate } from 'tslib';
-import { mixins } from 'vue-class-component';
-import { Prop, Component } from 'vue-property-decorator';
-import __vue_component__ from './staggering-transition-group.vue.js';
-import DisableAnimationMixin from './disable-animation.mixin.js';
+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 an staggered fade and slide animation.
+ * them with a staggered fade and slide animation.
  *
  * @public
  */
-let StaggeredFadeAndSlide = class StaggeredFadeAndSlide extends mixins(DisableAnimationMixin) {
-    constructor() {
-        super(...arguments);
+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');
         /**
-         * The name of the animation.
+         * 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`.
          *
-         * @public
+         * @param el - Element inserted.
          */
-        this.animationName = 'x-staggered-fade-and-slide-';
+        function onAfterEnter(el) {
+            el.style.transitionDelay = '0ms';
+        }
+        return {
+            name,
+            onEnter,
+            onAfterEnter,
+            transitionDurationInMs: `${transitionDuration}ms`
+        };
     }
+});
+const __injectCSSVars__ = () => {
+    useCssVars(_ctx => ({
+        "29c214c5-transitionDurationInMs": (_ctx.transitionDurationInMs)
+    }));
 };
-__decorate([
-    Prop({
-        type: Boolean,
-        default: true
-    })
-], StaggeredFadeAndSlide.prototype, "appear", void 0);
-StaggeredFadeAndSlide = __decorate([
-    Component({
-        components: { StaggeringTransitionGroup: __vue_component__ },
-        inheritAttrs: false
-    })
-], StaggeredFadeAndSlide);
-var script = StaggeredFadeAndSlide;
+const __setup__ = __default__.setup;
+__default__.setup = __setup__
+    ? (props, ctx) => { __injectCSSVars__(); return __setup__(props, ctx); }
+    : __injectCSSVars__;
 
-export { script as default };
+export { __default__ as default };
 //# sourceMappingURL=staggered-fade-and-slide.vue2.js.map

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?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n  import { mixins } from 'vue-class-component';\n  import { Component, Prop } from 'vue-property-decorator';\n  import StaggeringTransitionGroup from '../animations/staggering-transition-group.vue';\n  import DisableAnimationMixin from './disable-animation.mixin';\n\n  /**\n   * Renders a transition group wrapping the elements passed in the default slot and animating\n   * them with an staggered fade and slide animation.\n   *\n   * @public\n   */\n  @Component({\n    components: { StaggeringTransitionGroup },\n    inheritAttrs: false\n  })\n  export default class StaggeredFadeAndSlide extends mixins(DisableAnimationMixin) {\n    /**\n     * Indicates if the transition must be applied on the initial render of the node.\n     */\n    @Prop({\n      type: Boolean,\n      default: true\n    })\n    public appear!: boolean;\n    /**\n     * The name of the animation.\n     *\n     * @public\n     */\n    protected animationName = 'x-staggered-fade-and-slide-';\n  }\n"],"names":["StaggeringTransitionGroup"],"mappings":";;;;;;AAmBE;;;;;AAKG;AAKY,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,MAAM,CAAC,qBAAqB,CAAC,CAAA;AAAjE,IAAA,WAAA,GAAA;;AASb;;;;AAIG;QACO,IAAa,CAAA,aAAA,GAAG,6BAA6B,CAAC;KACzD;CAAA,CAAA;AAPC,UAAA,CAAA;AAJC,IAAA,IAAI,CAAC;AACJ,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,OAAO,EAAE,IAAI;KACd,CAAC;AACsB,CAAA,EAAA,qBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AARL,qBAAqB,GAAA,UAAA,CAAA;AAJzC,IAAA,SAAS,CAAC;QACT,UAAU,EAAE,6BAAEA,iBAAyB,EAAE;AACzC,QAAA,YAAY,EAAE,KAAK;KACpB,CAAC;AACmB,CAAA,EAAA,qBAAqB,CAezC,CAAA;aAfoB,qBAAqB;;;;"}
+{"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;;;;;;;;;;;;;"}

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

@@ -1,16 +1,7 @@
-import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
+import injectCss from '../../../tools/inject-css.js';
 
-var css = ".x-staggered-fade-and-slide[data-v-54972a1a] {\n  z-index: 0;\n}\n.x-staggered-fade-and-slide[data-v-54972a1a] .x-staggered-fade-and-slide--enter-active, .x-staggered-fade-and-slide[data-v-54972a1a] .x-staggered-fade-and-slide--leave-active {\n  transition: 0.25s ease-out;\n  transition-property: opacity, transform;\n}\n.x-staggered-fade-and-slide[data-v-54972a1a] .x-staggered-fade-and-slide--move {\n  transition: transform 0.25s ease-out;\n}\n.x-staggered-fade-and-slide[data-v-54972a1a] .x-staggered-fade-and-slide--enter, .x-staggered-fade-and-slide[data-v-54972a1a] .x-staggered-fade-and-slide--leave-to {\n  transform: translate3d(0, 50%, 0);\n  opacity: 0;\n  z-index: -1;\n}";
-           const isBrowser = /*#__PURE__*/ (function () {
-             return (
-                Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==
-                '[object process]'
-             );
-           })();
-           const useBrowserInjector =
-             (typeof STRIP_SSR_INJECTOR !== 'undefined' && STRIP_SSR_INJECTOR) || isBrowser;
-           const injector = useBrowserInjector ? createInjector({}) : createInjectorSSR({});
-           injector('/home/runner/work/x/x/packages/x-components/src/components/animations/staggered-fade-and-slide.vue?rollup-plugin-vue=styles.0.css',{source:css});
+var css = ".x-staggered-fade-and-slide-enter-active,.x-staggered-fade-and-slide-leave-active{transition:var(--29c214c5-transitionDurationInMs) ease-out;transition-property:opacity,transform}.x-staggered-fade-and-slide-move{transition:transform var(--29c214c5-transitionDurationInMs) ease-out}.x-staggered-fade-and-slide-enter,.x-staggered-fade-and-slide-enter-from,.x-staggered-fade-and-slide-leave-to{opacity:0;transform:translate3d(0,50%,0)}.x-staggered-fade-and-slide-leave-active{position:absolute}";
+injectCss(css);
 
 export { css, css as default };
 //# sourceMappingURL=staggered-fade-and-slide.vue3.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"staggered-fade-and-slide.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
+{"version":3,"file":"staggered-fade-and-slide.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

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

@@ -0,0 +1,58 @@
+/**
+ * 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
+    };
+}
+
+export { useCollapseAnimation };
+//# sourceMappingURL=use-collapse-animation.js.map

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

@@ -0,0 +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;;;;"}

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

@@ -0,0 +1,27 @@
+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 };
+}
+
+export { useDisableAnimation };
+//# sourceMappingURL=use-disable-animation.js.map

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

@@ -0,0 +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;;;;"}

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

@@ -1,62 +1,30 @@
-import script from './auto-progress-bar.vue2.js';
+import _sfc_main from './auto-progress-bar.vue2.js';
+import { openBlock, createElementBlock, createElementVNode, normalizeStyle, createCommentVNode } from 'vue';
 import './auto-progress-bar.vue3.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import _export_sfc from '../_virtual/_plugin-vue_export-helper.js';
 
-/* script */
-const __vue_script__ = script;
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _vm.isLoading
-    ? _c(
-        "div",
-        {
-          staticClass: "x-progress-bar",
-          attrs: { "data-test": "progress-bar", role: "progressbar" },
-        },
-        [
-          _c("div", {
-            staticClass: "x-progress-bar-fill",
-            style: _vm.cssStyles,
-            attrs: { "data-test": "progress-bar-line" },
-          }),
-        ]
-      )
-    : _vm._e()
+const _hoisted_1 = {
+  key: 0,
+  class: "x-progress-bar",
+  "data-test": "progress-bar",
+  role: "progressbar"
 };
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return _ctx.isLoading ? (openBlock(), createElementBlock("div", _hoisted_1, [
+    createElementVNode(
+      "div",
+      {
+        class: "x-progress-bar-fill",
+        style: normalizeStyle(_ctx.cssStyles),
+        "data-test": "progress-bar-line"
+      },
+      null,
+      4
+      /* STYLE */
+    )
+  ])) : createCommentVNode("v-if", true);
+}
+var autoProgressBar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-0d4c162e"]]);
 
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export { __vue_component__ as default };
+export { autoProgressBar as default };
 //# sourceMappingURL=auto-progress-bar.vue.js.map

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 } 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    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<Partial<CSSStyleDeclaration>>(() => ({\n        animationDuration: `${props.durationInSeconds}s`\n      }));\n\n      return {\n        cssStyles\n      };\n    }\n  });\n</script>\n\n<style lang=\"scss\">\n  .x-progress-bar {\n    display: inline-block;\n    overflow: hidden;\n    background-color: #dbe2e5;\n    border-radius: 4px;\n\n    &-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":";;;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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;;;;;;"}

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

@@ -6,7 +6,8 @@ import { defineComponent, computed } from 'vue';
  *
  * @public
  */
-var script = defineComponent({
+var _sfc_main = defineComponent({
+    name: 'AutoProgressBar',
     props: {
         /**
          * A boolean flag indicating if the bar is loading.
@@ -44,5 +45,5 @@ var script = defineComponent({
     }
 });
 
-export { script as default };
+export { _sfc_main as default };
 //# sourceMappingURL=auto-progress-bar.vue2.js.map

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?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n  import { 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   */\n  export default defineComponent({\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<Partial<CSSStyleDeclaration>>(() => ({\n        animationDuration: `${props.durationInSeconds}s`\n      }));\n\n      return {\n        cssStyles\n      };\n    }\n  });\n"],"names":[],"mappings":";;AASE;;;;;AAKG;AACH,aAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE;AACL;;;;AAIG;AACH,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACD;;;;AAIG;AACH,QAAA,iBAAiB,EAAE;AACjB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAC;AACX,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;;;AAMG;AACH,QAAA,MAAM,SAAS,GAAG,QAAQ,CAA+B,OAAO;AAC9D,YAAA,iBAAiB,EAAE,CAAA,EAAG,KAAK,CAAC,iBAAiB,CAAG,CAAA,CAAA;AACjD,SAAA,CAAC,CAAC,CAAC;QAEJ,OAAO;YACL,SAAS;SACV,CAAC;KACH;AACF,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\">\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;;;;"}

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

@@ -1,16 +1,7 @@
-import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
+import injectCss from '../../tools/inject-css.js';
 
-var css = ".x-progress-bar {\n  display: inline-block;\n  overflow: hidden;\n  background-color: #dbe2e5;\n  border-radius: 4px;\n}\n.x-progress-bar-fill {\n  height: 4px;\n  background-color: #283034;\n  animation: slide linear;\n  transform-origin: left;\n}\n@keyframes slide {\n0% {\n    transform: translateX(-100%);\n}\n100% {\n    transform: translateX(0);\n}\n}";
-           const isBrowser = /*#__PURE__*/ (function () {
-             return (
-                Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==
-                '[object process]'
-             );
-           })();
-           const useBrowserInjector =
-             (typeof STRIP_SSR_INJECTOR !== 'undefined' && STRIP_SSR_INJECTOR) || isBrowser;
-           const injector = useBrowserInjector ? createInjector({}) : createInjectorSSR({});
-           injector('/home/runner/work/x/x/packages/x-components/src/components/auto-progress-bar.vue?rollup-plugin-vue=styles.0.css',{source:css});
+var css = ".x-progress-bar[data-v-0d4c162e]{background-color:#dbe2e5;border-radius:4px;display:inline-block;overflow:hidden}.x-progress-bar-fill[data-v-0d4c162e]{animation:slide-0d4c162e linear;background-color:#283034;height:4px;transform-origin:left}@keyframes slide-0d4c162e{0%{transform:translateX(-100%)}to{transform:translateX(0)}}";
+injectCss(css);
 
 export { css, css as default };
 //# sourceMappingURL=auto-progress-bar.vue3.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"auto-progress-bar.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
+{"version":3,"file":"auto-progress-bar.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}