refactor(*): update samples related to the 18.1.x release

live-editing/configs/IconConfigGenerator.ts

@@ -1,7 +1,9 @@
 import { HttpClientModule } from '@angular/common/http';
 import {IgxIconModule,
+IgxAvatarModule,
 IgxInputGroupModule,
 IgxButtonModule,
+IgxCardModule,
 IgxSelectModule} from 'igniteui-angular';
 import {AppModuleConfig, Config, IConfigGenerator} from 'igniteui-live-editing'
 export class IconConfigGenerator implements IConfigGenerator {
@@ -45,6 +47,17 @@ export class IconConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/data-display/icon/"
         }));
 
+        // Icon Service Sample
+        configs.push(new Config({
+            component: 'IconServiceSampleComponent',
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxAvatarModule', 'IgxButtonModule', 'IgxCardModule', 'IgxIconModule', 'IconServiceSampleComponent'],
+                ngDeclarations: ['IconStylingSampleComponent'],
+                ngImports: ['IgxAvatarModule', 'IgxButtonModule', 'IgxCardModule', 'IgxIconModule']
+            }),
+            shortenComponentPathBy: "/data-display/icon/"
+        }));
+
         // Material Symbols Sample
         configs.push(new Config({
             component: 'MaterialSymbolsComponent',

package.json

@@ -65,7 +65,7 @@
     "bootstrap": "5.3.2",
     "file-saver": "^2.0.2",
     "hammerjs": "^2.0.8",
-    "igniteui-angular": "^18.0.0",
+    "igniteui-angular": "^18.1.0-alpha.1",
     "igniteui-angular-charts": "^17.2.1",
     "igniteui-angular-core": "^17.2.1",
     "igniteui-angular-extras": "^18.0.4",

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

@@ -14,6 +14,7 @@ export const dataDisplayRoutesData = {
     "circular-indeterminate-progressbar": { displayName: "Circular Indeterminate Progressbar", parentName: "Circular Progressbar" },
     "circular-styling-sample": { displayName: "Circular Styling Sample", parentName: "Circular Progressbar" },
     "icon-sample-1": { displayName: "Simple Icons", parentName: "Icon" },
+    "icon-service": { displayName: "Icon Service", parentName: "Icon" },
     "icon-styling": { displayName: "Icon Styling", parentName: "Icon" },
     "svg-icon-sample": { displayName: "SVG Icons", parentName: "Icon" },
     "material-symbols": { displayName: "Material Symbols", parentName: "Icon" },

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

@@ -24,6 +24,7 @@ import { IconSample2Component } from './icon/icon-sample-2/icon-sample-2.compone
 import { IconSample3Component } from './icon/icon-sample-3/icon-sample-3.component';
 import { IconSample4Component } from './icon/icon-sample-4/icon-sample-4.component';
 import { IconSample5Component } from './icon/icon-sample-5/icon-sample-5.component';
+import { IconServiceSampleComponent } from './icon/icon-service-sample/icon-service-sample.component';
 import { IconStylingSampleComponent } from './icon/icon-styling-sample/icon-styling-sample.component';
 import { SvgIconSampleComponent } from './icon/svg-icon-sample/svg-icon-sample.component';
 import { IgxForComponent } from './igxFor/igxFor.component';
@@ -208,6 +209,11 @@ export const dataDisplayRoutes: Routes = [
         data: dataDisplayRoutesData['text-highlight-style'],
         path: 'text-highlight-style'
     },
+    {
+        component: IconServiceSampleComponent,
+        data: dataDisplayRoutesData['icon-service'],
+        path: 'icon-service'
+    },
     {
         component: IconStylingSampleComponent,
         data: dataDisplayRoutesData['icon-styling'],

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

@@ -5,6 +5,7 @@ import {
     IgxAvatarModule,
     IgxBadgeModule,
     IgxButtonModule,
+    IgxCardModule,
     IgxChipsModule,
     IgxDropDownModule,
     IgxFilterModule,
@@ -43,6 +44,7 @@ import { IconSample3Component } from './icon/icon-sample-3/icon-sample-3.compone
 import { IconSample4Component } from './icon/icon-sample-4/icon-sample-4.component';
 import { IconSample5Component } from './icon/icon-sample-5/icon-sample-5.component';
 import { IconStylingSampleComponent } from './icon/icon-styling-sample/icon-styling-sample.component';
+import { IconServiceSampleComponent } from './icon/icon-service-sample/icon-service-sample.component';
 import { SvgIconSampleComponent } from './icon/svg-icon-sample/svg-icon-sample.component';
 import { IgxForComponent } from './igxFor/igxFor.component';
 import { IgxForHorizontalComponent } from './igxFor/igxFor-horizontal-sample/igxFor-horizontal.component';
@@ -90,6 +92,7 @@ import { MaterialSymbolsComponent } from './icon/material-symbols/material-symbo
         IconSample4Component,
         IconSample5Component,
         IconStylingSampleComponent,
+        IconServiceSampleComponent,
         SvgIconSampleComponent,
         IgxForComponent,
         IgxForHorizontalComponent,
@@ -120,6 +123,7 @@ import { MaterialSymbolsComponent } from './icon/material-symbols/material-symbo
         IgxAvatarModule,
         IgxBadgeModule,
         IgxListModule,
+        IgxCardModule,
         IgxChipsModule,
         IgxDropDownModule,
         IgxFocusModule,

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

@@ -0,0 +1,18 @@
+<div class="wrapper">
+    <igx-card>
+        <igx-card-header>
+            <igx-avatar>
+                <igx-icon family="default" name="weather_status"></igx-icon>
+            </igx-avatar>
+            <h3 igxCardHeaderTitle>{{ status }}</h3>
+            <h6 igxCardHeaderSubtitle>Current Weather</h6>
+        </igx-card-header>
+        <igx-card-actions>
+            <button igxButton="contained" igxEnd (click)="updateWeather()">
+                <igx-icon name="sync" family="material"></igx-icon>
+                <span>Refresh</span>
+            </button>
+        </igx-card-actions>
+        <igx-icon family="default" name="weather_status" backdrop inert></igx-icon>
+    </igx-card>
+</div>

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

@@ -0,0 +1,35 @@
+@use "../../../../variables" as *;
+
+.wrapper {
+    display: flex;
+    flex-flow: row wrap;
+    margin: rem(16px) 0;
+}
+
+igx-card {
+    position: relative;
+    z-index: 0;
+    min-width: rem(320px);
+}
+
+igx-avatar {
+    z-index: 1;
+    --ig-size: var(--ig-size-medium);
+    --background: hsla(var(--ig-secondary-500), 6%);
+    border: 1px solid hsl(var(--ig-secondary-500));
+    border-radius: rem(4px);
+
+    igx-icon {
+        --size: #{rem(48px)};
+        color: hsl(var(--ig-secondary-500));
+    }
+}
+
+igx-icon[backdrop] {
+    --size: #{rem(128px)};
+    inset-block: rem(18px);
+    inset-inline: calc(100% - var(--size));
+    z-index: -1;
+    position: absolute;
+    color: hsl(var(--ig-gray-300));
+}

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

@@ -0,0 +1,47 @@
+import { Component } from '@angular/core';
+import { IgxIconService } from 'igniteui-angular';
+
+@Component({
+  selector: 'app-icon-service-sample',
+  styleUrls: ['./icon-service-sample.component.scss'],
+  templateUrl: './icon-service-sample.component.html'
+})
+export class IconServiceSampleComponent {
+    private weather = [{
+        icon: 'partly_cloudy',
+        description: '18° Partly Cloudy'
+    },
+    {
+        icon: 'sunny',
+        description: '23° Sunny'
+    },
+    {
+        icon: 'thunderstorms',
+        description: '15° Thunderstorms'
+    }];
+
+    protected get status() {
+        return this.weather.at(0).description
+    };
+
+    constructor(private iconService: IgxIconService) {
+        // Add the SVG assets to the icon service collection
+        this.iconService.addSvgIcon('partly_cloudy', 'assets/images/icons/partly_cloudy.svg', 'weather');
+        this.iconService.addSvgIcon('sunny', 'assets/images/icons/sunny.svg', 'weather');
+        this.iconService.addSvgIcon('thunderstorms', 'assets/images/icons/thunderstorms.svg', 'weather');
+
+        this.iconService.addIconRef('weather_status', 'default', {
+            name: 'partly_cloudy',
+            family: 'weather'
+        });
+    }
+
+    protected updateWeather() {
+        this.weather.unshift(this.weather.pop());
+
+        this.iconService.setIconRef('weather_status', 'default', {
+            name: this.weather.at(0).icon,
+            family: 'weather'
+        });
+    }
+}

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

@@ -8,7 +8,7 @@
 
 .igx-calendar {
 	--ig-size: 2;
-	
+
     box-shadow: elevation(4);
 }
 
@@ -21,10 +21,8 @@ $custom-calendar-theme: calendar-theme(
     $date-selected-foreground: #fdfdfd,
     $date-current-background: #fdfdfd,
     $navigation-hover-color: #345779,
-    $year-current-foreground: #2dabe8,
-    $year-hover-foreground: #2dabe8,
-    $month-current-foreground: #2dabe8,
-    $month-hover-foreground: #2dabe8,
+    $ym-current-foreground: #2dabe8,
+    $ym-hover-foreground: #2dabe8,
     $picker-foreground: #2dabe8,
     $picker-hover-foreground: #345779,
 );

src/app/scheduling/calendar/themes/google.scss

@@ -14,8 +14,8 @@ $google-dark: calendar-theme(
     $date-current-foreground: $monte-carlo,
     $navigation-hover-color: $monte-carlo,
     $picker-hover-foreground: $monte-carlo,
-    $year-current-foreground: $monte-carlo,
-    $year-hover-foreground: $monte-carlo,
-    $month-current-foreground: $monte-carlo,
-    $month-hover-foreground: $monte-carlo
+    $ym-current-foreground: $monte-carlo,
+    $ym-hover-foreground: $monte-carlo,
+    $ym-current-foreground: $monte-carlo,
+    $ym-hover-foreground: $monte-carlo
 );

src/app/scheduling/datepicker/datepicker-styling-sample/datepicker-styling-sample.component.scss

@@ -14,10 +14,8 @@ $custom-datepicker-theme: calendar-theme(
     $date-selected-foreground: #fdfdfd,
     $date-current-background: #fdfdfd,
     $navigation-hover-color: #345779,
-    $year-current-foreground: #2dabe8,
-    $year-hover-foreground: #2dabe8,
-    $month-current-foreground: #2dabe8,
-    $month-hover-foreground: #2dabe8,
+    $ym-current-foreground: #2dabe8,
+    $ym-hover-foreground: #2dabe8,
     $picker-foreground: #2dabe8,
     $picker-hover-foreground: #345779,
 );

src/app/scheduling/monthpicker/monthpicker-styling/monthpicker-styling.component.scss

@@ -11,11 +11,8 @@ $my-calendar-theme: calendar-theme(
 	$content-background: #011627,
 	$picker-background: #011627,
 
-	$month-current-foreground: #ecaa53,
-	$month-hover-background: #ecaa53,
-
-	$year-current-foreground: #ecaa53,
-	$year-hover-background: #ecaa53,
+	$ym-current-foreground: #ecaa53,
+	$ym-hover-background: #ecaa53,
 
 	$navigation-color: #ecaa53,
 	$picker-hover-foreground: #d37b08,

src/app/theming/styles/themes.scss

@@ -227,7 +227,7 @@ $light-calendar-theme: calendar-theme(
     $navigation-hover-color: color($light-theme-palette, "secondary", 100),
     $inactive-color: color($light-theme-palette, "secondary", 200),
     $picker-hover-foreground: color($light-theme-palette, "secondary", 100),
-    $year-current-foreground: color($light-theme-palette, "secondary", 500),
+    $ym-current-foreground: color($light-theme-palette, "secondary", 500),
     $weekend-color: color($light-theme-palette, "secondary", 500)
 
 );