Upgrade to ng 17 (#91)

Author: eksrha

.editorconfig

@@ -10,6 +10,7 @@ trim_trailing_whitespace = true
 
 [*.ts]
 quote_type = single
+ij_typescript_use_double_quotes = false
 
 [*.md]
 max_line_length = off

.github/workflows/release.yml

@@ -36,7 +36,7 @@ jobs:
         run: yarn run build
 
       - name: yarn publish to npmjs
-        working-directory: dist/ng-mat-components
+        working-directory: dist/ngx-mat-components
         run: yarn publish --access public --new-version ${{ needs.create_release.outputs.version }} --no-git-tag-version
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPMJS_PUBLISH_TOKEN }}
@@ -46,7 +46,7 @@ jobs:
         with:
           registry-url: 'https://npm.pkg.github.com'
       - name: yarn publish to GitHub
-        working-directory: dist/ng-mat-components
+        working-directory: dist/ngx-mat-components
         run: yarn publish --access public --new-version ${{ needs.create_release.outputs.version }} --no-git-tag-version
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -14,7 +14,6 @@ projects/ng-nav-frame/README.md
 /node_modules
 npm-debug.log
 yarn-error.log
-yarn.lock
 package-lock.json
 .yarn/
 
@@ -49,4 +48,4 @@ testem.log
 Thumbs.db
 .yarnrc
 package-lock.json
-projects/ng-mat-components/README.md
+projects/ngx-mat-components/README.md

.nvmrc

@@ -1 +1 @@
-v18
+v20

README.md

@@ -1,28 +1,28 @@
-# @fullstack-devops/ng-mat-components
+# @fullstack-devops/ngx-mat-components
 
