feat: Add Grid Lite Angular wrapper

package.json

@@ -126,6 +126,7 @@
     "hammerjs": "^2.0.8",
     "ig-typedoc-theme": "^7.0.1",
     "igniteui-dockmanager": "^1.17.0",
+    "igniteui-grid-lite": "^0.4.0-beta.3",
     "igniteui-i18n-resources": "^1.0.2",
     "igniteui-sassdoc-theme": "^2.1.0",
     "igniteui-webcomponents": "^6.5.0",

projects/igniteui-angular/grids/lite/index.ts

@@ -0,0 +1 @@
+export * from './src/public_api';

projects/igniteui-angular/grids/lite/ng-package.json

@@ -0,0 +1 @@
+{}

projects/igniteui-angular/grids/lite/src/grid-lite-column.component.html

@@ -0,0 +1,15 @@
+<igc-grid-lite-column
+  [field]="field()"
+  [dataType]="dataType()"
+  [header]="header()"
+  [width]="width()"
+  [hidden]="hidden()"
+  [resizable]="resizable()"
+  [sortable]="sortable()"
+  [sortingCaseSensitive]="sortingCaseSensitive()"
+  [sortConfiguration]="sortConfiguration()"
+  [filterable]="filterable()"
+  [filteringCaseSensitive]="filteringCaseSensitive()"
+  [headerTemplate]="headerTemplateFunc"
+  [cellTemplate]="cellTemplateFunc"
+></igc-grid-lite-column>

projects/igniteui-angular/grids/lite/src/grid-lite-column.component.ts

