@bryntum/grid-angular-thin 7.1.1 → 7.1.3

package/README.md

@@ -1,37 +1,294 @@
-# Angular Ivy wrapper for Bryntum Grid
+<br>
+<br>
 
-This package contains a wrapper that encapsulates Bryntum Grid and turns it into an Angular component, exposing
-configuration options, properties, features, and events. Compiled for the Angular Ivy engine.
+<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>
+  &emsp;&emsp;&emsp;&emsp;&emsp;
+  <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/angular.svg" alt="Angular" width="100">
+</p>
+
+<br>
+
+# Angular wrapper for Bryntum Grid Thin packages
+
+This package provides a wrapper that turns Bryntum Grid into an Angular component, exposing configuration options,
+properties, features, and events.
+
+> **Thin Package:** This is a thin wrapper package designed for applications that use multiple Bryntum products.
+> Thin packages exclude bundled dependencies to avoid duplication. For details, see
+> [Angular Multiple Products](https://bryntum.com/products/grid/docs/guide/Grid/integration/angular/multiple-products).
+
+## Version Requirement
+
+Wrapper is compiled for the **Angular Ivy** rendering engine (Angular 12+).
+
+* Angular: `12` with Ivy support or higher
+* TypeScript: `4.2` or higher
+* Vite `5` or higher (starting with Angular `17`)
+
+## Package Contents
+
+| Path   | Description                      |
+|--------|----------------------------------|
+| `lib/` | Component type definitions       |
+| `src/` | Original TypeScript source files |
 
 ## Installation
 
-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.
+### Angular Wrapper
 
-The following are most frequently used:
+```bash
+npm install @bryntum/grid-angular-thin@latest
+```
 
-Install using `npm`:
+### Component Package (Required)
 
-```shell
-npm install @bryntum/grid-angular@7.1.1
+```bash
+npm install @bryntum/grid-thin@latest
 ```
 
-Install using `yarn`:
+## Try Bryntum Online Demos
+
+* [View Online Angular Demos](https://bryntum.com/products/grid/examples/?framework=angular)
+
+## Quick Start
+
+Edit the `src/app/app-module.ts` file and add the following import:
+
+```typescript
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { BryntumCoreModule } from '@bryntum/core-angular-thin';
+import { BryntumGridModule } from '@bryntum/grid-angular-thin';
+
+import { AppComponent } from './app';
 
-```shell
-yarn add @bryntum/grid-angular@7.1.1
+@NgModule({
+    declarations : [
+        AppComponent
+    ],
+    imports      : [
+        BrowserModule,
+        BryntumCoreModule,
+        BryntumGridModule
+    ],
+    providers    : [],
+    bootstrap    : [AppComponent]
+})
+export class AppModule {}
 ```
 
-## Integration guide
+Create `src/app/app.config.ts` file with the following content:
+
+```typescript
+import { BryntumGridProps } from '@bryntum/grid-angular-thin';
+
+export const gridProps: BryntumGridProps = {
+    columns : [
+        {
+            text   : 'Name',
+            field  : 'name',
+            flex   : 1,
+            editor : {
+                type     : 'textfield',
+                required : true
+            }
+        }, {
+            text  : 'Age',
+            field : 'age',
+            width : 100,
+            type  : 'number'
+        }, {
+            text  : 'City',
+            field : 'city',
+            flex  : 1
+        }, {
+            text  : 'Food',
+            field : 'food',
+            flex  : 1
+        }, {
+            text     : 'Color',
+            field    : 'color',
+            width    : 80,
+            type     : 'column',
+            renderer : ({ cellElement, value }) => {
+                cellElement.style.color = value;
+                cellElement.style.fontWeight = '700';
+                return value;
+            }
+        }
+    ],
+
+    data : [
+        { id : 1, name : 'Don A Taylor', age : 30, city : 'Moscow', food : 'Salad', color : 'Black' },
+        { id : 2, name : 'John B Adams', age : 65, city : 'Paris', food : 'Bolognese', color : 'Orange' },
+        { id : 3, name : 'John Doe', age : 40, city : 'London', food : 'Fish and Chips', color : 'Blue' },
+        { id : 4, name : 'Maria Garcia', age : 28, city : 'Madrid', food : 'Paella', color : 'Green' },
+        { id : 5, name : 'Li Wei', age : 35, city : 'Beijing', food : 'Dumplings', color : 'Yellow' },
+        { id : 6, name : 'Sara Johnson', age : 32, city : 'Sydney', food : 'Sushi', color : 'Purple' },
+        { id : 7, name : 'Lucas Brown', age : 22, city : 'Toronto', food : 'Poutine', color : 'Orange' },
+        { id : 8, name : 'Emma Wilson', age : 27, city : 'Paris', food : 'Croissant', color : 'Pink' },
+        { id : 9, name : 'Ivan Petrov', age : 45, city : 'St. Petersburg', food : 'Borscht', color : 'Grey' },
+        { id : 10, name : 'Zhang Ming', age : 50, city : 'Shanghai', food : 'Hot Pot', color : 'Purple' },
+        { id : 11, name : 'Sophia Martinez', age : 20, city : 'Mexico City', food : 'Tacos', color : 'Crimson' },
+        { id : 12, name : 'Noah Smith', age : 55, city : 'Cape Town', food : 'Biltong', color : 'Turquoise' },
+        { id : 13, name : 'Isabella Jones', age : 33, city : 'Rio de Janeiro', food : 'Feijoada', color : 'Magenta' },
+        { id : 14, name : 'Ethan Taylor', age : 29, city : 'Chicago', food : 'Deep-Dish Pizza', color : 'Cyan' },
+        { id : 15, name : 'Olivia Brown', age : 37, city : 'Berlin', food : 'Schnitzel', color : 'Maroon' },
+        { id : 16, name : 'Mia Wilson', age : 26, city : 'Rome', food : 'Pasta', color : 'Olive' },
+        { id : 17, name : 'Jacob Miller', age : 60, city : 'Amsterdam', food : 'Stroopwafel', color : 'Lime' },
+        { id : 18, name : 'Chloe Davis', age : 23, city : 'Los Angeles', food : 'Burger', color : 'Teal' },
+        { id : 19, name : 'Aiden Martinez', age : 48, city : 'Buenos Aires', food : 'Asado', color : 'Violet' },
+        { id : 20, name : 'Liam Lee', age : 38, city : 'Seoul', food : 'Kimchi', color : 'Indigo' },
+        { id : 21, name : 'Sophie Kim', age : 21, city : 'Tokyo', food : 'Ramen', color : 'Pink' },
+        { id : 22, name : 'Alexander Nguyen', age : 41, city : 'Hanoi', food : 'Pho', color : 'Coral' },
+        { id : 23, name : 'Ella Patel', age : 19, city : 'Mumbai', food : 'Curry', color : 'Amber' },
+        { id : 24, name : 'James O Connor', age : 34, city : 'Dublin', food : 'Irish Stew', color : 'Green' },
+        { id : 25, name : 'Isabelle Chen', age : 31, city : 'Hong Kong', food : 'Dim Sum', color : 'Brown' }
+    ]
+};
+```
+
+Update the `src/app/app.ts` file with the following content:
+
+```typescript
+/**
+ * App component script
+ */
+import { Component, ViewChild } from '@angular/core';
+import { BryntumGridComponent } from '@bryntum/grid-angular-thin';
+import { gridProps } from './app.config';
+
+@Component({
+    selector    : 'app-root',
+    standalone  : false,
+    templateUrl : './app.html',
+    styleUrl    : './app.css',
+})
+export class AppComponent {
+
+    gridProps = gridProps;
+
+    @ViewChild('grid') gridComponent!: BryntumGridComponent;
+}
+```
+
+Edit the `src/app/app.html` file and replace the content with the following:
+
+```html
+<bryntum-grid
+    #grid
+    [data] = "gridProps.data!"
+    [columns] = "gridProps.columns!"
+></bryntum-grid>
+```
+
+## Project Structure
+
+### Product Dependencies
+
+API packages:
+
+```json
+{
+  "dependencies": {
+    "@bryntum/core-thin": "7.1.3",
+    "@bryntum/grid-thin": "7.1.3"
+  }
+}
+```
+
+Framework wrapper packages:
+
+```json
+{
+  "dependencies": {
+    "@bryntum/core-angular-thin": "7.1.3",
+    "@bryntum/grid-angular-thin": "7.1.3"
+  }
+}
+```
+
+### Product Configuration
+
+```typescript
+import { BryntumGridProps } from '@bryntum/grid-angular-thin';
+
+const gridProps : BryntumGridProps = {
+    // Grid configuration
+};
+```
+
+### Product Styling
+
+**SCSS/CSS:**
+
+```css
+/* FontAwesome is used for icons */
+@import '@bryntum/core-thin/fontawesome/css/fontawesome.css';
+@import "@bryntum/core-thin/fontawesome/css/solid.css";
+/* Structural CSS */
+@import '@bryntum/core-thin/core.css';
+@import '@bryntum/grid-thin/grid.css';
+/* Theme */
+@import '@bryntum/core-thin/material3-light.css';
+```
+
+### Product Localization
+
+```javascript
+import '@bryntum/grid-thin/lib/localization/De.js'
+```
+
+## Integration Guide
 
 For details on installing and using this package, see the
 [Angular Integration Guide](https://bryntum.com/products/grid/docs/guide/Grid/integration/angular/guide).
 
-# Online references
+## Wrappers
+
+Angular wrappers encapsulate Bryntum components as native Angular components, exposing all configuration options,
+properties, features, and events through Angular-familiar patterns like inputs, outputs, and templates.
+
+Visit [Wrappers documentation](https://bryntum.com/products/grid/docs/guide/Grid/integration/angular/guide#wrappers) for the complete list of available
+wrapper components.
+
+## Features
+
+Features are optional modules that extend Bryntum Grid functionality. Each feature is suffixed with `Feature` and
+can be enabled and configured through standard Angular inputs.
+
+Visit [Features documentation](https://bryntum.com/products/grid/docs/guide/Grid/integration/angular/guide#features) for the complete list of available
+features and their configuration options.
+
+## 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/)
 
@@ -42,3 +299,4 @@ Please visit the [Bryntum Grid End User License](https://bryntum.com/products/gr
 
 Copyright © 2009-2026, Bryntum
 All rights reserved.
+