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

package/js/components/animations/staggering-transition-group.vue2.js

@@ -1,318 +0,0 @@
-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.vue2.js.map

package/js/components/animations/staggering-transition-group.vue2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"staggering-transition-group.vue2.js","sources":["../../../../src/components/animations/staggering-transition-group.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n  import Vue, { CreateElement, VNode } from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { 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\n  export default class StaggeringTransitionGroup extends Vue {\n    /**\n     * The name of the transition. Used to generate the CSS classes.\n     *\n     * @public\n     */\n    @Prop({ default: 'v' })\n    public name!: string;\n\n    /**\n     * The CSS move class name.\n     *\n     * @public\n     */\n    @Prop()\n    public moveClass!: string;\n\n    /**\n     * The tag of the node to render to the DOM.\n     *\n     * @public\n     */\n    @Prop({ default: 'div' })\n    public tag!: string;\n\n    /**\n     * The time in ms to stagger each item.\n     *\n     * @public\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    /**\n     * The list of old virtual nodes, generated by the previous called render method.\n     *\n     * @internal\n     */\n    protected oldChildren!: TransitionVNode[];\n    /**\n     * The list of new virtual nodes, generated by the last called render method.\n     *\n     * @internal\n     */\n    protected newChildren!: TransitionVNode[];\n    /**\n     * A map containing the previous positions relative to the container, for each item\n     * rendered inside the slot of this component.\n     * This is used together with the `newPositions` to calculate the move transition.\n     *\n     * @internal\n     */\n    protected oldPositions!: WeakMap<Element, Bounds>;\n    /**\n     * A map containing the new positions relative to the container, for each item\n     * rendered inside the slot of this component.\n     * This is used together with the `newPositions` to calculate the move transition.\n     *\n     * @internal\n     */\n    protected newPositions!: WeakMap<Element, Bounds>;\n    /**\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     */\n    protected pendingCleanupMoveCallbacks!: WeakMap<Element, () => void>;\n    /**\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     */\n    protected staggerCounter!: number;\n    /**\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     */\n    protected wrapperBounds!: DOMRect;\n\n    beforeCreate(): void {\n      // Initialize properties here to avoid making them reactive, 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   */\n  interface 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   */\n  interface 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} data props and events.\n   */\n  interface 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   */\n  type TransitionHook = (element: HTMLElement) => void;\n\n  /**\n   * Represents the dimensions and positions of an element.\n   */\n  interface Bounds {\n    top: number;\n    left: number;\n    width: number;\n    height: number;\n  }\n"],"names":[],"mappings":";;;;;;AAKE;AACA;;;;;AAKG;AAEY,IAAM,yBAAyB,GAA/B,MAAM,yBAA0B,SAAQ,GAAG,CAAA;AAiCxD;;;;;AAKG;AACH,IAAA,IAAc,aAAa,GAAA;QACzB,OAAO,IAAI,CAAC,SAAS,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA,KAAA,CAAO,CAAC;KAC9C;AAED;;;;;;;;;;;AAWG;AACH,IAAA,IAAc,cAAc,GAAA;AAC1B,QAAA,MAAM,cAAc,GAAmB,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAE9F,cAAc,CAAC,WAAW,GAAG,IAAI,CAAC,sBAAsB,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;QACrF,cAAc,CAAC,UAAU,GAAG,IAAI,CAAC,sBAAsB,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;QACnF,cAAc,CAAC,UAAU,GAAG,IAAI,CAAC,sBAAsB,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;AAEnF,QAAA,OAAO,cAAc,CAAC;KACvB;IAoDD,YAAY,GAAA;;AAEV,QAAA,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;AACtB,QAAA,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;AACtB,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI,OAAO,EAAE,CAAC;AAClC,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI,OAAO,EAAE,CAAC;AAClC,QAAA,IAAI,CAAC,2BAA2B,GAAG,IAAI,OAAO,EAAuB,CAAC;AACtE,QAAA,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC;KACzB;AAED,IAAA,MAAM,CAAC,aAA4B,EAAA;AACjC,QAAA,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC;;AAExB,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;;AAEpC,QAAA,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE,EAAE,MAAM,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;;QAGnF,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACjD,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;AAE5C,QAAA,OAAO,aAAa,CAClB,IAAI,CAAC,GAAG,EACR,EAAE,WAAW,EAAE,+BAA+B,EAAE,EAChD,IAAI,CAAC,WAAW,CACjB,CAAC;KACH;IAED,OAAO,GAAA;QACL,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KAC7C;IAED,YAAY,GAAA;QACV,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,qBAAqB,EAAE,CAAC;KACvD;IAED,OAAO,GAAA;QACL,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,qBAAqB,EAAE,CAAC;QACtD,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;AACjD,QAAA,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC,wBAAwB,EAAE,CAAC;AAEtF,QAAA,YAAY,CAAC,OAAO,CAAC,KAAK,IAAG;AAC3B,YAAA,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;AACzB,YAAA,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC;AACpC,SAAC,CAAC,CAAC;QACH,MAAM,aAAa,GAAG,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACjE,MAAM,YAAY,GAAG,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;AACpE,QAAA,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;;AAGzC,QAAA,QAAQ,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAEtC,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,kBAAkB,CAAC,YAAY,CAAC,CAAC,CAAC;KAC9D;AAED;;;;;;;;AAQG;IACO,sBAAsB,CAAC,iBAAiC,IAAI,EAAA;QACpE,OAAO,OAAO,IAAG;AACf,YAAA,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,OAAO,CAAE,CAAC;AACrE,YAAA,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;AACnE,YAAA,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC;AAC5B,YAAA,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;YAC5B,KAAK,CAAC,GAAG,GAAG,CAAG,EAAA,GAAG,GAAG,UAAU,CAAC,SAAS,CAAC,CAAA,EAAA,CAAI,CAAC;YAC/C,KAAK,CAAC,IAAI,GAAG,CAAG,EAAA,IAAI,GAAG,UAAU,CAAC,UAAU,CAAC,CAAA,EAAA,CAAI,CAAC;AAClD,YAAA,KAAK,CAAC,KAAK,GAAG,CAAG,EAAA,KAAK,IAAI,CAAC;AAC3B,YAAA,KAAK,CAAC,MAAM,GAAG,CAAG,EAAA,MAAM,IAAI,CAAC;AAC7B,YAAA,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;AAClC,YAAA,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YAClC,MAAM,eAAe,GAAG,IAAI,CAAC,2BAA2B,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;YACtE,eAAe,IAAI,CAAC;YACpB,cAAc,CAAC,OAAO,CAAC,CAAC;AAC1B,SAAC,CAAC;KACH;AAED;;;;;;AAMG;IACO,sBAAsB,CAAC,iBAAiC,IAAI,EAAA;QACpE,OAAO,OAAO,IAAG;AACf,YAAA,OAAO,CAAC,KAAK,CAAC,eAAe,GAAG,EAAE,CAAC;YACnC,cAAc,CAAC,OAAO,CAAC,CAAC;AAC1B,SAAC,CAAC;KACH;AAED;;;;;;;AAOG;AACO,IAAA,sBAAsB,CAAC,KAAY,EAAA;;QAE3C,OAAO,CAAC,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC;KACnC;AAED;;;;;AAKG;AACO,IAAA,iBAAiB,CAAC,KAAsB,EAAA;AAChD,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;AACf,YAAA,KAAK,CAAC,IAAI,GAAG,EAAE,CAAC;AACjB,SAAA;QACD,KAAK,CAAC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC;KAC7C;AAED;;;;;;;;AAQG;AACO,IAAA,YAAY,CAAC,KAAsB,EAAA;;;QAG3C,KAAK,CAAC,IAAK,CAAC,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC;AAC7C,QAAA,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;KAC/B;AAED;;;;;AAKG;AACO,IAAA,iBAAiB,CAAC,KAAsB,EAAA;AAChD,QAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC,CAAC;KACpE;AAED;;;;;AAKG;AACO,IAAA,iBAAiB,CAAC,KAAsB,EAAA;AAChD,QAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC,CAAC;KACpE;AAED;;;;;;AAMG;AACO,IAAA,oBAAoB,CAAC,KAAsB,EAAA;AACnD,QAAA,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,GAAG,CAAC,qBAAqB,EAAE,CAAC;AACvE,QAAA,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,aAAa,CAAC;QAClE,OAAO;YACL,IAAI,EAAE,IAAI,GAAG,WAAW;YACxB,GAAG,EAAE,GAAG,GAAG,UAAU;YACrB,KAAK;YACL,MAAM;SACP,CAAC;KACH;AAED;;;;;;;;;;;AAWG;IACO,wBAAwB,GAAA;QAChC,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;QAClF,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;QAClF,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;QAChF,OAAO;AACL,YAAA,YAAY,EAAE,KAAK;AACnB,YAAA,aAAa,EAAE,KAAK;AACpB,YAAA,YAAY,EAAE,IAAI;SACnB,CAAC;KACH;AAED;;;;;AAKG;AACO,IAAA,YAAY,CAAC,KAAsB,EAAA;QAC3C,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,eAAe,GAAG,IAAI,CAAC,sBAAsB,EAAE,CAAC;KACjE;AAED;;;;;;;;AAQG;AACO,IAAA,qBAAqB,CAAC,KAAsB,EAAA;QACpD,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,aAAa,GAAG,MAAM,CAAC;KACxC;AAED;;;;;;AAMG;IACO,sBAAsB,GAAA;QAC9B,OAAO,CAAA,EAAG,IAAI,CAAC,cAAc,EAAE,GAAG,IAAI,CAAC,UAAU,CAAA,EAAA,CAAI,CAAC;KACvD;AAED;;;;;;;AAOG;AACO,IAAA,gBAAgB,CAAC,KAAsB,EAAA;AAC/C,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,GAAc,CAAE,CAAC;AACjE,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,GAAc,CAAE,CAAC;QACjE,MAAM,EAAE,GAAG,WAAW,CAAC,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC;QAC/C,MAAM,EAAE,GAAG,WAAW,CAAC,GAAG,GAAG,WAAW,CAAC,GAAG,CAAC;AAC7C,QAAA,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE;AACxB,YAAA,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC;YAC9B,KAAK,CAAC,SAAS,GAAG,CAAA,YAAA,EAAe,EAAE,CAAM,GAAA,EAAA,EAAE,OAAO,CAAC;AACnD,YAAA,KAAK,CAAC,kBAAkB,GAAG,IAAI,CAAC;AAChC,YAAA,OAAO,IAAI,CAAC;AACb,SAAA;AACD,QAAA,OAAO,KAAK,CAAC;KACd;AAED;;;;;;;;AAQG;AACO,IAAA,kBAAkB,CAC1B,WAAqB,EAAA;AAErB,QAAA,OAAO,CAAC,KAAK,EAAE,KAAK,KAAI;AACtB,YAAA,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC;AAC1B,YAAA,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC;YAC5B,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YAC1C,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,kBAAkB,GAAG,EAAE,CAAC;AAChD,YAAA,KAAK,CAAC,eAAe,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,YAAA,MAAM,mBAAmB,GAAG,CAAC,KAAuB,KAAU;AAC5D,gBAAA,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,MAAM,KAAK,OAAO,IAAI,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,EAAE;AACjF,oBAAA,OAAO,CAAC,mBAAmB,CAAC,eAAe,EAAE,mBAAmB,CAAC,CAAC;AAClE,oBAAA,OAAO,CAAC,KAAK,CAAC,eAAe,GAAG,EAAE,CAAC;oBACnC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;AAC7C,oBAAA,IAAI,CAAC,2BAA2B,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;AAClD,iBAAA;AACH,aAAC,CAAC;YACF,IAAI,CAAC,2BAA2B,CAAC,GAAG,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAC;AACnE,YAAA,OAAO,CAAC,gBAAgB,CAAC,eAAe,EAAE,mBAAmB,CAAC,CAAC;AACjE,SAAC,CAAC;KACH;CACF,CAAA;AAzYC,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC;AACF,CAAA,EAAA,yBAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQrB,UAAA,CAAA;AADC,IAAA,IAAI,EAAE;AACmB,CAAA,EAAA,yBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQ1B,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;AACL,CAAA,EAAA,yBAAA,CAAA,SAAA,EAAA,KAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQpB,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;AACK,CAAA,EAAA,yBAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AA/BR,yBAAyB,GAAA,UAAA,CAAA;IAD7C,SAAS;AACW,CAAA,EAAA,yBAAyB,CAgZ7C,CAAA;aAhZoB,yBAAyB;;;;"}

