feat!: update to angular 18

.changeset/loud-boxes-stare.md

@@ -0,0 +1,8 @@
+---
+'@swisspost/design-system-intranet-header': major
+'@swisspost/design-system-components-angular': major
+'@swisspost/design-system-styles': major
+'@swisspost/design-system-demo': major
+---
+
+Upgraded to Angular 18

.changeset/slow-buttons-provide.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Added a migration section that explains how to go from 7 to 8.

SECURITY.md

@@ -12,7 +12,8 @@ Please contact [[email protected]](mailto:[email protected]).
 
 | Version | Supported          | Supported Dependencies                     |
 | ------- | ------------------ | ------------------------------------------ |
-| 7       | :white_check_mark: | Bootstrap 5.3, Angular 17, ng-bootstrap 16 |
+| 8       | :white_check_mark: | Bootstrap 5.3, Angular 18, ng-bootstrap 17 |
+| 7       | until June 2025    | Bootstrap 5.3, Angular 17, ng-bootstrap 16 |
 | 6.4     | until end of 2024  | Bootstrap 5.2, Angular 16, ng-bootstrap 15 |
 | 6       | until end of 2024  | Bootstrap 5.2, Angular 15, ng-bootstrap 14 |
 | 5       | until end of 2023  | Bootstrap 5.1, Angular 14, ng-bootstrap 12 |
@@ -23,7 +24,8 @@ Please contact [[email protected]](mailto:[email protected]).
 
 | Version | Supported          | Supported Dependencies                  |
 | ------- | ------------------ | --------------------------------------- |
-| 7[^1]   | :white_check_mark: | Angular, Vue JS, React, Vanilla JS, ... |
+| 8       | :white_check_mark: | Angular, Vue JS, React, Vanilla JS, ... |
+| 7[^1]   | until June 2025    | Angular, Vue JS, React, Vanilla JS, ... |
 | 1       | July 2024          | Angular, Vue JS, React, Vanilla JS, ... |
 
 ### Components Angular
@@ -32,7 +34,8 @@ Please contact [[email protected]](mailto:[email protected]).
 
 | Version | Supported          | Supported Dependencies |
 | ------- | ------------------ | ---------------------- |
-| 7[^1]   | :white_check_mark: | Angular 17             |
+| 8       | :white_check_mark: | Angular 18             |
+| 7[^1]   | until June 2025    | Angular 17             |
 
 ### Internet Header
 
@@ -48,7 +51,8 @@ Please contact [[email protected]](mailto:[email protected]).
 
 | Version | Supported          | Supported Dependencies                     |
 | ------- | ------------------ | ------------------------------------------ |
-| 7[^1]   | :white_check_mark: | Bootstrap 5.3, Angular 17, ng-bootstrap 16 |
+| 8       | :white_check_mark: | Bootstrap 5.3, Angular 18, ng-bootstrap 17 |
+| 7[^1]   | until June 2025    | Bootstrap 5.3, Angular 17, ng-bootstrap 16 |
 | 4       | :white_check_mark: | Bootstrap 5.2, Angular 15, ng-bootstrap 14 |
 | 3       | until end of 2023  | Bootstrap 5.1, Angular 14, ng-bootstrap 12 |
 
@@ -58,6 +62,7 @@ Please contact [[email protected]](mailto:[email protected]).
 
 | Version | Supported          | Supported Dependencies     |
 | ------- | ------------------ | -------------------------- |
-| 7[^1]   | :white_check_mark: | Exports SVG files and JSON |
+| 8       | :white_check_mark: | Exports SVG files and JSON |
+| 7[^1]   | until June 2025    | Exports SVG files and JSON |
 
 [^1]: Synced version with @swisspost/design-system-styles package

package.json

@@ -25,6 +25,7 @@
     "demo:build": "pnpm --filter design-system-demo build",
     "demo:lint": "pnpm --filter design-system-demo lint",
     "docs": "pnpm docs:start",
