au-tab-panel tests

Author: jhades

au-modal/src/app/app.component.html

@@ -66,7 +66,7 @@ <h1>Modal Examples</h1>
  </ng-template>
 
 
- <au-modal class="auth-modal" [body]="authModalBody"
+ <au-modal [hideOnClickOutside]="true" [hideOnEscape]="true" class="auth-modal" [body]="authModalBody"
  *auModalOpenOnClick="[loginButton, signUpButton]">
 
  </au-modal>

au-modal/src/app/au-modal/au-modal.component.html

@@ -1,4 +1,4 @@
-<div class="modal-overlay" (click)="closeModal()">
+<div class="modal-overlay" (click)="onClickOutsideModal()">
 
  <div class="modal-body" (click)="cancelClick($event)">
 

au-modal/src/app/au-modal/au-modal.component.ts

@@ -1,5 +1,6 @@
 import {Component, Input, OnInit, TemplateRef} from '@angular/core';
 import {AuModalService} from "./modal.service";
+import {EventManager} from '@angular/platform-browser';
 
 @Component({
  selector: 'au-modal',
@@ -11,16 +12,35 @@ export class AuModalComponent implements OnInit {
  @Input()
  body: TemplateRef<any>;
 
- constructor(private modalService: AuModalService) {
+ @Input()
+ hideOnClickOutside = true;
+
+ @Input()
+ hideOnEscape = true;
+
+
+ constructor(private modalService: AuModalService, private eventManager: EventManager) {
+ this.eventManager.addGlobalEventListener('window', 'keyup.esc', () => {
+ if (this.hideOnEscape) {
+ this.closeModal();
+ }
+ });
  }
 
  ngOnInit() {
  }
 
+ onClickOutsideModal() {
+ if (this.hideOnClickOutside) {
+ this.closeModal();
+ }
+ }
+
  closeModal() {
  this.modalService.close();
  }
 
+
  cancelClick(evt: KeyboardEvent) {
  evt.preventDefault();
  evt.stopPropagation();