@vaadin/vaadin-board 22.0.0-alpha4 → 22.0.0-alpha8

package/package.json

@@ -1,10 +1,29 @@
 {
   "name": "@vaadin/vaadin-board",
-  "version": "22.0.0-alpha4",
+  "version": "22.0.0-alpha8",
+  "publishConfig": {
+    "access": "public"
+  },
   "description": "Polymer element to create flexible responsive layouts and build nice looking dashboard.",
+  "license": "https://raw.githubusercontent.com/vaadin/vaadin-board/master/LICENSE.txt",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vaadin/web-components.git",
+    "directory": "packages/vaadin-board"
+  },
+  "author": "Vaadin Ltd",
+  "homepage": "https://vaadin.com/components",
+  "bugs": {
+    "url": "https://github.com/vaadin/vaadin-board/issues"
+  },
   "main": "vaadin-board.js",
   "module": "vaadin-board.js",
-  "repository": "vaadin/vaadin-board",
+  "files": [
+    "src",
+    "theme",
+    "vaadin-*.d.ts",
+    "vaadin-*.js"
+  ],
   "keywords": [
     "Vaadin",
     "Board",
@@ -15,31 +34,8 @@
     "web-component",
     "polymer"
   ],
-  "author": "Vaadin Ltd",
-  "license": "https://raw.githubusercontent.com/vaadin/vaadin-board/master/LICENSE.txt",
-  "bugs": {
-    "url": "https://github.com/vaadin/vaadin-board/issues"
-  },
-  "homepage": "https://vaadin.com/components",
-  "files": [
-    "vaadin-*.d.ts",
-    "vaadin-*.js",
-    "src",
-    "theme"
-  ],
   "dependencies": {
-    "@polymer/iron-resizable-behavior": "^3.0.0",
-    "@polymer/polymer": "^3.0.0",
-    "@vaadin/vaadin-element-mixin": "^22.0.0-alpha4",
-    "@vaadin/vaadin-license-checker": "^2.1.0"
-  },
-  "devDependencies": {
-    "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.2.1",
-    "sinon": "^9.2.1"
-  },
-  "publishConfig": {
-    "access": "public"
+    "@vaadin/board": "22.0.0-alpha8"
   },
-  "gitHead": "86c025abd605d5a4a3c0ae36eb07c34704cee1f2"
+  "gitHead": "c24468526298ee26ad7f7280b59f6c8789e1f75f"
 }

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

@@ -1,53 +1,18 @@
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
+/**
+ * @license
+ * Copyright (c) 2017 - 2021 Vaadin Ltd
+ * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
+ */
+import { BoardRow } from '@vaadin/board/src/vaadin-board-row.js';
 
 /**
- * `<vaadin-board-row>` is a web component that together with `<vaadin-board>` component allows
- * to create flexible responsive layouts and build nice looking dashboard.
- *
- * Each row can contain up to four elements (fewer if colspan is used) and is automatically responsive.
- * The row changes between `large`, `medium` and `small` modes depending on the available width and
- * the set breakpoints.
- *
- * In `large` mode, typically all content is shown side-by-side, in `medium` half of the content is
- * side by side and in `small` mode, content is laid out vertically.
- *
- * The breakpoints can be set using custom CSS properties.
- * By default the breakpoints are `small: <600px`, `medium: < 960px`, `large >= 960px`.
- *
- * ```html
- * <vaadin-board>
- *   <vaadin-board-row>
- *     <div>This could be chart 1</div>
- *     <div>This could be chart 2</div>
- *     <div>This could be chart 3</div>
- *     <div>This could be chart 4</div>
- *   </vaadin-board-row>
- * </vaadin-board>
- * ```
- *
- * ### Styling
- *
- * The following custom properties are available for styling:
- *
- * Custom property | Description | Default
- * ----------------|-------------|-------------
- * `--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`
+ * @deprecated Import `BoardRow` from `@vaadin/board/vaadin-board-row` instead.
  */
-declare class BoardRowElement extends 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.
-   */
-  redraw(): void;
-}
+export type BoardRowElement = BoardRow;
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'vaadin-board-row': BoardRowElement;
-  }
-}
+/**
+ * @deprecated Import `BoardRow` from `@vaadin/board/vaadin-board-row` instead.
+ */
+export const BoardRowElement: typeof BoardRow;
 
-export { BoardRowElement };
+export * from '@vaadin/board/src/vaadin-board-row.js';

package/src/vaadin-board-row.js

