Major/update ng 15

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

@@ -6,7 +6,7 @@ on:
       - 'main'
 
 jobs:
-  build-gh-pages-demo:
+  build-demo:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
@@ -22,26 +22,25 @@ jobs:
       - name: build workspace application
         run: yarn run build:workspace
 
-      - name: Checkout code
-        uses: actions/checkout@v3
-        with:
-          ref: gh-pages-demo
-          path: 'gh-pages-demo'
-
-      - name: Clean out old dist and copy new dist
-        run: |
-          rm -rf gh-pages-demo/*
-          cp -R dist/lib-workspace/* gh-pages-demo
-          touch gh-pages-demo/$(date "+%d-%m-%Y_%H-%m-%S")-dummyfile
-
-      - name: push chages to branch
-        working-directory: gh-pages-demo
+      - name: Fix permissions
         run: |
-          git config user.name "$GITHUB_ACTOR"
-          git config user.email "$GITHUB_ACTOR@users.noreply.github.com"
-
-          git add .
-          git status
-
-          git commit -a -m "update dist automated by $GITHUB_ACTOR"
-          git push
+          chmod -c -R +rX "_site/" | while read line; do
+            echo "::warning title=Invalid file permissions automatically fixed::$line"
+          done
+      - name: Upload Pages artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          path: dist/lib-workspace
+  deploy:
+    needs: build-demo
+    permissions:
+      pages: write
+      id-token: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v3

.github/workflows/pull-request.yml

@@ -19,8 +19,8 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v3
         with:
-          node-version: '16.x'
-          registry-url: 'https://npm.pkg.github.com'
+          node-version-file: .nvmrc
+          registry-url: 'https://registry.npmjs.org'
           scope: '@fullstack-devops'
 
       - name: install packages

.github/workflows/release.yml

@@ -24,9 +24,9 @@ jobs:
         uses: actions/checkout@v3
 
       - name: Setup node for npmjs
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: '16.x'
+          node-version-file: .nvmrc
           registry-url: 'https://registry.npmjs.org'
           scope: '@fullstack-devops'
 

.nvmrc

@@ -0,0 +1 @@
+v18

.vscode/settings.json

@@ -1,41 +0,0 @@
-{
-  "editor.formatOnPaste": true,
-  "editor.formatOnSave": true,
-  "editor.codeActionsOnSave": {
-    "source.organizeImports": true
-  },
-  "workbench.iconTheme": "material-icon-theme",
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "[javascript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "javascript.updateImportsOnFileMove.enabled": "always",
-  "typescript.updateImportsOnFileMove.enabled": "always",
-  "angular.enable-strict-mode-prompt": false,
-  "files.associations": {
-    ".env*": "shell"
-  },
-  "[yaml]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[scss]": {
-    "editor.defaultFormatter": "vscode.css-language-features"
-  },
-  "[html]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": true
-    },
-    "editor.formatOnSave": true
-  },
-  "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": true
-    },
-    "editor.formatOnSave": true
-  },
-  "[xml]": {
-    "editor.defaultFormatter": "redhat.vscode-xml"
-  }
-}

angular.json

@@ -142,5 +142,13 @@
   },
   "cli": {
     "analytics": false
+  },
+  "schematics": {
+    "@angular-eslint/schematics:application": {
+      "setParserOptionsProject": true
+    },
+    "@angular-eslint/schematics:library": {
+      "setParserOptionsProject": true
+    }
   }
 }

package.json

@@ -2,7 +2,7 @@
   "name": "@fullstack-devops/ng-mat-components",
   "version": "0.0.0-PLACEHOLDER",
   "engines": {
-    "node": ">=14.0.0 <17.0.0",
+    "node": ">=18.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,16 +20,18 @@
   },
   "private": false,
   "dependencies": {
-    "@angular/animations": "^14.2.12",
-    "@angular/cdk": "^14.2.7",
-    "@angular/common": "^14.2.12",
-    "@angular/compiler": "^14.2.12",
-    "@angular/core": "^14.2.12",
-    "@angular/forms": "^14.2.12",
-    "@angular/material": "^14.2.7",
-    "@angular/platform-browser": "^14.2.12",
-    "@angular/platform-browser-dynamic": "^14.2.12",
-    "@angular/router": "^14.2.12",
+    "@angular/animations": "^15.2.10",
+    "@angular/cdk": "^15.2.9",
+    "@angular/common": "^15.2.10",
+    "@angular/compiler": "^15.2.10",
+    "@angular/core": "^15.2.10",
+    "@angular/forms": "^15.2.10",
+    "@angular/material": "^15.2.9",
+    "@angular/platform-browser": "^15.2.10",
+    "@angular/platform-browser-dynamic": "^15.2.10",
+    "@angular/router": "^15.2.10",
+    "@ng-icons/core": "24",
+    "@ng-icons/material-icons": "24",
     "date-fns": "^2.29.3",
     "material-icons": "^1.13.1",
     "postcss": "^8.4.20",
@@ -38,30 +40,30 @@
     "zone.js": "~0.11.7"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^14.2.10",
-    "@angular-eslint/builder": "^14.4.0",
-    "@angular-eslint/eslint-plugin": "^14.4.0",
-    "@angular-eslint/eslint-plugin-template": "^14.4.0",
-    "@angular-eslint/schematics": "^14.4.0",
-    "@angular-eslint/template-parser": "^14.4.0",
-    "@angular/cli": "^14.2.10",
-    "@angular/compiler-cli": "^14.2.12",
+    "@angular-devkit/build-angular": "^15.2.10",
+    "@angular-eslint/builder": "^15.2.1",
+    "@angular-eslint/eslint-plugin": "^15.2.1",
+    "@angular-eslint/eslint-plugin-template": "^15.2.1",
+    "@angular-eslint/schematics": "^15.2.1",
+    "@angular-eslint/template-parser": "^15.2.1",
+    "@angular/cli": "^15.2.10",
+    "@angular/compiler-cli": "^15.2.10",
     "@types/jasmine": "~3.10.0",
     "@types/node": "^12.11.1",
-    "@typescript-eslint/eslint-plugin": "^5.36.2",
-    "@typescript-eslint/parser": "^5.36.2",
+    "@typescript-eslint/eslint-plugin": "^5.43.0",
+    "@typescript-eslint/parser": "^5.43.0",
     "autoprefixer": "^10.4.13",
-    "eslint": "^8.23.0",
+    "eslint": "^8.28.0",
     "jasmine-core": "~4.0.0",
     "karma": "~6.3.0",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "~1.7.0",
-    "ng-packagr": "^14.2.2",
+    "ng-packagr": "^15.2.2",
     "prettier": "^2.8.3",
     "prettier-eslint": "^15.0.1",
     "sass": "^1.57.1",
     "typescript": "~4.8.4"
   }
-}
+}

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

@@ -17,16 +17,36 @@
 
     <fs-nav-frame-toolbar-end>
       <div style="font-size: 12px">
-        <mat-form-field appearance="outline">
+        <mat-form-field appearance="outline" dense>
           <mat-label>Search</mat-label>
           <input matInput placeholder="Searching..." />
         </mat-form-field>
       </div>
     </fs-nav-frame-toolbar-end>
   </fs-nav-frame-toolbar>
 
+  <fs-nav-frame-sidebar>
+    <fs-nav-frame-sidebar-item routerLink="home">
+      <mat-icon class="icon">home</mat-icon>
+      <span class="title">Home</span>
+    </fs-nav-frame-sidebar-item>
+    <fs-nav-frame-sidebar-item routerLink="nav-frame">
+      <mat-icon class="icon">pivot_table_chart</mat-icon>
+      <span class="title">Nav Frame</span>
+    </fs-nav-frame-sidebar-item>
+
+    <!-- <fs-nav-frame-sidebar-item routerLink="home"></fs-nav-frame-sidebar-item>
+
+    <fs-nav-frame-sidebar-item routerLink="nav-frame">
+      <fs-sidebar-item-icon>
+        <mat-icon>pivot_table_chart</mat-icon>
+      </fs-sidebar-item-icon>
+      <fs-sidebar-item-title>Nav Frame</fs-sidebar-item-title>
+    </fs-nav-frame-sidebar-item> -->
+  </fs-nav-frame-sidebar>
+
   <!-- <fs-nav-frame-sidebar> -->
-  <fs-nav-user-profile profilePicture="https://material.angular.io/assets/img/examples/shiba1.jpg">
+  <fs-nav-user-profile >
     <!--  profilePicture="https://material.angular.io/assets/img/examples/shiba1.jpg" -->
     <fs-nav-user-profile-name>Some User</fs-nav-user-profile-name>
     <fs-nav-user-profile-subname>Enginer</fs-nav-user-profile-subname>

projects/lib-workspace/src/app/content/home/home.component.css

@@ -5,9 +5,8 @@
   justify-content: center;
 }
 
-.docs-components .mat-card {
-  height: 300px;
-  width: 250px;
+.docs-components mat-card {
+  width: 380px;
   margin: 8px;
   cursor: pointer;
 }

projects/lib-workspace/src/app/content/home/home.component.html

@@ -1,23 +1,35 @@
 <div class="docs-components">
   <mat-card routerLink="/nav-frame">
+    <mat-card-header>
+      <mat-card-title>Nav Frame</mat-card-title>
+    </mat-card-header>
+
     <img mat-card-image src="assets/nav-frame-shot.png" alt="Screenshot of Nav Frame" />
-    <mat-card-title>Nav Frame</mat-card-title>
+
     <mat-card-content>
       <p>Bootstrap your Nav with this nice template and start right away with valuable content.</p>
     </mat-card-content>
   </mat-card>
 
   <mat-card routerLink="/calendar-panels">
+    <mat-card-header>
+      <mat-card-title>Calendar Panels</mat-card-title>
+    </mat-card-header>
+
     <img mat-card-image src="assets/calendar-panels-shot.png" alt="Screenshot of Calendar Panels" />
-    <mat-card-title>Calendar Panels</mat-card-title>
+
     <mat-card-content>
       <p>The missing piece to the angular material components.</p>
     </mat-card-content>
   </mat-card>
 
   <mat-card routerLink="/calendar-table">
+    <mat-card-header>
+      <mat-card-title>Calendar Table</mat-card-title>
+    </mat-card-header>
+
     <img mat-card-image src="assets/calendar-table-shot.png" alt="Screenshot of Calendar Table" />
-    <mat-card-title>Calendar Table</mat-card-title>
+
     <mat-card-content>
       <p>The perfect complement to the calendar panels when it comes to several independent entries.</p>
     </mat-card-content>

projects/lib-workspace/src/test.ts

@@ -4,21 +4,5 @@ import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: {
-  context(
-    path: string,
-    deep?: boolean,
-    filter?: RegExp
-  ): {
-    <T>(id: string): T;
-    keys(): string[];
-  };
-};
-
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
-
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);

projects/ng-mat-components/src/fs-calendar/fs-calendar.module.ts

@@ -1,14 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { MatDividerModule } from '@angular/material/divider';
 import { FsCalendarPanelsComponent } from './calendar-panels/calendar-panels.component';
 import { FsCalendarTableComponent } from './calendar-table/fs-calendar-table.component';
 import { FsCalendarTableNameDirective } from './directives/fs-calendar-table-name.directive';
 
 @NgModule({
   declarations: [FsCalendarPanelsComponent, FsCalendarTableComponent, FsCalendarTableNameDirective],
-  imports: [CommonModule, MatButtonModule, MatDividerModule],
+  imports: [CommonModule, MatButtonModule],
   exports: [FsCalendarPanelsComponent, FsCalendarTableComponent, FsCalendarTableNameDirective],
 })
 export class FsCalendarModule {}