@empathyco/x-components 3.0.0-alpha.222 → 3.0.0-alpha.224

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-alpha.224](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.223...@empathyco/x-components@3.0.0-alpha.224) (2022-11-11)
+
+### Bug Fixes
+
+- **animations:** make content-visibility CSS property and createCollapseAnimationMixin work
+  together (#839)
+  ([50d5c87](https://github.com/empathyco/x/commit/50d5c8744e5a8d2c8db5aed33e71bd8a39a76cf3))
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [3.0.0-alpha.223](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.222...@empathyco/x-components@3.0.0-alpha.223) (2022-11-10)
+
+**Note:** Version bump only for package @empathyco/x-components
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 ## [3.0.0-alpha.222](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.221...@empathyco/x-components@3.0.0-alpha.222) (2022-11-10)
 
 ### Features

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

@@ -12,12 +12,23 @@ function createCollapseAnimationMixin(property) {
             /**
              * Changes the element's animated property from 0 to the element's content size.
              *
+             * @remarks `content-visibility` CSS property boosts the rendering performance waiting to be
+             * needed until rendering the content. This behaviour collides with this animation method.
+             * When the `scrollProperty` is evaluated, the content has not been rendered yet and the value
+             * is 0 so nothing is animated. To avoid this behaviour, we change the `content-visibility` to
+             * default value, force a layer repaint and then, evaluate the `scrollProperty` value which
+             * now has value. Then we restore the `content-visibility` value to its previous state.
+             *
              * @param element - The DOM element that is going to be animated.
              * @internal
              */
             expand(element) {
                 element.style[property] = '0';
+                const originalValue = element.style['content-visibility'];
+                element.style['content-visibility'] = 'visible';
+                element.getBoundingClientRect();
                 element.style[property] = `${element[scrollProperty]}px`;
+                element.style['content-visibility'] = originalValue;
             },
             /**
              * Removes the animated property from the element.

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "3.0.0-alpha.222",
+  "version": "3.0.0-alpha.224",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -85,7 +85,7 @@
     "@cypress/vue": "~2.2.4",
     "@cypress/webpack-dev-server": "~1.8.4",
     "@empathyco/x-adapter-platform": "^1.0.0-alpha.43",
-    "@empathyco/x-tailwindcss": "^0.2.0-alpha.26",
+    "@empathyco/x-tailwindcss": "^0.2.0-alpha.27",
     "@microsoft/api-documenter": "~7.15.3",
     "@microsoft/api-extractor": "~7.19.4",
     "@rollup/plugin-commonjs": "~21.0.1",
@@ -135,5 +135,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "3a41e63e2cc9611d146378335f892b5e85200435"
+  "gitHead": "b77b5ed8836cc926f9a84be579d276f6b96f9668"
 }

package/types/components/animations/animations.mixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"animations.mixin.d.ts","sourceRoot":"","sources":["../../../../src/components/animations/animations.mixin.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,EAAE,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAC;AAE5C;;GAEG;AACH,aAAK,gBAAgB,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE3C;;;;;;GAMG;AACH,wBAAgB,4BAA4B,CAAC,QAAQ,EAAE,gBAAgB,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAsC9F"}
+{"version":3,"file":"animations.mixin.d.ts","sourceRoot":"","sources":["../../../../src/components/animations/animations.mixin.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,EAAE,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAC;AAE5C;;GAEG;AACH,aAAK,gBAAgB,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE3C;;;;;;GAMG;AACH,wBAAgB,4BAA4B,CAAC,QAAQ,EAAE,gBAAgB,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAiD9F"}