package/js/components/animations/staggering-transition-group.vue3.js

@@ -1,16 +0,0 @@
-import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
-
-var css = ".x-staggering-transition-group[data-v-61b49289] {\n  position: relative;\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/staggering-transition-group.vue?rollup-plugin-vue=styles.0.css',{source:css});
-
-export { css, css as default };
-//# sourceMappingURL=staggering-transition-group.vue3.js.map

package/js/components/animations/staggering-transition-group.vue3.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"staggering-transition-group.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/js/components/decorators/bus.decorators.js

@@ -1,112 +0,0 @@
-import { Subscription } from 'rxjs';
-import { filter } from 'rxjs/operators';
-import { createDecorator } from 'vue-class-component';
-import { clone } from '../../utils/clone.js';
-
-/**
- * Creates a subscription to an {@link XEvent}, an array of {@link XEvent} or a component property (
- * reacting to its changes via a watcher) filtering out the passed metadata, if any, and
- * un-subscribes on the beforeDestroy hook.
- *
- * @remarks
- * The decorated property needs to be public for type inference to work.
- *
- * @param xEvent - The {@link XEvent}, an array of {@link XEvent} or a component property.
- * @param metadataFilteringOptions - The {@link WireMetadata} options to filter out a callback
- * execution.
- * @returns Decorator that creates a subscription to an {@link XEvent} and un-subscribes on the
- * beforeDestroy hook.
- * @public
- */
-function XOn(xEvent, metadataFilteringOptions = {}) {
-    return createDecorator((options, key) => {
-        // eslint-disable-next-line @typescript-eslint/unbound-method
-        const originalCreated = options.created;
-        Object.assign(options, {
-            created() {
-                originalCreated?.apply(this);
-                const componentCreateSubscription = createSubscription.bind(this);
-                const subscriptionMetadata = {
-                    event: [],
-                    callback: this[key],
-                    metadataFilteringOptions
-                };
-                let subscription;
-                if (typeof xEvent === 'function') {
-                    this.$watch(() => xEvent(this), newEvents => {
-                        subscription?.unsubscribe();
-                        subscriptionMetadata.event = newEvents;
-                        subscription = componentCreateSubscription(subscriptionMetadata);
-                    }, { immediate: true });
-                }
-                else {
-                    subscriptionMetadata.event = xEvent;
-                    subscription = componentCreateSubscription(subscriptionMetadata);
-                }
-                this.$on('hook:beforeDestroy', () => subscription.unsubscribe()); // Using Vue
-                // bus to subscribe to the lifecycle hook 'beforeDestroy' instead of 'capturing' the
-                // original component's 'beforeDestroy' method to override it plus calling
-                // originalBeforeDestroy.apply(this) to preserve the existing original hook functionality
-            }
-        });
-    });
-}
-/**
- * Create a subscription for the given events executing the passed callback and filtering out based
- * on the passed metadata options.
- *
- * @param this - The vue component.
- * @param subscriptionMetadata - The {@link SubscriptionMetadata}.
- * @returns A
- * {@link https://www.learnrxjs.io/learn-rxjs/concepts/rxjs-primer#subscription | subscription}.
- * @internal
- */
-function createSubscription(subscriptionMetadata) {
-    const { event, callback, metadataFilteringOptions } = subscriptionMetadata;
-    const eventArray = Array.isArray(event) ? event : [event];
-    const subscription = new Subscription();
-    eventArray.forEach(xEvent => {
-        subscription.add(this.$x.on(xEvent, true)
-            .pipe(filter(({ metadata }) => filterMetadataOptions(metadataFilteringOptions, metadata)))
-            .subscribe(({ eventPayload, metadata }) => callback(eventPayload, metadata)));
-    });
-    return subscription;
-}
-/**
- * Checks if the metadata options passed to the decorator match the metadata of the emitted event.
- *
- * @param filteringOptions - The decorator options.
- * @param eventOptions - The emitted event metadata.
- * @returns True if options are empty or match the metadata.
- * @internal
- */
-function filterMetadataOptions(filteringOptions, eventOptions) {
-    return Object.keys(filteringOptions)
-        .filter(key => filteringOptions[key] !== undefined)
-        .every(key => filteringOptions[key] === eventOptions[key]);
-}
-/**
- * Emits the provided event whenever the decorated property changes.
- *
- * @param xEvent - The event to emit.
- * @param watcherOptions - Options for Vue's watcher.
- * @returns Decorator that makes the component emit an event when the decorated property changes.
- * @public
- */
-function XEmit(xEvent, { immediate = true, deep = false } = {}) {
-    return createDecorator((options, key) => {
-        // eslint-disable-next-line @typescript-eslint/unbound-method
-        const originalCreated = options.created;
-        options.created = function () {
-            originalCreated?.apply(this);
-            if (this[key] !== undefined) {
-                this.$watch(key, newValue => {
-                    this.$x.emit(xEvent, typeof newValue === 'object' && newValue !== null ? clone(newValue) : newValue);
-                }, { immediate, deep });
-            }
-        };
-    });
-}
-
-export { XEmit, XOn };
-//# sourceMappingURL=bus.decorators.js.map

