1 | import { ɵɵdefineInjectable, Injectable, Component, ChangeDetectionStrategy, Input, Directive, ElementRef, Renderer2, ViewContainerRef, Output, NgModule } from '@angular/core';
|
2 | import { ComponentLoaderFactory } from 'ngx-bootstrap/component-loader';
|
3 | import { getBsVer, parseTriggers } from 'ngx-bootstrap/utils';
|
4 | import { PlacementForBs5, checkMargins, PositioningService } from 'ngx-bootstrap/positioning';
|
5 | import { timer } from 'rxjs';
|
6 | import { CommonModule } from '@angular/common';
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 | import * as ɵngcc0 from '@angular/core';
|
15 | import * as ɵngcc1 from '@angular/common';
|
16 | import * as ɵngcc2 from 'ngx-bootstrap/component-loader';
|
17 | import * as ɵngcc3 from 'ngx-bootstrap/positioning';
|
18 |
|
19 | function PopoverContainerComponent_h3_1_Template(rf, ctx) { if (rf & 1) {
|
20 | ɵngcc0.ɵɵelementStart(0, "h3", 3);
|
21 | ɵngcc0.ɵɵtext(1);
|
22 | ɵngcc0.ɵɵelementEnd();
|
23 | } if (rf & 2) {
|
24 | const ctx_r0 = ɵngcc0.ɵɵnextContext();
|
25 | ɵngcc0.ɵɵadvance(1);
|
26 | ɵngcc0.ɵɵtextInterpolate(ctx_r0.title);
|
27 | } }
|
28 | const _c0 = ["*"];
|
29 | class PopoverConfig {
|
30 | constructor() {
|
31 |
|
32 | this.adaptivePosition = true;
|
33 | |
34 |
|
35 |
|
36 | this.placement = 'top';
|
37 | |
38 |
|
39 |
|
40 |
|
41 | this.triggers = 'click';
|
42 | this.outsideClick = false;
|
43 |
|
44 | this.delay = 0;
|
45 | }
|
46 | }
|
47 | PopoverConfig.ɵfac = function PopoverConfig_Factory(t) { return new (t || PopoverConfig)(); };
|
48 | PopoverConfig.ɵprov = ɵɵdefineInjectable({ factory: function PopoverConfig_Factory() { return new PopoverConfig(); }, token: PopoverConfig, providedIn: "root" });
|
49 | (function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(PopoverConfig, [{
|
50 | type: Injectable,
|
51 | args: [{
|
52 | providedIn: 'root'
|
53 | }]
|
54 | }], function () { return []; }, null); })();
|
55 |
|
56 | class PopoverContainerComponent {
|
57 | constructor(config) {
|
58 | this._placement = 'top';
|
59 | Object.assign(this, config);
|
60 | }
|
61 | set placement(value) {
|
62 | if (!this._bsVersions.isBs5) {
|
63 | this._placement = value;
|
64 | }
|
65 | else {
|
66 | this._placement = PlacementForBs5[value];
|
67 | }
|
68 | }
|
69 | ;
|
70 | get _bsVersions() {
|
71 | return getBsVer();
|
72 | }
|
73 | checkMarginNecessity() {
|
74 | return checkMargins(this._placement);
|
75 | }
|
76 | }
|
77 | PopoverContainerComponent.ɵfac = function PopoverContainerComponent_Factory(t) { return new (t || PopoverContainerComponent)(ɵngcc0.ɵɵdirectiveInject(PopoverConfig)); };
|
78 | PopoverContainerComponent.ɵcmp = ɵngcc0.ɵɵdefineComponent({ type: PopoverContainerComponent, selectors: [["popover-container"]], hostAttrs: ["role", "tooltip", 2, "display", "block"], hostVars: 7, hostBindings: function PopoverContainerComponent_HostBindings(rf, ctx) { if (rf & 2) {
|
79 | ɵngcc0.ɵɵattribute("id", ctx.popoverId);
|
80 | ɵngcc0.ɵɵclassMap("popover in popover-" + ctx._placement + " " + "bs-popover-" + ctx._placement + " " + ctx._placement + " " + ctx.containerClass + ctx.checkMarginNecessity());
|
81 | ɵngcc0.ɵɵclassProp("show", !ctx._bsVersions.isBs3)("bs3", ctx._bsVersions.isBs3);
|
82 | } }, inputs: { placement: "placement", title: "title" }, ngContentSelectors: _c0, decls: 4, vars: 1, consts: [[1, "popover-arrow", "arrow"], ["class", "popover-title popover-header", 4, "ngIf"], [1, "popover-content", "popover-body"], [1, "popover-title", "popover-header"]], template: function PopoverContainerComponent_Template(rf, ctx) { if (rf & 1) {
|
83 | ɵngcc0.ɵɵprojectionDef();
|
84 | ɵngcc0.ɵɵelement(0, "div", 0);
|
85 | ɵngcc0.ɵɵtemplate(1, PopoverContainerComponent_h3_1_Template, 2, 1, "h3", 1);
|
86 | ɵngcc0.ɵɵelementStart(2, "div", 2);
|
87 | ɵngcc0.ɵɵprojection(3);
|
88 | ɵngcc0.ɵɵelementEnd();
|
89 | } if (rf & 2) {
|
90 | ɵngcc0.ɵɵadvance(1);
|
91 | ɵngcc0.ɵɵproperty("ngIf", ctx.title);
|
92 | } }, directives: [ɵngcc1.NgIf], styles: [".bs3.popover-top[_nghost-%COMP%] {\n margin-bottom: 10px;\n }\n .bs3.popover.top[_nghost-%COMP%] > .arrow[_ngcontent-%COMP%] {\n margin-left: -2px;\n }\n .bs3.popover.top[_nghost-%COMP%] {\n margin-bottom: 10px;\n }\n .popover.bottom[_nghost-%COMP%] > .arrow[_ngcontent-%COMP%] {\n margin-left: -4px;\n }\n .bs3.bs-popover-left[_nghost-%COMP%] {\n margin-right: .5rem;\n }\n .bs3.bs-popover-right[_nghost-%COMP%] .arrow[_ngcontent-%COMP%], .bs3.bs-popover-left[_nghost-%COMP%] .arrow[_ngcontent-%COMP%]{\n margin: .3rem 0;\n }"], changeDetection: 0 });
|
93 | PopoverContainerComponent.ctorParameters = () => [
|
94 | { type: PopoverConfig }
|
95 | ];
|
96 | PopoverContainerComponent.propDecorators = {
|
97 | placement: [{ type: Input }],
|
98 | title: [{ type: Input }]
|
99 | };
|
100 | (function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(PopoverContainerComponent, [{
|
101 | type: Component,
|
102 | args: [{
|
103 | selector: 'popover-container',
|
104 | changeDetection: ChangeDetectionStrategy.OnPush,
|
105 |
|
106 | host: {
|
107 | '[attr.id]': 'popoverId',
|
108 | '[class]': '"popover in popover-" + _placement + " " + "bs-popover-" + _placement + " " + _placement + " " + containerClass + checkMarginNecessity()',
|
109 | '[class.show]': '!_bsVersions.isBs3',
|
110 | '[class.bs3]': '_bsVersions.isBs3',
|
111 | role: 'tooltip',
|
112 | style: 'display:block;'
|
113 | },
|
114 | 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",
|
115 | styles: [`
|
116 | :host.bs3.popover-top {
|
117 | margin-bottom: 10px;
|
118 | }
|
119 | :host.bs3.popover.top>.arrow {
|
120 | margin-left: -2px;
|
121 | }
|
122 | :host.bs3.popover.top {
|
123 | margin-bottom: 10px;
|
124 | }
|
125 | :host.popover.bottom>.arrow {
|
126 | margin-left: -4px;
|
127 | }
|
128 | :host.bs3.bs-popover-left {
|
129 | margin-right: .5rem;
|
130 | }
|
131 | :host.bs3.bs-popover-right .arrow, :host.bs3.bs-popover-left .arrow{
|
132 | margin: .3rem 0;
|
133 | }
|
134 | `]
|
135 | }]
|
136 | }], function () { return [{ type: PopoverConfig }]; }, { placement: [{
|
137 | type: Input
|
138 | }], title: [{
|
139 | type: Input
|
140 | }] }); })();
|
141 |
|
142 | let id = 0;
|
143 |
|
144 |
|
145 |
|
146 | class PopoverDirective {
|
147 | constructor(_config, _elementRef, _renderer, _viewContainerRef, cis, _positionService) {
|
148 | this._elementRef = _elementRef;
|
149 | this._renderer = _renderer;
|
150 | this._positionService = _positionService;
|
151 |
|
152 | this.popoverId = id++;
|
153 |
|
154 | this.adaptivePosition = true;
|
155 | |
156 |
|
157 |
|
158 | this.placement = 'top';
|
159 | |
160 |
|
161 |
|
162 | this.outsideClick = false;
|
163 | |
164 |
|
165 |
|
166 |
|
167 | this.triggers = 'click';
|
168 | |
169 |
|
170 |
|
171 | this.containerClass = '';
|
172 | |
173 |
|
174 |
|
175 | this.delay = 0;
|
176 | this._isInited = false;
|
177 | this._popover = cis
|
178 | .createLoader(_elementRef, _viewContainerRef, _renderer)
|
179 | .provide({ provide: PopoverConfig, useValue: _config });
|
180 | Object.assign(this, _config);
|
181 | this.onShown = this._popover.onShown;
|
182 | this.onHidden = this._popover.onHidden;
|
183 |
|
184 | if (typeof window !== 'undefined') {
|
185 | _elementRef.nativeElement.addEventListener('click', function () {
|
186 | try {
|
187 | _elementRef.nativeElement.focus();
|
188 | }
|
189 | catch (err) {
|
190 | return;
|
191 | }
|
192 | });
|
193 | }
|
194 | }
|
195 | |
196 |
|
197 |
|
198 | get isOpen() {
|
199 | return this._popover.isShown;
|
200 | }
|
201 | set isOpen(value) {
|
202 | if (value) {
|
203 | this.show();
|
204 | }
|
205 | else {
|
206 | this.hide();
|
207 | }
|
208 | }
|
209 | |
210 |
|
211 |
|
212 |
|
213 | setAriaDescribedBy() {
|
214 | this._ariaDescribedby = this.isOpen ? `ngx-popover-${this.popoverId}` : void 0;
|
215 | if (this._ariaDescribedby) {
|
216 | if (this._popover.instance) {
|
217 | this._popover.instance.popoverId = this._ariaDescribedby;
|
218 | }
|
219 | this._renderer.setAttribute(this._elementRef.nativeElement, 'aria-describedby', this._ariaDescribedby);
|
220 | }
|
221 | else {
|
222 | this._renderer.removeAttribute(this._elementRef.nativeElement, 'aria-describedby');
|
223 | }
|
224 | }
|
225 | |
226 |
|
227 |
|
228 |
|
229 | show() {
|
230 | if (this._popover.isShown || !this.popover || this._delayTimeoutId) {
|
231 | return;
|
232 | }
|
233 | this._positionService.setOptions({
|
234 | modifiers: {
|
235 | flip: {
|
236 | enabled: this.adaptivePosition
|
237 | },
|
238 | preventOverflow: {
|
239 | enabled: this.adaptivePosition
|
240 | }
|
241 | }
|
242 | });
|
243 | const showPopover = () => {
|
244 | if (this._delayTimeoutId) {
|
245 | this._delayTimeoutId = undefined;
|
246 | }
|
247 | this._popover
|
248 | .attach(PopoverContainerComponent)
|
249 | .to(this.container)
|
250 | .position({ attachment: this.placement })
|
251 | .show({
|
252 | content: this.popover,
|
253 | context: this.popoverContext,
|
254 | placement: this.placement,
|
255 | title: this.popoverTitle,
|
256 | containerClass: this.containerClass
|
257 | });
|
258 | if (!this.adaptivePosition && this._popover._componentRef) {
|
259 | this._positionService.calcPosition();
|
260 | this._positionService.deletePositionElement(this._popover._componentRef.location);
|
261 | }
|
262 | this.isOpen = true;
|
263 | this.setAriaDescribedBy();
|
264 | };
|
265 | const cancelDelayedTooltipShowing = () => {
|
266 | if (this._popoverCancelShowFn) {
|
267 | this._popoverCancelShowFn();
|
268 | }
|
269 | };
|
270 | if (this.delay) {
|
271 | const _timer = timer(this.delay).subscribe(() => {
|
272 | showPopover();
|
273 | cancelDelayedTooltipShowing();
|
274 | });
|
275 | if (this.triggers) {
|
276 | parseTriggers(this.triggers)
|
277 | .forEach((trigger) => {
|
278 | if (!trigger.close) {
|
279 | return;
|
280 | }
|
281 | this._popoverCancelShowFn = this._renderer.listen(this._elementRef.nativeElement, trigger.close, () => {
|
282 | _timer.unsubscribe();
|
283 | cancelDelayedTooltipShowing();
|
284 | });
|
285 | });
|
286 | }
|
287 | }
|
288 | else {
|
289 | showPopover();
|
290 | }
|
291 | }
|
292 | |
293 |
|
294 |
|
295 |
|
296 | hide() {
|
297 | if (this._delayTimeoutId) {
|
298 | clearTimeout(this._delayTimeoutId);
|
299 | this._delayTimeoutId = undefined;
|
300 | }
|
301 | if (this.isOpen) {
|
302 | this._popover.hide();
|
303 | this.setAriaDescribedBy();
|
304 | this.isOpen = false;
|
305 | }
|
306 | }
|
307 | |
308 |
|
309 |
|
310 |
|
311 | toggle() {
|
312 | if (this.isOpen) {
|
313 | return this.hide();
|
314 | }
|
315 | this.show();
|
316 | }
|
317 | ngOnInit() {
|
318 |
|
319 |
|
320 |
|
321 | if (this._isInited) {
|
322 | return;
|
323 | }
|
324 | this._isInited = true;
|
325 | this._popover.listen({
|
326 | triggers: this.triggers,
|
327 | outsideClick: this.outsideClick,
|
328 | show: () => this.show(),
|
329 | hide: () => this.hide()
|
330 | });
|
331 | }
|
332 | ngOnDestroy() {
|
333 | this._popover.dispose();
|
334 | }
|
335 | }
|
336 | PopoverDirective.ɵfac = function PopoverDirective_Factory(t) { return new (t || PopoverDirective)(ɵngcc0.ɵɵdirectiveInject(PopoverConfig), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ElementRef), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.Renderer2), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ViewContainerRef), ɵngcc0.ɵɵdirectiveInject(ɵngcc2.ComponentLoaderFactory), ɵngcc0.ɵɵdirectiveInject(ɵngcc3.PositioningService)); };
|
337 | PopoverDirective.ɵdir = ɵngcc0.ɵɵdefineDirective({ type: PopoverDirective, selectors: [["", "popover", ""]], inputs: { adaptivePosition: "adaptivePosition", placement: "placement", outsideClick: "outsideClick", triggers: "triggers", containerClass: "containerClass", delay: "delay", isOpen: "isOpen", popover: "popover", popoverContext: "popoverContext", popoverTitle: "popoverTitle", container: "container" }, outputs: { onShown: "onShown", onHidden: "onHidden" }, exportAs: ["bs-popover"] });
|
338 | PopoverDirective.ctorParameters = () => [
|
339 | { type: PopoverConfig },
|
340 | { type: ElementRef },
|
341 | { type: Renderer2 },
|
342 | { type: ViewContainerRef },
|
343 | { type: ComponentLoaderFactory },
|
344 | { type: PositioningService }
|
345 | ];
|
346 | PopoverDirective.propDecorators = {
|
347 | adaptivePosition: [{ type: Input }],
|
348 | popover: [{ type: Input }],
|
349 | popoverContext: [{ type: Input }],
|
350 | popoverTitle: [{ type: Input }],
|
351 | placement: [{ type: Input }],
|
352 | outsideClick: [{ type: Input }],
|
353 | triggers: [{ type: Input }],
|
354 | container: [{ type: Input }],
|
355 | containerClass: [{ type: Input }],
|
356 | isOpen: [{ type: Input }],
|
357 | delay: [{ type: Input }],
|
358 | onShown: [{ type: Output }],
|
359 | onHidden: [{ type: Output }]
|
360 | };
|
361 | (function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(PopoverDirective, [{
|
362 | type: Directive,
|
363 | args: [{ selector: '[popover]', exportAs: 'bs-popover' }]
|
364 | }], function () { return [{ type: PopoverConfig }, { type: ɵngcc0.ElementRef }, { type: ɵngcc0.Renderer2 }, { type: ɵngcc0.ViewContainerRef }, { type: ɵngcc2.ComponentLoaderFactory }, { type: ɵngcc3.PositioningService }]; }, { adaptivePosition: [{
|
365 | type: Input
|
366 | }], placement: [{
|
367 | type: Input
|
368 | }], outsideClick: [{
|
369 | type: Input
|
370 | }], triggers: [{
|
371 | type: Input
|
372 | }], containerClass: [{
|
373 | type: Input
|
374 | }], delay: [{
|
375 | type: Input
|
376 | }], onShown: [{
|
377 | type: Output
|
378 | }], onHidden: [{
|
379 | type: Output
|
380 | }], isOpen: [{
|
381 | type: Input
|
382 | }], popover: [{
|
383 | type: Input
|
384 | }], popoverContext: [{
|
385 | type: Input
|
386 | }], popoverTitle: [{
|
387 | type: Input
|
388 | }], container: [{
|
389 | type: Input
|
390 | }] }); })();
|
391 |
|
392 | class PopoverModule {
|
393 | static forRoot() {
|
394 | return {
|
395 | ngModule: PopoverModule,
|
396 | providers: [ComponentLoaderFactory, PositioningService]
|
397 | };
|
398 | }
|
399 | }
|
400 | PopoverModule.ɵmod = ɵngcc0.ɵɵdefineNgModule({ type: PopoverModule });
|
401 | PopoverModule.ɵinj = ɵngcc0.ɵɵdefineInjector({ factory: function PopoverModule_Factory(t) { return new (t || PopoverModule)(); }, imports: [[CommonModule]] });
|
402 | (function () { (typeof ngJitMode === "undefined" || ngJitMode) && ɵngcc0.ɵɵsetNgModuleScope(PopoverModule, { declarations: function () { return [PopoverDirective, PopoverContainerComponent]; }, imports: function () { return [CommonModule]; }, exports: function () { return [PopoverDirective]; } }); })();
|
403 | (function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(PopoverModule, [{
|
404 | type: NgModule,
|
405 | args: [{
|
406 | imports: [CommonModule],
|
407 | declarations: [PopoverDirective, PopoverContainerComponent],
|
408 | exports: [PopoverDirective],
|
409 | entryComponents: [PopoverContainerComponent]
|
410 | }]
|
411 | }], null, null); })();
|
412 |
|
413 |
|
414 |
|
415 |
|
416 |
|
417 | export { PopoverConfig, PopoverContainerComponent, PopoverDirective, PopoverModule };
|
418 |
|
419 |
|
\ | No newline at end of file |