@cocoar/data-grid 0.1.0 → 0.2.0

package/fesm2022/cocoar-data-grid.mjs

@@ -1,7 +1,9 @@
-import { Subject, takeUntil } from 'rxjs';
-import { themeQuartz } from 'ag-grid-community';
+import { Subject, takeUntil, Observable } from 'rxjs';
 import * as i0 from '@angular/core';
-import { inject, Input, Directive } from '@angular/core';
+import { inject, ChangeDetectionStrategy, Component, HostListener, Input, Directive } from '@angular/core';
+import { CoarTagComponent, CoarIconComponent } from '@cocoar/ui/components';
+import { COAR_I18N_PROVIDER, CoarDatePipe } from '@cocoar/localization';
+import { themeQuartz } from 'ag-grid-community';
 import { AgGridAngular } from 'ag-grid-angular';
 
 /**
@@ -192,6 +194,44 @@ class CoarGridColumnBuilder {
         return this;
     }
     // ============================================================
+    // Quick Filter
+    // ============================================================
+    /** Set quick filter text extractor or disable quick filtering for this column */
+    quickFilter(fn) {
+        if (typeof fn === 'boolean') {
+            this.#colDef.getQuickFilterText = fn ? undefined : () => '';
+        }
+        else {
+            this.#colDef.getQuickFilterText = fn;
+        }
+        return this;
+    }
+    // ============================================================
+    // Sorting
+    // ============================================================
+    /** Set custom sort comparator */
+    comparator(fn) {
+        this.#colDef.comparator = fn;
+        return this;
+    }
+    // ============================================================
+    // Row Drag
+    // ============================================================
+    /** Enable row drag on this column */
+    rowDrag(value = true) {
+        this.#colDef.rowDrag = value;
+        return this;
+    }
+    // ============================================================
+    // Cell Renderer (config pattern)
+    // ============================================================
+    /** Set cell renderer with config object (params wrapped in `config` key) */
+    cellRendererConfig(component, config) {
+        this.#colDef.cellRenderer = component;
+        this.#colDef.cellRendererParams = { ...this.#colDef.cellRendererParams, config };
+        return this;
+    }
+    // ============================================================
     // Advanced Options
     // ============================================================
     /** Set any AG Grid ColDef option directly */
@@ -213,6 +253,158 @@ class CoarGridColumnBuilder {
     }
 }
 
