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

package/js/components/animations/collapse-width.vue.js

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

package/js/components/animations/collapse-width.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapse-width.vue.js","sources":["../../../../src/components/animations/collapse-width.vue"],"sourcesContent":["<template>\n  <transition\n    v-on=\"$listeners\"\n    @enter=\"expand\"\n    @after-enter=\"cleanUpAnimationStyles\"\n    @leave=\"collapse\"\n    appear\n    name=\"x-collapse-width-\"\n  >\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n  import { createCollapseAnimationMixin } from './animations.mixin';\n\n  /**\n   * Renders a transition wrapping the element passed in the default slot and animating\n   * it with a width animation.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [createCollapseAnimationMixin('width')]\n  })\n  export default class CollapseWidth extends Vue {}\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-collapse-width {\n    &--enter-active,\n    &--leave-active {\n      transition: width 0.3s ease-out;\n      overflow: hidden;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe CollapseWidth component is intended to be used as animation to wrap an element with v-if or\nv-show and animate it. The animation consists on scale its width size from 0 to auto. This\ntransition does not work with components that have horizontal margin, padding or border. It also is\ndependant of the width of the child elements and not the root element.\n\nUsed wrapping a component:\n\n```vue\n<CollapseWidth>\n  <ComponentOrElement v-if=\"open\"/>\n</CollapseWidth>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"collapse-width.vue.js","sources":["../../../../src/components/animations/collapse-width.vue"],"sourcesContent":["<template>\n  <transition\n    v-on=\"$listeners\"\n    @enter=\"expand\"\n    @after-enter=\"cleanUpAnimationStyles\"\n    @leave=\"collapse\"\n    appear\n    name=\"x-collapse-width-\"\n  >\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n  import { createCollapseAnimationMixin } from './animations.mixin';\n\n  /**\n   * Renders a transition wrapping the element passed in the default slot and animating\n   * it with a width animation.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [createCollapseAnimationMixin('width')]\n  })\n  export default class CollapseWidth extends Vue {}\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-collapse-width {\n    &--enter-active,\n    &--leave-active {\n      transition: width 0.3s ease-out;\n      overflow: hidden;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe CollapseWidth component is intended to be used as animation to wrap an element with v-if or\nv-show and animate it. The animation consists on scale its width size from 0 to auto. This\ntransition does not work with components that have horizontal margin, padding or border. It also is\ndependant of the width of the child elements and not the root element.\n\nUsed wrapping a component:\n\n```vue\n<CollapseWidth>\n  <ComponentOrElement v-if=\"open\"/>\n</CollapseWidth>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/animations/collapse-width.vue_rollup-plugin-vue_script.vue.js

@@ -0,0 +1,22 @@
+import { __decorate } from 'tslib';
+import Vue from 'vue';
+import { Component } from 'vue-property-decorator';
+import { createCollapseAnimationMixin } from './animations.mixin.js';
+
+/**
+ * Renders a transition wrapping the element passed in the default slot and animating
+ * it with a width animation.
+ *
+ * @public
+ */
+let CollapseWidth = class CollapseWidth extends Vue {
+};
+CollapseWidth = __decorate([
+    Component({
+        mixins: [createCollapseAnimationMixin('width')]
+    })
+], CollapseWidth);
+var script = CollapseWidth;
+
+export { script as default };
+//# sourceMappingURL=collapse-width.vue_rollup-plugin-vue_script.vue.js.map

package/js/components/animations/collapse-width.vue_rollup-plugin-vue_script.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapse-width.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/animations/collapse-width.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component } from 'vue-property-decorator';\nimport { createCollapseAnimationMixin } from './animations.mixin';\n\n/**\n * Renders a transition wrapping the element passed in the default slot and animating\n * it with a width animation.\n *\n * @public\n */\n@Component({\n  mixins: [createCollapseAnimationMixin('width')]\n})\nexport default class CollapseWidth extends Vue {}\n"],"names":[],"mappings":";;;;;AAmBA;;;;;;AASA,IAAqB,aAAa,GAAlC,MAAqB,aAAc,SAAQ,GAAG;CAAG,CAAA;AAA5B,aAAa;IAHjC,SAAS,CAAC;QACT,MAAM,EAAE,CAAC,4BAA4B,CAAC,OAAO,CAAC,CAAC;KAChD,CAAC;GACmB,aAAa,CAAe;aAA5B,aAAa;;;;"}

