ngx-bootstrap-popover.js 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305
  1. import { Injectable, Component, ChangeDetectionStrategy, Input, Directive, ElementRef, Renderer2, ViewContainerRef, Output, NgModule } from '@angular/core';
  2. import { ComponentLoaderFactory } from 'ngx-bootstrap/component-loader';
  3. import { isBs3 } from 'ngx-bootstrap/utils';
  4. import { PositioningService } from 'ngx-bootstrap/positioning';
  5. import { CommonModule } from '@angular/common';
  6. /**
  7. * @fileoverview added by tsickle
  8. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  9. */
  10. /**
  11. * Configuration service for the Popover directive.
  12. * You can inject this service, typically in your root component, and customize
  13. * the values of its properties in order to provide default values for all the
  14. * popovers used in the application.
  15. */
  16. class PopoverConfig {
  17. constructor() {
  18. /**
  19. * sets disable adaptive position
  20. */
  21. this.adaptivePosition = true;
  22. /**
  23. * Placement of a popover. Accepts: "top", "bottom", "left", "right", "auto"
  24. */
  25. this.placement = 'top';
  26. /**
  27. * Specifies events that should trigger. Supports a space separated list of
  28. * event names.
  29. */
  30. this.triggers = 'click';
  31. this.outsideClick = false;
  32. }
  33. }
  34. PopoverConfig.decorators = [
  35. { type: Injectable }
  36. ];
  37. /**
  38. * @fileoverview added by tsickle
  39. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  40. */
  41. class PopoverContainerComponent {
  42. /**
  43. * @param {?} config
  44. */
  45. constructor(config) {
  46. Object.assign(this, config);
  47. }
  48. /**
  49. * @return {?}
  50. */
  51. get isBs3() {
  52. return isBs3();
  53. }
  54. }
  55. PopoverContainerComponent.decorators = [
  56. { type: Component, args: [{
  57. selector: 'popover-container',
  58. changeDetection: ChangeDetectionStrategy.OnPush,
  59. // tslint:disable-next-line
  60. host: {
  61. '[class]': '"popover in popover-" + placement + " " + "bs-popover-" + placement + " " + placement + " " + containerClass',
  62. '[class.show]': '!isBs3',
  63. '[class.bs3]': 'isBs3',
  64. role: 'tooltip',
  65. style: 'display:block;'
  66. },
  67. 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",
  68. styles: [`
  69. :host.bs3.popover-top {
  70. margin-bottom: 10px;
  71. }
  72. :host.bs3.popover.top>.arrow {
  73. margin-left: -2px;
  74. }
  75. :host.bs3.popover.top {
  76. margin-bottom: 10px;
  77. }
  78. :host.popover.bottom>.arrow {
  79. margin-left: -4px;
  80. }
  81. :host.bs3.bs-popover-left {
  82. margin-right: .5rem;
  83. }
  84. :host.bs3.bs-popover-right .arrow, :host.bs3.bs-popover-left .arrow{
  85. margin: .3rem 0;
  86. }
  87. `]
  88. }] }
  89. ];
  90. /** @nocollapse */
  91. PopoverContainerComponent.ctorParameters = () => [
  92. { type: PopoverConfig }
  93. ];
  94. PopoverContainerComponent.propDecorators = {
  95. placement: [{ type: Input }],
  96. title: [{ type: Input }]
  97. };
  98. /**
  99. * @fileoverview added by tsickle
  100. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  101. */
  102. /**
  103. * A lightweight, extensible directive for fancy popover creation.
  104. */
  105. class PopoverDirective {
  106. /**
  107. * @param {?} _config
  108. * @param {?} _elementRef
  109. * @param {?} _renderer
  110. * @param {?} _viewContainerRef
  111. * @param {?} cis
  112. * @param {?} _positionService
  113. */
  114. constructor(_config, _elementRef, _renderer, _viewContainerRef, cis, _positionService) {
  115. this._positionService = _positionService;
  116. /**
  117. * Close popover on outside click
  118. */
  119. this.outsideClick = false;
  120. /**
  121. * Css class for popover container
  122. */
  123. this.containerClass = '';
  124. this._isInited = false;
  125. this._popover = cis
  126. .createLoader(_elementRef, _viewContainerRef, _renderer)
  127. .provide({ provide: PopoverConfig, useValue: _config });
  128. Object.assign(this, _config);
  129. this.onShown = this._popover.onShown;
  130. this.onHidden = this._popover.onHidden;
  131. // fix: no focus on button on Mac OS #1795
  132. if (typeof window !== 'undefined') {
  133. _elementRef.nativeElement.addEventListener('click', (/**
  134. * @return {?}
  135. */
  136. function () {
  137. try {
  138. _elementRef.nativeElement.focus();
  139. }
  140. catch (err) {
  141. return;
  142. }
  143. }));
  144. }
  145. }
  146. /**
  147. * Returns whether or not the popover is currently being shown
  148. * @return {?}
  149. */
  150. get isOpen() {
  151. return this._popover.isShown;
  152. }
  153. /**
  154. * @param {?} value
  155. * @return {?}
  156. */
  157. set isOpen(value) {
  158. if (value) {
  159. this.show();
  160. }
  161. else {
  162. this.hide();
  163. }
  164. }
  165. /**
  166. * Opens an element’s popover. This is considered a “manual” triggering of
  167. * the popover.
  168. * @return {?}
  169. */
  170. show() {
  171. if (this._popover.isShown || !this.popover) {
  172. return;
  173. }
  174. this._positionService.setOptions({
  175. modifiers: {
  176. flip: {
  177. enabled: this.adaptivePosition
  178. },
  179. preventOverflow: {
  180. enabled: this.adaptivePosition
  181. }
  182. }
  183. });
  184. this._popover
  185. .attach(PopoverContainerComponent)
  186. .to(this.container)
  187. .position({ attachment: this.placement })
  188. .show({
  189. content: this.popover,
  190. context: this.popoverContext,
  191. placement: this.placement,
  192. title: this.popoverTitle,
  193. containerClass: this.containerClass
  194. });
  195. if (!this.adaptivePosition) {
  196. this._positionService.calcPosition();
  197. this._positionService.deletePositionElement(this._popover._componentRef.location);
  198. }
  199. this.isOpen = true;
  200. }
  201. /**
  202. * Closes an element’s popover. This is considered a “manual” triggering of
  203. * the popover.
  204. * @return {?}
  205. */
  206. hide() {
  207. if (this.isOpen) {
  208. this._popover.hide();
  209. this.isOpen = false;
  210. }
  211. }
  212. /**
  213. * Toggles an element’s popover. This is considered a “manual” triggering of
  214. * the popover.
  215. * @return {?}
  216. */
  217. toggle() {
  218. if (this.isOpen) {
  219. return this.hide();
  220. }
  221. this.show();
  222. }
  223. /**
  224. * @return {?}
  225. */
  226. ngOnInit() {
  227. // fix: seems there are an issue with `routerLinkActive`
  228. // which result in duplicated call ngOnInit without call to ngOnDestroy
  229. // read more: https://github.com/valor-software/ngx-bootstrap/issues/1885
  230. if (this._isInited) {
  231. return;
  232. }
  233. this._isInited = true;
  234. this._popover.listen({
  235. triggers: this.triggers,
  236. outsideClick: this.outsideClick,
  237. show: (/**
  238. * @return {?}
  239. */
  240. () => this.show())
  241. });
  242. }
  243. /**
  244. * @return {?}
  245. */
  246. ngOnDestroy() {
  247. this._popover.dispose();
  248. }
  249. }
  250. PopoverDirective.decorators = [
  251. { type: Directive, args: [{ selector: '[popover]', exportAs: 'bs-popover' },] }
  252. ];
  253. /** @nocollapse */
  254. PopoverDirective.ctorParameters = () => [
  255. { type: PopoverConfig },
  256. { type: ElementRef },
  257. { type: Renderer2 },
  258. { type: ViewContainerRef },
  259. { type: ComponentLoaderFactory },
  260. { type: PositioningService }
  261. ];
  262. PopoverDirective.propDecorators = {
  263. adaptivePosition: [{ type: Input }],
  264. popover: [{ type: Input }],
  265. popoverContext: [{ type: Input }],
  266. popoverTitle: [{ type: Input }],
  267. placement: [{ type: Input }],
  268. outsideClick: [{ type: Input }],
  269. triggers: [{ type: Input }],
  270. container: [{ type: Input }],
  271. containerClass: [{ type: Input }],
  272. isOpen: [{ type: Input }],
  273. onShown: [{ type: Output }],
  274. onHidden: [{ type: Output }]
  275. };
  276. /**
  277. * @fileoverview added by tsickle
  278. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  279. */
  280. class PopoverModule {
  281. /**
  282. * @return {?}
  283. */
  284. static forRoot() {
  285. return {
  286. ngModule: PopoverModule,
  287. providers: [PopoverConfig, ComponentLoaderFactory, PositioningService]
  288. };
  289. }
  290. }
  291. PopoverModule.decorators = [
  292. { type: NgModule, args: [{
  293. imports: [CommonModule],
  294. declarations: [PopoverDirective, PopoverContainerComponent],
  295. exports: [PopoverDirective],
  296. entryComponents: [PopoverContainerComponent]
  297. },] }
  298. ];
  299. export { PopoverConfig, PopoverContainerComponent, PopoverDirective, PopoverModule };
  300. //# sourceMappingURL=ngx-bootstrap-popover.js.map