@gravionlabs/helix-ag-grid 22.1.27 → 22.1.28

package/README.md

@@ -1,7 +1,9 @@
 # @gravionlabs/helix-ag-grid
 
-AG Grid helpers for Helix applications: locale-aware value formatters, robust
-number parsing for editable cells, and shared cell styles.
+AG Grid helpers for Helix applications: the Helix theme, locale-aware value formatters, robust
+number parsing for editable cells, and shared cell styles. Interactive tables (sorting, filtering,
+paging, selection, row actions) use AG Grid Community through this package; small static tables use
+`table[hx-table]` of `@gravionlabs/helix-ui`.
 
 ## Installation
 
@@ -11,13 +13,68 @@ npm install @gravionlabs/helix-ag-grid
 
 Peer dependencies: `@angular/core >=22`, `ag-grid-angular >=33`, `ag-grid-community >=33`.
 
-The package ships a prebuilt stylesheet; add it to your global styles:
+## Theme
+
+`helixGridTheme` is AG Grid's Quartz theme with its parameters pointed at the Helix design tokens. It needs no
+stylesheet:
+
+```ts
+import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
+import { helixGridTheme } from '@gravionlabs/helix-ag-grid';
+
+ModuleRegistry.registerModules([AllCommunityModule]);
+
+@Component({ template: `<ag-grid-angular [theme]="theme" [rowData]="rows" [columnDefs]="columns" />` })
+class Grid { theme = helixGridTheme; }
+```
+
+Every colour is a `var(--h-*)` reference (`--h-content-background`, `--h-text-color`, `--h-primary-color`, …), so the
+grid follows dark mode (`.app-dark`) and a primary colour that changes at runtime without any code. Refine it with
+`helixGridTheme.withParams({ rowHeight: 36 })`.
+
+**Why the Theming API and not CSS variables:** since AG Grid 33 the default theme is configured through the `theme`
+grid option; the `--ag-*` CSS custom properties only drive the legacy `ag-theme-*` classes (`theme="legacy"`). The
+Theming API takes `var()` references as parameter values, is typed, and needs no stylesheet. The package still ships
+`styles.css` with a `.helix-ag-grid` class for grids that remain on a legacy theme (also `--h-*` only); add it to the
+global styles only then:
 
 ```json
 // angular.json
 "styles": ["node_modules/@gravionlabs/helix-ag-grid/styles.css", "src/styles.scss"]
 ```
 
+## Data grids
+
+The demo page "Helix UI Data grid" shows everything below.
+
+- **Columns:** `columnDefs` with the Helix formatters (`valueFormatter: currencyFormatter('EUR')`) and
+  `cellStyle: numberCellStyle`; `defaultColDef: { sortable: true, filter: true, resizable: true }`; text and number
+  filters with `filter: 'agTextColumnFilter' | 'agNumberColumnFilter'`.
+- **Row selection:** `[rowSelection]="{ mode: 'multiRow' }"` (add `checkboxes` / `headerCheckbox` as needed; a
+  checkbox column is on by default).
+- **Row actions:** a cell renderer component built from `button[hx-button]`; hand it the callback through the grid's
+  `[context]` and read `params.context` in the renderer.
+- **Status tags:** a cell renderer that renders `<hx-tag [severity]="…">` from the cell value.
+- **Pagination:** `[pagination]="true" [paginationPageSize]="5" [paginationPageSizeSelector]="[5, 10]"`.
+- **Quick filter:** `[quickFilterText]="text()"` bound to an `input[hx-input]`.
+- **Empty and loading:** `[loading]="loading()"` shows the loading overlay; an empty `rowData` shows "No Rows To Show"
+  (change the text with `localeText`).
+
+```ts
+@Component({ standalone: true, imports: [HxTag], template: `<hx-tag [value]="status()" [severity]="severity()" rounded />` })
+class StatusCell implements ICellRendererAngularComp {
+  status = signal(''); severity = signal<HxTagSeverity>('primary');
+  agInit(p: ICellRendererParams) { this.refresh(p); }
+  refresh(p: ICellRendererParams) { this.status.set(p.value); this.severity.set(MAP[p.value]); return true; }
+}
+```
+
+**Community only.** Everything the demo CRUD and table pages need is in AG Grid Community (MIT): sorting, column
+filters, quick filter, pagination, row selection with checkboxes, cell renderers and editors, column resizing,
+moving and pinning, CSV export, overlays. These are **Enterprise** features and are left out: row grouping and
+aggregation, pivoting, master/detail, Excel export, range selection and the clipboard range, integrated charts, the
+side bar and tool panels, the set filter, the multi filter, the server-side row model, the status bar.
+
 ## Formatters
 
 `Intl`-based value formatters for column definitions:

package/fesm2022/gravionlabs-helix-ag-grid.mjs

