@vaadin/crud 24.0.0-alpha1 → 24.0.0-alpha11

package/src/vaadin-crud.js

@@ -1,7 +1,12 @@
 /**
  * @license
- * Copyright (c) 2018 - 2022 Vaadin Ltd.
- * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
  */
 import '@vaadin/button/src/vaadin-button.js';
 import '@vaadin/dialog/src/vaadin-dialog.js';
@@ -15,8 +20,23 @@ import { html, PolymerElement } from '@polymer/polymer/polymer-element.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';
-import { SlotMixin } from '@vaadin/component-base/src/slot-mixin.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { getProperty, setProperty } from './vaadin-crud-helpers.js';
+
+/**
+ * @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);
+      },
+    });
+  }
+}
 
 /**
  * `<vaadin-crud>` is a Web Component for [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations.
@@ -27,23 +47,34 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  *
  * A grid and an editor will be automatically generated and configured based on the data structure provided.
  *
- * #### Example:
  * ```html
- * <vaadin-crud items='[{"name": "John", "surname": "Lennon", "role": "singer"},
- *                      {"name": "Ringo", "surname": "Starr", "role": "drums"}]'></vaadin-crud>
+ * <vaadin-crud></vaadin-crud>
+ * ```
+ *
+ * ```js
+ * const crud = document.querySelector('vaadin-crud');
+ *
+ * crud.items = [
+ *   { name: 'John', surname: 'Lennon', role: 'singer' },
+ *   { name: 'Ringo', surname: 'Starr', role: 'drums' },
+ *   // ... more items
+ * ];
  * ```
  *
  * ### Data Provider Function
  *
  * Otherwise, you can provide a [`dataProvider`](#/elements/vaadin-crud#property-dataProvider) function.
- * #### Example:
- * ```html
- * <vaadin-crud></vaadin-crud>
- * ```
+ *
  * ```js
  * const crud = document.querySelector('vaadin-crud');
- * const users = [{'name': 'John', 'surname': 'Lennon', 'role': 'singer'}, ...];
- * crud.dataProvider = function(params, callback) {
+ *
+ * const users = [
+ *   { name: 'John', surname: 'Lennon', role: 'singer' },
+ *   { name: 'Ringo', surname: 'Starr', role: 'drums' },
+ *   // ... more items
+ * ];
+ *
+ * crud.dataProvider = (params, callback) => {
  *   const chunk = users.slice(params.page * params.pageSize, params.page * params.pageSize + params.pageSize);
  *   callback(chunk, people.length);
  * };
@@ -56,20 +87,20 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  *
  * Alternatively you can fully configure the component by using `slot` names.
  *
- * Slot name | Description
- * ----------------|----------------
- * `grid` | To replace the auto-generated grid with a custom one.
- * `form` | To replace the auto-generated form.
- * `toolbar` | To replace the toolbar content. Add an element with the attribute `new-button` for the new item action.
+ * Slot name      | Description
+ * ---------------|----------------
+ * `grid`         | To replace the auto-generated grid with a custom one.
+ * `form`         | To replace the auto-generated form.
+ * `save-button`  | To replace the "Save" button.
+ * `cancel-button`| To replace the "Cancel" button.
+ * `delete-button`| To replace the "Delete" button.
+ * `toolbar`      | To provide the toolbar content (by default, it's empty).
+ * `new-button`   | To replace the "New item" button.
  *
  * #### Example:
  *
  * ```html
- * <vaadin-crud
- *   id="crud"
- *   items='[{"name": "John", "surname": "Lennon", "role": "singer"},
- *           {"name": "Ringo", "surname": "Starr", "role": "drums"}]'
- * >
+ * <vaadin-crud id="crud">
  *   <vaadin-grid slot="grid">
  *     <vaadin-crud-edit-column></vaadin-crud-edit-column>
  *     <vaadin-grid-column id="column1"></vaadin-grid-column>
@@ -81,10 +112,12 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  *     <vaadin-text-field label="Surname" path="surname"></vaadin-text-field>
  *   </vaadin-form-layout>
  *
- *   <div slot="toolbar">
- *     Total singers: [[size]]
- *     <button new-button>New singer</button>
- *   </div>
+ *   <div slot="toolbar">Total singers: 2</div>
+ *   <button slot="new-button">New singer</button>
+ *
+ *   <button slot="save-button">Save changes</button>
+ *   <button slot="cancel-button">Discard changes</button>
+ *   <button slot="delete-button">Delete singer</button>
  * </vaadin-crud>
  * ```
  * ```js
@@ -105,6 +138,12 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * column2.renderer = (root, column, model) => {
  *   root.textContent = model.item.surname;
  * };
+ *
+ * crud.items = [
+ *   { name: 'John', surname: 'Lennon', role: 'singer' },
+ *   { name: 'Ringo', surname: 'Starr', role: 'drums' },
+ *   // ... more items
+ * ];
  * ```
  *
  * ### Helpers
@@ -144,10 +183,9 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * @extends HTMLElement
  * @mixes ControllerMixin
  * @mixes ElementMixin
- * @mixes SlotMixin
  * @mixes ThemableMixin
  */