+    "docs:only": "pnpm --filter design-system-documentation start",
     "docs:start": "pnpm --filter design-system-documentation... --parallel --stream start",
     "docs:build": "pnpm --filter design-system-documentation build",
     "docs:headless": "pnpm --filter design-system-documentation start:headless",

packages/components-angular/angular.json

@@ -28,19 +28,13 @@
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
             "tsConfig": "projects/components/tsconfig.spec.json",
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ]
+            "polyfills": ["zone.js", "zone.js/testing"]
           }
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": [
-              "projects/components/**/*.ts",
-              "projects/components/**/*.html"
-            ]
+            "lintFilePatterns": ["projects/components/**/*.ts", "projects/components/**/*.html"]
           }
         }
       }
@@ -177,6 +171,7 @@
     }
   },
   "cli": {
+    "packageManager": "pnpm",
     "schematicCollections": ["@cypress/schematic", "@schematics/angular"]
   }
 }

packages/components-angular/package.json

@@ -10,28 +10,28 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "17.3.11",
-    "@angular/common": "17.3.11",
-    "@angular/compiler": "17.3.11",
-    "@angular/core": "17.3.11",
-    "@angular/forms": "17.3.11",
-    "@angular/platform-browser": "17.3.11",
-    "@angular/platform-browser-dynamic": "17.3.11",
-    "@angular/router": "17.3.11",
+    "@angular/animations": "18.1.0",
+    "@angular/common": "18.1.0",
+    "@angular/compiler": "18.1.0",
+    "@angular/core": "18.1.0",
+    "@angular/forms": "18.1.0",
+    "@angular/platform-browser": "18.1.0",
+    "@angular/platform-browser-dynamic": "18.1.0",
+    "@angular/router": "18.1.0",
     "@swisspost/design-system-components": "workspace:7.4.0",
     "@swisspost/design-system-styles": "workspace:7.4.0",
     "rxjs": "7.8.1",
     "tslib": "2.6.3",
     "zone.js": "0.14.7"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "17.3.8",
-    "@angular-eslint/builder": "17.5.2",
-    "@angular-eslint/eslint-plugin": "17.5.2",
-    "@angular-eslint/eslint-plugin-template": "17.5.2",
-    "@angular-eslint/template-parser": "17.5.2",
-    "@angular/cli": "17.3.8",
-    "@angular/compiler-cli": "17.3.11",
+    "@angular-devkit/build-angular": "18.0.7",
+    "@angular-eslint/builder": "18.1.0",
+    "@angular-eslint/eslint-plugin": "18.1.0",
+    "@angular-eslint/eslint-plugin-template": "18.1.0",
+    "@angular-eslint/template-parser": "18.1.0",
+    "@angular/cli": "18.0.7",
+    "@angular/compiler-cli": "18.1.0",
     "@cypress/schematic": "2.5.2",
     "@typescript-eslint/eslint-plugin": "7.15.0",
     "@typescript-eslint/parser": "7.15.0",
@@ -42,7 +42,7 @@
     "karma-coverage": "2.2.1",
     "karma-jasmine": "5.1.0",
     "karma-jasmine-html-reporter": "2.1.0",
-    "ng-packagr": "17.3.0",
-    "typescript": "5.3.3"
+    "ng-packagr": "18.1.0",
+    "typescript": "5.4.5"
   }
 }

packages/demo/angular.json

@@ -13,10 +13,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "allowedCommonJsDependencies": [
-              "bootstrap/js/dist/collapse",
-              "prettier"
-            ],
+            "allowedCommonJsDependencies": ["bootstrap/js/dist/collapse", "prettier"],
             "outputPath": "dist/demo",
             "index": "src/index.html",
             "main": "src/main.ts",
@@ -32,14 +29,9 @@
               "src/assets",
               "src/netlify.toml"
             ],
