@vaadin/grid 25.0.0-alpha2 → 25.0.0-alpha21

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';

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

@@ -1,405 +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';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-grid',
-  css`
-    :host {
-      font-family: var(--lumo-font-family);
-      font-size: var(--lumo-font-size-m);
-      line-height: var(--lumo-line-height-s);
-      color: var(--lumo-body-text-color);
-      background-color: var(--lumo-base-color);
-      box-sizing: border-box;
-      -webkit-text-size-adjust: 100%;
-      -webkit-tap-highlight-color: transparent;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-      --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
-      --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
-      /* For internal use only */
-      --_lumo-grid-border-color: var(--lumo-contrast-20pct);
-      --_lumo-grid-secondary-border-color: var(--lumo-contrast-10pct);
-      --_lumo-grid-border-width: 1px;
-      --_lumo-grid-selected-row-color: var(--lumo-primary-color-10pct);
-    }
-
-    /* No (outer) border */
-
-    :host(:not([theme~='no-border'])) {
-      border: var(--_lumo-grid-border-width) solid var(--_lumo-grid-border-color);
-    }
-
-    :host([disabled]) {
-      opacity: 0.7;
-    }
-
-    /* Cell styles */
-
-    [part~='cell'] {
-      min-height: var(--lumo-size-m);
-      background-color: var(--vaadin-grid-cell-background, var(--lumo-base-color));
-      cursor: default;
-      --_cell-padding: var(--vaadin-grid-cell-padding, var(--_cell-default-padding));
-      --_cell-default-padding: var(--lumo-space-xs) var(--lumo-space-m);
-    }
-
-    [part~='cell'] ::slotted(vaadin-grid-cell-content) {
-      cursor: inherit;
-      padding: var(--_cell-padding);
-    }
-
-    /* Apply row borders by default and introduce the "no-row-borders" variant */
-    :host(:not([theme~='no-row-borders'])) [part~='cell']:not([part~='details-cell']) {
-      border-top: var(--_lumo-grid-border-width) solid var(--_lumo-grid-secondary-border-color);
-    }
-
-    /* Hide first body row top border */
-    :host(:not([theme~='no-row-borders'])) [part~='first-row'] [part~='cell']:not([part~='details-cell']) {
-      border-top: 0;
-      min-height: calc(var(--lumo-size-m) - var(--_lumo-grid-border-width));
-    }
-
-    /* Focus-ring */
-
-    [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::before {
-      content: '';
-      position: absolute;
-      inset: 0;
-      pointer-events: none;
-      box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
-    }
-
-    :host([navigating]) [part~='row']:focus::before {
-      transform: translateX(calc(-1 * var(--_grid-horizontal-scroll-position)));
-      z-index: 3;
-    }
-
-    /* Empty state */
-    [part~='empty-state'] {
-      padding: var(--lumo-space-m);
-      color: var(--lumo-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 var(--_focus-ring-width) var(--_focus-ring-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: calc(var(--_lumo-grid-border-width) + 2px);
-      pointer-events: none;
-      background: var(--lumo-primary-color-50pct);
-    }
-
-    [part~='row'][dragover] [part~='cell'][last-frozen]::after {
-      right: -1px;
-    }
-
-    :host([theme~='no-row-borders']) [dragover] [part~='cell']::after {
-      height: 2px;
-    }
-
-    [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] [part~='cell'] {
-      border: none !important;
-      box-shadow: none !important;
-    }
-
-    [part~='row'][dragstart] [part~='cell'][last-column] {
-      border-radius: 0 var(--lumo-border-radius-s) var(--lumo-border-radius-s) 0;
-    }
-
-    [part~='row'][dragstart] [part~='cell'][first-column] {
-      border-radius: var(--lumo-border-radius-s) 0 0 var(--lumo-border-radius-s);
-    }
-
-    #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: calc(var(--lumo-space-xs) * 0.8);
-      color: var(--lumo-error-contrast-color);
-      background-color: var(--lumo-error-color);
-      border-radius: var(--lumo-border-radius-m);
-      font-family: var(--lumo-font-family);
-      font-size: var(--lumo-font-size-xxs);
-      line-height: 1;
-      font-weight: 500;
-      text-transform: initial;
-      letter-spacing: initial;
-      min-width: calc(var(--lumo-size-s) * 0.7);
-      text-align: center;
-    }
-
-    /* Headers and footers */
-
-    [part~='header-cell'],
-    [part~='footer-cell'],
-    [part~='reorder-ghost'] {
-      font-size: var(--lumo-font-size-s);
-      font-weight: 500;
-    }
-
-    [part~='footer-cell'] {
-      font-weight: 400;
-    }
-
-    [part~='row']:only-child [part~='header-cell'] {
-      min-height: var(--lumo-size-xl);
-    }
-
-    /* Header borders */
-
-    /* Hide first header row top border */
-    :host(:not([theme~='no-row-borders'])) [part~='row']:first-child [part~='header-cell'] {
-      border-top: 0;
-    }
-
-    /* Hide header row top border if previous row is hidden */
-    [part~='row'][hidden] + [part~='row'] [part~='header-cell'] {
-      border-top: 0;
-    }
-
-    [part~='row']:last-child [part~='header-cell'] {
-      border-bottom: var(--_lumo-grid-border-width) solid transparent;
-    }
-
-    :host(:not([theme~='no-row-borders'])) [part~='row']:last-child [part~='header-cell'] {
-      border-bottom-color: var(--_lumo-grid-secondary-border-color);
-    }
-
-    /* Overflow uses a stronger border color */
-    :host([overflow~='top']) [part~='row']:last-child [part~='header-cell'] {
-      border-bottom-color: var(--_lumo-grid-border-color);
-    }
-
-    /* Footer borders */
-
-    [part~='row']:first-child [part~='footer-cell'] {
-      border-top: var(--_lumo-grid-border-width) solid transparent;
-    }
-
-    :host(:not([theme~='no-row-borders'])) [part~='row']:first-child [part~='footer-cell'] {
-      border-top-color: var(--_lumo-grid-secondary-border-color);
-    }
-
-    /* Overflow uses a stronger border color */
-    :host([overflow~='bottom']) [part~='row']:first-child [part~='footer-cell'] {
-      border-top-color: var(--_lumo-grid-border-color);
-    }
-
-    /* Column reordering */
-
-    :host([reordering]) [part~='cell'] {
-      background: linear-gradient(var(--lumo-shade-20pct), var(--lumo-shade-20pct)) var(--lumo-base-color);
-    }
-
-    :host([reordering]) [part~='cell'][reorder-status='allowed'] {
-      background: var(--lumo-base-color);
-    }
-
-    :host([reordering]) [part~='cell'][reorder-status='dragging'] {
-      background: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct)) var(--lumo-base-color);
-    }
-
-    [part~='reorder-ghost'] {
-      opacity: 0.85;
-      box-shadow: var(--lumo-box-shadow-s);
-      /* TODO Use the same styles as for the cell element (reorder-ghost copies styles from the cell element) */
-      padding: var(--lumo-space-s) var(--lumo-space-m) !important;
-    }
-
-    /* Column resizing */
-
-    [part='resize-handle'] {
-      --_resize-handle-width: 3px;
-      width: var(--_resize-handle-width);
-      background-color: var(--lumo-primary-color-50pct);
-      opacity: 0;
-      transition: opacity 0.2s;
-    }
-
-    [part='resize-handle']::before {
-      transform: translateX(calc(-50% + var(--_resize-handle-width) / 2));
-      width: var(--lumo-size-s);
-    }
-
-    :host(:not([reordering])) *:not([column-resizing]) [part~='cell']:hover [part='resize-handle'],
-    [part='resize-handle']:active {
-      opacity: 1;
-      transition-delay: 0.15s;
-    }
-
-    /* Column borders */
-
-    :host([theme~='column-borders']) [part~='cell']:not([last-column]):not([part~='details-cell']) {
-      border-right: var(--_lumo-grid-border-width) solid var(--_lumo-grid-secondary-border-color);
-    }
-
-    /* Frozen columns */
-
-    [last-frozen] {
-      border-right: var(--_lumo-grid-border-width) solid transparent;
-      overflow: hidden;
-    }
-
-    :host([overflow~='start']) [part~='cell'][last-frozen]:not([part~='details-cell']) {
-      border-right-color: var(--_lumo-grid-border-color);
-    }
-
-    [first-frozen-to-end] {
-      border-left: var(--_lumo-grid-border-width) solid transparent;
-    }
-
-    :host([overflow~='end']) [part~='cell'][first-frozen-to-end]:not([part~='details-cell']) {
-      border-left-color: var(--_lumo-grid-border-color);
-    }
-
-    /* Row stripes */
-
-    :host([theme~='row-stripes']) [part~='even-row'] [part~='body-cell'],
-    :host([theme~='row-stripes']) [part~='even-row'] [part~='details-cell'] {
-      background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
-      background-repeat: repeat-x;
-    }
-
-    /* Selected row */
-
-    /* Raise the selected rows above unselected rows (so that box-shadow can cover unselected rows) */
-    :host(:not([reordering])) [part~='row'][selected] {
-      z-index: 1;
-    }
-
-    :host(:not([reordering])) [part~='row'][selected] [part~='body-cell']:not([part~='details-cell']) {
-      background-image: linear-gradient(var(--_lumo-grid-selected-row-color), var(--_lumo-grid-selected-row-color));
-      background-repeat: repeat;
-    }
-
-    /* Cover the border of an unselected row */
-    :host(:not([theme~='no-row-borders'])) [part~='row'][selected] [part~='cell']:not([part~='details-cell']) {
-      box-shadow: 0 var(--_lumo-grid-border-width) 0 0 var(--_lumo-grid-selected-row-color);
-    }
-
-    /* Compact */
-
-    :host([theme~='compact']) [part~='row']:only-child [part~='header-cell'] {
-      min-height: var(--lumo-size-m);
-    }
-
-    :host([theme~='compact']) [part~='cell'] {
-      min-height: var(--lumo-size-s);
-      --_cell-default-padding: var(--lumo-space-xs) var(--lumo-space-s);
-    }
-
-    :host([theme~='compact']) [part~='first-row'] [part~='cell']:not([part~='details-cell']) {
-      min-height: calc(var(--lumo-size-s) - var(--_lumo-grid-border-width));
-    }
-
-    :host([theme~='compact']) [part~='empty-state'] {
-      padding: var(--lumo-space-s);
-    }
-
-    /* Wrap cell contents */
-
-    :host([theme~='wrap-cell-content']) [part~='cell'] ::slotted(vaadin-grid-cell-content) {
-      white-space: normal;
-    }
-
-    /* RTL specific styles */
-
-    :host([dir='rtl']) [part~='row'][dragstart] [part~='cell'][last-column] {
-      border-radius: var(--lumo-border-radius-s) 0 0 var(--lumo-border-radius-s);
-    }
-
-    :host([dir='rtl']) [part~='row'][dragstart] [part~='cell'][first-column] {
-      border-radius: 0 var(--lumo-border-radius-s) var(--lumo-border-radius-s) 0;
-    }
-
-    :host([dir='rtl'][theme~='column-borders']) [part~='cell']:not([last-column]):not([part~='details-cell']) {
-      border-right: none;
-      border-left: var(--_lumo-grid-border-width) solid var(--_lumo-grid-secondary-border-color);
-    }
-
-    :host([dir='rtl']) [last-frozen] {
-      border-right: none;
-      border-left: var(--_lumo-grid-border-width) solid transparent;
-    }
-
-    :host([dir='rtl']) [first-frozen-to-end] {
-      border-left: none;
-      border-right: var(--_lumo-grid-border-width) solid transparent;
-    }
-
-    :host([dir='rtl'][overflow~='start']) [part~='cell'][last-frozen]:not([part~='details-cell']) {
-      border-left-color: var(--_lumo-grid-border-color);
-    }
-
-    :host([dir='rtl'][overflow~='end']) [part~='cell'][first-frozen-to-end]:not([part~='details-cell']) {
-      border-right-color: var(--_lumo-grid-border-color);
-    }
-  `,
-  { moduleId: 'lumo-grid' },
-);

