@vaadin/board 22.0.2 → 23.0.0-alpha4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/board",
-  "version": "22.0.2",
+  "version": "23.0.0-alpha4",
   "publishConfig": {
     "access": "public"
   },
@@ -18,6 +18,7 @@
   },
   "main": "vaadin-board.js",
   "module": "vaadin-board.js",
+  "type": "module",
   "files": [
     "src",
     "theme",
@@ -35,9 +36,8 @@
     "polymer"
   ],
   "dependencies": {
-    "@polymer/iron-resizable-behavior": "^3.0.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "^22.0.2",
+    "@vaadin/component-base": "23.0.0-alpha4",
     "@vaadin/vaadin-license-checker": "^2.1.0"
   },
   "devDependencies": {
@@ -45,5 +45,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.1"
   },
-  "gitHead": "df21370c4a655a38eac11f79686021ab3b0887ad"
+  "gitHead": "81e2deee5147bb7c1f4884760f4598613306f1fb"
 }

package/src/vaadin-board-row.d.ts

@@ -1,9 +1,10 @@
 /**
  * @license
- * Copyright (c) 2017 - 2021 Vaadin Ltd
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 
 /**
  * `<vaadin-board-row>` is a web component that together with `<vaadin-board>` component allows
@@ -39,12 +40,14 @@ import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
  * `--vaadin-board-width-small` | Determines the width where mode changes from `small` to `medium` | `600px`
  * `--vaadin-board-width-medium` | Determines the width where mode changes from `medium` to `large` | `960px`
  */