+class CoarTagCellRendererComponent {
+    tags = [];
+    size = 's';
+    config = {};
+    i18n = inject(COAR_I18N_PROVIDER, { optional: true });
+    agInit(params) {
+        this.config = params.config ?? {};
+        this.size = this.config.size ?? 's';
+        this.updateTags(params.value);
+    }
+    refresh(params) {
+        this.updateTags(params.value);
+        return true;
+    }
+    updateTags(value) {
+        const rawLabels = this.extractLabels(value);
+        this.tags = rawLabels.map((label) => ({
+            label: this.translateLabel(label),
+            variant: this.resolveVariant(label),
+        }));
+    }
+    extractLabels(value) {
+        if (value == null)
+            return [];
+        if (Array.isArray(value)) {
+            return value.map((item) => this.labelFromItem(item));
+        }
+        if (typeof value === 'string') {
+            const separator = this.config.separator ?? ',';
+            return value
+                .split(separator)
+                .map((s) => s.trim())
+                .filter(Boolean);
+        }
+        return [String(value)];
+    }
+    labelFromItem(item) {
+        if (item != null && typeof item === 'object' && this.config.labelProperty) {
+            return String(item[this.config.labelProperty] ?? '');
+        }
+        return String(item ?? '');
+    }
+    translateLabel(label) {
+        if (this.config.i18nPrefix && this.i18n) {
+            return this.i18n.t(this.config.i18nPrefix + label);
+        }
+        return label;
+    }
+    resolveVariant(label) {
+        return this.config.variantMap?.[label] ?? this.config.variant ?? 'neutral';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarTagCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarTagCellRendererComponent, isStandalone: true, selector: "coar-tag-cell-renderer", ngImport: i0, template: `
+    @for (tag of tags; track tag.label) {
+      <coar-tag [variant]="tag.variant" [size]="size">{{ tag.label }}</coar-tag>
+    }
+  `, isInline: true, styles: [":host{display:flex;align-items:center;gap:var(--coar-spacing-xs, 4px);flex-wrap:wrap;height:100%}\n"], dependencies: [{ kind: "component", type: CoarTagComponent, selector: "coar-tag", inputs: ["elevated", "borderless", "variant", "size", "closable"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarTagCellRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'coar-tag-cell-renderer', standalone: true, imports: [CoarTagComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @for (tag of tags; track tag.label) {
+      <coar-tag [variant]="tag.variant" [size]="size">{{ tag.label }}</coar-tag>
+    }
+  `, styles: [":host{display:flex;align-items:center;gap:var(--coar-spacing-xs, 4px);flex-wrap:wrap;height:100%}\n"] }]
+        }] });
+
+class CoarIconCellRendererComponent {
+    iconName = '';
+    size = 's';
+    source;
+    color = 'inherit';
+    onClick;
+    params;
+    agInit(params) {
+        this.params = params;
+        const config = params.config ?? {};
+        this.size = config.size ?? 's';
+        this.source = config.source;
+        this.color = config.color ?? 'inherit';
+        this.onClick = config.onClick;
+        this.iconName = params.value ?? '';
+    }
+    refresh(params) {
+        this.params = params;
+        this.iconName = params.value ?? '';
+        return true;
+    }
+    handleClick() {
+        this.onClick?.(this.params);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarIconCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarIconCellRendererComponent, isStandalone: true, selector: "coar-icon-cell-renderer", host: { listeners: { "click": "handleClick()" }, properties: { "class.clickable": "!!onClick" } }, ngImport: i0, template: `
+    @if (iconName) {
+      <coar-icon
+        [name]="iconName"
+        [size]="size"
+        [source]="source"
+        [color]="color"
+      />
+    }
+  `, isInline: true, styles: [":host{display:flex;align-items:center;justify-content:center;height:100%}:host(.clickable){cursor:pointer}\n"], dependencies: [{ kind: "component", type: CoarIconComponent, selector: "coar-icon", inputs: ["name", "source", "size", "rotate", "rotateTransition", "spin", "color", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarIconCellRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'coar-icon-cell-renderer', standalone: true, imports: [CoarIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (iconName) {
+      <coar-icon
+        [name]="iconName"
+        [size]="size"
+        [source]="source"
+        [color]="color"
+      />
+    }
+  `, host: {
+                        '[class.clickable]': '!!onClick',
+                        '(click)': 'handleClick()',
+                    }, styles: [":host{display:flex;align-items:center;justify-content:center;height:100%}:host(.clickable){cursor:pointer}\n"] }]
+        }] });
+
+class CoarDateCellRendererComponent {
+    dateValue = null;
+    agInit(params) {
+        this.updateValue(params.value);
+    }
+    refresh(params) {
+        this.updateValue(params.value);
+        return true;
+    }
+    updateValue(value) {
+        if (!value) {
+            this.dateValue = null;
+            return;
+        }
+        if (value instanceof Date) {
+            this.dateValue = value;
+        }
+        else if (typeof value === 'string') {
+            this.dateValue = value;
+        }
+        else {
+            this.dateValue = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarDateCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: CoarDateCellRendererComponent, isStandalone: true, selector: "coar-date-cell-renderer", ngImport: i0, template: `{{ dateValue | coarDate }}`, isInline: true, styles: [":host{display:flex;align-items:center;height:100%}\n"], dependencies: [{ kind: "pipe", type: CoarDatePipe, name: "coarDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarDateCellRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'coar-date-cell-renderer', standalone: true, imports: [CoarDatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: `{{ dateValue | coarDate }}`, styles: [":host{display:flex;align-items:center;height:100%}\n"] }]
+        }] });
+
 /**
  * Factory for creating typed column builders.
  * Provides convenient methods for common column types.
@@ -224,6 +416,8 @@ class CoarGridColumnBuilder {
  *   .columns([
  *     col => col.field('name').header('Name').flex(1),
  *     col => col.field('createdAt').header('Created').width(150),
+ *     col => col.tag('status', { variantMap: { active: 'success' } }),
+ *     col => col.icon('type', { size: 's' }),
  *   ])
  * ```
  */
@@ -235,11 +429,12 @@ class CoarGridColumnFactory {
         return new CoarGridColumnBuilder(fieldName);
     }
     /**
-     * Create a date column with standard formatting
+     * Create a date column with standard or custom formatting.
+     *
+     * @param format - Preset name ('short' | 'long' | 'datetime'), Intl options object, or custom formatter function
      */
     date(fieldName, format = 'short') {
         const builder = new CoarGridColumnBuilder(fieldName);
-        // Add basic date formatting
         builder.valueFormatter((params) => {
             const value = params.value;
             if (!value)
@@ -247,7 +442,15 @@ class CoarGridColumnFactory {
             const date = value instanceof Date ? value : new Date(value);
             if (isNaN(date.getTime()))
                 return String(value);
-            // Use Intl for locale-aware formatting
+            // Custom formatter function
+            if (typeof format === 'function') {
+                return format(date);
+            }
+            // Intl options object
+            if (typeof format === 'object') {
+                return new Intl.DateTimeFormat(undefined, format).format(date);
+            }
+            // Preset string
             switch (format) {
                 case 'short':
                     return date.toLocaleDateString();
@@ -314,6 +517,56 @@ class CoarGridColumnFactory {
         });
         return builder;
     }
+    /**
+     * Create a tag column that renders values as `<coar-tag>` elements.
+     *
+     * Supports string (split by separator), array, and object array values.
+     *
+     * @param config - Tag rendering configuration (variantMap, size, i18nPrefix, etc.)
+     */
+    tag(fieldName, config) {
+        const builder = new CoarGridColumnBuilder(fieldName);
+        builder.cellRendererConfig(CoarTagCellRendererComponent, config ?? {});
+        builder.sortable();
+        // Alphabetical comparator on joined tag labels
+        const separator = config?.separator ?? ',';
+        builder.comparator((valueA, valueB) => {
+            const normalize = (v) => {
+                if (Array.isArray(v))
+                    return v.map(String).sort().join(',');
+                if (typeof v === 'string')
+                    return v.split(separator).map((s) => s.trim()).sort().join(',');
+                return String(v ?? '');
+            };
+            return normalize(valueA).localeCompare(normalize(valueB));
+        });
+        return builder;
+    }
+    /**
+     * Create an icon column that renders values as `<coar-icon>` elements.
+     *
+     * The cell value is used as the icon name.
+     *
+     * @param config - Icon rendering configuration (size, source, color, onClick)
+     */
+    icon(fieldName, config) {
+        const builder = new CoarGridColumnBuilder(fieldName);
+        builder.cellRendererConfig(CoarIconCellRendererComponent, config ?? {});
+        return builder;
+    }
+    /**
+     * Create a date column with locale-aware rendering via `CoarDatePipe`.
+     *
+     * Unlike `date()`, this uses a cell renderer component for full locale integration.
+     *
+     * @param config - Date rendering configuration (showSeconds, customFormat)
+     */
+    localDate(fieldName, config) {
+        const builder = new CoarGridColumnBuilder(fieldName);
+        builder.cellRendererConfig(CoarDateCellRendererComponent, config ?? {});
+        builder.sortable();
+        return builder;
+    }
 }
 
 /**
@@ -402,6 +655,14 @@ class CoarGridBuilder {
     #columnDefs = [];
     #rowData = null;
     #rowData$;
+    // Deferred state (applied after grid ready)
+    #columnState;
+    #openRows$;
+    #sortFilterTriggers = [];
+    #externalFilterTriggers = [];
+    // Viewport event handlers (wired by directive)
+    #viewportClickHandler;
+    #viewportContextMenuHandler;
     /** Observable that emits when grid is ready */
     gridReady$ = this.#gridReady$.asObservable();
     constructor() {
@@ -421,7 +682,6 @@ class CoarGridBuilder {
     #createDefaultOptions() {
         return {
             theme: cocoarTheme,
-            suppressPropertyNamesCheck: true,
             animateRows: true,
             rowSelection: undefined,
         };
@@ -429,6 +689,15 @@ class CoarGridBuilder {
     #mergeOptions(options) {
         this.#gridOptions = { ...this.#gridOptions, ...options };
     }
+    #composeHandler(existing, handler) {
+        if (existing) {
+            return (event) => {
+                existing(event);
+                handler(event);
+            };
+        }
+        return handler;
+    }
     // ============================================================
     // Column Configuration
     // ============================================================
@@ -479,7 +748,8 @@ class CoarGridBuilder {
     // ============================================================
     /** Enable row selection */
     rowSelection(mode) {
-        this.#mergeOptions({ rowSelection: mode });
+        const mapped = mode === 'single' ? 'singleRow' : 'multiRow';
+        this.#mergeOptions({ rowSelection: { mode: mapped } });
         return this;
     }
     // ============================================================
@@ -496,15 +766,71 @@ class CoarGridBuilder {
         return this;
     }
     // ============================================================
+    // Sorting
+    // ============================================================
+    /** Set initial sort column and direction */
+    defaultSort(field, direction) {
+        this.#gridOptions.initialState = {
+            ...this.#gridOptions.initialState,
+            sort: {
+                sortModel: [{ colId: field, sort: direction }],
+            },
+        };
+        return this;
+    }
+    /** Set custom post-sort function to reorder rows after AG Grid sorts */
+    sortFunction(fn) {
+        this.#mergeOptions({ postSortRows: fn });
+        return this;
+    }
+    /** Re-trigger sort and filter when the given observable emits */
+    updateSortAndFilterWhen(trigger) {
+        this.#sortFilterTriggers.push(trigger);
+        return this;
+    }
+    // ============================================================
+    // Column State
+    // ============================================================
+    /** Merge column state to restore column widths, order, visibility */
+    columnState(state) {
+        this.#columnState = state;
+        return this;
+    }
+    // ============================================================
+    // Tree / Group Data
+    // ============================================================
+    /** Set which parent rows are expanded (observable of row IDs) */
+    openRows(openRows$) {
+        this.#openRows$ = openRows$;
+        return this;
+    }
+    // ============================================================
+    // Editing
+    // ============================================================
+    /** Enable full-row editing mode */
+    fullRowEdit(value = true) {
+        this.#mergeOptions({ editType: value ? 'fullRow' : undefined });
+        return this;
+    }
+    /** Stop cell editing when cells lose focus */
+    stopEditingWhenCellsLoseFocus(value = true) {
+        this.#mergeOptions({ stopEditingWhenCellsLoseFocus: value });
+        return this;
+    }
+    // ============================================================
+    // Resize
+    // ============================================================
+    /** Enable shift-key column resize mode */
+    shiftResizeMode(value = true) {
+        this.#mergeOptions({ colResizeDefault: value ? 'shift' : undefined });
+        return this;
+    }
+    // ============================================================
     // Event Handlers
     // ============================================================
     /** Handle grid ready event */
     onGridReady(handler) {
-        const existing = this.#gridOptions.onGridReady;
-        this.#gridOptions.onGridReady = (event) => {
-            existing?.(event);
-            handler(event);
-        };
+        this.#gridOptions.onGridReady = this.#composeHandler(this.#gridOptions.onGridReady, handler);
         return this;
     }
     /** Handle row click */
@@ -527,6 +853,39 @@ class CoarGridBuilder {
         this.#mergeOptions({ onCellDoubleClicked: handler });
         return this;
     }
+    /** Handle grid size changed event */
+    onGridSizeChanged(handler) {
+        this.#gridOptions.onGridSizeChanged = this.#composeHandler(this.#gridOptions.onGridSizeChanged, handler);
+        return this;
+    }
+    /** Handle cell context menu (right-click). Ctrl+click is passed through to the browser. */
+    onCellContextMenu(handler) {
+        this.#mergeOptions({
+            onCellContextMenu: (event) => {
+                const mouseEvent = event.event;
+                if (mouseEvent?.ctrlKey)
+                    return;
+                handler(event);
+            },
+        });
+        return this;
+    }
+    /**
+     * Handle click on the grid viewport (empty area outside cells).
+     * Wired by the directive via HostListener.
+     */
+    onViewportClick(handler) {
+        this.#viewportClickHandler = handler;
+        return this;
+    }
+    /**
+     * Handle context menu on the grid viewport (empty area outside cells).
+     * Wired by the directive via HostListener.
+     */
+    onViewportContextMenu(handler) {
+        this.#viewportContextMenuHandler = handler;
+        return this;
+    }
     // ============================================================
     // External Filtering
     // ============================================================
@@ -538,6 +897,11 @@ class CoarGridBuilder {
         });
         return this;
     }
