Skip to content

Commit 1bba559

Browse files
ChronosSFChronosSF
authored
Merge pull request #3781 from IgniteUI/copilot/transfer-grid-lite-samples
Add 14 grid-lite samples from igniteui-wc-examples
2 parents 611b207 + 9d6428f commit 1bba559

File tree

83 files changed

+3331
-281
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

83 files changed

+3331
-281
lines changed

‎.github/workflows/deploy-trigger.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,4 +85,4 @@ jobs:
8585
unit: false,
8686
integration: true
8787
}
88-
});
88+
});

‎live-editing/Routes.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import * as TreeGridDvRoutingModule from '../projects/app-lob/src/app/tree-grid/
99
import * as DataDisplayRouting from '../src/app/data-display/data-display.routes';
1010
import * as DataEntriesRouting from '../src/app/data-entries/data-entries.routes';
1111
import * as GridRouting from '../src/app/grid/grids.routes';
12+
import * as GridLiteRouting from '../src/app/grid-lite/grid-lite.routes';
1213
import * as PivotGridRouting from '../src/app/pivot-grid/pivot-grids.routes';
1314
import * as HierarchicalGridRouting from '../src/app/hierarchical-grid/hierarchical-grid.routes';
1415
import * as InteractionsRouting from '../src/app/interactions/interactions.routes';
@@ -68,6 +69,10 @@ export const MODULE_ROUTES = [
6869
path: 'grid',
6970
routes: GridRouting.GridsRoutes
7071
},
72+
{
73+
path: 'grid-lite',
74+
routes: GridLiteRouting.GridLiteRoutes
75+
},
7176
{
7277
path: 'pivot-grid',
7378
routes: PivotGridRouting.PivotGridsRoutes

‎live-editing/configs/GridLiteConfigGenerator.ts‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
import { Config, IConfigGenerator } from 'igniteui-live-editing'
2+
import { BaseAppConfig } from './BaseConfig';
3+
4+
export class GridLiteConfigGenerator implements IConfigGenerator {
5+
public additionalImports = {
6+
//GridLiteDataService: '../../src/app/grid-lite/grid-lite-data.service.ts'
7+
};
8+
9+
public generateConfigs(): Config[] {
10+
const configs = new Array<Config>();
11+
12+
configs.push(new Config({
13+
component: 'GridLiteOverviewComponent',
14+
additionalDependencies: ['igniteui-grid-lite'],
15+
additionalFiles: [
16+
'/src/app/grid-lite/grid-lite-data.service.ts'
17+
],
18+
appConfig: BaseAppConfig
19+
}));
20+
21+
configs.push(new Config({
22+
component: 'GridLiteColumnConfigSimpleComponent',
23+
additionalDependencies: ['igniteui-grid-lite'],
24+
additionalFiles: [
25+
'/src/app/grid-lite/grid-lite-data.service.ts'
26+
],
27+
appConfig: BaseAppConfig
28+
}));
29+
30+
configs.push(new Config({
31+
component: 'GridLiteColumnConfigDynamicComponent',
32+
additionalDependencies: ['igniteui-grid-lite'],
33+
additionalFiles: [
34+
'/src/app/grid-lite/grid-lite-data.service.ts'
35+
],
36+
appConfig: BaseAppConfig
37+
}));
38+
39+
configs.push(new Config({
40+
component: 'GridLiteColumnConfigHeadersComponent',
41+
additionalDependencies: ['igniteui-grid-lite'],
42+
additionalFiles: [
43+
'/src/app/grid-lite/grid-lite-data.service.ts'
44+
],
45+
appConfig: BaseAppConfig
46+
}));
47+
48+
configs.push(new Config({
49+
component: 'GridLiteDataBindingDynamicComponent',
50+
additionalDependencies: ['igniteui-grid-lite'],
51+
additionalFiles: [
52+
'/src/app/grid-lite/grid-lite-data.service.ts'
53+
],
54+
appConfig: BaseAppConfig
55+
}));
56+
57+
configs.push(new Config({
58+
component: 'GridLiteFilteringSimpleComponent',
59+
additionalDependencies: ['igniteui-grid-lite'],
60+
additionalFiles: [
61+
'/src/app/grid-lite/grid-lite-data.service.ts'
62+
],
63+
appConfig: BaseAppConfig
64+
}));
65+
66+
configs.push(new Config({
67+
component: 'GridLiteFilteringEventsComponent',
68+
additionalDependencies: ['igniteui-grid-lite'],
69+
additionalFiles: [
70+
'/src/app/grid-lite/grid-lite-data.service.ts'
71+
],
72+
appConfig: BaseAppConfig
73+
}));
74+
75+
configs.push(new Config({
76+
component: 'GridLiteFilteringPipelineComponent',
77+
additionalDependencies: ['igniteui-grid-lite'],
78+
additionalFiles: [
79+
'/src/app/grid-lite/grid-lite-data.service.ts'
80+
],
81+
appConfig: BaseAppConfig
82+
}));
83+
84+
configs.push(new Config({
85+
component: 'GridLiteSortingSimpleComponent',
86+
additionalDependencies: ['igniteui-grid-lite'],
87+
additionalFiles: [
88+
'/src/app/grid-lite/grid-lite-data.service.ts'
89+
],
90+
appConfig: BaseAppConfig
91+
}));
92+
93+
configs.push(new Config({
94+
component: 'GridLiteSortingEventsComponent',
95+
additionalDependencies: ['igniteui-grid-lite'],
96+
additionalFiles: [
97+
'/src/app/grid-lite/grid-lite-data.service.ts'
98+
],
99+
appConfig: BaseAppConfig
100+
}));
101+
102+
configs.push(new Config({
103+
component: 'GridLiteSortingGridConfigComponent',
104+
additionalDependencies: ['igniteui-grid-lite'],
105+
additionalFiles: [
106+
'/src/app/grid-lite/grid-lite-data.service.ts'
107+
],
108+
appConfig: BaseAppConfig
109+
}));
110+
111+
configs.push(new Config({
112+
component: 'GridLiteSortingPipelineComponent',
113+
additionalDependencies: ['igniteui-grid-lite'],
114+
additionalFiles: [
115+
'/src/app/grid-lite/grid-lite-data.service.ts'
116+
],
117+
appConfig: BaseAppConfig
118+
}));
119+
120+
configs.push(new Config({
121+
component: 'GridLiteStylingCustomComponent',
122+
additionalDependencies: ['igniteui-grid-lite'],
123+
additionalFiles: [
124+
'/src/app/grid-lite/grid-lite-data.service.ts'
125+
],
126+
appConfig: BaseAppConfig
127+
}));
128+
129+
configs.push(new Config({
130+
component: 'GridLiteStylingThemesComponent',
131+
additionalDependencies: ['igniteui-grid-lite'],
132+
additionalFiles: [
133+
'/src/app/grid-lite/grid-lite-data.service.ts'
134+
],
135+
appConfig: BaseAppConfig
136+
}));
137+
138+
return configs;
139+
};
140+
}

‎live-editing/generators/ConfigGenerators.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import { Config, IConfigGenerator } from 'igniteui-live-editing'
2-
import { BaseAppConfig } from './BaseConfig';;
31
import { ActionStripConfigGenerator } from '../configs/ActionStripConfigGenerator';
42
import { AutocompleteConfigGenerator } from '../configs/AutocompleteConfigGenerator';
53
import { AvatarConfigGenerator } from '../configs/AvatarConfigGenerator';
@@ -64,6 +62,7 @@ import { PaginationConfigGenerator } from '../configs/PaginationConfigGenerator'
6462
import { PivotGridConfigGenerator } from '../configs/PivotGridConfigGenerator';
6563
import { QueryBuilderConfigGenerator } from '../configs/QueryBuilderConfigGenerator';
6664
import { TileManagerConfigGenerator } from '../configs/TileManagerConfigGenerator';
65+
import { GridLiteConfigGenerator } from '../configs/GridLiteConfigGenerator';
6766

6867
export const CONFIG_GENERATORS =
6968
[
@@ -118,6 +117,7 @@ export const CONFIG_GENERATORS =
118117
HierarchicalGridConfigGenerator,
119118
TreeGridConfigGenerator,
120119
PivotGridConfigGenerator,
120+
GridLiteConfigGenerator,
121121

122122
// other:
123123
ActionStripConfigGenerator,

‎package-lock.json‎

Lines changed: 42 additions & 11 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,8 @@
7272
"express": "^4.18.2",
7373
"file-saver": "^2.0.2",
7474
"hammerjs": "^2.0.8",
75-
"igniteui-angular": "^20.1.4",
75+
"igniteui-grid-lite": "1.0.0-alpha.9",
76+
"igniteui-angular": "^20.1.6",
7677
"igniteui-angular-charts": "^20.1.0",
7778
"igniteui-angular-core": "^20.1.0",
7879
"igniteui-angular-extras": "^20.0.2",

‎src/app/app.routes.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,10 @@ export const SamplesRoutes: Routes = [
5757
loadChildren: () => import('./grid/grids.routes').then(m => m.GridsRoutes),
5858
path: 'grid'
5959
},
60+
{
61+
loadChildren: () => import('./grid-lite/grid-lite.routes').then(m => m.GridLiteRoutes),
62+
path: 'grid-lite'
63+
},
6064
{
6165
loadChildren: () => import('./pivot-grid/pivot-grids.routes').then(m => m.PivotGridsRoutes),
6266
path: 'pivot-grid'

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

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,8 @@
1-
<igx-chips-area (reorder)="chipsOrderChanged($event)">
1+
<igx-chips-area>
22
@for (chip of chipList; track chip) {
3-
<igx-chip
4-
[id]="chip.id"
5-
[selectable]="true"
6-
[selectIcon]="mySelectIcon"
7-
[removable]="true"
8-
[removeIcon]="myRemoveIcon"
9-
(remove)="chipRemoved($event)"
10-
[draggable]="true">
11-
<igx-icon igxPrefix>{{chip.icon}}</igx-icon>
3+
<igx-chip [ngClass]="chip.class">
4+
<igx-icon igxPrefix name={{chip.icon}}></igx-icon>
125
{{chip.text}}
136
</igx-chip>
147
}
158
</igx-chips-area>
16-
17-
<ng-template #mySelectIcon>
18-
<igx-icon>check_circle</igx-icon>
19-
</ng-template>
20-
21-
<ng-template #myRemoveIcon>
22-
<igx-icon>delete</igx-icon>
23-
</ng-template>

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

Lines changed: 45 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,48 @@
11
@use "layout.scss";
22
@use "igniteui-angular/theming" as *;
33

4-
$custom-theme: chip-theme(
5-
$background: #57a5cd,
6-
$selected-background: #ecaa53,
7-
$remove-icon-color: #d81414,
8-
$border-radius: 5px,
9-
);
10-
11-
@include css-vars($custom-theme);
4+
// CSS variables approach
5+
6+
igx-chip {
7+
--text-color: #fff;
8+
--hover-text-color: #fff;
9+
--focus-text-color: #fff;
10+
--border-radius: #{rem(5px)};
11+
}
12+
13+
.xcom {
14+
--background: #000;
15+
--hover-background: #000;
16+
--focus-background: #323232;
17+
}
18+
19+
.youtube {
20+
--background: #cd201f;
21+
--hover-background: #cd201f;
22+
--focus-background: #9f1717;
23+
}
24+
25+
.facebook {
26+
--background: #3b5999;
27+
--hover-background: #3b5999;
28+
--focus-background: #2c4378;
29+
}
30+
31+
.linkedin {
32+
--background: #55acee;
33+
--hover-background: #55acee;
34+
--focus-background: #4682af;
35+
}
36+
37+
// Sass theme approach
38+
39+
// $custom-chip-theme: chip-theme(
40+
// $background: #cd201f,
41+
// $text-color: #fff,
42+
// $hover-background: #cd201f,
43+
// $focus-background: #9f1717,
44+
// $border-radius: rem(5px)
45+
// );
46+
47+
// @include css-vars($custom-chip-theme)
48+

0 commit comments

Comments
 (0)