TaskPlanner - sample that should be updated with the new product version

package.json

@@ -12,45 +12,45 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^17.0.1",
-    "@angular/common": "^17.0.1",
-    "@angular/compiler": "^17.0.1",
-    "@angular/core": "^17.0.1",
-    "@angular/forms": "^17.0.1",
-    "@angular/platform-browser": "^17.0.1",
-    "@angular/platform-browser-dynamic": "^17.0.1",
-    "@angular/router": "^17.0.1",
-    "@infragistics/igniteui-angular": "^17.0.0",
+    "@angular/animations": "^17.2.2",
+    "@angular/common": "^17.2.2",
+    "@angular/compiler": "^17.2.2",
+    "@angular/core": "^17.2.2",
+    "@angular/forms": "^17.2.2",
+    "@angular/platform-browser": "^17.2.2",
+    "@angular/platform-browser-dynamic": "^17.2.2",
+    "@angular/router": "^17.2.2",
+    "@infragistics/igniteui-angular": "^17.1.0-rc.0",
     "hammerjs": "^2.0.8",
-    "igniteui-angular-charts": "^17.0.0-beta.0",
-    "igniteui-angular-core": "^17.0.0-beta.0",
-    "igniteui-theming": "^3.3.1",
+    "igniteui-angular-charts": "^17.2.1",
+    "igniteui-angular-core": "^17.2.1",
+    "igniteui-theming": "^4.4.0",
     "jszip": "^3.2.2",
     "minireset.css": "~0.0.4",
     "rxjs": "^6.6.0",
-    "sass": "^1.37.5",
     "tslib": "^2.3.1",
     "web-animations-js": "^2.3.2",
     "zone.js": "^0.14.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.0.0",
-    "@angular/cli": "^17.0.0",
+    "@angular-devkit/build-angular": "^17.2.1",
+    "@angular/cli": "^17.2.1",
     "@angular/compiler-cli": "^17.0.1",
     "@angular/language-service": "^17.0.1",
     "@types/hammerjs": "^2.0.35",
     "@types/jasmine": "~3.4.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
     "codelyzer": "^6.0.0",
-    "jasmine-core": "~3.5.0",
+    "jasmine-core": "^5.1.2",
     "jasmine-spec-reporter": "~5.0.0",
     "karma": "~6.3.4",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-jasmine": "~3.3.0",
     "karma-jasmine-html-reporter": "^1.5.0",
     "protractor": "~7.0.0",
+    "sass": "^1.71.1",
     "sass.js": "0.11.1",
     "ts-node": "^8.3.0",
     "tslint": "^6.1.0",

src/app/backlog/backlog.component.html

@@ -31,10 +31,10 @@ <h2 [class]="getPriority(task)" igxListLineSubTitle>
                                             {{ getPriority(task) }}
                                         </h2>
                                     </div>
-                                    <button class="tp-app__backlog-list-button tp-app__backlog-list-button--action" igxButton="icon" igxRipple igxRippleCentered="true" draggable="false" (click)="onActionTriggered('edit', task)">
+                                    <button class="tp-app__backlog-list-button tp-app__backlog-list-button--action" igxIconButton="flat" igxRipple igxRippleCentered="true" draggable="false" (click)="onActionTriggered('edit', task)">
                                         <igx-icon>edit</igx-icon>
                                     </button>
-                                    <button class="tp-app__backlog-list-button tp-app__backlog-list-button--action" igxButton="icon" igxRipple igxRippleCentered="true" draggable="false" (click)="deleteItem(task, i)">
+                                    <button class="tp-app__backlog-list-button tp-app__backlog-list-button--action" igxIconButton="flat" igxRipple igxRippleCentered="true" draggable="false" (click)="deleteItem(task, i)">
                                         <igx-icon>delete</igx-icon>
                                     </button>
                                 </div>

src/app/backlog/backlog.component.ts

@@ -1,5 +1,5 @@
 import { Component, ViewChild, EventEmitter, Output, OnInit, Input } from '@angular/core';
