@vaadin/board 23.0.0-alpha2 → 23.0.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/board",
-  "version": "23.0.0-alpha2",
+  "version": "23.0.0-beta1",
   "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": "23.0.0-alpha2",
+    "@vaadin/component-base": "23.0.0-beta1",
     "@vaadin/vaadin-license-checker": "^2.1.0"
   },
   "devDependencies": {
@@ -45,5 +45,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.1"
   },
-  "gitHead": "070f586dead02ca41b66717820c647f48bf1665f"
+  "gitHead": "467244b76021176c109df675799b07029b293e58"
 }

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) {
@@ -205,7 +191,7 @@ class BoardRow extends ElementMixin(mixinBehaviors([IronResizableBehavior], Poly
     let spaceLeft = 4;
     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);
   }
 

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());
   }
 }