dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
126 lines (125 loc) • 4 kB
TypeScript
import { RenderCallbackContent } from '../types/cell-content';
/**
* Angular core types - defined locally to avoid requiring @angular/core as a dependency
*/
interface Type<T> extends Function {
new (...args: any[]): T;
}
interface ComponentRef<T> {
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<any> to support different Angular component types
*/
component: Type<any>;
/**
* Input bindings to pass to the component
* These are set using Angular's setInput() method (Angular 14+)
*/
inputs?: Record<string, any>;
/**
* 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<string, (...args: any[]) => 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<any>, options: Record<string, any>) => ComponentRef<any>;
/**
* 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<User> = (row) => createAngularCellWithFactory(createComponent, {
* component: StatusBadgeComponent,
* inputs: { status: row.status }
* })
* ```
*/
export type AngularCellRenderer<TData = any> = (row: TData) => RenderCallbackContent;
export {};