@empathyco/x-components 3.0.0-alpha.223 → 3.0.0-alpha.225

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.225](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.224...@empathyco/x-components@3.0.0-alpha.225) (2022-11-11)
+
+**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.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

package/design-system/full-theme.css

@@ -56,11 +56,9 @@
 }
 [dir="ltr"] .x-badge {
   right: calc(var(--x-size-width-badge-default) / 4);
-}
-[dir="rtl"] .x-badge {
+}[dir="rtl"] .x-badge {
   left: calc(var(--x-size-width-badge-default) / 4);
-}
-.x-badge {
+}.x-badge {
   border-radius: var(--x-size-border-radius-badge-default);
   border-style: solid;
   border-width: var(--x-size-border-width-badge-default);
@@ -538,17 +536,13 @@
 }
 [dir="ltr"] .x-facet {
   border-right-width: var(--x-size-border-width-right-facet-default);
-}
-[dir="rtl"] .x-facet {
+}[dir="rtl"] .x-facet {
   border-left-width: var(--x-size-border-width-right-facet-default);
-}
-[dir="ltr"] .x-facet {
+}[dir="ltr"] .x-facet {
   border-left-width: var(--x-size-border-width-left-facet-default);
-}
-[dir="rtl"] .x-facet {
+}[dir="rtl"] .x-facet {
   border-right-width: var(--x-size-border-width-left-facet-default);
-}
-.x-facet {
+}.x-facet {
   display: flex;
   flex-flow: column nowrap;
   justify-content: flex-start;
@@ -704,29 +698,21 @@
 }
 [dir="ltr"] .x-filter {
   padding-left: var(--x-size-padding-left-filter-default);
-}
-[dir="rtl"] .x-filter {
+}[dir="rtl"] .x-filter {
   padding-right: var(--x-size-padding-left-filter-default);
-}
-[dir="ltr"] .x-filter {
+}[dir="ltr"] .x-filter {
   padding-right: var(--x-size-padding-right-filter-default);
-}
-[dir="rtl"] .x-filter {
+}[dir="rtl"] .x-filter {
   padding-left: var(--x-size-padding-right-filter-default);
-}
-[dir="ltr"] .x-filter {
+}[dir="ltr"] .x-filter {
   border-right-width: var(--x-size-border-width-right-filter-default);
-}
-[dir="rtl"] .x-filter {
+}[dir="rtl"] .x-filter {
   border-left-width: var(--x-size-border-width-right-filter-default);
-}
-[dir="ltr"] .x-filter {
+}[dir="ltr"] .x-filter {
   border-left-width: var(--x-size-border-width-left-filter-default);
-}
-[dir="rtl"] .x-filter {
+}[dir="rtl"] .x-filter {
   border-right-width: var(--x-size-border-width-left-filter-default);
-}
-.x-filter {
+}.x-filter {
   display: inline-flex;
   justify-content: flex-start;
   align-items: flex-start;
@@ -960,17 +946,13 @@
 }
 [dir="ltr"] .x-input-group {
   border-right-width: var(--x-size-border-width-right-input-group-default);
-}
-[dir="rtl"] .x-input-group {
+}[dir="rtl"] .x-input-group {
   border-left-width: var(--x-size-border-width-right-input-group-default);
-}
-[dir="ltr"] .x-input-group {
+}[dir="ltr"] .x-input-group {
   border-left-width: var(--x-size-border-width-left-input-group-default);
-}
-[dir="rtl"] .x-input-group {
+}[dir="rtl"] .x-input-group {
   border-right-width: var(--x-size-border-width-left-input-group-default);
-}
-.x-input-group {
+}.x-input-group {
   display: flex;
   flex-flow: row nowrap;
   align-content: center;
@@ -1224,29 +1206,21 @@
 }
 [dir="ltr"] .x-input {
   padding-left: var(--x-size-padding-left-input-default);
-}
-[dir="rtl"] .x-input {
+}[dir="rtl"] .x-input {
   padding-right: var(--x-size-padding-left-input-default);
-}
-[dir="ltr"] .x-input {
+}[dir="ltr"] .x-input {
   padding-right: var(--x-size-padding-right-input-default);
-}
-[dir="rtl"] .x-input {
+}[dir="rtl"] .x-input {
   padding-left: var(--x-size-padding-right-input-default);
-}
-[dir="ltr"] .x-input {
+}[dir="ltr"] .x-input {
   border-right-width: var(--x-size-border-width-right-input-default);
-}
-[dir="rtl"] .x-input {
+}[dir="rtl"] .x-input {
   border-left-width: var(--x-size-border-width-right-input-default);
-}
-[dir="ltr"] .x-input {
+}[dir="ltr"] .x-input {
   border-left-width: var(--x-size-border-width-left-input-default);
-}
-[dir="rtl"] .x-input {
+}[dir="rtl"] .x-input {
   border-right-width: var(--x-size-border-width-left-input-default);
-}
-.x-input {
+}.x-input {
   position: relative;
   display: flex;
   overflow: hidden;
@@ -2366,17 +2340,13 @@
 }
 [dir="ltr"] .x-message {
   border-left-width: var(--x-size-border-width-left-message-default);
-}
-[dir="rtl"] .x-message {
+}[dir="rtl"] .x-message {
   border-right-width: var(--x-size-border-width-left-message-default);
-}
-[dir="ltr"] .x-message {
+}[dir="ltr"] .x-message {
   border-right-width: var(--x-size-border-width-right-message-default);
-}
-[dir="rtl"] .x-message {
+}[dir="rtl"] .x-message {
   border-left-width: var(--x-size-border-width-right-message-default);
-}
-.x-message {
+}.x-message {
   display: flex;
   flex-flow: column nowrap;
   justify-content: var(--x-string-justify-message-default);
@@ -3315,29 +3285,21 @@
 }
 [dir="ltr"] .x-suggestion-group {
   padding-left: var(--x-size-padding-left-suggestion-group-default);
-}
-[dir="rtl"] .x-suggestion-group {
+}[dir="rtl"] .x-suggestion-group {
   padding-right: var(--x-size-padding-left-suggestion-group-default);
-}
-[dir="ltr"] .x-suggestion-group {
+}[dir="ltr"] .x-suggestion-group {
   padding-right: var(--x-size-padding-right-suggestion-group-default);
-}
-[dir="rtl"] .x-suggestion-group {
+}[dir="rtl"] .x-suggestion-group {
   padding-left: var(--x-size-padding-right-suggestion-group-default);
-}
-[dir="ltr"] .x-suggestion-group {
+}[dir="ltr"] .x-suggestion-group {
   border-left-width: var(--x-size-border-width-left-suggestion-group-default);
-}
-[dir="rtl"] .x-suggestion-group {
+}[dir="rtl"] .x-suggestion-group {
   border-right-width: var(--x-size-border-width-left-suggestion-group-default);
-}
-[dir="ltr"] .x-suggestion-group {
+}[dir="ltr"] .x-suggestion-group {
   border-right-width: var(--x-size-border-width-right-suggestion-group-default);
-}
-[dir="rtl"] .x-suggestion-group {
+}[dir="rtl"] .x-suggestion-group {
   border-left-width: var(--x-size-border-width-right-suggestion-group-default);
-}
-.x-suggestion-group {
+}.x-suggestion-group {
   display: flex;
   flex-flow: row nowrap;
   box-sizing: border-box;
@@ -3406,35 +3368,25 @@
 }
 [dir="ltr"] .x-suggestion {
   text-align: left;
-}
-[dir="rtl"] .x-suggestion {
+}[dir="rtl"] .x-suggestion {
   text-align: right;
-}
-[dir="ltr"] .x-suggestion {
+}[dir="ltr"] .x-suggestion {
   padding-left: var(--x-size-padding-left-suggestion-default);
-}
-[dir="rtl"] .x-suggestion {
+}[dir="rtl"] .x-suggestion {
   padding-right: var(--x-size-padding-left-suggestion-default);
-}
-[dir="ltr"] .x-suggestion {
+}[dir="ltr"] .x-suggestion {
   padding-right: var(--x-size-padding-right-suggestion-default);
-}
-[dir="rtl"] .x-suggestion {
+}[dir="rtl"] .x-suggestion {
   padding-left: var(--x-size-padding-right-suggestion-default);
-}
-[dir="ltr"] .x-suggestion {
+}[dir="ltr"] .x-suggestion {
   border-left-width: var(--x-size-border-width-left-suggestion-default);
-}
-[dir="rtl"] .x-suggestion {
+}[dir="rtl"] .x-suggestion {
   border-right-width: var(--x-size-border-width-left-suggestion-default);
-}
-[dir="ltr"] .x-suggestion {
+}[dir="ltr"] .x-suggestion {
   border-right-width: var(--x-size-border-width-right-suggestion-default);
-}
-[dir="rtl"] .x-suggestion {
+}[dir="rtl"] .x-suggestion {
   border-left-width: var(--x-size-border-width-right-suggestion-default);
-}
-.x-suggestion {
+}.x-suggestion {
   display: flex;
   flex-flow: row nowrap;
   box-sizing: border-box;
@@ -3610,29 +3562,21 @@
 }
 [dir="ltr"] .x-tag {
   border-left-width: var(--x-size-border-width-left-tag-default);
-}
-[dir="rtl"] .x-tag {
+}[dir="rtl"] .x-tag {
   border-right-width: var(--x-size-border-width-left-tag-default);
-}
-[dir="ltr"] .x-tag {
+}[dir="ltr"] .x-tag {
   border-right-width: var(--x-size-border-width-right-tag-default);
-}
-[dir="rtl"] .x-tag {
+}[dir="rtl"] .x-tag {
   border-left-width: var(--x-size-border-width-right-tag-default);
-}
-[dir="ltr"] .x-tag {
+}[dir="ltr"] .x-tag {
   padding-left: var(--x-size-padding-left-tag-default);
-}
-[dir="rtl"] .x-tag {
+}[dir="rtl"] .x-tag {
   padding-right: var(--x-size-padding-left-tag-default);
-}
-[dir="ltr"] .x-tag {
+}[dir="ltr"] .x-tag {
   padding-right: var(--x-size-padding-right-tag-default);
-}
-[dir="rtl"] .x-tag {
+}[dir="rtl"] .x-tag {
   padding-left: var(--x-size-padding-right-tag-default);
-}
-.x-tag {
+}.x-tag {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3992,6 +3936,7 @@
 .x-text--stroke.x-small {
   --x-string-text-decoration-small: line-through;
 }
+
 .x-background--lead {
   background-color: var(--x-color-base-lead) !important;
 }
@@ -7291,4 +7236,3 @@
 .x-normal-case {
   text-transform: none;
 }
-

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.223",
+  "version": "3.0.0-alpha.225",
   "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.27",
+    "@empathyco/x-tailwindcss": "^0.2.0-alpha.28",
     "@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": "b168053da1441d74e3591807e6f32800a5faf0b8"
+  "gitHead": "d763da706faf0b24b1c56051acc914416ac02fc0"
 }

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"}