-class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))) {
+class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement))) {
   static get template() {
     return html`
       <style>
@@ -233,23 +271,11 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
 
       <div id="container">
         <div id="main">
-          <slot name="grid">
-            <vaadin-crud-grid
-              theme$="[[_theme]]"
-              id="grid"
-              include="[[include]]"
-              exclude="[[exclude]]"
-              no-sort="[[noSort]]"
-              no-filter="[[noFilter]]"
-              no-head="[[noHead]]"
-              hide-edit-column="[[editOnClick]]"
-            ></vaadin-crud-grid>
-          </slot>
-
-          <div id="toolbar" part="toolbar" on-click="__new">
-            <slot name="toolbar">
-              <vaadin-button new-button="" id="new" theme="primary">[[i18n.newItem]]</vaadin-button>
-            </slot>
+          <slot name="grid"></slot>
+
+          <div id="toolbar" part="toolbar">
+            <slot name="toolbar"></slot>
+            <slot name="new-button"></slot>
           </div>
         </div>
 
@@ -283,7 +309,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
         theme$="[[_theme]]"
         id="confirmCancel"
         on-confirm="__confirmCancel"
-        cancel
+        cancel-button-visible
         confirm-text="[[i18n.confirm.cancel.button.confirm]]"
         cancel-text="[[i18n.confirm.cancel.button.dismiss]]"
         header="[[i18n.confirm.cancel.title]]"
@@ -295,7 +321,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
         theme$="[[_theme]]"
         id="confirmDelete"
         on-confirm="__confirmDelete"
-        cancel
+        cancel-button-visible
         confirm-text="[[i18n.confirm.delete.button.confirm]]"
         cancel-text="[[i18n.confirm.delete.button.dismiss]]"
         header="[[i18n.confirm.delete.title]]"
@@ -320,7 +346,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
        * @private
        */
       _grid: {
-        type: HTMLElement,
+        type: Object,
         observer: '__gridChanged',
       },
 
@@ -329,7 +355,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
        * @private
        */
       _form: {
-        type: HTMLElement,
+        type: Object,
         observer: '__formChanged',
       },
 
@@ -338,34 +364,39 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
        * @private
        */
       _saveButton: {
-        type: HTMLElement,
-        observer: '__saveButtonChanged',
+        type: Object,
       },
 
       /**
-       * A reference to the save button which will be teleported to the dialog
+       * A reference to the delete button which will be teleported to the dialog
        * @private
        */
       _deleteButton: {
-        type: HTMLElement,
-        observer: '__deleteButtonChanged',
+        type: Object,
       },
 
       /**
-       * A reference to the save button which will be teleported to the dialog
+       * A reference to the cancel button which will be teleported to the dialog
        * @private
        */
       _cancelButton: {
-        type: HTMLElement,
-        observer: '__cancelButtonChanged',
+        type: Object,
       },
 
       /**
-       * A reference to the editor header element will be teleported to the dialog.
+       * A reference to the default editor header element created by the CRUD
        * @private
        */
-      _headerNode: {
-        type: HTMLElement,
+      _defaultHeader: {
+        type: Object,
+      },
+
+      /**
+       * A reference to the "New item" button
+       * @private
+       */
+      _newButton: {
+        type: Object,
       },
 
       /**
@@ -604,13 +635,15 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
 
   static get observers() {
     return [
-      '__headerPropsChanged(_headerNode, __isNew, i18n.newItem, i18n.editItem)',
+      '__headerPropsChanged(_defaultHeader, __isNew, i18n.newItem, i18n.editItem)',
       '__formPropsChanged(_form, _theme, include, exclude)',
+      '__gridPropsChanged(_grid, _theme, include, exclude, noFilter, noHead, noSort)',
       '__i18nChanged(i18n, _grid)',
       '__editOnClickChanged(editOnClick, _grid)',
       '__saveButtonPropsChanged(_saveButton, i18n.saveItem, __isDirty)',
       '__cancelButtonPropsChanged(_cancelButton, i18n.cancel)',
       '__deleteButtonPropsChanged(_deleteButton, i18n.deleteItem, __isNew)',
+      '__newButtonPropsChanged(_newButton, i18n.newItem)',
     ];
   }
 
@@ -619,59 +652,66 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
     return ['bottom', 'aside'].includes(editorPosition);
   }
 
-  /** @protected */
-  get slots() {
-    // NOTE: order in which the toolbar buttons are listed matters.
-    return {
-      ...super.slots,
-      header: () => {
-        return document.createElement('h3');
-      },
-      form: () => {
-        return document.createElement('vaadin-crud-form');
-      },
-      'save-button': () => {
-        const button = document.createElement('vaadin-button');
-        button.id = 'save';
-        button.setAttribute('theme', 'primary');
-        return button;
-      },
-      'cancel-button': () => {
-        const button = document.createElement('vaadin-button');
-        button.id = 'cancel';
-        button.setAttribute('theme', 'tertiary');
-        return button;
-      },
-      'delete-button': () => {
-        const button = document.createElement('vaadin-button');
-        button.id = 'delete';
-        button.setAttribute('theme', 'tertiary error');
-        return button;
-      },
-    };
-  }
-
   constructor() {
     super();
+
+    this.__cancel = this.__cancel.bind(this);
+    this.__delete = this.__delete.bind(this);
+    this.__save = this.__save.bind(this);
+    this.__new = this.__new.bind(this);
+    this.__onFormChange = this.__onFormChange.bind(this);
+    this.__onGridEdit = this.__onGridEdit.bind(this);
+    this.__onGridSizeChanged = this.__onGridSizeChanged.bind(this);
+    this.__onGridActiveItemChanged = this.__onGridActiveItemChanged.bind(this);
+
     this._observer = new FlattenedNodesObserver(this, (info) => {
       this.__onDomChange(info.addedNodes);
     });
   }
 
+  /** @protected */
+  get _headerNode() {
+    return this._headerController && this._headerController.node;
+  }
+
+  /**
+   * A reference to all fields inside the [`_form`](#/elements/vaadin-crud#property-_form) element
+   * @return {!Array<!HTMLElement>}
+   * @protected
+   */
+  get _fields() {
+    if (!this.__fields || !this.__fields.length) {
+      this.__fields = Array.from(this._form.querySelectorAll('*')).filter((e) => e.validate || e.checkValidity);
+    }
+    return this.__fields;
+  }
+
   /** @protected */
   ready() {
     super.ready();
-    this.__save = this.__save.bind(this);
-    this.__cancel = this.__cancel.bind(this);
-    this.__delete = this.__delete.bind(this);
-    this.__onFormChange = this.__onFormChange.bind(this);
-    this.__onGridEdit = this.__onGridEdit.bind(this);
-    this.__onGridSizeChanged = this.__onGridSizeChanged.bind(this);
-    this.__onGridActiveItemChanged = this.__onGridActiveItemChanged.bind(this);
-    this._grid = this.$.grid;
+
     this.$.dialog.$.overlay.addEventListener('vaadin-overlay-outside-click', this.__cancel);
     this.$.dialog.$.overlay.addEventListener('vaadin-overlay-escape-press', this.__cancel);
 
+    this._headerController = new SlotController(this, 'header', 'h3', {
+      initializer: (node) => {
+        this._defaultHeader = node;
+      },
+    });
+    this.addController(this._headerController);
+
+    this._gridController = new SlotController(this, 'grid', 'vaadin-crud-grid');
+    this.addController(this._gridController);
+
+    this.addController(new SlotController(this, 'form', 'vaadin-crud-form'));
+
+    this.addController(new ButtonSlotController(this, 'new', 'primary'));
+
+    // 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(
       new MediaQueryController(this._fullscreenMediaQuery, (matches) => {
         this._fullscreen = matches;
@@ -824,7 +864,8 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
   /** @private */
   __onDomChange(addedNodes) {
     // TODO: restore default button when a corresponding slotted button is removed.
-    // Consider creating a controller to reuse custom helper logic from FieldMixin.
+    // 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) => {
@@ -842,9 +883,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
           this._form = node;
         } else if (slotAttributeValue.indexOf('button') >= 0) {
           const [button] = slotAttributeValue.split('-');
-          this[`_${button}Button`] = node;
-        } else if (slotAttributeValue === 'header') {
-          this._headerNode = node;
+          this.__setupSlottedButton(button, node);
         }
       });
 
@@ -928,17 +967,37 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
     if (form) {
       form.include = include;
       form.exclude = exclude;
-      form.setAttribute('theme', theme);
+
+      if (theme) {
+        form.setAttribute('theme', theme);
+      } else {
+        form.removeAttribute('theme');
+      }
     }
   }
 
   /**
-   * @param {HTMLElement} saveButton
-   * @param {HTMLElement | undefined} oldSaveButton
+   * @param {HTMLElement | undefined} form
+   * @param {string} theme
+   * @param {string | string[] | undefined} include
+   * @param {string | RegExp} exclude
    * @private
    */
-  __saveButtonChanged(saveButton, oldSaveButton) {
-    this.__setupSlottedButton(saveButton, oldSaveButton, this.__save);
+  // eslint-disable-next-line max-params
+  __gridPropsChanged(grid, theme, include, exclude, noFilter, noHead, noSort) {
+    if (grid && grid === this._gridController.defaultNode) {
+      grid.include = include;
+      grid.exclude = exclude;
+      grid.noFilter = noFilter;
+      grid.noHead = noHead;
+      grid.noSort = noSort;
+
+      if (theme) {
+        grid.setAttribute('theme', theme);
+      } else {
+        grid.removeAttribute('theme');
+      }
+    }
   }
 
   /**
@@ -954,15 +1013,6 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
     }
   }
 
-  /**
-   * @param {HTMLElement} deleteButton
-   * @param {HTMLElement | undefined} oldDeleteButton
-   * @private
-   */
-  __deleteButtonChanged(deleteButton, oldDeleteButton) {
-    this.__setupSlottedButton(deleteButton, oldDeleteButton, this.__delete);
-  }
-
   /**
    * @param {HTMLElement | undefined} deleteButton
    * @param {string} i18nLabel
@@ -976,15 +1026,6 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
     }
   }
 
-  /**
-   * @param {HTMLElement} cancelButton
-   * @param {HTMLElement | undefined} oldCancelButton
-   * @private
-   */
-  __cancelButtonChanged(cancelButton, oldCancelButton) {
-    this.__setupSlottedButton(cancelButton, oldCancelButton, this.__cancel);
-  }
-
   /**
    * @param {HTMLElement | undefined} saveButton
    * @param {string} i18nLabel
@@ -997,17 +1038,31 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
   }
 
   /**
+   * @param {HTMLElement | undefined} newButton
+   * @param {string} i18nNewItem
+   * @private
+   */
+  __newButtonPropsChanged(newButton, i18nNewItem) {
+    if (newButton) {
+      newButton.textContent = i18nNewItem;
+    }
+  }
+
+  /**
+   * @param {string} type
    * @param {HTMLElement} newButton
-   * @param {HTMLElement | undefined | null} oldButton
-   * @param {Function} clickListener
    * @private
    */
-  __setupSlottedButton(newButton, oldButton, clickListener) {
-    if (oldButton && oldButton.parentElement) {
-      oldButton.parentElement.removeChild(oldButton);
+  __setupSlottedButton(type, button) {
+    const property = `_${type}Button`;
+    const listener = `__${type}`;
+
+    if (this[property] && this[property] !== button) {
+      this[property].remove();
     }
 
-    newButton.addEventListener('click', clickListener);
+    button.addEventListener('click', this[listener]);
+    this[property] = button;
   }
 
   /** @private */
@@ -1018,15 +1073,17 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
   }
 
   /** @private */
-  __editOnClickChanged(editOnClick, _grid) {
-    if (!_grid) {
+  __editOnClickChanged(editOnClick, grid) {
+    if (!grid) {
       return;
     }
 
+    grid.hideEditColumn = editOnClick;
+
     if (editOnClick) {
-      _grid.addEventListener('active-item-changed', this.__onGridActiveItemChanged);
+      grid.addEventListener('active-item-changed', this.__onGridActiveItemChanged);
     } else {
-      _grid.removeEventListener('active-item-changed', this.__onGridActiveItemChanged);
+      grid.removeEventListener('active-item-changed', this.__onGridActiveItemChanged);
     }
   }
 
@@ -1127,7 +1184,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
       this._fields.forEach((e) => {
         const path = e.path || e.getAttribute('path');
         if (path) {
-          e.value = this.get(path, item);
+          e.value = getProperty(path, item);
         }
       });
 
@@ -1136,18 +1193,6 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
     }
   }
 
-  /**
-   * A reference to all fields inside the [`_form`](#/elements/vaadin-crud#property-_form) element
-   * @return {!Array<!HTMLElement>}
-   * @protected
-   */
-  get _fields() {
-    if (!this.__fields || !this.__fields.length) {
-      this.__fields = Array.from(this._form.querySelectorAll('*')).filter((e) => e.validate || e.checkValidity);
-    }
-    return this.__fields;
-  }
-
   /** @private */
   __validate() {
     return this._fields.every((e) => (e.validate || e.checkValidity).call(e));
@@ -1155,7 +1200,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
 
   /** @private */
   __setHighlightedItem(item) {
-    if (this._grid === this.$.grid) {
+    if (this._grid === this._gridController.defaultNode) {
       this._grid.selectedItems = item ? [item] : [];
     }
   }
@@ -1171,11 +1216,8 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
   }
 
   /** @private */
-  __new(event) {
-    // This allows listening to parent element and fire only when clicking on default or custom new-button.
-    if (event.composedPath().some((e) => e.nodeType === 1 && e.hasAttribute('new-button'))) {
-      this.__confirmBeforeChangingEditedItem(null, true);
-    }
+  __new() {
+    this.__confirmBeforeChangingEditedItem(null, true);
   }
 
   /** @private */
@@ -1211,7 +1253,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
     this._fields.forEach((e) => {
       const path = e.path || e.getAttribute('path');
       if (path) {
-        this.__set(path, e.value, item);
+        setProperty(path, e.value, item);
       }
     });
     const evt = this.dispatchEvent(new CustomEvent('save', { detail: { item }, cancelable: true }));
@@ -1223,7 +1265,9 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
           this.items.push(item);
         }
       } else {
-        this.editedItem = this.editedItem || {};
+        if (!this.editedItem) {
+          this.editedItem = {};
+        }
         Object.assign(this.editedItem, item);
       }
       this._grid.clearCache();
@@ -1265,23 +1309,6 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
     }
   }
 
-  /**
-   * Utility method for setting nested values in JSON objects but initializing empty keys unless `Polymer.Base.set`
-   * @private
-   */
-  __set(path, val, obj) {
-    if (obj && path) {
-      path
-        .split('.')
-        .slice(0, -1)
-        .reduce((o, p) => {
-          o[p] = o[p] || {};
-          return o[p];
-        }, obj);
-      this.set(path, val, obj);
-    }
-  }
-
   /**
    * Fired when user wants to edit an existing item. If the default is prevented, then
    * a new item is not assigned to the form, giving that responsibility to the app, though

package/theme/material/vaadin-crud-styles.js

@@ -97,13 +97,6 @@ registerStyles(
       :host([dir='rtl']) [part='toolbar'] ::slotted(*:not(:first-child)) {
         margin-right: 0.5em;
       }
-
-      vaadin-text-field[theme~='small'] {
-        height: 24px;
-        font-size: var(--material-small-font-size);
-        margin: 0;
-        padding: 0;
-      }
     `,
   ],
   { moduleId: 'material-crud' },

package/vaadin-crud-edit-column.d.ts

@@ -0,0 +1 @@
+export * from './src/vaadin-crud-edit-column.js';

package/vaadin-crud-edit-column.js

@@ -0,0 +1 @@
+export * from './src/vaadin-crud-edit-column.js';

package/vaadin-crud-edit.d.ts

@@ -0,0 +1 @@
+export * from './src/vaadin-crud-edit.js';

package/vaadin-crud-edit.js

@@ -0,0 +1 @@
+export * from './src/vaadin-crud-edit.js';