17.2.0 update

.github/workflows/build-app-crm.yml

@@ -49,7 +49,7 @@ jobs:
         run: npm config set ${{secrets.IG_SCOPE}}:_auth=${{secrets.IG_TOKEN}}
 
       - name: Install dependencies
-        run: npm ci
+        run: npm ci --legacy-peer-deps
 
       - name: Run lint
         run: npm run lint

.github/workflows/build-app-lob.yml

@@ -54,7 +54,7 @@ jobs:
         run: npm config set ${{secrets.IG_SCOPE}}:_auth=${{secrets.IG_TOKEN}}
 
       - name: Install dependencies
-        run: npm ci
+        run: npm ci --legacy-peer-deps
 
       - name: Run lint
         run: npm run lint

azure-pipelines.yml

@@ -17,7 +17,7 @@ steps:
 - task: Npm@1
   inputs:
     command: 'custom'
-    customCommand: 'install'
+    customCommand: 'install --legacy-peer-deps'
     customEndpoint: 'public proget'
   env:
     AZURE_PIPELINES: "true"

package.json

@@ -65,11 +65,11 @@
     "bootstrap": "5.3.2",
     "file-saver": "^2.0.2",
     "hammerjs": "^2.0.8",
-    "igniteui-angular": "^17.1.0-rc.0",
+    "igniteui-angular": "^17.2.0-beta.2",
     "igniteui-angular-charts": "^17.2.1",
     "igniteui-angular-core": "^17.2.1",
     "igniteui-angular-extras": "^17.1.5",
-    "igniteui-angular-i18n": "^17.1.0",
+    "igniteui-angular-i18n": "^17.2.0-beta.2",
     "igniteui-dockmanager": "^1.14.2",
     "igniteui-live-editing": "^2.1.0",
     "igniteui-webcomponents": "^4.7.0",
@@ -111,4 +111,4 @@
     "typescript": "5.3.3",
     "webpack-bundle-analyzer": "^4.10.0"
   }
-}
+}

src/app/data-entries/buttons/buttons-sample-4/buttons-sample-4.component.html

@@ -1 +1 @@
-<span class="btn" igxButton="contained"  igxButtonColor="black" igxButtonBackground="#72da67" igxRipple="white">Span</span>
+<span class="btn" igxButton="contained" igxRipple="white">Span</span>

src/app/grid/grid-editing-style-sample/grid-editing-style-sample.component.scss

@@ -19,7 +19,7 @@ $checkbox-theme: checkbox-theme(
 );
 
 $datepicker-theme: calendar-theme(
-    $date-selected-text-color: $white,
+    $date-selected-foreground: $white,
     $date-selected-background: $blue
 );
 

src/app/grid/grid-multi-row-layout-configuration/grid-multi-row-layout-configuration.component.html

@@ -115,9 +115,9 @@
             </igx-chips-area>
         </div>
         <div style="width: 100%; text-align: center; margin: 10px;">
-            <span igxButton="contained" class="bottomButton" (click)="resetCollections()" [igxButtonBackground]="'#ff134a'" [igxButtonColor]="'white'">Clear Layout</span>
-            <span igxButton="contained" class="bottomButton" (click)="getColumnLayoutTemplate()" [igxButtonBackground]="'#1377d5'" [igxButtonColor]="'white'">Template</span>
-            <span igxButton="contained" class="bottomButton" (click)="renderJson()" [igxButtonBackground]="'#1377d5'" [igxButtonColor]="'white'">JSON</span>
+            <span igxButton="contained" class="bottomButton" (click)="resetCollections()">Clear Layout</span>
+            <span igxButton="contained" class="bottomButton" (click)="getColumnLayoutTemplate()">Template</span>
+            <span igxButton="contained" class="bottomButton" (click)="renderJson()">JSON</span>
         </div>
 
         <igx-dialog #resultDialog title="Result"

src/app/grid/grid-save-state/about.component.html

@@ -3,5 +3,5 @@
     <span>Navigating to the previous page, components will reinitialize as per their initial configuration, therefore the igxGrid will lose its state.</span>
     <br />
     <span>What our GridSaveStateComponent does is reading the state from the window.localStorage object and applying the corresponding state in the AfterViewInit lifecycle.</span><br />
-    <span igxButton="contained" igxButtonColor="white" igxButtonBackground="#e41c77" [routerLink]="['../grid-state']">Go Back</span>
+    <span igxButton="contained" [routerLink]="['../grid-state']">Go Back</span>
 </div>

src/app/hierarchical-grid/hierarchical-grid-editing-style/hierarchical-grid-editing-style.component.scss

@@ -30,7 +30,7 @@ $checkbox-theme: checkbox-theme(
 );
 
 $datepicker-theme: calendar-theme(
-    $date-selected-text-color: $white,
+    $date-selected-foreground: $white,
     $date-selected-background: $blue
 );
 

src/app/hierarchical-grid/hierarchical-grid-save-state/about.component.html

