| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502 |
- import { Injectable, Component, ChangeDetectionStrategy, EventEmitter, Directive, ViewContainerRef, ElementRef, Renderer2, Input, Output, HostBinding, 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';
- /**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
- /**
- * 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;
- }
- }
- TooltipConfig.decorators = [
- { type: Injectable }
- ];
- /**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
- class TooltipContainerComponent {
- /**
- * @param {?} config
- */
- constructor(config) {
- Object.assign(this, config);
- }
- /**
- * @return {?}
- */
- get isBs3() {
- return isBs3();
- }
- /**
- * @return {?}
- */
- ngAfterViewInit() {
- this.classMap = { in: false, fade: false };
- 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.decorators = [
- { type: Component, args: [{
- selector: 'bs-tooltip-container',
- changeDetection: ChangeDetectionStrategy.OnPush,
- // tslint:disable-next-line
- 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;
- }
- `]
- }] }
- ];
- /** @nocollapse */
- TooltipContainerComponent.ctorParameters = () => [
- { type: TooltipConfig }
- ];
- /**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
- /** @type {?} */
- let id = 0;
- class TooltipDirective {
- /**
- * @param {?} _viewContainerRef
- * @param {?} cis
- * @param {?} config
- * @param {?} _elementRef
- * @param {?} _renderer
- * @param {?} _positionService
- */
- constructor(_viewContainerRef, cis, config, _elementRef, _renderer, _positionService) {
- this._elementRef = _elementRef;
- this._renderer = _renderer;
- this._positionService = _positionService;
- this.tooltipId = id++;
- /**
- * Fired when tooltip content changes
- */
- /* tslint:disable-next-line:no-any */
- this.tooltipChange = new EventEmitter();
- /**
- * Css class for tooltip container
- */
- this.containerClass = '';
- /**
- * @deprecated - removed, will be added to configuration
- */
- this.tooltipAnimation = true;
- /**
- * @deprecated
- */
- this.tooltipFadeDuration = 150;
- this.ariaDescribedby = `tooltip-${this.tooltipId}`;
- /**
- * @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
- * @return {?}
- */
- get isOpen() {
- return this._tooltip.isShown;
- }
- /**
- * @param {?} value
- * @return {?}
- */
- set isOpen(value) {
- if (value) {
- this.show();
- }
- else {
- this.hide();
- }
- }
- /**
- * @deprecated - please use `tooltip` instead
- * @param {?} value
- * @return {?}
- */
- set htmlContent(value) {
- warnOnce('tooltipHtml was deprecated, please use `tooltip` instead');
- this.tooltip = value;
- }
- /**
- * @deprecated - please use `placement` instead
- * @param {?} value
- * @return {?}
- */
- set _placement(value) {
- warnOnce('tooltipPlacement was deprecated, please use `placement` instead');
- this.placement = value;
- }
- /**
- * @deprecated - please use `isOpen` instead
- * @param {?} value
- * @return {?}
- */
- set _isOpen(value) {
- warnOnce('tooltipIsOpen was deprecated, please use `isOpen` instead');
- this.isOpen = value;
- }
- /**
- * @return {?}
- */
- get _isOpen() {
- warnOnce('tooltipIsOpen was deprecated, please use `isOpen` instead');
- return this.isOpen;
- }
- /**
- * @deprecated - please use `isDisabled` instead
- * @param {?} value
- * @return {?}
- */
- set _enable(value) {
- warnOnce('tooltipEnable was deprecated, please use `isDisabled` instead');
- this.isDisabled = !value;
- }
- /**
- * @return {?}
- */
- get _enable() {
- warnOnce('tooltipEnable was deprecated, please use `isDisabled` instead');
- return this.isDisabled;
- }
- /**
- * @deprecated - please use `container="body"` instead
- * @param {?} value
- * @return {?}
- */
- set _appendToBody(value) {
- warnOnce('tooltipAppendToBody was deprecated, please use `container="body"` instead');
- this.container = value ? 'body' : this.container;
- }
- /**
- * @return {?}
- */
- get _appendToBody() {
- warnOnce('tooltipAppendToBody was deprecated, please use `container="body"` instead');
- return this.container === 'body';
- }
- /**
- * @deprecated - will replaced with customClass
- * @param {?} value
- * @return {?}
- */
- set _popupClass(value) {
- warnOnce('tooltipClass deprecated');
- }
- /**
- * @deprecated - removed
- * @param {?} value
- * @return {?}
- */
- set _tooltipContext(value) {
- warnOnce('tooltipContext deprecated');
- }
- /**
- * @deprecated
- * @param {?} value
- * @return {?}
- */
- set _tooltipPopupDelay(value) {
- warnOnce('tooltipPopupDelay is deprecated, use `delay` instead');
- this.delay = value;
- }
- /**
- * @deprecated - please use `triggers` instead
- * @return {?}
- */
- get _tooltipTrigger() {
- warnOnce('tooltipTrigger was deprecated, please use `triggers` instead');
- return this.triggers;
- }
- /**
- * @param {?} value
- * @return {?}
- */
- set _tooltipTrigger(value) {
- warnOnce('tooltipTrigger was deprecated, please use `triggers` instead');
- this.triggers = (value || '').toString();
- }
- /**
- * @return {?}
- */
- ngOnInit() {
- this._tooltip.listen({
- triggers: this.triggers,
- show: (/**
- * @return {?}
- */
- () => this.show())
- });
- /* tslint:disable-next-line:no-any */
- this.tooltipChange.subscribe((/**
- * @param {?} value
- * @return {?}
- */
- (value) => {
- if (!value) {
- this._tooltip.hide();
- }
- }));
- }
- /**
- * Toggles an element’s tooltip. This is considered a “manual” triggering of
- * the tooltip.
- * @return {?}
- */
- toggle() {
- if (this.isOpen) {
- return this.hide();
- }
- this.show();
- }
- /**
- * Opens an element’s tooltip. This is considered a “manual” triggering of
- * the tooltip.
- * @return {?}
- */
- show() {
- this._positionService.setOptions({
- modifiers: {
- flip: {
- enabled: this.adaptivePosition
- },
- preventOverflow: {
- enabled: this.adaptivePosition
- }
- }
- });
- if (this.isOpen ||
- this.isDisabled ||
- this._delayTimeoutId ||
- !this.tooltip) {
- return;
- }
- /** @type {?} */
- const showTooltip = (/**
- * @return {?}
- */
- () => {
- 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: this.ariaDescribedby
- });
- });
- /** @type {?} */
- const cancelDelayedTooltipShowing = (/**
- * @return {?}
- */
- () => {
- if (this._tooltipCancelShowFn) {
- this._tooltipCancelShowFn();
- }
- });
- if (this.delay) {
- /** @type {?} */
- const _timer = timer(this.delay).subscribe((/**
- * @return {?}
- */
- () => {
- showTooltip();
- cancelDelayedTooltipShowing();
- }));
- if (this.triggers) {
- parseTriggers(this.triggers)
- .forEach((/**
- * @param {?} trigger
- * @return {?}
- */
- (trigger) => {
- this._tooltipCancelShowFn = this._renderer.listen(this._elementRef.nativeElement, trigger.close, (/**
- * @return {?}
- */
- () => {
- _timer.unsubscribe();
- cancelDelayedTooltipShowing();
- }));
- }));
- }
- }
- else {
- showTooltip();
- }
- }
- /**
- * Closes an element’s tooltip. This is considered a “manual” triggering of
- * the tooltip.
- * @return {?}
- */
- hide() {
- if (this._delayTimeoutId) {
- clearTimeout(this._delayTimeoutId);
- this._delayTimeoutId = undefined;
- }
- if (!this._tooltip.isShown) {
- return;
- }
- this._tooltip.instance.classMap.in = false;
- setTimeout((/**
- * @return {?}
- */
- () => {
- this._tooltip.hide();
- }), this.tooltipFadeDuration);
- }
- /**
- * @return {?}
- */
- ngOnDestroy() {
- this._tooltip.dispose();
- }
- }
- TooltipDirective.decorators = [
- { type: Directive, args: [{
- selector: '[tooltip], [tooltipHtml]',
- exportAs: 'bs-tooltip'
- },] }
- ];
- /** @nocollapse */
- 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 }],
- 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',] }],
- ariaDescribedby: [{ type: HostBinding, args: ['attr.aria-describedby',] }],
- tooltipStateChanged: [{ type: Output }]
- };
- __decorate([
- OnChange(),
- __metadata("design:type", Object)
- ], TooltipDirective.prototype, "tooltip", void 0);
- /**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
- class TooltipModule {
- /**
- * @return {?}
- */
- static forRoot() {
- return {
- ngModule: TooltipModule,
- providers: [TooltipConfig, ComponentLoaderFactory, PositioningService]
- };
- }
- }
- TooltipModule.decorators = [
- { type: NgModule, args: [{
- imports: [CommonModule],
- declarations: [TooltipDirective, TooltipContainerComponent],
- exports: [TooltipDirective],
- entryComponents: [TooltipContainerComponent]
- },] }
- ];
- export { TooltipConfig, TooltipContainerComponent, TooltipDirective, TooltipModule };
- //# sourceMappingURL=ngx-bootstrap-tooltip.js.map
|