@vaadin/form-layout - npm Package Compare versions

Comparing version 24.4.11 to 24.4.12

package.json

 {
   "name": "@vaadin/form-layout",
-  "version": "24.4.11",
+  "version": "24.4.12",
   "publishConfig": {
@@ -39,13 +39,13 @@ "access": "public"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "~24.4.11",
-    "@vaadin/component-base": "~24.4.11",
-    "@vaadin/vaadin-lumo-styles": "~24.4.11",
-    "@vaadin/vaadin-material-styles": "~24.4.11",
-    "@vaadin/vaadin-themable-mixin": "~24.4.11"
+    "@vaadin/a11y-base": "~24.4.12",
+    "@vaadin/component-base": "~24.4.12",
+    "@vaadin/vaadin-lumo-styles": "~24.4.12",
+    "@vaadin/vaadin-material-styles": "~24.4.12",
+    "@vaadin/vaadin-themable-mixin": "~24.4.12"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/custom-field": "~24.4.11",
+    "@vaadin/custom-field": "~24.4.12",
     "@vaadin/testing-helpers": "^0.6.0",
-    "@vaadin/text-field": "~24.4.11",
+    "@vaadin/text-field": "~24.4.12",
     "sinon": "^13.0.2"
@@ -57,3 +57,3 @@ },
   ],
-  "gitHead": "1312f60a4bb0b3158428171271fb5c0d88a1b61e"
+  "gitHead": "be0dfd37106dd06e9a55869bd4a3bbdc77c0e277"
 }

src/vaadin-form-layout.js

@@ -243,2 +243,7 @@ /**
       },
+
+      /** @private */
+      __isVisible: {
+        type: Boolean,
+      },
     };
@@ -268,2 +273,18 @@ }
 
+  constructor() {
+    super();
+
+    this.__intersectionObserver = new IntersectionObserver(([entry]) => {
+      if (!entry.isIntersecting) {
+        // Prevent possible jump when layout becomes visible
+        this.$.layout.style.opacity = 0;
+      }
+      if (!this.__isVisible && entry.isIntersecting) {
+        this._updateLayout();
+        this.$.layout.style.opacity = '';
+      }
+      this.__isVisible = entry.isIntersecting;
+    });
+  }
+
   /** @protected */
@@ -277,2 +298,3 @@ connectedCallback() {
     this._observeChildrenColspanChange();
+    this.__intersectionObserver.observe(this);
   }
@@ -286,2 +308,3 @@
     this.__childObserver.disconnect();
+    this.__intersectionObserver.disconnect();
   }
@@ -288,0 +311,0 @@

web-types.json

 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/form-layout",
-  "version": "24.4.11",
+  "version": "24.4.12",
   "description-markup": "markdown",
@@ -6,0 +6,0 @@ "contributions": {

web-types.lit.json

 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/form-layout",
-  "version": "24.4.11",
+  "version": "24.4.12",
   "description-markup": "markdown",
@@ -6,0 +6,0 @@ "framework": "lit",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

68323

increased by0.91%

Lines of code

1314

increased by1.55%

Dependency changes

• Updated@vaadin/a11y-base@~24.4.12

• Updated@vaadin/component-base@~24.4.12

• Updated@vaadin/vaadin-lumo-styles@~24.4.12

• Updated@vaadin/vaadin-material-styles@~24.4.12

• Updated@vaadin/vaadin-themable-mixin@~24.4.12