Merge pull request #58 from Service-Soft/update-to-angular-16

upgraded to angular 16

Author: tim-fabian

package-lock.json

@@ -22,38 +22,38 @@
  },
  "private": true,
  "dependencies": {
- "@angular/animations": "~15.0.3",
- "@angular/cdk": "^15.0.2",
- "@angular/common": "~15.0.3",
- "@angular/compiler": "~15.0.3",
- "@angular/core": "~15.0.3",
- "@angular/forms": "~15.0.3",
- "@angular/material": "^15.0.2",
- "@angular/platform-browser": "~15.0.3",
- "@angular/platform-browser-dynamic": "~15.0.3",
- "@angular/router": "~15.0.3",
- "rxjs": "~7.6.0",
- "tslib": "^2.4.1",
- "zone.js": "~0.12.0"
+ "@angular/animations": "~16.2.0",
+ "@angular/cdk": "^16.2.0",
+ "@angular/common": "~16.2.0",
+ "@angular/compiler": "~16.2.0",
+ "@angular/core": "~16.2.0",
+ "@angular/forms": "~16.2.0",
+ "@angular/material": "^16.2.0",
+ "@angular/platform-browser": "~16.2.0",
+ "@angular/platform-browser-dynamic": "~16.2.0",
+ "@angular/router": "~16.2.0",
+ "rxjs": "~7.8.1",
+ "tslib": "^2.6.1",
+ "zone.js": "~0.13.1"
  },
  "devDependencies": {
- "@angular-devkit/build-angular": "~15.0.3",
- "@angular/cli": "~15.0.3",
- "@angular/compiler-cli": "~15.0.3",
- "@types/jasmine": "~4.3.1",
- "@types/node": "^18.11.13",
- "concurrently": "^7.6.0",
- "eslint-config-service-soft": "^1.0.9",
- "jasmine-core": "~4.5.0",
- "karma": "~6.4.1",
- "karma-chrome-launcher": "~3.1.1",
- "karma-coverage": "~2.2.0",
+ "@angular-devkit/build-angular": "~16.2.0",
+ "@angular/cli": "~16.2.0",
+ "@angular/compiler-cli": "~16.2.0",
+ "@types/jasmine": "~4.3.5",
+ "@types/node": "^20.5.0",
+ "concurrently": "^8.2.0",
+ "eslint-config-service-soft": "^1.1.0",
+ "jasmine-core": "~5.1.0",
+ "karma": "~6.4.2",
+ "karma-chrome-launcher": "~3.2.0",
+ "karma-coverage": "~2.2.1",
  "karma-jasmine": "~5.1.0",
- "karma-jasmine-html-reporter": "~2.0.0",
+ "karma-jasmine-html-reporter": "~2.1.0",
  "ncp": "^2.0.0",
- "ng-packagr": "^15.0.3",
+ "ng-packagr": "^16.2.0",
  "npm-run-all": "^4.1.5",
- "typescript": "~4.8.3",
- "wait-on": "^6.0.1"
+ "typescript": "~5.1.6",
+ "wait-on": "^7.0.1"
  }
 }

package.json

