[ADF-1906] Accordion Menu - Provide a way to show the tooltip (#2641)

* Added tooltip for accordion header icon

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
 

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">

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
             ],

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;
 

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 {}

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
     ];
 }