ionic4-tooltips
Version:
Tooltips module for Ionic 2+ and Angular 8+ apps
59 lines • 7.5 kB
JavaScript
import { animate, state, style, transition, trigger } from '@angular/animations';
import { ChangeDetectionStrategy, Component, ElementRef, HostBinding, Input, Renderer2 } from '@angular/core';
export class TooltipBoxComponent {
constructor(elementRef, rnd) {
this.elementRef = elementRef;
this.rnd = rnd;
this.fadeState = 'invisible';
this.role = 'status';
this.tooltipStyles = {};
this.init = new Promise((resolve) => {
this.initResolve = resolve;
});
}
set arrow(side) {
this.rnd.setAttribute(this.getNativeElement(), 'class', 'has-arrow ' + 'arrow-' + side);
}
set posTop(val) {
this.rnd.setStyle(this.getNativeElement(), 'top', val + 'px');
}
set posLeft(val) {
this.rnd.setStyle(this.getNativeElement(), 'left', val + 'px');
}
getNativeElement() {
return this.elementRef.nativeElement;
}
ngAfterViewInit() {
this.initResolve();
}
}
TooltipBoxComponent.decorators = [
{ type: Component, args: [{
selector: 'tooltip-box',
template: "<div class=\"tooltip-box\"\n [attr.aria-role]=\"role\"\n [ngStyle]=\"tooltipStyles\">\n <div *ngIf=\"tooltipHtml; else txt\" [innerHTML]=\"tooltipHtml\"></div>\n\n <ng-template #txt><div [innerHtml]=\"text\"></div></ng-template>\n</div>\n",
animations: [
trigger('fade', [
state('visible', style({ opacity: 1 })),
state('invisible', style({ opacity: 0 })),
transition('visible <=> invisible', animate('300ms linear'))
])
],
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [":host{background-color:rgba(0,0,0,.8);color:#fff;display:inline-block;font-size:15px;padding:15px 25px;position:fixed;z-index:3}:host.has-arrow:before{border:5px solid transparent;content:\"\";height:0;position:absolute;width:0}:host.has-arrow.arrow-top:before{border-bottom:5px solid rgba(0,0,0,.8);top:-10px}:host.has-arrow.arrow-left:before{border-right:5px solid rgba(0,0,0,.8);left:-10px}:host.has-arrow.arrow-right:before{border-left:5px solid rgba(0,0,0,.8);right:-10px}:host.has-arrow.arrow-bottom:before{border-top:5px solid rgba(0,0,0,.8);bottom:-10px}"]
},] }
];
TooltipBoxComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: Renderer2 }
];
TooltipBoxComponent.propDecorators = {
fadeState: [{ type: HostBinding, args: ['@fade',] }],
role: [{ type: Input }],
text: [{ type: Input }],
tooltipHtml: [{ type: Input }],
tooltipStyles: [{ type: Input }],
arrow: [{ type: Input }],
posTop: [{ type: Input }],
posLeft: [{ type: Input }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9vbHRpcC1ib3guY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Ii4uLy4uLy4uL3NyYy8iLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvdG9vbHRpcC1ib3gvdG9vbHRpcC1ib3guY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxVQUFVLEVBQUUsT0FBTyxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDakYsT0FBTyxFQUVMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsVUFBVSxFQUNWLFdBQVcsRUFDWCxLQUFLLEVBQ0wsU0FBUyxFQUNWLE1BQU0sZUFBZSxDQUFDO0FBaUJ2QixNQUFNLE9BQU8sbUJBQW1CO0lBdUM5QixZQUNTLFVBQXFCLEVBQ3BCLEdBQWE7UUFEZCxlQUFVLEdBQVYsVUFBVSxDQUFXO1FBQ3BCLFFBQUcsR0FBSCxHQUFHLENBQVU7UUFwQ0QsY0FBUyxHQUFVLFdBQVcsQ0FBQztRQUU1QyxTQUFJLEdBQVUsUUFBUSxDQUFDO1FBR3ZCLGtCQUFhLEdBQTRCLEVBQUUsQ0FBQztRQWlDbkQsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLE9BQU8sQ0FDckIsQ0FBQyxPQUFPLEVBQUUsRUFBRTtZQUNWLElBQUksQ0FBQyxXQUFXLEdBQUcsT0FBTyxDQUFDO1FBQy9CLENBQUMsQ0FDQSxDQUFDO0lBQ0osQ0FBQztJQXBDRCxJQUNJLEtBQUssQ0FBQyxJQUFXO1FBQ25CLElBQUksQ0FBQyxHQUFHLENBQUMsWUFBWSxDQUNuQixJQUFJLENBQUMsZ0JBQWdCLEVBQUUsRUFDdkIsT0FBTyxFQUNQLFlBQVksR0FBRyxRQUFRLEdBQUcsSUFBSSxDQUMvQixDQUFDO0lBQ0osQ0FBQztJQUVELElBQ0ksTUFBTSxDQUFDLEdBQVU7UUFDbkIsSUFBSSxDQUFDLEdBQUcsQ0FBQyxRQUFRLENBQ2YsSUFBSSxDQUFDLGdCQUFnQixFQUFFLEVBQ3ZCLEtBQUssRUFDTCxHQUFHLEdBQUcsSUFBSSxDQUNYLENBQUM7SUFDSixDQUFDO0lBRUQsSUFDSSxPQUFPLENBQUMsR0FBVTtRQUNwQixJQUFJLENBQUMsR0FBRyxDQUFDLFFBQVEsQ0FDZixJQUFJLENBQUMsZ0JBQWdCLEVBQUUsRUFDdkIsTUFBTSxFQUNOLEdBQUcsR0FBRyxJQUFJLENBQ1gsQ0FBQztJQUNKLENBQUM7SUFhRCxnQkFBZ0I7UUFDZCxPQUFPLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDO0lBQ3ZDLENBQUM7SUFFRCxlQUFlO1FBQ2IsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ3JCLENBQUM7OztZQXZFRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFLLGFBQWE7Z0JBQzFCLG9RQUF5QztnQkFJekMsVUFBVSxFQUFFO29CQUNWLE9BQU8sQ0FBQyxNQUFNLEVBQUU7d0JBQ2QsS0FBSyxDQUFDLFNBQVMsRUFBRSxLQUFLLENBQUMsRUFBRSxPQUFPLEVBQUUsQ0FBQyxFQUFFLENBQUMsQ0FBQzt3QkFDdkMsS0FBSyxDQUFDLFdBQVcsRUFBRSxLQUFLLENBQUMsRUFBRSxPQUFPLEVBQUUsQ0FBQyxFQUFFLENBQUMsQ0FBQzt3QkFDekMsVUFBVSxDQUFDLHVCQUF1QixFQUFFLE9BQU8sQ0FBQyxjQUFjLENBQUMsQ0FBQztxQkFDN0QsQ0FBQztpQkFDSDtnQkFDRCxlQUFlLEVBQUMsdUJBQXVCLENBQUMsTUFBTTs7YUFDL0M7OztZQXBCQyxVQUFVO1lBR1YsU0FBUzs7O3dCQXVCUixXQUFXLFNBQUMsT0FBTzttQkFFbkIsS0FBSzttQkFDTCxLQUFLOzBCQUNMLEtBQUs7NEJBQ0wsS0FBSztvQkFFTCxLQUFLO3FCQVNMLEtBQUs7c0JBU0wsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGFuaW1hdGUsIHN0YXRlLCBzdHlsZSwgdHJhbnNpdGlvbiwgdHJpZ2dlciB9IGZyb20gJ0Bhbmd1bGFyL2FuaW1hdGlvbnMnO1xuaW1wb3J0IHtcbiAgQWZ0ZXJWaWV3SW5pdCxcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRWxlbWVudFJlZixcbiAgSG9zdEJpbmRpbmcsXG4gIElucHV0LFxuICBSZW5kZXJlcjJcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogICAgJ3Rvb2x0aXAtYm94JyxcbiAgdGVtcGxhdGVVcmw6ICd0b29sdGlwLWJveC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogW1xuICAgICd0b29sdGlwLWJveC5jb21wb25lbnQuc2NzcydcbiAgXSxcbiAgYW5pbWF0aW9uczogW1xuICAgIHRyaWdnZXIoJ2ZhZGUnLCBbXG4gICAgICBzdGF0ZSgndmlzaWJsZScsIHN0eWxlKHsgb3BhY2l0eTogMSB9KSksXG4gICAgICBzdGF0ZSgnaW52aXNpYmxlJywgc3R5bGUoeyBvcGFjaXR5OiAwIH0pKSxcbiAgICAgIHRyYW5zaXRpb24oJ3Zpc2libGUgPD0+IGludmlzaWJsZScsIGFuaW1hdGUoJzMwMG1zIGxpbmVhcicpKVxuICAgIF0pXG4gIF0sXG4gIGNoYW5nZURldGVjdGlvbjpDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2hcbn0pXG5leHBvcnQgY2xhc3MgVG9vbHRpcEJveENvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQge1xuICBwcml2YXRlIGluaXRSZXNvbHZlOkZ1bmN0aW9uO1xuXG4gIHB1YmxpYyBpbml0OlByb21pc2U8dm9pZD47XG5cbiAgQEhvc3RCaW5kaW5nKCdAZmFkZScpIGZhZGVTdGF0ZTpzdHJpbmcgPSAnaW52aXNpYmxlJztcblxuICBASW5wdXQoKSByb2xlOnN0cmluZyA9ICdzdGF0dXMnO1xuICBASW5wdXQoKSB0ZXh0OnN0cmluZztcbiAgQElucHV0KCkgdG9vbHRpcEh0bWw6c3RyaW5nO1xuICBASW5wdXQoKSB0b29sdGlwU3R5bGVzOnsgW2tleTpzdHJpbmddOnN0cmluZzsgfSA9IHt9O1xuXG4gIEBJbnB1dCgpXG4gIHNldCBhcnJvdyhzaWRlOnN0cmluZykge1xuICAgIHRoaXMucm5kLnNldEF0dHJpYnV0ZShcbiAgICAgIHRoaXMuZ2V0TmF0aXZlRWxlbWVudCgpLFxuICAgICAgJ2NsYXNzJyxcbiAgICAgICdoYXMtYXJyb3cgJyArICdhcnJvdy0nICsgc2lkZVxuICAgICk7XG4gIH1cblxuICBASW5wdXQoKVxuICBzZXQgcG9zVG9wKHZhbDpudW1iZXIpIHtcbiAgICB0aGlzLnJuZC5zZXRTdHlsZShcbiAgICAgIHRoaXMuZ2V0TmF0aXZlRWxlbWVudCgpLFxuICAgICAgJ3RvcCcsXG4gICAgICB2YWwgKyAncHgnXG4gICAgKTtcbiAgfVxuXG4gIEBJbnB1dCgpXG4gIHNldCBwb3NMZWZ0KHZhbDpudW1iZXIpIHtcbiAgICB0aGlzLnJuZC5zZXRTdHlsZShcbiAgICAgIHRoaXMuZ2V0TmF0aXZlRWxlbWVudCgpLFxuICAgICAgJ2xlZnQnLFxuICAgICAgdmFsICsgJ3B4J1xuICAgICk7XG4gIH1cblxuICBjb25zdHJ1Y3RvcihcbiAgICBwdWJsaWMgZWxlbWVudFJlZjpFbGVtZW50UmVmLFxuICAgIHByaXZhdGUgcm5kOlJlbmRlcmVyMlxuICApIHtcbiAgICB0aGlzLmluaXQgPSBuZXcgUHJvbWlzZTx2b2lkPihcbiAgICAgIChyZXNvbHZlKSA9PiB7XG4gICAgICAgIHRoaXMuaW5pdFJlc29sdmUgPSByZXNvbHZlO1xuICAgIH1cbiAgICApO1xuICB9XG5cbiAgZ2V0TmF0aXZlRWxlbWVudCgpOkhUTUxFbGVtZW50IHtcbiAgICByZXR1cm4gdGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQ7XG4gIH1cblxuICBuZ0FmdGVyVmlld0luaXQoKTp2b2lkIHtcbiAgICB0aGlzLmluaXRSZXNvbHZlKCk7XG4gIH1cbn1cbiJdfQ==