@kushki/ng-suka
Version:
<p align="center"> <h1 align="center">Suka Components Angular</h1> <p align="center"> An Angular implementation of the Suka Design System </p> </p>
195 lines • 12.8 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
// tslint:disable: no-input-rename
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
import { Overlay, OverlayPositionBuilder } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';
import { TooltipContainer } from './tooltip-container.component';
/** @type {?} */
const positions = {
top: {
originX: 'center',
originY: 'top',
overlayX: 'center',
overlayY: 'bottom',
offsetY: -8,
},
right: {
originX: 'end',
originY: 'center',
overlayX: 'start',
overlayY: 'center',
offsetX: 8,
},
bottom: {
originX: 'center',
originY: 'bottom',
overlayX: 'center',
overlayY: 'top',
offsetY: 8,
},
left: {
originX: 'start',
originY: 'center',
overlayX: 'end',
overlayY: 'center',
offsetX: -8,
}
};
export class Tooltip {
/**
* @param {?} overlay
* @param {?} overlayPositionBuilder
* @param {?} elementRef
*/
constructor(overlay, overlayPositionBuilder, elementRef) {
this.overlay = overlay;
this.overlayPositionBuilder = overlayPositionBuilder;
this.elementRef = elementRef;
this.open = false;
/**
* The tooltip content
*/
this.content = '';
/**
* Sets the tooltip trigger behaviour. Defaults to `hover`.
*/
this.trigger = 'hover';
/**
* Sets the tooltip position according to the trigger component.
*/
this.position = 'bottom';
}
/**
* @return {?}
*/
ngOnInit() {
/** @type {?} */
const positionStrategy = this.overlayPositionBuilder
.flexibleConnectedTo(this.elementRef)
.withPositions([(/** @type {?} */ (positions[this.position]))]);
this.overlayRef = this.overlay.create({
positionStrategy,
scrollStrategy: this.overlay.scrollStrategies.close(),
});
}
/**
* @private
* @return {?}
*/
show() {
this.open = true;
/** @type {?} */
const tooltipRef = this.overlayRef.attach(new ComponentPortal(TooltipContainer));
tooltipRef.instance.content = this.content;
tooltipRef.instance.position = this.position;
}
/**
* @private
* @return {?}
*/
hide() {
this.open = false;
this.overlayRef.detach();
}
/**
* @return {?}
*/
onMouseEnter() {
if (this.trigger === 'hover') {
this.show();
}
}
/**
* @return {?}
*/
onMouseOut() {
if (this.trigger === 'hover') {
this.hide();
}
}
/**
* @return {?}
*/
onClick() {
if (this.trigger === 'click') {
this.open ? this.hide() : this.show();
if (this.duration) {
setTimeout((/**
* @return {?}
*/
() => {
this.hide();
}), this.duration);
}
}
}
}
Tooltip.decorators = [
{ type: Directive, args: [{ selector: '[sukaTooltip]' },] }
];
/** @nocollapse */
Tooltip.ctorParameters = () => [
{ type: Overlay },
{ type: OverlayPositionBuilder },
{ type: ElementRef }
];
Tooltip.propDecorators = {
content: [{ type: Input, args: ['sukaTooltip',] }],
trigger: [{ type: Input, args: ['tooltipTrigger',] }],
position: [{ type: Input, args: ['tooltipPosition',] }],
duration: [{ type: Input, args: ['tooltipDuration',] }],
onMouseEnter: [{ type: HostListener, args: ['mouseenter',] }],
onMouseOut: [{ type: HostListener, args: ['mouseout',] }],
onClick: [{ type: HostListener, args: ['click',] }]
};
if (false) {
/**
* @type {?}
* @private
*/
Tooltip.prototype.overlayRef;
/**
* @type {?}
* @private
*/
Tooltip.prototype.open;
/**
* The tooltip content
* @type {?}
*/
Tooltip.prototype.content;
/**
* Sets the tooltip trigger behaviour. Defaults to `hover`.
* @type {?}
*/
Tooltip.prototype.trigger;
/**
* Sets the tooltip position according to the trigger component.
* @type {?}
*/
Tooltip.prototype.position;
/**
* Sets a duration for the tooltip. If not set, it runs indefinitely.
* @type {?}
*/
Tooltip.prototype.duration;
/**
* @type {?}
* @private
*/
Tooltip.prototype.overlay;
/**
* @type {?}
* @private
*/
Tooltip.prototype.overlayPositionBuilder;
/**
* @type {?}
* @private
*/
Tooltip.prototype.elementRef;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9vbHRpcC5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9Aa3VzaGtpL25nLXN1a2EvIiwic291cmNlcyI6WyJsaWIvdG9vbHRpcC90b29sdGlwLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7OztBQUVBLE9BQU8sRUFBZ0IsU0FBUyxFQUFFLFVBQVUsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDO0FBQ2pHLE9BQU8sRUFBRSxPQUFPLEVBQUUsc0JBQXNCLEVBQXNELE1BQU0sc0JBQXNCLENBQUM7QUFDM0gsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHFCQUFxQixDQUFDO0FBRXRELE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLCtCQUErQixDQUFDOztNQUczRCxTQUFTLEdBQUc7SUFDaEIsR0FBRyxFQUFFO1FBQ0gsT0FBTyxFQUFFLFFBQVE7UUFDakIsT0FBTyxFQUFFLEtBQUs7UUFDZCxRQUFRLEVBQUUsUUFBUTtRQUNsQixRQUFRLEVBQUUsUUFBUTtRQUNsQixPQUFPLEVBQUUsQ0FBQyxDQUFDO0tBQ1o7SUFDRCxLQUFLLEVBQUU7UUFDTCxPQUFPLEVBQUUsS0FBSztRQUNkLE9BQU8sRUFBRSxRQUFRO1FBQ2pCLFFBQVEsRUFBRSxPQUFPO1FBQ2pCLFFBQVEsRUFBRSxRQUFRO1FBQ2xCLE9BQU8sRUFBRSxDQUFDO0tBQ1g7SUFDRCxNQUFNLEVBQUU7UUFDTixPQUFPLEVBQUUsUUFBUTtRQUNqQixPQUFPLEVBQUUsUUFBUTtRQUNqQixRQUFRLEVBQUUsUUFBUTtRQUNsQixRQUFRLEVBQUUsS0FBSztRQUNmLE9BQU8sRUFBRSxDQUFDO0tBQ1g7SUFDRCxJQUFJLEVBQUU7UUFDSixPQUFPLEVBQUUsT0FBTztRQUNoQixPQUFPLEVBQUUsUUFBUTtRQUNqQixRQUFRLEVBQUUsS0FBSztRQUNmLFFBQVEsRUFBRSxRQUFRO1FBQ2xCLE9BQU8sRUFBRSxDQUFDLENBQUM7S0FDWjtDQUNGO0FBR0Qs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QUF3Qjs7Ozs7SUFDeEIseUNBQXNEOzs7OztJQUN0RCw2QkFBOEIiLCJzb3VyY2VzQ29udGVudCI6WyIvLyB0c2xpbnQ6ZGlzYWJsZTogbm8taW5wdXQtcmVuYW1lXG5cbmltcG9ydCB7IENvbXBvbmVudFJlZiwgRGlyZWN0aXZlLCBFbGVtZW50UmVmLCBIb3N0TGlzdGVuZXIsIElucHV0LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE92ZXJsYXksIE92ZXJsYXlQb3NpdGlvbkJ1aWxkZXIsIE92ZXJsYXlSZWYsIENvbm5lY3RlZFBvc2l0aW9uLCBDbG9zZVNjcm9sbFN0cmF0ZWd5IH0gZnJvbSAnQGFuZ3VsYXIvY2RrL292ZXJsYXknO1xuaW1wb3J0IHsgQ29tcG9uZW50UG9ydGFsIH0gZnJvbSAnQGFuZ3VsYXIvY2RrL3BvcnRhbCc7XG5cbmltcG9ydCB7IFRvb2x0aXBDb250YWluZXIgfSBmcm9tICcuL3Rvb2x0aXAtY29udGFpbmVyLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBUb29sdGlwQ29udGVudCB9IGZyb20gJy4vdG9vbHRpcC1jb250ZW50LnR5cGUnO1xuXG5jb25zdCBwb3NpdGlvbnMgPSB7XG4gIHRvcDoge1xuICAgIG9yaWdpblg6ICdjZW50ZXInLFxuICAgIG9yaWdpblk6ICd0b3AnLFxuICAgIG92ZXJsYXlYOiAnY2VudGVyJyxcbiAgICBvdmVybGF5WTogJ2JvdHRvbScsXG4gICAgb2Zmc2V0WTogLTgsXG4gIH0sXG4gIHJpZ2h0OiB7XG4gICAgb3JpZ2luWDogJ2VuZCcsXG4gICAgb3JpZ2luWTogJ2NlbnRlcicsXG4gICAgb3ZlcmxheVg6ICdzdGFydCcsXG4gICAgb3ZlcmxheVk6ICdjZW50ZXInLFxuICAgIG9mZnNldFg6IDgsXG4gIH0sXG4gIGJvdHRvbToge1xuICAgIG9yaWdpblg6ICdjZW50ZXInLFxuICAgIG9yaWdpblk6ICdib3R0b20nLFxuICAgIG92ZXJsYXlYOiAnY2VudGVyJyxcbiAgICBvdmVybGF5WTogJ3RvcCcsXG4gICAgb2Zmc2V0WTogOCxcbiAgfSxcbiAgbGVmdDoge1xuICAgIG9yaWdpblg6ICdzdGFydCcsXG4gICAgb3JpZ2luWTogJ2NlbnRlcicsXG4gICAgb3ZlcmxheVg6ICdlbmQnLFxuICAgIG92ZXJsYXlZOiAnY2VudGVyJyxcbiAgICBvZmZzZXRYOiAtOCxcbiAgfVxufTtcblxuQERpcmVjdGl2ZSh7IHNlbGVjdG9yOiAnW3N1a2FUb29sdGlwXScgfSlcbmV4cG9ydCBjbGFzcyBUb29sdGlwIGltcGxlbWVudHMgT25Jbml0IHtcbiAgcHJpdmF0ZSBvdmVybGF5UmVmOiBPdmVybGF5UmVmO1xuICBwcml2YXRlIG9wZW4gPSBmYWxzZTtcblxuICAvKipcbiAgICogVGhlIHRvb2x0aXAgY29udGVudFxuICAgKi9cbiAgQElucHV0KCdzdWthVG9vbHRpcCcpIGNvbnRlbnQ6IFRvb2x0aXBDb250ZW50ID0gJyc7XG4gIC8qKlxuICAgKiBTZXRzIHRoZSB0b29sdGlwIHRyaWdnZXIgYmVoYXZpb3VyLiBEZWZhdWx0cyB0byBgaG92ZXJgLlxuICAgKi9cbiAgQElucHV0KCd0b29sdGlwVHJpZ2dlcicpIHRyaWdnZXI6ICdob3ZlcicgfCAnY2xpY2snID0gJ2hvdmVyJztcbiAgLyoqXG4gICAqIFNldHMgdGhlIHRvb2x0aXAgcG9zaXRpb24gYWNjb3JkaW5nIHRvIHRoZSB0cmlnZ2VyIGNvbXBvbmVudC5cbiAgICovXG4gIEBJbnB1dCgndG9vbHRpcFBvc2l0aW9uJykgcG9zaXRpb246ICd0b3AnIHwgJ2JvdHRvbScgfCAnbGVmdCcgfCAncmlnaHQnID0gJ2JvdHRvbSc7XG4gIC8qKlxuICAgKiBTZXRzIGEgZHVyYXRpb24gZm9yIHRoZSB0b29sdGlwLiBJZiBub3Qgc2V0LCBpdCBydW5zIGluZGVmaW5pdGVseS5cbiAgICovXG4gIEBJbnB1dCgndG9vbHRpcER1cmF0aW9uJykgZHVyYXRpb246IG51bWJlcjtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIG92ZXJsYXk6IE92ZXJsYXksXG4gICAgICAgICAgICAgIHByaXZhdGUgb3ZlcmxheVBvc2l0aW9uQnVpbGRlcjogT3ZlcmxheVBvc2l0aW9uQnVpbGRlcixcbiAgICAgICAgICAgICAgcHJpdmF0ZSBlbGVtZW50UmVmOiBFbGVtZW50UmVmKSB7XG4gIH1cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICBjb25zdCBwb3NpdGlvblN0cmF0ZWd5ID0gdGhpcy5vdmVybGF5UG9zaXRpb25CdWlsZGVyXG4gICAgICAuZmxleGlibGVDb25uZWN0ZWRUbyh0aGlzLmVsZW1lbnRSZWYpXG4gICAgICAud2l0aFBvc2l0aW9ucyhbIHBvc2l0aW9uc1t0aGlzLnBvc2l0aW9uXSBhcyBDb25uZWN0ZWRQb3NpdGlvbl0pO1xuXG4gICAgdGhpcy5vdmVybGF5UmVmID0gdGhpcy5vdmVybGF5LmNyZWF0ZSh7XG4gICAgICBwb3NpdGlvblN0cmF0ZWd5LFxuICAgICAgc2Nyb2xsU3RyYXRlZ3k6IHRoaXMub3ZlcmxheS5zY3JvbGxTdHJhdGVnaWVzLmNsb3NlKCksXG4gICAgfSk7XG4gIH1cblxuICBwcml2YXRlIHNob3coKSB7XG4gICAgdGhpcy5vcGVuID0gdHJ1ZTtcbiAgICBjb25zdCB0b29sdGlwUmVmOiBDb21wb25lbnRSZWY8VG9vbHRpcENvbnRhaW5lcj5cbiAgICAgID0gdGhpcy5vdmVybGF5UmVmLmF0dGFjaChuZXcgQ29tcG9uZW50UG9ydGFsKFRvb2x0aXBDb250YWluZXIpKTtcblxuICAgIHRvb2x0aXBSZWYuaW5zdGFuY2UuY29udGVudCA9IHRoaXMuY29udGVudDtcbiAgICB0b29sdGlwUmVmLmluc3RhbmNlLnBvc2l0aW9uID0gdGhpcy5wb3NpdGlvbjtcbiAgfVxuXG4gIHByaXZhdGUgaGlkZSgpIHtcbiAgICB0aGlzLm9wZW4gPSBmYWxzZTtcbiAgICB0aGlzLm92ZXJsYXlSZWYuZGV0YWNoKCk7XG4gIH1cblxuICBASG9zdExpc3RlbmVyKCdtb3VzZWVudGVyJylcbiAgb25Nb3VzZUVudGVyKCkge1xuICAgIGlmICh0aGlzLnRyaWdnZXIgPT09ICdob3ZlcicpIHtcbiAgICAgIHRoaXMuc2hvdygpO1xuICAgIH1cbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ21vdXNlb3V0JylcbiAgb25Nb3VzZU91dCgpIHtcbiAgICBpZiAodGhpcy50cmlnZ2VyID09PSAnaG92ZXInKSB7XG4gICAgICB0aGlzLmhpZGUoKTtcbiAgICB9XG4gIH1cblxuICBASG9zdExpc3RlbmVyKCdjbGljaycpXG4gIG9uQ2xpY2soKSB7XG4gICAgaWYgKHRoaXMudHJpZ2dlciA9PT0gJ2NsaWNrJykge1xuICAgICAgdGhpcy5vcGVuID8gdGhpcy5oaWRlKCkgOiB0aGlzLnNob3coKTtcblxuICAgICAgaWYgKHRoaXMuZHVyYXRpb24pIHtcbiAgICAgICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICAgICAgdGhpcy5oaWRlKCk7XG4gICAgICAgIH0sIHRoaXMuZHVyYXRpb24pO1xuICAgICAgfVxuICAgIH1cbiAgfVxufVxuIl19