From f4d737d3a3d651c6fe6b9b5683da2cf273a1c710 Mon Sep 17 00:00:00 2001
From: sercan <sercanyemen@gmail.com>
Date: Sun, 20 Jun 2021 21:28:47 +0300
Subject: [PATCH] (fuse/navigation) Added "tooltip" property to show tooltips
 on navigation items using MatTooltip

---
 .../components/basic/basic.component.html         | 12 +++++++++---
 .../components/branch/branch.component.html       |  3 ++-
 .../components/navigation/navigation.types.ts     |  1 +
 .../components/aside/aside.component.html         |  3 ++-
 .../components/basic/basic.component.html         | 15 +++++++++++----
 .../collapsable/collapsable.component.html        |  1 +
 6 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/@fuse/components/navigation/horizontal/components/basic/basic.component.html b/src/@fuse/components/navigation/horizontal/components/basic/basic.component.html
index a8ce9002..70a1bbd4 100644
--- a/src/@fuse/components/navigation/horizontal/components/basic/basic.component.html
+++ b/src/@fuse/components/navigation/horizontal/components/basic/basic.component.html
@@ -11,7 +11,8 @@
         [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
         [routerLink]="[item.link]"
         [routerLinkActive]="'fuse-horizontal-navigation-item-active'"
-        [routerLinkActiveOptions]="isActiveMatchOptions">
+        [routerLinkActiveOptions]="isActiveMatchOptions"
+        [matTooltip]="item.tooltip || ''">
         <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
     </div>
 
@@ -20,7 +21,8 @@
         class="fuse-horizontal-navigation-item"
         *ngIf="item.link && item.externalLink && !item.function && !item.disabled"
         [href]="item.link"
-        [target]="item.target || '_self'">
+        [target]="item.target || '_self'"
+        [matTooltip]="item.tooltip || ''">
         <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
     </a>
 
@@ -29,6 +31,7 @@
         class="fuse-horizontal-navigation-item"
         *ngIf="!item.link && item.function && !item.disabled"
         [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
+        [matTooltip]="item.tooltip || ''"
         (click)="item.function(item)">
         <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
     </div>
@@ -41,6 +44,7 @@
         [routerLink]="[item.link]"
         [routerLinkActive]="'fuse-horizontal-navigation-item-active'"
         [routerLinkActiveOptions]="isActiveMatchOptions"
+        [matTooltip]="item.tooltip || ''"
         (click)="item.function(item)">
         <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
     </div>
@@ -51,6 +55,7 @@
         *ngIf="item.link && item.externalLink && item.function && !item.disabled"
         [href]="item.link"
         [target]="item.target || '_self'"
+        [matTooltip]="item.tooltip || ''"
         (click)="item.function(item)"
         mat-menu-item>
         <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
@@ -60,7 +65,8 @@
     <div
         class="fuse-horizontal-navigation-item"
         *ngIf="!item.link && !item.function && !item.disabled"
-        [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}">
+        [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
+        [matTooltip]="item.tooltip || ''">
         <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
     </div>
 
diff --git a/src/@fuse/components/navigation/horizontal/components/branch/branch.component.html b/src/@fuse/components/navigation/horizontal/components/branch/branch.component.html
index 29fd9350..7b9af9a1 100644
--- a/src/@fuse/components/navigation/horizontal/components/branch/branch.component.html
+++ b/src/@fuse/components/navigation/horizontal/components/branch/branch.component.html
@@ -74,7 +74,8 @@
         <div
             class="fuse-horizontal-navigation-item"
             [ngClass]="{'fuse-horizontal-navigation-item-disabled': item.disabled,
-                         'fuse-horizontal-navigation-item-active-forced': item.active}">
+                         'fuse-horizontal-navigation-item-active-forced': item.active}"
+            [matTooltip]="item.tooltip || ''">
 
             <!-- Icon -->
             <mat-icon
diff --git a/src/@fuse/components/navigation/navigation.types.ts b/src/@fuse/components/navigation/navigation.types.ts
index c6e2bbdd..9b6b3504 100644
--- a/src/@fuse/components/navigation/navigation.types.ts
+++ b/src/@fuse/components/navigation/navigation.types.ts
@@ -15,6 +15,7 @@ export interface FuseNavigationItem
     hidden?: (item: FuseNavigationItem) => boolean;
     active?: boolean;
     disabled?: boolean;
+    tooltip?: string;
     link?: string;
     externalLink?: boolean;
     target?:
diff --git a/src/@fuse/components/navigation/vertical/components/aside/aside.component.html b/src/@fuse/components/navigation/vertical/components/aside/aside.component.html
index c78997cb..3440a7e5 100644
--- a/src/@fuse/components/navigation/vertical/components/aside/aside.component.html
+++ b/src/@fuse/components/navigation/vertical/components/aside/aside.component.html
@@ -7,7 +7,8 @@
         class="fuse-vertical-navigation-item"
         [ngClass]="{'fuse-vertical-navigation-item-active': active,
                     'fuse-vertical-navigation-item-disabled': item.disabled,
-                    'fuse-vertical-navigation-item-active-forced': item.active}">
+                    'fuse-vertical-navigation-item-active-forced': item.active}"
+        [matTooltip]="item.tooltip || ''">
 
         <!-- Icon -->
         <mat-icon
