@guiexpert/table 1.1.17 → 1.1.20

package/src/lib/table/data/common/args-render-cell-div.ts

@@ -0,0 +1,34 @@
+import { AreaModelIf } from "../tablemodel/areamodel/area-model.if";
+import { AreaIdent } from "../tablemodel/area-ident.type";
+import { SideIdent } from "../side-ident.type";
+
+/**
+ * Represents the arguments required to render a cell div.
+ *
+ * @interface ArgsRenderCellDiv
+ * @property {AreaModelIf} areaModel - The area model for the cell.
+ * @property {AreaIdent} areaIdent - The identifier of the area.
+ * @property {SideIdent} sideIdent - The identifier of the side.
+ * @property {number} rowIndex - The index of the row.
+ * @property {number} index - The index of the cell.
+ * @property {number} left - The left position of the cell.
+ * @property {number} width - The width of the cell.
+ * @property {number} height - The height of the cell.
+ * @property {number} top - The top position of the cell.
+ * @property {HTMLDivElement} parent - The parent element of the cell.
+ * @property {boolean} lastRowOfModel - Indicates if the cell is in the last row of the model.
+ */
+export interface ArgsRenderCellDiv {
+  areaModel: AreaModelIf;
+  areaIdent: AreaIdent;
+  sideIdent: SideIdent;
+  rowIndex: number;
+  index: number;
+  left: number;
+  width: number;
+  height: number;
+  top: number;
+  parent: HTMLDivElement;
+  lastRowOfModel: boolean;
+  // gammaRange: boolean;
+}

package/src/lib/table/data/common/boolean-function.ts

@@ -0,0 +1,16 @@
+export type BooleanFunction = () => boolean;
+
+/**
+ * Represents a function that always returns true.
+ *
+ * @function
+ * @returns {boolean} - Always returns true
+ */
+export const TrueFn = () => true;
+/**
+ * Represents a function that always returns `false`.
+ *
+ * @function
+ * @returns {boolean} Always returns `false`.
+ */
+export const FalseFn = () => false;

package/src/lib/table/data/common/cell-range.ts

@@ -0,0 +1,66 @@
+export class CellRange {
+
+
+  /**
+   * Represents a constructor for a class.
+   * @constructor
+   * @param {number} r1 - The value for r1.
+   * @param {number} c1 - The value for c1.
+   * @param {number} r2 - The value for r2.
+   * @param {number} c2 - The value for c2.
+   * @param {boolean} [gammaRange=false] - The value for gammaRange. Defaults to false. gammaRange will be used for AreaModelCellGroups, but it's not implemented yet!
+   */
+  constructor(
+    public r1: number,
+    public c1: number,
+    public r2: number,
+    public c2: number,
+    public gammaRange: boolean = false) {
+  }
+
+  static create(params: {
+    rowIndex1: number,
+    columnIndex1: number,
+    rowIndex2: number,
+    columnIndex2: number,
+    gammaRange?: boolean
+  }): CellRange {
+    if (params.gammaRange === undefined) {
+      params.gammaRange = false;
+    }
+    return new CellRange(
+      params.rowIndex1,
+      params.columnIndex1,
+      params.rowIndex2,
+      params.columnIndex2,
+      params.gammaRange
+    );
+  }
+
+  static singleCell(
+    rowIndex: number,
+    columnIndex: number
+  ): CellRange {
+    return new CellRange(rowIndex, columnIndex, rowIndex, columnIndex);
+  }
+
+  static singleRow(
+    rowIndex: number
+  ): CellRange {
+    return new CellRange(rowIndex, 0, rowIndex, Number.MAX_SAFE_INTEGER);
+  }
+
+  static singleColumn(
+    columnIndex: number
+  ): CellRange {
+    return new CellRange(0, columnIndex, Number.MAX_SAFE_INTEGER, columnIndex);
+  }
+
+  isInRange(rowIndex: number, columnIndex: number): boolean {
+    return rowIndex >= this.r1
+      && rowIndex <= this.r2
+      && columnIndex >= this.c1
+      && columnIndex <= this.c2;
+  }
+
+}

package/src/lib/table/data/common/checkbox-column-def.ts