-[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/fullstack-devops/ng-mat-components/release.yml?logo=GitHub%20Actions)](#)
-[![GitHub release (latest SemVer)](https://img.shields.io/github/v/release/fullstack-devops/ng-mat-components)](https://github.com/fullstack-devops/ng-mat-components/releases)
+[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/fullstack-devops/ngx-mat-components/release.yml?logo=GitHub%20Actions)](#)
+[![GitHub release (latest SemVer)](https://img.shields.io/github/v/release/fullstack-devops/ngx-mat-components)](https://github.com/fullstack-devops/ngx-mat-components/releases)
 
 **Downloads:**
 
-[![GitHub release (latest by date)](https://img.shields.io/github/downloads/fullstack-devops/ng-mat-components/latest/total?style=flat&label=GitHub%20downloads%40latest&logo=GitHub)](https://github.com/fullstack-devops/ng-mat-components/pkgs/npm/ng-mat-components)
-[![npm](https://img.shields.io/npm/dw/@fullstack-devops/ng-mat-components?style=flat&label=npm%20downloads&logo=npm)](https://www.npmjs.com/package/@fullstack-devops/ng-mat-components)
+[![GitHub release (latest by date)](https://img.shields.io/github/downloads/fullstack-devops/ngx-mat-components/latest/total?style=flat&label=GitHub%20downloads%40latest&logo=GitHub)](https://github.com/fullstack-devops/ngx-mat-components/pkgs/npm/ngx-mat-components)
+[![npm](https://img.shields.io/npm/dw/@fullstack-devops/ngx-mat-components?style=flat&label=npm%20downloads&logo=npm)](https://www.npmjs.com/package/@fullstack-devops/ngx-mat-components)
 
 **License:**
 
-[![GitHub](https://img.shields.io/github/license/fullstack-devops/ng-mat-components?style=flat)](#)
+[![GitHub](https://img.shields.io/github/license/fullstack-devops/ngx-mat-components?style=flat)](#)
 
 Components for @angular/material
 
 ## Installation
 
 - yarn
   ```shell
-  yarn add @fullstack-devops/ng-mat-components
+  yarn add @fullstack-devops/ngx-mat-components
   ```
 - npm
   ```shell
-  npm install @fullstack-devops/ng-mat-components
+  npm install @fullstack-devops/ngx-mat-components
   ```
 
 ### Installation via GitHub packages
@@ -35,9 +35,9 @@ add to your local `.npmrc` the following line to be able to use this package:
 
 ## Documentation
 
-Live Demo with all current modules at https://fullstack-devops.github.io/ng-mat-components
+Live Demo with all current modules at https://fullstack-devops.github.io/ngx-mat-components
 
-Api Documentation: https://fullstack-devops.github.io/libraries/ng-mat-components.
+Api Documentation: https://fullstack-devops.github.io/libraries/ngx-mat-components.
 
 ## Development server
 

angular.json

@@ -3,34 +3,34 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "ng-mat-components": {
+    "ngx-mat-components": {
       "projectType": "library",
-      "root": "projects/ng-mat-components",
-      "sourceRoot": "projects/ng-mat-components/src",
+      "root": "projects/ngx-mat-components",
+      "sourceRoot": "projects/ngx-mat-components/src",
       "prefix": "lib",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:ng-packagr",
           "options": {
-            "tsConfig": "projects/ng-mat-components/tsconfig.lib.json",
-            "project": "projects/ng-mat-components/ng-package.json"
+            "tsConfig": "projects/ngx-mat-components/tsconfig.lib.json",
+            "project": "projects/ngx-mat-components/ng-package.json"
           },
           "configurations": {
             "production": {
-              "tsConfig": "projects/ng-mat-components/tsconfig.lib.prod.json"
+              "tsConfig": "projects/ngx-mat-components/tsconfig.lib.prod.json"
             },
             "development": {
-              "tsConfig": "projects/ng-mat-components/tsconfig.lib.json"
+              "tsConfig": "projects/ngx-mat-components/tsconfig.lib.json"
             }
           },
           "defaultConfiguration": "production"
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "projects/ng-mat-components/src/test.ts",
-            "tsConfig": "projects/ng-mat-components/tsconfig.spec.json",
-            "karmaConfig": "projects/ng-mat-components/karma.conf.js"
+            "main": "projects/ngx-mat-components/src/test.ts",
+            "tsConfig": "projects/ngx-mat-components/tsconfig.spec.json",
+            "karmaConfig": "projects/ngx-mat-components/karma.conf.js"
           }
         }
       }
@@ -104,18 +104,18 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "lib-workspace:build:production"
+              "buildTarget": "lib-workspace:build:production"
             },
             "development": {
-              "browserTarget": "lib-workspace:build:development"
+              "buildTarget": "lib-workspace:build:development"
             }
           },
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "lib-workspace:build"
+            "buildTarget": "lib-workspace:build"
           }
         },
         "test": {

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@fullstack-devops/ng-mat-components",
+  "name": "@fullstack-devops/ngx-mat-components",
   "version": "0.0.0-PLACEHOLDER",
   "engines": {
     "node": ">=18.0.0",
@@ -10,8 +10,8 @@
     "ng": "ng",
     "start": "ng serve",
     "start:codespace": "ng serve --disable-host-check",
-    "prebuild": "cp README.md projects/ng-mat-components/",
-    "build": "ng build --project ng-mat-components",
+    "prebuild": "cp README.md projects/ngx-mat-components/",
+    "build": "ng build --project ngx-mat-components",
     "build:workspace": "ng build --project lib-workspace",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
@@ -20,50 +20,50 @@
   },
   "private": false,
   "dependencies": {
-    "@angular/animations": "^16.2.12",
-    "@angular/cdk": "^16.2.12",
-    "@angular/common": "^16.2.12",
-    "@angular/compiler": "^16.2.12",
-    "@angular/core": "^16.2.12",
-    "@angular/forms": "^16.2.12",
-    "@angular/material": "^16.2.12",
-    "@angular/platform-browser": "^16.2.12",
-    "@angular/platform-browser-dynamic": "^16.2.12",
-    "@angular/router": "^16.2.12",
+    "@angular/animations": "^17.3.12",
+    "@angular/cdk": "^17.3.10",
+    "@angular/common": "^17.3.12",
+    "@angular/compiler": "^17.3.12",
+    "@angular/core": "^17.3.12",
+    "@angular/forms": "^17.3.12",
+    "@angular/material": "^17.3.10",
+    "@angular/platform-browser": "^17.3.12",
+    "@angular/platform-browser-dynamic": "^17.3.12",
+    "@angular/router": "^17.3.12",
     "@ng-icons/core": "24",
     "@ng-icons/material-icons": "24",
     "date-fns": "^2.29.3",
     "material-icons": "^1.13.1",
     "postcss": "^8.4.32",
     "rxjs": "^7.8.1",
     "tslib": "^2.4.0",
-    "zone.js": "~0.13.3"
+    "zone.js": "~0.14.10"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^16.2.10",
-    "@angular-eslint/builder": "^16.3.1",
-    "@angular-eslint/eslint-plugin": "^16.3.1",
-    "@angular-eslint/eslint-plugin-template": "^16.3.1",
-    "@angular-eslint/schematics": "^16.3.1",
-    "@angular-eslint/template-parser": "^16.3.1",
-    "@angular/cli": "^16.2.10",
-    "@angular/compiler-cli": "^16.2.12",
+    "@angular-devkit/build-angular": "^17.3.11",
+    "@angular-eslint/builder": "^17.5.3",
+    "@angular-eslint/eslint-plugin": "^17.5.3",
+    "@angular-eslint/eslint-plugin-template": "^17.5.3",
+    "@angular-eslint/schematics": "^17.5.3",
+    "@angular-eslint/template-parser": "^17.5.3",
+    "@angular/cli": "^17.3.11",
+    "@angular/compiler-cli": "^17.3.12",
     "@types/jasmine": "~5.1.4",
     "@types/node": "^18.19.3",
-    "@typescript-eslint/eslint-plugin": "^5.59.2",
-    "@typescript-eslint/parser": "^5.59.2",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
     "autoprefixer": "^10.4.16",
-    "eslint": "^8.39.0",
+    "eslint": "^8.57.0",
     "jasmine-core": "~5.1.1",
     "karma": "~6.3.0",
     "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": "^16.2.3",
+    "ng-packagr": "^17.3.0",
     "prettier": "^2.8.3",
     "prettier-eslint": "^15.0.1",
     "sass": "^1.69.5",
-    "typescript": "~5.1.6"
+    "typescript": "~5.4.5"
   }
-}
+}

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

@@ -2,7 +2,7 @@ import { registerLocaleData } from '@angular/common';
 import localeDe from '@angular/common/locales/de';
 import localeDeExtra from '@angular/common/locales/extra/de';
 import { Component, OnInit } from '@angular/core';
-import { NavFrameConfig, NavFrameSizing, NavRoutes } from 'projects/ng-mat-components/src/public-api';
+import { NavFrameConfig, NavFrameSizing, NavRoutes } from 'projects/ngx-mat-components/src/public-api';
 
 @Component({
   selector: 'app-root',

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

@@ -17,7 +17,7 @@ import { MatDialogModule } from '@angular/material/dialog';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as dateFnsLocales from 'date-fns/locale';
-import { FsCalendarModule, FsCalendarService, FsNavFrameModule } from 'projects/ng-mat-components/src/public-api';
+import { FsCalendarModule, FsCalendarService, FsNavFrameModule } from 'projects/ngx-mat-components/src/public-api';
 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';

projects/lib-workspace/src/app/content/showcase-calendar-panels/showcase-calendar-panels.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { CalendarEvent, CalendarExtendedDay, CalendarPanels, CalendarPanelsConfig } from 'projects/ng-mat-components/src/public-api';
+import { CalendarEvent, CalendarExtendedDay, CalendarPanels, CalendarPanelsConfig } from 'projects/ngx-mat-components/src/public-api';
 
 interface CustomTestObj {
   id: number;

projects/lib-workspace/src/app/content/showcase-calendar-table/showcase-calendar-table.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { CalendarTableEntry } from 'projects/ng-mat-components/src/public-api';
+import { CalendarTableEntry } from 'projects/ngx-mat-components/src/public-api';
 
 @Component({
   selector: 'app-showcase-calendar-table',

projects/lib-workspace/src/styles.scss

@@ -1,5 +1,5 @@
 @use '@angular/material' as mat;
-@use '../../ng-mat-components' as fsc;
+@use '../../ngx-mat-components' as fsc;
 @use './styling/palettes';
 
 @import 'material-icons/iconfont/material-icons.scss';

projects/ng-mat-components/README.md

@@ -25,7 +25,7 @@ module.exports = function (config) {
       suppressAll: true, // removes the duplicated traces
     },
     coverageReporter: {
-      dir: require('path').join(__dirname, '../../coverage/ng-mat-components'),
+      dir: require('path').join(__dirname, '../../coverage/ngx-mat-components'),
       subdir: '.',
       reporters: [{ type: 'html' }, { type: 'text-summary' }],
     },

projects/ng-mat-components/_index.scss renamed to projects/ngx-mat-components/_index.scss

@@ -1,6 +1,6 @@
 {
   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/ng-mat-components",
+  "dest": "../../dist/ngx-mat-components",
   "lib": {
     "entryFile": "src/public-api.ts"
   },