-            "styles": [
-              "src/styles.scss",
-              "./node_modules/highlight.js/styles/vs2015.css"
-            ],
+            "styles": ["src/styles.scss", "./node_modules/highlight.js/styles/vs2015.css"],
             "stylePreprocessorOptions": {
-              "includePaths": [
-                "node_modules"
-              ]
+              "includePaths": ["node_modules"]
             },
             "vendorChunk": true,
             "extractLicenses": false,
@@ -97,23 +89,15 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
-            "styles": [
-              "src/styles.scss"
-            ],
+            "styles": ["src/styles.scss"],
             "scripts": [],
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ]
+            "assets": ["src/favicon.ico", "src/assets"]
           }
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": [
-              "src/**/*.ts",
-              "src/**/*.html"
-            ]
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
           }
         }
       }
@@ -126,5 +110,8 @@
     "@angular-eslint/schematics:library": {
       "setParserOptionsProject": true
     }
+  },
+  "cli": {
+    "packageManager": "pnpm"
   }
 }

packages/demo/package.json

@@ -12,17 +12,17 @@
     "lint": "ng lint"
   },
   "dependencies": {
-    "@angular/animations": "17.3.11",
+    "@angular/animations": "18.1.0",
     "@angular/cdk": "17.3.10",
-    "@angular/common": "17.3.11",
-    "@angular/compiler": "17.3.11",
-    "@angular/core": "17.3.11",
-    "@angular/forms": "17.3.11",
-    "@angular/localize": "17.3.11",
-    "@angular/platform-browser": "17.3.11",
-    "@angular/platform-browser-dynamic": "17.3.11",
-    "@angular/router": "17.3.11",
-    "@ng-bootstrap/ng-bootstrap": "16.0.0",
+    "@angular/common": "18.1.0",
+    "@angular/compiler": "18.1.0",
+    "@angular/core": "18.1.0",
+    "@angular/forms": "18.1.0",
+    "@angular/localize": "18.1.0",
+    "@angular/platform-browser": "18.1.0",
+    "@angular/platform-browser-dynamic": "18.1.0",
+    "@angular/router": "18.1.0",
+    "@ng-bootstrap/ng-bootstrap": "17.0.0",
     "@popperjs/core": "2.11.8",
     "@swimlane/ngx-datatable": "20.1.0",
     "@swisspost/design-system-intranet-header": "workspace:7.4.0",
@@ -39,15 +39,15 @@
     "zone.js": "0.14.7"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "17.3.8",
-    "@angular-eslint/builder": "17.5.2",
-    "@angular-eslint/eslint-plugin": "17.5.2",
-    "@angular-eslint/eslint-plugin-template": "17.5.2",
-    "@angular-eslint/template-parser": "17.5.2",
-    "@angular/cli": "17.3.8",
-    "@angular/compiler-cli": "17.3.11",
-    "@angular/elements": "17.3.11",
-    "@angular/language-service": "17.3.11",
+    "@angular-devkit/build-angular": "18.0.7",
+    "@angular-eslint/builder": "18.1.0",
+    "@angular-eslint/eslint-plugin": "18.1.0",
+    "@angular-eslint/eslint-plugin-template": "18.1.0",
+    "@angular-eslint/template-parser": "18.1.0",
+    "@angular/cli": "18.0.7",
+    "@angular/compiler-cli": "18.1.0",
+    "@angular/elements": "18.1.0",
+    "@angular/language-service": "18.1.0",
     "@types/jasmine": "5.1.4",
     "@types/jasminewd2": "2.0.13",
     "@types/node": "20.12.7",
@@ -68,7 +68,7 @@
     "sass": "1.77.6",
     "sockjs": "0.3.24",
     "ts-node": "10.9.2",
-    "typescript": "5.3.3",
+    "typescript": "5.4.5",
     "undici-types": "6.19.2",
     "webpack": "5.92.1"
   }

packages/demo/src/app/app.module.ts

