@empathyco/x-components 3.0.0-alpha.154 → 3.0.0-alpha.155

package/design-system/list-padding.css

@@ -60,15 +60,13 @@
 .x-list--gap-.x-list {
   gap: var(--x-size-gap-list-01);
 }
-@media not all and (min-resolution: 0.001dpcm) {
+@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
   .x-list--gap-.x-list {
     gap: 0;
   }
   .x-list--gap-.x-list > *:not(:last-child) {
     margin-bottom: var(--x-size-gap-list-01);
   }
-}
-@media not all and (min-resolution: 0.001dpcm) {
   .x-list--gap-.x-list.x-list--horizontal {
     gap: 0;
   }
@@ -84,15 +82,13 @@
 .x-list--gap-.x-list {
   gap: var(--x-size-gap-list-02);
 }
-@media not all and (min-resolution: 0.001dpcm) {
+@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
   .x-list--gap-.x-list {
     gap: 0;
   }
   .x-list--gap-.x-list > *:not(:last-child) {
     margin-bottom: var(--x-size-gap-list-02);
   }
-}
-@media not all and (min-resolution: 0.001dpcm) {
   .x-list--gap-.x-list.x-list--horizontal {
     gap: 0;
   }
@@ -108,15 +104,13 @@
 .x-list--gap-.x-list {
   gap: var(--x-size-gap-list-03);
 }
-@media not all and (min-resolution: 0.001dpcm) {
+@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
   .x-list--gap-.x-list {
     gap: 0;
   }
   .x-list--gap-.x-list > *:not(:last-child) {
     margin-bottom: var(--x-size-gap-list-03);
   }
-}
-@media not all and (min-resolution: 0.001dpcm) {
   .x-list--gap-.x-list.x-list--horizontal {
     gap: 0;
   }
@@ -132,15 +126,13 @@
 .x-list--gap-.x-list {
   gap: var(--x-size-gap-list-04);
 }
-@media not all and (min-resolution: 0.001dpcm) {
+@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
   .x-list--gap-.x-list {
     gap: 0;
   }
   .x-list--gap-.x-list > *:not(:last-child) {
     margin-bottom: var(--x-size-gap-list-04);
   }
-}
-@media not all and (min-resolution: 0.001dpcm) {
   .x-list--gap-.x-list.x-list--horizontal {
     gap: 0;
   }
@@ -156,15 +148,13 @@
 .x-list--gap-.x-list {
   gap: var(--x-size-gap-list-05);
 }
-@media not all and (min-resolution: 0.001dpcm) {
+@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
   .x-list--gap-.x-list {
     gap: 0;
   }
   .x-list--gap-.x-list > *:not(:last-child) {
     margin-bottom: var(--x-size-gap-list-05);
   }
-}
-@media not all and (min-resolution: 0.001dpcm) {
   .x-list--gap-.x-list.x-list--horizontal {
     gap: 0;
   }
@@ -180,15 +170,13 @@
 .x-list--gap-.x-list {
   gap: var(--x-size-gap-list-06);
 }
-@media not all and (min-resolution: 0.001dpcm) {
+@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
   .x-list--gap-.x-list {
     gap: 0;
   }
   .x-list--gap-.x-list > *:not(:last-child) {
     margin-bottom: var(--x-size-gap-list-06);
   }
-}
-@media not all and (min-resolution: 0.001dpcm) {
   .x-list--gap-.x-list.x-list--horizontal {
     gap: 0;
   }
@@ -204,15 +192,13 @@
 .x-list--gap-.x-list {
   gap: var(--x-size-gap-list-07);
 }
-@media not all and (min-resolution: 0.001dpcm) {
+@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
   .x-list--gap-.x-list {
     gap: 0;
   }
   .x-list--gap-.x-list > *:not(:last-child) {
     margin-bottom: var(--x-size-gap-list-07);
   }
-}
-@media not all and (min-resolution: 0.001dpcm) {
   .x-list--gap-.x-list.x-list--horizontal {
     gap: 0;
   }
@@ -228,15 +214,13 @@
 .x-list--gap-.x-list {
   gap: var(--x-size-gap-list-08);
 }
-@media not all and (min-resolution: 0.001dpcm) {
+@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
   .x-list--gap-.x-list {
     gap: 0;
   }
   .x-list--gap-.x-list > *:not(:last-child) {
     margin-bottom: var(--x-size-gap-list-08);
   }
-}
-@media not all and (min-resolution: 0.001dpcm) {
   .x-list--gap-.x-list.x-list--horizontal {
     gap: 0;
   }
@@ -252,15 +236,13 @@
 .x-list--gap-.x-list {
   gap: var(--x-size-gap-list-09);
 }
-@media not all and (min-resolution: 0.001dpcm) {
+@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
   .x-list--gap-.x-list {
     gap: 0;
   }
   .x-list--gap-.x-list > *:not(:last-child) {
     margin-bottom: var(--x-size-gap-list-09);
   }
-}
-@media not all and (min-resolution: 0.001dpcm) {
   .x-list--gap-.x-list.x-list--horizontal {
     gap: 0;
   }
@@ -276,15 +258,13 @@
 .x-list--gap-.x-list {
   gap: var(--x-size-gap-list-10);
 }
-@media not all and (min-resolution: 0.001dpcm) {
+@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
   .x-list--gap-.x-list {
     gap: 0;
   }
   .x-list--gap-.x-list > *:not(:last-child) {
     margin-bottom: var(--x-size-gap-list-10);
   }
-}
-@media not all and (min-resolution: 0.001dpcm) {
   .x-list--gap-.x-list.x-list--horizontal {
     gap: 0;
   }
@@ -300,15 +280,13 @@
 .x-list--gap-.x-list {
   gap: var(--x-size-gap-list-11);
 }
-@media not all and (min-resolution: 0.001dpcm) {
+@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
   .x-list--gap-.x-list {
     gap: 0;
   }
   .x-list--gap-.x-list > *:not(:last-child) {
     margin-bottom: var(--x-size-gap-list-11);
   }
-}
-@media not all and (min-resolution: 0.001dpcm) {
   .x-list--gap-.x-list.x-list--horizontal {
     gap: 0;
   }
@@ -324,15 +302,13 @@
 .x-list--gap-.x-list {
   gap: var(--x-size-gap-list-12);
 }
-@media not all and (min-resolution: 0.001dpcm) {
+@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
   .x-list--gap-.x-list {
     gap: 0;
   }
   .x-list--gap-.x-list > *:not(:last-child) {
     margin-bottom: var(--x-size-gap-list-12);
   }
-}
-@media not all and (min-resolution: 0.001dpcm) {
   .x-list--gap-.x-list.x-list--horizontal {
     gap: 0;
   }
@@ -348,15 +324,13 @@
 .x-list--gap-.x-list {
   gap: var(--x-size-gap-list-13);
 }
-@media not all and (min-resolution: 0.001dpcm) {
+@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
   .x-list--gap-.x-list {
     gap: 0;
   }
   .x-list--gap-.x-list > *:not(:last-child) {
     margin-bottom: var(--x-size-gap-list-13);
   }
-}
-@media not all and (min-resolution: 0.001dpcm) {
   .x-list--gap-.x-list.x-list--horizontal {
     gap: 0;
   }

package/design-system/message-default.css

@@ -54,7 +54,7 @@
   font-size: var(--x-size-font-message-default);
   font-weight: var(--x-number-font-weight-message-default);
 }
-@media not all and (min-resolution: 0.001dpcm) {
+@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
   .x-message {
     gap: 0;
   }

package/design-system/suggestion-default.css

@@ -126,7 +126,7 @@
   border-bottom-width: var(--x-size-border-width-bottom-suggestion-default);
   border-radius: var(--x-size-border-radius-top-left-suggestion-default) var(--x-size-border-radius-top-right-suggestion-default) var(--x-size-border-radius-bottom-right-suggestion-default) var(--x-size-border-radius-bottom-left-suggestion-default);
 }
-@media not all and (min-resolution: 0.001dpcm) {
+@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
   .x-suggestion {
     gap: 0;
   }

package/design-system/suggestion-group-default.css

@@ -76,7 +76,7 @@
   border-bottom-width: var(--x-size-border-width-bottom-suggestion-group-default);
   border-radius: var(--x-size-border-radius-top-left-suggestion-group-default) var(--x-size-border-radius-top-right-suggestion-group-default) var(--x-size-border-radius-bottom-right-suggestion-group-default) var(--x-size-border-radius-bottom-left-suggestion-group-default);
 }
-@media not all and (min-resolution: 0.001dpcm) {
+@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
   .x-suggestion-group {
     gap: 0;
   }

package/design-system/tag-default.css

@@ -99,7 +99,7 @@
   min-width: calc(3 * var(--x-size-line-height-tag-default));
   cursor: pointer;
 }
-@media not all and (min-resolution: 0.001dpcm) {
+@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
   .x-tag {
     gap: 0;
   }

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

@@ -1,10 +1,9 @@
 import script from './animate-width.vue_rollup-plugin-vue_script.vue.js';
+import './animate-width.vue_rollup-plugin-vue_styles.0.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 */
 const __vue_script__ = script;
-
 /* template */
 var __vue_render__ = function () {
   var _vm = this;
@@ -29,17 +28,15 @@ var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__ = function (inject) {
-    if (!inject) return
-    inject("data-v-d7caf02c_0", { source: ".x-animate-width--enter-active[data-v-d7caf02c], .x-animate-width--leave-active[data-v-d7caf02c] {\n  transition: width 0.3s ease-out;\n  overflow-x: hidden;\n}\n.x-animate-width--enter[data-v-d7caf02c], .x-animate-width--leave-to[data-v-d7caf02c] {\n  width: 0 !important;\n}", map: undefined, media: undefined });
-
-  };
+  const __vue_inject_styles__ = undefined;
   /* scoped */
   const __vue_scope_id__ = "data-v-d7caf02c";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */
   const __vue_is_functional_template__ = false;
+  /* style inject */
+  
   /* style inject SSR */
   
   /* style inject shadow dom */
@@ -54,7 +51,7 @@ __vue_render__._withStripped = true;
     __vue_is_functional_template__,
     __vue_module_identifier__,
     false,
-    __vue_create_injector__,
+    undefined,
     undefined,
     undefined
   );

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

@@ -1 +1 @@
-{"version":3,"file":"animate-width.vue.js","sources":["../../../../src/components/animations/animate-width.vue"],"sourcesContent":["<template>\n  <transition v-on=\"$listeners\" name=\"x-animate-width-\" v-bind=\"$attrs\">\n    <!-- @slot (Required) Transition content -->\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 an element passed in the default slot and animating its width.\n   *\n   * @public\n   */\n  @Component({\n    inheritAttrs: false\n  })\n  export default class AnimateWidth extends Vue {}\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-animate-width {\n    &--enter-active,\n    &--leave-active {\n      transition: width 0.3s ease-out;\n      overflow-x: hidden;\n    }\n\n    &--enter,\n    &--leave-to {\n      width: 0 !important;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe AnimateWidth component is intended to be used as a prop in animatable components but also works\nas a transition to animate the width of an element.\n\nUsed as a prop in an animatable component:\n\n```vue\n<template>\n  <AnimatableComponent :animation=\"AnimateWidth\" />\n</template>\n\n<script>\n  import AnimateWidth from '@empathyco/x-components/js/components/animations/animate-width.vue';\n\n  export default {\n    data() {\n      return {\n        AnimateWidth\n      };\n    }\n  };\n</script>\n```\n\nUsed as a regular Transition:\n\n```vue\n<template>\n  <div>\n    <button @click=\"visible = !visible\">Toggle</button>\n    <AnimateWidth>\n      <div v-if=\"visible\" style=\"width: 300px\">Element to animate</div>\n    </AnimateWidth>\n  </div>\n</template>\n\n<script>\n  import AnimateWidth from '@empathyco/x-components/js/components/animations/animate-width.vue';\n\n  export default {\n    data() {\n      return {\n        visible: true\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"animate-width.vue.js","sources":["../../../../src/components/animations/animate-width.vue"],"sourcesContent":["<template>\n  <transition v-on=\"$listeners\" name=\"x-animate-width-\" v-bind=\"$attrs\">\n    <!-- @slot (Required) Transition content -->\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 an element passed in the default slot and animating its width.\n   *\n   * @public\n   */\n  @Component({\n    inheritAttrs: false\n  })\n  export default class AnimateWidth extends Vue {}\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-animate-width {\n    &--enter-active,\n    &--leave-active {\n      transition: width 0.3s ease-out;\n      overflow-x: hidden;\n    }\n\n    &--enter,\n    &--leave-to {\n      width: 0 !important;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe AnimateWidth component is intended to be used as a prop in animatable components but also works\nas a transition to animate the width of an element.\n\nUsed as a prop in an animatable component:\n\n```vue\n<template>\n  <AnimatableComponent :animation=\"AnimateWidth\" />\n</template>\n\n<script>\n  import AnimateWidth from '@empathyco/x-components/js/components/animations/animate-width.vue';\n\n  export default {\n    data() {\n      return {\n        AnimateWidth\n      };\n    }\n  };\n</script>\n```\n\nUsed as a regular Transition:\n\n```vue\n<template>\n  <div>\n    <button @click=\"visible = !visible\">Toggle</button>\n    <AnimateWidth>\n      <div v-if=\"visible\" style=\"width: 300px\">Element to animate</div>\n    </AnimateWidth>\n  </div>\n</template>\n\n<script>\n  import AnimateWidth from '@empathyco/x-components/js/components/animations/animate-width.vue';\n\n  export default {\n    data() {\n      return {\n        visible: true\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/animations/animate-width.vue_rollup-plugin-vue_styles.0.vue.js

@@ -0,0 +1,7 @@
+import { createInjector } from 'vue-runtime-helpers';
+
+var css = ".x-animate-width--enter-active[data-v-d7caf02c], .x-animate-width--leave-active[data-v-d7caf02c] {\n  transition: width 0.3s ease-out;\n  overflow-x: hidden;\n}\n.x-animate-width--enter[data-v-d7caf02c], .x-animate-width--leave-to[data-v-d7caf02c] {\n  width: 0 !important;\n}";
+const injector=createInjector({});injector('/__w/x/x/packages/x-components/src/components/animations/animate-width.vue?rollup-plugin-vue=styles.0.css',{source:css});
+
+export { css, css as default };
+//# sourceMappingURL=animate-width.vue_rollup-plugin-vue_styles.0.vue.js.map

package/js/components/animations/animate-width.vue_rollup-plugin-vue_styles.0.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animate-width.vue_rollup-plugin-vue_styles.0.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

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

@@ -1,10 +1,9 @@
 import script from './collapse-height.vue_rollup-plugin-vue_script.vue.js';
+import './collapse-height.vue_rollup-plugin-vue_styles.0.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 */
 const __vue_script__ = script;
-
 /* template */
 var __vue_render__ = function () {
   var _vm = this;
@@ -36,17 +35,15 @@ var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__ = function (inject) {
-    if (!inject) return
-    inject("data-v-7536b911_0", { source: ".x-collapse-height--enter-active[data-v-7536b911], .x-collapse-height--leave-active[data-v-7536b911] {\n  transition: height 0.3s ease-out;\n  overflow: hidden;\n}", map: undefined, media: undefined });
-
-  };
+  const __vue_inject_styles__ = undefined;
   /* scoped */
   const __vue_scope_id__ = "data-v-7536b911";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */
   const __vue_is_functional_template__ = false;
+  /* style inject */
+  
   /* style inject SSR */
   
   /* style inject shadow dom */
@@ -61,7 +58,7 @@ __vue_render__._withStripped = true;
     __vue_is_functional_template__,
     __vue_module_identifier__,
     false,
-    __vue_create_injector__,
+    undefined,
     undefined,
     undefined
   );

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

@@ -1 +1 @@
-{"version":3,"file":"collapse-height.vue.js","sources":["../../../../src/components/animations/collapse-height.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-height-\"\n    v-bind=\"$attrs\"\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 height animation.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [createCollapseAnimationMixin('height')],\n    inheritAttrs: false\n  })\n  export default class CollapseHeight extends Vue {\n    // TODO Add support for extending enter, after-enter and leave transitions\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-collapse-height {\n    &--enter-active,\n    &--leave-active {\n      transition: height 0.3s ease-out;\n      overflow: hidden;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe CollapseHeight 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 height size from 0 to auto. This\ntransition does not work with components that have vertical margin, padding or border.\n\nUsed wrapping a component:\n\n```vue\n<CollapseHeight>\n  <ComponentOrElement v-if=\"open\"/>\n</CollapseHeight>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"collapse-height.vue.js","sources":["../../../../src/components/animations/collapse-height.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-height-\"\n    v-bind=\"$attrs\"\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 height animation.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [createCollapseAnimationMixin('height')],\n    inheritAttrs: false\n  })\n  export default class CollapseHeight extends Vue {\n    // TODO Add support for extending enter, after-enter and leave transitions\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-collapse-height {\n    &--enter-active,\n    &--leave-active {\n      transition: height 0.3s ease-out;\n      overflow: hidden;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe CollapseHeight 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 height size from 0 to auto. This\ntransition does not work with components that have vertical margin, padding or border.\n\nUsed wrapping a component:\n\n```vue\n<CollapseHeight>\n  <ComponentOrElement v-if=\"open\"/>\n</CollapseHeight>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/animations/collapse-height.vue_rollup-plugin-vue_styles.0.vue.js

@@ -0,0 +1,7 @@
+import { createInjector } from 'vue-runtime-helpers';
+
+var css = ".x-collapse-height--enter-active[data-v-7536b911], .x-collapse-height--leave-active[data-v-7536b911] {\n  transition: height 0.3s ease-out;\n  overflow: hidden;\n}";
+const injector=createInjector({});injector('/__w/x/x/packages/x-components/src/components/animations/collapse-height.vue?rollup-plugin-vue=styles.0.css',{source:css});
+
+export { css, css as default };
+//# sourceMappingURL=collapse-height.vue_rollup-plugin-vue_styles.0.vue.js.map

package/js/components/animations/collapse-height.vue_rollup-plugin-vue_styles.0.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapse-height.vue_rollup-plugin-vue_styles.0.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

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

@@ -1,10 +1,9 @@
 import script from './collapse-width.vue_rollup-plugin-vue_script.vue.js';
+import './collapse-width.vue_rollup-plugin-vue_styles.0.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 */
 const __vue_script__ = script;
-
 /* template */
 var __vue_render__ = function () {
   var _vm = this;
@@ -36,17 +35,15 @@ var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__ = function (inject) {
-    if (!inject) return
-    inject("data-v-16c7537f_0", { source: ".x-collapse-width--enter-active[data-v-16c7537f], .x-collapse-width--leave-active[data-v-16c7537f] {\n  transition: width 0.3s ease-out;\n  overflow: hidden;\n}", map: undefined, media: undefined });
-
-  };
+  const __vue_inject_styles__ = undefined;
   /* scoped */
   const __vue_scope_id__ = "data-v-16c7537f";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */
   const __vue_is_functional_template__ = false;
+  /* style inject */
+  
   /* style inject SSR */
   
   /* style inject shadow dom */
@@ -61,7 +58,7 @@ __vue_render__._withStripped = true;
     __vue_is_functional_template__,
     __vue_module_identifier__,
     false,
-    __vue_create_injector__,
+    undefined,
     undefined,
     undefined
   );

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    v-bind=\"$attrs\"\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    inheritAttrs: false\n  })\n  export default class CollapseWidth extends Vue {\n    // TODO Add support for extending enter, after-enter and leave transitions\n  }\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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    v-bind=\"$attrs\"\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    inheritAttrs: false\n  })\n  export default class CollapseWidth extends Vue {\n    // TODO Add support for extending enter, after-enter and leave transitions\n  }\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_styles.0.vue.js

@@ -0,0 +1,7 @@
+import { createInjector } from 'vue-runtime-helpers';
+
+var css = ".x-collapse-width--enter-active[data-v-16c7537f], .x-collapse-width--leave-active[data-v-16c7537f] {\n  transition: width 0.3s ease-out;\n  overflow: hidden;\n}";
+const injector=createInjector({});injector('/__w/x/x/packages/x-components/src/components/animations/collapse-width.vue?rollup-plugin-vue=styles.0.css',{source:css});
+
+export { css, css as default };
+//# sourceMappingURL=collapse-width.vue_rollup-plugin-vue_styles.0.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"collapse-width.vue_rollup-plugin-vue_styles.0.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

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

@@ -1,10 +1,9 @@
 import script from './cross-fade.vue_rollup-plugin-vue_script.vue.js';
+import './cross-fade.vue_rollup-plugin-vue_styles.0.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 */
 const __vue_script__ = script;
-
 /* template */
 var __vue_render__ = function () {
   var _vm = this;
@@ -29,17 +28,15 @@ var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__ = function (inject) {
-    if (!inject) return
-    inject("data-v-0367569a_0", { source: ".x-cross-fade--enter-active[data-v-0367569a], .x-cross-fade--leave-active[data-v-0367569a] {\n  transition: opacity 0.25s ease-in-out;\n}\n.x-cross-fade--leave-active[data-v-0367569a] {\n  position: absolute;\n}\n.x-cross-fade--leave-to[data-v-0367569a], .x-cross-fade--enter[data-v-0367569a] {\n  opacity: 0;\n}", map: undefined, media: undefined });
-
-  };
+  const __vue_inject_styles__ = undefined;
   /* scoped */
   const __vue_scope_id__ = "data-v-0367569a";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */
   const __vue_is_functional_template__ = false;
+  /* style inject */
+  
   /* style inject SSR */
   
   /* style inject shadow dom */
@@ -54,7 +51,7 @@ __vue_render__._withStripped = true;
     __vue_is_functional_template__,
     __vue_module_identifier__,
     false,
-    __vue_create_injector__,
+    undefined,
     undefined,
     undefined
   );

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\" v-bind=\"$attrs\">\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n\n  /**\n   * Renders a transition wrapping the element passed in the default slot. The transition\n   * fades between the two toggled elements at the same time.\n   *\n   * @public\n   */\n  @Component({\n    inheritAttrs: false\n  })\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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\" v-bind=\"$attrs\">\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n\n  /**\n   * Renders a transition wrapping the element passed in the default slot. The transition\n   * fades between the two toggled elements at the same time.\n   *\n   * @public\n   */\n  @Component({\n    inheritAttrs: false\n  })\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_styles.0.vue.js

@@ -0,0 +1,7 @@
+import { createInjector } from 'vue-runtime-helpers';
+
+var css = ".x-cross-fade--enter-active[data-v-0367569a], .x-cross-fade--leave-active[data-v-0367569a] {\n  transition: opacity 0.25s ease-in-out;\n}\n.x-cross-fade--leave-active[data-v-0367569a] {\n  position: absolute;\n}\n.x-cross-fade--leave-to[data-v-0367569a], .x-cross-fade--enter[data-v-0367569a] {\n  opacity: 0;\n}";
+const injector=createInjector({});injector('/__w/x/x/packages/x-components/src/components/animations/cross-fade.vue?rollup-plugin-vue=styles.0.css',{source:css});
+
+export { css, css as default };
+//# sourceMappingURL=cross-fade.vue_rollup-plugin-vue_styles.0.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cross-fade.vue_rollup-plugin-vue_styles.0.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

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

@@ -1,10 +1,9 @@
 import script from './fade-and-slide.vue_rollup-plugin-vue_script.vue.js';
+import './fade-and-slide.vue_rollup-plugin-vue_styles.0.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 */
 const __vue_script__ = script;
-
 /* template */
 var __vue_render__ = function () {
   var _vm = this;
@@ -32,17 +31,15 @@ var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__ = function (inject) {
-    if (!inject) return
-    inject("data-v-7592ba5c_0", { source: ".x-fade-and-slide[data-v-7592ba5c] .x-fade-and-slide--move, .x-fade-and-slide[data-v-7592ba5c] .x-fade-and-slide--enter-active, .x-fade-and-slide[data-v-7592ba5c] .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-7592ba5c] .x-fade-and-slide--enter, .x-fade-and-slide[data-v-7592ba5c] .x-fade-and-slide--leave-to {\n  transform: translate(-20%, 0);\n  opacity: 0;\n}\n.x-fade-and-slide[data-v-7592ba5c] .x-fade-and-slide--leave-active {\n  position: absolute;\n}", map: undefined, media: undefined });
-
-  };
+  const __vue_inject_styles__ = undefined;
   /* scoped */
   const __vue_scope_id__ = "data-v-7592ba5c";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */
   const __vue_is_functional_template__ = false;
+  /* style inject */
+  
   /* style inject SSR */
   
   /* style inject shadow dom */
@@ -57,7 +54,7 @@ __vue_render__._withStripped = true;
     __vue_is_functional_template__,
     __vue_module_identifier__,
     false,
-    __vue_create_injector__,
+    undefined,
     undefined,
     undefined
   );

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    v-bind=\"$attrs\"\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    inheritAttrs: false\n  })\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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    v-bind=\"$attrs\"\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    inheritAttrs: false\n  })\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_styles.0.vue.js

@@ -0,0 +1,7 @@
+import { createInjector } from 'vue-runtime-helpers';
+
+var css = ".x-fade-and-slide[data-v-7592ba5c] .x-fade-and-slide--move, .x-fade-and-slide[data-v-7592ba5c] .x-fade-and-slide--enter-active, .x-fade-and-slide[data-v-7592ba5c] .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-7592ba5c] .x-fade-and-slide--enter, .x-fade-and-slide[data-v-7592ba5c] .x-fade-and-slide--leave-to {\n  transform: translate(-20%, 0);\n  opacity: 0;\n}\n.x-fade-and-slide[data-v-7592ba5c] .x-fade-and-slide--leave-active {\n  position: absolute;\n}";
+const injector=createInjector({});injector('/__w/x/x/packages/x-components/src/components/animations/fade-and-slide.vue?rollup-plugin-vue=styles.0.css',{source:css});
+
+export { css, css as default };
+//# sourceMappingURL=fade-and-slide.vue_rollup-plugin-vue_styles.0.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fade-and-slide.vue_rollup-plugin-vue_styles.0.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

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

@@ -1,10 +1,9 @@
 import script from './fade.vue_rollup-plugin-vue_script.vue.js';
+import './fade.vue_rollup-plugin-vue_styles.0.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 */
 const __vue_script__ = script;
-
 /* template */
 var __vue_render__ = function () {
   var _vm = this;
@@ -29,17 +28,15 @@ var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__ = function (inject) {
-    if (!inject) return
-    inject("data-v-7c9e4e70_0", { source: ".x-fade--enter-active[data-v-7c9e4e70], .x-fade--leave-active[data-v-7c9e4e70] {\n  transition: opacity 0.25s ease-in-out;\n}\n.x-fade--leave-to[data-v-7c9e4e70], .x-fade--enter[data-v-7c9e4e70] {\n  opacity: 0;\n}", map: undefined, media: undefined });
-
-  };
+  const __vue_inject_styles__ = undefined;
   /* scoped */
   const __vue_scope_id__ = "data-v-7c9e4e70";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */
   const __vue_is_functional_template__ = false;
+  /* style inject */
+  
   /* style inject SSR */
   
   /* style inject shadow dom */
@@ -54,7 +51,7 @@ __vue_render__._withStripped = true;
     __vue_is_functional_template__,
     __vue_module_identifier__,
     false,
-    __vue_create_injector__,
+    undefined,
     undefined,
     undefined
   );