@guiexpert/angular-table 16.0.38 → 16.1.52

package/.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

package/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

package/.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

package/.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}

package/README.md

@@ -11,14 +11,14 @@ This is the UI-agnostic table component for your next web app. 😊
 ### Version compatibility
 
 
-| Angular  | @guiexpert/angular-table |
-|:---------|:-------------------------|
-| 19.x.x   | ^19.0.0                  |
-| 18.x.x   | ^18.0.0                  |
-| 17.x.x   | ^17.0.0                  |
-| 16.x.x   | ^16.0.7                  |
-| 15.x.x   | ^15.0.2                  |
-| 14.x.x   | ^14.0.3                  |
+| Angular   | @guiexpert/angular-table |
+|:----------|:-------------------------|
+| 19.x.x    | ^19.0.0                  |
+| 18.x.x    | ^18.0.0                  |
+| 17.x.x    | ^17.0.0                  |
+| 16.x.x    | ^16.0.7                  |
+| 15.x.x    | ^15.0.2                  |
+| 14.x.x    | ^14.0.3                  |
 |
 
 

package/angular.json

@@ -0,0 +1,40 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "angular-table": {
+      "projectType": "library",
+      "root": "projects/angular-table",
+      "sourceRoot": "projects/angular-table/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "projects/angular-table/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/angular-table/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/angular-table/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "tsConfig": "projects/angular-table/tsconfig.spec.json",
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ]
+          }
+        }
+      }
+    }
+  }
+}

package/package.json

@@ -1,28 +1,43 @@
 {
   "name": "@guiexpert/angular-table",
-  "version": "16.0.38",
-  "peerDependencies": {
-    "@angular/common": "^16.2.12",
-    "@angular/core": "^16.2.12"
+  "version": "16.1.52",
+  "scripts": {
+    "inst": "pnpm install -f",
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test",
+    "npm-update-table": "pnpm update @guiexpert/table",
+    "npm-pub": "npm publish --tag a16"
   },
+  "private": false,
   "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "repository": {
-    "url": "https://github.com/guiexperttable/angluar-14-table"
+    "@angular/animations": "^16.2.12",
+    "@angular/common": "^16.2.12",
+    "@angular/compiler": "^16.2.12",
+    "@angular/core": "^16.2.12",
+    "@angular/forms": "^16.2.12",
+    "@angular/platform-browser": "^16.2.12",
+    "@angular/platform-browser-dynamic": "^16.2.12",
+    "@angular/router": "^16.2.12",
+    "@guiexpert/table": "^1.1.51",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.14.2"
   },
-  "sideEffects": false,
-  "module": "fesm2022/guiexpert-angular-table.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/guiexpert-angular-table.mjs",
-      "esm": "./esm2022/guiexpert-angular-table.mjs",
-      "default": "./fesm2022/guiexpert-angular-table.mjs"
-    }
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^16.2.10",
+    "@angular/cli": "^16.2.10",
+    "@angular/compiler-cli": "^16.2.12",
+    "@types/jasmine": "~5.1.0",
+    "jasmine-core": "~5.1.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "ng-packagr": "^16.2.3",
+    "typescript": "~5.1.6"
   }
-}
+}

package/projects/angular-table/README.md