@@ -0,0 +1,194 @@
+import { ChangeDetectionStrategy, Component, contentChild, CUSTOM_ELEMENTS_SCHEMA, Directive, effect, EmbeddedViewRef, inject, input, TemplateRef, ViewContainerRef } from '@angular/core';
+import { ColumnConfiguration, ColumnSortConfiguration, IgcCellContext, IgcHeaderContext, Keys } from 'igniteui-grid-lite';
+
+/** Configuration object for grid columns. */
+export type IgxGridLiteColumnConfiguration<T extends object = any> = ColumnConfiguration<T>;
+
+export type IgxGridLiteColumnSortConfiguration<T extends object = any> = ColumnSortConfiguration<T>;
+
+/** Possible data types of a column. */
+type ColumnDataType = 'string' | 'number' | 'boolean';
+
+@Component({
+    selector: 'igx-grid-lite-column',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    templateUrl: './grid-lite-column.component.html'
+})
+export class IgxGridLiteColumnComponent<T extends object> {
+
+    //#region Internal state
+
+    private readonly _view = inject(ViewContainerRef);
+
+    /** Reference to the embedded view for the header template and its template function. */
+    private headerViewRef?: EmbeddedViewRef<IgxGridLiteHeaderTemplateContext<T>>;
+    protected headerTemplateFunc?: (ctx: IgcHeaderContext<T>) => Node[];
+
+    /** Reference to the embedded view for the cell template and its template function. */
+    private cellViewRefs? = new Map<T, EmbeddedViewRef<IgxGridLiteCellTemplateContext<T>>>();
+    protected cellTemplateFunc?: (ctx: IgcCellContext<T>) => Node[];
+
+    /** Template directives used for inline templating */
+    private readonly headerTemplateDirective = contentChild(IgxGridLiteHeaderTemplateDirective<T>);
+    private readonly cellTemplateDirective = contentChild(IgxGridLiteCellTemplateDirective<T>);
+
+    //#endregion
+
+    //#region Inputs
+
+    /** The field from the data for this column. */
+    public readonly field = input<Keys<T>>();
+
+    /** The data type of the column's values. */
+    public readonly dataType = input<ColumnDataType>('string');
+
+    /** The header text of the column. */
+    public readonly header = input<string>();
+
+    /** The width of the column. */
+    public readonly width = input<string>();
+
+    /** Indicates whether the column is hidden. */
+    public readonly hidden = input<boolean>(false);
+
+    /** Indicates whether the column is resizable. */
+    public readonly resizable = input<boolean>(false);
+
+    /** Indicates whether the column is sortable. */
+    public readonly sortable = input<boolean>(false);
+
+    /** Whether sort operations will be case sensitive. */
+    public readonly sortingCaseSensitive = input<boolean>(false);
+
+    /** Sort configuration for the column (e.g., custom comparer). */
+    public readonly sortConfiguration = input<IgxGridLiteColumnSortConfiguration<T>>();
+
+    /** Indicates whether the column is filterable. */
+    public readonly filterable = input<boolean>(false);
+
+    /** Whether filter operations will be case sensitive. */
+    public readonly filteringCaseSensitive = input<boolean>(false);
+
+    /** Custom header template for the column. */
+    public readonly headerTemplate = input<TemplateRef<IgxGridLiteHeaderTemplateContext<T>>>();
+
+    /** Custom cell template for the column. */
+    public readonly cellTemplate = input<TemplateRef<IgxGridLiteCellTemplateContext<T>>>();
+
+    //#endregion
+
+    constructor() {
+        effect((onCleanup) => {
+            const template = this.headerTemplateDirective()?.template ?? this.headerTemplate();
+            if (template) {
+                this.headerTemplateFunc = (ctx: IgcHeaderContext<T>) => {
+                    if (!this.headerViewRef) {
+                        const { column, ...rest } = ctx;
+                        const angularContext = {
+                            ...rest,
+                            $implicit: column
+                        }
+                        this.headerViewRef = this._view.createEmbeddedView(template, angularContext);
+                    }
+                    return this.headerViewRef.rootNodes;
+                };
+            }
+            onCleanup(() => {
+                if (this.headerViewRef) {
+                    this.headerViewRef.destroy();
+                    this.headerViewRef = undefined;
+                }
+            })
+        });
+
+        effect((onCleanup) => {
+            const template = this.cellTemplateDirective()?.template ?? this.cellTemplate();
+            if (template) {
+                this.cellTemplateFunc = (ctx: IgcCellContext<T>) => {
+                    const oldViewRef = this.cellViewRefs.get(ctx.row.data);
+                    const { value, ...restContext } = ctx;
+                    const angularContext = {
+                        ...restContext,
+                        $implicit: value,
+                    } as IgxGridLiteCellTemplateContext<T>;
+                    if (!oldViewRef) {
+                        const newViewRef = this._view.createEmbeddedView(template, angularContext);
+                        this.cellViewRefs.set(ctx.row.data, newViewRef);
+                        return newViewRef.rootNodes;
+                    }
+                    oldViewRef.context = angularContext;
+                    return oldViewRef.rootNodes;
+                };
+            }
+            onCleanup(() => {
+                this.cellViewRefs.forEach((viewRef) => {
+                    viewRef.destroy();
+                });
+                this.cellViewRefs?.clear();
+            });
+        });
+    }
+}
+
+/**
+ * Context provided to the header template.
+ */
+export type IgxGridLiteHeaderTemplateContext<T extends object> = Omit<IgcHeaderContext<T>, 'column'> & {
+    /**
+     * The current configuration for the column.
+     */
+    $implicit: IgcHeaderContext<T>['column'];
+}
+
+/**
+ * Context provided to the header template.
+ */
+export type IgxGridLiteCellTemplateContext<T extends object> = Omit<IgcCellContext<T>, 'value'> & {
+    /**
+     * The value from the data source for this cell.
+     */
+    $implicit: IgcCellContext<T>['value'];
+};
+
+
+
+/**
+ * Directive providing type information for header template contexts.
+ * Use this directive on ng-template elements that render header templates.
+ *
+ * @example
+ * ```html
+ * <ng-template igxGridLiteHeaderTemplate let-column>
+ *   <div>{{column.header}}</div>
+ * </ng-template>
+ * ```
+ */
+@Directive({ selector: '[igxGridLiteHeaderTemplate]' })
+export class IgxGridLiteHeaderTemplateDirective<T extends object = any> {
+    public template = inject<TemplateRef<IgxGridLiteHeaderTemplateContext<T>>>(TemplateRef);
+
+    public static ngTemplateContextGuard<T extends object>(_: IgxGridLiteHeaderTemplateDirective<T>, ctx: any): ctx is IgxGridLiteHeaderTemplateContext<T> {
+        return true;
+    }
+}
+
+/**
+ * Directive providing type information for cell template contexts.
+ * Use this directive on ng-template elements that render cell templates.
+ *
+ * @example
+ * ```html
+ * <ng-template igxGridLiteCellTemplate let-value let-column="column" let-rowIndex="rowIndex" let-data="data">
+ *   <div>{{value}}</div>
+ * </ng-template>
+ * ```
+ */
+@Directive({ selector: '[igxGridLiteCellTemplate]' })
+export class IgxGridLiteCellTemplateDirective<T extends object> {
+    public template = inject<TemplateRef<IgxGridLiteCellTemplateContext<T>>>(TemplateRef);
+
+    public static ngTemplateContextGuard<T extends object>(_: IgxGridLiteCellTemplateDirective<T>, ctx: unknown): ctx is IgxGridLiteCellTemplateContext<T> {
+        return true;
+    }
+}

projects/igniteui-angular/grids/lite/src/grid-lite.component.html

@@ -0,0 +1,15 @@
+<igc-grid-lite
+  #grid
+  [data]="data()"
+  [autoGenerate]="autoGenerate()"
+  [sortingOptions]="sortingOptions()"
+  [dataPipelineConfiguration]="dataPipelineConfiguration()"
+  [sortingExpressions]="_sortingExpressions()"
+  [filterExpressions]="_filteringExpressions()"
+  (sorting)="(sorting)"
+  (sorted)="(sorted)"
+  (filtering)="(filtering)"
+  (filtered)="(filtered)"
+>
+  <ng-content></ng-content>
+</igc-grid-lite>