Skip to content

Commit 31cba41

Browse files
valorkinvalorkin
authored
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
1 parent 3264308 commit 31cba41

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+687
-1129
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
22
import { CommonModule } from '@angular/common';
33
import { FormsModule } from '@angular/forms';
44
import { RouterModule } from '@angular/router';
5-
import { DropdownModule } from 'ng2-bootstrap/dropdown';
5+
import { BsDropdownModule } from 'ng2-bootstrap/dropdown';
66

77
import { SharedModule } from '../../shared';
88
import { DropdownSectionComponent } from './dropdown-section.component';
@@ -15,7 +15,7 @@ import { routes } from './demo-dropdown.routes';
1515
...DEMO_COMPONENTS
1616
],
1717
imports: [
18-
DropdownModule.forRoot(),
18+
BsDropdownModule.forRoot(),
1919
CommonModule,
2020
FormsModule,
2121
SharedModule,

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
<div class="btn-group" dropdown>
2-
<button id="single-button" type="button" class="btn btn-primary" dropdownToggle>
1+
<div class="btn-group" dropdown placement="bottom right">
2+
<button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
33
This dropdown's menu is right-aligned <span class="caret"></span>
44
</button>
5-
<ul dropdownMenu role="menu" aria-labelledby="single-button" class="dropdown-menu-right">
5+
<ul *dropdownMenu class="dropdown-menu dropdown-menu-right" role="menu">
66
<li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
77
<li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
88
<li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>

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

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
1-
<span dropdown (onToggle)="toggled($event)">
2-
<a href id="simple-dropdown" dropdownToggle>
3-
Click me for a dropdown, yo!
4-
</a>
5-
<ul class="dropdown-menu" dropdownMenu aria-labelledby="simple-dropdown">
6-
<li *ngFor="let choice of items">
7-
<a class="dropdown-item" href="#">{{choice}}</a>
8-
</li>
9-
</ul>
1+
<span dropdown (isOpenChange)="toggled($event)">
2+
<a href dropdownToggle (click)="false">Click me for a dropdown, yo!</a>
3+
<ul *dropdownMenu class="dropdown-menu">
4+
<li *ngFor="let choice of items">
5+
<a class="dropdown-item" href="#">{{choice}}</a>
6+
</li>
7+
</ul>
108
</span>

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
<div class="btn-group" dropdown>
2-
<button id="single-button" type="button" class="btn btn-primary" dropdownToggle>
2+
<button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
33
Button dropdown <span class="caret"></span>
44
</button>
5-
<ul dropdownMenu role="menu" aria-labelledby="single-button">
5+
<ul *dropdownMenu class="dropdown-menu" role="menu">
66
<li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
77
<li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
88
<li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
99
<li class="divider dropdown-divider"></li>
10-
<li role="menuitem"><a class="dropdown-item" href="#">Separated link</a></li>
10+
<li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
11+
</li>
1112
</ul>
1213
</div>

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
<div dropdown>
2-
<button type="button" class="btn btn-primary" dropdownToggle>
2+
<button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
33
Button dropdown <span class="caret"></span>
44
</button>
5-
<ul dropdownMenu role="menu" aria-labelledby="single-button">
5+
<ul *dropdownMenu class="dropdown-menu" role="menu">
66
<li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
7-
<li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
8-
<li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
7+
<li role="menuitem"><a class="dropdown-item" href="#">Another action</a>
8+
</li>
9+
<li role="menuitem"><a class="dropdown-item" href="#">Something else
10+
here</a></li>
911
</ul>
1012
</div>

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

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,10 @@
11
import { Component } from '@angular/core';
2-
import { DropdownConfig } from 'ng2-bootstrap/dropdown';
3-
4-
// such override allows to keep some initial values
5-
6-
export function getDropdownConfig(): DropdownConfig {
7-
return Object.assign(new DropdownConfig(), {autoClose: 'disabled', keyboardNav: true});
8-
}
2+
import { BsDropdownConfig } from 'ng2-bootstrap/dropdown';
93

104
@Component({
115
selector: 'demo-dropdown-config',
126
templateUrl: './config.html',
13-
providers: [{provide: DropdownConfig, useFactory: getDropdownConfig}]
7+
providers: [{provide: BsDropdownConfig, useValue: {autoClose: false}}]
148
})
159
export class DemoDropdownConfigComponent {
1610
}

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
<div class="btn-group" dropdown dropdown-append-to-body>
2-
<button id="btn-append-to-body" type="button" class="btn btn-primary" dropdownToggle>
1+
<div class="btn-group" dropdown container="body">
2+
<button dropdownToggle type="button" class="btn btn-primary dropdownToggle">
33
Dropdown on Body <span class="caret"></span>
44
</button>
5-
<ul class="dropdown-menu" role="menu" aria-labelledby="btn-append-to-body">
5+
<ul *dropdownMenu class="dropdown-menu" role="menu">
66
<li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
77
<li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
88
<li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
99
<li class="divider dropdown-divider"></li>
10-
<li role="menuitem"><a class="dropdown-item" href="#">Separated link</a></li>
10+
<li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
11+
</li>
1112
</ul>
1213
</div>

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

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
1-
<div class="btn-group" dropdown>
2-
<button id="single-button" type="button" class="btn btn-primary" dropdownToggle [disabled]="disabled">
1+
<div class="btn-group" dropdown [isDisabled]="disabled">
2+
<button dropdownToggle type="button" class="btn btn-primary dropdownToggle">
33
Button dropdown <span class="caret"></span>
44
</button>
5-
<ul dropdownMenu role="menu" aria-labelledby="single-button">
5+
<ul *dropdownMenu class="dropdown-menu" role="menu">
66
<li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
7-
<li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
8-
<li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
7+
<li role="menuitem"><a class="dropdown-item" href="#">Another action</a>
8+
</li>
9+
<li role="menuitem"><a class="dropdown-item" href="#">Something else
10+
here</a></li>
911
<li class="divider dropdown-divider"></li>
10-
<li role="menuitem"><a class="dropdown-item" href="#">Separated link</a></li>
12+
<li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
13+
</li>
1114
</ul>
1215
</div>
13-
<button type="button" class="btn btn-warning" (click)="disabled = !disabled">Enable/Disable</button>
16+
<button type="button" class="btn btn-warning" (click)="disabled = !disabled">
17+
Enable/Disable
18+
</button>

‎demo/src/app/components/+dropdown/demos/dropdown-demo.component.html

Lines changed: 0 additions & 80 deletions
This file was deleted.

‎demo/src/app/components/+dropdown/demos/dropdown-demo.component.ts

Lines changed: 0 additions & 22 deletions
This file was deleted.

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

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
1-
<div class="btn-group dropup" dropdown>
2-
<button id="single-button" type="button" class="btn btn-primary" dropdownToggle>
3-
Dropup <span class="caret"></span>
4-
</button>
5-
<ul dropdownMenu role="menu" aria-labelledby="single-button">
1+
<div class="btn-group dropup" dropdown dropup>
2+
<button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
3+
Dropup <span class="caret"></span>
4+
</button>
5+
<ul *dropdownMenu class="dropdown-menu" role="menu">
66
<li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
7-
<li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
8-
<li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
7+
<li role="menuitem"><a class="dropdown-item" href="#">Another action</a>
8+
</li>
9+
<li role="menuitem"><a class="dropdown-item" href="#">Something else
10+
here</a></li>
911
<li class="divider dropdown-divider"></li>
10-
<li role="menuitem"><a class="dropdown-item" href="#">Separated link</a></li>
12+
<li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
13+
</li>
1114
</ul>
12-
</div>
15+
</div>

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

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { DropdownDemoComponent } from './dropdown-demo.component';
21
import { DemoDropdownBasicComponent } from './basic/basic';
32
import { DemoDropdownSplitComponent } from './split/split';
43
import { DemoDropdownContainerComponent } from './container/container';
@@ -9,11 +8,13 @@ import { DemoDropupComponent } from './dropup/dropup';
98
import { DemoDropdownTriggersManualComponent } from './triggers-manual/triggers-manual';
109
import { DemoDropdownDisabledComponent } from './disabled-menu/disabled-menu';
1110
import { DemoDropdownAlignmentComponent } from './alignment/menu-alignment';
11+
import { DemoNestedDropdownsComponent } from './nested-dropdowns/nested-dropdowns';
1212

1313
export const DEMO_COMPONENTS = [
14-
DropdownDemoComponent, DemoDropdownBasicComponent, DemoDropdownBasicLinkComponent, DemoDropdownSplitComponent,
14+
DemoDropdownBasicComponent, DemoDropdownBasicLinkComponent, DemoDropdownSplitComponent,
1515
DemoDropdownContainerComponent, DemoDropdownKeyboardComponent, DemoDropdownConfigComponent, DemoDropupComponent,
16-
DemoDropdownTriggersManualComponent, DemoDropdownDisabledComponent, DemoDropdownAlignmentComponent
16+
DemoDropdownTriggersManualComponent, DemoDropdownDisabledComponent, DemoDropdownAlignmentComponent,
17+
DemoNestedDropdownsComponent
1718
];
1819

1920
export const DEMOS = {
@@ -46,6 +47,10 @@ export const DEMOS = {
4647
component: require('!!raw-loader?lang=typescript!./alignment/menu-alignment.ts'),
4748
html: require('!!raw-loader?lang=markup!./alignment/menu-alignment.html')
4849
},
50+
nested: {
51+
component: require('!!raw-loader?lang=typescript!./nested-dropdowns/nested-dropdowns.ts'),
52+
html: require('!!raw-loader?lang=markup!./nested-dropdowns/nested-dropdowns.html')
53+
},
4954
keyboard: {
5055
component: require('!!raw-loader?lang=typescript!./keyboard/keyboard.ts'),
5156
html: require('!!raw-loader?lang=markup!./keyboard/keyboard.html')

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

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
1-
<div class="btn-group" dropdown keyboardNav="true">
2-
<button id="simple-btn-keyboard-nav" type="button" class="btn btn-primary" dropdownToggle>
1+
<div dropdown class="btn-group" keyboardNav="true">
2+
<button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
33
Dropdown with keyboard navigation <span class="caret"></span>
44
</button>
5-
<ul class="dropdown-menu" dropdownMenu role="menu" aria-labelledby="simple-btn-keyboard-nav">
5+
<ul *dropdownMenu class="dropdown-menu" role="menu">
66
<li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
7-
<li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
8-
<li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
7+
<li role="menuitem"><a class="dropdown-item" href="#">Another action</a>
8+
</li>
9+
<li role="menuitem"><a class="dropdown-item" href="#">Something else
10+
here</a></li>
911
<li class="divider dropdown-divider"></li>
10-
<li role="menuitem"><a class="dropdown-item" href="#">Separated link</a></li>
12+
<li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
13+
</li>
1114
</ul>
1215
</div>

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<div class="btn-group" dropdown [autoClose]="false" container="body">
2+
<button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
3+
This dropdown has nested submenu <span class="caret"></span>
4+
</button>
5+
<ul *dropdownMenu class="dropdown-menu" role="menu">
6+
<li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested">Action</a></li>
7+
8+
<li role="menuitem" dropdown triggers="mouseover" placement="right" container="body">
9+
<a dropdownToggle class="dropdown-item dropdown-toggle"
10+
(click)="false">Hover me for nested dropdown <span class="caret"></span></a>
11+
<ul *dropdownMenu class="dropdown-menu" role="menu">
12+
<li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested">Action</a></li>
13+
<li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested">Action1</a></li>
14+
<li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested">Action2</a></li>
15+
</ul>
16+
</li>
17+
18+
<li role="menuitem" dropdown triggers="mouseover" placement="right" container="body">
19+
<a dropdownToggle class="dropdown-item dropdown-toggle"
20+
(click)="false">Hover me for nested dropdown <span class="caret"></span></a>
21+
<ul *dropdownMenu class="dropdown-menu" role="menu">
22+
<li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested">Action</a></li>
23+
<li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested">Action1</a></li>
24+
<li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested">Action2</a></li>
25+
</ul>
26+
</li>
27+
28+
<li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested">Something else here</a></li>
29+
<li class="divider dropdown-divider"></li>
30+
<li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested">Separated link</a></li>
31+
</ul>
32+
</div>

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'demo-nested-dropdowns',
5+
templateUrl: './nested-dropdowns.html'
6+
})
7+
export class DemoNestedDropdownsComponent {
8+
}

‎demo/src/app/components/+dropdown/demos/not-yet-supported.html

Lines changed: 0 additions & 18 deletions
This file was deleted.

0 commit comments

Comments
 (0)