@@ -1,6 +1,6 @@
 {
  "name": "ngx-material-navigation",
- "version": "15.1.8",
+ "version": "16.0.0",
  "license": "MIT",
  "keywords": [
  "angular",
@@ -10,12 +10,12 @@
  "footer"
  ],
  "peerDependencies": {
- "@angular/animations": "15",
- "@angular/cdk": "15",
- "@angular/common": "15",
- "@angular/core": "15",
- "@angular/forms": "15",
- "@angular/material": "15"
+ "@angular/animations": "16",
+ "@angular/cdk": "16",
+ "@angular/common": "16",
+ "@angular/core": "16",
+ "@angular/forms": "16",
+ "@angular/material": "16"
  },
  "dependencies": {
  "tslib": "^2.3.0"

projects/ngx-material-navigation/package-lock.json

@@ -1,12 +1,15 @@
 <footer [style.min-height.px]="minHeight">
  <div class="footer-row" *ngFor="let row of internalFooterRows">
  <div class="footer-col" id="left">
+ <!-- eslint-disable-next-line @angular-eslint/template/no-call-expression -->
  <ngx-mat-navigation-element *ngFor="let element of navService.getFooterElementsForRow('left', row)" [element]="element"></ngx-mat-navigation-element>
  </div>
  <div class="footer-col" id="center">
+ <!-- eslint-disable-next-line @angular-eslint/template/no-call-expression -->
  <ngx-mat-navigation-element *ngFor="let element of navService.getFooterElementsForRow('center', row)" [element]="element"></ngx-mat-navigation-element>
  </div>
  <div class="footer-col" id="right">
+ <!-- eslint-disable-next-line @angular-eslint/template/no-call-expression -->
  <ngx-mat-navigation-element *ngFor="let element of navService.getFooterElementsForRow('right', row)" [element]="element"></ngx-mat-navigation-element>
  </div>
  </div>

projects/ngx-material-navigation/package.json

@@ -1,4 +1,5 @@
 <button mat-button
+ type="button"
  (click)="runAction()"
  [class.sidenavElement]="isSidenavElement"
  [class.menuItem]="isMenuItem"

projects/ngx-material-navigation/src/components/footer/footer.component.html

@@ -1,4 +1,5 @@
 <button mat-raised-button
+ type="button"
  (click)="runAction()"
  [class.sidenavElement]="isSidenavElement"
  [class.menuItem]="isMenuItem"

projects/ngx-material-navigation/src/components/nav-element/button/nav-button-flat/nav-button-flat.component.html

@@ -64,28 +64,30 @@
  <!-------------------------------------------->
  <div *ngSwitchCase="NavElementTypes.MENU">
  <button #menuButton *ngIf="internalIsMenuItem"
+ type="button"
  mat-menu-item
  [matMenuTriggerFor]="menu"
  [class.sidenavElement]="isSidenavElement"
  [attr.aria-label]="element.ariaLabel"
  >
- <i *ngIf="NavUtilities.asMenu(element).icon" [ngClass]="NavUtilities.asMenu(element).icon"></i>
- {{NavUtilities.asMenu(element).name}}
+ <i *ngIf="elementMenu.icon" [ngClass]="elementMenu.icon"></i>
+ {{elementMenu.name}}
  </button>
 
  <button #menuButton *ngIf="!internalIsMenuItem"
+ type="button"
  mat-button
  [matMenuTriggerFor]="menu"
  [class.sidenavElement]="isSidenavElement"
  [attr.aria-label]="element.ariaLabel"
  >
- <i *ngIf="NavUtilities.asMenu(element).icon" [ngClass]="NavUtilities.asMenu(element).icon"></i>
- {{NavUtilities.asMenu(element).name}}
+ <i *ngIf="elementMenu.icon" [ngClass]="elementMenu.icon"></i>
+ {{elementMenu.name}}
  </button>
  </div>
 
  <mat-menu #menu="matMenu" [overlapTrigger]="false" [style.min-width.px]="menuWidth">
- <div *ngFor="let menuElement of NavUtilities.asMenu(element).elements" [style.min-width.px]="menuWidth">
+ <div *ngFor="let menuElement of elementMenu.elements" [style.min-width.px]="menuWidth">
  <ngx-mat-navigation-element (click)="clickSidenavElement(menuElement)" [isSidenavElement]="internalIsSidenavElement" [sidenav]="sidenav" [isMenuItem]="true" [element]="menuElement">
  </ngx-mat-navigation-element>
  </div>

projects/ngx-material-navigation/src/components/nav-element/button/nav-button/nav-button.component.html

@@ -1,6 +1,7 @@
 import { AfterContentChecked, Component, HostListener, Input, OnInit, ViewChild } from '@angular/core';
 import { MatButton } from '@angular/material/button';
 import { MatSidenav } from '@angular/material/sidenav';
+import { NavMenu } from '../../models/nav-menu.model';
 import { NavElement, NavElementTypes } from '../../models/nav.model';
 import { NavUtilities } from '../../utilities/nav.utilities';
 
@@ -14,8 +15,6 @@ import { NavUtilities } from '../../utilities/nav.utilities';
 })
 export class NavElementComponent implements AfterContentChecked, OnInit {
 
- // eslint-disable-next-line @typescript-eslint/typedef
- NavUtilities = NavUtilities;
  NavElementTypes: typeof NavElementTypes = NavElementTypes;
 
  /**
@@ -24,6 +23,8 @@ export class NavElementComponent implements AfterContentChecked, OnInit {
  @Input()
  element!: NavElement;
 
+ elementMenu!: NavMenu;
+
  /**
  * A reference to the sidenav. Is needed for the menu to close the sidenav.
  */
@@ -54,6 +55,7 @@ export class NavElementComponent implements AfterContentChecked, OnInit {
  ngOnInit(): void {
  this.internalIsSidenavElement = this.isSidenavElement ?? false;
  this.internalIsMenuItem = this.isMenuItem ?? false;
+ this.elementMenu = NavUtilities.asMenu(this.element);
  }
 
  ngAfterContentChecked(): void {

projects/ngx-material-navigation/src/components/nav-element/nav-element.component.html

@@ -1,3 +1,4 @@
+<!-- eslint-disable @angular-eslint/template/no-call-expression -->
 <mat-toolbar [style.min-height.px]="minHeight ? minHeight : 0" id="toolbar" #navbar *ngIf="navService.getNavbarRows(navbarRows, screenWidthName).length>1" class="mat-elevation-z8">
  <mat-toolbar-row class="toolbar-row" *ngFor="let row of navService.getNavbarRows(navbarRows, screenWidthName)">
  <div class="toolbar-col">