@sneat/datagrid 0.1.2 → 0.1.4

package/fesm2022/sneat-datagrid.mjs

@@ -0,0 +1,326 @@
+import * as i0 from '@angular/core';
+import { Input, Component, inject, EventEmitter, Output, ViewChild } from '@angular/core';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i1 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import { IonCardHeader, IonCardTitle, IonCardSubtitle, IonSegment, IonSegmentButton, IonLabel, IonList, IonItem, IonInput, IonBadge, IonText } from '@ionic/angular/standalone';
+import { ErrorLogger } from '@sneat/core';
+import { Module, Tabulator, InteractionModule, SelectRowModule, MenuModule } from 'tabulator-tables';
+
+class CellPopoverComponent {
+    constructor() {
+        this.tab = 'rec';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CellPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: CellPopoverComponent, isStandalone: true, selector: "sneat-datatug-cell-popover", inputs: { column: "column", value: "value", fk: "fk" }, ngImport: i0, template: "<ion-card-header>\n  <ion-card-title>Field: {{ column?.name }}</ion-card-title>\n  <ion-card-subtitle>Value: {{ value }}</ion-card-subtitle>\n</ion-card-header>\n<h3 class=\"ion-margin\">\n  References:\n  @if (fk?.refTable) {\n    <a routerLink=\"{{ fk?.refTable?.schema }}.{{ fk?.refTable?.name }}\">\n      {{ fk?.refTable?.schema }}.{{ fk?.refTable?.name }}\n    </a>\n  }\n</h3>\n<ion-segment [(ngModel)]=\"tab\">\n  <ion-segment-button value=\"rec\">\n    <ion-label>Record</ion-label>\n  </ion-segment-button>\n  <ion-segment-button value=\"cols\">\n    <ion-label>Columns</ion-label>\n  </ion-segment-button>\n  <ion-segment-button value=\"refs\">\n    <ion-label>References</ion-label>\n  </ion-segment-button>\n</ion-segment>\n\n@switch (tab) {\n  @case (\"rec\") {\n    <ion-list>\n      <ion-item>\n        <ion-label>Id</ion-label>\n        <ion-input\n          type=\"number\"\n          style=\"text-align: right\"\n          value=\"1\"\n          readonly=\"true\"\n        />\n      </ion-item>\n      <ion-item>\n        <ion-label>Code</ion-label>\n        <ion-input\n          type=\"text\"\n          style=\"text-align: right\"\n          value=\"Something\"\n          readonly=\"true\"\n        />\n      </ion-item>\n    </ion-list>\n  }\n  @case (\"cols\") {\n    <ion-list>\n      <ion-item>\n        <ion-label>Id</ion-label>\n        <ion-badge slot=\"end\" color=\"light\">\n          <ion-text color=\"medium\">INT</ion-text>\n        </ion-badge>\n      </ion-item>\n      <ion-item>\n        <ion-label>Code</ion-label>\n        <ion-badge slot=\"end\" color=\"light\">\n          <ion-text color=\"medium\">NVARCHAR</ion-text>\n        </ion-badge>\n      </ion-item>\n    </ion-list>\n  }\n}\n", dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { kind: "component", type: IonSegmentButton, selector: "ion-segment-button", inputs: ["contentId", "disabled", "layout", "mode", "type", "value"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CellPopoverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sneat-datatug-cell-popover', imports: [
+                        RouterModule,
+                        FormsModule,
+                        IonCardHeader,
+                        IonCardTitle,
+                        IonCardSubtitle,
+                        IonSegment,
+                        IonSegmentButton,
+                        IonLabel,
+                        IonList,
+                        IonItem,
+                        IonInput,
+                        IonBadge,
+                        IonText,
+                    ], template: "<ion-card-header>\n  <ion-card-title>Field: {{ column?.name }}</ion-card-title>\n  <ion-card-subtitle>Value: {{ value }}</ion-card-subtitle>\n</ion-card-header>\n<h3 class=\"ion-margin\">\n  References:\n  @if (fk?.refTable) {\n    <a routerLink=\"{{ fk?.refTable?.schema }}.{{ fk?.refTable?.name }}\">\n      {{ fk?.refTable?.schema }}.{{ fk?.refTable?.name }}\n    </a>\n  }\n</h3>\n<ion-segment [(ngModel)]=\"tab\">\n  <ion-segment-button value=\"rec\">\n    <ion-label>Record</ion-label>\n  </ion-segment-button>\n  <ion-segment-button value=\"cols\">\n    <ion-label>Columns</ion-label>\n  </ion-segment-button>\n  <ion-segment-button value=\"refs\">\n    <ion-label>References</ion-label>\n  </ion-segment-button>\n</ion-segment>\n\n@switch (tab) {\n  @case (\"rec\") {\n    <ion-list>\n      <ion-item>\n        <ion-label>Id</ion-label>\n        <ion-input\n          type=\"number\"\n          style=\"text-align: right\"\n          value=\"1\"\n          readonly=\"true\"\n        />\n      </ion-item>\n      <ion-item>\n        <ion-label>Code</ion-label>\n        <ion-input\n          type=\"text\"\n          style=\"text-align: right\"\n          value=\"Something\"\n          readonly=\"true\"\n        />\n      </ion-item>\n    </ion-list>\n  }\n  @case (\"cols\") {\n    <ion-list>\n      <ion-item>\n        <ion-label>Id</ion-label>\n        <ion-badge slot=\"end\" color=\"light\">\n          <ion-text color=\"medium\">INT</ion-text>\n        </ion-badge>\n      </ion-item>\n      <ion-item>\n        <ion-label>Code</ion-label>\n        <ion-badge slot=\"end\" color=\"light\">\n          <ion-text color=\"medium\">NVARCHAR</ion-text>\n        </ion-badge>\n      </ion-item>\n    </ion-list>\n  }\n}\n" }]
+        }], propDecorators: { column: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], fk: [{
+                type: Input
+            }] } });
+
+class AdvertModule extends Module {
+    static { this.moduleName = 'advert'; }
+    initialize() {
+        return;
+    }
+}
+Tabulator.registerModule([
+    InteractionModule,
+    SelectRowModule,
+    AdvertModule,
+    MenuModule,
+]);
+// export interface IGridDef {
+// 	columns: IGridColumn[],
+// 	rows?: unknown[],
+// 	groupBy?: string;
+// }
+//
+// export const getTabulatorCols = (cols: IGridColumn[]): any[] => cols.map(c => {
+// 	const v = {...c};
+// 	delete v.dbType;
+// 	return v;
+// });
+//
+// export interface IGridColumn {
+// 	field: string;
+// 	colName?: string;
+// 	dbType: string;
+// 	title: string;
+// 	tooltip?: (cell: any) => string;
+// 	formatter?: any;
+// 	hozAlign?: 'left' | 'right';
+// 	widthShrink?: number;
+// 	widthGrow?: number;
+// 	width?: number | string;
+// }
+/**
+ * This is a wrapper class for the tabulator JS library.
+ * For more info see http://tabulator.info
+ */
+class DataGridComponent {
+    constructor() {
+        this.errorLogger = inject(ErrorLogger);
+        this.layout = 'fitColumns';
+        this.data = [];
+        this.columns = [];
+        this.rowSelected = new EventEmitter();
+        this.rowDeselected = new EventEmitter();
+    }
+    ngOnChanges(changes) {
+        try {
+            if ((changes['data'] && this.data && this.columns) ||
+                (changes['columns'] && this.columns) ||
+                (changes['rowClick'] && this.rowClick)) {
+                this.drawTable();
+            }
+        }
+        catch (ex) {
+            this.errorLogger.logError(ex, 'Failed to process ngOnChanges in DataGridComponent');
+        }
+    }
+    // ngOnDestroy(): void {
+    // console.log('DataGridComponent.ngOnDestroy()', this.tabulator);
+    // try { // TODO: destroy Tabulator
+    // 	if (this.tabulator?.element) {
+    // 		// noinspection TypeScriptValidateJSTypes
+    // 		this.tabulator.element.tabulator('destroy');
+    // 	}
+    // } catch (ex) {
+    // 	this.errorLogger.logError(ex, 'Failed to destroy tabulator');
+    // }
+    // }
+    ngAfterViewInit() {
+        if (this.tabulator) {
+            try {
+                this.tabulator.redraw();
+            }
+            catch (e) {
+                this.errorLogger.logError(e, 'Failed to redraw tabulator', {
+                    show: false,
+                    report: false,
+                });
+            }
+        }
+    }
+    drawTable() {
+        if (!this.data || !this.columns) {
+            console.warn('drawTable()', 'columns:', this.columns, 'data:', this.data);
+            return;
+        }
+        try {
+            if (!this.tabulatorDiv) {
+                this.errorLogger.logError(new Error('!this.tabulatorDiv'));
+                return;
+            }
+            if (this.tabulatorOptions) {
+                this.tabulatorOptions = { ...this.tabulatorOptions, data: this.data };
+                this.tabulator
+                    ?.setData(this.data)
+                    .catch(this.errorLogger.logErrorHandler('Failed to set data'));
+            }
+            else {
+                this.createTabulatorGrid();
+            }
+            // this.tabulatorDiv.nativeElement.appendChild(this.tab);
+            // tabulator.redraw();
+        }
+        catch (e) {
+            this.errorLogger.logError(e, 'Failed to drawTable');
+        }
+    }
+    createTabulatorGrid() {
+        this.setTabulatorOptions();
+        if (!this.tabulator) {
+            this.tabulatorOptions = {
+                ...this.tabulatorOptions,
+                // rowClick: function (e, row) {
+                // 	console.log('rowClick1', row);
+                // },
+                // rowSelect: function (row) {
+                // 	console.log('rowSelect', row);
+                // },
+                // rowDeselect: function (row) {
+                // 	console.log('rowDeselect', row);
+                // }
+            };
+            this.tabulator = new Tabulator(this.tabulatorDiv?.nativeElement, this.tabulatorOptions);
+            this.tabulator.on('rowClick', (event, row) => {
+                this.clickEvent = event;
+                if (this.rowClick) {
+                    this.rowClick(event, row);
+                }
+            });
+            this.tabulator.on('rowSelected', (row) => this.rowSelected.emit({ row, event: this.clickEvent }));
+            this.tabulator.on('rowDeselected', (row) => this.rowDeselected.emit({ row, event: this.clickEvent }));
+        }
+    }
+    setTabulatorOptions() {
+        this.tabulatorOptions = {
+            // tooltipsHeader: true, // enable header tooltips
+            // tooltipGenerationMode: 'hover',
+            rowContextMenu: this.rowContextMenu,
+            selectableRows: this.selectable,
+            data: this.data,
+            // reactiveData: true, // enable data reactivity
+            columns: this.columns?.map((c) => {
+                const col = {
+                    // TODO(help-wanted): Use strongly typed Tabulator col def
+                    field: c.field,
+                    title: c.title || c.field || c.title,
+                    // headerTooltip: () =>
+                    // 	`${c.colName || c.title || c.field}: ${c.dbType}`,
+                };
+                if (c.colName !== 'Id' && c.colName?.endsWith('Id')) {
+                    col.formatter = 'link';
+                    col.formatterParams = {
+                        url: 'test-url',
+                    };
+                    col.cellClick = (e, cell) => {
+                        void cell;
+                        e.preventDefault();
+                        e.stopPropagation();
+                    };
+                }
+                if (c.tooltip) {
+                    col.tooltip = c.tooltip;
+                }
+                if (c.formatter) {
+                    col.formatter = c.formatter;
+                }
+                if (c.hozAlign) {
+                    col.hozAlign = c.hozAlign;
+                }
+                if (c.headerHozAlign) {
+                    col.headerHozAlign = c.headerHozAlign;
+                }
+                if (c.widthGrow) {
+                    col.widthGrow = c.widthGrow;
+                }
+                if (c.widthShrink) {
+                    col.widthShrink = c.widthShrink;
+                }
+                if (c.width !== undefined) {
+                    col.width = c.width;
+                }
+                // console.log('col:', col);
+                return col;
+            }),
+            layout: this.layout || 'fitColumns',
+        };
+        if (this.height) {
+            this.tabulatorOptions = {
+                ...this.tabulatorOptions,
+                height: this.height,
+            };
+        }
+        if (this.maxHeight) {
+            this.tabulatorOptions = {
+                ...this.tabulatorOptions,
+                maxHeight: this.maxHeight,
+            };
+        }
+        if (this.groupBy) {
+            this.tabulatorOptions = {
+                ...this.tabulatorOptions,
+                groupBy: this.groupBy,
+                groupHeader: (value, count) => {
+                    // value - the value all members of this group share
+                    // count - the number of rows in this group
+                    // data - an array of all the row data objects in this group
+                    // group - the group component for the group
+                    // console.log('groupHeader', value);
+                    return `${this.groupBy}: ${value} <span class="ion-margin-start">(${count} ${count === 1 ? 'record' : 'records'})</span>`;
+                },
+            };
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DataGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: DataGridComponent, isStandalone: true, selector: "sneat-datagrid", inputs: { layout: "layout", data: "data", columns: "columns", groupBy: "groupBy", height: "height", maxHeight: "maxHeight", rowContextMenu: "rowContextMenu", rowClick: "rowClick", selectable: "selectable" }, outputs: { rowSelected: "rowSelected", rowDeselected: "rowDeselected" }, viewQueries: [{ propertyName: "tabulatorDiv", first: true, predicate: ["tabulatorDiv"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+    <div id="tabulator" #tabulatorDiv></div>
+    <p class="ion-margin-start">Rows: {{ data?.length }}</p>
+  `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DataGridComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sneat-datagrid',
+                    template: `
+    <div id="tabulator" #tabulatorDiv></div>
+    <p class="ion-margin-start">Rows: {{ data?.length }}</p>
+  `,
+                    imports: [],
+                }]
+        }], propDecorators: { layout: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], groupBy: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], maxHeight: [{
+                type: Input
+            }], rowContextMenu: [{
+                type: Input
+            }], tabulatorDiv: [{
+                type: ViewChild,
+                args: ['tabulatorDiv', { static: true }]
+            }], rowClick: [{
+                type: Input
+            }], rowSelected: [{
+                type: Output
+            }], rowDeselected: [{
+                type: Output
+            }], selectable: [{
+                type: Input
+            }] } });
+
+// export interface TabulatorOptions {
+// 	readonly tooltipsHeader?: boolean;
+// 	readonly tooltipGenerationMode?: 'hover' | 'mouseover';
+// 	readonly reactiveData?: boolean;
+// 	readonly selectable?: boolean | number | 'highlight';
+// 	readonly data?: unknown[];
+// 	readonly layout?: 'fitData' | 'fitColumns';
+// 	readonly columns?: TabulatorColumn[];
+// 	readonly height?: string | number;
+// 	readonly maxHeight?: string | number;
+// 	readonly groupBy?: string;
+// 	readonly groupHeader?: (value: unknown, count: number) => string;
+// 	readonly rowClick?: (event: Event, row: unknown) => void;
+// 	readonly rowSelect?: (row: unknown) => void;
+// 	readonly rowDeselect?: (row: unknown) => void;
+// 	readonly rowContextMenu?: IRowMenu[];
+// }
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CellPopoverComponent, DataGridComponent };
+//# sourceMappingURL=sneat-datagrid.mjs.map

package/fesm2022/sneat-datagrid.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sneat-datagrid.mjs","sources":["../../../../libs/datagrid/src/lib/components/cell-popover/cell-popover.component.ts","../../../../libs/datagrid/src/lib/components/cell-popover/cell-popover.component.html","../../../../libs/datagrid/src/lib/components/data-grid/data-grid.component.ts","../../../../libs/datagrid/src/lib/tabulator/tabulator-options.ts","../../../../libs/datagrid/src/sneat-datagrid.ts"],"sourcesContent":["import { Component, Input } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { RouterModule } from '@angular/router';\nimport {\n  IonBadge,\n  IonCardHeader,\n  IonCardSubtitle,\n  IonCardTitle,\n  IonInput,\n  IonItem,\n  IonLabel,\n  IonList,\n  IonSegment,\n  IonSegmentButton,\n  IonText,\n} from '@ionic/angular/standalone';\n\n// TODO: Local minimal copies to avoid dependency on @sneat/datatug-main and break circular build deps\ninterface IRecordsetColumn {\n  name: string;\n  title?: string;\n  dbType: string; // Using string here to avoid coupling to DbType type from datatug-main\n}\n\ninterface ITableRef {\n  name: string;\n  schema: string;\n  catalog?: string;\n}\n\ninterface IForeignKey {\n  name: string;\n  columns: string[];\n  refTable: ITableRef;\n}\n\n@Component({\n  selector: 'sneat-datatug-cell-popover',\n  templateUrl: './cell-popover.component.html',\n  imports: [\n    RouterModule,\n    FormsModule,\n    IonCardHeader,\n    IonCardTitle,\n    IonCardSubtitle,\n    IonSegment,\n    IonSegmentButton,\n    IonLabel,\n    IonList,\n    IonItem,\n    IonInput,\n    IonBadge,\n    IonText,\n  ],\n})\nexport class CellPopoverComponent {\n  @Input() column?: IRecordsetColumn;\n  @Input() value: unknown;\n  @Input() fk?: IForeignKey;\n\n  public tab: 'rec' | 'cols' | 'refs' = 'rec';\n}\n","<ion-card-header>\n  <ion-card-title>Field: {{ column?.name }}</ion-card-title>\n  <ion-card-subtitle>Value: {{ value }}</ion-card-subtitle>\n</ion-card-header>\n<h3 class=\"ion-margin\">\n  References:\n  @if (fk?.refTable) {\n    <a routerLink=\"{{ fk?.refTable?.schema }}.{{ fk?.refTable?.name }}\">\n      {{ fk?.refTable?.schema }}.{{ fk?.refTable?.name }}\n    </a>\n  }\n</h3>\n<ion-segment [(ngModel)]=\"tab\">\n  <ion-segment-button value=\"rec\">\n    <ion-label>Record</ion-label>\n  </ion-segment-button>\n  <ion-segment-button value=\"cols\">\n    <ion-label>Columns</ion-label>\n  </ion-segment-button>\n  <ion-segment-button value=\"refs\">\n    <ion-label>References</ion-label>\n  </ion-segment-button>\n</ion-segment>\n\n@switch (tab) {\n  @case (\"rec\") {\n    <ion-list>\n      <ion-item>\n        <ion-label>Id</ion-label>\n        <ion-input\n          type=\"number\"\n          style=\"text-align: right\"\n          value=\"1\"\n          readonly=\"true\"\n        />\n      </ion-item>\n      <ion-item>\n        <ion-label>Code</ion-label>\n        <ion-input\n          type=\"text\"\n          style=\"text-align: right\"\n          value=\"Something\"\n          readonly=\"true\"\n        />\n      </ion-item>\n    </ion-list>\n  }\n  @case (\"cols\") {\n    <ion-list>\n      <ion-item>\n        <ion-label>Id</ion-label>\n        <ion-badge slot=\"end\" color=\"light\">\n          <ion-text color=\"medium\">INT</ion-text>\n        </ion-badge>\n      </ion-item>\n      <ion-item>\n        <ion-label>Code</ion-label>\n        <ion-badge slot=\"end\" color=\"light\">\n          <ion-text color=\"medium\">NVARCHAR</ion-text>\n        </ion-badge>\n      </ion-item>\n    </ion-list>\n  }\n}\n","import {\n  AfterViewInit,\n  Component,\n  ElementRef,\n  EventEmitter,\n  Input,\n  OnChanges,\n  Output,\n  SimpleChanges,\n  ViewChild,\n  inject,\n} from '@angular/core';\nimport { ErrorLogger, IErrorLogger } from '@sneat/core';\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport {\n  Tabulator,\n  SelectRowModule,\n  MenuModule,\n  InteractionModule,\n  Module,\n  RowContextMenuSignature,\n} from 'tabulator-tables';\nimport { IGridColumn } from '@sneat/grid';\nimport { TabulatorColumn, TabulatorOptions } from '../../tabulator';\n\nclass AdvertModule extends Module {\n  public static override moduleName = 'advert';\n\n  override initialize() {\n    return;\n  }\n}\n\nTabulator.registerModule([\n  InteractionModule,\n  SelectRowModule,\n  AdvertModule,\n  MenuModule,\n]);\n\n\n// export interface IGridDef {\n// \tcolumns: IGridColumn[],\n// \trows?: unknown[],\n// \tgroupBy?: string;\n// }\n//\n// export const getTabulatorCols = (cols: IGridColumn[]): any[] => cols.map(c => {\n// \tconst v = {...c};\n// \tdelete v.dbType;\n// \treturn v;\n// });\n//\n// export interface IGridColumn {\n// \tfield: string;\n// \tcolName?: string;\n// \tdbType: string;\n// \ttitle: string;\n// \ttooltip?: (cell: any) => string;\n// \tformatter?: any;\n// \thozAlign?: 'left' | 'right';\n// \twidthShrink?: number;\n// \twidthGrow?: number;\n// \twidth?: number | string;\n// }\n\n/**\n * This is a wrapper class for the tabulator JS library.\n * For more info see http://tabulator.info\n */\n@Component({\n  selector: 'sneat-datagrid',\n  template: `\n    <div id=\"tabulator\" #tabulatorDiv></div>\n    <p class=\"ion-margin-start\">Rows: {{ data?.length }}</p>\n  `,\n  imports: [],\n})\nexport class DataGridComponent implements AfterViewInit, OnChanges {\n  private readonly errorLogger = inject<IErrorLogger>(ErrorLogger);\n\n  @Input() layout?: 'fitData' | 'fitColumns' = 'fitColumns';\n  @Input() data?: unknown[] = [];\n  @Input() columns?: IGridColumn[] = [];\n  @Input() groupBy?: string;\n  @Input() height?: string;\n  @Input() maxHeight?: string | number;\n  @Input() rowContextMenu?: RowContextMenuSignature;\n  @ViewChild('tabulatorDiv', { static: true }) tabulatorDiv?: ElementRef;\n\n  @Input() rowClick?: (event: Event, row: unknown) => void;\n\n  @Output() readonly rowSelected = new EventEmitter<{\n    row: unknown;\n    event?: Event;\n  }>();\n\n  @Output() readonly rowDeselected = new EventEmitter<{\n    row: unknown;\n    event?: Event;\n  }>();\n\n  // private tab = document.createElement('div');\n  private tabulator?: Tabulator;\n\n  @Input() public selectable?: boolean | number | 'highlight';\n\n  private tabulatorOptions?: TabulatorOptions;\n  private clickEvent?: Event;\n\n  ngOnChanges(changes: SimpleChanges): void {\n    try {\n      if (\n        (changes['data'] && this.data && this.columns) ||\n        (changes['columns'] && this.columns) ||\n        (changes['rowClick'] && this.rowClick)\n      ) {\n        this.drawTable();\n      }\n    } catch (ex) {\n      this.errorLogger.logError(\n        ex,\n        'Failed to process ngOnChanges in DataGridComponent',\n      );\n    }\n  }\n\n  // ngOnDestroy(): void {\n  // console.log('DataGridComponent.ngOnDestroy()', this.tabulator);\n  // try { // TODO: destroy Tabulator\n  // \tif (this.tabulator?.element) {\n  // \t\t// noinspection TypeScriptValidateJSTypes\n  // \t\tthis.tabulator.element.tabulator('destroy');\n  // \t}\n  // } catch (ex) {\n  // \tthis.errorLogger.logError(ex, 'Failed to destroy tabulator');\n  // }\n  // }\n\n  ngAfterViewInit(): void /* Intentionally not ngOnInit */ {\n    if (this.tabulator) {\n      try {\n        this.tabulator.redraw();\n      } catch (e) {\n        this.errorLogger.logError(e, 'Failed to redraw tabulator', {\n          show: false,\n          report: false,\n        });\n      }\n    }\n  }\n\n  private drawTable(): void {\n    if (!this.data || !this.columns) {\n      console.warn('drawTable()', 'columns:', this.columns, 'data:', this.data);\n      return;\n    }\n    try {\n      if (!this.tabulatorDiv) {\n        this.errorLogger.logError(new Error('!this.tabulatorDiv'));\n        return;\n      }\n      if (this.tabulatorOptions) {\n        this.tabulatorOptions = { ...this.tabulatorOptions, data: this.data };\n        this.tabulator\n          ?.setData(this.data)\n          .catch(this.errorLogger.logErrorHandler('Failed to set data'));\n      } else {\n        this.createTabulatorGrid();\n      }\n      // this.tabulatorDiv.nativeElement.appendChild(this.tab);\n      // tabulator.redraw();\n    } catch (e) {\n      this.errorLogger.logError(e, 'Failed to drawTable');\n    }\n  }\n\n  private createTabulatorGrid(): void {\n    this.setTabulatorOptions();\n    if (!this.tabulator) {\n      this.tabulatorOptions = {\n        ...this.tabulatorOptions,\n        // rowClick: function (e, row) {\n        // \tconsole.log('rowClick1', row);\n        // },\n        // rowSelect: function (row) {\n        // \tconsole.log('rowSelect', row);\n        // },\n        // rowDeselect: function (row) {\n        // \tconsole.log('rowDeselect', row);\n        // }\n      };\n      this.tabulator = new Tabulator(\n        this.tabulatorDiv?.nativeElement,\n        this.tabulatorOptions,\n      );\n      this.tabulator.on('rowClick', (event: Event, row: unknown) => {\n        this.clickEvent = event;\n        if (this.rowClick) {\n          this.rowClick(event, row);\n        }\n      });\n      this.tabulator.on('rowSelected', (row: unknown) =>\n        this.rowSelected.emit({ row, event: this.clickEvent }),\n      );\n      this.tabulator.on('rowDeselected', (row: unknown) =>\n        this.rowDeselected.emit({ row, event: this.clickEvent }),\n      );\n    }\n  }\n\n  private setTabulatorOptions(): void {\n    this.tabulatorOptions = {\n      // tooltipsHeader: true, // enable header tooltips\n      // tooltipGenerationMode: 'hover',\n      rowContextMenu: this.rowContextMenu,\n      selectableRows: this.selectable,\n      data: this.data,\n      // reactiveData: true, // enable data reactivity\n      columns: this.columns?.map((c) => {\n        const col: TabulatorColumn = {\n          // TODO(help-wanted): Use strongly typed Tabulator col def\n          field: c.field,\n          title: c.title || c.field || c.title,\n          // headerTooltip: () =>\n          // \t`${c.colName || c.title || c.field}: ${c.dbType}`,\n        };\n        if (c.colName !== 'Id' && c.colName?.endsWith('Id')) {\n          col.formatter = 'link';\n          col.formatterParams = {\n            url: 'test-url',\n          };\n          col.cellClick = (e: Event, cell: unknown) => {\n            void cell;\n            e.preventDefault();\n            e.stopPropagation();\n          };\n        }\n        if (c.tooltip) {\n          col.tooltip = c.tooltip;\n        }\n        if (c.formatter) {\n          col.formatter = c.formatter;\n        }\n        if (c.hozAlign) {\n          col.hozAlign = c.hozAlign;\n        }\n        if (c.headerHozAlign) {\n          col.headerHozAlign = c.headerHozAlign;\n        }\n        if (c.widthGrow) {\n          col.widthGrow = c.widthGrow;\n        }\n        if (c.widthShrink) {\n          col.widthShrink = c.widthShrink;\n        }\n        if (c.width !== undefined) {\n          col.width = c.width;\n        }\n        // console.log('col:', col);\n        return col;\n      }),\n      layout: this.layout || 'fitColumns',\n    };\n    if (this.height) {\n      this.tabulatorOptions = {\n        ...this.tabulatorOptions,\n        height: this.height,\n      };\n    }\n    if (this.maxHeight) {\n      this.tabulatorOptions = {\n        ...this.tabulatorOptions,\n        maxHeight: this.maxHeight,\n      };\n    }\n    if (this.groupBy) {\n      this.tabulatorOptions = {\n        ...this.tabulatorOptions,\n        groupBy: this.groupBy,\n        groupHeader: (value: unknown, count: number) => {\n          // value - the value all members of this group share\n          // count - the number of rows in this group\n          // data - an array of all the row data objects in this group\n          // group - the group component for the group\n          // console.log('groupHeader', value);\n          return `${\n            this.groupBy\n          }: ${value} <span class=\"ion-margin-start\">(${count} ${\n            count === 1 ? 'record' : 'records'\n          })</span>`;\n        },\n      };\n    }\n  }\n}\n","import { ColumnDefinition, Options } from 'tabulator-tables';\n\nexport type TabulatorColumn = ColumnDefinition;\n\n// export interface TabulatorColumn {\n// \tfield: string;\n// \ttitle?: string;\n// \tformatter?: 'link' | 'progress' | 'html' | 'text' | 'number' | 'money' | 'image' | 'tickCross';\n// \tformatterParams?: unknown;\n// \tcellClick?: (e: Event, cell: unknown) => void;\n// \theaderTooltip?: () => string;\n// \ttooltip?: (cell: unknown) => string;\n// \thozAlign?: 'left' | 'right';\n// \theaderHozAlign?: 'left' | 'right';\n// \twidthShrink?: number;\n// \twidthGrow?: number;\n// \twidth?: number | string;\n// }\n\nexport type TabulatorOptions = Options;\n// export interface TabulatorOptions {\n// \treadonly tooltipsHeader?: boolean;\n// \treadonly tooltipGenerationMode?: 'hover' | 'mouseover';\n// \treadonly reactiveData?: boolean;\n// \treadonly selectable?: boolean | number | 'highlight';\n// \treadonly data?: unknown[];\n// \treadonly layout?: 'fitData' | 'fitColumns';\n// \treadonly columns?: TabulatorColumn[];\n// \treadonly height?: string | number;\n// \treadonly maxHeight?: string | number;\n// \treadonly groupBy?: string;\n// \treadonly groupHeader?: (value: unknown, count: number) => string;\n// \treadonly rowClick?: (event: Event, row: unknown) => void;\n// \treadonly rowSelect?: (row: unknown) => void;\n// \treadonly rowDeselect?: (row: unknown) => void;\n// \treadonly rowContextMenu?: IRowMenu[];\n// }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;MAuDa,oBAAoB,CAAA;AAnBjC,IAAA,WAAA,GAAA;QAwBS,IAAA,CAAA,GAAG,GAA4B,KAAK;AAC5C,IAAA;8GANY,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAApB,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,4BAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECvDjC,qsDAgEA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDxBI,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,aAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,OAAA,EAAA,MAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACZ,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACX,aAAa,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACb,YAAY,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACZ,eAAe,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACf,UAAU,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,MAAA,EAAA,YAAA,EAAA,eAAA,EAAA,cAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACV,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,UAAA,EAAA,QAAA,EAAA,MAAA,EAAA,MAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAChB,QAAQ,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACR,OAAO,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACP,OAAO,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,YAAA,EAAA,UAAA,EAAA,UAAA,EAAA,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACP,QAAQ,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,gBAAA,EAAA,cAAA,EAAA,aAAA,EAAA,WAAA,EAAA,YAAA,EAAA,aAAA,EAAA,OAAA,EAAA,SAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,cAAA,EAAA,WAAA,EAAA,MAAA,EAAA,YAAA,EAAA,WAAA,EAAA,OAAA,EAAA,gBAAA,EAAA,KAAA,EAAA,WAAA,EAAA,KAAA,EAAA,WAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,SAAA,EAAA,aAAA,EAAA,UAAA,EAAA,UAAA,EAAA,OAAA,EAAA,MAAA,EAAA,YAAA,EAAA,MAAA,EAAA,MAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACR,QAAQ,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACR,OAAO,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAGE,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAnBhC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,4BAA4B,EAAA,OAAA,EAE7B;wBACP,YAAY;wBACZ,WAAW;wBACX,aAAa;wBACb,YAAY;wBACZ,eAAe;wBACf,UAAU;wBACV,gBAAgB;wBAChB,QAAQ;wBACR,OAAO;wBACP,OAAO;wBACP,QAAQ;wBACR,QAAQ;wBACR,OAAO;AACR,qBAAA,EAAA,QAAA,EAAA,qsDAAA,EAAA;;sBAGA;;sBACA;;sBACA;;;AEhCH,MAAM,YAAa,SAAQ,MAAM,CAAA;aACR,IAAA,CAAA,UAAU,GAAG,QAAQ,CAAC;IAEpC,UAAU,GAAA;QACjB;IACF;;AAGF,SAAS,CAAC,cAAc,CAAC;IACvB,iBAAiB;IACjB,eAAe;IACf,YAAY;IACZ,UAAU;AACX,CAAA,CAAC;AAGF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;;;AAGG;MASU,iBAAiB,CAAA;AAR9B,IAAA,WAAA,GAAA;AASmB,QAAA,IAAA,CAAA,WAAW,GAAG,MAAM,CAAe,WAAW,CAAC;QAEvD,IAAA,CAAA,MAAM,GAA8B,YAAY;QAChD,IAAA,CAAA,IAAI,GAAe,EAAE;QACrB,IAAA,CAAA,OAAO,GAAmB,EAAE;AASlB,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,YAAY,EAG7C;AAEe,QAAA,IAAA,CAAA,aAAa,GAAG,IAAI,YAAY,EAG/C;AAmML,IAAA;AAzLC,IAAA,WAAW,CAAC,OAAsB,EAAA;AAChC,QAAA,IAAI;AACF,YAAA,IACE,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO;iBAC5C,OAAO,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC;iBACnC,OAAO,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,EACtC;gBACA,IAAI,CAAC,SAAS,EAAE;YAClB;QACF;QAAE,OAAO,EAAE,EAAE;YACX,IAAI,CAAC,WAAW,CAAC,QAAQ,CACvB,EAAE,EACF,oDAAoD,CACrD;QACH;IACF;;;;;;;;;;;;IAcA,eAAe,GAAA;AACb,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAClB,YAAA,IAAI;AACF,gBAAA,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE;YACzB;YAAE,OAAO,CAAC,EAAE;gBACV,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,EAAE,4BAA4B,EAAE;AACzD,oBAAA,IAAI,EAAE,KAAK;AACX,oBAAA,MAAM,EAAE,KAAK;AACd,iBAAA,CAAC;YACJ;QACF;IACF;IAEQ,SAAS,GAAA;QACf,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;AAC/B,YAAA,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,UAAU,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC;YACzE;QACF;AACA,QAAA,IAAI;AACF,YAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;gBACtB,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,KAAK,CAAC,oBAAoB,CAAC,CAAC;gBAC1D;YACF;AACA,YAAA,IAAI,IAAI,CAAC,gBAAgB,EAAE;AACzB,gBAAA,IAAI,CAAC,gBAAgB,GAAG,EAAE,GAAG,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE;AACrE,gBAAA,IAAI,CAAC;AACH,sBAAE,OAAO,CAAC,IAAI,CAAC,IAAI;qBAClB,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,oBAAoB,CAAC,CAAC;YAClE;iBAAO;gBACL,IAAI,CAAC,mBAAmB,EAAE;YAC5B;;;QAGF;QAAE,OAAO,CAAC,EAAE;YACV,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,EAAE,qBAAqB,CAAC;QACrD;IACF;IAEQ,mBAAmB,GAAA;QACzB,IAAI,CAAC,mBAAmB,EAAE;AAC1B,QAAA,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACnB,IAAI,CAAC,gBAAgB,GAAG;gBACtB,GAAG,IAAI,CAAC,gBAAgB;;;;;;;;;;aAUzB;AACD,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI,SAAS,CAC5B,IAAI,CAAC,YAAY,EAAE,aAAa,EAChC,IAAI,CAAC,gBAAgB,CACtB;AACD,YAAA,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC,KAAY,EAAE,GAAY,KAAI;AAC3D,gBAAA,IAAI,CAAC,UAAU,GAAG,KAAK;AACvB,gBAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,oBAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC;gBAC3B;AACF,YAAA,CAAC,CAAC;AACF,YAAA,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,aAAa,EAAE,CAAC,GAAY,KAC5C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CACvD;AACD,YAAA,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,eAAe,EAAE,CAAC,GAAY,KAC9C,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CACzD;QACH;IACF;IAEQ,mBAAmB,GAAA;QACzB,IAAI,CAAC,gBAAgB,GAAG;;;YAGtB,cAAc,EAAE,IAAI,CAAC,cAAc;YACnC,cAAc,EAAE,IAAI,CAAC,UAAU;YAC/B,IAAI,EAAE,IAAI,CAAC,IAAI;;YAEf,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,KAAI;AAC/B,gBAAA,MAAM,GAAG,GAAoB;;oBAE3B,KAAK,EAAE,CAAC,CAAC,KAAK;oBACd,KAAK,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK;;;iBAGrC;AACD,gBAAA,IAAI,CAAC,CAAC,OAAO,KAAK,IAAI,IAAI,CAAC,CAAC,OAAO,EAAE,QAAQ,CAAC,IAAI,CAAC,EAAE;AACnD,oBAAA,GAAG,CAAC,SAAS,GAAG,MAAM;oBACtB,GAAG,CAAC,eAAe,GAAG;AACpB,wBAAA,GAAG,EAAE,UAAU;qBAChB;oBACD,GAAG,CAAC,SAAS,GAAG,CAAC,CAAQ,EAAE,IAAa,KAAI;AAC1C,wBAAA,KAAK,IAAI;wBACT,CAAC,CAAC,cAAc,EAAE;wBAClB,CAAC,CAAC,eAAe,EAAE;AACrB,oBAAA,CAAC;gBACH;AACA,gBAAA,IAAI,CAAC,CAAC,OAAO,EAAE;AACb,oBAAA,GAAG,CAAC,OAAO,GAAG,CAAC,CAAC,OAAO;gBACzB;AACA,gBAAA,IAAI,CAAC,CAAC,SAAS,EAAE;AACf,oBAAA,GAAG,CAAC,SAAS,GAAG,CAAC,CAAC,SAAS;gBAC7B;AACA,gBAAA,IAAI,CAAC,CAAC,QAAQ,EAAE;AACd,oBAAA,GAAG,CAAC,QAAQ,GAAG,CAAC,CAAC,QAAQ;gBAC3B;AACA,gBAAA,IAAI,CAAC,CAAC,cAAc,EAAE;AACpB,oBAAA,GAAG,CAAC,cAAc,GAAG,CAAC,CAAC,cAAc;gBACvC;AACA,gBAAA,IAAI,CAAC,CAAC,SAAS,EAAE;AACf,oBAAA,GAAG,CAAC,SAAS,GAAG,CAAC,CAAC,SAAS;gBAC7B;AACA,gBAAA,IAAI,CAAC,CAAC,WAAW,EAAE;AACjB,oBAAA,GAAG,CAAC,WAAW,GAAG,CAAC,CAAC,WAAW;gBACjC;AACA,gBAAA,IAAI,CAAC,CAAC,KAAK,KAAK,SAAS,EAAE;AACzB,oBAAA,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK;gBACrB;;AAEA,gBAAA,OAAO,GAAG;AACZ,YAAA,CAAC,CAAC;AACF,YAAA,MAAM,EAAE,IAAI,CAAC,MAAM,IAAI,YAAY;SACpC;AACD,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,gBAAgB,GAAG;gBACtB,GAAG,IAAI,CAAC,gBAAgB;gBACxB,MAAM,EAAE,IAAI,CAAC,MAAM;aACpB;QACH;AACA,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,CAAC,gBAAgB,GAAG;gBACtB,GAAG,IAAI,CAAC,gBAAgB;gBACxB,SAAS,EAAE,IAAI,CAAC,SAAS;aAC1B;QACH;AACA,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,gBAAgB,GAAG;gBACtB,GAAG,IAAI,CAAC,gBAAgB;gBACxB,OAAO,EAAE,IAAI,CAAC,OAAO;AACrB,gBAAA,WAAW,EAAE,CAAC,KAAc,EAAE,KAAa,KAAI;;;;;;oBAM7C,OAAO,CAAA,EACL,IAAI,CAAC,OACP,KAAK,KAAK,CAAA,iCAAA,EAAoC,KAAK,CAAA,CAAA,EACjD,KAAK,KAAK,CAAC,GAAG,QAAQ,GAAG,SAC3B,CAAA,QAAA,CAAU;gBACZ,CAAC;aACF;QACH;IACF;8GAxNW,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,OAAA,EAAA,SAAA,EAAA,OAAA,EAAA,SAAA,EAAA,MAAA,EAAA,QAAA,EAAA,SAAA,EAAA,WAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,aAAA,EAAA,eAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,cAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,cAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,CAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EANlB;;;AAGT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,CAAA;;2FAGU,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAR7B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,gBAAgB;AAC1B,oBAAA,QAAQ,EAAE;;;AAGT,EAAA,CAAA;AACD,oBAAA,OAAO,EAAE,EAAE;AACZ,iBAAA;;sBAIE;;sBACA;;sBACA;;sBACA;;sBACA;;sBACA;;sBACA;;sBACA,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,cAAc,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;;sBAE1C;;sBAEA;;sBAKA;;sBAQA;;;ACtFH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;ACpCA;;AAEG;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sneat/datagrid",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "publishConfig": {
     "access": "public"
   },
@@ -10,5 +10,17 @@
   },
   "dependencies": {
     "tslib": "2.8.1"
-  }
+  },
+  "module": "fesm2022/sneat-datagrid.mjs",
+  "typings": "types/sneat-datagrid.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/sneat-datagrid.d.ts",
+      "default": "./fesm2022/sneat-datagrid.mjs"
+    }
+  },
+  "sideEffects": false
 }

package/types/sneat-datagrid.d.ts

@@ -0,0 +1,70 @@
+import * as i0 from '@angular/core';
+import { AfterViewInit, OnChanges, ElementRef, EventEmitter, SimpleChanges } from '@angular/core';
+import { RowContextMenuSignature, ColumnDefinition, Options } from 'tabulator-tables';
+import { IGridColumn } from '@sneat/grid';
+
+interface IRecordsetColumn {
+    name: string;
+    title?: string;
+    dbType: string;
+}
+interface ITableRef {
+    name: string;
+    schema: string;
+    catalog?: string;
+}
+interface IForeignKey {
+    name: string;
+    columns: string[];
+    refTable: ITableRef;
+}
+declare class CellPopoverComponent {
+    column?: IRecordsetColumn;
+    value: unknown;
+    fk?: IForeignKey;
+    tab: 'rec' | 'cols' | 'refs';
+    static ɵfac: i0.ɵɵFactoryDeclaration<CellPopoverComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CellPopoverComponent, "sneat-datatug-cell-popover", never, { "column": { "alias": "column"; "required": false; }; "value": { "alias": "value"; "required": false; }; "fk": { "alias": "fk"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * This is a wrapper class for the tabulator JS library.
+ * For more info see http://tabulator.info
+ */
+declare class DataGridComponent implements AfterViewInit, OnChanges {
+    private readonly errorLogger;
+    layout?: 'fitData' | 'fitColumns';
+    data?: unknown[];
+    columns?: IGridColumn[];
+    groupBy?: string;
+    height?: string;
+    maxHeight?: string | number;
+    rowContextMenu?: RowContextMenuSignature;
+    tabulatorDiv?: ElementRef;
+    rowClick?: (event: Event, row: unknown) => void;
+    readonly rowSelected: EventEmitter<{
+        row: unknown;
+        event?: Event;
+    }>;
+    readonly rowDeselected: EventEmitter<{
+        row: unknown;
+        event?: Event;
+    }>;
+    private tabulator?;
+    selectable?: boolean | number | 'highlight';
+    private tabulatorOptions?;
+    private clickEvent?;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngAfterViewInit(): void;
+    private drawTable;
+    private createTabulatorGrid;
+    private setTabulatorOptions;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DataGridComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DataGridComponent, "sneat-datagrid", never, { "layout": { "alias": "layout"; "required": false; }; "data": { "alias": "data"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "groupBy": { "alias": "groupBy"; "required": false; }; "height": { "alias": "height"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "rowContextMenu": { "alias": "rowContextMenu"; "required": false; }; "rowClick": { "alias": "rowClick"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; }, { "rowSelected": "rowSelected"; "rowDeselected": "rowDeselected"; }, never, never, true, never>;
+}
+
+type TabulatorColumn = ColumnDefinition;
+type TabulatorOptions = Options;
+
+export { CellPopoverComponent, DataGridComponent };
+export type { TabulatorColumn, TabulatorOptions };

package/eslint.config.js

@@ -1,7 +0,0 @@
-const baseConfig = require('../../eslint.config.js');
-const { sneatLibConfig } = require('../../eslint.lib.config.js');
-
-module.exports = [
-  ...baseConfig,
-  ...sneatLibConfig(__dirname),
-];

package/ng-package.json

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

package/project.json

@@ -1,38 +0,0 @@
-{
-  "name": "datagrid",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "projectType": "library",
-  "sourceRoot": "libs/datagrid/src",
-  "prefix": "sneat",
-  "targets": {
-    "build": {
-      "executor": "@nx/angular:package",
-      "outputs": [
-        "{workspaceRoot}/dist/libs/datagrid"
-      ],
-      "options": {
-        "project": "libs/datagrid/ng-package.json",
-        "tsConfig": "libs/datagrid/tsconfig.lib.json"
-      },
-      "configurations": {
-        "production": {
-          "tsConfig": "libs/datagrid/tsconfig.lib.prod.json"
-        },
-        "development": {}
-      },
-      "defaultConfiguration": "production"
-    },
-    "test": {
-      "executor": "@nx/vitest:test",
-      "outputs": [
-        "{workspaceRoot}/coverage/libs/datagrid"
-      ],
-      "options": {
-        "tsConfig": "libs/datagrid/tsconfig.spec.json"
-      }
-    },
-    "lint": {
-      "executor": "@nx/eslint:lint"
-    }
-  }
-}

package/src/index.ts

@@ -1,2 +0,0 @@
-export * from './lib/components';
-export * from './lib/tabulator';

package/src/lib/components/cell-popover/cell-popover.component.html

@@ -1,64 +0,0 @@
-<ion-card-header>
-  <ion-card-title>Field: {{ column?.name }}</ion-card-title>
-  <ion-card-subtitle>Value: {{ value }}</ion-card-subtitle>
-</ion-card-header>
-<h3 class="ion-margin">
-  References:
-  @if (fk?.refTable) {
-    <a routerLink="{{ fk?.refTable?.schema }}.{{ fk?.refTable?.name }}">
-      {{ fk?.refTable?.schema }}.{{ fk?.refTable?.name }}
-    </a>
-  }
-</h3>
-<ion-segment [(ngModel)]="tab">
-  <ion-segment-button value="rec">
-    <ion-label>Record</ion-label>
-  </ion-segment-button>
-  <ion-segment-button value="cols">
-    <ion-label>Columns</ion-label>
-  </ion-segment-button>
-  <ion-segment-button value="refs">
-    <ion-label>References</ion-label>
-  </ion-segment-button>
-</ion-segment>
-
-@switch (tab) {
-  @case ("rec") {
-    <ion-list>
-      <ion-item>
-        <ion-label>Id</ion-label>
-        <ion-input
-          type="number"
-          style="text-align: right"
-          value="1"
-          readonly="true"
-        />
-      </ion-item>
-      <ion-item>
-        <ion-label>Code</ion-label>
-        <ion-input
-          type="text"
-          style="text-align: right"
-          value="Something"
-          readonly="true"
-        />
-      </ion-item>
-    </ion-list>
-  }
-  @case ("cols") {
-    <ion-list>
-      <ion-item>
-        <ion-label>Id</ion-label>
-        <ion-badge slot="end" color="light">
-          <ion-text color="medium">INT</ion-text>
-        </ion-badge>
-      </ion-item>
-      <ion-item>
-        <ion-label>Code</ion-label>
-        <ion-badge slot="end" color="light">
-          <ion-text color="medium">NVARCHAR</ion-text>
-        </ion-badge>
-      </ion-item>
-    </ion-list>
-  }
-}