@empathyco/x-components 3.0.0-alpha.52 → 3.0.0-alpha.53

package/js/components/animations/staggering-transition-group.vue_rollup-plugin-vue_script.vue.js

@@ -0,0 +1,319 @@
+import { __decorate } from 'tslib';
+import Vue from 'vue';
+import { Prop, Component } from 'vue-property-decorator';
+import { noOp } from '../../utils/function.js';
+import '../../utils/storage.js';
+
+/* eslint-disable @typescript-eslint/unbound-method */
+/**
+ * A replacement component for Vue's transition-group, that also adds the option to stagger
+ * the animations.
+ *
+ * @public
+ */
+let StaggeringTransitionGroup = class StaggeringTransitionGroup extends Vue {
+    /**
+     * The CSS class for the moving transitions.
+     *
+     * @returns The move transition name.
+     * @internal
+     */
+    get moveClassName() {
+        return this.moveClass ?? `${this.name}-move`;
+    }
+    /**
+     * The transition data contains the needed events and props to perform a transition using Vue
+     * virtual node's API.
+     *
+     * The `beforeLeave` hook is extended to also restore the previous position of the element using
+     * the position absolute.
+     * The `afterEnter` and `afterLeave` hooks are extended to also clean the transition delay
+     * applied by the stagger.
+     *
+     * @returns The transition data for Vue virtual nodes.
+     * @internal
+     */
+    get transitionData() {
+        const transitionData = { ...this.$props, ...this.$attrs, ...this.$listeners };
+        transitionData.beforeLeave = this.addRestorePositionHook(transitionData.beforeLeave);
+        transitionData.afterEnter = this.addClearStaggeringCall(transitionData.afterEnter);
+        transitionData.afterLeave = this.addClearStaggeringCall(transitionData.afterLeave);
+        return transitionData;
+    }
+    beforeCreate() {
+        /* Initialize properties here to avoid making them reactive,
+       which would cause infinite loops */
+        this.oldChildren = [];
+        this.newChildren = [];
+        this.oldPositions = new WeakMap();
+        this.newPositions = new WeakMap();
+        this.pendingCleanupMoveCallbacks = new WeakMap();
+        this.staggerCounter = 0;
+    }
+    render(createElement) {
+        this.staggerCounter = 0;
+        // New children are now the old ones
+        this.oldChildren = this.newChildren;
+        // Only vnodes with a tag (i.e. no HTML comments) and with a `key` property are valid.
+        this.newChildren = (this.$slots.default ?? []).filter(this.isTransitionValidVNode);
+        // Apply transition data to both new and old nodes & store the position of the old nodes.
+        this.newChildren.forEach(this.addTransitionData);
+        this.oldChildren.forEach(this.syncOldNodes);
+        return createElement(this.tag, { staticClass: 'x-staggering-transition-group' }, this.newChildren);
+    }
+    mounted() {
+        this.newChildren.forEach(this.applyStagger);
+    }
+    beforeUpdate() {
+        this.wrapperBounds = this.$el.getBoundingClientRect();
+    }
+    updated() {
+        this.wrapperBounds = this.$el.getBoundingClientRect();
+        this.newChildren.forEach(this.recordNewPosition);
+        const { leavingNodes, stayingNodes, enteringNodes } = this.getNodesByTransitionType();
+        leavingNodes.forEach(vNode => {
+            this.applyStagger(vNode);
+            this.disableClickingEvents(vNode);
+        });
+        const movedChildren = stayingNodes.filter(this.applyTranslation);
+        const movedStagger = movedChildren.map(this.getNextTransitionDelay);
+        enteringNodes.forEach(this.applyStagger);
+        // force reflow to put everything in position
+        document.body.getBoundingClientRect();
+        movedChildren.forEach(this.startMoveAnimation(movedStagger));
+    }
+    /**
+     * Extends the provided leave transition hook restoring the position of the element with an
+     * absolute position.
+     * Additionally, it removes the element position from the maps of positions.
+     *
+     * @param transitionHook - The leave transition hook to extend.
+     * @returns The new leave transition hook extended.
+     * @internal
+     */
+    addRestorePositionHook(transitionHook = noOp) {
+        return element => {
+            const { top, left, width, height } = this.oldPositions.get(element);
+            const { marginTop, marginLeft } = window.getComputedStyle(element);
+            const style = element.style;
+            style.position = 'absolute';
+            style.top = `${top - parseFloat(marginTop)}px`;
+            style.left = `${left - parseFloat(marginLeft)}px`;
+            style.width = `${width}px`;
+            style.height = `${height}px`;
+            this.newPositions.delete(element);
+            this.oldPositions.delete(element);
+            const pendingCallback = this.pendingCleanupMoveCallbacks.get(element);
+            pendingCallback?.();
+            transitionHook(element);
+        };
+    }
+    /**
+     * Extends the provided transition hook clearing the transition delay.
+     *
+     * @param transitionHook - The transition hook to extend.
+     * @returns The new transition hook, that also clears the transitionDelay from the element.
+     * @internal
+     */
+    addClearStaggeringCall(transitionHook = noOp) {
+        return element => {
+            element.style.transitionDelay = '';
+            transitionHook(element);
+        };
+    }
+    /**
+     * Returns if the vNode contains a non empty key, and a non empty tag.
+     *
+     * @param vNode - The VNode to check if it is a valid transition node, containing a `tag` and a
+     * `key` property.
+     * @returns True when the vNode contains a non empty key and a non empty tag. False otherwise.
+     * @internal
+     */
+    isTransitionValidVNode(vNode) {
+        // TODO Add warning with logger: <staggering-transition-group> children must be keyed.
+        return !!vNode.key && !!vNode.tag;
+    }
+    /**
+     * Adds the generated transition data to the vNode, creating the `data` property if necessary.
+     *
+     * @param vNode - The VNode to add the transition data to.
+     * @internal
+     */
+    addTransitionData(vNode) {
+        if (!vNode.data) {
+            vNode.data = {};
+        }
+        vNode.data.transition = this.transitionData;
+    }
+    /**
+     * Re-applies the transition data to an old node, just in case it changed from the previous
+     * render call. It also records the position of the node, to then calculate the move
+     * transitions.
+     *
+     * @param vNode - The vNode to add the transition data to, and record his current position as
+     * old.
+     * @internal
+     */
+    syncOldNodes(vNode) {
+        // Synchronize transition data, in case it changed in the last frame.
+        // We can trust data to be defined because each new node has the transition applied
+        vNode.data.transition = this.transitionData;
+        this.recordOldPosition(vNode);
+    }
+    /**
+     * Saves the position of the vNode in the map of old positions.
+     *
+     * @param vNode - The node to store its position.
+     * @internal
+     */
+    recordOldPosition(vNode) {
+        this.oldPositions.set(vNode.elm, this.createRelativeBounds(vNode));
+    }
+    /**
+     * Saves the position of the vNode in the map of new positions.
+     *
+     * @param vNode - The node to store its position.
+     * @internal
+     */
+    recordNewPosition(vNode) {
+        this.newPositions.set(vNode.elm, this.createRelativeBounds(vNode));
+    }
+    /**
+     * Creates an object containing the position of the vNode relative to its container.
+     *
+     * @param vNode - The virtual node to store its relative position.
+     * @returns The relative bounds of the provided virtual node.
+     * @internal
+     */
+    createRelativeBounds(vNode) {
+        const { left, top, width, height } = vNode.elm.getBoundingClientRect();
+        const { left: wrapperLeft, top: wrapperTop } = this.wrapperBounds;
+        return {
+            left: left - wrapperLeft,
+            top: top - wrapperTop,
+            width,
+            height
+        };
+    }
+    /**
+     * Splits the children of the component into three groups:
+     * - Nodes that are leaving.
+     * - Nodes that are entering.
+     * - Nodes that stay.
+     *
+     * This is then used to apply the stagger in the correct order: leave -\> move -\> enter.
+     *
+     * @returns The children nodes, divided in different groups depending on if they are leaving,
+     * staying or entering.
+     * @internal
+     */
+    getNodesByTransitionType() {
+        const leave = this.oldChildren.filter(child => !this.newPositions.has(child.elm));
+        const enter = this.newChildren.filter(child => !this.oldPositions.has(child.elm));
+        const stay = this.oldChildren.filter(child => this.newPositions.has(child.elm));
+        return {
+            leavingNodes: leave,
+            enteringNodes: enter,
+            stayingNodes: stay
+        };
+    }
+    /**
+     * Applies an incremental delay to the virtual node element.
+     *
+     * @param vNode - The virtual node to apply the stagger to.
+     * @internal
+     */
+    applyStagger(vNode) {
+        vNode.elm.style.transitionDelay = this.getNextTransitionDelay();
+    }
+    /**
+     * Disables listening to click events in a virtual node element.
+     *
+     * @remarks This is done to avoid letting the user click elements that are performing the moving
+     * animation to leave the DOM but are still rendered.
+     *
+     * @param vNode - The virtual node to disable listening to click events.
+     * @internal
+     */
+    disableClickingEvents(vNode) {
+        vNode.elm.style.pointerEvents = 'none';
+    }
+    /**
+     * Calculates the next transition delay property, incrementing the `staggerCounter` property
+     * each time it is called.
+     *
+     * @returns The value for the next element `style.transitionDelay` property.
+     * @internal
+     */
+    getNextTransitionDelay() {
+        return `${this.staggerCounter++ * this.staggering}ms`;
+    }
+    /**
+     * Calculates if the virtual node should have a move transition. If its has it, then it
+     * applies it immediately using the `style.transform`.
+     *
+     * @param vNode - The virtual node to calculate if it should have a move transition.
+     * @returns True when a move transition was applied to the virtual node.
+     * @internal
+     */
+    applyTranslation(vNode) {
+        const oldPosition = this.oldPositions.get(vNode.elm);
+        const newPosition = this.newPositions.get(vNode.elm);
+        const dx = oldPosition.left - newPosition.left;
+        const dy = oldPosition.top - newPosition.top;
+        if (dx !== 0 || dy !== 0) {
+            const style = vNode.elm.style;
+            style.transform = `translate3d(${dx}px,${dy}px,0)`;
+            style.transitionDuration = '0s';
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Generates a function to start the moving animations to each node that it needs them with the
+     * provided stagger.
+     *
+     * @param moveStagger - A list containing the delay to add to each node.
+     * @returns A function that starts the moving animation with the provided stagger to a single
+     * virtual node.
+     * @internal
+     */
+    startMoveAnimation(moveStagger) {
+        return (vNode, index) => {
+            const element = vNode.elm;
+            const style = element.style;
+            element.classList.add(this.moveClassName);
+            style.transform = style.transitionDuration = '';
+            style.transitionDelay = moveStagger[index];
+            const cleanMoveTransition = (event) => {
+                if (!event || (event.target === element && /transform$/.test(event.propertyName))) {
+                    element.removeEventListener('transitionend', cleanMoveTransition);
+                    element.style.transitionDelay = '';
+                    element.classList.remove(this.moveClassName);
+                    this.pendingCleanupMoveCallbacks.delete(element);
+                }
+            };
+            this.pendingCleanupMoveCallbacks.set(element, cleanMoveTransition);
+            element.addEventListener('transitionend', cleanMoveTransition);
+        };
+    }
+};
+__decorate([
+    Prop({ default: 'v' })
+], StaggeringTransitionGroup.prototype, "name", void 0);
+__decorate([
+    Prop()
+], StaggeringTransitionGroup.prototype, "moveClass", void 0);
+__decorate([
+    Prop({ default: 'div' })
+], StaggeringTransitionGroup.prototype, "tag", void 0);
+__decorate([
+    Prop({ default: 25 })
+], StaggeringTransitionGroup.prototype, "staggering", void 0);
+StaggeringTransitionGroup = __decorate([
+    Component
+], StaggeringTransitionGroup);
+var script = StaggeringTransitionGroup;
+
+export { script as default };
+//# sourceMappingURL=staggering-transition-group.vue_rollup-plugin-vue_script.vue.js.map

package/js/components/animations/staggering-transition-group.vue_rollup-plugin-vue_script.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"staggering-transition-group.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/animations/staggering-transition-group.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\nimport Vue, { CreateElement, VNode } from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { noOp } from '../../utils';\n\n/* eslint-disable @typescript-eslint/unbound-method */\n/**\n * A replacement component for Vue's transition-group, that also adds the option to stagger\n * the animations.\n *\n * @public\n */\n@Component\nexport default class StaggeringTransitionGroup extends Vue {\n  /**\n   * The name of the transition. Used to generate the CSS classes.\n   *\n   * @internal\n   */\n  @Prop({ default: 'v' })\n  public name!: string;\n\n  /** The CSS move class name.\n   *\n   * @internal\n   */\n  @Prop()\n  public moveClass!: string;\n\n  /**\n   * The tag of the node to render to the DOM.\n   *\n   * @internal\n   */\n  @Prop({ default: 'div' })\n  public tag!: string;\n\n  /**\n   * The time in ms to stagger each item.\n   *\n   * @internal\n   */\n  @Prop({ default: 25 })\n  public staggering!: number;\n\n  /**\n   * The CSS class for the moving transitions.\n   *\n   * @returns The move transition name.\n   * @internal\n   */\n  protected get moveClassName(): string {\n    return this.moveClass ?? `${this.name}-move`;\n  }\n\n  /**\n   * The transition data contains the needed events and props to perform a transition using Vue\n   * virtual node's API.\n   *\n   * The `beforeLeave` hook is extended to also restore the previous position of the element using\n   * the position absolute.\n   * The `afterEnter` and `afterLeave` hooks are extended to also clean the transition delay\n   * applied by the stagger.\n   *\n   * @returns The transition data for Vue virtual nodes.\n   * @internal\n   */\n  protected get transitionData(): TransitionData {\n    const transitionData: TransitionData = { ...this.$props, ...this.$attrs, ...this.$listeners };\n\n    transitionData.beforeLeave = this.addRestorePositionHook(transitionData.beforeLeave);\n    transitionData.afterEnter = this.addClearStaggeringCall(transitionData.afterEnter);\n    transitionData.afterLeave = this.addClearStaggeringCall(transitionData.afterLeave);\n\n    return transitionData;\n  }\n\n  /** The list of old virtual nodes, generated by the previous called render method.\n   *\n   * @internal */\n  protected oldChildren!: TransitionVNode[];\n  /** The list of new virtual nodes, generated by the last called render method.\n   *\n   * @internal */\n  protected newChildren!: TransitionVNode[];\n  /** A map containing the previous positions relative to the container, for each item\n   * rendered inside the slot of this component component.\n   * This is used together with the `newPositions` to calculate the move transition.\n   *\n   * @internal */\n  protected oldPositions!: WeakMap<Element, Bounds>;\n  /** A map containing the new positions relative to the container, for each item\n   * rendered inside the slot of this component component.\n   * This is used together with the `newPositions` to calculate the move transition.\n   *\n   * @internal */\n  protected newPositions!: WeakMap<Element, Bounds>;\n  /** A map containing the move cleanup functions pending to have been called. When invoked\n   * this functions remove all the styles and classes associated to the move transition.\n   *\n   * @internal */\n  protected pendingCleanupMoveCallbacks!: WeakMap<Element, () => void>;\n  /** The counter for the stagger, used to calculate the delay for the transition of each child\n   * element. It is reset every time the render method is triggered.\n   *\n   * @internal */\n  protected staggerCounter!: number;\n  /** The bounds of the container rendered using the `tag` prop. This is used to calculate the\n   * relative positions of each leaving child, which are then applied with the position absolute.\n   *\n   * @internal */\n  protected wrapperBounds!: DOMRect;\n\n  beforeCreate(): void {\n    /* Initialize properties here to avoid making them reactive,\n   which would cause infinite loops */\n    this.oldChildren = [];\n    this.newChildren = [];\n    this.oldPositions = new WeakMap();\n    this.newPositions = new WeakMap();\n    this.pendingCleanupMoveCallbacks = new WeakMap<Element, () => void>();\n    this.staggerCounter = 0;\n  }\n\n  render(createElement: CreateElement): VNode {\n    this.staggerCounter = 0;\n    // New children are now the old ones\n    this.oldChildren = this.newChildren;\n    // Only vnodes with a tag (i.e. no HTML comments) and with a `key` property are valid.\n    this.newChildren = (this.$slots.default ?? []).filter(this.isTransitionValidVNode);\n\n    // Apply transition data to both new and old nodes & store the position of the old nodes.\n    this.newChildren.forEach(this.addTransitionData);\n    this.oldChildren.forEach(this.syncOldNodes);\n\n    return createElement(\n      this.tag,\n      { staticClass: 'x-staggering-transition-group' },\n      this.newChildren\n    );\n  }\n\n  mounted(): void {\n    this.newChildren.forEach(this.applyStagger);\n  }\n\n  beforeUpdate(): void {\n    this.wrapperBounds = this.$el.getBoundingClientRect();\n  }\n\n  updated(): void {\n    this.wrapperBounds = this.$el.getBoundingClientRect();\n    this.newChildren.forEach(this.recordNewPosition);\n    const { leavingNodes, stayingNodes, enteringNodes } = this.getNodesByTransitionType();\n\n    leavingNodes.forEach(vNode => {\n      this.applyStagger(vNode);\n      this.disableClickingEvents(vNode);\n    });\n    const movedChildren = stayingNodes.filter(this.applyTranslation);\n    const movedStagger = movedChildren.map(this.getNextTransitionDelay);\n    enteringNodes.forEach(this.applyStagger);\n\n    // force reflow to put everything in position\n    document.body.getBoundingClientRect();\n\n    movedChildren.forEach(this.startMoveAnimation(movedStagger));\n  }\n\n  /**\n   * Extends the provided leave transition hook restoring the position of the element with an\n   * absolute position.\n   * Additionally, it removes the element position from the maps of positions.\n   *\n   * @param transitionHook - The leave transition hook to extend.\n   * @returns The new leave transition hook extended.\n   * @internal\n   */\n  protected addRestorePositionHook(transitionHook: TransitionHook = noOp): TransitionHook {\n    return element => {\n      const { top, left, width, height } = this.oldPositions.get(element)!;\n      const { marginTop, marginLeft } = window.getComputedStyle(element);\n      const style = element.style;\n      style.position = 'absolute';\n      style.top = `${top - parseFloat(marginTop)}px`;\n      style.left = `${left - parseFloat(marginLeft)}px`;\n      style.width = `${width}px`;\n      style.height = `${height}px`;\n      this.newPositions.delete(element);\n      this.oldPositions.delete(element);\n      const pendingCallback = this.pendingCleanupMoveCallbacks.get(element);\n      pendingCallback?.();\n      transitionHook(element);\n    };\n  }\n\n  /**\n   * Extends the provided transition hook clearing the transition delay.\n   *\n   * @param transitionHook - The transition hook to extend.\n   * @returns The new transition hook, that also clears the transitionDelay from the element.\n   * @internal\n   */\n  protected addClearStaggeringCall(transitionHook: TransitionHook = noOp): TransitionHook {\n    return element => {\n      element.style.transitionDelay = '';\n      transitionHook(element);\n    };\n  }\n\n  /**\n   * Returns if the vNode contains a non empty key, and a non empty tag.\n   *\n   * @param vNode - The VNode to check if it is a valid transition node, containing a `tag` and a\n   * `key` property.\n   * @returns True when the vNode contains a non empty key and a non empty tag. False otherwise.\n   * @internal\n   */\n  protected isTransitionValidVNode(vNode: VNode): vNode is TransitionVNode {\n    // TODO Add warning with logger: <staggering-transition-group> children must be keyed.\n    return !!vNode.key && !!vNode.tag;\n  }\n\n  /**\n   * Adds the generated transition data to the vNode, creating the `data` property if necessary.\n   *\n   * @param vNode - The VNode to add the transition data to.\n   * @internal\n   */\n  protected addTransitionData(vNode: TransitionVNode): void {\n    if (!vNode.data) {\n      vNode.data = {};\n    }\n    vNode.data.transition = this.transitionData;\n  }\n\n  /**\n   * Re-applies the transition data to an old node, just in case it changed from the previous\n   * render call. It also records the position of the node, to then calculate the move\n   * transitions.\n   *\n   * @param vNode - The vNode to add the transition data to, and record his current position as\n   * old.\n   * @internal\n   */\n  protected syncOldNodes(vNode: TransitionVNode): void {\n    // Synchronize transition data, in case it changed in the last frame.\n    // We can trust data to be defined because each new node has the transition applied\n    vNode.data!.transition = this.transitionData;\n    this.recordOldPosition(vNode);\n  }\n\n  /**\n   * Saves the position of the vNode in the map of old positions.\n   *\n   * @param vNode - The node to store its position.\n   * @internal\n   */\n  protected recordOldPosition(vNode: TransitionVNode): void {\n    this.oldPositions.set(vNode.elm, this.createRelativeBounds(vNode));\n  }\n\n  /**\n   * Saves the position of the vNode in the map of new positions.\n   *\n   * @param vNode - The node to store its position.\n   * @internal\n   */\n  protected recordNewPosition(vNode: TransitionVNode): void {\n    this.newPositions.set(vNode.elm, this.createRelativeBounds(vNode));\n  }\n\n  /**\n   * Creates an object containing the position of the vNode relative to its container.\n   *\n   * @param vNode - The virtual node to store its relative position.\n   * @returns The relative bounds of the provided virtual node.\n   * @internal\n   */\n  protected createRelativeBounds(vNode: TransitionVNode): Bounds {\n    const { left, top, width, height } = vNode.elm.getBoundingClientRect();\n    const { left: wrapperLeft, top: wrapperTop } = this.wrapperBounds;\n    return {\n      left: left - wrapperLeft,\n      top: top - wrapperTop,\n      width,\n      height\n    };\n  }\n\n  /**\n   * Splits the children of the component into three groups:\n   * - Nodes that are leaving.\n   * - Nodes that are entering.\n   * - Nodes that stay.\n   *\n   * This is then used to apply the stagger in the correct order: leave -\\> move -\\> enter.\n   *\n   * @returns The children nodes, divided in different groups depending on if they are leaving,\n   * staying or entering.\n   * @internal\n   */\n  protected getNodesByTransitionType(): TransitionTypeNodes {\n    const leave = this.oldChildren.filter(child => !this.newPositions.has(child.elm));\n    const enter = this.newChildren.filter(child => !this.oldPositions.has(child.elm));\n    const stay = this.oldChildren.filter(child => this.newPositions.has(child.elm));\n    return {\n      leavingNodes: leave,\n      enteringNodes: enter,\n      stayingNodes: stay\n    };\n  }\n\n  /**\n   * Applies an incremental delay to the virtual node element.\n   *\n   * @param vNode - The virtual node to apply the stagger to.\n   * @internal\n   */\n  protected applyStagger(vNode: TransitionVNode): void {\n    vNode.elm.style.transitionDelay = this.getNextTransitionDelay();\n  }\n\n  /**\n   * Disables listening to click events in a virtual node element.\n   *\n   * @remarks This is done to avoid letting the user click elements that are performing the moving\n   * animation to leave the DOM but are still rendered.\n   *\n   * @param vNode - The virtual node to disable listening to click events.\n   * @internal\n   */\n  protected disableClickingEvents(vNode: TransitionVNode): void {\n    vNode.elm.style.pointerEvents = 'none';\n  }\n\n  /**\n   * Calculates the next transition delay property, incrementing the `staggerCounter` property\n   * each time it is called.\n   *\n   * @returns The value for the next element `style.transitionDelay` property.\n   * @internal\n   */\n  protected getNextTransitionDelay(): string {\n    return `${this.staggerCounter++ * this.staggering}ms`;\n  }\n\n  /**\n   * Calculates if the virtual node should have a move transition. If its has it, then it\n   * applies it immediately using the `style.transform`.\n   *\n   * @param vNode - The virtual node to calculate if it should have a move transition.\n   * @returns True when a move transition was applied to the virtual node.\n   * @internal\n   */\n  protected applyTranslation(vNode: TransitionVNode): boolean {\n    const oldPosition = this.oldPositions.get(vNode.elm as Element)!;\n    const newPosition = this.newPositions.get(vNode.elm as Element)!;\n    const dx = oldPosition.left - newPosition.left;\n    const dy = oldPosition.top - newPosition.top;\n    if (dx !== 0 || dy !== 0) {\n      const style = vNode.elm.style;\n      style.transform = `translate3d(${dx}px,${dy}px,0)`;\n      style.transitionDuration = '0s';\n      return true;\n    }\n    return false;\n  }\n\n  /**\n   * Generates a function to start the moving animations to each node that it needs them with the\n   * provided stagger.\n   *\n   * @param moveStagger - A list containing the delay to add to each node.\n   * @returns A function that starts the moving animation with the provided stagger to a single\n   * virtual node.\n   * @internal\n   */\n  protected startMoveAnimation(\n    moveStagger: string[]\n  ): (vNode: TransitionVNode, index: number) => void {\n    return (vNode, index) => {\n      const element = vNode.elm;\n      const style = element.style;\n      element.classList.add(this.moveClassName);\n      style.transform = style.transitionDuration = '';\n      style.transitionDelay = moveStagger[index];\n      const cleanMoveTransition = (event?: TransitionEvent): void => {\n        if (!event || (event.target === element && /transform$/.test(event.propertyName))) {\n          element.removeEventListener('transitionend', cleanMoveTransition);\n          element.style.transitionDelay = '';\n          element.classList.remove(this.moveClassName);\n          this.pendingCleanupMoveCallbacks.delete(element);\n        }\n      };\n      this.pendingCleanupMoveCallbacks.set(element, cleanMoveTransition);\n      element.addEventListener('transitionend', cleanMoveTransition);\n    };\n  }\n}\n\n/**\n * Contains arrays of nodes, splitted by the action they should have.\n */\ninterface TransitionTypeNodes {\n  leavingNodes: TransitionVNode[];\n  stayingNodes: TransitionVNode[];\n  enteringNodes: TransitionVNode[];\n}\n\n/**\n * Safe transition version of the VNode type, with the required non optional properties.\n */\ninterface TransitionVNode extends VNode {\n  elm: HTMLElement;\n  tag: string;\n  key: string;\n}\n\n/**\n * Vue's VNode {@link https://vuejs.org/v2/api/#transition | transition} data props and events.\n */\ninterface TransitionData {\n  name?: string;\n  appear?: boolean;\n  css?: boolean;\n  type?: 'transition' | 'animation'; // Unused\n  mode?: 'out-in' | 'in-out'; // Unused\n  duration?: number;\n  enterClass?: string;\n  leaveClass?: string;\n  appearClass?: string;\n  enterToClass?: string;\n  leaveToClass?: string;\n  appearToClass?: string;\n  enterActiveClass?: string;\n  leaveActiveClass?: string;\n  appearActiveClass?: string;\n  beforeEnter?: TransitionHook;\n  enter?: TransitionHook;\n  afterEnter?: TransitionHook;\n  beforeLeave?: TransitionHook;\n  leave?: TransitionHook;\n  afterLeave?: TransitionHook;\n}\n\n/**\n * A function that receives an HTMLElement. Used to perform actions when the different phases\n * of Vue transitions happens.\n */\ntype TransitionHook = (element: HTMLElement) => void;\n\n/**\n * Represents the dimensions and positions of an element.\n */\ninterface Bounds {\n  top: number;\n  left: number;\n  width: number;\n  height: number;\n}\n"],"names":[],"mappings":"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"}

