@vaadin/grid 24.8.0-alpha8 → 25.0.0-alpha1

package/src/vaadin-lit-grid.js

@@ -1,78 +0,0 @@
-/**
- * @license
- * Copyright (c) 2017 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import './vaadin-lit-grid-column.js';
-import { html, LitElement } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { isIOS, isSafari } from '@vaadin/component-base/src/browser-utils.js';
-import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { GridMixin } from './vaadin-grid-mixin.js';
-import { gridStyles } from './vaadin-grid-styles.js';
-
-/**
- * LitElement based version of `<vaadin-grid>` web component.
- *
- * ## Disclaimer
- *
- * This component is an experiment and not yet a part of Vaadin platform.
- * There is no ETA regarding specific Vaadin version where it'll land.
- * Feel free to try this code in your apps as per Apache 2.0 license.
- */
-class Grid extends GridMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
-  static get is() {
-    return 'vaadin-grid';
-  }
-
-  static get styles() {
-    return gridStyles;
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <div
-        id="scroller"
-        ?safari="${isSafari}"
-        ?ios="${isIOS}"
-        ?loading="${this.loading}"
-        ?column-reordering-allowed="${this.columnReorderingAllowed}"
-        ?empty-state="${this.__emptyState}"
-      >
-        <table
-          id="table"
-          role="treegrid"
-          aria-multiselectable="true"
-          tabindex="0"
-          aria-label="${ifDefined(this.accessibleName)}"
-        >
-          <caption id="sizer" part="row"></caption>
-          <thead id="header" role="rowgroup"></thead>
-          <tbody id="items" role="rowgroup"></tbody>
-          <tbody id="emptystatebody">
-            <tr id="emptystaterow">
-              <td part="empty-state" id="emptystatecell" tabindex="0">
-                <slot name="empty-state" id="emptystateslot"></slot>
-              </td>
-            </tr>
-          </tbody>
-          <tfoot id="footer" role="rowgroup"></tfoot>
-        </table>
-
-        <div part="reorder-ghost"></div>
-      </div>
-
-      <slot name="tooltip"></slot>
-
-      <div id="focusexit" tabindex="0"></div>
-    `;
-  }
-}
-
-defineCustomElement(Grid);
-
-export { Grid };

package/theme/lumo/lit-all-imports.d.ts

@@ -1,11 +0,0 @@
-import './vaadin-lit-grid-column-group.js';
-import './vaadin-lit-grid-column.js';
-import './vaadin-lit-grid-filter.js';
-import './vaadin-lit-grid-filter-column.js';
-import './vaadin-lit-grid-selection-column.js';
-import './vaadin-lit-grid-sorter.js';
-import './vaadin-lit-grid-sort-column.js';
-import './vaadin-lit-grid-tree-toggle.js';
-import './vaadin-lit-grid-tree-column.js';
-import './vaadin-lit-grid.js';
-import '../../src/lit-all-imports.js';

package/theme/lumo/lit-all-imports.js

@@ -1,11 +0,0 @@
-import './vaadin-lit-grid-column-group.js';
-import './vaadin-lit-grid-column.js';
-import './vaadin-lit-grid-filter.js';
-import './vaadin-lit-grid-filter-column.js';
-import './vaadin-lit-grid-selection-column.js';
-import './vaadin-lit-grid-sorter.js';
-import './vaadin-lit-grid-sort-column.js';
-import './vaadin-lit-grid-tree-toggle.js';
-import './vaadin-lit-grid-tree-column.js';
-import './vaadin-lit-grid.js';
-import '../../src/lit-all-imports.js';

package/theme/lumo/vaadin-lit-grid-column-group.d.ts

@@ -1 +0,0 @@
-import '../../src/vaadin-lit-grid-column-group.js';

package/theme/lumo/vaadin-lit-grid-column-group.js

@@ -1 +0,0 @@
-import '../../src/vaadin-lit-grid-column-group.js';

package/theme/lumo/vaadin-lit-grid-column.d.ts

@@ -1 +0,0 @@
-import '../../src/vaadin-lit-grid-column.js';

package/theme/lumo/vaadin-lit-grid-column.js

@@ -1 +0,0 @@
-import '../../src/vaadin-lit-grid-column.js';

package/theme/lumo/vaadin-lit-grid-filter-column.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-lit-grid-filter.js';
-import '../../src/vaadin-lit-grid-filter-column.js';

package/theme/lumo/vaadin-lit-grid-filter-column.js

@@ -1,2 +0,0 @@
-import './vaadin-lit-grid-filter.js';
-import '../../src/vaadin-lit-grid-filter-column.js';

package/theme/lumo/vaadin-lit-grid-filter.d.ts

@@ -1,2 +0,0 @@
-import '@vaadin/text-field/theme/lumo/vaadin-lit-text-field.js';
-import '../../src/vaadin-lit-grid-filter.js';

package/theme/lumo/vaadin-lit-grid-filter.js

@@ -1,2 +0,0 @@
-import '@vaadin/text-field/theme/lumo/vaadin-lit-text-field.js';
-import '../../src/vaadin-lit-grid-filter.js';

package/theme/lumo/vaadin-lit-grid-selection-column.d.ts

@@ -1,2 +0,0 @@
-import '@vaadin/checkbox/theme/lumo/vaadin-lit-checkbox.js';
-import '../../src/vaadin-lit-grid-selection-column.js';

package/theme/lumo/vaadin-lit-grid-selection-column.js

@@ -1,2 +0,0 @@
-import '@vaadin/checkbox/theme/lumo/vaadin-lit-checkbox.js';
-import '../../src/vaadin-lit-grid-selection-column.js';

package/theme/lumo/vaadin-lit-grid-sort-column.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-lit-grid-sorter.js';
-import '../../src/vaadin-lit-grid-sort-column.js';

package/theme/lumo/vaadin-lit-grid-sort-column.js

@@ -1,2 +0,0 @@
-import './vaadin-lit-grid-sorter.js';
-import '../../src/vaadin-lit-grid-sort-column.js';

package/theme/lumo/vaadin-lit-grid-sorter.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-grid-sorter-styles.js';
-import '../../src/vaadin-lit-grid-sorter.js';

package/theme/lumo/vaadin-lit-grid-sorter.js

@@ -1,2 +0,0 @@
-import './vaadin-grid-sorter-styles.js';
-import '../../src/vaadin-lit-grid-sorter.js';

package/theme/lumo/vaadin-lit-grid-tree-column.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-lit-grid-tree-toggle.js';
-import '../../src/vaadin-lit-grid-tree-column.js';

package/theme/lumo/vaadin-lit-grid-tree-column.js

@@ -1,2 +0,0 @@
-import './vaadin-lit-grid-tree-toggle.js';
-import '../../src/vaadin-lit-grid-tree-column.js';

package/theme/lumo/vaadin-lit-grid-tree-toggle.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-grid-tree-toggle-styles.js';
-import '../../src/vaadin-lit-grid-tree-toggle.js';

package/theme/lumo/vaadin-lit-grid-tree-toggle.js

@@ -1,2 +0,0 @@
-import './vaadin-grid-tree-toggle-styles.js';
-import '../../src/vaadin-lit-grid-tree-toggle.js';

package/theme/lumo/vaadin-lit-grid.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-grid-styles.js';
-import '../../src/vaadin-lit-grid.js';

package/theme/lumo/vaadin-lit-grid.js

@@ -1,2 +0,0 @@
-import './vaadin-grid-styles.js';
-import '../../src/vaadin-lit-grid.js';

package/theme/material/all-imports.d.ts

@@ -1,11 +0,0 @@
-import './vaadin-grid-column-group.js';
-import './vaadin-grid-column.js';
-import './vaadin-grid-filter.js';
-import './vaadin-grid-filter-column.js';
-import './vaadin-grid-selection-column.js';
-import './vaadin-grid-sorter.js';
-import './vaadin-grid-sort-column.js';
-import './vaadin-grid-tree-toggle.js';
-import './vaadin-grid-tree-column.js';
-import './vaadin-grid.js';
-import '../../src/all-imports.js';

package/theme/material/all-imports.js

@@ -1,11 +0,0 @@
-import './vaadin-grid-column-group.js';
-import './vaadin-grid-column.js';
-import './vaadin-grid-filter.js';
-import './vaadin-grid-filter-column.js';
-import './vaadin-grid-selection-column.js';
-import './vaadin-grid-sorter.js';
-import './vaadin-grid-sort-column.js';
-import './vaadin-grid-tree-toggle.js';
-import './vaadin-grid-tree-column.js';
-import './vaadin-grid.js';
-import '../../src/all-imports.js';

package/theme/material/lit-all-imports.d.ts

@@ -1,11 +0,0 @@
-import './vaadin-lit-grid-column-group.js';
-import './vaadin-lit-grid-column.js';
-import './vaadin-lit-grid-filter.js';
-import './vaadin-lit-grid-filter-column.js';
-import './vaadin-lit-grid-selection-column.js';
-import './vaadin-lit-grid-sorter.js';
-import './vaadin-lit-grid-sort-column.js';
-import './vaadin-lit-grid-tree-toggle.js';
-import './vaadin-lit-grid-tree-column.js';
-import './vaadin-lit-grid.js';
-import '../../src/lit-all-imports.js';

package/theme/material/lit-all-imports.js

@@ -1,11 +0,0 @@
-import './vaadin-lit-grid-column-group.js';
-import './vaadin-lit-grid-column.js';
-import './vaadin-lit-grid-filter.js';
-import './vaadin-lit-grid-filter-column.js';
-import './vaadin-lit-grid-selection-column.js';
-import './vaadin-lit-grid-sorter.js';
-import './vaadin-lit-grid-sort-column.js';
-import './vaadin-lit-grid-tree-toggle.js';
-import './vaadin-lit-grid-tree-column.js';
-import './vaadin-lit-grid.js';
-import '../../src/lit-all-imports.js';

package/theme/material/vaadin-grid-column-group.d.ts

@@ -1 +0,0 @@
-import '../../src/vaadin-grid-column-group.js';

package/theme/material/vaadin-grid-column-group.js

@@ -1 +0,0 @@
-import '../../src/vaadin-grid-column-group.js';

package/theme/material/vaadin-grid-column.d.ts

@@ -1 +0,0 @@
-import '../../src/vaadin-grid-column.js';

package/theme/material/vaadin-grid-column.js

@@ -1 +0,0 @@
-import '../../src/vaadin-grid-column.js';

package/theme/material/vaadin-grid-filter-column.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-grid-filter.js';
-import '../../src/vaadin-grid-filter-column.js';

package/theme/material/vaadin-grid-filter-column.js

@@ -1,2 +0,0 @@
-import './vaadin-grid-filter.js';
-import '../../src/vaadin-grid-filter-column.js';

package/theme/material/vaadin-grid-filter.d.ts

@@ -1,2 +0,0 @@
-import '@vaadin/text-field/theme/material/vaadin-text-field.js';
-import '../../src/vaadin-grid-filter.js';

package/theme/material/vaadin-grid-filter.js

@@ -1,2 +0,0 @@
-import '@vaadin/text-field/theme/material/vaadin-text-field.js';
-import '../../src/vaadin-grid-filter.js';

package/theme/material/vaadin-grid-selection-column.d.ts

@@ -1,2 +0,0 @@
-import '@vaadin/checkbox/theme/material/vaadin-checkbox.js';
-import '../../src/vaadin-grid-selection-column.js';

package/theme/material/vaadin-grid-selection-column.js

@@ -1,2 +0,0 @@
-import '@vaadin/checkbox/theme/material/vaadin-checkbox.js';
-import '../../src/vaadin-grid-selection-column.js';

package/theme/material/vaadin-grid-sort-column.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-grid-sorter.js';
-import '../../src/vaadin-grid-sort-column.js';

package/theme/material/vaadin-grid-sort-column.js

@@ -1,2 +0,0 @@
-import './vaadin-grid-sorter.js';
-import '../../src/vaadin-grid-sort-column.js';

package/theme/material/vaadin-grid-sorter-styles.d.ts

@@ -1,2 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/font-icons.js';

package/theme/material/vaadin-grid-sorter-styles.js

@@ -1,73 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/font-icons.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-grid-sorter',
-  css`
-    :host {
-      justify-content: flex-start;
-      height: 100%;
-      align-items: center;
-      -webkit-user-select: none;
-      user-select: none;
-    }
-
-    :host([direction]) {
-      color: var(--material-body-text-color);
-    }
-
-    [part='indicators'] {
-      order: -1;
-    }
-
-    [part='indicators']::before {
-      display: inline-block;
-      width: 24px;
-      font-family: 'material-icons';
-      font-size: 18px;
-      line-height: 18px;
-      transition:
-        0.1s opacity cubic-bezier(0.4, 0, 0.2, 0.1),
-        0.1s width cubic-bezier(0.4, 0, 0.2, 0.1);
-      opacity: 0.5;
-    }
-
-    :host(:not([direction])) [part='indicators']::before {
-      content: var(--material-icons-arrow-upward);
-      width: 0;
-      opacity: 0;
-    }
-
-    :host([direction]) [part='indicators']::before {
-      opacity: 1;
-    }
-
-    :host([direction='asc']) [part='indicators']::before {
-      content: var(--material-icons-arrow-upward);
-    }
-
-    :host([direction='desc']) [part='indicators']::before {
-      content: var(--material-icons-arrow-downward);
-    }
-
-    :host(:hover) [part='indicators']::before {
-      width: 24px;
-      opacity: 1;
-    }
-
-    [part='order'] {
-      right: 4px;
-      top: -8px;
-      font-size: 10px;
-    }
-
-    /* RTL specific styles */
-
-    :host([dir='rtl']) [part='order'] {
-      left: 4px;
-      right: auto;
-    }
-  `,
-  { moduleId: 'material-grid-sorter' },
-);

package/theme/material/vaadin-grid-sorter.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-grid-sorter-styles.js';
-import '../../src/vaadin-grid-sorter.js';

package/theme/material/vaadin-grid-sorter.js

@@ -1,2 +0,0 @@
-import './vaadin-grid-sorter-styles.js';
-import '../../src/vaadin-grid-sorter.js';

package/theme/material/vaadin-grid-styles.d.ts

@@ -1,2 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/typography.js';

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

@@ -1,266 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/typography.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-grid',
-  css`
-    :host {
-      background-color: var(--material-background-color);
-      font-family: var(--material-font-family);
-      font-size: var(--material-small-font-size);
-      line-height: 20px;
-      color: var(--material-body-text-color);
-    }
-
-    :host([disabled]) {
-      opacity: 0.7;
-    }
-
-    [part~='cell'] {
-      min-height: 48px;
-      -webkit-tap-highlight-color: transparent;
-      --_cell-padding: var(--vaadin-grid-cell-padding, var(--_cell-default-padding));
-      --_cell-default-padding: 8px 16px;
-    }
-
-    [part~='cell'] ::slotted(vaadin-grid-cell-content) {
-      padding: var(--_cell-padding);
-    }
-
-    [part~='details-cell'] {
-      --_cell-default-padding: 14px 16px;
-    }
-
-    [part~='header-cell'],
-    [part~='footer-cell'] {
-      background-color: var(--vaadin-grid-cell-background, var(--material-background-color));
-      color: var(--material-secondary-text-color);
-      font-size: var(--material-caption-font-size);
-      font-weight: 500;
-    }
-
-    /* Header and footer divider between body rows */
-
-    [part~='body-cell'],
-    [part~='details-cell'],
-    [part~='row']:last-child > [part~='header-cell'] {
-      border-bottom: 1px solid var(--material-divider-color);
-    }
-
-    [part~='row']:first-child > [part~='footer-cell'] {
-      border-top: 1px solid var(--material-divider-color);
-    }
-
-    /* Body rows/cells */
-
-    [part~='body-cell'] {
-      background-color: var(--vaadin-grid-cell-background, var(--material-background-color));
-    }
-
-    [part~='row']:hover > [part~='body-cell'] {
-      background: var(
-        --vaadin-grid-cell-background,
-        linear-gradient(
-            var(--_material-grid-row-hover-background-color, rgba(0, 0, 0, 0.04)),
-            var(--_material-grid-row-hover-background-color, rgba(0, 0, 0, 0.04))
-          )
-          var(--material-background-color)
-      );
-    }
-
-    @media (hover: none) {
-      [part~='row']:hover > [part~='body-cell'] {
-        background: var(--material-background-color);
-      }
-    }
-
-    /* Selected row */
-
-    [part~='body-cell']::before {
-      content: '';
-      pointer-events: none;
-      position: absolute;
-      inset: 0;
-      background-color: var(--material-primary-color);
-      opacity: 0;
-      transition: opacity 0.1s cubic-bezier(0.4, 0, 0.2, 0.1);
-    }
-
-    :host(:not([reordering])) [part~='row'][selected] > [part~='body-cell']::before {
-      opacity: var(--_material-grid-row-selected-overlay-opacity, 0.08);
-    }
-
-    [part~='body-cell'] ::slotted(vaadin-grid-cell-content) {
-      /* NOTE(platosha): Raise cell content above background cell pseudo elements */
-      position: relative;
-    }
-
-    /* Column reordering */
-
-    :host([reordering]) [part~='cell'] {
-      background: var(--material-secondary-background-color);
-    }
-
-    :host([reordering]) [part~='cell'][reorder-status='allowed'] {
-      background: var(--material-background-color);
-    }
-
-    :host([reordering]) [part~='cell'][reorder-status='dragging'] {
-      background: var(--material-background-color);
-    }
-
-    /* Frozen columns */
-
-    [part~='cell'][last-frozen] {
-      border-right: 1px solid var(--material-divider-color);
-    }
-
-    [part~='cell'][first-frozen-to-end] {
-      border-left: 1px solid var(--material-divider-color);
-    }
-
-    /* Column resizing */
-
-    [part~='cell']:not([last-frozen]) [part='resize-handle'] {
-      border-right: 1px solid var(--material-divider-color);
-    }
-
-    /* Keyboard navigation */
-
-    [part~='row'] {
-      position: relative;
-    }
-
-    [part~='row']:focus,
-    [part~='focused-cell']:focus {
-      outline: none;
-    }
-
-    :host([navigating]) [part~='row']:focus::before,
-    :host([navigating]) [part~='focused-cell']:focus {
-      box-shadow: inset 0 0 0 2px var(--material-primary-color);
-    }
-
-    :host([navigating]) [part~='row']:focus::before {
-      content: '';
-      position: absolute;
-      inset: 0;
-      pointer-events: none;
-      transform: translateX(calc(-1 * var(--_grid-horizontal-scroll-position)));
-      z-index: 3;
-    }
-
-    /* Empty state */
-    [part~='empty-state'] {
-      padding: 16px;
-      color: var(--material-secondary-text-color);
-    }
-
-    /* Drag and Drop styles */
-    :host([dragover])::after {
-      content: '';
-      position: absolute;
-      z-index: 100;
-      inset: 0;
-      pointer-events: none;
-      box-shadow: inset 0 0 0 2px var(--material-primary-color);
-    }
-
-    [part~='row'][dragover] {
-      z-index: 100 !important;
-    }
-
-    [part~='row'][dragover] [part~='cell'] {
-      overflow: visible;
-    }
-
-    [part~='row'][dragover] [part~='cell']::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      height: 3px;
-      pointer-events: none;
-      background: var(--material-primary-color);
-    }
-
-    [part~='row'][dragover='below'] [part~='cell']::after {
-      top: 100%;
-      bottom: auto;
-      margin-top: -1px;
-    }
-
-    :host([all-rows-visible]) [part~='last-row'][dragover='below'] [part~='cell']::after {
-      height: 1px;
-    }
-
-    [part~='row'][dragover='above'] [part~='cell']::after {
-      top: auto;
-      bottom: 100%;
-      margin-bottom: -1px;
-    }
-
-    [part~='row'][details-opened][dragover='below'] [part~='cell']:not([part~='details-cell'])::after,
-    [part~='row'][details-opened][dragover='above'] [part~='details-cell']::after {
-      display: none;
-    }
-
-    [part~='row'][dragover][dragover='on-top'] [part~='cell']::after {
-      height: 100%;
-      opacity: 0.5;
-    }
-
-    [part~='row'][dragstart] {
-      z-index: 100 !important;
-      opacity: 0.9;
-    }
-
-    [part~='row'][dragstart] [part~='cell'] {
-      border: none !important;
-      box-shadow: none !important;
-    }
-
-    #scroller [part~='row'][dragstart]:not([dragstart=''])::after {
-      display: block;
-      position: absolute;
-      left: var(--_grid-drag-start-x);
-      top: var(--_grid-drag-start-y);
-      z-index: 100;
-      content: attr(dragstart);
-      align-items: center;
-      justify-content: center;
-      box-sizing: border-box;
-      padding: 4px;
-      color: var(--material-primary-contrast-color);
-      background-color: var(--material-error-color);
-      min-width: 24px;
-      border-radius: 2px;
-      font-size: var(--material-caption-font-size);
-      text-align: center;
-      line-height: 1;
-    }
-
-    /* RTL specific styles */
-
-    :host([dir='rtl']) [part~='cell'][last-frozen] {
-      border-right: none;
-      border-left: 1px solid var(--material-divider-color);
-    }
-
-    :host([dir='rtl']) [part~='cell'][first-frozen-to-end] {
-      border-left: none;
-      border-right: 1px solid var(--material-divider-color);
-    }
-
-    :host([dir='rtl']) [part~='cell']:not([last-frozen]) [part='resize-handle'] {
-      border-right: none;
-      border-left: 1px solid var(--material-divider-color);
-    }
-
-    :host([dir='rtl']) #scroller [part~='row'][dragstart]:not([dragstart=''])::after {
-      left: auto;
-      right: var(--_grid-drag-start-x);
-    }
-  `,
-  { moduleId: 'material-grid' },
-);

package/theme/material/vaadin-grid-tree-column.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-grid-tree-toggle.js';
-import '../../src/vaadin-grid-tree-column.js';

package/theme/material/vaadin-grid-tree-column.js

@@ -1,2 +0,0 @@
-import './vaadin-grid-tree-toggle.js';
-import '../../src/vaadin-grid-tree-column.js';

package/theme/material/vaadin-grid-tree-toggle-styles.d.ts

@@ -1,3 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/font-icons.js';
-import '@vaadin/vaadin-material-styles/typography.js';