@guiexpert/angular-table 0.0.1 → 15.0.0

package/.eslintrc.json

@@ -0,0 +1,46 @@
+{
+  "extends": [
+    "../../.eslintrc.json"
+  ],
+  "ignorePatterns": [
+    "!**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "extends": [
+        "plugin:@nrwl/nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "guiexpert",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "guiexpert",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@nrwl/nx/angular-template"
+      ],
+      "rules": {}
+    }
+  ]
+}

package/.idea/angular-table.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/angular-table.iml" filepath="$PROJECT_DIR$/.idea/angular-table.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

package/README.md

@@ -1,3 +1,3 @@
 # angular-table
 
-This library was generated with [Nx](https://nx.dev).
+coming soon

package/ng-package.json

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

package/package.json

@@ -1,33 +1,14 @@
 {
   "name": "@guiexpert/angular-table",
-  "version": "0.0.1",
+  "version": "15.0.0",
+  "scripts": {
+    "publish": "npm publish"
+  },
   "peerDependencies": {
-    "@angular/common": "^14.2.0",
-    "@angular/core": "^14.2.0",
-    "@guiexpert/table": "0.0.1",
-    "rxjs": "~7.5.0"
+    "@angular/common": "^15.0.0",
+    "@angular/core": "^15.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"
-  },
-  "module": "fesm2015/guiexpert-angular-table.mjs",
-  "es2020": "fesm2020/guiexpert-angular-table.mjs",
-  "esm2020": "esm2020/guiexpert-angular-table.mjs",
-  "fesm2020": "fesm2020/guiexpert-angular-table.mjs",
-  "fesm2015": "fesm2015/guiexpert-angular-table.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2020": "./esm2020/guiexpert-angular-table.mjs",
-      "es2020": "./fesm2020/guiexpert-angular-table.mjs",
-      "es2015": "./fesm2015/guiexpert-angular-table.mjs",
-      "node": "./fesm2015/guiexpert-angular-table.mjs",
-      "default": "./fesm2020/guiexpert-angular-table.mjs"
-    }
-  },
-  "sideEffects": false
+  }
 }

package/project.json