@@ -0,0 +1,31 @@
+import { Size } from "./size";
+import { SizeIf } from "./size.if";
+import { ColumnDefIf } from "../tablemodel/column/column-def.if";
+import { CellRendererIf } from "../../renderer/cell-render.if";
+import { CheckboxCellRenderer } from "../../renderer/checkbox-cell-renderer";
+import { AreaObjectMapType } from "./area-map.type";
+import { AreaObjectMap } from "./area-map";
+
+/**
+ * A pre-defined column definition for a checkbox representation.
+ *
+ * @implements {ColumnDefIf}
+ */
+export class CheckboxColumnDef implements ColumnDefIf {
+
+  public type = 'CheckboxColumnDef';
+
+  public property = "CheckboxColumn";
+  public headerLabel = "";
+  public width: SizeIf = new Size(50, "px");
+  public minWidth: SizeIf = new Size(50, "px");
+  public maxWidth: SizeIf = new Size(100, "px");
+  public rendererMap: AreaObjectMapType<CellRendererIf> = new AreaObjectMap<CellRendererIf>(new CheckboxCellRenderer(), new CheckboxCellRenderer(), undefined);
+  public classes: AreaObjectMapType<string[]> = new AreaObjectMap<string[]>(
+    [],
+    ["ge-table-text-align-left"],
+    []
+  );
+
+
+}

package/src/lib/table/data/common/checked-type.ts

@@ -0,0 +1,6 @@
+/**
+ * Represents a checked type.
+ *
+ * @typedef {'none' | 'semi' | 'full'} CheckedType
+ */
+export type CheckedType = "none" | "semi" | "full";

package/src/lib/table/data/common/event/ge-cell-indices.ts

@@ -0,0 +1,12 @@
+/**
+ * Represents the indices (position) of a cell in a table area.
+ */
+export class GeCellIndices {
+
+  constructor(
+    public rowIndex: number = -1,
+    public columnIndex: number = -1
+  ) {
+  }
+
+}

package/src/lib/table/data/common/event/ge-key-event.ts

@@ -0,0 +1,15 @@
+/**
+ * Represents a keyboard event.
+ *
+ * @class GeKeyEvent
+ */
+export class GeKeyEvent {
+
+  constructor(
+    public status: "down" | "up" = "down",
+    public originalEvent?: KeyboardEvent
+  ) {
+  }
+
+
+}

package/src/lib/table/data/common/event/ge-model-change-event.ts

@@ -0,0 +1,16 @@
+import { GeCellIndices } from "./ge-cell-indices";
+
+/**
+ * Indicates that changes have occurred in the given cells.
+ */
+export class GeModelChangeEvent {
+
+  constructor(
+    public cells: GeCellIndices[]
+  ) {
+  }
+
+  static createSingle(rowIndex: number, columnIndex: number) {
+    return new GeModelChangeEvent([new GeCellIndices(rowIndex, columnIndex)]);
+  }
+}

package/src/lib/table/data/common/event/ge-mouse-event.ts

@@ -0,0 +1,41 @@
+import { AreaIdent } from "../../tablemodel/area-ident.type";
+import { SideIdent } from "../../side-ident.type";
+
+/**
+ * Represents a mouse event in the table.
+ */
+export class GeMouseEvent {
+
+
+  constructor(
+    public rowIndex: number = -1,
+    public rowTop: number = -1,
+    public columnIndex: number = -1,
+    public columnLeft: number = -1,
+    public areaIdent?: AreaIdent,
+    public sideIdent?: SideIdent,
+    public originalEvent?: MouseEvent,
+    public clickCount: number = 0,
+    public draggingX: number = 0,
+    public draggingY: number = 0,
+    public action: string | null = ""
+  ) {
+  }
+
+  clone(): GeMouseEvent {
+    return new GeMouseEvent(
+      this.rowIndex,
+      this.rowTop,
+      this.columnIndex,
+      this.columnLeft,
+      this.areaIdent,
+      this.sideIdent,
+      this.originalEvent,
+      this.clickCount,
+      this.draggingX,
+      this.draggingY,
+      this.action
+    );
+  }
+
+}

package/src/lib/table/data/common/event/input/table-cell-update-event.if.ts

