@vaadin/crud 24.1.0 → 24.2.0-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/crud",
-  "version": "24.1.0",
+  "version": "24.2.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -37,20 +37,20 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "~24.1.0",
-    "@vaadin/component-base": "~24.1.0",
-    "@vaadin/confirm-dialog": "~24.1.0",
-    "@vaadin/dialog": "~24.1.0",
-    "@vaadin/form-layout": "~24.1.0",
-    "@vaadin/grid": "~24.1.0",
-    "@vaadin/text-field": "~24.1.0",
-    "@vaadin/vaadin-lumo-styles": "~24.1.0",
-    "@vaadin/vaadin-material-styles": "~24.1.0",
-    "@vaadin/vaadin-themable-mixin": "~24.1.0"
+    "@vaadin/button": "24.2.0-alpha1",
+    "@vaadin/component-base": "24.2.0-alpha1",
+    "@vaadin/confirm-dialog": "24.2.0-alpha1",
+    "@vaadin/dialog": "24.2.0-alpha1",
+    "@vaadin/form-layout": "24.2.0-alpha1",
+    "@vaadin/grid": "24.2.0-alpha1",
+    "@vaadin/text-field": "24.2.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha1",
+    "@vaadin/vaadin-material-styles": "24.2.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.4.0",
+    "@vaadin/testing-helpers": "^0.4.2",
     "sinon": "^13.0.2"
   },
   "cvdlName": "vaadin-crud",
@@ -58,5 +58,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "7fdfe7d5ceb4c305a894f8e9dc11e5b7d04cf1f2"
+  "gitHead": "0dbb118320203ab6c0c07450a3e718815367589f"
 }

package/src/vaadin-crud-dialog.js

@@ -32,10 +32,7 @@ registerStyles(
     }
 
     :host([fullscreen]) {
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
+      inset: 0;
       padding: 0;
     }
 

package/src/vaadin-crud-grid.js

@@ -13,6 +13,7 @@ import '@vaadin/grid/src/vaadin-grid-column-group.js';
 import '@vaadin/grid/src/vaadin-grid-sorter.js';
 import '@vaadin/grid/src/vaadin-grid-filter.js';
 import './vaadin-crud-edit-column.js';
+import { getClosestElement } from '@vaadin/component-base/src/dom-utils.js';
 import { Grid } from '@vaadin/grid/src/vaadin-grid.js';
 import { capitalize, getProperty } from './vaadin-crud-helpers.js';
 import { IncludedMixin } from './vaadin-crud-include-mixin.js';
@@ -58,6 +59,30 @@ class CrudGrid extends IncludedMixin(Grid) {
     return ['__onItemsChange(items)', '__onHideEditColumnChange(hideEditColumn)'];
   }
 
