feat(modals): added declarative modals component (#564)

closes #29

README.md

@@ -50,12 +50,12 @@ Follow me [![twitter](https://img.shields.io/twitter/follow/valorkin.svg?style=s
 ```
 ```js
   /* src/app/home/home.ts */
-  import {Alert, DATEPICKER_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';
+  import {AlertComponent, DATEPICKER_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';
   ...
   @Component({
     directives: [
       ...
-      Alert, DATEPICKER_DIRECTIVES
+      AlertComponent, DATEPICKER_DIRECTIVES
       ]
   })
   export class Home {
@@ -136,7 +136,7 @@ And you are ready to go! :)
 - [x] Collapse
 - [+-] Datepicker (Datepicker popup not implemented)
 - [x] Dropdown
-- [ ] Modal (in progress...)
+- [x] Modal
 - [x] Pagination
 - [ ] Popover
 - [x] Progressbar

components/modal.ts

@@ -0,0 +1,10 @@
+export * from './modal/modal-backdrop.component';
+export * from './modal/modal-options.class';
+export * from './modal/modal.component';
+
+import {ModalBackdropComponent} from './modal/modal-backdrop.component';
+import {ModalDirective} from './modal/modal.component';
+
+export const MODAL_DIRECTVES = [
+  ModalDirective, ModalBackdropComponent
+];

components/modal/modal-backdrop.component.ts

@@ -0,0 +1,32 @@
+import {Component, ElementRef} from '@angular/core';
+import {NgClass} from '@angular/common';
+import {ClassName} from './modal-options.class';
+
+export class ModalBackdropOptions {
+  public animate:boolean = true;
+
+  public constructor(options:ModalBackdropOptions) {
+    Object.assign(this, options);
+  }
+}
+
+@Component({
+  selector: 'bs-modal-backdrop',
+  directives: [NgClass],
+  template: `
+<div class="${ClassName.BACKDROP}"
+  [class.${ClassName.IN}]="isShown"
+  [class.${ClassName.FADE}]="isAnimated"></div>`
+})
+export class ModalBackdropComponent {
+  public isAnimated:boolean = true;
+  public isShown:boolean = false;
+
+  public element:ElementRef;
+
+  public constructor(options:ModalBackdropOptions, element:ElementRef) {
+    this.isAnimated = options.animate;
+    this.element = element;
+  }
+}
+

components/modal/modal-options.class.ts

@@ -0,0 +1,38 @@
+export interface ModalOptions {
+  /**
+   *  Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.
+   */
+  backdrop:boolean | 'static';
+  /**
+   * Closes the modal when escape key is pressed.
+   */
+  keyboard:boolean;
+
+  focus:boolean;
+  /**
+   * Shows the modal when initialized.
+   */
+  show:boolean;
+}
+
+export const modalConfigDefaults:ModalOptions = {
+  backdrop: true,
+  keyboard: true,
+  focus: true,
+  show: true
+};
+
+export const ClassName:any = {
+  SCROLLBAR_MEASURER: 'modal-scrollbar-measure',
+  BACKDROP: 'modal-backdrop',
+  OPEN: 'modal-open',
+  FADE: 'fade',
+  IN: 'in'
+};
+
+export const Selector:any = {
+  DIALOG: '.modal-dialog',
+  DATA_TOGGLE: '[data-toggle="modal"]',
+  DATA_DISMISS: '[data-dismiss="modal"]',
+  FIXED_CONTENT: '.navbar-fixed-top, .navbar-fixed-bottom, .is-fixed'
+};