+    /** Re-trigger external filter when the given observable emits */
+    updateExternalFilterWhen(trigger) {
+        this.#externalFilterTriggers.push(trigger);
+        return this;
+    }
     // ============================================================
     // Grid Options
     // ============================================================
@@ -585,6 +949,47 @@ class CoarGridBuilder {
                     }
                 });
             }
+            // Apply column state
+            if (this.#columnState) {
+                if (this.#columnState instanceof Observable) {
+                    this.#columnState
+                        .pipe(takeUntil(this.#destroy$))
+                        .subscribe((state) => {
+                        if (state) {
+                            event.api.applyColumnState({ state, applyOrder: true });
+                        }
+                    });
+                }
+                else {
+                    event.api.applyColumnState({ state: this.#columnState, applyOrder: true });
+                }
+            }
+            // Subscribe to sort/filter triggers
+            for (const trigger of this.#sortFilterTriggers) {
+                trigger.pipe(takeUntil(this.#destroy$)).subscribe(() => {
+                    event.api.onSortChanged();
+                    event.api.onFilterChanged();
+                });
+            }
+            // Subscribe to external filter triggers
+            for (const trigger of this.#externalFilterTriggers) {
+                trigger.pipe(takeUntil(this.#destroy$)).subscribe(() => {
+                    event.api.onFilterChanged();
+                });
+            }
+            // Subscribe to open rows
+            if (this.#openRows$) {
+                this.#openRows$.pipe(takeUntil(this.#destroy$)).subscribe((openRowIds) => {
+                    event.api.forEachNode((node) => {
+                        if (node.group || node.master) {
+                            const shouldBeOpen = openRowIds.includes(node.key ?? node.id ?? '');
+                            if (node.expanded !== shouldBeOpen) {
+                                node.setExpanded(shouldBeOpen);
+                            }
+                        }
+                    });
+                });
+            }
         });
     }
     /** @internal Called by the directive on destroy */
