ngx-bootstrap
Version:
Angular Bootstrap
348 lines (341 loc) • 11.5 kB
JavaScript
import { ɵɵdefineInjectable, Injectable, Component, ChangeDetectionStrategy, Input, Directive, ElementRef, Renderer2, ViewContainerRef, Output, NgModule } from '@angular/core';
import { ComponentLoaderFactory } from 'ngx-bootstrap/component-loader';
import { getBsVer, parseTriggers } from 'ngx-bootstrap/utils';
import { PlacementForBs5, checkMargins, PositioningService } from 'ngx-bootstrap/positioning';
import { timer } from 'rxjs';
import { CommonModule } from '@angular/common';
/**
* Configuration service for the Popover directive.
* You can inject this service, typically in your root component, and customize
* the values of its properties in order to provide default values for all the
* popovers used in the application.
*/
class PopoverConfig {
constructor() {
/** sets disable adaptive position */
this.adaptivePosition = true;
/**
* Placement of a popover. Accepts: "top", "bottom", "left", "right", "auto"
*/
this.placement = 'top';
/**
* Specifies events that should trigger. Supports a space separated list of
* event names.
*/
this.triggers = 'click';
this.outsideClick = false;
/** delay before showing the tooltip */
this.delay = 0;
}
}
PopoverConfig.ɵprov = ɵɵdefineInjectable({ factory: function PopoverConfig_Factory() { return new PopoverConfig(); }, token: PopoverConfig, providedIn: "root" });
PopoverConfig.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
class PopoverContainerComponent {
constructor(config) {
this._placement = 'top';
Object.assign(this, config);
}
set placement(value) {
if (!this._bsVersions.isBs5) {
this._placement = value;
}
else {
this._placement = PlacementForBs5[value];
}
}
;
get _bsVersions() {
return getBsVer();
}
checkMarginNecessity() {
return checkMargins(this._placement);
}
}
PopoverContainerComponent.decorators = [
{ type: Component, args: [{
selector: 'popover-container',
changeDetection: ChangeDetectionStrategy.OnPush,
// eslint-disable-next-line @angular-eslint/no-host-metadata-property
host: {
'[attr.id]': 'popoverId',
'[class]': '"popover in popover-" + _placement + " " + "bs-popover-" + _placement + " " + _placement + " " + containerClass + checkMarginNecessity()',
'[class.show]': '!_bsVersions.isBs3',
'[class.bs3]': '_bsVersions.isBs3',
role: 'tooltip',
style: 'display:block;'
},
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",
styles: [`
:host.bs3.popover-top {
margin-bottom: 10px;
}
:host.bs3.popover.top>.arrow {
margin-left: -2px;
}
:host.bs3.popover.top {
margin-bottom: 10px;
}
:host.popover.bottom>.arrow {
margin-left: -4px;
}
:host.bs3.bs-popover-left {
margin-right: .5rem;
}
:host.bs3.bs-popover-right .arrow, :host.bs3.bs-popover-left .arrow{
margin: .3rem 0;
}
`]
},] }
];
PopoverContainerComponent.ctorParameters = () => [
{ type: PopoverConfig }
];
PopoverContainerComponent.propDecorators = {
placement: [{ type: Input }],
title: [{ type: Input }]
};
let id = 0;
/**
* A lightweight, extensible directive for fancy popover creation.
*/
class PopoverDirective {
constructor(_config, _elementRef, _renderer, _viewContainerRef, cis, _positionService) {
this._elementRef = _elementRef;
this._renderer = _renderer;
this._positionService = _positionService;
/** unique id popover - use for aria-describedby */
this.popoverId = id++;
/** sets disable adaptive position */
this.adaptivePosition = true;
/**
* Placement of a popover. Accepts: "top", "bottom", "left", "right"
*/
this.placement = 'top';
/**
* Close popover on outside click
*/
this.outsideClick = false;
/**
* Specifies events that should trigger. Supports a space separated list of
* event names.
*/
this.triggers = 'click';
/**
* Css class for popover container
*/
this.containerClass = '';
/**
* Delay before showing the tooltip
*/
this.delay = 0;
this._isInited = false;
this._popover = cis
.createLoader(_elementRef, _viewContainerRef, _renderer)
.provide({ provide: PopoverConfig, useValue: _config });
Object.assign(this, _config);
this.onShown = this._popover.onShown;
this.onHidden = this._popover.onHidden;
// fix: no focus on button on Mac OS #1795
if (typeof window !== 'undefined') {
_elementRef.nativeElement.addEventListener('click', function () {
try {
_elementRef.nativeElement.focus();
}
catch (err) {
return;
}
});
}
}
/**
* Returns whether or not the popover is currently being shown
*/
get isOpen() {
return this._popover.isShown;
}
set isOpen(value) {
if (value) {
this.show();
}
else {
this.hide();
}
}
/**
* Set attribute aria-describedBy for element directive and
* set id for the popover
*/
setAriaDescribedBy() {
this._ariaDescribedby = this.isOpen ? `ngx-popover-${this.popoverId}` : void 0;
if (this._ariaDescribedby) {
if (this._popover.instance) {
this._popover.instance.popoverId = this._ariaDescribedby;
}
this._renderer.setAttribute(this._elementRef.nativeElement, 'aria-describedby', this._ariaDescribedby);
}
else {
this._renderer.removeAttribute(this._elementRef.nativeElement, 'aria-describedby');
}
}
/**
* Opens an element’s popover. This is considered a “manual” triggering of
* the popover.
*/
show() {
if (this._popover.isShown || !this.popover || this._delayTimeoutId) {
return;
}
this._positionService.setOptions({
modifiers: {
flip: {
enabled: this.adaptivePosition
},
preventOverflow: {
enabled: this.adaptivePosition
}
}
});
const showPopover = () => {
if (this._delayTimeoutId) {
this._delayTimeoutId = undefined;
}
this._popover
.attach(PopoverContainerComponent)
.to(this.container)
.position({ attachment: this.placement })
.show({
content: this.popover,
context: this.popoverContext,
placement: this.placement,
title: this.popoverTitle,
containerClass: this.containerClass
});
if (!this.adaptivePosition && this._popover._componentRef) {
this._positionService.calcPosition();
this._positionService.deletePositionElement(this._popover._componentRef.location);
}
this.isOpen = true;
this.setAriaDescribedBy();
};
const cancelDelayedTooltipShowing = () => {
if (this._popoverCancelShowFn) {
this._popoverCancelShowFn();
}
};
if (this.delay) {
const _timer = timer(this.delay).subscribe(() => {
showPopover();
cancelDelayedTooltipShowing();
});
if (this.triggers) {
parseTriggers(this.triggers)
.forEach((trigger) => {
if (!trigger.close) {
return;
}
this._popoverCancelShowFn = this._renderer.listen(this._elementRef.nativeElement, trigger.close, () => {
_timer.unsubscribe();
cancelDelayedTooltipShowing();
});
});
}
}
else {
showPopover();
}
}
/**
* Closes an element’s popover. This is considered a “manual” triggering of
* the popover.
*/
hide() {
if (this._delayTimeoutId) {
clearTimeout(this._delayTimeoutId);
this._delayTimeoutId = undefined;
}
if (this.isOpen) {
this._popover.hide();
this.setAriaDescribedBy();
this.isOpen = false;
}
}
/**
* Toggles an element’s popover. This is considered a “manual” triggering of
* the popover.
*/
toggle() {
if (this.isOpen) {
return this.hide();
}
this.show();
}
ngOnInit() {
// fix: seems there are an issue with `routerLinkActive`
// which result in duplicated call ngOnInit without call to ngOnDestroy
// read more: https://github.com/valor-software/ngx-bootstrap/issues/1885
if (this._isInited) {
return;
}
this._isInited = true;
this._popover.listen({
triggers: this.triggers,
outsideClick: this.outsideClick,
show: () => this.show(),
hide: () => this.hide()
});
}
ngOnDestroy() {
this._popover.dispose();
}
}
PopoverDirective.decorators = [
{ type: Directive, args: [{ selector: '[popover]', exportAs: 'bs-popover' },] }
];
PopoverDirective.ctorParameters = () => [
{ type: PopoverConfig },
{ type: ElementRef },
{ type: Renderer2 },
{ type: ViewContainerRef },
{ type: ComponentLoaderFactory },
{ type: PositioningService }
];
PopoverDirective.propDecorators = {
adaptivePosition: [{ type: Input }],
popover: [{ type: Input }],
popoverContext: [{ type: Input }],
popoverTitle: [{ type: Input }],
placement: [{ type: Input }],
outsideClick: [{ type: Input }],
triggers: [{ type: Input }],
container: [{ type: Input }],
containerClass: [{ type: Input }],
isOpen: [{ type: Input }],
delay: [{ type: Input }],
onShown: [{ type: Output }],
onHidden: [{ type: Output }]
};
class PopoverModule {
static forRoot() {
return {
ngModule: PopoverModule,
providers: [ComponentLoaderFactory, PositioningService]
};
}
}
PopoverModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule],
declarations: [PopoverDirective, PopoverContainerComponent],
exports: [PopoverDirective],
entryComponents: [PopoverContainerComponent]
},] }
];
/**
* Generated bundle index. Do not edit.
*/
export { PopoverConfig, PopoverContainerComponent, PopoverDirective, PopoverModule };
//# sourceMappingURL=ngx-bootstrap-popover.js.map