@vaadin/grid-pro 22.0.0-alpha7

package/src/vaadin-grid-pro-inline-editing-mixin.js

@@ -0,0 +1,483 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2021 Vaadin Ltd.
+ * This program is available under Commercial Vaadin Developer License 4.0 (CVDLv4).
+ * See <a href="https://vaadin.com/license/cvdl-4.0">the website</a> for the complete license.
+ */
+import { animationFrame } from '@vaadin/component-base/src/async.js';
+import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+
+/**
+ * @polymerMixin
+ */
+export const InlineEditingMixin = (superClass) =>
+  class InlineEditingMixin extends superClass {
+    static get properties() {
+      return {
+        /**
+         * When true, pressing Enter while in cell edit mode
+         * will move focus to the editable cell in the next row
+         * (Shift + Enter - same, but for previous row).
+         * @attr {boolean} enter-next-row
+         */
+        enterNextRow: {
+          type: Boolean,
+          notify: true // FIXME(yuriy-fix): needed by Flow counterpart
+        },
+
+        /**
+         * When true, after moving to next or previous editable cell using
+         * Tab / Shift+Tab, it will be focused without edit mode.
+         *
+         * When `enterNextRow` is true, pressing Enter will also
+         * preserve edit mode, otherwise, it will have no effect.
+         * @attr {boolean} single-cell-edit
+         */
+        singleCellEdit: {
+          type: Boolean,
+          notify: true // FIXME(yuriy-fix): needed by Flow counterpart
+        },
+
+        /**
+         * When true, the grid enters cell edit mode on a single click
+         * instead of the default double click.
+         * @attr {boolean} edit-on-click
+         */
+        editOnClick: {
+          type: Boolean
+        },
+
+        /** @private */
+        _editingDisabled: {
+          type: Boolean
+        }
+      };
+    }
+
+    constructor() {
+      super();
+      this.__boundItemPropertyChanged = this._onItemPropertyChanged.bind(this);
+      this.__boundEditorFocusOut = this._onEditorFocusOut.bind(this);
+      this.__boundEditorFocusIn = this._onEditorFocusIn.bind(this);
+      this.__boundCancelCellSwitch = this._setCancelCellSwitch.bind(this);
+      this.__boundGlobalFocusIn = this._onGlobalFocusIn.bind(this);
+
+      this._addEditColumnListener('mousedown', (e) => {
+        // prevent grid from resetting navigating state
+        e.stopImmediatePropagation();
+        this.toggleAttribute('navigating', true);
+      });
+
+      this._addEditColumnListener('focusout', (e) => {
+        // prevent grid from resetting navigating state
+        e.stopImmediatePropagation();
+      });
+    }
+
+    /** @protected */
+    ready() {
+      // add listener before `vaadin-grid` interaction mode listener
+      this.addEventListener('keydown', (e) => {
+        switch (e.keyCode) {
+          case 27:
+            this.__edited && this._stopEdit(true);
+            break;
+          case 9:
+            this.__edited && this._switchEditCell(e);
+            break;
+          case 13:
+            this.__edited ? this._switchEditCell(e) : this._enterEditFromEvent(e);
+            break;
+          case 32:
+            !this.__edited && this._enterEditFromEvent(e);
+            break;
+          default:
+            e.key && e.key.length === 1 && this._enterEditFromEvent(e, 'text');
+            break;
+        }
+      });
+
+      super.ready();
+
+      this.$.table.addEventListener('click', (e) => {
+        const column = this.getEventContext(e).column;
+        if (column && this._isEditColumn(column)) {
+          if (e.target.matches(':not([type=checkbox])')) {
+            // Prevents the `click` event from a column's cell in order to prevent making the cell's parent row active.
+            // Note, it should not prevent the `click` event from checkboxes. Otherwise, they will not respond to user interactions.
+            // Read more: https://github.com/vaadin/web-components/pull/2539#discussion_r712076433.
+            // TODO: Using `preventDefault()` for any other purpose than preventing the default browser's behavior is bad practice
+            // and therefore it would be great to refactor this part someday.
+            e.preventDefault();
+          }
+
+          if (this.editOnClick) {
+            this._enterEditFromEvent(e);
+          }
+        }
+      });
+
+      // dblclick does not work on iOS Safari
+      if (this._ios) {
+        let firstClickTime;
+        let waitingSecondClick = false;
+
+        this.addEventListener('click', (e) => {
+          if (!waitingSecondClick) {
+            firstClickTime = new Date().getTime();
+            waitingSecondClick = true;
+
+            setTimeout(() => {
+              waitingSecondClick = false;
+            }, 300);
+          } else {
+            waitingSecondClick = false;
+
+            const time = new Date().getTime();
+            if (time - firstClickTime < 300) {
+              this._enterEditFromEvent(e);
+            }
+          }
+        });
+      } else {
+        this.addEventListener('dblclick', (e) => {
+          if (!this.editOnClick) {
+            this._enterEditFromEvent(e);
+          }
+        });
+      }
+    }
+
+    /** @protected */
+    _checkImports() {
+      super._checkImports();
+      ['vaadin-grid-pro-edit-column'].forEach((elementName) => {
+        const element = this.querySelector(elementName);
+        if (element && !customElements.get(elementName)) {
+          console.warn(`Make sure you have imported the required module for <${elementName}> element.`);
+        }
+      });
+    }
+
+    /** @private */
+    _applyEdit({ path, value, index, item }) {
+      this.set(path, value, item);
+      this.notifyPath('items.' + index + '.' + path, value);
+    }
+
+    /** @private */
+    _addEditColumnListener(type, callback) {
+      this.addEventListener(type, (e) => {
+        const context = this.getEventContext(e);
+        const column = context.column;
+        const edited = this.__edited;
+
+        if (context.item && this._isEditColumn(column)) {
+          const path = e.composedPath();
+          const cell = path[path.indexOf(this.$.table) - 3];
+
+          if (!cell || cell.getAttribute('part').indexOf('details-cell') > -1) {
+            return;
+          }
+
+          if (edited && edited.cell === cell) {
+            return;
+          }
+
+          callback(e);
+        }
+      });
+    }
+
+    /** @private */
+    _onItemPropertyChanged(e) {
+      if (!e.defaultPrevented) {
+        this._applyEdit(e.detail);
+      }
+    }
+
+    /** @private */
+    _getRowByIndex(index) {
+      return Array.from(this.$.items.children).filter((el) => el.index === index)[0];
+    }
+
+    /** @private */
+    _isEditColumn(column) {
+      return column && column.localName.toLowerCase() === 'vaadin-grid-pro-edit-column';
+    }
+
+    /** @private */
+    _getEditColumns() {
+      const columnTreeLevel = this._columnTree.length - 1;
+      return this._columnTree[columnTreeLevel]
+        .filter((column) => this._isEditColumn(column) && !column.hidden)
+        .sort((a, b) => a._order - b._order);
+    }
+
+    /** @private */
+    _cancelStopEdit() {
+      // stop edit on outside click will always trigger notify resize.
+      // when tabbing within same row it might not be needed, so cancel
+      if (this._debouncerStopEdit) {
+        this._debouncerStopEdit.cancel();
+        delete this._debouncerStopEdit;
+      }
+    }
+
+    /** @private */
+    _flushStopEdit() {
+      if (this._debouncerStopEdit) {
+        this._debouncerStopEdit.flush();
+        delete this._debouncerStopEdit;
+      }
+    }
+
+    /** @private */
+    _enterEditFromEvent(e, type) {
+      const context = this.getEventContext(e);
+      const column = context.column;
+      const edited = this.__edited;
+
+      if (context.item && this._isEditColumn(column)) {
+        const path = e.composedPath();
+        const cell = path[path.indexOf(this.$.table) - 3];
+
+        if (!cell || cell.getAttribute('part').indexOf('details-cell') > -1) {
+          return;
+        }
+
+        if (type && column.editorType !== type) {
+          return;
+        }
+
+        if (edited && edited.cell === cell && column._getEditorComponent(cell).contains(e.target)) {
+          return;
+        }
+
+        this._flushStopEdit();
+
+        this._startEdit(cell, column);
+      } else if (edited) {
+        this._stopEdit();
+      }
+    }
+
+    /** @private */
+    _onEditorFocusOut() {
+      // schedule stop on editor component focusout
+      this._debouncerStopEdit = Debouncer.debounce(this._debouncerStopEdit, animationFrame, this._stopEdit.bind(this));
+    }
+
+    /** @private */
+    _onEditorFocusIn() {
+      this._cancelStopEdit();
+    }
+
+    /** @private */
+    _onGlobalFocusIn(e) {
+      const edited = this.__edited;
+      if (edited) {
+        // detect focus moving to e.g. vaadin-select-overlay
+        const overlay = Array.from(e.composedPath()).filter(
+          (node) => node.nodeType === Node.ELEMENT_NODE && /^vaadin-(?!dialog).*-overlay$/i.test(node.localName)
+        )[0];
+
+        if (overlay) {
+          overlay.addEventListener('vaadin-overlay-outside-click', this.__boundEditorFocusOut);
+          this._cancelStopEdit();
+        }
+      }
+    }
+
+    /** @private */
+    _startEdit(cell, column) {
+      if (this._editingDisabled) {
+        return;
+      }
+      // cancel debouncer enqueued on focusout
+      this._cancelStopEdit();
+
+      this._scrollHorizontallyToCell(cell);
+
+      const model = this.__getRowModel(cell.parentElement);
+      this.__edited = { cell, column, model };
+      column._startCellEdit(cell, model);
+
+      this.dispatchEvent(
+        new CustomEvent('cell-edit-started', {
+          detail: {
+            index: model.index,
+            item: model.item,
+            path: column.path
+          },
+          composed: true
+        })
+      );
+      this.addEventListener('item-property-changed', this.__boundItemPropertyChanged);
+    }
+
+    /**
+     * @param {boolean=} shouldCancel
+     * @param {boolean=} shouldRestoreFocus
+     * @protected
+     */
+    _stopEdit(shouldCancel, shouldRestoreFocus) {
+      if (!this.__edited) {
+        return;
+      }
+      const { cell, column, model } = this.__edited;
+
+      if (!shouldCancel) {
+        const editor = column._getEditorComponent(cell);
+        if (editor) {
+          const value = column._getEditorValue(editor);
+          if (value !== this.get(column.path, model.item)) {
+            // In some cases, where the value comes from the editor's change
+            // event (eg. custom editor in vaadin-grid-pro-flow), the event is
+            // not dispatched in FF/Safari/Edge. That's due the change event
+            // doesn't occur when the editor is removed from the DOM. Manually
+            // calling blur makes the event to be dispatched.
+            editor.blur();
+
+            this.dispatchEvent(
+              new CustomEvent('item-property-changed', {
+                detail: {
+                  index: model.index,
+                  item: model.item,
+                  path: column.path,
+                  value: value
+                },
+                bubbles: true,
+                cancelable: true,
+                composed: true
+              })
+            );
+          }
+        }
+      }
+
+      column._stopCellEdit(cell, model);
+
+      this.__edited = null;
+
+      this.removeEventListener('item-property-changed', this.__boundItemPropertyChanged);
+
+      if (shouldRestoreFocus) {
+        cell.focus();
+      }
+    }
+
+    /** @private */
+    _setCancelCellSwitch() {
+      this.__cancelCellSwitch = true;
+      window.requestAnimationFrame(() => (this.__cancelCellSwitch = false));
+    }
+
+    /**
+     * @param {!KeyboardEvent} e
+     * @protected
+     */
+    _switchEditCell(e) {
+      if (this.__cancelCellSwitch || (e.defaultPrevented && e.keyCode === 9)) {
+        return;
+      }
+
+      this._cancelStopEdit();
+
+      const cols = this._getEditColumns();
+
+      const { cell, column, model } = this.__edited;
+      const colIndex = cols.indexOf(column);
+      const { index } = model;
+
+      let nextCol = null;
+      let nextIdx = index;
+
+      // enter key
+      if (e.keyCode === 13) {
+        nextCol = column;
+
+        // move up / down
+        if (this.enterNextRow) {
+          nextIdx = e.shiftKey ? index - 1 : index + 1;
+        }
+      }
+
+      // tab: move right / left
+      if (e.keyCode === 9) {
+        if (e.shiftKey) {
+          if (cols[colIndex - 1]) {
+            nextCol = cols[colIndex - 1];
+          } else {
+            if (index > 0) {
+              nextIdx = index - 1;
+              nextCol = cols[cols.length - 1];
+            }
+          }
+        } else {
+          if (cols[colIndex + 1]) {
+            nextCol = cols[colIndex + 1];
+          } else {
+            nextIdx = index + 1;
+            nextCol = cols[0];
+          }
+        }
+      }
+
+      const nextRow = nextIdx === index ? cell.parentNode : this._getRowByIndex(nextIdx) || null;
+
+      this._stopEdit();
+
+      if (nextRow && nextCol) {
+        const nextCell = Array.from(nextRow.children).filter((cell) => cell._column === nextCol)[0];
+        e.preventDefault();
+
+        // prevent vaadin-grid handler from being called
+        e.stopImmediatePropagation();
+
+        if (!this.singleCellEdit && nextCell !== cell) {
+          this._startEdit(nextCell, nextCol);
+        } else {
+          this._ensureScrolledToIndex(nextIdx);
+          nextCell.focus();
+        }
+      }
+    }
+
+    /**
+     * @param {!HTMLElement} row
+     * @param {GridItem} item
+     * @protected
+     */
+    _updateItem(row, item) {
+      if (this.__edited) {
+        const { cell, model } = this.__edited;
+        if (cell.parentNode === row && model.item !== item) {
+          this._stopEdit();
+        }
+      }
+      super._updateItem(row, item);
+    }
+
+    /**
+     * Fired before exiting the cell edit mode, if the value has been changed.
+     * If the default is prevented, value change would not be applied.
+     *
+     * @event item-property-changed
+     * @param {Object} detail
+     * @param {Object} detail.index the row index of the edited cell
+     * @param {Object} detail.item the grid item rendered to the row of the edited cell
+     * @param {Object} detail.path the column path of the edited cell
+     * @param {Object} detail.value the new value of the edited cell
+     */
+
+    /**
+     * Fired when the user starts editing a grid cell.
+     *
+     * @event cell-edit-started
+     * @param {Object} detail
+     * @param {Object} detail.index the row index of the edited cell
+     * @param {Object} detail.item the grid item rendered to the row of the edited cell
+     * @param {Object} detail.path the column path of the edited cell
+     */
+  };

