feat(dialog): add backdropDismiss option to fiv dialog (defaults to true)

Author: garygrossgarten

projects/core/src/lib/dialog/dialog.component.html

@@ -1,6 +1,6 @@
 <fiv-overlay #overlay>
   <div *ngIf="backdrop" (@fade.done)="backdropAnimDone($event)"
-    [@fade]="{value: dialogState, params: { opacity: 0, inDuration: '120ms' }}" (click)="close()" class="backdrop">
+    [@fade]="{value: dialogState, params: { opacity: 0, inDuration: '120ms' }}" (click)="backdropClick()" class="backdrop">
   </div>
   <div #dialog class="dialog" [ngClass]="[verticalAlign, horizontalAlign, shape]">
     <ng-container>

projects/core/src/lib/dialog/dialog.component.ts

@@ -62,6 +62,7 @@ export class FivDialog implements OnInit {
   @Input() shape: 'fill' | 'card' = 'card';
 
   @Input() backdrop = true;
+  @Input() backdropDismiss = true;
   @Input() duration: number;
   // animation data
   @Input() inDuration = 160;
@@ -101,6 +102,12 @@ export class FivDialog implements OnInit {
     this.bar.stopProgressAnimation();
   }
 
+  backdropClick() {
+    if (this.backdropDismiss) {
+      this.close();
+    }
+  }
+
   animationDone(event) {
 
     if (event.fromState !== 'void' && event.toState === 'out') {