@@ -0,0 +1,37 @@
+{
+  "name": "@guiexpert/angular-table",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "library",
+  "sourceRoot": "libs/angular-table/src",
+  "prefix": "guiexpert",
+  "targets": {
+    "build": {
+      "executor": "@nrwl/angular:package",
+      "outputs": [
+        "dist/libs/angular-table"
+      ],
+      "options": {
+        "project": "libs/angular-table/ng-package.json"
+      },
+      "configurations": {
+        "production": {
+          "tsConfig": "libs/angular-table/tsconfig.lib.prod.json"
+        },
+        "development": {
+          "tsConfig": "libs/angular-table/tsconfig.lib.json"
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "options": {
+        "lintFilePatterns": [
+          "libs/angular-table/**/*.ts",
+          "libs/angular-table/**/*.html"
+        ]
+      }
+    }
+  },
+  "tags": []
+}

package/src/lib/angular-table/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/src/lib/angular-table/service/dom-service.ts

@@ -0,0 +1,54 @@
+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;
+  }
+
+  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/src/lib/angular-table/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/src/lib/angular-table/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/src/lib/angular-table/table-color-classes.css

@@ -0,0 +1,90 @@
+
+
+.ge-table { background-color: var(--ge-table-bg); }
+
+.ge-table-header-west { background-color: var(--ge-table-header-west-bg); }
+.ge-table-header-center { background-color: var(--ge-table-header-center-bg); }
+.ge-table-header-east { background-color: var(--ge-table-header-east-bg); }
+.ge-table-header-west { color: var(--ge-table-header-west-text); }
+.ge-table-header-center { color: var(--ge-table-header-center-text); }
+.ge-table-header-east { color: var(--ge-table-header-east-text); }
+
+.ge-table-header-west-horizontal-border { background-color: var(--ge-table-header-west-horizontal-border); }
+.ge-table-header-west-vertical-border { background-color: var(--ge-table-header-west-vertical-border); }
+.ge-table-header-center-horizontal-border { background-color: var(--ge-table-header-center-horizontal-border); }
+.ge-table-header-center-vertical-border { background-color: var(--ge-table-header-center-vertical-border); }
+.ge-table-header-east-horizontal-border { background-color: var(--ge-table-header-east-horizontal-border); }
+.ge-table-header-east-vertical-border { background-color: var(--ge-table-header-east-vertical-border); }
+
+
+.ge-table-body-west { background-color: var(--ge-table-body-west-bg); }
+.ge-table-body-center { background-color: var(--ge-table-body-center-bg); }
+.ge-table-body-east { background-color: var(--ge-table-body-east-bg); }
+.ge-table-body-west { color: var(--ge-table-body-west-text); }
+.ge-table-body-center { color: var(--ge-table-body-center-text); }
+.ge-table-body-east { color: var(--ge-table-body-east-text); }
+
+.ge-table-body-west-horizontal-border { background-color: var(--ge-table-body-west-horizontal-border); }
+.ge-table-body-west-vertical-border { background-color: var(--ge-table-body-west-vertical-border); }
+.ge-table-body-center-horizontal-border { background-color: var(--ge-table-body-center-horizontal-border); }
+.ge-table-body-center-vertical-border { background-color: var(--ge-table-body-center-vertical-border); }
+.ge-table-body-east-horizontal-border { background-color: var(--ge-table-body-east-horizontal-border); }
+.ge-table-body-east-vertical-border { background-color: var(--ge-table-body-east-vertical-border); }
+
+.ge-table-body-west-selected-range { background-color: var(--ge-table-body-west-selected-range-bg); }
+.ge-table-body-center-selected-range { background-color: var(--ge-table-body-center-selected-range-bg); }
+.ge-table-body-east-selected-range { background-color: var(--ge-table-body-east-selected-range-bg); }
+.ge-table-body-west-selected-range { color: var(--ge-table-body-west-selected-range-text); }
+.ge-table-body-center-selected-range { color: var(--ge-table-body-center-selected-range-text); }
+.ge-table-body-east-selected-range { color: var(--ge-table-body-east-selected-range-text); }
+
+
+
+
+
+
+.ge-table-footer-west { background-color: var(--ge-table-footer-west-bg); }
+.ge-table-footer-center { background-color: var(--ge-table-footer-center-bg); }
+.ge-table-footer-east { background-color: var(--ge-table-footer-east-bg); }
+
+.ge-table-footer-west { color: var(--ge-table-footer-west-text); }
+.ge-table-footer-center { color: var(--ge-table-footer-center-text); }
+.ge-table-footer-east { color: var(--ge-table-footer-east-text); }
+
+.ge-table-footer-west-horizontal-border { background-color: var(--ge-table-footer-west-horizontal-border); }
+.ge-table-footer-west-vertical-border { background-color: var(--ge-table-footer-west-vertical-border); }
+.ge-table-footer-center-horizontal-border { background-color: var(--ge-table-footer-center-horizontal-border); }
+.ge-table-footer-center-vertical-border { background-color: var(--ge-table-footer-center-vertical-border); }
+.ge-table-footer-east-horizontal-border { background-color: var(--ge-table-footer-east-horizontal-border); }
+.ge-table-footer-east-vertical-border { background-color: var(--ge-table-footer-east-vertical-border); }
+
+
+
+
+.ge-table-border { background-color: var(--ge-table-border); }
+.ge-table-row-odd {background-color: var(--ge-table-row-odd-bg); }
+.ge-table-row-even {background-color: var(--ge-table-row-even-bg); }
+.ge-table-column-odd {background-color: var(--ge-table-column-odd-bg); }
+.ge-table-column-even {background-color: var(--ge-table-column-even-bg); }
+
+.ge-table-hover-column { background-color: var(--ge-table-hover-column-bg); }
+.ge-table-hover-row { background-color: var(--ge-table-hover-row-bg); }
+
+.ge-table-focus-border { background-color: var(--ge-table-focus-border); }
+.ge-table-color-col-resize-handle-hover { background-color: var(--ge-table-color-col-resize-handle-hover-bg); }
+.ge-table-color-dragged-col-div { background-color: var(--ge-table-color-dragged-col-div-bg); }
+.ge-table-color-drop-zone { background-color: var(--ge-table-color-drop-zone-bg); }
+.ge-table-color-drop-zone { background-color: var(--ge-table-color-drop-zone); }
+.ge-table-color-tree-arrow-collapsed-color { background-color: var(--ge-table-color-tree-arrow-collapsed-color); }
+.ge-table-color-error { color: var(--ge-table-color-error-text); }
+.ge-table-tree-arrow-collapsed { color: var(--ge-table-tree-arrow-collapsed-color);}
+.ge-table-column-resize-handle:hover { background-color: var(--ge-table-column-resize-handle-border) }
+
+.ge-table-drop-zone { background-color: var(--ge-table-drop-zone-bg); }
+.ge-table-dragged-col-div { background-color: var(--ge-table-dragged-col-div-bg); }
+
+ /*TODO geht das überhaupt?*/
+.ge-table-cell-editor-input,
+.ge-table-cell-editor-input:focus-within {
+  border: none;
+}

package/src/lib/angular-table/table-color-vars.css

@@ -0,0 +1,141 @@
+
+:root [data-theme= "light"] {
+  --ge-table-bg: #fff;
+  --ge-table-header-west-bg: var(--ge-table-header-center-bg);
+  --ge-table-header-center-bg: rgba(233, 233, 233, 0.5);
+  --ge-table-header-east-bg: var(--ge-table-header-center-bg);
+  --ge-table-header-west-text: var(--ge-table-header-center-text);
+  --ge-table-header-center-text: #000;
+  --ge-table-header-east-text: var(--ge-table-header-center-text);
+
+  --ge-table-header-west-horizontal-border: var(--ge-table-header-center-horizontal-border);
+  --ge-table-header-west-vertical-border: var(--ge-table-header-center-vertical-border);
+  --ge-table-header-center-horizontal-border: #ddd;
+  --ge-table-header-center-vertical-border: #ccc;
+  --ge-table-header-east-horizontal-border: var(--ge-table-header-center-horizontal-border);
+  --ge-table-header-east-vertical-border: var(--ge-table-header-center-vertical-border);
+
+
+  --ge-table-body-west-bg: var(--ge-table-header-center-bg);
+  --ge-table-body-center-bg: rgba(255,255,255, 0.5);
+  --ge-table-body-east-bg: var(--ge-table-header-center-bg);
+
+  --ge-table-body-west-text: var(--ge-table-header-center-text);
+  --ge-table-body-center-text: var(--ge-table-header-center-text);
+  --ge-table-body-east-text: var(--ge-table-header-center-text);
+
+  --ge-table-body-west-horizontal-border: var(--ge-table-header-west-horizontal-border);
+  --ge-table-body-west-vertical-border: var(--ge-table-header-west-vertical-border);
+  --ge-table-body-center-horizontal-border: #bbb;
+  --ge-table-body-center-vertical-border: #ddd;
+  --ge-table-body-east-horizontal-border: var(--ge-table-header-east-horizontal-border);
+  --ge-table-body-east-vertical-border: var(--ge-table-header-east-vertical-border);;
+
+
+  --ge-table-footer-west-bg: var(--ge-table-header-center-bg);
+  --ge-table-footer-center-bg: var(--ge-table-header-center-bg);
+  --ge-table-footer-east-bg: var(--ge-table-header-center-bg);
+
+  --ge-table-footer-west-text: var(--ge-table-header-center-text);
+  --ge-table-footer-center-text: var(--ge-table-header-center-text);
+  --ge-table-footer-east-text: var(--ge-table-header-center-text);
+
+  --ge-table-footer-west-horizontal-border: var(--ge-table-header-west-horizontal-border);
+  --ge-table-footer-west-vertical-border: var(--ge-table-header-west-vertical-border);
+  --ge-table-footer-center-horizontal-border: var(--ge-table-header-center-horizontal-border);
+  --ge-table-footer-center-vertical-border: var(--ge-table-header-center-vertical-border);
+  --ge-table-footer-east-horizontal-border: var(--ge-table-header-east-horizontal-border);
+  --ge-table-footer-east-vertical-border: var(--ge-table-header-east-vertical-border);
+
+
+  --ge-table-body-west-selected-range-bg: rgba(0, 152, 219, 0.4);
+  --ge-table-body-center-selected-range-bg: rgba(0, 152, 219, 0.4);
+  --ge-table-body-east-selected-range-bg: rgba(0, 152, 219, 0.4);
+  --ge-table-body-west-selected-range-text: #000;
+  --ge-table-body-center-selected-range-text: #000;
+  --ge-table-body-east-selected-range-text: #000;
+
+
+  --ge-table-border : #ccc;
+
+  --ge-table-row-odd-bg: transparent;
+  --ge-table-row-even-bg: transparent;
+  --ge-table-column-odd-bg: transparent;
+  --ge-table-column-even-bg: transparent;
+
+  --ge-table-hover-column-bg: rgba(0, 224, 255, 0.27);
+  --ge-table-hover-row-bg: rgba(0, 224, 255, 0.27);
+  --ge-table-focus-border: rgb(0, 255, 255);
+
+  --ge-table-color-error-text: #e00034;
+  --ge-table-tree-arrow-collapsed-color: #e00034;
+  --ge-table-column-resize-handle-border: rgb(0, 255, 255);
+
+  --ge-table-dragged-col-div-bg: lightcyan;
+  --ge-table-drop-zone-bg: rgba(244, 255, 242, 0.6);
+}
+
+
+
+
+:root [data-theme= "dark"] {
+  --ge-table-bg: #000;
+  --ge-table-header-west-bg: oklch(0% 0 0);
+  --ge-table-header-center-bg: oklch(0% 0 0);
+  --ge-table-header-east-bg: oklch(0% 0 0);
+  --ge-table-header-west-text: oklch(100% 0 0);
+  --ge-table-header-center-text: oklch(100% 0 0);
+  --ge-table-header-east-text: oklch(100% 0 0);
+  --ge-table-header-west-horizontal-border: oklch(30% 0 0);
+  --ge-table-header-west-vertical-border: oklch(32% 0 0);
+  --ge-table-header-center-horizontal-border: oklch(30% 0 0);
+  --ge-table-header-center-vertical-border: oklch(32% 0 0);
+  --ge-table-header-east-horizontal-border: oklch(30% 0 0);
+  --ge-table-header-east-vertical-border: oklch(32% 0 0);
+  --ge-table-body-west-bg: oklch(0% 0 0);
+  --ge-table-body-center-bg: oklch(0% 0 0);
+  --ge-table-body-east-bg: oklch(0% 0 0);
+  --ge-table-body-west-text: oklch(100% 0 0);
+  --ge-table-body-center-text: oklch(100% 0 0);
+  --ge-table-body-east-text: oklch(100% 0 0);
+  --ge-table-body-west-horizontal-border: oklch(30% 0 0);
+  --ge-table-body-west-vertical-border: oklch(32% 0 0);
+  --ge-table-body-center-horizontal-border: oklch(30% 0 0);
+  --ge-table-body-center-vertical-border: oklch(32% 0 0);
+  --ge-table-body-east-horizontal-border: oklch(30% 0 0);
+  --ge-table-body-east-vertical-border: oklch(32% 0 0);
+  --ge-table-footer-west-bg: oklch(0% 0 0);
+  --ge-table-footer-center-bg: oklch(0% 0 0);
+  --ge-table-footer-east-bg: oklch(0% 0 0);
+  --ge-table-footer-west-text: var(--ge-table-header-center-text);;
+  --ge-table-footer-center-text: var(--ge-table-header-center-text);;
+  --ge-table-footer-east-text: var(--ge-table-header-center-text);;
+  --ge-table-footer-west-horizontal-border: oklch(30% 0 0);
+  --ge-table-footer-west-vertical-border: oklch(32% 0 0);
+  --ge-table-footer-center-horizontal-border: oklch(30% 0 0);
+  --ge-table-footer-center-vertical-border: oklch(32% 0 0);
+  --ge-table-footer-east-horizontal-border: oklch(30% 0 0);
+  --ge-table-footer-east-vertical-border: oklch(32% 0 0);
+  --ge-table-border: oklch(32% 0 0);
+  --ge-table-row-odd-bg: oklch(0% 0 0);
+  --ge-table-row-even-bg: oklch(0% 0 0);
+  --ge-table-column-odd-bg: oklch(0% 0 0);
+  --ge-table-column-even-bg: oklch(0% 0 0);
+  --ge-table-hover-column-bg: oklch(0% 0 0);
+  --ge-table-hover-row-bg: oklch(0% 0 0);
+  --ge-table-focus-border: rgb(0, 255, 255);;
+  --ge-table-color-error-text: #ffa8b5;
+  --ge-table-tree-arrow-collapsed-color: #ffa8b5;
+  --ge-table-column-resize-handle-border: rgb(0, 255, 255);;
+  --ge-table-dragged-col-div-bg: oklch(0% 0 0);
+  --ge-table-drop-zone-bg: oklch(0% 0 0);
+
+
+
+  --ge-table-body-west-selected-range-bg: oklch(19% 0.2 205.2);
+  --ge-table-body-center-selected-range-bg: oklch(19% 0.2 205.2);
+  --ge-table-body-east-selected-range-bg: oklch(19% 0.2 205.2);
+  --ge-table-body-west-selected-range-text: #000;
+  --ge-table-body-center-selected-range-text: #000;
+  --ge-table-body-east-selected-range-text: #000;
+}

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

@@ -0,0 +1,88 @@
+
+.ge-table-col-div {
+  text-align: center;
+  line-height: 2.5;
+  user-select: none;
+}
+
+.ge-table-label-div {
+  padding: 0;
+  display: block;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+
+.ge-table-label-div .ge-table-label {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.ge-table-text-align-left {
+  text-align: left;
+}
+
+.ge-table-text-align-right {
+  text-align: right;
+}
+
+.ge-table-text-align-center {
+  text-align: center;
+}
+
+/* Row checkbox */
+.ge-table-row-checkbox-div {
+  padding-left: 14px;
+}
+
+
+
+
+/* Tree table */
+
+.ge-table-col-div.ge-table-col-div-0.ge-table-tree-cell {
+  text-align: left;
+}
+
+.ge-table-tree-cell .ge-table-label-div {
+  padding-left: 0;
+  padding-right: 10px;
+  display: inline;
+}
+
+
+.ge-table-col-tree {
+  text-align: left;
+}
+
+.ge-padding-property-checkbox {
+  padding-left: 0;
+}
+
+.ge-table-col-tree.ge-table-tree-deep-0 {
+  padding-left: 16px;
+}
+
+.ge-table-col-tree.ge-table-tree-deep-1 {
+  padding-left: 36px;
+}
+
+.ge-table-col-tree.ge-table-tree-deep-2 {
+  padding-left: 56px;
+}
+
+.ge-table-col-tree.ge-table-tree-deep-3 {
+  padding-left: 76px;
+}
+
+.ge-table-col-tree.ge-table-tree-deep-4 {
+  padding-left: 96px;
+}
+
+.ge-table-col-tree.ge-table-tree-deep-5 {
+  padding-left: 116px;
+}
+
+.ge-table-col-tree.ge-table-tree-deep-5 {
+  padding-left: 136px;
+}