package/js/components/decorators/bus.decorators.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"bus.decorators.js","sources":["../../../../src/components/decorators/bus.decorators.ts"],"sourcesContent":["import { AnyFunction } from '@empathyco/x-utils';\nimport { Observable, Subscription } from 'rxjs';\nimport { filter } from 'rxjs/operators';\nimport Vue, { WatchOptions } from 'vue';\nimport { createDecorator } from 'vue-class-component';\nimport { EventPayload, SubjectPayload } from '@empathyco/x-bus';\nimport { clone } from '../../utils/clone';\nimport { DecoratorFor } from '../../utils/types';\nimport { XEvent, XEventPayload, XEventsTypes } from '../../wiring/events.types';\nimport { WireMetadata } from '../../wiring/wiring.types';\n\n/**\n * Creates a subscription to an {@link XEvent}, an array of {@link XEvent} or a component property (\n * reacting to its changes via a watcher) filtering out the passed metadata, if any, and\n * un-subscribes on the beforeDestroy hook.\n *\n * @remarks\n * The decorated property needs to be public for type inference to work.\n *\n * @param xEvent - The {@link XEvent}, an array of {@link XEvent} or a component property.\n * @param metadataFilteringOptions - The {@link WireMetadata} options to filter out a callback\n * execution.\n * @returns Decorator that creates a subscription to an {@link XEvent} and un-subscribes on the\n * beforeDestroy hook.\n * @public\n */\nexport function XOn<Event extends XEvent>(\n  xEvent: Event | Event[] | ((component: Vue) => Event | Event[]),\n  metadataFilteringOptions: Partial<WireMetadata> = {}\n): DecoratorFor<(payload: XEventPayload<Event>, metadata: WireMetadata) => void> {\n  return createDecorator((options, key) => {\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const originalCreated = options.created;\n    Object.assign(options, {\n      created(this: Vue) {\n        originalCreated?.apply(this);\n        const componentCreateSubscription = createSubscription.bind(this);\n        const subscriptionMetadata: SubscriptionMetadata<Event> = {\n          event: [],\n          callback: (this as any)[key], // `this` isn't correctly typed here\n          metadataFilteringOptions\n        };\n\n        let subscription: Subscription;\n        if (typeof xEvent === 'function') {\n          this.$watch(\n            () => xEvent(this),\n            newEvents => {\n              subscription?.unsubscribe();\n              subscriptionMetadata.event = newEvents;\n              subscription = componentCreateSubscription(subscriptionMetadata);\n            },\n            { immediate: true }\n          );\n        } else {\n          subscriptionMetadata.event = xEvent;\n          subscription = componentCreateSubscription(subscriptionMetadata);\n        }\n\n        this.$on('hook:beforeDestroy', () => subscription.unsubscribe()); // Using Vue\n        // bus to subscribe to the lifecycle hook 'beforeDestroy' instead of 'capturing' the\n        // original component's 'beforeDestroy' method to override it plus calling\n        // originalBeforeDestroy.apply(this) to preserve the existing original hook functionality\n      }\n    });\n  });\n}\n\n/**\n * Create a subscription for the given events executing the passed callback and filtering out based\n * on the passed metadata options.\n *\n * @param this - The vue component.\n * @param subscriptionMetadata - The {@link SubscriptionMetadata}.\n * @returns A\n * {@link https://www.learnrxjs.io/learn-rxjs/concepts/rxjs-primer#subscription | subscription}.\n * @internal\n */\nfunction createSubscription<Event extends XEvent>(\n  this: Vue,\n  subscriptionMetadata: SubscriptionMetadata<Event>\n): Subscription {\n  const { event, callback, metadataFilteringOptions } = subscriptionMetadata;\n  const eventArray = Array.isArray(event) ? event : [event];\n  const subscription = new Subscription();\n  eventArray.forEach(xEvent => {\n    subscription.add(\n      (\n        this.$x.on(xEvent, true) as unknown as Observable<\n          SubjectPayload<EventPayload<XEventsTypes, Event>, WireMetadata>\n        >\n      )\n        .pipe(filter(({ metadata }) => filterMetadataOptions(metadataFilteringOptions, metadata)))\n        .subscribe(({ eventPayload, metadata }) => callback(eventPayload, metadata))\n    );\n  });\n  return subscription;\n}\n\n/**\n * Checks if the metadata options passed to the decorator match the metadata of the emitted event.\n *\n * @param filteringOptions - The decorator options.\n * @param eventOptions - The emitted event metadata.\n * @returns True if options are empty or match the metadata.\n * @internal\n */\nfunction filterMetadataOptions<WireMetadataKey extends keyof WireMetadata>(\n  filteringOptions: Partial<WireMetadata>,\n  eventOptions: WireMetadata\n): boolean {\n  return (Object.keys(filteringOptions) as WireMetadataKey[])\n    .filter(key => filteringOptions[key] !== undefined)\n    .every(key => filteringOptions[key] === eventOptions[key]);\n}\n\n/**\n * The subscription metadata containing an/a list of {@link XEvent}, the callback function to\n * execute and the metadataOptions to filter out the execution of the callback.\n *\n * @internal\n */\ninterface SubscriptionMetadata<Event extends XEvent> {\n  /**\n   * An {@link XEvent} or a list of them.\n   */\n  event: Event | Event[];\n  /**\n   * A callback function to execute in the subscription.\n   */\n  callback: AnyFunction;\n  /**\n   * The metadataFilteringOptions to filter out the execution of the callback.\n   */\n  metadataFilteringOptions: Partial<WireMetadata>;\n}\n\n/**\n * Emits the provided event whenever the decorated property changes.\n *\n * @param xEvent - The event to emit.\n * @param watcherOptions - Options for Vue's watcher.\n * @returns Decorator that makes the component emit an event when the decorated property changes.\n * @public\n */\nexport function XEmit<Event extends XEvent>(\n  xEvent: Event,\n  { immediate = true, deep = false }: WatchOptions = {}\n): DecoratorFor<XEventPayload<Event> | undefined> {\n  return createDecorator((options, key) => {\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const originalCreated = options.created;\n    options.created = function (this: Vue) {\n      originalCreated?.apply(this);\n      if ((this as any)[key] !== undefined) {\n        this.$watch(\n          key,\n          newValue => {\n            this.$x.emit(\n              xEvent,\n              typeof newValue === 'object' && newValue !== null ? clone(newValue) : newValue\n            );\n          },\n          { immediate, deep }\n        );\n      }\n    };\n  });\n}\n"],"names":[],"mappings":"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"}

