1 | import { Directive, ElementRef, Input, Output, Renderer, ViewContainerRef } from '@angular/core';
|
2 | import 'rxjs/add/operator/filter';
|
3 | import { ComponentLoaderFactory } from '../component-loader';
|
4 | import { BsDropdownConfig } from './bs-dropdown.config';
|
5 | import { BsDropdownContainerComponent } from './bs-dropdown-container.component';
|
6 | import { BsDropdownState } from './bs-dropdown.state';
|
7 | import { isBs3 } from '../utils/ng2-bootstrap-config';
|
8 | export var BsDropdownDirective = (function () {
|
9 | function BsDropdownDirective(_elementRef, _renderer, _viewContainerRef, _cis, _config, _state) {
|
10 | this._elementRef = _elementRef;
|
11 | this._renderer = _renderer;
|
12 | this._viewContainerRef = _viewContainerRef;
|
13 | this._cis = _cis;
|
14 | this._config = _config;
|
15 | this._state = _state;
|
16 |
|
17 | this._isInlineOpen = false;
|
18 | this._subscriptions = [];
|
19 |
|
20 | this._dropdown = this._cis
|
21 | .createLoader(this._elementRef, this._viewContainerRef, this._renderer)
|
22 | .provide({ provide: BsDropdownState, useValue: this._state });
|
23 | this.onShown = this._dropdown.onShown;
|
24 | this.onHidden = this._dropdown.onHidden;
|
25 |
|
26 | this._state.autoClose = this._config.autoClose;
|
27 | }
|
28 | Object.defineProperty(BsDropdownDirective.prototype, "autoClose", {
|
29 | get: function () {
|
30 | return this._state.autoClose;
|
31 | },
|
32 | |
33 |
|
34 |
|
35 |
|
36 | set: function (value) {
|
37 | if (typeof value === 'boolean') {
|
38 | this._state.autoClose = value;
|
39 | }
|
40 | },
|
41 | enumerable: true,
|
42 | configurable: true
|
43 | });
|
44 | ;
|
45 | Object.defineProperty(BsDropdownDirective.prototype, "isDisabled", {
|
46 | get: function () { return this._isDisabled; },
|
47 | |
48 |
|
49 |
|
50 | set: function (value) {
|
51 | this._isDisabled = value;
|
52 | this._state.isDisabledChange.emit(value);
|
53 | if (value) {
|
54 | this.hide();
|
55 | }
|
56 | },
|
57 | enumerable: true,
|
58 | configurable: true
|
59 | });
|
60 | Object.defineProperty(BsDropdownDirective.prototype, "isOpen", {
|
61 | |
62 |
|
63 |
|
64 | get: function () {
|
65 | if (this._showInline) {
|
66 | return this._isInlineOpen;
|
67 | }
|
68 | return this._dropdown.isShown;
|
69 | },
|
70 | set: function (value) {
|
71 | if (value) {
|
72 | this.show();
|
73 | }
|
74 | else {
|
75 | this.hide();
|
76 | }
|
77 | },
|
78 | enumerable: true,
|
79 | configurable: true
|
80 | });
|
81 | Object.defineProperty(BsDropdownDirective.prototype, "isBs4", {
|
82 | get: function () {
|
83 | return !isBs3();
|
84 | },
|
85 | enumerable: true,
|
86 | configurable: true
|
87 | });
|
88 | BsDropdownDirective.prototype.ngOnInit = function () {
|
89 | var _this = this;
|
90 | this._showInline = !this.container;
|
91 |
|
92 | this._dropdown.listen({
|
93 | triggers: this.triggers,
|
94 | show: function () { return _this.show(); }
|
95 | });
|
96 |
|
97 | this._subscriptions.push(this._state
|
98 | .toggleClick.subscribe(function (value) { return _this.toggle(value); }));
|
99 |
|
100 | this._subscriptions.push(this._state
|
101 | .isDisabledChange
|
102 | .filter(function (value) { return value === true; })
|
103 | .subscribe(function (value) { return _this.hide(); }));
|
104 |
|
105 | if (this._showInline) {
|
106 | this._state.dropdownMenu
|
107 | .then(function (dropdownMenu) {
|
108 | _this._inlinedMenu = dropdownMenu.viewContainer.createEmbeddedView(dropdownMenu.templateRef);
|
109 | });
|
110 | }
|
111 | };
|
112 | |
113 |
|
114 |
|
115 |
|
116 | BsDropdownDirective.prototype.show = function () {
|
117 | var _this = this;
|
118 | if (this.isOpen || this.isDisabled) {
|
119 | return;
|
120 | }
|
121 | if (this._showInline) {
|
122 | this._isInlineOpen = true;
|
123 | this._state.isOpenChange.emit(true);
|
124 | return;
|
125 | }
|
126 | this._state.dropdownMenu
|
127 | .then(function (dropdownMenu) {
|
128 |
|
129 | var _dropup = _this.dropup === true ||
|
130 | (typeof _this.dropup !== 'undefined' && _this.dropup !== false);
|
131 | _this._state.direction = _dropup ? 'up' : 'down';
|
132 | var _placement = _this.placement ||
|
133 | (_dropup ? 'top left' : 'bottom left');
|
134 |
|
135 | _this._dropdown
|
136 | .attach(BsDropdownContainerComponent)
|
137 | .to(_this.container)
|
138 | .position({ attachment: _placement })
|
139 | .show({
|
140 | content: dropdownMenu.templateRef,
|
141 | placement: _placement
|
142 | });
|
143 | _this._state.isOpenChange.emit(true);
|
144 | });
|
145 | };
|
146 | |
147 |
|
148 |
|
149 |
|
150 | BsDropdownDirective.prototype.hide = function () {
|
151 | if (!this.isOpen) {
|
152 | return;
|
153 | }
|
154 | if (this._showInline) {
|
155 | this._isInlineOpen = false;
|
156 | }
|
157 | else {
|
158 | this._dropdown.hide();
|
159 | }
|
160 | this._state.isOpenChange.emit(false);
|
161 | };
|
162 | |
163 |
|
164 |
|
165 |
|
166 | BsDropdownDirective.prototype.toggle = function (value) {
|
167 | if (this.isOpen || value === false) {
|
168 | return this.hide();
|
169 | }
|
170 | return this.show();
|
171 | };
|
172 | BsDropdownDirective.prototype.ngOnDestroy = function () {
|
173 |
|
174 | for (var _i = 0, _a = this._subscriptions; _i < _a.length; _i++) {
|
175 | var sub = _a[_i];
|
176 | sub.unsubscribe();
|
177 | }
|
178 | this._dropdown.dispose();
|
179 | };
|
180 | BsDropdownDirective.decorators = [
|
181 | { type: Directive, args: [{
|
182 | selector: '[bsDropdown],[dropdown]',
|
183 | exportAs: 'bs-dropdown',
|
184 | providers: [BsDropdownState],
|
185 | host: {
|
186 | '[class.dropup]': 'dropup',
|
187 | '[class.open]': 'isOpen',
|
188 | '[class.show]': 'isOpen && isBs4'
|
189 | }
|
190 | },] },
|
191 | ];
|
192 |
|
193 | BsDropdownDirective.ctorParameters = function () { return [
|
194 | { type: ElementRef, },
|
195 | { type: Renderer, },
|
196 | { type: ViewContainerRef, },
|
197 | { type: ComponentLoaderFactory, },
|
198 | { type: BsDropdownConfig, },
|
199 | { type: BsDropdownState, },
|
200 | ]; };
|
201 | BsDropdownDirective.propDecorators = {
|
202 | 'placement': [{ type: Input },],
|
203 | 'triggers': [{ type: Input },],
|
204 | 'container': [{ type: Input },],
|
205 | 'dropup': [{ type: Input },],
|
206 | 'autoClose': [{ type: Input },],
|
207 | 'isDisabled': [{ type: Input },],
|
208 | 'isOpen': [{ type: Input },],
|
209 | 'onShown': [{ type: Output },],
|
210 | 'onHidden': [{ type: Output },],
|
211 | };
|
212 | return BsDropdownDirective;
|
213 | }());
|
214 |
|
\ | No newline at end of file |