ngx-bootstrap
Version:
Angular Bootstrap
503 lines (495 loc) • 21 kB
JavaScript
import { ɵɵdefineInjectable, Injectable, Component, ChangeDetectionStrategy, EventEmitter, Directive, ViewContainerRef, ElementRef, Renderer2, Input, Output, NgModule } from '@angular/core';
import { isBs3, warnOnce, parseTriggers, OnChange } from 'ngx-bootstrap/utils';
import { __decorate, __metadata } from 'tslib';
import { ComponentLoaderFactory } from 'ngx-bootstrap/component-loader';
import { PositioningService } from 'ngx-bootstrap/positioning';
import { timer } from 'rxjs';
import { CommonModule } from '@angular/common';
/** Default values provider for tooltip */
import * as ɵngcc0 from '@angular/core';
import * as ɵngcc1 from 'ngx-bootstrap/component-loader';
import * as ɵngcc2 from 'ngx-bootstrap/positioning';
const _c0 = ["*"];
class TooltipConfig {
constructor() {
/** sets disable adaptive position */
this.adaptivePosition = true;
/** tooltip placement, supported positions: 'top', 'bottom', 'left', 'right' */
this.placement = 'top';
/** array of event names which triggers tooltip opening */
this.triggers = 'hover focus';
/** delay before showing the tooltip */
this.delay = 0;
}
}
TooltipConfig.ɵfac = function TooltipConfig_Factory(t) { return new (t || TooltipConfig)(); };
TooltipConfig.ɵprov = ɵɵdefineInjectable({ factory: function TooltipConfig_Factory() { return new TooltipConfig(); }, token: TooltipConfig, providedIn: "root" });
class TooltipContainerComponent {
constructor(config) {
Object.assign(this, config);
}
get isBs3() {
return isBs3();
}
ngAfterViewInit() {
this.classMap = { in: false, fade: false };
if (this.placement) {
this.classMap[this.placement] = true;
}
this.classMap[`tooltip-${this.placement}`] = true;
this.classMap.in = true;
if (this.animation) {
this.classMap.fade = true;
}
if (this.containerClass) {
this.classMap[this.containerClass] = true;
}
}
}
TooltipContainerComponent.ɵfac = function TooltipContainerComponent_Factory(t) { return new (t || TooltipContainerComponent)(ɵngcc0.ɵɵdirectiveInject(TooltipConfig)); };
TooltipContainerComponent.ɵcmp = ɵngcc0.ɵɵdefineComponent({ type: TooltipContainerComponent, selectors: [["bs-tooltip-container"]], hostAttrs: ["role", "tooltip"], hostVars: 7, hostBindings: function TooltipContainerComponent_HostBindings(rf, ctx) { if (rf & 2) {
ɵngcc0.ɵɵattribute("id", ctx.id);
ɵngcc0.ɵɵclassMap("tooltip in tooltip-" + ctx.placement + " " + "bs-tooltip-" + ctx.placement + " " + ctx.placement + " " + ctx.containerClass);
ɵngcc0.ɵɵclassProp("show", !ctx.isBs3)("bs3", ctx.isBs3);
} }, ngContentSelectors: _c0, decls: 3, vars: 0, consts: [[1, "tooltip-arrow", "arrow"], [1, "tooltip-inner"]], template: function TooltipContainerComponent_Template(rf, ctx) { if (rf & 1) {
ɵngcc0.ɵɵprojectionDef();
ɵngcc0.ɵɵelement(0, "div", 0);
ɵngcc0.ɵɵelementStart(1, "div", 1);
ɵngcc0.ɵɵprojection(2);
ɵngcc0.ɵɵelementEnd();
} }, styles: [".tooltip[_nghost-%COMP%] {\n display: block;\n pointer-events: none;\n }\n .bs3.tooltip.top[_nghost-%COMP%] > .arrow[_ngcontent-%COMP%] {\n margin-left: -2px;\n }\n .bs3.tooltip.bottom[_nghost-%COMP%] {\n margin-top: 0px;\n }\n .bs3.bs-tooltip-left[_nghost-%COMP%], .bs3.bs-tooltip-right[_nghost-%COMP%]{\n margin: 0px;\n }\n .bs3.bs-tooltip-right[_nghost-%COMP%] .arrow[_ngcontent-%COMP%], .bs3.bs-tooltip-left[_nghost-%COMP%] .arrow[_ngcontent-%COMP%] {\n margin: .3rem 0;\n }"], changeDetection: 0 });
TooltipContainerComponent.ctorParameters = () => [
{ type: TooltipConfig }
];
let id = 0;
class TooltipDirective {
constructor(_viewContainerRef, cis, config, _elementRef, _renderer, _positionService) {
this._elementRef = _elementRef;
this._renderer = _renderer;
this._positionService = _positionService;
this.tooltipId = id++;
/** sets disable adaptive position */
this.adaptivePosition = true;
/** Fired when tooltip content changes */
this.tooltipChange = new EventEmitter();
/**
* Placement of a tooltip. Accepts: "top", "bottom", "left", "right"
*/
this.placement = 'top';
/**
* Specifies events that should trigger. Supports a space separated list of
* event names.
*/
this.triggers = 'hover focus';
/**
* Css class for tooltip container
*/
this.containerClass = '';
/**
* Allows to disable tooltip
*/
this.isDisabled = false;
/**
* Delay before showing the tooltip
*/
this.delay = 0;
/** @deprecated - removed, will be added to configuration */
this.tooltipAnimation = true;
/** @deprecated */
this.tooltipFadeDuration = 150;
/** @deprecated */
this.tooltipStateChanged = new EventEmitter();
this._tooltip = cis
.createLoader(this._elementRef, _viewContainerRef, this._renderer)
.provide({ provide: TooltipConfig, useValue: config });
Object.assign(this, config);
this.onShown = this._tooltip.onShown;
this.onHidden = this._tooltip.onHidden;
}
/**
* Returns whether or not the tooltip is currently being shown
*/
get isOpen() {
return this._tooltip.isShown;
}
set isOpen(value) {
if (value) {
this.show();
}
else {
this.hide();
}
}
/** @deprecated - please use `tooltip` instead */
set htmlContent(value) {
warnOnce('tooltipHtml was deprecated, please use `tooltip` instead');
this.tooltip = value;
}
/** @deprecated - please use `placement` instead */
// eslint-disable-next-line @angular-eslint/no-input-rename
set _placement(value) {
warnOnce('tooltipPlacement was deprecated, please use `placement` instead');
this.placement = value;
}
/** @deprecated - please use `isOpen` instead */
// eslint-disable-next-line @angular-eslint/no-input-rename
set _isOpen(value) {
warnOnce('tooltipIsOpen was deprecated, please use `isOpen` instead');
this.isOpen = value;
}
get _isOpen() {
warnOnce('tooltipIsOpen was deprecated, please use `isOpen` instead');
return this.isOpen;
}
/** @deprecated - please use `isDisabled` instead */
// eslint-disable-next-line @angular-eslint/no-input-rename
set _enable(value) {
warnOnce('tooltipEnable was deprecated, please use `isDisabled` instead');
this.isDisabled = !value;
}
get _enable() {
warnOnce('tooltipEnable was deprecated, please use `isDisabled` instead');
return this.isDisabled;
}
/** @deprecated - please use `container="body"` instead */
// eslint-disable-next-line @angular-eslint/no-input-rename
set _appendToBody(value) {
warnOnce('tooltipAppendToBody was deprecated, please use `container="body"` instead');
this.container = value ? 'body' : this.container;
}
get _appendToBody() {
warnOnce('tooltipAppendToBody was deprecated, please use `container="body"` instead');
return this.container === 'body';
}
/** @deprecated - will replaced with customClass */
// eslint-disable-next-line @angular-eslint/no-input-rename
set _popupClass(value) {
warnOnce('tooltipClass deprecated');
}
/** @deprecated - removed */
// eslint-disable-next-line @angular-eslint/no-input-rename
set _tooltipContext(value) {
warnOnce('tooltipContext deprecated');
}
/** @deprecated */
// eslint-disable-next-line @angular-eslint/no-input-rename
set _tooltipPopupDelay(value) {
warnOnce('tooltipPopupDelay is deprecated, use `delay` instead');
this.delay = value;
}
/** @deprecated - please use `triggers` instead */
get _tooltipTrigger() {
warnOnce('tooltipTrigger was deprecated, please use `triggers` instead');
return this.triggers;
}
set _tooltipTrigger(value) {
warnOnce('tooltipTrigger was deprecated, please use `triggers` instead');
this.triggers = (value || '').toString();
}
ngOnInit() {
this._tooltip.listen({
triggers: this.triggers,
show: () => this.show()
});
this.tooltipChange.subscribe((value) => {
if (!value) {
this._tooltip.hide();
}
});
this.onShown.subscribe(() => {
this.setAriaDescribedBy();
});
this.onHidden.subscribe(() => {
this.setAriaDescribedBy();
});
}
setAriaDescribedBy() {
this._ariaDescribedby = this.isOpen ? `tooltip-${this.tooltipId}` : void 0;
if (this._ariaDescribedby) {
this._renderer.setAttribute(this._elementRef.nativeElement, 'aria-describedby', this._ariaDescribedby);
}
else {
this._renderer.removeAttribute(this._elementRef.nativeElement, 'aria-describedby');
}
}
/**
* Toggles an element’s tooltip. This is considered a “manual” triggering of
* the tooltip.
*/
toggle() {
if (this.isOpen) {
return this.hide();
}
this.show();
}
/**
* Opens an element’s tooltip. This is considered a “manual” triggering of
* the tooltip.
*/
show() {
this._positionService.setOptions({
modifiers: {
flip: {
enabled: this.adaptivePosition
},
preventOverflow: {
enabled: this.adaptivePosition,
boundariesElement: this.boundariesElement || 'scrollParent'
}
}
});
if (this.isOpen ||
this.isDisabled ||
this._delayTimeoutId ||
!this.tooltip) {
return;
}
const showTooltip = () => {
if (this._delayTimeoutId) {
this._delayTimeoutId = undefined;
}
this._tooltip
.attach(TooltipContainerComponent)
.to(this.container)
.position({ attachment: this.placement })
.show({
content: this.tooltip,
placement: this.placement,
containerClass: this.containerClass,
id: `tooltip-${this.tooltipId}`
});
};
const cancelDelayedTooltipShowing = () => {
if (this._tooltipCancelShowFn) {
this._tooltipCancelShowFn();
}
};
if (this.delay) {
if (this._delaySubscription) {
this._delaySubscription.unsubscribe();
}
this._delaySubscription = timer(this.delay).subscribe(() => {
showTooltip();
cancelDelayedTooltipShowing();
});
if (this.triggers) {
parseTriggers(this.triggers)
.forEach((trigger) => {
if (!trigger.close) {
return;
}
this._tooltipCancelShowFn = this._renderer.listen(this._elementRef.nativeElement, trigger.close, () => {
var _a;
(_a = this._delaySubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
cancelDelayedTooltipShowing();
});
});
}
}
else {
showTooltip();
}
}
/**
* Closes an element’s tooltip. This is considered a “manual” triggering of
* the tooltip.
*/
hide() {
var _a;
if (this._delayTimeoutId) {
clearTimeout(this._delayTimeoutId);
this._delayTimeoutId = undefined;
}
if (!this._tooltip.isShown) {
return;
}
if ((_a = this._tooltip.instance) === null || _a === void 0 ? void 0 : _a.classMap) {
this._tooltip.instance.classMap.in = false;
}
setTimeout(() => {
this._tooltip.hide();
}, this.tooltipFadeDuration);
}
ngOnDestroy() {
this._tooltip.dispose();
this.tooltipChange.unsubscribe();
if (this._delaySubscription) {
this._delaySubscription.unsubscribe();
}
this.onShown.unsubscribe();
this.onHidden.unsubscribe();
}
}
TooltipDirective.ɵfac = function TooltipDirective_Factory(t) { return new (t || TooltipDirective)(ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ViewContainerRef), ɵngcc0.ɵɵdirectiveInject(ɵngcc1.ComponentLoaderFactory), ɵngcc0.ɵɵdirectiveInject(TooltipConfig), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ElementRef), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.Renderer2), ɵngcc0.ɵɵdirectiveInject(ɵngcc2.PositioningService)); };
TooltipDirective.ɵdir = ɵngcc0.ɵɵdefineDirective({ type: TooltipDirective, selectors: [["", "tooltip", ""], ["", "tooltipHtml", ""]], inputs: { adaptivePosition: "adaptivePosition", placement: "placement", triggers: "triggers", containerClass: "containerClass", isDisabled: "isDisabled", delay: "delay", tooltipAnimation: "tooltipAnimation", tooltipFadeDuration: "tooltipFadeDuration", isOpen: "isOpen", htmlContent: ["tooltipHtml", "htmlContent"], tooltip: "tooltip", _placement: ["tooltipPlacement", "_placement"], _isOpen: ["tooltipIsOpen", "_isOpen"], _enable: ["tooltipEnable", "_enable"], _appendToBody: ["tooltipAppendToBody", "_appendToBody"], container: "container", _popupClass: ["tooltipClass", "_popupClass"], _tooltipContext: ["tooltipContext", "_tooltipContext"], _tooltipPopupDelay: ["tooltipPopupDelay", "_tooltipPopupDelay"], _tooltipTrigger: ["tooltipTrigger", "_tooltipTrigger"], boundariesElement: "boundariesElement" }, outputs: { tooltipChange: "tooltipChange", tooltipStateChanged: "tooltipStateChanged", onShown: "onShown", onHidden: "onHidden" }, exportAs: ["bs-tooltip"] });
TooltipDirective.ctorParameters = () => [
{ type: ViewContainerRef },
{ type: ComponentLoaderFactory },
{ type: TooltipConfig },
{ type: ElementRef },
{ type: Renderer2 },
{ type: PositioningService }
];
TooltipDirective.propDecorators = {
adaptivePosition: [{ type: Input }],
tooltip: [{ type: Input }],
tooltipChange: [{ type: Output }],
placement: [{ type: Input }],
triggers: [{ type: Input }],
container: [{ type: Input }],
containerClass: [{ type: Input }],
boundariesElement: [{ type: Input }],
isOpen: [{ type: Input }],
isDisabled: [{ type: Input }],
delay: [{ type: Input }],
onShown: [{ type: Output }],
onHidden: [{ type: Output }],
htmlContent: [{ type: Input, args: ['tooltipHtml',] }],
_placement: [{ type: Input, args: ['tooltipPlacement',] }],
_isOpen: [{ type: Input, args: ['tooltipIsOpen',] }],
_enable: [{ type: Input, args: ['tooltipEnable',] }],
_appendToBody: [{ type: Input, args: ['tooltipAppendToBody',] }],
tooltipAnimation: [{ type: Input }],
_popupClass: [{ type: Input, args: ['tooltipClass',] }],
_tooltipContext: [{ type: Input, args: ['tooltipContext',] }],
_tooltipPopupDelay: [{ type: Input, args: ['tooltipPopupDelay',] }],
tooltipFadeDuration: [{ type: Input }],
_tooltipTrigger: [{ type: Input, args: ['tooltipTrigger',] }],
tooltipStateChanged: [{ type: Output }]
};
__decorate([
OnChange(),
__metadata("design:type", Object)
], TooltipDirective.prototype, "tooltip", void 0);
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(TooltipConfig, [{
type: Injectable,
args: [{ providedIn: 'root' }]
}], function () { return []; }, null); })();
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(TooltipContainerComponent, [{
type: Component,
args: [{
selector: 'bs-tooltip-container',
changeDetection: ChangeDetectionStrategy.OnPush,
// eslint-disable-next-line @angular-eslint/no-host-metadata-property
host: {
'[class]': '"tooltip in tooltip-" + placement + " " + "bs-tooltip-" + placement + " " + placement + " " + containerClass',
'[class.show]': '!isBs3',
'[class.bs3]': 'isBs3',
'[attr.id]': 'this.id',
role: 'tooltip'
},
template: `
<div class="tooltip-arrow arrow"></div>
<div class="tooltip-inner"><ng-content></ng-content></div>
`,
styles: [`
:host.tooltip {
display: block;
pointer-events: none;
}
:host.bs3.tooltip.top>.arrow {
margin-left: -2px;
}
:host.bs3.tooltip.bottom {
margin-top: 0px;
}
:host.bs3.bs-tooltip-left, :host.bs3.bs-tooltip-right{
margin: 0px;
}
:host.bs3.bs-tooltip-right .arrow, :host.bs3.bs-tooltip-left .arrow {
margin: .3rem 0;
}
`]
}]
}], function () { return [{ type: TooltipConfig }]; }, null); })();
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(TooltipDirective, [{
type: Directive,
args: [{
selector: '[tooltip], [tooltipHtml]',
exportAs: 'bs-tooltip'
}]
}], function () { return [{ type: ɵngcc0.ViewContainerRef }, { type: ɵngcc1.ComponentLoaderFactory }, { type: TooltipConfig }, { type: ɵngcc0.ElementRef }, { type: ɵngcc0.Renderer2 }, { type: ɵngcc2.PositioningService }]; }, { adaptivePosition: [{
type: Input
}], tooltipChange: [{
type: Output
}], placement: [{
type: Input
}], triggers: [{
type: Input
}], containerClass: [{
type: Input
}], isDisabled: [{
type: Input
}], delay: [{
type: Input
}], tooltipAnimation: [{
type: Input
}], tooltipFadeDuration: [{
type: Input
}], tooltipStateChanged: [{
type: Output
}], onShown: [{
type: Output
}], onHidden: [{
type: Output
}], isOpen: [{
type: Input
}], htmlContent: [{
type: Input,
args: ['tooltipHtml']
}], tooltip: [{
type: Input
}], _placement: [{
type: Input,
args: ['tooltipPlacement']
}], _isOpen: [{
type: Input,
args: ['tooltipIsOpen']
}], _enable: [{
type: Input,
args: ['tooltipEnable']
}], _appendToBody: [{
type: Input,
args: ['tooltipAppendToBody']
}], container: [{
type: Input
}], _popupClass: [{
type: Input,
args: ['tooltipClass']
}], _tooltipContext: [{
type: Input,
args: ['tooltipContext']
}], _tooltipPopupDelay: [{
type: Input,
args: ['tooltipPopupDelay']
}], _tooltipTrigger: [{
type: Input,
args: ['tooltipTrigger']
}], boundariesElement: [{
type: Input
}] }); })();
class TooltipModule {
static forRoot() {
return {
ngModule: TooltipModule,
providers: [ComponentLoaderFactory, PositioningService]
};
}
}
TooltipModule.ɵmod = ɵngcc0.ɵɵdefineNgModule({ type: TooltipModule });
TooltipModule.ɵinj = ɵngcc0.ɵɵdefineInjector({ factory: function TooltipModule_Factory(t) { return new (t || TooltipModule)(); }, imports: [[CommonModule]] });
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && ɵngcc0.ɵɵsetNgModuleScope(TooltipModule, { declarations: function () { return [TooltipDirective, TooltipContainerComponent]; }, imports: function () { return [CommonModule]; }, exports: function () { return [TooltipDirective]; } }); })();
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(TooltipModule, [{
type: NgModule,
args: [{
imports: [CommonModule],
declarations: [TooltipDirective, TooltipContainerComponent],
exports: [TooltipDirective],
entryComponents: [TooltipContainerComponent]
}]
}], null, null); })();
/**
* Generated bundle index. Do not edit.
*/
export { TooltipConfig, TooltipContainerComponent, TooltipDirective, TooltipModule };
//# sourceMappingURL=ngx-bootstrap-tooltip.js.map