diff --git a/src/@fuse/components/navigation/vertical/components/basic/basic.component.html b/src/@fuse/components/navigation/vertical/components/basic/basic.component.html
index e6f5cc4d..7ef1799b 100644
--- a/src/@fuse/components/navigation/vertical/components/basic/basic.component.html
+++ b/src/@fuse/components/navigation/vertical/components/basic/basic.component.html
@@ -11,7 +11,8 @@
         [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
         [routerLink]="[item.link]"
         [routerLinkActive]="'fuse-vertical-navigation-item-active'"
-        [routerLinkActiveOptions]="isActiveMatchOptions">
+        [routerLinkActiveOptions]="isActiveMatchOptions"
+        [matTooltip]="item.tooltip || ''">
         <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
     </a>
 
@@ -20,7 +21,8 @@
         class="fuse-vertical-navigation-item"
         *ngIf="item.link && item.externalLink && !item.function && !item.disabled"
         [href]="item.link"
-        [target]="item.target || '_self'">
+        [target]="item.target || '_self'"
+        [matTooltip]="item.tooltip || ''">
         <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
     </a>
 
@@ -29,6 +31,7 @@
         class="fuse-vertical-navigation-item"
         *ngIf="!item.link && item.function && !item.disabled"
         [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
+        [matTooltip]="item.tooltip || ''"
         (click)="item.function(item)">
         <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
     </div>
@@ -41,6 +44,7 @@
         [routerLink]="[item.link]"
         [routerLinkActive]="'fuse-vertical-navigation-item-active'"
         [routerLinkActiveOptions]="isActiveMatchOptions"
+        [matTooltip]="item.tooltip || ''"
         (click)="item.function(item)">
         <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
     </a>
@@ -51,6 +55,7 @@
         *ngIf="item.link && item.externalLink && item.function && !item.disabled"
         [href]="item.link"
         [target]="item.target || '_self'"
+        [matTooltip]="item.tooltip || ''"
         (click)="item.function(item)">
         <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
     </a>
@@ -59,14 +64,16 @@
     <div
         class="fuse-vertical-navigation-item"
         *ngIf="!item.link && !item.function && !item.disabled"
-        [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}">
+        [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
+        [matTooltip]="item.tooltip || ''">
         <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
     </div>
 
     <!-- Item is disabled -->
     <div
         class="fuse-vertical-navigation-item fuse-vertical-navigation-item-disabled"
-        *ngIf="item.disabled">
+        *ngIf="item.disabled"
+        [matTooltip]="item.tooltip || ''">
         <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
     </div>
 
diff --git a/src/@fuse/components/navigation/vertical/components/collapsable/collapsable.component.html b/src/@fuse/components/navigation/vertical/components/collapsable/collapsable.component.html
index bd8df37a..a24a299e 100644
--- a/src/@fuse/components/navigation/vertical/components/collapsable/collapsable.component.html
+++ b/src/@fuse/components/navigation/vertical/components/collapsable/collapsable.component.html
@@ -6,6 +6,7 @@
     <div
         class="fuse-vertical-navigation-item"
         [ngClass]="{'fuse-vertical-navigation-item-disabled': item.disabled}"
+        [matTooltip]="item.tooltip || ''"
         (click)="toggleCollapsable()">
 
         <!-- Icon -->