Skip to content

Commit 66d1514

Browse files
ChronosSFChronosSF
authored
Merge pull request #3508 from IgniteUI/simeonoff/samples-18.1.x
refactor(*): update samples related to the 18.1.x release
2 parents afacaff + b121464 commit 66d1514

17 files changed

Lines changed: 181 additions & 35 deletions

File tree

‎live-editing/configs/IconConfigGenerator.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { HttpClientModule } from '@angular/common/http';
22
import {IgxIconModule,
3+
IgxAvatarModule,
34
IgxInputGroupModule,
45
IgxButtonModule,
6+
IgxCardModule,
57
IgxSelectModule} from 'igniteui-angular';
68
import {AppModuleConfig, Config, IConfigGenerator} from 'igniteui-live-editing'
79
export class IconConfigGenerator implements IConfigGenerator {
@@ -45,6 +47,17 @@ export class IconConfigGenerator implements IConfigGenerator {
4547
shortenComponentPathBy: "/data-display/icon/"
4648
}));
4749

50+
// Icon Service Sample
51+
configs.push(new Config({
52+
component: 'IconServiceSampleComponent',
53+
appModuleConfig: new AppModuleConfig({
54+
imports: ['IgxAvatarModule', 'IgxButtonModule', 'IgxCardModule', 'IgxIconModule', 'IconServiceSampleComponent'],
55+
ngDeclarations: ['IconStylingSampleComponent'],
56+
ngImports: ['IgxAvatarModule', 'IgxButtonModule', 'IgxCardModule', 'IgxIconModule']
57+
}),
58+
shortenComponentPathBy: "/data-display/icon/"
59+
}));
60+
4861
// Material Symbols Sample
4962
configs.push(new Config({
5063
component: 'MaterialSymbolsComponent',

‎package-lock.json‎

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

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@
6565
"bootstrap": "5.3.2",
6666
"file-saver": "^2.0.2",
6767
"hammerjs": "^2.0.8",
68-
"igniteui-angular": "^18.0.0",
68+
"igniteui-angular": "^18.1.0-alpha.1",
6969
"igniteui-angular-charts": "^17.2.1",
7070
"igniteui-angular-core": "^17.2.1",
7171
"igniteui-angular-extras": "^18.0.4",

‎src/app/data-display/data-display-routes-data.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export const dataDisplayRoutesData = {
1414
"circular-indeterminate-progressbar": { displayName: "Circular Indeterminate Progressbar", parentName: "Circular Progressbar" },
1515
"circular-styling-sample": { displayName: "Circular Styling Sample", parentName: "Circular Progressbar" },
1616
"icon-sample-1": { displayName: "Simple Icons", parentName: "Icon" },
17+
"icon-service": { displayName: "Icon Service", parentName: "Icon" },
1718
"icon-styling": { displayName: "Icon Styling", parentName: "Icon" },
1819
"svg-icon-sample": { displayName: "SVG Icons", parentName: "Icon" },
1920
"material-symbols": { displayName: "Material Symbols", parentName: "Icon" },

‎src/app/data-display/data-display-routing.module.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import { IconSample2Component } from './icon/icon-sample-2/icon-sample-2.compone
2424
import { IconSample3Component } from './icon/icon-sample-3/icon-sample-3.component';
2525
import { IconSample4Component } from './icon/icon-sample-4/icon-sample-4.component';
2626
import { IconSample5Component } from './icon/icon-sample-5/icon-sample-5.component';
27+
import { IconServiceSampleComponent } from './icon/icon-service-sample/icon-service-sample.component';
2728
import { IconStylingSampleComponent } from './icon/icon-styling-sample/icon-styling-sample.component';
2829
import { SvgIconSampleComponent } from './icon/svg-icon-sample/svg-icon-sample.component';
2930
import { IgxForComponent } from './igxFor/igxFor.component';
@@ -208,6 +209,11 @@ export const dataDisplayRoutes: Routes = [
208209
data: dataDisplayRoutesData['text-highlight-style'],
209210
path: 'text-highlight-style'
210211
},
212+
{
213+
component: IconServiceSampleComponent,
214+
data: dataDisplayRoutesData['icon-service'],
215+
path: 'icon-service'
216+
},
211217
{
212218
component: IconStylingSampleComponent,
213219
data: dataDisplayRoutesData['icon-styling'],

‎src/app/data-display/data-display.module.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
IgxAvatarModule,
66
IgxBadgeModule,
77
IgxButtonModule,
8+
IgxCardModule,
89
IgxChipsModule,
910
IgxDropDownModule,
1011
IgxFilterModule,
@@ -43,6 +44,7 @@ import { IconSample3Component } from './icon/icon-sample-3/icon-sample-3.compone
4344
import { IconSample4Component } from './icon/icon-sample-4/icon-sample-4.component';
4445
import { IconSample5Component } from './icon/icon-sample-5/icon-sample-5.component';
4546
import { IconStylingSampleComponent } from './icon/icon-styling-sample/icon-styling-sample.component';
47+
import { IconServiceSampleComponent } from './icon/icon-service-sample/icon-service-sample.component';
4648
import { SvgIconSampleComponent } from './icon/svg-icon-sample/svg-icon-sample.component';
4749
import { IgxForComponent } from './igxFor/igxFor.component';
4850
import { IgxForHorizontalComponent } from './igxFor/igxFor-horizontal-sample/igxFor-horizontal.component';
@@ -90,6 +92,7 @@ import { MaterialSymbolsComponent } from './icon/material-symbols/material-symbo
9092
IconSample4Component,
9193
IconSample5Component,
9294
IconStylingSampleComponent,
95+
IconServiceSampleComponent,
9396
SvgIconSampleComponent,
9497
IgxForComponent,
9598
IgxForHorizontalComponent,
@@ -120,6 +123,7 @@ import { MaterialSymbolsComponent } from './icon/material-symbols/material-symbo
120123
IgxAvatarModule,
121124
IgxBadgeModule,
122125
IgxListModule,
126+
IgxCardModule,
123127
IgxChipsModule,
124128
IgxDropDownModule,
125129
IgxFocusModule,

‎src/app/data-display/icon/icon-service-sample/icon-service-sample.component.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<div class="wrapper">
2+
<igx-card>
3+
<igx-card-header>
4+
<igx-avatar>
5+
<igx-icon family="default" name="weather_status"></igx-icon>
6+
</igx-avatar>
7+
<h3 igxCardHeaderTitle>{{ status }}</h3>
8+
<h6 igxCardHeaderSubtitle>Current Weather</h6>
9+
</igx-card-header>
10+
<igx-card-actions>
11+
<button igxButton="contained" igxEnd (click)="updateWeather()">
12+
<igx-icon name="sync" family="material"></igx-icon>
13+
<span>Refresh</span>
14+
</button>
15+
</igx-card-actions>
16+
<igx-icon family="default" name="weather_status" backdrop inert></igx-icon>
17+
</igx-card>
18+
</div>

‎src/app/data-display/icon/icon-service-sample/icon-service-sample.component.scss‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
@use "../../../../variables" as *;
2+
3+
.wrapper {
4+
display: flex;
5+
flex-flow: row wrap;
6+
margin: rem(16px) 0;
7+
}
8+
9+
igx-card {
10+
position: relative;
11+
z-index: 0;
12+
min-width: rem(320px);
13+
}
14+
15+
igx-avatar {
16+
z-index: 1;
17+
--ig-size: var(--ig-size-medium);
18+
--background: hsla(var(--ig-secondary-500), 6%);
19+
border: 1px solid hsl(var(--ig-secondary-500));
20+
border-radius: rem(4px);
21+
22+
igx-icon {
23+
--size: #{rem(48px)};
24+
color: hsl(var(--ig-secondary-500));
25+
}
26+
}
27+
28+
igx-icon[backdrop] {
29+
--size: #{rem(128px)};
30+
inset-block: rem(18px);
31+
inset-inline: calc(100% - var(--size));
32+
z-index: -1;
33+
position: absolute;
34+
color: hsl(var(--ig-gray-300));
35+
}

‎src/app/data-display/icon/icon-service-sample/icon-service-sample.component.ts‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { Component } from '@angular/core';
2+
import { IgxIconService } from 'igniteui-angular';
3+
4+
@Component({
5+
selector: 'app-icon-service-sample',
6+
styleUrls: ['./icon-service-sample.component.scss'],
7+
templateUrl: './icon-service-sample.component.html'
8+
})
9+
export class IconServiceSampleComponent {
10+
private weather = [{
11+
icon: 'partly_cloudy',
12+
description: '18° Partly Cloudy'
13+
},
14+
{
15+
icon: 'sunny',
16+
description: '23° Sunny'
17+
},
18+
{
19+
icon: 'thunderstorms',
20+
description: '15° Thunderstorms'
21+
}];
22+
23+
protected get status() {
24+
return this.weather.at(0).description
25+
};
26+
27+
constructor(private iconService: IgxIconService) {
28+
// Add the SVG assets to the icon service collection
29+
this.iconService.addSvgIcon('partly_cloudy', 'assets/images/icons/partly_cloudy.svg', 'weather');
30+
this.iconService.addSvgIcon('sunny', 'assets/images/icons/sunny.svg', 'weather');
31+
this.iconService.addSvgIcon('thunderstorms', 'assets/images/icons/thunderstorms.svg', 'weather');
32+
33+
this.iconService.addIconRef('weather_status', 'default', {
34+
name: 'partly_cloudy',
35+
family: 'weather'
36+
});
37+
}
38+
39+
protected updateWeather() {
40+
this.weather.unshift(this.weather.pop());
41+
42+
this.iconService.setIconRef('weather_status', 'default', {
43+
name: this.weather.at(0).icon,
44+
family: 'weather'
45+
});
46+
}
47+
}

‎src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.scss‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
.igx-calendar {
1010
--ig-size: 2;
11-
11+
1212
box-shadow: elevation(4);
1313
}
1414

@@ -21,10 +21,8 @@ $custom-calendar-theme: calendar-theme(
2121
$date-selected-foreground: #fdfdfd,
2222
$date-current-background: #fdfdfd,
2323
$navigation-hover-color: #345779,
24-
$year-current-foreground: #2dabe8,
25-
$year-hover-foreground: #2dabe8,
26-
$month-current-foreground: #2dabe8,
27-
$month-hover-foreground: #2dabe8,
24+
$ym-current-foreground: #2dabe8,
25+
$ym-hover-foreground: #2dabe8,
2826
$picker-foreground: #2dabe8,
2927
$picker-hover-foreground: #345779,
3028
);

0 commit comments

Comments
 (0)