@vaadin/grid 25.0.0-alpha1 → 25.0.0-alpha11

package/src/vaadin-grid-styles.js

@@ -1,389 +0,0 @@
-/**
- * @license
- * Copyright (c) 2016 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-export const gridStyles = css`
-  @keyframes vaadin-grid-appear {
-    to {
-      opacity: 1;
-    }
-  }
-
-  :host {
-    display: flex;
-    flex-direction: column;
-    animation: 1ms vaadin-grid-appear;
-    height: 400px;
-    min-height: var(--_grid-min-height, 0);
-    flex: 1 1 auto;
-    align-self: stretch;
-    position: relative;
-  }
-
-  :host([hidden]) {
-    display: none !important;
-  }
-
-  :host([disabled]) {
-    pointer-events: none;
-  }
-
-  #scroller {
-    display: flex;
-    flex-direction: column;
-    min-height: 100%;
-    transform: translateY(0);
-    width: auto;
-    height: auto;
-    position: absolute;
-    inset: 0;
-  }
-
-  :host([all-rows-visible]) {
-    height: auto;
-    align-self: flex-start;
-    min-height: auto;
-    flex-grow: 0;
-    width: 100%;
-  }
-
-  :host([all-rows-visible]) #scroller {
-    width: 100%;
-    height: 100%;
-    position: relative;
-  }
-
-  :host([all-rows-visible]) #items {
-    min-height: 1px;
-  }
-
-  #table {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    position: relative;
-    outline: none;
-    /* Workaround for a Desktop Safari bug: new stacking context here prevents the scrollbar from getting hidden */
-    z-index: 0;
-  }
-
-  #header,
-  #footer {
-    display: block;
-    position: -webkit-sticky;
-    position: sticky;
-    left: 0;
-    overflow: visible;
-    width: 100%;
-    z-index: 1;
-  }
-
-  #header {
-    top: 0;
-  }
-
-  th {
-    text-align: inherit;
-  }
-
-  /* Safari doesn't work with "inherit" */
-  [safari] th {
-    text-align: initial;
-  }
-
-  #footer {
-    bottom: 0;
-  }
-
-  #items {
-    flex-grow: 1;
-    flex-shrink: 0;
-    display: block;
-    position: -webkit-sticky;
-    position: sticky;
-    width: 100%;
-    left: 0;
-    overflow: visible;
-  }
-
-  [part~='row'] {
-    display: flex;
-    width: 100%;
-    box-sizing: border-box;
-    margin: 0;
-  }
-
-  [part~='row'][loading] [part~='body-cell'] ::slotted(vaadin-grid-cell-content) {
-    visibility: hidden;
-  }
-
-  [column-rendering='lazy'] [part~='body-cell']:not([frozen]):not([frozen-to-end]) {
-    transform: translateX(var(--_grid-lazy-columns-start));
-  }
-
-  #items [part~='row'] {
-    position: absolute;
-  }
-
-  #items [part~='row']:empty {
-    height: 100%;
-  }
-
-  [part~='cell']:not([part~='details-cell']) {
-    flex-shrink: 0;
-    flex-grow: 1;
-    box-sizing: border-box;
-    display: flex;
-    width: 100%;
-    position: relative;
-    align-items: center;
-    padding: 0;
-    white-space: nowrap;
-  }
-
-  [part~='cell'] {
-    outline: none;
-  }
-
-  [part~='cell'] > [tabindex] {
-    display: flex;
-    align-items: inherit;
-    outline: none;
-    position: absolute;
-    inset: 0;
-  }
-
-  /* Switch the focusButtonMode wrapping element to "position: static" temporarily
-     when measuring real width of the cells in the auto-width columns. */
-  [measuring-auto-width] [part~='cell'] > [tabindex] {
-    position: static;
-  }
-
-  [part~='details-cell'] {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    box-sizing: border-box;
-    padding: 0;
-  }
-
-  [part~='cell'] ::slotted(vaadin-grid-cell-content) {
-    display: block;
-    width: 100%;
-    box-sizing: border-box;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  [hidden] {
-    display: none !important;
-  }
-
-  [frozen],
-  [frozen-to-end] {
-    z-index: 2;
-    will-change: transform;
-  }
-
-  [no-scrollbars][safari] #table,
-  [no-scrollbars][firefox] #table {
-    overflow: hidden;
-  }
-
-  /* Empty state */
-
-  #scroller:not([empty-state]) #emptystatebody,
-  #scroller[empty-state] #items {
-    display: none;
-  }
-
-  #emptystatebody {
-    display: flex;
-    position: sticky;
-    inset: 0;
-    flex: 1;
-    overflow: hidden;
-  }
-
-  #emptystaterow {
-    display: flex;
-    flex: 1;
-  }
-
-  #emptystatecell {
-    display: block;
-    flex: 1;
-    overflow: auto;
-  }
-
-  /* Reordering styles */
-  :host([reordering]) [part~='cell'] ::slotted(vaadin-grid-cell-content),
-  :host([reordering]) [part~='resize-handle'],
-  #scroller[no-content-pointer-events] [part~='cell'] ::slotted(vaadin-grid-cell-content) {
-    pointer-events: none;
-  }
-
-  [part~='reorder-ghost'] {
-    visibility: hidden;
-    position: fixed;
-    pointer-events: none;
-    opacity: 0.5;
-
-    /* Prevent overflowing the grid in Firefox */
-    top: 0;
-    left: 0;
-  }
-
-  :host([reordering]) {
-    -webkit-user-select: none;
-    user-select: none;
-  }
-
-  /* Resizing styles */
-  [part~='resize-handle'] {
-    position: absolute;
-    top: 0;
-    right: 0;
-    height: 100%;
-    cursor: col-resize;
-    z-index: 1;
-  }
-
-  [part~='resize-handle']::before {
-    position: absolute;
-    content: '';
-    height: 100%;
-    width: 35px;
-    transform: translateX(-50%);
-  }
-
-  [last-column] [part~='resize-handle']::before,
-  [last-frozen] [part~='resize-handle']::before {
-    width: 18px;
-    transform: none;
-    right: 0;
-  }
-
-  [frozen-to-end] [part~='resize-handle'] {
-    left: 0;
-    right: auto;
-  }
-
-  [frozen-to-end] [part~='resize-handle']::before {
-    left: 0;
-    right: auto;
-  }
-
-  [first-frozen-to-end] [part~='resize-handle']::before {
-    width: 18px;
-    transform: none;
-  }
-
-  [first-frozen-to-end] {
-    margin-inline-start: auto;
-  }
-
-  /* Hide resize handle if scrolled to end */
-  :host(:not([overflow~='end'])) [first-frozen-to-end] [part~='resize-handle'] {
-    display: none;
-  }
-
-  #scroller[column-resizing],
-  #scroller[range-selecting] {
-    -webkit-user-select: none;
-    user-select: none;
-  }
-
-  /* Sizer styles */
-  #sizer {
-    display: flex;
-    position: absolute;
-    visibility: hidden;
-  }
-
-  #sizer [part~='details-cell'] {
-    display: none !important;
-  }
-
-  #sizer [part~='cell'][hidden] {
-    display: none !important;
-  }
-
-  #sizer [part~='cell'] {
-    display: block;
-    flex-shrink: 0;
-    line-height: 0;
-    height: 0 !important;
-    min-height: 0 !important;
-    max-height: 0 !important;
-    padding: 0 !important;
-    border: none !important;
-  }
-
-  #sizer [part~='cell']::before {
-    content: '-';
-  }
-
-  #sizer [part~='cell'] ::slotted(vaadin-grid-cell-content) {
-    display: none !important;
-  }
-
-  /* RTL specific styles */
-
-  :host([dir='rtl']) #items,
-  :host([dir='rtl']) #header,
-  :host([dir='rtl']) #footer {
-    left: auto;
-  }
-
-  :host([dir='rtl']) [part~='reorder-ghost'] {
-    left: auto;
-    right: 0;
-  }
-
-  :host([dir='rtl']) [part~='resize-handle'] {
-    left: 0;
-    right: auto;
-  }
-
-  :host([dir='rtl']) [part~='resize-handle']::before {
-    transform: translateX(50%);
-  }
-
-  :host([dir='rtl']) [last-column] [part~='resize-handle']::before,
-  :host([dir='rtl']) [last-frozen] [part~='resize-handle']::before {
-    left: 0;
-    right: auto;
-  }
-
-  :host([dir='rtl']) [frozen-to-end] [part~='resize-handle'] {
-    right: 0;
-    left: auto;
-  }
-
-  :host([dir='rtl']) [frozen-to-end] [part~='resize-handle']::before {
-    right: 0;
-    left: auto;
-  }
-
-  @media (forced-colors: active) {
-    [part~='selected-row'] [part~='first-column-cell']::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      border: 2px solid;
-    }
-
-    [part~='focused-cell']::before {
-      outline: 2px solid !important;
-      outline-offset: -1px;
-    }
-  }
-`;

package/theme/lumo/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/lumo/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/lumo/vaadin-grid-column-group.d.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,3 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';

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

@@ -1,52 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-grid-sorter',
-  css`
-    :host {
-      justify-content: flex-start;
-      align-items: baseline;
-      -webkit-user-select: none;
-      user-select: none;
-      cursor: var(--lumo-clickable-cursor);
-    }
-
-    [part='content'] {
-      display: inline-block;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    [part='indicators'] {
-      margin-left: var(--lumo-space-s);
-    }
-
-    [part='indicators']::before {
-      transform: scale(0.8);
-    }
-
-    :host(:not([direction]):not(:hover)) [part='indicators'] {
-      color: var(--lumo-tertiary-text-color);
-    }
-
-    :host([direction]) {
-      color: var(--vaadin-selection-color-text, var(--lumo-primary-text-color));
-    }
-
-    [part='order'] {
-      font-size: var(--lumo-font-size-xxs);
-      line-height: 1;
-    }
-
-    /* RTL specific styles */
-
-    :host([dir='rtl']) [part='indicators'] {
-      margin-right: var(--lumo-space-s);
-      margin-left: 0;
-    }
-  `,
-  { moduleId: 'lumo-grid-sorter' },
-);

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

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

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

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

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

@@ -1,6 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/font-icons.js';
-import '@vaadin/vaadin-lumo-styles/sizing.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';