@@ -1,3 +1,4 @@
+import { themeQuartz } from "ag-grid-community";
 function numberCellStyle(params) {
 	return params.value ? {
 		textAlign: "right",
@@ -92,7 +93,24 @@ function parseNumberValue(value, options) {
 function numberValueParser(params, options) {
 	return parseNumberValue(params.newValue, options);
 }
+const helixGridTheme = themeQuartz.withParams({
+	backgroundColor: "var(--h-content-background)",
+	foregroundColor: "var(--h-text-color)",
+	accentColor: "var(--h-primary-color)",
+	borderColor: "var(--h-content-border-color)",
+	invalidColor: "var(--h-form-field-invalid-border-color)",
+	chromeBackgroundColor: "var(--h-content-background)",
+	headerBackgroundColor: "var(--h-content-background)",
+	headerTextColor: "var(--h-text-color)",
+	headerFontWeight: 600,
+	oddRowBackgroundColor: "color-mix(in srgb, var(--h-content-border-color) 25%, transparent)",
+	rowHoverColor: "var(--h-content-hover-background)",
+	selectedRowBackgroundColor: "var(--h-highlight-background)",
+	inputBackgroundColor: "var(--h-form-field-background)",
+	fontFamily: "inherit",
+	wrapperBorderRadius: "var(--h-content-border-radius)"
+});
 const HELIX_AG_GRID_VERSION = "0.1.0";
-export { HELIX_AG_GRID_VERSION, cetDateFormatter, cetDateTimeFormatter, cetTimeFormatter, coerceValue, currencyFormatter, intlNumberFormatter, numberCellStyle, numberFormatter, numberValueParser, parseNumber, parseNumberValue, rawNumberFormatter };
+export { HELIX_AG_GRID_VERSION, cetDateFormatter, cetDateTimeFormatter, cetTimeFormatter, coerceValue, currencyFormatter, helixGridTheme, intlNumberFormatter, numberCellStyle, numberFormatter, numberValueParser, parseNumber, parseNumberValue, rawNumberFormatter };
 
 //# sourceMappingURL=gravionlabs-helix-ag-grid.mjs.map

package/fesm2022/gravionlabs-helix-ag-grid.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"gravionlabs-helix-ag-grid.mjs","names":[],"sources":["../../../projects/ag-grid/src/lib/cell-styles/cell-styles.ts","../../../projects/ag-grid/src/lib/formatters/ag-grid-formatters.ts","../../../projects/ag-grid/src/lib/parsers/number-parsers.ts","../../../projects/ag-grid/src/public-api.ts"],"sourcesContent":["import type { CellClassParams, CellStyle } from 'ag-grid-community';\n\n/**\n * AG Grid `cellStyle` callback that right-aligns numeric cells and colours\n * truthy (non-zero, non-null, non-undefined) values with the helix success\n * colour (`--h-green-500`).\n *\n * @example\n * ```ts\n * columnDefs = [{ field: 'amount', cellStyle: numberCellStyle }];\n * ```\n */\nexport function numberCellStyle(params: CellClassParams): CellStyle {\n  return params.value\n    ? { textAlign: 'right', color: 'var(--h-green-500)' }\n    : { textAlign: 'right' };\n}\n","import type { ValueFormatterParams } from 'ag-grid-community';\n\n/** Type alias for AG Grid's `ValueFormatterParams`, used by all formatter functions. */\nexport type AgGridFormatterParams<TData = unknown, TValue = unknown> = ValueFormatterParams<\n  TData,\n  TValue\n>;\n\n// ── Number formatters ──────────────────────────────────────────────────────\n\n/**\n * Formats a numeric cell value using the system locale (`toLocaleString`).\n * Returns `''` for `null`, `undefined`, or `NaN`.\n *\n * @example\n * ```ts\n * { field: 'amount', valueFormatter: numberFormatter }\n * ```\n */\nexport function numberFormatter(\n  params: AgGridFormatterParams<unknown, number | null | undefined>,\n): string {\n  const v = params.value;\n  if (v == null || Number.isNaN(v)) return '';\n  return v.toLocaleString();\n}\n\n/**\n * Returns the raw string representation of a number without any locale\n * formatting. Returns `''` for `null` or `undefined`.\n *\n * @example\n * ```ts\n * { field: 'id', valueFormatter: rawNumberFormatter }\n * ```\n */\nexport function rawNumberFormatter(\n  params: AgGridFormatterParams<unknown, number | null | undefined>,\n): string {\n  const v = params.value;\n  if (v == null) return '';\n  return v.toString();\n}\n\n/**\n * Formats a number using a caller-supplied `Intl.NumberFormat` instance,\n * allowing full control over locale, currency, fraction digits, etc.\n * Returns `''` for `null` or `undefined`.\n *\n * @example\n * ```ts\n * const fmt = new Intl.NumberFormat('de-DE', { minimumFractionDigits: 2 });\n * { field: 'price', valueFormatter: (p) => intlNumberFormatter(p, fmt) }\n * ```\n */\nexport function intlNumberFormatter(\n  params: AgGridFormatterParams<unknown, number | null | undefined>,\n  numberFormat: Intl.NumberFormat,\n): string {\n  const v = params.value;\n  if (v == null || Number.isNaN(v)) return '';\n  return numberFormat.format(v);\n}\n\n/**\n * Factory that returns a currency formatter closure using `Intl.NumberFormat`\n * with `style: 'currency'`. Defaults to EUR / de-DE.\n * Returns `''` for `null`, `undefined`, or `NaN`.\n *\n * @example\n * ```ts\n * { field: 'revenue', valueFormatter: currencyFormatter() }           // '1.234,50 €'\n * { field: 'price',   valueFormatter: currencyFormatter('USD','en-US') } // '$99.90'\n * ```\n */\nexport function currencyFormatter(\n  currencyCode = 'EUR',\n  locale = 'de-DE',\n): (params: AgGridFormatterParams<unknown, number | null | undefined>) => string {\n  const fmt = new Intl.NumberFormat(locale, { style: 'currency', currency: currencyCode });\n  return (params) => {\n    const v = params.value;\n    if (v == null || Number.isNaN(v)) return '';\n    return fmt.format(v);\n  };\n}\n\n// ── CET date formatters ────────────────────────────────────────────────────\n\ntype DateInput = Date | string | null | undefined;\n\nfunction toDate(value: DateInput): Date | null {\n  if (value == null) return null;\n  const d = value instanceof Date ? value : new Date(value);\n  return Number.isNaN(d.getTime()) ? null : d;\n}\n\nconst cetDateFormat = new Intl.DateTimeFormat('de-DE', {\n  timeZone: 'Europe/Berlin',\n  day: '2-digit',\n  month: '2-digit',\n  year: 'numeric',\n});\n\nconst cetDateTimeFormat = new Intl.DateTimeFormat('de-DE', {\n  timeZone: 'Europe/Berlin',\n  day: '2-digit',\n  month: '2-digit',\n  year: 'numeric',\n  hour: '2-digit',\n  minute: '2-digit',\n  second: '2-digit',\n  hour12: false,\n});\n\nconst cetTimeFormat = new Intl.DateTimeFormat('de-DE', {\n  timeZone: 'Europe/Berlin',\n  hour: '2-digit',\n  minute: '2-digit',\n  hour12: false,\n});\n\n/**\n * Formats a `Date` or ISO string as a CET date: `'15.06.2024'`.\n * Returns `''` for `null`, `undefined`, or invalid dates.\n *\n * @example\n * ```ts\n * { field: 'date', valueFormatter: cetDateFormatter }\n * ```\n */\nexport function cetDateFormatter(params: AgGridFormatterParams<unknown, DateInput>): string {\n  const d = toDate(params.value);\n  return d ? cetDateFormat.format(d) : '';\n}\n\n/**\n * Formats a `Date` or ISO string as a CET date-time: `'15.06.2024 12:30:00'`.\n * Returns `''` for `null`, `undefined`, or invalid dates.\n *\n * @example\n * ```ts\n * { field: 'updatedAt', valueFormatter: cetDateTimeFormatter }\n * ```\n */\nexport function cetDateTimeFormatter(params: AgGridFormatterParams<unknown, DateInput>): string {\n  const d = toDate(params.value);\n  if (!d) return '';\n  // Intl formats date and time parts separated by ', ' in de-DE — replace with ' '\n  return cetDateTimeFormat.format(d).replace(', ', ' ');\n}\n\n/**\n * Formats a `Date` or ISO string as a CET time: `'12:30'`.\n * Returns `''` for `null`, `undefined`, or invalid dates.\n *\n * @example\n * ```ts\n * { field: 'startTime', valueFormatter: cetTimeFormatter }\n * ```\n */\nexport function cetTimeFormatter(params: AgGridFormatterParams<unknown, DateInput>): string {\n  const d = toDate(params.value);\n  return d ? cetTimeFormat.format(d) : '';\n}\n","import type { ValueParserParams } from 'ag-grid-community';\n\n/** Bounds for number validation. */\nexport interface ParseNumberOptions {\n  min?: number;\n  max?: number;\n}\n\n/**\n * Validates a number against optional `min`/`max` bounds.\n * Returns `null` if the value is `null`, `undefined`, `NaN`, or out of bounds.\n *\n * @example\n * ```ts\n * coerceValue(5, { min: 0, max: 10 })  // → 5\n * coerceValue(15, { max: 10 })         // → null\n * coerceValue(null)                    // → null\n * ```\n */\nexport function coerceValue(\n  value: number | null | undefined,\n  options?: ParseNumberOptions,\n): number | null {\n  if (value == null || Number.isNaN(value)) return null;\n  if (options?.min != null && value < options.min) return null;\n  if (options?.max != null && value > options.max) return null;\n  return value;\n}\n\n/**\n * Locale-aware string-to-number parser.\n * Handles thousand separators and decimal commas for the given locale.\n * Returns `null` for empty, `null`, or `undefined` input.\n *\n * @example\n * ```ts\n * parseNumber('1.234,56', 'de-DE') // → 1234.56\n * parseNumber('1,234.56', 'en-US') // → 1234.56\n * ```\n */\nexport function parseNumber(\n  value: string | null | undefined,\n  locale: string,\n  options?: ParseNumberOptions,\n): number | null {\n  if (value == null || value.trim() === '') return null;\n\n  // Derive separators from the locale\n  const parts = new Intl.NumberFormat(locale).formatToParts(1234.5);\n  const group = parts.find((p) => p.type === 'group')?.value ?? '';\n  const decimal = parts.find((p) => p.type === 'decimal')?.value ?? '.';\n\n  const normalised = value.trim().replaceAll(group, '').replace(decimal, '.');\n\n  const n = Number.parseFloat(normalised);\n  return coerceValue(n, options);\n}\n\n/**\n * Smart string-to-number parser that detects the decimal separator\n * automatically:\n * - Strings containing a comma (e.g. `'1.234,56'` from spreadsheet paste)\n *   are parsed as German locale (`de-DE`).\n * - All other strings (e.g. `'3.14'` from keyboard input) are parsed with\n *   `parseFloat`.\n *\n * Returns `null` for empty, `null`, or `undefined` input.\n *\n * @example\n * ```ts\n * parseNumberValue('42')        // → 42\n * parseNumberValue('3.14')      // → 3.14\n * parseNumberValue('1.234,56')  // → 1234.56  (German paste)\n * parseNumberValue(null)        // → null\n * parseNumberValue('5', { min: 10 }) // → null (out of bounds)\n * ```\n */\nexport function parseNumberValue(\n  value: string | null | undefined,\n  options?: ParseNumberOptions,\n): number | null {\n  if (value == null || value.trim() === '') return null;\n\n  const hasComma = value.includes(',');\n  if (hasComma) {\n    return parseNumber(value, 'de-DE', options);\n  }\n\n  const n = Number.parseFloat(value.trim());\n  return coerceValue(n, options);\n}\n\n/**\n * AG Grid `valueParser` adapter — wraps `parseNumberValue` to read\n * `params.newValue`. Drop-in for any editable numeric column.\n *\n * @example\n * ```ts\n * { field: 'quantity', editable: true, valueParser: numberValueParser }\n * // or with bounds:\n * { field: 'pct', editable: true, valueParser: (p) => numberValueParser(p, { min: 0, max: 100 }) }\n * ```\n */\nexport function numberValueParser(\n  params: ValueParserParams,\n  options?: ParseNumberOptions,\n): number | null {\n  return parseNumberValue(params.newValue as string | null | undefined, options);\n}\n","export const HELIX_AG_GRID_VERSION = '0.1.0';\n\nexport { numberCellStyle } from './lib/cell-styles/cell-styles';\n\nexport type { AgGridFormatterParams } from './lib/formatters/ag-grid-formatters';\nexport {\n  cetDateFormatter,\n  cetDateTimeFormatter,\n  cetTimeFormatter,\n  currencyFormatter,\n  intlNumberFormatter,\n  numberFormatter,\n  rawNumberFormatter,\n} from './lib/formatters/ag-grid-formatters';\n\nexport type { ParseNumberOptions } from './lib/parsers/number-parsers';\nexport {\n  coerceValue,\n  numberValueParser,\n  parseNumber,\n  parseNumberValue,\n} from './lib/parsers/number-parsers';\n"],"mappings":"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"}
+{"version":3,"file":"gravionlabs-helix-ag-grid.mjs","names":[],"sources":["../../../projects/ag-grid/src/lib/cell-styles/cell-styles.ts","../../../projects/ag-grid/src/lib/formatters/ag-grid-formatters.ts","../../../projects/ag-grid/src/lib/parsers/number-parsers.ts","../../../projects/ag-grid/src/lib/theme/helix-theme.ts","../../../projects/ag-grid/src/public-api.ts"],"sourcesContent":["import type { CellClassParams, CellStyle } from 'ag-grid-community';\n\n/**\n * AG Grid `cellStyle` callback that right-aligns numeric cells and colours\n * truthy (non-zero, non-null, non-undefined) values with the helix success\n * colour (`--h-green-500`).\n *\n * @example\n * ```ts\n * columnDefs = [{ field: 'amount', cellStyle: numberCellStyle }];\n * ```\n */\nexport function numberCellStyle(params: CellClassParams): CellStyle {\n  return params.value\n    ? { textAlign: 'right', color: 'var(--h-green-500)' }\n    : { textAlign: 'right' };\n}\n","import type { ValueFormatterParams } from 'ag-grid-community';\n\n/**\n * The row type of the formatters. A formatter only reads the value, so it must fit a column of any row type;\n * `unknown` would make it unusable in a typed `ColDef<Row>` (the row node type is invariant).\n */\n// biome-ignore lint/suspicious/noExplicitAny: any row type, see above\nexport type AnyRow = any;\n\n/** Type alias for AG Grid's `ValueFormatterParams`, used by all formatter functions. */\nexport type AgGridFormatterParams<TData = AnyRow, TValue = unknown> = ValueFormatterParams<\n  TData,\n  TValue\n>;\n\n// ── Number formatters ──────────────────────────────────────────────────────\n\n/**\n * Formats a numeric cell value using the system locale (`toLocaleString`).\n * Returns `''` for `null`, `undefined`, or `NaN`.\n *\n * @example\n * ```ts\n * { field: 'amount', valueFormatter: numberFormatter }\n * ```\n */\nexport function numberFormatter(\n  params: AgGridFormatterParams<AnyRow, number | null | undefined>,\n): string {\n  const v = params.value;\n  if (v == null || Number.isNaN(v)) return '';\n  return v.toLocaleString();\n}\n\n/**\n * Returns the raw string representation of a number without any locale\n * formatting. Returns `''` for `null` or `undefined`.\n *\n * @example\n * ```ts\n * { field: 'id', valueFormatter: rawNumberFormatter }\n * ```\n */\nexport function rawNumberFormatter(\n  params: AgGridFormatterParams<AnyRow, number | null | undefined>,\n): string {\n  const v = params.value;\n  if (v == null) return '';\n  return v.toString();\n}\n\n/**\n * Formats a number using a caller-supplied `Intl.NumberFormat` instance,\n * allowing full control over locale, currency, fraction digits, etc.\n * Returns `''` for `null` or `undefined`.\n *\n * @example\n * ```ts\n * const fmt = new Intl.NumberFormat('de-DE', { minimumFractionDigits: 2 });\n * { field: 'price', valueFormatter: (p) => intlNumberFormatter(p, fmt) }\n * ```\n */\nexport function intlNumberFormatter(\n  params: AgGridFormatterParams<AnyRow, number | null | undefined>,\n  numberFormat: Intl.NumberFormat,\n): string {\n  const v = params.value;\n  if (v == null || Number.isNaN(v)) return '';\n  return numberFormat.format(v);\n}\n\n/**\n * Factory that returns a currency formatter closure using `Intl.NumberFormat`\n * with `style: 'currency'`. Defaults to EUR / de-DE.\n * Returns `''` for `null`, `undefined`, or `NaN`.\n *\n * @example\n * ```ts\n * { field: 'revenue', valueFormatter: currencyFormatter() }           // '1.234,50 €'\n * { field: 'price',   valueFormatter: currencyFormatter('USD','en-US') } // '$99.90'\n * ```\n */\nexport function currencyFormatter(\n  currencyCode = 'EUR',\n  locale = 'de-DE',\n): (params: AgGridFormatterParams<AnyRow, number | null | undefined>) => string {\n  const fmt = new Intl.NumberFormat(locale, { style: 'currency', currency: currencyCode });\n  return (params) => {\n    const v = params.value;\n    if (v == null || Number.isNaN(v)) return '';\n    return fmt.format(v);\n  };\n}\n\n// ── CET date formatters ────────────────────────────────────────────────────\n\ntype DateInput = Date | string | null | undefined;\n\nfunction toDate(value: DateInput): Date | null {\n  if (value == null) return null;\n  const d = value instanceof Date ? value : new Date(value);\n  return Number.isNaN(d.getTime()) ? null : d;\n}\n\nconst cetDateFormat = new Intl.DateTimeFormat('de-DE', {\n  timeZone: 'Europe/Berlin',\n  day: '2-digit',\n  month: '2-digit',\n  year: 'numeric',\n});\n\nconst cetDateTimeFormat = new Intl.DateTimeFormat('de-DE', {\n  timeZone: 'Europe/Berlin',\n  day: '2-digit',\n  month: '2-digit',\n  year: 'numeric',\n  hour: '2-digit',\n  minute: '2-digit',\n  second: '2-digit',\n  hour12: false,\n});\n\nconst cetTimeFormat = new Intl.DateTimeFormat('de-DE', {\n  timeZone: 'Europe/Berlin',\n  hour: '2-digit',\n  minute: '2-digit',\n  hour12: false,\n});\n\n/**\n * Formats a `Date` or ISO string as a CET date: `'15.06.2024'`.\n * Returns `''` for `null`, `undefined`, or invalid dates.\n *\n * @example\n * ```ts\n * { field: 'date', valueFormatter: cetDateFormatter }\n * ```\n */\nexport function cetDateFormatter(params: AgGridFormatterParams<AnyRow, DateInput>): string {\n  const d = toDate(params.value);\n  return d ? cetDateFormat.format(d) : '';\n}\n\n/**\n * Formats a `Date` or ISO string as a CET date-time: `'15.06.2024 12:30:00'`.\n * Returns `''` for `null`, `undefined`, or invalid dates.\n *\n * @example\n * ```ts\n * { field: 'updatedAt', valueFormatter: cetDateTimeFormatter }\n * ```\n */\nexport function cetDateTimeFormatter(params: AgGridFormatterParams<AnyRow, DateInput>): string {\n  const d = toDate(params.value);\n  if (!d) return '';\n  // Intl formats date and time parts separated by ', ' in de-DE — replace with ' '\n  return cetDateTimeFormat.format(d).replace(', ', ' ');\n}\n\n/**\n * Formats a `Date` or ISO string as a CET time: `'12:30'`.\n * Returns `''` for `null`, `undefined`, or invalid dates.\n *\n * @example\n * ```ts\n * { field: 'startTime', valueFormatter: cetTimeFormatter }\n * ```\n */\nexport function cetTimeFormatter(params: AgGridFormatterParams<AnyRow, DateInput>): string {\n  const d = toDate(params.value);\n  return d ? cetTimeFormat.format(d) : '';\n}\n","import type { ValueParserParams } from 'ag-grid-community';\n\n/** Bounds for number validation. */\nexport interface ParseNumberOptions {\n  min?: number;\n  max?: number;\n}\n\n/**\n * Validates a number against optional `min`/`max` bounds.\n * Returns `null` if the value is `null`, `undefined`, `NaN`, or out of bounds.\n *\n * @example\n * ```ts\n * coerceValue(5, { min: 0, max: 10 })  // → 5\n * coerceValue(15, { max: 10 })         // → null\n * coerceValue(null)                    // → null\n * ```\n */\nexport function coerceValue(\n  value: number | null | undefined,\n  options?: ParseNumberOptions,\n): number | null {\n  if (value == null || Number.isNaN(value)) return null;\n  if (options?.min != null && value < options.min) return null;\n  if (options?.max != null && value > options.max) return null;\n  return value;\n}\n\n/**\n * Locale-aware string-to-number parser.\n * Handles thousand separators and decimal commas for the given locale.\n * Returns `null` for empty, `null`, or `undefined` input.\n *\n * @example\n * ```ts\n * parseNumber('1.234,56', 'de-DE') // → 1234.56\n * parseNumber('1,234.56', 'en-US') // → 1234.56\n * ```\n */\nexport function parseNumber(\n  value: string | null | undefined,\n  locale: string,\n  options?: ParseNumberOptions,\n): number | null {\n  if (value == null || value.trim() === '') return null;\n\n  // Derive separators from the locale\n  const parts = new Intl.NumberFormat(locale).formatToParts(1234.5);\n  const group = parts.find((p) => p.type === 'group')?.value ?? '';\n  const decimal = parts.find((p) => p.type === 'decimal')?.value ?? '.';\n\n  const normalised = value.trim().replaceAll(group, '').replace(decimal, '.');\n\n  const n = Number.parseFloat(normalised);\n  return coerceValue(n, options);\n}\n\n/**\n * Smart string-to-number parser that detects the decimal separator\n * automatically:\n * - Strings containing a comma (e.g. `'1.234,56'` from spreadsheet paste)\n *   are parsed as German locale (`de-DE`).\n * - All other strings (e.g. `'3.14'` from keyboard input) are parsed with\n *   `parseFloat`.\n *\n * Returns `null` for empty, `null`, or `undefined` input.\n *\n * @example\n * ```ts\n * parseNumberValue('42')        // → 42\n * parseNumberValue('3.14')      // → 3.14\n * parseNumberValue('1.234,56')  // → 1234.56  (German paste)\n * parseNumberValue(null)        // → null\n * parseNumberValue('5', { min: 10 }) // → null (out of bounds)\n * ```\n */\nexport function parseNumberValue(\n  value: string | null | undefined,\n  options?: ParseNumberOptions,\n): number | null {\n  if (value == null || value.trim() === '') return null;\n\n  const hasComma = value.includes(',');\n  if (hasComma) {\n    return parseNumber(value, 'de-DE', options);\n  }\n\n  const n = Number.parseFloat(value.trim());\n  return coerceValue(n, options);\n}\n\n/**\n * AG Grid `valueParser` adapter — wraps `parseNumberValue` to read\n * `params.newValue`. Drop-in for any editable numeric column.\n *\n * @example\n * ```ts\n * { field: 'quantity', editable: true, valueParser: numberValueParser }\n * // or with bounds:\n * { field: 'pct', editable: true, valueParser: (p) => numberValueParser(p, { min: 0, max: 100 }) }\n * ```\n */\nexport function numberValueParser(\n  params: ValueParserParams,\n  options?: ParseNumberOptions,\n): number | null {\n  return parseNumberValue(params.newValue as string | null | undefined, options);\n}\n","import { themeQuartz } from 'ag-grid-community';\n\n/**\n * The AG Grid theme of Helix: Quartz with its parameters pointed at the Helix design tokens.\n *\n * ```ts\n * import { helixGridTheme } from '@gravionlabs/helix-ag-grid';\n * // <ag-grid-angular [theme]=\"theme\" …>   theme = helixGridTheme;\n * ```\n *\n * Every colour is a `var(--h-*)` reference, so the grid follows dark mode (`.app-dark`) and a primary colour that\n * changes at runtime without any code, and it needs no stylesheet. This is the AG Grid 33+ Theming API; the CSS\n * `.helix-ag-grid` class of `styles.css` is only for grids that still use a legacy theme (`theme=\"legacy\"`).\n */\nexport const helixGridTheme = themeQuartz.withParams({\n  backgroundColor: 'var(--h-content-background)',\n  foregroundColor: 'var(--h-text-color)',\n  accentColor: 'var(--h-primary-color)',\n  borderColor: 'var(--h-content-border-color)',\n  invalidColor: 'var(--h-form-field-invalid-border-color)',\n  chromeBackgroundColor: 'var(--h-content-background)',\n  headerBackgroundColor: 'var(--h-content-background)',\n  headerTextColor: 'var(--h-text-color)',\n  headerFontWeight: 600,\n  oddRowBackgroundColor: 'color-mix(in srgb, var(--h-content-border-color) 25%, transparent)',\n  rowHoverColor: 'var(--h-content-hover-background)',\n  selectedRowBackgroundColor: 'var(--h-highlight-background)',\n  inputBackgroundColor: 'var(--h-form-field-background)',\n  fontFamily: 'inherit',\n  wrapperBorderRadius: 'var(--h-content-border-radius)',\n});\n","export const HELIX_AG_GRID_VERSION = '0.1.0';\n\nexport { numberCellStyle } from './lib/cell-styles/cell-styles';\nexport type { AgGridFormatterParams, AnyRow } from './lib/formatters/ag-grid-formatters';\nexport {\n  cetDateFormatter,\n  cetDateTimeFormatter,\n  cetTimeFormatter,\n  currencyFormatter,\n  intlNumberFormatter,\n  numberFormatter,\n  rawNumberFormatter,\n} from './lib/formatters/ag-grid-formatters';\nexport type { ParseNumberOptions } from './lib/parsers/number-parsers';\nexport {\n  coerceValue,\n  numberValueParser,\n  parseNumber,\n  parseNumberValue,\n} from './lib/parsers/number-parsers';\nexport { helixGridTheme } from './lib/theme/helix-theme';\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravionlabs/helix-ag-grid",
-  "version": "22.1.27",
+  "version": "22.1.28",
   "description": "Helix AG Grid helpers for Angular — value formatters, number parsers, and cell styles.",
   "license": "MIT",
   "keywords": [

package/styles.css

@@ -1,43 +1,40 @@
 /*
- * AG Grid Theme — Helix
+ * AG Grid theme for legacy-theme grids — Helix
  *
- * Apply the `.helix-ag-grid` class to the ag-grid host element to get a
- * look and feel consistent with the Helix / PrimeNG design system.
+ * Prefer `helixGridTheme` (the Theming API of AG Grid 33+, see the README): it needs no stylesheet. This class is for
+ * grids that still use a legacy theme (`theme="legacy"` in AG Grid 33+, or the `ag-theme-*` classes before):
+ * put `.helix-ag-grid` next to the legacy theme class on the grid host.
  *
- * Token reference:
- *   --helix-*   design tokens defined in @gravionlabs/helix styles.css
- *   --p-*       PrimeNG Aura tokens injected at runtime by ThemeService
- *
- * Approach: https://www.ag-grid.com/javascript-data-grid/theming-css/#overriding-theme-parameters-with-custom-properties
+ * Only `--h-*` Helix tokens are read, so the grid follows dark mode (`.app-dark`) and a runtime primary colour change.
  */
 
 .helix-ag-grid {
   /* ── Colours ──────────────────────────────────────────────────────────── */
-  --ag-background-color: var(--helix-surface-card);
+  --ag-background-color: var(--h-content-background);
   --ag-foreground-color: var(--h-text-color);
   --ag-text-color: var(--ag-foreground-color);
   --ag-accent-color: var(--h-primary-color);
   --ag-invalid-color: var(--h-form-field-invalid-border-color);
-  --ag-border-color: var(--helix-border);
+  --ag-border-color: var(--h-content-border-color);
   --ag-wrapper-border: none;
-  --ag-row-border: solid 1px var(--helix-border);
+  --ag-row-border: solid 1px var(--h-content-border-color);
   --ag-odd-row-background-color: color-mix(
     in srgb,
     transparent,
-    var(--helix-border) 10%
+    var(--h-content-border-color) 10%
   );
-  --ag-row-hover-color: var(--helix-surface-hover);
+  --ag-row-hover-color: var(--h-content-hover-background);
 
   /* ── Typography ───────────────────────────────────────────────────────── */
-  --ag-font-family: "Lato", sans-serif;
-  --ag-font-size: 0.75rem;
+  --ag-font-family: inherit;
+  --ag-font-size: 0.875rem;
 
   /* ── Header ───────────────────────────────────────────────────────────── */
-  --ag-header-background-color: var(--helix-surface-card);
-  --ag-header-font-family: "Lato", sans-serif;
-  --ag-header-font-weight: 500;
-  --ag-header-font-size: 0.75rem;
-  --ag-header-text-color: var(--h-primary-color);
+  --ag-header-background-color: var(--h-content-background);
+  --ag-header-font-family: inherit;
+  --ag-header-font-weight: 600;
+  --ag-header-font-size: 0.875rem;
+  --ag-header-text-color: var(--h-text-color);
 
   /* ── Cells ────────────────────────────────────────────────────────────── */
   --ag-cell-text-color: var(--h-text-color);
@@ -69,10 +66,10 @@
   }
 
   .ag-dnd-ghost {
-    font-family: "Lato", sans-serif;
-    font-size: 0.75rem;
-    font-weight: 500;
-    color: var(--h-primary-color);
+    font-family: inherit;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--h-text-color);
   }
 
   .ag-paging-panel {

package/types/gravionlabs-helix-ag-grid.d.ts

@@ -10,8 +10,13 @@ import { CellClassParams, CellStyle, ValueFormatterParams, ValueParserParams } f
  * ```
  */
 export declare function numberCellStyle(params: CellClassParams): CellStyle;
+/**
+ * The row type of the formatters. A formatter only reads the value, so it must fit a column of any row type;
+ * `unknown` would make it unusable in a typed `ColDef<Row>` (the row node type is invariant).
+ */
+type AnyRow = any;
 /** Type alias for AG Grid's `ValueFormatterParams`, used by all formatter functions. */
-type AgGridFormatterParams<TData = unknown, TValue = unknown> = ValueFormatterParams<TData, TValue>;
+type AgGridFormatterParams<TData = AnyRow, TValue = unknown> = ValueFormatterParams<TData, TValue>;
 /**
  * Formats a numeric cell value using the system locale (`toLocaleString`).
  * Returns `''` for `null`, `undefined`, or `NaN`.
@@ -21,7 +26,7 @@ type AgGridFormatterParams<TData = unknown, TValue = unknown> = ValueFormatterPa
  * { field: 'amount', valueFormatter: numberFormatter }
  * ```
  */
-export declare function numberFormatter(params: AgGridFormatterParams<unknown, number | null | undefined>): string;
+export declare function numberFormatter(params: AgGridFormatterParams<AnyRow, number | null | undefined>): string;
 /**
  * Returns the raw string representation of a number without any locale
  * formatting. Returns `''` for `null` or `undefined`.
@@ -31,7 +36,7 @@ export declare function numberFormatter(params: AgGridFormatterParams<unknown, n
  * { field: 'id', valueFormatter: rawNumberFormatter }
  * ```
  */
-export declare function rawNumberFormatter(params: AgGridFormatterParams<unknown, number | null | undefined>): string;
+export declare function rawNumberFormatter(params: AgGridFormatterParams<AnyRow, number | null | undefined>): string;
 /**
  * Formats a number using a caller-supplied `Intl.NumberFormat` instance,
  * allowing full control over locale, currency, fraction digits, etc.
@@ -43,7 +48,7 @@ export declare function rawNumberFormatter(params: AgGridFormatterParams<unknown
  * { field: 'price', valueFormatter: (p) => intlNumberFormatter(p, fmt) }
  * ```
  */
-export declare function intlNumberFormatter(params: AgGridFormatterParams<unknown, number | null | undefined>, numberFormat: Intl.NumberFormat): string;
+export declare function intlNumberFormatter(params: AgGridFormatterParams<AnyRow, number | null | undefined>, numberFormat: Intl.NumberFormat): string;
 /**
  * Factory that returns a currency formatter closure using `Intl.NumberFormat`
  * with `style: 'currency'`. Defaults to EUR / de-DE.
@@ -55,7 +60,7 @@ export declare function intlNumberFormatter(params: AgGridFormatterParams<unknow
  * { field: 'price',   valueFormatter: currencyFormatter('USD','en-US') } // '$99.90'
  * ```
  */
-export declare function currencyFormatter(currencyCode?: string, locale?: string): (params: AgGridFormatterParams<unknown, number | null | undefined>) => string;
+export declare function currencyFormatter(currencyCode?: string, locale?: string): (params: AgGridFormatterParams<AnyRow, number | null | undefined>) => string;
 type DateInput = Date | string | null | undefined;
 /**
  * Formats a `Date` or ISO string as a CET date: `'15.06.2024'`.
@@ -66,7 +71,7 @@ type DateInput = Date | string | null | undefined;
  * { field: 'date', valueFormatter: cetDateFormatter }
  * ```
  */
-export declare function cetDateFormatter(params: AgGridFormatterParams<unknown, DateInput>): string;
+export declare function cetDateFormatter(params: AgGridFormatterParams<AnyRow, DateInput>): string;
 /**
  * Formats a `Date` or ISO string as a CET date-time: `'15.06.2024 12:30:00'`.
  * Returns `''` for `null`, `undefined`, or invalid dates.
@@ -76,7 +81,7 @@ export declare function cetDateFormatter(params: AgGridFormatterParams<unknown,
  * { field: 'updatedAt', valueFormatter: cetDateTimeFormatter }
  * ```
  */
-export declare function cetDateTimeFormatter(params: AgGridFormatterParams<unknown, DateInput>): string;
+export declare function cetDateTimeFormatter(params: AgGridFormatterParams<AnyRow, DateInput>): string;
 /**
  * Formats a `Date` or ISO string as a CET time: `'12:30'`.
  * Returns `''` for `null`, `undefined`, or invalid dates.
@@ -86,7 +91,7 @@ export declare function cetDateTimeFormatter(params: AgGridFormatterParams<unkno
  * { field: 'startTime', valueFormatter: cetTimeFormatter }
  * ```
  */
-export declare function cetTimeFormatter(params: AgGridFormatterParams<unknown, DateInput>): string;
+export declare function cetTimeFormatter(params: AgGridFormatterParams<AnyRow, DateInput>): string;
 /** Bounds for number validation. */
 interface ParseNumberOptions {
   min?: number;
@@ -148,5 +153,18 @@ export declare function parseNumberValue(value: string | null | undefined, optio
  * ```
  */
 export declare function numberValueParser(params: ValueParserParams, options?: ParseNumberOptions): number | null;
+/**
+ * The AG Grid theme of Helix: Quartz with its parameters pointed at the Helix design tokens.
+ *
+ * ```ts
+ * import { helixGridTheme } from '@gravionlabs/helix-ag-grid';
+ * // <ag-grid-angular [theme]="theme" …>   theme = helixGridTheme;
+ * ```
+ *
+ * Every colour is a `var(--h-*)` reference, so the grid follows dark mode (`.app-dark`) and a primary colour that
+ * changes at runtime without any code, and it needs no stylesheet. This is the AG Grid 33+ Theming API; the CSS
+ * `.helix-ag-grid` class of `styles.css` is only for grids that still use a legacy theme (`theme="legacy"`).
+ */
+export declare const helixGridTheme: import("ag-grid-community").Theme<import("ag-grid-community").ThemeDefaultParams>;
 export declare const HELIX_AG_GRID_VERSION = "0.1.0";
-export type { AgGridFormatterParams, ParseNumberOptions };
+export type { AgGridFormatterParams, AnyRow, ParseNumberOptions };