package/theme/lumo/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/lumo/vaadin-grid-tree-column.js

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

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

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

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

@@ -1,81 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-grid-tree-toggle',
-  css`
-    :host {
-      --vaadin-grid-tree-toggle-level-offset: 2em;
-      align-items: center;
-      vertical-align: middle;
-      transform: translateX(calc(var(--lumo-space-s) * -1));
-      -webkit-tap-highlight-color: transparent;
-    }
-
-    :host(:not([leaf])) {
-      cursor: default;
-    }
-
-    [part='toggle'] {
-      display: inline-block;
-      font-size: 1.5em;
-      line-height: 1;
-      width: 1em;
-      height: 1em;
-      text-align: center;
-      color: var(--lumo-contrast-50pct);
-      cursor: var(--lumo-clickable-cursor);
-      /* Increase touch target area */
-      padding: calc(1em / 3);
-      margin: calc(1em / -3);
-    }
-
-    :host(:not([dir='rtl'])) [part='toggle'] {
-      margin-right: 0;
-    }
-
-    @media (hover: hover) {
-      :host(:hover) [part='toggle'] {
-        color: var(--lumo-contrast-80pct);
-      }
-    }
-
-    [part='toggle']::before {
-      font-family: 'lumo-icons';
-      display: inline-block;
-      height: 100%;
-    }
-
-    :host(:not([expanded])) [part='toggle']::before {
-      content: var(--lumo-icons-angle-right);
-    }
-
-    :host([expanded]) [part='toggle']::before {
-      content: var(--lumo-icons-angle-right);
-      transform: rotate(90deg);
-    }
-
-    /* RTL specific styles */
-
-    :host([dir='rtl']) {
-      margin-left: 0;
-      margin-right: calc(var(--lumo-space-s) * -1);
-    }
-
-    :host([dir='rtl']) [part='toggle'] {
-      margin-left: 0;
-    }
-
-    :host([dir='rtl'][expanded]) [part='toggle']::before {
-      transform: rotate(-90deg);
-    }
-
-    :host([dir='rtl']:not([expanded])) [part='toggle']::before,
-    :host([dir='rtl'][expanded]) [part='toggle']::before {
-      content: var(--lumo-icons-angle-left);
-    }
-  `,
-  { moduleId: 'lumo-grid-tree-toggle' },
-);

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

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

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

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

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

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

package/theme/lumo/vaadin-grid.js

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