Upgrade to Angular 18, and drop support for 17 (#1682)

Author: jpzwarte

.changeset/perfect-hotels-flow.md

@@ -0,0 +1,5 @@
+---
+'@sl-design-system/angular': major
+---
+
+Upgrade to Angular 18 and drop support for 17

package.json

@@ -449,7 +449,7 @@
     "@storybook/theming": "^8.4.7",
     "@storybook/web-components-vite": "^8.4.7",
     "@types/chai-as-promised": "^8.0.1",
-    "@types/mocha": "^10.0.9",
+    "@types/mocha": "^10.0.10",
     "@types/sinon": "^17.0.3",
     "@web/dev-server-esbuild": "^1.0.3",
     "@web/test-runner": "^0.19.0",

packages/angular/.storybook/main.ts

@@ -1,20 +1,9 @@
-import type { StorybookConfig } from '@storybook/angular';
+import { type StorybookConfig } from '@storybook/angular';
 
 const config: StorybookConfig = {
   stories: [
     '../stories/*.stories.ts'
   ],
-  addons: [
-    '@storybook/addon-a11y',
-    '@storybook/addon-actions',
-    '@storybook/addon-storysource',
-    {
-      name: '@storybook/addon-essentials',
-      options: {
-        actions: false
-      }
-    }
-  ],
   core: {
     disableTelemetry: true
   },

packages/angular/package.json

@@ -59,18 +59,18 @@
     }
   },
   "devDependencies": {
-    "@angular-devkit/architect": "^0.1703.11",
-    "@angular-devkit/build-angular": "^17.3.11",
-    "@angular-devkit/core": "^17.3.11",
-    "@angular/animations": "^17.3.12",
-    "@angular/cli": "~17.3.11",
-    "@angular/common": "^17.3.12",
-    "@angular/compiler": "^17.3.12",
-    "@angular/compiler-cli": "^17.3.12",
-    "@angular/core": "^17.3.12",
-    "@angular/forms": "^17.3.12",
-    "@angular/platform-browser": "^17.3.12",
-    "@angular/platform-browser-dynamic": "^17.3.12",
+    "@angular-devkit/architect": "^0.1802.12",
+    "@angular-devkit/build-angular": "^18.2.12",
+    "@angular-devkit/core": "^18.2.12",
+    "@angular/animations": "^18.2.13",
+    "@angular/cli": "~18.2.12",
+    "@angular/common": "^18.2.13",
+    "@angular/compiler": "^18.2.13",
+    "@angular/compiler-cli": "^18.2.13",
+    "@angular/core": "^18.2.13",
+    "@angular/forms": "^18.2.13",
+    "@angular/platform-browser": "^18.2.13",
+    "@angular/platform-browser-dynamic": "^18.2.13",
     "@sl-design-system/checkbox": "^2.0.0",
     "@sl-design-system/form": "^1.0.3",
     "@sl-design-system/icon": "^1.0.2",
@@ -80,19 +80,16 @@
     "@sl-design-system/switch": "^1.0.2",
     "@sl-design-system/text-area": "^1.0.1",
     "@sl-design-system/text-field": "^1.3.5",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-links": "^8.4.7",
     "@storybook/angular": "^8.4.7",
-    "@storybook/blocks": "^8.4.7",
     "@storybook/theming": "^8.4.7",
-    "@types/jasmine": "~5.1.4",
-    "jasmine-core": "~5.1.2",
+    "@types/jasmine": "~5.1.5",
+    "jasmine-core": "~5.5.0",
     "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "ng-packagr": "^17.3.0",
+    "ng-packagr": "^18.2.1",
     "rxjs": "~7.8.1",
     "storybook": "^8.4.7",
     "tslib": "^2.8.1",

packages/angular/src/package.json

@@ -11,8 +11,8 @@
     "directory": "packages/angular"
   },
   "peerDependencies": {
-    "@angular/core": "^17.0.0 || ^18.0.0",
-    "@angular/forms": "^17.0.0 || ^18.0.0",
+    "@angular/core": "^18.0.0 || ^19.0.0",
+    "@angular/forms": "^18.0.0 || ^19.0.0",
     "@sl-design-system/checkbox": "*",
     "@sl-design-system/form": "*",
     "@sl-design-system/icon": "*",

scripts/cem-plugin-angular-wrapper.js

@@ -20,6 +20,7 @@ function getComponentEvents(component, eventMap) {
 function generateComponent(imports, component, events) {
   return `import { Component, ${events.length ? 'EventEmitter, ' : ''}Input${events.length ? ', Output' : ''} } from '@angular/core';
 ${imports.join('\n')}
+import { ElementRef } from '@angular/core';
 import { CePassthrough } from '@sl-design-system/angular';
 
 @Component({
@@ -31,7 +32,7 @@ export class ${component.name}Component extends CePassthrough<${component.name}>
 ${component.members
   ?.filter(member => member.kind === 'field' && !member.privacy && !member.static && !member.name.endsWith('Event'))
   .map(member => `  @Input() ${member.name}!: ${component.name}['${member.name}'];`).join('\n') ?? ''}
-${events.length ? `\n${events.map(event => event.code).join('\n')}\n` : ''}}
+${events.length ? `\n${events.map(event => event.code).join('\n')}\n` : ''}\n  constructor(elRef: ElementRef<${component.name}>) {\n    super(elRef);\n  }\n}
 `;
 };