Fix build issues - install igc-grid-lite, fix event handlers, update routes

Co-authored-by: ChronosSF <2188411+ChronosSF@users.noreply.github.com>

Author: Copilot

package-lock.json

@@ -72,6 +72,7 @@
     "express": "^4.18.2",
     "file-saver": "^2.0.2",
     "hammerjs": "^2.0.8",
+    "igc-grid-lite": "^1.0.0-alpha.5",
     "igniteui-angular": "^20.1.6",
     "igniteui-angular-charts": "^19.0.1",
     "igniteui-angular-core": "^19.0.1",

package.json

@@ -4,7 +4,7 @@
     <igc-switch 
       label-position="before"
       [checked]="hasFormatters"
-      (igcChange)="toggleFormatters($event.detail)">
+      (igcChange)="toggleFormatters($event.detail.checked)">
       Value formatters:
     </igc-switch>
   </section>

src/app/grid/grid-lite/grid-lite-column-config-dynamic/grid-lite-column-config-dynamic.component.html

@@ -25,7 +25,7 @@ export class GridLiteColumnConfigDynamicComponent implements OnInit {
 
   private formatter = new Intl.NumberFormat('en-EN', {
     style: 'currency',
-    currency: 'EUR',
+    currency: 'EUR'
   });
 
   ngOnInit() {

src/app/grid/grid-lite/grid-lite-column-config-dynamic/grid-lite-column-config-dynamic.component.ts

@@ -22,7 +22,7 @@ export class GridLiteColumnConfigSimpleComponent implements OnInit {
 
   private formatter = new Intl.NumberFormat('en-EN', {
     style: 'currency',
-    currency: 'EUR',
+    currency: 'EUR'
   });
 
   ngOnInit() {

src/app/grid/grid-lite/grid-lite-column-config-simple/grid-lite-column-config-simple.component.ts

@@ -41,7 +41,7 @@ export class GridLiteDataService {
     'Rodriguez', 'Martinez', 'Wilson', 'Anderson', 'Taylor', 'Thomas', 'Moore', 'Jackson', 'White', 'Harris'];
   private productNames = ['Widget', 'Gadget', 'Doohickey', 'Thingamajig', 'Gizmo', 'Contraption', 
     'Device', 'Tool', 'Apparatus', 'Instrument', 'Machine', 'Equipment'];
-  private priorities: Array<'Low' | 'Standard' | 'High'> = ['Low', 'Standard', 'High'];
+  private priorities: ('Low' | 'Standard' | 'High')[] = ['Low', 'Standard', 'High'];
 
   private randomInt(min: number, max: number): number {
     return Math.floor(Math.random() * (max - min + 1)) + min;

src/app/grid/grid-lite/grid-lite-data.service.ts

@@ -5,7 +5,7 @@ import {
   IgcRatingComponent,
   IgcCheckboxComponent,
   IgcSelectComponent,
-  IgcAvatarComponent,
+  IgcAvatarComponent
 } from 'igniteui-webcomponents';
 import { IgcGridLite } from 'igc-grid-lite';
 import { GridLiteDataService, User } from '../grid-lite-data.service';

src/app/grid/grid-lite/grid-lite-overview/grid-lite-overview.component.ts

@@ -2,12 +2,12 @@
   <section class="config-panel">
     <igc-switch
       [checked]="sortConfiguration.multiple"
-      (igcChange)="updateConfig('multiple', $event.detail)">
+      (igcChange)="updateConfig('multiple', $event.detail.checked)">
       Enable multi-sort
     </igc-switch>
     <igc-switch
       [checked]="sortConfiguration.triState"
-      (igcChange)="updateConfig('triState', $event.detail)">
+      (igcChange)="updateConfig('triState', $event.detail.checked)">
       Enable tri-state sorting
     </igc-switch>
   </section>

src/app/grid/grid-lite/grid-lite-sorting-grid-config/grid-lite-sorting-grid-config.component.html

@@ -47,6 +47,20 @@ import { GridPasteSampleComponent } from './grid-paste/grid-paste-sample.compone
 import { RemoteFilteringSampleComponent } from './grid-remote-filtering-sample/remote-filtering-sample.component';
 import { RemotePagingGridSampleComponent } from './grid-remote-paging-sample/remote-paging-sample.component';
 import { ResizingSampleComponent } from './grid-resizing-sample/grid-resizing-sample.component';
+import { GridLiteOverviewComponent } from './grid-lite/grid-lite-overview/grid-lite-overview.component';
+import { GridLiteColumnConfigSimpleComponent } from './grid-lite/grid-lite-column-config-simple/grid-lite-column-config-simple.component';
+import { GridLiteColumnConfigDynamicComponent } from './grid-lite/grid-lite-column-config-dynamic/grid-lite-column-config-dynamic.component';
+import { GridLiteColumnConfigHeadersComponent } from './grid-lite/grid-lite-column-config-headers/grid-lite-column-config-headers.component';
+import { GridLiteDataBindingDynamicComponent } from './grid-lite/grid-lite-data-binding-dynamic/grid-lite-data-binding-dynamic.component';
+import { GridLiteFilteringSimpleComponent } from './grid-lite/grid-lite-filtering-simple/grid-lite-filtering-simple.component';
+import { GridLiteFilteringEventsComponent } from './grid-lite/grid-lite-filtering-events/grid-lite-filtering-events.component';
+import { GridLiteFilteringPipelineComponent } from './grid-lite/grid-lite-filtering-pipeline/grid-lite-filtering-pipeline.component';
+import { GridLiteSortingSimpleComponent } from './grid-lite/grid-lite-sorting-simple/grid-lite-sorting-simple.component';
+import { GridLiteSortingEventsComponent } from './grid-lite/grid-lite-sorting-events/grid-lite-sorting-events.component';
+import { GridLiteSortingGridConfigComponent } from './grid-lite/grid-lite-sorting-grid-config/grid-lite-sorting-grid-config.component';
+import { GridLiteSortingPipelineComponent } from './grid-lite/grid-lite-sorting-pipeline/grid-lite-sorting-pipeline.component';
+import { GridLiteStylingCustomComponent } from './grid-lite/grid-lite-styling-custom/grid-lite-styling-custom.component';
+import { GridLiteStylingThemesComponent } from './grid-lite/grid-lite-styling-themes/grid-lite-styling-themes.component';
 import { gridsRoutesData } from './grid-routes-data';
 import { GridDragBaseSampleComponent } from './grid-row-drag-base/grid-row-drag-base.component';
 import { GridDragToGridSampleComponent } from './grid-row-drag-to-grid/grid-row-drag-to-grid.component';
@@ -784,10 +798,73 @@ export const GridsRoutes: Routes = [
         path: 'grid-cascading-combos'
     },
     {
-        path: 'grid-lite',
-        loadChildren: () => import('./grid-lite/grid-lite.routes').then(m => m.gridLiteRoutes),
-        data: {
-            displayName: 'Grid Lite'
-        }
+        component: GridLiteOverviewComponent,
+        data: { displayName: 'Grid Lite - Overview' },
+        path: 'grid-lite-overview'
+    },
+    {
+        component: GridLiteColumnConfigSimpleComponent,
+        data: { displayName: 'Grid Lite - Column Config Simple' },
+        path: 'grid-lite-column-config-simple'
+    },
+    {
+        component: GridLiteColumnConfigDynamicComponent,
+        data: { displayName: 'Grid Lite - Column Config Dynamic' },
+        path: 'grid-lite-column-config-dynamic'
+    },
+    {
+        component: GridLiteColumnConfigHeadersComponent,
+        data: { displayName: 'Grid Lite - Column Config Headers' },
+        path: 'grid-lite-column-config-headers'
+    },
+    {
+        component: GridLiteDataBindingDynamicComponent,
+        data: { displayName: 'Grid Lite - Data Binding Dynamic' },
+        path: 'grid-lite-data-binding-dynamic'
+    },
+    {
+        component: GridLiteFilteringSimpleComponent,
+        data: { displayName: 'Grid Lite - Filtering Simple' },
+        path: 'grid-lite-filtering-simple'
+    },
+    {
+        component: GridLiteFilteringEventsComponent,
+        data: { displayName: 'Grid Lite - Filtering Events' },
+        path: 'grid-lite-filtering-events'
+    },
+    {
+        component: GridLiteFilteringPipelineComponent,
+        data: { displayName: 'Grid Lite - Filtering Pipeline' },
+        path: 'grid-lite-filtering-pipeline'
+    },
+    {
+        component: GridLiteSortingSimpleComponent,
+        data: { displayName: 'Grid Lite - Sorting Simple' },
+        path: 'grid-lite-sorting-simple'
+    },
+    {
+        component: GridLiteSortingEventsComponent,
+        data: { displayName: 'Grid Lite - Sorting Events' },
+        path: 'grid-lite-sorting-events'
+    },
+    {
+        component: GridLiteSortingGridConfigComponent,
+        data: { displayName: 'Grid Lite - Sorting Grid Config' },
+        path: 'grid-lite-sorting-grid-config'
+    },
+    {
+        component: GridLiteSortingPipelineComponent,
+        data: { displayName: 'Grid Lite - Sorting Pipeline' },
+        path: 'grid-lite-sorting-pipeline'
+    },
+    {
+        component: GridLiteStylingCustomComponent,
+        data: { displayName: 'Grid Lite - Styling Custom' },
+        path: 'grid-lite-styling-custom'
+    },
+    {
+        component: GridLiteStylingThemesComponent,
+        data: { displayName: 'Grid Lite - Styling Themes' },
+        path: 'grid-lite-styling-themes'
     }
 ];