package/js/components/animations/translate-from-left.vue.js

@@ -1,9 +1,9 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-import __vue_create_injector__ from 'vue-runtime-helpers/dist/inject-style/browser.js';
-import script from './translate-from-left.vue_rollup-plugin-vue=script.js';
+import script from './translate-from-left.vue_rollup-plugin-vue_script.vue.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import __vue_create_injector__ from 'vue-runtime-helpers/dist/inject-style/browser.mjs';
 
 /* script */
-var __vue_script__ = script;
+const __vue_script__ = script;
 
 /* template */
 var __vue_render__ = function () {
@@ -24,24 +24,24 @@ var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
 
   /* style */
-  var __vue_inject_styles__ = function (inject) {
-    if (!inject) { return }
+  const __vue_inject_styles__ = function (inject) {
+    if (!inject) return
     inject("data-v-cf07d6f6_0", { source: ".x-translate-from-left--enter-active[data-v-cf07d6f6], .x-translate-from-left--leave-active[data-v-cf07d6f6] {\n  transition: transform 0.3s ease-out;\n}\n.x-translate-from-left--leave-to[data-v-cf07d6f6], .x-translate-from-left--enter[data-v-cf07d6f6] {\n  transform: translateX(-100%);\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-cf07d6f6";
+  const __vue_scope_id__ = "data-v-cf07d6f6";
   /* module identifier */
-  var __vue_module_identifier__ = undefined;
+  const __vue_module_identifier__ = undefined;
   /* functional template */
-  var __vue_is_functional_template__ = false;
+  const __vue_is_functional_template__ = false;
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  var __vue_component__ = /*#__PURE__*/__vue_normalize__(
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
     { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
     __vue_inject_styles__,
     __vue_script__,
@@ -54,5 +54,5 @@ __vue_render__._withStripped = true;
     undefined
   );
 
-export default __vue_component__;
+export { __vue_component__ as default };
 //# sourceMappingURL=translate-from-left.vue.js.map

package/js/components/animations/translate-from-left.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"translate-from-left.vue.js","sources":["../../../../src/components/animations/translate-from-left.vue"],"sourcesContent":["<template>\n  <transition v-on=\"$listeners\" appear name=\"x-translate-from-left-\">\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n\n  /**\n   * Renders a transition wrapping the element passed in the default slot and moving it to its\n   * desired position.\n   *\n   * @public\n   */\n  @Component\n  export default class TranslateFromLeft extends Vue {}\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-translate-from-left {\n    &--enter-active,\n    &--leave-active {\n      transition: transform 0.3s ease-out;\n    }\n\n    &--leave-to,\n    &--enter {\n      transform: translateX(-100%);\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Example\n\nThe `TranslateFromRight` component is intended to be used as animation to wrap an element with v-if\nor v-show and animate it. The animation translates the item from/to left 100%.\n\nWrapping a component:\n\n```vue\n<TranslateFromLeft>\n  <ComponentOrElement v-if=\"open\"/>\n</TranslateFromLeft>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"translate-from-left.vue.js","sources":["../../../../src/components/animations/translate-from-left.vue"],"sourcesContent":["<template>\n  <transition v-on=\"$listeners\" appear name=\"x-translate-from-left-\">\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n\n  /**\n   * Renders a transition wrapping the element passed in the default slot and moving it to its\n   * desired position.\n   *\n   * @public\n   */\n  @Component\n  export default class TranslateFromLeft extends Vue {}\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-translate-from-left {\n    &--enter-active,\n    &--leave-active {\n      transition: transform 0.3s ease-out;\n    }\n\n    &--leave-to,\n    &--enter {\n      transform: translateX(-100%);\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Example\n\nThe `TranslateFromRight` component is intended to be used as animation to wrap an element with v-if\nor v-show and animate it. The animation translates the item from/to left 100%.\n\nWrapping a component:\n\n```vue\n<TranslateFromLeft>\n  <ComponentOrElement v-if=\"open\"/>\n</TranslateFromLeft>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/animations/translate-from-left.vue_rollup-plugin-vue_script.vue.js

@@ -0,0 +1,19 @@
+import { __decorate } from 'tslib';
+import Vue from 'vue';
+import { Component } from 'vue-property-decorator';
+
+/**
+ * Renders a transition wrapping the element passed in the default slot and moving it to its
+ * desired position.
+ *
+ * @public
+ */
+let TranslateFromLeft = class TranslateFromLeft extends Vue {
+};
+TranslateFromLeft = __decorate([
+    Component
+], TranslateFromLeft);
+var script = TranslateFromLeft;
+
+export { script as default };
+//# sourceMappingURL=translate-from-left.vue_rollup-plugin-vue_script.vue.js.map

package/js/components/animations/translate-from-left.vue_rollup-plugin-vue_script.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"translate-from-left.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/animations/translate-from-left.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component } from 'vue-property-decorator';\n\n/**\n * Renders a transition wrapping the element passed in the default slot and moving it to its\n * desired position.\n *\n * @public\n */\n@Component\nexport default class TranslateFromLeft extends Vue {}\n"],"names":[],"mappings":";;;;AAWA;;;;;;AAOA,IAAqB,iBAAiB,GAAtC,MAAqB,iBAAkB,SAAQ,GAAG;CAAG,CAAA;AAAhC,iBAAiB;IADrC,SAAS;GACW,iBAAiB,CAAe;aAAhC,iBAAiB;;;;"}

package/js/components/animations/translate-from-right.vue.js

@@ -1,9 +1,9 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-import __vue_create_injector__ from 'vue-runtime-helpers/dist/inject-style/browser.js';
-import script from './translate-from-right.vue_rollup-plugin-vue=script.js';
+import script from './translate-from-right.vue_rollup-plugin-vue_script.vue.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import __vue_create_injector__ from 'vue-runtime-helpers/dist/inject-style/browser.mjs';
 
 /* script */
-var __vue_script__ = script;
+const __vue_script__ = script;
 
 /* template */
 var __vue_render__ = function () {
@@ -24,24 +24,24 @@ var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
 
   /* style */
-  var __vue_inject_styles__ = function (inject) {
-    if (!inject) { return }
+  const __vue_inject_styles__ = function (inject) {
+    if (!inject) return
     inject("data-v-d9420f60_0", { source: ".x-translate-from-right--enter-active[data-v-d9420f60], .x-translate-from-right--leave-active[data-v-d9420f60] {\n  transition: transform 0.3s ease-out;\n}\n.x-translate-from-right--leave-to[data-v-d9420f60], .x-translate-from-right--enter[data-v-d9420f60] {\n  transform: translateX(100%);\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-d9420f60";
+  const __vue_scope_id__ = "data-v-d9420f60";
   /* module identifier */
-  var __vue_module_identifier__ = undefined;
+  const __vue_module_identifier__ = undefined;
   /* functional template */
-  var __vue_is_functional_template__ = false;
+  const __vue_is_functional_template__ = false;
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  var __vue_component__ = /*#__PURE__*/__vue_normalize__(
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
     { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
     __vue_inject_styles__,
     __vue_script__,
@@ -54,5 +54,5 @@ __vue_render__._withStripped = true;
     undefined
   );
 
-export default __vue_component__;
+export { __vue_component__ as default };
 //# sourceMappingURL=translate-from-right.vue.js.map

package/js/components/animations/translate-from-right.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"translate-from-right.vue.js","sources":["../../../../src/components/animations/translate-from-right.vue"],"sourcesContent":["<template>\n  <transition v-on=\"$listeners\" appear name=\"x-translate-from-right-\">\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n\n  /**\n   * Renders a transition wrapping the element passed in the default slot and moving it to its\n   * desired position.\n   *\n   * @public\n   */\n  @Component\n  export default class TranslateFromRight extends Vue {}\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-translate-from-right {\n    &--enter-active,\n    &--leave-active {\n      transition: transform 0.3s ease-out;\n    }\n\n    &--leave-to,\n    &--enter {\n      transform: translateX(100%);\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Example\n\nThe `TranslateFromRight` component is intended to be used as animation to wrap an element with v-if\nor v-show and animate it. The animation translates the item from/to right 100%.\n\nUsed wrapping a component:\n\n```vue\n<TranslateFromRight>\n  <ComponentOrElement v-if=\"open\"/>\n</TranslateFromRight>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"translate-from-right.vue.js","sources":["../../../../src/components/animations/translate-from-right.vue"],"sourcesContent":["<template>\n  <transition v-on=\"$listeners\" appear name=\"x-translate-from-right-\">\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n\n  /**\n   * Renders a transition wrapping the element passed in the default slot and moving it to its\n   * desired position.\n   *\n   * @public\n   */\n  @Component\n  export default class TranslateFromRight extends Vue {}\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-translate-from-right {\n    &--enter-active,\n    &--leave-active {\n      transition: transform 0.3s ease-out;\n    }\n\n    &--leave-to,\n    &--enter {\n      transform: translateX(100%);\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Example\n\nThe `TranslateFromRight` component is intended to be used as animation to wrap an element with v-if\nor v-show and animate it. The animation translates the item from/to right 100%.\n\nUsed wrapping a component:\n\n```vue\n<TranslateFromRight>\n  <ComponentOrElement v-if=\"open\"/>\n</TranslateFromRight>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/animations/translate-from-right.vue_rollup-plugin-vue_script.vue.js

@@ -0,0 +1,19 @@
+import { __decorate } from 'tslib';
+import Vue from 'vue';
+import { Component } from 'vue-property-decorator';
+
+/**
+ * Renders a transition wrapping the element passed in the default slot and moving it to its
+ * desired position.
+ *
+ * @public
+ */
+let TranslateFromRight = class TranslateFromRight extends Vue {
+};
+TranslateFromRight = __decorate([
+    Component
+], TranslateFromRight);
+var script = TranslateFromRight;
+
+export { script as default };
+//# sourceMappingURL=translate-from-right.vue_rollup-plugin-vue_script.vue.js.map

package/js/components/animations/translate-from-right.vue_rollup-plugin-vue_script.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"translate-from-right.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/animations/translate-from-right.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component } from 'vue-property-decorator';\n\n/**\n * Renders a transition wrapping the element passed in the default slot and moving it to its\n * desired position.\n *\n * @public\n */\n@Component\nexport default class TranslateFromRight extends Vue {}\n"],"names":[],"mappings":";;;;AAWA;;;;;;AAOA,IAAqB,kBAAkB,GAAvC,MAAqB,kBAAmB,SAAQ,GAAG;CAAG,CAAA;AAAjC,kBAAkB;IADtC,SAAS;GACW,kBAAkB,CAAe;aAAjC,kBAAkB;;;;"}

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

@@ -1,9 +1,9 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-import __vue_create_injector__ from 'vue-runtime-helpers/dist/inject-style/browser.js';
-import script from './auto-progress-bar.vue_rollup-plugin-vue=script.js';
+import script from './auto-progress-bar.vue_rollup-plugin-vue_script.vue.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import __vue_create_injector__ from 'vue-runtime-helpers/dist/inject-style/browser.mjs';
 
 /* script */
-var __vue_script__ = script;
+const __vue_script__ = script;
 
 /* template */
 var __vue_render__ = function () {
@@ -22,7 +22,8 @@ var __vue_render__ = function () {
             staticClass: "x-progress-bar__line",
             style: _vm.cssStyles,
             attrs: { "data-test": "progress-bar-line" },
-          }) ]
+          }),
+        ]
       )
     : _vm._e()
 };
@@ -30,24 +31,24 @@ var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
 
   /* style */
-  var __vue_inject_styles__ = function (inject) {
-    if (!inject) { return }
+  const __vue_inject_styles__ = function (inject) {
+    if (!inject) return
     inject("data-v-f6d80cba_0", { source: ".x-progress-bar {\n  display: inline-block;\n  overflow: hidden;\n  background-color: var(--x-color-background-progress-bar-default, #b3b3b3);\n  border-radius: var(--x-size-border-radius-progress-bar-default, 24px);\n}\n.x-progress-bar__line {\n  height: var(--x-size-height-progress-bar-line-default, 4px);\n  width: var(--x-size-width-progress-bar-line-default, 272px);\n  background-color: var(--x-color-background-progress-bar-line-default, #1a1a1a);\n  border-radius: var(--x-size-border-radius-progress-bar-default, 24px);\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}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = undefined;
+  const __vue_scope_id__ = undefined;
   /* module identifier */
-  var __vue_module_identifier__ = undefined;
+  const __vue_module_identifier__ = undefined;
   /* functional template */
-  var __vue_is_functional_template__ = false;
+  const __vue_is_functional_template__ = false;
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  var __vue_component__ = /*#__PURE__*/__vue_normalize__(
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
     { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
     __vue_inject_styles__,
     __vue_script__,
@@ -60,5 +61,5 @@ __vue_render__._withStripped = true;
     undefined
   );
 
-export default __vue_component__;
+export { __vue_component__ 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__line\" :style=\"cssStyles\" data-test=\"progress-bar-line\"></div>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n\n  /**\n   * An auto progress bar component.\n   *\n   * @public\n   */\n  @Component\n  export default class AutoProgressBar extends Vue {\n    /**\n     * A boolean flag indicating if the bar is loading.\n     *\n     * @public\n     */\n    @Prop({ default: true })\n    public isLoading!: boolean;\n\n    /**\n     * The duration in seconds of the progress bar.\n     *\n     * @public\n     */\n    @Prop({ default: 5 })\n    public durationInSeconds!: number;\n\n    /**\n     * Computed property to calculate the animation's duration.\n     *\n     * @returns The CSS styles of the animation.\n     *\n     * @internal\n     */\n    protected get cssStyles(): Partial<CSSStyleDeclaration> {\n      return { animationDuration: `${this.durationInSeconds}s` };\n    }\n  }\n</script>\n\n<style lang=\"scss\">\n  .x-progress-bar {\n    display: inline-block;\n    overflow: hidden;\n    background-color: var(--x-color-background-progress-bar-default, #b3b3b3);\n    border-radius: var(--x-size-border-radius-progress-bar-default, 24px);\n\n    &__line {\n      height: var(--x-size-height-progress-bar-line-default, 4px);\n      width: var(--x-size-width-progress-bar-line-default, 272px);\n      background-color: var(--x-color-background-progress-bar-line-default, #1a1a1a);\n      border-radius: var(--x-size-border-radius-progress-bar-default, 24px);\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## See it in action\n\nHere you have a basic example of how the auto progress bar is rendered.\n\n```vue\n<template>\n  <AutoProgressBar :isLoading=\"isLoading\" :durationInSeconds=\"delayInSeconds\" />\n</template>\n\n<script>\n  export default {\n    name: 'AutoProgressBarDemo',\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\n<template>\n  <AutoProgressBar :durationInSeconds=\"5\" :isLoading=\"true\" />\n</template>\n\n<script>\n  export default {\n    name: 'AutoProgressBarDemo'\n  };\n</script>\n```\n\n## Events\n\nThis component emits the following events:\n\n- `UserClickedARedirection` after the user clicks the redirection button.\n- `UserClickedAbortARedirection` after the user clicks the abort redirection button.\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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__line\" :style=\"cssStyles\" data-test=\"progress-bar-line\"></div>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n\n  /**\n   * An auto progress bar component.\n   *\n   * @public\n   */\n  @Component\n  export default class AutoProgressBar extends Vue {\n    /**\n     * A boolean flag indicating if the bar is loading.\n     *\n     * @public\n     */\n    @Prop({ default: true })\n    public isLoading!: boolean;\n\n    /**\n     * The duration in seconds of the progress bar.\n     *\n     * @public\n     */\n    @Prop({ default: 5 })\n    public durationInSeconds!: number;\n\n    /**\n     * Computed property to calculate the animation's duration.\n     *\n     * @returns The CSS styles of the animation.\n     *\n     * @internal\n     */\n    protected get cssStyles(): Partial<CSSStyleDeclaration> {\n      return { animationDuration: `${this.durationInSeconds}s` };\n    }\n  }\n</script>\n\n<style lang=\"scss\">\n  .x-progress-bar {\n    display: inline-block;\n    overflow: hidden;\n    background-color: var(--x-color-background-progress-bar-default, #b3b3b3);\n    border-radius: var(--x-size-border-radius-progress-bar-default, 24px);\n\n    &__line {\n      height: var(--x-size-height-progress-bar-line-default, 4px);\n      width: var(--x-size-width-progress-bar-line-default, 272px);\n      background-color: var(--x-color-background-progress-bar-line-default, #1a1a1a);\n      border-radius: var(--x-size-border-radius-progress-bar-default, 24px);\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## See it in action\n\nHere you have a basic example of how the auto progress bar is rendered.\n\n```vue\n<template>\n  <AutoProgressBar :isLoading=\"isLoading\" :durationInSeconds=\"delayInSeconds\" />\n</template>\n\n<script>\n  export default {\n    name: 'AutoProgressBarDemo',\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\n<template>\n  <AutoProgressBar :durationInSeconds=\"5\" :isLoading=\"true\" />\n</template>\n\n<script>\n  export default {\n    name: 'AutoProgressBarDemo'\n  };\n</script>\n```\n\n## Events\n\nThis component emits the following events:\n\n- `UserClickedARedirection` after the user clicks the redirection button.\n- `UserClickedAbortARedirection` after the user clicks the abort redirection button.\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}