Add 14 grid-lite samples from igniteui-wc-examples

.github/workflows/deploy-trigger.yml

@@ -85,4 +85,4 @@ jobs:
                 unit: false,
                 integration: true
               }
-            });
+            });

live-editing/Routes.ts

@@ -9,6 +9,7 @@ import * as TreeGridDvRoutingModule from '../projects/app-lob/src/app/tree-grid/
 import * as DataDisplayRouting from '../src/app/data-display/data-display.routes';
 import * as DataEntriesRouting from '../src/app/data-entries/data-entries.routes';
 import * as GridRouting from '../src/app/grid/grids.routes';
+import * as GridLiteRouting from '../src/app/grid-lite/grid-lite.routes';
 import * as PivotGridRouting from '../src/app/pivot-grid/pivot-grids.routes';
 import * as HierarchicalGridRouting from '../src/app/hierarchical-grid/hierarchical-grid.routes';
 import * as InteractionsRouting from '../src/app/interactions/interactions.routes';
@@ -68,6 +69,10 @@ export const MODULE_ROUTES = [
         path: 'grid',
         routes: GridRouting.GridsRoutes
     },
+    {
+        path: 'grid-lite',
+        routes: GridLiteRouting.GridLiteRoutes
+    },
     {
         path: 'pivot-grid',
         routes: PivotGridRouting.PivotGridsRoutes

live-editing/configs/GridLiteConfigGenerator.ts

@@ -0,0 +1,140 @@
+import { Config, IConfigGenerator } from 'igniteui-live-editing'
+import { BaseAppConfig } from './BaseConfig';
+
+export class GridLiteConfigGenerator implements IConfigGenerator {
+    public additionalImports = {
+        //GridLiteDataService: '../../src/app/grid-lite/grid-lite-data.service.ts'
+    };
+
+    public generateConfigs(): Config[] {
+        const configs = new Array<Config>();
+
+        configs.push(new Config({
+            component: 'GridLiteOverviewComponent',
+            additionalDependencies: ['igniteui-grid-lite'],
+            additionalFiles: [
+                '/src/app/grid-lite/grid-lite-data.service.ts'
+            ],
+            appConfig: BaseAppConfig
+        }));
+
+        configs.push(new Config({
+            component: 'GridLiteColumnConfigSimpleComponent',
+            additionalDependencies: ['igniteui-grid-lite'],
+            additionalFiles: [
+                '/src/app/grid-lite/grid-lite-data.service.ts'
+            ],
+            appConfig: BaseAppConfig
+        }));
+
+        configs.push(new Config({
+            component: 'GridLiteColumnConfigDynamicComponent',
+            additionalDependencies: ['igniteui-grid-lite'],
+            additionalFiles: [
+                '/src/app/grid-lite/grid-lite-data.service.ts'
+            ],
+            appConfig: BaseAppConfig
+        }));
+
+        configs.push(new Config({
+            component: 'GridLiteColumnConfigHeadersComponent',
+            additionalDependencies: ['igniteui-grid-lite'],
+            additionalFiles: [
+                '/src/app/grid-lite/grid-lite-data.service.ts'
+            ],
+            appConfig: BaseAppConfig
+        }));
+
+        configs.push(new Config({
+            component: 'GridLiteDataBindingDynamicComponent',
+            additionalDependencies: ['igniteui-grid-lite'],
+            additionalFiles: [
+                '/src/app/grid-lite/grid-lite-data.service.ts'
+            ],
+            appConfig: BaseAppConfig
+        }));
+
+        configs.push(new Config({
+            component: 'GridLiteFilteringSimpleComponent',
+            additionalDependencies: ['igniteui-grid-lite'],
+            additionalFiles: [
+                '/src/app/grid-lite/grid-lite-data.service.ts'
+            ],
+            appConfig: BaseAppConfig
+        }));
+
+        configs.push(new Config({
+            component: 'GridLiteFilteringEventsComponent',
+            additionalDependencies: ['igniteui-grid-lite'],
+            additionalFiles: [
+                '/src/app/grid-lite/grid-lite-data.service.ts'
+            ],
+            appConfig: BaseAppConfig
+        }));
+
+        configs.push(new Config({
+            component: 'GridLiteFilteringPipelineComponent',
+            additionalDependencies: ['igniteui-grid-lite'],
+            additionalFiles: [
+                '/src/app/grid-lite/grid-lite-data.service.ts'
+            ],
+            appConfig: BaseAppConfig
+        }));
+
+        configs.push(new Config({
+            component: 'GridLiteSortingSimpleComponent',
+            additionalDependencies: ['igniteui-grid-lite'],
+            additionalFiles: [
+                '/src/app/grid-lite/grid-lite-data.service.ts'
+            ],
+            appConfig: BaseAppConfig
+        }));
+
+        configs.push(new Config({
+            component: 'GridLiteSortingEventsComponent',
+            additionalDependencies: ['igniteui-grid-lite'],
+            additionalFiles: [
+                '/src/app/grid-lite/grid-lite-data.service.ts'
+            ],
+            appConfig: BaseAppConfig
+        }));
+
+        configs.push(new Config({
+            component: 'GridLiteSortingGridConfigComponent',
+            additionalDependencies: ['igniteui-grid-lite'],
+            additionalFiles: [
+                '/src/app/grid-lite/grid-lite-data.service.ts'
+            ],
+            appConfig: BaseAppConfig
+        }));
+
+        configs.push(new Config({
+            component: 'GridLiteSortingPipelineComponent',
+            additionalDependencies: ['igniteui-grid-lite'],
+            additionalFiles: [
+                '/src/app/grid-lite/grid-lite-data.service.ts'
+            ],
+            appConfig: BaseAppConfig
+        }));
+
+        configs.push(new Config({
+            component: 'GridLiteStylingCustomComponent',
+            additionalDependencies: ['igniteui-grid-lite'],
+            additionalFiles: [
+                '/src/app/grid-lite/grid-lite-data.service.ts'
+            ],
+            appConfig: BaseAppConfig
+        }));
+
+        configs.push(new Config({
+            component: 'GridLiteStylingThemesComponent',
+            additionalDependencies: ['igniteui-grid-lite'],
+            additionalFiles: [
+                '/src/app/grid-lite/grid-lite-data.service.ts'
+            ],
+            appConfig: BaseAppConfig
+        }));
+
+        return configs;
+    };
+}

live-editing/generators/ConfigGenerators.ts

@@ -1,5 +1,3 @@
-import { Config, IConfigGenerator } from 'igniteui-live-editing'
-import { BaseAppConfig } from './BaseConfig';;
 import { ActionStripConfigGenerator } from '../configs/ActionStripConfigGenerator';
 import { AutocompleteConfigGenerator } from '../configs/AutocompleteConfigGenerator';
 import { AvatarConfigGenerator } from '../configs/AvatarConfigGenerator';
@@ -64,6 +62,7 @@ import { PaginationConfigGenerator } from '../configs/PaginationConfigGenerator'
 import { PivotGridConfigGenerator } from '../configs/PivotGridConfigGenerator';
 import { QueryBuilderConfigGenerator } from '../configs/QueryBuilderConfigGenerator';
 import { TileManagerConfigGenerator } from '../configs/TileManagerConfigGenerator';
+import { GridLiteConfigGenerator } from '../configs/GridLiteConfigGenerator';
 
 export const CONFIG_GENERATORS =
     [
@@ -118,6 +117,7 @@ export const CONFIG_GENERATORS =
         HierarchicalGridConfigGenerator,
         TreeGridConfigGenerator,
         PivotGridConfigGenerator,
+        GridLiteConfigGenerator,
 
         // other:
         ActionStripConfigGenerator,

package.json

@@ -72,7 +72,8 @@
     "express": "^4.18.2",
     "file-saver": "^2.0.2",
     "hammerjs": "^2.0.8",
-    "igniteui-angular": "^20.1.4",
+    "igniteui-grid-lite": "1.0.0-alpha.9",
+    "igniteui-angular": "^20.1.6",
     "igniteui-angular-charts": "^20.1.0",
     "igniteui-angular-core": "^20.1.0",
     "igniteui-angular-extras": "^20.0.2",

src/app/app.routes.ts

@@ -57,6 +57,10 @@ export const SamplesRoutes: Routes = [
         loadChildren: () => import('./grid/grids.routes').then(m => m.GridsRoutes),
         path: 'grid'
     },
+    {
+        loadChildren: () => import('./grid-lite/grid-lite.routes').then(m => m.GridLiteRoutes),
+        path: 'grid-lite'
+    },
     {
         loadChildren: () => import('./pivot-grid/pivot-grids.routes').then(m => m.PivotGridsRoutes),
         path: 'pivot-grid'

src/app/data-display/chip/chip-styling/chip-styling.component.html

@@ -1,23 +1,8 @@
-<igx-chips-area (reorder)="chipsOrderChanged($event)">
+<igx-chips-area>
   @for (chip of chipList; track chip) {
-    <igx-chip
-      [id]="chip.id"
-      [selectable]="true"
-      [selectIcon]="mySelectIcon"
-      [removable]="true"
-      [removeIcon]="myRemoveIcon"
-      (remove)="chipRemoved($event)"
-      [draggable]="true">
-      <igx-icon igxPrefix>{{chip.icon}}</igx-icon>
+    <igx-chip [ngClass]="chip.class">
+      <igx-icon igxPrefix name={{chip.icon}}></igx-icon>
       {{chip.text}}
     </igx-chip>
   }
 </igx-chips-area>
-
-<ng-template #mySelectIcon>
-  <igx-icon>check_circle</igx-icon>
-</ng-template>
-
-<ng-template #myRemoveIcon>
-  <igx-icon>delete</igx-icon>
-</ng-template>

src/app/data-display/chip/chip-styling/chip-styling.component.scss

@@ -1,11 +1,48 @@
 @use "layout.scss";
 @use "igniteui-angular/theming" as *;
 
-$custom-theme: chip-theme(
-  $background: #57a5cd,
-  $selected-background: #ecaa53,
-  $remove-icon-color: #d81414,
-  $border-radius: 5px,
-);
-
-@include css-vars($custom-theme);
+// CSS variables approach
+
+igx-chip {
+    --text-color: #fff;
+    --hover-text-color: #fff;
+    --focus-text-color: #fff;
+    --border-radius: #{rem(5px)};
+}
+
+.xcom {
+    --background: #000;
+    --hover-background: #000;
+    --focus-background: #323232;
+}
+
+.youtube {
+    --background: #cd201f;
+    --hover-background: #cd201f;
+    --focus-background: #9f1717;
+}
+
+.facebook {
+    --background: #3b5999;
+    --hover-background: #3b5999;
+    --focus-background: #2c4378;
+}
+
+.linkedin {
+    --background: #55acee;
+    --hover-background: #55acee;
+    --focus-background: #4682af;
+}
+
+// Sass theme approach
+
+// $custom-chip-theme: chip-theme(
+//     $background: #cd201f,
+//     $text-color: #fff,
+//     $hover-background: #cd201f,
+//     $focus-background: #9f1717,
+//     $border-radius: rem(5px)
+// );
+
+// @include css-vars($custom-chip-theme)
+