Upgrade Angular to v18 (#721)

* Angular CLI update for packages - @angular/cdk@*, @angular/cli@*, @angular/core@*, ng-mocks@*, @angular-builders/jest@*

* Fix tests and replace deprecated HttpClientModule

* Changelog and version

* Update angular-svg-icon to v18

Author: mpellerin42

CHANGELOG.md

@@ -1,3 +1,9 @@
+# 2.67.0 (2024-08-08)
+
+### Improvements
+
+- Upgrade to Angular 18 
+
 # 2.66.4 (2024-07-19)
 
 ### Improvements

package-lock.json

@@ -20,35 +20,35 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^17.3.6",
-    "@angular/cdk": "^17.3.6",
-    "@angular/common": "^17.3.6",
-    "@angular/compiler": "^17.3.6",
-    "@angular/core": "^17.3.6",
-    "@angular/forms": "^17.3.6",
-    "@angular/platform-browser": "^17.3.6",
-    "@angular/platform-browser-dynamic": "^17.3.6",
-    "@angular/router": "^17.3.6",
+    "@angular/animations": "^18.1.4",
+    "@angular/cdk": "^18.1.4",
+    "@angular/common": "^18.1.4",
+    "@angular/compiler": "^18.1.4",
+    "@angular/core": "^18.1.4",
+    "@angular/forms": "^18.1.4",
+    "@angular/platform-browser": "^18.1.4",
+    "@angular/platform-browser-dynamic": "^18.1.4",
+    "@angular/router": "^18.1.4",
     "@ng-web-apis/common": "^2.1.0",
-    "angular-svg-icon": "^17.0.0",
+    "angular-svg-icon": "^18.0.1",
     "date-fns": "^3.6.0",
     "rxjs": "^7.8.1",
     "tslib": "^2.4.0",
     "zone.js": "^0.14.2"
   },
   "devDependencies": {
-    "@angular-builders/jest": "^17.0.3",
-    "@angular-devkit/build-angular": "^17.3.6",
-    "@angular/cli": "^17.3.6",
-    "@angular/compiler-cli": "^17.3.6",
+    "@angular-builders/jest": "^18.0.0",
+    "@angular-devkit/build-angular": "^18.1.4",
+    "@angular/cli": "^18.1.4",
+    "@angular/compiler-cli": "^18.1.4",
     "@ngneat/spectator": "^18.0.1",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.12.5",
     "angular-cli-ghpages": "^1.0.7",
     "husky": "^8.0.3",
     "jest": "^29.7.0",
-    "ng-mocks": "^14.12.2",
-    "ng-packagr": "^17.3.0",
+    "ng-mocks": "^14.13.0",
+    "ng-packagr": "^18.1.0",
     "prettier": "^3.2.5",
     "pretty-quick": "^4.0.0",
     "typescript": "^5.4.4"

package.json

@@ -1,7 +1,7 @@
 {
     "name": "@guillotinaweb/pastanaga-angular",
     "description": "Provides Pastanaga UI elements as Angular components",
-    "version": "2.66.4",
+    "version": "2.67.0",
     "license": "MIT",
     "keywords": [
         "angular",

projects/pastanaga-angular/package.json

@@ -1,4 +1,4 @@
-@for (typedOption of typedOptions; track typedOption) {
+@for (typedOption of typedOptions; track typedOption.id) {
   @if (typedOption.type === 'header' && !!typedOption.header) {
     <pa-option-header>
       {{ typedOption.header.label }}

projects/pastanaga-angular/src/lib/controls/textfield/select/select-options/select-options.component.html

@@ -1,6 +1,8 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { OptionHeaderModel, OptionModel, OptionSeparator } from '../../../control.model';
 
+let optionId = 0;
+
 @Component({
   selector: 'pa-select-options',
   templateUrl: './select-options.component.html',
@@ -11,19 +13,20 @@ export class SelectOptionsComponent {
     this.typedOptions = (values || []).map((value) => {
       switch (value.type) {
         case 'header':
-          return { type: 'header', header: value as OptionHeaderModel };
+          return { id: optionId++, type: 'header', header: value as OptionHeaderModel };
         case 'option':
-          return { type: 'option', option: value as OptionModel };
+          return { id: optionId++, type: 'option', option: value as OptionModel };
         case 'separator':
-          return { type: 'separator', separator: value as OptionSeparator };
+          return { id: optionId++, type: 'separator', separator: value as OptionSeparator };
         default:
-          return { type: 'null' };
+          return { id: optionId++, type: 'null' };
       }
     });
   }
   @Output() optionSelected = new EventEmitter<OptionModel>();
 
   typedOptions: {
+    id: number;
     type: 'header' | 'separator' | 'option' | 'null';
     option?: OptionModel;
     header?: OptionHeaderModel;

projects/pastanaga-angular/src/lib/controls/textfield/select/select-options/select-options.component.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { IconComponent } from './icon.component';
 import { By } from '@angular/platform-browser';
@@ -9,7 +9,7 @@ describe('IconComponent', () => {
   let component: IconComponent;
   let fixture: ComponentFixture<IconComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       providers: [
         {

projects/pastanaga-angular/src/lib/icon/icon.component.spec.ts

@@ -2,11 +2,12 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { IconComponent } from './icon.component';
 import { AngularSvgIconModule } from 'angular-svg-icon';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 
 @NgModule({
-  imports: [CommonModule, AngularSvgIconModule, HttpClientModule],
+  imports: [CommonModule, AngularSvgIconModule],
   declarations: [IconComponent],
   exports: [IconComponent],
+  providers: [provideHttpClient(withInterceptorsFromDi())],
 })
 export class PaIconModule {}

projects/pastanaga-angular/src/lib/icon/icon.module.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { Component, ViewChild } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { TableHeaderDirective } from './table.directives';
@@ -62,7 +62,7 @@ describe('Table', () => {
   let component: TestComponent;
   let fixture: ComponentFixture<TestComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [MockModule(PaFocusableModule)],
       declarations: [