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

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.2.1",
     "@swisspost/design-system-styles": "workspace:7.2.1",
     "rxjs": "7.8.1",
     "tslib": "2.6.3",
     "zone.js": "0.14.7"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "17.3.8",
+    "@angular-devkit/build-angular": "18.0.7",
     "@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/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/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.2.1",
@@ -39,15 +39,15 @@
     "zone.js": "0.14.7"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "17.3.8",
+    "@angular-devkit/build-angular": "18.0.7",
     "@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/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];
   }
 

packages/documentation/src/stories/getting-started/migration-guide/global-state.component.ts

@@ -6,7 +6,7 @@ import { getLocaleStorage, MIGRATION_TYPE, setLocaleStorage } from './util/persi
 @customElement('migration-global-state')
 export class GlobalStateComponent extends LitElement {
   @state() private state = {
-    currentVersion: 6,
+    currentVersion: 7,
     environment: 'intranet',
     angular: true,
   };

packages/documentation/src/stories/getting-started/migration-guide/migration-guide.docs.mdx

@@ -5,6 +5,7 @@ import './setup.component';
 import './migrationv4-5.component';
 import './migrationv5-6.component';
 import './migrationv6-7.component';
+import './migrationv7-8.component';
 
 <Meta of={MigrationGuideStories} />
 
@@ -22,4 +23,6 @@ import './migrationv6-7.component';
 
   <migration-version-6-7></migration-version-6-7>
 
+  <migration-version-7-8></migration-version-7-8>
+
 </migration-global-state>