package/src/vaadin-grid-pro.d.ts

@@ -0,0 +1,95 @@
+import { GridDefaultItem, Grid, GridCustomEventMap } from '@vaadin/grid';
+
+import { InlineEditingMixin } from './vaadin-grid-pro-inline-editing-mixin.js';
+
+/**
+ * Fired when the user starts editing a grid cell.
+ */
+export type GridProCellEditStartedEvent<TItem> = CustomEvent<{
+  value: {
+    index: number;
+    item: TItem;
+    path: string;
+  };
+}>;
+
+/**
+ * Fired before exiting the cell edit mode, if the value has been changed.
+ */
+export type GridProItemPropertyChangedEvent<TItem> = CustomEvent<{
+  value: {
+    index: number;
+    item: TItem;
+    path: string;
+    value: string | boolean;
+  };
+}>;
+
+export interface GridProCustomEventMap<TItem> {
+  'cell-edit-started': GridProCellEditStartedEvent<TItem>;
+
+  'item-property-changed': GridProItemPropertyChangedEvent<TItem>;
+}
+
+export interface GridProEventMap<TItem>
+  extends HTMLElementEventMap,
+    GridProCustomEventMap<TItem>,
+    GridCustomEventMap<TItem> {}
+
+/**
+ * `<vaadin-grid-pro>` is a high quality data grid / data table Web Component with extended functionality.
+ * It extends `<vaadin-grid>` and adds extra features on top of the basic ones.
+ *
+ * See [`<vaadin-grid>`](#/elements/vaadin-grid) documentation for details.
+ *
+ * ```
+ * <vaadin-grid-pro></vaadin-grid-pro>
+ * ```
+ *
+ * ### Internal components
+ *
+ * In addition to `<vaadin-grid-pro>` itself, the following internal
+ * components are themable:
+ *
+ * - `<vaadin-grid-pro-edit-checkbox>` - has the same API as [`<vaadin-checkbox>`](#/elements/vaadin-checkbox).
+ * - `<vaadin-grid-pro-edit-text-field>` - has the same API as [`<vaadin-text-field>`](#/elements/vaadin-text-field).
+ * - `<vaadin-grid-pro-edit-select>` - has the same API as [`<vaadin-select>`](#/elements/vaadin-select).
+ *
+ * @fires {CustomEvent} active-item-changed - Fired when the `activeItem` property changes.
+ * @fires {CustomEvent} cell-activate - Fired when the cell is activated with click or keyboard.
+ * @fires {CustomEvent} cell-edit-started - Fired when the user starts editing a grid cell.
+ * @fires {CustomEvent} column-reorder - Fired when the columns in the grid are reordered.
+ * @fires {CustomEvent} column-resize - Fired when the grid column resize is finished.
+ * @fires {CustomEvent} expanded-items-changed - Fired when the `expandedItems` property changes.
+ * @fires {CustomEvent} grid-dragstart - Fired when starting to drag grid rows.
+ * @fires {CustomEvent} grid-dragend - Fired when the dragging of the rows ends.
+ * @fires {CustomEvent} grid-drop - Fired when a drop occurs on top of the grid.
+ * @fires {CustomEvent} item-property-changed - Fired before exiting the cell edit mode, if the value has been changed.
+ * @fires {CustomEvent} loading-changed - Fired when the `loading` property changes.
+ * @fires {CustomEvent} selected-items-changed - Fired when the `selectedItems` property changes.
+ */
+declare class GridPro<TItem = GridDefaultItem> extends Grid<TItem> {
+  static _finalizeClass(): void;
+
+  addEventListener<K extends keyof GridProEventMap<TItem>>(
+    type: K,
+    listener: (this: GridPro<TItem>, ev: GridProEventMap<TItem>[K]) => void,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+
+  removeEventListener<K extends keyof GridProEventMap<TItem>>(
+    type: K,
+    listener: (this: GridPro<TItem>, ev: GridProEventMap<TItem>[K]) => void,
+    options?: boolean | EventListenerOptions
+  ): void;
+}
+
+interface GridPro extends InlineEditingMixin {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-grid-pro': GridPro<GridDefaultItem>;
+  }
+}
+
+export { GridPro };