@@ -26,44 +26,37 @@ import { PostSampleComponentsModule } from './post-sample/post-sample-components
 import { SwissPostIntranetHeaderModule } from '@swisspost/design-system-intranet-header';
 import { HomeComponent } from './home/home.component';
 import { PostCommonModule } from './common/post-common.module';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { LayoutContainerComponent } from './layout-container/layout-container.component';
 
 registerLocaleData(localeDe);
 registerLocaleData(localeFr);
 registerLocaleData(localeIt);
 registerLocaleData(localeEn);
 
-@NgModule({
-  declarations: [
-    AppComponent,
-    IntranetLayoutComponent,
-    LayoutContainerComponent,
-    HomeComponent,
-    CopyToClipboardDirective,
-  ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    FormsModule,
-    ReactiveFormsModule,
-    NgbModule,
-    HttpClientModule,
-    BootstrapComponentsModule,
-    NgBootstrapComponentsModule,
-    IntranetComponentsModule,
-    PostCommonModule,
-    PostSampleComponentsModule,
-    SwissPostIntranetHeaderModule,
-    ToastrModule.forRoot({
-      extendedTimeOut: 0,
-      closeButton: true,
-      toastClass: 'toast',
-    }),
-    HighlightModule,
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  providers: [ErrorService, HighlightProvider.Config],
-  bootstrap: [AppComponent],
-})
+@NgModule({ declarations: [
+        AppComponent,
+        IntranetLayoutComponent,
+        LayoutContainerComponent,
+        HomeComponent,
+        CopyToClipboardDirective,
+    ],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    bootstrap: [AppComponent], imports: [BrowserModule,
+        AppRoutingModule,
+        FormsModule,
+        ReactiveFormsModule,
+        NgbModule,
+        BootstrapComponentsModule,
+        NgBootstrapComponentsModule,
+        IntranetComponentsModule,
+        PostCommonModule,
+        PostSampleComponentsModule,
+        SwissPostIntranetHeaderModule,
+        ToastrModule.forRoot({
+            extendedTimeOut: 0,
+            closeButton: true,
+            toastClass: 'toast',
+        }),
+        HighlightModule], providers: [ErrorService, HighlightProvider.Config, provideHttpClient(withInterceptorsFromDi())] })
 export class AppModule {}

packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-demo-page/datepicker-localization.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { formatDate, TranslationWidth } from '@angular/common';
+import { formatDate } from '@angular/common';
 import { NgbDatepickerI18n, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
 
 const I18N_VALUES = {
@@ -93,7 +93,7 @@ export class SwissPostDatepickerI18n extends NgbDatepickerI18n {
     super();
   }
 
-  getWeekdayLabel(weekday: number, _width?: TranslationWidth): string {
+  getWeekdayLabel(weekday: number): string {
     return I18N_VALUES[this._i18n.language].weekdays[weekday - 1];
   }
 

packages/demo/src/app/ng-bootstrap/components/progressbar/progressbar-demo/progressbar-demo.component.html

@@ -21,7 +21,7 @@
 
 <ngb-progressbar
   ariaLabel="Example of progress."
-  type="danger"
+  type="error"
   [showValue]="true"
   [value]="50"
 ></ngb-progressbar>

packages/documentation/src/stories/components/datepicker/datepicker-i18n-provider.sample.ts

@@ -1,5 +1,5 @@
 import { Inject, Injectable, LOCALE_ID } from '@angular/core';
-import { formatDate, TranslationWidth } from '@angular/common';
+import { formatDate } from '@angular/common';
 import { NgbDatepickerI18n, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
 
 const I18N_VALUES = {
@@ -82,7 +82,7 @@ export class SwissPostDatepickerI18n extends NgbDatepickerI18n {
   constructor(@Inject(LOCALE_ID) private locale: string) {
     super();
   }
-  getWeekdayLabel(weekday: number, _width?: TranslationWidth): string {
+  getWeekdayLabel(weekday: number): string {
     return I18N_VALUES[this.locale].weekdays[weekday - 1];
   }