@@ -593,6 +998,18 @@ class CoarGridBuilder {
         this.#destroy$.complete();
         this.#gridReady$.complete();
     }
+    /** @internal Get viewport click handler (for directive) */
+    _getViewportClickHandler() {
+        return this.#viewportClickHandler;
+    }
+    /** @internal Get viewport context menu handler (for directive) */
+    _getViewportContextMenuHandler() {
+        return this.#viewportContextMenuHandler;
+    }
+    /** @internal Check if a cell context menu handler is registered (for directive) */
+    _hasCellContextMenuHandler() {
+        return this.#gridOptions.onCellContextMenu != null;
+    }
     /** Get column definitions (for directive) */
     _getColumnDefs() {
         return this.#columnDefs;
@@ -607,6 +1024,11 @@ class CoarGridBuilder {
     }
 }
 
+const VIEWPORT_CLASSES = ['ag-body-viewport', 'ag-center-cols-viewport'];
+function isViewportTarget(event) {
+    const target = event.target;
+    return VIEWPORT_CLASSES.some((cls) => target.classList.contains(cls));
+}
 /**
  * Directive that binds a CoarGridBuilder to an AG Grid instance.
  *
@@ -649,8 +1071,32 @@ class CoarDataGridDirective {
     ngOnDestroy() {
         this.#gridBuilder?._destroy();
     }
+    onHostClick($event) {
+        if ($event.ctrlKey)
+            return;
+        const handler = this.#gridBuilder?._getViewportClickHandler();
+        if (handler && isViewportTarget($event)) {
+            $event.preventDefault();
+            handler($event, this.#agGrid.api);
+        }
+    }
+    onHostContextMenu($event) {
+        if ($event.ctrlKey)
+            return;
+        if (isViewportTarget($event)) {
+            const handler = this.#gridBuilder?._getViewportContextMenuHandler();
+            if (handler) {
+                $event.preventDefault();
+                handler($event, this.#agGrid.api);
+            }
+        }
+        else if (this.#gridBuilder?._hasCellContextMenuHandler()) {
+            // Suppress the browser context menu — AG Grid's onCellContextMenu handles it
+            $event.preventDefault();
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarDataGridDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: CoarDataGridDirective, isStandalone: true, selector: "ag-grid-angular[coarDataGrid]", inputs: { coarDataGrid: "coarDataGrid" }, host: { styleAttribute: "display: flex; flex-direction: column; flex-grow: 1;", classAttribute: "ag-theme-cocoar" }, exportAs: ["coarDataGrid"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: CoarDataGridDirective, isStandalone: true, selector: "ag-grid-angular[coarDataGrid]", inputs: { coarDataGrid: "coarDataGrid" }, host: { listeners: { "click": "onHostClick($event)", "contextmenu": "onHostContextMenu($event)" }, styleAttribute: "display: flex; flex-direction: column; flex-grow: 1;", classAttribute: "ag-theme-cocoar" }, exportAs: ["coarDataGrid"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarDataGridDirective, decorators: [{
             type: Directive,
@@ -665,6 +1111,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], propDecorators: { coarDataGrid: [{
                 type: Input
+            }], onHostClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], onHostContextMenu: [{
+                type: HostListener,
+                args: ['contextmenu', ['$event']]
             }] } });
 
 /**