@bryntum/grid-thin-trial 7.1.1 → 7.1.3

package/README.md

@@ -1,52 +1,309 @@
-# Bryntum Grid Thin Trial
+<br>
+<br>
 
-Bryntum Grid is a high performance JavaScript data grid component.
-This package is designed for combining multiple Bryntum products with thin framework wrappers for Bryntum Grid.
-Please refer to the Bryntum Grid documentation.
+<p align="center">
+  <a href="https://bryntum.com/" rel="noopener" target="_blank"><img width="350" src="https://bryntum.com/resources/bryntum_logo_blue.svg" alt="Bryntum logo"></a>
+</p>
 
-It integrates seamlessly with React, Vue, Angular, or plain vanilla JS.
+<br>
+
+# Bryntum Grid Thin (Trial)
+
+Bryntum Grid is a high-performance JavaScript data grid component.. It integrates smoothly with React, Vue, Angular, or plain vanilla JS.
 
 For more information about all features, visit the [Bryntum Grid site](https://bryntum.com/products/grid/).
 
-# Bryntum repository access setup
+<p align="center">
+    <img src="https://bryntum.com/products/grid/examples/meta/thumb.2048.png" alt="Bryntum Grid Screenshot" width="600">
+</p>
+
+## What is the Thin Package?
+
+The **Thin package** contains only product-specific code and styling, making it ideal for:
+
+* **Combining multiple Bryntum products** in a single application
+* **Reducing bundle size** - no duplicated code when using multiple products
+* **Avoiding runtime conflicts** - prevents duplicate class registrations
+
+### Thin vs Regular Package
+
+| Package Type                       | Contains                                                              | Best For                                               |
+|------------------------------------|-----------------------------------------------------------------------|--------------------------------------------------------|
+| **Regular** (`@bryntum/grid`)   | Product + all dependencies<br/>(e.g., Scheduler includes Grid + Core) | Single product apps                                    |
+| **Thin** (`@bryntum/grid-thin`) | Product-specific code only                                            | Multiple product apps or optimized single product apps |
+
+### When to Use Thin Package?
+
+**Use Thin if:**
+
+- Combining multiple Bryntum products (e.g., Grid + Scheduler + Gantt)
+- Using thin framework wrappers (`@bryntum/grid-react-thin`)
+- Want smallest possible bundle size
+- Building with modern build tools (Webpack 5+, Vite, Rollup)
+
+**Use Regular if:**
 
-This npm package requires access to the private Bryntum npm repository. You must be logged in to this repository as a
-licensed or trial user to access it.
+- Building a single product application with standard setup
+- Using direct `<script>` tag inclusion
+- Prefer simpler dependency management
 
-Please check the [Online npm repository guide](https://bryntum.com/products/grid/docs/guide/Grid/npm-repository) for 
-detailed information on the sign-up/login process.
+## Highlights
 
-# Installation
+* Virtual rendering with [infinite scroll](https://bryntum.com/products/grid/examples/infinite-scroll) handles millions of rows
+* [Excel-like cell editing](https://bryntum.com/products/grid/examples/celledit) with inline validation and keyboard shortcuts
+* [Tree grids](https://bryntum.com/products/grid/examples/tree) and [nested views](https://bryntum.com/products/grid/examples/master-detail) for hierarchical data
+* [Advanced filtering](https://bryntum.com/products/grid/examples/facet-filter) and [instant search](https://bryntum.com/products/grid/examples/search) across massive datasets
+* [Custom cell renderers](https://bryntum.com/products/grid/examples/renderers) for charts, progress bars, and rich HTML
+* [Row grouping](https://bryntum.com/products/grid/examples/grouping) with [aggregation and summaries](https://bryntum.com/products/grid/examples/groupsummary)
+* [AI content generation](https://bryntum.com/products/grid/examples/ai-review-grid) using cell formulas
+* [50+ built-in widgets](https://bryntum.com/products/grid/examples/widgetcolumn) and [6 modern themes](https://bryntum.com/products/grid/examples/themes) with full customization
+* WCAG 2.1 [accessible](https://bryntum.com/products/grid/examples/basic), [30+ locales](https://bryntum.com/products/grid/examples/localization), TypeScript definitions included
+* [React](https://bryntum.com/products/grid/examples/?framework=react), [Vue](https://bryntum.com/products/grid/examples/?framework=vue), and [Angular](https://bryntum.com/products/grid/examples/?framework=angular) wrappers following native framework patterns
+* [Export to Excel](https://bryntum.com/products/grid/examples/exporttoexcel) and [PDF](https://bryntum.com/products/grid/examples/export) with professional formatting
+* Touch-friendly and [responsive layouts](https://bryntum.com/products/grid/examples/responsive) optimized for mobile devices
 
-The installation is performed by issuing the installation command in the root of the application folder. The specific
-command depends on the package manager used by the application.
+## Package Contents
 
-The following are most frequently used:
+| Path                                  | Description                                    |
+|---------------------------------------|------------------------------------------------|
+| `grid.module.js`, `grid.umd.js` | JavaScript bundles (ES module and UMD formats) |
+| `grid.css`                         | Structural CSS (required)                      |
+| `*.d.ts`                              | TypeScript type definitions                    |
+| `*.css`                               | Theme stylesheets                              |
+
+**Note:** Trial packages do not include minified bundles or source maps.
+
+## Supported Versions
+
+* [NodeJS](https://nodejs.org/en): `>= 20.0.0`
+* [TypeScript](https://www.typescriptlang.org/): `>= 3.6.0`
+* [Angular](https://angularjs.org/): `>= 9.0.0`
+* [React](https://react.dev/): `>= 16.0.0`
+* [Vue](https://vuejs.org/): `>= 3.0.0`
+* [Ionic](https://ionicframework.com/): `>= 5.0.0`
+* [Vite](https://vite.dev/): `>= 4.0.0`
+* [Webpack](https://webpack.js.org/): `>= 4.0.0`
+
+## Try Bryntum Online Demos
+
+Explore our comprehensive collection of demos:
+
+* [View Online Demos](https://bryntum.com/products/grid/examples/)
+* [JavaScript Demos](https://bryntum.com/products/grid/examples/?framework=javascript)
+* [React Demos](https://bryntum.com/products/grid/examples/?framework=react)
+* [Vue Demos](https://bryntum.com/products/grid/examples/?framework=vue)
+* [Angular Demos](https://bryntum.com/products/grid/examples/?framework=angular)
+
+## Installation
+
+This is a **trial package** with limited functionality.
+
+### Why Use npm Aliasing?
+
+Trial packages use npm aliasing to install `@bryntum/grid-thin-trial` under the `@bryntum/grid-thin` name. This
+approach provides a seamless upgrade path - when you purchase a license, you only need to update the alias in
+`package.json` without changing any application code.
 
 Install using `npm`:
 
 ```shell
-npm install @bryntum/grid-thin@npm:bryntum/grid-thin-trial
+npm install @bryntum/grid-thin@npm:@bryntum/grid-thin-trial@latest
 ```
 
-Install using `yarn`:
+Or using `yarn`:
 
 ```shell
-yarn add @bryntum/grid-thin@npm:bryntum/grid-thin-trial
+yarn add @bryntum/grid-thin@npm:@bryntum/grid-thin-trial@latest
 ```
 
-# Online references
+Alternatively, add to `package.json` dependencies:
+
+```json
+"dependencies": {
+  "@bryntum/grid-thin": "npm:@bryntum/grid-thin-trial@latest"
+}
+```
+
+Visit our [npm repository guide](https://bryntum.com/products/grid/docs/guide/Grid/npm-repository) to learn more about installation and migrating from
+trial to licensed packages.
+
+## Combining Multiple Products
+
+When combining multiple Bryntum products, install all needed thin packages with aliasing:
+
+```shell
+# Example: Using Grid and Scheduler together
+npm install @bryntum/grid-thin@npm:@bryntum/grid-thin-trial@latest
+npm install @bryntum/scheduler-thin@npm:@bryntum/scheduler-thin-trial@latest
+npm install @bryntum/scheduler-react-thin@latest
+```
+
+## Required Dependencies
+
+Thin packages contain only product-specific code and **do not automatically install dependencies**. You must manually
+install all required API packages for the underlying products.
+
+### API Packages (Required):
+
+```json
+{
+  "dependencies": {
+    "@bryntum/core-thin": "latest",
+    "@bryntum/grid-thin": "latest"
+  }
+}
+```
+
+### Dependency Chain Overview
+
+The following table shows which thin API packages are required for each Bryntum product:
+
+| Product           | Core | Engine | Grid | Scheduler | Scheduler Pro |       Product Package        |
+|-------------------|:----:|:------:|:----:|:---------:|:-------------:|:----------------------------:|
+| **Grid**          |  ✓   |        |  ✓   |           |               |     `@bryntum/grid-thin`     |
+| **Scheduler**     |  ✓   |   ✓    |  ✓   |     ✓     |               |  `@bryntum/scheduler-thin`   |
+| **Scheduler Pro** |  ✓   |   ✓    |  ✓   |     ✓     |       ✓       | `@bryntum/schedulerpro-thin` |
+| **Gantt**         |  ✓   |   ✓    |  ✓   |     ✓     |       ✓       |    `@bryntum/gantt-thin`     |
+| **Calendar**      |  ✓   |   ✓    |  ✓   |     ✓     |               |   `@bryntum/calendar-thin`   |
+| **TaskBoard**     |  ✓   |   ✓    |      |           |               |  `@bryntum/taskboard-thin`   |
+
+### Important Notes
+
+**About Core Framework Wrappers:**
+
+`@bryntum/core-[framework]-thin` packages (e.g., `@bryntum/core-react-thin`) are **optional** and only needed if you use
+Bryntum Core UI widgets directly in your app, such as:
+
+- `BryntumButton`
+- `BryntumCombo`
+- `BryntumTextField`
+- Other Core widgets
+
+If you only use the main product component (Grid, Scheduler, etc.), you don't need the Core framework wrapper.
+
+## Quick Start
+
+```typescript
+import { Grid } from '@bryntum/grid-thin';
+import './style.css';
+
+const grid = new Grid({
+    appendTo : 'app',
+    columns  : [
+        { field : 'name', text : 'Name', width : 200 },
+        { field : 'city', text : 'City', flex : 1 }
+    ],
+    data : [
+        { name : 'Dan Stevenson', city : 'Los Angeles' },
+        { name : 'Talisha Babin', city : 'Paris' }
+    ]
+});
+```
+
+## Themes
+
+### Svalbard (default)
+
+| Light                                                                                      | Dark                                                                                     |
+|--------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------|
+| <a href="https://bryntum.com/products/grid/examples/grouping/?theme=svalbard-light"><img src="https://bryntum.com/products/grid/docs/data/Grid/images/themes/thumb.svalbard-light.png" alt="Svalbard Light" width="300"></a> | <a href="https://bryntum.com/products/grid/examples/grouping/?theme=svalbard-dark"><img src="https://bryntum.com/products/grid/docs/data/Grid/images/themes/thumb.svalbard-dark.png" alt="Svalbard Dark" width="300"></a> |
+
+### Stockholm
+
+| Light                                                                                        | Dark                                                                                       |
+|----------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------|
+| <a href="https://bryntum.com/products/grid/examples/grouping/?theme=stockholm-light"><img src="https://bryntum.com/products/grid/docs/data/Grid/images/themes/thumb.stockholm-light.png" alt="Stockholm Light" width="300"></a> | <a href="https://bryntum.com/products/grid/examples/grouping/?theme=stockholm-dark"><img src="https://bryntum.com/products/grid/docs/data/Grid/images/themes/thumb.stockholm-dark.png" alt="Stockholm Dark" width="300"></a> |
+
+### Visby
+
+| Light                                                                                | Dark                                                                               |
+|--------------------------------------------------------------------------------------|------------------------------------------------------------------------------------|
+| <a href="https://bryntum.com/products/grid/examples/grouping/?theme=visby-light"><img src="https://bryntum.com/products/grid/docs/data/Grid/images/themes/thumb.visby-light.png" alt="Visby Light" width="300"></a> | <a href="https://bryntum.com/products/grid/examples/grouping/?theme=visby-dark"><img src="https://bryntum.com/products/grid/docs/data/Grid/images/themes/thumb.visby-dark.png" alt="Visby Dark" width="300"></a> |
+
+### Material 3
+
+| Light                                                                                         | Dark                                                                                        |
+|-----------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------|
+| <a href="https://bryntum.com/products/grid/examples/grouping/?theme=material3-light"><img src="https://bryntum.com/products/grid/docs/data/Grid/images/themes/thumb.material3-light.png" alt="Material 3 Light" width="300"></a> | <a href="https://bryntum.com/products/grid/examples/grouping/?theme=material3-dark"><img src="https://bryntum.com/products/grid/docs/data/Grid/images/themes/thumb.material3-dark.png" alt="Material 3 Dark" width="300"></a> |
+
+### High Contrast
+
+| Light                                                                                                | Dark                                                                                               |
+|------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------|
+| <a href="https://bryntum.com/products/grid/examples/grouping/?theme=high-contrast-light"><img src="https://bryntum.com/products/grid/docs/data/Grid/images/themes/thumb.high-contrast-light.png" alt="High Contrast Light" width="300"></a> | <a href="https://bryntum.com/products/grid/examples/grouping/?theme=high-contrast-dark"><img src="https://bryntum.com/products/grid/docs/data/Grid/images/themes/thumb.high-contrast-dark.png" alt="High Contrast Dark" width="300"></a> |
+
+### Fluent 2
+
+| Light                                                                                     | Dark                                                                                    |
+|-------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------|
+| <a href="https://bryntum.com/products/grid/examples/grouping/?theme=fluent2-light"><img src="https://bryntum.com/products/grid/docs/data/Grid/images/themes/thumb.fluent2-light.png" alt="Fluent 2 Light" width="300"></a> | <a href="https://bryntum.com/products/grid/examples/grouping/?theme=fluent2-dark"><img src="https://bryntum.com/products/grid/docs/data/Grid/images/themes/thumb.fluent2-dark.png" alt="Fluent 2 Dark" width="300"></a> |
+
+For more information on customizing themes, see the [Styling guide](https://bryntum.com/products/grid/docs/guide/Grid/customization/styling).
+
+## Framework Integrations
+
+Thin packages use thin framework wrappers. Each wrapper follows native framework patterns and lifecycle management.
+
+**Note:** The framework wrappers are public and can be installed normally. They require the thin core package (installed
+above with aliasing) to be present.
+
+### React
+
+```shell
+npm install @bryntum/grid-react-thin@latest
+```
+
+For details, see [React Multiple Products](https://bryntum.com/products/grid/docs/guide/Grid/integration/react/multiple-products).
+
+### Angular
+
+```shell
+npm install @bryntum/grid-angular-thin@latest
+```
+
+For details, see [Angular Multiple Products](https://bryntum.com/products/grid/docs/guide/Grid/integration/angular/multiple-products).
+
+### Vue 3
+
+```shell
+npm install @bryntum/grid-vue-3-thin@latest
+```
+
+For details, see [Vue Multiple Products](https://bryntum.com/products/grid/docs/guide/Grid/integration/vue/multiple-products).
+
+## Explore All Bryntum Products
+
+* [Bryntum Grid](https://bryntum.com/products/grid/) - High-performance data grid
+* [Bryntum Scheduler](https://bryntum.com/products/scheduler/) - Resource scheduling component
+* [Bryntum Scheduler Pro](https://bryntum.com/products/schedulerpro/) - Advanced scheduling with dependencies
+* [Bryntum Gantt](https://bryntum.com/products/gantt/) - Project planning and management
+* [Bryntum Calendar](https://bryntum.com/products/calendar/) - Full-featured calendar component
+* [Bryntum TaskBoard](https://bryntum.com/products/taskboard/) - Kanban-style task management
+
+Explore our comprehensive collection of demos:
+
+| Product           |   <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/js.svg" alt="JavaScript" width="30"><br>JavaScript    |  <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/react.svg" alt="React" width="30"><br>React  |   <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/vue.svg" alt="Vue" width="30"><br>Vue   | <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/angular.svg" alt="Angular" width="30"><br>Angular |
+|-------------------|:------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------:|:----------------------------------------------------------------------:|:------------------------------------------------------------------------------:|
+| **Grid**          |         [Grid JavaScript demos](https://bryntum.com/products/grid/examples/?framework=javascript)          |         [Grid React demos](https://bryntum.com/products/grid/examples/?framework=react)          |         [Grid Vue demos](https://bryntum.com/products/grid/examples/?framework=vue)          |         [Grid Angular demos](https://bryntum.com/products/grid/examples/?framework=angular)          |
+| **Scheduler**     |    [Scheduler JavaScript demos](https://bryntum.com/products/scheduler/examples/?framework=javascript)     |    [Scheduler React demos](https://bryntum.com/products/scheduler/examples/?framework=react)     |    [Scheduler Vue demos](https://bryntum.com/products/scheduler/examples/?framework=vue)     |    [Scheduler Angular demos](https://bryntum.com/products/scheduler/examples/?framework=angular)     |
+| **Scheduler Pro** | [Scheduler Pro JavaScript demos](https://bryntum.com/products/schedulerpro/examples/?framework=javascript) | [Scheduler Pro React demos](https://bryntum.com/products/schedulerpro/examples/?framework=react) | [Scheduler Pro Vue demos](https://bryntum.com/products/schedulerpro/examples/?framework=vue) | [Scheduler Pro Angular demos](https://bryntum.com/products/schedulerpro/examples/?framework=angular) |
+| **Gantt**         |        [Gantt JavaScript demos](https://bryntum.com/products/gantt/examples/?framework=javascript)         |        [Gantt React demos](https://bryntum.com/products/gantt/examples/?framework=react)         |        [Gantt Vue demos](https://bryntum.com/products/gantt/examples/?framework=vue)         |        [Gantt Angular demos](https://bryntum.com/products/gantt/examples/?framework=angular)         |
+| **Calendar**      |     [Calendar JavaScript demos](https://bryntum.com/products/calendar/examples/?framework=javascript)      |     [Calendar React demos](https://bryntum.com/products/calendar/examples/?framework=react)      |     [Calendar Vue demos](https://bryntum.com/products/calendar/examples/?framework=vue)      |     [Calendar Angular demos](https://bryntum.com/products/calendar/examples/?framework=angular)      |
+| **TaskBoard**     |    [TaskBoard JavaScript demos](https://bryntum.com/products/taskboard/examples/?framework=javascript)     |    [TaskBoard React demos](https://bryntum.com/products/taskboard/examples/?framework=react)     |    [TaskBoard Vue demos](https://bryntum.com/products/taskboard/examples/?framework=vue)     |    [TaskBoard Angular demos](https://bryntum.com/products/taskboard/examples/?framework=angular)     |
+
+## Online references
 
-* [Bryntum npm repository guide](https://bryntum.com/products/grid/docs/guide/Grid/npm-repository)
 * [Bryntum Grid documentation](https://bryntum.com/products/grid/docs/)
 * [Bryntum Grid examples](https://bryntum.com/products/grid/examples/)
+
 * [Bryntum Support Forum](https://forum.bryntum.com/)
 * [Contact us](https://bryntum.com/contact/)
 
-# License and copyright
+## License and copyright
 
 Bryntum Grid is commercial software and requires a paid license.
 Please visit the [Bryntum Grid End User License](https://bryntum.com/products/grid/license/) for the full text of the license.
 
 Copyright © 2009-2026, Bryntum
 All rights reserved.
+

package/grid.css

@@ -276,6 +276,7 @@
   background: var(--b-neutral-90);
   content: var(--b-column-resize-touch-resizing-icon);
   font-family: var(--b-widget-icon-font-family);
+  font-weight: var(--b-widget-icon-font-weight);
 }
 .b-grid-header.b-resizing {
   --b-grid-header-background: var(--b-column-resize-header-resizing-background);
@@ -349,6 +350,7 @@
 .b-filter-icon::before {
   content: var(--b-grid-filter-icon);
   font-family: var(--b-widget-icon-font-family);
+  font-weight: var(--b-widget-icon-font-weight);
 }
 .b-filter-icon:hover {
   --bi-grid-filter-icon-opacity: var(--bi-grid-filter-icon-hover-opacity);
@@ -498,6 +500,7 @@
   font-style: normal;
   content: var(--b-group-header-icon);
   font-family: var(--b-widget-icon-font-family);
+  font-weight: var(--b-widget-icon-font-weight);
 }
 .b-group-row {
   --b-grid-cell-background: var(--b-group-header-background);
@@ -548,6 +551,7 @@
 .b-group-state-icon:before {
   content: var(--b-group-collapse-icon);
   font-family: var(--b-widget-icon-font-family);
+  font-weight: var(--b-widget-icon-font-weight);
 }
 .b-grid-group-collapsed .b-group-state-icon {
   rotate: -90deg;
@@ -1003,6 +1007,7 @@
   font-size: 0.8em;
   content: var(--b-row-reorder-grip-icon);
   font-family: var(--b-widget-icon-font-family);
+  font-weight: var(--b-widget-icon-font-weight);
   padding-inline: var(--b-grid-cell-padding-inline);
   margin-inline-start: calc(var(--b-grid-cell-padding-inline) * -1);
 }
@@ -1145,6 +1150,7 @@
   transition: rotate .2s;
   content: var(--b-sort-header-icon);
   font-family: var(--b-widget-icon-font-family);
+  font-weight: var(--b-widget-icon-font-weight);
   rotate: var(--bi-grid-sort-icon-rotate);
 }
 :is(.b-grid-header.b-asc, .b-grid-header.b-desc) .b-sort-icon {
@@ -1648,6 +1654,7 @@ html.b-print-root,
 }
 .b-grid-base .fa::before {
   font-family: var(--b-widget-icon-font-family);
+  font-weight: var(--b-widget-icon-font-weight);
 }
 .b-no-transitions .b-grid-row {
   transition: none !important;
@@ -2126,6 +2133,7 @@ div.b-grid-header-container .b-yscroll-pad {
   color: var(--b-group-bar-separator-color);
   content: var(--b-group-bar-separator-icon);
   font-family: var(--b-widget-icon-font-family);
+  font-weight: var(--b-widget-icon-font-weight);
 }
 .b-rtl :is(.b-group-bar .b-chip):not(:last-child):after {
   scale: -1 0;
@@ -2441,6 +2449,7 @@ div.b-grid-header-container .b-yscroll-pad {
   margin-inline-end: .6em;
   text-align: center;
   font-family: var(--b-widget-icon-font-family);
+  font-weight: var(--b-widget-icon-font-weight);
   color: var(--b-tree-expander-color);
   width: var(--b-tree-icon-width);
   min-width: var(--b-tree-icon-width);
@@ -2478,7 +2487,7 @@ div.b-grid-header-container .b-yscroll-pad {
   padding-inline-start: calc(var(--b-tree-indent-size) * var(--b-tree-level));
 }
 .b-tree:not(.b-show-tree-lines) .b-tree-leaf-cell .b-tree-parent-has-icon {
-  padding-inline-start: calc(var(--b-tree-indent-size) * (var(--b-tree-level) - 1) + var(--b-tree-icon-width) + var(--b-tree-cell-gap));
+  padding-inline-start: calc(var(--b-tree-indent-size) * var(--b-tree-level) + var(--b-tree-icon-width) + var(--b-tree-cell-gap));
 }
 .b-tree-line {
   flex-shrink: 0;