package/src/vaadin-grid-pro.js

@@ -0,0 +1,68 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2021 Vaadin Ltd.
+ * This program is available under Commercial Vaadin Developer License 4.0 (CVDLv4).
+ * See <a href="https://vaadin.com/license/cvdl-4.0">the website</a> for the complete license.
+ */
+import { Grid } from '@vaadin/grid/src/vaadin-grid.js';
+import { InlineEditingMixin } from './vaadin-grid-pro-inline-editing-mixin.js';
+import '@vaadin/vaadin-license-checker/vaadin-license-checker.js';
+
+/**
+ *
+ * `<vaadin-grid-pro>` is a high quality data grid / data table Web Component with extended functionality.
+ * It extends `<vaadin-grid>` and adds extra features on top of the basic ones.
+ *
+ * See [`<vaadin-grid>`](#/elements/vaadin-grid) documentation for details.
+ *
+ * ```
+ * <vaadin-grid-pro></vaadin-grid-pro>
+ * ```
+ *
+ * ### Internal components
+ *
+ * In addition to `<vaadin-grid-pro>` itself, the following internal
+ * components are themable:
+ *
+ * - `<vaadin-grid-pro-edit-checkbox>` - has the same API as [`<vaadin-checkbox>`](#/elements/vaadin-checkbox).
+ * - `<vaadin-grid-pro-edit-text-field>` - has the same API as [`<vaadin-text-field>`](#/elements/vaadin-text-field).
+ * - `<vaadin-grid-pro-edit-select>` - has the same API as [`<vaadin-select>`](#/elements/vaadin-select).
+ *
+ * @fires {CustomEvent} active-item-changed - Fired when the `activeItem` property changes.
+ * @fires {CustomEvent} cell-activate - Fired when the cell is activated with click or keyboard.
+ * @fires {CustomEvent} cell-edit-started - Fired when the user starts editing a grid cell.
+ * @fires {CustomEvent} column-reorder - Fired when the columns in the grid are reordered.
+ * @fires {CustomEvent} column-resize - Fired when the grid column resize is finished.
+ * @fires {CustomEvent} expanded-items-changed - Fired when the `expandedItems` property changes.
+ * @fires {CustomEvent} grid-dragstart - Fired when starting to drag grid rows.
+ * @fires {CustomEvent} grid-dragend - Fired when the dragging of the rows ends.
+ * @fires {CustomEvent} grid-drop - Fired when a drop occurs on top of the grid.
+ * @fires {CustomEvent} item-property-changed - Fired before exiting the cell edit mode, if the value has been changed.
+ * @fires {CustomEvent} loading-changed - Fired when the `loading` property changes.
+ * @fires {CustomEvent} selected-items-changed - Fired when the `selectedItems` property changes.
+ *
+ * @extends Grid
+ * @mixes InlineEditingMixin
+ */
+class GridPro extends InlineEditingMixin(Grid) {
+  static get is() {
+    return 'vaadin-grid-pro';
+  }
+
+  /**
+   * @protected
+   */
+  static _finalizeClass() {
+    super._finalizeClass();
+
+    const devModeCallback = window.Vaadin.developmentModeCallback;
+    const licenseChecker = devModeCallback && devModeCallback['vaadin-license-checker'];
+    if (typeof licenseChecker === 'function') {
+      licenseChecker(GridPro);
+    }
+  }
+}
+
+customElements.define(GridPro.is, GridPro);
+
+export { GridPro };

