@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>
174 lines • 11.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;
this.content = '';
this.trigger = 'hover';
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;
/** @type {?} */
Tooltip.prototype.content;
/** @type {?} */
Tooltip.prototype.trigger;
/** @type {?} */
Tooltip.prototype.position;
/** @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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Ozs7SUFDdEQsNkJBQThCIiwic291cmNlc0NvbnRlbnQiOlsiLy8gdHNsaW50OmRpc2FibGU6IG5vLWlucHV0LXJlbmFtZVxuXG5pbXBvcnQgeyBDb21wb25lbnRSZWYsIERpcmVjdGl2ZSwgRWxlbWVudFJlZiwgSG9zdExpc3RlbmVyLCBJbnB1dCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBPdmVybGF5LCBPdmVybGF5UG9zaXRpb25CdWlsZGVyLCBPdmVybGF5UmVmLCBDb25uZWN0ZWRQb3NpdGlvbiwgQ2xvc2VTY3JvbGxTdHJhdGVneSB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9vdmVybGF5JztcbmltcG9ydCB7IENvbXBvbmVudFBvcnRhbCB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9wb3J0YWwnO1xuXG5pbXBvcnQgeyBUb29sdGlwQ29udGFpbmVyIH0gZnJvbSAnLi90b29sdGlwLWNvbnRhaW5lci5jb21wb25lbnQnO1xuaW1wb3J0IHsgVG9vbHRpcENvbnRlbnQgfSBmcm9tICcuL3Rvb2x0aXAtY29udGVudC50eXBlJztcblxuY29uc3QgcG9zaXRpb25zID0ge1xuICB0b3A6IHtcbiAgICBvcmlnaW5YOiAnY2VudGVyJyxcbiAgICBvcmlnaW5ZOiAndG9wJyxcbiAgICBvdmVybGF5WDogJ2NlbnRlcicsXG4gICAgb3ZlcmxheVk6ICdib3R0b20nLFxuICAgIG9mZnNldFk6IC04LFxuICB9LFxuICByaWdodDoge1xuICAgIG9yaWdpblg6ICdlbmQnLFxuICAgIG9yaWdpblk6ICdjZW50ZXInLFxuICAgIG92ZXJsYXlYOiAnc3RhcnQnLFxuICAgIG92ZXJsYXlZOiAnY2VudGVyJyxcbiAgICBvZmZzZXRYOiA4LFxuICB9LFxuICBib3R0b206IHtcbiAgICBvcmlnaW5YOiAnY2VudGVyJyxcbiAgICBvcmlnaW5ZOiAnYm90dG9tJyxcbiAgICBvdmVybGF5WDogJ2NlbnRlcicsXG4gICAgb3ZlcmxheVk6ICd0b3AnLFxuICAgIG9mZnNldFk6IDgsXG4gIH0sXG4gIGxlZnQ6IHtcbiAgICBvcmlnaW5YOiAnc3RhcnQnLFxuICAgIG9yaWdpblk6ICdjZW50ZXInLFxuICAgIG92ZXJsYXlYOiAnZW5kJyxcbiAgICBvdmVybGF5WTogJ2NlbnRlcicsXG4gICAgb2Zmc2V0WDogLTgsXG4gIH1cbn07XG5cbkBEaXJlY3RpdmUoeyBzZWxlY3RvcjogJ1tzdWthVG9vbHRpcF0nIH0pXG5leHBvcnQgY2xhc3MgVG9vbHRpcCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIHByaXZhdGUgb3ZlcmxheVJlZjogT3ZlcmxheVJlZjtcbiAgcHJpdmF0ZSBvcGVuID0gZmFsc2U7XG5cbiAgQElucHV0KCdzdWthVG9vbHRpcCcpIGNvbnRlbnQ6IFRvb2x0aXBDb250ZW50ID0gJyc7XG4gIEBJbnB1dCgndG9vbHRpcFRyaWdnZXInKSB0cmlnZ2VyOiAnaG92ZXInIHwgJ2NsaWNrJyA9ICdob3Zlcic7XG4gIEBJbnB1dCgndG9vbHRpcFBvc2l0aW9uJykgcG9zaXRpb246ICd0b3AnIHwgJ2JvdHRvbScgfCAnbGVmdCcgfCAncmlnaHQnID0gJ2JvdHRvbSc7XG4gIEBJbnB1dCgndG9vbHRpcER1cmF0aW9uJykgZHVyYXRpb246IG51bWJlcjtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIG92ZXJsYXk6IE92ZXJsYXksXG4gICAgICAgICAgICAgIHByaXZhdGUgb3ZlcmxheVBvc2l0aW9uQnVpbGRlcjogT3ZlcmxheVBvc2l0aW9uQnVpbGRlcixcbiAgICAgICAgICAgICAgcHJpdmF0ZSBlbGVtZW50UmVmOiBFbGVtZW50UmVmKSB7XG4gIH1cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICBjb25zdCBwb3NpdGlvblN0cmF0ZWd5ID0gdGhpcy5vdmVybGF5UG9zaXRpb25CdWlsZGVyXG4gICAgICAuZmxleGlibGVDb25uZWN0ZWRUbyh0aGlzLmVsZW1lbnRSZWYpXG4gICAgICAud2l0aFBvc2l0aW9ucyhbIHBvc2l0aW9uc1t0aGlzLnBvc2l0aW9uXSBhcyBDb25uZWN0ZWRQb3NpdGlvbl0pO1xuXG4gICAgdGhpcy5vdmVybGF5UmVmID0gdGhpcy5vdmVybGF5LmNyZWF0ZSh7XG4gICAgICBwb3NpdGlvblN0cmF0ZWd5LFxuICAgICAgc2Nyb2xsU3RyYXRlZ3k6IHRoaXMub3ZlcmxheS5zY3JvbGxTdHJhdGVnaWVzLmNsb3NlKCksXG4gICAgfSk7XG4gIH1cblxuICBwcml2YXRlIHNob3coKSB7XG4gICAgdGhpcy5vcGVuID0gdHJ1ZTtcbiAgICBjb25zdCB0b29sdGlwUmVmOiBDb21wb25lbnRSZWY8VG9vbHRpcENvbnRhaW5lcj5cbiAgICAgID0gdGhpcy5vdmVybGF5UmVmLmF0dGFjaChuZXcgQ29tcG9uZW50UG9ydGFsKFRvb2x0aXBDb250YWluZXIpKTtcblxuICAgIHRvb2x0aXBSZWYuaW5zdGFuY2UuY29udGVudCA9IHRoaXMuY29udGVudDtcbiAgICB0b29sdGlwUmVmLmluc3RhbmNlLnBvc2l0aW9uID0gdGhpcy5wb3NpdGlvbjtcbiAgfVxuXG4gIHByaXZhdGUgaGlkZSgpIHtcbiAgICB0aGlzLm9wZW4gPSBmYWxzZTtcbiAgICB0aGlzLm92ZXJsYXlSZWYuZGV0YWNoKCk7XG4gIH1cblxuICBASG9zdExpc3RlbmVyKCdtb3VzZWVudGVyJylcbiAgb25Nb3VzZUVudGVyKCkge1xuICAgIGlmICh0aGlzLnRyaWdnZXIgPT09ICdob3ZlcicpIHtcbiAgICAgIHRoaXMuc2hvdygpO1xuICAgIH1cbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ21vdXNlb3V0JylcbiAgb25Nb3VzZU91dCgpIHtcbiAgICBpZiAodGhpcy50cmlnZ2VyID09PSAnaG92ZXInKSB7XG4gICAgICB0aGlzLmhpZGUoKTtcbiAgICB9XG4gIH1cblxuICBASG9zdExpc3RlbmVyKCdjbGljaycpXG4gIG9uQ2xpY2soKSB7XG4gICAgaWYgKHRoaXMudHJpZ2dlciA9PT0gJ2NsaWNrJykge1xuICAgICAgdGhpcy5vcGVuID8gdGhpcy5oaWRlKCkgOiB0aGlzLnNob3coKTtcblxuICAgICAgaWYgKHRoaXMuZHVyYXRpb24pIHtcbiAgICAgICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICAgICAgdGhpcy5oaWRlKCk7XG4gICAgICAgIH0sIHRoaXMuZHVyYXRpb24pO1xuICAgICAgfVxuICAgIH1cbiAgfVxufVxuIl19