package/js/components/decorators/debounce.decorators.js

@@ -1,35 +0,0 @@
-import { createDecorator } from 'vue-class-component';
-import { debounce } from '../../utils/debounce.js';
-
-/**
- * Adds debounce to the method that the decorator is applied to.
- *
- * @remarks Pending debounced execution is cancelled when the component is destroyed.
- *
- * @param debounceTimeInMs - The time of debounce in ms.
- * @param debounceOptions - The options for the debounce strategy.
- *
- * @returns Decorator that applies debounce.
- *
- * @public
- */
-function Debounce(debounceTimeInMs, debounceOptions = {}) {
-    return createDecorator((options, key) => {
-        const originalMethod = options.methods[key];
-        const debouncedMethod = debounce((context, args) => originalMethod.call(context, ...args), debounceTimeInMs, debounceOptions);
-        options.methods[key] = function debouncedWrapper(...args) {
-            debouncedMethod(this, args);
-        };
-        // eslint-disable-next-line @typescript-eslint/unbound-method
-        const originalBeforeDestroy = options.beforeDestroy;
-        Object.assign(options, {
-            beforeDestroy() {
-                originalBeforeDestroy?.apply(this);
-                debouncedMethod.cancel();
-            }
-        });
-    });
-}
-
-export { Debounce };
-//# sourceMappingURL=debounce.decorators.js.map