@@ -3,5 +3,5 @@
     <span>Navigating to the previous page, components will reinitialize as per their initial configuration, therefore the igxHierarchicalGrid will lose its state.</span>
     <br />
     <span>What our GridSaveStateComponent does is reading the state from the window.localStorage object and applying the corresponding state in the AfterViewInit lifecycle.</span><br />
-    <span igxButton="contained" igxButtonColor="white" igxButtonBackground="#e41c77" [routerLink]="['../hGrid-state']">Go Back</span>
+    <span igxButton="contained" [routerLink]="['../hGrid-state']">Go Back</span>
 </div>

src/app/layouts/carousel/carousel-with-components-sample/carousel-with-components-sample.component.scss

@@ -18,13 +18,6 @@
         width: unset;
     }
 
-    .igx-nav-dot {
-        background: black;
-        box-shadow: none;
-        width: 15px;
-        height: 15px;
-    }
-
     .igx-slide {
         display: flex;
         justify-content: center;

src/app/layouts/carousel/carousel.component.scss

@@ -17,13 +17,6 @@
         width: unset;
     }
 
-    .igx-nav-dot {
-        background: black;
-        box-shadow: none;
-        width: 15px;
-        height: 15px;
-    }
-
     .igx-slide {
         display: flex;
         justify-content: center;

src/app/lists/list/list-chat-sample/list-chat-sample.component.html

@@ -44,7 +44,7 @@
                 <input class="input-round-box" placeholder="Send message" autocomplete="off" igxInput #newMessage name="newMessage"
                     [(ngModel)]="message" (keypress)="onMessageKeypress($event)" />
             </igx-input-group>
-            <button class="send-message-button" igxIconButton="flat" igxButtonColor="#09f" igxButtonBackground="#fff"
+            <button class="send-message-button" igxIconButton="flat"
                 igxRipple="#09f" [igxRippleCentered]="true" (click)="onSendButtonClick()">
                 <igx-icon family="material">send</igx-icon>
             </button>

src/app/notifications/snackbar/snackbar-sample-2/snackbar-sample-2.component.html

@@ -7,8 +7,8 @@ <h6>Snackbar Component that uses Content projection</h6>
 
     <span>
         <h6>Snackbar Component which dynamically changes the message text</h6>
-        <button igxButton="outlined" igxButtonColor="blue" (click)="snackbar1.open('Hi! This is info message.')">Info Message</button>
-        <button igxButton="outlined" igxButtonColor="green" (click)="snackbar1.open('Hi! This is success message.')">Success Message</button>
+        <button igxButton="outlined" (click)="snackbar1.open('Hi! This is info message.')">Info Message</button>
+        <button igxButton="outlined" (click)="snackbar1.open('Hi! This is success message.')">Success Message</button>
         <igx-snackbar #snackbar1 [autoHide]="true" actionText="CLOSE" (clicked)="close(snackbar1)"></igx-snackbar>
     </span>
     <span>

src/app/notifications/toast/toast-sample-3/toast-sample-3.component.html

@@ -7,10 +7,10 @@ <h6>Toast that uses content projection</h6>
     </span>
     <span>
         <h6>Toast which dynamically changes the message text</h6>
-        <button igxButton="outlined" igxButtonColor="blue" (click)="toast1.open('Hi! This is info message.')">Info Message</button>
-        <button igxButton="outlined" igxButtonColor="green" (click)="toast1.open('Hi! This is success message.')">Success Message</button>
-        <button igxButton="outlined" igxButtonColor="orange" (click)="toast1.open('Hi! This is warning message.')">Warning Message</button>
-        <button igxButton="outlined" igxButtonColor="red" (click)="toast1.open('Hi! This is error message.')">Error Message</button>
+        <button igxButton="outlined" (click)="toast1.open('Hi! This is info message.')">Info Message</button>
+        <button igxButton="outlined" (click)="toast1.open('Hi! This is success message.')">Success Message</button>
+        <button igxButton="outlined" (click)="toast1.open('Hi! This is warning message.')">Warning Message</button>
+        <button igxButton="outlined" (click)="toast1.open('Hi! This is error message.')">Error Message</button>
         <igx-toast #toast1 [autoHide]="true"></igx-toast>
     </span>
     <span>

src/app/pivot-grid/pivot-state-persistence/about.component.html

@@ -3,5 +3,5 @@
     <span>Navigating to the previous page, components will reinitialize as per their initial configuration, therefore the igxPivotGrid will lose its state.</span>
     <br />
     <span>What our PivotGridStatePersistanceSampleComponent does is reading the state from the window.localStorage object and applying the corresponding state in the AfterViewInit lifecycle.</span><br />
-    <span igxButton="contained" igxButtonColor="white" igxButtonBackground="#e41c77" [routerLink]="['../pivot-grid-state-persistence']">Go Back</span>
+    <span igxButton="contained" [routerLink]="['../pivot-grid-state-persistence']">Go Back</span>
 </div>

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

@@ -13,18 +13,18 @@
 $custom-calendar-theme: calendar-theme(
     $header-background: #345779,
     $content-background: #fdfdfd,
-    $header-text-color: #ffffff,
-    $date-current-text-color: #2dabe8,
-    $picker-arrow-color: #2dabe8,
-    $date-selected-text-color: #fdfdfd,
-    $date-current-bg-color: #fdfdfd,
-    $picker-arrow-hover-color: #345779,
-    $year-current-text-color: #2dabe8,
-    $year-hover-text-color: #2dabe8,
-    $month-current-text-color: #2dabe8,
-    $month-hover-text-color: #2dabe8,
-    $picker-text-color: #2dabe8,
-    $picker-text-hover-color: #345779,
+    $header-foreground: #ffffff,
+    $date-current-foreground: #2dabe8,
+    $navigation-color: #2dabe8,
+    $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,
+    $picker-foreground: #2dabe8,
+    $picker-hover-foreground: #345779,
 );
 
 :host {

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

@@ -11,11 +11,11 @@ $google-dark: calendar-theme(
     $header-background: $dark-gray,
     $content-background: $charcoal,
     $date-selected-background: $monte-carlo,
-    $date-current-text-color: $monte-carlo,
-    $picker-arrow-hover-color: $monte-carlo,
-    $picker-text-hover-color: $monte-carlo,
-    $year-current-text-color: $monte-carlo,
-    $year-hover-text-color: $monte-carlo,
-    $month-current-text-color: $monte-carlo,
-    $month-hover-text-color: $monte-carlo
+    $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
 );

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

@@ -8,18 +8,18 @@
 $custom-datepicker-theme: calendar-theme(
     $header-background: #345779,
     $content-background: #fdfdfd,
-    $header-text-color: #ffffff,
-    $date-current-text-color: #2dabe8,
-    $picker-arrow-color: #2dabe8,
-    $date-selected-text-color: #fdfdfd,
-    $date-current-bg-color: #fdfdfd,
-    $picker-arrow-hover-color: #345779,
-    $year-current-text-color: #2dabe8,
-    $year-hover-text-color: #2dabe8,
-    $month-current-text-color: #2dabe8,
-    $month-hover-text-color: #2dabe8,
-    $picker-text-color: #2dabe8,
-    $picker-text-hover-color: #345779,
+    $header-foreground: #ffffff,
+    $date-current-foreground: #2dabe8,
+    $navigation-color: #2dabe8,
+    $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,
+    $picker-foreground: #2dabe8,
+    $picker-hover-foreground: #345779,
 );
 
 :host {

src/app/scheduling/daterangepicker/daterangepicker-styling/daterangepicker-styling.scss

@@ -32,7 +32,7 @@ $custom-input-group-theme: input-group-theme(
 
 // CALENDAR styling specific overlay component requires outlet -> [overlaySettings]="{ outlet: element }"
 $custom-calendar-theme: calendar-theme(
-    $date-current-text-color: $today-text,
+    $date-current-foreground: $today-text,
     $border-radius: 0.5,
     $date-border-radius: 0.5
 );

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

@@ -8,15 +8,15 @@ igx-month-picker {
 $my-calendar-theme: calendar-theme(
   $border-radius: 15px,
   $content-background: #011627,
-  $picker-background-color: #011627,
-  $month-current-text-color: #ECAA53,
+  $picker-background: #011627,
+  $month-current-foreground: #ECAA53,
   $month-hover-background: #ECAA53,
-  $year-current-text-color: #ECAA53,
-  $year-hover-text-color: #D37B08,
-  $picker-arrow-color: #ECAA53,
-  $picker-text-hover-color: #D37B08,
-  $picker-arrow-hover-color: #D37B08,
-  $picker-text-color: #ECAA53
+  $year-current-foreground: #ECAA53,
+  $year-hover-foreground: #D37B08,
+  $navigation-color: #ECAA53,
+  $picker-hover-foreground: #D37B08,
+  $navigation-hover-color: #D37B08,
+  $picker-foreground: #ECAA53
 );
 
 :host ::ng-deep {

src/app/theming/animations/animations-sample-2/animations-sample-2.component.html

@@ -2,10 +2,8 @@
     <igx-card [horizontal]="horizontal">
         <div igxLayout igxLayoutDir="column" igxFlex [igxFlexGrow]="1">
             <igx-card-header>
-                <div class="igx-card-header__tgroup">
-                    <h5 class="igx-card-header__title">Rozes</h5>
-                    <h5 class="igx-card-header__subtitle">Under the Grave (2016)</h5>
-                </div>
+                <h5 class="igx-card-header__title">Rozes</h5>
+                <h5 class="igx-card-header__subtitle">Under the Grave (2016)</h5>
                 <igx-card-media width="64px" height="64px">
                     <img src="assets/images/card/media/ROZES-Under-the-Grave.jpg">
                 </igx-card-media>