import { RenderCallbackContent } from '../types/cell-content'; /** * Angular core types - defined locally to avoid requiring @angular/core as a dependency */ interface Type extends Function { new (...args: any[]): T; } interface ComponentRef { instance: T; setInput: (name: string, value: unknown) => void; changeDetectorRef: { detectChanges: () => void; }; destroy: () => void; } interface EnvironmentInjector { get: (token: any) => any; } /** * Options for creating an Angular cell */ export interface AngularCellOptions { /** * Angular component class to render * Uses Type to support different Angular component types */ component: Type; /** * Input bindings to pass to the component * These are set using Angular's setInput() method (Angular 14+) */ inputs?: Record; /** * Output event handlers to subscribe to * Each output is expected to be an EventEmitter that will be subscribed to * @example * { * click: (e) => console.log('clicked', e), * change: (value) => console.log('changed', value) * } */ outputs?: Record void>; /** * Content to project into the component (ng-content) * Note: Dynamic content projection is limited in Angular */ content?: string; /** * Optional EnvironmentInjector for dependency injection * If not provided, component will be created without DI context */ environmentInjector?: EnvironmentInjector; } /** * Type for Angular's createComponent function * Made flexible to support different Angular versions */ type CreateComponentFn = (component: Type, options: Record) => ComponentRef; /** * Create a datatable cell that renders an Angular component using a factory function. * * This helper manages the Angular component lifecycle, creating and destroying * the component when the cell is added/removed from the table. * * Note: This helper requires Angular 14+ for the `createComponent` function * and `setInput` method support. * * @param createComponentFn - Angular's createComponent function from @angular/core * @param options - Angular cell options * @returns Render callback content for the datatable * * @example * ```typescript * import { createComponent, EnvironmentInjector, inject } from '@angular/core' * import { createAngularCellWithFactory } from 'dap-design-system/helpers/angular' * import { StatusBadgeComponent } from './status-badge.component' * * // Inside a component class * private readonly injector = inject(EnvironmentInjector) * * columns = [ * { * id: 'status', * header: 'Status', * cell: (info) => createAngularCellWithFactory(createComponent, { * component: StatusBadgeComponent, * inputs: { * status: info.row.original.status, * variant: 'success' * }, * outputs: { * click: () => console.log('Badge clicked') * }, * environmentInjector: this.injector * }) * } * ] * ``` */ export declare function createAngularCellWithFactory(createComponentFn: CreateComponentFn, options: AngularCellOptions): RenderCallbackContent; /** * @deprecated Use createAngularCellWithFactory instead. * This alias is provided for backwards compatibility. */ export declare const createAngularCell: typeof createAngularCellWithFactory; /** * Type helper for creating type-safe cell renderers * * @example * ```typescript * import type { AngularCellRenderer } from 'dap-design-system/helpers/angular' * * interface User { * id: number * status: string * } * * const statusCell: AngularCellRenderer = (row) => createAngularCellWithFactory(createComponent, { * component: StatusBadgeComponent, * inputs: { status: row.status } * }) * ``` */ export type AngularCellRenderer = (row: TData) => RenderCallbackContent; export {};