+  /** @protected */
+  _getRowContainingNode(node) {
+    const content = getClosestElement('vaadin-grid-cell-content', node);
+    if (!content) {
+      return;
+    }
+
+    const cell = content.assignedSlot.parentElement;
+    return cell.parentElement;
+  }
+
+  /** @protected */
+  _isItemAssigedToRow(item, row) {
+    const model = this.__getRowModel(row);
+    return this.getItemId(item) === this.getItemId(model.item);
+  }
+
+  /** @protected */
+  _focusFirstVisibleRow() {
+    const row = this.__getFirstVisibleItem();
+    this.__rowFocusMode = true;
+    row.focus();
+  }
+
   /** @private */
   __onItemsChange(items) {
     if ((!this.dataProvider || this.dataProvider === this._arrayDataProvider) && !this.include && items && items[0]) {

package/src/vaadin-crud.d.ts

@@ -250,7 +250,7 @@ export type CrudEventMap<T> = CrudCustomEventMap<T> & HTMLElementEventMap;
  * --vaadin-crud-editor-max-height | max height of editor when opened on the bottom | 40%
  * --vaadin-crud-editor-max-width | max width of editor when opened on the side | 40%
  *
- * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @fires {CustomEvent} editor-opened-changed - Fired when the `editorOpened` property changes.
  * @fires {CustomEvent} edited-item-changed - Fired when `editedItem` property changes.

package/src/vaadin-crud.js

@@ -17,6 +17,7 @@ import './vaadin-crud-form.js';
 import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
 import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { FocusRestorationController } from '@vaadin/a11y-base/src/focus-restoration-controller.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
@@ -25,16 +26,48 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
 import { getProperty, setProperty } from './vaadin-crud-helpers.js';
 
 /**
+ * A controller for initializing slotted button.
  * @private
- * A to initialize slotted button.
  */
 class ButtonSlotController extends SlotController {
   constructor(host, type, theme) {
-    super(host, `${type}-button`, 'vaadin-button', {
-      initializer: (button) => {
-        button.setAttribute('theme', theme);
-      },
-    });
+    super(host, `${type}-button`, 'vaadin-button');
+
+    this.type = type;
+    this.theme = theme;
+  }
+
+  /**
+   * Override method inherited from `SlotController`
+   * to mark custom slotted button as the default.
+   *
+   * @param {Node} node
+   * @protected
+   * @override
+   */
+  initNode(node) {
+    // Needed by Flow counterpart to apply i18n to custom button
+    if (node._isDefault) {
+      this.defaultNode = node;
+    }
+
+    if (node === this.defaultNode) {
+      node.setAttribute('theme', this.theme);
+    }
+
+    const { host, type } = this;
+    const property = `_${type}Button`;
+    const listener = `__${type}`;
+
+    // TODO: restore default button when a corresponding slotted button is removed.
+    // This would require us to detect where to insert a button after teleporting it,
+    // which happens after opening a dialog and closing it (default editor position).
+    if (host[property] && host[property] !== node) {
+      host[property].remove();
+    }
+
+    node.addEventListener('click', host[listener]);
+    host[property] = node;
   }
 }
 
@@ -168,7 +201,7 @@ class ButtonSlotController extends SlotController {
  * --vaadin-crud-editor-max-height | max height of editor when opened on the bottom | 40%
  * --vaadin-crud-editor-max-width | max width of editor when opened on the side | 40%
  *
- * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @fires {CustomEvent} editor-opened-changed - Fired when the `editorOpened` property changes.
  * @fires {CustomEvent} edited-item-changed - Fired when `editedItem` property changes.
@@ -664,6 +697,13 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
     this.__onGridSizeChanged = this.__onGridSizeChanged.bind(this);
     this.__onGridActiveItemChanged = this.__onGridActiveItemChanged.bind(this);
 
+    this._newButtonController = new ButtonSlotController(this, 'new', 'primary');
+    this._saveButtonController = new ButtonSlotController(this, 'save', 'primary');
+    this._cancelButtonController = new ButtonSlotController(this, 'cancel', 'tertiary');
+    this._deleteButtonController = new ButtonSlotController(this, 'delete', 'tertiary error');
+
+    this.__focusRestorationController = new FocusRestorationController();
+
     this._observer = new FlattenedNodesObserver(this, (info) => {
       this.__onDomChange(info.addedNodes);
     });
@@ -705,18 +745,20 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
 
     this.addController(new SlotController(this, 'form', 'vaadin-crud-form'));
 
-    this.addController(new ButtonSlotController(this, 'new', 'primary'));
+    this.addController(this._newButtonController);
 
     // NOTE: order in which buttons are added should match the order of slots in template
-    this.addController(new ButtonSlotController(this, 'save', 'primary'));
-    this.addController(new ButtonSlotController(this, 'cancel', 'tertiary'));
-    this.addController(new ButtonSlotController(this, 'delete', 'tertiary error'));
+    this.addController(this._saveButtonController);
+    this.addController(this._cancelButtonController);
+    this.addController(this._deleteButtonController);
 
     this.addController(
       new MediaQueryController(this._fullscreenMediaQuery, (matches) => {
         this._fullscreen = matches;
       }),
     );
+
+    this.addController(this.__focusRestorationController);
   }
 
   /**
@@ -863,9 +905,6 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
 
   /** @private */
   __onDomChange(addedNodes) {
-    // TODO: restore default button when a corresponding slotted button is removed.
-    // This would require us to detect where to insert a button after teleporting it,
-    // which happens after opening a dialog and closing it (default editor position).
     addedNodes
       .filter((node) => node.nodeType === Node.ELEMENT_NODE)
       .forEach((node) => {
@@ -881,9 +920,6 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
           this.__editOnClickChanged(this.editOnClick, this._grid);
         } else if (slotAttributeValue === 'form') {
           this._form = node;
-        } else if (slotAttributeValue.indexOf('button') >= 0) {
-          const [button] = slotAttributeValue.split('-');
-          this.__setupSlottedButton(button, node);
         }
       });
 
@@ -974,7 +1010,7 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
   }
 
   /**
-   * @param {HTMLElement | undefined} form
+   * @param {HTMLElement | undefined} grid
    * @param {string} theme
    * @param {string | string[] | undefined} include
    * @param {string | RegExp} exclude
@@ -1016,7 +1052,10 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
   __saveButtonPropsChanged(saveButton, i18nLabel, isDirty) {
     if (saveButton) {
       saveButton.toggleAttribute('disabled', this.__isSaveBtnDisabled(isDirty));
-      saveButton.textContent = i18nLabel;
+
+      if (saveButton === this._saveButtonController.defaultNode) {
+        saveButton.textContent = i18nLabel;
+      }
     }
   }
 
@@ -1028,18 +1067,21 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
    */
   __deleteButtonPropsChanged(deleteButton, i18nLabel, isNew) {
     if (deleteButton) {
-      deleteButton.textContent = i18nLabel;
       deleteButton.toggleAttribute('hidden', isNew);
+
+      if (deleteButton === this._deleteButtonController.defaultNode) {
+        deleteButton.textContent = i18nLabel;
+      }
     }
   }
 
   /**
-   * @param {HTMLElement | undefined} saveButton
+   * @param {HTMLElement | undefined} cancelButton
    * @param {string} i18nLabel
    * @private
    */
   __cancelButtonPropsChanged(cancelButton, i18nLabel) {
-    if (cancelButton) {
+    if (cancelButton && cancelButton === this._cancelButtonController.defaultNode) {
       cancelButton.textContent = i18nLabel;
     }
   }
@@ -1050,28 +1092,11 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
    * @private
    */
   __newButtonPropsChanged(newButton, i18nNewItem) {
-    if (newButton) {
+    if (newButton && newButton === this._newButtonController.defaultNode) {
       newButton.textContent = i18nNewItem;
     }
   }
 
-  /**
-   * @param {string} type
-   * @param {HTMLElement} newButton
-   * @private
-   */
-  __setupSlottedButton(type, button) {
-    const property = `_${type}Button`;
-    const listener = `__${type}`;
-
-    if (this[property] && this[property] !== button) {
-      this[property].remove();
-    }
-
-    button.addEventListener('click', this[listener]);
-    this[property] = button;
-  }
-
   /** @private */
   __dataProviderChanged(dataProvider) {
     if (this._grid) {
@@ -1232,20 +1257,52 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
     this.__openEditor('edit', item);
   }
 
+  /** @private */
+  __fireEvent(type, item) {
+    const event = new CustomEvent(type, { detail: { item }, cancelable: true });
+    this.dispatchEvent(event);
+    return event.defaultPrevented === false;
+  }
+
   /** @private */
   __openEditor(type, item) {
+    this.__focusRestorationController.saveFocus();
+
     this.__isDirty = false;
     this.__isNew = !item;
-    const evt = this.dispatchEvent(
-      new CustomEvent(this.__isNew ? 'new' : 'edit', { detail: { item }, cancelable: true }),
-    );
-    if (evt) {
+    const result = this.__fireEvent(this.__isNew ? 'new' : 'edit', item);
+    if (result) {
       this.editedItem = item || {};
     } else {
       this.editorOpened = true;
     }
   }
 
+  /** @private */
+  __restoreFocusOnDelete() {
+    if (this._grid._effectiveSize === 1) {
+      this._newButton.focus();
+    } else {
+      this._grid._focusFirstVisibleRow();
+    }
+  }
+
+  /** @private */
+  __restoreFocusOnSaveOrCancel() {
+    const focusNode = this.__focusRestorationController.focusNode;
+    const row = this._grid._getRowContainingNode(focusNode);
+    if (!row) {
+      this.__focusRestorationController.restoreFocus();
+      return;
+    }
+
+    if (this._grid._isItemAssigedToRow(this.editedItem, row) && this._grid._isInViewport(row)) {
+      this.__focusRestorationController.restoreFocus();
+    } else {
+      this._grid._focusFirstVisibleRow();
+    }
+  }
+
   /** @private */
   __save() {
     if (!this.__validate()) {
@@ -1259,8 +1316,8 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
         setProperty(path, e.value, item);
       }
     });
-    const evt = this.dispatchEvent(new CustomEvent('save', { detail: { item }, cancelable: true }));
-    if (evt) {
+    const result = this.__fireEvent('save', item);
+    if (result) {
       if (this.__isNew && !this.dataProvider) {
         if (!this.items) {
           this.items = [item];
@@ -1273,6 +1330,8 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
         }
         Object.assign(this.editedItem, item);
       }
+
+      this.__restoreFocusOnSaveOrCancel();
       this._grid.clearCache();
       this.__closeEditor();
     }
@@ -1289,8 +1348,9 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
 
   /** @private */
   __confirmCancel() {
-    const evt = this.dispatchEvent(new CustomEvent('cancel', { detail: { item: this.editedItem }, cancelable: true }));
-    if (evt) {
+    const result = this.__fireEvent('cancel', this.editedItem);
+    if (result) {
+      this.__restoreFocusOnSaveOrCancel();
       this.__closeEditor();
     }
   }
@@ -1302,11 +1362,13 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
 
   /** @private */
   __confirmDelete() {
-    const evt = this.dispatchEvent(new CustomEvent('delete', { detail: { item: this.editedItem }, cancelable: true }));
-    if (evt) {
+    const result = this.__fireEvent('delete', this.editedItem);
+    if (result) {
       if (this.items && this.items.indexOf(this.editedItem) >= 0) {
         this.items.splice(this.items.indexOf(this.editedItem), 1);
       }
+
+      this.__restoreFocusOnDelete();
       this._grid.clearCache();
       this.__closeEditor();
     }

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/crud",
-  "version": "24.1.0",
+  "version": "24.2.0-alpha1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -295,7 +295,7 @@
         },
         {
           "name": "vaadin-crud",
-          "description": "`<vaadin-crud>` is a Web Component for [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations.\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/24.1.0/#/elements/vaadin-crud#property-items) property.\n\nA grid and an editor will be automatically generated and configured based on the data structure provided.\n\n```html\n<vaadin-crud></vaadin-crud>\n```\n```js\nconst crud = document.querySelector('vaadin-crud');\n\ncrud.items = [\n  { name: 'John', surname: 'Lennon', role: 'singer' },\n  { name: 'Ringo', surname: 'Starr', role: 'drums' },\n  // ... more items\n];\n```\n\n### Data Provider Function\n\nOtherwise, you can provide a [`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/24.1.0/#/elements/vaadin-crud#property-dataProvider) function.\n\n```js\nconst crud = document.querySelector('vaadin-crud');\n\nconst users = [\n  { name: 'John', surname: 'Lennon', role: 'singer' },\n  { name: 'Ringo', surname: 'Starr', role: 'drums' },\n  // ... more items\n];\n\ncrud.dataProvider = (params, callback) => {\n  const chunk = users.slice(params.page * params.pageSize, params.page * params.pageSize + params.pageSize);\n  callback(chunk, people.length);\n};\n```\n\nNOTE: The auto-generated editor only supports string types. If you need to handle special cases\ncustomizing the editor is discussed below.\n\n### Customization\n\nAlternatively you can fully configure the component by using `slot` names.\n\nSlot name      | Description\n---------------|----------------\n`grid`         | To replace the auto-generated grid with a custom one.\n`form`         | To replace the auto-generated form.\n`save-button`  | To replace the \"Save\" button.\n`cancel-button`| To replace the \"Cancel\" button.\n`delete-button`| To replace the \"Delete\" button.\n`toolbar`      | To provide the toolbar content (by default, it's empty).\n`new-button`   | To replace the \"New item\" button.\n\n#### Example:\n\n```html\n<vaadin-crud id=\"crud\">\n  <vaadin-grid slot=\"grid\">\n    <vaadin-crud-edit-column></vaadin-crud-edit-column>\n    <vaadin-grid-column id=\"column1\"></vaadin-grid-column>\n    <vaadin-grid-column id=\"column2\"></vaadin-grid-column>\n  </vaadin-grid>\n\n  <vaadin-form-layout slot=\"form\">\n    <vaadin-text-field label=\"First\" path=\"name\"></vaadin-text-field>\n    <vaadin-text-field label=\"Surname\" path=\"surname\"></vaadin-text-field>\n  </vaadin-form-layout>\n\n  <div slot=\"toolbar\">Total singers: 2</div>\n  <button slot=\"new-button\">New singer</button>\n\n  <button slot=\"save-button\">Save changes</button>\n  <button slot=\"cancel-button\">Discard changes</button>\n  <button slot=\"delete-button\">Delete singer</button>\n</vaadin-crud>\n```\n```js\nconst crud = document.querySelector('#crud');\n\nconst column1 = document.querySelector('#column1');\ncolumn1.headerRenderer = (root, column) => {\n  root.textContent = 'Name';\n};\ncolumn1.renderer = (root, column, model) => {\n  root.textContent = model.item.name;\n};\n\nconst column2 = document.querySelector('#column2');\ncolumn2.headerRenderer = (root, column) => {\n  root.textContent = 'Surname';\n};\ncolumn2.renderer = (root, column, model) => {\n  root.textContent = model.item.surname;\n};\n\ncrud.items = [\n  { name: 'John', surname: 'Lennon', role: 'singer' },\n  { name: 'Ringo', surname: 'Starr', role: 'drums' },\n  // ... more items\n];\n```\n\n### Helpers\n\nThe following elements are used to auto-configure the grid and the editor\n- [`<vaadin-crud-edit-column>`](https://cdn.vaadin.com/vaadin-web-components/24.1.0/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/24.1.0/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/24.1.0/#/elements/vaadin-form-layout)\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------|----------------\n`toolbar` | Toolbar container at the bottom. By default it contains the the `new` button\n\nThe following custom properties are available:\n\nCustom Property | Description | Default\n----------------|----------------\n--vaadin-crud-editor-max-height | max height of editor when opened on the bottom | 40%\n--vaadin-crud-editor-max-width | max width of editor when opened on the side | 40%\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
+          "description": "`<vaadin-crud>` is a Web Component for [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations.\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-crud#property-items) property.\n\nA grid and an editor will be automatically generated and configured based on the data structure provided.\n\n```html\n<vaadin-crud></vaadin-crud>\n```\n```js\nconst crud = document.querySelector('vaadin-crud');\n\ncrud.items = [\n  { name: 'John', surname: 'Lennon', role: 'singer' },\n  { name: 'Ringo', surname: 'Starr', role: 'drums' },\n  // ... more items\n];\n```\n\n### Data Provider Function\n\nOtherwise, you can provide a [`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-crud#property-dataProvider) function.\n\n```js\nconst crud = document.querySelector('vaadin-crud');\n\nconst users = [\n  { name: 'John', surname: 'Lennon', role: 'singer' },\n  { name: 'Ringo', surname: 'Starr', role: 'drums' },\n  // ... more items\n];\n\ncrud.dataProvider = (params, callback) => {\n  const chunk = users.slice(params.page * params.pageSize, params.page * params.pageSize + params.pageSize);\n  callback(chunk, people.length);\n};\n```\n\nNOTE: The auto-generated editor only supports string types. If you need to handle special cases\ncustomizing the editor is discussed below.\n\n### Customization\n\nAlternatively you can fully configure the component by using `slot` names.\n\nSlot name      | Description\n---------------|----------------\n`grid`         | To replace the auto-generated grid with a custom one.\n`form`         | To replace the auto-generated form.\n`save-button`  | To replace the \"Save\" button.\n`cancel-button`| To replace the \"Cancel\" button.\n`delete-button`| To replace the \"Delete\" button.\n`toolbar`      | To provide the toolbar content (by default, it's empty).\n`new-button`   | To replace the \"New item\" button.\n\n#### Example:\n\n```html\n<vaadin-crud id=\"crud\">\n  <vaadin-grid slot=\"grid\">\n    <vaadin-crud-edit-column></vaadin-crud-edit-column>\n    <vaadin-grid-column id=\"column1\"></vaadin-grid-column>\n    <vaadin-grid-column id=\"column2\"></vaadin-grid-column>\n  </vaadin-grid>\n\n  <vaadin-form-layout slot=\"form\">\n    <vaadin-text-field label=\"First\" path=\"name\"></vaadin-text-field>\n    <vaadin-text-field label=\"Surname\" path=\"surname\"></vaadin-text-field>\n  </vaadin-form-layout>\n\n  <div slot=\"toolbar\">Total singers: 2</div>\n  <button slot=\"new-button\">New singer</button>\n\n  <button slot=\"save-button\">Save changes</button>\n  <button slot=\"cancel-button\">Discard changes</button>\n  <button slot=\"delete-button\">Delete singer</button>\n</vaadin-crud>\n```\n```js\nconst crud = document.querySelector('#crud');\n\nconst column1 = document.querySelector('#column1');\ncolumn1.headerRenderer = (root, column) => {\n  root.textContent = 'Name';\n};\ncolumn1.renderer = (root, column, model) => {\n  root.textContent = model.item.name;\n};\n\nconst column2 = document.querySelector('#column2');\ncolumn2.headerRenderer = (root, column) => {\n  root.textContent = 'Surname';\n};\ncolumn2.renderer = (root, column, model) => {\n  root.textContent = model.item.surname;\n};\n\ncrud.items = [\n  { name: 'John', surname: 'Lennon', role: 'singer' },\n  { name: 'Ringo', surname: 'Starr', role: 'drums' },\n  // ... more items\n];\n```\n\n### Helpers\n\nThe following elements are used to auto-configure the grid and the editor\n- [`<vaadin-crud-edit-column>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-form-layout)\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------|----------------\n`toolbar` | Toolbar container at the bottom. By default it contains the the `new` button\n\nThe following custom properties are available:\n\nCustom Property | Description | Default\n----------------|----------------\n--vaadin-crud-editor-max-height | max height of editor when opened on the bottom | 40%\n--vaadin-crud-editor-max-width | max width of editor when opened on the side | 40%\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
               "name": "editor-position",
@@ -350,7 +350,7 @@
             },
             {
               "name": "include",
-              "description": "A comma-separated list of fields to include in the generated grid and the generated editor.\n\nIt can be used to explicitly define the field order.\n\nWhen it is defined [`exclude`](https://cdn.vaadin.com/vaadin-web-components/24.1.0/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
+              "description": "A comma-separated list of fields to include in the generated grid and the generated editor.\n\nIt can be used to explicitly define the field order.\n\nWhen it is defined [`exclude`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
               "value": {
                 "type": [
                   "string",
@@ -361,7 +361,7 @@
             },
             {
               "name": "exclude",
-              "description": "A comma-separated list of fields to be excluded from the generated grid and the generated editor.\n\nWhen [`include`](https://cdn.vaadin.com/vaadin-web-components/24.1.0/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
+              "description": "A comma-separated list of fields to be excluded from the generated grid and the generated editor.\n\nWhen [`include`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
               "value": {
                 "type": [
                   "string",
@@ -488,7 +488,7 @@
               },
               {
                 "name": "include",
-                "description": "A comma-separated list of fields to include in the generated grid and the generated editor.\n\nIt can be used to explicitly define the field order.\n\nWhen it is defined [`exclude`](https://cdn.vaadin.com/vaadin-web-components/24.1.0/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
+                "description": "A comma-separated list of fields to include in the generated grid and the generated editor.\n\nIt can be used to explicitly define the field order.\n\nWhen it is defined [`exclude`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
                 "value": {
                   "type": [
                     "string",
@@ -499,7 +499,7 @@
               },
               {
                 "name": "exclude",
-                "description": "A comma-separated list of fields to be excluded from the generated grid and the generated editor.\n\nWhen [`include`](https://cdn.vaadin.com/vaadin-web-components/24.1.0/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
+                "description": "A comma-separated list of fields to be excluded from the generated grid and the generated editor.\n\nWhen [`include`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
                 "value": {
                   "type": [
                     "string",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/crud",
-  "version": "24.1.0",
+  "version": "24.2.0-alpha1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -121,7 +121,7 @@
         },
         {
           "name": "vaadin-crud",
-          "description": "`<vaadin-crud>` is a Web Component for [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations.\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/24.1.0/#/elements/vaadin-crud#property-items) property.\n\nA grid and an editor will be automatically generated and configured based on the data structure provided.\n\n```html\n<vaadin-crud></vaadin-crud>\n```\n```js\nconst crud = document.querySelector('vaadin-crud');\n\ncrud.items = [\n  { name: 'John', surname: 'Lennon', role: 'singer' },\n  { name: 'Ringo', surname: 'Starr', role: 'drums' },\n  // ... more items\n];\n```\n\n### Data Provider Function\n\nOtherwise, you can provide a [`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/24.1.0/#/elements/vaadin-crud#property-dataProvider) function.\n\n```js\nconst crud = document.querySelector('vaadin-crud');\n\nconst users = [\n  { name: 'John', surname: 'Lennon', role: 'singer' },\n  { name: 'Ringo', surname: 'Starr', role: 'drums' },\n  // ... more items\n];\n\ncrud.dataProvider = (params, callback) => {\n  const chunk = users.slice(params.page * params.pageSize, params.page * params.pageSize + params.pageSize);\n  callback(chunk, people.length);\n};\n```\n\nNOTE: The auto-generated editor only supports string types. If you need to handle special cases\ncustomizing the editor is discussed below.\n\n### Customization\n\nAlternatively you can fully configure the component by using `slot` names.\n\nSlot name      | Description\n---------------|----------------\n`grid`         | To replace the auto-generated grid with a custom one.\n`form`         | To replace the auto-generated form.\n`save-button`  | To replace the \"Save\" button.\n`cancel-button`| To replace the \"Cancel\" button.\n`delete-button`| To replace the \"Delete\" button.\n`toolbar`      | To provide the toolbar content (by default, it's empty).\n`new-button`   | To replace the \"New item\" button.\n\n#### Example:\n\n```html\n<vaadin-crud id=\"crud\">\n  <vaadin-grid slot=\"grid\">\n    <vaadin-crud-edit-column></vaadin-crud-edit-column>\n    <vaadin-grid-column id=\"column1\"></vaadin-grid-column>\n    <vaadin-grid-column id=\"column2\"></vaadin-grid-column>\n  </vaadin-grid>\n\n  <vaadin-form-layout slot=\"form\">\n    <vaadin-text-field label=\"First\" path=\"name\"></vaadin-text-field>\n    <vaadin-text-field label=\"Surname\" path=\"surname\"></vaadin-text-field>\n  </vaadin-form-layout>\n\n  <div slot=\"toolbar\">Total singers: 2</div>\n  <button slot=\"new-button\">New singer</button>\n\n  <button slot=\"save-button\">Save changes</button>\n  <button slot=\"cancel-button\">Discard changes</button>\n  <button slot=\"delete-button\">Delete singer</button>\n</vaadin-crud>\n```\n```js\nconst crud = document.querySelector('#crud');\n\nconst column1 = document.querySelector('#column1');\ncolumn1.headerRenderer = (root, column) => {\n  root.textContent = 'Name';\n};\ncolumn1.renderer = (root, column, model) => {\n  root.textContent = model.item.name;\n};\n\nconst column2 = document.querySelector('#column2');\ncolumn2.headerRenderer = (root, column) => {\n  root.textContent = 'Surname';\n};\ncolumn2.renderer = (root, column, model) => {\n  root.textContent = model.item.surname;\n};\n\ncrud.items = [\n  { name: 'John', surname: 'Lennon', role: 'singer' },\n  { name: 'Ringo', surname: 'Starr', role: 'drums' },\n  // ... more items\n];\n```\n\n### Helpers\n\nThe following elements are used to auto-configure the grid and the editor\n- [`<vaadin-crud-edit-column>`](https://cdn.vaadin.com/vaadin-web-components/24.1.0/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/24.1.0/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/24.1.0/#/elements/vaadin-form-layout)\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------|----------------\n`toolbar` | Toolbar container at the bottom. By default it contains the the `new` button\n\nThe following custom properties are available:\n\nCustom Property | Description | Default\n----------------|----------------\n--vaadin-crud-editor-max-height | max height of editor when opened on the bottom | 40%\n--vaadin-crud-editor-max-width | max width of editor when opened on the side | 40%\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
+          "description": "`<vaadin-crud>` is a Web Component for [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations.\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-crud#property-items) property.\n\nA grid and an editor will be automatically generated and configured based on the data structure provided.\n\n```html\n<vaadin-crud></vaadin-crud>\n```\n```js\nconst crud = document.querySelector('vaadin-crud');\n\ncrud.items = [\n  { name: 'John', surname: 'Lennon', role: 'singer' },\n  { name: 'Ringo', surname: 'Starr', role: 'drums' },\n  // ... more items\n];\n```\n\n### Data Provider Function\n\nOtherwise, you can provide a [`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-crud#property-dataProvider) function.\n\n```js\nconst crud = document.querySelector('vaadin-crud');\n\nconst users = [\n  { name: 'John', surname: 'Lennon', role: 'singer' },\n  { name: 'Ringo', surname: 'Starr', role: 'drums' },\n  // ... more items\n];\n\ncrud.dataProvider = (params, callback) => {\n  const chunk = users.slice(params.page * params.pageSize, params.page * params.pageSize + params.pageSize);\n  callback(chunk, people.length);\n};\n```\n\nNOTE: The auto-generated editor only supports string types. If you need to handle special cases\ncustomizing the editor is discussed below.\n\n### Customization\n\nAlternatively you can fully configure the component by using `slot` names.\n\nSlot name      | Description\n---------------|----------------\n`grid`         | To replace the auto-generated grid with a custom one.\n`form`         | To replace the auto-generated form.\n`save-button`  | To replace the \"Save\" button.\n`cancel-button`| To replace the \"Cancel\" button.\n`delete-button`| To replace the \"Delete\" button.\n`toolbar`      | To provide the toolbar content (by default, it's empty).\n`new-button`   | To replace the \"New item\" button.\n\n#### Example:\n\n```html\n<vaadin-crud id=\"crud\">\n  <vaadin-grid slot=\"grid\">\n    <vaadin-crud-edit-column></vaadin-crud-edit-column>\n    <vaadin-grid-column id=\"column1\"></vaadin-grid-column>\n    <vaadin-grid-column id=\"column2\"></vaadin-grid-column>\n  </vaadin-grid>\n\n  <vaadin-form-layout slot=\"form\">\n    <vaadin-text-field label=\"First\" path=\"name\"></vaadin-text-field>\n    <vaadin-text-field label=\"Surname\" path=\"surname\"></vaadin-text-field>\n  </vaadin-form-layout>\n\n  <div slot=\"toolbar\">Total singers: 2</div>\n  <button slot=\"new-button\">New singer</button>\n\n  <button slot=\"save-button\">Save changes</button>\n  <button slot=\"cancel-button\">Discard changes</button>\n  <button slot=\"delete-button\">Delete singer</button>\n</vaadin-crud>\n```\n```js\nconst crud = document.querySelector('#crud');\n\nconst column1 = document.querySelector('#column1');\ncolumn1.headerRenderer = (root, column) => {\n  root.textContent = 'Name';\n};\ncolumn1.renderer = (root, column, model) => {\n  root.textContent = model.item.name;\n};\n\nconst column2 = document.querySelector('#column2');\ncolumn2.headerRenderer = (root, column) => {\n  root.textContent = 'Surname';\n};\ncolumn2.renderer = (root, column, model) => {\n  root.textContent = model.item.surname;\n};\n\ncrud.items = [\n  { name: 'John', surname: 'Lennon', role: 'singer' },\n  { name: 'Ringo', surname: 'Starr', role: 'drums' },\n  // ... more items\n];\n```\n\n### Helpers\n\nThe following elements are used to auto-configure the grid and the editor\n- [`<vaadin-crud-edit-column>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-form-layout)\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------|----------------\n`toolbar` | Toolbar container at the bottom. By default it contains the the `new` button\n\nThe following custom properties are available:\n\nCustom Property | Description | Default\n----------------|----------------\n--vaadin-crud-editor-max-height | max height of editor when opened on the bottom | 40%\n--vaadin-crud-editor-max-width | max width of editor when opened on the side | 40%\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -196,14 +196,14 @@
             },
             {
               "name": ".include",
-              "description": "A comma-separated list of fields to include in the generated grid and the generated editor.\n\nIt can be used to explicitly define the field order.\n\nWhen it is defined [`exclude`](https://cdn.vaadin.com/vaadin-web-components/24.1.0/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
+              "description": "A comma-separated list of fields to include in the generated grid and the generated editor.\n\nIt can be used to explicitly define the field order.\n\nWhen it is defined [`exclude`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
               "value": {
                 "kind": "expression"
               }
             },
             {
               "name": ".exclude",
-              "description": "A comma-separated list of fields to be excluded from the generated grid and the generated editor.\n\nWhen [`include`](https://cdn.vaadin.com/vaadin-web-components/24.1.0/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
+              "description": "A comma-separated list of fields to be excluded from the generated grid and the generated editor.\n\nWhen [`include`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
               "value": {
                 "kind": "expression"
               }