@igniteui/angular-templates 14.1.1010 → 15.0.1100-beta.0

package/igx-ts/bullet-graph/default/index.js

@@ -15,7 +15,7 @@ class IgxBulletGraphTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAng
                 import: ["IgxBulletGraphModule"],
                 from: "igniteui-angular-gauges"
             }];
-        this.packages = ["igniteui-angular-core@~14.1.0", "igniteui-angular-gauges@~14.1.0"];
+        this.packages = ["igniteui-angular-core@~14.2.0", "igniteui-angular-gauges@~14.2.0"];
     }
 }
 module.exports = new IgxBulletGraphTemplate();

package/igx-ts/category-chart/default/index.js

@@ -15,7 +15,7 @@ class IgxCategoryChartTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForA
             { import: "IgxCategoryChartModule", from: "igniteui-angular-charts" },
             { import: "FormsModule", from: "@angular/forms" }
         ];
-        this.packages = ["igniteui-angular-core@~14.1.0", "igniteui-angular-charts@~14.1.0"];
+        this.packages = ["igniteui-angular-core@~14.2.0", "igniteui-angular-charts@~14.2.0"];
     }
 }
 module.exports = new IgxCategoryChartTemplate();

package/igx-ts/chip/default/files/src/app/__path__/__filePrefix__.component.html

@@ -17,7 +17,7 @@
     <button #openButton igxButton="raised" (click)="toggleDropDown($event)" [igxDropDownItemNavigation]="dropdown">Talks</button>
     <igx-drop-down #dropdown (selectionChanging)="itemSelection($event)">
       <igx-drop-down-item *ngFor="let item of dropDownList" [value]="item.name">
-          <div class="igx-drop-down__item-template">
+          <div class="ig-drop-down__item-template">
             <span>{{item.name}}</span>
           </div>
       </igx-drop-down-item>

package/igx-ts/custom-templates/awesome-grid/files/src/app/__path__/__filePrefix__.component.scss

@@ -6,7 +6,7 @@ $grid-sample-theme: grid-theme(
   $row-border-color: #f8f8f8,
   $cell-selected-background:
     color(
-      $color: "grays",
+      $color: "gray",
       $variant: 800,
     ),
   $cell-selected-text-color: #fff,

package/igx-ts/custom-templates/awesome-grid/index.js

@@ -33,7 +33,7 @@ class IgxGridAwesomeTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAng
             },
             { import: "FormsModule", from: "@angular/forms" }
         ];
-        this.packages = ["igniteui-angular-core@~14.1.0", "igniteui-angular-charts@~14.1.0"];
+        this.packages = ["igniteui-angular-core@~14.2.0", "igniteui-angular-charts@~14.2.0"];
     }
 }
 module.exports = new IgxGridAwesomeTemplate();

package/igx-ts/custom-templates/crm-grid/files/src/app/__path__/__filePrefix__.component.html

@@ -169,7 +169,7 @@
 
     <igx-column field="estimated_sales" header="Possible Sales ($)" [sortable]="true" width="150" dataType="number"
       [hasSummary]="false" [summaries]="dealsSummary" [resizable]="true" [filterable]="false">
-      <ng-template igxCell let-cell="call" let-val>
+      <ng-template igxCell let-cell="cell" let-val>
         {{ formatValue(val) }}
       </ng-template>
     </igx-column>

package/igx-ts/custom-templates/crm-grid/files/src/app/__path__/__filePrefix__.component.scss

@@ -6,7 +6,8 @@
 
     $crm-grid-palette: palette(
         $primary: #09f,
-        $secondary: #ffbf00
+        $secondary: #ffbf00,
+        $surface: #333
     );
     @include theme($crm-grid-palette);
 