package/js/components/animations/cross-fade.vue.js

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

package/js/components/animations/cross-fade.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"cross-fade.vue.js","sources":["../../../../src/components/animations/cross-fade.vue"],"sourcesContent":["<template>\n  <transition v-on=\"$listeners\" appear name=\"x-cross-fade-\" mode=\"in-out\">\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n\n  /**\n   * Renders a transition wrapping the element passed in the default slo. The transition\n   * fades between the two toggled elements at the same time.\n   *\n   * @public\n   */\n  @Component\n  export default class CrossFade extends Vue {}\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-cross-fade {\n    &--enter-active,\n    &--leave-active {\n      transition: opacity 0.25s ease-in-out;\n    }\n\n    &--leave-active {\n      position: absolute;\n    }\n\n    &--leave-to,\n    &--enter {\n      opacity: 0;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Example\n\nThe `CrossFade` component is intended to be used as animation to wrap an element with v-if or v-show\nand animate it. The animation fades the new element into the previous one.\n\nWrapping a component:\n\n```vue\n<CrossFade>\n  <ComponentOrElement v-if=\"open\"/>\n</CrossFade>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"cross-fade.vue.js","sources":["../../../../src/components/animations/cross-fade.vue"],"sourcesContent":["<template>\n  <transition v-on=\"$listeners\" appear name=\"x-cross-fade-\" mode=\"in-out\">\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n\n  /**\n   * Renders a transition wrapping the element passed in the default slo. The transition\n   * fades between the two toggled elements at the same time.\n   *\n   * @public\n   */\n  @Component\n  export default class CrossFade extends Vue {}\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-cross-fade {\n    &--enter-active,\n    &--leave-active {\n      transition: opacity 0.25s ease-in-out;\n    }\n\n    &--leave-active {\n      position: absolute;\n    }\n\n    &--leave-to,\n    &--enter {\n      opacity: 0;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Example\n\nThe `CrossFade` component is intended to be used as animation to wrap an element with v-if or v-show\nand animate it. The animation fades the new element into the previous one.\n\nWrapping a component:\n\n```vue\n<CrossFade>\n  <ComponentOrElement v-if=\"open\"/>\n</CrossFade>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/animations/cross-fade.vue_rollup-plugin-vue_script.vue.js

@@ -0,0 +1,19 @@
+import { __decorate } from 'tslib';
+import Vue from 'vue';
+import { Component } from 'vue-property-decorator';
+
+/**
+ * Renders a transition wrapping the element passed in the default slo. The transition
+ * fades between the two toggled elements at the same time.
+ *
+ * @public
+ */
+let CrossFade = class CrossFade extends Vue {
+};
+CrossFade = __decorate([
+    Component
+], CrossFade);
+var script = CrossFade;
+
+export { script as default };
+//# sourceMappingURL=cross-fade.vue_rollup-plugin-vue_script.vue.js.map

package/js/components/animations/cross-fade.vue_rollup-plugin-vue_script.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cross-fade.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/animations/cross-fade.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component } from 'vue-property-decorator';\n\n/**\n * Renders a transition wrapping the element passed in the default slo. The transition\n * fades between the two toggled elements at the same time.\n *\n * @public\n */\n@Component\nexport default class CrossFade extends Vue {}\n"],"names":[],"mappings":";;;;AAWA;;;;;;AAOA,IAAqB,SAAS,GAA9B,MAAqB,SAAU,SAAQ,GAAG;CAAG,CAAA;AAAxB,SAAS;IAD7B,SAAS;GACW,SAAS,CAAe;aAAxB,SAAS;;;;"}

package/js/components/animations/fade-and-slide.vue.js

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