package/theme/lumo/vaadin-grid-pro-edit-checkbox.js

@@ -0,0 +1,2 @@
+import '@vaadin/checkbox/theme/lumo/vaadin-checkbox.js';
+import '../../src/vaadin-grid-pro-edit-checkbox.js';

package/theme/lumo/vaadin-grid-pro-edit-column.js

@@ -0,0 +1,4 @@
+import './vaadin-grid-pro-edit-checkbox.js';
+import './vaadin-grid-pro-edit-select.js';
+import './vaadin-grid-pro-edit-text-field.js';
+import '../../src/vaadin-grid-pro-edit-column.js';

package/theme/lumo/vaadin-grid-pro-edit-select-styles.js

@@ -0,0 +1,24 @@
+import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+import '@vaadin/vaadin-lumo-styles/spacing.js';
+import '@vaadin/vaadin-lumo-styles/typography.js';
+import { gridProEditor } from './vaadin-grid-pro-editor-styles.js';
+
+const gridProEditSelect = css`
+  :host([theme~='grid-pro-editor']) [part='toggle-button'] {
+    margin-right: var(--lumo-space-xs);
+  }
+
+  :host([theme~='grid-pro-editor']) [part='input-field'] ::slotted([slot='value']) {
+    box-sizing: border-box;
+    padding: 0 var(--lumo-space-m);
+    font-size: var(--lumo-font-size-m);
+    /* prevent selection on editor focus */
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+  }
+`;
+
+registerStyles('vaadin-grid-pro-edit-select', [gridProEditor, gridProEditSelect], {
+  moduleId: 'lumo-grid-pro-edit-select'
+});

package/theme/lumo/vaadin-grid-pro-edit-select.js

@@ -0,0 +1,5 @@
+import '@vaadin/item/theme/lumo/vaadin-item.js';
+import '@vaadin/list-box/theme/lumo/vaadin-list-box.js';
+import '@vaadin/select/theme/lumo/vaadin-select.js';
+import './vaadin-grid-pro-edit-select-styles.js';
+import '../../src/vaadin-grid-pro-edit-select.js';

package/theme/lumo/vaadin-grid-pro-edit-text-field-styles.js

@@ -0,0 +1,6 @@
+import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+import { gridProEditor } from './vaadin-grid-pro-editor-styles.js';
+
+registerStyles('vaadin-grid-pro-edit-text-field', gridProEditor, {
+  moduleId: 'lumo-grid-pro-edit-text-field'
+});

package/theme/lumo/vaadin-grid-pro-edit-text-field.js

@@ -0,0 +1,3 @@
+import '@vaadin/text-field/theme/lumo/vaadin-text-field.js';
+import './vaadin-grid-pro-edit-text-field-styles.js';
+import '../../src/vaadin-grid-pro-edit-text-field.js';