From 961e89ea7374f2b8d43af8ba4b5cb9a6b1eda858 Mon Sep 17 00:00:00 2001
From: Deepak Paul <deepak.paul@muraai.com>
Date: Mon, 13 Nov 2017 23:20:57 +0530
Subject: [PATCH] [ADF-1906] Accordion Menu - Provide a way to show the tooltip
 (#2641)

* Added tooltip for accordion header icon
---
 docs/accordion-group.component.md                          | 3 ++-
 .../components/collapsable/accordion-group.component.html  | 6 +++++-
 .../collapsable/accordion-group.component.spec.ts          | 5 +++++
 .../components/collapsable/accordion-group.component.ts    | 3 +++
 .../src/components/collapsable/collapsable.module.ts       | 7 +++++--
 ng2-components/ng2-alfresco-core/src/material.module.ts    | 6 ++++--
 6 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/docs/accordion-group.component.md b/docs/accordion-group.component.md
index 1bdb65dbe1..884e2cbc53 100644
--- a/docs/accordion-group.component.md
+++ b/docs/accordion-group.component.md
@@ -21,7 +21,7 @@ Adds a collapsible panel to an [accordion menu](accordion.component.md).
 
 ```html
 <adf-accordion>
-    <adf-accordion-group [heading]="titleHeading" [isSelected]="true" [headingIcon]="'assignment'">
+    <adf-accordion-group [heading]="titleHeading" [isSelected]="true" [headingIcon]="'assignment'" [headingIconTooltip]="'Group Tooltip'">
         <my-list></my-list>
     </adf-accordion-group>
 </adf-accordion>
@@ -50,6 +50,7 @@ export class MyComponent implements OnInit {
 | isSelected | boolean | Is this group currently selected? |
 | headingIcon | string | The material design icon. |
 | hasAccordionIcon | boolean | Should the (expanded) accordion icon be shown? Defaults to true |
+| headingIconTooltip | string | Tooltip message to be shown for headingIcon |
 
 ## Details
 
diff --git a/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.html b/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.html
index 4428abe76b..b906d2a044 100644
--- a/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.html
+++ b/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.html
@@ -1,7 +1,11 @@
 <div class="adf-panel adf-panel-default" [ngClass]="{'adf-panel-open': isOpen}">
     <div class="adf-panel-heading" [ngClass]="{'adf-panel-heading-selected': isSelected}" (click)="toggleOpen($event)">
         <div id="heading-icon" *ngIf="hasHeadingIcon()" class="adf-panel-heading-icon">
-            <i class="material-icons">{{headingIcon}}</i>
+            <i class="material-icons" 
+                [matTooltip]="headingIconTooltip" 
+                [matTooltipDisabled]="!headingIconTooltip">
+                {{headingIcon}}
+            </i>
         </div>
         <div id="heading-text" class="adf-panel-heading-text">{{heading}}</div>
         <div id="accordion-button" *ngIf="hasAccordionIcon" class="adf-panel-heading-toggle">
diff --git a/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.spec.ts b/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.spec.ts
index 9eaa5a82a0..50b99f54f9 100644
--- a/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.spec.ts
+++ b/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.spec.ts
@@ -19,6 +19,8 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { AccordionGroupComponent } from './accordion-group.component';
 import { AccordionComponent } from './accordion.component';
 
+import { MaterialModule } from '../../material.module';
+
 describe('AccordionGroupComponent', () => {
 
     let fixture: ComponentFixture<AccordionGroupComponent>;
@@ -27,6 +29,9 @@ describe('AccordionGroupComponent', () => {
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
+            imports: [
+                MaterialModule
+            ],
             declarations: [
                 AccordionGroupComponent
             ],
diff --git a/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.ts b/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.ts
index 0f786bbbe3..c4b98a9bfb 100644
--- a/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.ts
+++ b/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.ts
@@ -37,6 +37,9 @@ export class AccordionGroupComponent implements OnDestroy {
     @Input()
     headingIcon: string;
 
+    @Input()
+    headingIconTooltip: string;
+
     @Input()
     hasAccordionIcon: boolean = true;
 
diff --git a/ng2-components/ng2-alfresco-core/src/components/collapsable/collapsable.module.ts b/ng2-components/ng2-alfresco-core/src/components/collapsable/collapsable.module.ts
index 78c9faf117..a4fa87ec79 100644
--- a/ng2-components/ng2-alfresco-core/src/components/collapsable/collapsable.module.ts
+++ b/ng2-components/ng2-alfresco-core/src/components/collapsable/collapsable.module.ts
@@ -17,13 +17,15 @@
 
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { MatTooltipModule } from '@angular/material';
 
 import { AccordionGroupComponent } from './accordion-group.component';
 import { AccordionComponent } from './accordion.component';
 
 @NgModule({
     imports: [
-        CommonModule
+        CommonModule,
+        MatTooltipModule
     ],
     declarations: [
         AccordionComponent,
@@ -31,7 +33,8 @@ import { AccordionComponent } from './accordion.component';
     ],
     exports: [
         AccordionComponent,
-        AccordionGroupComponent
+        AccordionGroupComponent,
+        MatTooltipModule
     ]
 })
 export class CollapsableModule {}
diff --git a/ng2-components/ng2-alfresco-core/src/material.module.ts b/ng2-components/ng2-alfresco-core/src/material.module.ts
index 40ec23064b..f408248a53 100644
--- a/ng2-components/ng2-alfresco-core/src/material.module.ts
+++ b/ng2-components/ng2-alfresco-core/src/material.module.ts
@@ -27,7 +27,8 @@ import {
     MatProgressSpinnerModule,
     MatSnackBarModule,
     MatTabsModule,
-    MatToolbarModule
+    MatToolbarModule,
+    MatTooltipModule
 } from '@angular/material';
 
 export function modules() {
@@ -42,7 +43,8 @@ export function modules() {
         MatTabsModule,
         MatMenuModule,
         MatIconModule,
-        MatCardModule
+        MatCardModule,
+        MatTooltipModule
     ];
 }