@@ -3,292 +3,11 @@
  * Copyright (c) 2017 - 2021 Vaadin Ltd
  * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
  */
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
-import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
-import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
-import { DomRepeat } from '@polymer/polymer/lib/elements/dom-repeat.js';
-import { DomIf } from '@polymer/polymer/lib/elements/dom-if.js';
-import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
-
-const CLASSES = {
-  SMALL: 'small',
-  MEDIUM: 'medium',
-  LARGE: 'large'
-};
+import { BoardRow } from '@vaadin/board/src/vaadin-board-row.js';
 
 /**
- * `<vaadin-board-row>` is a web component that together with `<vaadin-board>` component allows
- * to create flexible responsive layouts and build nice looking dashboard.
- *
- * Each row can contain up to four elements (fewer if colspan is used) and is automatically responsive.
- * The row changes between `large`, `medium` and `small` modes depending on the available width and
- * the set breakpoints.
- *
- * In `large` mode, typically all content is shown side-by-side, in `medium` half of the content is
- * side by side and in `small` mode, content is laid out vertically.
- *
- * The breakpoints can be set using custom CSS properties.
- * By default the breakpoints are `small: <600px`, `medium: < 960px`, `large >= 960px`.
- *
- * ```html
- * <vaadin-board>
- *   <vaadin-board-row>
- *     <div>This could be chart 1</div>
- *     <div>This could be chart 2</div>
- *     <div>This could be chart 3</div>
- *     <div>This could be chart 4</div>
- *   </vaadin-board-row>
- * </vaadin-board>
- * ```
- *
- * ### Styling
- *
- * The following custom properties are available for styling:
- *
- * Custom property | Description | Default
- * ----------------|-------------|-------------
- * `--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`
- *
- * @extends HTMLElement
- * @mixes ElementMixin
+ * @deprecated Import `BoardRow` from `@vaadin/board/vaadin-board-row` instead.
  */