@@ -0,0 +1,58 @@
+import { AreaIdent } from "../../../tablemodel/area-ident.type";
+
+/**
+ * One event defines one table cell update operation.
+ * You can send an array of these event via TableApi#updateCells(events: TableCellUpdateEventIf[], repaintAll: boolean = false).
+ */
+export interface TableCellUpdateEventIf {
+
+  /**
+   * Represents an area identifier ("header" | "body" | "footer"), which defines the part of the table.
+   *
+   * @typedef {number} AreaIdent
+   */
+  area: AreaIdent;
+
+  /**
+   * Represents the index of a row of the table.
+   *
+   * @typedef {number} rowIndex
+   */
+  rowIndex: number;
+
+  /**
+   * Represents the index of a column in a data table.
+   *
+   * @typedef {number} columnIndex
+   */
+  columnIndex: number;
+
+
+  /**
+   * The value can be any data type.
+   * It can store a string, number, boolean, object, function, or null.
+   * It is a flexible variable that can hold any value.
+   *
+   * This valie will be set to the area model for the cell (rowIndex, columnIndex).
+   *
+   * @type {*} - Represents any data type
+   */
+  value: any;
+
+
+  /**
+   * Represents a collection of CSS classes with their corresponding boolean values.
+   * For each key-value pair of the object with a truthy value the corresponding key is used as a class name.
+   * For each key-value pair of the object with a falsy value the corresponding key will be removed from the class list of the cell div (dom node).
+   * Example:
+   *    {
+   *       low: val >= 0 && val <=5,
+   *       medium: val > 5 && val <= 10,
+   *       high: val > 10
+   *    }
+   *
+   * @typedef {Object.<string, boolean>} CssClasses
+   */
+  cssClasses: {[key:string]: boolean};
+
+}

package/src/lib/table/data/common/event/input/table-cell-update-event.ts

@@ -0,0 +1,27 @@
+import { TableCellUpdateEventIf } from "./table-cell-update-event.if";
+import { AreaIdent } from "../../../tablemodel/area-ident.type";
+
+/**
+ * Represents an event that occurs when a table cell is updated.
+ *
+ * @class
+ * @implements TableCellUpdateEventIf
+ *
+ * @param {AreaIdent} area - The identification of the area where the cell belongs.
+ * @param {number} rowIndex - The index of the row where the cell is located.
+ * @param {number} columnIndex - The index of the column where the cell is located.
+ * @param {any} value - The new value for the cell.
+ * @param {Object.<string, boolean>} cssClasses - An object containing CSS classes to be applied to the cell.
+ */
+export class TableCellUpdateEvent implements TableCellUpdateEventIf {
+
+  constructor(
+    public area: AreaIdent,
+    public rowIndex: number,
+    public columnIndex: number,
+    public value: any,
+    public cssClasses: {[key:string]: boolean} = {},
+  ) {
+  }
+
+}

package/src/lib/table/data/common/filter-function.ts

@@ -0,0 +1,9 @@
+/**
+ * Represents a filter function that is used to determine if an element should be included in a filtered array.
+ * @template T The type of the elements in the array.
+ * @param {T} value The current element being evaluated.
+ * @param {number} index The index of the current element being evaluated.
+ * @param {T[]} array The array that the filter function was called upon.
+ * @returns {unknown} The result of the filter function evaluation: `true` if the element should be included, `false` otherwise.
+ */
+export type FilterFunction<T> = (value: T, index: number, array: T[]) => unknown;

package/src/lib/table/data/common/get-t.ts

@@ -0,0 +1,7 @@
+/**
+ * Represents a function that retrieves a value of type T.
+ * Returns the value of type T if it exists, otherwise undefined.
+ *
+ * @template T - The type of the value to be retrieved.
+ */
+export type GetT<T> = () => T | undefined;

package/src/lib/table/data/common/index-and-px.ts

@@ -0,0 +1,12 @@
+/**
+ * Represents an index and pixel value pair.
+ */
+export class IndexAndPx {
+
+  constructor(
+    public index: number,
+    public px: number
+  ) {
+  }
+
+}

package/src/lib/table/data/common/size.if.ts

@@ -0,0 +1,8 @@
+/**
+ * Represents a size with a value and unit. At the moment only unit 'px' is implemented in the calculations.
+ * @interface
+ */
+export interface SizeIf {
+  value: number;
+  unit: "px" | "%";
+}

package/src/lib/table/data/common/size.ts

@@ -0,0 +1,9 @@
+import { SizeIf } from "./size.if";
+
+export class Size implements SizeIf {
+  constructor(
+    public value: number = 100,
+    public unit: "px" | "%" = "px"
+  ) {
+  }
+}

package/src/lib/table/data/common/sizes.ts

