import { TemplateResult } from 'lit'; /** * Simple primitive values that can be rendered directly */ export type CellContentValue = string | number | boolean | null | undefined; /** * Cell content with inline styling * @example * { * value: 'Active', * style: { color: 'green', fontWeight: 500 }, * className: 'status-badge' * } */ export interface StyledCellContent { /** The content to display */ value: CellContentValue; /** Inline styles to apply (CSS-in-JS or Record) */ style?: Partial | Record; /** CSS class name(s) to apply */ className?: string; } /** * Cell content as HTML string (sanitized by default) * @example * { * html: 'Active', * sanitize: true * } */ export interface HtmlCellContent { /** HTML string to render */ html: string; /** Whether to sanitize the HTML (default: true) */ sanitize?: boolean; } /** * Cell content with custom render callback * Provides maximum flexibility for framework integration * @example * { * render: (container) => { * const badge = document.createElement('dap-ds-badge') * badge.setAttribute('variant', 'success') * badge.textContent = 'Active' * container.appendChild(badge) * }, * cleanup: () => { * // Clean up resources * } * } */ export interface RenderCallbackContent { /** * Callback to render content into the container * @param container - The DOM element to render into */ render: (container: HTMLElement) => void; /** * Optional cleanup callback called when cell is removed * Use this to unmount components, remove listeners, etc. */ cleanup?: () => void; } /** * All supported cell content formats * * Format 1: Primitive Values (string, number, boolean, null, undefined) * Format 2: Styled Objects ({ value, style, className }) * Format 3: DOM Elements (HTMLElement instances) * Format 4: HTML Strings ({ html, sanitize }) * Format 5: Render Callbacks ({ render, cleanup }) * Format 6: Lit Templates (TemplateResult from 'lit') */ export type CellContent = CellContentValue | StyledCellContent | HtmlCellContent | RenderCallbackContent | HTMLElement | TemplateResult;