-class BoardRowElement extends ElementMixin(mixinBehaviors([IronResizableBehavior], PolymerElement)) {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: flex;
-          flex-flow: row wrap;
-          align-items: stretch;
-          --small-size: var(--vaadin-board-width-small, 600px);
-          --medium-size: var(--vaadin-board-width-medium, 960px);
-        }
-
-        :host ::slotted(*) {
-          box-sizing: border-box;
-          flex-grow: 1;
-          overflow: hidden;
-        }
-      </style>
-      <slot id="insertionPoint"></slot>
-    `;
-  }
-
-  static get is() {
-    return 'vaadin-board-row';
-  }
-
-  constructor() {
-    super();
-    this._onIronResize = this._onIronResize.bind(this);
-    this._oldWidth = 0;
-    this._oldBreakpoints = { smallSize: 600, mediumSize: 960 };
-    this._oldFlexBasis = [];
-  }
-
-  /** @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: {}
-        })
-      );
-    });
-  }
-
-  /** @protected */
-  connectedCallback() {
-    super.connectedCallback();
-    afterNextRender(this, this._onIronResize);
-  }
-
-  /**
-   * Adds styles for board row based on width.
-   * @private
-   */
-  _addStyleNames(width, breakpoints) {
-    if (width < breakpoints.smallSize) {
-      this.classList.add(CLASSES.SMALL);
-      this.classList.remove(CLASSES.MEDIUM);
-      this.classList.remove(CLASSES.LARGE);
-    } else if (width < breakpoints.mediumSize) {
-      this.classList.remove(CLASSES.SMALL);
-      this.classList.add(CLASSES.MEDIUM);
-      this.classList.remove(CLASSES.LARGE);
-    } else {
-      this.classList.remove(CLASSES.SMALL);
-      this.classList.remove(CLASSES.MEDIUM);
-      this.classList.add(CLASSES.LARGE);
-    }
-  }
-
-  /**
-   * Calculates flex basis based on colSpan, width and breakpoints.
-   * @param {number} colSpan colspan value of the row
-   * @param {number} width width of the row in px
-   * @param {number} colsInRow number of columns in the row
-   * @param {object} breakpoints object with smallSize and mediumSize number properties, which tells
-   * where the row should switch rendering size in pixels.
-   * @private
-   */
-  _calculateFlexBasis(colSpan, width, colsInRow, breakpoints) {
-    if (width < breakpoints.smallSize) {
-      colsInRow = 1;
-    } else if (width < breakpoints.mediumSize && colsInRow == 4) {
-      colsInRow = 2;
-    }
-    let flexBasis = (colSpan / colsInRow) * 100;
-    flexBasis = flexBasis > 100 ? 100 : flexBasis;
-    return flexBasis + '%';
-  }
-
-  /** @private */
-  _reportError() {
-    const errorMessage = 'The column configuration is not valid; column count should add up to 3 or 4.';
-    console.warn(errorMessage, 'check: \r\n' + this.outerHTML);
-  }
-
-  /**
-   * Parses board-cols from DOM.
-   * If there is not enough space in the row drop board cols.
-   * @param {!Array<!Node>} nodes array of nodes
-   * @return {!Array<number>} array of boardCols
-   * @private
-   */
-  _parseBoardCols(nodes) {
-    const boardCols = nodes.map((node) => {
-      if (node.getAttribute('board-cols')) {
-        return parseInt(node.getAttribute('board-cols'));
-      }
-      return 1;
-    });
-
-    let spaceLeft = 4;
-    let returnBoardCols = [];
-    nodes.forEach((node, i) => {
-      spaceLeft = spaceLeft - boardCols[i];
-    });
-
-    if (spaceLeft < 0) {
-      this._reportError();
-      boardCols.forEach((node, i) => {
-        returnBoardCols[i] = 1;
-      });
-    } else {
-      returnBoardCols = boardCols.slice(0);
-    }
-
-    return returnBoardCols;
-  }
-
-  /**
-   * If there is not enough space in the row.
-   * Extra items are dropped from DOM.
-   * @param {!Array<number>} boardCols array of board-cols for every node
-   * @param {!Array<!Node>} nodes array of nodes
-   * @return {!Array<!Node>} filtered array of nodes
-   * @private
-   */
-  _removeExtraNodesFromDOM(boardCols, nodes) {
-    let isErrorReported = false;
-    let spaceLeft = 4;
-    let returnNodes = [];
-    nodes.forEach((node, i) => {
-      spaceLeft = spaceLeft - boardCols[i];
-      if (spaceLeft < 0) {
-        if (!isErrorReported) {
-          isErrorReported = true;
-          this._reportError();
-        }
-        this.removeChild(node);
-      } else {
-        returnNodes[i] = node;
-      }
-    });
-    return returnNodes;
-  }
-
-  /**
-   * 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.
-   */
-  redraw() {
-    this._recalculateFlexBasis(true);
-  }
-
-  /** @private */
-  _onIronResize() {
-    this._recalculateFlexBasis(false);
-  }
-
-  /** @private */
-  _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
-    ) {
-      const nodes = this.$.insertionPoint.assignedNodes({ flatten: true });
-      const isElementNode = function (node) {
-        return !(node.nodeType === node.TEXT_NODE || node instanceof DomRepeat || node instanceof DomIf);
-      };
-      const filteredNodes = nodes.filter(isElementNode);
-      this._addStyleNames(width, breakpoints);
-      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);
-        if (forceResize || !this._oldFlexBasis[i] || this._oldFlexBasis[i] != newFlexBasis) {
-          this._oldFlexBasis[i] = newFlexBasis;
-          e.style.flexBasis = newFlexBasis;
-        }
-      });
-      this._oldWidth = width;
-      this._oldBreakpoints = breakpoints;
-    }
-  }
-
-  /**
-   * Measure the breakpoints in pixels.
-   *
-   * The breakpoints for `small` and `medium` can be given in any unit: `px`, `em`, `in` etc.
-   * We need to know them in `px` so that they are comparable with the actual size.
-   *
-   * @return {object} object with smallSize and mediumSize number properties, which tells
-   * where the row should switch rendering size in pixels.
-   * @private
-   */
-  _measureBreakpointsInPx() {
-    // Convert minWidth to px units for comparison
-    const breakpoints = {};
-    const tmpStyleProp = 'background-position';
-    const smallSize = getComputedStyle(this).getPropertyValue('--small-size');
-    const mediumSize = getComputedStyle(this).getPropertyValue('--medium-size');
-    this.style.setProperty(tmpStyleProp, smallSize);
-    breakpoints.smallSize = parseFloat(getComputedStyle(this).getPropertyValue(tmpStyleProp));
-    this.style.setProperty(tmpStyleProp, mediumSize);
-    breakpoints.mediumSize = parseFloat(getComputedStyle(this).getPropertyValue(tmpStyleProp));
-    this.style.removeProperty(tmpStyleProp);
-    return breakpoints;
-  }
-}
-
-customElements.define(BoardRowElement.is, BoardRowElement);
+export const BoardRowElement = BoardRow;
 
-export { BoardRowElement };
+export * from '@vaadin/board/src/vaadin-board-row.js';

package/src/vaadin-board.d.ts

@@ -1,40 +1,18 @@
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
-
 /**
- * `<vaadin-board>` is a web component to create flexible responsive layouts
- * and build nice looking dashboards.
- *
- * A `<vaadin-board>` is built using `<vaadin-board-row>` elements containing your child elements.
- * Each board row consists of four columns, and can contain up to four elements. Using column spans
- * you can tune the layout to your liking.
- *
- * ```html
- * <vaadin-board>
- *   <vaadin-board-row>
- *     <div>This could be chart 1</div>
- *     <div>This could be chart 2</div>
- *     <div>This could be chart 3</div>
- *     <div>This could be chart 4</div>
- *   </vaadin-board-row>
- * </vaadin-board>
- * ```
+ * @license
+ * Copyright (c) 2017 - 2021 Vaadin Ltd
+ * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
  */
-declare class BoardElement extends ElementMixin(HTMLElement) {
-  static _finalizeClass(): void;
+import { Board } from '@vaadin/board/src/vaadin-board.js';
 
-  /**
-   * 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.
-   */
-  redraw(): void;
-}
+/**
+ * @deprecated Import `Board` from `@vaadin/board` instead.
+ */
+export type BoardElement = Board;
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'vaadin-board': BoardElement;
-  }
-}
+/**
+ * @deprecated Import `Board` from `@vaadin/board` instead.
+ */
+export const BoardElement: typeof Board;
 
-export { BoardElement };
+export * from '@vaadin/board/src/vaadin-board.js';

package/src/vaadin-board.js

@@ -3,76 +3,11 @@
  * Copyright (c) 2017 - 2021 Vaadin Ltd
  * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
  */
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
-import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
-import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
-import '@vaadin/vaadin-license-checker/vaadin-license-checker.js';
-import './vaadin-board-row.js';
+import { Board } from '@vaadin/board/src/vaadin-board.js';
 
 /**
- * `<vaadin-board>` is a web component to create flexible responsive layouts
- * and build nice looking dashboards.
- *
- * A `<vaadin-board>` is built using `<vaadin-board-row>` elements containing your child elements.
- * Each board row consists of four columns, and can contain up to four elements. Using column spans
- * you can tune the layout to your liking.
- *
- * ```html
- * <vaadin-board>
- *   <vaadin-board-row>
- *     <div>This could be chart 1</div>
- *     <div>This could be chart 2</div>
- *     <div>This could be chart 3</div>
- *     <div>This could be chart 4</div>
- *   </vaadin-board-row>
- * </vaadin-board>
- * ```
- *
- * @extends HTMLElement
- * @mixes ElementMixin
+ * @deprecated Import `Board` from `@vaadin/board` instead.
  */
-class BoardElement extends ElementMixin(mixinBehaviors([IronResizableBehavior], PolymerElement)) {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: block;
-        }
-      </style>
-      <slot></slot>
-    `;
-  }
+export const BoardElement = Board;
 
