Merge pull request #71 from Service-Soft/dev

Release 18.1.2

Author: tim-fabian

package-lock.json

@@ -22,38 +22,38 @@
     },
     "private": true,
     "dependencies": {
-        "@angular/animations": "~18.1.1",
-        "@angular/cdk": "^18.1.1",
-        "@angular/common": "~18.1.1",
-        "@angular/compiler": "~18.1.1",
-        "@angular/core": "~18.1.1",
-        "@angular/forms": "~18.1.1",
-        "@angular/material": "^18.1.1",
-        "@angular/platform-browser": "~18.1.1",
-        "@angular/platform-browser-dynamic": "~18.1.1",
-        "@angular/router": "~18.1.1",
+        "@angular/animations": "~18.2.12",
+        "@angular/cdk": "^18.2.12",
+        "@angular/common": "~18.2.12",
+        "@angular/compiler": "~18.2.12",
+        "@angular/core": "~18.2.12",
+        "@angular/forms": "~18.2.12",
+        "@angular/material": "^18.2.12",
+        "@angular/platform-browser": "~18.2.12",
+        "@angular/platform-browser-dynamic": "~18.2.12",
+        "@angular/router": "~18.2.12",
         "rxjs": "~7.8.1",
         "tslib": "^2.6.3",
         "zone.js": "~0.14.8"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "~18.1.1",
-        "@angular/cli": "~18.1.1",
-        "@angular/compiler-cli": "~18.1.1",
+        "@angular-devkit/build-angular": "~18.2.12",
+        "@angular/cli": "~18.2.12",
+        "@angular/compiler-cli": "~18.2.12",
         "@fortawesome/angular-fontawesome": "^0.15.0",
         "@fortawesome/free-solid-svg-icons": "^6.6.0",
         "@types/jasmine": "~5.1.4",
         "@types/node": "^20.14.11",
         "concurrently": "^8.2.2",
-        "eslint-config-service-soft": "^1.5.5",
+        "eslint-config-service-soft": "^1.5.7",
         "jasmine-core": "~5.1.2",
         "karma": "~6.4.3",
         "karma-chrome-launcher": "~3.2.0",
         "karma-coverage": "~2.2.1",
         "karma-jasmine": "~5.1.0",
         "karma-jasmine-html-reporter": "~2.1.0",
         "ncp": "^2.0.0",
-        "ng-packagr": "^18.1.0",
+        "ng-packagr": "^18.2.1",
         "npm-run-all": "^4.1.5",
         "typescript": "~5.5.3",
         "wait-on": "^7.2.0"

package.json

@@ -1,5 +1,5 @@
 @if (footerHeight) {
-    <ngx-mat-navigation-navbar [minSidenavWidth]="'40%'" [minHeightOtherElements]="footerHeight" [navbarRows]="navbarRows">
+    <ngx-mat-navigation-navbar [minHeight]="80" [minSidenavWidth]="'40%'" [minHeightOtherElements]="footerHeight" [navbarRows]="navbarRows">
         <router-outlet></router-outlet>
     </ngx-mat-navigation-navbar>
 }

projects/ngx-material-navigation-showcase/src/app/app.component.html

@@ -8,7 +8,7 @@ export const footerRows: FooterRow[] = [
             {
                 type: NavElementTypes.IMAGE_WITH_INTERNAL_LINK,
                 height: 100,
-                url: 'https://pbs.twimg.com/profile_images/1498641868397191170/6qW2XkuI_400x400.png',
+                url: 'https://placehold.co/400x400',
                 link: {
                     route: 'home'
                 }

projects/ngx-material-navigation-showcase/src/app/footer-rows.ts

@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 import { inject } from '@angular/core';
 import { Router } from '@angular/router';
+import { faHome, faRotateRight } from '@fortawesome/free-solid-svg-icons';
 import { NavElementTypes, NavRoute, NavUtilities, NavbarRow, NgxMatNavigationNotFoundComponent } from 'ngx-material-navigation';
 
 import { CustomComponent } from './components/custom/custom.component';
@@ -11,7 +12,7 @@ export const navbarRows: NavbarRow<NavRoute>[] = [
         elements: [
             {
                 type: NavElementTypes.IMAGE_WITH_INTERNAL_LINK,
-                url: 'https://pbs.twimg.com/profile_images/1498641868397191170/6qW2XkuI_400x400.png',
+                url: 'https://placehold.co/400x400',
                 height: 50,
                 link: {
                     route: 'home'
@@ -34,8 +35,7 @@ export const navbarRows: NavbarRow<NavRoute>[] = [
             {
                 type: NavElementTypes.INTERNAL_LINK,
                 name: 'Home',
-
-                icon: 'fas fa-home',
+                icon: faHome,
                 route: {
                     title: 'Home',
                     path: 'home',
@@ -55,7 +55,7 @@ export const navbarRows: NavbarRow<NavRoute>[] = [
                             {
                                 name: 'Bottom',
                                 fragment: 'bottom',
-                                icon: 'fas fa-home'
+                                icon: faHome
                             },
                             {
                                 name: 'Middle',
@@ -77,7 +77,7 @@ export const navbarRows: NavbarRow<NavRoute>[] = [
                     {
                         type: NavElementTypes.INTERNAL_LINK,
                         name: 'Home',
-                        icon: 'fas fa-home',
+                        icon: faHome,
                         route: {
                             title: 'Home',
                             path: 'home',
@@ -86,7 +86,7 @@ export const navbarRows: NavbarRow<NavRoute>[] = [
                     },
                     {
                         type: NavElementTypes.IMAGE_WITH_INTERNAL_LINK,
-                        url: 'https://pbs.twimg.com/profile_images/1498641868397191170/6qW2XkuI_400x400.png',
+                        url: 'https://placehold.co/400x400',
                         height: 50,
                         link: {
                             route: 'home'
@@ -102,7 +102,7 @@ export const navbarRows: NavbarRow<NavRoute>[] = [
                     {
                         type: NavElementTypes.BUTTON,
                         name: 'Reload Page',
-                        icon: 'fas fa-rotate-right',
+                        icon: faRotateRight,
                         action: () => location.reload(),
                         position: 'right'
                     },
@@ -132,7 +132,7 @@ export const navbarRows: NavbarRow<NavRoute>[] = [
             {
                 type: NavElementTypes.BUTTON,
                 name: 'Reload Page',
-                icon: 'fas fa-rotate-right',
+                icon: faRotateRight,
                 action: () => location.reload(),
                 position: 'right',
                 collapse: 'sm'

projects/ngx-material-navigation-showcase/src/app/routes.ts

@@ -2,6 +2,7 @@ import { enableProdMode } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { InMemoryScrollingOptions, RouterConfigOptions, provideRouter, withInMemoryScrolling, withRouterConfig } from '@angular/router';
+import { faHome } from '@fortawesome/free-solid-svg-icons';
 import { NGX_BURGER_MENU_ARIA_LABEL, NGX_BURGER_MENU_ICON } from 'ngx-material-navigation';
 
 import { AppComponent } from './app/app.component';
@@ -29,7 +30,7 @@ bootstrapApplication(
             provideAnimations(),
             {
                 provide: NGX_BURGER_MENU_ICON,
-                useValue: 'fas fa-home'
+                useValue: faHome
             },
             {
                 provide: NGX_BURGER_MENU_ARIA_LABEL,

projects/ngx-material-navigation-showcase/src/main.ts

@@ -1,6 +1,6 @@
 {
     "name": "ngx-material-navigation",
-    "version": "18.1.0",
+    "version": "18.1.2",
     "license": "MIT",
     "keywords": [
         "angular",
@@ -15,6 +15,7 @@
         "@angular/common": "18",
         "@angular/core": "18",
         "@angular/forms": "18",
+        "@angular/router": "18",
         "@angular/material": "18",
         "@fortawesome/angular-fontawesome": "^0.15",
         "@fortawesome/free-solid-svg-icons": "^6"

projects/ngx-material-navigation/package.json

@@ -45,7 +45,14 @@
     <!-------------------CUSTOM------------------->
     <!-------------------------------------------->
     @case (NavElementTypes.CUSTOM) {
-        <nav-custom [element]="element" [isSidenavElement]="internalIsSidenavElement" [isMenuItem]="internalIsMenuItem"></nav-custom>
+        <div [class.menuItem]="internalIsMenuItem" [class.customMenuItem]="internalIsMenuItem">
+            <nav-custom
+                [element]="element" 
+                [isSidenavElement]="internalIsSidenavElement"
+                [isMenuItem]="internalIsMenuItem"
+            >
+            </nav-custom>
+        </div>
     }
     <!-------------------------------------------->
     <!--------------------TEXT-------------------->

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

@@ -16,6 +16,12 @@ nav-image-with-internal-link, nav-image-with-external-link {
     min-height: 48px;
 }
 
+.customMenuItem {
+    padding-left: 12px;
+    padding-right: 12px;
+    width: calc(100% - 24px);
+}
+
 ::ng-deep {
     .mat-mdc-menu-content.mdc-list {
         padding: 8px;

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

@@ -123,15 +123,17 @@ export class NavElementComponent implements AfterContentChecked, OnInit {
      * Defines if the sidenav should be closed when the given element is clicked.
      * @param element - The element that has been clicked.
      */
-    clickSidenavElement(element: NavElement): void {
+    async clickSidenavElement(element: NavElement): Promise<void> {
         switch (element.type) {
             case NavElementTypes.TITLE:
             case NavElementTypes.IMAGE:
             case NavElementTypes.MENU:
-            case NavElementTypes.CUSTOM:
+            case NavElementTypes.CUSTOM: {
                 return;
-            default:
-                void this.sidenav?.close();
+            }
+            default: {
+                await this.sidenav?.close();
+            }
         }
     }
 }

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

@@ -1,5 +1,6 @@
 #toolbar {
     height: auto;
+    justify-content: center;
 }
 
 .toolbar-row {

projects/ngx-material-navigation/src/components/navbar/navbar.component.scss

@@ -214,15 +214,17 @@ export class NgxMatNavigationNavbarComponent implements AfterContentChecked {
      * Defines if the sidenav should be closed when the given element is clicked.
      * @param element - The element that has been clicked.
      */
-    clickSidenavElement(element: NavElement): void {
+    async clickSidenavElement(element: NavElement): Promise<void> {
         switch (element.type) {
             case NavElementTypes.TITLE:
             case NavElementTypes.IMAGE:
             case NavElementTypes.MENU:
-            case NavElementTypes.CUSTOM:
+            case NavElementTypes.CUSTOM: {
                 return;
-            default:
-                void this.sidenav?.close();
+            }
+            default: {
+                await this.sidenav?.close();
+            }
         }
     }
 }