@@ -0,0 +1,35 @@
+import { Size } from "./size";
+
+
+export const px300 = new Size(300, "px");
+export const px290 = new Size(290, "px");
+export const px280 = new Size(280, "px");
+export const px270 = new Size(270, "px");
+export const px260 = new Size(260, "px");
+export const px250 = new Size(250, "px");
+export const px240 = new Size(240, "px");
+export const px230 = new Size(230, "px");
+export const px220 = new Size(220, "px");
+export const px210 = new Size(210, "px");
+export const px200 = new Size(200, "px");
+export const px190 = new Size(190, "px");
+export const px180 = new Size(180, "px");
+export const px170 = new Size(170, "px");
+export const px160 = new Size(160, "px");
+export const px150 = new Size(150, "px");
+export const px140 = new Size(140, "px");
+export const px130 = new Size(130, "px");
+export const px120 = new Size(120, "px");
+export const px110 = new Size(110, "px");
+export const px100 = new Size(100, "px");
+export const px90 = new Size(90, "px");
+export const px80 = new Size(80, "px");
+export const px70 = new Size(70, "px");
+export const px60 = new Size(60, "px");
+export const px50 = new Size(50, "px");
+export const px40 = new Size(40, "px");
+export const px30 = new Size(30, "px");
+export const px20 = new Size(20, "px");
+export const px10 = new Size(10, "px");
+export const px0 = new Size(0, "px");
+

package/src/lib/table/data/common/sort-item.ts

@@ -0,0 +1,14 @@
+import { SortState } from "./sort-state.type";
+
+/**
+ * Represents a sortable column with its sort order..
+ */
+export class SortItem {
+
+  constructor(
+    public columnIndex: number,
+    public sortState: SortState
+  ) {
+  }
+
+}

package/src/lib/table/data/common/sort-state.type.ts

@@ -0,0 +1,7 @@
+/**
+ * Represents the sort state of a list or table.
+ * It can take one of the following values: "asc", "desc", or "" (empty string).
+ *
+ * @typedef {("asc" | "desc" | "")} SortState
+ */
+export type SortState = "asc" | "desc" | "";

package/src/lib/table/data/common/tree-arrow.type.ts

@@ -0,0 +1,8 @@
+/**
+ * Represents the arrow type for a tree node in a hierarchical structure.
+ *
+ * The arrow type determines the visual representation of the arrow icon associated with a tree node.
+ *
+ * @typedef {("none" | "hidden" | "collapsed" | "expanded")} TreeArrowType
+ */
+export type TreeArrowType = "none" | "hidden" | "collapsed" | "expanded";

package/src/lib/table/data/common/tree-row-if.ts

@@ -0,0 +1,15 @@
+
+
+/**
+ * Represents a (table) row in a tree structure. It's a container object for T with additional tree node information.@template T - The type of data stored in each row.
+ */
+export interface TreeRowIf<T> {
+  type?:'TreeRow'|'';
+  data: T;
+  expanded: boolean;
+  children: TreeRowIf<T>[] | undefined;
+  parent: TreeRowIf<T> | undefined;
+  deep: number;
+  checked: boolean;
+  keep: boolean;
+}

package/src/lib/table/data/common/tree-row.ts

@@ -0,0 +1,22 @@
+import { TreeRowIf } from "./tree-row-if";
+
+/**
+ * Represents a (table) row in a tree structure. It's a container object for T with additional tree node information.
+ * @template T - The type of data stored in the row.
+ */
+export class TreeRow<T> implements TreeRowIf<T> {
+
+  public type:'TreeRow'|'' = 'TreeRow';
+
+  constructor(
+    public data: T,
+    public expanded: boolean = true,
+    public children: TreeRowIf<T>[] | undefined,
+    public parent: TreeRowIf<T> | undefined,
+    public deep: number = 0,
+    public checked: boolean = false,
+    public keep: boolean = false
+  ) {
+  }
+
+}

package/src/lib/table/data/common/value-label.if.ts

@@ -0,0 +1,6 @@
+export interface ValueLabelIf {
+
+  value: any;
+  label: string;
+
+}

package/src/lib/table/data/common/value-label.ts

@@ -0,0 +1,13 @@
+import { ValueLabelIf } from "./value-label.if";
+
+
+export class ValueLabel implements ValueLabelIf {
+
+
+  constructor(
+    public value: any,
+    public label: string
+  ) {
+  }
+
+}

package/src/lib/table/data/div-scope.type.ts

@@ -0,0 +1,14 @@
+/**
+ * Represents a DivScope object.
+ *
+ * @typedef {{
+ *   parent: HTMLDivElement,
+ *   child: HTMLDivElement,
+ *   cache: { [key: number]: HTMLDivElement }
+ * }} DivScope
+ */
+export type DivScope = {
+  parent: HTMLDivElement,
+  child: HTMLDivElement,
+  cache: { [key: number]: HTMLDivElement }
+};

package/src/lib/table/data/event/mouse-target-data.ts