-  static get is() {
-    return 'vaadin-board';
-  }
-
-  /**
-   * @protected
-   */
-  static _finalizeClass() {
-    super._finalizeClass();
-
-    const devModeCallback = window.Vaadin.developmentModeCallback;
-    const licenseChecker = devModeCallback && devModeCallback['vaadin-license-checker'];
-    /* c8 ignore next 3 */
-    if (typeof licenseChecker === 'function') {
-      licenseChecker(BoardElement);
-    }
-  }
-
-  /**
-   * 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.
-   */
-  redraw() {
-    this.notifyResize();
-  }
-}
-
-customElements.define(BoardElement.is, BoardElement);
-
-export { BoardElement };
+export * from '@vaadin/board/src/vaadin-board.js';

package/theme/lumo/vaadin-board-row.js

@@ -1 +1 @@
-import '../../src/vaadin-board-row.js';
+import '@vaadin/board/theme/lumo/vaadin-board-row.js';

package/theme/lumo/vaadin-board.js

@@ -1,2 +1 @@
-import './vaadin-board-row.js';
-import '../../src/vaadin-board.js';
+import '@vaadin/board/theme/lumo/vaadin-board.js';

package/theme/material/vaadin-board-row.js

@@ -1 +1 @@
-import '../../src/vaadin-board-row.js';
+import '@vaadin/board/theme/material/vaadin-board-row.js';

package/theme/material/vaadin-board.js

@@ -1,2 +1 @@
-import './vaadin-board-row.js';
-import '../../src/vaadin-board.js';
+import '@vaadin/board/theme/material/vaadin-board.js';