-declare class BoardRow extends ElementMixin(HTMLElement) {
+declare class BoardRow extends ResizeMixin(ElementMixin(HTMLElement)) {
   /**
    * Redraws the row, if necessary.
    *
    * In most cases, a board row will redraw itself if your reconfigure it.
-   * If you dynamically change CSS which affects the row, then you need to call this method.
+   * If you dynamically change breakpoints
+   * `--vaadin-board-width-small` or `--vaadin-board-width-medium`,
+   * then you need to call this method.
    */
   redraw(): void;
 }

package/src/vaadin-board-row.js

@@ -1,15 +1,13 @@
 /**
  * @license
- * Copyright (c) 2017 - 2021 Vaadin Ltd
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
  */
-import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
 import { DomIf } from '@polymer/polymer/lib/elements/dom-if.js';
 import { DomRepeat } from '@polymer/polymer/lib/elements/dom-repeat.js';
-import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
-import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 
 const CLASSES = {
   SMALL: 'small',
@@ -53,8 +51,9 @@ const CLASSES = {
  *
  * @extends HTMLElement
  * @mixes ElementMixin
+ * @mixes ResizeMixin
  */
-class BoardRow extends ElementMixin(mixinBehaviors([IronResizableBehavior], PolymerElement)) {
+class BoardRow extends ResizeMixin(ElementMixin(PolymerElement)) {
   static get template() {
     return html`
       <style>
@@ -82,7 +81,6 @@ class BoardRow extends ElementMixin(mixinBehaviors([IronResizableBehavior], Poly
 
   constructor() {
     super();
-    this._onIronResize = this._onIronResize.bind(this);
     this._oldWidth = 0;
     this._oldBreakpoints = { smallSize: 600, mediumSize: 960 };
     this._oldFlexBasis = [];
@@ -91,26 +89,14 @@ class BoardRow extends ElementMixin(mixinBehaviors([IronResizableBehavior], Poly
   /** @protected */
   ready() {
     super.ready();
-    this.addEventListener('iron-resize', this._onIronResize, true);
-    this.$.insertionPoint.addEventListener('slotchange', this.redraw.bind(this));
-    afterNextRender(this, function () {
-      //force this as an interested resizable of parent
-      this.dispatchEvent(
-        new CustomEvent('iron-request-resize-notifications', {
-          node: this,
-          bubbles: true,
-          cancelable: true,
-          composed: true,
-          detail: {}
-        })
-      );
-    });
+
+    this.$.insertionPoint.addEventListener('slotchange', () => this.redraw());
   }
 
   /** @protected */
   connectedCallback() {
     super.connectedCallback();
-    afterNextRender(this, this._onIronResize);
+    this._onResize();
   }
 
   /**
@@ -177,7 +163,7 @@ class BoardRow extends ElementMixin(mixinBehaviors([IronResizableBehavior], Poly
     let spaceLeft = 4;
     let returnBoardCols = [];
     nodes.forEach((node, i) => {
-      spaceLeft = spaceLeft - boardCols[i];
+      spaceLeft -= boardCols[i];
     });
 
     if (spaceLeft < 0) {
@@ -203,9 +189,9 @@ class BoardRow extends ElementMixin(mixinBehaviors([IronResizableBehavior], Poly
   _removeExtraNodesFromDOM(boardCols, nodes) {
     let isErrorReported = false;
     let spaceLeft = 4;
-    let returnNodes = [];
+    const returnNodes = [];
     nodes.forEach((node, i) => {
-      spaceLeft = spaceLeft - boardCols[i];
+      spaceLeft -= boardCols[i];
       if (spaceLeft < 0) {
         if (!isErrorReported) {
           isErrorReported = true;
@@ -223,14 +209,19 @@ class BoardRow extends ElementMixin(mixinBehaviors([IronResizableBehavior], Poly
    * Redraws the row, if necessary.
    *
    * In most cases, a board row will redraw itself if your reconfigure it.
-   * If you dynamically change CSS which affects the row, then you need to call this method.
+   * If you dynamically change breakpoints
+   * --vaadin-board-width-small or --vaadin-board-width-medium,
+   * then you need to call this method.
    */
   redraw() {
     this._recalculateFlexBasis(true);
   }
 
-  /** @private */
-  _onIronResize() {
+  /**
+   * @protected
+   * @override
+   */
+  _onResize() {
     this._recalculateFlexBasis(false);
   }
 
@@ -245,7 +236,7 @@ class BoardRow extends ElementMixin(mixinBehaviors([IronResizableBehavior], Poly
       breakpoints.mediumSize != this._oldBreakpoints.mediumSize
     ) {
       const nodes = this.$.insertionPoint.assignedNodes({ flatten: true });
-      const isElementNode = function (node) {
+      const isElementNode = (node) => {
         return !(node.nodeType === node.TEXT_NODE || node instanceof DomRepeat || node instanceof DomIf);
       };
       const filteredNodes = nodes.filter(isElementNode);
@@ -253,7 +244,7 @@ class BoardRow extends ElementMixin(mixinBehaviors([IronResizableBehavior], Poly
       const boardCols = this._parseBoardCols(filteredNodes);
       const colsInRow = boardCols.reduce((a, b) => a + b, 0);
       this._removeExtraNodesFromDOM(boardCols, filteredNodes).forEach((e, i) => {
-        let newFlexBasis = this._calculateFlexBasis(boardCols[i], width, colsInRow, breakpoints);
+        const newFlexBasis = this._calculateFlexBasis(boardCols[i], width, colsInRow, breakpoints);
         if (forceResize || !this._oldFlexBasis[i] || this._oldFlexBasis[i] != newFlexBasis) {
           this._oldFlexBasis[i] = newFlexBasis;
           e.style.flexBasis = newFlexBasis;

package/src/vaadin-board.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2021 Vaadin Ltd
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
@@ -28,8 +28,9 @@ declare class Board extends ElementMixin(HTMLElement) {
   /**
    * Redraws the board and all rows inside it, if necessary.
    *
-   * In most cases, board will redraw itself if your reconfigure it. If you dynamically change CSS
-   * which affects this element, then you need to call this method.
+   * In most cases, board will redraw itself if your reconfigure it. If you dynamically change
+   * breakpoints `--vaadin-board-width-small` or `--vaadin-board-width-medium`,
+   * then you need to call this method.
    */
   redraw(): void;
 }

package/src/vaadin-board.js

@@ -1,14 +1,13 @@
 /**
  * @license
- * Copyright (c) 2017 - 2021 Vaadin Ltd
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
  */
 import '@vaadin/vaadin-license-checker/vaadin-license-checker.js';
 import './vaadin-board-row.js';
-import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
-import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { BoardRow } from './vaadin-board-row.js';
 
 /**
  * `<vaadin-board>` is a web component to create flexible responsive layouts
@@ -32,7 +31,7 @@ import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
  * @extends HTMLElement
  * @mixes ElementMixin
  */
-class Board extends ElementMixin(mixinBehaviors([IronResizableBehavior], PolymerElement)) {
+class Board extends ElementMixin(PolymerElement) {
   static get template() {
     return html`
       <style>
@@ -65,11 +64,12 @@ class Board extends ElementMixin(mixinBehaviors([IronResizableBehavior], Polymer
   /**
    * Redraws the board and all rows inside it, if necessary.
    *
-   * In most cases, board will redraw itself if your reconfigure it. If you dynamically change CSS
-   * which affects this element, then you need to call this method.
+   * In most cases, board will redraw itself if your reconfigure it. If you dynamically change
+   * breakpoints `--vaadin-board-width-small` or `--vaadin-board-width-medium`,
+   * then you need to call this method.
    */
   redraw() {
-    this.notifyResize();
+    [...this.querySelectorAll('*')].filter((node) => node instanceof BoardRow).forEach((row) => row.redraw());
   }
 }