1 | (function (global, factory) {
|
2 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('ngx-bootstrap/component-loader'), require('ngx-bootstrap/utils'), require('ngx-bootstrap/positioning'), require('rxjs'), require('@angular/common')) :
|
3 | typeof define === 'function' && define.amd ? define('ngx-bootstrap/popover', ['exports', '@angular/core', 'ngx-bootstrap/component-loader', 'ngx-bootstrap/utils', 'ngx-bootstrap/positioning', 'rxjs', '@angular/common'], factory) :
|
4 | (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['ngx-bootstrap'] = global['ngx-bootstrap'] || {}, global['ngx-bootstrap'].popover = {}), global.ng.core, global.componentLoader, global.utils, global.positioning, global.rxjs, global.ng.common));
|
5 | }(this, (function (exports, i0, componentLoader, utils, positioning, rxjs, common) { 'use strict';
|
6 |
|
7 | |
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 | var PopoverConfig = (function () {
|
14 | function PopoverConfig() {
|
15 |
|
16 | this.adaptivePosition = true;
|
17 | |
18 |
|
19 |
|
20 | this.placement = 'top';
|
21 | |
22 |
|
23 |
|
24 |
|
25 | this.triggers = 'click';
|
26 | this.outsideClick = false;
|
27 |
|
28 | this.delay = 0;
|
29 | }
|
30 | return PopoverConfig;
|
31 | }());
|
32 | PopoverConfig.ɵprov = i0.ɵɵdefineInjectable({ factory: function PopoverConfig_Factory() { return new PopoverConfig(); }, token: PopoverConfig, providedIn: "root" });
|
33 | PopoverConfig.decorators = [
|
34 | { type: i0.Injectable, args: [{
|
35 | providedIn: 'root'
|
36 | },] }
|
37 | ];
|
38 |
|
39 | var PopoverContainerComponent = (function () {
|
40 | function PopoverContainerComponent(config) {
|
41 | this._placement = 'top';
|
42 | Object.assign(this, config);
|
43 | }
|
44 | Object.defineProperty(PopoverContainerComponent.prototype, "placement", {
|
45 | set: function (value) {
|
46 | if (!this._bsVersions.isBs5) {
|
47 | this._placement = value;
|
48 | }
|
49 | else {
|
50 | this._placement = positioning.PlacementForBs5[value];
|
51 | }
|
52 | },
|
53 | enumerable: false,
|
54 | configurable: true
|
55 | });
|
56 | ;
|
57 | Object.defineProperty(PopoverContainerComponent.prototype, "_bsVersions", {
|
58 | get: function () {
|
59 | return utils.getBsVer();
|
60 | },
|
61 | enumerable: false,
|
62 | configurable: true
|
63 | });
|
64 | PopoverContainerComponent.prototype.checkMarginNecessity = function () {
|
65 | return positioning.checkMargins(this._placement);
|
66 | };
|
67 | return PopoverContainerComponent;
|
68 | }());
|
69 | PopoverContainerComponent.decorators = [
|
70 | { type: i0.Component, args: [{
|
71 | selector: 'popover-container',
|
72 | changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
73 |
|
74 | host: {
|
75 | '[attr.id]': 'popoverId',
|
76 | '[class]': '"popover in popover-" + _placement + " " + "bs-popover-" + _placement + " " + _placement + " " + containerClass + checkMarginNecessity()',
|
77 | '[class.show]': '!_bsVersions.isBs3',
|
78 | '[class.bs3]': '_bsVersions.isBs3',
|
79 | role: 'tooltip',
|
80 | style: 'display:block;'
|
81 | },
|
82 | template: "<div class=\"popover-arrow arrow\"></div>\n<h3 class=\"popover-title popover-header\" *ngIf=\"title\">{{ title }}</h3>\n<div class=\"popover-content popover-body\">\n <ng-content></ng-content>\n</div>\n",
|
83 | styles: ["\n :host.bs3.popover-top {\n margin-bottom: 10px;\n }\n :host.bs3.popover.top>.arrow {\n margin-left: -2px;\n }\n :host.bs3.popover.top {\n margin-bottom: 10px;\n }\n :host.popover.bottom>.arrow {\n margin-left: -4px;\n }\n :host.bs3.bs-popover-left {\n margin-right: .5rem;\n }\n :host.bs3.bs-popover-right .arrow, :host.bs3.bs-popover-left .arrow{\n margin: .3rem 0;\n }\n "]
|
84 | },] }
|
85 | ];
|
86 | PopoverContainerComponent.ctorParameters = function () { return [
|
87 | { type: PopoverConfig }
|
88 | ]; };
|
89 | PopoverContainerComponent.propDecorators = {
|
90 | placement: [{ type: i0.Input }],
|
91 | title: [{ type: i0.Input }]
|
92 | };
|
93 |
|
94 | var id = 0;
|
95 | |
96 |
|
97 |
|
98 | var PopoverDirective = (function () {
|
99 | function PopoverDirective(_config, _elementRef, _renderer, _viewContainerRef, cis, _positionService) {
|
100 | this._elementRef = _elementRef;
|
101 | this._renderer = _renderer;
|
102 | this._positionService = _positionService;
|
103 |
|
104 | this.popoverId = id++;
|
105 |
|
106 | this.adaptivePosition = true;
|
107 | |
108 |
|
109 |
|
110 | this.placement = 'top';
|
111 | |
112 |
|
113 |
|
114 | this.outsideClick = false;
|
115 | |
116 |
|
117 |
|
118 |
|
119 | this.triggers = 'click';
|
120 | |
121 |
|
122 |
|
123 | this.containerClass = '';
|
124 | |
125 |
|
126 |
|
127 | this.delay = 0;
|
128 | this._isInited = false;
|
129 | this._popover = cis
|
130 | .createLoader(_elementRef, _viewContainerRef, _renderer)
|
131 | .provide({ provide: PopoverConfig, useValue: _config });
|
132 | Object.assign(this, _config);
|
133 | this.onShown = this._popover.onShown;
|
134 | this.onHidden = this._popover.onHidden;
|
135 |
|
136 | if (typeof window !== 'undefined') {
|
137 | _elementRef.nativeElement.addEventListener('click', function () {
|
138 | try {
|
139 | _elementRef.nativeElement.focus();
|
140 | }
|
141 | catch (err) {
|
142 | return;
|
143 | }
|
144 | });
|
145 | }
|
146 | }
|
147 | Object.defineProperty(PopoverDirective.prototype, "isOpen", {
|
148 | |
149 |
|
150 |
|
151 | get: function () {
|
152 | return this._popover.isShown;
|
153 | },
|
154 | set: function (value) {
|
155 | if (value) {
|
156 | this.show();
|
157 | }
|
158 | else {
|
159 | this.hide();
|
160 | }
|
161 | },
|
162 | enumerable: false,
|
163 | configurable: true
|
164 | });
|
165 | |
166 |
|
167 |
|
168 |
|
169 | PopoverDirective.prototype.setAriaDescribedBy = function () {
|
170 | this._ariaDescribedby = this.isOpen ? "ngx-popover-" + this.popoverId : void 0;
|
171 | if (this._ariaDescribedby) {
|
172 | if (this._popover.instance) {
|
173 | this._popover.instance.popoverId = this._ariaDescribedby;
|
174 | }
|
175 | this._renderer.setAttribute(this._elementRef.nativeElement, 'aria-describedby', this._ariaDescribedby);
|
176 | }
|
177 | else {
|
178 | this._renderer.removeAttribute(this._elementRef.nativeElement, 'aria-describedby');
|
179 | }
|
180 | };
|
181 | |
182 |
|
183 |
|
184 |
|
185 | PopoverDirective.prototype.show = function () {
|
186 | var _this = this;
|
187 | if (this._popover.isShown || !this.popover || this._delayTimeoutId) {
|
188 | return;
|
189 | }
|
190 | this._positionService.setOptions({
|
191 | modifiers: {
|
192 | flip: {
|
193 | enabled: this.adaptivePosition
|
194 | },
|
195 | preventOverflow: {
|
196 | enabled: this.adaptivePosition
|
197 | }
|
198 | }
|
199 | });
|
200 | var showPopover = function () {
|
201 | if (_this._delayTimeoutId) {
|
202 | _this._delayTimeoutId = undefined;
|
203 | }
|
204 | _this._popover
|
205 | .attach(PopoverContainerComponent)
|
206 | .to(_this.container)
|
207 | .position({ attachment: _this.placement })
|
208 | .show({
|
209 | content: _this.popover,
|
210 | context: _this.popoverContext,
|
211 | placement: _this.placement,
|
212 | title: _this.popoverTitle,
|
213 | containerClass: _this.containerClass
|
214 | });
|
215 | if (!_this.adaptivePosition && _this._popover._componentRef) {
|
216 | _this._positionService.calcPosition();
|
217 | _this._positionService.deletePositionElement(_this._popover._componentRef.location);
|
218 | }
|
219 | _this.isOpen = true;
|
220 | _this.setAriaDescribedBy();
|
221 | };
|
222 | var cancelDelayedTooltipShowing = function () {
|
223 | if (_this._popoverCancelShowFn) {
|
224 | _this._popoverCancelShowFn();
|
225 | }
|
226 | };
|
227 | if (this.delay) {
|
228 | var _timer_1 = rxjs.timer(this.delay).subscribe(function () {
|
229 | showPopover();
|
230 | cancelDelayedTooltipShowing();
|
231 | });
|
232 | if (this.triggers) {
|
233 | utils.parseTriggers(this.triggers)
|
234 | .forEach(function (trigger) {
|
235 | if (!trigger.close) {
|
236 | return;
|
237 | }
|
238 | _this._popoverCancelShowFn = _this._renderer.listen(_this._elementRef.nativeElement, trigger.close, function () {
|
239 | _timer_1.unsubscribe();
|
240 | cancelDelayedTooltipShowing();
|
241 | });
|
242 | });
|
243 | }
|
244 | }
|
245 | else {
|
246 | showPopover();
|
247 | }
|
248 | };
|
249 | |
250 |
|
251 |
|
252 |
|
253 | PopoverDirective.prototype.hide = function () {
|
254 | if (this._delayTimeoutId) {
|
255 | clearTimeout(this._delayTimeoutId);
|
256 | this._delayTimeoutId = undefined;
|
257 | }
|
258 | if (this.isOpen) {
|
259 | this._popover.hide();
|
260 | this.setAriaDescribedBy();
|
261 | this.isOpen = false;
|
262 | }
|
263 | };
|
264 | |
265 |
|
266 |
|
267 |
|
268 | PopoverDirective.prototype.toggle = function () {
|
269 | if (this.isOpen) {
|
270 | return this.hide();
|
271 | }
|
272 | this.show();
|
273 | };
|
274 | PopoverDirective.prototype.ngOnInit = function () {
|
275 | var _this = this;
|
276 |
|
277 |
|
278 |
|
279 | if (this._isInited) {
|
280 | return;
|
281 | }
|
282 | this._isInited = true;
|
283 | this._popover.listen({
|
284 | triggers: this.triggers,
|
285 | outsideClick: this.outsideClick,
|
286 | show: function () { return _this.show(); },
|
287 | hide: function () { return _this.hide(); }
|
288 | });
|
289 | };
|
290 | PopoverDirective.prototype.ngOnDestroy = function () {
|
291 | this._popover.dispose();
|
292 | };
|
293 | return PopoverDirective;
|
294 | }());
|
295 | PopoverDirective.decorators = [
|
296 | { type: i0.Directive, args: [{ selector: '[popover]', exportAs: 'bs-popover' },] }
|
297 | ];
|
298 | PopoverDirective.ctorParameters = function () { return [
|
299 | { type: PopoverConfig },
|
300 | { type: i0.ElementRef },
|
301 | { type: i0.Renderer2 },
|
302 | { type: i0.ViewContainerRef },
|
303 | { type: componentLoader.ComponentLoaderFactory },
|
304 | { type: positioning.PositioningService }
|
305 | ]; };
|
306 | PopoverDirective.propDecorators = {
|
307 | adaptivePosition: [{ type: i0.Input }],
|
308 | popover: [{ type: i0.Input }],
|
309 | popoverContext: [{ type: i0.Input }],
|
310 | popoverTitle: [{ type: i0.Input }],
|
311 | placement: [{ type: i0.Input }],
|
312 | outsideClick: [{ type: i0.Input }],
|
313 | triggers: [{ type: i0.Input }],
|
314 | container: [{ type: i0.Input }],
|
315 | containerClass: [{ type: i0.Input }],
|
316 | isOpen: [{ type: i0.Input }],
|
317 | delay: [{ type: i0.Input }],
|
318 | onShown: [{ type: i0.Output }],
|
319 | onHidden: [{ type: i0.Output }]
|
320 | };
|
321 |
|
322 | var PopoverModule = (function () {
|
323 | function PopoverModule() {
|
324 | }
|
325 | PopoverModule.forRoot = function () {
|
326 | return {
|
327 | ngModule: PopoverModule,
|
328 | providers: [componentLoader.ComponentLoaderFactory, positioning.PositioningService]
|
329 | };
|
330 | };
|
331 | return PopoverModule;
|
332 | }());
|
333 | PopoverModule.decorators = [
|
334 | { type: i0.NgModule, args: [{
|
335 | imports: [common.CommonModule],
|
336 | declarations: [PopoverDirective, PopoverContainerComponent],
|
337 | exports: [PopoverDirective],
|
338 | entryComponents: [PopoverContainerComponent]
|
339 | },] }
|
340 | ];
|
341 |
|
342 | |
343 |
|
344 |
|
345 |
|
346 | exports.PopoverConfig = PopoverConfig;
|
347 | exports.PopoverContainerComponent = PopoverContainerComponent;
|
348 | exports.PopoverDirective = PopoverDirective;
|
349 | exports.PopoverModule = PopoverModule;
|
350 |
|
351 | Object.defineProperty(exports, '__esModule', { value: true });
|
352 |
|
353 | })));
|
354 |
|