@vaadin/form-layout 24.6.0-alpha2 → 24.6.0-alpha3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +10 -10
- package/src/vaadin-form-layout.js +23 -0
- package/web-types.json +1 -1
- package/web-types.lit.json +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/form-layout",
|
|
3
|
-
"version": "24.6.0-
|
|
3
|
+
"version": "24.6.0-alpha3",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,22 +36,22 @@
|
|
|
36
36
|
],
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@polymer/polymer": "^3.0.0",
|
|
39
|
-
"@vaadin/a11y-base": "24.6.0-
|
|
40
|
-
"@vaadin/component-base": "24.6.0-
|
|
41
|
-
"@vaadin/vaadin-lumo-styles": "24.6.0-
|
|
42
|
-
"@vaadin/vaadin-material-styles": "24.6.0-
|
|
43
|
-
"@vaadin/vaadin-themable-mixin": "24.6.0-
|
|
39
|
+
"@vaadin/a11y-base": "24.6.0-alpha3",
|
|
40
|
+
"@vaadin/component-base": "24.6.0-alpha3",
|
|
41
|
+
"@vaadin/vaadin-lumo-styles": "24.6.0-alpha3",
|
|
42
|
+
"@vaadin/vaadin-material-styles": "24.6.0-alpha3",
|
|
43
|
+
"@vaadin/vaadin-themable-mixin": "24.6.0-alpha3"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
|
-
"@vaadin/chai-plugins": "24.6.0-
|
|
47
|
-
"@vaadin/custom-field": "24.6.0-
|
|
46
|
+
"@vaadin/chai-plugins": "24.6.0-alpha3",
|
|
47
|
+
"@vaadin/custom-field": "24.6.0-alpha3",
|
|
48
48
|
"@vaadin/testing-helpers": "^1.0.0",
|
|
49
|
-
"@vaadin/text-field": "24.6.0-
|
|
49
|
+
"@vaadin/text-field": "24.6.0-alpha3",
|
|
50
50
|
"sinon": "^18.0.0"
|
|
51
51
|
},
|
|
52
52
|
"web-types": [
|
|
53
53
|
"web-types.json",
|
|
54
54
|
"web-types.lit.json"
|
|
55
55
|
],
|
|
56
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "f917e587caaf86b3d55598233811409b0f34ff69"
|
|
57
57
|
}
|
|
@@ -240,6 +240,11 @@ class FormLayout extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))
|
|
|
240
240
|
_labelsOnTop: {
|
|
241
241
|
type: Boolean,
|
|
242
242
|
},
|
|
243
|
+
|
|
244
|
+
/** @private */
|
|
245
|
+
__isVisible: {
|
|
246
|
+
type: Boolean,
|
|
247
|
+
},
|
|
243
248
|
};
|
|
244
249
|
}
|
|
245
250
|
|
|
@@ -264,6 +269,22 @@ class FormLayout extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))
|
|
|
264
269
|
this.addEventListener('animationend', this.__onAnimationEnd);
|
|
265
270
|
}
|
|
266
271
|
|
|
272
|
+
constructor() {
|
|
273
|
+
super();
|
|
274
|
+
|
|
275
|
+
this.__intersectionObserver = new IntersectionObserver(([entry]) => {
|
|
276
|
+
if (!entry.isIntersecting) {
|
|
277
|
+
// Prevent possible jump when layout becomes visible
|
|
278
|
+
this.$.layout.style.opacity = 0;
|
|
279
|
+
}
|
|
280
|
+
if (!this.__isVisible && entry.isIntersecting) {
|
|
281
|
+
this._updateLayout();
|
|
282
|
+
this.$.layout.style.opacity = '';
|
|
283
|
+
}
|
|
284
|
+
this.__isVisible = entry.isIntersecting;
|
|
285
|
+
});
|
|
286
|
+
}
|
|
287
|
+
|
|
267
288
|
/** @protected */
|
|
268
289
|
connectedCallback() {
|
|
269
290
|
super.connectedCallback();
|
|
@@ -272,6 +293,7 @@ class FormLayout extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))
|
|
|
272
293
|
requestAnimationFrame(() => this._updateLayout());
|
|
273
294
|
|
|
274
295
|
this._observeChildrenColspanChange();
|
|
296
|
+
this.__intersectionObserver.observe(this);
|
|
275
297
|
}
|
|
276
298
|
|
|
277
299
|
/** @protected */
|
|
@@ -280,6 +302,7 @@ class FormLayout extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))
|
|
|
280
302
|
|
|
281
303
|
this.__mutationObserver.disconnect();
|
|
282
304
|
this.__childObserver.disconnect();
|
|
305
|
+
this.__intersectionObserver.disconnect();
|
|
283
306
|
}
|
|
284
307
|
|
|
285
308
|
/** @private */
|
package/web-types.json
CHANGED
package/web-types.lit.json
CHANGED