@@ -23,8 +24,8 @@
     $search-theme: input-group-theme(
         $search-background: color($crm-grid-palette, "primary", 600),
         $idle-text-color: color($crm-grid-palette, "primary", 100),
-        $filled-text-color: color($crm-grid-palette, "grays", 600),
-        $focused-text-color: color($crm-grid-palette, "grays", 600)
+        $filled-text-color: color($crm-grid-palette, "gray", 600),
+        $focused-text-color: color($crm-grid-palette, "gray", 600)
     );
 
     $crm-grid-theme: grid-theme(
@@ -44,13 +45,13 @@
 
     $crm-grid-search-button: button-theme(
         $background: transparent,
-        $focus-background: color($crm-grid-palette, "grays", 200),
-        $hover-background: color($crm-grid-palette, "grays", 200)
+        $focus-background: color($crm-grid-palette, "gray", 200),
+        $hover-background: color($crm-grid-palette, "gray", 200)
     );
 
     $crm-input-drop-down: input-group-theme(
-        $placeholder-color: color($crm-grid-palette, "grays", 500),
-        $idle-text-color: color($crm-grid-palette, "grays", 900)
+        $placeholder-color: color($crm-grid-palette, "gray", 500),
+        $idle-text-color: color($crm-grid-palette, "gray", 900)
     );
 
     @include grid-toolbar($crm-grid-toolbar);
@@ -226,30 +227,30 @@
             &:focus,
             &.igx-input-group--focused {
                 igx-icon {
-                    color: color($crm-grid-palette, 'grays', 600);
+                    color: color($crm-grid-palette, 'gray', 600);
                 }
 
                 .igx-input-group__bundle {
                     background: #fff;
-                    color: color($crm-grid-palette, 'grays', 600);
+                    color: color($crm-grid-palette, 'gray', 600);
                 }
 
                 .igx-input-group__input {
                     &::placeholder {
-                        color: color($crm-grid-palette, 'grays', 600);
+                        color: color($crm-grid-palette, 'gray', 600);
                         opacity: 1;
                     }
                 }
 
                 .igx-input-group__textarea,
                 .igx-input-group__input {
-                    color: color($crm-grid-palette, 'grays', 600);
+                    color: color($crm-grid-palette, 'gray', 600);
                 }
 
                 .igx-button--icon {
                     &:focus,
                     &:active {
-                        color: color($crm-grid-palette, 'grays', 600);
+                        color: color($crm-grid-palette, 'gray', 600);
                     }
                 }
             }

package/igx-ts/custom-templates/crm-grid/files/src/app/__path__/__filePrefix__.component.ts

@@ -13,7 +13,7 @@ import {
   GridSelectionMode,
   HorizontalAlignment,
   IColumnExportingEventArgs,
-  IgxColumnComponent,
+  ColumnType,
   IgxDateSummaryOperand,
   IgxCsvExporterService,
   IgxExcelExporterService,
@@ -48,7 +48,7 @@ export class <%=ClassName%>Component implements OnInit, AfterViewInit {
   public earliestSummary = EarliestSummary;
   public soonSummary = SoonSummary;
 
-  public cols!: QueryList<IgxColumnComponent>;
+  public cols!: QueryList<ColumnType>;
   public hiddenColsLength: number = 0;
   public pinnedColsLength: number = 0;
 
@@ -106,7 +106,7 @@ export class <%=ClassName%>Component implements OnInit, AfterViewInit {
     this.pinnedColsLength = this.cols.filter((col) => col.pinned).length;
   }
 
-  public toggleVisibility(col: IgxColumnComponent): void {
+  public toggleVisibility(col: ColumnType): void {
     if (col.hidden) {
       this.hiddenColsLength--;
     } else {
@@ -115,7 +115,7 @@ export class <%=ClassName%>Component implements OnInit, AfterViewInit {
     col.hidden = !col.hidden;
   }
 
-  public togglePin(col: IgxColumnComponent, evt: any): void {
+  public togglePin(col: ColumnType, evt: any): void {
     if (col.pinned) {
       this.grid1.unpinColumn(col.field);
       this.pinnedColsLength--;

package/igx-ts/custom-templates/crm-grid/index.js

@@ -43,7 +43,7 @@ class IgxGridCRMTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngular
             },
             { import: "FormsModule", from: "@angular/forms" }
         ];
-        this.packages = ["igniteui-angular-core@~14.1.0", "igniteui-angular-charts@~14.1.0"];
+        this.packages = ["igniteui-angular-core@~14.2.0", "igniteui-angular-charts@~14.2.0"];
     }
 }
 module.exports = new IgxGridCRMTemplate();

package/igx-ts/custom-templates/fintech-grid/files/src/app/__path__/__filePrefix__.component.scss

@@ -1,5 +1,4 @@
 @use '<%=igxPackage%>/theming' as *;
-@use './themes/_mixins' as *;
 
 :host {
     display: block;
@@ -231,18 +230,13 @@
 @include typography($font-family: $material-typeface, $type-scale: $material-type-scale);
 
 
-@include scrollbar-love();
-
-$green-palette: palette($primary: #09f,$secondary: #72da67, $surface: #333);
+$green-palette: palette($primary: #09f, $secondary: #72da67, $surface: #333);
 
 :host {
   ::ng-deep {
 
-    @include scrollbar-love();
-
     .fin-dark-theme {
-      @include dark-theme($green-palette);
-      @include scrollbar-love(color($green-palette, 'surface'));
+      @include dark-theme($dark-palette);
        background: #333;
 
        igx-grid-cell {

package/igx-ts/custom-templates/fintech-grid/index.js

@@ -29,7 +29,7 @@ class IgxFinTechGridTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAng
             },
             { import: "FormsModule", from: "@angular/forms" }
         ];
-        this.packages = ["igniteui-angular-core@~14.1.0", "igniteui-angular-charts@~14.1.0"];
+        this.packages = ["igniteui-angular-core@~14.2.0", "igniteui-angular-charts@~14.2.0"];
     }
 }
 module.exports = new IgxFinTechGridTemplate();

package/igx-ts/custom-templates/fintech-tree-grid/files/src/app/__path__/__filePrefix__.component.scss

@@ -1,5 +1,4 @@
 @use '<%=igxPackage%>/theming' as *;
-@use './themes/_mixins' as *;
 
 :host ::ng-deep {
     .finjs-icons {
@@ -210,7 +209,7 @@
 @include theme($default-palette);
 
 
-$green-palette: palette($primary: #09f,$secondary: #72da67, $surface: #333);
+$green-palette: palette($primary: #09f, $secondary: #72da67, $surface: #333);
 
 :host {
     padding: 0 !important;
@@ -218,11 +217,8 @@ $green-palette: palette($primary: #09f,$secondary: #72da67, $surface: #333);
 
     ::ng-deep {
 
-        @include scrollbar-love();
-
         .fin-dark-theme {
-            @include dark-theme($green-palette);
-            @include scrollbar-love(color($green-palette, 'surface'));
+            @include dark-theme($dark-palette);
             background: #333;
 
             ::-moz-placeholder {

package/igx-ts/custom-templates/weather-forecast/files/src/app/__path__/__filePrefix__.component.html

@@ -1,8 +1,8 @@
 <div class="sample-wrapper">
   <igx-card>
     <igx-card-header>
-    <h3 class="igx-card-header__title">{{data.city}}</h3>
-    <h5 class="igx-card-header__subtitle">{{data.dateTime}}, {{data.today.description}}</h5>
+    <h3 class="ig-card-header__title">{{data.city}}</h3>
+    <h5 class="ig-card-header__subtitle">{{data.dateTime}}, {{data.today.description}}</h5>
     </igx-card-header>
     <igx-card-content>
     <div class="weather__main" *ngIf=data>
@@ -32,4 +32,3 @@
     </igx-card-content>
   </igx-card>
   </div>
-  

package/igx-ts/financial-chart/default/index.js

@@ -13,7 +13,7 @@ class IgxFinancialChartTemplate extends IgniteUIForAngularTemplate_1.IgniteUIFor
         this.dependencies = [
             { import: "IgxFinancialChartModule", from: "igniteui-angular-charts" }
         ];
-        this.packages = ["igniteui-angular-core@~14.1.0", "igniteui-angular-charts@~14.1.0"];
+        this.packages = ["igniteui-angular-core@~14.2.0", "igniteui-angular-charts@~14.2.0"];
     }
 }
 module.exports = new IgxFinancialChartTemplate();

package/igx-ts/grid/default/files/src/app/__path__/__filePrefix__.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { IgxColumnComponent } from '<%=igxPackage%>';
+import { ColumnType } from '<%=igxPackage%>';
 import { Employee, employeesData } from './localData';
 
 @Component({
@@ -15,7 +15,7 @@ export class <%=ClassName%>Component implements OnInit {
     this.localData = employeesData;
   }
 
-  public onColumnInit(column: IgxColumnComponent): void {
+  public onColumnInit(column: ColumnType): void {
     if (column.field === 'RegistererDate') {
       column.formatter = (date => date.toLocaleDateString());
     }

package/igx-ts/hierarchical-grid/hierarchical-grid-batch-editing/files/src/app/__path__/__filePrefix__.component.ts

@@ -1,6 +1,7 @@
 import { Component, ViewChild } from '@angular/core';
 import { IgxDialogComponent, IgxGridComponent, IgxHierarchicalGridComponent,
   IgxRowIslandComponent, Transaction } from '<%=igxPackage%>';
+import { GridType } from '<%=igxPackage%>/lib/grids/common/grid.interface';
 import { SINGERS } from './data';
 import { Singer } from './singer';
 
@@ -56,13 +57,13 @@ export class <%=ClassName%>Component {
 
   public formatter = (a: number): number => a;
 
-  public undo(grid: IgxHierarchicalGridComponent): void {
+  public undo(grid: GridType): void {
     /* exit edit mode */
-    grid.endEdit(/* commit the edit transaction */ false);
+    grid.crudService.endEdit(/* commit the edit transaction */ false);
     grid.transactions.undo();
   }
 
-  public redo(grid: IgxHierarchicalGridComponent): void {
+  public redo(grid: GridType): void {
     grid.transactions.redo();
   }
 

package/igx-ts/hierarchical-grid/hierarchical-grid-custom/files/src/app/__path__/__filePrefix__.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { IgxColumnComponent } from '<%=igxPackage%>';
+import { ColumnType } from '<%=igxPackage%>';
 import { ARTISTS, Artist } from './data';
 
 @Component({
@@ -10,7 +10,7 @@ import { ARTISTS, Artist } from './data';
 export class <%=ClassName%>Component {
   public localData: Artist[] = ARTISTS;
 
-  public toggleColumn(col: IgxColumnComponent, event: MouseEvent): void {
+  public toggleColumn(col: ColumnType, event: MouseEvent): void {
     col.pinned ? col.unpin() : col.pin();
     event.stopPropagation();
   }

package/igx-ts/linear-gauge/default/index.js

@@ -17,7 +17,7 @@ class IgxLinearGaugeTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAng
                 from: "igniteui-angular-gauges"
             }
         ];
-        this.packages = ["igniteui-angular-core@~14.1.0", "igniteui-angular-gauges@~14.1.0"];
+        this.packages = ["igniteui-angular-core@~14.2.0", "igniteui-angular-gauges@~14.2.0"];
     }
 }
 module.exports = new IgxLinearGaugeTemplate();

package/igx-ts/map/default/index.js

@@ -21,7 +21,7 @@ class IgxGeographicMapTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForA
                 from: "igniteui-angular-charts"
             }
         ];
-        this.packages = ["igniteui-angular-core@~14.1.0", "igniteui-angular-charts@~14.1.0", "igniteui-angular-maps@~14.1.0"];
+        this.packages = ["igniteui-angular-core@~14.2.0", "igniteui-angular-charts@~14.2.0", "igniteui-angular-maps@~14.2.0"];
     }
 }
 module.exports = new IgxGeographicMapTemplate();

package/igx-ts/projects/_base/files/__dot__github/workflows/node.js.yml

@@ -19,7 +19,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x, 16.x]
+        node-version: [16.x, 18.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
@@ -32,4 +32,4 @@ jobs:
     - run: npm ci
     - run: npm run lint
     - run: npm run build
-    - run: npm run test -- --watch=false --browsers ChromeHeadless
+    - run: npm run test -- --watch=false --browsers ChromeHeadless

package/igx-ts/projects/_base/files/__dot__gitignore

@@ -1,21 +1,18 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
-# compiled output
+# Compiled output
 /dist
 /tmp
 /out-tsc
-# Only exists if Bazel was run
 /bazel-out
 
-# dependencies
+# Node
 /node_modules
-
-# profiling files
-chrome-profiler-events*.json
-speed-measure-plugin*.json
+npm-debug.log
+yarn-error.log
 
 # IDEs and editors
-/.idea
+.idea/
 .project
 .classpath
 .c9/
@@ -23,7 +20,7 @@ speed-measure-plugin*.json
 .settings/
 *.sublime-workspace
 
-# IDE - VSCode
+# Visual Studio Code
 .vscode/*
 !.vscode/settings.json
 !.vscode/tasks.json
@@ -31,17 +28,15 @@ speed-measure-plugin*.json
 !.vscode/extensions.json
 .history/*
 
-# misc
+# Miscellaneous
 /.angular/cache
-/.sass-cache
+.sass-cache/
 /connect.lock
 /coverage
 /libpeerconnection.log
-npm-debug.log
-yarn-error.log
 testem.log
 /typings
 
-# System Files
+# System files
 .DS_Store
 Thumbs.db

package/igx-ts/projects/_base/files/angular.json

@@ -35,7 +35,10 @@
             ],
             "scripts": [
               "./node_modules/hammerjs/hammer.min.js"
-            ]
+            ],
+            "stylePreprocessorOptions": {
+              "includePaths": ["node_modules"]
+            }
           },
           "configurations": {
             "production": {

package/igx-ts/projects/_base/files/package.json

@@ -10,48 +10,49 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~14.1.0",
-    "@angular/common": "~14.1.0",
-    "@angular/compiler": "~14.1.0",
-    "@angular/core": "~14.1.0",
-    "@angular/forms": "~14.1.0",
-    "@angular/platform-browser": "~14.1.0",
-    "@angular/platform-browser-dynamic": "~14.1.0",
-    "@angular/router": "~14.1.0",
+    "@angular/animations": "~15.0.0",
+    "@angular/common": "~15.0.0",
+    "@angular/compiler": "~15.0.0",
+    "@angular/core": "~15.0.0",
+    "@angular/forms": "~15.0.0",
+    "@angular/platform-browser": "~15.0.0",
+    "@angular/platform-browser-dynamic": "~15.0.0",
+    "@angular/router": "~15.0.0",
     "hammerjs": "^2.0.8",
-    "igniteui-angular": "~14.1.0",
+    "igniteui-angular": "~15.0.0-rc.0",
+    "igniteui-theming": "~1.1.4",
     "core-js": "^3.6.5",
-    "jszip": "^3.5.0",
+    "jszip": "^3.10.0",
     "minireset.css": "~0.0.4",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~14.1.0",
-    "@angular-eslint/builder": "14.1.0",
-    "@angular-eslint/eslint-plugin": "14.1.0",
-    "@angular-eslint/eslint-plugin-template": "14.1.0",
-    "@angular-eslint/schematics": "14.1.0",
-    "@angular-eslint/template-parser": "14.1.0",
-    "@angular/cli": "~14.1.0",
-    "@angular/compiler-cli": "~14.1.0",
-    "@types/jasmine": "~4.0.0",
+    "@angular-devkit/build-angular": "~15.0.0",
+    "@angular-eslint/builder": "14.1.2",
+    "@angular-eslint/eslint-plugin": "14.1.2",
+    "@angular-eslint/eslint-plugin-template": "14.1.2",
+    "@angular-eslint/schematics": "14.1.2",
+    "@angular-eslint/template-parser": "14.1.2",
+    "@angular/cli": "~15.0.0",
+    "@angular/compiler-cli": "~15.0.0",
+    "@types/jasmine": "~4.3.0",
     "@types/node": "^12.11.1",
     "@typescript-eslint/eslint-plugin": "5.3.0",
     "@typescript-eslint/parser": "5.3.0",
     "codelyzer": "^6.0.0",
     "eslint": "^8.1.0",
     "igniteui-cli": "~<%=cliVersion%>",
-    "jasmine-core": "~4.1.0",
+    "jasmine-core": "~4.5.0",
     "jasmine-spec-reporter": "~7.0.0",
-    "karma": "~6.3.0",
+    "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.2.0",
-    "karma-jasmine": "~5.0.0",
-    "karma-jasmine-html-reporter": "~1.7.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.0.0",
     "protractor": "~7.0.0",
     "ts-node": "~9.1.1",
-    "typescript": "~4.7.2"
+    "typescript": "~4.8.2"
   }
 }

package/igx-ts/projects/_base/files/src/index.html

@@ -11,7 +11,7 @@
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700" rel="stylesheet">
 </head>
-<body class="igx-typography igx-scrollbar">
+<body class="ig-typography ig-scrollbar">
   <app-root></app-root>
 </body>
 </html>

package/igx-ts/projects/_base/files/src/styles.scss

@@ -1,7 +1,6 @@
 /* You can add global styles to this file, and also import other style files */
 // Standard CSS normalize, comment out if not required or using a different module
-@use "~minireset.css/minireset" as *;
-@forward "~minireset.css/minireset";
+@use "minireset.css/minireset";
 
 <%=CustomTheme%>
 html, body {

package/igx-ts/projects/_base/files/tsconfig.json

@@ -5,7 +5,7 @@
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
-    "strict": true,
+    "strict": false,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
@@ -14,10 +14,11 @@
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2020",
-    "module": "es2020",
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
     "lib": [
-      "es2020",
+      "ES2022",
       "dom"
     ]
   },

package/igx-ts/projects/empty/files/src/app/home/home.component.html

@@ -2,24 +2,24 @@
   <h1 class="content__header content__subject">Welcome to Ignite UI for Angular!</h1>
   <h4 class="content__subject">50+ Material-based UI Components</h4>
   <img src="../../assets/indigo-design.svg" class="content__image">
-  <p class="igx-typography__subtitle-1">Discover more at</p>
+  <p class="ig-typography__subtitle-1">Discover more at</p>
   <p>
-    <a href="https://www.infragistics.com/products/ignite-ui-angular" target="_blank" class="content__link igx-typography__body-2">
+    <a href="https://www.infragistics.com/products/ignite-ui-angular" target="_blank" class="content__link ig-typography__body-2">
       www.infragistics.com/products/ignite-ui-angular
     </a>
   </p>
   <p>
-    <a href="https://www.infragistics.com/products/indigo-design" target="_blank" class="content__link igx-typography__body-2">
+    <a href="https://www.infragistics.com/products/indigo-design" target="_blank" class="content__link ig-typography__body-2">
       www.infragistics.com/products/indigo-design
     </a>
   </p>
-  <p class="igx-typography__subtitle-1">We are also on GitHub</p>
+  <p class="ig-typography__subtitle-1">We are also on GitHub</p>
   <p class="content__container--wide">
-    <a href="https://github.com/IgniteUI/igniteui-angular" target="_blank" class="content__link--github igx-typography__body-2">
+    <a href="https://github.com/IgniteUI/igniteui-angular" target="_blank" class="content__link--github ig-typography__body-2">
       <span class="content__link-image"></span>Ignite UI for Angular
     </a>
-    <a href="https://github.com/IgniteUI/igniteui-cli" target="_blank" class="content__link--github igx-typography__body-2">
+    <a href="https://github.com/IgniteUI/igniteui-cli" target="_blank" class="content__link--github ig-typography__body-2">
       <span class="content__link-image"></span>Ignite UI CLI
     </a>
   </p>
-</div>
+</div>

package/igx-ts/projects/side-nav-auth/files/package.json

@@ -10,37 +10,38 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~14.1.0",
-    "@angular/common": "~14.1.0",
-    "@angular/compiler": "~14.1.0",
-    "@angular/core": "~14.1.0",
-    "@angular/forms": "~14.1.0",
-    "@angular/platform-browser": "~14.1.0",
-    "@angular/platform-browser-dynamic": "~14.1.0",
-    "@angular/router": "~14.1.0",
+    "@angular/animations": "~15.0.0",
+    "@angular/common": "~15.0.0",
+    "@angular/compiler": "~15.0.0",
+    "@angular/core": "~15.0.0",
+    "@angular/forms": "~15.0.0",
+    "@angular/platform-browser": "~15.0.0",
+    "@angular/platform-browser-dynamic": "~15.0.0",
+    "@angular/router": "~15.0.0",
     "angular-auth-oidc-client": "^9.0.3",
     "hammerjs": "^2.0.8",
-    "igniteui-angular": "~14.1.0",
-    "core-js": "^3.6.5",
+    "igniteui-angular": "~15.0.0-rc.0",
+    "igniteui-theming": "~1.1.4",
+    "core-js": "^3.25.1",
     "jszip": "^3.5.0",
     "minireset.css": "~0.0.4",
     "rxjs": "~7.5.0",
-    "tslib": "^2.3.0",
-    "zone.js": "~0.11.4"
+    "tslib": "^2.4.0",
+    "zone.js": "~0.11.8"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~14.1.0",
-    "@angular-eslint/builder": "14.1.0",
-    "@angular-eslint/eslint-plugin": "14.1.0",
-    "@angular-eslint/eslint-plugin-template": "14.1.0",
-    "@angular-eslint/schematics": "14.1.0",
-    "@angular-eslint/template-parser": "14.1.0",
-    "@angular/cli": "~14.1.0",
-    "@angular/compiler-cli": "~14.1.0",
+    "@angular-devkit/build-angular": "~15.0.0",
+    "@angular-eslint/builder": "14.1.2",
+    "@angular-eslint/eslint-plugin": "14.1.2",
+    "@angular-eslint/eslint-plugin-template": "14.1.2",
+    "@angular-eslint/schematics": "14.1.2",
+    "@angular-eslint/template-parser": "14.1.2",
+    "@angular/cli": "~15.0.0",
+    "@angular/compiler-cli": "~15.0.0",
     "@angular/language-service": "~14.1.0",
     "@types/facebook-js-sdk": "^2.8.6",
     "@types/hammerjs": "^2.0.35",
-    "@types/jasmine": "~4.0.0",
+    "@types/jasmine": "~4.3.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
     "@typescript-eslint/eslint-plugin": "5.3.0",
@@ -48,15 +49,15 @@
     "codelyzer": "^6.0.0",
     "eslint": "^8.1.0",
     "igniteui-cli": "~<%=cliVersion%>",
-    "jasmine-core": "~4.1.0",
+    "jasmine-core": "~4.5.0",
     "jasmine-spec-reporter": "~7.0.0",
-    "karma": "~6.3.0",
+    "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.2.0",
-    "karma-jasmine": "~5.0.0",
-    "karma-jasmine-html-reporter": "~1.7.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.0.0",
     "protractor": "~7.0.0",
     "ts-node": "~9.1.1",
-    "typescript": "~4.7.2"
+    "typescript": "~4.8.4"
   }
 }

package/igx-ts/projects/side-nav-auth/files/src/index.html

@@ -15,7 +15,7 @@
   <script src="https://connect.facebook.net/en_US/sdk.js"></script>
 </head>
 
-<body class="igx-typography igx-scrollbar">
+<body class="ig-typography ig-scrollbar">
   <app-root></app-root>
 </body>
 

package/igx-ts/radial-gauge/default/index.js

@@ -17,7 +17,7 @@ class IgxRadialGaugeTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAng
                 from: "igniteui-angular-gauges"
             }
         ];
-        this.packages = ["igniteui-angular-core@~14.1.0", "igniteui-angular-gauges@~14.1.0"];
+        this.packages = ["igniteui-angular-core@~14.2.0", "igniteui-angular-gauges@~14.2.0"];
     }
 }
 module.exports = new IgxRadialGaugeTemplate();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@igniteui/angular-templates",
-  "version": "14.1.1010",
+  "version": "15.0.1100-beta.0",
   "description": "Templates for Ignite UI for Angular projects and components",
   "repository": {
     "type": "git",
@@ -12,7 +12,7 @@
   "author": "Infragistics",
   "license": "MIT",
   "dependencies": {
-    "@igniteui/cli-core": "~10.1.0",
+    "@igniteui/cli-core": "~11.0.0-beta.0",
     "typescript": "~4.7.2"
   }
 }

package/igx-ts/custom-templates/fintech-grid/files/src/app/__path__/themes/_mixins.scss

@@ -1,21 +0,0 @@
-@use '<%=igxPackage%>/theming' as *;
-
-@mixin scrollbar-love($scrollbar-color: null) {
-    $scrollbar-track: hexrgba(color($default-palette, 'grays', 200));
-    $scrollbar-thumb: hexrgba(color($default-palette, 'grays', 400));
-
-    @if $scrollbar-color and luminance($scrollbar-color) < .5 {
-        $scrollbar-track: darken($scrollbar-color, 8%);
-        $scrollbar-thumb: lighten($scrollbar-color, 20%);
-    }
-
-    ::-webkit-scrollbar {
-        width: 16px;
-        height: 16px;
-        background-color: $scrollbar-track;
-    }
-
-    ::-webkit-scrollbar-thumb {
-        background-color: $scrollbar-thumb;
-    }
-}

package/igx-ts/custom-templates/fintech-tree-grid/files/src/app/__path__/themes/_mixins.scss

@@ -1,21 +0,0 @@
-@use '<%=igxPackage%>/theming' as *;
-
-@mixin scrollbar-love($scrollbar-color: null) {
-    $scrollbar-track: hexrgba(color($default-palette, 'grays', 200));
-    $scrollbar-thumb: hexrgba(color($default-palette, 'grays', 400));
-
-     @if $scrollbar-color and luminance($scrollbar-color) < .5 {
-        $scrollbar-track: darken($scrollbar-color, 8%);
-        $scrollbar-thumb: lighten($scrollbar-color, 20%);
-    }
-
-     ::-webkit-scrollbar {
-        width: 16px;
-        height: 16px;
-        background-color: $scrollbar-track;
-    }
-
-     ::-webkit-scrollbar-thumb {
-        background-color: $scrollbar-thumb;
-    }
-}

package/igx-ts/projects/_base/files/__dot__browserslistrc

@@ -1,17 +0,0 @@
-# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
-# For additional information regarding the format and rule options, please see:
-# https://github.com/browserslist/browserslist#queries
-
-# For the full list of supported browsers by the Angular framework, please see:
-# https://angular.io/guide/browser-support
-
-# You can see what browsers were selected by your queries by running:
-#   npx browserslist
-
-last 1 Chrome version
-last 1 Firefox version
-last 2 Edge major versions
-last 2 Safari major versions
-last 2 iOS major versions
-Firefox ESR
-