chore: update wtih agnular 15.0.0 (#1086)

IgniteUI · Nov 22, 2022 · 3ed38c0 · 3ed38c0
1 parent 25498c0
commit 3ed38c0
Show file tree

Hide file tree

Showing 49 changed files with 170 additions and 235 deletions.
diff --git a/packages/cli/lib/commands/upgrade.ts b/packages/cli/lib/commands/upgrade.ts
@@ -56,7 +56,7 @@ command = {
 					if (success && !argv.skipInstall) {
 						Util.log("Installing npm packages.");
 						try {
-							Util.execSync("npm install --quiet");
+							Util.execSync("npm install --force --quiet");
 							Util.log("npm packages installed.");
 						} catch (error) {
 							Util.error(`Error installing npm packages.`);

diff --git a/packages/cli/migrations/update-3/index.spec.ts b/packages/cli/migrations/update-3/index.spec.ts
@@ -13,7 +13,7 @@ describe("Update 3.0.0", () => {
 		appTree = new UnitTestTree(new EmptyTree());
 	});
 
-	it("should add igx-typography class to body if needed", async done => {
+	it("should add ig-typography class to body if needed", async done => {
 		const indexFile = "/src/index.html";
 		appTree.create(indexFile,
 `<body>
@@ -24,21 +24,21 @@ describe("Update 3.0.0", () => {
 		await schematicRunner.runSchematicAsync("migration-02", {}, appTree).toPromise();
 		expect(appTree.readContent(indexFile))
 			.toEqual(
-`<body class="igx-typography">
+`<body class="ig-typography">
 <app-root></app-root>
 </body>`
 			);
 		appTree.overwrite(indexFile, `<body class="">`);
 		await schematicRunner.runSchematicAsync("migration-02", {}, appTree).toPromise();
-		expect(appTree.readContent(indexFile)).toEqual(`<body class="igx-typography">`);
+		expect(appTree.readContent(indexFile)).toEqual(`<body class="ig-typography">`);
 
 		appTree.overwrite(indexFile, `<body class="test class">`);
 		await schematicRunner.runSchematicAsync("migration-02", {}, appTree).toPromise();
-		expect(appTree.readContent(indexFile)).toEqual(`<body class="test class igx-typography">`);
+		expect(appTree.readContent(indexFile)).toEqual(`<body class="test class ig-typography">`);
 
-		appTree.overwrite(indexFile, `<body class="test igx-typography">`);
+		appTree.overwrite(indexFile, `<body class="test ig-typography">`);
 		await schematicRunner.runSchematicAsync("migration-02", {}, appTree).toPromise();
-		expect(appTree.readContent(indexFile)).toEqual(`<body class="test igx-typography">`);
+		expect(appTree.readContent(indexFile)).toEqual(`<body class="test ig-typography">`);
 		done();
 	});
 

diff --git a/packages/cli/migrations/update-3/index.ts b/packages/cli/migrations/update-3/index.ts
@@ -65,7 +65,7 @@ export default function(): Rule {
 	return (host: Tree, context: SchematicContext) => {
 		context.logger.info("Updating project to Ignite UI CLI 3.0.0");
 
-		addClassToBody(host, "igx-typography");
+		addClassToBody(host, "ig-typography");
 		addHomeHeaderStyles(host);
 		removeGridForRoot(host);
 		updateConfig(host);

diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "igniteui-cli",
-  "version": "10.1.0",
+  "version": "11.0.0-rc.0",
   "description": "CLI tool for creating Ignite UI projects",
   "keywords": [
     "CLI",
@@ -78,8 +78,8 @@
     "all": true
   },
   "dependencies": {
-    "@igniteui/angular-templates": "~14.1.1010",
-    "@igniteui/cli-core": "~10.1.0",
+    "@igniteui/angular-templates": "~15.0.1100-rc.0",
+    "@igniteui/cli-core": "~11.0.0-rc.0",
     "chalk": "^2.3.2",
     "fs-extra": "^3.0.1",
     "glob": "^7.1.2",

diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/package.json b/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/package.json
@@ -41,7 +41,7 @@
     "deepmerge": "^4.2.2",
     "eslint": "^7.32.0",
     "eslint-plugin-lit": "^1.6.1",
-    "igniteui-cli": "10.1.0",
+    "igniteui-cli": "11.0.0-rc.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.60.0",
     "rollup-plugin-copy-assets": "^2.0.3",

diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/_base_with_home/files/package.json b/packages/cli/templates/webcomponents/igc-ts/projects/_base_with_home/files/package.json
@@ -50,7 +50,7 @@
     "deepmerge": "^4.2.2",
     "eslint": "^7.32.0",
     "eslint-plugin-lit": "^1.6.1",
-    "igniteui-cli": "10.1.0",
+    "igniteui-cli": "11.0.0-rc.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.60.0",
     "rollup-plugin-copy-assets": "^2.0.3",

diff --git a/...es/cli/templates/webcomponents/igc-ts/projects/_base_with_home/files/src/app/home/home.ts b/...es/cli/templates/webcomponents/igc-ts/projects/_base_with_home/files/src/app/home/home.ts
@@ -19,7 +19,7 @@ export class HomeComponent extends LitElement {
       <h1>Welcome to Ignite UI for Web Components!</h1>
       <h4>A complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.</h4>
       <img src="./src/assets/astronaut-components.svg" alt="indigoDesign">
-      <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-web-components" target="_blank">
           www.infragistics.com/products/ignite-ui-web-components
@@ -30,7 +30,7 @@ export class HomeComponent extends LitElement {
           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-cli" target="_blank">
           <span class="content__link-image"></span>Ignite UI CLI

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@igniteui/cli-core",
-  "version": "10.1.0",
+  "version": "11.0.0-rc.0",
   "description": "Base types and functionality for Ignite UI CLI",
   "repository": {
     "type": "git",

diff --git a/packages/core/packages/PackageManager.ts b/packages/core/packages/PackageManager.ts
@@ -95,7 +95,7 @@ export class PackageManager {
 				case "npm":
 				/* passes through */
 				default:
-					command = `${managerCommand} install --quiet`;
+					command = `${managerCommand} install --force --quiet`;
 					break;
 			}
 			await this.flushQueue(false);
@@ -277,7 +277,7 @@ export class PackageManager {
 			case "npm":
 			/* passes through */
 			default:
-				return `${managerCommand} install ${packageName} --quiet --save`;
+				return `${managerCommand} install ${packageName} --force --quiet --save`;
 		}
 	}
 

diff --git a/packages/igx-templates/igx-ts/bullet-graph/default/index.ts b/packages/igx-templates/igx-ts/bullet-graph/default/index.ts
@@ -14,7 +14,7 @@ class IgxBulletGraphTemplate extends IgniteUIForAngularTemplate {
 			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();
diff --git a/packages/igx-templates/igx-ts/category-chart/default/index.ts b/packages/igx-templates/igx-ts/category-chart/default/index.ts
@@ -14,7 +14,7 @@ class IgxCategoryChartTemplate extends IgniteUIForAngularTemplate {
 			{ 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();
diff --git a/...es/igx-templates/igx-ts/chip/default/files/src/app/__path__/__filePrefix__.component.html b/...es/igx-templates/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>

diff --git a/...igx-ts/custom-templates/awesome-grid/files/src/app/__path__/__filePrefix__.component.scss b/...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,

diff --git a/packages/igx-templates/igx-ts/custom-templates/awesome-grid/index.ts b/packages/igx-templates/igx-ts/custom-templates/awesome-grid/index.ts
@@ -32,7 +32,7 @@ class IgxGridAwesomeTemplate extends IgniteUIForAngularTemplate {
 			},
 			{ 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();
diff --git a/...tes/igx-ts/custom-templates/crm-grid/files/src/app/__path__/__filePrefix__.component.html b/...tes/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>

diff --git a/...tes/igx-ts/custom-templates/crm-grid/files/src/app/__path__/__filePrefix__.component.scss b/...tes/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);
                     }
                 }
             }

diff --git a/...lates/igx-ts/custom-templates/crm-grid/files/src/app/__path__/__filePrefix__.component.ts b/...lates/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--;

diff --git a/packages/igx-templates/igx-ts/custom-templates/crm-grid/index.ts b/packages/igx-templates/igx-ts/custom-templates/crm-grid/index.ts
@@ -41,7 +41,7 @@ class IgxGridCRMTemplate extends IgniteUIForAngularTemplate {
 			},
 			{ 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();
diff --git a/...igx-ts/custom-templates/fintech-grid/files/src/app/__path__/__filePrefix__.component.scss b/...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 {

diff --git a/...templates/igx-ts/custom-templates/fintech-grid/files/src/app/__path__/themes/_mixins.scss b/...templates/igx-ts/custom-templates/fintech-grid/files/src/app/__path__/themes/_mixins.scss
diff --git a/packages/igx-templates/igx-ts/custom-templates/fintech-grid/index.ts b/packages/igx-templates/igx-ts/custom-templates/fintech-grid/index.ts
@@ -28,7 +28,7 @@ class IgxFinTechGridTemplate extends IgniteUIForAngularTemplate {
 			},
 			{ 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();
diff --git a/...s/custom-templates/fintech-tree-grid/files/src/app/__path__/__filePrefix__.component.scss b/...s/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,19 +209,16 @@
 @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;
     width: 100%;
 
     ::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 {