Major/upgrade to ng 19 (#93)

breaking changes: Material Theme from 2 o 3!

Author: eksrha

.github/workflows/build-gh-pages-demo.yaml

@@ -28,7 +28,7 @@ jobs:
             echo "::warning title=Invalid file permissions automatically fixed::$line"
           done
       - name: Upload Pages artifact
-        uses: actions/upload-pages-artifact@v2
+        uses: actions/upload-pages-artifact@v3
         with:
           path: dist/lib-workspace
   deploy:
@@ -43,4 +43,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v3
+        uses: actions/deploy-pages@v4

package.json

@@ -2,7 +2,7 @@
   "name": "@fullstack-devops/ngx-mat-components",
   "version": "0.0.0-PLACEHOLDER",
   "engines": {
-    "node": ">=18.0.0",
+    "node": ">=20.0.0",
     "yarn": "^1.22.17",
     "npm": "Please use Yarn instead of NPM to install dependencies. See: https://yarnpkg.com/lang/en/docs/install/"
   },
@@ -20,51 +20,51 @@
   },
   "private": false,
   "dependencies": {
-    "@angular/animations": "^18.2.13",
-    "@angular/cdk": "^18.2.14",
-    "@angular/common": "^18.2.13",
-    "@angular/compiler": "^18.2.13",
-    "@angular/core": "^18.2.13",
-    "@angular/forms": "^18.2.13",
-    "@angular/material": "^18.2.14",
-    "@angular/platform-browser": "^18.2.13",
-    "@angular/platform-browser-dynamic": "^18.2.13",
-    "@angular/router": "^18.2.13",
-    "@ng-icons/core": "24",
-    "@ng-icons/material-icons": "24",
-    "date-fns": "^2.29.3",
-    "material-icons": "^1.13.1",
+    "@angular/animations": "^19.2.14",
+    "@angular/cdk": "^19.2.19",
+    "@angular/common": "^19.2.14",
+    "@angular/compiler": "^19.2.14",
+    "@angular/core": "^19.2.14",
+    "@angular/forms": "^19.2.14",
+    "@angular/material": "^19.2.19",
+    "@angular/material-date-fns-adapter": "^19.2.19",
+    "@angular/platform-browser": "^19.2.14",
+    "@angular/platform-browser-dynamic": "^19.2.14",
+    "@angular/router": "^19.2.14",
+    "date-fns": "^4.1.0",
+    "lucide-angular": "^0.523.0",
     "postcss": "^8.5.6",
     "rxjs": "^7.8.2",
     "tslib": "^2.8.1",
-    "zone.js": "^0.14.10"
+    "zone.js": "^0.15.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.2.20",
-    "@angular-eslint/builder": "^18.4.3",
-    "@angular-eslint/eslint-plugin": "^18.4.3",
-    "@angular-eslint/eslint-plugin-template": "^18.4.3",
-    "@angular-eslint/schematics": "^18.4.3",
-    "@angular-eslint/template-parser": "^18.4.3",
-    "@angular/cli": "^18.2.20",
-    "@angular/compiler-cli": "^18.2.13",
-    "@types/jasmine": "~5.1.4",
+    "@angular-devkit/build-angular": "^19.2.15",
+    "@angular-eslint/builder": "^19.8.1",
+    "@angular-eslint/eslint-plugin": "^19.8.1",
+    "@angular-eslint/eslint-plugin-template": "^19.8.1",
+    "@angular-eslint/schematics": "^19.8.1",
+    "@angular-eslint/template-parser": "^19.8.1",
+    "@angular/cli": "^19.2.15",
+    "@angular/compiler-cli": "^19.2.14",
+    "@types/jasmine": "~5.1.8",
     "@typescript-eslint/eslint-plugin": "^8.35.0",
     "@typescript-eslint/parser": "^8.35.0",
     "@typescript-eslint/types": "^8.35.0",
     "@typescript-eslint/utils": "^8.35.0",
-    "autoprefixer": "^10.4.16",
+    "autoprefixer": "^10.4.21",
     "eslint": "^9.29.0",
     "jasmine-core": "~5.1.1",
-    "karma": "~6.3.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": "^18.2.1",
-    "prettier": "^2.8.3",
-    "prettier-eslint": "^15.0.1",
-    "sass": "^1.69.5",
-    "typescript": "~5.4.5"
+    "ng-packagr": "^19.2.2",
+    "prettier": "^3.6.1",
+    "prettier-eslint": "^16.4.2",
+    "sass": "^1.89.2",
+    "typescript": "~5.8.3",
+    "vite": "^6.0.0"
   }
 }

