import { CoarGridColumnBuilder } from './coar-grid-column-builder'; import { CoarGridWrapperColumnBuilder } from './coar-grid-wrapper-column-builder'; import { TagCellRendererConfig } from '../cell-renderers/tag-cell-renderer.models'; import { IconCellRendererConfig } from '../cell-renderers/icon-cell-renderer.models'; import { DateCellRendererConfig } from '../cell-renderers/date-cell-renderer.models'; import { NumberCellRendererConfig } from '../cell-renderers/number-cell-renderer.models'; import { CurrencyCellRendererConfig } from '../cell-renderers/currency-cell-renderer.models'; import { TreeCellRendererConfig } from '../cell-renderers/tree-cell-renderer.models'; import { CheckboxColumnConfigurator } from '../configurators/CheckboxColumnConfigurator'; import { TextColumnConfigurator } from '../configurators/TextColumnConfigurator'; import { NumberColumnConfigurator } from '../configurators/NumberColumnConfigurator'; import { SelectColumnConfigurator } from '../configurators/SelectColumnConfigurator'; import { MultiSelectColumnConfigurator } from '../configurators/MultiSelectColumnConfigurator'; import { TagSelectColumnConfigurator } from '../configurators/TagSelectColumnConfigurator'; import { PlainDateColumnConfigurator } from '../configurators/PlainDateColumnConfigurator'; import { PlainDateTimeColumnConfigurator } from '../configurators/PlainDateTimeColumnConfigurator'; import { ZonedDateTimeColumnConfigurator } from '../configurators/ZonedDateTimeColumnConfigurator'; import { Temporal } from '@js-temporal/polyfill'; /** * Factory for creating typed column builders. * Provides convenient methods for common column types. * * @example * ```ts * // In column definitions: * CoarGridBuilder.create() * .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' }), * ]) * ``` */ export declare class CoarGridColumnFactory { /** * Create a column builder for the given field */ field(fieldName: keyof TData | string): CoarGridColumnBuilder; /** * Create a date column with locale-aware rendering. * * Uses the localization system (`useL10n().fmtDate()`) for formatting, * so the display updates reactively on language change. * * @param config - Optional configuration (e.g. `{ includeTime: true }`) */ date(fieldName: keyof TData | string, config?: DateCellRendererConfig): CoarGridColumnBuilder; /** * Create a number column with locale-aware rendering. * * Uses the localization system (`useL10n().fmtNumber()`) for formatting, * so the display updates reactively on locale change. * * Two forms — both work, no breaking change: * - **Config-object** (legacy): `col.number('amount', { decimals: 2 })` * - **Configurator callback** (new): `col.number('amount', n => n.decimals(2).min(0).max(100))` * * The callback form bundles `CoarNumberCellEditor` automatically, so adding * `.editable(true)` on the outer chain enables Coar-styled in-cell editing. * The config-object form keeps current behavior (renderer only). * * @param configOrCallback - Plain config object or a configurator callback */ number(fieldName: keyof TData | string, configOrCallback?: NumberCellRendererConfig | ((n: NumberColumnConfigurator) => NumberColumnConfigurator)): CoarGridColumnBuilder; /** * Create a text column. * * Uses AG Grid's default text rendering for display. When chained with * `.editable(true)` (or a row-predicate), opens `CoarTextCellEditor` on * double-click / Enter / F2 — visual consistency with form text inputs, * plus AG Grid's standard Tab-through-edit-mode navigation. * * @example * ```ts * // simple editable text column * col.text('name').editable(true) * * // with editor config * col.text('email', t => t.placeholder('user@example.com').maxLength(120)) * .editable(true) * * // gated by row state * col.text('comment', t => t.maxLength(500)).editable(row => !row.locked) * ``` */ text(fieldName: keyof TData | string, configurator?: (t: TextColumnConfigurator) => TextColumnConfigurator): CoarGridColumnBuilder; /** * Create a currency column with locale-aware rendering. * * Uses the localization system (`useL10n().fmtCurrency()`) for formatting, * so the display updates reactively on locale change. * * @param config - Optional configuration (e.g. `{ currencyCode: 'EUR' }`) */ currency(fieldName: keyof TData | string, config?: CurrencyCellRendererConfig): CoarGridColumnBuilder; /** * Create a boolean column (displays Yes/No or custom values) */ boolean(fieldName: keyof TData | string, options?: { trueValue?: string; falseValue?: string; }): CoarGridColumnBuilder; /** * Create a select column. * * Renderer displays the LABEL of the option matching the cell value (falls * back to the raw value if no option matches). Editor opens a `` * dropdown on double-click / Enter / F2 — selecting an option auto-commits * via `cellValueChanged` and exits edit-mode. * * Whether the column is editable is gated by the column-level `editable()` * chain — same pattern as text/number/checkbox. * * @example * ```ts * const ROLES = [ * { value: 'eng', label: 'Engineer' }, * { value: 'des', label: 'Designer' }, * { value: 'mgr', label: 'Manager' }, * ]; * * col.select('role', s => s.options(ROLES)).editable(true) * * // dynamic options * col.select('parent', s => s.options(row => allowedParents(row))).editable(true) * * // searchable + clearable * col.select('country', s => s.options(COUNTRIES).searchable().clearable()) * .editable(true) * ``` */ select(fieldName: keyof TData | string, configurator: (s: SelectColumnConfigurator) => SelectColumnConfigurator): CoarGridColumnBuilder; /** * Create a multi-select column with a checkbox-list dropdown editor. * * Cell value is `T[]`. The renderer looks up labels from `options` and shows * them comma-separated by default; opt into chips via `.display('chips')`. * The editor opens a `` dropdown that stays open while the * user toggles checkboxes — focus-preservation prevents AG Grid from * committing prematurely. Commit happens via the standard focus-loss path * (click outside / Tab / Enter), AG Grid pulls the final array via * `getValue()`. * * Whether the column is editable is gated by the column-level `.editable()` * chain — same pattern as text/number/select/checkbox. * * @example * ```ts * col.multiSelect('tags', s => s * .options([{ value: 'a', label: 'Alpha' }, { value: 'b', label: 'Beta' }]) * .searchable() * .showSelectAll() * .display('chips') * ).editable(true) * * // row-aware options * col.multiSelect('perms', s => s.options(row => permsFor(row.role))) * .editable(true) * ``` */ multiSelect(fieldName: keyof TData | string, configurator: (s: MultiSelectColumnConfigurator) => MultiSelectColumnConfigurator): CoarGridColumnBuilder; /** * Create a tag-style multi-select column. Cell value is `T[]`. * * Same renderer as `col.multiSelect()` (comma-separated by default, * chips opt-in). The editor uses `` — selected values render * as removable chips inside the trigger, and the dropdown only lists * not-yet-selected options. With `.allowCreate()`, the user can type * free-form values that aren't in `options`; those round-trip into the cell * array verbatim, and the renderer falls back to `String(value)` for * unknown labels. * * @example * ```ts * col.tagSelect('skills', s => s * .options([{ value: 'ts', label: 'TypeScript' }, { value: 'go', label: 'Go' }]) * .allowCreate() * .display('chips') * ).editable(true) * ``` */ tagSelect(fieldName: keyof TData | string, configurator: (s: TagSelectColumnConfigurator) => TagSelectColumnConfigurator): CoarGridColumnBuilder; /** * Create a column for `Temporal.PlainDate` values (calendar date, no time). * * Renderer formats via `toLocaleString` (date-style: medium); editor wraps * ``. Cell value MUST be `Temporal.PlainDate | null` — * consumers convert ISO strings / native `Date` at the data layer (the * Temporal-only contract matches the calendar package). * * The legacy `col.date()` shortcut (Date | string display-only, no editor) * remains unchanged for back-compat with existing consumer code. * * @example * ```ts * col.plainDate('startsOn', d => d.size('s').highlightWeekends()) * .editable(true) * ``` */ plainDate(fieldName: keyof TData | string, configurator?: (d: PlainDateColumnConfigurator) => PlainDateColumnConfigurator): CoarGridColumnBuilder; /** * Create a column for `Temporal.PlainDateTime` values (floating wallclock). * * Renderer formats with date-style: medium + time-style: short. Editor * wraps ``. * * Use `col.zonedDateTime()` when the event lives in a specific IANA zone * (cross-zone tools, calendar integration, etc.). * * @example * ```ts * col.plainDateTime('localizedAt', d => d.size('s')).editable(true) * ``` */ plainDateTime(fieldName: keyof TData | string, configurator?: (d: PlainDateTimeColumnConfigurator) => PlainDateTimeColumnConfigurator): CoarGridColumnBuilder; /** * Create a column for `Temporal.ZonedDateTime` values (date+time+zone). * * Renderer formats with date-style: medium + time-style: short + a short * zone-name suffix so cross-zone columns stay unambiguous at a glance. * Editor wraps ``, which surfaces its own zone * selector. * * @example * ```ts * col.zonedDateTime('eventAt', d => d * .timeZone('Europe/Vienna') * .timezoneFilter(['Europe/*', 'America/*']) * ).editable(true) * ``` */ zonedDateTime(fieldName: keyof TData | string, configurator?: (d: ZonedDateTimeColumnConfigurator) => ZonedDateTimeColumnConfigurator): CoarGridColumnBuilder; /** * Create a checkbox column. * * The renderer is **always read-only** (`` with pointer-events * disabled) — the same pattern as text/number/select columns. To allow editing, * chain `.editable(true)` or `.editable(row => …)` on the outer column builder. * AG Grid then opens `` on double-click / Enter / F2. * Inside edit-mode, Space toggles, Tab commits and moves to the next editable * cell (opening its editor), Enter commits, Escape cancels — standard AG Grid * keyboard navigation. * * Toggles fire `cellValueChanged` like any other editor commit, so a single * `gridBuilder.onCellValueChanged()` handler covers all column types. * * @example * ```ts * // readonly indicator * col.checkbox('done') * * // interactive (double-click → toggle → Tab to next editable cell) * col.checkbox('done').editable(true) * * // gated by row state * col.checkbox('done').editable(row => !row.locked) * * // with configurator (label / indeterminate / size) * col.checkbox('done', c => c.label('Done').size('s')).editable(true) * ``` */ checkbox(fieldName: keyof TData | string, configurator?: (c: CheckboxColumnConfigurator) => CheckboxColumnConfigurator): CoarGridColumnBuilder; /** * Create a tag column that renders values as `` elements. * * Supports string (split by separator), array, and object array values. * * @param config - Tag rendering configuration (variantMap, size, i18nPrefix, etc.) */ tag(fieldName: keyof TData | string, config?: TagCellRendererConfig): CoarGridColumnBuilder; /** * Create an icon column that renders values as `` elements. * * The cell value is used as the icon name. * * @param config - Icon rendering configuration (size, source, color, onClick) */ icon(fieldName: keyof TData | string, config?: IconCellRendererConfig): CoarGridColumnBuilder; /** * Create a tree column with expand/collapse toggle, indentation, and optional child count. * * Requires `builder.treeData()` and `builder.openRows()` to be configured. * * @param config - Tree cell renderer configuration * * @example * ```ts * .columns([ * col => col.tree('name').header('Name').flex(1), * ]) * ``` */ tree(fieldName: keyof TData | string, config?: TreeCellRendererConfig): CoarGridColumnBuilder; /** * Wrap an existing column builder with left/right decoration slots. * * The inner builder's ColDef is preserved in full — sort, filter, edit, * valueFormatter, comparator, quickFilter, cellRenderer etc. all continue * to work. Only the `cellRenderer` is replaced by a wrapper that renders * `left` slot → inner renderer → `right` slot in a flex row. * * Slot click handlers call `event.stopPropagation()` automatically so they * don't trigger row-click / cell-click events on the grid. * * @example * ```ts * col.wrap(col.field('name').header('Name').flex(1).sortable()) * .left({ icon: (r) => r.starred ? 'star-filled' : 'star-outline' }) * .right({ component: UnreadBadge, params: (r) => ({ count: r.unread }) }) * ``` */ wrap(inner: CoarGridColumnBuilder): CoarGridWrapperColumnBuilder; } //# sourceMappingURL=coar-grid-column-factory.d.ts.map