ngx-bootstrap
Version:
Angular Bootstrap
336 lines (329 loc) • 17.5 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, input, ChangeDetectionStrategy, Component, model, output, effect, Input, Directive, NgModule } from '@angular/core';
import * as i2 from 'ngx-bootstrap/component-loader';
import { ComponentLoaderFactory } from 'ngx-bootstrap/component-loader';
import { getBsVer, parseTriggers } from 'ngx-bootstrap/utils';
import * as i3 from 'ngx-bootstrap/positioning';
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;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PopoverConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PopoverConfig, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PopoverConfig, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}] });
class PopoverContainerComponent {
get _bsVersions() {
return getBsVer();
}
constructor(config) {
// eslint-disable-next-line @angular-eslint/no-input-rename
this.placementInput = input(undefined, { ...(ngDevMode ? { debugName: "placementInput" } : {}), alias: 'placement' });
this._placement = 'top';
Object.assign(this, config);
}
ngOnInit() {
const placementValue = this.placementInput();
if (placementValue) {
if (!this._bsVersions.isBs5) {
this._placement = placementValue;
}
else {
this._placement = PlacementForBs5[placementValue];
}
}
}
checkMarginNecessity() {
return checkMargins(this._placement);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PopoverContainerComponent, deps: [{ token: PopoverConfig }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: PopoverContainerComponent, isStandalone: true, selector: "popover-container", inputs: { placementInput: { classPropertyName: "placementInput", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tooltip" }, properties: { "attr.id": "popoverId", "class": "\"popover in popover-\" + _placement + \" \" + \"bs-popover-\" + _placement + \" \" + _placement + \" \" + containerClass + \" \" + checkMarginNecessity()", "class.show": "!_bsVersions[\"isBs3\"]", "class.bs3": "_bsVersions[\"isBs3\"]" }, styleAttribute: "display:block; position:absolute" }, ngImport: i0, template: "<div class=\"popover-arrow arrow\"></div>\n@if (title) {\n <h3 class=\"popover-title popover-header\">{{ title }}</h3>\n}\n<div class=\"popover-content popover-body\">\n <ng-content></ng-content>\n</div>\n", styles: [":host.popover.bottom>.arrow{margin-left:-4px}:host .popover-arrow{position:absolute}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PopoverContainerComponent, decorators: [{
type: Component,
args: [{ selector: 'popover-container', changeDetection: ChangeDetectionStrategy.OnPush, 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; position:absolute'
}, standalone: true, imports: [], template: "<div class=\"popover-arrow arrow\"></div>\n@if (title) {\n <h3 class=\"popover-title popover-header\">{{ title }}</h3>\n}\n<div class=\"popover-content popover-body\">\n <ng-content></ng-content>\n</div>\n", styles: [":host.popover.bottom>.arrow{margin-left:-4px}:host .popover-arrow{position:absolute}\n"] }]
}], ctorParameters: () => [{ type: PopoverConfig }], propDecorators: { placementInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }] } });
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 = '';
/**
* Returns whether or not the popover is currently being shown
*/
this.isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
/**
* Delay before showing the tooltip
*/
this.delay = 0;
/**
* Emits an event when the popover is shown
*/
this.onShown = output();
/**
* Emits an event when the popover is hidden
*/
this.onHidden = output();
this._isInited = false;
this._popover = cis
.createLoader(_elementRef, _viewContainerRef, _renderer)
.provide({ provide: PopoverConfig, useValue: _config });
Object.assign(this, _config);
this._popover.onShown.subscribe(() => this.onShown.emit(undefined));
this._popover.onHidden.subscribe(() => this.onHidden.emit(undefined));
effect(() => {
const open = this.isOpen();
if (open && !this._popover.isShown) {
this.show();
}
else if (!open && this._popover.isShown) {
this.hide();
}
});
// 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;
}
});
}
}
/**
* Set attribute aria-describedBy for element directive and
* set id for the popover
*/
setAriaDescribedBy() {
this._ariaDescribedby = this._popover.isShown ? `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,
boundariesElement: this.boundariesElement || 'scrollParent'
}
}
});
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.set(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._popover.isShown) {
this._popover.hide();
this.setAriaDescribedBy();
this.isOpen.set(false);
}
}
/**
* Toggles an element’s popover. This is considered a “manual” triggering of
* the popover.
*/
toggle() {
if (this._popover.isShown) {
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;
// Remove native 'popover' attribute to prevent conflict with the HTML Popover API
// The Angular @Input() binding is managed via property binding and is unaffected
this._renderer.removeAttribute(this._elementRef.nativeElement, 'popover');
this._popover.listen({
triggers: this.triggers,
outsideClick: this.outsideClick,
show: () => this.show(),
hide: () => this.hide()
});
}
ngOnDestroy() {
this._popover.dispose();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PopoverDirective, deps: [{ token: PopoverConfig }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i2.ComponentLoaderFactory }, { token: i3.PositioningService }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: PopoverDirective, isStandalone: true, selector: "[popover]", inputs: { adaptivePosition: { classPropertyName: "adaptivePosition", publicName: "adaptivePosition", isSignal: false, isRequired: false, transformFunction: null }, boundariesElement: { classPropertyName: "boundariesElement", publicName: "boundariesElement", isSignal: false, isRequired: false, transformFunction: null }, popover: { classPropertyName: "popover", publicName: "popover", isSignal: false, isRequired: false, transformFunction: null }, popoverContext: { classPropertyName: "popoverContext", publicName: "popoverContext", isSignal: false, isRequired: false, transformFunction: null }, popoverTitle: { classPropertyName: "popoverTitle", publicName: "popoverTitle", isSignal: false, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: false, isRequired: false, transformFunction: null }, outsideClick: { classPropertyName: "outsideClick", publicName: "outsideClick", isSignal: false, isRequired: false, transformFunction: null }, triggers: { classPropertyName: "triggers", publicName: "triggers", isSignal: false, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "container", isSignal: false, isRequired: false, transformFunction: null }, containerClass: { classPropertyName: "containerClass", publicName: "containerClass", isSignal: false, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", onShown: "onShown", onHidden: "onHidden" }, providers: [PositioningService, ComponentLoaderFactory], exportAs: ["bs-popover"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PopoverDirective, decorators: [{
type: Directive,
args: [{
selector: '[popover]',
exportAs: 'bs-popover',
standalone: true,
providers: [PositioningService, ComponentLoaderFactory]
}]
}], ctorParameters: () => [{ type: PopoverConfig }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i2.ComponentLoaderFactory }, { type: i3.PositioningService }], propDecorators: { adaptivePosition: [{
type: Input
}], boundariesElement: [{
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: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], delay: [{
type: Input
}], onShown: [{ type: i0.Output, args: ["onShown"] }], onHidden: [{ type: i0.Output, args: ["onHidden"] }] } });
class PopoverModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: PopoverModule, imports: [CommonModule, PopoverDirective, PopoverContainerComponent], exports: [PopoverDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PopoverModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PopoverModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, PopoverDirective, PopoverContainerComponent],
exports: [PopoverDirective]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { PopoverConfig, PopoverContainerComponent, PopoverDirective, PopoverModule };
//# sourceMappingURL=ngx-bootstrap-popover.mjs.map