package/js/components/animations/fade-and-slide.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"fade-and-slide.vue.js","sources":["../../../../src/components/animations/fade-and-slide.vue"],"sourcesContent":["<template>\n  <transition-group\n    v-on=\"$listeners\"\n    class=\"x-fade-and-slide\"\n    appear\n    name=\"x-fade-and-slide-\"\n    :tag=\"tag\"\n  >\n    <!-- @slot (Required) Transition-group content -->\n    <slot />\n  </transition-group>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Prop, Component } from 'vue-property-decorator';\n\n  /**\n   * Renders a transition group wrapping the elements passed in the default slot and animating\n   * them with a fade and slide animation.\n   *\n   * @public\n   */\n  @Component\n  export default class FadeAndSlide extends Vue {\n    /**\n     * HTML Element that the transition-group children will be wrapped in.\n     *\n     * @public\n     */\n    @Prop()\n    protected tag!: string;\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  $transition-opacity-duration: 0.2s;\n  $transition-transform-duration: 0.3s;\n\n  .x-fade-and-slide::v-deep .x-fade-and-slide {\n    &--move,\n    &--enter-active,\n    &--leave-active {\n      transition: opacity $transition-opacity-duration ease-out,\n        transform $transition-transform-duration ease-out;\n    }\n\n    &--enter,\n    &--leave-to {\n      transform: translate(-20%, 0);\n      opacity: 0;\n    }\n\n    &--leave-active {\n      position: absolute;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe FadeAndSlide component is intended to be used as a prop in animatable components but also works\nas a wrapper of a transition group that can receive the tag it will render to as a prop.\n\nUsed as a prop in an animatable component:\n\n```vue\n<AnimatableComponent :animation=\"FadeAndSlide\" />\n```\n\nUsed as a regular component passing a the tag as prop:\n\n```vue\n<FadeAndSlide tag=\"ul\">\n  <li>Element to animate</li>\n  <li>Element to animate</li>\n  <li>Element to animate</li>\n</FadeAndSlide>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"fade-and-slide.vue.js","sources":["../../../../src/components/animations/fade-and-slide.vue"],"sourcesContent":["<template>\n  <transition-group\n    v-on=\"$listeners\"\n    class=\"x-fade-and-slide\"\n    appear\n    name=\"x-fade-and-slide-\"\n    :tag=\"tag\"\n  >\n    <!-- @slot (Required) Transition-group content -->\n    <slot />\n  </transition-group>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Prop, Component } from 'vue-property-decorator';\n\n  /**\n   * Renders a transition group wrapping the elements passed in the default slot and animating\n   * them with a fade and slide animation.\n   *\n   * @public\n   */\n  @Component\n  export default class FadeAndSlide extends Vue {\n    /**\n     * HTML Element that the transition-group children will be wrapped in.\n     *\n     * @public\n     */\n    @Prop()\n    protected tag!: string;\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  $transition-opacity-duration: 0.2s;\n  $transition-transform-duration: 0.3s;\n\n  .x-fade-and-slide::v-deep .x-fade-and-slide {\n    &--move,\n    &--enter-active,\n    &--leave-active {\n      transition: opacity $transition-opacity-duration ease-out,\n        transform $transition-transform-duration ease-out;\n    }\n\n    &--enter,\n    &--leave-to {\n      transform: translate(-20%, 0);\n      opacity: 0;\n    }\n\n    &--leave-active {\n      position: absolute;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe FadeAndSlide component is intended to be used as a prop in animatable components but also works\nas a wrapper of a transition group that can receive the tag it will render to as a prop.\n\nUsed as a prop in an animatable component:\n\n```vue\n<AnimatableComponent :animation=\"FadeAndSlide\" />\n```\n\nUsed as a regular component passing a the tag as prop:\n\n```vue\n<FadeAndSlide tag=\"ul\">\n  <li>Element to animate</li>\n  <li>Element to animate</li>\n  <li>Element to animate</li>\n</FadeAndSlide>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/animations/fade-and-slide.vue_rollup-plugin-vue_script.vue.js

@@ -0,0 +1,22 @@
+import { __decorate } from 'tslib';
+import Vue from 'vue';
+import { Prop, Component } from 'vue-property-decorator';
+
+/**
+ * Renders a transition group wrapping the elements passed in the default slot and animating
+ * them with a fade and slide animation.
+ *
+ * @public
+ */
+let FadeAndSlide = class FadeAndSlide extends Vue {
+};
+__decorate([
+    Prop()
+], FadeAndSlide.prototype, "tag", void 0);
+FadeAndSlide = __decorate([
+    Component
+], FadeAndSlide);
+var script = FadeAndSlide;
+
+export { script as default };
+//# sourceMappingURL=fade-and-slide.vue_rollup-plugin-vue_script.vue.js.map

package/js/components/animations/fade-and-slide.vue_rollup-plugin-vue_script.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fade-and-slide.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/animations/fade-and-slide.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Prop, Component } from 'vue-property-decorator';\n\n/**\n * Renders a transition group wrapping the elements passed in the default slot and animating\n * them with a fade and slide animation.\n *\n * @public\n */\n@Component\nexport default class FadeAndSlide extends Vue {\n  /**\n   * HTML Element that the transition-group children will be wrapped in.\n   *\n   * @public\n   */\n  @Prop()\n  protected tag!: string;\n}\n"],"names":[],"mappings":";;;;AAiBA;;;;;;AAOA,IAAqB,YAAY,GAAjC,MAAqB,YAAa,SAAQ,GAAG;CAQ5C,CAAA;AADC;IADC,IAAI,EAAE;yCACgB;AAPJ,YAAY;IADhC,SAAS;GACW,YAAY,CAQhC;aARoB,YAAY;;;;"}

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