package/js/components/decorators/debounce.decorators.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"debounce.decorators.js","sources":["../../../../src/components/decorators/debounce.decorators.ts"],"sourcesContent":["import { AnyFunction } from '@empathyco/x-utils';\nimport { createDecorator } from 'vue-class-component';\nimport { debounce } from '../../utils/debounce';\nimport { DebounceOptions, DecoratorFor } from '../../utils/types';\n\n/**\n * Adds debounce to the method that the decorator is applied to.\n *\n * @remarks Pending debounced execution is cancelled when the component is destroyed.\n *\n * @param debounceTimeInMs - The time of debounce in ms.\n * @param debounceOptions - The options for the debounce strategy.\n *\n * @returns Decorator that applies debounce.\n *\n * @public\n */\nexport function Debounce(\n  debounceTimeInMs: number,\n  debounceOptions: DebounceOptions = {}\n): DecoratorFor<AnyFunction> {\n  return createDecorator((options, key) => {\n    const originalMethod = options.methods![key];\n    const debouncedMethod = debounce(\n      (context: Vue, args: unknown[]) => originalMethod.call(context, ...args),\n      debounceTimeInMs,\n      debounceOptions\n    );\n\n    options.methods![key] = function debouncedWrapper(...args: unknown[]) {\n      debouncedMethod(this, args);\n    };\n\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const originalBeforeDestroy = options.beforeDestroy;\n    Object.assign(options, {\n      beforeDestroy(this: Vue) {\n        originalBeforeDestroy?.apply(this);\n        debouncedMethod.cancel();\n      }\n    });\n  });\n}\n"],"names":[],"mappings":";;;AAKA;;;;;;;;;;;AAWG;SACa,QAAQ,CACtB,gBAAwB,EACxB,kBAAmC,EAAE,EAAA;AAErC,IAAA,OAAO,eAAe,CAAC,CAAC,OAAO,EAAE,GAAG,KAAI;QACtC,MAAM,cAAc,GAAG,OAAO,CAAC,OAAQ,CAAC,GAAG,CAAC,CAAC;QAC7C,MAAM,eAAe,GAAG,QAAQ,CAC9B,CAAC,OAAY,EAAE,IAAe,KAAK,cAAc,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,EACxE,gBAAgB,EAChB,eAAe,CAChB,CAAC;QAEF,OAAO,CAAC,OAAQ,CAAC,GAAG,CAAC,GAAG,SAAS,gBAAgB,CAAC,GAAG,IAAe,EAAA;AAClE,YAAA,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;AAC9B,SAAC,CAAC;;AAGF,QAAA,MAAM,qBAAqB,GAAG,OAAO,CAAC,aAAa,CAAC;AACpD,QAAA,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE;YACrB,aAAa,GAAA;AACX,gBAAA,qBAAqB,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;gBACnC,eAAe,CAAC,MAAM,EAAE,CAAC;aAC1B;AACF,SAAA,CAAC,CAAC;AACL,KAAC,CAAC,CAAC;AACL;;;;"}