@@ -0,0 +1,48 @@
+import { AreaIdent, getAreaIdentByString } from "../tablemodel/area-ident.type";
+import { AreaModelIf } from "../tablemodel/areamodel/area-model.if";
+import { TableScope } from "../../table-scope";
+
+/**
+ * Represents data about a mouse target. It's a helper class to extract all information from the target HTMLElement.
+ */
+export class MouseTargetData {
+
+  rowIdx: number = -1;
+  colIdx: number = -1;
+  areaIdent?: AreaIdent;
+  areaModel?: AreaModelIf;
+  row?: any;
+  value?: any;
+  action: string | null = null;
+  inputType: string | null = null;
+  className: string = "";
+
+
+  constructor(
+    eventTarget: EventTarget | null,
+    tableScope: TableScope) {
+
+    if (eventTarget === null) return; // skip
+
+    if (eventTarget instanceof HTMLDivElement
+      || eventTarget instanceof HTMLSpanElement
+      || eventTarget instanceof HTMLInputElement) {
+
+      this.className = eventTarget.className;
+      this.action = eventTarget.getAttribute("data-ge-action");
+      this.inputType = eventTarget.getAttribute("data-input-type");
+      this.rowIdx = Number(eventTarget.getAttribute("data-row-index"));
+      this.colIdx = Number(eventTarget.getAttribute("data-col-index"));
+      const area = eventTarget.getAttribute("data-area");
+      if (area) {
+        this.areaIdent = getAreaIdentByString(area);
+        this.areaModel = tableScope.tableModel.getAreaModel(this.areaIdent);
+        this.row = this.areaModel.getRowByIndex(this.rowIdx);
+      }
+      if (eventTarget instanceof HTMLInputElement) {
+        const target = eventTarget as HTMLInputElement;
+        this.value = target.value;
+      }
+    }
+  }
+}

package/src/lib/table/data/geo-data.ts

@@ -0,0 +1,16 @@
+/**
+ * Represents geometric data with left, width, height, top coordinates and an optional index.
+ */
+export class GeoData {
+
+  constructor(
+    public left: number = 0,
+    public width: number = 0,
+    public height: number = 0,
+    public top: number = 0,
+    public index?: number
+  ) {
+  }
+
+
+}

package/src/lib/table/data/options/auto-restore-options.if.ts

@@ -0,0 +1,21 @@
+export type IsSameFn<T> = (r1: T, r2: T, optionsIf: AutoRestoreOptionsIf<T>) => boolean;
+export type GetRowIdFn<T> = ((row: T) => string | number);
+export type GetStorageKeyFn = (() => string);
+
+/**
+ * See TableOptionsIf#autoRestoreOptions()
+ */
+export interface AutoRestoreOptionsIf<T> {
+
+  autoRestoreSortingState: boolean;
+  autoRestoreCollapsedExpandedState?: boolean;
+  autoRestoreScrollPosition?: boolean;
+
+  autoRestoreCheckedState?: boolean;
+  autoRestoreSelectedState?: boolean;
+
+  getRowId?: undefined | GetRowIdFn<T>;
+  getStorageKeyFn?: undefined | GetStorageKeyFn;
+  isSame?: undefined | IsSameFn<T>;
+
+}

package/src/lib/table/data/options/auto-restore-options.ts

@@ -0,0 +1,50 @@
+import { AutoRestoreOptionsIf } from "./auto-restore-options.if";
+
+
+export class AutoRestoreOptions<T> implements AutoRestoreOptionsIf<T> {
+
+  public autoRestoreSortingState = false;
+  public autoRestoreCollapsedExpandedState = false;
+  public autoRestoreScrollPosition = false;
+
+  public autoRestoreCheckedState = false;
+  public autoRestoreSelectedState = false;
+
+
+  public getStorageKeyFn = undefined;
+
+
+  public isSame = (r1: T, r2: T, options: AutoRestoreOptionsIf<T>) => {
+    if (r1 && r2) {
+      if (options.getRowId) {
+        const id1 = options.getRowId(r1);
+        const id2 = options.getRowId(r2);
+        return id1 === id2;
+      }
+    }
+    return false;
+  };
+
+  public getRowId = (row: T): string | number => {
+    if (row) {
+      // First try:
+      for (const key of ["id", "uuid"]) {
+        // @ts-ignore
+        const id = row[key];
+        if (id !== undefined && id !== null) {
+          return id;
+        }
+      }
+
+      // Second try:
+      try {
+        return JSON.stringify(row);
+      } catch (e) {
+        console.error(e);
+      }
+    }
+    console.warn("One of following options set to true without a valid \"getRowId()\": autoRestoreExpandedState, autoRestoreCheckedState.");
+    return -1;
+  };
+
+}