ngx-bootstrap
Version:
Angular Bootstrap
360 lines (353 loc) • 22.5 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, ChangeDetectionStrategy, Component, input, model, output, Directive, NgModule } from '@angular/core';
import { getBsVer, warnOnce, parseTriggers } from 'ngx-bootstrap/utils';
import * as i3 from 'ngx-bootstrap/positioning';
import { PlacementForBs5, PositioningService } from 'ngx-bootstrap/positioning';
import * as i1 from 'ngx-bootstrap/component-loader';
import { ComponentLoaderFactory } from 'ngx-bootstrap/component-loader';
import { timer } from 'rxjs';
import { CommonModule } from '@angular/common';
/** Default values provider for tooltip */
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;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TooltipConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TooltipConfig, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TooltipConfig, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}] });
class TooltipContainerComponent {
get _bsVersions() {
return getBsVer();
}
constructor(config) {
// Config properties don't apply to container component
// Container properties are set dynamically by the component loader
}
ngAfterViewInit() {
this.classMap = { in: false, fade: false };
if (this.placement) {
if (this._bsVersions.isBs5) {
this.placement = PlacementForBs5[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;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TooltipContainerComponent, deps: [{ token: TooltipConfig }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: TooltipContainerComponent, isStandalone: true, selector: "bs-tooltip-container", host: { attributes: { "role": "tooltip" }, properties: { "class": "\"show tooltip in tooltip-\" + placement + \" \" + \"bs-tooltip-\" + placement + \" \" + placement + \" \" + containerClass", "attr.id": "this.id" } }, ngImport: i0, template: `
<div class="tooltip-arrow arrow"></div>
<div class="tooltip-inner"><ng-content></ng-content></div>
`, isInline: true, styles: [":host.tooltip{display:block;pointer-events:none;position:absolute}:host.tooltip .tooltip-arrow{position:absolute}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TooltipContainerComponent, decorators: [{
type: Component,
args: [{ selector: 'bs-tooltip-container', changeDetection: ChangeDetectionStrategy.OnPush, host: {
'[class]': '"show tooltip in tooltip-" + placement + " " + "bs-tooltip-" + placement + " " + placement + " " + containerClass',
'[attr.id]': 'this.id',
role: 'tooltip'
}, template: `
<div class="tooltip-arrow arrow"></div>
<div class="tooltip-inner"><ng-content></ng-content></div>
`, standalone: true, styles: [":host.tooltip{display:block;pointer-events:none;position:absolute}:host.tooltip .tooltip-arrow{position:absolute}\n"] }]
}], ctorParameters: () => [{ type: TooltipConfig }] });
let id = 0;
class TooltipDirective {
/**
* 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();
}
}
constructor(_viewContainerRef, cis, _config, _elementRef, _renderer, _positionService) {
this._config = _config;
this._elementRef = _elementRef;
this._renderer = _renderer;
this._positionService = _positionService;
this.tooltipId = id++;
/** sets disable adaptive position */
this.adaptivePosition = input(this._config.adaptivePosition, ...(ngDevMode ? [{ debugName: "adaptivePosition" }] : []));
/**
* Content to be displayed as tooltip.
*/
this.tooltip = model(...(ngDevMode ? [undefined, { debugName: "tooltip" }] : []));
/**
* Placement of a tooltip. Accepts: "top", "bottom", "left", "right"
*/
this.placement = input(this._config.placement, ...(ngDevMode ? [{ debugName: "placement" }] : []));
/**
* Specifies events that should trigger. Supports a space separated list of
* event names.
*/
this.triggers = input(this._config.triggers, ...(ngDevMode ? [{ debugName: "triggers" }] : []));
/**
* A selector specifying the element the tooltip should be appended to.
*/
this.container = input(this._config.container, ...(ngDevMode ? [{ debugName: "container" }] : []));
/**
* Css class for tooltip container
*/
this.containerClass = input('', ...(ngDevMode ? [{ debugName: "containerClass" }] : []));
this.boundariesElement = input(...(ngDevMode ? [undefined, { debugName: "boundariesElement" }] : []));
/**
* Allows to disable tooltip
*/
this.isDisabled = input(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
/**
* Delay before showing the tooltip
*/
this.delay = input(this._config.delay, ...(ngDevMode ? [{ debugName: "delay" }] : []));
/** @deprecated - please use `tooltip` instead */
this.tooltipHtml = input(undefined, ...(ngDevMode ? [{ debugName: "tooltipHtml" }] : []));
/** @deprecated - please use `placement` instead */
this.tooltipPlacement = input(undefined, ...(ngDevMode ? [{ debugName: "tooltipPlacement" }] : []));
/** @deprecated - please use `isOpen` instead */
this.tooltipIsOpen = input(undefined, ...(ngDevMode ? [{ debugName: "tooltipIsOpen" }] : []));
/** @deprecated - please use `isDisabled` instead */
this.tooltipEnable = input(undefined, ...(ngDevMode ? [{ debugName: "tooltipEnable" }] : []));
/** @deprecated - please use `container="body"` instead */
this.tooltipAppendToBody = input(undefined, ...(ngDevMode ? [{ debugName: "tooltipAppendToBody" }] : []));
/** @deprecated - removed, will be added to configuration */
this.tooltipAnimation = input(true, ...(ngDevMode ? [{ debugName: "tooltipAnimation" }] : []));
/** @deprecated - will replaced with customClass */
this.tooltipClass = input(undefined, ...(ngDevMode ? [{ debugName: "tooltipClass" }] : []));
/** @deprecated - removed */
this.tooltipContext = input(undefined, ...(ngDevMode ? [{ debugName: "tooltipContext" }] : []));
/** @deprecated */
this.tooltipPopupDelay = input(undefined, ...(ngDevMode ? [{ debugName: "tooltipPopupDelay" }] : []));
/** @deprecated */
this.tooltipFadeDuration = input(150, ...(ngDevMode ? [{ debugName: "tooltipFadeDuration" }] : []));
/** @deprecated - please use `triggers` instead */
this.tooltipTrigger = input(undefined, ...(ngDevMode ? [{ debugName: "tooltipTrigger" }] : []));
/** @deprecated */
this.tooltipStateChanged = output();
this._tooltip = cis
.createLoader(this._elementRef, _viewContainerRef, this._renderer)
.provide({ provide: TooltipConfig, useValue: _config });
this.onShown = this._tooltip.onShown;
this.onHidden = this._tooltip.onHidden;
}
ngOnInit() {
// Handle deprecated inputs
const htmlContent = this.tooltipHtml();
if (htmlContent !== undefined) {
warnOnce('tooltipHtml was deprecated, please use `tooltip` instead');
this.tooltip.set(htmlContent);
}
const placementValue = this.tooltipPlacement();
if (placementValue !== undefined) {
warnOnce('tooltipPlacement was deprecated, please use `placement` instead');
}
const isOpenValue = this.tooltipIsOpen();
if (isOpenValue !== undefined) {
warnOnce('tooltipIsOpen was deprecated, please use `isOpen` instead');
this.isOpen = isOpenValue;
}
const enableValue = this.tooltipEnable();
if (enableValue !== undefined) {
warnOnce('tooltipEnable was deprecated, please use `isDisabled` instead');
}
const appendToBodyValue = this.tooltipAppendToBody();
if (appendToBodyValue !== undefined) {
warnOnce('tooltipAppendToBody was deprecated, please use `container="body"` instead');
}
const classValue = this.tooltipClass();
if (classValue !== undefined) {
warnOnce('tooltipClass deprecated');
}
const contextValue = this.tooltipContext();
if (contextValue !== undefined) {
warnOnce('tooltipContext deprecated');
}
const delayValue = this.tooltipPopupDelay();
if (delayValue !== undefined) {
warnOnce('tooltipPopupDelay is deprecated, use `delay` instead');
}
const triggerValue = this.tooltipTrigger();
if (triggerValue !== undefined) {
warnOnce('tooltipTrigger was deprecated, please use `triggers` instead');
}
this._tooltip.listen({
triggers: this.triggers(),
show: () => this.show()
});
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'
}
}
});
const tooltipValue = this.tooltip();
const isDisabledValue = this.isDisabled() || (this.tooltipEnable() !== undefined && !this.tooltipEnable());
const delayValue = this.tooltipPopupDelay() ?? this.delay();
const containerValue = this.tooltipAppendToBody() ? 'body' : this.container();
const placementValue = this.tooltipPlacement() ?? this.placement();
const triggersValue = this.tooltipTrigger()?.toString() ?? this.triggers();
if (this.isOpen || isDisabledValue || this._delayTimeoutId || !tooltipValue) {
return;
}
const showTooltip = () => {
if (this._delayTimeoutId) {
this._delayTimeoutId = undefined;
}
this._tooltip
.attach(TooltipContainerComponent)
.to(containerValue)
.position({ attachment: placementValue })
.show({
content: tooltipValue,
placement: placementValue,
containerClass: this.containerClass(),
id: `tooltip-${this.tooltipId}`
});
};
const cancelDelayedTooltipShowing = () => {
if (this._tooltipCancelShowFn) {
this._tooltipCancelShowFn();
}
};
if (delayValue) {
if (this._delaySubscription) {
this._delaySubscription.unsubscribe();
}
this._delaySubscription = timer(delayValue).subscribe(() => {
showTooltip();
cancelDelayedTooltipShowing();
});
if (triggersValue) {
parseTriggers(triggersValue).forEach((trigger) => {
if (!trigger.close) {
return;
}
this._tooltipCancelShowFn = this._renderer.listen(this._elementRef.nativeElement, trigger.close, () => {
this._delaySubscription?.unsubscribe();
cancelDelayedTooltipShowing();
});
});
}
}
else {
showTooltip();
}
}
/**
* Closes an element's tooltip. This is considered a "manual" triggering of
* the tooltip.
*/
hide() {
if (this._delayTimeoutId) {
clearTimeout(this._delayTimeoutId);
this._delayTimeoutId = undefined;
}
if (!this._tooltip.isShown) {
return;
}
if (this._tooltip.instance?.classMap) {
this._tooltip.instance.classMap['in'] = false;
}
setTimeout(() => {
this._tooltip.hide();
}, this.tooltipFadeDuration());
}
ngOnDestroy() {
this._tooltip.dispose();
if (this._delaySubscription) {
this._delaySubscription.unsubscribe();
}
this.onShown.unsubscribe();
this.onHidden.unsubscribe();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ViewContainerRef }, { token: i1.ComponentLoaderFactory }, { token: TooltipConfig }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i3.PositioningService }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: TooltipDirective, isStandalone: true, selector: "[tooltip], [tooltipHtml]", inputs: { adaptivePosition: { classPropertyName: "adaptivePosition", publicName: "adaptivePosition", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, triggers: { classPropertyName: "triggers", publicName: "triggers", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null }, containerClass: { classPropertyName: "containerClass", publicName: "containerClass", isSignal: true, isRequired: false, transformFunction: null }, boundariesElement: { classPropertyName: "boundariesElement", publicName: "boundariesElement", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, tooltipHtml: { classPropertyName: "tooltipHtml", publicName: "tooltipHtml", isSignal: true, isRequired: false, transformFunction: null }, tooltipPlacement: { classPropertyName: "tooltipPlacement", publicName: "tooltipPlacement", isSignal: true, isRequired: false, transformFunction: null }, tooltipIsOpen: { classPropertyName: "tooltipIsOpen", publicName: "tooltipIsOpen", isSignal: true, isRequired: false, transformFunction: null }, tooltipEnable: { classPropertyName: "tooltipEnable", publicName: "tooltipEnable", isSignal: true, isRequired: false, transformFunction: null }, tooltipAppendToBody: { classPropertyName: "tooltipAppendToBody", publicName: "tooltipAppendToBody", isSignal: true, isRequired: false, transformFunction: null }, tooltipAnimation: { classPropertyName: "tooltipAnimation", publicName: "tooltipAnimation", isSignal: true, isRequired: false, transformFunction: null }, tooltipClass: { classPropertyName: "tooltipClass", publicName: "tooltipClass", isSignal: true, isRequired: false, transformFunction: null }, tooltipContext: { classPropertyName: "tooltipContext", publicName: "tooltipContext", isSignal: true, isRequired: false, transformFunction: null }, tooltipPopupDelay: { classPropertyName: "tooltipPopupDelay", publicName: "tooltipPopupDelay", isSignal: true, isRequired: false, transformFunction: null }, tooltipFadeDuration: { classPropertyName: "tooltipFadeDuration", publicName: "tooltipFadeDuration", isSignal: true, isRequired: false, transformFunction: null }, tooltipTrigger: { classPropertyName: "tooltipTrigger", publicName: "tooltipTrigger", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tooltip: "tooltipChange", tooltipStateChanged: "tooltipStateChanged" }, providers: [
ComponentLoaderFactory, PositioningService
], exportAs: ["bs-tooltip"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TooltipDirective, decorators: [{
type: Directive,
args: [{
selector: '[tooltip], [tooltipHtml]',
exportAs: 'bs-tooltip',
standalone: true,
providers: [
ComponentLoaderFactory, PositioningService
]
}]
}], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i1.ComponentLoaderFactory }, { type: TooltipConfig }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i3.PositioningService }], propDecorators: { adaptivePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "adaptivePosition", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }, { type: i0.Output, args: ["tooltipChange"] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], triggers: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggers", required: false }] }], container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: false }] }], containerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "containerClass", required: false }] }], boundariesElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "boundariesElement", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], tooltipHtml: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipHtml", required: false }] }], tooltipPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPlacement", required: false }] }], tooltipIsOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipIsOpen", required: false }] }], tooltipEnable: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipEnable", required: false }] }], tooltipAppendToBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipAppendToBody", required: false }] }], tooltipAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipAnimation", required: false }] }], tooltipClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipClass", required: false }] }], tooltipContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipContext", required: false }] }], tooltipPopupDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPopupDelay", required: false }] }], tooltipFadeDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipFadeDuration", required: false }] }], tooltipTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipTrigger", required: false }] }], tooltipStateChanged: [{ type: i0.Output, args: ["tooltipStateChanged"] }] } });
class TooltipModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: TooltipModule, imports: [CommonModule, TooltipDirective, TooltipContainerComponent], exports: [TooltipDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TooltipModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TooltipModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, TooltipDirective, TooltipContainerComponent],
exports: [TooltipDirective]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { TooltipConfig, TooltipContainerComponent, TooltipDirective, TooltipModule };
//# sourceMappingURL=ngx-bootstrap-tooltip.mjs.map