-import { IgxListComponent, IgxOverlayOutletDirective, OverlaySettings, IgxFilterOptions } from 'igniteui-angular';
+import { IgxListComponent, IgxOverlayOutletDirective, OverlaySettings, IgxFilterOptions, IgxIconButtonDirective } from 'igniteui-angular';
 import { ITask } from '../interfaces';
 import { NgIf, NgFor } from '@angular/common';
 import { FormsModule } from '@angular/forms';
@@ -40,6 +40,7 @@ export interface IListItemAction {
         IgxEmptyListTemplateDirective,
         IgxOverlayOutletDirective_1,
         IgxFilterPipe,
+        IgxIconButtonDirective
     ],
 })
 export class BacklogComponent implements OnInit  {

src/app/header/header.component.html

@@ -203,8 +203,8 @@
 </svg>
         </div>
     </igx-navbar-action>
-    <button igxButton="raised" igxRipple igxRippleCentered="true" (click)="onCreateIssueClicked()">CREATE ISSUE</button>
-    <button igxButton="icon" (click)="onToggleTheme()">
+    <button igxButton="contained" igxRipple igxRippleCentered="true" (click)="onCreateIssueClicked()">CREATE ISSUE</button>
+    <button igxIconButton="flat" (click)="onToggleTheme()">
       <igx-icon>{{icon}}</igx-icon>
     </button>
 </igx-navbar>

src/app/header/header.component.ts

@@ -1,12 +1,12 @@
 import { Component, OnInit, EventEmitter, Output } from '@angular/core';
-import { IgxNavbarComponent, IgxNavbarActionDirective, IgxButtonDirective, IgxIconComponent } from '@infragistics/igniteui-angular';
+import { IgxNavbarComponent, IgxNavbarActionDirective, IgxButtonDirective, IgxIconComponent, IgxIconButtonDirective } from '@infragistics/igniteui-angular';
 
 @Component({
     selector: 'app-header',
     templateUrl: './header.component.html',
     styleUrls: ['./header.component.scss'],
     standalone: true,
-    imports: [IgxNavbarComponent, IgxNavbarActionDirective, IgxButtonDirective, IgxIconComponent]
+    imports: [IgxNavbarComponent, IgxNavbarActionDirective, IgxButtonDirective, IgxIconComponent, IgxIconButtonDirective]
 })
 export class HeaderComponent implements OnInit {
     @Output() themeChanged = new EventEmitter();

src/app/taskplanner/taskplanner.component.html

@@ -41,13 +41,13 @@
                       </div>
 
                       <div>
-                          <button igxButton="icon" class="button" [disabled]="!hasTransactions" (click)="openCommitDialog()">
+                          <button igxIconButton="flat" class="button" [disabled]="!hasTransactions" (click)="openCommitDialog()">
                               <igx-icon>check</igx-icon>
                           </button>
-                          <button igxButton="icon" class="button" [disabled]="!undoEnabled" (click)="undo()">
+                          <button igxIconButton="flat" class="button" [disabled]="!undoEnabled" (click)="undo()">
                               <igx-icon>undo</igx-icon>
                           </button>
-                          <button igxButton="icon" class="button" [disabled]="!redoEnabled" (click)="redo()">
+                          <button igxIconButton="flat" class="button" [disabled]="!redoEnabled" (click)="redo()">
                               <igx-icon>redo</igx-icon>
                           </button>
                       </div>

src/app/taskplanner/taskplanner.component.ts

@@ -19,7 +19,8 @@ import {
     IFilteringExpression,
     CellType,
     SortingDirection,
-    ISortingOptions
+    ISortingOptions,
+    IgxIconButtonDirective
 } from 'igniteui-angular';
 import { TasksDataService } from '../services/tasks.service';
 import { MEMBERS, GITHUB_TASKS } from '../services/tasksData';
@@ -96,6 +97,7 @@ export enum editMode {
         PlaceholderPipe,
         DeadlinePipe,
         FilterTasksPipe,
+        IgxIconButtonDirective
     ],
 })
 export class TaskPlannerComponent implements OnInit {