Merge pull request valor-software#547 from valor-software/development

Release 1.0.17

.travis.yml

@@ -3,9 +3,11 @@ node_js:
   - "6"
 
 script:
-- npm run flow.install:typings
-- npm test
-- ./node_modules/.bin/codecov
+  - npm run flow.install:typings
+  - npm test
+
+after_success:
+  - ./node_modules/.bin/codecov
 
 addons:
   # sauce labs tunel connector (read more https://docs.travis-ci.com/user/sauce-connect/ )

CHANGELOG.md

@@ -1,3 +1,22 @@
+<a name="1.0.17"></a>
+## [1.0.17](https://github.com/valor-software/ng2-bootstrap/compare/v1.0.16...v1.0.17) (2016-05-31)
+
+
+### Bug Fixes
+
+* **datepicker:** added ngOnChanges hook ([ecffdb0](https://github.com/valor-software/ng2-bootstrap/commit/ecffdb0)), closes [#543](https://github.com/valor-software/ng2-bootstrap/issues/543)
+* **timepicker:** added null value validation ([f9ad7e7](https://github.com/valor-software/ng2-bootstrap/commit/f9ad7e7)), closes [#533](https://github.com/valor-software/ng2-bootstrap/issues/533)
+* **tooltip:** Fix tooltip arrows in bootstrap v4 ([b4250d4](https://github.com/valor-software/ng2-bootstrap/commit/b4250d4)), closes [#141](https://github.com/valor-software/ng2-bootstrap/issues/141)
+
+
+### Features
+
+* **modals:** added declarative modals component ([#564](https://github.com/valor-software/ng2-bootstrap/issues/564)) ([1d0903f](https://github.com/valor-software/ng2-bootstrap/commit/1d0903f)), closes [#29](https://github.com/valor-software/ng2-bootstrap/issues/29)
+* **tooltip:** adds implementation to tooltipEnable ([#517](https://github.com/valor-software/ng2-bootstrap/issues/517)) ([1470892](https://github.com/valor-software/ng2-bootstrap/commit/1470892))
+
+### Breaking changes
+* Added view provider required by **modals** (see modals docs for more information)
+
 <a name="1.0.16"></a>
 ## [1.0.16](https://github.com/valor-software/ng2-bootstrap/compare/v1.0.15...v1.0.16) (2016-05-06)
 

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/alert/alert.component.spec.ts

@@ -3,7 +3,8 @@ import { TestComponentBuilder, ComponentFixture } from '@angular/compiler/testin
 import {AlertComponent} from './alert.component';
 
 describe('Component: Alert', () => {
-    let fixture:ComponentFixture<any>, context:any;
+    let fixture:ComponentFixture<any>;
+    let context:any;
     const overTemplate = `
                   <div class="alert" role="alert" [ngClass]="classes" *ngIf="!closed">
                     <button *ngIf="dismissible" type="button" class="close" (click)="onClose()" (touch)="onClose()">

components/buttons/readme.md

@@ -1,8 +1,12 @@
 ### Usage
 ```typescript
-import {BUTTON_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';
+import { BUTTON_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap';
 // or
+import { BUTTON_DIRECTIVES } from 'ng2-bootstrap/components/buttons';
+
 import { ButtonRadioDirective, ButtonCheckboxDirective } from 'ng2-bootstrap/ng2-bootstrap';
+// or
+import { ButtonRadioDirective, ButtonCheckboxDirective } from 'ng2-bootstrap/components/buttons';
 ```
 ### Annotations
 ```typescript

components/datepicker/datepicker-inner.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit, EventEmitter, Input} from '@angular/core';
+import {Component, OnInit, EventEmitter, Input, OnChanges} from '@angular/core';
 import {
   CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgModel
 } from '@angular/common';
@@ -48,7 +48,7 @@ const SHORTCUT_PROPAGATION = false;
   `,
   directives: [FORM_DIRECTIVES, CORE_DIRECTIVES, NgClass, NgModel]
 })
-export class DatePickerInnerComponent implements OnInit {
+export class DatePickerInnerComponent implements OnInit, OnChanges {
   @Input() public datepickerMode:string;
   @Input() public startingDay:number;
   @Input() public yearRange:number;
@@ -97,7 +97,6 @@ export class DatePickerInnerComponent implements OnInit {
 
   public set activeDate(value:Date) {
     this._activeDate = value;
-    this.refreshView();
   }
 
   // todo: add formatter value to Date object
@@ -131,7 +130,10 @@ export class DatePickerInnerComponent implements OnInit {
     } else if (this.activeDate === undefined) {
       this.activeDate = new Date();
     }
+  }
 
+  // this.refreshView should be called here to reflect the changes on the fly
+  public ngOnChanges():void {
     this.refreshView();
   }
 

components/datepicker/daypicker.component.ts

@@ -150,8 +150,8 @@ export class DayPickerComponent implements OnInit {
 
       if (this.showWeeks) {
         self.weekNumbers = [];
-        let thursdayIndex = (4 + 7 - this.startingDay) % 7,
-          numWeeks = self.rows.length;
+        let thursdayIndex = (4 + 7 - this.startingDay) % 7;
+        let numWeeks = self.rows.length;
         for (let curWeek = 0; curWeek < numWeeks; curWeek++) {
           self.weekNumbers.push(self.getISO8601WeekNumber(self.rows[curWeek][thursdayIndex].date));
         }

components/datepicker/readme.md

@@ -1,6 +1,8 @@
 ### Usage
 ```typescript
-import {DATEPICKER_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';
+import { DATEPICKER_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap';
+// or
+import { DATEPICKER_DIRECTIVES } from 'ng2-bootstrap/components/datepicker';
 ```
 
 ### Annotations

components/datepicker/yearpicker.component.ts

@@ -86,8 +86,9 @@ export class YearPickerComponent implements OnInit {
     this.datePicker.setRefreshViewHandler(function ():void {
       let years:Array<any> = new Array(this.yearRange);
       let date:Date;
+      let start = self.getStartingYear(this.activeDate.getFullYear());
 
-      for (let i = 0, start = self.getStartingYear(this.activeDate.getFullYear()); i < this.yearRange; i++) {
+      for (let i = 0; i < this.yearRange; i++) {
         date = new Date(start + i, 0, 1);
         date = this.fixTimeZone(date);
         years[i] = this.createDateObject(date, this.formatYear);

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'
+};