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

package/docs/API-reference/components/scroll/x-components.window-scroll.md

@@ -1,157 +0,0 @@
----
-
-title: WindowScroll
-
----
-
-# WindowScroll
-
-The `WindowScroll` component listens to either the `html` or `body` DOM scroll events, and re-emits
-them as X Events. Additionally it also emits events related to the direction or current position of
-these elements scroll.
-
-## Props
-
-| Name                           | Description                                  | Type                           | Default                   |
-| ------------------------------ | -------------------------------------------- | ------------------------------ | ------------------------- |
-| <code>scrollableElement</code> | Tag to identify the main scrollable element. | <code>ScrollableElement</code> | <code>'html'</code>       |
-| <code>id</code>                | Id to identify the component.                | <code>string</code>            | <code>MainScrollId</code> |
-
-## Events
-
-A list of events that the component will emit:
-
-- [`UserScrolled`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
-  the event is emitted after the user scrolls in this container. The payload is the scroll top
-  distance in pixels.
-- [`UserChangedScrollDirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
-  the event is emitted when the user changes the scroll direction. The payload is the new scrolling
-  direction.
-- [`UserReachedScrollStart`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
-  the event is emitted when the user scrolls up to the initial position of the scroll.
-- [`UserAlmostReachedScrollEnd`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
-  the event is emitted when the user is about to reach the bottom part of the scroll.
-- [`UserReachedScrollEnd`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
-  the event is emitted when the user has reached the bottom part of the scroll.
-
-## Vue Events
-
-- `scroll`: the event is emitted after the user scrolls in this container. The payload is the scroll
-  top distance in pixels.
-- `scroll:direction-change`: the event is emitted when the user changes the scroll direction. The
-  payload is the new scrolling direction.
-- `scroll:at-start`: the event is emitted when the user scrolls up to the initial position of the
-  scroll.
-- `scroll:almost-at-end`: the event is emitted when the user is about to reach the bottom part of
-  the scroll.
-- `scroll:at-end`: the event is emitted when the user has reached the bottom part of the scroll.
-
-## Example
-
-The `WindowScroll` component manages the scroll state of the `body` or `html` elements. It does the
-necessary calculations for knowing the direction of scroll, if the scroll has reached its starting
-position, if it is about to reach its ending position or if it has already reached it end. Whenever
-this state changes, it emits the appropiate X Event to the rest of the application
-
-### Custom usage
-
-#### Overriding the properties and using document scroll events.
-
-```vue
-<template>
-  <WindowScroll
-    @scroll="scroll"
-    @scroll:direction-change="scrollDirectionChange"
-    @scroll:at-start="scrollAtStart"
-    @scroll:almost-at-end="scrollAlmostAtEnd"
-    @scroll:at-end="scrollAtEnd"
-    id="example-main-scroll"
-    throttleMs="100"
-    distanceToBottom="300"
-    scrollableElement="body"
-  />
-</template>
-
-<script>
-  import { WindowScroll } from '@empathyco/x-components/scroll';
-
-  export default {
-    name: 'ScrollIdTest',
-    components: {
-      WindowScroll
-    },
-    methods: {
-      scroll(position) {
-        console.log('scroll', position);
-      },
-      scrollDirectionChange(direction) {
-        console.log('scroll:direction-change', direction);
-      },
-      scrollAtStart() {
-        console.log('scroll:at-start', isAtStart);
-      },
-      scrollAlmostAtEnd(isAlmostAtEnd) {
-        console.log('scroll:almost-at-end', isAlmostAtEnd);
-      },
-      scrollAtEnd(isAtEnd) {
-        console.log('scroll:at-end', isAtEnd);
-      }
-    }
-  };
-</script>
-```
-
-#### Using body and XEvents.
-
-If we want to listen scroll body we should do some changes in css for body. This is an example, so
-therefore the height of body can be get any value that you want. The template style should have a
-similar styles the corresponding style for tag body like in the next example.
-
-```vue
-<template>
-  <WindowScroll
-    id="example-main-scroll"
-    throttleMs="100"
-    distanceToBottom="300"
-    scrollableElement="body"
-  />
-</template>
-
-<script>
-  import { WindowScroll } from '@empathyco/x-components/scroll';
-
-  export default {
-    name: 'MainComponent',
-    components: {
-      WindowScroll
-    },
-    mounted() {
-      this.$x.on('UserScrolled').subscribe(distance => {
-        console.log(distance);
-      });
-      this.$x.on('UserChangedScrollDirection').subscribe(direction => {
-        console.log(direction);
-      });
-      this.$x.on('UserReachedScrollStart').subscribe(isAtStart => {
-        console.log(isAtStart);
-      });
-      this.$x.on('UserAlmostReachedScrollEnd').subscribe(isAlmostAtEnd => {
-        console.log(isAlmostAtEnd);
-      });
-      this.$x.on('UserReachedScrollEnd').subscribe(isAtEnd => {
-        console.log(isAtEnd);
-      });
-    }
-  };
-</script>
-<style lang="scss">
-  html {
-    overflow: hidden;
-  }
-
-  body {
-    overflow-y: auto;
-    height: 100vh;
-  }
-</style>
-```

package/js/__stubs__/filters-stubs.factory.js

@@ -1,24 +0,0 @@
-/**
- * Creates a {@link @empathyco/x-types#SimpleFilter | SimpleFilter} stub.
- *
- * @param filter - A partial filter to override certain properties. Useful for testing.
- * @returns A Simple filter.
- *
- * @internal
- */
-/**
- * Creates a {@link @empathyco/x-types#RawFilter | RawFilter}.
- *
- * @param id - The identifier of the raw filter.
- * @returns A {@link @empathyco/x-types#RawFilter | RawFilter} stub.
- */
-function createRawFilter(id) {
-    return {
-        id,
-        modelName: 'RawFilter',
-        selected: true
-    };
-}
-
-export { createRawFilter };
-//# sourceMappingURL=filters-stubs.factory.js.map

package/js/__stubs__/filters-stubs.factory.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"filters-stubs.factory.js","sources":["../../../src/__stubs__/filters-stubs.factory.ts"],"sourcesContent":["import {\n  EditableNumberRangeFilter,\n  HierarchicalFilter,\n  NumberRangeFilter,\n  RangeValue,\n  SimpleFilter,\n  RawFilter\n} from '@empathyco/x-types';\n\n/**\n * Creates a {@link @empathyco/x-types#SimpleFilter | SimpleFilter} stub.\n *\n * @param filter - A partial filter to override certain properties. Useful for testing.\n * @returns A Simple filter.\n *\n * @internal\n */\nexport function getSimpleFilterStub(filter: Partial<SimpleFilter> = {}): SimpleFilter {\n  return Object.assign<SimpleFilter, Partial<SimpleFilter>>(\n    {\n      facetId: 'category',\n      id: 'category:test',\n      modelName: 'SimpleFilter',\n      selected: false,\n      label: 'Test',\n      totalResults: 10\n    },\n    filter\n  );\n}\n\n/**\n * Creates a {@link @empathyco/x-types#NumberRangeFilter | NumberRangeFilter} stub.\n *\n * @param filter - A partial filter to override certain properties. Useful for testing.\n * @returns A Number range filter.\n *\n * @internal\n */\nexport function getNumberRangeFilterStub(\n  filter: Partial<NumberRangeFilter> = {}\n): NumberRangeFilter {\n  return Object.assign<NumberRangeFilter, Partial<NumberRangeFilter>>(\n    {\n      facetId: 'price_facet',\n      id: 'price_facet:0 TO 10',\n      modelName: 'NumberRangeFilter',\n      selected: false,\n      label: 'Test',\n      range: {\n        min: 1,\n        max: 10\n      },\n      totalResults: 10\n    },\n    filter\n  );\n}\n\n/**\n * Creates a {@link @empathyco/x-types#HierarchicalFilter | HierarchicalFilter} stub.\n *\n * @param filter - A partial filter to override certain properties. Useful for testing.\n * @returns A Hierarchical filter.\n *\n * @internal\n */\nexport function getHierarchicalFilterStub(\n  filter: Partial<HierarchicalFilter> = {}\n): HierarchicalFilter {\n  return Object.assign<HierarchicalFilter, Partial<HierarchicalFilter>>(\n    {\n      facetId: 'category',\n      id: 'category:test',\n      modelName: 'HierarchicalFilter',\n      parentId: null,\n      selected: false,\n      label: 'Test',\n      totalResults: 10,\n      children: []\n    },\n    filter\n  );\n}\n\n/**\n * Creates a {@link @empathyco/x-types#RawFilter | RawFilter}.\n *\n * @param id - The identifier of the raw filter.\n * @returns A {@link @empathyco/x-types#RawFilter | RawFilter} stub.\n */\nexport function createRawFilter(id: string): RawFilter {\n  return {\n    id,\n    modelName: 'RawFilter',\n    selected: true\n  };\n}\n\n/**\n * Creates a {@link @empathyco/x-types#SimpleFilter | SimpleFilter}.\n *\n * @param facetId - The facet id this filter belongs to.\n * @param label - The text that this filter should display.\n * @param selected - True when the filter is checked, false otherwise.\n * @param totalResults - Number of results matching the filter.\n * @returns A stub for a {@link @empathyco/x-types#SimpleFilter | SimpleFilter}.\n */\nexport function createSimpleFilter(\n  facetId: string,\n  label: string,\n  selected = false,\n  totalResults = 10\n): SimpleFilter {\n  return {\n    id: `${facetId}:${label}`,\n    modelName: 'SimpleFilter',\n    facetId,\n    label,\n    selected,\n    totalResults\n  };\n}\n\n/**\n * Creates a {@link @empathyco/x-types#HierarchicalFilter | HierarchicalFilter}.\n *\n * @param facetId - The facet id this filter belongs to.\n * @param label - The text that this filter should display.\n * @param selected - True when the filter is checked, false otherwise.\n * @param children - A list of ids of child filters.\n * @returns A stub for a {@link @empathyco/x-types#HierarchicalFilter | HierarchicalFilter}.\n */\nexport function createHierarchicalFilter(\n  facetId: string,\n  label: string,\n  selected = false,\n  children: HierarchicalFilter[] = []\n): HierarchicalFilter {\n  return {\n    facetId,\n    selected,\n    label,\n    id: `${facetId}:${label}`,\n    modelName: 'HierarchicalFilter',\n    parentId: null,\n    totalResults: 10,\n    children\n  };\n}\n\n/**\n * Creates a {@link @empathyco/x-types#NumberRangeFilter | NumberRangeFilter}.\n *\n * @param facetId - The facet id this filter belongs to.\n * @param range - The range that this filter has.\n * @param selected - True if the filter is selected, false otherwise.\n * @returns A stub for a\n * {@link @empathyco/x-types#NumberRangeFilter | NumberRangeFilter}.\n */\nexport function createNumberRangeFilter(\n  facetId: string,\n  range: RangeValue = { min: null, max: null },\n  selected = false\n): NumberRangeFilter {\n  return {\n    id: `${facetId}:${range.min ?? '*'}-${range.max ?? '*'}`,\n    modelName: 'NumberRangeFilter',\n    label: `From ${String(range.min)} to ${String(range.max)}`,\n    facetId,\n    range,\n    selected\n  };\n}\n\n/**\n * Creates a {@link @empathyco/x-types#EditableNumberRangeFilter | EditableNumberRangeFilter}.\n *\n * @param facetId - The facet id this filter belongs to.\n * @param range - The range that this filter has.\n * @param selected - The selected value which has priority over the range values.\n * @returns A stub for a\n * {@link @empathyco/x-types#EditableNumberRangeFilter | EditableNumberRangeFilter}.\n */\nexport function createEditableNumberRangeFilter(\n  facetId: string,\n  range: RangeValue = { min: null, max: null },\n  selected?: boolean\n): EditableNumberRangeFilter {\n  return {\n    id: `${facetId}:${range.min ?? '*'}-${range.max ?? '*'}`,\n    facetId,\n    range,\n    modelName: 'EditableNumberRangeFilter',\n    selected: selected ?? (range.min !== null || range.max !== null)\n  };\n}\n\n/**\n * Type of a function that creates\n * {@link @empathyco/x-types#HierarchicalFilter | HierarchicalFilter}s. Based on its label,\n * selected value and children.\n */\nexport type CreateHierarchicalFilter = (\n  label: string,\n  selected?: boolean,\n  createChildren?: (createChildren: CreateHierarchicalFilter) => HierarchicalFilter[]\n) => HierarchicalFilter;\n\n/**\n * Creates a factory of\n * {@link @empathyco/x-types#HierarchicalFilter | HierarchicalFilter}s.\n *\n * @remarks the id is created with `<facetId>:<label>`.\n * @param facetId - Facet id to which the filter belongs.\n * @param parentId - Filter's parent id if exists.\n * @returns A scoped function which is able to create `HierarchicalFilters`.\n */\nexport function createHierarchicalFilterFactory(\n  facetId: string,\n  parentId: HierarchicalFilter['id'] | null = null\n): CreateHierarchicalFilter {\n  return (label, selected, createChildren): HierarchicalFilter => {\n    const filter = createHierarchicalFilter(facetId, label, selected);\n    filter.children = createChildren\n      ? createChildren(createHierarchicalFilterFactory(facetId, filter.id))\n      : [];\n    filter.parentId = parentId;\n    return filter;\n  };\n}\n"],"names":[],"mappings":"AASA;;;;;;;AAOG;AAqEH;;;;;AAKG;AACG,SAAU,eAAe,CAAC,EAAU,EAAA;IACxC,OAAO;QACL,EAAE;AACF,QAAA,SAAS,EAAE,WAAW;AACtB,QAAA,QAAQ,EAAE,IAAI;KACf,CAAC;AACJ;;;;"}

package/js/components/animations/animations.mixin.js

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

package/js/components/animations/animations.mixin.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"animations.mixin.js","sources":["../../../../src/components/animations/animations.mixin.ts"],"sourcesContent":["import Vue, { ComponentOptions } from 'vue';\n\n/**\n * Type options for the property that will be animated.\n */\ntype AnimatedProperty = 'height' | 'width';\n\n/**\n * Adds parametrized methods to a component to allow the collapsing of the provided property.\n *\n * @param property - The property that will be animated.\n * @returns Mixin for the module.\n * @public\n */\nexport function createCollapseAnimationMixin(property: AnimatedProperty): ComponentOptions<Vue> {\n  const scrollProperty = property === 'width' ? 'scrollWidth' : 'scrollHeight';\n\n  return {\n    methods: {\n      /**\n       * Changes the element's animated property from 0 to the element's content size.\n       *\n       * @remarks `content-visibility` CSS property boosts the rendering performance waiting to be\n       * needed until rendering the content. This behaviour collides with this animation method.\n       * When the `scrollProperty` is evaluated, the content has not been rendered yet and the value\n       * is 0 so nothing is animated. To avoid this behaviour, we change the `content-visibility` to\n       * default value, force a layer repaint and then, evaluate the `scrollProperty` value which\n       * now has value. Then we restore the `content-visibility` value to its previous state.\n       *\n       * @param element - The DOM element that is going to be animated.\n       * @internal\n       */\n      expand(element: HTMLElement): void {\n        element.style[property] = '0';\n        const originalValue = (element.style as any)['content-visibility'];\n        (element.style as any)['content-visibility'] = 'visible';\n        element.getBoundingClientRect();\n        element.style[property] = `${element[scrollProperty]}px`;\n        (element.style as any)['content-visibility'] = originalValue;\n      },\n      /**\n       * Removes the animated property from the element.\n       *\n       * @param element - The DOM element that is going to be animated.\n       * @internal\n       */\n      cleanUpAnimationStyles(element: HTMLElement): void {\n        element.style.removeProperty(property);\n      },\n      /**\n       * Changes the element's animated property from the element's content size to 0.\n       *\n       * @param element - The DOM element that is going to be animated.\n       * @internal\n       */\n      collapse(element: HTMLElement): void {\n        element.style[property] = `${element[scrollProperty]}px`;\n        // This is intended. We want to provoke a layer repaint to apply this style.\n        element.getBoundingClientRect();\n        element.style[property] = '0';\n      }\n    }\n  };\n}\n"],"names":[],"mappings":"AAOA;;;;;;AAMG;AACG,SAAU,4BAA4B,CAAC,QAA0B,EAAA;AACrE,IAAA,MAAM,cAAc,GAAG,QAAQ,KAAK,OAAO,GAAG,aAAa,GAAG,cAAc,CAAC;IAE7E,OAAO;AACL,QAAA,OAAO,EAAE;AACP;;;;;;;;;;;;AAYG;AACH,YAAA,MAAM,CAAC,OAAoB,EAAA;AACzB,gBAAA,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAC;gBAC9B,MAAM,aAAa,GAAI,OAAO,CAAC,KAAa,CAAC,oBAAoB,CAAC,CAAC;AAClE,gBAAA,OAAO,CAAC,KAAa,CAAC,oBAAoB,CAAC,GAAG,SAAS,CAAC;gBACzD,OAAO,CAAC,qBAAqB,EAAE,CAAC;AAChC,gBAAA,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAG,EAAA,OAAO,CAAC,cAAc,CAAC,CAAA,EAAA,CAAI,CAAC;AACxD,gBAAA,OAAO,CAAC,KAAa,CAAC,oBAAoB,CAAC,GAAG,aAAa,CAAC;aAC9D;AACD;;;;;AAKG;AACH,YAAA,sBAAsB,CAAC,OAAoB,EAAA;AACzC,gBAAA,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;aACxC;AACD;;;;;AAKG;AACH,YAAA,QAAQ,CAAC,OAAoB,EAAA;AAC3B,gBAAA,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAG,EAAA,OAAO,CAAC,cAAc,CAAC,CAAA,EAAA,CAAI,CAAC;;gBAEzD,OAAO,CAAC,qBAAqB,EAAE,CAAC;AAChC,gBAAA,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAC;aAC/B;AACF,SAAA;KACF,CAAC;AACJ;;;;"}

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

@@ -1,31 +0,0 @@
-import { __decorate } from 'tslib';
-import Vue from 'vue';
-import { Inject, Component } from 'vue-property-decorator';
-import { DISABLE_ANIMATIONS_KEY } from '../decorators/injection.consts.js';
-
-/**
- * Mixin to ease disabling animations.
- *
- * @public
- */
-let DisableAnimationMixin = class DisableAnimationMixin extends Vue {
-    /**
-     * The animation's name based on the {@link DisableAnimationMixin.disableAnimation} flag.
-     *
-     * @returns The animation name.
-     * @internal
-     */
-    get name() {
-        return this.disableAnimation ? '__no-animation__' : this.animationName;
-    }
-};
-__decorate([
-    Inject({ from: DISABLE_ANIMATIONS_KEY, default: false })
-], DisableAnimationMixin.prototype, "disableAnimation", void 0);
-DisableAnimationMixin = __decorate([
-    Component
-], DisableAnimationMixin);
-var DisableAnimationMixin$1 = DisableAnimationMixin;
-
-export { DisableAnimationMixin$1 as default };
-//# sourceMappingURL=disable-animation.mixin.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"disable-animation.mixin.js","sources":["../../../../src/components/animations/disable-animation.mixin.ts"],"sourcesContent":["import Vue from 'vue';\nimport { Component, Inject } from 'vue-property-decorator';\nimport { DISABLE_ANIMATIONS_KEY } from '../decorators/injection.consts';\n\n/**\n * Mixin to ease disabling animations.\n *\n * @public\n */\n@Component\nexport default class DisableAnimationMixin extends Vue {\n  /**\n   * The name of the animation.\n   *\n   * @public\n   */\n  protected animationName!: string;\n\n  /**\n   * Flag to disable the animation.\n   *\n   * @public\n   */\n  @Inject({ from: DISABLE_ANIMATIONS_KEY as string, default: false })\n  public disableAnimation!: boolean;\n\n  /**\n   * The animation's name based on the {@link DisableAnimationMixin.disableAnimation} flag.\n   *\n   * @returns The animation name.\n   * @internal\n   */\n  protected get name(): string {\n    return this.disableAnimation ? '__no-animation__' : this.animationName;\n  }\n}\n"],"names":[],"mappings":";;;;;AAIA;;;;AAIG;AAEY,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,GAAG,CAAA;AAgBpD;;;;;AAKG;AACH,IAAA,IAAc,IAAI,GAAA;AAChB,QAAA,OAAO,IAAI,CAAC,gBAAgB,GAAG,kBAAkB,GAAG,IAAI,CAAC,aAAa,CAAC;KACxE;CACF,CAAA;AAXC,UAAA,CAAA;IADC,MAAM,CAAC,EAAE,IAAI,EAAE,sBAAgC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;AACjC,CAAA,EAAA,qBAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAdf,qBAAqB,GAAA,UAAA,CAAA;IADzC,SAAS;AACW,CAAA,EAAA,qBAAqB,CAyBzC,CAAA;8BAzBoB,qBAAqB;;;;"}

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

@@ -1,39 +0,0 @@
-import script from './staggering-transition-group.vue2.js';
-import './staggering-transition-group.vue3.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
-
-/* script */
-const __vue_script__ = script;
-/* template */
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = "data-v-61b49289";
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = undefined;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    {},
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export { __vue_component__ as default };
-//# sourceMappingURL=staggering-transition-group.vue.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"staggering-transition-group.vue.js","sources":["../../../../src/components/animations/staggering-transition-group.vue"],"sourcesContent":["<script lang=\"ts\">\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</script>\n\n<style lang=\"scss\" scoped>\n  .x-staggering-transition-group {\n    position: relative;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nApart from all the props and events that the classic transition group has, the staggering transition\ngroup also exposes a new `staggering` property, which allows to configure the delay for each one of\nthe nodes when animating.\n\n```vue\n<staggering-transition-group appear :staggering=\"50\" name=\"staggered-fade-slide-\">\n  <!-- @slot (Required) Transition-group content -->\n  <slot />\n</staggering-transition-group>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}