@bryntum/taskboard-angular-thin 7.1.1 → 7.1.2

package/README.md

@@ -1,37 +1,310 @@
-# Angular Ivy wrapper for Bryntum TaskBoard
+<div style="display: flex; justify-content: space-between; align-items: center; margin: 0 50px;">
+    <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>
+    <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/angular.svg" alt="Angular" width="100">
+</div>
 
-This package contains a wrapper that encapsulates Bryntum TaskBoard and turns it into an Angular component, exposing
-configuration options, properties, features, and events. Compiled for the Angular Ivy engine.
+# Angular wrapper for Bryntum TaskBoard Thin packages
+
+This package provides a wrapper that turns Bryntum TaskBoard 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/taskboard/docs/guide/TaskBoard/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/taskboard-angular-thin@latest
+```
 
-Install using `npm`:
+### Component Package (Required)
 
-```shell
-npm install @bryntum/taskboard-angular@7.1.1
+```bash
+npm install @bryntum/taskboard-thin@latest
 ```
 
-Install using `yarn`:
+## Try Bryntum Online Demos
+
+* [View Online Angular Demos](https://bryntum.com/products/taskboard/examples/?framework=angular)
 
-```shell
-yarn add @bryntum/taskboard-angular@7.1.1
+## 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 { BryntumTaskBoardModule } from '@bryntum/taskboard-angular-thin';
+
+import { AppComponent } from './app';
+
+@NgModule({
+    declarations : [
+        AppComponent
+    ],
+    imports      : [
+        BrowserModule,
+        BryntumCoreModule,
+        BryntumTaskBoardModule
+    ],
+    providers    : [],
+    bootstrap    : [AppComponent]
+})
+export class AppModule {}
 ```
 
-## Integration guide
+Create `src/app/app.config.ts` file with the following content:
+
+```typescript
+import { BryntumTaskBoardProps, BryntumTaskBoardProjectModelProps } from '@bryntum/taskboard-angular-thin';
+
+export const projectProps: BryntumTaskBoardProjectModelProps = {
+    loadUrl  : 'data/data.json',
+    autoLoad : true
+};
+
+export const taskBoardProps: BryntumTaskBoardProps = {
+    columns : [
+        { id : 'todo', text : 'Todo', color : 'deep-orange' },
+        { id : 'doing', text : 'Doing', color : 'orange' },
+        { id : 'done', text : 'Done', color : 'light-green' }
+    ],
+    columnField : 'status'
+};
+```
+
+Update the `src/app/app.ts` file with the following content:
+
+```typescript
+import { Component, ViewChild } from '@angular/core';
+import { BryntumTaskBoardComponent, BryntumTaskBoardProjectModelComponent } from '@bryntum/taskboard-angular-thin';
+import { taskBoardProps, projectProps } from './app.config';
+
+@Component({
+    selector    : 'app-root',
+    standalone  : false,
+    templateUrl : './app.html',
+    styleUrl    : './app.css'
+  })
+  export class AppComponent {
+
+    taskBoardProps = taskBoardProps;
+    projectProps = projectProps;
+
+    @ViewChild('taskboard') taskBoardComponent!: BryntumTaskBoardComponent;
+    @ViewChild('project') projectComponent!: BryntumTaskBoardProjectModelComponent;
+}
+```
+
+Edit the `src/app/app.html` file and replace the content with the following:
+
+```html
+<bryntum-task-board-project-model
+    #project
+    [loadUrl] = "projectProps.loadUrl!"
+    [autoLoad] = "projectProps.autoLoad!"
+></bryntum-task-board-project-model>
+
+<bryntum-task-board
+    #taskboard
+    [project] = "project"
+    [columns] = "taskBoardProps.columns!"
+    [columnField] = "taskBoardProps.columnField!"
+></bryntum-task-board>
+```
+
+<details>
+<summary>Create sample data (click to expand)</summary>
+
+Create a `public/data/data.json` file for example data and add the following JSON data to it:
+```javascript
+{
+  "success": true,
+  "tasks": {
+    "rows": [
+      { "id": 1, "name": "Design landing page", "status": "doing", "description": "Creating layout for the new landing page" },
+      { "id": 2, "name": "Set up database schema", "status": "todo",  "description": "Define tables and relationships for user data" },
+      { "id": 3, "name": "Write API documentation", "status": "done",  "description": "Document the REST endpoints for the project" },
+      { "id": 4, "name": "Create login screen", "status": "doing", "description": "Implement authentication UI with validation" },
+      { "id": 5, "name": "Integrate payment gateway", "status": "todo",  "description": "Connect Stripe API to the backend" },
+      { "id": 6, "name": "Fix navigation bugs", "status": "done",  "description": "Resolve reported issues with navbar links" },
+      { "id": 7, "name": "Build notification system", "status": "doing", "description": "Real-time push notifications for events" },
+      { "id": 8, "name": "Add unit tests", "status": "todo",  "description": "Write tests for services and components" },
+      { "id": 9, "name": "Optimize image loading", "status": "done",  "description": "Implement lazy loading for large images" },
+      { "id": 10, "name": "Deploy staging server", "status": "doing", "description": "Set up CI/CD pipeline for staging environment" },
+      { "id": 11, "name": "Create user profile page", "status": "todo",  "description": "Design and implement profile management UI" },
+      { "id": 12, "name": "Implement role-based access control", "status": "todo",  "description": "Restrict features based on user roles" },
+      { "id": 13, "name": "Set up error logging", "status": "todo",  "description": "Integrate centralized error monitoring tool" },
+      { "id": 14, "name": "Improve form validation", "status": "todo",  "description": "Enhance validation rules for all forms" },
+      { "id": 15, "name": "Add search functionality", "status": "todo",  "description": "Implement search bar with filtering options" }
+    ]
+  },
+  "resources": {
+    "rows": [
+      { "id": 1, "name": "Angelo"  },
+      { "id": 2, "name": "Celia"   },
+      { "id": 3, "name": "Dave"    },
+      { "id": 4, "name": "Emilia"  },
+      { "id": 5, "name": "Gloria"  },
+      { "id": 6, "name": "Henrik"  },
+      { "id": 7, "name": "Kate"    }
+    ]
+  },
+  "assignments": {
+    "rows": [
+      { "id": 1, "event": 1, "resource": 1 },
+      { "id": 2, "event": 2, "resource": 2 },
+      { "id": 3, "event": 3, "resource": 3 },
+      { "id": 4, "event": 4, "resource": 4 },
+      { "id": 5, "event": 5, "resource": 5 },
+      { "id": 6, "event": 6, "resource": 6 },
+      { "id": 7, "event": 7, "resource": 7 },
+      { "id": 8, "event": 8, "resource": 1 },
+      { "id": 9, "event": 9, "resource": 2 },
+      { "id": 10, "event": 10, "resource": 3 },
+      { "id": 11, "event": 11, "resource": 4 },
+      { "id": 12, "event": 12, "resource": 5 },
+      { "id": 13, "event": 1, "resource": 5 },
+      { "id": 14, "event": 2, "resource": 5 },
+      { "id": 15, "event": 3, "resource": 5 },
+      { "id": 16, "event": 4, "resource": 5 },
+      { "id": 17, "event": 6, "resource": 5 },
+      { "id": 18, "event": 7, "resource": 5 }
+    ]
+  }
+}
+```
+
+This is the data the Bryntum TaskBoard will use.
+
+</details>
+
+## Project Structure
+
+### Product Dependencies
+
+API packages:
+
+```json
+{
+  "dependencies": {
+    "@bryntum/core-thin": "7.1.2",
+    "@bryntum/engine-thin": "7.1.2",
+    "@bryntum/taskboard-thin": "7.1.2"
+  }
+}
+```
+
+Framework wrapper packages:
+
+```json
+{
+  "dependencies": {
+    "@bryntum/core-angular-thin": "7.1.2",
+    "@bryntum/taskboard-angular-thin": "7.1.2"
+  }
+}
+```
+
+### Product Configuration
+
+```typescript
+import { BryntumTaskBoardProps } from '@bryntum/taskboard-angular-thin';
+
+const taskBoardProps : BryntumTaskBoardProps = {
+    // TaskBoard 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/taskboard-thin/taskboard.css';
+/* Theme */
+@import '@bryntum/core-thin/material3-light.css';
+```
+
+### Product Localization
+
+```javascript
+import '@bryntum/taskboard-thin/lib/localization/De.js'
+```
+
+## Integration Guide
 
 For details on installing and using this package, see the
 [Angular Integration Guide](https://bryntum.com/products/taskboard/docs/guide/TaskBoard/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/taskboard/docs/guide/TaskBoard/integration/angular/guide#wrappers) for the complete list of available
+wrapper components.
+
+## Features
+
+Features are optional modules that extend Bryntum TaskBoard functionality. Each feature is suffixed with `Feature` and
+can be enabled and configured through standard Angular inputs.
+
+Visit [Features documentation](https://bryntum.com/products/taskboard/docs/guide/TaskBoard/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/taskboard/docs/guide/TaskBoard/npm-repository)
 * [Bryntum TaskBoard documentation](https://bryntum.com/products/taskboard/docs/)
 * [Bryntum TaskBoard examples](https://bryntum.com/products/taskboard/examples/)
+
 * [Bryntum Support Forum](https://forum.bryntum.com/)
 * [Contact us](https://bryntum.com/contact/)
 
@@ -42,3 +315,4 @@ Please visit the [Bryntum TaskBoard End User License](https://bryntum.com/produc
 
 Copyright © 2009-2026, Bryntum
 All rights reserved.
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bryntum/taskboard-angular-thin",
-  "version": "7.1.1",
+  "version": "7.1.2",
   "description": "Angular IVY wrappers for Bryntum TaskBoard JavaScript component",
   "keywords": [
     "bryntum",