feat(popover): add disableAnimation option (#46)

* Add disableAnimation option

Author: lehoffma

projects/material-extended/mde/src/lib/popover/popover.html

@@ -1,7 +1,7 @@
 <ng-template>
   <div class="mde-popover-panel" role="dialog" [class.mde-popover-overlap]="overlapTrigger"
        [ngClass]="_classList" [ngStyle]="popoverPanelStyles" (keydown)="_handleKeydown($event)"
-       (click)="onClick()" (mouseover)="onMouseOver()" (mouseleave)="onMouseLeave()"
+       (click)="onClick()" (mouseover)="onMouseOver()" (mouseleave)="onMouseLeave()" [@.disabled]="disableAnimation"
        [@transformPopover]="'enter'">
     <div class="mde-popover-direction-arrow" [ngStyle]="popoverArrowStyles" *ngIf="!overlapTrigger"></div>
     <div class="mde-popover-content" [ngStyle]="popoverContentStyles" cdkTrapFocus="focusTrapEnabled">

projects/material-extended/mde/src/lib/popover/popover.ts

@@ -46,6 +46,7 @@ export class MdePopover implements MdePopoverPanel, OnDestroy { // tslint:disabl
   private _enterDelay = 200;
   private _leaveDelay = 200;
   private _overlapTrigger = true;
+  private _disableAnimation = false;
   private _targetOffsetX = 0;
   private _targetOffsetY = 0;
   private _arrowOffsetX = 20;
@@ -152,6 +153,13 @@ export class MdePopover implements MdePopoverPanel, OnDestroy { // tslint:disabl
   get closeOnClick(): boolean { return this._closeOnClick; }
   set closeOnClick(v: boolean) { this._closeOnClick = v; }
 
+  /**
+   * Disable animations of popover and all child elements
+   * default: false
+   */
+  @Input('mdePopoverDisableAnimation')
+  get disableAnimation(): boolean { return this._disableAnimation; }
+  set disableAnimation(v: boolean) { this._disableAnimation = v; }
 
   /**
    * Popover focus trap using cdkTrapFocus

src/app/pages/home/home.component.html

@@ -65,7 +65,7 @@
 </mde-popover>
 
 
-<mde-popover #popover4="mdePopover" [mdePopoverLeaveDelay]="1000">
+<mde-popover #popover4="mdePopover" [mdePopoverDisableAnimation]="true" [mdePopoverLeaveDelay]="1000">
   <mat-card class="example-card">
     <mat-card-content>
       <p>