ngx-bootstrap
Version:
Native Angular Bootstrap Components
315 lines • 12.2 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { Directive, ElementRef, EventEmitter, Input, Output, Renderer2, ViewContainerRef } from '@angular/core';
import { TooltipContainerComponent } from './tooltip-container.component';
import { TooltipConfig } from './tooltip.config';
import { ComponentLoaderFactory } from '../component-loader/index';
import { OnChange } from '../utils/decorators';
import { warnOnce } from '../utils/warn-once';
import { parseTriggers } from '../utils/triggers';
import { timer } from 'rxjs';
var TooltipDirective = /** @class */ (function () {
function TooltipDirective(_viewContainerRef, _renderer, _elementRef, cis, config) {
this._renderer = _renderer;
this._elementRef = _elementRef;
/** Fired when tooltip content changes */
this.tooltipChange = new EventEmitter();
/**
* Css class for tooltip container
*/
this.containerClass = '';
/** @deprecated - removed, will be added to configuration */
this._animation = true;
/** @deprecated */
this._fadeDuration = 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;
}
Object.defineProperty(TooltipDirective.prototype, "isOpen", {
get: /**
* Returns whether or not the tooltip is currently being shown
*/
function () {
return this._tooltip.isShown;
},
set: function (value) {
if (value) {
this.show();
}
else {
this.hide();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(TooltipDirective.prototype, "htmlContent", {
set: /** @deprecated - please use `tooltip` instead */
function (value) {
warnOnce('tooltipHtml was deprecated, please use `tooltip` instead');
this.tooltip = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TooltipDirective.prototype, "_placement", {
set: /** @deprecated - please use `placement` instead */
function (value) {
warnOnce('tooltipPlacement was deprecated, please use `placement` instead');
this.placement = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TooltipDirective.prototype, "_isOpen", {
get: function () {
warnOnce('tooltipIsOpen was deprecated, please use `isOpen` instead');
return this.isOpen;
},
set: /** @deprecated - please use `isOpen` instead*/
function (value) {
warnOnce('tooltipIsOpen was deprecated, please use `isOpen` instead');
this.isOpen = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TooltipDirective.prototype, "_enable", {
get: function () {
warnOnce('tooltipEnable was deprecated, please use `isDisabled` instead');
return this.isDisabled;
},
set: /** @deprecated - please use `isDisabled` instead */
function (value) {
warnOnce('tooltipEnable was deprecated, please use `isDisabled` instead');
this.isDisabled = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TooltipDirective.prototype, "_appendToBody", {
get: function () {
warnOnce('tooltipAppendToBody was deprecated, please use `container="body"` instead');
return this.container === 'body';
},
set: /** @deprecated - please use `container="body"` instead */
function (value) {
warnOnce('tooltipAppendToBody was deprecated, please use `container="body"` instead');
this.container = value ? 'body' : this.container;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TooltipDirective.prototype, "_popupClass", {
set: /** @deprecated - will replaced with customClass */
function (value) {
warnOnce('tooltipClass deprecated');
},
enumerable: true,
configurable: true
});
Object.defineProperty(TooltipDirective.prototype, "_tooltipContext", {
set: /** @deprecated - removed */
function (value) {
warnOnce('tooltipContext deprecated');
},
enumerable: true,
configurable: true
});
Object.defineProperty(TooltipDirective.prototype, "_tooltipPopupDelay", {
set: /** @deprecated */
function (value) {
warnOnce('tooltipPopupDelay is deprecated, use `delay` instead');
this.delay = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TooltipDirective.prototype, "_tooltipTrigger", {
get: /** @deprecated - please use `triggers` instead */
function () {
warnOnce('tooltipTrigger was deprecated, please use `triggers` instead');
return this.triggers;
},
set: function (value) {
warnOnce('tooltipTrigger was deprecated, please use `triggers` instead');
this.triggers = (value || '').toString();
},
enumerable: true,
configurable: true
});
TooltipDirective.prototype.ngOnInit = function () {
var _this = this;
this._tooltip.listen({
triggers: this.triggers,
show: function () { return _this.show(); }
});
this.tooltipChange.subscribe(function (value) {
if (!value) {
_this._tooltip.hide();
}
});
};
/**
* Toggles an element’s tooltip. This is considered a “manual” triggering of
* the tooltip.
*/
/**
* Toggles an element’s tooltip. This is considered a “manual” triggering of
* the tooltip.
*/
TooltipDirective.prototype.toggle = /**
* Toggles an element’s tooltip. This is considered a “manual” triggering of
* the tooltip.
*/
function () {
if (this.isOpen) {
return this.hide();
}
this.show();
};
/**
* Opens an element’s tooltip. This is considered a “manual” triggering of
* the tooltip.
*/
/**
* Opens an element’s tooltip. This is considered a “manual” triggering of
* the tooltip.
*/
TooltipDirective.prototype.show = /**
* Opens an element’s tooltip. This is considered a “manual” triggering of
* the tooltip.
*/
function () {
var _this = this;
if (this.isOpen ||
this.isDisabled ||
this._delayTimeoutId ||
!this.tooltip) {
return;
}
var showTooltip = function () {
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
});
};
var cancelDelayedTooltipShowing = function () {
if (_this._tooltipCancelShowFn) {
_this._tooltipCancelShowFn();
}
};
if (this.delay) {
var _timer_1 = timer(this.delay).subscribe(function () {
showTooltip();
cancelDelayedTooltipShowing();
});
if (this.triggers) {
var triggers = parseTriggers(this.triggers);
this._tooltipCancelShowFn = this._renderer.listen(this._elementRef.nativeElement, triggers[0].close, function () {
_timer_1.unsubscribe();
cancelDelayedTooltipShowing();
});
}
}
else {
showTooltip();
}
};
/**
* Closes an element’s tooltip. This is considered a “manual” triggering of
* the tooltip.
*/
/**
* Closes an element’s tooltip. This is considered a “manual” triggering of
* the tooltip.
*/
TooltipDirective.prototype.hide = /**
* Closes an element’s tooltip. This is considered a “manual” triggering of
* the tooltip.
*/
function () {
var _this = this;
if (this._delayTimeoutId) {
clearTimeout(this._delayTimeoutId);
this._delayTimeoutId = undefined;
}
if (!this._tooltip.isShown) {
return;
}
this._tooltip.instance.classMap.in = false;
setTimeout(function () {
_this._tooltip.hide();
}, this._fadeDuration);
};
TooltipDirective.prototype.ngOnDestroy = function () {
this._tooltip.dispose();
};
TooltipDirective.decorators = [
{ type: Directive, args: [{
selector: '[tooltip], [tooltipHtml]',
exportAs: 'bs-tooltip'
},] },
];
/** @nocollapse */
TooltipDirective.ctorParameters = function () { return [
{ type: ViewContainerRef, },
{ type: Renderer2, },
{ type: ElementRef, },
{ type: ComponentLoaderFactory, },
{ type: TooltipConfig, },
]; };
TooltipDirective.propDecorators = {
"tooltip": [{ type: Input },],
"tooltipChange": [{ type: Output },],
"placement": [{ type: Input },],
"triggers": [{ type: Input },],
"container": [{ type: Input },],
"isOpen": [{ type: Input },],
"isDisabled": [{ type: Input },],
"containerClass": [{ 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',] },],
"_animation": [{ type: Input, args: ['tooltipAnimation',] },],
"_popupClass": [{ type: Input, args: ['tooltipClass',] },],
"_tooltipContext": [{ type: Input, args: ['tooltipContext',] },],
"_tooltipPopupDelay": [{ type: Input, args: ['tooltipPopupDelay',] },],
"_fadeDuration": [{ type: Input, args: ['tooltipFadeDuration',] },],
"_tooltipTrigger": [{ type: Input, args: ['tooltipTrigger',] },],
"tooltipStateChanged": [{ type: Output },],
};
__decorate([
OnChange(),
__metadata("design:type", Object)
], TooltipDirective.prototype, "tooltip", void 0);
return TooltipDirective;
}());
export { TooltipDirective };
//# sourceMappingURL=tooltip.directive.js.map