feat(dropdown): rollout completely rewritten bs-dropdown version (#1771)

fixes #1674, fixes #1749, fixes #1623, fixes #1415, fixes #802, fixes #569, fixes #530, fixes #6,
fixes #1540, fixes #1217, fixes #591, fixes #478

feat: you can pass dropdown configuration in `forRoot()` method
feat: now you can add dropdown to body by using `container="body"`

BREAKING CHANGES:
- `DropdownModule` renamed to `BsDropdownModule`, same to all dropdown components added `bs` prefix
- `addToggleClass` option is deprecated, now you need to add `dropdown-toggle` class manually if needed
- `dropdownMenu` menu become a template selector, so `*` should be added
sample:  `<ul dropdownMenu>` should become `<ul *dropdownMenu>`
- `onToggle` event deprecated use `isOpenChange` instead
- `appendToBody` deprecated, use `container="body"` instead, now dropdown behaviour and attachment params alligned with tooltips and popovers
- `keyboardNav` deprecated
- `disabled` renamed to `isDisabled`
- `dropdownToggle` doesn't prevent default behaviour anymore

demo/src/app/components/+dropdown/demo-dropdown.module.ts

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
-import { DropdownModule } from 'ng2-bootstrap/dropdown';
+import { BsDropdownModule } from 'ng2-bootstrap/dropdown';
 
 import { SharedModule } from '../../shared';
 import { DropdownSectionComponent } from './dropdown-section.component';
@@ -15,7 +15,7 @@ import { routes } from './demo-dropdown.routes';
     ...DEMO_COMPONENTS
   ],
   imports: [
-    DropdownModule.forRoot(),
+    BsDropdownModule.forRoot(),
     CommonModule,
     FormsModule,
     SharedModule,

demo/src/app/components/+dropdown/demos/alignment/menu-alignment.html

@@ -1,8 +1,8 @@
-<div class="btn-group" dropdown>
-  <button id="single-button" type="button" class="btn btn-primary" dropdownToggle>
+<div class="btn-group" dropdown placement="bottom right">
+  <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
     This dropdown's menu is right-aligned <span class="caret"></span>
   </button>
-  <ul dropdownMenu role="menu" aria-labelledby="single-button" class="dropdown-menu-right">
+  <ul *dropdownMenu class="dropdown-menu dropdown-menu-right" role="menu">
     <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
     <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
     <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>

demo/src/app/components/+dropdown/demos/basic/basic-link.html

@@ -1,10 +1,8 @@
-<span dropdown (onToggle)="toggled($event)">
-  <a href id="simple-dropdown" dropdownToggle>
-    Click me for a dropdown, yo!
-  </a>
-  <ul class="dropdown-menu" dropdownMenu aria-labelledby="simple-dropdown">
-    <li *ngFor="let choice of items">
-      <a class="dropdown-item" href="#">{{choice}}</a>
-    </li>
-  </ul>
+<span dropdown (isOpenChange)="toggled($event)">
+  <a href dropdownToggle (click)="false">Click me for a dropdown, yo!</a>
+    <ul *dropdownMenu class="dropdown-menu">
+      <li *ngFor="let choice of items">
+        <a class="dropdown-item" href="#">{{choice}}</a>
+      </li>
+    </ul>
 </span>

demo/src/app/components/+dropdown/demos/basic/basic.html

@@ -1,12 +1,13 @@
 <div class="btn-group" dropdown>
-  <button id="single-button" type="button" class="btn btn-primary" dropdownToggle>
+  <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
     Button dropdown <span class="caret"></span>
   </button>
-  <ul dropdownMenu role="menu" aria-labelledby="single-button">
+  <ul *dropdownMenu class="dropdown-menu" role="menu">
     <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
     <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
     <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
     <li class="divider dropdown-divider"></li>
-    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a></li>
+    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
+    </li>
   </ul>
 </div>

demo/src/app/components/+dropdown/demos/config/config.html

@@ -1,10 +1,12 @@
 <div dropdown>
-  <button type="button" class="btn btn-primary" dropdownToggle>
+  <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
     Button dropdown <span class="caret"></span>
   </button>
-  <ul dropdownMenu role="menu" aria-labelledby="single-button">
+  <ul *dropdownMenu class="dropdown-menu" role="menu">
     <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
-    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
-    <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
+    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a>
+    </li>
+    <li role="menuitem"><a class="dropdown-item" href="#">Something else
+      here</a></li>
   </ul>
 </div>

demo/src/app/components/+dropdown/demos/config/config.ts

@@ -1,16 +1,10 @@
 import { Component } from '@angular/core';
-import { DropdownConfig } from 'ng2-bootstrap/dropdown';
-
-// such override allows to keep some initial values
-
-export function getDropdownConfig(): DropdownConfig {
-  return Object.assign(new DropdownConfig(), {autoClose: 'disabled', keyboardNav: true});
-}
+import { BsDropdownConfig } from 'ng2-bootstrap/dropdown';
 
 @Component({
   selector: 'demo-dropdown-config',
   templateUrl: './config.html',
-  providers: [{provide: DropdownConfig, useFactory: getDropdownConfig}]
+  providers: [{provide: BsDropdownConfig, useValue: {autoClose: false}}]
 })
 export class DemoDropdownConfigComponent {
 }

demo/src/app/components/+dropdown/demos/container/container.html

@@ -1,12 +1,13 @@
-<div class="btn-group" dropdown dropdown-append-to-body>
-  <button id="btn-append-to-body" type="button" class="btn btn-primary" dropdownToggle>
+<div class="btn-group" dropdown container="body">
+  <button dropdownToggle type="button" class="btn btn-primary dropdownToggle">
     Dropdown on Body <span class="caret"></span>
   </button>
-  <ul class="dropdown-menu" role="menu" aria-labelledby="btn-append-to-body">
+  <ul *dropdownMenu class="dropdown-menu" role="menu">
     <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
     <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
     <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
     <li class="divider dropdown-divider"></li>
-    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a></li>
+    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
+    </li>
   </ul>
 </div>

demo/src/app/components/+dropdown/demos/disabled-menu/disabled-menu.html

@@ -1,13 +1,18 @@
-<div class="btn-group" dropdown>
-  <button id="single-button" type="button" class="btn btn-primary" dropdownToggle [disabled]="disabled">
+<div class="btn-group" dropdown [isDisabled]="disabled">
+  <button dropdownToggle type="button" class="btn btn-primary dropdownToggle">
     Button dropdown <span class="caret"></span>
   </button>
-  <ul dropdownMenu role="menu" aria-labelledby="single-button">
+  <ul *dropdownMenu class="dropdown-menu" role="menu">
     <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
-    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
-    <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
+    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a>
+    </li>
+    <li role="menuitem"><a class="dropdown-item" href="#">Something else
+      here</a></li>
     <li class="divider dropdown-divider"></li>
-    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a></li>
+    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
+    </li>
   </ul>
 </div>
-<button type="button" class="btn btn-warning" (click)="disabled = !disabled">Enable/Disable</button>
+<button type="button" class="btn btn-warning" (click)="disabled = !disabled">
+  Enable/Disable
+</button>

demo/src/app/components/+dropdown/demos/dropup/dropup.html

@@ -1,12 +1,15 @@
-  <div class="btn-group dropup" dropdown>
-    <button id="single-button" type="button" class="btn btn-primary" dropdownToggle>
-      Dropup <span class="caret"></span>
-    </button>
-    <ul dropdownMenu role="menu" aria-labelledby="single-button">
+<div class="btn-group dropup" dropdown dropup>
+  <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
+    Dropup <span class="caret"></span>
+  </button>
+    <ul *dropdownMenu class="dropdown-menu" role="menu">
       <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
-      <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
-      <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
+      <li role="menuitem"><a class="dropdown-item" href="#">Another action</a>
+      </li>
+      <li role="menuitem"><a class="dropdown-item" href="#">Something else
+        here</a></li>
       <li class="divider dropdown-divider"></li>
-      <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a></li>
+      <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
+      </li>
     </ul>
-  </div>
+</div>

demo/src/app/components/+dropdown/demos/index.ts

@@ -1,4 +1,3 @@
-import { DropdownDemoComponent } from './dropdown-demo.component';
 import { DemoDropdownBasicComponent } from './basic/basic';
 import { DemoDropdownSplitComponent } from './split/split';
 import { DemoDropdownContainerComponent } from './container/container';
@@ -9,11 +8,13 @@ import { DemoDropupComponent } from './dropup/dropup';
 import { DemoDropdownTriggersManualComponent } from './triggers-manual/triggers-manual';
 import { DemoDropdownDisabledComponent } from './disabled-menu/disabled-menu';
 import { DemoDropdownAlignmentComponent } from './alignment/menu-alignment';
+import { DemoNestedDropdownsComponent } from './nested-dropdowns/nested-dropdowns';
 
 export const DEMO_COMPONENTS = [
-  DropdownDemoComponent, DemoDropdownBasicComponent, DemoDropdownBasicLinkComponent, DemoDropdownSplitComponent,
+  DemoDropdownBasicComponent, DemoDropdownBasicLinkComponent, DemoDropdownSplitComponent,
   DemoDropdownContainerComponent, DemoDropdownKeyboardComponent, DemoDropdownConfigComponent, DemoDropupComponent,
-  DemoDropdownTriggersManualComponent, DemoDropdownDisabledComponent, DemoDropdownAlignmentComponent
+  DemoDropdownTriggersManualComponent, DemoDropdownDisabledComponent, DemoDropdownAlignmentComponent,
+  DemoNestedDropdownsComponent
 ];
 
 export const DEMOS = {
@@ -46,6 +47,10 @@ export const DEMOS = {
     component: require('!!raw-loader?lang=typescript!./alignment/menu-alignment.ts'),
     html: require('!!raw-loader?lang=markup!./alignment/menu-alignment.html')
   },
+  nested: {
+    component: require('!!raw-loader?lang=typescript!./nested-dropdowns/nested-dropdowns.ts'),
+    html: require('!!raw-loader?lang=markup!./nested-dropdowns/nested-dropdowns.html')
+  },
   keyboard: {
     component: require('!!raw-loader?lang=typescript!./keyboard/keyboard.ts'),
     html: require('!!raw-loader?lang=markup!./keyboard/keyboard.html')

demo/src/app/components/+dropdown/demos/keyboard/keyboard.html

@@ -1,12 +1,15 @@
-<div class="btn-group" dropdown keyboardNav="true">
-  <button id="simple-btn-keyboard-nav" type="button" class="btn btn-primary" dropdownToggle>
+<div dropdown class="btn-group" keyboardNav="true">
+  <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
     Dropdown with keyboard navigation <span class="caret"></span>
   </button>
-  <ul class="dropdown-menu" dropdownMenu role="menu" aria-labelledby="simple-btn-keyboard-nav">
+  <ul *dropdownMenu class="dropdown-menu" role="menu">
     <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
-    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
-    <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
+    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a>
+    </li>
+    <li role="menuitem"><a class="dropdown-item" href="#">Something else
+      here</a></li>
     <li class="divider dropdown-divider"></li>
-    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a></li>
+    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
+    </li>
   </ul>
 </div>

demo/src/app/components/+dropdown/demos/nested-dropdowns/nested-dropdowns.html

@@ -0,0 +1,32 @@
+<div class="btn-group" dropdown [autoClose]="false" container="body">
+  <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
+    This dropdown has nested submenu <span class="caret"></span>
+  </button>
+  <ul *dropdownMenu class="dropdown-menu" role="menu">
+    <li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested">Action</a></li>
+
+    <li role="menuitem" dropdown triggers="mouseover" placement="right" container="body">
+      <a dropdownToggle class="dropdown-item dropdown-toggle"
+         (click)="false">Hover me for nested dropdown <span class="caret"></span></a>
+      <ul *dropdownMenu class="dropdown-menu" role="menu">
+        <li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested">Action</a></li>
+        <li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested">Action1</a></li>
+        <li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested">Action2</a></li>
+      </ul>
+    </li>
+
+    <li role="menuitem" dropdown triggers="mouseover" placement="right" container="body">
+      <a dropdownToggle class="dropdown-item dropdown-toggle"
+         (click)="false">Hover me for nested dropdown <span class="caret"></span></a>
+      <ul *dropdownMenu class="dropdown-menu" role="menu">
+        <li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested">Action</a></li>
+        <li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested">Action1</a></li>
+        <li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested">Action2</a></li>
+      </ul>
+    </li>
+
+    <li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested">Something else here</a></li>
+    <li class="divider dropdown-divider"></li>
+    <li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested">Separated link</a></li>
+  </ul>
+</div>

demo/src/app/components/+dropdown/demos/nested-dropdowns/nested-dropdowns.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-nested-dropdowns',
+  templateUrl: './nested-dropdowns.html'
+})
+export class DemoNestedDropdownsComponent {
+}