@vaadin/vaadin-board 2.2.0 → 2.2.2

package/README.md

@@ -1,21 +1,18 @@
-[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-board)](https://www.npmjs.com/package/@vaadin/vaadin-board)
-[![Bower version](https://badgen.net/github/release/vaadin/vaadin-board)](https://github.com/vaadin/vaadin-board/releases)
-[![Build Status](https://travis-ci.org/vaadin/vaadin-board.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-board)
-[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
-
- [![Published on Vaadin  Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-board)
-[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadinvaadin-board.svg)](https://vaadin.com/directory/component/vaadinvaadin-board)
+# \<vaadin-board\>
 
+> ⚠️ Starting from Vaadin 20, the source code and issues for this component are migrated to the [`vaadin/web-components`](https://github.com/vaadin/web-components/tree/master/packages/vaadin-board) monorepository.
+> This repository contains the source code and releases of `<vaadin-board>` for the Vaadin versions 10 to 19.
 
-# \<vaadin-board\>
+[&lt;vaadin-board&gt;](https://vaadin.com/components/vaadin-board) is a Web component to create flexible responsive layouts and build nice looking dashboard.
+Vaadin Board key feature is how it effectively reorders the widgets on different screen sizes, maximizing the use of space and looking stunning.
 
 [Live Demo ↗](https://vaadin.com/components/vaadin-board/html-examples)
 |
 [API documentation ↗](https://vaadin.com/components/vaadin-board/html-api)
 
-
-[&lt;vaadin-board&gt;](https://vaadin.com/components/vaadin-board) is a Web component to create flexible responsive layouts and build nice looking dashboard.
-Vaadin Board key feature is how it effectively reorders the widgets on different screen sizes, maximizing the use of space and looking stunning.
+[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-board)](https://www.npmjs.com/package/@vaadin/vaadin-board)
+[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-board)
+[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 
 ```html
 <vaadin-board>
@@ -53,7 +50,7 @@ are only published on npm, not pushed to GitHub repositories.
 
 ### Polymer 2 and HTML Imports compatible version
 
-Install `vaadin-board`: 
+Install `vaadin-board`:
 
 ```sh
 $ bower i vaadin/vaadin-board --save

package/package.json

@@ -13,10 +13,11 @@
   "repository": "vaadin/vaadin-board",
   "homepage": "https://vaadin.com/components",
   "name": "@vaadin/vaadin-board",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "main": "vaadin-board.js",
   "author": "Vaadin Ltd",
   "license": "https://raw.githubusercontent.com/vaadin/vaadin-board/master/LICENSE.txt",
+  "cvdlName": "vaadin-board",
   "bugs": {
     "url": "https://github.com/vaadin/vaadin-board/issues"
   },
@@ -38,10 +39,9 @@
     "@vaadin/vaadin-license-checker": "^2.1.0",
     "@vaadin/vaadin-element-mixin": "^2.4.1"
   },
-  "scripts": {
-    "generate-typings": "gen-typescript-declarations --outDir . --verify"
-  },
   "devDependencies": {
+    "@web-padawan/gen-typescript-declarations": "^1.6.2",
+    "web-component-tester": "6.9.2",
     "@polymer/app-layout": "^3.0.0",
     "wct-browser-legacy": "^1.0.1",
     "@webcomponents/webcomponentsjs": "^2.0.0",
@@ -49,5 +49,9 @@
     "@polymer/iron-icon": "^3.0.0",
     "@vaadin/vaadin-lumo-styles": "^1.6.0",
     "@polymer/iron-component-page": "^4.0.0"
+  },
+  "scripts": {
+    "generate-typings": "gen-typescript-declarations --outDir . --verify",
+    "test": "wct --npm"
   }
 }

package/src/vaadin-board-row.js

@@ -232,9 +232,7 @@ class BoardRowElement extends ElementMixin(mixinBehaviors([IronResizableBehavior
   _recalculateFlexBasis(forceResize) {
     const width = this.getBoundingClientRect().width;
     const breakpoints = this._measureBreakpointsInPx();
-    if (forceResize || width != this._oldWidth
-        || breakpoints.smallSize != this._oldBreakpoints.smallSize
-        || breakpoints.mediumSize != this._oldBreakpoints.mediumSize) {
+    if (forceResize || this._shouldRecalculate(width, breakpoints)) {
       const nodes = this.$.insertionPoint.assignedNodes({ flatten: true });
       const isElementNode = function (node) {
         return !((node.nodeType === node.TEXT_NODE)
@@ -257,6 +255,37 @@ class BoardRowElement extends ElementMixin(mixinBehaviors([IronResizableBehavior
     }
   }
 
+  /** @private */
+  _shouldRecalculate(width, breakpoints) {
+    // Should not recalculate if row is invisible
+    if (this._isElementHidden()) {
+      return false;
+    }
+    return (
+      width !== this._oldWidth ||
+      breakpoints.smallSize !== this._oldBreakpoints.smallSize ||
+      breakpoints.mediumSize !== this._oldBreakpoints.mediumSize
+    );
+  }
+
+  /** @private */
+  _isElementHidden() {
+    // `offsetParent` is `null` when the element itself
+    // or one of its ancestors is hidden with `display: none`.
+    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent
+    // However `offsetParent` is also null when the element is using fixed
+    // positioning, so additionally check if the element takes up layout space.
+    if (this.offsetParent === null && this.clientWidth === 0 && this.clientHeight === 0) {
+      return true;
+    }
+    // Check inline style first to save a re-flow.
+    if (this.style.visibility === 'hidden' || this.style.display === 'none') {
+      return true;
+    }
+    const computedStyle = window.getComputedStyle(this);
+    return computedStyle.visibility === 'hidden' || computedStyle.display === 'none';
+  }
+
   /**
    * Measure the breakpoints in pixels.
    *

package/src/vaadin-board.js

@@ -51,7 +51,11 @@ class BoardElement extends ElementMixin(mixinBehaviors([IronResizableBehavior],
   }
 
   static get version() {
-    return '2.2.0';
+    return '2.2.2';
+  }
+
+  static get cvdlName() {
+    return 'vaadin-board';
   }
 
   /**