-
Notifications
You must be signed in to change notification settings - Fork 1.5k
/
dropdown.ts
109 lines (95 loc) · 2.38 KB
/
dropdown.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import {Directive, Input, Output, HostListener, EventEmitter} from '@angular/core';
import {NgbDropdownConfig} from './dropdown-config';
/**
* Transforms a node into a dropdown.
*/
@Directive({
selector: '[ngbDropdown]',
exportAs: 'ngbDropdown',
host: {
'[class.dropdown]': '!up',
'[class.dropup]': 'up',
'[class.open]': 'isOpen()',
'(keyup.esc)': 'closeFromOutside()',
'(document:click)': 'closeFromOutside()'
}
})
export class NgbDropdown {
/**
* Indicates that the dropdown should open upwards
*/
@Input() up: boolean;
/**
* Indicates that dropdown should be closed when selecting one of dropdown items (click) or pressing ESC.
*/
@Input() autoClose: boolean;
/**
* Defines whether or not the dropdown-menu is open initially.
*/
@Input('open') private _open = false;
/**
* An event fired when the dropdown is opened or closed.
* Event's payload equals whether dropdown is open.
*/
@Output() openChange = new EventEmitter();
constructor(config: NgbDropdownConfig) {
this.up = config.up;
this.autoClose = config.autoClose;
}
/**
* Checks if the dropdown menu is open or not.
*/
isOpen(): boolean { return this._open; }
/**
* Opens the dropdown menu of a given navbar or tabbed navigation.
*/
open(): void {
if (!this._open) {
this._open = true;
this.openChange.emit(true);
}
}
/**
* Closes the dropdown menu of a given navbar or tabbed navigation.
*/
close(): void {
if (this._open) {
this._open = false;
this.openChange.emit(false);
}
}
/**
* Toggles the dropdown menu of a given navbar or tabbed navigation.
*/
toggle(): void {
if (this.isOpen()) {
this.close();
} else {
this.open();
}
}
/**
* @internal
*/
closeFromOutside() {
if (this.autoClose) {
this.close();
}
}
}
/**
* Allows the dropdown to be toggled via click. This directive is optional.
*/
@Directive({
selector: '[ngbDropdownToggle]',
host: {'class': 'dropdown-toggle', 'aria-haspopup': 'true', '[attr.aria-expanded]': '_dropdown.isOpen()'}
})
export class NgbDropdownToggle {
constructor(private _dropdown: NgbDropdown) {}
@HostListener('click', ['$event'])
toggleOpen($event) {
$event.stopPropagation();
this._dropdown.toggle();
}
}
export const NGB_DROPDOWN_DIRECTIVES = [NgbDropdownToggle, NgbDropdown];