projects/lib-workspace/src/app/app.component.spec.ts

@@ -0,0 +1,41 @@
+import { ApplicationConfig, LOCALE_ID, provideZoneChangeDetection } from '@angular/core';
+import { provideHttpClient } from '@angular/common/http';
+import { provideRouter } from '@angular/router';
+import { routes } from './app.routes';
+
+import { MAT_DATE_LOCALE } from '@angular/material/core';
+import { MAT_CARD_CONFIG } from '@angular/material/card';
+import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
+import { MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar';
+import { MAT_BUTTON_CONFIG } from '@angular/material/button';
+import * as dateFnsLocales from 'date-fns/locale';
+import { FsCalendarService } from 'ngx-mat-components';
+import { APP_BASE_HREF } from '@angular/common';
+
+const locales: any = dateFnsLocales;
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    {
+      provide: APP_BASE_HREF,
+      useValue: '.',
+    },
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+    provideHttpClient(),
+    { provide: MAT_BUTTON_CONFIG, useValue: { defaultAppearance: 'outlined' } },
+    { provide: MAT_CARD_CONFIG, useValue: { appearance: 'outlined' } },
+    { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'outline' } },
+    {
+      provide: MAT_SNACK_BAR_DEFAULT_OPTIONS,
+      useValue: { duration: 5000, verticalPosition: 'top', horizontalPosition: 'end' },
+    },
+    { provide: LOCALE_ID, useValue: 'de-DE' },
+    { provide: MAT_DATE_LOCALE, useValue: 'de-DE' },
+    {
+      provide: 'FS_DATE_LOCALE',
+      useClass: FsCalendarService,
+      useValue: locales[navigator.language],
+    },
+  ],
+};

projects/lib-workspace/src/app/app.component.ts

@@ -4,13 +4,13 @@
 
     <fs-nav-frame-toolbar-center>
       <button mat-icon-button>
-        <mat-icon>help</mat-icon>
+        <i-lucide [img]="CircleQuestionMarkIcon" class="my-icon"></i-lucide>
       </button>
       <button mat-icon-button matBadge="3">
-        <mat-icon>article</mat-icon>
+        <i-lucide [img]="NewspaperIcon" class="my-icon"></i-lucide>
       </button>
       <button mat-icon-button>
-        <mat-icon>call</mat-icon>
+        <i-lucide [img]="CogIcon" class="my-icon"></i-lucide>
       </button>
     </fs-nav-frame-toolbar-center>
 
@@ -20,14 +20,14 @@
         <input matInput placeholder="Searching..." />
       </mat-form-field>
       <button mat-icon-button>
-        <mat-icon>notifications</mat-icon>
+        <i-lucide [img]="BellIcon" class="my-icon"></i-lucide>
       </button>
     </fs-nav-frame-toolbar-end>
   </fs-nav-frame-toolbar>
 
   <fs-nav-frame-sidebar>
     <fs-nav-frame-sidebar-item *ngFor="let route of navRoutes" routerLink="{{ route.path }}">
-      <i class="material-icons">{{ route.icon }}</i>
+      <span-lucide [img]="route.icon" class="my-icon"></span-lucide>
       <span>{{ route.title }}</span>
     </fs-nav-frame-sidebar-item>
   </fs-nav-frame-sidebar>
@@ -39,10 +39,10 @@
 
     <fs-nav-user-profile-actions>
       <button mat-icon-button>
-        <i class="material-icons">manage_accounts</i>
+        <i-lucide [img]="UserPenIcon" class="my-icon"></i-lucide>
       </button>
-      <button>
-        <i class="material-icons">logout</i>
+      <button mat-icon-button>
+        <i-lucide [img]="LogOutIcon" class="my-icon"></i-lucide>
       </button>
     </fs-nav-user-profile-actions>
   </fs-nav-user-profile>

projects/lib-workspace/src/app/app.config.ts

@@ -1,5 +1,4 @@
-import { NgModule } from '@angular/core';
-import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+import { Routes } from '@angular/router';
 import { HomeComponent } from './content/home/home.component';
 import { ShowcaseCalendarPanelsComponent } from './content/showcase-calendar-panels/showcase-calendar-panels.component';
 import { ShowcaseCalendarTableComponent } from './content/showcase-calendar-table/showcase-calendar-table.component';
@@ -28,9 +27,3 @@ export const routes: Routes = [
     pathMatch: 'full',
   },
 ];
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
-  exports: [RouterModule],
-})
-export class AppRoutingModule {}