chore(dropdown): docs and code updated to beta 1

components/dropdown.ts

@@ -0,0 +1,4 @@
+import {Dropdown} from './dropdown/dropdown.directive';
+import {DropdownToggle} from './dropdown/dropdown-toggle.directive';
+
+export const DROPDOWN_DIRECTIVES: Array<any> = [Dropdown, DropdownToggle];

components/dropdown/dropdown-keyboard-nav.ts

@@ -1,8 +1,8 @@
 import {Directive, ElementRef} from 'angular2/core';
-import {Dropdown} from './dropdown';
+import {Dropdown} from './dropdown.directive.ts';
 
 @Directive({
-  selector: '[dropdown][keyboard-nav]',
+  selector: '[dropdown][dropdownKeyboardNav]',
   host: {
     '(keydown)': 'onKeydown($event)'
   }

components/dropdown/dropdown-toggle.ts → components/dropdown/dropdown-toggle.directive.ts

@@ -3,9 +3,10 @@ import {
   OnInit, Input, HostBinding, HostListener
 } from 'angular2/core';
 
-import {Dropdown} from './dropdown';
+import {Dropdown} from './dropdown.directive.ts';
+import {DropdownMenu} from './dropdown-menu.directive';
 
-@Directive({ selector: '[dropdown-toggle]' })
+@Directive({ selector: '[dropdownToggle]' })
 export class DropdownToggle implements OnInit {
   @HostBinding('class.disabled')
   @Input() private disabled:boolean = false;

components/dropdown/dropdown.ts → components/dropdown/dropdown.directive.ts

@@ -1,25 +1,25 @@
 import {
   Directive,
   OnInit, OnDestroy, Input, Output, HostBinding,
-  EventEmitter, ElementRef
+  EventEmitter, ElementRef, ContentChildren,
+  Query, QueryList
 } from 'angular2/core';
 
-import {DropdownMenuInterface, DropdownToggleInterface} from './dropdown.interfaces';
-import {dropdownService, ALWAYS} from './dropdown-service';
+import {dropdownService, ALWAYS} from './dropdown.service';
 
-@Directive({ selector: '[dropdown]' })
+@Directive({selector: '[dropdown]'})
 export class Dropdown implements OnInit, OnDestroy {
   @HostBinding('class.open')
   @Input() public get isOpen():boolean {
     return this._isOpen;
   }
+
   @Input() public autoClose:string;
   @Input() public keyboardNav:boolean;
-// enum string: ['always', 'outsideClick', 'disabled']
-  @Input() private dropdownAppendToBody:boolean;
-
-  @Output() private onToggle:EventEmitter<boolean> = new EventEmitter();
+  // enum string: ['always', 'outsideClick', 'disabled']
+  @Input() public appendToBody:boolean;
 
+  @Output() public onToggle:EventEmitter<boolean> = new EventEmitter();
   @HostBinding('class.dropdown') private addClass = true;
 
   private _isOpen:boolean;
@@ -30,34 +30,24 @@ export class Dropdown implements OnInit, OnDestroy {
   // drop down toggle element
   public toggleEl:ElementRef;
 
-  // not implemented:
-  private dropdownMenuTemplateUrl:string;
-
-  constructor(public el:ElementRef) {
+  constructor(public el:ElementRef,
+              @Query('dropdownMenu', {descendants: false}) dropdownMenuList:QueryList<ElementRef>) {
     // todo: bind to route change event
   }
 
   public set isOpen(value) {
     this._isOpen = !!value;
 
     // todo: implement after porting position
-    if (this.dropdownAppendToBody && this.menuEl) {
+    if (this.appendToBody && this.menuEl) {
 
     }
 
     // todo: $animate open<->close transitions, as soon as ng2Animate will be ready
     if (this.isOpen) {
-      if (this.dropdownMenuTemplateUrl) {
-        // todo: implement template url option
-      }
-
       this.focusToggleElement();
       dropdownService.open(this);
     } else {
-      if (this.dropdownMenuTemplateUrl) {
-        // todo: implement template url option
-      }
-
       dropdownService.close(this);
       this.selectedOption = null;
     }
@@ -67,33 +57,27 @@ export class Dropdown implements OnInit, OnDestroy {
 
   ngOnInit() {
     this.autoClose = this.autoClose || ALWAYS;
-    this.keyboardNav = typeof this.keyboardNav !== 'undefined';
-    this.dropdownAppendToBody = typeof this.dropdownAppendToBody !== 'undefined';
     if (this.isOpen) {
       // todo: watch for event get-isOpen?
     }
   }
 
   ngOnDestroy() {
-    if (this.dropdownAppendToBody && this.menuEl) {
+    if (this.appendToBody && this.menuEl) {
       this.menuEl.nativeElement.remove();
     }
   }
 
-  public set dropDownMenu(dropdownMenu:DropdownMenuInterface) {
+  public set dropDownMenu(dropdownMenu:{el:ElementRef}) {
     // init drop down menu
     this.menuEl = dropdownMenu.el;
 
-    if (dropdownMenu.templateUrl) {
-      this.dropdownMenuTemplateUrl = dropdownMenu.templateUrl;
-    }
-
-    if (this.dropdownAppendToBody) {
+    if (this.appendToBody) {
       window.document.body.appendChild(this.menuEl.nativeElement);
     }
   }
 
-  public set dropDownToggle(dropdownToggle:DropdownToggleInterface) {
+  public set dropDownToggle(dropdownToggle:{el:ElementRef}) {
     // init toggle element
     this.toggleEl = dropdownToggle.el;
   }

components/dropdown/dropdown-service.ts → components/dropdown/dropdown.service.ts

@@ -2,7 +2,7 @@ export const ALWAYS = 'always';
 export const DISABLED = 'disabled';
 export const OUTSIDECLICK = 'outsideClick';
 
-import {Dropdown} from './dropdown';
+import {Dropdown} from './dropdown.directive.ts';
 
 export class DropdownService {
   private openScope:Dropdown;

components/dropdown/readme.md

@@ -7,69 +7,54 @@ import { DROPDOWN_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap';
 <!-- dropdown directive marks a dropdown root element -->
 <div dropdown>
   <!-- click on dropdown-toggle toogles dropdown state, optional -->
-  <div dropdown-toggle></div>
+  <div dropdownToggle></div>
   <!-- dropdown-menu holds content which will be shown -->
-  <div dropdown-menu>
+  <div dropdownMenu>
     <!-- this content will be shown if dropdown opened -->
   </div>
 </div>
 ```
 
 ### Annotations
 ```typescript
-// class Dropdown implements OnInit, OnDestroy
+// directive Dropdown
 @Directive({ selector: '[dropdown]' })
 export class Dropdown implements OnInit, OnDestroy {
   @HostBinding('class.open')
   @Input() public get isOpen():boolean {}
   @Input() public autoClose:string;
   @Input() public keyboardNav:boolean;
 // enum string: ['always', 'outsideClick', 'disabled']
-  @Input() private dropdownAppendToBody:boolean;
-
-  @Output() private onToggle:EventEmitter<boolean> = new EventEmitter();
-
-  @HostBinding('class.dropdown') private addClass = true;
+  @Input() public appendToBody:boolean;
+  @Output() public onToggle:EventEmitter<boolean>;
 }
 
-// class DropdownToggle implements OnInit
-@Directive({ selector: '[dropdown-toggle]' })
+// directive DropdownToggle
+@Directive({ selector: '[dropdownToggle]' })
 export class DropdownToggle implements OnInit {
   @HostBinding('class.disabled')
-  @Input() private disabled:boolean = false;
+  @Input() public disabled:boolean = false;
 
-  @HostBinding('class.dropdown-toggle')
-  @HostBinding('attr.aria-haspopup')
-  private addClass = true;
   @HostBinding('attr.aria-expanded')
   public get isOpen() {}
   @HostListener('click', ['$event'])
   public toggleDropdown(event:MouseEvent) {}
 }
 
-// class DropdownMenu implements OnInit
-@Directive({ selector: '[dropdown-menu]' })
-export class DropdownMenu implements OnInit {
-  @Input() public templateUrl:string;
-}
-
 export const DROPDOWN_DIRECTIVES: Array<any> = [Dropdown, DropdownMenu, DropdownToggle];
 ```
 
 ### Dropdown properties
-- `is-open` (`?boolean=false`) - if `true` dropdown will be opened
-- `auto-close` (`?string='always'`) - behaviour vary:
+- `isOpen` (`?boolean=false`) - if `true` dropdown will be opened
+- `autoClose` (`?string='always'`) - behaviour vary:
     * `always` - (default) automatically closes the dropdown when any of its elements is clicked
     * `outsideClick` - closes the dropdown automatically only when the user clicks any element outside the dropdown
     * `disabled` - disables the auto close. You can then control the open/close status of the dropdown manually, by using `is-open`. Please notice that the dropdown will still close if the toggle is clicked, the `esc` key is pressed or another dropdown is open
-- `keyboard-nav` (`?boolean=false`) - if `true` will enable navigation of dropdown list elements with the arrow keys
-- `dropdown-append-to-body` (*not yet tested*) (`?boolean=false`) - if `true` `dropdown-menu` content will be appended to the body. This is useful when the dropdown button is inside a div with `overflow: hidden`, and the menu would otherwise be hidden
+- `keyboardNav` (`?boolean=false`) - if `true` will enable navigation of dropdown list elements with the arrow keys
+- `appendToBody` (*not yet tested*) (`?boolean=false`) - if `true` `dropdownMenu` content will be appended to the body. This is useful when the dropdown button is inside a div with `overflow: hidden`, and the menu would otherwise be hidden
 
 ### Dropdown events
-- `on-toggle` - fired when `dropdown` toggles, `$event:boolean` equals dropdown `is-open` state
+- `onToggle` - fired when `dropdown` toggles, `$event:boolean` equals dropdown `isOpen` state
 
 ### Dropdown toggle properties
 - `disabled` (`?boolean=false`) - if `true` dropdown toggle will be disabled
-
-### Dropdown menu properties
-- `template-url` (*not yet supported*) - allows to provide dropdown menu template

demo/components/demo-header.ts

@@ -1,9 +1,12 @@
 /// <reference path="../../tsd.d.ts" />
+import {Component} from 'angular2/core';
+import {CORE_DIRECTIVES} from 'angular2/common';
 import {
-  Component, View,
-} from 'angular2/core';
-import { CORE_DIRECTIVES } from 'angular2/common';
-import {Collapse, dropdown, Ng2BootstrapConfig, Ng2BootstrapTheme} from '../../ng2-bootstrap';
+  Collapse,
+  DROPDOWN_DIRECTIVES,
+  Ng2BootstrapConfig,
+  Ng2BootstrapTheme
+} from '../../ng2-bootstrap';
 
 let components = [
   'Accordion', 'Alerts', 'Buttons', 'Carousel', 'Collapse', 'Datepicker',
@@ -27,7 +30,7 @@ let template = `
         <ul class="nav navbar-nav">
           <li class="nav-item"><a href="{{prefix}}#top" role="button" class="navbar-brand">ng2-bootstrap</a></li>
           <li class="nav-item dropdown" dropdown>
-            <a role="button" class="nav-link dropdown-toggle" dropdown-toggle>Directives <b class="caret"></b></a>
+            <a role="button" class="nav-link dropdownToggle" dropdownToggle>Directives <b class="caret"></b></a>
             <ul class="dropdown-menu">
               <li *ngFor="#comp of components"><a class="dropdown-item" href="{{prefix}}#{{comp.toLowerCase()}}">{{comp}}</a></li>
             </ul>
@@ -52,12 +55,12 @@ let template = `
   directives: [
     CORE_DIRECTIVES,
     Collapse,
-    dropdown
+    DROPDOWN_DIRECTIVES
   ]
 })
 export class DemoHeader {
   public components:Array<string> = components;
-  public isCollapsed: boolean = true;
+  public isCollapsed:boolean = true;
   public prefix:string;
 
   constructor() {

demo/components/dropdown-section.ts

@@ -1,11 +1,9 @@
 /// <reference path="../../tsd.d.ts" />
 
-import {
-  Component, View,
-} from 'angular2/core';
-import { CORE_DIRECTIVES } from 'angular2/common';
+import {Component} from 'angular2/core';
+import {CORE_DIRECTIVES} from 'angular2/common';
 
-import {tabs} from '../../ng2-bootstrap';
+import {TAB_DIRECTIVES} from '../../ng2-bootstrap';
 import {DropdownDemo} from './dropdown/dropdown-demo';
 
 let name = 'Dropdowns';
@@ -19,9 +17,8 @@ let ts = require('!!prismjs?lang=typescript!./dropdown/dropdown-demo.ts');
 let html = require('!!prismjs?lang=markup!./dropdown/dropdown-demo.html');
 
 @Component({
-  selector: 'dropdown-section'
-})
-@View({
+  selector: 'dropdown-section',
+  directives: [DropdownDemo, TAB_DIRECTIVES, CORE_DIRECTIVES],
   template: `
   <br>
   <section id="${name.toLowerCase()}">
@@ -64,8 +61,7 @@ let html = require('!!prismjs?lang=markup!./dropdown/dropdown-demo.html');
       </div>
     </div>
   </section>
-  `,
-  directives: [DropdownDemo, tabs, CORE_DIRECTIVES]
+  `
 })
 export class DropdownSection {
 }

demo/components/dropdown/dropdown-demo.html

@@ -1,7 +1,7 @@
 <div (click)="$event.preventDefault()">
   <!-- Simple dropdown -->
   <span dropdown (on-toggle)="toggled($event)">
-    <a href id="simple-dropdown" dropdown-toggle>
+    <a href id="simple-dropdown" dropdownToggle>
       Click me for a dropdown, yo!
     </a>
     <ul class="dropdown-menu" aria-labelledby="simple-dropdown">
@@ -13,7 +13,7 @@
 
   <!-- Single button -->
   <div class="btn-group" dropdown [isOpen]="status.isopen">
-    <button id="single-button" type="button" class="btn btn-primary" dropdown-toggle [disabled]="disabled">
+    <button id="single-button" type="button" class="btn btn-primary" dropdownToggle [disabled]="disabled">
       Button dropdown <span class="caret"></span>
     </button>
     <ul class="dropdown-menu" role="menu" aria-labelledby="single-button">
@@ -28,7 +28,7 @@
   <!-- Split button -->
   <div class="btn-group" dropdown>
     <button id="split-button" type="button" class="btn btn-danger">Action</button>
-    <button type="button" class="btn btn-danger dropdown-toggle" dropdown-toggle>
+    <button type="button" class="btn btn-danger dropdown-toggle" dropdownToggle>
       <span class="caret"></span>
       <span class="sr-only">Split button!</span>
     </button>
@@ -50,8 +50,8 @@
 
   <hr>
   <!-- Single button with keyboard nav -->
-  <div class="btn-group" dropdown keyboard-nav>
-    <button id="simple-btn-keyboard-nav" type="button" class="btn btn-primary" dropdown-toggle>
+  <div class="btn-group" dropdown keyboardNav="true">
+    <button id="simple-btn-keyboard-nav" type="button" class="btn btn-primary" dropdownToggle>
       Dropdown with keyboard navigation <span class="caret"></span>
     </button>
     <ul class="dropdown-menu" role="menu" aria-labelledby="simple-btn-keyboard-nav">

demo/components/dropdown/dropdown-demo.ts

@@ -1,9 +1,7 @@
-/// <reference path="../../../tsd.d.ts" />
+import {Component} from 'angular2/core';
+import {CORE_DIRECTIVES} from 'angular2/common';
 
-import { Component } from 'angular2/core';
-import { CORE_DIRECTIVES } from 'angular2/common';
-
-import { DROPDOWN_DIRECTIVES } from '../../../ng2-bootstrap';
+import {DROPDOWN_DIRECTIVES} from '../../../ng2-bootstrap';
 
 // webpack html imports
 let template = require('./dropdown-demo.html');