@@ -0,0 +1,119 @@
+# @guiexpert/angular-table
+
+This is the angular component of the GuiExpert Table Project.
+
+## Become a master at creating web applications with large tables
+
+This is the UI-agnostic table component for your next web app. 😊
+
+<img src="https://raw.githubusercontent.com/guiexperttable/website-astro/main/src/assets/screens/heatmap.png" width="50%">
+
+### Version compatibility
+
+
+| Angular  | @guiexpert/angular-table |
+|:---------|:-------------------------|
+| 19.x.x   | ^19.0.0                  |
+| 18.x.x   | ^18.0.0                  |
+| 17.x.x   | ^17.0.0                  |
+| 16.x.x   | ^16.0.7                  |
+| 15.x.x   | ^15.0.2                  |
+| 14.x.x   | ^14.0.3                  |
+|
+
+
+### Features
+- Handle large datasets easily
+- Excellent performance for large tables by vertical and horizontal virtual scrolling
+- Fully-featured (advanced sorting and filtering)
+- Highly customizable orderData grid
+- Outstanding performance
+- No third-party dependencies
+- UI-agnostic
+- Column Interactions (resize, reorder)
+- Sorting Rows
+- Row, Column, and Range Selection
+- Single and Multi Selection
+- UI-agnostic
+- Row and Column Spanning
+- Fixed Columns (Left and Right)
+- Tree table (Hierarchical View)
+- Accessibility support: Keyboard Shortcuts
+- Custom Filtering
+- In-place Cell Editing
+- Userdefined Key and Mouse Events
+- Customizable Look & Feel (via CSS variables)
+- Row sorting
+- Column Reordering (Drag and Drop)
+- State Persistence (Row Sorting, Column Order, Selection)
+- Customizable Cell Contents via Renderer for Header, Body and Footer
+- Full control over the HTML structure and style
+
+
+## Links
+
+- [Demos](https://gui.expert/demos)
+- [Documentation](https://gui.expert/doc)
+- [API](https://gui.expert/api)
+
+## Get Started
+
+Add the following two NPM packages to your existing angular project (run this in your project root directory):
+
+```
+npm install --save @guiexpert/table @guiexpert/angular-table
+```
+
+Import the (standalone) TableComponent in your angular module:
+
+```
+@NgModule({
+    imports: [
+      CommonModule,
+      TableComponent, ...
+```
+
+Add guiexpert-table component to a template:
+
+```
+<guiexpert-table
+  [tableModel]="tableModel"
+  [tableOptions]="tableOptions"
+  class="table-div"
+></guiexpert-table>
+```
+
+
+Add two properties (tableModel and tableOptions) to the component:
+
+```
+import {
+  TableFactory,
+  TableModelIf,
+  TableOptions,
+  TableOptionsIf
+} from "@guiexpert/table";
+
+tableModel: TableModelIf = TableFactory.createTableModel({
+  headerData: [
+    ['Header 1', 'Header 2']
+  ],
+  bodyData: [
+    ['Text 1a', 'Text 2a'],
+    ['Text 1b', 'Text 2b'],
+  ]
+});
+
+tableOptions = {
+  ...new TableOptions(),
+  hoverColumnVisible: false,
+  defaultRowHeights: {
+  header: 40,
+  body: 34,
+  footer: 0
+}
+
+```
+
+There are numerous possibilities to create table models.
+Please refer to the [Documentation](https://gui.expert/doc) for further information or the [Demo](https://gui.expert/demos) section for examples.

package/projects/angular-table/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/angular-table",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/projects/angular-table/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@guiexpert/angular-table",
+  "version": "16.0.38",
+  "peerDependencies": {
+    "@angular/common": "^16.2.12",
+    "@angular/core": "^16.2.12"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "scripts": {
+    "git-config": "git config --global url.\"https://\".insteadOf ssh://",
+    "npm-pub:angular-table": "npm publish ../../dist/angular-table --access public --tag a16"
+  },
+  "repository": {
+    "url": "https://github.com/guiexperttable/angluar-14-table"
+  },
+  "sideEffects": false
+}

package/projects/angular-table/src/lib/component-renderer.if.ts

@@ -0,0 +1,12 @@
+import {AreaIdent, AreaModelIf, RendererCleanupFnType} from "@guiexpert/table";
+
+export interface ComponentRendererIf<T> {
+
+  setData(
+    rowIndex: number,
+    columnIndex: number,
+    areaIdent: AreaIdent,
+    areaModel: AreaModelIf,
+    cellValue: any): RendererCleanupFnType | undefined;
+
+}

package/projects/angular-table/src/lib/service/dom-service.spec.ts

@@ -0,0 +1,17 @@
+import { TestBed } from '@angular/core/testing';
+import {DomService} from "angular-table";
+
+
+
+describe('DomService', () => {
+  let service: DomService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(DomService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/projects/angular-table/src/lib/service/dom-service.ts

@@ -0,0 +1,63 @@
+import {Injectable, Renderer2} from "@angular/core";
+import {DomServiceIf} from "@guiexpert/table";
+
+
+@Injectable({
+  providedIn: "root"
+})
+export class DomService implements DomServiceIf {
+
+  constructor(
+    readonly renderer: Renderer2,
+  ) {
+  }
+
+  setStyle(el: any, style: string, value: any): any {
+    this.renderer.setStyle(el, style, value);
+    return el;
+  };
+
+
+  appendText(parent: HTMLDivElement, text: string): HTMLDivElement {
+    const div = this.renderer.createText(text);
+    this.renderer.appendChild(parent, div);
+    return div;
+  }
+
+
+  addClass(div: HTMLDivElement, clazz: string) {
+    if (clazz.includes(' ')) {
+      clazz.split(' ').forEach(c => this.renderer.addClass(div, c))
+    } else {
+      this.renderer.addClass(div, clazz);
+    }
+    return div;
+  }
+
+  removeClass(div: HTMLDivElement, clazz: string) {
+    if (clazz.includes(" ")) {
+      clazz.split(" ").forEach(c => div.classList.remove(c));
+    } else {
+      div.classList.remove(clazz);
+    }
+    return div;
+  }
+
+  appendChild(parent: HTMLElement, child: HTMLElement): void {
+    this.renderer.appendChild(parent, child);
+  }
+
+  createElement<T>(name: string): T {
+    return this.renderer.createElement(name);
+  }
+
+  createText(text: string): HTMLElement {
+    return this.renderer.createText(text);
+  }
+
+  setAttribute(ele: HTMLElement, key: string, value: string): void {
+    this.renderer.setAttribute(ele, key, value);
+  }
+
+
+}

package/projects/angular-table/src/lib/service/render-wrapper-factory.ts

@@ -0,0 +1,24 @@
+import {ApplicationRef, ChangeDetectorRef, EnvironmentInjector, Injectable, NgZone, Type} from "@angular/core";
+import {ComponentRendererIf} from "../component-renderer.if";
+import {RendererWrapper} from "./renderer-wrapper";
+
+@Injectable({
+  providedIn: "root"
+})
+export class RenderWrapperFactory {
+
+  constructor(
+    private readonly appRef: ApplicationRef,
+    private readonly injector: EnvironmentInjector,
+    private readonly zone: NgZone
+  ) {
+  }
+
+  create<T>(
+    componentType: Type<ComponentRendererIf<T>>,
+    cdr: ChangeDetectorRef
+  ) {
+    return new RendererWrapper(componentType, this.appRef, this.injector, cdr, this.zone);
+  }
+
+}

package/projects/angular-table/src/lib/service/renderer-wrapper.ts

@@ -0,0 +1,86 @@
+import {AreaIdent, AreaModelIf, CellRendererIf, DomServiceIf, RendererCleanupFnType} from "@guiexpert/table";
+import {
+  ApplicationRef,
+  ChangeDetectorRef,
+  createComponent,
+  EnvironmentInjector,
+  EventEmitter,
+  NgZone,
+  Type
+} from "@angular/core";
+import {ComponentRendererIf} from "../component-renderer.if";
+import {Subject, takeUntil} from "rxjs";
+import {Observable} from "rxjs/internal/Observable";
+
+
+export class RendererWrapper<T extends ComponentRendererIf<T>>
+  implements CellRendererIf {
+
+  public readonly event$ = new EventEmitter<any>();
+  private readonly closed$ = new Subject<number>();
+
+  constructor(
+    private componentType: Type<ComponentRendererIf<T>>,
+    private appRef: ApplicationRef,
+    private injector: EnvironmentInjector,
+    private cdr: ChangeDetectorRef,
+    private readonly zone: NgZone
+  ) {
+  }
+
+  render(
+    cellDiv: HTMLDivElement,
+    rowIndex: number,
+    columnIndex: number,
+    areaIdent: AreaIdent,
+    areaModel: AreaModelIf,
+    cellValue: any,
+    domService: DomServiceIf): RendererCleanupFnType | undefined {
+
+    const componentRef = createComponent(this.componentType, {
+      environmentInjector: this.injector
+    });
+    componentRef.instance.setData(
+      rowIndex,
+      columnIndex,
+      areaIdent,
+      areaModel,
+      cellValue);
+
+
+    const emmiterNames = Object.keys(componentRef.instance)
+      .filter(key => {
+        // @ts-ignore
+        const t = componentRef.instance[key];
+        return t['subscribe']
+      });
+
+    // @ts-ignore
+    const observables: Observable[] = (emmiterNames.map(key => (componentRef.instance[key] as Observable)));
+    observables.forEach(obs => obs
+      .pipe(
+        takeUntil(this.closed$)
+      )
+      .subscribe((event: any) => {
+        console.info('RendererWrapper event >', event); // TODO hmm?
+        this.event$.next(event);
+      })
+    );
+
+    cellDiv.appendChild(componentRef.location.nativeElement);
+
+    this.appRef.attachView(componentRef.hostView);
+
+    this.zone.run(() => {
+      this.cdr.detectChanges();
+    });
+
+    return () => {
+      // clean up:
+      this.appRef.detachView(componentRef.hostView);
+      this.closed$.next(Date.now());
+    };
+  }
+
+
+}

package/projects/angular-table/src/lib/table.component.css

@@ -0,0 +1,5 @@
+
+@import "node_modules/@guiexpert/table/css/main.css";
+
+
+

package/projects/angular-table/src/lib/table.component.spec.ts

@@ -0,0 +1,28 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import {TableComponent} from "./table.component";
+import {DomService} from "./service/dom-service";
+import {RenderWrapperFactory} from "./service/render-wrapper-factory";
+import {RendererWrapper} from "./service/renderer-wrapper";
+
+describe('TableComponent', () => {
+  let component: TableComponent;
+  let fixture: ComponentFixture<TableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        TableComponent, DomService, RenderWrapperFactory, RendererWrapper
+      ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});