ngx-bootstrap
Version:
Native Angular Bootstrap Components
584 lines (576 loc) • 21.3 kB
JavaScript
(function (global, factory) {
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')) :
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) :
(global = 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));
}(this, (function (exports, core, componentLoader, utils, positioning, rxjs, common) { 'use strict';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* 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.
*/
var PopoverConfig = /** @class */ (function () {
function PopoverConfig() {
/**
* 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.decorators = [
{ type: core.Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */ PopoverConfig.ɵprov = core["ɵɵdefineInjectable"]({ factory: function PopoverConfig_Factory() { return new PopoverConfig(); }, token: PopoverConfig, providedIn: "root" });
return PopoverConfig;
}());
if (false) {
/**
* sets disable adaptive position
* @type {?}
*/
PopoverConfig.prototype.adaptivePosition;
/**
* Placement of a popover. Accepts: "top", "bottom", "left", "right", "auto"
* @type {?}
*/
PopoverConfig.prototype.placement;
/**
* Specifies events that should trigger. Supports a space separated list of
* event names.
* @type {?}
*/
PopoverConfig.prototype.triggers;
/** @type {?} */
PopoverConfig.prototype.outsideClick;
/**
* A selector specifying the element the popover should be appended to.
* @type {?}
*/
PopoverConfig.prototype.container;
/**
* delay before showing the tooltip
* @type {?}
*/
PopoverConfig.prototype.delay;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var PopoverContainerComponent = /** @class */ (function () {
function PopoverContainerComponent(config) {
Object.assign(this, config);
}
Object.defineProperty(PopoverContainerComponent.prototype, "isBs3", {
get: /**
* @return {?}
*/
function () {
return utils.isBs3();
},
enumerable: true,
configurable: true
});
PopoverContainerComponent.decorators = [
{ type: core.Component, args: [{
selector: 'popover-container',
changeDetection: core.ChangeDetectionStrategy.OnPush,
// tslint:disable-next-line
host: {
'[attr.id]': 'popoverId',
'[class]': '"popover in popover-" + placement + " " + "bs-popover-" + placement + " " + placement + " " + containerClass',
'[class.show]': '!isBs3',
'[class.bs3]': '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: ["\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 "]
}] }
];
/** @nocollapse */
PopoverContainerComponent.ctorParameters = function () { return [
{ type: PopoverConfig }
]; };
PopoverContainerComponent.propDecorators = {
placement: [{ type: core.Input }],
title: [{ type: core.Input }]
};
return PopoverContainerComponent;
}());
if (false) {
/** @type {?} */
PopoverContainerComponent.prototype.placement;
/** @type {?} */
PopoverContainerComponent.prototype.title;
/** @type {?} */
PopoverContainerComponent.prototype.containerClass;
/** @type {?} */
PopoverContainerComponent.prototype.popoverId;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var id = 0;
/**
* A lightweight, extensible directive for fancy popover creation.
*/
var PopoverDirective = /** @class */ (function () {
function PopoverDirective(_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++;
/**
* Close popover on outside click
*/
this.outsideClick = false;
/**
* Css class for popover container
*/
this.containerClass = '';
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', (/**
* @return {?}
*/
function () {
try {
_elementRef.nativeElement.focus();
}
catch (err) {
return;
}
}));
}
}
Object.defineProperty(PopoverDirective.prototype, "isOpen", {
/**
* Returns whether or not the popover is currently being shown
*/
get: /**
* Returns whether or not the popover is currently being shown
* @return {?}
*/
function () {
return this._popover.isShown;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
if (value) {
this.show();
}
else {
this.hide();
}
},
enumerable: true,
configurable: true
});
/**
* Set attribute aria-describedBy for element directive and
* set id for the popover
*/
/**
* Set attribute aria-describedBy for element directive and
* set id for the popover
* @return {?}
*/
PopoverDirective.prototype.setAriaDescribedBy = /**
* Set attribute aria-describedBy for element directive and
* set id for the popover
* @return {?}
*/
function () {
this._ariaDescribedby = this.isOpen ? "ngx-popover-" + this.popoverId : null;
if (this._ariaDescribedby) {
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.
*/
/**
* Opens an element’s popover. This is considered a “manual” triggering of
* the popover.
* @return {?}
*/
PopoverDirective.prototype.show = /**
* Opens an element’s popover. This is considered a “manual” triggering of
* the popover.
* @return {?}
*/
function () {
var _this = this;
if (this._popover.isShown || !this.popover || this._delayTimeoutId) {
return;
}
this._positionService.setOptions({
modifiers: {
flip: {
enabled: this.adaptivePosition
},
preventOverflow: {
enabled: this.adaptivePosition
}
}
});
/** @type {?} */
var showPopover = (/**
* @return {?}
*/
function () {
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._positionService.calcPosition();
_this._positionService.deletePositionElement(_this._popover._componentRef.location);
}
_this.isOpen = true;
_this.setAriaDescribedBy();
});
/** @type {?} */
var cancelDelayedTooltipShowing = (/**
* @return {?}
*/
function () {
if (_this._popoverCancelShowFn) {
_this._popoverCancelShowFn();
}
});
if (this.delay) {
/** @type {?} */
var _timer_1 = rxjs.timer(this.delay).subscribe((/**
* @return {?}
*/
function () {
showPopover();
cancelDelayedTooltipShowing();
}));
if (this.triggers) {
utils.parseTriggers(this.triggers)
.forEach((/**
* @param {?} trigger
* @return {?}
*/
function (trigger) {
_this._popoverCancelShowFn = _this._renderer.listen(_this._elementRef.nativeElement, trigger.close, (/**
* @return {?}
*/
function () {
_timer_1.unsubscribe();
cancelDelayedTooltipShowing();
}));
}));
}
}
else {
showPopover();
}
};
/**
* Closes an element’s popover. This is considered a “manual” triggering of
* the popover.
*/
/**
* Closes an element’s popover. This is considered a “manual” triggering of
* the popover.
* @return {?}
*/
PopoverDirective.prototype.hide = /**
* Closes an element’s popover. This is considered a “manual” triggering of
* the popover.
* @return {?}
*/
function () {
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.
*/
/**
* Toggles an element’s popover. This is considered a “manual” triggering of
* the popover.
* @return {?}
*/
PopoverDirective.prototype.toggle = /**
* Toggles an element’s popover. This is considered a “manual” triggering of
* the popover.
* @return {?}
*/
function () {
if (this.isOpen) {
return this.hide();
}
this.show();
};
/**
* @return {?}
*/
PopoverDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
// 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: (/**
* @return {?}
*/
function () { return _this.show(); }),
hide: (/**
* @return {?}
*/
function () { return _this.hide(); })
});
};
/**
* @return {?}
*/
PopoverDirective.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._popover.dispose();
};
PopoverDirective.decorators = [
{ type: core.Directive, args: [{ selector: '[popover]', exportAs: 'bs-popover' },] }
];
/** @nocollapse */
PopoverDirective.ctorParameters = function () { return [
{ type: PopoverConfig },
{ type: core.ElementRef },
{ type: core.Renderer2 },
{ type: core.ViewContainerRef },
{ type: componentLoader.ComponentLoaderFactory },
{ type: positioning.PositioningService }
]; };
PopoverDirective.propDecorators = {
adaptivePosition: [{ type: core.Input }],
popover: [{ type: core.Input }],
popoverContext: [{ type: core.Input }],
popoverTitle: [{ type: core.Input }],
placement: [{ type: core.Input }],
outsideClick: [{ type: core.Input }],
triggers: [{ type: core.Input }],
container: [{ type: core.Input }],
containerClass: [{ type: core.Input }],
isOpen: [{ type: core.Input }],
delay: [{ type: core.Input }],
onShown: [{ type: core.Output }],
onHidden: [{ type: core.Output }]
};
return PopoverDirective;
}());
if (false) {
/**
* unique id popover - use for aria-describedby
* @type {?}
*/
PopoverDirective.prototype.popoverId;
/**
* sets disable adaptive position
* @type {?}
*/
PopoverDirective.prototype.adaptivePosition;
/**
* Content to be displayed as popover.
* @type {?}
*/
PopoverDirective.prototype.popover;
/**
* Context to be used if popover is a template.
* @type {?}
*/
PopoverDirective.prototype.popoverContext;
/**
* Title of a popover.
* @type {?}
*/
PopoverDirective.prototype.popoverTitle;
/**
* Placement of a popover. Accepts: "top", "bottom", "left", "right"
* @type {?}
*/
PopoverDirective.prototype.placement;
/**
* Close popover on outside click
* @type {?}
*/
PopoverDirective.prototype.outsideClick;
/**
* Specifies events that should trigger. Supports a space separated list of
* event names.
* @type {?}
*/
PopoverDirective.prototype.triggers;
/**
* A selector specifying the element the popover should be appended to.
* @type {?}
*/
PopoverDirective.prototype.container;
/**
* Css class for popover container
* @type {?}
*/
PopoverDirective.prototype.containerClass;
/**
* Delay before showing the tooltip
* @type {?}
*/
PopoverDirective.prototype.delay;
/**
* Emits an event when the popover is shown
* @type {?}
*/
PopoverDirective.prototype.onShown;
/**
* Emits an event when the popover is hidden
* @type {?}
*/
PopoverDirective.prototype.onHidden;
/**
* @type {?}
* @protected
*/
PopoverDirective.prototype._popoverCancelShowFn;
/**
* @type {?}
* @protected
*/
PopoverDirective.prototype._delayTimeoutId;
/**
* @type {?}
* @private
*/
PopoverDirective.prototype._popover;
/**
* @type {?}
* @private
*/
PopoverDirective.prototype._isInited;
/**
* @type {?}
* @private
*/
PopoverDirective.prototype._ariaDescribedby;
/**
* @type {?}
* @private
*/
PopoverDirective.prototype._elementRef;
/**
* @type {?}
* @private
*/
PopoverDirective.prototype._renderer;
/**
* @type {?}
* @private
*/
PopoverDirective.prototype._positionService;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var PopoverModule = /** @class */ (function () {
function PopoverModule() {
}
/**
* @return {?}
*/
PopoverModule.forRoot = /**
* @return {?}
*/
function () {
return {
ngModule: PopoverModule,
providers: [componentLoader.ComponentLoaderFactory, positioning.PositioningService]
};
};
PopoverModule.decorators = [
{ type: core.NgModule, args: [{
imports: [common.CommonModule],
declarations: [PopoverDirective, PopoverContainerComponent],
exports: [PopoverDirective],
entryComponents: [PopoverContainerComponent]
},] }
];
return PopoverModule;
}());
exports.PopoverConfig = PopoverConfig;
exports.PopoverContainerComponent = PopoverContainerComponent;
exports.PopoverDirective = PopoverDirective;
exports.PopoverModule = PopoverModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=ngx-bootstrap-popover.umd.js.map