Doc: added documentation for all implemented components (fixes valor-…

…software#9)

components/accordion/accordion.ts

@@ -6,35 +6,27 @@ import {
   NgClass, ViewContainerRef, TemplateRef
 } from 'angular2/angular2';
 
-import {Ng2BootstrapConfig} from '../ng2-bootstrap-config';
-
-console.log(Ng2BootstrapConfig.theme);
-
 // todo: support template url
 @Component({
   selector: 'accordion, [accordion]',
-  properties: [
-    'templateUrl',
-    'bCloseOthers: closeOthers'
-  ]
+  properties: ['templateUrl', 'closeOthers'],
+  host: {
+    '[class.panel-group]': 'true'
+  }
 })
 @View({
-  template: `
-  <div class="panel-group">
-    <ng-content></ng-content>
-  </div>
-  `
+  template: `<ng-content></ng-content>`
 })
 export class Accordion {
   private templateUrl:string;
-  private bCloseOthers:any;
-  private groups:Array<any> = [];
+  private closeOthers:boolean;
+  private groups:Array<AccordionGroup> = [];
 
   constructor() {
   }
 
-  public closeOthers(openGroup:AccordionGroup) {
-    if (!this.bCloseOthers) {
+  public closeOtherGroups(openGroup:AccordionGroup) {
+    if (!this.closeOthers) {
       return;
     }
 
@@ -59,18 +51,18 @@ export class Accordion {
 
 @Directive({
   selector: 'accordion-transclude, [accordion-transclude]',
-  properties: ['headingTemplate: accordion-transclude'],
+  properties: ['accordionTransclude'],
   lifecycle: [LifecycleEvent.onInit]
 })
 export class AccordionTransclude {
-  private headingTemplate: TemplateRef;
+  private accordionTransclude:TemplateRef;
 
-  constructor(private viewRef: ViewContainerRef) {
+  constructor(private viewRef:ViewContainerRef) {
   }
 
   onInit() {
-    if (this.headingTemplate) {
-      this.viewRef.createEmbeddedView(this.headingTemplate);
+    if (this.accordionTransclude) {
+      this.viewRef.createEmbeddedView(this.accordionTransclude);
     }
   }
 }
@@ -80,24 +72,18 @@ import {Collapse} from '../collapse/collapse';
 // todo: support custom `open class`
 @Component({
   selector: 'accordion-group, [accordion-group]',
-  properties: [
-    'templateUrl',
-    'heading',
-    'isOpen',
-    'isDisabled'
-  ],
+  properties: ['templateUrl', 'heading', 'isOpen', 'isDisabled', 'panelClass'],
   host: {
     '[class.panel-open]': 'isOpen'
   },
   lifecycle: [LifecycleEvent.onInit, LifecycleEvent.onDestroy]
 })
 @View({
   template: `
-  <div class="panel panel-default">
-    <div class="panel-heading">
+  <div class="panel" [ng-class]="panelClass">
+    <div class="panel-heading" (^click)="toggleOpen($event)">
       <h4 class="panel-title">
-        <a href tabindex="0" class="accordion-toggle"
-          (^click)="toggleOpen($event)">
+        <a href tabindex="0" class="accordion-toggle">
           <span [ng-class]="{'text-muted': isDisabled}"
             [accordion-transclude]="headingTemplate">{{heading}}</span>
         </a>
@@ -114,16 +100,17 @@ import {Collapse} from '../collapse/collapse';
 })
 export class AccordionGroup {
   private templateUrl:string;
+  private panelClass:string;
   private _isOpen:boolean;
 
   public isDisabled:boolean;
-  public headingTemplate:any;
-  // public templateRef: any;
+  public headingTemplate:TemplateRef;
 
   constructor(private accordion:Accordion) {
   }
 
   onInit() {
+    this.panelClass = this.panelClass || 'panel-default';
     this.accordion.addGroup(this);
   }
 
@@ -145,7 +132,7 @@ export class AccordionGroup {
   public set isOpen(value:boolean) {
     this._isOpen = value;
     if (value) {
-      this.accordion.closeOthers(this);
+      this.accordion.closeOtherGroups(this);
     }
   }
 }
@@ -154,11 +141,9 @@ export class AccordionGroup {
   selector: 'accordion-heading, [accordion-heading]'
 })
 export class AccordionHeading {
-  constructor(private group:AccordionGroup, private templateRef: TemplateRef) {
+  constructor(private group:AccordionGroup, private templateRef:TemplateRef) {
     group.headingTemplate = templateRef;
   }
 }
 
-export const accordion:Array<any> = [
-  Accordion, AccordionGroup,
-  AccordionHeading, AccordionTransclude];
+export const accordion:Array<any> = [Accordion, AccordionGroup, AccordionHeading];

components/accordion/readme.md

@@ -1,19 +1,49 @@
-The **accordion directive** builds on top of the collapse directive to provide a list of items, with collapsible bodies that are collapsed or expanded by clicking on the item's header.
+### Usage
+```typescript
+import {accordion} from 'ng2-bootstrap';
+```
 
-We can control whether expanding an item will cause the other items to close, using the `close-others` attribute on accordion.
+### Annotations
+```typescript
+// class Accordion
+@Component({
+  selector: 'accordion, [accordion]',
+  properties: ['templateUrl', 'closeOthers'],
+  host: {
+    '[class.panel-group]': 'true'
+  }
+})
 
-The body of each accordion group is transcluded in to the body of the collapsible element.
+// class AccordionGroup
+@Component({
+  selector: 'accordion-group, [accordion-group]',
+  properties: ['templateUrl', 'heading', 'isOpen', 'isDisabled', 'panelClass'],
+  host: {
+    '[class.panel-open]': 'isOpen'
+  },
+  lifecycle: [LifecycleEvent.onInit, LifecycleEvent.onDestroy]
+})
 
-### Accordion Settings ###
+// class AccordionHeading
+@Directive({
+  selector: 'accordion-heading, [accordion-heading]'
+})
 
-  * `is-open` <i class="glyphicon glyphicon-eye-open"></i> (Defaults: false) :
-    Whether accordion group is open or closed.
-  * `template-url` (Defaults: `template/accordion/accordion.html`) :
-    Add ability to override the template url used
 
-### Accordion Group Settings ###
+export const accordion:Array<any> = [Accordion, AccordionGroup, AccordionHeading];
+```
 
-  * `panel-class` (Defaults: `panel-default`) :
-    Add ability to use Bootstrap's contextual panel classes (panel-primary, panel-success, panel-info, etc...) or your own.  This must be a string.
-  * `template-url` (Defaults: `template/accordion/accordion-group.html`) :
-    Add ability to override the template url used. Note that this must be a string
+### Accordion properties
+  - `close-others` (`?boolean=false`) - if `true` expanding one item will close all others
+  - `template-url` (*not yet supported*) - allows to override the template url of component (default: `components/accordion/accordion.html`)
+
+### Accordion Group properties
+  - `heading` (`?string=''`) - clickable text in accordion's group header
+  - `is-open` (`?boolean=false`) - is accordion group open or closed
+  - `is-disabled` (`?boolean=false`) - if `true` disables accordion group
+  - `panel-class` (`?string='panel-default'`) - provides an ability to use Bootstrap's contextual panel classes (`panel-primary`, `panel-success`, `panel-info`, etc...). List of all available classes [link](http://getbootstrap.com/components/#panels-alternatives)
+  - `template-url` (*not yet supported*) - allows to override the template url of component (default: `components/accordion/accordion-group.html`)
+
+### Accordion heading
+
+Instead of the `heading` attribute on the `accordion-group`, you can use an `accordion-heading` attribute on `template` element inside a group that will be used as the group's header.

components/accordion/title.md

@@ -0,0 +1,3 @@
+The **accordion component** builds on top of the collapse directive to provide a list of items, with collapsible bodies that are collapsed or expanded by clicking on the item's header.
+
+Base specifications: [bootstrap 3](http://getbootstrap.com/javascript/#collapse-example-accordion) or [bootstrap 4](http://v4-alpha.getbootstrap.com/components/collapse/#accordion-example)

components/alert/alert.ts

@@ -10,7 +10,7 @@ import {
 // TODO: templateUrl
 @Component({
   selector: 'alert',
-  properties: ['type', 'dismissOnTimeout: dismiss-on-timeout'],
+  properties: ['type', 'dismissible', 'dismissOnTimeout'],
   events: ['close'],
   lifecycle: [LifecycleEvent.onInit]
 })
@@ -35,8 +35,15 @@ export class Alert {
   private closeable:boolean;
   private classes:Array<string> = [];
 
+  private set dismissible(v:boolean){
+    this.closeable = v;
+  }
+  private get dismissible():boolean{
+    return this.closeable;
+  }
+
   constructor(public el:ElementRef) {
-    this.closeable = el.nativeElement.getAttribute('(close)');
+    this.closeable = this.closeable || el.nativeElement.getAttribute('(close)');
   }
 
   onInit() {
@@ -55,8 +62,8 @@ export class Alert {
   }
 
   // todo: mouse event + touch + pointer
-  onClose($event: MouseEvent) {
-    this.close.next($event);
+  onClose() {
+    this.close.next(this);
     this.closed = true;
   }
 }

components/alert/readme.md

@@ -0,0 +1,29 @@
+### Usage
+```typescript
+import {Alert} from 'ng2-bootstrap';
+```
+
+### Annotations
+```typescript
+// class Alert
+@Component({
+  selector: 'alert',
+  properties: ['type', 'dismissible', 'dismissOnTimeout'],
+  events: ['close'],
+  lifecycle: [LifecycleEvent.onInit]
+})
+```
+
+### Alert properties
+- `type` (`?:string='warning'`) - provide one of the four supported contextual classes:
+`success`,`info`, `warning`, `danger`
+- `dismissible` (`?:boolean=false`) - determines if an inline close button is displayed
+- `dismiss-on-timeout` (`?number=0`) - number of milliseconds, if specified sets a timeout duration, after which the alert will be closed
+- `template-url` (*not yet supported*) - allows to provide message template
+
+### Alert events
+- `close` - fired when `alert` closed with inline button or by timeout, `$event` is an instance of `Alert` component
+
+*Will be deprecated*: The presence of the `(close)` event handler determines
+if a close button is displayed, use `dismissible` instead
+

components/alert/title.md

@@ -0,0 +1,5 @@
+Provides contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
+
+Base specifications: [bootstrap 3](http://getbootstrap.com/components/#alerts) or [bootstrap 4](http://v4-alpha.getbootstrap.com/components/alerts/)
+
+This directive can be used to generate alerts from the dynamic model data (using the `ng-for` directive).

components/buttons/button-checkbox.ts

@@ -8,19 +8,10 @@ import {
 
 
 @Directive({
-  selector: '[ng-model][btn-checkbox]',
-  properties: [
-    'btnCheckboxTrue: btn-checkbox-true',
-    'btnCheckboxFalse: btn-checkbox-false'
-  ],
+  selector: '[btn-checkbox][ng-model]',
+  properties: ['btnCheckboxTrue', 'btnCheckboxFalse'],
   host: {
     '(click)': 'onClick()',
-    '[class.ng-untouched]': 'ngClassUntouched',
-    '[class.ng-touched]': 'ngClassTouched',
-    '[class.ng-pristine]': 'ngClassPristine',
-    '[class.ng-dirty]': 'ngClassDirty',
-    '[class.ng-valid]': 'ngClassValid',
-    '[class.ng-invalid]': 'ngClassInvalid',
     '[class.active]': 'state'
   },
   lifecycle: [LifecycleEvent.onInit]
@@ -35,16 +26,16 @@ export class ButtonCheckbox extends DefaultValueAccessor {
     super(cd, renderer, elementRef);
   }
 
-  private get trueValue(){
-    return typeof this.btnCheckboxTrue !== 'undefined' ? this.btnCheckboxTrue : true;
+  onInit() {
+    this.toggle(this.trueValue === this.value);
   }
 
-  private get falseValue(){
-    return typeof this.btnCheckboxFalse !== 'undefined' ? this.btnCheckboxFalse : false;
+  private get trueValue() {
+    return typeof this.btnCheckboxTrue !== 'undefined' ? this.btnCheckboxTrue : true;
   }
 
-  onInit() {
-    this.toggle(this.trueValue === this.value);
+  private get falseValue() {
+    return typeof this.btnCheckboxFalse !== 'undefined' ? this.btnCheckboxFalse : false;
   }
 
   toggle(state:boolean) {
@@ -54,6 +45,7 @@ export class ButtonCheckbox extends DefaultValueAccessor {
 
   // model -> view
   writeValue(value:any) {
+    this.state = this.trueValue === value;
     this.value = value;
   }
 

components/buttons/button-radio.ts

@@ -1,39 +1,35 @@
 /// <reference path="../../tsd.d.ts" />
 import {
   Directive,
-  DefaultValueAccessor,
+  DefaultValueAccessor, LifecycleEvent,
   Self, NgModel, Renderer, ElementRef
 } from 'angular2/angular2';
 
 
 @Directive({
-  selector: '[ng-model][btn-radio]',
-  properties: [
-    'btnRadio: btn-radio'
-  ],
+  selector: '[btn-radio][ng-model]',
+  properties: ['btnRadio', 'uncheckable'],
   host: {
     '(click)': 'onClick()',
-    '[class.ng-untouched]': 'ngClassUntouched',
-    '[class.ng-touched]': 'ngClassTouched',
-    '[class.ng-pristine]': 'ngClassPristine',
-    '[class.ng-dirty]': 'ngClassDirty',
-    '[class.ng-valid]': 'ngClassValid',
-    '[class.ng-invalid]': 'ngClassInvalid',
     '[class.active]': 'isActive'
-  }
+  },
+  lifecycle: [LifecycleEvent.onInit]
 })
 export class ButtonRadio extends DefaultValueAccessor {
-  private btnRadio:any;
-  uncheckable:any;
-  cd: NgModel;
+  private btnRadio:string;
+  private uncheckable:boolean;
+  cd:NgModel;
 
   constructor(@Self() cd:NgModel, renderer:Renderer, elementRef:ElementRef) {
     super(cd, renderer, elementRef);
-    this.uncheckable = elementRef.nativeElement.getAttribute('uncheckable') != null;
+  }
+
+  onInit() {
+    this.uncheckable = typeof this.uncheckable !== 'undefined';
   }
 
   private get isActive() {
-    return typeof this.btnRadio !== 'undefined' ? (this.btnRadio === this.value) : false;
+    return this.btnRadio === this.value;
   }
 
   // hack view model!