@empathyco/x-components 3.0.0-alpha.3 → 3.0.0-alpha.33

package/js/components/staggering-transition-group.vue_rollup-plugin-vue=script.js

@@ -0,0 +1,354 @@
+import { __extends, __assign, __decorate } from 'tslib';
+import Vue from 'vue';
+import { Prop, Component } from 'vue-property-decorator';
+import '../utils/array.js';
+import { noOp } from '../utils/function.js';
+import '../utils/cancellable-promise.js';
+import '../utils/clone.js';
+import '../utils/currency-formatter.js';
+import '../utils/debounce.js';
+import '../utils/filters.js';
+import '../utils/get-url-parameters.js';
+import '../utils/html.js';
+import '../utils/normalize.js';
+import '../utils/number.js';
+import '../utils/object.js';
+import '../utils/origin.js';
+import '../utils/sanitize.js';
+import '../utils/storage.js';
+import '../utils/string.js';
+import '../utils/throttle.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
+ */
+var StaggeringTransitionGroup = /** @class */ (function (_super) {
+    __extends(StaggeringTransitionGroup, _super);
+    function StaggeringTransitionGroup() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(StaggeringTransitionGroup.prototype, "moveClassName", {
+        /**
+         * The CSS class for the moving transitions.
+         *
+         * @returns The move transition name.
+         * @internal
+         */
+        get: function () {
+            var _a;
+            return (_a = this.moveClass) !== null && _a !== void 0 ? _a : this.name + "-move";
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(StaggeringTransitionGroup.prototype, "transitionData", {
+        /**
+         * 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: function () {
+            var transitionData = __assign(__assign(__assign({}, 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;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    StaggeringTransitionGroup.prototype.beforeCreate = function () {
+        /* 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;
+    };
+    StaggeringTransitionGroup.prototype.render = function (createElement) {
+        var _a;
+        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 = ((_a = this.$slots.default) !== null && _a !== void 0 ? _a : []).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);
+    };
+    StaggeringTransitionGroup.prototype.mounted = function () {
+        this.newChildren.forEach(this.applyStagger);
+    };
+    StaggeringTransitionGroup.prototype.beforeUpdate = function () {
+        this.wrapperBounds = this.$el.getBoundingClientRect();
+    };
+    StaggeringTransitionGroup.prototype.updated = function () {
+        var _this = this;
+        this.wrapperBounds = this.$el.getBoundingClientRect();
+        this.newChildren.forEach(this.recordNewPosition);
+        var _a = this.getNodesByTransitionType(), leavingNodes = _a.leavingNodes, stayingNodes = _a.stayingNodes, enteringNodes = _a.enteringNodes;
+        leavingNodes.forEach(function (vNode) {
+            _this.applyStagger(vNode);
+            _this.disableClickingEvents(vNode);
+        });
+        var movedChildren = stayingNodes.filter(this.applyTranslation);
+        var 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
+     */
+    StaggeringTransitionGroup.prototype.addRestorePositionHook = function (transitionHook) {
+        var _this = this;
+        if (transitionHook === void 0) { transitionHook = noOp; }
+        return function (element) {
+            var _a = _this.oldPositions.get(element), top = _a.top, left = _a.left, width = _a.width, height = _a.height;
+            var _b = window.getComputedStyle(element), marginTop = _b.marginTop, marginLeft = _b.marginLeft;
+            var 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);
+            var pendingCallback = _this.pendingCleanupMoveCallbacks.get(element);
+            pendingCallback === null || pendingCallback === void 0 ? void 0 : 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
+     */
+    StaggeringTransitionGroup.prototype.addClearStaggeringCall = function (transitionHook) {
+        if (transitionHook === void 0) { transitionHook = noOp; }
+        return function (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
+     */
+    StaggeringTransitionGroup.prototype.isTransitionValidVNode = function (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
+     */
+    StaggeringTransitionGroup.prototype.addTransitionData = function (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
+     */
+    StaggeringTransitionGroup.prototype.syncOldNodes = function (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
+     */
+    StaggeringTransitionGroup.prototype.recordOldPosition = function (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
+     */
+    StaggeringTransitionGroup.prototype.recordNewPosition = function (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
+     */
+    StaggeringTransitionGroup.prototype.createRelativeBounds = function (vNode) {
+        var _a = vNode.elm.getBoundingClientRect(), left = _a.left, top = _a.top, width = _a.width, height = _a.height;
+        var _b = this.wrapperBounds, wrapperLeft = _b.left, wrapperTop = _b.top;
+        return {
+            left: left - wrapperLeft,
+            top: top - wrapperTop,
+            width: width,
+            height: 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
+     */
+    StaggeringTransitionGroup.prototype.getNodesByTransitionType = function () {
+        var _this = this;
+        var leave = this.oldChildren.filter(function (child) { return !_this.newPositions.has(child.elm); });
+        var enter = this.newChildren.filter(function (child) { return !_this.oldPositions.has(child.elm); });
+        var stay = this.oldChildren.filter(function (child) { return _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
+     */
+    StaggeringTransitionGroup.prototype.applyStagger = function (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
+     */
+    StaggeringTransitionGroup.prototype.disableClickingEvents = function (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
+     */
+    StaggeringTransitionGroup.prototype.getNextTransitionDelay = function () {
+        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
+     */
+    StaggeringTransitionGroup.prototype.applyTranslation = function (vNode) {
+        var oldPosition = this.oldPositions.get(vNode.elm);
+        var newPosition = this.newPositions.get(vNode.elm);
+        var dx = oldPosition.left - newPosition.left;
+        var dy = oldPosition.top - newPosition.top;
+        if (dx !== 0 || dy !== 0) {
+            var 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
+     */
+    StaggeringTransitionGroup.prototype.startMoveAnimation = function (moveStagger) {
+        var _this = this;
+        return function (vNode, index) {
+            var element = vNode.elm;
+            var style = element.style;
+            element.classList.add(_this.moveClassName);
+            style.transform = style.transitionDuration = '';
+            style.transitionDelay = moveStagger[index];
+            var cleanMoveTransition = function (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);
+    return StaggeringTransitionGroup;
+}(Vue));
+
+export default StaggeringTransitionGroup;
+//# sourceMappingURL=staggering-transition-group.vue_rollup-plugin-vue=script.js.map

package/js/components/staggering-transition-group.vue_rollup-plugin-vue=script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"staggering-transition-group.vue_rollup-plugin-vue=script.js","sources":["../../../src/components/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/suggestions/base-suggestion.vue.js

@@ -0,0 +1,69 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+import script from './base-suggestion.vue_rollup-plugin-vue=script.js';
+
+/* script */
+var __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c(
+    "button",
+    {
+      staticClass: "x-suggestion",
+      class: _vm.dynamicCSSClasses,
+      on: { click: _vm.emitEvents },
+    },
+    [
+      _vm._t(
+        "default",
+        function () {
+          return [
+            _c("span", {
+              staticClass: "x-suggestion__query",
+              attrs: { "aria-label": _vm.suggestion.query },
+              domProps: { innerHTML: _vm._s(_vm.queryHTML) },
+            }) ]
+        },
+        null,
+        { suggestion: _vm.suggestion, queryHTML: _vm.queryHTML }
+      ) ],
+    2
+  )
+};
+var __vue_staticRenderFns__ = [];
+__vue_render__._withStripped = true;
+
+  /* style */
+  var __vue_inject_styles__ = undefined;
+  /* scoped */
+  var __vue_scope_id__ = undefined;
+  /* module identifier */
+  var __vue_module_identifier__ = undefined;
+  /* functional template */
+  var __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  var __vue_component__ = /*#__PURE__*/__vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
+//# sourceMappingURL=base-suggestion.vue.js.map

package/js/components/suggestions/base-suggestion.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-suggestion.vue.js","sources":["../../../../src/components/suggestions/base-suggestion.vue"],"sourcesContent":["<template>\n  <button @click=\"emitEvents\" :class=\"dynamicCSSClasses\" class=\"x-suggestion\">\n    <!-- eslint-disable max-len -->\n    <!--\n      @slot Button content\n          @binding {Suggestion} suggestion - Suggestion data\n          @binding {string} queryHTML - Suggestion's query with the matching part inside a `<span>` tag\n    -->\n    <!-- eslint-enable max-len -->\n    <slot v-bind=\"{ suggestion, queryHTML }\">\n      <span v-html=\"queryHTML\" :aria-label=\"suggestion.query\" class=\"x-suggestion__query\" />\n    </slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { Suggestion } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { QueryFeature } from '../../types/origin';\n  import { forEach } from '../../utils/object';\n  import { normalizeString } from '../../utils/normalize';\n  import { sanitize } from '../../utils/sanitize';\n  import { VueCSSClasses } from '../../utils/types';\n  import { XEventsTypes } from '../../wiring/events.types';\n\n  /**\n   * Renders a button with a default slot. It receives a query, which should be the query of the\n   * module using this component, a suggestion, the {@link XEvent | XEvents} that will be emitted\n   * on click with a given feature.\n   *\n   * The default slot receives the suggestion and the matched query has props.\n   *\n   * @public\n   */\n  @Component\n  export default class BaseSuggestion extends Vue {\n    /**\n     * The normalized query of the module using this component.\n     *\n     * @public\n     */\n    @Prop({ default: '' })\n    protected query!: string;\n\n    /**\n     * The suggestion to render and use in the default slot.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected suggestion!: Suggestion;\n\n    /**\n     * The feature from which the events will be emitted.\n     *\n     * @public\n     */\n    @Prop() //TODO: set to true when the suggestions components pass it.\n    protected feature?: QueryFeature;\n\n    /**\n     * The {@link XEvent | XEvents} that will be emitted when selecting a suggestion.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected suggestionSelectedEvents!: Partial<XEventsTypes>;\n\n    /**\n     * The event handler that will be triggered when clicking on a suggestion.\n     *\n     * @remarks\n     * * UserAcceptedAQuery: suggestion.query\n     * * UserSelectedASuggestion: suggestion\n     * * Merges the events defined in the suggestionSelectedEvents prop and also emits them\n     *\n     * @returns The {@link XEvent | XEvents} to emit.\n     * @public\n     */\n    protected get events(): Partial<XEventsTypes> {\n      return {\n        UserAcceptedAQuery: this.suggestion.query,\n        UserSelectedASuggestion: this.suggestion,\n        ...this.suggestionSelectedEvents\n      };\n    }\n\n    /**\n     * Emits the events when the button is clicked.\n     *\n     * @public\n     */\n    protected emitEvents(): void {\n      forEach(this.events, (event, payload) => {\n        this.$x.emit(event, payload, {\n          target: this.$el as HTMLElement,\n          feature: this.feature\n        });\n      });\n    }\n\n    /**\n     * Checks if the normalized suggestion query matches with the module's query so it has a\n     * matching part.\n     *\n     * @returns If the query has a matching part or not.\n     * @internal\n     */\n    protected get hasMatchingQuery(): boolean {\n      return !!this.query && normalizeString(this.suggestion.query).includes(this.query);\n    }\n\n    /**\n     * Generates css classes dynamically.\n     *\n     * @remarks\n     * 'x-suggestion--matching added when the query should be matched.\n     *\n     * @returns The {@link VueCSSClasses} classes.\n     * @public\n     */\n    protected get dynamicCSSClasses(): VueCSSClasses {\n      return {\n        'x-suggestion--matching': this.hasMatchingQuery\n      };\n    }\n\n    /**\n     * Highlights the matching part of the suggestion query with the query passed as prop of the\n     * component putting it inside a `<span>` tag.\n     *\n     * @remarks\n     * The query prop should be normalized.\n     *\n     * @returns The suggestion's query with the matching part inside a `<span>` tag.\n     * @public\n     */\n    protected get queryHTML(): string {\n      if (this.hasMatchingQuery) {\n        const matcherIndex = normalizeString(this.suggestion.query).indexOf(this.query);\n\n        const [beginning, matching, end] = this.splitAt(\n          this.suggestion.query,\n          matcherIndex,\n          this.query.length\n        );\n\n        const attrsMatching = 'data-test=\"matching-part\" class=\"x-suggestion__matching-part\"';\n        return `${beginning}<span ${attrsMatching}>${matching}</span>${end}`;\n      }\n\n      return sanitize(this.suggestion.query);\n    }\n\n    /**\n     * Splits the label in three parts based on two indexes.\n     *\n     * @param label - The string that will be divided in three parts.\n     * @param start - The first index that the label will be divided by.\n     * @param skip - The second index that the label will be divided by.\n     *\n     * @returns The three parts of the divided label.\n     * @internal\n     */\n    protected splitAt(label: string, start: number, skip: number): [string, string, string] {\n      const startPart = label.substr(0, start);\n      const matchingPart = label.substr(start, skip);\n      const endPart = label.substr(start + skip);\n\n      return [sanitize(startPart), sanitize(matchingPart), sanitize(endPart)];\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n# Examples\n\nThis default suggestion component expects a suggestion to render and pass to its default slot, a\nnormalized query to compare with the suggestion's query and highlight its matching parts and events\nto emit when the suggestion is selected.\n\n## Default usage\n\n```vue\n<BaseSuggestion v-bind=\"{ query, suggestion, suggestionSelectedEvents }\" />\n```\n\n## Customized usage\n\n```vue\n<BaseSuggestion v-bind=\"{ query, suggestion, suggestionSelectedEvents }\">\n  <template #default=\"{ suggestion, queryHTML }\">\n    <span\n      class=\"my-suggestion\"\n      v-html=\"queryHTML\"\n      :aria-label=\"suggestion.query\"\n    />\n  </template>\n</BaseSuggestion>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserAcceptedAQuery`: the event is emitted after the user clicks the button. The event payload is\n  the suggestion query data.\n- `UserSelectedASuggestion`: the event is emitted after the user clicks the button. The event\n  payload is the suggestion data.\n- The component can emit more events on click using the `suggestionSelectedEvents` prop.\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/suggestions/base-suggestion.vue_rollup-plugin-vue=script.js

@@ -0,0 +1,144 @@
+import { __extends, __assign, __decorate } from 'tslib';
+import Vue from 'vue';
+import { Prop, Component } from 'vue-property-decorator';
+import { normalizeString } from '../../utils/normalize.js';
+import { forEach } from '../../utils/object.js';
+import { sanitize } from '../../utils/sanitize.js';
+
+/**
+ * Renders a button with a default slot. It receives a query, which should be the query of the
+ * module using this component, a suggestion, the {@link XEvent | XEvents} that will be emitted
+ * on click with a given feature.
+ *
+ * The default slot receives the suggestion and the matched query has props.
+ *
+ * @public
+ */
+var BaseSuggestion = /** @class */ (function (_super) {
+    __extends(BaseSuggestion, _super);
+    function BaseSuggestion() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(BaseSuggestion.prototype, "events", {
+        /**
+         * The event handler that will be triggered when clicking on a suggestion.
+         *
+         * @remarks
+         * * UserAcceptedAQuery: suggestion.query
+         * * UserSelectedASuggestion: suggestion
+         * * Merges the events defined in the suggestionSelectedEvents prop and also emits them
+         *
+         * @returns The {@link XEvent | XEvents} to emit.
+         * @public
+         */
+        get: function () {
+            return __assign({ UserAcceptedAQuery: this.suggestion.query, UserSelectedASuggestion: this.suggestion }, this.suggestionSelectedEvents);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Emits the events when the button is clicked.
+     *
+     * @public
+     */
+    BaseSuggestion.prototype.emitEvents = function () {
+        var _this = this;
+        forEach(this.events, function (event, payload) {
+            _this.$x.emit(event, payload, {
+                target: _this.$el,
+                feature: _this.feature
+            });
+        });
+    };
+    Object.defineProperty(BaseSuggestion.prototype, "hasMatchingQuery", {
+        /**
+         * Checks if the normalized suggestion query matches with the module's query so it has a
+         * matching part.
+         *
+         * @returns If the query has a matching part or not.
+         * @internal
+         */
+        get: function () {
+            return !!this.query && normalizeString(this.suggestion.query).includes(this.query);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(BaseSuggestion.prototype, "dynamicCSSClasses", {
+        /**
+         * Generates css classes dynamically.
+         *
+         * @remarks
+         * 'x-suggestion--matching added when the query should be matched.
+         *
+         * @returns The {@link VueCSSClasses} classes.
+         * @public
+         */
+        get: function () {
+            return {
+                'x-suggestion--matching': this.hasMatchingQuery
+            };
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(BaseSuggestion.prototype, "queryHTML", {
+        /**
+         * Highlights the matching part of the suggestion query with the query passed as prop of the
+         * component putting it inside a `<span>` tag.
+         *
+         * @remarks
+         * The query prop should be normalized.
+         *
+         * @returns The suggestion's query with the matching part inside a `<span>` tag.
+         * @public
+         */
+        get: function () {
+            if (this.hasMatchingQuery) {
+                var matcherIndex = normalizeString(this.suggestion.query).indexOf(this.query);
+                var _a = this.splitAt(this.suggestion.query, matcherIndex, this.query.length), beginning = _a[0], matching = _a[1], end = _a[2];
+                var attrsMatching = 'data-test="matching-part" class="x-suggestion__matching-part"';
+                return beginning + "<span " + attrsMatching + ">" + matching + "</span>" + end;
+            }
+            return sanitize(this.suggestion.query);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Splits the label in three parts based on two indexes.
+     *
+     * @param label - The string that will be divided in three parts.
+     * @param start - The first index that the label will be divided by.
+     * @param skip - The second index that the label will be divided by.
+     *
+     * @returns The three parts of the divided label.
+     * @internal
+     */
+    BaseSuggestion.prototype.splitAt = function (label, start, skip) {
+        var startPart = label.substr(0, start);
+        var matchingPart = label.substr(start, skip);
+        var endPart = label.substr(start + skip);
+        return [sanitize(startPart), sanitize(matchingPart), sanitize(endPart)];
+    };
+    __decorate([
+        Prop({ default: '' })
+    ], BaseSuggestion.prototype, "query", void 0);
+    __decorate([
+        Prop({ required: true })
+    ], BaseSuggestion.prototype, "suggestion", void 0);
+    __decorate([
+        Prop() //TODO: set to true when the suggestions components pass it.
+    ], BaseSuggestion.prototype, "feature", void 0);
+    __decorate([
+        Prop({ required: true })
+    ], BaseSuggestion.prototype, "suggestionSelectedEvents", void 0);
+    BaseSuggestion = __decorate([
+        Component
+    ], BaseSuggestion);
+    return BaseSuggestion;
+}(Vue));
+
+export default BaseSuggestion;
+//# sourceMappingURL=base-suggestion.vue_rollup-plugin-vue=script.js.map

package/js/components/suggestions/base-suggestion.vue_rollup-plugin-vue=script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-suggestion.vue_rollup-plugin-vue=script.js","sources":["../../../../src/components/suggestions/base-suggestion.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { Suggestion } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { QueryFeature } from '../../types/origin';\nimport { forEach } from '../../utils/object';\nimport { normalizeString } from '../../utils/normalize';\nimport { sanitize } from '../../utils/sanitize';\nimport { VueCSSClasses } from '../../utils/types';\nimport { XEventsTypes } from '../../wiring/events.types';\n\n/**\n * Renders a button with a default slot. It receives a query, which should be the query of the\n * module using this component, a suggestion, the {@link XEvent | XEvents} that will be emitted\n * on click with a given feature.\n *\n * The default slot receives the suggestion and the matched query has props.\n *\n * @public\n */\n@Component\nexport default class BaseSuggestion extends Vue {\n  /**\n   * The normalized query of the module using this component.\n   *\n   * @public\n   */\n  @Prop({ default: '' })\n  protected query!: string;\n\n  /**\n   * The suggestion to render and use in the default slot.\n   *\n   * @public\n   */\n  @Prop({ required: true })\n  protected suggestion!: Suggestion;\n\n  /**\n   * The feature from which the events will be emitted.\n   *\n   * @public\n   */\n  @Prop() //TODO: set to true when the suggestions components pass it.\n  protected feature?: QueryFeature;\n\n  /**\n   * The {@link XEvent | XEvents} that will be emitted when selecting a suggestion.\n   *\n   * @public\n   */\n  @Prop({ required: true })\n  protected suggestionSelectedEvents!: Partial<XEventsTypes>;\n\n  /**\n   * The event handler that will be triggered when clicking on a suggestion.\n   *\n   * @remarks\n   * * UserAcceptedAQuery: suggestion.query\n   * * UserSelectedASuggestion: suggestion\n   * * Merges the events defined in the suggestionSelectedEvents prop and also emits them\n   *\n   * @returns The {@link XEvent | XEvents} to emit.\n   * @public\n   */\n  protected get events(): Partial<XEventsTypes> {\n    return {\n      UserAcceptedAQuery: this.suggestion.query,\n      UserSelectedASuggestion: this.suggestion,\n      ...this.suggestionSelectedEvents\n    };\n  }\n\n  /**\n   * Emits the events when the button is clicked.\n   *\n   * @public\n   */\n  protected emitEvents(): void {\n    forEach(this.events, (event, payload) => {\n      this.$x.emit(event, payload, {\n        target: this.$el as HTMLElement,\n        feature: this.feature\n      });\n    });\n  }\n\n  /**\n   * Checks if the normalized suggestion query matches with the module's query so it has a\n   * matching part.\n   *\n   * @returns If the query has a matching part or not.\n   * @internal\n   */\n  protected get hasMatchingQuery(): boolean {\n    return !!this.query && normalizeString(this.suggestion.query).includes(this.query);\n  }\n\n  /**\n   * Generates css classes dynamically.\n   *\n   * @remarks\n   * 'x-suggestion--matching added when the query should be matched.\n   *\n   * @returns The {@link VueCSSClasses} classes.\n   * @public\n   */\n  protected get dynamicCSSClasses(): VueCSSClasses {\n    return {\n      'x-suggestion--matching': this.hasMatchingQuery\n    };\n  }\n\n  /**\n   * Highlights the matching part of the suggestion query with the query passed as prop of the\n   * component putting it inside a `<span>` tag.\n   *\n   * @remarks\n   * The query prop should be normalized.\n   *\n   * @returns The suggestion's query with the matching part inside a `<span>` tag.\n   * @public\n   */\n  protected get queryHTML(): string {\n    if (this.hasMatchingQuery) {\n      const matcherIndex = normalizeString(this.suggestion.query).indexOf(this.query);\n\n      const [beginning, matching, end] = this.splitAt(\n        this.suggestion.query,\n        matcherIndex,\n        this.query.length\n      );\n\n      const attrsMatching = 'data-test=\"matching-part\" class=\"x-suggestion__matching-part\"';\n      return `${beginning}<span ${attrsMatching}>${matching}</span>${end}`;\n    }\n\n    return sanitize(this.suggestion.query);\n  }\n\n  /**\n   * Splits the label in three parts based on two indexes.\n   *\n   * @param label - The string that will be divided in three parts.\n   * @param start - The first index that the label will be divided by.\n   * @param skip - The second index that the label will be divided by.\n   *\n   * @returns The three parts of the divided label.\n   * @internal\n   */\n  protected splitAt(label: string, start: number, skip: number): [string, string, string] {\n    const startPart = label.substr(0, start);\n    const matchingPart = label.substr(start, skip);\n    const endPart = label.substr(start + skip);\n\n    return [sanitize(startPart), sanitize(matchingPart), sanitize(endPart)];\n  }\n}\n"],"names":[],"mappings":";;;;;;;AA0BA;;;;;;;;;AAUA;IAA4C,kCAAG;IAA/C;;KAwIC;IA5FC,sBAAc,kCAAM;;;;;;;;;;;;aAApB;YACE,kBACE,kBAAkB,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,EACzC,uBAAuB,EAAE,IAAI,CAAC,UAAU,IACrC,IAAI,CAAC,wBAAwB,EAChC;SACH;;;OAAA;;;;;;IAOS,mCAAU,GAApB;QAAA,iBAOC;QANC,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE,UAAC,KAAK,EAAE,OAAO;YAClC,KAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE;gBAC3B,MAAM,EAAE,KAAI,CAAC,GAAkB;gBAC/B,OAAO,EAAE,KAAI,CAAC,OAAO;aACtB,CAAC,CAAC;SACJ,CAAC,CAAC;KACJ;IASD,sBAAc,4CAAgB;;;;;;;;aAA9B;YACE,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACpF;;;OAAA;IAWD,sBAAc,6CAAiB;;;;;;;;;;aAA/B;YACE,OAAO;gBACL,wBAAwB,EAAE,IAAI,CAAC,gBAAgB;aAChD,CAAC;SACH;;;OAAA;IAYD,sBAAc,qCAAS;;;;;;;;;;;aAAvB;YACE,IAAI,IAAI,CAAC,gBAAgB,EAAE;gBACzB,IAAM,YAAY,GAAG,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBAE1E,IAAA,KAA6B,IAAI,CAAC,OAAO,CAC7C,IAAI,CAAC,UAAU,CAAC,KAAK,EACrB,YAAY,EACZ,IAAI,CAAC,KAAK,CAAC,MAAM,CAClB,EAJM,SAAS,QAAA,EAAE,QAAQ,QAAA,EAAE,GAAG,QAI9B,CAAC;gBAEF,IAAM,aAAa,GAAG,+DAA+D,CAAC;gBACtF,OAAU,SAAS,cAAS,aAAa,SAAI,QAAQ,eAAU,GAAK,CAAC;aACtE;YAED,OAAO,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;SACxC;;;OAAA;;;;;;;;;;;IAYS,gCAAO,GAAjB,UAAkB,KAAa,EAAE,KAAa,EAAE,IAAY;QAC1D,IAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;QACzC,IAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;QAC/C,IAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;QAE3C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC;KACzE;IAhID;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;iDACG;IAQzB;QADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;sDACS;IAQlC;QADC,IAAI,EAAE;mDAC0B;IAQjC;QADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;oEACkC;IA/BxC,cAAc;QADlC,SAAS;OACW,cAAc,CAwIlC;IAAD,qBAAC;CAAA,CAxI2C,GAAG;;;;"}