@@ -1,9 +1,9 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-import __vue_create_injector__ from 'vue-runtime-helpers/dist/inject-style/browser.js';
-import script from './staggered-fade-and-slide.vue_rollup-plugin-vue=script.js';
+import script from './staggered-fade-and-slide.vue_rollup-plugin-vue_script.vue.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import __vue_create_injector__ from 'vue-runtime-helpers/dist/inject-style/browser.mjs';
 
 /* script */
-var __vue_script__ = script;
+const __vue_script__ = script;
 
 /* template */
 var __vue_render__ = function () {
@@ -32,24 +32,24 @@ var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
 
   /* style */
-  var __vue_inject_styles__ = function (inject) {
-    if (!inject) { return }
+  const __vue_inject_styles__ = function (inject) {
+    if (!inject) return
     inject("data-v-2d47bdea_0", { source: ".x-staggered-fade-and-slide[data-v-2d47bdea] .x-staggered-fade-and-slide--enter-active, .x-staggered-fade-and-slide[data-v-2d47bdea] .x-staggered-fade-and-slide--leave-active {\n  transition: 0.25s ease-out;\n  transition-property: opacity, transform;\n}\n.x-staggered-fade-and-slide[data-v-2d47bdea] .x-staggered-fade-and-slide--move {\n  transition: transform 0.25s ease-out;\n  z-index: 1;\n}\n.x-staggered-fade-and-slide[data-v-2d47bdea] .x-staggered-fade-and-slide--enter, .x-staggered-fade-and-slide[data-v-2d47bdea] .x-staggered-fade-and-slide--leave-to {\n  transform: translate3d(0, 50%, 0);\n  opacity: 0;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-2d47bdea";
+  const __vue_scope_id__ = "data-v-2d47bdea";
   /* module identifier */
-  var __vue_module_identifier__ = undefined;
+  const __vue_module_identifier__ = undefined;
   /* functional template */
-  var __vue_is_functional_template__ = false;
+  const __vue_is_functional_template__ = false;
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  var __vue_component__ = /*#__PURE__*/__vue_normalize__(
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
     { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
     __vue_inject_styles__,
     __vue_script__,
@@ -62,5 +62,5 @@ __vue_render__._withStripped = true;
     undefined
   );
 
-export default __vue_component__;
+export { __vue_component__ as default };
 //# sourceMappingURL=staggered-fade-and-slide.vue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"staggered-fade-and-slide.vue.js","sources":["../../../../src/components/animations/staggered-fade-and-slide.vue"],"sourcesContent":["<template>\n  <staggering-transition-group\n    v-on=\"$listeners\"\n    v-bind=\"$attrs\"\n    appear\n    class=\"x-staggered-fade-and-slide\"\n    name=\"x-staggered-fade-and-slide-\"\n  >\n    <!-- @slot (Required) Transition-group content -->\n    <slot />\n  </staggering-transition-group>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n  import StaggeringTransitionGroup from '../animations/staggering-transition-group.vue';\n\n  /**\n   * Renders a transition group wrapping the elements passed in the default slot and animating\n   * them with an staggered fade and slide animation.\n   *\n   * @public\n   */\n  @Component({\n    components: { StaggeringTransitionGroup }\n  })\n  export default class StaggeredFadeAndSlide extends Vue {}\n</script>\n\n<style lang=\"scss\" scoped>\n  $transition-duration: 0.25s;\n\n  .x-staggered-fade-and-slide::v-deep .x-staggered-fade-and-slide {\n    &--enter-active,\n    &--leave-active {\n      transition: $transition-duration ease-out;\n      transition-property: opacity, transform;\n    }\n\n    &--move {\n      transition: transform $transition-duration ease-out;\n      z-index: 1;\n    }\n\n    &--enter,\n    &--leave-to {\n      transform: translate3d(0, 50%, 0);\n      opacity: 0;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\nThe Staggered fade and slide components works as the normal fade and slide components, but it also\nadds a configurable delay to each transition.\n\n## Example\n\n### Used with animatable components\n\n```vue\n<AnimatableComponent :animation=\"StaggeredFadeAndSlide\" />\n```\n\n### Used as a regular component:\n\nThis components exposes all the props and events of the Staggering transition group, like the `tag`\nor the `stagger` props:\n\n```vue\n<StaggeredFadeAndSlide tag=\"ul\" :stagger=\"50\">\n  <li>Element to animate</li>\n  <li>Element to animate</li>\n  <li>Element to animate</li>\n</StaggeredFadeAndSlide>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"staggered-fade-and-slide.vue.js","sources":["../../../../src/components/animations/staggered-fade-and-slide.vue"],"sourcesContent":["<template>\n  <staggering-transition-group\n    v-on=\"$listeners\"\n    v-bind=\"$attrs\"\n    appear\n    class=\"x-staggered-fade-and-slide\"\n    name=\"x-staggered-fade-and-slide-\"\n  >\n    <!-- @slot (Required) Transition-group content -->\n    <slot />\n  </staggering-transition-group>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n  import StaggeringTransitionGroup from '../animations/staggering-transition-group.vue';\n\n  /**\n   * Renders a transition group wrapping the elements passed in the default slot and animating\n   * them with an staggered fade and slide animation.\n   *\n   * @public\n   */\n  @Component({\n    components: { StaggeringTransitionGroup }\n  })\n  export default class StaggeredFadeAndSlide extends Vue {}\n</script>\n\n<style lang=\"scss\" scoped>\n  $transition-duration: 0.25s;\n\n  .x-staggered-fade-and-slide::v-deep .x-staggered-fade-and-slide {\n    &--enter-active,\n    &--leave-active {\n      transition: $transition-duration ease-out;\n      transition-property: opacity, transform;\n    }\n\n    &--move {\n      transition: transform $transition-duration ease-out;\n      z-index: 1;\n    }\n\n    &--enter,\n    &--leave-to {\n      transform: translate3d(0, 50%, 0);\n      opacity: 0;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\nThe Staggered fade and slide components works as the normal fade and slide components, but it also\nadds a configurable delay to each transition.\n\n## Example\n\n### Used with animatable components\n\n```vue\n<AnimatableComponent :animation=\"StaggeredFadeAndSlide\" />\n```\n\n### Used as a regular component:\n\nThis components exposes all the props and events of the Staggering transition group, like the `tag`\nor the `stagger` props:\n\n```vue\n<StaggeredFadeAndSlide tag=\"ul\" :stagger=\"50\">\n  <li>Element to animate</li>\n  <li>Element to animate</li>\n  <li>Element to animate</li>\n</StaggeredFadeAndSlide>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/animations/staggered-fade-and-slide.vue_rollup-plugin-vue_script.vue.js

@@ -0,0 +1,22 @@
+import { __decorate } from 'tslib';
+import Vue from 'vue';
+import { Component } from 'vue-property-decorator';
+import __vue_component__ from './staggering-transition-group.vue.js';
+
+/**
+ * Renders a transition group wrapping the elements passed in the default slot and animating
+ * them with an staggered fade and slide animation.
+ *
+ * @public
+ */
+let StaggeredFadeAndSlide = class StaggeredFadeAndSlide extends Vue {
+};
+StaggeredFadeAndSlide = __decorate([
+    Component({
+        components: { StaggeringTransitionGroup: __vue_component__ }
+    })
+], StaggeredFadeAndSlide);
+var script = StaggeredFadeAndSlide;
+
+export { script as default };
+//# sourceMappingURL=staggered-fade-and-slide.vue_rollup-plugin-vue_script.vue.js.map

package/js/components/animations/staggered-fade-and-slide.vue_rollup-plugin-vue_script.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"staggered-fade-and-slide.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/animations/staggered-fade-and-slide.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component } from 'vue-property-decorator';\nimport StaggeringTransitionGroup from '../animations/staggering-transition-group.vue';\n\n/**\n * Renders a transition group wrapping the elements passed in the default slot and animating\n * them with an staggered fade and slide animation.\n *\n * @public\n */\n@Component({\n  components: { StaggeringTransitionGroup }\n})\nexport default class StaggeredFadeAndSlide extends Vue {}\n"],"names":["StaggeringTransitionGroup"],"mappings":";;;;;AAkBA;;;;;;AASA,IAAqB,qBAAqB,GAA1C,MAAqB,qBAAsB,SAAQ,GAAG;CAAG,CAAA;AAApC,qBAAqB;IAHzC,SAAS,CAAC;QACT,UAAU,EAAE,6BAAEA,iBAAyB,EAAE;KAC1C,CAAC;GACmB,qBAAqB,CAAe;aAApC,qBAAqB;;;;"}

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

@@ -1,31 +1,31 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-import __vue_create_injector__ from 'vue-runtime-helpers/dist/inject-style/browser.js';
-import script from './staggering-transition-group.vue_rollup-plugin-vue=script.js';
+import script from './staggering-transition-group.vue_rollup-plugin-vue_script.vue.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import __vue_create_injector__ from 'vue-runtime-helpers/dist/inject-style/browser.mjs';
 
 /* script */
-var __vue_script__ = script;
+const __vue_script__ = script;
 
 /* template */
 
   /* style */
-  var __vue_inject_styles__ = function (inject) {
-    if (!inject) { return }
+  const __vue_inject_styles__ = function (inject) {
+    if (!inject) return
     inject("data-v-43f70f6e_0", { source: ".x-staggering-transition-group[data-v-43f70f6e] {\n  position: relative;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-43f70f6e";
+  const __vue_scope_id__ = "data-v-43f70f6e";
   /* module identifier */
-  var __vue_module_identifier__ = undefined;
+  const __vue_module_identifier__ = undefined;
   /* functional template */
-  var __vue_is_functional_template__ = undefined;
+  const __vue_is_functional_template__ = undefined;
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  var __vue_component__ = /*#__PURE__*/__vue_normalize__(
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
     {},
     __vue_inject_styles__,
     __vue_script__,
@@ -38,5 +38,5 @@ var __vue_script__ = script;
     undefined
   );
 
-export default __vue_component__;
+export { __vue_component__ as default };
 //# sourceMappingURL=staggering-transition-group.vue.js.map

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

@@ -1 +1 @@
-{"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     * @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   */\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 | 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 `stagger` property, which allows to configure the delay for each one of the\nnodes when animating.\n\n```vue\n<staggering-transition-group appear :stagger=\"50\" name=\"staggered-fade-slide-\">\n  <!-- @slot (Required) Transition-group content -->\n  <slot />\n</staggering-transition-group>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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     * @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   */\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 | 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 `stagger` property, which allows to configure the delay for each one of the\nnodes when animating.\n\n```vue\n<staggering-transition-group appear :stagger=\"50\" name=\"staggered-fade-slide-\">\n  <!-- @slot (Required) Transition-group content -->\n  <slot />\n</staggering-transition-group>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}